@import url("/tipografias/tipografias.css");

/* Invitaria — sistema de marca.
   ────────────────────────────────────────────────────────────────────────────
   Una sola fuente de verdad para la web de venta: landing, formulario, galería,
   panel, gracias y términos. Las invitaciones NO usan esto: cada una tiene su
   identidad y eso es el producto.

   Y esa es la decisión de fondo. Antes la web estaba vestida como una invitación
   —violeta oscuro, dorado, serif con cursiva, todo centrado— y competía con lo que
   vende: si Invitaria se ve como una invitación más, no se ve como la herramienta
   que las hace. Acá la marca se corre a un costado: papel, tinta y un solo acento
   terracota. El color fuerte lo pone la invitación del cliente, no nosotros.

   Todos los contrastes están medidos contra las dos superficies (papel y papel-2)
   antes de entrar acá; el número va anotado al lado de cada tono.

   Sin fuentes externas a propósito: cero CLS, cero dependencia de un CDN, y en un
   producto que se abre desde un anuncio cada milisegundo de carga se paga. */

:root {
  /* ── Superficies ──────────────────────────────────────────────────────────
     Papel, no blanco. El blanco puro es frío y delata la plantilla genérica. */
  --papel:        #F7F4EF;
  --papel-2:      #EFE9DF;   /* secciones alternadas */
  --papel-3:      #E5DDD0;   /* bordes de zona, chips */
  --tinta:        #241F1A;   /* superficie oscura y texto principal */
  --tinta-2:      #302A23;   /* superficie oscura elevada */

  /* ── Texto (contraste medido sobre papel / papel-2) ──────────────────────── */
  --texto:        #241F1A;   /* 14.9 / 13.5 */
  --texto-2:      #5C544A;   /*  6.8 /  6.2 */
  --texto-3:      #6E6559;   /*  5.2 /  4.7 — lo más claro que sigue siendo legible */
  --sobre-tinta:  #F7F4EF;   /* 14.9 sobre --tinta */
  --sobre-tinta-2:#CFC6B8;   /*  9.7 sobre --tinta */

  /* ── Un solo acento. Con más de uno, deja de ser un acento ──────────────── */
  --acento:        #B4553A;  /* 4.45 — decorativo: filetes, bordes, títulos grandes */
  --acento-hondo:  #93402A;  /* 6.36 — el que se usa para TEXTO y botones */
  --acento-claro:  #E08769;  /* 6.10 sobre --tinta */
  --acento-piso:   rgba(180,85,58,.09);   /* fondo tenue de realce */

  /* ── Líneas: tinta con alfa, nunca gris neutro (desentona con el papel) ─── */
  --linea:        rgba(36,31,26,.13);
  --linea-fuerte: rgba(36,31,26,.26);
  --linea-clara:  rgba(247,244,239,.16);  /* sobre superficie oscura */

  /* ── Tipografía ───────────────────────────────────────────────────────────
     Serif para lo que se lee grande; sans para lo que se opera. Las dos son
     propias: viajan con el sitio (tipografias/tipografias.css) en vez de
     depender de que estén instaladas. Detrás quedan las de sistema por si el
     archivo no llega. */
  --serif: "Playfair Display", "Playfair Display repuesto", Georgia,
           "Times New Roman", serif;
  /* Acá vivió --serif-muestra, con Bodoni, para que las miniaturas de invitación de la
     landing siguieran pareciéndose a las plantillas reales. Duró poco y se sacó por peso:
     obligaba a la landing a bajar DOS serifs (Playfair para la marca y Bodoni sólo para seis
     miniaturas), 46 KB de más en la página que recibe la pauta. Las miniaturas son sellos
     chicos donde la serif exacta casi no se distingue; los 46 KB en datos móviles sí.
     Bodoni sigue en el proyecto: es la serif de las doce plantillas, que la cargan por su
     cuenta desde tipografias.css. */
  --sans:  "Manrope", "Manrope repuesto", "Segoe UI", system-ui, sans-serif;

  /* Escala fluida: el salto entre celular y escritorio lo hace el clamp, no un
     puñado de media queries que después nadie mantiene. */
  --t-display: clamp(2.6rem, 7.5vw, 4.6rem);
  --t-titulo:  clamp(1.75rem, 4.2vw, 2.6rem);
  --t-sub:     clamp(1.2rem, 2.4vw, 1.45rem);
  --t-cuerpo:  1.0625rem;   /* 17px: cómodo de leer de cerca */
  --t-chico:   0.9375rem;   /* 15px */
  --t-rotulo:  0.75rem;     /* 12px, el piso de legibilidad */

  /* ── Ritmo ────────────────────────────────────────────────────────────────
     Aire de sobra: la sensación de producto caro es, sobre todo, espacio. */
  --e1: .5rem;  --e2: 1rem;   --e3: 1.5rem;  --e4: 2.5rem;
  --e5: 4rem;   --e6: 6rem;   --e7: clamp(5rem, 12vw, 9rem);

  --ancho:   1120px;   /* la caja de contenido */
  --lectura: 62ch;     /* un renglón que el ojo puede seguir sin perderse */

  --radio:   3px;      /* casi recto: el papel no tiene esquinas redondeadas */
  --radio-2: 10px;

  /* Sombras teñidas del color del papel. Una sombra negra sobre fondo cálido se
     ve sucia; teñida, se ve impresa. */
  --sombra-1: 0 1px 2px rgba(58,44,32,.06), 0 4px 14px rgba(58,44,32,.05);
  --sombra-2: 0 2px 6px rgba(58,44,32,.08), 0 16px 40px rgba(58,44,32,.10);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --rapido: .22s var(--ease);
  --lento:  .6s  var(--ease);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El grano. Es lo que hace que se sienta papel y no pantalla. Va en una capa fija
   por encima de todo y sin capturar el mouse, así no cuesta nada al hacer scroll. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ── Tipografía ───────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.08; }
