/* Tipografías del branding (Dropbox de Guayo, 18 sep): Indosign = script del "The"; Armonia Mezzo = EXPERIENCE y etiquetas */
@font-face{font-family:"Indosign";src:url("fuentes/indosign.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Armonia Mezzo";src:url("fuentes/armonia-mezzo.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Armonia Mezzo";src:url("fuentes/armonia-mezzo-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* ============================================================
   DIMONA — maqueta 1 (cotejada con el brief de estrategia digital)
   Paleta: beige · travertino · oro (la que DIMONA ya usa) + terciopelo oscuro cálido
   Tipografía: Big Caslon FB (Typekit) para titulares · Jost para todo lo demás
   ============================================================ */
:root{
  --travertino:#EFE8DE;   /* fondo de página */
  --papel:#F7F2EA;        /* tarjetas sobre travertino */
  --arena:#DCD2C3;        /* líneas finas, bordes */
  --piedra:#70675D;       /* texto secundario, etiquetas */
  --tinta:#221D19;        /* texto principal */
  --terciopelo:#1E1915;   /* bloques oscuros */
  --terciopelo-2:#2B241F;
  --marfil:#F1EAE0;       /* texto sobre oscuro */
  --marfil-60:rgba(241,234,224,.62);
  --oro:#8C6F3C;          /* acento sobre claro (legible) */
  --oro-claro:#CDB07A;    /* acento sobre oscuro */
  --gris-marca:#BDBAB5;   /* tarjeta de marca gris (la del video); alternativa */
  --papel-marca:#F3F0EA;  /* papel del patrón de D (mockup de Guayo) */
  --turquesa:#1F6F72;     /* temporada navideña 2026 (texto, legible sobre claro) */
  --turquesa-2:#30B8A8;   /* turquesa oficial de Timeless Gifts (muestreado del arte de Guayo) */
  --menta:#A8E0D8;        /* menta de la campaña */
  --tg-oscuro:#0E3B36;    /* texto sobre turquesa */
  --dorado-tg:#BB9158;    /* estrella dorada de la campaña */
  --celeste:#BFE3E6;      /* celeste de temporada (fondos suaves) */
  --celeste-2:#E4F2F3;

  --display:"big-caslon-fb","Libre Caslon Display",Georgia,"Times New Roman",serif;
  --display-it:"Libre Caslon Text",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --script:"Indosign",cursive;
  --armonia:"Armonia Mezzo","Jost",sans-serif;

  --t-hero:clamp(2.5rem,5.3vw,5.6rem);
  --t-h2:clamp(2.05rem,4.3vw,4.1rem);
  --t-h3:clamp(1.45rem,2.3vw,2.1rem);
  --t-body:1.0625rem;
  --t-small:.8125rem;
  --t-label:.6875rem;

  --cont:1320px;
  --gut:clamp(20px,5vw,76px);
  --sec:clamp(88px,10vw,150px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--travertino);color:var(--tinta);
  font-family:var(--sans);font-weight:400;font-size:var(--t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.005em}
h1 em,h2 em,h3 em{font-family:var(--display-it);font-style:italic;letter-spacing:0;font-size:.94em}
p{margin:0}
:focus-visible{outline:2px solid var(--oro);outline-offset:4px}

.cont{max-width:var(--cont);margin-inline:auto;padding-inline:var(--gut)}
.label{font-family:var(--sans);font-weight:400;font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--piedra)}
.label .dm{font-family:var(--display);letter-spacing:.22em;font-size:1.05em;color:inherit}
.lead{font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:300;line-height:1.55;max-width:38ch}
.muted{color:var(--piedra)}
.hair{border:0;border-top:1px solid var(--arena);margin:0}

/* Botones */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-size:var(--t-small);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:1.05em 1.7em;border:1px solid currentColor;border-radius:999px;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn--solido{background:var(--marfil);color:var(--terciopelo);border-color:var(--marfil)}
.btn--solido:hover{background:#fff}
.btn--fantasma{color:var(--marfil);border-color:var(--marfil-60)}
.btn--fantasma:hover{border-color:var(--marfil)}
.btn--tinta{background:var(--tinta);color:var(--travertino);border-color:var(--tinta)}
.btn--tinta:hover{background:#000}
.btn--linea{color:var(--tinta);border-color:var(--tinta)}
.btn--linea:hover{background:var(--tinta);color:var(--travertino)}
.btn .ar{font-size:1.1em;transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}

.link{position:relative;font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding-bottom:.35em}
.link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform-origin:left;transition:transform .45s var(--ease)}
.link:hover::after{transform:scaleX(.35)}

.tag{display:inline-block;font-family:var(--sans);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);border:1px solid currentColor;border-radius:999px;padding:.35em .8em;vertical-align:middle;white-space:nowrap}
.s--oscura .tag{color:var(--oro-claro)}

/* ------------------------------------------------------------
   Placeholders de foto (producción pendiente: rodaje 23–24 sep)
   ------------------------------------------------------------ */
.foto{
  position:relative;overflow:hidden;border-radius:2px;background:
    radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.5),transparent 55%),
    linear-gradient(160deg,#E6DED2 0%,#CFC4B3 55%,#B5A894 100%);
}
.foto::before{
  content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.foto::after{
  content:attr(data-cap);position:absolute;left:14px;bottom:12px;right:14px;
  font-family:var(--sans);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(34,29,25,.62);line-height:1.5;
}
.foto--oscura{background:
    radial-gradient(90% 70% at 70% 30%,rgba(255,240,215,.14),transparent 60%),
    linear-gradient(160deg,#4A3F34 0%,#2E2721 55%,#1E1915 100%)}
.foto--oscura::after{color:var(--marfil-60)}
.foto--piel{background:
    radial-gradient(110% 80% at 65% 25%,rgba(255,255,255,.35),transparent 55%),
    linear-gradient(165deg,#DCCFC0 0%,#BBA995 60%,#8F7D69 100%)}
.foto--travertino{background:
    radial-gradient(110% 80% at 30% 20%,rgba(255,255,255,.45),transparent 55%),
    linear-gradient(160deg,#EAE2D6 0%,#D3C7B6 60%,#B3A48F 100%)}
.foto--oro{background:
    radial-gradient(80% 60% at 60% 30%,rgba(255,236,196,.55),transparent 60%),
    linear-gradient(160deg,#D9BE8A 0%,#B8955C 55%,#7E6238 100%)}
.foto--oro::after{color:rgba(34,29,25,.7)}


/* Video dentro de un hueco de foto */
.foto--video{background:#151210}
.foto--video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.foto--video::before{display:none}
.foto--video::after{color:var(--marfil-60);z-index:1}

/* ------------------------------------------------------------
   Navegación
   ------------------------------------------------------------ */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;color:var(--marfil);transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.nav .cont{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.nav.is-solida,.nav--clara{background:rgba(239,232,222,.88);color:var(--tinta);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--arena)}
.marca{font-family:var(--display);font-size:1.35rem;letter-spacing:.24em;text-transform:uppercase;padding-left:.24em}
.nav__links{display:flex;align-items:center;gap:1.9em;font-size:var(--t-small);letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.nav__links a{opacity:.8;transition:opacity .3s;white-space:nowrap}
.nav__links a:hover{opacity:1}
.nav__cta{display:flex;align-items:center;gap:1.1em}
/* en la barra el WhatsApp va solo con icono: el rotulo ocupaba demasiado */
.nav .wa__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.nav .wa{gap:0;padding:.35em}
.nav .wa svg{width:20px;height:20px}
.nav__cta .btn{padding:.85em 1.4em;font-size:.6875rem}
.nav.is-solida .btn--fantasma,.nav--clara .btn--fantasma{color:var(--tinta);border-color:var(--tinta)}
.nav.is-solida .btn--fantasma:hover,.nav--clara .btn--fantasma:hover{background:var(--tinta);color:var(--travertino)}
.wa{display:inline-flex;align-items:center;gap:.5em;font-size:var(--t-small);letter-spacing:.1em;text-transform:uppercase;opacity:.85;white-space:nowrap}
.wa svg{width:18px;height:18px}
.nav__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.nav__burger span{display:block;width:22px;height:1px;background:currentColor;box-shadow:0 7px 0 currentColor,0 -7px 0 currentColor}
@media (max-width:1180px){
  .nav__links,.nav__cta .wa,.nav__cta .btn{display:none}
  .nav__burger{display:inline-flex}
}
@media (max-width:980px){.nav .cont{height:72px}}

/* ------------------------------------------------------------
   Portada: foto de la mesa a sangre, espacio negativo a la izquierda para el texto
   ------------------------------------------------------------ */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;color:var(--marfil);background:var(--terciopelo)}
.hero__fondo{position:absolute;inset:0;z-index:0}
.hero__fondo .foto{position:absolute;inset:0;border-radius:0;background:
    radial-gradient(55% 70% at 74% 48%,rgba(255,232,196,.30),transparent 62%),
    radial-gradient(40% 45% at 86% 62%,rgba(255,225,180,.16),transparent 60%),
    linear-gradient(100deg,#1E1915 0%,#241E19 38%,#4B4034 68%,#6F5D49 100%)}
.hero__fondo .foto::after{left:auto;right:var(--gut);bottom:28px;text-align:right;color:var(--marfil-60)}
.hero__velo{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(30,25,21,.55) 0%,rgba(30,25,21,.25) 45%,transparent 70%)}
.hero .cont{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;padding-top:120px;padding-bottom:clamp(40px,6vw,72px)}
.hero__txt{grid-column:1/8}
.hero__eyebrow{display:flex;align-items:center;gap:1em;margin-bottom:clamp(24px,3vw,40px);color:var(--marfil-60)}
.hero__eyebrow::before{content:"";width:40px;height:1px;background:currentColor;opacity:.7}
.hero h1{font-size:var(--t-hero);line-height:1.0;letter-spacing:-.012em}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l > span{display:block;transform:translateY(110%);animation:sube 1.1s var(--ease) forwards}
.hero h1 .l:nth-child(2) > span{animation-delay:.12s}
.hero h1 .l:nth-child(3) > span{animation-delay:.24s}
.hero h1 .l:nth-child(4) > span{animation-delay:.36s}
@keyframes sube{to{transform:translateY(0)}}
@keyframes aparece{to{opacity:1}}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(28px,3.4vw,44px);opacity:0;animation:aparece 1.2s .7s var(--ease) forwards}
.hero__cta .wa{opacity:.9}
.hero__pie{grid-column:1/13;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:clamp(56px,8vw,120px);padding-top:18px;border-top:1px solid rgba(241,234,224,.18);color:var(--marfil-60);opacity:0;animation:aparece 1.2s .95s var(--ease) forwards}
.hero__pie .label{color:inherit}
.hero__pie .grupo{display:flex;flex-wrap:wrap;gap:0 .2em}
.hero__pie .grupo .label + .label::before{content:"·";margin:0 1.1em}
.hero__scroll{display:inline-flex;align-items:center;gap:.8em;color:inherit}
.hero__scroll i{display:block;width:1px;height:38px;background:currentColor;opacity:.6;animation:hilo 2.4s var(--ease) infinite}
@keyframes hilo{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:980px){
  .hero .cont{padding-top:104px}
  .hero__txt{grid-column:1/13}
  .hero__eyebrow{display:block;line-height:1.9}
  .hero__eyebrow::before{display:none}
  .hero__velo{background:linear-gradient(180deg,rgba(30,25,21,.2) 0%,rgba(30,25,21,.7) 70%)}
  .hero__pie{flex-wrap:wrap}
}

/* ------------------------------------------------------------
   Secciones
   ------------------------------------------------------------ */
.s{padding-block:var(--sec)}
.s--oscura{background:var(--terciopelo);color:var(--marfil)}
.s--oscura .label{color:var(--marfil-60)}
.s--oscura .muted{color:var(--marfil-60)}
.s__cab{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;margin-bottom:clamp(48px,6vw,88px)}
.s__cab .label{grid-column:1/4;padding-top:.9em}
.s__cab h2{grid-column:4/12;font-size:var(--t-h2);line-height:1.05;text-wrap:balance}
.s__cab .lead{grid-column:4/10;margin-top:24px}
@media (max-width:980px){
  .s__cab{grid-template-columns:1fr;gap:16px}
  .s__cab .label,.s__cab h2,.s__cab .lead{grid-column:1/-1}
}

/* Disolvencia ligada al scroll: entra y sale con fundido (opacidad --fv la pone el motor) */
.rv{opacity:var(--fv,1);transform:translate3d(0,calc((1 - var(--fv,1)) * 14px),0);will-change:opacity,transform}
.rv.in{opacity:var(--fv,1)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero h1 .l > span,.hero__cta,.hero__pie{animation:none;opacity:1;transform:none}
  .hero__scroll i{animation:none}
}

/* 2 · Quiénes somos */
.quien{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.quien__txt{grid-column:1/7}
.quien__txt h2{font-size:var(--t-h2);line-height:1.06;max-width:15ch;text-wrap:balance}
.quien__txt .lead{margin-top:32px}
.quien__txt .porque{margin-top:28px;padding-top:24px;border-top:1px solid var(--arena);max-width:44ch;font-weight:300}
.quien__txt .porque b{display:block;font-family:var(--display);font-weight:400;font-size:1.25rem;margin-bottom:6px}
.quien__foto{grid-column:8/13;position:relative}
.quien__foto .foto{aspect-ratio:4/5}
.quien__foto .foto:not(.foto--chica)::after{top:12px;bottom:auto}
.quien__foto .foto--chica{position:absolute;left:-22%;bottom:-12%;width:46%;aspect-ratio:1/1;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.hechos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--arena)}
.hecho{padding:28px 24px 0 0;border-right:1px solid var(--arena)}
.hecho:last-child{border-right:0}
.hecho b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.3vw,2.3rem);line-height:1;letter-spacing:.02em;margin-bottom:12px}
.hecho span{display:block;color:var(--piedra);font-size:var(--t-small);letter-spacing:.02em;max-width:22ch}
@media (max-width:980px){
  .quien__txt,.quien__foto{grid-column:1/-1}
  .quien__foto{margin-top:40px;padding-left:12%}
  .quien__foto .foto--chica{left:-6%;bottom:-8%}
  .hechos{grid-template-columns:1fr 1fr}
  .hecho{border-right:0;border-bottom:1px solid var(--arena);padding:20px 0}
  .hecho:nth-child(odd){padding-right:20px}
}

/* 3 · Cómo es una cita: los cuatro momentos (secuencia real → numerados) */
.exp{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.exp__foto{grid-column:1/6;position:sticky;top:110px}
.exp__foto .foto{aspect-ratio:3/4}
.exp__lista{grid-column:7/13;margin:0;padding:0;list-style:none}
.mom{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:34px 0;border-top:1px solid var(--arena)}
.mom:last-child{border-bottom:1px solid var(--arena)}
.mom i{font-style:normal;font-family:var(--sans);font-weight:300;font-size:var(--t-small);letter-spacing:.14em;color:var(--piedra);padding-top:.55em}
.mom h3{font-size:var(--t-h3);line-height:1.1;margin-bottom:12px}
.mom p{max-width:46ch;font-weight:300}
.exp__nota{grid-column:7/13;margin-top:28px;color:var(--piedra);font-size:var(--t-small);max-width:52ch}
@media (max-width:980px){
  .exp__foto{grid-column:1/-1;position:static}
  .exp__foto .foto{aspect-ratio:4/3}
  .exp__lista,.exp__nota{grid-column:1/-1}
  .mom{grid-template-columns:44px 1fr}
}


/* Cómo es una cita en terciopelo (bloque oscuro entre dos claros) */
.s--oscura .mom{border-color:rgba(241,234,224,.16)}
.s--oscura .mom i{color:var(--marfil-60)}
.s--oscura .mom p{color:rgba(241,234,224,.8)}
.s--oscura .exp__nota{color:var(--marfil-60)}
.s--oscura .s__cab .label{color:var(--oro-claro)}

/* 4 · La selección: categorías, no catálogo */
.sel{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px) 24px;align-items:start}
.pieza{position:relative}
.pieza .foto{width:100%}
.pieza__nom{margin-top:16px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.pieza__nom h3{font-size:clamp(1.25rem,1.8vw,1.7rem);line-height:1.15}
.pieza__anot{margin-top:8px;display:flex;align-items:flex-start;gap:12px;color:var(--piedra);font-size:var(--t-small);font-weight:300;max-width:34ch}
.pieza__anot::before{content:"";width:34px;height:1px;margin-top:.7em;background:var(--piedra);flex:none;transform-origin:left;transition:transform .6s var(--ease)}
.pieza:hover .pieza__anot::before{transform:scaleX(1.6)}
.pieza--a{grid-column:1/6}.pieza--a .foto{aspect-ratio:4/5}
.pieza--b{grid-column:7/10;margin-top:18%}.pieza--b .foto{aspect-ratio:3/4}
.pieza--c{grid-column:10/13;margin-top:38%}.pieza--c .foto{aspect-ratio:3/4}
.pieza--d{grid-column:1/4;margin-top:-6%}.pieza--d .foto{aspect-ratio:3/4}
.pieza--e{grid-column:6/11;margin-top:8%}.pieza--e .foto{aspect-ratio:4/5}
.pieza--f{grid-column:10/13;margin-top:-16%}.pieza--f .foto{aspect-ratio:1/1}
.sel__pie{grid-column:1/13;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(40px,5vw,72px);padding-top:28px;border-top:1px solid var(--arena)}
.sel__pie p{max-width:48ch;color:var(--piedra);font-weight:300}
@media (max-width:980px){
  .sel{grid-template-columns:1fr 1fr;gap:36px 16px}
  .pieza{grid-column:auto !important;margin-top:0 !important}
  .pieza--a,.pieza--e{grid-column:1/-1 !important}
  .sel__pie{grid-column:1/-1}
}

/* 5 · Nuestro criterio: diagrama de talla brillante con anotaciones */
.conf{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.conf__dia{grid-column:1/7}
.diagrama{position:relative;margin:0;padding:8% 6%;border:1px solid var(--arena);background:var(--papel)}
.diagrama svg{width:100%;height:auto}
.diagrama .cap{margin-top:18px;color:var(--piedra);font-size:var(--t-small);font-weight:300;max-width:52ch}
.conf__col{grid-column:8/13;display:grid;gap:0}
.razon{padding:28px 0;border-top:1px solid var(--arena)}
.razon:last-of-type{border-bottom:1px solid var(--arena)}
.razon h3{font-size:var(--t-h3);line-height:1.1;margin-bottom:10px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.razon p{font-weight:300;max-width:42ch}
.cita{grid-column:8/13;margin:40px 0 0;padding-left:28px;border-left:1px solid var(--arena)}
.cita p{font-family:var(--display-it);font-size:clamp(1.3rem,1.9vw,1.8rem);line-height:1.3;font-style:italic;color:var(--piedra)}
.cita footer{margin-top:14px}
@media (max-width:980px){.conf__dia,.conf__col,.cita{grid-column:1/-1}}

/* 6 · Ocasiones */
.oc{margin:0;padding:0;list-style:none;border-top:1px solid var(--arena)}
.oc li{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--arena);transition:padding-left .5s var(--ease)}
.oc li:hover{padding-left:12px}
.oc h3{font-size:clamp(1.7rem,3.2vw,3rem);line-height:1.05}
.oc p{font-weight:300;color:var(--piedra);max-width:40ch}
@media (max-width:980px){.oc li{grid-template-columns:1fr;gap:8px}}


/* Ocasiones: video fijo a la izquierda; las ocasiones pasan en grande y se encienden al centro */
.oc-esc{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.oc-esc__video{grid-column:1/7;position:sticky;top:calc(84px + 16px)}
.oc-esc__video .foto{aspect-ratio:4/5;max-height:calc(100svh - 84px - 32px)}
.oc-esc__lista{grid-column:8/13;margin:0;padding:0;list-style:none}
.ocn{position:relative;padding:clamp(28px,5vh,56px) 0 clamp(28px,5vh,56px) 64px;border-top:1px solid var(--arena);opacity:.32;transition:opacity .6s var(--ease),transform .6s var(--ease);transform:translateX(0)}
.ocn:last-child{border-bottom:1px solid var(--arena)}
.ocn.is-activa{opacity:1;transform:translateX(10px)}
.ocn__num{position:absolute;left:0;top:calc(clamp(28px,5vh,56px) + .9em)}
.ocn h3{font-size:clamp(2.2rem,4.4vw,4.6rem);line-height:1;letter-spacing:-.01em}
.ocn p{margin-top:14px;font-weight:300;color:var(--piedra);max-width:40ch;font-size:clamp(1rem,1.15vw,1.1rem)}
@media (max-width:980px){
  .oc-esc__video,.oc-esc__lista{grid-column:1/-1}
  .oc-esc__video{position:static}
  .oc-esc__video .foto{aspect-ratio:4/3;max-height:none}
  .ocn{opacity:1;transform:none;padding-left:44px}
  .ocn h3{font-size:clamp(1.8rem,7vw,2.6rem)}
}
@media (prefers-reduced-motion:reduce){.ocn{opacity:1;transform:none;transition:none}}
.captura .ocn{opacity:1}
.captura .rv{opacity:1 !important;transform:none !important}
.captura .pz,.captura .sel-cab{opacity:1 !important}

/* Temporada (módulo estacional, oct–nov: "Lo que se elige con tiempo") */
.temporada{margin-top:clamp(56px,7vw,96px);padding:clamp(28px,4vw,48px);border:1px solid var(--arena);background:var(--papel);display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.temporada .label{grid-column:1/4}
.temporada h3{grid-column:4/9;font-size:var(--t-h3);line-height:1.15}
.temporada h3 small{display:block;font-family:var(--sans);font-size:var(--t-small);font-weight:300;letter-spacing:0;color:var(--piedra);margin-top:10px;max-width:44ch;line-height:1.55}
.temporada .btn{grid-column:10/13;justify-self:end}
@media (max-width:980px){.temporada{grid-template-columns:1fr}.temporada .label,.temporada h3,.temporada .btn{grid-column:1/-1;justify-self:start}}

/* 7 · Preguntas */
.faq{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.faq__intro{grid-column:1/6}
.faq__intro h2{font-size:var(--t-h2);line-height:1.05;text-wrap:balance;margin-top:28px}
.faq__lista{grid-column:6/13;border-top:1px solid var(--arena)}
.faq details{border-bottom:1px solid var(--arena)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 0;font-family:var(--display);font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mas{font-family:var(--sans);font-weight:300;font-size:1.4rem;line-height:1;color:var(--piedra);transition:transform .4s var(--ease);flex:none}
.faq details[open] summary .mas{transform:rotate(45deg)}
.faq .resp{padding:0 0 26px;max-width:56ch;font-weight:300;color:#3D3630}
@media (max-width:980px){.faq__intro,.faq__lista{grid-column:1/-1}}


/* 7 · Preguntas frecuentes: franja corta que se despliega ("vibes de apachar") */
.s--faq{padding-block:clamp(40px,5vw,72px)}
.faq-franja{border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta)}
.faq-franja > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,3vw,48px);padding:clamp(18px,2.6vw,30px) 4px;transition:background .3s var(--ease),padding-left .3s var(--ease)}
.faq-franja > summary::-webkit-details-marker{display:none}
.faq-franja > summary:hover{padding-left:14px;background:linear-gradient(90deg,rgba(0,0,0,.035),transparent 60%)}
.faq-franja__tit{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.1}
.faq-franja__mas{width:44px;height:44px;border:1px solid var(--tinta);border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-weight:300;font-size:1.5rem;line-height:1;transition:transform .45s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.faq-franja > summary:hover .faq-franja__mas{background:var(--tinta);color:var(--travertino)}
.faq-franja[open] > .faq-franja__mas,.faq-franja[open] > summary .faq-franja__mas{transform:rotate(45deg)}
.faq-franja__cuerpo{padding:8px 4px 20px;animation:despliega .5s var(--ease)}
@keyframes despliega{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq-franja__cuerpo details{border-top:1px solid var(--arena)}
.faq-franja__cuerpo summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:20px 0;font-family:var(--display);font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.2}
.faq-franja__cuerpo summary::-webkit-details-marker{display:none}
.faq-franja__cuerpo summary .mas{font-family:var(--sans);font-weight:300;font-size:1.3rem;line-height:1;color:var(--piedra);transition:transform .4s var(--ease);flex:none}
.faq-franja__cuerpo details[open] summary .mas{transform:rotate(45deg)}
.faq-franja__cuerpo .resp{padding:0 0 22px;max-width:60ch;font-weight:300;color:#3D3630}
@media (max-width:980px){.faq-franja > summary{grid-template-columns:1fr auto;row-gap:6px}.faq-franja > summary .label{grid-column:1/-1}}

/* 8 · Solicitud de cita: tarjeta sobre terciopelo con sello dorado (firma de la página) */
.inv{position:relative;overflow:hidden}
.inv::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 20% 100%,rgba(255,232,196,.08),transparent 60%);pointer-events:none}
.inv .cont{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.inv__txt{grid-column:1/6;position:sticky;top:120px}
.inv__txt h2{font-size:var(--t-h2);line-height:1.05;margin-top:24px;text-wrap:balance}
.inv__txt .lead{margin-top:24px;color:var(--marfil-60)}
.inv__alt{margin-top:44px;padding-top:28px;border-top:1px solid rgba(241,234,224,.18)}
.inv__alt p{color:var(--marfil-60);font-size:var(--t-small);margin-top:14px;max-width:40ch}
.tarjeta{grid-column:7/13;position:relative;background:var(--papel);color:var(--tinta);padding:clamp(28px,4vw,56px);box-shadow:0 40px 80px -40px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.04)}
.tarjeta::before{content:"";position:absolute;inset:10px;border:1px solid var(--arena);pointer-events:none}
.sello{position:absolute;top:-22px;right:32px;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#E2C68F,#B8955C 55%,#7E6238);
  color:#2B2114;display:grid;place-items:center;font-family:var(--display);font-size:1.6rem;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6),inset 0 0 0 3px rgba(255,255,255,.14);transform:rotate(-8deg)}
.sello::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(255,255,255,.35)}
.tarjeta h3{font-size:var(--t-h3);line-height:1.15;margin-bottom:6px}
.tarjeta > p{color:var(--piedra);font-size:var(--t-small);font-weight:300;margin-bottom:28px;max-width:52ch}
.campo{display:grid;gap:8px;padding:14px 0}
.campo label{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--piedra);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.campo label .nota{letter-spacing:.04em;text-transform:none;font-size:var(--t-small);font-weight:300}
.campo input,.campo select,.campo textarea{font:inherit;font-weight:300;color:var(--tinta);background:transparent;border:0;border-bottom:1px solid var(--arena);padding:8px 0;border-radius:0;width:100%;transition:border-color .3s}
.campo select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23736A5F'/></svg>");background-repeat:no-repeat;background-position:right 2px center;padding-right:24px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-bottom-color:var(--tinta)}
.campo input::placeholder,.campo textarea::placeholder{color:#A69C8F}
.campo .pregunta{font-family:var(--display);font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--tinta);line-height:1.3}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.tarjeta .envio{margin-top:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.tarjeta .envio small{color:var(--piedra);font-size:var(--t-small);font-weight:300;max-width:30ch;line-height:1.4}
.gracias{display:none;padding:24px 0 8px}
.gracias h3{margin-bottom:10px}
.tarjeta.enviada form{display:none}
.tarjeta.enviada .gracias{display:block}
@media (max-width:980px){
  .inv__txt{grid-column:1/-1;position:static}
  .tarjeta{grid-column:1/-1;margin-top:40px}
  .dos{grid-template-columns:1fr}
}

/* Pie */
.pie{padding:56px 0 40px;border-top:1px solid var(--arena)}
.pie .cont{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.pie__marca{grid-column:1/6}
.pie__marca .marca{font-size:1.7rem;padding-left:0}
.pie__marca p{margin-top:10px;color:var(--piedra);font-size:var(--t-small);max-width:40ch}
.pie__nav{grid-column:7/10;display:flex;flex-direction:column;gap:10px;font-size:var(--t-small);letter-spacing:.1em;text-transform:uppercase}
.pie__nav a{opacity:.75}.pie__nav a:hover{opacity:1}
.pie__legal{grid-column:10/13;text-align:right;color:var(--piedra);font-size:var(--t-small)}
@media (max-width:980px){
  .pie__marca,.pie__nav,.pie__legal{grid-column:1/-1;text-align:left}
  .pie__nav{margin:28px 0}
}

/* Página de solicitud de cita (URL de la pauta) */
.cita-pag{padding-top:calc(84px + clamp(48px,7vw,96px))}
.cita-pag .cont{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.cita-pag__txt{grid-column:1/6}
.cita-pag__txt h1{font-size:var(--t-h2);line-height:1.05;margin-top:24px;text-wrap:balance}
.cita-pag__txt .lead{margin-top:24px}
.cita-pag__txt .puntos{margin:36px 0 0;padding:0;list-style:none;border-top:1px solid var(--arena)}
.cita-pag__txt .puntos li{padding:16px 0;border-bottom:1px solid var(--arena);display:grid;grid-template-columns:9.5rem 1fr;gap:16px;align-items:baseline;font-weight:300}
.cita-pag__txt .puntos b{font-family:var(--display);font-weight:400;font-size:1.2rem}
.cita-pag .tarjeta{grid-column:7/13;box-shadow:0 30px 60px -40px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.04)}
.cita-pag__wa{margin-top:32px}
.cita-pag__video{grid-column:7/13;margin-top:0;position:sticky;top:calc(84px + 24px)}
/* el clip es vertical: el recorte es alto y subimos el encuadre para centrar la joya */
.cita-pag__video .foto{aspect-ratio:4/5}
.cita-pag__video .foto--video video{object-position:50% 88%}
.cita-pag__wa p{margin-top:12px;color:var(--piedra);font-size:var(--t-small);max-width:40ch}
@media (max-width:980px){
  .cita-pag{padding-top:calc(72px + 40px)}
  .cita-pag__txt{grid-column:1/-1}
  .cita-pag__video .foto{aspect-ratio:16/10}
  .cita-pag__video .foto--video video{object-position:50% 68%}
  .cita-pag .tarjeta{grid-column:1/-1;margin-top:40px}
  .cita-pag__video{grid-column:1/-1;margin-top:40px;position:static}
}


/* Portada flipbook: entra a pantalla completa solo con la piedra; los textos van apareciendo con el scroll */
.hero--flip{height:420svh;min-height:0;display:block;align-items:initial;overflow:visible} /* sin overflow:hidden: rompería el sticky */
.hero__pin{position:sticky;top:0;height:100svh;display:grid;align-items:end;overflow:hidden;background:#050403}
.hero__lienzo{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__velo--base{background:radial-gradient(120% 100% at 50% 42%,transparent 55%,rgba(5,4,3,.55) 100%)}
.hero__velo--texto{opacity:var(--velo,1);background:
  linear-gradient(180deg,rgba(5,4,3,.35) 0%,transparent 28%,transparent 48%,rgba(5,4,3,.62) 82%,rgba(5,4,3,.92) 100%),
  linear-gradient(90deg,rgba(5,4,3,.58) 0%,rgba(5,4,3,.22) 38%,transparent 62%)}
.hero__cue{position:absolute;left:50%;bottom:34px;z-index:3;transform:translateX(-50%);margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--marfil-60);opacity:var(--cue,0);pointer-events:none}
.hero__cue i{display:block;width:1px;height:44px;background:currentColor;opacity:.7;animation:hilo 2.4s var(--ease) infinite}
.hero--flip .cont{padding-top:0}
.hero--flip .hero__pie{margin-top:clamp(40px,6vw,88px)}
/* revelado por scroll: cada elemento entra en su tramo (--k) de la fase de texto (--t) */
.hero--flip .sr{--a:clamp(0,calc((var(--t,1) - var(--k,0)) / .5),1);opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 28px));animation:none}
.hero--flip h1 .l > span{animation:none;transform:none}
.hero--flip .hero__eyebrow,.hero--flip .hero__cta,.hero--flip .hero__pie{animation:none}
/* navegación quieta mientras solo se ve la piedra */
.nav .nav__links,.nav .nav__cta{transition:opacity .6s var(--ease)}
.nav.is-quieta .nav__links,.nav.is-quieta .nav__cta{opacity:0;pointer-events:none}
@media (max-width:980px){
  .hero--flip{height:320svh}
  .hero__velo--texto{background:linear-gradient(180deg,rgba(5,4,3,.4) 0%,transparent 30%,rgba(5,4,3,.55) 62%,rgba(5,4,3,.94) 100%)}
}
@media (prefers-reduced-motion:reduce){.hero--flip{height:100svh}.hero__cue{display:none}.hero__cue i{animation:none}}
.captura .hero--flip{height:900px}
.captura .hero__pin{position:relative;height:900px}
.captura .hero--flip .sr{--a:1}
.captura .hero__cue{display:none}
.captura .nav.is-quieta .nav__links,.captura .nav.is-quieta .nav__cta{opacity:1}


/* Portada con foto horizontal a sangre: la foto entra con un acercamiento lento; los textos suben al cargar */
.hero--foto{min-height:100svh;background:#050403}
.hero__img{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform-origin:18% 50%;transform:scale(1.18);animation:acerca 2.6s var(--ease) forwards}
@keyframes acerca{to{transform:scale(1.1)}}
.hero--foto .hero__velo--texto{opacity:1}
@media (max-width:980px){.hero__img img{transform-origin:50% 50%;transform:scale(1.06)}@keyframes acerca{to{transform:scale(1)}}}
@media (prefers-reduced-motion:reduce){.hero__img img{animation:none;transform:scale(1.1)}}


/* Fotos reales dentro de un hueco */
.foto--img{background:#151210}
.foto--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.foto--img::before,.foto--img::after{display:none}
.foto--video:not([data-cap])::after{display:none}

/* Portada fija + bloque de transición que pasa encima (parallax) */
.hero--foto{position:sticky;top:0;z-index:0}
.hero__sombra{position:absolute;inset:0;z-index:2;background:#050403;opacity:calc(var(--cubre,0) * .55);pointer-events:none}
.hero--foto .cont{transform:translateY(calc(var(--cubre,0) * -40px));opacity:calc(1 - var(--cubre,0) * .9)}
.transicion{position:relative;z-index:2;min-height:100svh;display:grid;place-items:center;text-align:center;background:var(--papel-marca);color:var(--tinta);overflow:hidden}
.transicion__patron{position:absolute;inset:-10%;width:120%;height:120%;opacity:var(--p,1)}
.transicion__patron .pd{font-family:var(--display);font-size:64px}
.transicion__patron .pd--luz{fill:#fff}
.transicion__patron .pd--base{fill:var(--papel-marca)}
.transicion__in{position:relative;transform:translateY(calc((1 - var(--p,1)) * 70px));opacity:var(--p,1)}
.mono{width:clamp(150px,22vw,260px);height:auto;overflow:visible;margin:0 auto clamp(20px,3vw,40px)}
.mono text{font-family:var(--display);font-size:96px;fill:var(--oro)}
.mono__d{transform-box:view-box;transform-origin:100px 100px;transform:rotate(calc(var(--a) - 90deg));opacity:0}
.transicion.is-on .mono__d{animation:gira-d 1.15s var(--ease) forwards;animation-delay:calc(var(--r) * .16s)}
@keyframes gira-d{to{transform:rotate(var(--a));opacity:1}}
.foto--mono{background:var(--papel-marca);display:grid;place-items:center}
.foto--mono::before,.foto--mono::after{display:none}
.mono--quieto{width:56%;height:auto;margin:0;overflow:visible}
.mono--quieto g{transform-box:view-box;transform-origin:100px 100px;transform:rotate(var(--a));opacity:1}
.transicion__marca{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,8.5vw,7.5rem);line-height:1;letter-spacing:.22em;text-transform:uppercase;padding-left:.22em}
.transicion__desde{margin:.7em 0 0;font-family:var(--sans);font-weight:400;font-size:clamp(.7rem,1.1vw,.95rem);letter-spacing:.46em;text-transform:uppercase;padding-left:.46em;color:var(--piedra)}
@media (max-width:980px){.transicion__patron .pd{font-size:48px}}
.captura .transicion .mono__d,.captura .transicion.is-on .mono__d{animation:none;transform:rotate(var(--a));opacity:1}
@media (prefers-reduced-motion:reduce){.mono__d{animation:none !important;transform:rotate(var(--a));opacity:1}}
.s,.pie{position:relative;z-index:2;background:var(--travertino)}
.s--oscura{background:var(--terciopelo)}
@media (prefers-reduced-motion:reduce){.hero--foto{position:relative}.transicion__in{transform:none;opacity:1}.hero__sombra{display:none}}
.captura .hero--foto{position:relative}
.captura .transicion{min-height:900px}
.captura .hero--foto .cont{transform:none;opacity:1}
.captura .transicion__in{transform:none;opacity:1}
.captura .hero__sombra{display:none}


/* Variante clara de la portada (foto luminosa: texto oscuro, velos de luz en vez de sombra) */
.hero--claro{color:var(--tinta);background:var(--papel-marca)}
.hero--claro .hero__eyebrow{color:var(--tinta);opacity:.78}
.hero--claro .hero__velo--base{background:radial-gradient(120% 100% at 50% 45%,transparent 60%,rgba(243,240,234,.35) 100%)}
.hero--claro .hero__velo--texto{background:
  linear-gradient(90deg,rgba(243,240,234,.72) 0%,rgba(243,240,234,.42) 34%,transparent 58%),
  linear-gradient(180deg,transparent 60%,rgba(243,240,234,.55) 88%,rgba(243,240,234,.8) 100%)}
.hero--claro .hero__sombra{background:var(--papel-marca)}
.hero--claro .hero__pie{border-top-color:rgba(34,29,25,.18);color:var(--piedra)}
.hero--claro h1{font-size:clamp(2.4rem,4.9vw,5.2rem)}
.hero--claro .hero__img img{transform-origin:12% 50%;transform:scale(1.28);object-position:50% 40%}
@keyframes acerca-claro{to{transform:scale(1.2)}}
.hero--claro .hero__img img{animation-name:acerca-claro}
@media (max-width:980px){
  /* en celular: la pieza arriba, entera; el texto abajo sobre papel */
  .hero--claro{display:block;min-height:0}
  .hero--claro .hero__img{position:relative;inset:auto;height:62svh}
  .hero--claro .hero__img img{transform-origin:50% 50%;transform:scale(1.06);animation-name:acerca;object-position:50% 50%}
  .hero--claro .hero__velo--base{display:none}
  .hero--claro .hero__velo--texto{position:absolute;top:0;left:0;right:0;height:62svh;background:linear-gradient(180deg,transparent 72%,var(--papel-marca) 100%)}
  .hero--claro .cont{display:block;padding-top:4px;padding-bottom:40px;background:var(--papel-marca)}
  .hero--claro .hero__pie{margin-top:36px}
}
@media (prefers-reduced-motion:reduce){.hero--claro .hero__img img{animation:none;transform:scale(1.2)}}


/* Portada con video */
.hero--video .hero__img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 35%;display:block}
.hero--video .hero__img{transform:scale(1.02)}
@media (max-width:980px){.hero--video .hero__img video{object-position:50% 35%}}

/* Tarjeta de marca también fija: Quiénes somos le pasa por encima */
.transicion{position:sticky;top:0;z-index:1}
.transicion__sombra{position:absolute;inset:0;z-index:1;background:var(--terciopelo);opacity:calc(var(--cubre2,0) * .5);pointer-events:none}
.transicion__in{z-index:2}
.transicion .transicion__in{transform:translateY(calc((1 - var(--p,1)) * 70px + var(--cubre2,0) * -50px))}
@media (prefers-reduced-motion:reduce){.transicion{position:relative}.transicion__sombra{display:none}}
.captura .transicion{position:relative}
.captura .tg__corona-fija{opacity:1}
.captura .tg__corona-anim{opacity:0}
.captura .transicion__sombra{display:none}


/* Portada limpia: titular pequeño, abajo a la izquierda; los textos entran con el scroll (pista .hero__runway) */
.hero--video .hero__txt{max-width:36ch}
.hero--video h1{font-size:clamp(1.8rem,3.3vw,3.5rem);line-height:1.04}
.hero--video .hero__eyebrow{margin-bottom:clamp(16px,2vw,24px)}
.hero--video .hero__cta{margin-top:clamp(18px,2.2vw,28px)}
.hero--video .hero__cta .btn{padding:.9em 1.4em;font-size:.72rem}
.hero--video .hero__pie{margin-top:clamp(28px,4vw,56px)}
.hero--video .cont{padding-bottom:clamp(24px,3.4vw,40px)}
.hero--video .hero__velo--texto{opacity:var(--velo,1)}
.hero--video .hero__velo--base{opacity:calc(.5 + var(--velo,1) * .5)}
.hero--video .sr{--a:clamp(0,calc((var(--t,1) - var(--k,0)) / .5),1);opacity:var(--a);transform:translate3d(0,calc((1 - var(--a)) * 24px),0);animation:none;will-change:opacity,transform}
.hero--video h1 .l > span{animation:none;transform:none}
.hero--video .hero__eyebrow,.hero--video .hero__cta,.hero--video .hero__pie{animation:none}
.hero--video .hero__cue{z-index:3}
.hero__runway{height:160svh;position:relative;z-index:1;pointer-events:none}
@media (max-width:980px){.hero__runway{height:120svh}}
@media (prefers-reduced-motion:reduce){.hero__runway{height:0}.hero--video .sr{--a:1}.hero--video .hero__cue{display:none}}
.captura .hero__runway{height:0}
.captura .hero--video .sr{--a:1}
.captura .hero--video .hero__cue{display:none}


/* Bloque blanco (Quiénes somos) */
.s--blanca{background:#FFFFFF}
.s--blanca .hechos,.s--blanca .hecho,.s--blanca .porque{border-color:#E9E4DC}


/* Línea "The DIMONA Experience" pegada abajo del encabezado */
.hero__eyebrow--arriba{position:absolute;z-index:3;top:calc(84px + 26px);left:var(--gut);right:max(var(--gut),calc((100% - var(--cont)) / 2 + var(--gut)));margin:0;justify-content:flex-end;text-align:right}
.hero__eyebrow--arriba::before{display:none}
.hero__eyebrow--arriba::after{content:"";width:40px;height:1px;background:currentColor;opacity:.7}
@media (max-width:980px){.hero__eyebrow--arriba{top:calc(72px + 18px);display:flex;flex-wrap:wrap;justify-content:flex-end;line-height:1.9}.hero__eyebrow--arriba::after{display:none}}

.dm-h2{letter-spacing:.12em;font-size:.86em}

.quien__desde{margin-top:28px}


/* Botón constante de WhatsApp para agendar cita */
.wa-flotante{position:fixed;right:18px;bottom:18px;z-index:55;display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.15em .85em .95em;border-radius:999px;background:var(--terciopelo);color:var(--marfil);font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 18px 40px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transition:transform .35s var(--ease),background .35s var(--ease)}
.wa-flotante:hover{transform:translateY(-2px);background:#000}
.wa-flotante svg{width:20px;height:20px;flex:none}
@media (max-width:980px){.wa-flotante{right:14px;bottom:14px;padding:.8em 1em .8em .9em;font-size:.68rem}}
.nota-maqueta{bottom:auto;top:auto;left:14px;right:auto;bottom:18px}
@media (max-width:700px){.nota-maqueta{display:none}}


/* Cómo es una cita: bloque más compacto */


/* ------------------------------------------------------------
   Escena fija: cita (capa A) + selección (capa B entra desde la derecha y avanza en horizontal)
   ------------------------------------------------------------ */
.escena{position:relative;z-index:2;height:600svh;padding:0;background:var(--terciopelo)}
.escena__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.capa{position:absolute;inset:0;isolation:isolate}
.capa--cita{z-index:1}
.capa--sel{z-index:2}
.capa--cita{display:flex;flex-direction:column;justify-content:center;padding-top:calc(84px + 10px);padding-bottom:18px;color:var(--marfil)}
.capa--cita .s__cab{margin-bottom:clamp(10px,1.5vh,18px)}
.capa--cita .s__cab h2{font-size:clamp(1.7rem,3vw,2.8rem)}
.capa--cita .exp__foto{grid-column:1/6;position:relative;top:auto}
.capa--cita .exp__foto .foto{aspect-ratio:4/5;max-height:58svh}
.capa--cita .mom{padding:clamp(8px,1.3vh,15px) 0;grid-template-columns:44px 1fr}
.capa--cita .mom h3{font-size:clamp(1.15rem,1.7vw,1.55rem);margin-bottom:6px}
.capa--cita .mom p{font-size:.88rem;line-height:1.48;max-width:52ch}
.capa--cita .exp__nota{margin-top:10px;font-size:.78rem}
.capa--sel{background:var(--travertino);transform:translate3d(var(--sx,100%),0,0);will-change:transform;padding-top:84px;display:flex;align-items:center;box-shadow:-40px 0 80px -40px rgba(0,0,0,.5)}
.sel-mov{display:flex;align-items:center;flex:none;padding-left:max(var(--gut),calc((100% - var(--cont)) / 2 + var(--gut)));padding-right:var(--gut);will-change:transform}
.sel-cab{flex:none;width:min(44vw,640px);padding-right:6vw} /* mismo aire que entre piezas */
.sel-cab h2{font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:1.02;margin-top:22px;text-wrap:balance}
.sel-cab__lead{margin-top:22px;font-weight:300;color:var(--piedra);max-width:40ch;font-size:clamp(1rem,1.2vw,1.15rem)}
.sel-cab__cue{margin-top:34px;display:inline-flex;gap:.6em;align-items:center}
.sel-cab__cue span{display:inline-block;animation:flecha 2s var(--ease) infinite}
@keyframes flecha{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.sel-h__track{display:flex;align-items:center;gap:6vw}
.pz{position:relative;flex:none;width:var(--w);z-index:var(--z,1);opacity:var(--fx,1);transform:translate3d(0,calc(var(--dy,0px) + var(--ky,0px)),0) scale(var(--ks,1));transform-origin:center;will-change:transform,opacity}
.sel-cab{opacity:var(--fx,1)}
.pz .foto{aspect-ratio:var(--r,4/5);max-height:52svh;box-shadow:0 40px 70px -40px rgba(0,0,0,.45),0 0 0 6px var(--travertino)}
.pz__nom{margin-top:14px;padding-right:8px}
.pz__nom h3{font-size:clamp(1.15rem,1.55vw,1.5rem);line-height:1.15}
.pz__nom p{margin-top:6px;color:var(--piedra);font-weight:300;font-size:.92rem;line-height:1.5;max-width:30ch}
.pz--fin{display:flex;flex-direction:column;justify-content:center;gap:18px;padding-left:0;transform:none}
.pz--fin p{color:var(--piedra);font-weight:300;max-width:30ch}
.sel-runway{height:0}
@media (max-width:980px){
  /* en celular: la cita va como bloque normal; la selección se fija al completar la pantalla y el scroll mueve las piezas */
  .escena{height:auto;background:transparent}
  .escena__pin{position:static;height:auto;overflow:visible}
  /* ojo: .capa trae inset:0 del escritorio. En movil hay que soltarlo, porque el bottom:0
     convierte el sticky de .capa--sel en un anclaje al pie y la monta encima de .capa--cita.
     Va relative (no static) para que .capa__fondo se mida contra su propia capa
     y no se estire a toda la altura de .escena */
  .capa{position:relative;inset:auto;transform:none !important;box-shadow:none}
  .capa--cita{padding:var(--sec) 0}
  .capa--cita .exp__foto .foto{aspect-ratio:16/10;max-height:none}
  .capa--sel{position:sticky;inset:auto;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:calc(72px + 18px) 0 0;background:var(--travertino)}
  .sel-runway{height:260svh}
  .sel-mov{display:block;width:100%;padding:0;transform:none !important}
  .sel-cab{width:auto;padding:0 24px 14px;opacity:1 !important;flex:none}
  .sel-cab h2{font-size:clamp(1.9rem,7.5vw,2.6rem);margin-top:12px}
  .sel-cab__lead{font-size:.95rem;max-width:34ch;margin-top:12px}
  .sel-cab__cue{display:inline-flex;margin-top:14px}
  .sel-h__track{display:flex;align-items:flex-start;gap:20px;padding:6px 24px 0 24px;overflow:visible;will-change:transform;flex:1;min-height:0}
  .pz{width:68vw !important;transform:none !important;opacity:var(--fx,1) !important}
  .pz .foto{aspect-ratio:3/4;max-height:min(37svh,90vw);box-shadow:none}
  .pz__nom p{font-size:.86rem;max-width:26ch}
  .sel-cab__lead{font-size:.92rem}
  .pz__nom{margin-top:12px}
  .pz--fin{width:68vw !important;padding-left:0;justify-content:flex-start;padding-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .escena{height:auto}.escena__pin{position:static;height:auto;overflow:visible}.capa{position:static;transform:none !important}
  .capa--cita{padding:var(--sec) 0}.capa--sel{padding:var(--sec) 0;display:block}.sel-mov{display:block;transform:none !important}.sel-h__track{overflow-x:auto}.pz{transform:none !important}
}
.captura .escena{height:auto}.captura .escena__pin{position:static;height:auto;overflow:visible}.captura .capa{position:static;transform:none !important}
.captura .capa--cita{padding:var(--sec) 0}.captura .capa--sel{padding:var(--sec) 0;display:block}.captura .sel-mov{display:flex;transform:none !important}.captura .sel-cab{width:min(44vw,640px)}


/* Lockup "The DIMONA Experience" centrado al entrar; se disuelve con el scroll y entonces aparece el logo del header */
.hero__lock{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--marfil);pointer-events:none;opacity:var(--lock,1);transform:scale(calc(1 + (1 - var(--lock,1)) * .05));will-change:opacity,transform}
.hero__lock-the{font-family:var(--script);font-style:normal;font-size:clamp(1.6rem,2.8vw,2.9rem);letter-spacing:.02em;margin-bottom:-.05em;text-transform:none;transform:rotate(-6deg) translateX(-.35em)}
.hero__lock-dimona{font-family:var(--display);font-size:clamp(2.8rem,8.5vw,8rem);letter-spacing:.22em;padding-left:.22em;line-height:1;text-transform:uppercase}
.hero__lock-exp{font-family:var(--armonia);font-weight:400;letter-spacing:.42em;padding-left:.42em;font-size:clamp(.8rem,1.35vw,1.25rem);text-transform:uppercase;margin-top:.7em}
.hero__lock img,.hero__lock svg{width:min(62vw,720px);height:auto;display:block}
.nav .marca{transition:opacity .5s var(--ease)}
.nav.is-vacia .marca{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hero__lock{display:none}}
.captura .hero__lock{display:none}
.captura .nav.is-vacia .marca{opacity:1}


/* Viñeta negra degradada que aparece con el scroll sobre el video de portada */
.hero__vineta{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--vin,0);background:radial-gradient(78% 68% at 50% 46%,transparent 38%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.92) 100%);will-change:opacity}
.captura .hero__vineta{opacity:.6}


/* Temporada navideña 2026: turquesa / celeste */
.temporada--navidad{background:linear-gradient(100deg,#5CC8C1 0%,#3FB0AA 100%);border-color:transparent;color:#0F3D3C}
.temporada--navidad .label{color:rgba(15,61,60,.72)}
.temporada__tag{display:inline-block;margin-right:14px;padding:.45em .9em;border:1px solid var(--turquesa);border-radius:999px;color:var(--turquesa);font-weight:500}
.temporada--navidad h3{color:#0F3D3C}
.temporada--navidad h3 small{color:rgba(15,61,60,.8)}
.btn--turquesa{background:#0F3D3C;color:#F1FAFA;border-color:#0F3D3C}
.btn--turquesa:hover{background:#082827;border-color:#082827}
@media (max-width:980px){.temporada__tag{display:inline-block;margin:0 0 10px}}

/* Pastilla "Christmas is coming" en la portada */
.hero__temporada{position:absolute;z-index:3;top:calc(84px + 26px + 34px);right:max(var(--gut),calc((100% - var(--cont)) / 2 + var(--gut)));display:inline-flex;align-items:center;gap:.6em;padding:.6em 1em .6em .8em;border-radius:999px;background:rgba(191,227,230,.16);border:1px solid rgba(191,227,230,.55);color:var(--celeste);font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s var(--ease)}
.hero__temporada:hover{background:rgba(191,227,230,.3)}
.hero__temporada-punto{width:6px;height:6px;border-radius:50%;background:var(--celeste);box-shadow:0 0 0 4px rgba(191,227,230,.25)}
.hero__temporada .ar{transition:transform .35s var(--ease)}
.hero__temporada:hover .ar{transform:translateX(3px)}
@media (max-width:980px){.hero__temporada{top:auto;bottom:calc(var(--gut) + 8px);right:var(--gut);left:auto}}


/* Cintillo inclinado "Christmas is coming": intervención sobre la portada */
.cintillo{position:absolute;z-index:4;top:calc(84px + 10px);left:-4vw;width:108vw;display:block;overflow:hidden;background:var(--turquesa-2);color:var(--tg-oscuro);padding:.75em 0;transform:rotate(-2deg);box-shadow:0 14px 34px -16px rgba(0,0,0,.45);text-decoration:none}
.cintillo__pista{display:flex;align-items:center;gap:1.5em;white-space:nowrap;width:max-content;font-family:"Instrument Serif",var(--display-it),serif;font-style:italic;font-size:clamp(1.05rem,1.55vw,1.4rem);letter-spacing:.01em;animation:cintillo 38s linear infinite}
.cintillo__pista i{font-style:normal;font-size:.7em;opacity:.7}
.cintillo:hover .cintillo__pista{animation-play-state:paused}
@keyframes cintillo{to{transform:translateX(-50%)}}
@media (max-width:980px){.cintillo{top:calc(72px + 8px);left:-6vw;width:112vw;transform:rotate(-2.5deg)}.cintillo__pista{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.cintillo__pista{animation:none}}
.captura .cintillo{display:block}


/* Módulo de temporada: banda turquesa de lado a lado, más grande */
.temporada--navidad{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border:0;padding:clamp(56px,8vw,112px) max(var(--gut),calc((100vw - var(--cont)) / 2 + var(--gut)));grid-template-columns:repeat(12,1fr)}
.temporada--navidad .label{grid-column:1/4}
.temporada--navidad h3{grid-column:4/10;font-size:clamp(2rem,4.4vw,4.2rem);line-height:1.02}
.temporada--navidad h3 small{font-size:clamp(1rem,1.2vw,1.15rem);max-width:46ch;margin-top:16px}
.temporada--navidad .btn{grid-column:10/13;justify-self:end}
@media (max-width:980px){.temporada--navidad{grid-template-columns:1fr;padding:56px var(--gut)}.temporada--navidad .label,.temporada--navidad h3,.temporada--navidad .btn{grid-column:1/-1;justify-self:start}}


/* Menú: "The DIMONA Experience" en lugar de "La cita" (placeholder tipográfico hasta que llegue el SVG) */
.nav__tde{display:inline-flex;align-items:baseline;gap:.35em;text-transform:none;letter-spacing:0;opacity:1 !important}
.nav__tde-the{font-family:var(--script);font-style:normal;font-size:1.05rem;transform:rotate(-6deg);display:inline-block}
.nav__tde-dimona{font-family:var(--display);font-size:.95rem;letter-spacing:.18em;text-transform:uppercase}
.nav__tde-exp{font-family:var(--armonia);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase}
.nav__tde img,.nav__tde svg{height:16px;width:auto;display:block}


/* "The DIMONA Experience" en línea, con las fuentes del branding */
.tde{display:inline-flex;align-items:baseline;gap:.4em;letter-spacing:0;text-transform:none}
.tde-the{font-family:var(--script);font-size:1.25em;display:inline-block;transform:rotate(-6deg)}
.tde-dimona{font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:1.05em}
.tde-exp{font-family:var(--armonia);letter-spacing:.24em;text-transform:uppercase;font-size:.85em}

/* Bloque 2 con el arte de Guayo (fondo web: patrón de D + monograma dorado + sombra) */
.transicion--arte{background:var(--papel-marca)}
.transicion--arte .transicion__patron,.transicion--arte .mono{display:none}
.transicion__arte{position:absolute;inset:0;overflow:hidden}
.transicion__arte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.transicion__papel{transform:scale(1.03)}
/* El patrón se trabaja como una foto macro: nítido al centro, fuera de foco en las orillas */
.transicion__patronimg{transform:scale(calc(1.05 - var(--p,1) * .05)) translateY(calc((1 - var(--p,1)) * 24px));will-change:transform}
.transicion__patronimg--fondo{filter:blur(9px) saturate(1.03);transform:scale(calc(1.14 - var(--p,1) * .05)) translateY(calc((1 - var(--p,1)) * 24px))}
.transicion__patronimg--nitido{
  -webkit-mask-image:radial-gradient(118% 66% at 50% 48%,#000 26%,rgba(0,0,0,.8) 50%,rgba(0,0,0,.2) 74%,transparent 90%);
  mask-image:radial-gradient(118% 66% at 50% 48%,#000 26%,rgba(0,0,0,.8) 50%,rgba(0,0,0,.2) 74%,transparent 90%)}

/* se funde con el bloque de arriba (oscuro) y con el de abajo (travertino) */
/* la sombra de hojas se mueve muy despacio, como luz entre ramas */
.transicion__hojas{inset:-12%;width:124%;height:124%;opacity:.6;animation:hojas 46s ease-in-out infinite alternate;will-change:transform}
@keyframes hojas{from{transform:translate3d(-2%,-1.5%,0) rotate(-1.5deg) scale(1.02)}to{transform:translate3d(2.5%,2%,0) rotate(1.5deg) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.transicion__hojas{animation:none}}
.transicion--arte .transicion__in{position:absolute;left:0;right:0;bottom:clamp(40px,7vh,72px);transform:translateY(calc((1 - var(--p,1)) * 40px + var(--cubre2,0) * -30px))}
.transicion--arte .transicion__marca{font-size:clamp(1.6rem,3.2vw,2.6rem);letter-spacing:.3em;padding-left:.3em}
.transicion--arte .transicion__desde{margin-top:.5em;font-family:var(--armonia);font-size:clamp(.65rem,.9vw,.8rem)}


/* Bloque 2: retícula intencional que se abre celda por celda + brillo periódico sobre el oro del monograma */
.transicion__brillo{position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:screen;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0,#000 7vw,transparent 14vw);mask:radial-gradient(circle at 50% 50%,#000 0,#000 7vw,transparent 14vw);
  background:linear-gradient(112deg,transparent 38%,rgba(255,248,225,0) 44%,rgba(255,248,225,.8) 50%,rgba(255,248,225,0) 56%,transparent 62%);
  background-size:240% 100%;background-repeat:no-repeat;animation:brillo 7.5s ease-in-out infinite}
@keyframes brillo{0%{background-position:130% 0}28%{background-position:-40% 0}100%{background-position:-40% 0}}
@media (max-width:980px){.transicion__brillo{-webkit-mask:radial-gradient(circle at 50% 50%,#000 0,#000 22vw,transparent 40vw);mask:radial-gradient(circle at 50% 50%,#000 0,#000 22vw,transparent 40vw)}}
@media (prefers-reduced-motion:reduce){.transicion__brillo{animation:none;display:none}}
.captura 

/* Lockup horizontal oficial (SVG de Guayo, fill currentColor) */
.tde-svg{display:inline-block;height:13px;width:auto;aspect-ratio:1264/92;vertical-align:-1px;color:inherit}
.tde-svg--nav{height:14px;vertical-align:middle}
.nav__tde{padding:0}
.hero__eyebrow .tde-svg{height:12px;opacity:.95}
.inv__txt .label .tde-svg,.cita-pag__txt .label .tde-svg{height:16px}
@media (max-width:980px){.hero__eyebrow .tde-svg{height:11px}}


/* Quiénes somos: tres pilares (lo que solo DIMONA puede decir) */
.pilares{margin-top:clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--arena)}
.pilar{padding:22px 22px 0 0;border-right:1px solid var(--arena)}
.pilar:last-child{border-right:0;padding-right:0}
.pilar b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.2;margin-bottom:8px}
.pilar span{display:block;color:var(--piedra);font-weight:300;font-size:.86rem;line-height:1.5}
@media (max-width:980px){
  .pilares{grid-template-columns:1fr}
  .pilar{border-right:0;border-bottom:1px solid var(--arena);padding:18px 0}
  .pilar:last-child{border-bottom:0}
  .pilar span{max-width:44ch}
}


/* ------------------------------------------------------------
   Timeless Gifts by DIMONA · campaña de Navidad
   ------------------------------------------------------------ */
.tg-sec{position:relative;z-index:2;background:var(--travertino)}
.tg{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:0;
  padding:clamp(64px,9vw,128px) max(var(--gut),calc((100vw - var(--cont)) / 2 + var(--gut)));
  background:linear-gradient(118deg,#3BC3B2 0%,var(--turquesa-2) 46%,#1F8E84 100%);color:#F3FBFA;overflow:hidden;text-align:center}
.tg__corona{position:absolute;right:-7vw;top:50%;transform:translateY(-50%);width:min(46vw,520px);aspect-ratio:1/1;opacity:.16;pointer-events:none}
.tg__corona video,.tg__corona img{position:absolute;inset:0;width:100%;height:100%;display:block}
.tg__corona-fija{opacity:0}
.tg__corona.gira .tg__corona-anim{opacity:0}
.tg__corona.gira .tg__corona-fija{opacity:1;animation:gira-corona 90s linear infinite}
@keyframes gira-corona{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tg__corona.gira .tg__corona-fija{animation:none}}
.tg__in{position:relative;max-width:50ch;margin-inline:auto}
.tg__eyebrow{margin:0 0 clamp(14px,2vw,22px);font-family:var(--armonia);font-size:clamp(.68rem,1vw,.8rem);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:rgba(243,251,250,.85)}
.tg__lockup{width:min(86%,460px);height:auto;margin:0 auto;display:block}
.tg__texto{margin:clamp(24px,3vw,36px) auto 0;max-width:46ch;font-weight:300;font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.6;color:rgba(243,251,250,.92)}
.tg__cta{margin-top:clamp(28px,3.5vw,40px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:center}
.btn--tg{background:var(--tg-oscuro);color:#F3FBFA;border-color:var(--tg-oscuro)}
.btn--tg:hover{background:#06201D;border-color:#06201D}
.tg__link{color:#F3FBFA}
.tg__nota{margin:clamp(28px,3.5vw,40px) auto 0;max-width:44ch;font-size:.82rem;font-weight:300;line-height:1.55;color:rgba(243,251,250,.78);display:flex;gap:.6em;align-items:flex-start;justify-content:center;text-align:left}
.tg__estrella{width:14px;height:14px;flex:none;margin-top:.25em}
@media (max-width:980px){
  .tg{padding:56px var(--gut);text-align:left}
  .tg__in{margin:0}
  .tg__corona{right:-22vw;width:70vw;opacity:.12}
  .tg__lockup{margin:0;width:min(100%,320px)}
  .tg__cta{justify-content:flex-start}
  .tg__nota{justify-content:flex-start;margin-left:0}
}


/* Cintillo con el arte de la campaña */
.cintillo__logo{height:4.2em;width:auto;display:block;flex:none}
.cintillo__sello{height:.62em;width:auto;display:block;flex:none;opacity:.9}
.tg__sello{display:block;width:min(42%,190px);height:auto;margin:clamp(22px,2.6vw,30px) auto 0;opacity:.95}
@media (max-width:980px){
  .cintillo__logo{height:2.6em}
  .tg__sello{margin-left:0}
}


/* Cómo es una cita: el video ocupa todo el bloque y el texto va encima, a la derecha */
.capa--cita{overflow:hidden}
.capa__fondo{position:absolute;inset:0;z-index:0}
.capa__fondo video{width:100%;height:100%;object-fit:cover;object-position:26% 45%;display:block}
.capa__velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(30,25,21,.42) 0%,rgba(30,25,21,.30) 28%,rgba(30,25,21,.78) 52%,rgba(30,25,21,.92) 100%),
             linear-gradient(180deg,rgba(30,25,21,.6) 0%,transparent 26%,transparent 70%,rgba(30,25,21,.7) 100%)}
.capa--cita .cont{position:relative;z-index:2}
.exp--ancho{display:block}
.exp--ancho .exp__lista{margin-left:auto;width:min(52%,620px)}
.exp--ancho .exp__nota{margin-left:auto;width:min(52%,620px);margin-top:18px}
.exp--ancho .mom{border-color:rgba(241,234,224,.22)}
@media (max-width:980px){
  /* En celular el video no va detras del texto (tapaba la joya): va como banda arriba
     y el texto queda debajo, sobre el fondo oscuro. 65% centra el dije del collar. */
  .capa--cita .capa__fondo{inset:0 0 auto 0;height:80vw}
  .capa--cita .capa__fondo video{object-position:50% 54%}
  .capa--cita .capa__velo{inset:0 0 auto 0;height:80vw;
    background:linear-gradient(180deg,rgba(30,25,21,.12) 0%,rgba(30,25,21,.04) 55%,rgba(30,25,21,.32) 88%,var(--terciopelo) 100%)}
  .capa--cita{justify-content:flex-start;padding-top:calc(80vw + 26px);background:var(--terciopelo)}
  .exp--ancho .exp__lista,.exp--ancho .exp__nota{width:auto;margin-left:0}
}


/* Titular editorial: "Lo que ocurre en" + el lockup real de The DIMONA Experience */
.s__cab--ed{align-items:start}
.s__cab--ed .label{padding-top:1.1em}
.tit-ed{grid-column:4/13;display:block;margin:0}
.tit-ed__linea{display:block;font-family:var(--display);font-size:clamp(1.3rem,2vw,1.95rem);line-height:1.05;letter-spacing:-.005em;opacity:.92}
.tit-ed__lockup{display:block;width:min(100%,540px);height:auto;aspect-ratio:1264/92;margin-top:clamp(14px,1.8vw,22px);color:currentColor;
  opacity:var(--fv,1);transform:translate3d(0,calc((1 - var(--fv,1)) * 10px),0)}
@media (max-width:980px){
  .tit-ed{grid-column:1/-1}
  .tit-ed__lockup{width:100%;margin-top:14px}
  .s__cab--ed .label{padding-top:0}
}


/* Portada: qué es DIMONA, dicho directo (filtra de entrada) */
.hero__que{max-width:46ch;margin:clamp(16px,2vw,24px) 0 0;font-weight:300;font-size:clamp(.98rem,1.15vw,1.12rem);line-height:1.55;color:rgba(241,234,224,.9)}
.hero__cats{display:flex;flex-wrap:wrap;gap:.9em 1.6em;margin:clamp(18px,2.2vw,26px) 0 0;font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,234,224,.72)}
.hero__cats a{position:relative;padding-bottom:.35em;transition:color .3s var(--ease)}
.hero__cats a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease),opacity .3s}
.hero__cats a:hover{color:#fff}
.hero__cats a:hover::after{transform:scaleX(1);opacity:.7}
@media (max-width:980px){
  .hero__que{font-size:.95rem;max-width:40ch}
  .hero__cats{gap:.7em 1.2em;font-size:.64rem}
}


/* Logo animado en la portada (con respaldo tipográfico si el navegador no lo reproduce) */
.hero__lock-anim{display:none;width:min(62vw,620px);height:auto}
.hero__lock.tiene-anim .hero__lock-anim{display:block}
.hero__lock.tiene-anim .hero__lock-the,
.hero__lock.tiene-anim .hero__lock-dimona,
.hero__lock.tiene-anim .hero__lock-exp{display:none}
@media (max-width:980px){.hero__lock-anim{width:min(84vw,460px)}}
@media (prefers-reduced-motion:reduce){.hero__lock-anim{display:none !important}.hero__lock.tiene-anim .hero__lock-the,.hero__lock.tiene-anim .hero__lock-dimona,.hero__lock.tiene-anim .hero__lock-exp{display:block}}


/* ------------------------------------------------------------
   2 · Quiénes somos, en clave editorial
   ------------------------------------------------------------ */
.quien-ed__top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--arena)}
.quien-ed__firma{margin:0;font-family:var(--armonia);font-size:clamp(.72rem,1vw,.86rem);letter-spacing:.3em;text-transform:uppercase;color:var(--tinta)}
.quien-ed__firma em{font-family:var(--script);font-style:normal;font-size:1.7em;letter-spacing:0;text-transform:none;margin-left:.3em;vertical-align:-.12em}
.quien-ed__tit{margin:clamp(34px,5vw,64px) 0 0}
.quien-ed__ml{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,5.4vw,5rem);line-height:.98;letter-spacing:.07em}
.quien-ed__since{display:block;font-family:var(--script);font-style:normal;color:var(--oro);
  font-size:clamp(2.1rem,5.8vw,5.4rem);line-height:1;margin-top:.04em;padding-left:.12em}
.quien-ed__cuerpo{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;margin-top:clamp(34px,4.5vw,60px)}
.quien-ed__texto{grid-column:1/5;align-self:end}
.quien-ed__texto .lead{max-width:34ch}
.quien-ed__lugar{margin:0}
.quien-ed__pie{margin-top:26px;padding-top:16px;border-top:1px solid var(--arena);display:block}
.quien-ed__media{grid-column:6/13;position:relative;padding-bottom:7%}
.quien-ed__v1{width:78%;margin-left:auto}
.quien-ed__v1 .foto,.quien-ed__v1{aspect-ratio:4/5}
.quien-ed__v2{position:absolute;left:0;bottom:0;width:36%;aspect-ratio:1/1;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.quien-ed .pilares{margin-top:clamp(48px,6vw,80px)}
.quien-ed .pilar{position:relative;padding-top:24px}
.quien-ed .pilar i{display:block;font-style:normal;font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;color:var(--piedra);margin-bottom:10px}
@media (max-width:980px){
  .quien-ed__ml{font-size:clamp(1.8rem,9vw,2.8rem)}
  .quien-ed__since{font-size:clamp(2rem,10vw,3.2rem)}
  .quien-ed__texto,.quien-ed__media{grid-column:1/-1}
  .quien-ed__media{margin-top:32px;padding-bottom:12%}
  .quien-ed__v1{width:84%}
  .quien-ed__v2{width:44%}
}


/* Pilares de Quiénes somos: regla editorial, número en oro y texto con medida corta */
.quien-ed .pilares{grid-template-columns:repeat(3,1fr);gap:0 clamp(32px,4.5vw,72px);border-top:0}
.quien-ed .pilar{border-right:0;padding:0;border-top:1px solid var(--tinta)}
.quien-ed .pilar{padding-top:clamp(16px,2vw,22px)}
.quien-ed .pilar i{display:block;font-style:normal;font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;
  color:var(--oro);margin-bottom:clamp(16px,2.4vw,28px)}
.quien-ed .pilar b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,1.65vw,1.55rem);
  line-height:1.14;margin:0 0 10px;max-width:14ch}
.quien-ed .pilar span{display:block;color:var(--piedra);font-weight:300;font-size:.9rem;line-height:1.62;max-width:26ch}
@media (max-width:980px){
  .quien-ed .pilares{grid-template-columns:1fr;gap:0}
  .quien-ed .pilar{border-bottom:0;padding:clamp(18px,4vw,24px) 0 clamp(22px,5vw,30px)}
  .quien-ed .pilar i{margin-bottom:12px}
  .quien-ed .pilar b{max-width:none}
  .quien-ed .pilar span{max-width:40ch}
}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Modo captura (solo para revisar la página completa en una imagen) */
.captura .hero{min-height:900px}
.captura .nav{position:absolute}
.captura .nota-maqueta{display:none}

/* Nota de maqueta (solo revisión interna; se quita en el sitio real) */
.nota-maqueta{position:fixed;right:14px;bottom:14px;z-index:60;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--piedra);background:rgba(247,242,234,.92);border:1px solid var(--arena);padding:.6em .9em;border-radius:999px}

/* ——— Portal de citas ——— */
.agenda{padding:clamp(56px,7vw,104px) 0 0;border-top:1px solid var(--arena)}
.cita-pag .agenda__cont{display:block}
.agenda__cab{max-width:46ch;margin:0 0 clamp(26px,3.4vw,44px)}
.agenda__cab h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.3vw,2.7rem);line-height:1.08;letter-spacing:-.012em;margin:.3em 0 .5em}
.agenda__cab .lead{color:var(--piedra);font-size:.98rem;line-height:1.62;max-width:40ch}
/* Cal mide y fija su propia altura; no se la imponemos (su <cal-inline> usa height:inherit) */
.agenda__cal{background:var(--marfil);border:1px solid var(--arena);border-radius:2px}
.agenda__cal iframe{display:block;width:100%!important;border:0}


/* ——— Formulario: preguntas como botones, no como menús ——— */
.grupo{border:0;margin:0;padding:18px 0;min-width:0}
.grupo__q{padding:0;margin:0 0 12px;font-family:var(--display);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.35;color:var(--tinta);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ops{display:flex;flex-wrap:wrap;gap:8px}
.op{cursor:pointer;display:block}
.op input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.op span{display:block;padding:.58em 1.05em;border:1px solid var(--arena);border-radius:999px;font-size:.875rem;font-weight:300;color:var(--piedra);white-space:nowrap;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.op span:hover{border-color:var(--piedra);color:var(--tinta)}
.op input:checked+span{background:var(--tinta);border-color:var(--tinta);color:var(--travertino)}
.op input:focus-visible+span{outline:2px solid var(--oro);outline-offset:2px}
.dos--datos{margin-top:10px;border-top:1px solid var(--arena);padding-top:6px}
/* el presupuesto se pregunta como las demas, en redaccion normal */
.campo--presu{padding-top:18px}
.campo--presu label{font-family:var(--display);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.35;letter-spacing:0;text-transform:none;color:var(--tinta)}
.campo--presu .nota{font-family:var(--sans);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--piedra);opacity:.75}
.campo--extra label{font-size:.6875rem}
.campo--extra .nota{color:var(--piedra);opacity:.75}
@media (max-width:560px){
  .op span{font-size:.82rem;padding:.55em .95em}
  .dos--datos{grid-template-columns:1fr}
}

/* Presupuesto: el signo y la moneda viven dentro del campo */
.moneda{display:flex;align-items:baseline;gap:.45em;border-bottom:1px solid var(--arena);transition:border-color .3s}
.moneda:focus-within{border-bottom-color:var(--tinta)}
.moneda__sig{font-family:var(--display);font-size:1.15rem;line-height:1;color:var(--piedra)}
.moneda input{flex:1;min-width:0;border:0 !important;padding:8px 0}
.moneda input:focus{outline:none}
.moneda__cur{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--piedra);white-space:nowrap}
.campo__pie{margin-top:10px;font-size:.75rem;line-height:1.5;font-weight:300;color:var(--piedra);max-width:46ch}

/* ——— Páginas legales ——— */
.legal .cont{display:block}
.legal__txt{max-width:68ch;margin:0 auto}
.legal__txt h1{font-size:var(--t-h2);line-height:1.05;margin:24px 0 0;text-wrap:balance}
.legal__txt .lead{margin-top:24px}
.legal__txt h2{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.2;margin:clamp(34px,4vw,52px) 0 14px;padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid var(--arena)}
.legal__txt p{font-weight:300;line-height:1.72;margin-bottom:14px;color:var(--tinta)}
.legal__txt b{font-weight:500}
.legal__txt a{text-decoration:underline;text-underline-offset:.18em}
.legal__lista{margin:0 0 14px;padding-left:1.1em;list-style:none}
.legal__lista li{position:relative;font-weight:300;line-height:1.72;margin-bottom:12px}
.legal__lista li::before{content:"";position:absolute;left:-1.1em;top:.68em;width:5px;height:5px;
  border-radius:50%;background:var(--oro)}
.legal__fecha{margin-top:clamp(34px,4vw,52px);padding-top:20px;border-top:1px solid var(--arena);
  font-size:.8rem;color:var(--piedra)}