/* ═══════════════════════════════════════════════════════════════
   Boda Verónica & Abraham — Base de diseño
   Identidad heredada del Save the Date (colores y tipografías).
   Este archivo define tokens, tipografía, componentes compartidos
   y el "ambiente" continuo (día → dorado → ocaso → noche).
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fuentes/dancing-script.woff2') format('woff2');
}
/* Manuscrita elegida por los novios (SIL Open Font License, Kimberly Geswein).
   Trazo fino y minúsculas altas (ojo de 0.44 em frente a 0.33 de Dancing Script):
   no necesita size-adjust, pero pide tinta oscura y tamaños ≥ 1.4rem. */
@font-face {
  font-family: 'La Belle Aurore';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fuentes/la-belle-aurore.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fuentes/cormorant-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fuentes/cormorant-italic.woff2') format('woff2');
}

:root {
  /* ── Paleta v2 (retroalimentación de los novios, 12 oct 2026):
     solo ivory y verde olivo, negro o gris para textos, dorado apenas
     insinuado en filetes. Los nombres heredados de v1 (crema, café,
     dorado, pétalo…) apuntan a los valores nuevos para que todo el CSS
     existente cambie de golpe. ── */
  --marfil: #F6F2EA;
  --marfil-luz: #FBF9F4;
  --blanco-calido: #FFFDF8;
  --marfil-hondo: #ECE6D9;
  --olivo: #6B7042;
  --olivo-hondo: #4E5330;
  --olivo-claro: #A3A67E;
  --olivo-palido: #D9DBC7;
  --tinta: #2B2B28;
  --tinta-suave: #3A3A35;
  --gris: #6E6B63;
  --gris-claro: #B9B5AA;
  --dorado-tenue: #CDBF9E;

  /* Nombres heredados (v1) → paleta v2 */
  --crema: var(--marfil);
  --crema-luz: var(--marfil-luz);
  --crema-calida: #F1ECE0;
  --arena: #E6E1D4;
  --lino: #D5D0C2;
  --cafe: var(--tinta);
  --cafe-texto: var(--tinta-suave);
  --dorado: var(--olivo);
  --dorado-hondo: var(--olivo-hondo);
  --dorado-brillo: var(--olivo-claro);
  --dorado-tinta: var(--olivo-hondo);
  --petalo: var(--olivo-claro);
  --vino: var(--olivo-hondo);
  --vino-hondo: #3B3F24;
  --durazno: #E9DED0;
  --terracota: #C9B9A2;
  --oliva: var(--olivo);
  --oliva-claro: var(--olivo-claro);
  --noche: #26261F;
  --noche-alta: #32332A;
  --noche-honda: #1B1B16;

  /* ── Tipografía ── */
  --f-script: 'Dancing Script', 'Snell Roundhand', cursive;
  --f-mano: 'La Belle Aurore', 'Bradley Hand', 'Segoe Print', var(--f-script);   /* manuscrita casual elegida por los novios */
  --f-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* ── Ritmo y movimiento ── */
  --ancho: 1120px;
  --margen: max(clamp(22px, 5vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --suave: cubic-bezier(.22, .61, .36, 1);
  --elastica: cubic-bezier(.34, 1.4, .64, 1);
  --entrada: cubic-bezier(.16, 1, .3, 1);

  /* ── Ambiente: el motor de scroll escribe estos pesos (0 → 1) ── */
  --amb-dorado: 0;
  --amb-ocaso: 0;
  --amb-noche: 0;
  color-scheme: light;
  color-scheme: only light;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;   /* La Belle Aurore solo existe en 400: nada de negrita falsa */
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--crema);
  color: var(--cafe-texto);
  font-family: var(--f-serif);
  font-size: clamp(18px, 2.1vw, 21px);
  font-weight: 500;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.bloqueado {
  overflow: hidden;
  height: 100vh;    /* respaldo donde no existe svh */
  height: 100svh;
  touch-action: none;
}

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> solo elige el formato: no debe generar caja propia */
picture { display: contents; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

::selection { background: var(--petalo); color: var(--cafe); }

:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 4px;
  border-radius: 2px;
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ═══════════ Ambiente continuo ═══════════
   Capas fijas que se funden según el avance del scroll. Nunca hay
   un corte: el fondo es un solo cielo que cambia de hora. */
#ambiente {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--crema);
}
/* El fondo del documento sigue al ambiente: es lo que iOS pinta al rebotar
   y de donde Safari 26 toma el tinte de sus barras. Se pinta body y
   #ambiente, nunca html: si html tuviera fondo propio, el de body dejaría
   de propagarse al lienzo y taparía #ambiente (z-index: -1). En pantalla no
   cambia nada: las capas .amb cubren todo. */
html[data-ambiente="dorado"] body,
html[data-ambiente="dorado"] #ambiente { background-color: #EBDDC2; }
html[data-ambiente="ocaso"] body,
html[data-ambiente="ocaso"] #ambiente { background-color: #7A4A3A; }
html[data-ambiente="noche"] body,
html[data-ambiente="noche"] #ambiente { background-color: var(--noche); }
#ambiente > .amb {
  position: absolute;
  top: -1px; right: -1px; bottom: -1px; left: -1px;
  will-change: opacity;
}
.amb--dia {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--crema-luz) 0%, rgba(253, 251, 245, 0) 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(217, 219, 199, .3) 0%, rgba(217, 219, 199, 0) 70%),
    var(--crema);
}
.amb--dorado {
  opacity: var(--amb-dorado);
  background:
    radial-gradient(110% 70% at 15% 10%, rgba(253, 251, 245, .7) 0%, rgba(253, 251, 245, 0) 60%),
    radial-gradient(100% 70% at 90% 95%, rgba(107, 112, 66, .14) 0%, rgba(107, 112, 66, 0) 70%),
    linear-gradient(180deg, #F3EFE5 0%, #EBE6D8 55%, #E3DECD 100%);
}
.amb--ocaso {
  opacity: var(--amb-ocaso);
  background:
    radial-gradient(90% 55% at 50% 100%, rgba(236, 212, 170, .95) 0%, rgba(214, 180, 140, .5) 38%, rgba(110, 92, 74, 0) 75%),
    linear-gradient(180deg, #3C3A30 0%, #6E5C4A 34%, #B08A68 66%, #DCC3A2 100%);
}
.amb--noche {
  opacity: var(--amb-noche);
  /* La mitad inferior es --noche plano: ahí se funde sin costura el primer
     plano del atardecer, que usa exactamente ese color. */
  background:
    radial-gradient(70% 42% at 85% 0%, rgba(122, 96, 60, .42) 0%, rgba(122, 96, 60, 0) 72%),
    radial-gradient(60% 36% at 8% 6%, rgba(163, 166, 126, .12) 0%, rgba(163, 166, 126, 0) 70%),
    linear-gradient(180deg, var(--noche-alta) 0%, var(--noche) 46%, var(--noche) 100%);
}
/* Grano de papel: una sola textura fija sobre todo el recorrido */
.amb--grano {
  opacity: .5;
  background-image: url('../assets/svg/grano.svg');
  background-size: 320px 320px;
  mix-blend-mode: multiply;
}
/* Teléfono modesto (lo marca js/petalos.js): el grano sin mezcla cuesta menos */
.modesto .amb--grano { mix-blend-mode: normal; opacity: .3; }

/* ═══════════ Estructura ═══════════ */
main { position: relative; z-index: 1; }

.seccion {
  position: relative;
  padding: clamp(90px, 16vh, 180px) var(--margen);
}
.contenedor {
  position: relative;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
}
.contenedor--angosto { max-width: 760px; }
.centrado { text-align: center; }

/* Las secciones nocturnas invierten la tinta */
.seccion--noche { color: var(--crema); }
.seccion--noche .t-sobretitulo,
.seccion--noche .t-fecha { color: var(--petalo); }
.seccion--noche .t-script { color: var(--crema); }
.seccion--noche .t-titulo { color: var(--petalo); }
/* Sin JavaScript el ambiente no oscurece: la sección trae su propio fondo.
   Lo mismo si el cielo fijo quedó sin tamaño (.sin-ambiente, lo marca el motor) */
html:not(.js) .seccion--noche,
.sin-ambiente .seccion--noche { background: var(--noche); }

/* Avisos que solo se leen cuando el motor no arrancó (o no hay JavaScript) */
.solo-basico { display: none; }
html:not(.js) .solo-basico { display: block; }

/* ═══════════ Tipografía ═══════════ */
.t-script {
  font-family: var(--f-mano);   /* desde el 21-oct-2026: la misma manuscrita que «Cada segundo nos acerca» */
  font-weight: 400;
  font-size: clamp(38px, 7.6vw, 74px);
  line-height: 1.16;
  text-wrap: balance;
  color: var(--cafe);
}
.t-script--chica { font-size: clamp(28px, 5.2vw, 46px); line-height: 1.25; }

.t-titulo {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.15;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cafe);
}

.t-sobretitulo {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: clamp(13px, 1.9vw, 15px);
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--dorado-tinta);
}

