/* =====================================================================
   Linda & Abelardo — Capa de diseño "Papelería grabada"
   ---------------------------------------------------------------------
   Se carga DESPUÉS de bootstrap + style.css + plugins.css y reescribe la
   identidad visual sin tocar la rejilla.

   La dirección sale del monograma real de la pareja (img/fotos/logo.png):
   una didone de alto contraste con serifas de hairline. Todo aquí
   —tipografía, filetes, proporciones— nace de ahí: plancha grabada sobre
   papel de algodón, no plantilla nupcial.

   Paleta: tinta bosque + algodón frío + salvia (color real de la boda)
           + latón apagado, usado solo como filete.
   ===================================================================== */

:root {
   /* ---- Superficies ----
      Tres pesos de papel, sin bandas oscuras. El contraste lo llevan la
      tipografía y las fotos, no un bloque de color. */
   --paper:       #FAFAF7;   /* base — héroe y evento */
   --paper-2:     #F2F0E8;   /* alterna — historia y galería */
   --paper-3:     #EDE9DE;   /* papel hondo — fecha y reserva */
   --card:        #FFFFFF;   /* tarjetas sobre papel */

   /* ---- Tintas ----
      Neutros de sesgo cálido, no verde: un casi-negro verdoso competía con
      el salvia y ensuciaba los titulares. */
   --ink:         #221F1A;   /* tinta: titulares y texto sobre el salvia */
   --body:        #38342C;   /* cuerpo de texto — 9.9:1 sobre --paper-3 */
   --muted:       #6B6759;   /* secundario — 4.7:1 sobre --paper-3 */

   /* ---- Marca ----
      --sage es superficie, no texto: mide 2.65:1 sobre papel. Todo lo que
      deba leerse o marcarse (enlaces, foco, etiquetas) usa --forest, que es
      el mismo tono (~87°) bajado hasta 6.4:1. */
   --sage:        #8DA46D;   /* barra al encoger, footer, menú móvil */
   --sage-deep:   #7E9660;   /* fondo del degradado del footer */
   --forest:      #50623F;   /* enlaces y etiquetas sobre papel — 6.4:1 */
   --brass:       #9C8C60;   /* latón apagado: filetes, rombo, ampersand */

   --on-dark:     #F3F3EC;

   /* ---- Filetes ---- */
   --rule:         rgba(34, 31, 26, .13);
   --rule-strong:  rgba(34, 31, 26, .28);
   --rule-dark:    rgba(243, 243, 236, .20);
   --rule-on-sage: rgba(34, 31, 26, .22);   /* filete sobre el salvia */

   /* ---- Métrica ---- */
   --maxw:  1120px;
   --measure: 62ch;          /* medida de lectura */
   --pad-y: clamp(76px, 10vw, 132px);
   --nav-h: 72px;
   --ease:  cubic-bezier(.22, .68, .24, 1);
}

