/* =========================================================================
   Side Trails — hoja de estilos única
   Mobile-first. Tokens según la guía de marca (guia-de-marca.md).
   Idea: la foto y el video mandan. Texto grande y escaso, mucho aire,
   movimiento lento y suave al hacer scroll (se apaga con "reducir movimiento").
   Orden: 1 tokens · 2 base · 3 layout · 4 movimiento · 5 componentes · 6 utilidades
   ========================================================================= */

/* 1. TOKENS -------------------------------------------------------------- */
:root{
  --agave:#1C211D;
  --agave-2:#2A312C;
  --cantera:#EEE8DF;
  --lino:#F4F0E9;
  --barro:#9C4A2B;
  --barro-claro:#C8774F;
  --piedra:#6B675F;
  --piedra-clara:#A8A297;
  --linea:#CFC7B9;
  --salvia:#8FA58C;

  --bg:var(--cantera); --fg:var(--agave); --muted:var(--piedra); --rule:var(--linea); --surface:var(--lino); --field:#FBF9F6;

  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad:20px;
  --max:1360px;
  --section:112px;
  --header:60px;
  --ease:cubic-bezier(0.23, 1, 0.32, 1);      /* ease-out fuerte para UI */
  --ease-io:cubic-bezier(0.77, 0, 0.175, 1);  /* movimiento en pantalla */
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
  --slow:1.1s;
}
@media (min-width:768px){ :root{ --pad:40px; --section:152px; --header:76px; } }
@media (min-width:1200px){ :root{ --pad:64px; --section:200px; } }

/* 2. BASE ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:var(--header); }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 17px/1.6 var(--sans); font-kerning:normal;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.is-dark{ --bg:#161A17; --fg:var(--cantera); --muted:var(--piedra-clara); --rule:rgba(238,232,223,.14); --surface:#1F2520; --field:#1F2520; color-scheme:dark; }
@media (min-width:768px){ body{ font-size:18px; } }
img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
figure{ margin:0; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.2em; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.01em; text-wrap:balance; }
h1 em,h2 em,h3 em,.statement em{ font-style:italic; }
p{ margin:0 0 1em; max-width:62ch; text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--barro); outline-offset:3px; }
.on-dark :focus-visible,.is-dark :focus-visible{ outline-color:var(--barro-claro); }
::selection{ background:var(--barro); color:var(--cantera); }

.skip{ position:absolute; left:var(--pad); top:-80px; z-index:100; background:var(--agave); color:var(--cantera); padding:12px 16px; text-decoration:none; }
.skip:focus{ top:12px; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 3. LAYOUT -------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.wrap--wide{ max-width:1680px; }
.section{ padding-block:var(--section); position:relative; }
.section--tight{ padding-block:calc(var(--section) * .55); }
.section--flush{ padding-top:0; }
.on-dark{ background:var(--agave); color:var(--cantera); --muted:var(--piedra-clara); --rule:rgba(238,232,223,.16); }
.on-lino{ background:var(--lino); }

/* Grano: solo sobre fondos lisos, nunca sobre fotos */
.tex{ position:relative; isolation:isolate; }
.tex::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url(../img/grain.png) repeat; background-size:256px; opacity:.32; }
.tex.on-dark::before{ opacity:.5; }

/* 4. MOVIMIENTO -----------------------------------------------------------
   [data-split]: el titular sube palabra por palabra al entrar en pantalla.
   [data-reveal]: el bloque aparece; si es foto, se descubre de abajo hacia arriba.
   Solo con JS (clase .js en <html>) y sin "reducir movimiento". */
.w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.w > span{ display:inline-block; }
@media (prefers-reduced-motion:no-preference){
  .js [data-split] .w > span{ transform:translateY(105%); transition:transform var(--slow) var(--ease); transition-delay:calc(var(--i, 0) * 55ms); }
  .js [data-split].is-in .w > span{ transform:none; }

  .js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
  .js [data-reveal].is-in{ opacity:1; transform:none; }

  .js figure[data-reveal]{ opacity:1; transform:none; clip-path:inset(12% 0 0 0); transition:clip-path 1.3s var(--ease); }
  .js figure[data-reveal] img{ transform:scale(1.12); transition:transform 1.6s var(--ease); }
  .js figure[data-reveal].is-in{ clip-path:inset(0 0 0 0); }
  .js figure[data-reveal].is-in img{ transform:none; }
}

/* 5. COMPONENTES --------------------------------------------------------- */

/* Tipos */
.display{ font-size:clamp(52px, 13vw, 168px); line-height:.94; letter-spacing:-.02em; }
.display--m{ font-size:clamp(44px, 9vw, 120px); line-height:.98; }
.h1{ font-size:clamp(42px, 7.4vw, 104px); line-height:1; letter-spacing:-.015em; }
.h2{ font-size:clamp(32px, 4.6vw, 60px); line-height:1.04; }
.h3{ font-size:clamp(26px, 3vw, 34px); line-height:1.15; }
.lead{ font-size:clamp(19px, 2vw, 23px); line-height:1.5; }
.small{ font-size:14px; line-height:1.5; }
.muted{ color:var(--muted); }
.serif{ font-family:var(--serif); }

/* Botones: uno principal por pantalla */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 28px; border:0; border-radius:999px; cursor:pointer;
  font:500 16px/1 var(--sans); letter-spacing:.005em; text-decoration:none;
  background:var(--fg); color:var(--bg);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .btn:hover{ background:var(--barro); color:var(--cantera); } }
.on-dark .btn, .btn--light{ background:var(--cantera); color:var(--agave); }
@media (hover:hover) and (pointer:fine){ .on-dark .btn:hover, .btn--light:hover{ background:var(--barro-claro); color:var(--agave); } }
.btn--block{ width:100%; }

.textlink{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:500; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/100% 1px no-repeat; transition:background-size .5s var(--ease); }
@media (hover:hover) and (pointer:fine){ .textlink:hover{ background-size:0 1px; background-position:100% calc(100% - 10px); } }
.arrow{ display:inline-block; transition:transform .4s var(--ease); }
@media (hover:hover) and (pointer:fine){ a:hover .arrow{ transform:translateX(5px); } }
.icon{ width:20px; height:20px; flex:none; }

/* Encabezado */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:50; height:var(--header); display:flex; align-items:center; color:var(--fg);
  transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:none; }
