/* ============================================================================
   BIBOBICI v2.1 — sistema completo del sitio
   Tipografia: Instrument Sans variable (wdth 75-100, puntos circulares).
   Pesos: solo 400, 600 y 700. Ejes de jerarquia: anchura variable + tamano.
   Tres actos de color por pagina (oscuro-claro-oscuro) conducidos por scroll.
   Formas: superficies e imagenes a radio 0; controles interactivos en pildora.
   Acento unico: rosa de marca (#FE64AA); sobre papel se compensa a AA.
   Curva de movimiento unica: cubic-bezier(.32,.72,0,1).
   ========================================================================= */

@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:100 900;font-stretch:75% 100%;
  font-display:swap;src:url("instrument-latin.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:"Fragment Mono";font-style:normal;font-weight:400;
  font-display:swap;src:url("fragment-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212;
}

:root{
  --rose:#FE64AA;
  --rose-hover:#FF7DB9;         /* hover del boton primario en oscuro */
  --rose-press:#E94E96;
  --rose-ink:#23060F;           /* texto sobre relleno rosa */
  --rose-paper:#B8135E;         /* rosa como texto sobre papel, AA */

  --d-bg:#050A12; --d-surf:#0B1826; --d-fg:#EBF1F8; --d-mut:#95A8C0; --d-rule:#16253A;
  --glow:radial-gradient(closest-side,rgba(254,100,170,.14),transparent 70%);
  --f-mono:"Fragment Mono","SFMono-Regular",Consolas,monospace;
  --l-bg:#F1F1F3; --l-surf:#FBFBFC; --l-fg:#0C0E12; --l-mut:#586069; --l-rule:#D9DADD;

  --shell:min(1420px, 100% - 2 * var(--gut));
  --gut:clamp(22px,4.6vw,72px);
  --ease:cubic-bezier(.32,.72,0,1);

  --t-mega:clamp(46px,8.6vw,138px);
  --t-xxl:clamp(36px,5.8vw,86px);
  --t-xl:clamp(27px,3.6vw,50px);
  --t-lg:clamp(20px,2vw,27px);
  --t-body:clamp(16.5px,1.1vw,18px);

  --w-open:100; --w-shut:84;    /* eje de anchura: cerrado al entrar, abierto en pantalla */
}

body{--bg:var(--d-bg);--surf:var(--d-surf);--fg:var(--d-fg);--mut:var(--d-mut);
     --rule:var(--d-rule);--accent-text:var(--rose)}
body[data-act="light"]{--bg:var(--l-bg);--surf:var(--l-surf);--fg:var(--l-fg);--mut:var(--l-mut);
     --rule:var(--l-rule);--accent-text:var(--rose-paper)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"Instrument Sans",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-weight:400;font-size:var(--t-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
img,video{display:block;max-width:100%}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.02;text-wrap:balance;
  font-variation-settings:"wdth" var(--w-open)}
.shell{width:var(--shell);margin-inline:auto}
.mut{color:var(--mut)}
.tnum{font-variant-numeric:tabular-nums}

/* NORMA: la monoespaciada siempre igual — 11px, un solo peso, mayusculas. */
.mono,.eyebrow,.map-card .zone,.strip dt,.facts dt,.dtable th,.pricebar .k,.crumb,
.plan .tag,.ft .ft-h,.gbadge .lab,.inc h4 span,.nl label,.napbox dt,.pasos dt,.firma .mono,.cota-tag{
  font-family:var(--f-mono);font-weight:400!important;font-size:11px!important;
  letter-spacing:.08em;text-transform:uppercase}
.blu-tag{font-family:var(--f-mono);font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.eyebrow{font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-text)}

/* --- botones. Hover: cambio de color + la flecha viaja. Nada de rellenos que escalan. */
.btn{display:inline-flex;align-items:center;gap:12px;padding:8px 8px 8px 26px;border-radius:999px;
  font-size:15px;font-weight:600;white-space:nowrap;
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .18s var(--ease)}
.btn:active{transform:scale(.97)}
.btn .i{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;flex:0 0 auto;
  transition:background-color .35s var(--ease),transform .45s var(--ease)}
.btn .i svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.btn-a{background:var(--rose);color:var(--rose-ink)}
.btn-a .i{background:rgba(10,11,13,.12)}
.btn-a:hover{background:var(--rose-hover)}
.btn-a:active{background:var(--rose-press)}
.btn-a:hover .i{transform:translateX(3px);background:rgba(10,11,13,.2)}
.btn-a:hover .i svg{transform:translateX(1px)}
.btn-b{border:1px solid color-mix(in srgb,var(--fg) 32%,transparent);color:var(--fg);
  padding:8px 8px 8px 26px}
.btn-b .i{background:color-mix(in srgb,var(--fg) 9%,transparent)}
.btn-b:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn-b:hover .i{background:color-mix(in srgb,var(--bg) 18%,transparent);transform:translateX(3px)}
.btn.plain{padding:8px 26px}           /* sin flecha: telefono, etiquetas */
.btn-sm{padding:5px 6px 5px 20px;font-size:14px}
.btn-sm .i{width:30px;height:30px}
.btn-sm.plain{padding:9px 20px}

/* enlace con flecha, para acciones terciarias */
.link{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  color:var(--accent-text)}
.link svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.link:hover svg{transform:translateX(5px)}

/* --- cabecera. El boton nunca toca los bordes: la barra manda. */
.hd{position:fixed;inset:0 0 auto;z-index:80;border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease),border-color .5s,backdrop-filter .4s}
.hd.solid{background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--rule)}
.hd .bar{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);height:92px;
  transition:height .45s var(--ease)}
.hd.solid .bar{height:72px}
.brand{width:124px;color:var(--rose);flex:0 0 auto;transition:width .45s var(--ease)}
.hd.solid .brand{width:106px}
.brand svg{width:100%;height:auto;display:block}
.nav{display:flex;gap:clamp(16px,1.8vw,28px);margin-left:auto;font-size:14px;font-weight:600}
.nav a{position:relative;padding:6px 0;color:var(--fg);opacity:.68;transition:opacity .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;border-radius:2px;
  background:var(--rose);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current]{opacity:1}
.hd .lang{font-size:12px;font-weight:600;letter-spacing:.1em;opacity:.55;margin-right:2px}
.hd .lang b{opacity:1}
.burger{display:none;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--fg) 28%,transparent);
  border-radius:999px;align-items:center;justify-content:center}
.burger i,.burger i::before,.burger i::after{display:block;width:16px;height:1.5px;background:currentColor}
.burger i{position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0}
.burger i::before{top:-5px}.burger i::after{top:5px}

/* --- menu movil off-canvas, desde la derecha --- */
.mnav{position:fixed;inset:0;z-index:120;visibility:hidden;transition:visibility 0s .6s}
.mnav.open{visibility:visible;transition-delay:0s}
.mnav-bg{position:absolute;inset:0;background:rgba(3,6,11,.55);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .45s var(--ease)}
.mnav.open .mnav-bg{opacity:1}
.mnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,88vw);
  background:var(--d-bg);color:var(--d-fg);border-left:1px solid var(--d-rule);
  padding:88px clamp(26px,7vw,40px) 34px;display:flex;flex-direction:column;overflow:auto;
  transform:translateX(103%);transition:transform .55s var(--ease)}
.mnav.open .mnav-panel{transform:none}
.mnav-panel::before{content:"";position:fixed;width:340px;aspect-ratio:1;right:-20%;top:-16%;
  background:var(--glow);pointer-events:none}
.mnav-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--d-rule);display:grid;place-items:center;color:var(--d-fg);
  transition:border-color .3s,transform .3s var(--ease)}
.mnav-close:hover{border-color:var(--rose);transform:rotate(90deg)}
.mnav-close i{position:relative;display:block;width:16px;height:16px}
.mnav-close i::before,.mnav-close i::after{content:"";position:absolute;left:0;top:7px;
  width:16px;height:1.6px;background:currentColor}
.mnav-close i::before{transform:rotate(45deg)}
.mnav-close i::after{transform:rotate(-45deg)}
.mnav-links{list-style:none;margin:0;padding:0}
.mnav-links li{opacity:0;transform:translateX(34px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mnav.open .mnav-links li{opacity:1;transform:none;
  transition-delay:calc(.14s + var(--i,0) * .05s)}
.mnav-links a{position:relative;display:flex;align-items:baseline;gap:16px;padding:15px 2px;
  font-size:clamp(23px,6vw,27px);font-weight:700;letter-spacing:-.025em;color:var(--d-fg);
  border-bottom:1px solid var(--d-rule);transition:color .3s,padding-left .3s var(--ease)}
.mnav-links a span{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--rose)}
.mnav-links a:hover,.mnav-links a[aria-current]{color:var(--rose);padding-left:10px}
.mnav-cta{margin-top:30px;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease) .42s,transform .5s var(--ease) .42s}
.mnav.open .mnav-cta{opacity:1;transform:none}
.mnav-cta .btn{width:100%;justify-content:space-between}
.mnav-foot{margin-top:auto;padding-top:30px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;opacity:0;transition:opacity .5s var(--ease) .5s}
.mnav.open .mnav-foot{opacity:1}
.mnav-foot .lang a{opacity:.7}.mnav-foot b{color:var(--d-fg)}
.mnav-foot .soc{margin-top:0}
body.menu-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .mnav-bg,.mnav-panel,.mnav-links li,.mnav-cta,.mnav-foot{transition:none}
}