.t-nombres {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(30px, 6.5vw, 58px);
  letter-spacing: .04em;
  line-height: 1.1;
  color: var(--dorado);
}
.t-nombres .inicial { font-size: 1.32em; }


.t-lugar {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: clamp(14px, 2.8vw, 22px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cafe);
}

.t-cuerpo { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.7; }
.t-cuerpo + .t-cuerpo { margin-top: 1em; }
.t-nota { font-size: clamp(15px, 1.9vw, 17px); letter-spacing: .04em; opacity: .85; }
.t-dato {
  font-family: var(--f-serif);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(14px, 1.9vw, 16px);
}

/* ═══════════ Ornamentos ═══════════ */
.ornamento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--dorado);
  margin: clamp(18px, 3vh, 30px) auto;
}
.ornamento::before,
.ornamento::after {
  content: '';
  width: clamp(40px, 9vw, 84px);
  height: 1px;
  background: currentColor;
  opacity: .7;
  transform-origin: center;
}
.ornamento i {
  width: 7px; height: 7px;
  background: currentColor;
  transform: rotate(45deg);
}
/* Respaldo sin «gap» en flexbox (Safari anterior a 14.1, Chrome anterior a 84).
   No se puede preguntar por él con @supports, así que se pregunta por «inset»,
   que llegó a la vez o poco después: quien no lo conoce separa con márgenes. */