.site-header.is-solid{ background:color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.site-header.is-hidden{ transform:translateY(-100%); }
.logo{ display:block; position:relative; height:24px; }
.logo img{ height:100%; width:auto; transition:opacity .3s; }
.logo .logo--light{ position:absolute; inset:0 auto auto 0; opacity:0; }
@media (min-width:768px){ .logo{ height:30px; } }
.has-dark-hero .site-header:not(.is-solid),.is-dark .site-header{ color:var(--cantera); }
.has-dark-hero .site-header:not(.is-solid) .logo--light,.is-dark .site-header .logo--light{ opacity:1; }
.has-dark-hero .site-header:not(.is-solid) .logo--dark,.is-dark .site-header .logo--dark{ opacity:0; }
.header-actions{ display:flex; align-items:center; gap:4px; }
.header-cta{ min-height:40px; padding:0 16px; font-size:14px; }
.has-dark-hero .site-header:not(.is-solid) .header-cta{ background:var(--cantera); color:var(--agave); }
.menu-btn{ width:44px; height:44px; display:grid; place-items:center; background:none; border:0; color:inherit; cursor:pointer; padding:0; }
.menu-btn span{ display:block; width:22px; height:1.5px; background:currentColor; box-shadow:0 5px 0 currentColor, 0 -5px 0 currentColor; }
.nav-desktop{ display:none; }
@media (min-width:1024px){
  .menu-btn{ display:none; }
  .nav-desktop{ display:flex; align-items:center; gap:32px; font-size:15px; font-weight:500; margin-right:16px; }
  .nav-desktop a{ text-decoration:none; padding:10px 0; background:linear-gradient(currentColor,currentColor) 0 calc(100% - 6px)/0 1px no-repeat; transition:background-size .4s var(--ease); }
  @media (hover:hover) and (pointer:fine){ .nav-desktop a:hover,.nav-desktop a[aria-current="page"]{ background-size:100% 1px; } }
  .header-cta{ min-height:44px; padding:0 22px; }
}

/* Menú a pantalla completa (móvil) */
.menu{ position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; padding:14px var(--pad) 32px; overflow-y:auto;
  visibility:hidden; opacity:0; transition:opacity .4s var(--ease), visibility 0s .4s; }
.menu.is-open{ visibility:visible; opacity:1; transition:opacity .4s var(--ease); }
.menu-top{ display:flex; justify-content:space-between; align-items:center; }
.menu-top img{ height:40px; width:auto; }
.menu-close{ width:44px; height:44px; background:none; border:0; color:inherit; font-size:32px; line-height:1; cursor:pointer; }
.menu nav{ margin-top:56px; }
.menu nav ul{ list-style:none; margin:0; padding:0; }
.menu nav a{ display:block; font:400 46px/1.08 var(--serif); padding:6px 0; text-decoration:none; }
@media (prefers-reduced-motion:no-preference){
  .menu nav li{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .menu.is-open nav li{ opacity:1; transform:none; }
  .menu.is-open nav li:nth-child(2){ transition-delay:.06s; } .menu.is-open nav li:nth-child(3){ transition-delay:.12s; } .menu.is-open nav li:nth-child(4){ transition-delay:.18s; }
}
.menu-foot{ margin-top:auto; padding-top:40px; display:grid; gap:16px; }
.menu-foot .row{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
body.menu-open{ overflow:hidden; }

/* Barra inferior móvil + WhatsApp flotante en escritorio */
.bottom-bar{ position:fixed; inset:auto 0 0 0; z-index:40; display:grid; grid-template-columns:7fr 3fr; background:var(--agave); padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%); transition:transform .45s var(--ease); }
.bottom-bar.is-visible{ transform:none; }
.bottom-bar a{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:56px; color:var(--cantera); text-decoration:none; font-weight:500; font-size:15px; }
.bottom-bar a + a{ border-left:1px solid rgba(238,232,223,.18); }
.wa-float{ display:none; }
@media (min-width:1024px){
  .bottom-bar{ display:none; }
  .wa-float{ display:grid; place-items:center; position:fixed; right:28px; bottom:28px; z-index:40; width:54px; height:54px; border-radius:50%;
    background:var(--agave); color:var(--cantera); box-shadow:0 6px 24px rgba(28,33,29,.18); transition:transform .3s var(--ease), background .3s; }
  @media (hover:hover) and (pointer:fine){ .wa-float:hover{ background:var(--barro); transform:scale(1.06); } }
  .wa-float .icon{ width:24px; height:24px; }
}
.no-bar .bottom-bar,.no-bar .wa-float{ display:none; }
@media (max-width:1023px){ body:not(.no-bar){ padding-bottom:56px; } }

/* Fotos */
.media{ position:relative; overflow:hidden; background:var(--agave-2); color:var(--piedra-clara); }
.media img,.media video{ width:100%; height:auto; }
.ratio-45,.ratio-23,.ratio-32,.ratio-169,.ratio-21{ }
.ratio-45{ aspect-ratio:4/5; } .ratio-23{ aspect-ratio:2/3; } .ratio-32{ aspect-ratio:3/2; } .ratio-169{ aspect-ratio:16/9; } .ratio-21{ aspect-ratio:16/9; }
@media (min-width:900px){ .ratio-21{ aspect-ratio:21/9; } }
.ratio-45 img,.ratio-23 img,.ratio-32 img,.ratio-169 img,.ratio-21 img{ position:absolute; inset:0; height:100%; object-fit:cover; }
.ph{ display:flex; align-items:flex-end; padding:16px; min-height:100%; height:100%;
  background:linear-gradient(135deg, transparent 49.6%, rgba(238,232,223,.06) 50%, transparent 50.4%), var(--agave-2); font-size:13px; line-height:1.4; }
.ph span{ max-width:36ch; }
.ph b{ color:var(--barro-claro); font-weight:500; }

/* Recuadro de contenido pendiente (texto) */
.cn{ display:inline; padding:1px 6px; border:1px dashed var(--barro); border-radius:2px; color:var(--barro); background:rgba(156,74,43,.06); font:500 .8em/1.5 var(--sans); letter-spacing:0; }
.on-dark .cn,.is-dark .cn,.hero .cn{ color:var(--barro-claro); border-color:var(--barro-claro); }

/* Hero a sangre */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--cantera); background:var(--agave); overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media .media,.hero-media .ph{ position:absolute; inset:0; height:100%; }
.hero-media img,.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-video{ z-index:1; }
.hero-media::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,24,21,.42) 0%, rgba(20,24,21,0) 26%, rgba(20,24,21,0) 50%, rgba(20,24,21,.62) 100%); }
@media (prefers-reduced-motion:no-preference){ .hero-still img{ animation:settle 2.4s var(--ease) both; } }
@keyframes settle{ from{ transform:scale(1.08); } to{ transform:none; } }
.hero .ph{ align-items:center; justify-content:center; text-align:center; }
.hero-inner{ position:relative; z-index:3; padding-bottom:clamp(40px, 8vh, 88px); max-width:none; }
.hero-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 32px; margin-top:clamp(20px, 3vh, 36px); }
.hero-line{ margin:0; font-size:15px; color:rgba(238,232,223,.86); }
.hero .textlink{ color:var(--cantera); }
.hero--short{ min-height:82svh; }
.hero-pause{ position:absolute; z-index:3; right:var(--pad); top:calc(var(--header) + 12px); width:36px; height:36px; border-radius:50%; border:1px solid rgba(238,232,223,.5); background:transparent; cursor:pointer; }
.hero-pause::before,.hero-pause::after{ content:""; position:absolute; top:12px; width:2px; height:12px; background:var(--cantera); }
.hero-pause::before{ left:14px; } .hero-pause::after{ right:14px; }
.hero-pause.is-paused::before{ left:14px; width:0; height:0; background:none; border-left:9px solid var(--cantera); border-block:6px solid transparent; }
.hero-pause.is-paused::after{ display:none; }
.hero--page{ padding-top:calc(var(--header) + clamp(72px, 14vh, 160px)); padding-bottom:clamp(56px, 9vh, 112px); }

/* Intro */
.statement{ font:400 clamp(34px, 5.6vw, 84px)/1.04 var(--serif); letter-spacing:-.015em; max-width:16em; margin:0; }
.intro-note{ margin:clamp(32px, 5vw, 64px) 0 0 auto; max-width:30em; color:var(--muted); }
@media (min-width:900px){ .intro-note{ margin-right:8%; } }

/* Encabezado de sección */
.sec-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 32px; margin-bottom:clamp(40px, 6vw, 80px); }

/* Bodas destacadas (inicio) */
.features{ display:grid; gap:clamp(72px, 11vw, 160px); }
.feature{ display:grid; gap:20px; text-decoration:none; align-items:end; }
.feature-text .num{ font:400 15px/1 var(--sans); color:var(--muted); display:block; margin-bottom:16px; font-variant-numeric:tabular-nums; }
.feature-text p{ margin:12px 0 0; }
.feature-text .small{ margin-top:4px; }
.feature-text .textlink{ margin-top:12px; }
.feature .media img{ transition:transform 1.4s var(--ease); }
@media (hover:hover) and (pointer:fine){ .feature:hover .media img{ transform:scale(1.03); } }
@media (min-width:900px){
  .feature{ grid-template-columns:8fr 4fr; gap:48px; }
  .feature--flip{ grid-template-columns:4fr 8fr; }
  .feature--flip .media{ order:2; }
  .feature:nth-child(2) { margin-left:8%; }
}

/* Tarjetas */
.cards{ display:grid; gap:56px 24px; }
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1100px){ .cards{ grid-template-columns:repeat(3, 1fr); gap:80px 32px; } .cards > :nth-child(3n+2){ margin-top:96px; } }
.card{ display:block; text-decoration:none; }
.card .media{ margin-bottom:18px; }
.card .media img{ transition:transform 1.4s var(--ease); }
@media (hover:hover) and (pointer:fine){ .card:hover .media img{ transform:scale(1.04); } }
.card h3{ font-size:clamp(26px, 2.6vw, 34px); line-height:1.1; }
.card p{ margin:6px 0 0; font-size:14px; color:var(--muted); }

/* Film con fachada */
.film{ position:relative; display:block; width:100%; aspect-ratio:16/9; background:var(--agave-2); border:0; padding:0; cursor:pointer; color:var(--cantera); overflow:hidden; }
.film .media,.film .ph{ position:absolute; inset:0; height:100%; }
.film .media img{ transition:transform 1.4s var(--ease); }
@media (hover:hover) and (pointer:fine){ .film:hover .media img{ transform:scale(1.03); } }
.film::after{ content:""; position:absolute; inset:0; background:rgba(20,24,21,.18); transition:background .4s; }
@media (hover:hover) and (pointer:fine){ .film:hover::after{ background:rgba(20,24,21,.3); } }
.film-play{ position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; display:flex; align-items:center; gap:14px; font:500 15px/1 var(--sans); }
.film-play > span{ width:72px; height:72px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(238,232,223,.75); background:rgba(28,33,29,.25); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .5s var(--ease), background .3s; }
@media (hover:hover) and (pointer:fine){ .film:hover .film-play > span{ transform:scale(1.08); background:rgba(28,33,29,.5); } }
.film-play svg{ width:20px; height:20px; margin-left:3px; }
.film iframe{ position:absolute; inset:0; width:100%; height:100%; z-index:3; border:0; }
.film-meta{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; margin-top:16px; font-size:15px; }
.film-band .film{ margin-inline:calc(var(--pad) * -1); width:calc(100% + var(--pad) * 2); }
@media (min-width:900px){ .film-band .film{ margin-inline:0; width:100%; } }
.films-grid{ display:grid; gap:64px 32px; }
@media (min-width:900px){ .films-grid{ grid-template-columns:1fr 1fr; gap:96px 40px; } .films-grid > :nth-child(even){ margin-top:120px; } }
.films-stack{ display:grid; gap:48px; }
.film-item .textlink{ margin-top:4px; }

/* Tira horizontal de momentos */
.strip-sec{ overflow:hidden; }
.strip-title{ margin-bottom:clamp(32px, 5vw, 64px); }
.strip{ display:grid; grid-auto-flow:column; grid-auto-columns:62%; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; padding-inline:var(--pad); scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab; }
.strip::-webkit-scrollbar{ display:none; }
.strip > *{ scroll-snap-align:start; }
.strip:active{ cursor:grabbing; }
@media (min-width:700px){ .strip{ grid-auto-columns:36%; gap:16px; } }
@media (min-width:1100px){ .strip{ grid-auto-columns:23%; padding-inline:calc((100vw - min(var(--max), 100vw)) / 2 + var(--pad)); } .strip > :nth-child(even){ margin-top:72px; } }