.skip{position:fixed;left:16px;top:-70px;z-index:200;background:var(--rose);color:var(--rose-ink);
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;transition:top .3s var(--ease)}
.skip:focus{top:16px}

/* --- HERO de portada --- */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;
  --hero-cut:0px;min-height:calc(100dvh - var(--hero-cut));
  padding-block:clamp(130px,15vh,170px) clamp(52px,8vh,96px)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:52% 58%;
  transform:scale(1.14);animation:heroZoom 24s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1.02)}}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(10,11,13,.7) 0%,rgba(10,11,13,.22) 34%,rgba(10,11,13,.6) 72%,rgba(10,11,13,.94) 100%)}
.hero .shell{position:relative;z-index:2}
.hero h1{font-size:var(--t-mega);letter-spacing:-.045em;line-height:.92;max-width:14ch}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .l>span{display:block;transform:translateY(104%);transition:transform 1s var(--ease)}
.hero.go h1 .l>span{transform:translateY(0)}
.hero h1 .l:nth-child(2)>span{transition-delay:.1s}
.hero h1 em{font-style:normal;color:var(--rose)}
.hero .lede,.hero .acts,.hero .eyebrow{opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero.go .eyebrow{opacity:.78;transform:none}
.hero.go .lede{opacity:1;transform:none;transition-delay:.34s}
.hero.go .acts{opacity:1;transform:none;transition-delay:.48s}
.hero .eyebrow{margin-bottom:26px;color:#fff}
.hero .lede{margin-top:28px;font-size:var(--t-lg);line-height:1.45;max-width:36ch;color:#E5E7EA}
.hero .acts{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px}
.hero .btn-b,.phead.shot .btn-b,.close .btn-b{border-color:rgba(255,255,255,.42);color:#fff}
.hero .btn-b .i,.phead.shot .btn-b .i,.close .btn-b .i{background:rgba(255,255,255,.12)}
.hero .btn-b:hover,.phead.shot .btn-b:hover,.close .btn-b:hover{
  background:#fff;border-color:#fff;color:#0A0B0D}
.hero .btn-b:hover .i,.phead.shot .btn-b:hover .i,.close .btn-b:hover .i{background:rgba(10,11,13,.1)}

/* --- franja de datos --- */
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.strip .shell{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.strip .shell>div{padding:38px 34px 38px 0}
.strip .shell>div+div{border-left:1px solid var(--rule);padding-left:34px}
.strip dt{color:var(--mut)}
.strip dd{margin:14px 0 0;font-size:clamp(30px,3.3vw,44px);font-weight:700;letter-spacing:-.04em;
  line-height:1;font-variation-settings:"wdth" 100}
.strip dd small{display:block;margin-top:12px;font-size:13.5px;font-weight:400;letter-spacing:0;
  color:var(--mut);line-height:1.5;
  letter-spacing:0;font-weight:400}

/* --- secciones y tipografia de flujo --- */
.sec{padding-block:clamp(90px,13vh,180px);position:relative}
.sec-tight{padding-block:clamp(64px,9vh,112px)}
.h-xl{font-size:var(--t-xxl);letter-spacing:-.04em}
.h-l{font-size:var(--t-xl);letter-spacing:-.034em}
.lead{font-size:var(--t-lg);line-height:1.48;color:var(--mut);max-width:46ch}
.body-copy{max-width:62ch}
.body-copy p+p,.body-copy ul+p,.body-copy p+ul{margin-top:20px}
.body-copy p,.body-copy li{color:var(--mut);line-height:1.72}
.body-copy strong{color:var(--fg);font-weight:600}
.body-copy ul{margin:0;padding-left:1.25em}
.body-copy li+li{margin-top:12px}
.body-copy li::marker{color:var(--accent-text)}
.body-copy a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}

/* --- split foto + texto --- */
.split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(34px,5.2vw,96px);align-items:center}
.split.rev>*:first-child{order:2}
.figure{position:relative;overflow:hidden}
.figure img{width:100%;height:auto}
.figure.tall img{aspect-ratio:4/5;object-fit:cover}
.figure.wide img{aspect-ratio:16/10;object-fit:cover}
.figure.band img{aspect-ratio:2/1;object-fit:cover}
@media (max-width:700px){.figure.band img{aspect-ratio:4/3}}
.figure::after{content:"";position:absolute;inset:0;background:var(--bg);
  transform-origin:right;transition:transform 1.05s var(--ease)}
.figure.in::after{transform:scaleX(0)}
.figure figcaption{margin-top:14px;font-size:13.5px;color:var(--mut);line-height:1.5}

/* --- secuencia del metodo --- */
.seq{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(26px,4vw,68px)}
.seq-rail{position:relative;width:2px;background:var(--rule)}
.seq-rail i{position:absolute;inset:0 0 auto;width:2px;background:var(--rose);height:0;
  transition:height .5s var(--ease)}
.seq ol{list-style:none;margin:0;padding:0;counter-reset:s}
.seq li{counter-increment:s;padding-block:clamp(28px,4.4vh,50px);display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,52px);align-items:start;
  border-top:1px solid var(--rule)}
.seq li:first-child{border-top:0}
.seq li h3{font-size:clamp(22px,2.5vw,33px);letter-spacing:-.03em;
  color:var(--mut);transition:color .6s var(--ease)}
.seq li.on h3{color:var(--fg)}
.seq li.on h3::before{color:var(--accent-text)}
.seq li h3::before{content:counter(s,decimal-leading-zero);display:block;font-size:12px;
  font-weight:600;letter-spacing:.18em;color:var(--mut);margin-bottom:14px;
  transition:color .6s var(--ease)}
.seq li p{color:var(--mut);line-height:1.68}

/* --- mapa de dolencias (esquema tecnico interactivo) --- */
.map{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.map-stage{position:relative;border:1px solid var(--rule);background:var(--surf);
  padding:clamp(10px,1.4vw,20px)}
.map-stage svg{width:100%;height:auto;display:block}
.map-tools{display:flex;justify-content:flex-end;margin-top:14px}
.blu-grid{stroke:var(--rule);stroke-width:1;opacity:.45}
.blu-rig{stroke:color-mix(in srgb,var(--fg) 34%,transparent);stroke-width:2.2;fill:none;stroke-linecap:round}
.blu-tire{stroke:color-mix(in srgb,var(--fg) 44%,transparent);stroke-width:5.5;fill:none}
.blu-rig-fine{stroke:color-mix(in srgb,var(--fg) 22%,transparent);stroke-width:1.1;fill:none}
.blu-dash{stroke:color-mix(in srgb,var(--fg) 38%,transparent);stroke-width:1.2;fill:none;
  stroke-dasharray:5 6;stroke-linecap:round;transition:stroke .4s,opacity .4s}
.blu-body{stroke:var(--fg);stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.blu-joint{fill:var(--surf);stroke:var(--fg);stroke-width:2.4}
.blu-sad{stroke:color-mix(in srgb,var(--fg) 60%,transparent);stroke-width:6;fill:none;stroke-linecap:round}
.blu-head{fill:var(--fg)}
.blu-arc{stroke:color-mix(in srgb,var(--fg) 34%,transparent);stroke-width:1.5;fill:none;
  stroke-dasharray:3 4;opacity:.8;transition:stroke .4s,opacity .4s}
.blu-tag{font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.08em;fill:var(--mut);
  text-transform:uppercase;font-size:10.5px;transition:fill .4s}
/* dibujo progresivo por capas: bici, cuerpo, cotas, puntos */
.map-stage .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease)}
.map-stage.in .draw{stroke-dashoffset:0}
.map-stage.in .g-body .draw{transition-delay:.55s;transition-duration:1.1s}
.g-cotas{opacity:0;transition:opacity .9s var(--ease) 1.35s}
.map-stage.in .g-cotas{opacity:1}
.map-stage.nocotas .g-cotas{opacity:0;transition-delay:0s}
/* resaltado de la cota relacionada con la zona activa */
.m-hl{stroke:var(--accent-text)!important;opacity:1!important}
text.m-hl{fill:var(--accent-text)!important;stroke:none!important}
line.m-hl,path.m-hl{animation:march 1.5s linear infinite}
@keyframes march{to{stroke-dashoffset:-22}}
/* el circulo de pedaleo gira despacio: sensacion de cadencia */
.map-stage.in .spin{animation:cadencia 34s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes cadencia{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  line.m-hl,path.m-hl,.map-stage.in .spin{animation:none}
}
.hs{cursor:pointer;opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.map-stage.in .hs{opacity:1;transform:none}
.hs-lead{stroke:color-mix(in srgb,var(--fg) 26%,transparent);stroke-width:1}
.hs .hit{fill:transparent;stroke:none}
.hs .halo{fill:var(--rose);opacity:.16;transform-origin:center;transform-box:fill-box}
.hs .core{fill:var(--surf);stroke:var(--rose);stroke-width:2.4;transition:fill .3s}
.hs:hover .core,.hs.on .core{fill:var(--rose)}
.hs.on .halo{animation:halo 2.2s infinite}
@keyframes halo{0%{transform:scale(1);opacity:.3}70%{transform:scale(2.3);opacity:0}100%{opacity:0}}
.hs .cap{font-size:13px;font-weight:600;fill:var(--mut);transition:fill .3s}
.hs:hover .cap,.hs.on .cap{fill:var(--accent-text)}
.map-card{border-left:2px solid var(--rose);padding-left:clamp(22px,2.4vw,34px);min-height:340px;
  display:flex;flex-direction:column;justify-content:center}
.map-card h3{font-size:clamp(24px,2.7vw,36px);letter-spacing:-.032em}
.map-card .zone{
  color:var(--accent-text);margin-bottom:14px}
.map-card .body{margin-top:18px;color:var(--mut);line-height:1.66;font-size:16.5px}
.map-card dl{margin:24px 0 0;display:grid;gap:14px}
.map-card dl>div{display:grid;grid-template-columns:118px 1fr;gap:16px;padding-top:14px;
  border-top:1px solid var(--rule)}
.map-card dt{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut);padding-top:3px}
.map-card dd{margin:0;font-size:15.5px;line-height:1.55}
.map-card .link{margin-top:26px}
.swap{animation:swap .45s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-block:26px clamp(34px,4vh,52px)}
.chips a,.chips button{padding:9px 17px;border:1px solid var(--rule);border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--mut);
  transition:color .3s,border-color .3s,background-color .3s,transform .18s var(--ease)}
.chips a:hover,.chips button:hover{border-color:var(--accent-text);color:var(--accent-text)}
.chips a:active,.chips button:active{transform:scale(.96)}
.chips .on{background:var(--rose);border-color:var(--rose);color:var(--rose-ink)}

/* --- comparador antes / despues --- */
.ba{position:relative;overflow:hidden;background:#000;aspect-ratio:1000/893;max-width:520px;
  touch-action:none;user-select:none;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .tag{position:absolute;top:14px;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:6px 13px;border-radius:999px;background:rgba(10,11,13,.72);
  color:#fff;border:1px solid rgba(255,255,255,.2)}
.ba .tag.l{left:14px}.ba .tag.r{right:14px;color:var(--rose);border-color:rgba(254,100,170,.5)}
.ba .h{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--rose);
  transform:translateX(-1px);pointer-events:none}
.ba .h::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--rose);
  box-shadow:0 8px 30px -6px rgba(254,100,170,.7)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}

/* --- tarifas --- */
.rates{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(20px,2.6vw,36px);
  align-items:stretch}
.rate{display:flex;flex-direction:column;padding:clamp(30px,3.4vw,50px);border:1px solid var(--rule)}
.rate.key{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.rate.key .mut,.rate.key p,.rate.key li{color:color-mix(in srgb,var(--bg) 64%,var(--fg))}
.rate h3{font-size:clamp(24px,2.4vw,33px);letter-spacing:-.032em}
.rate>p{margin-top:14px;font-size:15px;line-height:1.55;color:var(--mut)}
.rate ul{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.rate li{display:flex;gap:12px;font-size:15px;line-height:1.5;color:var(--mut)}
.rate li svg{width:14px;height:14px;margin-top:5px;flex:0 0 auto;color:var(--rose)}
.rate .price{margin-top:auto;padding-top:clamp(30px,4.4vw,56px);display:flex;align-items:baseline;gap:12px}
.rate .price b{font-size:clamp(52px,6.8vw,96px);font-weight:700;letter-spacing:-.05em;line-height:.85;
  font-variation-settings:"wdth" 100}
.rate .price span{font-size:14px;opacity:.65}
.rate .meta{margin-top:16px;font-size:14px;opacity:.7}
.rate .btn{margin-top:32px;justify-content:center}
.rate.key .btn-b{border-color:color-mix(in srgb,var(--bg) 36%,transparent);color:var(--bg)}
.rate.key .btn-b:hover{background:var(--bg);color:var(--fg)}

/* --- banda de video --- */
.reel{position:relative;overflow:hidden}
.reel video{width:100%;height:clamp(420px,64vh,660px);object-fit:cover;filter:saturate(.92)}
.reel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,11,13,.9) 0%,rgba(10,11,13,.48) 44%,rgba(10,11,13,.14) 100%)}
.reel .over{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.reel .over h2{max-width:15ch;font-size:var(--t-xxl);letter-spacing:-.04em;color:#fff}
.reel .over p{margin-top:24px;max-width:40ch;color:#D9DCE0;line-height:1.5;font-size:var(--t-lg)}

/* --- marquesina --- */
.marq{overflow:hidden;border-block:1px solid var(--rule);padding-block:28px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq .row{display:flex;width:max-content;animation:slide 46s linear infinite}
.marq:hover .row{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marq span{padding-inline:36px;font-size:clamp(24px,3vw,42px);font-weight:700;letter-spacing:-.036em;
  color:var(--mut);white-space:nowrap;transition:color .35s}
.marq span:hover{color:var(--fg)}

/* --- bento --- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,1fr);
  gap:clamp(10px,1.2vw,18px)}
.bento a{position:relative;overflow:hidden;display:block;min-height:230px}
.bento a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--ease)}
.bento a:hover img{transform:scale(1.06)}
.bento a::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 34%,rgba(10,11,13,.86) 100%)}
.bento .cap{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;color:#fff;
  transform:translateY(6px);transition:transform .5s var(--ease)}
.bento a:hover .cap{transform:none}
.bento .cap b{display:block;font-size:19px;font-weight:700;letter-spacing:-.022em}
.bento .cap span{display:block;margin-top:7px;font-size:13px;opacity:.75;line-height:1.45}
.bento .b1{grid-column:span 2;grid-row:span 2}
.bento .b2{grid-column:span 2}
.bento .b3,.bento .b4{grid-column:span 1}

/* --- citas --- */
/* titular, cita y tarjeta de Google comparten el mismo borde y la misma linea de arranque */
.reviews{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr);
  gap:clamp(30px,4vw,72px);align-items:start}
@media (max-width:900px){.reviews{grid-template-columns:1fr;gap:clamp(30px,4vh,44px)}}
.reviews .rmain{min-width:0}
.reviews .rmain h2{margin-top:16px;max-width:15ch}
.reviews .rmain .quotes{margin-top:clamp(30px,4vh,48px);padding-top:clamp(30px,4vh,48px);
  border-top:1px solid var(--rule)}
.gbadge{border:1px solid var(--rule);background:var(--surf);padding:clamp(24px,2.6vw,36px);
  display:grid;gap:14px;justify-items:start}
.gbadge .lab{color:var(--mut)}
.gbadge .score{display:flex;align-items:baseline;gap:14px}
.gbadge .score b{font-size:clamp(44px,4.6vw,68px);font-weight:700;letter-spacing:-.04em;line-height:1}
.gbadge .stars{color:var(--rose);letter-spacing:2px;font-size:17px}
.gbadge p{font-size:14px;color:var(--mut);line-height:1.55}
.gbadge .sub{margin-top:-6px;font-size:13.5px;color:var(--fg);opacity:.9}
.gbadge .link{font-size:14px}
/* --- banda de credencial del patrocinio (Titan) -------------------------------
   Franja rosa a sangre, pegada al hero. Sin padding vertical de seccion: es una
   franja, no una seccion. El texto va en --rose-ink, que es el unico color que
   cumple contraste sobre el relleno rosa. */
.banda-spons{background:var(--rose);color:var(--rose-ink)}
.banda-spons .shell{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(12px,1.6vw,22px);padding-block:clamp(20px,2.6vh,30px)}
.banda-spons .sp-k{color:var(--rose-ink);font-size:11px}
.banda-spons .sp-x{color:var(--rose-ink);opacity:.55;font-size:17px;line-height:1}
.banda-spons .sp-rol{flex:1 1 240px;margin:0;text-align:right;color:var(--rose-ink);
  font-size:clamp(15px,1.5vw,17px);font-weight:600;line-height:1.3}
@media (max-width:720px){
  .banda-spons .shell{display:grid;justify-items:start;gap:4px}
  .banda-spons .sp-x{display:none}
  .banda-spons .sp-rol{text-align:left;margin-top:10px;flex:none;width:100%}
}

/* --- segundo hero (Titan) -----------------------------------------------------
   El motivo del patrocinio se maqueta a escala de portada. Tipografico, sin foto:
   asi contrasta con el hero fotografico de arriba en vez de competir con el. */
.hero-2{padding-block:clamp(78px,12vh,150px);position:relative;overflow:hidden}
.hero-2::after{content:"";position:absolute;width:min(38vw,540px);aspect-ratio:1;
  right:-12%;top:-34%;background:var(--glow);pointer-events:none;z-index:0}
.hero-2 .shell{position:relative;z-index:1}
.hero-2 h2{font-size:var(--t-xxl);letter-spacing:-.042em;line-height:1.02;
  max-width:17ch;margin:0;text-wrap:balance}
.hero-2 .h2-lede{margin:clamp(26px,3.4vh,40px) 0 0;max-width:44ch;
  font-size:var(--t-lg);line-height:1.45;color:var(--fg)}
.hero-2 .h2-lede strong{font-weight:600}
.hero-2 .body-copy{margin-top:clamp(30px,4vh,48px);max-width:64ch}

/* --- bloque de motivaciones (Titan) ------------------------------------------
   Lineas cortas con mucho aire entre ellas: el ritmo es el mensaje. El remate va
   en el rosa de acento, que sobre papel cambia solo a --rose-paper para cumplir AA. */
.motivos{margin-top:clamp(34px,4.4vh,54px);display:grid;
  gap:clamp(18px,2.4vh,30px);max-width:56ch}
.motivos p{margin:0;font-size:clamp(17px,1.9vw,21px);font-weight:600;
  line-height:1.35;letter-spacing:-.012em;color:var(--fg);text-wrap:balance}
.remate{margin:clamp(34px,4.4vh,54px) 0 0;max-width:58ch;
  font-size:clamp(18px,2.1vw,23px);font-weight:600;line-height:1.4;
  letter-spacing:-.014em;color:var(--accent-text);text-wrap:pretty}
.remate em{font-style:normal;text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:5px}
/* --- tira de fotos de la prueba (Titan) --------------------------------------
   Dos por dos con aire de sobra. Radio 0 como todas las superficies del sitio.
   El aspect-ratio reserva el hueco antes de que cargue la imagen, asi nada salta. */
.tira-titan{margin-top:clamp(40px,5.5vh,72px);display:grid;
  grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,26px)}
.tira-titan figure{margin:0;aspect-ratio:3/2;max-width:100%;
  background:var(--surf);overflow:hidden}
.tira-titan img{width:100%;height:100%;object-fit:cover;display:block}
.tira-cred{margin:clamp(14px,1.8vh,20px) 0 0;color:var(--mut)}
@media (max-width:640px){
  .tira-titan{grid-template-columns:1fr;gap:12px}
}
/* --- banda de patrocinio de la Titan en la portada ----------------------------
   Foto a sangre con degradado hacia abajo: arriba se leen las caras, abajo se apoya
   el texto. En movil la foto deja de ser fondo y va encima, porque recortar en
   vertical una foto de tres personas se las come. */
.banner-titan{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(460px,62vh,660px);padding-block:clamp(44px,6vh,72px)}
.banner-titan .bg{position:absolute;inset:0;z-index:0}
.banner-titan .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.banner-titan .bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(5,10,18,.90) 0%,rgba(5,10,18,.66) 38%,rgba(5,10,18,.10) 72%),
  linear-gradient(180deg,rgba(5,10,18,.20) 0%,rgba(5,10,18,.34) 50%,rgba(5,10,18,.86) 100%)}
.banner-titan .shell{position:relative;z-index:2}
.banner-titan .titan-logo-banner{height:clamp(54px,5.8vw,82px);margin:0 0 clamp(18px,2.2vh,26px)}
.banner-titan .eyebrow{color:var(--rose)}
.banner-titan h2{margin:14px 0 0;color:#fff;font-size:var(--t-xl);
  letter-spacing:-.032em;line-height:1.06;max-width:19ch;text-wrap:balance}
.banner-titan .bt-p{margin:clamp(18px,2.2vh,26px) 0 0;max-width:52ch;color:#DFE2E6;
  font-size:var(--t-lg);line-height:1.45}
.banner-titan .acts{margin-top:clamp(26px,3.2vh,38px)}
/* .bt-top: la banda va la primera de la pagina, pegada al header. La cabecera del sitio
   es transparente y se apoya en lo que tenga debajo, asi que aqui hace falta reservarle
   el hueco (el mismo padding superior que usa el hero) y oscurecer la franja de arriba.
   Sin esto el logotipo de la Titan se pega al de bibobici y el menu se pierde sobre la
   parte clara de la foto. */
.banner-titan.bt-top{min-height:clamp(560px,74vh,760px);
  padding-block:clamp(130px,15vh,170px) clamp(52px,7vh,86px)}
.banner-titan.bt-top .bg::after{background:
  linear-gradient(90deg,rgba(5,10,18,.90) 0%,rgba(5,10,18,.66) 38%,rgba(5,10,18,.10) 72%),
  linear-gradient(180deg,rgba(5,10,18,.82) 0%,rgba(5,10,18,.34) 26%,
                  rgba(5,10,18,.40) 56%,rgba(5,10,18,.88) 100%)}
@media (max-width:860px){
  .banner-titan{display:block;min-height:0;padding-block:0}
  .banner-titan .bg{position:relative;aspect-ratio:3/2}
  .banner-titan .bg img{object-position:50% 30%}
  .banner-titan .bg::after{background:linear-gradient(180deg,transparent 58%,rgba(5,10,18,.92))}
  .banner-titan .shell{padding-block:clamp(30px,5vh,44px)}
  /* En movil la foto va arriba del todo y el header transparente cae encima: se le pone
     una franja oscura propia en la cabecera de la imagen para que el menu se lea. */
  .banner-titan.bt-top{min-height:0;padding-block:0}
  .banner-titan.bt-top .bg{aspect-ratio:4/3}
  .banner-titan.bt-top .bg img{object-position:50% 42%}
  .banner-titan.bt-top .bg::after{background:
    linear-gradient(180deg,rgba(5,10,18,.86) 0%,rgba(5,10,18,.34) 22%,
                    transparent 52%,rgba(5,10,18,.92) 100%)}
}
/* --- logotipo de la Titan Desert ---------------------------------------------
   Archivo blanco sobre transparente: solo se usa sobre fondo oscuro. El aspect-ratio
   viene del propio archivo (640x485) y el alto manda, que es como se dimensiona un
   logotipo; el ancho sale solo. Espacio de respeto generoso alrededor. */
.titan-logo{display:block;width:auto;height:auto;max-width:100%}
.titan-logo-hero{height:clamp(78px,8.6vw,124px);margin:clamp(22px,2.8vh,32px) 0 0}
.titan-logo-sec{height:clamp(64px,7vw,92px);margin:clamp(18px,2.2vh,26px) 0 clamp(22px,2.8vh,32px)}
.stars-row{display:inline-flex;gap:3px;color:var(--rose)}
.stars-row svg{width:15px;height:15px}
.quotes{position:relative;min-height:250px}
.qi{margin:0;position:absolute;inset:0;opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.qi.on{opacity:1;transform:none;position:relative;pointer-events:auto}
.qi .stars-row{margin-bottom:18px}
.qi blockquote{margin:0;font-size:clamp(22px,2.6vw,36px);font-weight:600;letter-spacing:-.032em;
  line-height:1.22;max-width:26ch}
.qi footer{margin-top:clamp(26px,3.2vh,36px);display:flex;align-items:center;gap:16px;
  font-size:14px;color:var(--mut)}
.qi footer .id b{color:var(--fg);font-weight:600;display:block;font-size:15.5px;margin-bottom:2px}
.qi .ava{flex:0 0 auto;width:52px;height:52px;border-radius:999px;object-fit:cover;
  display:grid;place-items:center;font-size:15px;font-weight:600;letter-spacing:.02em;
  color:var(--accent-text);background:color-mix(in srgb,var(--rose) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--rose) 40%,var(--rule))}
.qnav{display:flex;gap:10px;margin-top:clamp(30px,3.6vh,42px)}
.qnav button{width:34px;height:3px;background:var(--rule);border-radius:2px;
  transition:background-color .4s var(--ease),width .4s var(--ease)}
.qnav button.on{background:var(--rose);width:56px}
/* opiniones centradas (bloque solo, sin tarjeta de Google) */
.qcenter{max-width:880px;margin-inline:auto;text-align:center}
.qcenter .qi blockquote{max-width:26ch;margin-inline:auto}
.qcenter .qi footer{justify-content:center;text-align:left}
.qcenter .qnav{justify-content:center}

/* --- cierre --- */
.close{position:relative;overflow:hidden;min-height:74vh;display:flex;align-items:center;
  padding-block:clamp(80px,10vh,120px)}
.close .bg{position:absolute;inset:0;z-index:0}
.close .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.close .bg::after{content:"";position:absolute;inset:0;background:rgba(10,11,13,.64)}
.close.plain{background:var(--rose);min-height:0}
.close.plain h2{color:var(--rose-ink)}
.close.plain p{color:color-mix(in srgb,var(--rose-ink) 76%,var(--rose))}
.close.plain .btn-a{background:var(--rose-ink);color:#fff}
.close.plain .btn-a .i{background:rgba(255,255,255,.16)}
.close.plain .btn-a:hover{background:#3A1020}
.close.plain .btn-b{border-color:color-mix(in srgb,var(--rose-ink) 42%,transparent);color:var(--rose-ink)}
.close.plain .btn-b .i{background:color-mix(in srgb,var(--rose-ink) 10%,transparent)}
.close.plain .btn-b:hover{background:var(--rose-ink);border-color:var(--rose-ink);color:#fff}
.close.plain .btn-b:hover .i{background:rgba(255,255,255,.16)}
.close .shell{position:relative;z-index:2}
.close h2{font-size:var(--t-xxl);color:#fff;max-width:16ch;letter-spacing:-.04em}
.close p{margin-top:24px;max-width:46ch;color:#DEE1E5;font-size:var(--t-lg);line-height:1.48}
.close .acts{margin-top:42px;display:flex;flex-wrap:wrap;gap:14px}

/* --- pie --- */
.ft{position:relative;overflow:hidden;border-top:1px solid var(--d-rule);
  padding-block:clamp(48px,6vh,72px) 40px;background:var(--d-bg);color:var(--d-fg)}
.ft::before{content:"";position:absolute;width:min(46vw,640px);aspect-ratio:1;left:-14%;top:-52%;
  background:var(--glow);opacity:.55;pointer-events:none}
.ft .shell{position:relative}
.nl{max-width:420px}
.nl label{display:block;color:var(--d-mut);margin-bottom:12px}
.nl .row{display:flex;border:1px solid var(--d-rule);border-radius:999px;padding:5px;
  background:var(--d-surf);transition:border-color .35s var(--ease)}
.nl .row:focus-within{border-color:var(--rose)}
.nl input{flex:1;min-width:0;background:none;border:0;color:var(--d-fg);font:inherit;
  font-size:14.5px;padding:8px 10px 8px 18px;outline:none}
.nl input::placeholder{color:var(--d-mut)}
.nl button{flex:0 0 auto;background:var(--rose);color:var(--rose-ink);border-radius:999px;
  padding:9px 20px;font-size:14px;font-weight:600;transition:background-color .35s var(--ease)}
.nl button:hover{background:var(--rose-hover)}
.nl .ok{display:none;margin-top:12px;font-size:13.5px;color:var(--rose)}
.nl.done .row{display:none}
.nl.done .ok{display:block}
.nl small{display:block;margin-top:12px;font-size:12px;color:var(--d-mut);line-height:1.6}
.soc{display:flex;gap:10px;margin-top:22px}
.soc a{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;
  border:1px solid var(--d-rule);color:var(--d-mut);
  transition:color .3s,border-color .3s,transform .3s var(--ease)}
.soc a:hover{color:var(--d-fg);border-color:var(--rose);transform:translateY(-3px)}
.soc svg{width:17px;height:17px}
.ft .head{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);align-items:flex-start;
  justify-content:space-between;margin-bottom:clamp(38px,5vh,60px)}
.ft .top{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:clamp(26px,3.2vw,52px)}
.ft .brand{width:148px}
.ft .head .addr{text-align:right}
@media (max-width:700px){.ft .head .addr{text-align:left}}
.ft .ft-h{margin:0 0 13px;color:var(--d-mut)}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ft li a{font-size:13.5px;color:var(--d-mut);transition:color .25s}
.ft li a:hover{color:var(--d-fg)}
.ft .addr{font-size:14.5px;color:var(--d-mut);line-height:1.75}
.ft .addr a{color:var(--d-fg)}
.ft .btm{margin-top:clamp(40px,5vh,66px);padding-top:26px;border-top:1px solid var(--d-rule);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12.5px;color:var(--d-mut)}
.ft .btm a:hover{color:var(--d-fg)}
.credits{font-size:12px;color:var(--d-mut);line-height:1.7;max-width:74ch;margin-top:22px}
.credits a{text-decoration:underline;text-underline-offset:2px}

/* --- interiores sin actos: las zonas claras pintan su propio fondo, a corte --- */
body:not([data-acts]) section[data-act-trigger="light"]{
  --bg:var(--l-bg);--surf:var(--l-surf);--fg:var(--l-fg);--mut:var(--l-mut);
  --rule:var(--l-rule);--accent-text:var(--rose-paper);
  background:var(--bg);color:var(--fg)}

/* --- cabeceras de pagina interior --- */
.phead{position:relative;padding-block:clamp(150px,18vh,210px) clamp(52px,7vh,96px);overflow:hidden}
.phead-sm{padding-block:clamp(128px,15vh,168px) clamp(26px,3.4vh,42px)}
.phead:not(.shot)::before{content:"";position:absolute;width:min(58vw,820px);aspect-ratio:1;
  right:-14%;top:-32%;background:var(--glow);pointer-events:none}
.phead:not(.shot)::after{content:"";position:absolute;width:min(34vw,480px);aspect-ratio:1;
  left:-10%;bottom:-46%;background:var(--glow);opacity:.5;pointer-events:none}
.phead.shot{min-height:72vh;display:flex;align-items:flex-end}
.phead .bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.phead .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);
  animation:heroZoom 26s var(--ease) forwards}
.phead .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,13,.68),rgba(10,11,13,.3) 45%,rgba(10,11,13,.9))}
.phead .shell{position:relative;z-index:2}
.phead h1{font-size:var(--t-xxl);max-width:17ch;letter-spacing:-.042em}
.phead.shot h1,.phead.shot .lead{color:#fff}
.phead.shot .lead{color:#DFE2E6}
.phead .lead{margin-top:26px}
.phead .acts{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.phead .note{font-size:13.5px;color:var(--mut);width:100%;margin-top:4px}
.phead.shot .note{color:rgba(255,255,255,.66)}
.crumb{display:flex;gap:10px;color:var(--accent-text);margin-bottom:30px;flex-wrap:wrap}
.crumb span[aria-hidden]{color:var(--mut)}
.crumb a{opacity:.75;transition:opacity .3s}
.crumb a:hover{opacity:1}
.phead.shot .crumb{color:var(--rose)}

/* --- bloque de respuesta directa (GEO) --- */
/* --- tarjetas de tarifa (precios) --- */
/* el plan destacado va en el centro, un punto mas grande y con un rosa muy tenue */
.plans{--feat-out:clamp(12px,1.5vh,20px);display:grid;grid-template-columns:1fr 1.07fr 1fr;
  gap:clamp(16px,1.8vw,26px);align-items:stretch}
@media (max-width:1020px){.plans{--feat-out:0px;grid-template-columns:1fr}}
.plan{position:relative;border:1px solid var(--rule);background:var(--surf);
  padding:clamp(26px,2.8vw,40px);display:flex;flex-direction:column;gap:0;overflow:hidden}
.plan.feat{border-color:color-mix(in srgb,var(--rose) 55%,var(--rule));
  background:color-mix(in srgb,var(--rose) 5%,var(--surf));
  box-shadow:0 24px 80px -44px rgba(254,100,170,.5);
  margin-block:calc(-1 * var(--feat-out));z-index:1;
  padding-block:calc(clamp(26px,2.8vw,40px) + var(--feat-out))}
/* sobre fondo claro el mismo rosa se ve mas: se rebaja */
body[data-act="light"] .plan.feat,
body:not([data-acts]) section[data-act-trigger="light"] .plan.feat{
  background:color-mix(in srgb,var(--rose) 2.5%,var(--surf))}
.plan.feat::before{content:"";position:absolute;width:340px;aspect-ratio:1;right:-28%;top:-34%;
  background:var(--glow);pointer-events:none}
.plan .tag{color:var(--accent-text)}
.plan h3{margin-top:16px;font-size:clamp(21px,2vw,26px);letter-spacing:-.025em}
.plan .who{margin-top:12px;font-size:14.5px;color:var(--mut);line-height:1.55;min-height:3.2em}
.plan .price{margin-top:22px;display:flex;align-items:baseline;gap:10px}
.plan .price .n{font-size:clamp(38px,3.6vw,54px);font-weight:700;letter-spacing:-.045em;line-height:1}
.plan .price .u{font-size:13px;color:var(--mut)}
.plan .dur{margin-top:8px;font-size:13.5px;color:var(--mut)}
.plan ul{list-style:none;margin:24px 0 0;padding:24px 0 0;border-top:1px solid var(--rule);
  display:grid;gap:11px}
.plan li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.plan li svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;color:var(--accent-text)}
.plan .foot{margin-top:auto;padding-top:28px}
/* la ficha destacada ofrece cita y ficha del servicio, una al lado de la otra */
.plan .foot-duo{display:flex;flex-wrap:wrap;gap:clamp(14px,1.3vw,20px)}
/* con tres columnas estrechas los dos botones no caben en linea: se apilan a ancho completo */
@media (min-width:1021px) and (max-width:1260px){
  .plan .foot-duo{gap:10px}
  .plan .foot-duo .btn{flex:1 1 100%;justify-content:space-between}
  .plan .foot-duo .btn.plain{justify-content:center}
}

/* --- fichas de servicio: incluye con iconos --- */
.inc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(14px,1.6vw,22px)}
.inc article{border:1px solid var(--rule);background:var(--surf);padding:22px 22px 24px;
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.inc article:hover{border-color:color-mix(in srgb,var(--rose) 45%,var(--rule));transform:translateY(-3px)}
.inc .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;
  background:color-mix(in srgb,var(--rose) 12%,transparent);color:var(--accent-text);margin-bottom:16px}
.inc .ico svg{width:19px;height:19px}
.inc h4{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.inc h4 span{display:block;color:var(--mut);margin-bottom:7px}
.inc p{margin-top:8px;font-size:13.5px;color:var(--mut);line-height:1.55}

/* declaracion centrada: frase clave sobre fondo ligeramente distinto */
.statement{position:relative;overflow:hidden;background:var(--surf);
  border-block:1px solid var(--rule);text-align:center;
  padding-block:clamp(76px,11vh,140px)}
.statement::before{content:"";position:absolute;width:min(54vw,760px);aspect-ratio:1;
  left:50%;top:-58%;transform:translateX(-50%);background:var(--glow);pointer-events:none}
.statement p{position:relative;max-width:24ch;margin-inline:auto;
  font-size:clamp(27px,3.6vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.16;
  text-wrap:balance}
.statement p em{font-style:normal;color:var(--accent-text)}
.statement .who{position:relative;display:block;margin-top:26px;color:var(--mut)}

/* trio numerado: tres cosas, tres numeros bien visibles */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,34px)}
@media (max-width:900px){.trio{grid-template-columns:1fr}}
.trio article{border-top:2px solid var(--rule);padding-top:24px;position:relative;
  transition:border-color .35s var(--ease)}
.trio article:hover{border-top-color:var(--rose)}
.trio .n{display:block;font-size:clamp(44px,4.6vw,72px);font-weight:700;letter-spacing:-.05em;
  line-height:1;color:var(--accent-text)}
.trio h3{margin-top:18px;font-size:clamp(19px,1.9vw,25px);letter-spacing:-.025em}
.trio p{margin-top:12px;font-size:15px;color:var(--mut);line-height:1.62}

/* fichas de fase del metodo */
.fases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,22px)}
@media (max-width:860px){.fases{grid-template-columns:1fr}}
.fase{position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--surf);
  padding:clamp(24px,2.6vw,38px);transition:border-color .35s var(--ease),transform .35s var(--ease)}