/* ----------------------------------------------------------------- Base */
* { box-sizing: border-box; }

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {
   background: var(--paper) !important;
   background-image: none !important;
   color: var(--body);
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 17px;
   line-height: 1.7;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

::selection { background: var(--sage); color: var(--ink); }

/* Grano de papel. En una dirección de papelería grabada la textura no es
   un efecto: es el sustrato. Va en un pseudo-elemento fijo y sin eventos
   para que no repinte con el scroll. */
body::after {
   content: "";
   position: fixed;
   inset: 0;
   z-index: 1035;           /* sobre la barra fija (1030), bajo el lightbox */
   pointer-events: none;
   opacity: .04;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

main { display: block; }   /* navegadores antiguos no lo asumen */

/* los anclas no quedan debajo de la barra fija */
section[id], main[id], [id="page-top"] { scroll-margin-top: var(--nav-h); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Saltar al contenido — indispensable para navegación por teclado */
.skip-link {
   position: absolute;
   left: 12px; top: -100px;
   z-index: 2000;
   padding: 12px 20px;
   background: var(--ink);
   color: var(--on-dark);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .16em;
   text-transform: uppercase;
   transition: top .25s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--on-dark); }

a { color: var(--forest); transition: color .3s var(--ease); }
a:hover, a:focus { color: var(--ink); text-decoration: none; }

/* foco visible en todo lo enfocable (piso de accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
   outline: 2px solid var(--brass);
   outline-offset: 3px;
   border-radius: 2px;
}

/* ----------------------------------------------------------- Tipografía */
h1, h2, h3, h4, .display {
   font-family: 'Bodoni Moda', 'Bodoni MT', Didot, serif;
   font-optical-sizing: auto;
   color: var(--ink);
   font-weight: 400;
   letter-spacing: 0;
   text-wrap: balance;
}

h2 {
   font-size: clamp(32px, 4.6vw, 52px);
   line-height: 1.08;
   margin: 0;
}
h3 {
   font-size: clamp(22px, 2.8vw, 30px);
   line-height: 1.2;
   margin: 0 0 .35em;
}

/* h5/h6 los usa el template como micro-etiquetas y como dato */
h5, .eyebrow, .label {
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--muted);
   margin: 0 0 1em;
   line-height: 1.5;
}
h6 {
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-size: 20px;
   font-weight: 400;
   letter-spacing: 0;
   line-height: 1.5;
   color: var(--body);
   margin: 0;
}

.italic { font-style: italic; }

/* cifras que se alinean en columna */
.tnum, #countdown, .bank-num, .event-time { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- Layout/bandas */
.container { max-width: var(--maxw); }

section { position: relative; padding: var(--pad-y) 0; }

/* Ritmo de papel: base · hondo · alterna · base · alterna · hondo.
   Las dos secciones que piden una pausa (la fecha y la reserva) se marcan
   con el papel más profundo y un filete arriba y abajo, no con color. */
#intro     { background: var(--paper); }
#save-date { background: var(--paper-3); }
#story     { background: var(--paper-2); }
#event     { background: var(--paper); }
#gallery   { background: var(--paper-2); }
#rsvp      { background: var(--paper-3); }

#save-date, #rsvp {
   border-top: 1px solid var(--rule);
   border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------- Divisor: filete + rombo */
.section-heading {
   text-align: center;
   margin: 0 auto clamp(44px, 6vw, 76px);
   max-width: 42ch;
}
.section-heading .eyebrow { margin-bottom: .9em; }

.hr,
.section-heading .hr {
   position: relative;
   width: 132px;
   height: 1px;
   margin: 26px auto 0;
   background: linear-gradient(90deg, transparent, var(--rule-strong) 30%, var(--rule-strong) 70%, transparent);
   border: 0;
   overflow: visible;
}
/* rombo tipográfico (dinkus) — marca corte de sección, no adorna */
.hr::after,
.section-heading .hr::after {
   content: "";
   position: absolute;
   top: 50%; left: 50%;
   width: 6px; height: 6px;
   margin: -3px 0 0 -3px;
   background: var(--brass);
   transform: rotate(45deg);
   box-shadow: 0 0 0 5px var(--paper);
}
/* el rombo se recorta contra el papel de SU banda */
#story .hr::after, #gallery .hr::after { box-shadow: 0 0 0 5px var(--paper-2); }
#save-date .hr::after, #rsvp .hr::after { box-shadow: 0 0 0 5px var(--paper-3); }

/* --------------------------------------------------------------- Navbar */
.navbar-custom {
   background: rgba(250, 250, 247, .88) !important;
   box-shadow: inset 0 -1px 0 var(--rule);
   border: 0;
   min-height: var(--nav-h);
   padding: 14px 0;
   backdrop-filter: saturate(1.4) blur(10px);
   transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.navbar-custom.shrink, nav.shrink {
   background: var(--sage) !important;
   box-shadow: inset 0 -1px 0 var(--rule-on-sage);
   padding: 6px 0;
}

/* monograma centrado, alineado con el eje del menú */
.navbar-custom .navbar-brand-centered {
   position: absolute;
   left: 50%; top: 50%;
   transform: translate(-50%, -50%);
   float: none;
   height: auto;
   margin: 0;
   padding: 0;
}
.navbar-custom .navbar-brand a,
.brand-monogram {
   display: inline-block;
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-size: 27px;
   font-weight: 400;
   line-height: 1;
   letter-spacing: .2em;
   text-indent: .2em;          /* compensa el tracking del último glifo */
   color: var(--ink) !important;
   white-space: nowrap;
}
.brand-monogram .amp {
   font-style: italic;
   font-weight: 500;
   letter-spacing: 0;
   color: var(--brass);
}
/* sobre el salvia el texto va en tinta: 6.0:1. El latón del ampersand
   caería a 1.2:1, así que también pasa a tinta y se distingue por la
   itálica, no por el color. */
.navbar-custom.shrink .navbar-brand a,
.navbar-custom.shrink .brand-monogram { color: var(--ink) !important; }
.navbar-custom.shrink .brand-monogram .amp { color: var(--ink); }

.navbar-custom ul.nav li a {
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--body);
   padding: 10px 15px;
   position: relative;
   background: transparent !important;
}
.navbar-custom ul.nav li.active a { color: var(--forest); }
.navbar-custom.shrink ul.nav li a { color: rgba(34, 31, 26, .78); }
.navbar-custom.shrink ul.nav li.active a { color: var(--ink); }

.navbar-custom ul.nav li a::after {
   content: "";
   position: absolute;
   left: 15px; right: 15px; bottom: 6px;
   height: 1px;
   background: currentColor;
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .4s var(--ease);
}
.navbar-custom ul.nav li a:hover::after,
.navbar-custom ul.nav li.active a::after { transform: scaleX(1); }

.navbar-custom .navbar-toggle { border-color: var(--rule-strong); margin-top: 10px; }
.navbar-custom .navbar-toggle .icon { color: var(--ink); }
.navbar-custom.shrink .navbar-toggle { border-color: var(--rule-on-sage); }
.navbar-custom.shrink .navbar-toggle .icon { color: var(--ink); }

@media (max-width: 767px) {
   /* barra móvil: monograma a la izquierda, botón a la derecha */
   .navbar-custom { padding: 8px 0; }
   .navbar-custom .navbar-header { position: relative; }
   .navbar-custom > .container { padding-left: 18px !important; padding-right: 14px !important; }
   .navbar-custom .navbar-brand-centered {
      position: static !important;
      transform: none !important;
      left: auto !important; top: auto !important;
      float: left !important;
      margin: 0 !important;
      padding: 5px 0 5px 2px !important;
      height: auto !important;
   }
   .navbar-custom .navbar-brand a, .brand-monogram { font-size: 23px; letter-spacing: .16em; }
   .navbar-custom .navbar-toggle {
      display: block !important;
      float: right !important;
      position: static !important;
      transform: none !important;
      margin: 1px 0 0 !important;
      padding: 9px 12px !important;
      border: 1px solid var(--rule-strong) !important;
      border-radius: 3px !important;
      background: transparent !important;
   }
   .navbar-custom .navbar-collapse {
      background: var(--sage);
      border: 0;
      box-shadow: none;
      margin-top: 10px;
      clear: both;
   }
   .navbar-custom ul.nav li a,
   .navbar-custom.shrink ul.nav li a { color: rgba(34, 31, 26, .78); }
   .navbar-custom ul.nav li.active a,
   .navbar-custom.shrink ul.nav li.active a { color: var(--ink); }
}

/* ------------------------------------------------------------ Preloader */
#preloader { background: var(--paper) !important; }
.bounce1, .spinner > div { background: var(--sage) !important; }

/* --------------------------------------------------------------- Héroe */
#intro {
   padding-top: clamp(122px, 16vh, 176px);
   padding-bottom: clamp(56px, 9vh, 104px);
   text-align: center;
   overflow: hidden;
}