/* Pedidas y sesiones */
.sessions{ display:grid; grid-auto-flow:column; grid-auto-columns:72%; gap:12px; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); }
.sessions::-webkit-scrollbar{ display:none; }
@media (min-width:900px){ .sessions{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); gap:32px; overflow:visible; margin:0; padding:0; } .sessions > :nth-child(2){ margin-top:96px; } }
.sess figcaption{ margin-top:14px; font:400 26px/1.1 var(--serif); }
.sessions-list{ display:grid; gap:clamp(80px, 10vw, 140px); }
.session-row header{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px; margin-bottom:28px; }
.session-row header p{ margin:0; }
.session-pics{ display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:12px; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); }
.session-pics::-webkit-scrollbar{ display:none; }
@media (min-width:900px){ .session-pics{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); gap:24px; overflow:visible; margin:0; padding:0; } }

/* Marquesina de lugares */
.marquee{ overflow:hidden; border-block:1px solid var(--rule); padding-block:28px; }
.marquee-track{ display:flex; gap:56px; width:max-content; font:italic 400 clamp(34px, 6vw, 76px)/1 var(--serif); }
.marquee-track span::after{ content:""; display:inline-block; width:.09em; height:.62em; margin-left:56px; background:var(--barro); transform:skewX(-13deg); vertical-align:baseline; }
@media (prefers-reduced-motion:no-preference){ .marquee-track{ animation:marquee 60s linear infinite; } }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ flex-wrap:wrap; width:auto; padding-inline:var(--pad); gap:16px 40px; } .marquee-track span:nth-child(n+11){ display:none; } }

/* Testimonio */
.quote-grid{ display:grid; gap:48px; align-items:center; }
@media (min-width:900px){ .quote-grid{ grid-template-columns:5fr 7fr; gap:80px; } }
.quote{ margin:0; }
.quote p{ font:italic 400 clamp(30px, 3.8vw, 54px)/1.12 var(--serif); max-width:none; margin:0; }
.quote footer{ margin-top:28px; font-size:15px; color:var(--muted); }

/* Cierre */
.closing{ text-align:center; }
.closing .display{ margin-bottom:40px; }
.closing .actions{ display:flex; flex-direction:column; align-items:center; gap:12px; }

/* Siguiente boda */
.next a{ position:relative; display:block; color:var(--cantera); text-decoration:none; overflow:hidden; background:var(--agave); }
.next .media{ opacity:.7; transition:opacity .6s var(--ease); }
.next .media img{ transition:transform 1.6s var(--ease); }
@media (hover:hover) and (pointer:fine){ .next a:hover .media{ opacity:.85; } .next a:hover .media img{ transform:scale(1.04); } }
.next-text{ position:absolute; inset:auto 0 0 0; padding-bottom:clamp(28px, 5vw, 64px); display:grid; gap:8px; }

/* Historia de la boda */
.story-grid{ display:grid; gap:40px; }
@media (min-width:900px){ .story-grid{ grid-template-columns:5fr 7fr; gap:80px; align-items:start; } }

/* Galería editorial: no recorta las fotos */
.gallery{ display:grid; gap:12px; }
.g-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.g-pair--wide{ grid-template-columns:1fr; }
.g-solo{ width:min(100%, 640px); margin-inline:auto; }
@media (min-width:768px){
  .gallery{ gap:20px; }
  .g-pair{ gap:20px; }
  .g-pair--wide{ grid-template-columns:1fr 1fr; }
  .g-solo{ width:50%; }
  .gallery > :nth-child(5n+3).g-solo{ margin-left:12%; }
}
@media (min-width:1200px){ .gallery{ gap:28px; } .g-pair{ gap:28px; } .g-pair:not(.g-pair--wide){ width:84%; margin-inline:auto; } }

/* Foto a sangre entre secciones */
.band .media{ width:100%; }

/* Listas de precios */
.prices{ border-top:1px solid var(--rule); }
.price-row{ display:grid; gap:8px 24px; padding:32px 0; border-bottom:1px solid var(--rule); }
@media (min-width:768px){ .price-row{ grid-template-columns:1fr minmax(200px, auto); align-items:baseline; } }
.price-row h3{ font-size:clamp(30px, 3.6vw, 46px); }
.price-row .desc{ margin:10px 0 0; color:var(--muted); font-size:16px; }
.price{ font:400 clamp(28px, 3vw, 38px)/1 var(--serif); }
.price small{ display:block; margin-top:6px; font:400 14px/1.4 var(--sans); color:var(--muted); }
@media (min-width:768px){ .price{ text-align:right; } }
.tag{ font:italic 400 18px/1 var(--serif); color:var(--barro); margin-left:12px; }

/* Tabla simple (viáticos) */
.table{ width:100%; border-collapse:collapse; font-size:16px; }
.table th,.table td{ text-align:left; padding:18px 0; border-bottom:1px solid var(--rule); vertical-align:baseline; }
.table td:last-child{ text-align:right; white-space:nowrap; padding-left:16px; }
.table th{ font-weight:500; }

/* Acordeón (details) */
.acc{ border-top:1px solid var(--rule); }
.acc details{ border-bottom:1px solid var(--rule); }
.acc summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:24px 0; font:400 clamp(24px, 3vw, 32px)/1.2 var(--serif); }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{ content:"+"; font:300 28px/1 var(--sans); transition:transform .3s var(--ease); }
.acc details[open] summary::after{ transform:rotate(45deg); }
.acc .acc-body{ padding:0 0 28px; }

/* Pasos */
.steps{ list-style:none; margin:0; padding:0; counter-reset:s; display:grid; }
.steps li{ counter-increment:s; display:grid; grid-template-columns:48px 1fr; gap:16px; padding:22px 0; border-top:1px solid var(--rule); font-size:clamp(18px, 1.6vw, 21px); }
.steps li:last-child{ border-bottom:1px solid var(--rule); }
.steps li::before{ content:counter(s); font:400 28px/1 var(--serif); color:var(--barro); }

/* Ficha (dl) */
.facts{ display:grid; margin:0; border-top:1px solid var(--rule); }
.facts div{ display:grid; grid-template-columns:110px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--rule); }
.facts dt{ color:var(--muted); font-size:15px; } .facts dd{ margin:0; }

/* Pie de página */
.site-footer{ padding-block:96px 48px; }
.footer-logo{ height:96px; width:auto; }
.footer-grid{ display:grid; gap:36px; margin-top:56px; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.footer-grid h2{ font:500 14px/1.4 var(--sans); color:var(--piedra-clara); margin-bottom:12px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.footer-grid a{ text-decoration:none; display:inline-block; padding:6px 0; }
@media (hover:hover) and (pointer:fine){ .footer-grid a:hover{ color:var(--barro-claro); } }
.footer-sign{ font:italic 400 clamp(32px, 3.4vw, 44px)/1.1 var(--serif); }
.footer-base{ margin-top:64px; padding-top:24px; border-top:1px solid rgba(238,232,223,.16); display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; font-size:14px; color:var(--piedra-clara); }

/* Formulario */
.form{ max-width:640px; }
.progress{ height:2px; background:var(--rule); margin:0 0 40px; }
.progress span{ display:block; height:100%; background:var(--fg); width:33.33%; transition:width .45s var(--ease); }
.step-count{ font-size:14px; color:var(--muted); margin-bottom:8px; }
fieldset{ border:0; padding:0; margin:0; min-width:0; }
legend{ font:400 clamp(32px, 4vw, 48px)/1.1 var(--serif); margin-bottom:28px; padding:0; }
.field{ display:grid; gap:8px; margin-bottom:24px; }
.field > label,.field > .label{ font-weight:500; font-size:16px; }
.hint{ font-size:14px; color:var(--muted); }
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%; min-height:52px; padding:12px 14px; border:1px solid var(--rule); border-radius:10px; background:var(--field); color:var(--fg); font:400 17px/1.4 var(--sans); }
textarea{ min-height:120px; resize:vertical; }
input:focus,select:focus,textarea:focus{ border-color:var(--fg); outline:2px solid var(--fg); outline-offset:0; }
.choices{ display:flex; flex-wrap:wrap; gap:8px; }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.choice span{ display:inline-flex; align-items:center; min-height:48px; padding:0 20px; border:1px solid var(--rule); border-radius:999px; background:var(--field); font-size:16px; transition:background .2s, color .2s; }
.choice input:checked + span{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.choice input:focus-visible + span{ outline:2px solid var(--barro); outline-offset:2px; }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:15px; }
.check input{ width:22px; height:22px; margin-top:2px; accent-color:var(--barro-claro); flex:none; }
.error{ color:var(--barro); font-size:14px; font-weight:500; }
.field.is-invalid input,.field.is-invalid select{ border-color:var(--barro); }
.form-nav{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; }
.form-back{ background:none; border:0; font:500 16px var(--sans); color:inherit; text-decoration:underline; text-underline-offset:.3em; cursor:pointer; min-height:44px; padding:0; }
.form [hidden]{ display:none!important; }
.honey{ position:absolute; left:-9999px; }

/* /ig/ página de enlaces */
.links-page{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:48px var(--pad); text-align:center; }
.links-page ul{ list-style:none; padding:0; margin:0; width:100%; max-width:420px; display:grid; gap:12px; }
.links-page .btn{ width:100%; }
.links-page .btn--line{ background:transparent; color:var(--cantera); border:1px solid rgba(238,232,223,.5); }

/* Aviso de idioma en "/" */
.lang-notice{ position:fixed; left:var(--pad); right:var(--pad); top:calc(var(--header) + 8px); z-index:45; margin-inline:auto; max-width:420px;
  display:flex; justify-content:space-between; gap:16px; align-items:center; padding:10px 10px 10px 18px; background:var(--lino); color:var(--agave); font-size:15px; border-radius:999px; box-shadow:0 8px 24px rgba(28,33,29,.12); }
.lang-notice button{ background:none; border:0; width:40px; height:40px; font-size:22px; cursor:pointer; }

/* 6. UTILIDADES ---------------------------------------------------------- */
.mt-s{ margin-top:16px; } .mt-m{ margin-top:32px; } .mt-l{ margin-top:72px; }
.mb-0{ margin-bottom:0; }
.grid-2{ display:grid; gap:40px; }
@media (min-width:900px){ .grid-2{ grid-template-columns:1fr 1fr; gap:80px; align-items:start; } }
.narrow{ max-width:760px; }
.center{ text-align:center; margin-inline:auto; }


/* =========================================================================
   v3 · Línea oscura cinematográfica + movimiento estilo Apple
   ========================================================================= */
html{ -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none; }
a,button,.btn,.choice,summary{ touch-action:manipulation; }
.btn,.menu-btn,.menu-close,.film,.path{ -webkit-user-select:none; user-select:none; }
input,select,textarea{ font-size:max(16px, 1em); }
.on-dark{ background:var(--bg); }
.on-lino{ background:var(--surface); color:var(--fg); }
.is-dark .cn{ color:var(--barro-claro); border-color:var(--barro-claro); background:rgba(200,119,79,.08); }
.is-dark .tag{ color:var(--barro-claro); }
.is-dark .steps li::before{ color:var(--barro-claro); }
.site-footer{ background:var(--bg); border-top:1px solid var(--rule); }
.site-footer.tex::before{ display:none; }

/* Grano de película sobre todo el sitio, también sobre fotos (como en los PDF) */
.grain{ position:fixed; inset:-50%; z-index:90; pointer-events:none; background:url(../img/grain.png) repeat; background-size:200px; opacity:.16; mix-blend-mode:overlay; }
@media (prefers-reduced-motion:no-preference){ .grain{ animation:grain 1s steps(6) infinite; } }
@keyframes grain{ 0%{transform:translate(0,0)} 17%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-4%)} 50%{transform:translate(-4%,-1%)} 67%{transform:translate(3%,3%)} 83%{transform:translate(-1%,4%)} 100%{transform:translate(0,0)} }
@media (prefers-reduced-transparency:reduce){ .grain{ display:none; } }
.tex::before{ opacity:0; }

