/* Base de la web: colores, tipografías, medidas y estilos generales.
   Para cambiar el aspecto de toda la web, empieza por las variables de :root.
   Orden de los archivos: dibujos.css → base.css → componentes.css → portada.css → secciones.css */

:root{
  color-scheme:light; /* sin modo oscuro: la web se ve siempre clara */

  /* Colores */
  --bg:#efebe4;      /* fondo beige */
  --stone:#f7f4ef;   /* fondo blanco roto de las bandas alternas */
  --paper:#fffefb;   /* tarjetas */
  --ink:#2f3c46;     /* texto y títulos: gris pizarra */
  --muted:#4e5a63;   /* texto secundario (oscuro para que se lea bien) */
  --gold:#8a6d2a;    /* detalles: oro viejo (líneas, dibujos, bordes) */
  --gold-text:#735a20; /* oro viejo algo más oscuro para letras: se lee bien (contraste AA) */
  --line:#d9d1c2;    /* líneas finas */
  --deep:#2f3c46;    /* botones */
  --deep-hover:#1f2930;
  --on-deep:#ffffff;
  --danger:#9c2f1e;

  /* Tipografías */
  --display:"Playfair Display",Georgia,serif;          /* títulos */
  --script:"Allura","Snell Roundhand",cursive;         /* nombres, escritos a mano */
  --body:"EB Garamond",Garamond,Georgia,serif;          /* texto: serifa clásica, más formal */
  --caps:"Montserrat","Helvetica Neue",Arial,sans-serif;/* letras pequeñas en mayúsculas (rótulos, botones, menú) */

  /* Medidas */
  --nav-h:56px;
  --radius:2px;
  --shadow:0 1px 1px rgba(47,60,70,.03),0 6px 22px rgba(47,60,70,.05);
  --ease:cubic-bezier(.22,.61,.36,1); /* movimiento suave, tipo vídeo */
}

/* Reinicio */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;font-size:19px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Grano de película muy suave sobre toda la página (no se puede pulsar) */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;background:var(--grain);opacity:.035;mix-blend-mode:multiply}

/* Tipografía */
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--ink);text-wrap:balance;margin:0}
h2{font-size:clamp(32px,5.6vw,46px);line-height:1.15;letter-spacing:.01em;margin-bottom:30px}
h3{font-weight:500}
/* Cabecera de cada sección centrada, como en una invitación impresa */
.band>.wrap>.eyebrow,.band>.wrap>h2{justify-content:center;text-align:center}
.band>.wrap>.eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.band>.wrap>h2+p{text-align:center;margin-inline:auto}
/* Párrafos de texto seguido: alineados a la izquierda con todo el ancho (como las tarjetas) */
.band>.wrap>h2+p.texto,.band>.wrap>p.texto{text-align:left;max-width:none;margin:0 0 14px}
.band>.wrap>p.texto a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
p{margin:0 0 12px;max-width:62ch}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:16px;font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7;flex:none} /* rayita fina delante */
.center .eyebrow{justify-content:center}
.center .eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.lead{font-size:clamp(20px,2.6vw,22px);font-style:italic;color:var(--muted)}
.small{font-size:16px;color:var(--muted);margin-top:16px}
.center{text-align:center}
.center p{margin-inline:auto}

/* Datos pendientes de confirmar: subrayado discontinuo (quitar la clase al confirmarlos) */
.ph{border-bottom:1px dashed var(--gold)}

/* Contenedores y bandas */
.wrap{max-width:760px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wrap.wide{max-width:1040px}
.band{padding-block:clamp(72px,11vw,120px)}
.band.stone{background:var(--stone)}
/* Separador al principio de cada sección: línea fina con avión */
main .band::before,footer::before{content:"";display:block;width:min(280px,60%);height:18px;margin:0 auto clamp(48px,7vw,76px);
  background:var(--sep) center/contain no-repeat;opacity:.9}

/* Accesibilidad y avisos */
.skip{position:absolute;left:-9999px;top:8px;background:var(--paper);color:var(--ink);padding:8px 14px;z-index:300}
.skip:focus{left:8px}
.draft{background:var(--stone);color:var(--ink);font-family:var(--caps);font-size:12px;letter-spacing:.06em;text-align:center;padding-block:8px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Aparición al hacer scroll, como en los vídeos de boda: sube, se enfoca y aparece.
   Los hijos de cada bloque .reveal entran uno detrás de otro. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal>*{opacity:0;transform:translateY(22px);filter:blur(4px);
    transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
  .reveal.in>*{opacity:1;transform:none;filter:none}
  .reveal.in>:nth-child(2){transition-delay:.12s}
  .reveal.in>:nth-child(3){transition-delay:.24s}
  .reveal.in>:nth-child(4){transition-delay:.36s}
  .reveal.in>:nth-child(5){transition-delay:.48s}
  .reveal.in>:nth-child(n+6){transition-delay:.6s}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}