/* marco de foto: filete de papel, sin bordes gruesos ni esquinas redondas */
.photowall img, .main-picture img {
   background: var(--card);
   padding: 9px;
   box-shadow: 0 0 0 1px var(--rule), 0 26px 52px -34px rgba(34, 31, 26, .55);
}

/* collage: dos fotos ligeramente giradas detrás de la principal */
#intro .photowall {
   position: absolute;
   top: 132px; left: 0;
   width: 100%; height: 0;
   z-index: 1;
   pointer-events: none;
}
#intro .photowall > div {
   position: absolute;
   width: auto;
   float: none;
   margin: 0;
   padding: 0;
}
#intro .photowall > div:first-child { left: 7%; top: 18px; }
#intro .photowall > div:last-child  { right: 7%; top: 74px; }
#intro .photowall img {
   filter: none !important;
   width: 232px;
   max-width: 21vw;
}
/* giro contenido: la foto principal va recta, el collage la acompaña */
#intro .photowall > div:first-child img { transform: rotate(-3.5deg) !important; }
#intro .photowall > div:last-child  img { transform: rotate(3.5deg) !important; }

.main-picture {
   position: relative;
   z-index: 5;
   max-width: 470px;
   margin: 0 auto;
   float: none !important;
}
.main-picture img { transform: none !important; }