/* Respuesta inmediata al presionar */
.btn{ transition:background .2s var(--ease), color .2s var(--ease), transform .12s var(--ease); }
.btn:active{ transform:scale(.97); }
.film:active .film-play > span{ transform:scale(.94); }

/* Encabezado: barra de vidrio flotante */
.site-header{ height:auto; padding-top:max(12px, env(safe-area-inset-top)); color:var(--cantera); }
.site-header .wrap{ padding-inline:max(12px, calc(var(--pad) - 12px)); }
.site-header .wrap > *{ position:relative; }
.header-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:8px 8px 8px 18px; border-radius:999px;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), -webkit-backdrop-filter .4s, backdrop-filter .4s; }
.site-header.is-solid{ background:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.site-header.is-solid .header-bar{ background:rgba(22,26,23,.62); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(238,232,223,.08), 0 8px 30px rgba(0,0,0,.25); }
@media (prefers-reduced-transparency:reduce){ .site-header.is-solid .header-bar{ background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none; } }
.site-header .logo .logo--light{ opacity:1; } .site-header .logo .logo--dark{ opacity:0; }
.header-cta{ background:var(--cantera); color:var(--agave); }
.nav-desktop a{ opacity:.82; transition:opacity .2s var(--ease); }
.nav-desktop a[aria-current="page"],.nav-desktop a:focus-visible{ opacity:1; }
@media (hover:hover) and (pointer:fine){ .nav-desktop a:hover{ opacity:1; } }

/* Menú del celular: hoja que nace del botón (esquina superior derecha) */
.menu{ background:rgba(16,19,17,.92); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); transform-origin:calc(100% - 40px) 32px;
  transform:scale(.96); transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s .28s; }
.menu.is-open{ transform:none; transition:opacity .28s var(--ease), transform .28s var(--ease); }
.menu.tex::before{ display:none; }
@media (prefers-reduced-motion:reduce){ .menu,.menu.is-open{ transform:none; } }

/* Intro: el logo aparece y se abre el telón (solo la primera vez en la visita) */
.intro{ display:none; }
.js .intro{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:#101311; pointer-events:none;
  transition:clip-path 1s var(--ease-io), visibility 0s 1s; clip-path:inset(0 0 0 0); }
.intro img{ width:min(240px, 52vw); height:auto; opacity:0; transform:translateY(12px); filter:blur(6px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
.intro.is-logo img{ opacity:1; transform:none; filter:blur(0); }
.intro.is-done{ clip-path:inset(0 0 100% 0); visibility:hidden; }
.intro.is-skip{ display:none; }
@media (prefers-reduced-motion:reduce){ .js .intro{ display:none; } }

/* Hero del inicio: un solo video enorme */
.hero--home{ min-height:100svh; align-items:flex-end; }
.hero--home .hero-inner{ text-align:center; display:grid; justify-items:center; gap:18px; padding-bottom:clamp(64px, 12vh, 128px); }
.hero-title{ font-size:clamp(46px, 8.6vw, 132px); line-height:.96; }
.hero--home .hero-line{ font-size:14px; letter-spacing:.01em; }
.scroll-cue{ position:absolute; z-index:3; left:50%; right:auto; bottom:24px; width:1px; height:40px; overflow:hidden; background:rgba(238,232,223,.2); }
.scroll-cue::after{ content:""; position:absolute; inset:0; background:var(--cantera); transform:translateY(-100%); }
@media (prefers-reduced-motion:no-preference){ .scroll-cue::after{ animation:cue 2.2s var(--ease-io) infinite; } }
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }
.hero-media::after{ background:linear-gradient(180deg, rgba(16,19,17,.35) 0%, rgba(16,19,17,0) 28%, rgba(16,19,17,0) 48%, rgba(16,19,17,.7) 100%); }

/* La foto que crece al hacer scroll (de tarjeta a pantalla completa) */
.expand-sec{ position:relative; padding-top:clamp(96px, 14vw, 180px); }
.expand{ height:170svh; position:relative; }
.expand-media{ position:sticky; top:0; height:100svh; overflow:hidden; clip-path:inset(var(--ey, 18%) var(--ex, 22%) round var(--er, 28px)); will-change:clip-path; }
.expand-media picture,.expand-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.expand-media img{ transform:scale(1.15); will-change:transform; }
.expand-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,14,13,.15), rgba(12,14,13,.55)); }
.expand-text{ position:relative; margin-top:-70svh; padding-bottom:clamp(96px, 14vw, 180px); z-index:2; pointer-events:none; }
.expand-text .statement{ text-shadow:0 2px 40px rgba(0,0,0,.45); max-width:14em; }
.expand-text .intro-note{ color:rgba(238,232,223,.86); text-shadow:0 1px 20px rgba(0,0,0,.5); }
@media (prefers-reduced-motion:reduce){ .expand{ height:auto; } .expand-media{ position:relative; height:70svh; clip-path:none; } .expand-media img{ transform:none; } .expand-text{ margin-top:48px; } }