.fase:hover{border-color:color-mix(in srgb,var(--rose) 45%,var(--rule));transform:translateY(-3px)}
.fase .ghost{position:absolute;right:18px;top:2px;font-weight:700;letter-spacing:-.05em;
  font-size:clamp(80px,8vw,128px);line-height:1;color:color-mix(in srgb,var(--fg) 7%,transparent);
  pointer-events:none}
.fase .top{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.fase .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;
  background:color-mix(in srgb,var(--rose) 12%,transparent);color:var(--accent-text)}
.fase .ico svg{width:19px;height:19px}
.fase h3{font-size:clamp(19px,1.9vw,25px);letter-spacing:-.025em;position:relative}
.fase p{margin-top:12px;font-size:15px;color:var(--mut);line-height:1.62;position:relative;max-width:52ch}

/* diagrama de flujo del metodo */
.map-stage.flow{padding:clamp(18px,2vw,30px)}
.map-stage.flow svg{max-width:720px;margin-inline:auto}
.flow text{font-size:17px}
.flow rect{fill:transparent}
.flow marker path{stroke:color-mix(in srgb,var(--fg) 40%,transparent)}
.flow .blu-dash.m-hl{marker-end:url(#fw)}

/* mapa de Google embebido */
.gmap{display:block;width:100%;aspect-ratio:16/7;border:1px solid var(--rule);
  filter:saturate(.82) contrast(1.02)}
@media (max-width:760px){.gmap{aspect-ratio:4/3}}

.cotas-row{display:flex;flex-wrap:wrap;gap:8px}
.cota-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;border:1px solid color-mix(in srgb,var(--rose) 45%,var(--rule));
  border-radius:999px;color:var(--accent-text)}

/* --- fichas de "lo que cambia la Titan" --------------------------------------
   Mismo idioma que .tiles: la separacion de 1px sobre el color de linea es lo que
   dibuja los filetes entre fichas, asi no hay bordes dobles donde se tocan. Dos
   columnas en escritorio porque los textos son de tres lineas y a cuatro quedarian
   ahogados; una sola columna por debajo de 760. */
.cards-titan{margin-top:clamp(30px,4vh,48px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.cards-titan>div{min-width:0;background:var(--bg);
  padding:clamp(26px,3.2vw,44px)}
.cards-titan .t-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;
  background:color-mix(in srgb,var(--rose) 12%,transparent);color:var(--accent-text);
  margin-bottom:18px}
.cards-titan .t-ico svg{width:18px;height:18px}
.cards-titan h3{margin:0 0 10px;font-size:clamp(17px,1.7vw,20px);font-weight:600;
  letter-spacing:-.012em;line-height:1.25;text-wrap:balance}
.cards-titan p{margin:0;color:var(--mut);font-size:15.5px;line-height:1.6;max-width:46ch}
@media (max-width:760px){
  .cards-titan{grid-template-columns:1fr}
}
.tiles .t-ico,.f-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;
  background:color-mix(in srgb,var(--rose) 12%,transparent);color:var(--accent-text);flex:0 0 auto}
.tiles .t-ico{margin-bottom:18px}
.tiles .t-ico svg,.f-ico svg{width:18px;height:18px}
.facts dt,.napbox dt{display:flex;gap:12px;align-items:center}

/* aviso de cookies */
.cookies{position:fixed;left:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:75;
  width:min(360px,calc(100vw - 32px));background:var(--d-bg);color:var(--d-fg);
  border:1px solid var(--d-rule);padding:22px 24px;
  box-shadow:0 30px 70px -30px rgba(3,6,11,.8)}
.cookies .mono{color:var(--rose)}
.cookies .txt{margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--d-mut)}
.cookies .row{display:flex;align-items:center;gap:10px;margin-top:16px}
.cookies .row button{padding:8px 18px;border-radius:999px;font-size:13.5px;font-weight:600}
.cookies .c-ok{background:var(--rose);color:var(--rose-ink)}
.cookies .c-ok:hover{background:var(--rose-hover)}
.cookies .c-no{border:1px solid var(--d-rule);color:var(--d-fg)}
.cookies .c-no:hover{border-color:var(--d-fg)}
.cookies .row a{margin-left:auto;font-size:12.5px;color:var(--d-mut);text-decoration:underline;
  text-underline-offset:2px}