.photowall, .main-picture { animation: fadeIn 1.5s var(--ease) both; }
.main-picture { animation-delay: .2s; }

#intro .intro-heading {
   z-index: 9;
   position: relative;
   margin-top: clamp(34px, 5vh, 62px);
   float: none !important;
}
/* el `.italic` del template (Playfair 120px) no aplica en el héroe */
#intro .italic { font-family: inherit; font-size: inherit; }

.intro-eyebrow {
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .38em;
   text-transform: uppercase;
   color: var(--muted);
   margin: 0 0 20px;
   animation: rise .9s var(--ease) .15s both;
}

/* Los nombres a escala de plancha: peso 400 para que los hairlines
   de la Bodoni queden al borde de desaparecer. Ese es el riesgo, y es
   el punto — un grabado se ve así. El eje óptico lo sostiene. */
.couple-names {
   font-family: 'Bodoni Moda', 'Bodoni MT', Didot, serif !important;
   font-optical-sizing: auto;
   font-weight: 400;
   font-size: clamp(52px, 11.5vw, 142px) !important;
   line-height: .95 !important;
   letter-spacing: -.005em;
   color: var(--ink);
   margin: 0 !important;
   animation: rise 1s var(--ease) .34s both;
}
.couple-names .amp {
   font-style: italic;
   font-weight: 500;
   font-size: .58em;
   color: var(--brass);
   padding: 0 .1em;
   vertical-align: -.02em;
}

.intro-verse {
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-style: italic;
   font-size: clamp(19px, 2.3vw, 26px);
   line-height: 1.45;
   color: var(--body);
   margin: 28px auto 8px;
   max-width: 22ch;
   animation: rise 1s var(--ease) .62s both;
}
.intro-ref {
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .26em;
   text-transform: uppercase;
   color: var(--muted);
   margin: 0;
   animation: rise 1s var(--ease) .74s both;
}

.scroll-cue {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-top: 46px;
   width: 42px; height: 42px;
   border: 1px solid var(--rule-strong);
   border-radius: 50%;
   color: var(--forest);
   /* el vaivén va en el icono, no aquí: una animación infinita sobre
      transform bloquearía el :active del botón */
   animation: rise 1s var(--ease) 1s both;
   transition: color .3s var(--ease), border-color .3s var(--ease), transform .18s var(--ease);
}
.scroll-cue .icon { animation: bob 2.6s ease-in-out 2s infinite; }
.scroll-cue:hover { color: var(--ink); border-color: var(--ink); }

/* ---------------------------------------------------------- Save the date */
#save-date .well {
   background: transparent !important;
   border: 0;
   box-shadow: none;
   padding: 0;
   max-width: 640px;
   margin: 0 auto;
   float: none;
}
#save-date .well::before, #save-date .well::after { display: none !important; }