/* Índice de bodas: nombres sobre una foto enorme que cambia */
.wl{ position:relative; background:#101311; color:var(--cantera); isolation:isolate; }
.wl-stage{ position:sticky; top:0; height:100svh; overflow:hidden; z-index:-1; }
.wl-set,.wl-img{ position:absolute; inset:0; }
.wl-img{ opacity:0; transition:opacity .7s var(--ease); }
.wl-img picture,.wl-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wl-img img{ transform:scale(1.06); transition:transform 6s linear; }
.wl-img.is-on{ opacity:1; }
.wl-img.is-on img{ transform:scale(1); }
.wl-shade{ position:absolute; inset:0; background:rgba(12,14,13,.62); transition:background .6s var(--ease); }
.wl.is-hot .wl-shade{ background:rgba(12,14,13,.32); }
.wl-body{ margin-top:-100svh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:calc(var(--header) + 48px) 96px; text-align:center; }
.wl-heading{ font:500 13px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:rgba(238,232,223,.7); margin-bottom:clamp(28px, 4vw, 48px); }
.wl-list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(2px, .6vw, 8px); }
.wl-list a{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:6px 12px; text-decoration:none; transition:opacity .35s var(--ease); }
.wl-name{ font:400 clamp(36px, min(5.6vw, 8.4svh), 84px)/1.02 var(--serif); letter-spacing:-.02em; transition:transform .5s var(--ease); }
.wl-meta{ font-size:13px; color:rgba(238,232,223,.72); opacity:0; transform:translateY(-4px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.wl.is-hot .wl-list a:not(.is-on){ opacity:.35; }
.wl-list a.is-on .wl-meta{ opacity:1; transform:none; }
@media (hover:hover) and (pointer:fine){ .wl-list a.is-on .wl-name{ transform:translateY(-2px); } }
@media (max-width:767px){ .wl-meta{ opacity:.75; transform:none; } }

/* Caminos a las demás páginas */
.paths{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.path{ position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 24px; padding:clamp(24px, 3.4vw, 40px) 4px; border-bottom:1px solid var(--rule); text-decoration:none; }
.paths li:first-child .path{ border-top:0; }
.path-title{ font:400 clamp(36px, 6vw, 84px)/1 var(--serif); letter-spacing:-.02em; transition:transform .5s var(--ease); }
.path-note{ grid-column:1; font-size:14px; color:var(--muted); }
.path-arrow{ grid-column:2; grid-row:1 / span 2; width:52px; height:52px; border-radius:50%; border:1px solid var(--rule); display:grid; place-items:center; font-size:20px; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.path:active .path-arrow{ transform:scale(.94); }
.path-thumb{ position:absolute; right:96px; top:50%; width:clamp(160px, 18vw, 260px); aspect-ratio:4/3; translate:0 -50%; overflow:hidden; border-radius:14px; pointer-events:none;
  opacity:0; transform:scale(.94) rotate(-2deg); transition:opacity .35s var(--ease), transform .45s var(--ease); display:none; }
.path-thumb picture,.path-thumb img{ width:100%; height:100%; object-fit:cover; }
@media (hover:hover) and (pointer:fine){
  .path-thumb{ display:block; }
  .path:hover .path-thumb{ opacity:1; transform:none; }
  .path:hover .path-title{ transform:translateX(10px); }
  .path:hover .path-arrow{ background:var(--fg); color:var(--bg); }
}

/* Cierre y cita en oscuro */
.quote-sec .quote p{ font-size:clamp(28px, 3.4vw, 46px); }
.closing{ background:var(--bg); }

/* Galería y tarjetas con esquinas suaves */
.gallery .media,.card .media,.film,.sess .media,.session-pics .media,.feature .media{ border-radius:6px; }

/* =========================================================================
   v4 · Logo animado, carrusel, botones flotantes, textura de película
   ========================================================================= */
/* Logo en línea */
.logo{ height:22px; }
@media (min-width:768px){ .logo{ height:28px; } }
.logo-svg{ display:block; height:100%; width:auto; overflow:visible; }
.logo-svg .lg-l,.logo-svg .lg-a,.logo-svg .lg-b,.logo-svg .lg-dot{ transform-box:view-box; }
/* Primera vista de la visita: las letras salen de las dos barras */
@media (prefers-reduced-motion:no-preference){
  .logo-play .logo-svg .lg-a{ animation:lgA .7s var(--ease) .1s both; }
  .logo-play .logo-svg .lg-b{ animation:lgB 1.6s var(--ease-io) .1s both; }
  .logo-play .logo-svg .lg-l{ animation:lgL .8s var(--ease) var(--d) both; }
  .logo-play .logo-svg .lg-dot{ animation:lgDot .5s var(--ease) 1.55s both; }
}
@keyframes lgA{ from{ opacity:0; transform:translateY(160px); } }
@keyframes lgB{ 0%{ opacity:0; transform:translate(-2120px,160px); } 30%{ opacity:1; transform:translate(-2120px,0); } 100%{ opacity:1; transform:none; } }
@keyframes lgL{ from{ opacity:0; transform:translateX(-60px); } }
@keyframes lgDot{ from{ opacity:0; } }

/* Instagram y WhatsApp flotantes (escritorio) */
.wa-float{ display:none!important; }
.float-actions{ display:none; }
@media (min-width:1024px){
  .float-actions{ display:flex; gap:10px; position:fixed; right:28px; bottom:28px; z-index:40; }
  .fab{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:var(--cantera);
    background:rgba(22,26,23,.66); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
    border:1px solid rgba(238,232,223,.14); box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .12s var(--ease), background .25s var(--ease); }
  .fab .icon{ width:22px; height:22px; }
  .fab:active{ transform:scale(.94); }
  @media (hover:hover) and (pointer:fine){ .fab:hover{ background:var(--barro); } }
}
.no-bar .float-actions{ display:none; }
/* Barra inferior del celular: disponibilidad + WhatsApp + Instagram */
.bottom-bar{ grid-template-columns:1fr auto auto; background:rgba(16,19,17,.86); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-top:1px solid rgba(238,232,223,.1); }
.bottom-bar a{ padding-inline:18px; white-space:nowrap; }
@media (max-width:430px){ .bottom-bar a{ padding-inline:14px; font-size:14px; } .bottom-bar a:nth-child(2) span{ display:none; } }
.bottom-bar a:first-child{ justify-content:flex-start; padding-left:max(20px, env(safe-area-inset-left)); }
.bottom-bar a:active{ background:rgba(238,232,223,.06); }

/* Carrusel de fotos: pasa de derecha a izquierda, constante y lento */
.mq-sec{ padding-top:clamp(72px, 9vw, 128px); overflow:hidden; }
.mq{ overflow:hidden; }
.mq-track,.mq-dup{ display:flex; gap:clamp(10px, 1.2vw, 16px); }
.mq-track{ width:max-content; }
.mq-item{ flex:none; height:clamp(240px, 44vh, 500px); overflow:hidden; border-radius:6px; background:var(--surface); }
.mq-item picture{ display:contents; }
.mq-item img{ height:100%; width:auto; max-width:none; display:block; }
@media (prefers-reduced-motion:no-preference){
  .mq-track{ animation:mq 80s linear infinite; }
  @media (hover:hover) and (pointer:fine){ .mq:hover .mq-track{ animation-play-state:paused; } }
}
@keyframes mq{ to{ transform:translateX(calc(-50% - clamp(5px, .6vw, 8px))); } }
@media (prefers-reduced-motion:reduce){ .mq{ overflow-x:auto; } .mq-dup{ display:none; } }

/* Foto que crece: sección más corta */
.expand-sec{ padding-top:clamp(64px, 8vw, 112px); }
.expand{ height:132svh; }
.expand-text{ margin-top:-64svh; padding-bottom:clamp(72px, 9vw, 128px); }

/* Grupos dentro del índice (destinos) */
.wl-group{ font:500 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:rgba(238,232,223,.6); margin:clamp(24px, 3vw, 40px) 0 6px; }
.wl-group:first-child{ margin-top:0; }

/* Sección "sin poses" */
.shy-grid{ display:grid; gap:48px; align-items:center; }
@media (min-width:900px){ .shy-grid{ grid-template-columns:7fr 5fr; gap:96px; } }
.shy .media{ border-radius:6px; }
.nowrap{ white-space:nowrap; }

/* Textura de película: polvo y rayones finos, muy sutiles (sin quemaduras) */
.dust{ position:fixed; inset:0; z-index:91; pointer-events:none; background:url(../img/dust.png) repeat; background-size:768px; opacity:0; }
.scratch{ position:fixed; top:0; bottom:0; left:50%; width:1px; z-index:91; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(238,232,223,.28) 18%, rgba(238,232,223,.1) 55%, rgba(238,232,223,.24) 82%, transparent); }
@media (prefers-reduced-motion:no-preference){
  .dust{ animation:dust 4.8s steps(1) infinite; }
  .scratch.is-on{ animation:scratch .6s steps(6) both; }
}
@keyframes dust{
  0%{ opacity:.3; background-position:0 0; } 9%{ opacity:0; } 21%{ opacity:.22; background-position:-213px 371px; } 27%{ opacity:0; }
  44%{ opacity:.28; background-position:301px -97px; } 51%{ opacity:0; } 68%{ opacity:.2; background-position:-411px -233px; } 74%{ opacity:0; }
  88%{ opacity:.25; background-position:157px 509px; } 93%{ opacity:0; }
}
@keyframes scratch{ 0%{ opacity:0; } 17%{ opacity:.9; } 33%{ opacity:.35; transform:translateX(2px); } 50%{ opacity:.8; transform:translateX(-1px); } 67%{ opacity:.25; } 84%{ opacity:.6; transform:translateX(1px); } 100%{ opacity:0; } }
@media (prefers-reduced-transparency:reduce){ .dust,.scratch{ display:none; } }

/* =========================================================================
   v5 · Marca al centro, textura solo en el fondo, galería tranquila
   ========================================================================= */
/* Símbolo "il" en el encabezado */
.logo{ height:30px; }
.logo-mark{ height:100%; width:auto; display:block; }
@media (min-width:768px){ .logo{ height:34px; } }

/* Hero del inicio: la marca manda, la frase acompaña */
.hero--home .hero-inner{ gap:clamp(14px, 2vh, 22px); padding-bottom:clamp(72px, 13vh, 140px); }
.hero-brand{ margin:0; line-height:0; }
.hero-brand .logo-svg{ width:clamp(260px, 52vw, 760px); height:auto; filter:drop-shadow(0 2px 30px rgba(0,0,0,.35)); }
.hero-tag{ margin:0; font:italic 400 clamp(20px, 2.6vw, 34px)/1.2 var(--serif); color:rgba(238,232,223,.9); max-width:none; }
.hero-tag em{ font-style:normal; }
@media (prefers-reduced-motion:no-preference){
  .hero-brand .lg-a{ animation:lgA .8s var(--ease) .25s both; }
  .hero-brand .lg-b{ animation:lgB 1.8s var(--ease-io) .25s both; }
  .hero-brand .lg-l{ animation:lgL .9s var(--ease) calc(var(--d) + .2s) both; }
  .hero-brand .lg-dot{ animation:lgDot .5s var(--ease) 1.9s both; }
}

/* Textura de película: detrás del contenido, solo se ve en los fondos lisos.
   Se desplaza más lento que la página (parallax), no se mueve sola. */
.grain,.dust,.scratch{ display:none!important; }
.filmbg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.filmbg-layer{ position:absolute; left:0; right:0; top:0; height:calc(100% + 1024px); will-change:transform;
  background:url(../img/scratches.png) repeat 0 0 / 1024px, url(../img/grain.png) repeat 0 0 / 256px; opacity:.5; }
@media (prefers-reduced-transparency:reduce){ .filmbg{ display:none; } }
.closing,.site-footer,.on-dark{ background:transparent; }
.on-lino{ background:rgba(238,232,223,.035); }

/* Cierre: lugares que pasan cada vez más rápido y se detienen */
.closing--places .roll-kicker{ font-size:15px; color:var(--muted); margin:0 auto 10px; }
.roll{ position:relative; height:1.05em; overflow:hidden; margin:0 auto 40px; }
.roll-words,.roll-final{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.roll-words span{ position:absolute; opacity:0; white-space:nowrap; }
.roll-words span.is-on{ opacity:1; }
.roll-final{ opacity:0; transform:translateY(30%); transition:opacity .8s var(--ease), transform .8s var(--ease); font-style:italic; white-space:nowrap; }
.roll.is-done .roll-words{ opacity:0; transition:opacity .25s; }
.roll.is-done .roll-final{ opacity:1; transform:none; }
@media (max-width:600px){ .roll{ height:2.1em; } .roll-final{ white-space:normal; text-align:center; } }
@media (prefers-reduced-motion:reduce){ .roll-words{ display:none; } .roll-final{ opacity:1; transform:none; } }

/* Galería de cada boda: cuadrícula tranquila + visor */
.gallery{ display:none; }
.gg{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; }
@media (min-width:700px){ .gg{ grid-template-columns:repeat(3, 1fr); gap:10px; } }
@media (min-width:1100px){ .gg{ gap:14px; } }
.gg-item{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:4px; overflow:hidden; }
.gg-item .media{ border-radius:4px; }
.gg-item img{ transition:transform .9s var(--ease), opacity .3s; }
@media (hover:hover) and (pointer:fine){ .gg-item:hover img{ transform:scale(1.03); } }
.gg-item:active img{ opacity:.85; }
.lb{ position:fixed; inset:0; z-index:300; background:rgba(10,12,11,.96); display:grid; touch-action:none; }
.lb[hidden]{ display:none; }
.lb-track{ position:absolute; inset:0; display:flex; will-change:transform; }
.lb-slide{ flex:0 0 100%; display:grid; place-items:center; padding:clamp(16px, 5vw, 72px) clamp(8px, 6vw, 96px); }
.lb-slide img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:2px; user-select:none; -webkit-user-drag:none; }
.lb-btn{ position:absolute; z-index:2; width:48px; height:48px; border-radius:50%; border:1px solid rgba(238,232,223,.2); background:rgba(22,26,23,.6); color:var(--cantera); font-size:20px; cursor:pointer;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:transform .12s var(--ease), background .2s; }
.lb-btn:active{ transform:scale(.94); }
.lb-close{ top:max(16px, env(safe-area-inset-top)); right:16px; font-size:26px; }
.lb-prev{ left:16px; top:50%; translate:0 -50%; } .lb-next{ right:16px; top:50%; translate:0 -50%; }
@media (pointer:coarse){ .lb-prev,.lb-next{ display:none; } }
.lb-count{ position:absolute; left:0; right:0; bottom:max(18px, env(safe-area-inset-bottom)); text-align:center; font-size:13px; color:rgba(238,232,223,.7); margin:0; max-width:none; }
body.lb-open{ overflow:hidden; }

/* Colecciones sin precios */
.coll-head{ display:grid; gap:32px; align-items:end; }
@media (min-width:900px){ .coll-head{ grid-template-columns:1fr auto; gap:64px; } }
.coll-from{ display:grid; gap:10px; justify-items:start; padding:24px 28px; border:1px solid var(--rule); border-radius:16px; background:rgba(238,232,223,.03); }
.coll-price{ font:400 clamp(34px, 3.6vw, 48px)/1 var(--serif); letter-spacing:-.01em; }
.coll-cta{ font-size:15px; white-space:nowrap; }
@media (min-width:768px){ .price-row .coll-cta{ justify-self:end; } }

/* Sin poses: grande, inmediato, el texto se ilumina al bajar */
.shy{ position:relative; display:grid; min-height:90svh; align-items:center; margin-block:clamp(48px, 8vw, 120px); }
.shy-media{ position:absolute; inset:0; overflow:hidden; }
.shy-media .media,.shy-media picture,.shy-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shy-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,14,13,.9) 0%, rgba(12,14,13,.72) 45%, rgba(12,14,13,.25) 100%); }
@media (max-width:899px){ .shy-media::after{ background:linear-gradient(180deg, rgba(12,14,13,.55), rgba(12,14,13,.88)); } }
.shy-body{ position:relative; z-index:1; padding-block:clamp(72px, 10vw, 140px); }
.shy-kicker{ font:500 13px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--barro-claro); margin-bottom:24px; }
.shy-title{ font:400 clamp(38px, 5.4vw, 80px)/1.04 var(--serif); letter-spacing:-.02em; max-width:13em; }
.shy-title em{ font-style:italic; }
.shy-title .ink{ opacity:.22; transition:opacity .25s linear; }
.shy-title .ink.on{ opacity:1; }
.shy-note{ margin-top:32px; max-width:34em; color:rgba(238,232,223,.82); }
@media (prefers-reduced-motion:reduce){ .shy-title .ink{ opacity:1; } }