@supports not (inset: 0) {
  .ornamento { gap: 0; }
  .ornamento i { margin: 0 14px; }
}

/* ═══════════ Botones ═══════════ */
.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 38px;
  min-height: 54px;
  font-family: var(--f-serif);
  font-size: clamp(14px, 1.9vw, 16px);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--suave), box-shadow .5s var(--suave), color .4s var(--suave), background-color .4s var(--suave);
}
.boton--lleno {
  background: var(--cafe);
  color: #FFFDF6;
  box-shadow: 0 10px 30px -14px rgba(78, 70, 50, .7);
}
.boton--linea {
  color: var(--cafe);
  box-shadow: inset 0 0 0 1px var(--dorado);
}
.seccion--noche .boton--linea { color: var(--crema); }
/* Dentro de una tarjeta de papel (clara) el botón de contorno vuelve a olivo, también de noche
   (p. ej. «Llamar» en la tarjeta de la wedding planner) */
.papel .boton--linea,
.seccion--noche .papel .boton--linea { color: var(--olivo-hondo); box-shadow: inset 0 0 0 1px var(--olivo); }
@supports not (inset: 0) {
  .boton { gap: 0; }
  .boton > svg { margin-right: 12px; }
}
/* Destello que cruza el botón */
.boton::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .9s var(--suave);
}
@media (hover: hover) {
  .boton:hover { transform: translateY(-2px); }
  .boton:hover::after { transform: translateX(120%); }
  .boton--linea:hover { background: rgba(107, 112, 66, .1); }
}
.boton:active { transform: translateY(1px) scale(.99); }