#save-date h2 { font-size: clamp(30px, 4.2vw, 46px); }
#save-date h5 { margin-top: 2.6em; }
#save-date .margin1 { margin-top: 2.4em; }

/* Cuenta regresiva: cifras separadas por filete, sin cajas */
#countdown {
   display: flex;
   justify-content: center;
   margin: 0 auto 2.4em;
   max-width: 520px;
}
#countdown .count {
   margin: 0 !important;          /* anula el margen heredado del plugin */
   flex: 1 1 0;
   min-width: 0;
   padding: 4px 6px;
   border-left: 1px solid var(--rule);
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-size: clamp(34px, 6.4vw, 56px);
   font-weight: 400;
   line-height: 1.05;
   color: var(--ink);
}
#countdown .count:first-child { border-left: 0; }
#countdown .displayformat {
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .18em;
   text-transform: uppercase;
   margin-top: 12px;
   color: var(--muted);
}

/* --------------------------------------------------------------- Botones */
.btn, a.btn {
   display: inline-block;
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .2em;
   text-transform: uppercase;
   padding: 15px 34px;
   border-radius: 0;                        /* papelería: esquina viva */
   border: 1px solid var(--ink);
   background: transparent !important;
   background-image: none !important;
   color: var(--ink) !important;
   box-shadow: none;
   text-shadow: none;
   transition: background-color .35s var(--ease), color .35s var(--ease),
               border-color .35s var(--ease), transform .18s var(--ease);
}
.btn::before, .btn::after { display: none !important; }  /* relleno deslizante del template */

.btn:hover, .btn:focus {
   background: var(--ink) !important;
   border-color: var(--ink);
   color: var(--on-dark) !important;
}

/* Respuesta al pulsar: sin esto el botón se siente muerto bajo el dedo */
.btn:active, a.btn:active { transform: translateY(1px) scale(.985); }
.copy:active, .event-map:active { transform: translateY(1px); }
.scroll-cue:active { transform: scale(.94); }

/* Iconos: trazo fino dibujado en SVG, sin depender de FontAwesome */
.icon {
   display: block;
   width: 1em; height: 1em;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.25;
   stroke-linecap: round;
   stroke-linejoin: round;
}
.navbar-toggle .icon { width: 20px; height: 20px; }
.scroll-cue .icon { width: 17px; height: 17px; }
.owl-nav .icon { width: 15px; height: 15px; }

/* --------------------------------------------------- Tarjetas (filete ciego) */
.well {
   background: var(--card);
   border: 1px solid var(--rule);
   border-radius: 0;
   /* doble filete: el interior imita el gofrado de una plancha */
   box-shadow: inset 0 0 0 9px var(--card), inset 0 0 0 10px var(--rule);
   padding: clamp(30px, 4vw, 48px);
   position: relative;
   float: none;
}
/* papel rotado del template y franjas "watercolor" que apuntan a assets ausentes */
.well::before, .well::after,
section.watercolor::before, section.watercolor::after { display: none !important; }