/* El navegador reparte las palabras entre renglones para que ninguno quede colgado: un
   título de tres líneas con una palabra sola en la última se ve descuidado, y a mano no se
   puede prever en cada ancho de pantalla. `pretty` hace lo mismo con la última línea de
   los párrafos. Donde no existe, no pasa nada. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h1 { font-size: var(--t-display); letter-spacing: -.022em; }
h2 { font-size: var(--t-titulo);  letter-spacing: -.016em; }
h3 { font-size: var(--t-sub);     letter-spacing: -.008em; }

p { margin: 0 0 var(--e2); max-width: var(--lectura); }
a { color: var(--acento-hondo); }

.bajada { font-size: var(--t-sub); line-height: 1.55; color: var(--texto-2); max-width: 46ch; }
/* Los títulos no llevan margen propio (así se apilan como uno quiera), pero cuando los sigue
   un párrafo hay que separarlos o el bloque se lee como un solo bulto. */
/* Ojo con el selector: estuvo escrito con :where(), que tiene especificidad CERO, y la
   regla `p { margin: 0 0 var(--e2) }` de arriba le ganaba siempre. Nunca se aplicó: por eso
   las bajadas se veían pegadas al título en toda la web de venta (medido el 3-sep-26). Con
   :is() vale la especificidad de la clase y la separación existe de verdad. Sólo h1 y h2:
   bajo un h3 los párrafos van pegados a propósito (pilares, pasos, panel). */
:is(h1, h2) + :is(p, .bajada) { margin-top: var(--e3); }

/* El color de selección, del acento y no del azul del sistema: es el detalle que delata
   que la marca llega hasta donde nadie mira. */
::selection { background: rgba(180, 85, 58, .28); color: var(--tinta); }
.chico  { font-size: var(--t-chico); color: var(--texto-2); }
.micro  { font-size: var(--t-rotulo); color: var(--texto-3); }