/* Carrusel del inicio, un poco más angosto */
.mq-sec{ padding-top:clamp(56px, 7vw, 96px); }
.mq-item{ height:clamp(200px, 34vh, 400px); }

/* Campo con @ */
.input-prefix{ display:flex; align-items:center; border:1px solid var(--rule); border-radius:10px; background:var(--field); }
.input-prefix span{ padding-left:14px; color:var(--muted); }
.input-prefix input{ border:0; background:transparent; padding-left:4px; }
.input-prefix:focus-within{ outline:2px solid var(--fg); }
.input-prefix input:focus{ outline:0; }
textarea{ min-height:96px; }

/* Índice de bodas en el celular: fotos que cambian solas, sin depender del scroll */
@media (hover:none),(pointer:coarse){
  .wl .wl-list a{ opacity:1!important; }
  .wl-meta{ opacity:.75; transform:none; }
  .wl-shade{ background:rgba(12,14,13,.5)!important; }
}
.menu.on-dark{ background:rgba(16,19,17,.94); }

/* v5b · Inicio compacto: llegar rápido a las bodas */
.hero--home{ min-height:84svh; }
@media (max-width:767px){ .hero--home{ min-height:78svh; } }
.intro-sec{ padding-block:clamp(64px, 8vw, 112px); }
.intro-grid{ display:grid; gap:28px; align-items:end; }
@media (min-width:900px){ .intro-grid{ grid-template-columns:7fr 4fr; gap:72px; } }
.intro-sec .statement{ font-size:clamp(30px, 3.8vw, 56px); line-height:1.08; max-width:15em; }
.intro-side p{ color:var(--muted); font-size:16px; margin-bottom:20px; }
.btn--line{ background:transparent; color:var(--fg); border:1px solid var(--rule); min-height:46px; padding:0 22px; font-size:15px; }
@media (hover:hover) and (pointer:fine){ .btn--line:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); } }
.paths-sec{ padding-block:clamp(64px, 8vw, 112px); }
.path{ padding:clamp(18px, 2.4vw, 28px) 4px; }
.path-title{ font-size:clamp(30px, 4.2vw, 58px); }
.path-arrow{ width:44px; height:44px; font-size:18px; }
.quote-sec{ padding-block:clamp(48px, 6vw, 88px); }
.quote-sec .quote p{ font-size:clamp(24px, 2.8vw, 38px); }
legend:focus,legend:focus-visible{ outline:none; }
.hero--home .hero-media::after{ background:linear-gradient(180deg, rgba(16,19,17,.5) 0%, rgba(16,19,17,.3) 38%, rgba(16,19,17,.38) 62%, rgba(16,19,17,.78) 100%); }

/* =========================================================================
   v6 · Marca que se asienta, filosofía, testimonios, galerías grandes
   ========================================================================= */
/* Al terminar la animación del logo, el nombre se reduce 10% y la frase crece 5% (casi imperceptible) */
.hero-brand .logo-svg{ transform-origin:50% 100%; }
.hero-tag{ display:block; }
.hero-tag-in{ display:inline-block; transform-origin:50% 0; }
@media (prefers-reduced-motion:no-preference){
  .hero-brand .logo-svg{ animation:brandSettle 1.4s var(--ease-io) 2.5s both; }
  .hero-tag-in{ animation:tagGrow 1.4s var(--ease-io) 2.5s both; }
}
@media (prefers-reduced-motion:reduce){ .hero-brand .logo-svg{ transform:scale(.9); } .hero-tag-in{ transform:scale(1.05); } }
@keyframes brandSettle{ to{ transform:scale(.9); } }
@keyframes tagGrow{ to{ transform:scale(1.05); } }

/* Etiqueta pequeña sobre títulos */
.kicker{ font:500 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--barro-claro); margin:0 0 20px; }

/* Filosofía: el texto se ilumina al bajar */
[data-ink] .ink{ opacity:.2; transition:opacity .25s linear; }
[data-ink] .ink.on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ [data-ink] .ink{ opacity:1; } }
.intro-sec .statement{ font-size:clamp(30px, 3.6vw, 54px); line-height:1.12; max-width:17em; }
.intro-sec .statement em{ font-style:italic; }
.intro-side p em{ font-family:var(--serif); font-size:1.15em; color:var(--fg); }
.intro-side .btn{ margin-top:8px; }