@media print{.cookies{display:none}}

/* boton flotante de WhatsApp */
.wa-fab{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:70;
  display:grid;place-items:center;width:54px;height:54px;border-radius:999px;
  background:#25D366;color:#fff;box-shadow:0 14px 34px -12px rgba(37,211,102,.65);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.wa-fab:hover{transform:translateY(-4px);box-shadow:0 20px 42px -12px rgba(37,211,102,.75)}
.wa-fab svg{width:26px;height:26px}
@media print{.wa-fab{display:none}}

.answer{border-left:2px solid var(--rose);padding:8px 0 8px clamp(22px,2.6vw,34px);max-width:62ch}
.answer p{font-size:clamp(19px,1.85vw,24px);line-height:1.48;color:var(--fg);font-weight:400;
  letter-spacing:-.012em}
.answer p strong{font-weight:600}

/* --- dos columnas de texto --- */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4.4vw,80px);
  align-items:start}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(22px,3vw,44px)}

/* --- fichas enfrentadas (contra/a favor, para quien es/no es...) --- */
.vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--rule);
  background:var(--surf)}
.vs>div{position:relative;min-width:0;padding:clamp(28px,4vw,56px)}
.vs>div+div{border-left:1px solid var(--rule)}
.vs .vs-top{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3vh,32px)}
.vs .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;
  border:1px solid var(--rule);color:var(--mut);flex:none}
