/* 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 humanista para lo que se lee grande; sans humanista para lo que se
     opera. Ambas con familias del sistema que existen en Mac, iOS y Windows. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, 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; }
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. */
:where(h1, h2, h3) + :where(p, .bajada) { margin-top: var(--e2); }
.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;
}

/* ── 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);
}
.btn:hover { background: #7E3623; box-shadow: var(--sombra-2); }
/* 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; } }