/* -------------------------------------------------------------- Evento */
/* Lista ordenada: ceremonia y recepción SON una secuencia horaria */
.event-grid {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(20px, 3vw, 32px);
   max-width: 780px;
   margin: 0 auto;
   padding: 0;
   counter-reset: none;
}
.event-card {
   background: var(--card);
   border: 1px solid var(--rule);
   box-shadow: inset 0 0 0 9px var(--card), inset 0 0 0 10px var(--rule);
   padding: clamp(30px, 3.6vw, 44px) clamp(22px, 3vw, 34px);
   text-align: center;
}
.event-time {
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-size: clamp(30px, 3.6vw, 40px);
   line-height: 1;
   color: var(--ink);
   margin: 0 0 .5em;
}
.event-name {
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--forest);
   margin: 0 0 1.4em;
}
.event-place {
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-size: 20px;
   line-height: 1.4;
   color: var(--body);
   margin: 0 0 .25em;
}
.event-city {
   font-size: 14px;
   color: var(--muted);
   margin: 0 0 1.5em;
}
.event-map {
   display: inline-block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--forest);
   border-bottom: 1px solid var(--brass);
   padding-bottom: 3px;
}
.event-map:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ------------------------------------------------------- Mesa de regalos */
.registry {
   max-width: 620px;
   margin: clamp(56px, 7vw, 88px) auto 0;
   padding-top: clamp(40px, 5vw, 60px);
   border-top: 1px solid var(--rule);
   text-align: center;
}
.registry-title { margin-bottom: .5em; }
.registry-lede {
   color: var(--muted);
   max-width: 46ch;
   margin: 0 auto 2em;
}
.bank {
   margin: clamp(34px, 4vw, 48px) 0 0;
   text-align: left;
}
.bank-row {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 6px 16px;
   padding: 14px 0;
   border-top: 1px solid var(--rule);
}
.bank-row:last-child { border-bottom: 1px solid var(--rule); }
.bank dt {
   flex: 0 0 auto;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--muted);
}
.bank dd {
   flex: 1 1 auto;
   display: flex;
   align-items: baseline;
   justify-content: flex-end;
   gap: 14px;
   margin: 0;
   min-width: 0;
}
.bank-num {
   font-size: 17px;
   letter-spacing: .04em;
   color: var(--ink);
   word-break: break-all;
}
.copy {
   flex: 0 0 auto;
   appearance: none;
   background: transparent;
   border: 0;
   border-bottom: 1px solid var(--brass);
   padding: 0 0 2px;
   font-family: inherit;
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--forest);
   cursor: pointer;
   transition: color .25s var(--ease), border-color .25s var(--ease);
}
.copy:hover { color: var(--ink); border-bottom-color: var(--ink); }
.copy[data-copied="true"] { color: var(--forest); border-bottom-color: var(--forest); }

/* --------------------------------------------------------------- Galería */
/* Mosaico asimétrico sobre 6 columnas. Tres miniaturas iguales en fila es
   la retícula por defecto; aquí las filas 1 y 2 van espejadas (ancha+angosta,
   angosta+ancha) para que el ojo recorra en zigzag. Las fotos anchas fijan
   el alto de su fila y las angostas se estiran a ese alto. */
.gallery-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: clamp(12px, 1.6vw, 20px);
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 0 15px;
}
.gallery-item { position: relative; min-width: 0; }

/* fila 1: ancha · angosta   —   fila 2: angosta · ancha   —   fila 3: panorámica */
.gallery-item:nth-child(1),
.gallery-item:nth-child(4) { grid-column: span 4; aspect-ratio: 16 / 10; }
.gallery-item:nth-child(2),
.gallery-item:nth-child(3) { grid-column: span 2; }
.gallery-item:nth-child(5) { grid-column: span 6; aspect-ratio: 21 / 9; }

.gallery-thumb {
   position: relative;
   display: block;
   height: 100%;
   overflow: hidden;
   background: var(--paper);
   box-shadow: 0 0 0 1px var(--rule);
}
.gallery-thumb img {
   width: 100%; height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .8s var(--ease);
}
.gallery-thumb:hover img { transform: scale(1.045); }
.gallery-thumb .overlay-mask {
   position: absolute; inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(34, 31, 26, 0);
   transition: background .45s var(--ease);
}
.gallery-thumb:hover .overlay-mask,
.gallery-thumb:focus-visible .overlay-mask { background: rgba(34, 31, 26, .34); }
.gallery-thumb .overlay-mask::after {
   content: "";
   width: 26px; height: 26px;
   border: 1px solid var(--on-dark);
   transform: rotate(45deg) scale(.5);
   opacity: 0;
   transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery-thumb:hover .overlay-mask::after,
.gallery-thumb:focus-visible .overlay-mask::after { opacity: 1; transform: rotate(45deg) scale(1); }

/* --------------------------------------------------- Historia (polaroids) */
#story .polaroids { padding: 0; }
#story .polaroid-item a {
   display: block;
   background: var(--card);
   padding: 12px 12px 0;
   box-shadow: 0 0 0 1px var(--rule), 0 20px 42px -30px rgba(34, 31, 26, .55);
   transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
#story .polaroid-item img {
   width: 100%;
   aspect-ratio: 1 / 1;
   object-fit: cover;
   display: block;
}
#story .polaroid-item span {
   display: block;
   text-align: center;
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-size: 24px;
   font-variant-numeric: tabular-nums;
   letter-spacing: .06em;
   color: var(--ink);
   padding: 12px 0 16px;
   line-height: 1;
}
#story .polaroid-item:hover a {
   transform: translateY(-8px) rotate(0deg) !important;
   box-shadow: 0 0 0 1px var(--rule), 0 30px 52px -28px rgba(34, 31, 26, .6);
}