.vs .ico svg{width:18px;height:18px}
.vs .vs-k{color:var(--mut)}
.vs h2{font-size:clamp(24px,2.6vw,37px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.vs .body-copy{margin-top:clamp(18px,2.4vh,26px)}
.vs>div.pro{background:color-mix(in srgb,var(--rose) 6%,var(--surf));
  box-shadow:inset 0 2px 0 var(--rose)}
.vs>div.pro .ico{border-color:color-mix(in srgb,var(--rose) 45%,var(--rule));color:var(--accent-text)}
.vs>div.pro .vs-k{color:var(--accent-text)}

/* --- retrato circular en las citas grandes --- */
.statement .s-ava{position:relative;display:block;width:82px;height:82px;margin:0 auto 28px;
  border-radius:999px;object-fit:cover;border:2px solid var(--rose);padding:3px;background:var(--bg)}

/* --- datos rapidos --- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;
  border-block:1px solid var(--rule)}
.facts>div{padding:26px 28px 26px 0}
.facts>div+div{border-left:1px solid var(--rule);padding-left:28px}
.facts dt{color:var(--mut)}
.facts dd{margin:10px 0 0;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.facts small{display:block;margin-top:6px;font-size:13px;font-weight:400;color:var(--mut);
  letter-spacing:0;line-height:1.5}

/* --- tabla editorial (tambien cubre .dtable heredado del contenido) --- */
.dtable{overflow-x:auto;border:1px solid var(--rule);background:var(--surf);margin-block:8px}
.dtable table{border-collapse:collapse;width:100%;min-width:540px;font-size:15px}
.dtable th{text-align:left;
  color:var(--mut);font-weight:600;padding:15px 20px;border-bottom:1px solid var(--rule)}
.dtable td{padding:16px 20px;border-bottom:1px solid var(--rule);color:var(--mut);
  line-height:1.55;vertical-align:top}
.dtable td:first-child{color:var(--fg);font-weight:600}
.dtable tr:last-child td{border-bottom:0}

/* --- barra de precios --- */
.pricebar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:start;
  padding-block:clamp(32px,4.4vh,56px);border-block:1px solid var(--rule)}
.pricebar>div+div{border-left:1px solid var(--rule);padding-left:clamp(26px,4vw,64px)}
.pricebar .k{color:var(--mut);margin-bottom:18px}
.pricebar .n{font-size:clamp(40px,4.6vw,68px);font-weight:700;letter-spacing:-.05em;line-height:.9}
.pricebar small{display:block;margin-top:14px;font-size:14px;color:var(--mut);max-width:34ch;line-height:1.5}
@media (max-width:760px){
  .pricebar{grid-template-columns:1fr}
  .pricebar>div+div{border-left:0;border-top:1px solid var(--rule);padding-left:0;
    padding-top:clamp(22px,3vh,30px)}
}

/* --- preguntas --- */
.qa{border-top:1px solid var(--rule)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;padding-block:28px;display:flex;gap:26px;
  align-items:center;justify-content:space-between;font-size:clamp(18px,1.9vw,23px);font-weight:600;
  letter-spacing:-.024em;transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-text)}