/* Testimonios: foto + cita, con flechas */
.tm-sec{ padding-block:clamp(64px, 8vw, 120px); }
.tm-slide{ display:grid; gap:32px; align-items:center; margin:0; }
.tm-slide[hidden]{ display:none; }
@media (min-width:900px){ .tm-slide{ grid-template-columns:4fr 7fr; gap:80px; } }
.tm-photo .media{ border-radius:6px; }
.tm-slide .quote p{ font:italic 400 clamp(24px, 2.8vw, 40px)/1.2 var(--serif); }
.tm-slide .quote footer{ margin-top:24px; font-size:15px; color:var(--muted); }
@media (prefers-reduced-motion:no-preference){ .tm-slide.is-in{ animation:tmIn .6s var(--ease) both; } }
@keyframes tmIn{ from{ opacity:0; transform:translateX(16px); } }
.tm-nav{ display:flex; align-items:center; gap:16px; justify-content:flex-end; margin-top:28px; }
.tm-btn{ width:48px; height:48px; border-radius:50%; border:1px solid var(--rule); background:transparent; color:var(--fg); font-size:18px; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease), transform .12s var(--ease); }
.tm-btn:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){ .tm-btn:hover{ background:var(--fg); color:var(--bg); } }
.tm-count{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:3.5em; text-align:center; }

/* Galerías grandes: miniaturas más pequeñas */
.gg--dense{ grid-template-columns:repeat(3, 1fr); gap:4px; }
@media (min-width:700px){ .gg--dense{ grid-template-columns:repeat(4, 1fr); gap:8px; } }
@media (min-width:1100px){ .gg--dense{ grid-template-columns:repeat(5, 1fr); gap:10px; } }

/* v7 · ENTREGAS PRIVADAS (galería de la pareja) ----------------------------- */
.dv-top{ position:fixed; z-index:60; top:0; left:0; right:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:max(12px, env(safe-area-inset-top)) var(--pad) 12px; color:var(--cantera);
  background:linear-gradient(rgba(14,17,15,.55), rgba(14,17,15,0)); transition:background .4s var(--ease); }
.dv-scrolled .dv-top{ background:rgba(18,22,19,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.dv-logo img{ height:34px; width:auto; }
.dv-top-name{ font:400 20px/1 var(--serif); opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease); white-space:nowrap; }
.dv-scrolled .dv-top-name{ opacity:1; transform:none; }
.dv-top-btn{ justify-self:end; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border-radius:999px;
  border:1px solid rgba(238,232,223,.35); color:inherit; text-decoration:none; font-size:14px; transition:background .25s var(--ease), border-color .25s; }
.dv-top-btn .icon{ width:18px; height:18px; }
@media (hover:hover) and (pointer:fine){ .dv-top-btn:hover{ background:var(--cantera); color:var(--agave); border-color:var(--cantera); } }
@media (max-width:520px){ .dv-top-btn span{ display:none; } .dv-top-btn{ width:40px; padding:0; justify-content:center; } }

.dv-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--cantera); overflow:hidden; }
.dv-cover{ position:absolute; inset:0; }
.dv-cover img,.dv-cover .ph{ width:100%; height:100%; object-fit:cover; }
.dv-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,11,.1) 40%, rgba(10,12,11,.75)); }
.dv-hero-text{ position:relative; z-index:1; padding-bottom:clamp(40px, 9vh, 96px); }
.dv-meta{ margin-top:14px; font-size:15px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.dv-sample{ display:inline-block; margin-bottom:18px; padding:6px 12px; border:1px solid rgba(238,232,223,.35); border-radius:999px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.dv-intro{ padding-block:clamp(56px, 10vw, 120px) 24px; }
.dv-facts{ list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px 28px; color:var(--muted); font-size:15px; }
.dv-facts b{ color:var(--fg); font-weight:500; }
.dv-hint{ margin-top:18px; }

.dv-videos{ display:grid; gap:clamp(28px, 5vw, 56px); padding-block:clamp(32px, 6vw, 72px); }
@media (min-width:1100px){ .dv-videos:has(.dv-video + .dv-video){ grid-template-columns:1fr 1fr; } }
.dv-frame{ position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#0E110F; }
.dv-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.dv-video figcaption{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:14px; font:400 24px/1.2 var(--serif); }

.dv-link{ display:inline-flex; align-items:center; gap:8px; padding:0; border:0; background:none; color:var(--muted); font:500 14px/1 var(--sans);
  text-decoration:none; cursor:pointer; transition:color .2s; min-height:40px; }
.dv-link .icon{ width:18px; height:18px; }
@media (hover:hover) and (pointer:fine){ .dv-link:hover{ color:var(--fg); } }

.dv-chips{ position:sticky; z-index:50; top:calc(58px + env(safe-area-inset-top)); margin-top:clamp(24px, 5vw, 56px);
  background:rgba(22,26,23,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-block:1px solid var(--rule); }
.dv-chips-in{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:10px var(--pad); max-width:var(--max); margin-inline:auto; scroll-snap-type:x proximity; }
.dv-chips-in::-webkit-scrollbar{ display:none; }
.dv-chips a{ flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:999px;
  color:var(--muted); text-decoration:none; font-size:14px; white-space:nowrap; transition:background .3s var(--ease), color .3s var(--ease); }
.dv-chips a span{ font-size:12px; opacity:.6; font-variant-numeric:tabular-nums; }
.dv-chips a.is-on{ background:var(--cantera); color:var(--agave); }
@media (hover:hover) and (pointer:fine){ .dv-chips a:not(.is-on):hover{ color:var(--fg); } }
html:has(.dv-chips){ scroll-padding-top:calc(120px + env(safe-area-inset-top)); }

.dv-chapter{ padding-top:clamp(48px, 8vw, 104px); }
.dv-ch-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; margin-bottom:clamp(18px, 3vw, 32px); }
.dv-ch-head .kicker{ flex-basis:100%; margin:0 0 6px; }
.dv-ch-head .h2{ margin-right:auto; }
.dv-ch-count{ font-size:14px; font-variant-numeric:tabular-nums; }
.dv-grid{ list-style:none; margin:0 auto; display:grid; grid-template-columns:repeat(2, 1fr); gap:4px; }
@media (min-width:700px){ .dv-grid{ grid-template-columns:repeat(3, 1fr); gap:8px; } }
@media (min-width:1100px){ .dv-grid{ grid-template-columns:repeat(4, 1fr); gap:10px; } }
@media (min-width:1600px){ .dv-grid{ grid-template-columns:repeat(5, 1fr); } }
.dv-grid li{ position:relative; }
.dv-item{ display:block; width:100%; aspect-ratio:4/5; padding:0; border:0; background:#1F2520; cursor:zoom-in; border-radius:3px; overflow:hidden; }
.dv-item img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), opacity .3s; }
@media (hover:hover) and (pointer:fine){ .dv-item:hover img{ transform:scale(1.03); } }
.dv-item:active img{ opacity:.85; }
.dv-pick{ position:absolute; top:6px; right:6px; width:44px; height:44px; padding:10px; border:0; background:none; cursor:pointer; color:var(--agave); }
.dv-pick svg{ width:24px; height:24px; padding:4px; border-radius:50%; border:1.5px solid rgba(255,255,255,.9); background:rgba(14,17,15,.25); color:transparent;
  transition:background .2s var(--ease), color .2s, transform .2s var(--ease), opacity .2s; box-shadow:0 1px 6px rgba(0,0,0,.25); }
.dv-pick:active svg{ transform:scale(.88); }
@media (hover:hover) and (pointer:fine){ .dv-pick svg{ opacity:0; } li:hover > .dv-pick svg,.dv-has-sel .dv-pick svg,.dv-pick:focus-visible svg{ opacity:1; } }
.is-picked .dv-pick svg{ background:var(--cantera); border-color:var(--cantera); color:var(--agave); opacity:1; }
.is-picked .dv-item{ outline:2px solid var(--cantera); outline-offset:-2px; }
.is-picked .dv-item img{ opacity:.82; }

.dv-bar{ position:fixed; z-index:80; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); translate:-50% 0; display:flex; align-items:center; gap:6px;
  padding:6px 6px 6px 20px; border-radius:999px; background:rgba(31,37,32,.92); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--rule); box-shadow:0 12px 40px rgba(0,0,0,.35); color:var(--cantera); white-space:nowrap;
  animation:dvBarIn .45s var(--ease-drawer); }
.dv-bar[hidden]{ display:none; }
@keyframes dvBarIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } }
.dv-bar-count{ font-size:15px; font-variant-numeric:tabular-nums; margin-right:6px; }
.dv-bar-clear{ min-height:44px; padding:0 12px; border:0; background:none; color:var(--muted); font:500 14px/1 var(--sans); cursor:pointer; }
.dv-bar-go{ min-height:44px; padding:0 20px; font-size:15px; }
.dv-bar-go .icon{ width:18px; height:18px; }
.dv-bar-go:disabled{ opacity:.7; cursor:progress; }
.lb-open .dv-bar{ z-index:310; }