/* Owl carousel */
.owl-theme .owl-nav [class*="owl-"],
.owl-prev, .owl-next { color: var(--muted) !important; background: transparent !important; }
.owl-theme .owl-nav [class*="owl-"]:hover i { color: var(--ink) !important; }
.owl-theme .owl-dots .owl-dot span {
   background: var(--rule-strong) !important;
   width: 7px; height: 7px;
   margin: 5px;
}
.owl-theme .owl-dots .owl-dot.active span { background: var(--ink) !important; }

/* ------------------------------------------------------------------ RSVP */
.rsvp-grid {
   display: grid;
   grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
   gap: clamp(24px, 4vw, 48px);
   align-items: center;
   max-width: 980px;
   margin: 0 auto;
}
.rsvp-photo { margin: 0; }
.rsvp-photo img {
   width: 100%;
   display: block;
   background: var(--card);
   padding: 9px;
   box-shadow: 0 0 0 1px var(--rule), 0 26px 52px -34px rgba(34, 31, 26, .5);
}
#rsvp .well { padding: clamp(30px, 4vw, 48px); }

.field-label {
   display: block;
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--ink);
   margin: 0 0 12px;
}
.field-label .required { color: var(--brass); }

#rsvp_form input[type="text"],
#rsvp_form .input-field {
   width: 100%;
   padding: 14px 16px;
   border: 1px solid var(--rule-strong);
   border-radius: 0;
   background: var(--paper);
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-size: 19px;
   color: var(--ink);
   box-shadow: none;
   transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
   margin: 0;
}
#rsvp_form input::placeholder { color: var(--muted); opacity: .75; font-style: italic; }
#rsvp_form input[type="text"]:focus,
#rsvp_form .input-field:focus {
   border-color: var(--forest);
   box-shadow: 0 0 0 3px rgba(141, 164, 109, .38);
   outline: none;
}
.field-hint {
   font-size: 13px;
   color: var(--muted);
   margin: 10px 0 24px;
}
.field-hint[role="alert"] { color: #8C3B2E; }

/* logo.png es un monograma BLANCO sobre transparente: sobre papel claro
   desaparecería. brightness(0) lo lleva a negro respetando el alfa, y la
   opacidad lo baja al peso de una tinta. */
.rsvp-logo {
   display: block;
   width: auto !important;
   max-width: 190px;
   margin: clamp(48px, 6vw, 72px) auto 0;
   filter: brightness(0);
   opacity: .78;
}

/* --------------------------------------------------------------- Footer */
footer {
   /* Cierra el pliego con el salvia de marca. Degradado mínimo para que no
      lea como un rectángulo plano. Todo el texto en tinta: sobre este verde
      cualquier tono claro se cae por debajo de 3:1. */
   background: linear-gradient(180deg, var(--sage) 0%, var(--sage-deep) 100%) !important;
   color: var(--ink);
   padding: 60px 0 44px;
   text-align: center;
}
.footer-monogram {
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-size: clamp(30px, 4vw, 42px);
   font-weight: 400;
   letter-spacing: .04em;
   color: var(--ink);
   line-height: 1.2;
   margin-bottom: 14px;
}
/* la itálica ya distingue el ampersand; el latón aquí daría 1.2:1 */
.footer-monogram .amp { font-style: italic; color: var(--ink); }
.footer-text {
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: rgba(34, 31, 26, .72);
   margin: 0;
}

/* ------------------------------- Código de vestimenta y restricciones */
/* Dos condiciones de la misma clase: van pareadas, separadas por filete,
   nunca como frase suelta dentro de un párrafo. */
.dress-code {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0;
   margin: clamp(34px, 4vw, 48px) auto 0;
   padding: 18px 0;
   max-width: 520px;
   border-top: 1px solid var(--rule);
   border-bottom: 1px solid var(--rule);
}
.dress-code li {
   padding: 2px 22px;
   border-left: 1px solid var(--rule);
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--body);
   line-height: 1.6;
}
.dress-code li:first-child { border-left: 0; }