.enlace {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--dorado);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* ═══════════ Papel ═══════════
   Tarjetas que flotan sobre el ambiente: papel de algodón con
   sombra suave. Siempre claras, incluso de noche. */
.papel {
  position: relative;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #FDFBF5 0%, #F6F0E3 100%);
  color: var(--cafe-texto);
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 0 0 1px rgba(205, 191, 158, .45),
    0 30px 60px -34px rgba(43, 40, 32, .55),
    0 12px 22px -16px rgba(43, 40, 32, .28);
  padding: clamp(26px, 5vw, 52px);
}
.papel::after {
  content: '';
  position: absolute;
  top: 9px; right: 9px; bottom: 9px; left: 9px;
  border: 1px solid rgba(205, 191, 158, .7);
  border-radius: 2px;
  pointer-events: none;
}
.papel .t-sobretitulo { color: var(--dorado-tinta); }
.papel .t-script, .papel .t-titulo { color: var(--cafe); }

/* ═══════════ Revelados (el motor añade .es-visible) ═══════════
   Solo se ocultan si hay JavaScript: sin él, todo el contenido
   queda visible. */
.js [data-revelar] {
  opacity: 0;
  transition:
    opacity 1.1s var(--suave) calc(var(--retraso, 0ms) + var(--i, 0) * 90ms),
    transform 1.3s var(--entrada) calc(var(--retraso, 0ms) + var(--i, 0) * 90ms),
    filter 1.1s var(--suave) calc(var(--retraso, 0ms) + var(--i, 0) * 90ms),
    clip-path 1.5s var(--entrada) calc(var(--retraso, 0ms) + var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.js [data-revelar="subir"] { transform: translate3d(0, 38px, 0); }
.js [data-revelar="bajar"] { transform: translate3d(0, -38px, 0); }
.js [data-revelar="izquierda"] { transform: translate3d(-46px, 0, 0); }
.js [data-revelar="derecha"] { transform: translate3d(46px, 0, 0); }
.js [data-revelar="crecer"] { transform: scale(.92); }
.js [data-revelar="nitidez"] { filter: blur(14px); transform: scale(1.04); }
.js [data-revelar="acuarela"] { clip-path: circle(0% at 50% 60%); opacity: 1; }
.js [data-revelar="linea"] { transform: scaleX(0); opacity: 1; }

.js [data-revelar].es-visible {
  opacity: 1;
  transform: none;
  filter: none;
  /* Ya revelado no necesita capa propia: se libera la memoria */
  will-change: auto;
}
.js [data-revelar="acuarela"].es-visible { clip-path: circle(140% at 50% 60%); }

/* Texto partido en palabras por el motor ([data-letras]) */
.palabra { display: inline-block; white-space: pre; }
/* Par de palabras que no debe separarse entre renglones */
.js [data-letras] .palabra {
  opacity: 0;
  transform: translate3d(0, .55em, 0) rotate(3deg);
  transition:
    opacity .9s var(--suave) calc(var(--retraso, 0ms) + var(--i, 0) * 70ms),
    transform 1.1s var(--entrada) calc(var(--retraso, 0ms) + var(--i, 0) * 70ms);
}
.js [data-letras].es-visible .palabra { opacity: 1; transform: none; }

/* Capas con parallax: el motor escribe transform directamente. Solo las
   cercanas a la ventana (.en-vista, la pone el motor) piden capa propia */
[data-parallax].en-vista { will-change: transform; }

.decorado {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ═══════════ Movimiento reducido ═══════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-revelar], .js [data-letras] .palabra {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* ═══════════ Temas de contraste (Windows) ═══════════
   box-shadow y degradados se anulan, así que los contornos se dibujan
   con borde real. */
@media (forced-colors: active) {
  .boton,
  .copiar,
  .regalo__enlace,
  .rsvp-opcion__cara,
  .rsvp-contador__boton,
  .carrusel__flecha { border: 1px solid ButtonText; }
  .rsvp-opcion__radio:checked + .rsvp-opcion__cara { border: 3px solid Highlight; }
  .amb--grano { mix-blend-mode: normal; }
}