.qa .ic{position:relative;width:28px;height:28px;flex:0 0 auto;border-radius:999px;
  border:1px solid var(--rule);transition:border-color .35s var(--ease)}
.qa .ic::before,.qa .ic::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;
  transition:transform .4s var(--ease)}
.qa .ic::before{width:10px;height:1.5px;transform:translate(-50%,-50%)}
.qa .ic::after{width:1.5px;height:10px;transform:translate(-50%,-50%)}
.qa details[open] .ic{border-color:var(--rose);color:var(--accent-text)}
.qa details[open] .ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa .ans{padding-bottom:30px;max-width:66ch;color:var(--mut);line-height:1.7}
.qa .ans a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* --- teselas --- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.tiles>*{position:relative;background:var(--bg);padding:clamp(26px,2.8vw,40px);display:block;
  transition:background-color .4s}
.tiles>*::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--rose);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.tiles>*:hover{background:var(--surf)}
.tiles>*:hover::before{transform:scaleY(1)}
.tiles h3,.tiles h4{font-size:19px;letter-spacing:-.022em;margin-bottom:13px;font-weight:600}
.tiles p{color:var(--mut);font-size:15.5px;line-height:1.62}
.tiles .link{margin-top:20px;font-size:14px}
.tiles .k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
/* rejilla de tres para listas de artículos, con titulares largos */
.tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.tiles.t3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tiles.t3{grid-template-columns:1fr}}
.tiles.t3 h3{font-size:20px;line-height:1.24}