/* ------------------------------------------ Página de agradecimiento */
.confirm-card {
   max-width: 680px;
   margin: 0 auto;
   text-align: center;
}
.confirm-title {
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-size: clamp(42px, 8vw, 78px);
   font-weight: 400;
   line-height: 1;
   color: var(--ink);
   margin: 0;
}
.confirm-title .italic { display: block; font-style: italic; }
.confirm-date {
   font-family: 'Karla', system-ui, sans-serif;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--muted);
   margin: 30px 0 clamp(34px, 4vw, 46px);
}
.confirm-card .event-grid { max-width: 100%; }
.confirm-monogram {
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-size: 34px;
   letter-spacing: .2em;
   text-indent: .2em;
   color: var(--ink);
   margin-top: clamp(40px, 5vw, 60px);
   line-height: 1;
}
.confirm-monogram .amp { font-style: italic; color: var(--brass); letter-spacing: 0; }
.confirm-monogram-date {
   font-family: 'Bodoni Moda', serif;
   font-optical-sizing: auto;
   font-variant-numeric: tabular-nums;
   font-size: 15px;
   letter-spacing: .3em;
   text-indent: .3em;
   color: var(--muted);
   margin: 10px 0 clamp(38px, 5vw, 52px);
}

/* ----------------------------------------------------- Revelado al scroll */
[data-reveal] {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity .8s var(--ease), transform .8s var(--ease);
   will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------- Keyframes */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise {
   from { opacity: 0; transform: translateY(22px); }
   to   { opacity: 1; transform: translateY(0); }
}
@keyframes bob {
   0%, 100% { transform: translateY(0); }
   50%      { transform: translateY(7px); }
}

/* --------------------------------------------------- Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
   }
   [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
   #intro .photowall { display: none; }   /* el héroe se queda con la foto principal */
}
@media (max-width: 991px) {
   .rsvp-grid { grid-template-columns: minmax(0, 1fr); }
   .rsvp-photo { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 767px) {
   :root { --nav-h: 60px; }
   body { font-size: 16px; }
   section { padding: clamp(60px, 13vw, 92px) 0; }
   .photowall { display: none; }

   .event-grid { grid-template-columns: minmax(0, 1fr); }

   /* el mosaico se desarma: en móvil el zigzag no se lee y recorta demasiado */
   .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .gallery-item:nth-child(n) { grid-column: span 1; aspect-ratio: 4 / 5; }

   #countdown .count { padding: 4px 2px; font-size: clamp(26px, 8.5vw, 40px); }
   #countdown .displayformat { font-size: 9px; letter-spacing: .08em; }

   .bank-row { flex-direction: column; align-items: flex-start; }
   .bank dd { justify-content: flex-start; width: 100%; }

   .btn, a.btn { padding: 14px 26px; letter-spacing: .16em; }

   /* Los nombres se apilan: es además el armado canónico de una
      invitación grabada, y evita que "Linda & Abelardo" desborde. */
   .couple-names { font-size: clamp(44px, 15vw, 84px) !important; line-height: 1.02 !important; }
   .couple-names .amp {
      display: block;
      font-size: .62em;
      margin: .06em 0;
   }
}
@media (max-width: 400px) {
   .gallery-grid { grid-template-columns: minmax(0, 1fr); }
   .gallery-item:nth-child(n) { aspect-ratio: 3 / 2; }
}