/* El rótulo en versalitas. Uno por sección como mucho: repetido pierde el efecto
   y se convierte en el tic de "plantilla elegante". */
.rotulo {
  font-family: var(--sans);
  font-size: var(--t-rotulo);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento-hondo);
  margin: 0 0 var(--e2);
  display: inline-flex; align-items: center; gap: .7em;
}
.rotulo::before {
  content: ''; width: 26px; height: 1px; background: var(--acento); flex: none;
}

/* ── El logo ──────────────────────────────────────────────────────────────── */
/* El nombre no es una palabra sola: es **invitar + IA**. Las dos últimas letras van en
   acento para que el chiste se vea, y así el logo cuenta el producto sin explicarlo —
   invitaciones hechas con inteligencia artificial.

   El punto final se pinta con el mismo acento y no con el decorativo. Son dos razones:
   una, dos naranjas distintos pegados uno al lado del otro se leen como un error de
   impresión; y dos, --acento da 4,45:1 sobre el papel, y el logo a 22px es texto normal,
   que necesita 4,5:1. --acento-hondo da 6,36 y no hay que pensarlo más.

   El tamaño lo pone cada página, porque en la barra de la landing no mide lo mismo que
   arriba del panel. El color y la familia se definen acá una sola vez: antes vivían
   copiados en siete archivos y bastaba con olvidarse de uno para tener dos logos. */
.marca {
  font-family: var(--serif);
  letter-spacing: -.02em;
  color: var(--texto);
  text-decoration: none;
}
.marca i,
.marca .ia { color: var(--acento-hondo); font-style: normal; }

/* ── Zonas ────────────────────────────────────────────────────────────────── */
.ancho { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.zona { padding-block: var(--e7); }
.zona-2      { background: var(--papel-2); }
.zona-oscura { background: var(--tinta); color: var(--sobre-tinta); }
.zona-oscura h1, .zona-oscura h2, .zona-oscura h3 { color: var(--sobre-tinta); }
.zona-oscura .bajada, .zona-oscura .chico { color: var(--sobre-tinta-2); }
.zona-oscura .rotulo { color: var(--acento-claro); }
.zona-oscura .rotulo::before { background: var(--acento-claro); }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 1.75rem;
  font-family: var(--sans); font-size: var(--t-chico); font-weight: 600;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radio);
  background: var(--acento-hondo); color: var(--papel);   /* 6.36 */
  transition: background var(--rapido), transform var(--rapido), box-shadow var(--rapido);
  box-shadow: var(--sombra-1);
}
/* Sube un píxel al pasar por encima y baja uno al tocar: es lo que hace que el botón se
   sienta una pieza y no una calcomanía. Sólo con puntero: en el celular no hay hover y
   dejaría el botón "levantado" después de tocarlo. */
.btn:hover { background: #7E3623; box-shadow: var(--sombra-2); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }
/* El empujón físico al tocar. Sin esto un botón se siente una calcomanía. */
.btn:active { transform: translateY(1px) scale(.995); box-shadow: var(--sombra-1); }

.btn-linea {
  background: transparent; color: var(--texto);
  border-color: var(--linea-fuerte); box-shadow: none;
}
.btn-linea:hover { background: var(--acento-piso); border-color: var(--acento); box-shadow: none; }

.zona-oscura .btn { background: var(--papel); color: var(--tinta); }
.zona-oscura .btn:hover { background: #fff; }
.zona-oscura .btn-linea { background: transparent; color: var(--sobre-tinta); border-color: var(--linea-clara); }
.zona-oscura .btn-linea:hover { background: rgba(247,244,239,.08); }

/* Foco visible: el teclado tiene que poder recorrer todo sin adivinar dónde está */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--acento-hondo);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Aparición al entrar en pantalla ──────────────────────────────────────── */
.rev { opacity: 0; transform: translateY(18px); transition: opacity var(--lento), transform var(--lento); }
.rev.on, .rev.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; } }