/* --- lista de zonas --- */
.zlist{border-top:1px solid var(--rule)}
.zlist a{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(72px,auto) auto;gap:20px;
  align-items:baseline;padding-block:24px;border-bottom:1px solid var(--rule);
  transition:padding-left .4s var(--ease)}
.zlist a:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.zlist a:hover b{color:var(--accent-text)}
.zlist b{font-size:clamp(19px,2vw,26px);font-weight:600;letter-spacing:-.024em}
.zlist .p{font-family:var(--f-mono);font-size:11px!important;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);align-self:center}
.zlist b{transition:color .3s}
.zlist .t{text-align:right}
.zlist .t{font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--accent-text);
  font-variant-numeric:tabular-nums}
.zlist svg{width:16px;height:16px;color:var(--mut);transition:transform .4s var(--ease),color .3s}
.zlist a:hover svg{transform:translateX(5px);color:var(--accent-text)}

/* --- cronologia --- */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:7px;top:14px;bottom:22px;width:1.5px;background:var(--rule)}
.tl li{position:relative;padding:0 0 32px 38px}
.tl li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;
  background:var(--bg);border:2px solid var(--rose)}
.tl b{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.018em;line-height:1.35}
.tl span{display:block;margin-top:9px;font-size:15.5px;color:var(--mut);line-height:1.62;max-width:62ch}

/* --- las seis fases contadas largo (cómo es una sesión) --- */
/* cabecera del paso a paso: titular y entradilla en dos columnas, sin huecos muertos */
.pasos-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(34px,4.5vh,56px)}
.pasos-head h2{max-width:14ch}
.pasos-head>p{color:var(--mut);font-size:16.5px;line-height:1.68;max-width:52ch}
@media (max-width:860px){.pasos-head{grid-template-columns:1fr;align-items:start;gap:20px}}
.pasos{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.pasos>li{display:grid;grid-template-columns:clamp(88px,9vw,148px) minmax(0,1fr);
  gap:clamp(22px,3.4vw,56px);padding-block:clamp(30px,4vh,50px);border-bottom:1px solid var(--rule)}
.pasos .p-n{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.pasos .num{font-size:clamp(38px,4.4vw,64px);font-weight:700;letter-spacing:-.05em;line-height:.85;
  color:color-mix(in srgb,var(--fg) 16%,transparent)}
.pasos .num::before{content:attr(data-n)}
.pasos .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--rose) 38%,var(--rule));color:var(--accent-text)}
.pasos .ico svg{width:20px;height:20px}
.pasos h3{font-size:clamp(21px,2.3vw,31px);font-weight:700;letter-spacing:-.03em;line-height:1.12}
.pasos p{margin-top:16px;font-size:16px;color:var(--mut);line-height:1.68;max-width:62ch}
.pasos .p-meta{display:flex;flex-wrap:wrap;gap:14px clamp(26px,3.4vw,56px);margin:clamp(22px,3vh,30px) 0 0;
  padding-top:clamp(18px,2.4vh,24px);border-top:1px solid var(--rule)}
.pasos .p-meta dd{margin:0;margin-top:7px;font-size:15px;font-weight:600;letter-spacing:-.012em;max-width:34ch}
.pasos>li:hover .num{color:color-mix(in srgb,var(--rose) 55%,transparent)}
.pasos .paso-0 .num{color:color-mix(in srgb,var(--rose) 45%,transparent)}
.pasos .paso-0 .ico{background:color-mix(in srgb,var(--rose) 10%,transparent)}
.pasos .p-b ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;max-width:58ch}
.pasos .p-b li{position:relative;padding-left:22px;font-size:16px;color:var(--mut);line-height:1.6}
.pasos .p-b li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--rose)}
.pasos>li .num,.pasos>li .ico{transition:color .4s var(--ease),border-color .4s var(--ease)}
@media (max-width:760px){
  .pasos>li{grid-template-columns:1fr;gap:18px}
  .pasos .p-n{flex-direction:row;align-items:center;gap:14px}
  .pasos .num{font-size:34px}
}

/* --- aviso de idioma: se ofrece, nunca se redirige --- */
.langbar{position:fixed;z-index:70;top:calc(var(--hd-h,74px) + 14px);right:clamp(14px,2vw,28px);
  max-width:min(340px,calc(100vw - 28px));display:flex;align-items:center;gap:14px;
  padding:14px 14px 14px 20px;background:var(--l-surf);color:var(--l-fg);
  border:1px solid rgba(0,0,0,.1);border-radius:999px;
  box-shadow:0 22px 60px -30px rgba(0,0,0,.55);animation:lb-in .5s var(--ease) both}
@keyframes lb-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.langbar[hidden]{display:none}
.langbar p{font-size:14px;line-height:1.35}
.langbar .go{flex:none;font-size:14px;font-weight:600;color:var(--rose-paper);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.langbar .lb-x{flex:none;width:26px;height:26px;border-radius:999px;font-size:17px;line-height:1;
  color:var(--l-mut);background:rgba(0,0,0,.05);display:grid;place-items:center}
.langbar .lb-x:hover{background:rgba(0,0,0,.12)}
@media (max-width:620px){
  .langbar{top:auto;bottom:14px;left:14px;right:14px;max-width:none;border-radius:18px;
    padding:14px 14px 14px 18px}
}

/* --- artículos del diario --- */
.art-h{font-size:clamp(23px,2.5vw,36px);font-weight:700;letter-spacing:-.032em;line-height:1.14;
  max-width:26ch}

/* --- firma del autor al pie de un artículo --- */
.firma{margin-top:clamp(48px,6vh,80px);padding-top:clamp(26px,3.4vh,36px);border-top:1px solid var(--rule);
  max-width:62ch}
.firma .mono{color:var(--mut)}
.firma .n{margin-top:12px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.firma .n a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.firma .s{margin-top:10px;font-size:15px;color:var(--mut);line-height:1.62}

/* --- pull quote --- */
.pull{font-size:clamp(26px,3.4vw,50px);font-weight:700;letter-spacing:-.038em;line-height:1.1;
  max-width:21ch}
.pull em{font-style:normal;color:var(--accent-text)}

/* --- indice de disfrute (arco) --- */
.gauge{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(26px,3.4vw,52px);
  align-items:center;border:1px solid var(--rule);background:var(--surf);
  padding:clamp(26px,3.2vw,44px)}
.gauge svg{width:clamp(150px,16vw,200px);height:auto}
.gauge .track{stroke:var(--rule);stroke-width:11;fill:none;stroke-linecap:round}
.gauge .fill{stroke:var(--rose);stroke-width:11;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--C);stroke-dashoffset:var(--C);transition:stroke-dashoffset 1.8s var(--ease) .2s}
.gauge.in .fill{stroke-dashoffset:var(--OFF)}
.gauge .val{font-size:44px;font-weight:700;fill:var(--fg);letter-spacing:-.04em}
.gauge .valx{font-size:12px;fill:var(--mut);letter-spacing:.16em;font-weight:600}
.gauge h3{font-size:var(--t-xl)}
.gauge .body{margin-top:16px;color:var(--mut);line-height:1.62;max-width:54ch}
.gauge .ex{margin-top:18px;display:inline-block;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--rule);border-radius:999px;padding:6px 13px}