.dv-lb-top{ position:absolute; z-index:3; top:max(14px, env(safe-area-inset-top)); left:16px; right:16px; display:flex; align-items:center; gap:10px; pointer-events:none; }
.dv-lb-top > *{ pointer-events:auto; }
.dv-lb .lb-btn.dv-lb-pick,.dv-lb .lb-btn.dv-lb-dl,.dv-lb .lb-btn.dv-lb-close{ position:static; display:grid; place-items:center; text-decoration:none; }
.dv-lb-count{ margin:0 auto 0 4px; font-size:13px; color:rgba(238,232,223,.75); max-width:none; }
.dv-lb-pick svg{ width:20px; height:20px; opacity:.55; }
.dv-lb-pick.is-on{ background:var(--cantera); color:var(--agave); }
.dv-lb-pick.is-on svg{ opacity:1; }
.dv-lb-close{ font-size:26px; }
.dv-lb .lb-slide{ padding:clamp(70px, 9vh, 96px) clamp(8px, 6vw, 96px) clamp(16px, 4vh, 48px); }

.dv-toast{ position:fixed; z-index:400; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); translate:-50% 12px; max-width:min(92vw, 460px);
  margin:0; padding:12px 18px; border-radius:12px; background:var(--cantera); color:var(--agave); font-size:14px; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), translate .3s var(--ease); }
.dv-toast.is-in{ opacity:1; translate:-50% 0; }

.dv-foot{ padding-block:clamp(80px, 14vw, 160px) calc(120px + env(safe-area-inset-bottom)); text-align:center; display:grid; justify-items:center; gap:6px; }
.dv-foot img{ height:44px; width:auto; margin-bottom:18px; opacity:.85; }
.dv-foot p{ margin:0; }
.dv-foot > p:first-of-type{ font:400 clamp(26px, 3.4vw, 40px)/1.15 var(--serif); }
.dv-expired{ min-height:100svh; display:grid; place-items:center; padding-block:120px; }
@media (prefers-reduced-motion:reduce){ .dv-bar{ animation:none; } .dv-item img{ transition:none; } }
.dv-lb{ background:#0B0D0C; }
.dv-has-sel .dv-lb .lb-slide{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
.dv-lb-count b{ font-weight:400; }
@media (max-width:520px){ .dv-lb-count b{ display:none; } }
.dv-view-only img{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }

/* v8 · ÍNDICE DE BODAS: los datos aparecen escalonados al pasar el cursor ---------- */
.wl-list .wl-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; opacity:1; transform:none; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(238,232,223,.78); min-height:1.6em; }
.wl-m{ display:inline-block; opacity:0; transform:translateY(10px); filter:blur(6px);
  transition:opacity .45s var(--ease) calc(var(--k) * 70ms), transform .7s var(--ease) calc(var(--k) * 70ms), filter .5s var(--ease) calc(var(--k) * 70ms); }
.wl-m + .wl-m::before{ content:"·"; margin:0 .8em; opacity:.6; }
.wl-list a.is-on .wl-m{ opacity:1; transform:none; filter:none; }
@media (hover:none), (pointer:coarse){ .wl-m{ opacity:.75; transform:none; filter:none; } .wl-list .wl-meta{ font-size:11px; } }
@media (prefers-reduced-motion:reduce){ .wl-m{ opacity:.75; transform:none; filter:none; transition:none; } }

/* v8 · CARRUSEL DE BODAS (inicio) ------------------------------------------------ */
.cr-sec{ --cr-w:min(86vw, 1180px); --cr-gap:12px; padding-block:clamp(72px, 10vw, 150px) clamp(56px, 8vw, 110px); overflow:hidden; }
@media (min-width:768px){ .cr-sec{ --cr-w:min(78vw, 1180px); --cr-gap:20px; } }
.cr-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:clamp(20px, 3vw, 36px); }
.cr-head .kicker{ margin:0; }
.cr{ position:relative; outline:none; }
.cr-track{ list-style:none; margin:0; padding:0; display:flex; gap:var(--cr-gap); will-change:transform; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.cr-track.is-drag{ cursor:grabbing; }
.cr-card{ flex:0 0 var(--cr-w); opacity:.38; transition:opacity .9s var(--ease); }
.cr-card.is-active{ opacity:1; }
.cr-card a{ display:block; position:relative; border-radius:6px; overflow:hidden; color:var(--cantera); text-decoration:none; -webkit-user-drag:none; }
.cr-card:not(.is-active) a{ cursor:pointer; }
.cr-media{ position:relative; aspect-ratio:4/5; max-height:72svh; background:#1F2520; }
@media (min-width:768px){ .cr-media{ aspect-ratio:16/9; } }
.cr-media picture,.cr-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; pointer-events:none; }
.cr-media img{ transform:scale(1.08); transition:transform 2.4s var(--ease); }
.cr-card.is-active .cr-media img{ transform:scale(1); }
.cr-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,11,0) 45%, rgba(10,12,11,.68)); }
.cr-cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex; flex-direction:column; gap:10px; padding:clamp(20px, 3.4vw, 44px); }
.cr-name{ font:400 clamp(32px, 4.6vw, 64px)/1 var(--serif); letter-spacing:-.015em; opacity:0; transform:translateY(18px); filter:blur(6px);
  transition:opacity .7s var(--ease) .2s, transform 1s var(--ease) .2s, filter .7s var(--ease) .2s; }
.cr-meta{ display:flex; flex-wrap:wrap; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(238,232,223,.82); }
.cr-meta span{ opacity:0; transform:translateY(10px); filter:blur(5px);
  transition:opacity .5s var(--ease) calc(.4s + var(--k) * 80ms), transform .8s var(--ease) calc(.4s + var(--k) * 80ms), filter .5s var(--ease) calc(.4s + var(--k) * 80ms); }
.cr-meta span + span::before{ content:"·"; margin:0 .8em; opacity:.6; }
.cr-card.is-active .cr-name,.cr-card.is-active .cr-meta span{ opacity:1; transform:none; filter:none; }
@media (hover:hover) and (pointer:fine){ .cr-card.is-active a:hover .cr-media img{ transform:scale(1.025); transition-duration:1.4s; } }
.cr-ctrl{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:clamp(20px, 3vw, 32px); }
.cr-dots{ display:flex; align-items:center; gap:2px; padding:6px 10px; border-radius:999px; background:rgba(238,232,223,.08); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.cr-dot{ display:grid; place-items:center; width:auto; min-width:22px; height:32px; padding:0 4px; border:0; background:none; cursor:pointer; }
.cr-dot span{ position:relative; display:block; width:8px; height:8px; border-radius:999px; background:rgba(238,232,223,.38); overflow:hidden; transition:width .6s var(--ease), background .3s; }
.cr-dot.is-on span{ width:40px; background:rgba(238,232,223,.28); }
.cr-dot span::after{ content:""; position:absolute; inset:0; background:var(--cantera); border-radius:inherit; transform:scaleX(0); transform-origin:left; }
.cr-dot.is-on:not(.is-run) span::after{ transform:scaleX(1); }
.cr-dot.is-run span::after{ animation:crProgress 5.2s linear forwards; }
@keyframes crProgress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (hover:hover) and (pointer:fine){ .cr-dot:not(.is-on):hover span{ background:rgba(238,232,223,.7); } }
.cr-play{ position:relative; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; background:rgba(238,232,223,.08); color:var(--cantera);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:background .3s, transform .15s var(--ease); }
.cr-play:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){ .cr-play:hover{ background:rgba(238,232,223,.16); } }
.cr-ico{ position:absolute; left:50%; top:50%; width:10px; height:12px; translate:-50% -50%; border-left:3px solid currentColor; border-right:3px solid currentColor; box-sizing:border-box; }
.cr-play.is-paused .cr-ico{ width:0; height:0; border:0; border-left:11px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent; translate:-35% -50%; }
@media (prefers-reduced-motion:reduce){ .cr-media img{ transform:none; transition:none; } .cr-name,.cr-meta span{ opacity:1; transform:none; filter:none; transition:none; } .cr-dot.is-run span::after{ animation:none; transform:scaleX(1); } }

/* v8 · Cierre de lugares como contador, con desenfoque de movimiento vertical */
.roll.is-counter .roll-words,.roll.is-counter .roll-final{ display:none; }
.roll-col{ position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; will-change:transform; }
.roll-col > span{ flex:none; height:var(--roll-h, 1.05em); display:flex; align-items:center; justify-content:center; white-space:nowrap; }
.roll-col .roll-col-final{ font-style:italic; }
.roll{ --roll-h:1.05em; }
@media (max-width:600px){ .roll{ --roll-h:2.1em; } .roll-col .roll-col-final{ white-space:normal; text-align:center; line-height:1.02; } }
.hero-video{ opacity:0; transition:opacity 1.2s var(--ease); }
.hero-video.is-playing{ opacity:1; }

/* Hero con video: arranca en negro y el video entra con un fundido; la foto solo aparece si el video no puede correr */
.hero-media--video{ background:#0E110F; }
.hero-media--video .hero-fallback{ display:none; }
.hero-media--video.is-fallback .hero-fallback{ display:block; }
.hero-media--video .hero-video{ transition:opacity 1.6s var(--ease); }


/* v10 · Hero: video propio con póster = primer cuadro; visible desde el inicio, sin fundido */
.hero-media--video .hero-video{ opacity:0; transition:opacity .9s var(--ease); }
.hero-media--video .hero-video.is-playing{ opacity:1; }
/* Fotos de portada: no se muestran a medio pintar (de arriba abajo); entran completas con fundido */
.js .hero-still img{ opacity:0; transition:opacity .7s var(--ease); }
.js .hero-still img.is-ready{ opacity:1; }
/* Primer cuadro del video: entra completo con fundido; el video aparece encima sin salto (mismo cuadro, sin zoom) */
.hero-media--video .hero-first{ position:absolute; inset:0; height:100%; margin:0; background:transparent; }
.hero-media--video .hero-first img{ animation:none; }