/* --- formulario --- */
.form-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);
  gap:clamp(30px,4.4vw,72px);align-items:start}
.contact-form{background:var(--surf);border:1px solid var(--rule);
  padding:clamp(26px,3.2vw,48px);box-shadow:0 30px 80px -50px rgba(5,10,18,.35)}
.contact-form .fstep{display:flex;align-items:center;gap:14px;margin:clamp(30px,3.6vh,44px) 0 20px;
  font-size:15px;font-weight:700;letter-spacing:-.01em}
.contact-form .fstep:first-of-type{margin-top:0}
.contact-form .fstep .mono{color:var(--accent-text)}
.contact-form .fstep::after{content:"";flex:1;height:1px;background:var(--rule)}
.optrow{display:flex;flex-wrap:wrap;gap:8px}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:inline-block;padding:9px 16px;border:1px solid var(--rule);border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--mut);cursor:pointer;
  transition:border-color .25s,background-color .25s,color .25s,transform .18s var(--ease)}
.opt span:hover{border-color:color-mix(in srgb,var(--rose) 55%,var(--rule));color:var(--fg)}
.opt input:checked+span{background:var(--rose);border-color:var(--rose);color:var(--rose-ink)}
.opt input:focus-visible+span{outline:2px solid var(--rose);outline-offset:2px}
.opt input:checked+span{transform:none}
.contact-form .formerr{display:none;margin-top:14px;font-size:13.5px;color:#D64545;line-height:1.5}
.contact-form .formerr a{text-decoration:underline;text-underline-offset:2px;font-weight:600}
.contact-form.fail .formerr{display:block}
.contact-form.sent>*:not(.fdone){display:none}
.fdone{text-align:center;padding:clamp(30px,5vh,60px) 10px}
.fdone .fdone-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:999px;
  margin:0 auto 22px;background:var(--rose);color:var(--rose-ink)}
.fdone .fdone-ic svg{width:26px;height:26px}
.fdone h3{font-size:clamp(22px,2.2vw,30px)}
.fdone p{margin-top:12px;color:var(--mut);line-height:1.6}
.fdone a{color:var(--accent-text);font-weight:600}
.nl .ko{display:none;margin-top:12px;font-size:13px;color:#FF9A8F}
.nl.fail .ko{display:block}
.field{display:grid;gap:8px;margin-bottom:18px}
.field>label{font-family:var(--f-mono);font-size:11px!important;font-weight:400!important;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.field>label small{font-family:inherit;font-size:inherit;color:var(--mut)}
.field input,.field select,.field textarea{background:var(--bg);border:1px solid var(--rule);
  border-radius:0;padding:15px 17px;color:var(--fg);font:inherit;font-size:16px;
  transition:border-color .3s,background-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--rose)}
.field textarea{min-height:112px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field .err{display:none;font-size:13px;color:#D64545;line-height:1.4}
body:not([data-act="light"]) .field .err{color:#FF9A8F}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#D64545}
.field.bad .err{display:block}
.consent{display:grid;grid-template-columns:auto 1fr;gap:13px;font-size:13.5px;color:var(--mut);
  line-height:1.55;margin:8px 0 24px}
.consent input{margin-top:3px;accent-color:var(--rose);width:17px;height:17px}
.consent a{text-decoration:underline;text-underline-offset:3px}
.consent.bad span{color:#D64545}
.formnote{margin-top:16px;font-size:14.5px;line-height:1.5;color:var(--accent-text);display:none}
.formnote.on{display:block}
.napbox{border:1px solid var(--rule);background:var(--surf)}
.napbox .bd{padding:clamp(24px,2.6vw,36px)}
.napbox dl{display:grid;gap:18px;margin:0}
.napbox dl>div{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:baseline}
.napbox dt{color:var(--mut)}
.napbox dd{margin:0;font-size:16px;line-height:1.5}
.napbox dd a{border-bottom:1px solid var(--rule);transition:color .25s,border-color .25s}
.napbox dd a:hover{color:var(--accent-text);border-color:var(--accent-text)}
.napbox .social{display:flex;gap:10px;margin-top:26px;padding-top:24px;border-top:1px solid var(--rule);
  flex-wrap:wrap}

/* --- 404 --- */
.nf{min-height:72dvh;display:grid;place-items:center;text-align:center;
  padding-block:clamp(140px,18vh,200px) clamp(64px,9vh,110px)}
.nf .big{font-size:clamp(80px,17vw,200px);font-weight:700;letter-spacing:-.05em;line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px var(--rule)}
.nf h1{margin-top:28px;font-size:var(--t-xl)}
.nf p{margin-top:20px;font-size:17px;color:var(--mut);max-width:48ch;line-height:1.62}
.nf .acts{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* --- revelados --- */
/* titular presente para lectores de pantalla pero invisible en pantalla:
   evita saltos de nivel (h1 -> h3) en las paginas que empiezan por fichas */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.rv{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}.rv[data-d="2"]{transition-delay:.2s}
.rv[data-d="3"]{transition-delay:.3s}.rv[data-d="4"]{transition-delay:.4s}
.st>*{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--i,0) * .09s)}
.st.in>*{opacity:1;transform:none}
.wv{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.wv.in{opacity:1;transform:none}

@media (min-width:1001px){.hero{--hero-cut:206px}}

/* --- responsive --- */
@media (max-width:1000px){
  .nav{display:none}
  .burger{display:flex}
  .hd .lang{margin-left:auto}   /* logo a la izquierda; idioma y menú a la derecha */
  .hd .bar .btn{display:none}
  .hd .bar{height:78px}
  .hd.solid .bar{height:66px}
  .split,.rates,.duo,.vs,.seq li,.map,.form-grid{grid-template-columns:1fr}
  .vs>div+div{border-left:0;border-top:1px solid var(--rule)}
  .split.rev>*:first-child{order:0}
  .seq{grid-template-columns:1fr}
  .seq-rail{display:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .b1{grid-column:span 2;grid-row:span 1}
  .bento .b2{grid-column:span 2}
  .map-card{min-height:0;margin-top:8px}
  .zlist a{grid-template-columns:minmax(0,1fr) auto auto}
  .zlist .p{display:none}
  .gauge{grid-template-columns:1fr}
}
@media (max-width:620px){
  .strip .shell>div{padding:26px 0;border-left:0!important;border-top:1px solid var(--rule)}
  .strip .shell>div:first-child{border-top:0}
  .strip .shell>div+div{padding-left:0}
  .facts>div{padding:20px 0;border-left:0!important;border-top:1px solid var(--rule)}
  .facts>div:first-child{border-top:0}
  .facts>div+div{padding-left:0}
  .bento{grid-template-columns:1fr}
  .bento a{min-height:250px}
  .bento .b1,.bento .b2,.bento .b3,.bento .b4{grid-column:span 1;grid-row:span 1}
  .hero h1{font-size:clamp(44px,12.5vw,70px)}
  .two{grid-template-columns:1fr}
  .ba{max-width:100%}
  .napbox dl>div{grid-template-columns:1fr;gap:5px}
}

/* --- sin JavaScript ---------------------------------------------------------
   Los revelados dependen de un IntersectionObserver. Si el JS no corre —un
   agente que solo lee el HTML, un navegador con el script bloqueado, un error
   de red— nada dispara la clase .in y la pagina se queda en su estado inicial:
   con los titulares y el H1 a opacidad 0. El script del <head> marca <html> con
   la clase js; mientras no este, aqui se devuelve todo a la vista.
   -------------------------------------------------------------------------- */
html:not(.js) .rv,
html:not(.js) .st>*,
html:not(.js) .wv,
html:not(.js) .hero .lede,
html:not(.js) .hero .acts,
html:not(.js) .hero .eyebrow{opacity:1;transform:none}
html:not(.js) .hero h1 .l>span{transform:none}
html:not(.js) .map-stage .draw{stroke-dashoffset:0}
html:not(.js) .gauge .fill{stroke-dashoffset:var(--OFF)}
html:not(.js) .seq li h3{color:var(--fg)}
/* el carrusel de opiniones pasa a ser una lista: sin JS no hay quien lo pase */
html:not(.js) .quotes{min-height:0}
html:not(.js) .qi{position:relative;opacity:1;transform:none;pointer-events:auto}
html:not(.js) .qi + .qi{margin-top:clamp(34px,4.4vh,56px);
  padding-top:clamp(34px,4.4vh,56px);border-top:1px solid var(--rule)}
/* lo que solo tiene sentido con JS no debe ocupar sitio vacio */
html:not(.js) .qnav,
html:not(.js) .map-tools,
html:not(.js) .ba input[type=range]{display:none}

/* --- movimiento reducido --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv,.st>*{opacity:1;transform:none}
  .wv{opacity:1;transform:none}
  .hero h1 .l>span{transform:none}
  .hero .lede,.hero .acts,.hero .eyebrow{opacity:1;transform:none}
  .hero-bg img,.phead .bg img{animation:none;transform:scale(1.02)}
  .figure::after{transform:scaleX(0)}
  .marq .row{animation:none}
  .seq li h3{color:var(--fg)}
  .blu-body{stroke-dashoffset:0!important}
}