@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo.woff2") format("woff2-variations");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}

/* =========================================================
   NAGA · Hoja de estilos única
   Sin dependencias externas. Cambia los tokens de :root
   para adaptar la marca sin tocar nada más.
   ========================================================= */

:root{
  /* Marca — rojo Naga, tono 357°, el mismo que usa nagasc.com hoy.
     Tres valores porque un solo rojo no puede pasar contraste AA
     sobre blanco Y sobre el negro del hero al mismo tiempo. */
  --accent:      #C40D16;   /* sobre fondo claro · 6,15:1 */
  --accent-2:    #FF5A50;   /* sobre fondo oscuro · 6,27:1 */
  --accent-pure: #F6121C;   /* el rojo exacto: rellenos y superficies grandes */
  --accent-dark: #A61D16;   /* hover y pulsado, ya se usa en la web publicada */
  --accent-soft: #FDECEB;

  /* Superficies */
  --night:   #0e0e10;
  --night-2: #17171a;
  --paper:   #ffffff;
  --sand:    #f6f5f2;

  /* Tinta */
  --ink:     #131316;
  --ink-2:   #4a4a52;
  --ink-3:   #6b6b74;   /* 10/10/2026: antes #7c7c86, no llegaba a 4,5:1 */
  --on-night:#ffffff;
  --on-night-2:#b9b9c2;

  /* Líneas */
  --line:      #e4e2dc;
  --line-night:rgba(255,255,255,.14);

  /* Métrica */
  --wrap: 1160px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 28px rgba(0,0,0,.07);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.07), 0 24px 60px rgba(0,0,0,.13);

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Display: la misma familia, estirada al máximo y en peso extremo.
     Es el gesto de marca: ancho, compacto y en mayúsculas. */
  --display-stretch: 118%;
  --display-weight: 830;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2{
  margin:0;font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  text-transform:uppercase;line-height:.94;letter-spacing:-.035em;
  text-wrap:balance
}
h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:750}
h1{font-size:clamp(2.6rem,6.4vw,5.1rem)}
h2{font-size:clamp(2rem,4.2vw,3.3rem)}
h3{font-size:clamp(1.14rem,2vw,1.42rem)}
/* El énfasis del hero, en cursiva óptica: más estrecho y en acento */
h1 em,h2 em{font-style:normal;font-stretch:96%;color:var(--accent-2)}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.narrow{max-width:760px}
section{padding:clamp(56px,8vw,104px) 0}
.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  font-stretch:108%;color:var(--accent);margin:0 0 18px
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:currentColor;flex:none;border-radius:2px
}
.night .eyebrow,.hero .eyebrow{color:var(--accent-2)}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-2);max-width:62ch}
.muted{color:var(--ink-3)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-3)}
.hero .btn-ghost,.night .btn-ghost{color:#fff;border-color:var(--line-night)}
.hero .btn-ghost:hover,.night .btn-ghost:hover{border-color:#fff}
.btn-lg{padding:18px 34px;font-size:1.06rem}
@media(max-width:560px){
  .btn{white-space:normal;text-align:center;line-height:1.25}
  .btn-lg{padding:17px 22px;font-size:1rem}
  .hero-actions .btn,.cta-band .btn{width:100%}
}
.btn-block{width:100%}

/* ---------- Cabecera ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);
}
.hdr{display:flex;align-items:center;gap:18px;min-height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:850;letter-spacing:-.03em;font-size:1.28rem}
.brand .mark{
  width:34px;height:34px;border-radius:9px;background:var(--night);color:#fff;
  display:grid;place-items:center;font-size:.95rem;font-weight:800;letter-spacing:-.04em;flex:none
}
.nav{display:flex;gap:5px;margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;font-size:.93rem;font-weight:600;color:var(--ink-2);
  padding:9px 11px;border-radius:9px
}
.nav a:hover{background:var(--sand);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--sand)}
.nav a{white-space:nowrap}
.nav>.btn{display:none}          /* el CTA del menú solo se ve en móvil */
.hdr .btn{padding:11px 20px;font-size:.94rem}
.burger{
  margin-left:auto;display:none;background:none;border:1.5px solid var(--line);
  border-radius:10px;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center
}
@media(max-width:960px){
  .nav{
    position:absolute;top:70px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:12px 18px 20px;gap:2px
  }
  .nav.open{display:flex}
  .nav a{padding:13px 12px;font-size:1.02rem}
  .nav>.btn{display:inline-flex;margin-top:10px;width:100%}
  .burger{display:flex}
  .hdr>.btn{display:none}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--night);color:var(--on-night);
  padding:clamp(70px,10vw,130px) 0 clamp(60px,8vw,100px);overflow:hidden
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(80% 60% at 78% 8%, rgba(214,67,9,.30), transparent 62%),
    radial-gradient(60% 50% at 8% 95%, rgba(214,67,9,.12), transparent 60%);
  pointer-events:none
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,64px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero .lead{color:var(--on-night-2);margin-top:20px;font-size:clamp(1.06rem,1.8vw,1.26rem)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-media{
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--night-2);
  box-shadow:var(--shadow-lg)
}
.hero-media img{width:100%;height:100%;object-fit:cover}

/* Barra de prueba social bajo el hero */
.proof{background:var(--night-2);color:var(--on-night-2);border-top:1px solid var(--line-night);padding:0}
.proof .wrap{display:grid;grid-template-columns:repeat(4,auto);gap:14px clamp(18px,4vw,44px);
  padding-block:24px;align-items:baseline;justify-content:space-between}
@media(max-width:860px){.proof .wrap{grid-template-columns:1fr 1fr}}
.proof-item{display:flex;align-items:baseline;gap:9px;font-size:.95rem}
.proof-item b{color:#fff;font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.stars{color:#ffb400;letter-spacing:.06em;font-size:1rem}

/* ---------- Bloques ---------- */
.night{background:var(--night);color:var(--on-night)}
.night h2,.night h3{color:#fff}
.night p{color:var(--on-night-2)}
.sand{background:var(--sand)}
.sec-head{max-width:720px;margin-bottom:clamp(30px,4vw,52px)}
.sec-head p:not(.eyebrow){color:var(--ink-2);font-size:1.08rem;margin-top:14px}
.night .sec-head p:not(.eyebrow){color:var(--on-night-2)}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;transition:border-color .15s ease, transform .15s ease
}
.card:hover{border-color:var(--ink-3)}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-2);font-size:.98rem;margin-bottom:0}
.card .num{font-size:12px;font-weight:800;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:12px}
.night .card{background:var(--night-2);border-color:var(--line-night)}
.night .card p{color:var(--on-night-2)}

a.card{text-decoration:none;display:block}
a.card .more{color:var(--accent);font-weight:700;font-size:.95rem;margin-top:16px;display:inline-block}

/* Servicio destacado con imagen */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.split.rev>*:first-child{order:2}
@media(max-width:880px){.split{grid-template-columns:1fr}.split.rev>*:first-child{order:0}}
.shot{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/4;background:var(--sand)}
.shot img{width:100%;height:100%;object-fit:cover}

.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:30px;color:var(--ink-2)}
.night .ticks li{color:var(--on-night-2)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:9px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg)
}

/* ---------- Reseñas ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.reviews{grid-template-columns:1fr}}
.review{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.review .stars{font-size:.95rem;margin-bottom:12px}
.review blockquote{margin:0 0 16px;font-size:1rem;color:var(--ink);line-height:1.6}
.review .who{display:flex;align-items:center;gap:11px;font-size:.9rem;color:var(--ink-3)}
.review .av{width:34px;height:34px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font-weight:800;color:var(--ink-2);font-size:.85rem;flex:none}
.review .who b{color:var(--ink);font-weight:700;display:block;font-size:.95rem}

/* ---------- Tarifas ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;background:var(--paper);position:relative}
.plan.best{border:2px solid var(--accent);box-shadow:var(--shadow)}
.plan .tag{
  position:absolute;top:-13px;left:26px;background:var(--accent);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px
}
.plan h3{margin-bottom:6px}
.plan .price{font-size:2.6rem;font-weight:850;letter-spacing:-.035em;margin:16px 0 2px}
.plan .price small{font-size:.95rem;font-weight:600;color:var(--ink-3);letter-spacing:0}
.plan ul{list-style:none;margin:20px 0 26px;padding:0;display:grid;gap:10px;font-size:.97rem;color:var(--ink-2)}
.plan ul li{position:relative;padding-left:26px}
.plan ul li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}

/* ---------- Horario ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.97rem}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:none}
th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:750;background:var(--sand)}
td b{font-weight:700}

/* ---------- FAQ ---------- */
.faq{max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-weight:700;font-size:1.06rem;color:var(--ink)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:29px;width:11px;height:11px;
  border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(45deg);transition:transform .18s ease
}
.faq details[open] summary::after{transform:rotate(-135deg);top:33px}
.faq .a{padding:0 40px 24px 0;color:var(--ink-2)}
.faq .a p:last-child{margin-bottom:0}

/* ---------- Aaron / instagram ---------- */
.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:880px){.founder{grid-template-columns:1fr}}
.founder .shot{aspect-ratio:1/1;border-radius:var(--r-lg)}
.ig-btn{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-weight:750;
  padding:14px 24px;border-radius:999px;color:#fff;
  background:linear-gradient(96deg,#f09433,#e6683c 26%,#dc2743 52%,#cc2366 76%,#bc1888);
}
.ig-btn svg{width:19px;height:19px;flex:none}

/* ---------- Equipo ---------- */
.coach{text-align:left}
.coach .shot{aspect-ratio:3/4;margin-bottom:16px;border-radius:var(--r)}
.coach h3{font-size:1.16rem;margin-bottom:3px}
.coach .role{color:var(--accent);font-weight:700;font-size:.9rem;margin-bottom:10px}
.coach p{font-size:.95rem;color:var(--ink-2)}

/* ---------- CTA final ---------- */
.cta-band{background:var(--accent-pure);color:#fff}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.9);font-size:1.1rem}
.cta-band .btn-primary{background:#fff;color:var(--accent)}
.cta-band .btn-primary:hover{background:#f3f3f3}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.cta-band .btn-ghost:hover{border-color:#fff}
.cta-inner{display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ---------- Formulario ---------- */
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-weight:700;font-size:.93rem}
.field input,.field select,.field textarea{
  font:inherit;padding:14px 15px;border:1.5px solid var(--line);border-radius:11px;
  background:#fff;color:var(--ink);width:100%
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--ink-3)}
.consent input{width:18px;height:18px;flex:none;margin-top:2px}

/* ---------- Pie ---------- */
.site-footer{background:var(--night);color:var(--on-night-2);padding:64px 0 30px;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:16px;font-weight:750}
.site-footer a{color:var(--on-night-2);text-decoration:none;display:block;padding:5px 0}
.site-footer a:hover{color:#fff}
.site-footer .brand{color:#fff;margin-bottom:14px}
.site-footer .brand .mark{background:#fff;color:var(--night)}
.legal{border-top:1px solid var(--line-night);margin-top:46px;padding-top:22px;display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;font-size:.85rem;color:#7a7a86}

/* La barra pegada al fondo de la pantalla en móvil se quitó el 20/09/2026
   («está fijado el reserva tu clase gratis abajo todo el rato, no lo pongas
   así»). Las llamadas a la acción van en el cuerpo de la página: cada página
   de contenido acaba en una franja con su botón, y el pie lleva otro. Con la
   barra se fueron los cuatro rellenos de body que la compensaban y la
   elevación del aviso de cookies. */

/* ---------- Migas ---------- */
.crumbs{font-size:.86rem;color:var(--ink-3);padding:18px 0 0}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 7px;opacity:.5}

/* ---------- Cabecera interior ---------- */
.page-head{padding:clamp(34px,5vw,60px) 0 clamp(30px,4vw,50px);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2rem,4.6vw,3.2rem);max-width:16ch}
.page-head .lead{margin-top:18px}

/* ---------- Marcador de contenido pendiente ---------- */
.todo{
  background:#fff3c4;color:#6b4e00;border:1px dashed #d9a800;border-radius:7px;
  padding:1px 8px;font-size:.88em;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace
}

/* ---------- Utilidades ---------- */
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt24{margin-top:24px}.mt32{margin-top:32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pill{display:inline-block;background:var(--accent-soft);color:var(--accent-dark);font-weight:700;font-size:.83rem;padding:5px 13px;border-radius:999px}
.night .pill{background:rgba(214,67,9,.18);color:#ff8b5c}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =========================================================
   MOVIMIENTO
   Dos mecanismos y nada más:
   .rv  → aparece al entrar en pantalla (una sola vez)
   .ld  → secuencia de entrada del hero al cargar
   Ambos se desactivan por completo con prefers-reduced-motion.
   ========================================================= */
:root{ --ease:cubic-bezier(.16,1,.3,1) }

.rv{opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.in{opacity:1;transform:none}

/* Entrada del hero: escalonada, se dispara sola al cargar */
.ld{opacity:0;transform:translateY(16px)}
.hero-media.ld{transform:translateY(0) scale(.985)}
html.go .ld{opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.go .ld:nth-child(1){transition-delay:.05s}
html.go .ld:nth-child(2){transition-delay:.14s}
html.go .ld:nth-child(3){transition-delay:.23s}
html.go .ld:nth-child(4){transition-delay:.32s}
html.go .ld:nth-child(5){transition-delay:.41s}
html.go .hero-media.ld{transition-delay:.2s;transition-duration:1.1s}

/* La barra de datos entra por debajo, como un cajón */
.proof .wrap>*{opacity:0;transform:translateY(10px)}
.proof.in .wrap>*{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.proof.in .wrap>*:nth-child(2){transition-delay:.08s}
.proof.in .wrap>*:nth-child(3){transition-delay:.16s}
.proof.in .wrap>*:nth-child(4){transition-delay:.24s}

/* El subrayado del acento se dibuja solo */
.hero h1 em{position:relative;font-style:normal;color:var(--accent-2)}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:-.06em;height:3px;
  background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease) .75s}
html.go .hero h1 em::after{transform:scaleX(1)}

/* Micro-interacciones */
.btn{transition:transform .28s var(--ease),background .28s,border-color .28s,color .28s}
.btn-primary:hover{transform:translateY(-2px)}
.card,.coach,.price-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover,.coach:hover{transform:translateY(-3px)}
.ticks li{transition:transform .3s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .rv,.ld,.proof .wrap>*{opacity:1!important;transform:none!important;transition:none!important}
  .hero h1 em::after{transform:scaleX(1);transition:none}
  .btn,.card,.coach,.ticks li{transition:none}
}

/* =========================================================
   TRATAMIENTO VISUAL
   ========================================================= */

/* ---- Cronómetro de lectura: barra de acento arriba ---- */
.scrollbar{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--accent-pure),var(--accent-2));
  transition:width .1s linear;pointer-events:none
}

/* ---- Titular que se revela línea a línea ---- */
.reveal-lines .ln{display:block;overflow:hidden}
.reveal-lines .ln i{
  display:block;font-style:inherit;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease)
}
html.go .reveal-lines .ln:nth-child(1) i{transition-delay:.12s}
html.go .reveal-lines .ln:nth-child(2) i{transition-delay:.26s}
html.go .reveal-lines .ln i{transform:translateY(0)}

/* ---- Retratos ----
   Reposo: apagado y ligeramente alejado. Encima: color, zoom y credencial. */
.portrait{
  position:relative;aspect-ratio:var(--ar,1/1);overflow:hidden;
  border-radius:var(--r-lg);isolation:isolate;
  background:var(--night)
}
.portrait .shot{
  aspect-ratio:var(--ar,1/1);height:100%;border-radius:0;
  transform:scale(1.01);
  filter:grayscale(.72) contrast(1.08) brightness(.82);
  transition:transform 1.1s var(--ease),filter .7s var(--ease)
}
.portrait::after{           /* velo de marca que se retira */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(200deg,rgba(196,13,22,.40),rgba(14,14,16,.64));
  mix-blend-mode:multiply;opacity:1;
  transition:opacity .7s var(--ease)
}
.portrait::before{          /* marco de acento que se dibuja */
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border:2px solid var(--accent);border-radius:inherit;
  clip-path:inset(0 100% 100% 0);
  transition:clip-path .75s var(--ease)
}
.portrait:hover .shot,.portrait:focus-within .shot{
  transform:scale(1.075);filter:grayscale(0) contrast(1.02) brightness(1)
}
.portrait:hover::after,.portrait:focus-within::after{opacity:0}
.portrait:hover::before,.portrait:focus-within::before{clip-path:inset(0)}

/* Credencial: sube desde abajo */
.portrait .cred{
  position:absolute;left:14px;bottom:14px;z-index:4;
  background:var(--accent);color:#fff;
  font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;white-space:nowrap;
  transform:translateY(calc(100% + 22px));opacity:0;
  transition:transform .6s var(--ease),opacity .45s var(--ease)
}
.portrait:hover .cred,.portrait:focus-within .cred{transform:none;opacity:1}
.portrait-lg .cred{font-size:.78rem;padding:10px 18px;left:18px;bottom:18px}

/* El retrato del fundador se inclina un pelín, y se endereza al mirarlo */
.founder .portrait-lg{
  transform:rotate(-1.4deg);
  transition:transform .8s var(--ease),box-shadow .8s var(--ease);
  box-shadow:0 18px 50px rgba(14,14,16,.16)
}
.founder .portrait-lg:hover{transform:rotate(0) translateY(-6px);
  box-shadow:0 28px 70px rgba(196,13,22,.28)}

/* ---- Tarjetas: barrido de acento ---- */
.card{position:relative;overflow:hidden}
.card::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)
}
.card:hover::before{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  .reveal-lines .ln i{transform:none;transition:none}
  .portrait .shot{filter:none;transform:none;transition:none}
  .portrait::after{opacity:0}
  .portrait::before{clip-path:inset(0)}
  .portrait .cred{transform:none;opacity:1;transition:none}
  .founder .portrait-lg{transform:none}
  .scrollbar{display:none}
}

/* =========================================================
   PASE DE ACABADO
   ========================================================= */

/* ---- Cabecera que se compacta al bajar ---- */
.site-header{transition:min-height .4s var(--ease),box-shadow .4s var(--ease),
  background .4s var(--ease)}
.hdr{transition:min-height .4s var(--ease)}
html.scrolled .hdr{min-height:58px}
html.scrolled .site-header{
  background:rgba(255,255,255,.86);
  box-shadow:0 1px 0 var(--line),0 10px 30px rgba(14,14,16,.07)
}
html.scrolled .brand{font-size:1.14rem}
html.scrolled .brand .mark{width:29px;height:29px;border-radius:8px;font-size:.85rem}
.brand,.brand .mark{transition:font-size .4s var(--ease),width .4s var(--ease),
  height .4s var(--ease)}

/* ---- Grano: quita el plano digital de las zonas oscuras ---- */
.hero::before,.night::before,.cta-band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")
}
.night,.cta-band{position:relative}
.night>.wrap,.cta-band>.wrap,.hero>.wrap{position:relative;z-index:1}

/* ---- Cinta de datos ----
   Cuatro cifras, separadas por filete. La cifra manda, la etiqueta acompaña. */
.proof .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding-block:clamp(30px,4vw,44px)
}
.proof-item{
  display:block;padding-inline:clamp(16px,2.6vw,34px);
  border-left:1px solid var(--line-night)
}
.proof-item:first-child{border-left:0;padding-left:0}
.proof-item .stars{
  display:block;color:#ffc400;font-size:1rem;letter-spacing:.14em;
  margin-bottom:6px;line-height:1
}
.proof-item b{
  display:block;color:#fff;
  font-size:clamp(2rem,3.9vw,3.1rem);font-weight:860;font-stretch:114%;
  letter-spacing:-.04em;line-height:.92;margin-bottom:11px
}
.proof-item b em{
  font-style:normal;font-stretch:96%;font-weight:800;
  font-size:.62em;letter-spacing:-.02em
}
.proof-item .lbl{
  display:block;font-size:.86rem;line-height:1.4;
  color:var(--on-night-2);max-width:19ch
}

@media(max-width:860px){
  .proof .wrap{grid-template-columns:1fr 1fr;gap:26px 0}
  .proof-item:nth-child(odd){border-left:0;padding-left:0}
}
@media(max-width:420px){
  .proof-item b{font-size:1.9rem}
  .proof-item .lbl{font-size:.8rem}
}

/* Variante de tres cifras (los m² de Instalaciones). En móvil van 2+1 y la
   tercera, al ser impar, ya pierde el filete por la regla de arriba. */
.proof-3 .wrap{grid-template-columns:repeat(3,1fr)}
.proof-3 .proof-item .lbl{max-width:24ch}
@media(max-width:860px){.proof-3 .wrap{grid-template-columns:1fr 1fr}}

/* ---- Pasos numerados: aquí el orden sí es información ---- */
.steps{counter-reset:paso}
.steps>*{counter-increment:paso;position:relative}
.steps>*::before{
  content:counter(paso,decimal-leading-zero);
  display:block;font-size:.82rem;font-weight:850;font-stretch:112%;
  letter-spacing:.08em;color:var(--accent);margin-bottom:12px
}

/* ---- Botones: más presencia ---- */
.btn{font-weight:750;letter-spacing:-.01em}
.btn-lg{padding:17px 30px;font-size:1.02rem}
.btn-primary{box-shadow:0 6px 20px rgba(196,13,22,.30)}
.btn-primary:hover{box-shadow:0 12px 32px rgba(196,13,22,.42)}

/* ---- Enlaces del menú: subrayado que crece ---- */
.nav a{position:relative}
.nav a::after{
  content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:hover,.nav a[aria-current="page"]{background:none;color:var(--ink)}

/* ---- Filete de acento al inicio de cada sección clara ---- */
.sec-head{position:relative}

@media(max-width:640px){
  h1{letter-spacing:-.03em}
  .proof .wrap{grid-template-columns:1fr 1fr;gap:22px}
}
@media(prefers-reduced-motion:reduce){
  .site-header,.hdr,.brand,.brand .mark,.nav a::after{transition:none}
}

/* =========================================================
   COMPONENTES NUEVOS
   Regla de oro del responsive: nada con ancho fijo,
   todo con minmax() o clamp(), y min-width:0 en los hijos
   de grid para que el texto largo no reviente la caja.
   ========================================================= */

/* ---------- Desplegables (tarifas, titulaciones) ---------- */
.serv-mas{
  position:relative;width:20px;height:20px;flex:none;margin-left:auto;
  transition:transform .4s var(--ease)
}
.serv-mas::before,.serv-mas::after{
  content:"";position:absolute;top:50%;left:50%;background:currentColor;
  border-radius:2px;transform:translate(-50%,-50%)
}
.serv-mas::before{width:14px;height:2px}
.serv-mas::after{width:2px;height:14px;transition:transform .4s var(--ease),opacity .3s}
details[open] .serv-mas{transform:rotate(180deg)}
details[open] .serv-mas::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

@keyframes abrir{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
details[open] > *:not(summary){animation:abrir .42s var(--ease)}

/* ---------- Bonos ---------- */
.plans{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))
}
.plan{
  position:relative;min-width:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s
}
.plan:hover{transform:translateY(-6px);box-shadow:0 22px 54px rgba(14,14,16,.10)}
.plan.best{border-color:var(--accent);box-shadow:0 12px 40px rgba(196,13,22,.13)}
.plan.best:hover{box-shadow:0 26px 64px rgba(196,13,22,.20)}
.plan .tag{
  position:absolute;top:-13px;left:clamp(24px,3vw,34px);
  background:var(--accent-pure);color:#fff;font-size:.74rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;padding:6px 14px;border-radius:999px
}
.plan h3{margin-bottom:6px}
.plan-hook{color:var(--muted);font-size:.94rem;margin:0 0 20px}
.price{display:flex;align-items:baseline;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.price b{
  font-size:clamp(2.7rem,5.5vw,3.6rem);font-weight:860;font-stretch:114%;
  letter-spacing:-.045em;line-height:.9;color:var(--ink)
}
.price span{color:var(--muted);font-size:.94rem;font-weight:600}
.plan .ticks{margin:0 0 26px;flex:1}
.plan-foot{margin:14px 0 0;font-size:.82rem;color:var(--muted);text-align:center}
.plan-ask{background:var(--sand);border-style:dashed}

/* ---------- Servicios uno a uno ---------- */
.servs{display:grid;gap:12px}
.serv{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color .35s,box-shadow .35s var(--ease)
}
.serv:hover{border-color:#cfc9bd;box-shadow:0 10px 30px rgba(14,14,16,.06)}
.serv[open]{border-color:var(--accent);box-shadow:0 14px 40px rgba(196,13,22,.10)}
.serv > summary{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:clamp(17px,2.2vw,23px) clamp(18px,2.4vw,26px);
  color:var(--ink)
}
.serv-nom{font-weight:750;font-size:clamp(1rem,1.7vw,1.16rem);letter-spacing:-.015em;
  min-width:0;flex:1 1 auto}
.serv-precio{
  font-weight:860;font-stretch:110%;color:var(--accent);
  font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.02em;white-space:nowrap
}
.serv-precio small{font-size:.62em;font-weight:600;color:var(--muted);
  font-stretch:100%;letter-spacing:0}
.serv-cuerpo{padding:0 clamp(18px,2.4vw,26px) clamp(22px,2.6vw,28px)}
.serv-res{margin:0 0 16px;color:var(--muted)}
.serv-cuerpo .ticks{margin-bottom:20px}
.serv-nota{
  font-size:.87rem;color:var(--muted);background:var(--sand);
  border-left:3px solid var(--accent);padding:11px 15px;border-radius:0 8px 8px 0;
  margin:0 0 20px
}

.nota-pago{
  margin-top:26px;background:var(--sand);border-radius:var(--r-lg);
  border:1px solid var(--line)
}
.nota-pago > summary{
  display:flex;align-items:center;gap:14px;padding:18px 22px;font-weight:700;color:var(--ink)
}
.nota-pago-cuerpo{padding:0 22px 24px}

/* ---------- Chips de servicios extra ---------- */
.chips{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.chip{
  min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;transition:transform .4s var(--ease),border-color .4s
}
.chip:hover{transform:translateY(-4px);border-color:var(--accent)}
.chip b{display:block;margin-bottom:6px;font-size:1.04rem;letter-spacing:-.015em}
.chip span{color:var(--muted);font-size:.9rem}

/* ---------- Equipo ---------- */

/* ---- Caras del equipo ----
   Dos grupos independientes (Aarón e Iván arriba; el resto debajo), cada uno
   con su fila de caras y su ficha. Se pulsa una cara y se abre SU ficha.
   El rótulo «Ver perfil» y el aclarado al pasar por encima están para que se
   vea que son pulsables: el cliente creía que solo había información del
   primero (22/09/2026). */
.caras{
  display:grid;gap:14px;margin-bottom:34px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))
}
.equipo + .equipo{margin-top:clamp(40px,5vw,64px)}
.cara{
  min-width:0;background:none;border:0;padding:0;cursor:pointer;text-align:left;
  display:block;border-radius:var(--r-lg);overflow:hidden;position:relative;
  transition:transform .45s var(--ease)
}
.cara .portrait{border-radius:var(--r-lg)}
.cara:hover{transform:translateY(-5px)}
.cara-txt{
  position:absolute;left:0;right:0;bottom:0;z-index:5;padding:34px 18px 16px;
  background:linear-gradient(transparent,rgba(10,10,12,.88));color:#fff;
  display:block;pointer-events:none
}
.cara-txt b{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.cara-txt small{font-size:.79rem;opacity:.82}
.cara-mas{
  position:absolute;top:10px;right:10px;z-index:6;pointer-events:none;
  background:rgba(10,10,12,.72);color:#fff;border-radius:999px;
  padding:6px 12px;font-size:.72rem;font-weight:750;letter-spacing:.01em;
  opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s
}
.cara:not(.is-on) .cara-mas{opacity:1;transform:none}
.cara.is-on .portrait::before{clip-path:inset(0)}
.cara.is-on .portrait .shot{filter:grayscale(0) brightness(1)}
.cara.is-on .portrait::after{opacity:0}
.cara:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.fichas{position:relative}
/* Aarón e Iván, con la foto más grande: dirigen el box. */
.ficha-jefe{--foto:360px}
@media(max-width:1080px){.ficha-jefe{--foto:300px}}
.ficha{
  display:grid;gap:clamp(24px,3.5vw,44px);align-items:start;
  grid-template-columns:minmax(0,var(--foto,300px)) minmax(0,1fr)
}
.ficha[hidden]{display:none}
@keyframes entra-lat{
  from{opacity:0;transform:translateX(26px)}
  to{opacity:1;transform:none}
}
@keyframes entra-foto{
  from{opacity:0;transform:translateX(-22px)}
  to{opacity:1;transform:none}
}
.ficha.is-on .ficha-foto{animation:entra-foto .55s var(--ease) both}
.ficha.is-on .ficha-txt{animation:entra-lat .55s var(--ease) .08s both}
.ficha-foto{min-width:0}
.ficha-foto .portrait{border-radius:var(--r-lg)}
.ficha-foto .portrait .shot{filter:none}
.ficha-foto .portrait::after{opacity:0}
.ficha-foto .portrait::before{clip-path:inset(0)}
.ficha-txt{min-width:0}
.ficha-txt h3{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:16px;
  font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  text-transform:uppercase;letter-spacing:-.035em}
.ficha-txt p{margin-bottom:14px}

.titus{
  margin:24px 0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--sand)
}
.titus > summary{
  display:flex;align-items:center;gap:12px;padding:15px 20px;
  font-weight:700;font-size:.94rem;color:var(--ink)
}
.titus ul{
  margin:0;padding:0 20px 22px;list-style:none;
  display:grid;gap:9px
}
.titus li{
  font-size:.87rem;color:var(--muted);line-height:1.45;
  padding-left:17px;position:relative
}
.titus li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--accent)
}

/* ---------- Horarios ---------- */
.slot{
  display:inline-block;font-size:.74rem;font-weight:750;letter-spacing:.01em;
  padding:5px 10px;border-radius:7px;white-space:nowrap
}
.c-cross{background:var(--accent-pure);color:#fff}
.c-cross2{background:var(--accent-dark);color:#fff}
.c-open{background:#EDE9E1;color:#4a4a52}
.semana{width:100%;border-collapse:collapse;font-size:.9rem}
.semana th,.semana td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:center}
.semana thead th{
  font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:800;border-bottom:2px solid var(--line)
}
.semana tbody th{
  font-weight:800;color:var(--ink);text-align:left;white-space:nowrap;font-size:.86rem
}
.semana tbody tr:hover{background:var(--sand)}

.dias-tabs{display:none;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.dia-tab{
  flex:1 1 auto;min-width:0;background:var(--sand);border:1px solid var(--line);
  border-radius:10px;padding:11px 4px;font:750 .84rem/1 var(--sans);color:var(--muted);
  cursor:pointer;transition:background .3s,color .3s,border-color .3s
}
.dia-tab.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.dias-listas{display:none}
.dia-lista{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.dia-lista[hidden]{display:none}
.dia-lista li{
  display:flex;align-items:center;gap:14px;
  padding:12px 15px;background:#fff;border:1px solid var(--line);border-radius:11px
}
.dia-hora{font-weight:800;font-size:.92rem;min-width:52px;flex:none}
.dia-cerrado{justify-content:center;color:var(--muted)}

.leyenda{display:grid;gap:11px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.leg{display:flex;align-items:center;gap:11px;min-width:0}
.leg > span:last-child{font-size:.85rem;color:var(--muted);min-width:0}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:900px){
  .caras{grid-template-columns:repeat(auto-fit,minmax(min(45%,150px),1fr));gap:10px}
  .cara-txt{padding:26px 12px 12px}
  .cara-txt b{font-size:.97rem}
  .cara-txt small{font-size:.75rem}
  .ficha{grid-template-columns:1fr;gap:22px}
  .ficha-foto{max-width:290px}
  .ficha.is-on .ficha-foto,.ficha.is-on .ficha-txt{animation-name:abrir}
}
@media(max-width:780px){
  .tabla-semana{display:none}
  .dias-tabs,.dias-listas{display:flex;flex-direction:column}
  .dias-tabs{flex-direction:row}
}
@media(max-width:520px){
  .serv > summary{gap:8px}
  .serv-nom{flex:1 1 100%}
  .serv-precio{font-size:1.24rem}
  .titus ul{padding-inline:16px}
  .titus li{font-size:.83rem}
  .plan{padding:24px 20px}
  .price b{font-size:2.9rem}
  .dia-lista li{padding:11px 12px;gap:10px}
  .dia-hora{min-width:46px;font-size:.86rem}
  .slot{font-size:.7rem;padding:4px 8px}
}
@media(prefers-reduced-motion:reduce){
  .plan,.chip,.cara,.serv{transition:none}
  .ficha.is-on .ficha-foto,.ficha.is-on .ficha-txt,details[open] > *:not(summary){animation:none}
  .serv-mas{transition:none}
}

/* ---------- Recorrido en pasos (entrenamiento personal) ---------- */
.ruta{list-style:none;margin:0;padding:0;position:relative;counter-reset:r}
/* Raíl por tramos: cada paso pinta el tramo hasta el círculo del siguiente, así la línea
   termina justo en el último círculo (10/10/2026; antes seguía por debajo de su texto). */
.paso:not(:last-child)::before,.paso:not(:last-child)::after{
  content:"";position:absolute;left:23px;top:24px;bottom:-24px;width:2px;z-index:1
}
.paso:not(:last-child)::before{background:var(--line)}
.paso:not(:last-child)::after{
  background:linear-gradient(var(--accent-pure),var(--accent-dark));
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)
}
.ruta.in .paso::after{transform:scaleY(1)}
.ruta.in .paso:nth-child(1)::after{transition-delay:.2s}
.ruta.in .paso:nth-child(2)::after{transition-delay:.55s}
.ruta.in .paso:nth-child(3)::after{transition-delay:.9s}
.ruta.in .paso:nth-child(4)::after{transition-delay:1.25s}
.ruta.in .paso:nth-child(n+5)::after{transition-delay:1.6s}
.paso{
  position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);
  gap:clamp(16px,2.4vw,26px);align-items:start;
  padding:0 0 clamp(26px,3.4vw,38px)
}
.paso:last-child{padding-bottom:0}
.paso-n{
  position:relative;z-index:2;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:#fff;border:2px solid var(--line);color:var(--muted);
  font-weight:850;font-size:.92rem;letter-spacing:-.01em;
  transition:background .5s var(--ease),color .5s,border-color .5s,transform .5s var(--ease)
}
.paso:hover .paso-n,.paso:focus-within .paso-n{
  background:var(--accent-pure);border-color:var(--accent-pure);color:#fff;
  transform:scale(1.12)
}
.paso-txt{min-width:0;padding-top:9px}
.paso-txt h3{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px;
  font-size:clamp(1.1rem,1.9vw,1.34rem)
}
.paso-eur{
  font-size:.76rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  background:var(--accent-soft);color:var(--accent);
  padding:5px 11px;border-radius:999px;font-stretch:100%;text-transform:none
}
.paso-txt p{margin:0;color:var(--muted)}
.night .paso-n{background:var(--night);border-color:var(--line-night);color:var(--on-night-2)}
.night .paso:not(:last-child)::before{background:var(--line-night)}

@media(max-width:520px){
  .paso{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .paso-n{width:40px;height:40px;font-size:.84rem}
  .paso:not(:last-child)::before,.paso:not(:last-child)::after{left:19px;top:20px;bottom:-20px}
  .paso-txt{padding-top:6px}
}
@media(prefers-reduced-motion:reduce){
  .paso::after{transform:none!important;transition:none}
  .paso-n{transition:none}
}

/* =========================================================
   PASE MÓVIL
   La versión móvil NO es la de escritorio encogida.
   Se recorta contenido, se cambian layouts y se prioriza
   lo que convierte: llamar, escribir, ver precios.
   ========================================================= */

/* ---------- Cinta de datos: cuatro columnas alineadas ---------- */
.proof .wrap{align-items:stretch}
.proof-item{display:flex;flex-direction:column}
.proof-item .stars{min-height:1.15rem;margin-bottom:8px}
.proof-item .stars:empty{visibility:hidden}
.proof-item b{margin-top:0;margin-bottom:auto;padding-bottom:11px}
.proof-item .lbl{margin-top:0}

/* ------ Botones de WhatsApp: verde al acercarse (ratón) / al pulsar (móvil) ------ */
.btn.wa{position:relative;overflow:hidden;isolation:isolate}
.btn.wa::before{
  content:"";position:absolute;inset:0;z-index:-1;background:#25D366;
  opacity:0;transition:opacity .45s var(--ease)
}
/* Escritorio: igual que siempre. Verde al pasar el ratón, al enfocar con el
   teclado y con la clase wa-on que pone el observador al entrar en pantalla. */
@media(min-width:1081px){
  .btn.wa:hover,.btn.wa:focus-visible,.btn.wa.wa-on{
    border-color:#25D366;color:#fff
  }
  .btn.wa:hover::before,.btn.wa:focus-visible::before,.btn.wa.wa-on::before{opacity:1}
  .btn.wa:hover,.btn.wa.wa-on{box-shadow:0 8px 26px rgba(37,211,102,.34)}
}
/* Móvil: ROJO siempre, verde solo mientras el dedo está encima (Adrián,
   20/09/2026). Sin ratón, el wa-on del observador y el :hover que se queda
   pegado tras tocar dejaban todos los botones verdes para siempre: aquí
   sencillamente no se declaran. El verde entra rápido para que dé tiempo a
   verse antes de saltar a WhatsApp. */
@media(max-width:1080px){
  .btn.wa{-webkit-tap-highlight-color:transparent}
  .btn.wa:active{border-color:#25D366;color:#fff;box-shadow:0 8px 26px rgba(37,211,102,.34)}
  .btn.wa:active::before{opacity:1;transition:opacity .06s linear}
  .btn.wa:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
}

/* ---------- Pie ---------- */
.foot-rating{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  text-decoration:none;color:var(--on-night-2);font-size:.9rem;
  padding:8px 13px;border:1px solid var(--line-night);border-radius:999px;
  transition:border-color .35s,color .35s,background .35s
}
.foot-rating:hover{border-color:var(--accent-2);color:#fff;background:rgba(255,255,255,.04)}
.foot-rating b{color:#fff;font-weight:800}
.foot-redes{display:flex;gap:10px;margin-top:16px}
.foot-redes a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line-night);color:var(--on-night-2);
  transition:border-color .3s,color .3s,transform .3s var(--ease)
}
.foot-redes a:hover{border-color:var(--accent-2);color:#fff;transform:translateY(-2px)}
.foot-redes svg{width:18px;height:18px}
.legal{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:40px;padding-top:24px;border-top:1px solid var(--line-night)
}
.legal-copy{margin:0;font-size:.8rem;color:var(--on-night-2);line-height:1.5}
.legal-nav{display:flex;gap:8px;flex-wrap:wrap}
.legal-nav a{
  font-size:.8rem;color:var(--on-night-2);text-decoration:none;
  padding:7px 13px;border:1px solid var(--line-night);border-radius:999px;
  transition:border-color .3s,color .3s;white-space:nowrap
}
.legal-nav a:hover{border-color:var(--accent-2);color:#fff}

/* ---------- Reseñas: ver más ---------- */
.rev-acciones{display:flex;gap:10px;flex-wrap:wrap}
.ver-mas-rev{display:none}

/* =========================================================
   ≤ 900 px — TABLET Y MÓVIL
   ========================================================= */
@media(max-width:900px){
  /* Solo hamburguesa: los enlaces sueltos no caben y se ven mal */
  .nav{
    position:fixed;inset:0 0 auto;top:0;z-index:120;
    display:block;flex-direction:column;
    background:var(--night);padding:86px 22px 34px;
    transform:translateY(-102%);transition:transform .45s var(--ease);
    max-height:100dvh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.4)
  }
  .nav.open{transform:none}
  .nav a{
    display:block;color:#fff;font-size:1.18rem;font-weight:750;letter-spacing:-.02em;
    padding:15px 4px;border-bottom:1px solid var(--line-night)
  }
  .nav a::after{display:none}
  .nav a:hover,.nav a[aria-current="page"]{color:var(--accent-2)}
  .nav .btn{
    margin-top:20px;width:100%;justify-content:center;border-bottom:0;
    font-size:1rem;padding:15px 20px
  }
}

/* =========================================================
   ≤ 640 px — MÓVIL
   ========================================================= */
@media(max-width:640px){
  /* Márgenes: la miga de pan y los títulos iban pegados al borde */
  .wrap{padding-inline:20px}
  .page-head .wrap,.hero .wrap{padding-inline:20px}

  /* Cinta de datos: 2×2 con separadores limpios */
  .proof .wrap{grid-template-columns:1fr 1fr;gap:24px 16px;padding-block:30px}
  .proof-item{border-left:0;padding-inline:0}
  .proof-item:nth-child(even){padding-left:16px;border-left:1px solid var(--line-night)}
  .proof-item b{font-size:1.85rem;padding-bottom:7px}
  .proof-item .lbl{font-size:.76rem;max-width:none}
  .proof-item .stars{font-size:.82rem;min-height:0;margin-bottom:5px}
  .proof-item .stars:empty{display:none}

  /* Reseñas: solo dos, el resto bajo demanda */
  .reviews{grid-template-columns:1fr;gap:14px}
  [data-reviews] .review[data-n="2"],
  [data-reviews] .review[data-n="3"],
  [data-reviews] .review[data-n="4"],
  [data-reviews] .review[data-n="5"]{display:none}
  [data-reviews].todas .review{display:block}
  .ver-mas-rev{display:inline-flex}
  .rev-acciones .btn{flex:1 1 100%;justify-content:center}

  /* Tarjetas en columna: en móvil nunca en rejilla estrecha */
  .grid,.g2,.g3,.g4,.cards{grid-template-columns:1fr!important}

  /* Pie */
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .legal{flex-direction:column;align-items:flex-start;gap:14px}
  .legal-nav{width:100%}
  .legal-nav a{flex:1 1 auto;text-align:center}
}

/* =========================================================
   COMPONENTES DE ESTA TANDA
   ========================================================= */

/* ---------- Cabecera de página con foto ---------- */
.ph-grid{
  display:grid;gap:clamp(26px,4vw,56px);align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)
}
.ph-foto{min-width:0}
.ph-foto .shot{border-radius:var(--r-lg)}
.precio-suelto{
  display:flex;align-items:baseline;gap:10px;margin:26px 0 0;flex-wrap:wrap
}
.precio-suelto b{
  font-size:clamp(2.4rem,4.4vw,3.2rem);font-weight:860;font-stretch:114%;
  letter-spacing:-.045em;line-height:.9;color:var(--accent)
}
.precio-suelto span{color:var(--muted);font-weight:600}

/* ---------- Línea de tiempo horizontal ---------- */
.linea{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0
}
.linea::before{
  content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--line)
}
.linea::after{
  content:"";position:absolute;left:0;top:19px;height:2px;width:0;
  background:linear-gradient(90deg,var(--accent-pure),var(--accent-dark));
  transition:width 1.5s var(--ease) .2s
}
.linea.in::after{width:100%}
.linea li{position:relative;padding:0 clamp(10px,1.6vw,20px) 0 0;min-width:0}
.linea li::before{
  content:"";position:absolute;left:0;top:12px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);z-index:2
}
.linea-t{
  display:block;margin:48px 0 9px;font-size:.74rem;font-weight:850;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent)
}
.linea h3{font-size:clamp(1rem,1.6vw,1.2rem);margin-bottom:7px}
.linea p{margin:0;font-size:.92rem;color:var(--muted)}

/* ---------- Ticks con vida ---------- */
.ticks-vivos li{
  transition:transform .32s var(--ease),color .32s;transform-origin:left center;cursor:default
}
.ticks-vivos li:hover{transform:translateX(5px)}

/* ---------- Tarjetas que abren detalle ---------- */
.card-abre{
  text-align:left;font:inherit;cursor:pointer;width:100%;
  display:flex;flex-direction:column;gap:0;border:1px solid var(--line-night)
}
.card-abre .card-mas{
  margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;
  color:var(--accent-2);font-weight:750;font-size:.88rem
}
.card-abre .card-mas::after{content:"→";transition:transform .35s var(--ease)}
.card-abre:hover .card-mas::after{transform:translateX(5px)}
.card-abre:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  padding:20px;background:rgba(10,10,12,.72);backdrop-filter:blur(3px);
  animation:velo .3s var(--ease)
}
.modal[hidden]{display:none}
@keyframes velo{from{opacity:0}to{opacity:1}}
@keyframes sube{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
.modal-caja{
  position:relative;background:#fff;border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,40px);max-width:620px;width:100%;
  max-height:88dvh;overflow-y:auto;animation:sube .42s var(--ease)
}
.modal-caja h3{
  font-size:clamp(1.5rem,3vw,2rem);margin-bottom:14px;
  font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  text-transform:uppercase;letter-spacing:-.035em
}
.modal-caja .ticks{margin:18px 0}
.modal-pie{
  background:var(--sand);border-left:3px solid var(--accent);
  padding:13px 17px;border-radius:0 8px 8px 0;margin:20px 0;font-size:.92rem
}
.modal-x{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--line);background:#fff;font-size:1.5rem;line-height:1;
  color:var(--muted);cursor:pointer;transition:background .25s,color .25s
}
.modal-x:hover{background:var(--sand);color:var(--ink)}

/* ---------- Carrusel ---------- */
.carrusel{position:relative}
.carrusel-pista{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:8px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent
}
.carrusel-pista::-webkit-scrollbar{height:6px}
.carrusel-pista::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.carrusel-pista figure{
  margin:0;flex:0 0 clamp(240px,32%,360px);scroll-snap-align:start;min-width:0
}
.carrusel-pista .shot{border-radius:var(--r-lg)}
.carrusel-pista figcaption{
  margin-top:11px;font-size:.86rem;color:var(--muted);line-height:1.45
}
.carrusel-btns{display:flex;gap:8px;margin-top:16px}
.carrusel-btns button{
  width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:#fff;font-size:1.5rem;line-height:1;color:var(--ink);cursor:pointer;
  transition:background .25s,border-color .25s,transform .25s var(--ease)
}
.carrusel-btns button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.carrusel-btns button:active{transform:scale(.94)}

/* ---------- Caja de precio destacada ---------- */
.precio-caja{
  background:rgba(255,255,255,.05);border:1px solid var(--line-night);
  border-radius:var(--r-lg);padding:clamp(26px,3vw,36px);align-self:start
}
.precio-caja .price b{color:#fff}
.precio-caja .price span{color:var(--on-night-2)}
.precio-caja .muted{color:var(--on-night-2);font-size:.9rem;margin-bottom:22px}
.precio-caja .plan-foot{color:var(--on-night-2)}

/* ---------- Botones dentro de una respuesta de FAQ ---------- */
.faq-cta{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 0}

/* =========================================================
   RESPONSIVE DE ESTA TANDA
   ========================================================= */
@media(max-width:900px){
  .ph-grid{grid-template-columns:1fr;gap:28px}
  .ph-foto{max-width:420px}
  .linea{grid-template-columns:1fr 1fr;gap:26px 18px}
  .linea::before,.linea::after{display:none}
  .linea li{padding-right:0;padding-left:26px}
  .linea li::before{top:5px;width:13px;height:13px}
  .linea-t{margin-top:0}
}
@media(max-width:640px){
  .ph-foto{max-width:none}
  .linea{grid-template-columns:1fr;gap:20px}
  .carrusel-pista figure{flex:0 0 78%}
  .modal{padding:14px;align-items:end}
  .modal-caja{max-height:84dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;
    animation-name:sube}
  .faq-cta .btn{flex:1 1 100%;justify-content:center}
  .precio-suelto b{font-size:2.4rem}
}
@media(prefers-reduced-motion:reduce){
  .linea::after{width:100%;transition:none}
  .ticks-vivos li,.card-abre .card-mas::after{transition:none}
  .modal,.modal-caja{animation:none}
  .carrusel-pista{scroll-behavior:auto}
}

/* =========================================================
   AJUSTES FINOS
   ========================================================= */

/* Hamburguesa: tres rayas limpias, sin restos del estilo anterior */

/* Cinta de datos: subrejilla para que las tres líneas casen entre columnas */
.proof .wrap{grid-auto-rows:auto}
.proof-item{
  display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0;align-content:start
}
@supports not (grid-template-rows:subgrid){
  .proof-item{display:flex;flex-direction:column}
  .proof-item .stars{min-height:1.2rem}
}
.proof-item .stars{margin:0 0 9px;align-self:end}
.proof-item b{margin:0 0 10px}
.proof-item .lbl{margin:0;align-self:start}

@media(max-width:640px){
  /* mantener el hueco de las estrellas para que las cifras queden a la misma altura */
  .proof-item .stars:empty{display:block;visibility:hidden;min-height:.9rem}
  .proof-item .stars{margin-bottom:6px}

  /* En móvil la foto del hero sube: engancha antes que el botón.
     El contenedor real es .hero-grid, no .wrap. */
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero-grid > div:first-child{display:contents}
  .hero .pill{order:1}
  .hero h1{order:2;margin-top:18px}
  .hero .lead{order:3}
  .hero-media{order:4;margin:24px 0 0}
  .hero-actions{order:5;margin-top:26px}
  .hero-grid > div:first-child > p:last-child{order:6;margin-top:16px}
}


/* =========================================================
   HAMBURGUESA — versión definitiva
   Rayas en posición absoluta: la X se forma siempre igual,
   independientemente del layout del botón.
   ========================================================= */
.burger{position:relative;display:none;padding:0;
  width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:#fff;cursor:pointer;z-index:130}
.burger span{
  position:absolute;left:50%;width:19px;height:2px;margin:0;
  background:var(--ink);border-radius:2px;
  transform:translateX(-50%);
  transition:top .3s var(--ease),transform .35s var(--ease) .05s,opacity .2s var(--ease)
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:28px}

.burger[aria-expanded="true"],.burger.guino{background:var(--night);border-color:var(--night)}
.burger[aria-expanded="true"] span,.burger.guino span{background:#fff}
.burger[aria-expanded="true"] span:nth-child(1),
.burger.guino span:nth-child(1){top:21px;transform:translateX(-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2),
.burger.guino span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3),
.burger.guino span:nth-child(3){top:21px;transform:translateX(-50%) rotate(-45deg)}

/* La cabecera se queda por encima del panel: el logo nunca desaparece */
.site-header{z-index:140}
@media(max-width:900px){
  .burger{display:block!important}
  .nav{padding-top:96px;z-index:120}
  .nav .brand-mini{display:none}
}
@media(min-width:901px){ .burger{display:none!important} }
@media(prefers-reduced-motion:reduce){ .burger span{transition:none} }

/* La miga de pan comparte el margen del contenido, no se pega al borde */
.crumbs.wrap{padding-inline:var(--gut,24px)}
@media(max-width:640px){
  .crumbs.wrap{padding-inline:20px;padding-top:14px;font-size:.8rem}
  .crumbs span{margin:0 5px}
}

/* =========================================================
   RESULTADOS
   ========================================================= */

/* ---------- Palmarés ---------- */
.palmares{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))
}
.palm{
  min-width:0;position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);border:1px solid var(--line-night);
  transition:transform .5s var(--ease),border-color .5s
}
.palm:hover{transform:translateY(-7px);border-color:var(--accent-2)}
.palm-foto{position:relative;overflow:hidden}
.palm-foto .shot{border-radius:0}
.palm-foto img{transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.palm:hover .palm-foto img{transform:scale(1.07)}
.palm-txt{padding:22px 24px 26px}
.palm-dep{
  display:inline-block;margin-bottom:11px;
  font-size:.74rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--accent-pure);padding:5px 12px;border-radius:999px
}
.palm-txt h3{font-size:1.15rem;margin-bottom:9px;color:#fff}
.palm-txt p{margin:0;font-size:.9rem;color:var(--on-night-2)}
.palm.anim{opacity:0;transform:translateY(26px)}
.palm.in{opacity:1;transform:none;
  transition:opacity .75s var(--ease),transform .75s var(--ease)}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  
  
  
  
  
  
  .palm-txt{padding:18px 20px 22px}
}
@media(prefers-reduced-motion:reduce){
  .caso .caso-fotos,.caso .caso-txt,.palm,.palm.anim,.caso.anim .caso-fotos,.palm-foto img{transition:none}
}

/* Palmarés: todas las tarjetas a la misma altura y ratio */
.palmares{grid-auto-rows:1fr;align-items:stretch}
.palm{display:flex;flex-direction:column}
.palm-foto{flex:none}
.palm-foto .shot{aspect-ratio:4/5!important}
.palm-txt{flex:1;display:flex;flex-direction:column}
.palm-txt p{margin-top:auto;padding-top:4px}

.palm-dep{align-self:flex-start}

/* =========================================================
   DOCUMENTOS LEGALES
   Texto largo: línea corta, jerarquía clara y un índice
   que se queda fijo en escritorio.
   ========================================================= */
.ldoc{
  display:grid;gap:clamp(28px,4vw,56px);align-items:start;
  grid-template-columns:minmax(0,230px) minmax(0,1fr)
}
.ldoc-fecha{
  margin-top:22px;font-size:.85rem;color:var(--muted);
  padding:8px 14px;background:var(--sand);border-radius:999px;display:inline-block
}
.ldoc-idx{position:sticky;top:96px;min-width:0}
.ldoc-idx-t{
  font-size:.7rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px
}
.ldoc-idx ol{list-style:none;margin:0;padding:0;counter-reset:li}
.ldoc-idx li{counter-increment:li;margin-bottom:3px}
.ldoc-idx a{
  display:block;padding:8px 12px 8px 34px;position:relative;
  font-size:.88rem;line-height:1.35;color:var(--muted);text-decoration:none;
  border-radius:8px;transition:background .25s,color .25s
}
.ldoc-idx a::before{
  content:counter(li,decimal-leading-zero);position:absolute;left:11px;top:8px;
  font-size:.75rem;font-weight:800;color:var(--accent);opacity:.75
}
.ldoc-idx a:hover{background:var(--sand);color:var(--ink)}

.ldoc-txt{min-width:0;max-width:68ch}
.ldoc-sec{scroll-margin-top:100px}
.ldoc-sec + .ldoc-sec{margin-top:clamp(38px,4.5vw,60px)}
.ldoc-txt h2{
  font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:16px;
  padding-bottom:12px;border-bottom:2px solid var(--line)
}
.ldoc-txt h3{
  font-size:1.02rem;margin:26px 0 10px;letter-spacing:-.015em;
  text-transform:none;font-stretch:100%
}
.ldoc-txt p{margin-bottom:14px;line-height:1.68}
.ldoc-txt .ticks{margin:16px 0 20px}
.ldoc-txt .ticks li{line-height:1.55}
.ldoc-txt a{color:var(--accent);text-underline-offset:3px}

.ldoc-datos{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ldoc-datos li{
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:14px;
  background:#fff;padding:13px 18px;font-size:.93rem
}
.ldoc-datos b{color:var(--muted);font-weight:700;font-size:.86rem}
.ldoc-datos span{min-width:0;word-break:break-word}

.ldoc-base{
  background:var(--sand);border-left:3px solid var(--accent);
  padding:12px 16px;border-radius:0 8px 8px 0;font-size:.9rem;margin:12px 0 20px
}
.ldoc-nota{
  background:#FFF8E6;border:1px solid #E8D48A;border-radius:var(--r-lg);
  padding:15px 18px;font-size:.9rem;color:#5C4A12;margin-top:20px
}
.ldoc-destacado{
  background:var(--night);color:#fff;border-radius:var(--r-lg);
  padding:20px 24px;font-size:1rem;line-height:1.6
}
.ldoc-destacado b{color:var(--accent-2)}

@media(max-width:900px){
  .ldoc{grid-template-columns:1fr;gap:26px}
  .ldoc-idx{
    position:static;background:var(--sand);border-radius:var(--r-lg);padding:18px 16px
  }
  .ldoc-idx ol{display:grid;grid-template-columns:1fr 1fr;gap:2px}
}
@media(max-width:600px){
  .ldoc-idx ol{grid-template-columns:1fr}
  .ldoc-datos li{grid-template-columns:1fr;gap:3px;padding:12px 15px}
  .ldoc-txt{max-width:none}
  .ldoc-txt p{font-size:.96rem}
}

/* ---------- Mapa bajo demanda ---------- */
.mapa{
  position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;
  background:var(--sand);border:1px solid var(--line);display:grid;place-items:center
}
.mapa-aviso{padding:clamp(20px,3vw,32px);text-align:center;max-width:44ch}
.mapa-aviso p{margin:0 0 10px;font-size:.92rem;color:var(--muted)}
.mapa-aviso p:first-child{color:var(--ink);font-size:1.02rem}
.mapa-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px!important}
.mapa.cargado{display:block;background:var(--night)}
.mapa iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:600px){
  .mapa{aspect-ratio:4/3}
  .mapa-btns .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- Bonos alternativos, dentro del desplegable ---------- */
.mas-bonos{
  margin-top:26px;background:var(--sand);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .35s,box-shadow .35s var(--ease)
}
.mas-bonos:hover{border-color:#cfc9bd}
.mas-bonos[open]{border-color:var(--accent);box-shadow:0 14px 40px rgba(196,13,22,.09)}
.mas-bonos > summary{
  display:flex;align-items:center;gap:14px;padding:19px 22px;color:var(--ink);
  font-size:.98rem
}
.mas-bonos > summary b{font-weight:800}
.mas-bonos-cuerpo{padding:4px 22px 26px}

.alt-lista{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
.alt-lista li{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:16px 20px;transition:transform .35s var(--ease),border-color .35s
}
.alt-lista li:hover{transform:translateX(4px);border-color:var(--accent)}
.alt-txt{flex:1 1 auto;min-width:0}
.alt-txt b{display:block;font-size:1.05rem;letter-spacing:-.015em;margin-bottom:3px}
.alt-txt span{font-size:.87rem;color:var(--muted)}
.alt-precio{
  font-weight:860;font-stretch:112%;letter-spacing:-.03em;
  font-size:1.7rem;color:var(--accent);white-space:nowrap;line-height:1
}
.alt-precio small{font-size:.42em;font-weight:600;color:var(--muted);
  font-stretch:100%;letter-spacing:0;margin-left:3px}

.alt-h{font-size:1.08rem;margin:0 0 8px;text-transform:none;font-stretch:100%}
.alt-p{font-size:.9rem;color:var(--muted);margin-bottom:16px}
.tabla-dur{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
.tabla-dur th,.tabla-dur td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:center}
.tabla-dur thead th{
  font-size:.73rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:var(--ink);font-weight:800;border-bottom:0
}
.tabla-dur thead th:first-child{border-radius:10px 0 0 0;text-align:left}
.tabla-dur thead th:last-child{border-radius:0 10px 0 0}
.tabla-dur tbody th{text-align:left;font-weight:750;white-space:nowrap}
.tabla-dur tbody tr:hover{background:var(--sand)}
.tabla-dur td.no{color:var(--ink-3)}


@media(max-width:600px){
  .mas-bonos > summary{padding:16px 17px;font-size:.92rem;align-items:flex-start}
  .mas-bonos-cuerpo{padding:4px 17px 22px}
  .alt-lista li{padding:14px 16px;gap:10px}
  .alt-txt{flex:1 1 100%}
  .alt-precio{font-size:1.5rem}
  .tabla-dur{font-size:.82rem}
  .tabla-dur th,.tabla-dur td{padding:9px 6px}
}

/* ---------- Caminos: tres tarjetas que abren su ficha ---------- */
.caminos{display:grid;gap:12px}
.camino{
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);width:100%;text-align:left;
  font:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,26px) clamp(18px,2.4vw,28px);
  transition:transform .4s var(--ease),border-color .35s,box-shadow .35s var(--ease)
}
.camino:hover{
  transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 16px 44px rgba(196,13,22,.11)
}
.camino:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cam-n{
  flex:none;font-size:.78rem;font-weight:850;font-stretch:112%;letter-spacing:.06em;
  color:var(--accent);width:26px
}
.cam-t{flex:1 1 auto;min-width:0}
.cam-t b{
  display:block;font-size:clamp(1.05rem,1.9vw,1.3rem);font-weight:800;
  letter-spacing:-.02em;margin-bottom:4px
}
.cam-t > span{display:block;font-size:.9rem;color:var(--muted);line-height:1.45}
.cam-mas{
  flex:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  color:var(--accent);font-weight:750;font-size:.88rem
}
.cam-mas::after{content:"→";transition:transform .35s var(--ease)}
.camino:hover .cam-mas::after{transform:translateX(5px)}

/* Precio y botones, dentro del pop-up */
.cam-precio{
  margin:20px 0 22px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.92rem
}
.cam-precio b{
  font-size:1.5rem;font-weight:860;font-stretch:112%;letter-spacing:-.03em;
  color:var(--accent);margin-right:6px
}
.cam-btns{display:flex;gap:10px;flex-wrap:wrap;margin:0}

@media(max-width:600px){
  .camino{gap:12px;padding:17px 16px;align-items:flex-start;flex-wrap:wrap}
  .cam-n{width:auto;padding-top:3px}
  .cam-mas{flex:1 1 100%;margin-top:10px}
  .cam-btns .btn{flex:1 1 100%;justify-content:center}
}

/* Las tarjetas de caminos son <button> y no declaraban color, así que
   heredaban el del navegador: negro en escritorio, AZUL DEL SISTEMA en el
   Safari del iPhone. Se fija aquí para que no lo decida el navegador
   (Adrián, 20/09/2026). Por encima de 1080px no se lee. */
@media(max-width:1080px){
  .camino{color:var(--ink)}
}

/* ---------- Horario resumido en la home ---------- */
.horario-mini{
  margin:26px 0 0;background:var(--sand);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:border-color .35s
}
.horario-mini[open]{border-color:var(--accent)}
.horario-mini > summary{
  display:flex;align-items:center;gap:12px;padding:15px 19px;
  font-size:.95rem;color:var(--ink)
}
.horario-mini-cuerpo{padding:0 19px 22px}
.hm-lista{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.hm-lista li{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  background:#fff;padding:11px 15px;font-size:.92rem
}
.hm-lista span{color:var(--muted)}
.hm-lista b{font-weight:800;white-space:nowrap}
.hm-cerrado b{color:var(--ink-3);font-weight:700}
.hm-nota{font-size:.85rem;color:var(--muted);margin:0 0 16px}

/* ---------- Botón de reseñas, encima de las tarjetas ---------- */
.rev-arriba{margin:22px 0 0}
.night .rev-arriba .btn{border-color:var(--line-night);color:#fff}
.night .rev-arriba .btn:hover{border-color:var(--accent-2);background:rgba(255,255,255,.05)}

@media(max-width:600px){
  .camino > summary{gap:12px;padding:17px 16px;align-items:flex-start}
  .cam-n{width:auto;padding-top:3px}
  .cam-cuerpo{padding:0 16px 22px}
  .cam-btns .btn{flex:1 1 100%;justify-content:center}
  .horario-mini-cuerpo .btn{width:100%;justify-content:center}
}

/* Logo definitivo: se adapta al alto de la cabecera sin deformarse */


/* Cifras de la página de historia */
.proof-hist{
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))
}
.proof-hist > div{min-width:0;padding-right:18px;border-right:1px solid var(--line-night)}
.proof-hist > div:last-child{border-right:0}
.proof-hist b{
  display:block;color:#fff;font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:860;
  font-stretch:114%;letter-spacing:-.04em;line-height:1;margin-bottom:9px
}
.proof-hist span{font-size:.86rem;color:var(--on-night-2);line-height:1.45}
@media(max-width:640px){
  .proof-hist{grid-template-columns:1fr 1fr;gap:20px 14px}
  .proof-hist > div:nth-child(even){border-right:0}
  .proof-hist b{font-size:1.7rem}
}



/* =========================================================
   AVISO DE COOKIES
   Solo aparece por el mapa de Google. No bloquea la web:
   se puede seguir navegando y leyendo con él en pantalla.
   ========================================================= */
.ck{
  position:fixed;left:0;right:0;bottom:0;z-index:500;
  padding:14px;pointer-events:none
}
.ck[hidden]{display:none}
.ck-caja{
  pointer-events:auto;max-width:760px;margin:0 auto;
  display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap;
  background:var(--night);color:var(--on-night-2);
  border:1px solid var(--line-night);border-radius:var(--r-lg);
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
  box-shadow:0 20px 60px rgba(0,0,0,.34);
  animation:ck-sube .5s var(--ease)
}
@keyframes ck-sube{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.ck-txt{flex:1 1 300px;min-width:0}
.ck-h{
  margin:0 0 5px;color:#fff;font-weight:850;font-stretch:110%;
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase
}
.ck-txt p:last-child{margin:0;font-size:.88rem;line-height:1.5}
.ck-txt a{color:var(--accent-2)}
.ck-btns{display:flex;gap:9px;flex-wrap:wrap;flex:0 0 auto}
.ck-btns .btn{font-size:.88rem;padding:11px 18px}
.ck-btns .btn-ghost{border-color:var(--line-night);color:#fff}
.ck-btns .btn-ghost:hover{border-color:var(--accent-2);background:rgba(255,255,255,.05)}

@media(max-width:640px){
  .ck{padding:10px}
  .ck-caja{padding:16px 17px;gap:14px}
  .ck-txt p:last-child{font-size:.84rem}
  .ck-btns{width:100%}
  .ck-btns .btn{flex:1 1 0;justify-content:center}
}
@media(prefers-reduced-motion:reduce){ .ck-caja{animation:none} }

/* En móvil, el bloque de seguimiento arranca por la imagen */
@media(max-width:640px){
  .split{display:flex;flex-direction:column;gap:22px}
  .split .shot,.split .mapa{order:-1}
  .split.rev .shot,.split.rev .mapa{order:0}
}

/* =========================================================
   REVISIÓN MÓVIL — arreglos concretos
   ========================================================= */
@media(max-width:640px){
  /* Nada por debajo de 12px: en un móvil no se lee */
  .par-lado figcaption{font-size:.75rem}
  .palm-dep,.cmp-et,.plan .tag{font-size:.7rem}
  .tabla-dur{font-size:.86rem}
  .tabla-dur thead th{font-size:.75rem}
  .alt-precio small{font-size:.5em}
  .cam-mas,.card-abre .card-mas{font-size:.86rem}
  .titus li,.ldoc-datos li{font-size:.87rem}
  .legal-copy,.legal-nav a,.foot-rating{font-size:.83rem}

  /* Todo lo pulsable, mínimo 44px de alto */
  .btn{min-height:46px;align-items:center}
  .dia-tab{min-height:46px}
  .burger{width:46px;height:46px}
  .modal-x,.carrusel-btns button{width:44px;height:44px}
  summary{min-height:52px}

  /* Resultados es la página más larga: se compacta */
  
  
  .palmares{gap:12px}
  .palm-txt{padding:16px 18px 20px}
  .palm-txt p{font-size:.86rem}
}

@media(max-width:640px){
  .palm-dep{font-size:.75rem}
  .todo{font-size:.78rem}   /* solo se ve en revisión, pero legible */
}

/* ---------- Ticks: el hover no puede oscurecer sobre fondo oscuro ---------- */
.night .ticks-vivos li:hover,
.hero .ticks-vivos li:hover,
.precio-caja .ticks-vivos li:hover{color:#fff}
/* y el aumento se nota más en el icono que en el texto */
.ticks-vivos li:hover{transform:translateX(5px)}
.ticks-vivos li::before,.ticks-vivos li > svg:first-child{
  transition:transform .32s var(--ease)
}
.ticks-vivos li:hover::before{transform:scale(1.25)}
.ticks li svg{transition:transform .32s var(--ease)}
.ticks-vivos li:hover svg{transform:scale(1.22)}

/* ---------- Bloques desplegables de cross training ---------- */
.bloques{display:grid;gap:14px}
.bloque{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color .35s,box-shadow .35s var(--ease)
}
.bloque:hover{border-color:#cfc9bd}
.bloque[open]{border-color:var(--accent);box-shadow:0 16px 46px rgba(196,13,22,.10)}
.bloque > summary{
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);
  padding:clamp(20px,2.6vw,28px) clamp(18px,2.6vw,30px)
}
.bl-n{
  flex:none;font-size:.78rem;font-weight:850;font-stretch:112%;letter-spacing:.06em;
  color:var(--accent);width:26px
}
.bl-t{flex:1 1 auto;min-width:0}
.bl-t b{
  display:block;font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:var(--display-weight);
  font-stretch:var(--display-stretch);text-transform:uppercase;letter-spacing:-.03em;
  line-height:1.05;margin-bottom:5px
}
.bl-t > span{display:block;font-size:.9rem;color:var(--muted);line-height:1.45}
.bl-cuerpo{padding:0 clamp(18px,2.6vw,30px) clamp(26px,3vw,34px)}
.bl-split{
  display:grid;gap:clamp(24px,3.4vw,44px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)
}
.bl-fotos{min-width:0}
.bl-fotos .carrusel-pista figure{flex:0 0 100%}
.bl-fotos .carrusel-pista{gap:12px}

/* La línea de tiempo, a tres pasos */
.linea-3{grid-template-columns:repeat(3,minmax(0,1fr))}

@media(max-width:900px){
  .bl-split{grid-template-columns:1fr}
  .bl-fotos{order:-1}
  .linea-3{grid-template-columns:1fr;gap:20px}
}
@media(max-width:600px){
  .bloque > summary{gap:12px;padding:18px 16px;align-items:flex-start}
  .bl-n{width:auto;padding-top:4px}
  .bl-cuerpo{padding:0 16px 24px}
  .bl-cuerpo .btn{flex:1 1 100%;justify-content:center}
}

/* =========================================================
   TRANSFORMACIONES
   Cabecera y pestañas fijas mientras el carrusel se desliza
   en horizontal. Ocupa poco alto y se ven muchos casos.
   ========================================================= */
.tr-sec{overflow:clip}
.tr-caja{position:relative}
/* Sin sticky: al desplazarse, las tarjetas se colaban por encima de las
   pestañas y dejaban de ser pulsables. Van en flujo, pegadas al carrusel. */
.tr-cab{position:relative;z-index:2;margin-bottom:18px}
.tr-cab .sec-head{margin-bottom:22px}
.tr-tabs{position:relative;z-index:3}
.tr-tabs{display:flex;gap:8px;flex-wrap:wrap}
.tr-tab{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--sand);border:1px solid var(--line);border-radius:999px;
  padding:11px 18px;cursor:pointer;
  font:750 .9rem/1 var(--sans);color:var(--muted);
  transition:background .3s,color .3s,border-color .3s
}
.tr-tab span{
  font-size:.75rem;font-weight:800;padding:2px 7px;border-radius:999px;
  background:#fff;color:var(--muted);border:1px solid var(--line)
}
.tr-tab:hover{border-color:#cfc9bd;color:var(--ink)}
.tr-tab.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tr-tab.is-on span{background:var(--accent-pure);color:#fff;border-color:transparent}

.tr-pista{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:8px 0 44px;margin-bottom:-28px;   /* sitio para la sombra al levantar la tarjeta */
  scrollbar-width:thin;scrollbar-color:var(--line) transparent
}
.tr-pista[hidden]{display:none}
.tr-pista::-webkit-scrollbar{height:8px}
.tr-pista::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.tr-pista::-webkit-scrollbar-thumb:hover{background:#cfc9bd}

.tr-caso{
  flex:0 0 clamp(250px,24%,320px);scroll-snap-align:start;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)
}
/* Solo con ratón: en táctil el :hover se queda pegado tras tocar y la tarjeta se quedaba levantada */
@media(hover:hover){.tr-caso:hover{transform:translateY(-5px);box-shadow:0 18px 46px rgba(14,14,16,.12)}}
/* Comparador antes/después (06/10/2026): las dos fotos, alineadas por pareja,
   una encima de otra. El «antes» se recorta desde la derecha hasta la línea
   (--pos); la línea se arrastra con ratón, dedo o teclado. Con el dedo solo se
   arrastra desde la línea: deslizar sobre la foto sigue moviendo el carrusel. */
.tr-comp{
  position:relative;aspect-ratio:14/18;overflow:hidden;background:var(--night);
  --pos:50%;cursor:ew-resize;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none
}
.tr-img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 50%;pointer-events:none;-webkit-user-drag:none
}
.tr-antes{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.tr-et{
  position:absolute;bottom:10px;z-index:3;pointer-events:none;
  font-size:.73rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;color:#fff;transition:opacity .2s
}
.tr-et-antes{left:10px;background:rgba(14,14,16,.68);backdrop-filter:blur(3px)}
.tr-et-despues{right:10px;background:var(--accent-pure)}
.tr-comp.sin-antes .tr-et-antes,.tr-comp.sin-despues .tr-et-despues{opacity:0}
.tr-linea{
  position:absolute;top:0;bottom:0;left:var(--pos);z-index:4;
  width:44px;margin-left:-22px;touch-action:none;cursor:ew-resize
}
.tr-linea::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;
  background:#fff;box-shadow:0 0 0 1px rgba(14,14,16,.16),0 0 14px rgba(0,0,0,.28)
}
.tr-tirador{
  position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;
  border-radius:50%;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.3);
  transition:transform .2s var(--ease)
}
.tr-tirador::before,.tr-tirador::after{
  content:"";position:absolute;top:50%;margin-top:-6px;
  border-block:6px solid transparent
}
.tr-tirador::before{left:9px;border-right:7px solid var(--ink)}
.tr-tirador::after{right:9px;border-left:7px solid var(--ink)}
.tr-comp:hover .tr-tirador,.tr-comp.arrastrando .tr-tirador{transform:scale(1.08)}
.tr-rango{
  position:absolute;left:50%;bottom:0;width:1px;height:1px;margin:0;padding:0;
  opacity:0;pointer-events:none;clip-path:inset(50%)
}
.tr-rango:focus-visible + .tr-linea .tr-tirador{outline:3px solid var(--accent-pure);outline-offset:3px}
.tr-quien{grid-column:1/-1;font-size:.8rem;font-weight:600;line-height:1.35;color:var(--muted)}
.tr-pie{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;
  padding:15px 18px
}
.tr-pie b{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.tr-pie span{
  font-size:.78rem;font-weight:800;letter-spacing:.03em;white-space:nowrap;
  color:var(--accent);background:var(--accent-soft);padding:5px 11px;border-radius:999px
}
.tr-vacio{
  flex:0 0 100%;background:var(--sand);border:1px dashed var(--line);
  border-radius:var(--r-lg);padding:30px;display:grid;place-items:center;min-height:180px
}
.tr-vacio p{margin:0;max-width:52ch;text-align:center}

@media(max-width:900px){
  .tr-caso{flex:0 0 clamp(240px,62%,320px)}
}
@media(max-width:600px){
  .tr-cab{padding-block:10px 14px}
  .tr-cab .sec-head{margin-bottom:14px}
  .tr-tabs{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
    scrollbar-width:none}
  .tr-tabs::-webkit-scrollbar{display:none}
  .tr-tab{flex:0 0 auto;padding:10px 15px;font-size:.85rem;min-height:44px}
  .tr-caso{flex:0 0 78%}
  .tr-pie{padding:13px 15px}
  .tr-pie b{font-size:.97rem}
}
@media(prefers-reduced-motion:reduce){
  .tr-caso{transition:none}
  .tr-tirador,.tr-et{transition:none}
  .tr-pista{scroll-behavior:auto}
}

/* Nota de pendiente dentro de una tarjeta de precio */
.plan-nota{margin:0 0 14px;font-size:.82rem;line-height:1.45}

/* Duraciones extra, dentro de otro desplegable */
.mas-dur{
  margin-top:16px;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;transition:border-color .3s
}
.mas-dur[open]{border-color:var(--accent)}
.mas-dur > summary{
  display:flex;align-items:center;gap:12px;padding:14px 17px;
  font-size:.9rem;font-weight:700;color:var(--ink)
}
.mas-dur-cuerpo{padding:0 17px 18px}

/* La tabla del mes es la de referencia: se destaca entera */
.mas-bonos-cuerpo > .table-wrap .tabla-dur tbody tr{
  background:var(--accent-soft);font-weight:700
}
.mas-bonos-cuerpo > .table-wrap .tabla-dur tbody th{color:var(--accent)}
.mas-dur .tabla-dur tbody tr:hover{background:var(--sand)}

/* Horario del centro, en la página de horarios */
.horario-centro{
  margin-top:34px;padding-top:30px;border-top:1px solid var(--line);
  max-width:460px
}
.horario-centro h3{margin-bottom:14px;font-size:1.08rem;text-transform:none;font-stretch:100%}
.horario-centro .muted{margin-top:14px;font-size:.86rem}

/* El formulario no debe mostrar su destino en pantalla */
.form{position:relative}

/* =========================================================
   CARRUSEL AUTOMÁTICO
   ========================================================= */
.carrusel-solo .carrusel-pista figure{flex:0 0 100%}
.carrusel-puntos{display:flex;gap:6px;align-items:center;margin-inline:4px}
.carrusel-puntos i{
  width:7px;height:7px;border-radius:50%;background:var(--line);display:block;
  transition:background .35s var(--ease),width .35s var(--ease)
}
.carrusel-puntos i.on{background:var(--accent);width:20px;border-radius:4px}
.carrusel-btns{align-items:center}

/* =========================================================
   RULETA — qué se entrena
   ========================================================= */
.ruleta{
  display:grid;gap:clamp(30px,5vw,64px);align-items:center;
  grid-template-columns:minmax(0,360px) minmax(0,1fr)
}
.ruleta-circulo{
  position:relative;width:100%;aspect-ratio:1;max-width:360px;margin-inline:auto
}
.ruleta-circulo::before{
  content:"";position:absolute;inset:13%;border-radius:50%;
  animation:gira 22s linear infinite;
  /* guiones dibujados con SVG: el `dashed` del borde no deja
     controlar el largo ni la separación */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='97' fill='none' stroke='%23C9C3B6' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='13 11'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat
}
@keyframes gira{to{transform:rotate(360deg)}}
/* halo que se mueve detrás del punto elegido */
.rl-halo{
  position:absolute;top:50%;left:50%;width:42%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(246,18,28,.28), transparent 66%);
  transform:translate(-50%,-50%) rotate(var(--a,0deg)) translateY(-118%);
  transition:transform .85s cubic-bezier(.5,0,.35,1);pointer-events:none
}
.ruleta-centro{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40%;aspect-ratio:1;border-radius:50%;
  background:var(--night);color:#fff;display:grid;place-content:center;
  text-align:center;gap:2px;box-shadow:0 14px 40px rgba(14,14,16,.24)
}
.ruleta-centro b{
  display:block;font-size:1.15rem;font-weight:860;font-stretch:112%;letter-spacing:-.03em
}
.ruleta-centro span{
  display:block;font-size:.73rem;font-weight:750;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-night-2)
}
.rl-punto{
  position:absolute;top:50%;left:50%;width:34%;aspect-ratio:1;
  --giro:calc(var(--i) * 120deg);
  transform:translate(-50%,-50%) rotate(var(--giro)) translateY(-118%) rotate(calc(var(--giro) * -1));
  display:grid;place-items:center;gap:6px;align-content:center;
  background:#fff;border:1px solid var(--line);border-radius:50%;cursor:pointer;
  transition:transform .5s var(--ease),border-color .35s,box-shadow .45s var(--ease),background .35s
}
.rl-punto:hover{
  transform:translate(-50%,-50%) rotate(var(--giro)) translateY(-124%) rotate(calc(var(--giro) * -1)) scale(1.1);
  border-color:var(--accent);box-shadow:0 12px 30px rgba(196,13,22,.18)
}
.rl-punto.is-on{
  background:var(--accent-pure);border-color:var(--accent-pure);color:#fff;
  box-shadow:0 16px 38px rgba(246,18,28,.36);
  transform:translate(-50%,-50%) rotate(var(--giro)) translateY(-124%) rotate(calc(var(--giro) * -1)) scale(1.16)
}
.rl-punto:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.rl-ico{display:block;width:28%;color:currentColor;transition:transform .5s var(--ease)}
.rl-ico svg{width:100%;height:auto;display:block}
.rl-punto:hover .rl-ico,.rl-punto.is-on .rl-ico{transform:scale(1.16)}
.rl-nom{font-size:.78rem;font-weight:800;line-height:1;text-align:center;color:inherit}
.rl-punto:not(.is-on) .rl-nom{color:var(--ink)}
.rl-punto:not(.is-on) .rl-ico{color:var(--accent)}
/* latido suave del elegido */
@keyframes latido{0%,100%{box-shadow:0 16px 38px rgba(246,18,28,.36)}
  50%{box-shadow:0 16px 46px rgba(246,18,28,.52)}}
.rl-punto.is-on{animation:latido 2.4s ease-in-out infinite}

.ruleta-fichas{min-width:0;position:relative;display:grid}
.rl-ficha{grid-area:1/1;min-width:0}
@keyframes rl-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rl-ficha[hidden]{display:block;visibility:hidden}
.rl-ficha.is-on{animation:rl-entra .45s var(--ease)}
.rl-eyebrow{
  font-size:.7rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px
}
.rl-ficha h3{
  font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:14px;
  font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  text-transform:uppercase;letter-spacing:-.035em;line-height:1
}
.rl-ficha .lead{font-size:1.04rem;margin-bottom:14px}
.rl-datos{
  display:flex;gap:0;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)
}
.rl-datos > div{flex:1;min-width:0;padding-right:18px}
.rl-datos > div + div{border-left:1px solid var(--line);padding-left:18px;padding-right:0}
.rl-datos b{
  display:block;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:860;font-stretch:112%;
  letter-spacing:-.035em;line-height:1;color:var(--accent);margin-bottom:6px
}
.rl-datos span{font-size:.82rem;color:var(--muted);line-height:1.35;display:block}

/* Llamada a preguntas frecuentes */
.cta-preguntas{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(38px,5vw,64px);padding:clamp(24px,3vw,34px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)
}
.cta-preguntas h3{margin-bottom:6px;font-size:1.2rem;text-transform:none;font-stretch:100%}
.cta-preguntas p{margin:0;color:var(--muted);font-size:.94rem;max-width:52ch}

/* =========================================================
   CASOS DE USO — para quién tiene sentido
   ========================================================= */
.casos-uso{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))
}
.cu{
  min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,28px);
  transition:transform .4s var(--ease),border-color .35s,box-shadow .4s var(--ease)
}
.cu:hover{
  transform:translateY(-6px);border-color:var(--accent);
  box-shadow:0 20px 50px rgba(196,13,22,.12)
}
.cu-ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:var(--accent-soft);color:var(--accent);margin-bottom:18px;
  transition:background .4s var(--ease),color .4s,transform .45s var(--ease)
}
.cu-ico svg{width:26px;height:26px}
.cu:hover .cu-ico{background:var(--accent-pure);color:#fff;transform:scale(1.08) rotate(-4deg)}
.cu h3{font-size:1.1rem;margin-bottom:9px;text-transform:none;font-stretch:100%}
/* El texto se insinúa y se aclara al pasar por encima */
.cu p{margin:0;color:var(--ink-3);font-size:.93rem;transition:color .4s var(--ease)}
.cu:hover p{color:var(--muted)}
.cu-mas{background:var(--night);border-color:var(--night);display:flex;flex-direction:column}
.cu-mas h3{color:#fff}
.cu-mas p{color:var(--on-night-2);margin-bottom:20px}
.cu-mas p a{color:var(--accent-2)}
.cu-mas .btn{margin-top:auto;align-self:flex-start;border-color:var(--line-night);color:#fff}
.cu-mas:hover{transform:translateY(-6px);border-color:var(--accent-2)}

@media(max-width:900px){
  .ruleta{grid-template-columns:1fr;gap:30px}
  .ruleta-circulo{max-width:290px}
}
@media(max-width:600px){
  .ruleta-circulo{max-width:250px}
  .rl-nom{font-size:.74rem}
  .cta-preguntas{flex-direction:column;align-items:flex-start}
  .cta-preguntas .btn{width:100%;justify-content:center}
  .cu-mas .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .ruleta-circulo::before{animation:none}
  .rl-ficha.is-on{animation:none}
  .cu,.cu-ico,.rl-punto{transition:none}
}

/* ---------- Horarios: bloque general arriba ---------- */
.horario-centro{
  margin:0 0 clamp(34px,4vw,48px);padding:0 0 clamp(30px,3.5vw,40px);
  border-top:0;border-bottom:1px solid var(--line);max-width:none
}
.horario-centro h3{
  margin-bottom:16px;font-size:.74rem;font-weight:850;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-stretch:108%
}
.horario-centro .hm-lista{
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  margin:0
}
.horario-centro .hm-lista li{
  flex-direction:column;align-items:flex-start;gap:5px;padding:16px 18px
}
.horario-centro .hm-lista span{font-size:.82rem}
.horario-centro .hm-lista b{font-size:1.12rem;letter-spacing:-.02em}

.sec-head-sub{margin-bottom:18px}
.sec-head-sub h2{font-size:clamp(1.5rem,3vw,2.1rem)}

/* La leyenda va encima de la tabla */
.leyenda{margin:0 0 22px}
@media(max-width:600px){
  .horario-centro .hm-lista{grid-template-columns:1fr 1fr}
  .horario-centro .hm-lista b{font-size:1rem}
}

/* ---------- Valoración con el logo de Google ---------- */
.nota-google{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px
}
.g-logo{display:block;width:34px;height:34px;flex:none}
.g-logo svg{width:100%;height:100%;display:block}
.nota-cifra{
  font-size:clamp(2.4rem,4.6vw,3.4rem);font-weight:860;font-stretch:114%;
  letter-spacing:-.04em;line-height:1;color:var(--ink)
}
.nota-stars{color:#FBBC05;font-size:1.28rem;letter-spacing:.1em;line-height:1}
.nota-txt{font-size:1rem;color:var(--muted);font-weight:600}
.night .nota-cifra{color:#fff}
.night .nota-txt{color:var(--on-night-2)}
@media(max-width:600px){
  .nota-google{gap:9px}
  .g-logo{width:28px;height:28px}
  .nota-stars{font-size:1.05rem}
  .nota-txt{flex:1 1 100%;font-size:.92rem}
}

/* ---------- Línea con el resto de servicios ---------- */
.cam-otros{
  margin:24px 0 0;font-size:.94rem;color:var(--muted);line-height:1.6;max-width:70ch
}
.cam-otros a{color:var(--accent);font-weight:700;white-space:nowrap}

/* ---------- Carrusel: nunca cortar por arriba ---------- */
.carrusel-pista .shot img,
.bl-fotos .shot img{object-position:center top}

/* =========================================================
   FOCO EN LOS PASOS
   El señalado crece, el resto se atenúa por igual.
   Vale para la lista vertical (.ruta) y la horizontal (.linea).
   ========================================================= */
@media(hover:hover){
  .ruta-acordeon .paso,
  .linea-acordeon > li{transition:opacity .4s var(--ease)}
  .ruta-acordeon .paso-txt,
  .linea-acordeon > li > div{
    transition:transform .4s var(--ease);
    transform-origin:left center
  }
  .linea-acordeon > li > div{transform-origin:left top}
  .ruta-acordeon .paso-n,
  .linea-acordeon > li::before{
    transition:transform .4s var(--ease),background .35s,border-color .35s,color .35s
  }

  /* el señalado */
  .tocando .paso.es-foco .paso-txt,
  .tocando > li.es-foco > div{transform:scale(1.05)}
  .tocando .paso.es-foco .paso-n{
    background:var(--accent-pure);border-color:var(--accent-pure);color:#fff;
    transform:scale(1.15)
  }
  .tocando > li.es-foco::before{
    background:var(--accent-pure);border-color:var(--accent-pure);transform:scale(1.35)
  }
  .tocando > li.es-foco .linea-t{color:var(--accent-pure)}

  /* el resto, todos igual */
  .tocando .paso:not(.es-foco),
  .tocando > li:not(.es-foco){opacity:.42}
  .tocando .paso:not(.es-foco) .paso-n,
  .tocando > li:not(.es-foco)::before{transform:scale(.92)}
}
@media(prefers-reduced-motion:reduce){
  .ruta-acordeon .paso,.linea-acordeon > li,
  .ruta-acordeon .paso-txt,.linea-acordeon > li > div,
  .ruta-acordeon .paso-n,.linea-acordeon > li::before{transition:none}
  .tocando .paso:not(.es-foco),.tocando > li:not(.es-foco){opacity:1}
}



/* =========================================================
   LOGO CUADRADO
   ========================================================= */
.brand.tiene-logo{display:inline-flex;align-items:center;padding:0;gap:0;flex:none}
.brand.tiene-logo img{
  display:block;width:auto;height:56px;max-width:none;object-fit:contain;
  transition:height .4s var(--ease)
}
html.scrolled .site-header .brand.tiene-logo img{height:46px}
.site-footer .brand.tiene-logo img{height:110px;margin-bottom:6px}

.hdr{min-height:84px;gap:18px}
html.scrolled .hdr{min-height:70px}

/* Cabecera: logo, grupo «Entrenamiento» + 8 enlaces y botón */
@media(min-width:1081px){
  .burger{display:none!important}
  .nav{gap:0;flex:1 1 auto;justify-content:flex-end}
  .nav a{padding:8px 8px;font-size:.88rem;letter-spacing:-.012em;white-space:nowrap}
  .hdr > .btn{margin-left:10px;font-size:.88rem;padding:12px 17px;white-space:nowrap;flex:none}
}
@media(max-width:1080px){
  /* El desenfoque de la cabecera la convertía en marco de referencia de sus
     hijos fijos: el panel del menú se anclaba a la cabecera, no a la pantalla,
     y con la página bajada aparecía al principio del documento (Adrián,
     20/09/2026). Sin desenfoque vuelve a anclarse a la pantalla. El fondo pasa
     a blanco entero porque sin desenfoque el 92 % dejaba transparentar el
     texto de debajo. Solo móvil. */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  html.scrolled .site-header{background:#fff}
  .burger{display:block!important}
  .nav{
    position:fixed;inset:0 0 auto;top:0;z-index:120;display:block;
    background:var(--night);padding:100px 22px 34px;
    transform:translateY(-102%);transition:transform .45s var(--ease);
    max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 20px 60px rgba(0,0,0,.4)
  }
  .nav.open{transform:none}
  .nav a{
    display:block;color:#fff;font-size:1.16rem;font-weight:750;letter-spacing:-.02em;
    padding:15px 4px;border-bottom:1px solid var(--line-night)
  }
  .nav a::after{display:none}
  .nav a:hover,.nav a[aria-current="page"]{color:var(--accent-2);background:none}
  .nav .btn{margin-top:20px;width:100%;justify-content:center;border-bottom:0;padding:15px 20px}
  .brand.tiene-logo img{height:50px}
  html.scrolled .site-header .brand.tiene-logo img{height:42px}
  .hdr{min-height:76px}
}
@media(max-width:600px){
  .brand.tiene-logo img{height:42px}
  html.scrolled .site-header .brand.tiene-logo img{height:36px}
  .hdr{min-height:66px}
  .site-footer .brand.tiene-logo img{height:88px}
}

/* =========================================================
   VALORACIÓN DE GOOGLE — todo en una línea
   ========================================================= */
.nota-google{
  display:flex;align-items:center;gap:11px;flex-wrap:nowrap;margin-bottom:12px
}
.g-logo{display:block;width:30px;height:30px;flex:none}
.nota-cifra{
  font-size:clamp(2.1rem,3.8vw,2.9rem);font-weight:860;font-stretch:114%;
  letter-spacing:-.04em;line-height:1;flex:none
}
.nota-stars{font-size:1.16rem;flex:none;line-height:1}
.nota-txt{font-size:.98rem;white-space:nowrap}
@media(max-width:640px){
  .nota-google{flex-wrap:wrap;gap:8px}
  .g-logo{width:26px;height:26px}
  .nota-stars{font-size:1rem}
  .nota-txt{flex:1 1 100%;white-space:normal;font-size:.9rem}
}

/* =========================================================
   RESEÑAS — el nombre encabeza la tarjeta
   ========================================================= */
.review .who{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.review .stars{margin-bottom:10px}
.review blockquote{margin:0}

/* =========================================================
   REDES DEL PIE — un botón que despliega las cuatro
   ========================================================= */
.redes{position:relative;margin-top:18px}
.redes-bt{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:none;border:1px solid var(--line-night);border-radius:999px;
  padding:11px 18px;color:var(--on-night-2);
  font:750 .88rem/1 var(--sans);
  transition:border-color .3s,color .3s,background .3s
}
.redes-bt svg{width:17px;height:17px}
.redes-bt:hover,.redes[data-abierto] .redes-bt{
  border-color:var(--accent-2);color:#fff;background:rgba(255,255,255,.05)
}
.redes-lista{
  position:absolute;bottom:calc(100% + 12px);left:0;z-index:30;
  display:grid;gap:2px;min-width:190px;padding:8px;
  background:var(--night);border:1px solid var(--line-night);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  animation:redes-sube .28s var(--ease)
}
.redes-lista[hidden]{display:none}
@keyframes redes-sube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* pico del bocadillo */
.redes-lista::after{
  content:"";position:absolute;top:100%;left:26px;
  border:7px solid transparent;border-top-color:var(--night)
}
.redes-lista a{
  display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:9px;
  color:var(--on-night-2);text-decoration:none;font-size:.9rem;font-weight:600;
  transition:background .25s,color .25s
}
.redes-lista a:hover{background:rgba(255,255,255,.07);color:#fff}
.redes-lista svg{width:17px;height:17px;flex:none}

/* =========================================================
   EL PROCESO — el raíl no debe cruzar el número
   ========================================================= */
.paso-n{position:relative;z-index:3;background:#fff}
.night .paso-n{background:var(--night)}
.sand .paso-n{background:var(--sand)}
@media(hover:hover){
  /* se atenúa el contenido, no el círculo, para que el raíl siga tapado */
  .ruta-acordeon.tocando .paso[data-lejos="1"] .paso-n,
  .ruta-acordeon.tocando .paso:not(.es-foco) .paso-n{opacity:1;color:var(--ink-3)}
  .ruta-acordeon.tocando .paso:not(.es-foco){opacity:1}
  .ruta-acordeon.tocando .paso:not(.es-foco) .paso-txt{opacity:.42}
}

/* =========================================================
   AUDITORÍA — ajustes finos
   ========================================================= */

/* El texto rompía línea con hueco de sobra: 62ch se queda corto
   en pantallas anchas. Se limita por legibilidad, no por diseño. */
.lead{max-width:78ch}
.page-head .lead{max-width:72ch}
.cam-otros{max-width:86ch}
.sec-head p:not(.eyebrow){max-width:80ch}
.ldoc-txt{max-width:76ch}

/* La hamburguesa salta a 1080 px: con el grupo «Entrenamiento» la cabecera cabe desde 1081. */

/* Online: cuatro perfiles en una fila si hay sitio, luego 2×2 y 1 */
.g4-auto{
  display:grid;gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr))
}
@media(max-width:1250px){ .g4-auto{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .g4-auto{grid-template-columns:1fr} }

/* ---------- «También hacemos»: tarjetas con detalle y contacto ---------- */
.extras{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))
}
.extra{
  min-width:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,30px);
  transition:transform .4s var(--ease),border-color .35s,box-shadow .4s var(--ease)
}
.extra:hover{
  transform:translateY(-5px);border-color:var(--accent);
  box-shadow:0 18px 46px rgba(196,13,22,.10)
}
.extra h3{font-size:1.16rem;margin-bottom:10px;text-transform:none;font-stretch:100%}
.extra > p{color:var(--muted);font-size:.94rem;margin-bottom:18px}
.extra .ticks{margin-bottom:22px}
.extra .ticks li{font-size:.9rem;line-height:1.5}
.extra .btn{margin-top:auto;align-self:flex-start}
@media(max-width:600px){ .extra .btn{width:100%;justify-content:center} }

/* Logo un punto más grande */
.brand.tiene-logo img{height:64px}
html.scrolled .site-header .brand.tiene-logo img{height:50px}
.site-footer .brand.tiene-logo img{height:124px}
@media(max-width:1180px){
  .brand.tiene-logo img{height:56px}
  html.scrolled .site-header .brand.tiene-logo img{height:46px}
}
@media(max-width:600px){
  .brand.tiene-logo img{height:46px}
  html.scrolled .site-header .brand.tiene-logo img{height:40px}
  .site-footer .brand.tiene-logo img{height:96px}
}

/* Contacto compacto: la sección del formulario pega con la cabecera */
section.pt0{padding-top:clamp(14px,2vw,26px)}

/* =========================================================
   TIENDA
   ========================================================= */
.ti-caja .tr-tabs{margin-bottom:26px}
.ti-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr))
}
.ti{
  min-width:0;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease)
}
.ti:hover{
  transform:translateY(-5px);border-color:#d8d2c6;
  box-shadow:0 16px 42px rgba(14,14,16,.10)
}
.ti[hidden]{display:none}
.ti-foto{display:block;background:#fff;border-bottom:1px solid var(--line)}
.ti-foto img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;
  transition:transform .45s var(--ease)}
.ti:hover .ti-foto img{transform:scale(1.045)}
.ti-txt{display:flex;flex-direction:column;gap:7px;padding:16px 17px 18px;flex:1}
.ti-cat{
  font-size:.73rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent)
}
.ti-txt h3{
  font-size:.98rem;font-weight:750;line-height:1.3;letter-spacing:-.01em;
  text-transform:none;font-stretch:100%;margin:0
}
.ti-precio{
  font-size:1.14rem;font-weight:860;font-stretch:110%;letter-spacing:-.02em;
  color:var(--ink);margin-top:2px
}
.ti-consultar{font-size:.86rem;font-weight:700;color:var(--muted)}
.ti-btn{margin-top:auto;justify-content:center;padding:11px 16px;font-size:.9rem}
@media(max-width:600px){
  .ti-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ti-txt{padding:12px 12px 14px}
  .ti-txt h3{font-size:.88rem}
  .ti-btn{padding:10px 12px;font-size:.85rem;min-height:44px}
}

/* Las pestañas de la tienda se deslizan en móvil, como en resultados */
.ti-caja .tr-tabs{
  overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.ti-caja .tr-tabs::-webkit-scrollbar{display:none}
.ti-caja .tr-tab{flex:0 0 auto}

/* El título del CTA nunca parte palabras: se ajusta el cuerpo para que
   la palabra más larga («suplementación») quepa entera en cualquier ancho */
.cta-band h2{overflow-wrap:normal;word-break:keep-all}
.cta-band .cta-inner > div{max-width:none}
.cta-band h2{max-width:15ch;font-size:clamp(1.55rem,3.4vw,2.9rem)}
@media(max-width:600px){
  .cta-band h2{font-size:clamp(1.45rem,7.2vw,1.9rem);max-width:none}
}


/* =========================================================
   MENÚ: grupo «Entrenamiento» desplegable
   Escritorio: se abre al pasar el ratón o al pulsar el botón.
   Móvil (≤1080): el botón se esconde y las tres van sueltas bajo un rótulo.
   ========================================================= */
.nav-grupo{position:relative;display:flex;align-items:center}
.nav-bt{
  display:inline-flex;align-items:center;gap:5px;position:relative;
  background:none;border:0;cursor:pointer;font:inherit;color:var(--ink-2);
  font-weight:600;font-size:.88rem;letter-spacing:-.012em;padding:8px 8px;
  border-radius:9px;white-space:nowrap
}
.nav-bt svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.nav-bt::after{
  content:"";position:absolute;left:8px;right:8px;bottom:5px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)
}
.nav-grupo.activo .nav-bt,.nav-grupo:hover .nav-bt,.nav-grupo[data-abierto] .nav-bt{color:var(--ink)}
.nav-grupo.activo .nav-bt::after,.nav-grupo:hover .nav-bt::after,
.nav-grupo[data-abierto] .nav-bt::after{transform:scaleX(1)}
.nav-grupo:hover .nav-bt svg,.nav-grupo[data-abierto] .nav-bt svg{transform:rotate(180deg)}
.nav-sub-t{display:none}
@media(min-width:1081px){
  .nav-sub{
    position:absolute;top:100%;left:0;z-index:40;display:none;
    min-width:236px;padding:8px;margin-top:6px;
    background:#fff;border:1px solid var(--line);border-radius:14px;
    box-shadow:0 18px 44px rgba(0,0,0,.14);
    animation:redes-sube .22s var(--ease)
  }
  /* puente invisible: que el ratón pueda cruzar el hueco entre botón y panel */
  .nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .nav-grupo:hover .nav-sub,.nav-grupo[data-abierto] .nav-sub{display:grid;gap:2px}
  .nav .nav-sub a{display:block;padding:10px 13px;border-radius:9px;font-size:.9rem;white-space:nowrap}
  .nav .nav-sub a::after{display:none}
  .nav .nav-sub a:hover,.nav .nav-sub a[aria-current="page"]{background:var(--sand);color:var(--ink)}
}
@media(max-width:1080px){
  .nav-grupo{display:block}
  .nav-bt{display:none}
  .nav-sub-t{
    display:block;color:var(--on-night-2);font-size:.76rem;font-weight:750;
    letter-spacing:.09em;text-transform:uppercase;padding:18px 4px 6px
  }
  .nav .nav-sub a{padding-left:16px}
}

/* =========================================================
   INSTALACIONES
   ========================================================= */
.inst-idx{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.inst-idx a{
  text-decoration:none;font-weight:700;font-size:.88rem;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  transition:border-color .25s,color .25s,background .25s
}
.inst-idx a:hover{border-color:var(--ink);color:var(--ink);background:var(--sand)}
.inst-marcas{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.inst-carrusel .carrusel-pista{gap:12px}
.inst-galeria figure{margin:0}
.inst-galeria figcaption{margin-top:10px;font-size:.9rem;color:var(--on-night-2)}
@media(max-width:880px){.inst-galeria.g3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.inst-galeria.g3{grid-template-columns:1fr}}

/* Grupo del menú con enlace padre («Tienda» + flechita aparte) */
.nav-grupo-link .nav-bt-mini{padding:8px 6px 8px 3px;margin-left:0}
.nav-grupo-link .nav-bt-mini::after{display:none}
.nav-grupo-link > a{padding-right:2px}
@media(max-width:1080px){
  .nav-grupo-link > a{display:block}
  .nav-grupo-link .nav-sub-t{padding-top:6px}
}
/* Tienda por categorías */
.ti-n{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 10px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-dark);font-size:.9rem;font-weight:750}
.night .ti{color:var(--ink)}

/* ---------- Tienda: unidades que quedan y selector ---------- */
.ti-stock{font-size:.84rem;font-weight:700;color:var(--muted)}
.ti-stock.ti-pocas{color:var(--accent-dark)}
.ti-stock.ti-agotado{color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ti-cant{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:999px;
  width:max-content;overflow:hidden;background:#fff}
.ti-cant button{
  width:42px;height:42px;border:0;background:none;cursor:pointer;font:750 1.1rem/1 var(--sans);
  color:var(--ink);transition:background .2s
}
.ti-cant button:hover:not(:disabled){background:var(--sand)}
.ti-cant button:disabled{color:var(--line);cursor:default}
.ti-cant input{
  width:48px;height:42px;border:0;border-inline:1px solid var(--line);text-align:center;
  font:750 .95rem/1 var(--sans);color:var(--ink);background:none;-moz-appearance:textfield
}
.ti-cant input::-webkit-outer-spin-button,.ti-cant input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ti-btn.is-off{pointer-events:none;opacity:.55;justify-content:center}

/* Mínimo legible en móvil: ninguna etiqueta por debajo de 11,5 px */
@media(max-width:700px){
  .ti-cat,.tr-et,.bl-n,.ldoc-idx b,.rl-nom,.pal-cat,.fr-tipo{font-size:.76rem}
  .ti-cant button{width:44px;height:44px}
  .ti-cant input{height:44px}
}

/* ---------- Repaso de móvil (19/09/2026) ---------- */

/* Ninguna etiqueta por debajo de 11,5 px, tampoco las que heredan el tamaño */
.ldoc-idx-t,.rl-eyebrow,.franja .slot,.tag{font-size:.76rem}
.todo{font-size:max(11.6px,.88em)}

/* El texto del botón fijo no cabía entero en pantallas de 360 px y empujaba
   la página a 385 px de ancho. En estrecho, letra algo menor y que pueda
   partir: así nunca fuerza el ancho del documento. */
/* Etiquetas que seguían por debajo del mínimo legible */
span.slot{font-size:.76rem}
.serv span.tag,span.tag{font-size:.76rem}

/* El aviso de cookies medía 365 px con 10 px de margen: a 360 px de pantalla
   ensanchaba el documento a 385. Ahora nunca se pasa. */
.ck,.ck-caja{box-sizing:border-box;max-width:100vw}
.ck-caja{max-width:calc(100vw - 20px)}
@media(max-width:400px){
  .ck-caja{max-width:calc(100vw - 16px);padding:14px}
}

.ti-cant.es-cero{opacity:.6}
.ti-cant.es-cero input{color:var(--muted)}

/* Trampa 5 del CLAUDE.md otra vez: en pantallas de 360 px el título
   «Nuestros entrenamientos más solicitados» no cabía y ensanchaba TODA la
   página 25 px. No se parte la palabra: se ajusta el tamaño para que quepa. */
@media(max-width:400px){
  h1{font-size:clamp(1.9rem,8.2vw,2.6rem)}
  h2{font-size:clamp(1.45rem,6.6vw,2rem)}
  .sec-head h2{max-width:100%}
}
/* La etiqueta «Nuestro bono» la fijaba una regla de móvil más específica */
@media(max-width:700px){
  .palm-dep,.cmp-et,.plan .tag{font-size:.76rem}
}

/* ---------- Menos aire entre secciones (19/09/2026, Adrián) ----------
   Se bajan los colchones verticales alrededor de un 25 % en todos los
   tamaños, manteniendo la proporción entre escritorio y móvil. */
section{padding:clamp(40px,5.6vw,74px) 0}
section.pt0{padding-top:clamp(10px,1.4vw,18px)}
.page-head{padding:clamp(26px,3.6vw,44px) 0 clamp(22px,3vw,36px)}
.hero{padding:clamp(52px,7vw,96px) 0 clamp(44px,5.6vw,74px)}
.sec-head{margin-bottom:clamp(22px,2.8vw,38px)}
.cta-band{padding:clamp(38px,5vw,66px) 0}
.mt32{margin-top:24px}
.mt24{margin-top:18px}
@media(max-width:640px){
  section{padding:clamp(34px,7vw,52px) 0}
  .hero{padding:clamp(40px,9vw,68px) 0 clamp(34px,7vw,52px)}
}

/* Saltar a una sección con la cabecera fija: si no se reserva sitio, el
   título queda debajo de la barra y parece que el enlace «no va». */
html{scroll-behavior:smooth}
section[id],[id].ldoc-sec{scroll-margin-top:104px}
@media(max-width:1080px){ section[id]{scroll-margin-top:88px} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* Donde hay flechas, la barra de deslizar sobra */
.tr-pista{scrollbar-width:none}
.tr-pista::-webkit-scrollbar{display:none}
.carrusel-pista{scrollbar-width:none}
.carrusel-pista::-webkit-scrollbar{display:none}
.desliza-btns{margin-top:14px}


/* El menú lateral de Instalaciones se quitó el 20/09/2026: para saltar de
   zona está el desplegable del menú de arriba. */
.inst-lat,.inst-chips{display:none!important}

/* Historia · «Diez años después»: rejilla de deportistas (04/10/2026). Fondo night. */
.hoy-galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.hoy-galeria figure{margin:0;min-width:0}
.hoy-galeria .shot{border-radius:var(--r-lg)}
.hoy-galeria figcaption{font-size:.84rem;color:var(--on-night-2);line-height:1.4;margin-top:8px}
@media(max-width:880px){.hoy-galeria{grid-template-columns:repeat(2,1fr);gap:12px}}

/* =========================================================
   PULIDO (06/10/2026, Adrián): aspecto más limpio y fluido, al
   estilo de las webs de producto actuales, SIN tocar colores ni
   tipografía. Todo lo de este bloque es movimiento y superficie:
   una sola curva y duración, borde degradado rojo al pasar el
   ratón, sombras más suaves, zoom leve en las fotos y, en móvil,
   fotos más bajas para que no ocupen la pantalla al deslizar.
   Va al final a propósito: manda sobre lo anterior.
   ========================================================= */
:root{
  --ease-out:cubic-bezier(.4,0,.2,1);
  --dur:.32s;
  --shadow-hover:0 2px 6px rgba(14,14,16,.05),0 18px 44px rgba(14,14,16,.10);
  --glow:0 12px 32px rgba(196,13,22,.28);
}

/* Superficies: misma transición y mismo gesto al pasar el ratón */
.card,.plan,.serv,.review,.palm,.tr-caso,.coach{
  position:relative;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out)
}
/* Borde degradado que aparece al pasar el ratón (1,5 px, del rojo a nada) */
.card::after,.plan::after,.serv::after,.review::after,.palm::after,.tr-caso::after,.coach::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;
  background:linear-gradient(135deg,var(--accent-pure) 0%,rgba(246,18,28,.35) 40%,rgba(246,18,28,0) 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity var(--dur) var(--ease-out)
}
.card::before{display:none}   /* la barra roja inferior deja paso al borde degradado */
@media(hover:hover){
  .card:hover,.serv:hover,.review:hover,.coach:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:transparent}
  .plan:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
  .palm:hover,.tr-caso:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:transparent}
  .card:hover::after,.plan:hover::after,.serv:hover::after,.review:hover::after,.palm:hover::after,.tr-caso:hover::after,.coach:hover::after{opacity:1}
  .night .card:hover{box-shadow:0 18px 44px rgba(0,0,0,.35)}
}

/* Botones: elevación corta y sombra de marca; al pulsar, se hunde */
.btn{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background .2s,border-color .2s,color .2s}
@media(hover:hover){
  .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow)}
  .btn-ghost:hover{transform:translateY(-1px)}
  .cta-band .btn-primary:hover{box-shadow:0 12px 32px rgba(0,0,0,.22)}
}
.btn:active{transform:translateY(0) scale(.98);box-shadow:none;transition-duration:.1s}

/* Fotos: zoom leve y lento dentro de su marco */
.shot img,.palm-foto img,.hoy-galeria img{transition:transform .9s var(--ease-out)}
@media(hover:hover){
  .card:hover .shot img,.split .shot:hover img,.hoy-galeria figure:hover img{transform:scale(1.035)}
}

/* Aparición al hacer scroll: recorrido más corto, misma curva */
.rv{transform:translateY(14px)}

/* Cabecera al bajar: cristal más limpio (solo escritorio; en móvil se queda blanca) */
@media(min-width:901px){
  html.scrolled .site-header{
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
    box-shadow:0 1px 0 rgba(14,14,16,.06),0 12px 34px rgba(14,14,16,.06)
  }
}

/* Móvil: las fotos ocupan menos alto para que deslizar no sea pasar pantallas de foto */
/* OJO: ph() escribe la proporción en el style="" de cada foto, así que aquí hace falta !important */
@media(min-width:601px) and (max-width:900px){
  .hero-media{aspect-ratio:16/11!important}
  .hero-media img{object-position:50% 42%}
}
@media(max-width:600px){
  .hero-media{aspect-ratio:4/3!important;max-height:46vh}
  .hero-media img{object-position:50% 42%}
  /* Fotos sueltas: las apaisadas se quedan como están (ya son bajas); las verticales (retratos, 4/5 y 3/4)
     se estrechan al 72 % y se centran, así ocupan menos alto SIN recortar caras. Fuera de esto quedan las
     que viven dentro de otro bloque con su propia maqueta (palmarés, retratos del equipo, galería de Historia). */
  .shot[style*="aspect-ratio:4/5"]:not(.palm-foto *):not(.portrait *):not(.hoy-galeria *),
  .shot[style*="aspect-ratio:3/4"]:not(.palm-foto *):not(.portrait *):not(.hoy-galeria *){width:72%;margin-inline:auto}
  .carrusel[style*="--ar"]{--ar:16/10!important}
  .mapa{aspect-ratio:16/10}
  .tr-caso{flex:0 0 66%}
  .hoy-galeria{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:-20px;padding:0 20px 6px;scrollbar-width:none}
  .hoy-galeria::-webkit-scrollbar{display:none}
  .hoy-galeria figure{flex:0 0 58%;scroll-snap-align:start;scroll-margin-left:20px}
  /* Palmarés: foto a la izquierda y texto a la derecha, en vez de un retrato a toda pantalla */
  .palmares{grid-auto-rows:auto}   /* sin igualar alturas: cada tarjeta, lo que ocupe su texto */
  .palm{display:grid;grid-template-columns:38% minmax(0,1fr);gap:14px;align-items:center;padding:12px}
  .palm .palm-foto{border-radius:calc(var(--r-lg) - 8px);overflow:hidden}
  .palm .palm-txt{padding:4px 6px 4px 0}
  .palm .palm-foto .shot{aspect-ratio:4/5!important}
  .palm .palm-txt h3{font-size:1.02rem}
  .palm .palm-txt p{font-size:.88rem}
}
@media(prefers-reduced-motion:reduce){
  .card,.plan,.serv,.review,.palm,.tr-caso,.coach,.btn,.shot img,.palm-foto img,.hoy-galeria img{transition:none}
}

/* =========================================================
   ACABADO II (10/10/2026) — auditoría completa + «un punto más»
   Petición de Adrián: sin errores visuales, imágenes coherentes por
   sección y más acabado, al nivel de cuidado de readdy.ai SIN tocar
   colores ni tipografía. Lo que se copia de la referencia es el rigor:
   un sistema que se cumple siempre (mismos radios, mismo marco de foto,
   misma distancia título-texto, un solo estilo de antetítulo, foco
   visible, entradas escalonadas). Manda sobre todo lo anterior.
   ========================================================= */

/* 1. --muted se usaba en 41 reglas y nunca se había declarado: los textos
      secundarios salían casi negros y se perdía la jerarquía */
:root{--muted:var(--ink-2)}
.night,.hero,.site-footer,.precio-caja,.cu-mas,.ldoc-destacado{--muted:var(--on-night-2)}
.cta-band{--muted:#fff}
.night .ti,.modal-caja{--muted:var(--ink-2)}
.cu p{color:var(--muted)}
.tr-tab.is-on span{background:var(--accent)}

/* 2. Un solo antetítulo en toda la web (rojo, pequeño, con su raya) */
.eyebrow{font-size:.8rem}
.sec-head p.eyebrow{margin:0 0 18px}

/* 3. Distancia fija entre titular y texto (antes 0 px en 21 sitios) */
h1 + p,h2 + p,h2 + ul,h2 + ol{margin-top:clamp(14px,1.4vw,18px)}
.split h2 + p,.cta-band h2 + p{margin-top:clamp(14px,1.4vw,18px)}
.split > div > h3{margin:30px 0 8px}
.split > div > h3:first-child{margin-top:0}

/* 4. Dos secciones seguidas con el mismo fondo: un filete marca el cambio
      en lugar de un hueco doble de 148 px */
main > section.sand + section.sand,
main > section:not([class]) + section:not([class]){padding-top:0}
main > section.sand + section.sand > .wrap::before,
main > section:not([class]) + section:not([class]) > .wrap::before{
  content:"";display:block;height:1px;background:var(--line);
  margin-bottom:clamp(40px,5.6vw,74px)
}
@media(max-width:640px){
  main > section.sand + section.sand > .wrap::before,
  main > section:not([class]) + section:not([class]) > .wrap::before{margin-bottom:clamp(34px,7vw,52px)}
}

/* 5. Marco común para todas las fotos y un único radio en las superficies.
      Las fotos de paredes claras ya no se funden con el fondo. */
:root{
  --pad-card:clamp(22px,2.6vw,30px);
  --frame:0 0 0 1px rgba(14,14,16,.07),0 1px 2px rgba(14,14,16,.05),0 16px 36px -16px rgba(14,14,16,.24);
  --frame-night:0 0 0 1px rgba(255,255,255,.08),0 18px 40px -18px rgba(0,0,0,.6);
}
.shot,.ficha-foto .portrait{box-shadow:var(--frame)}
.night .shot{box-shadow:var(--frame-night)}
.carrusel-pista .shot,.bl-fotos .shot{box-shadow:0 0 0 1px rgba(14,14,16,.07)}
.palm-foto .shot,.portrait .shot{box-shadow:none}
.card,.review{border-radius:var(--r-lg)}
.card,.review,.cu,.extra{padding:var(--pad-card)}
.coach .shot,.table-wrap{border-radius:var(--r-lg)}
/* Hueco de foto pendiente: que se vea la silueta entera, no dos esquinas negras */
.shot img[data-reemplazar-por]{object-position:50% 20%}

/* 6. Foco visible con los colores de la casa y estados completos */
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn:focus-visible{outline-offset:4px}
:where(.hero,.night,.site-footer,.cu-mas,.precio-caja,.ck,.ldoc-destacado) :focus-visible{outline-color:var(--accent-2)}
:where(.cta-band) :focus-visible{outline-color:#fff}
@media(max-width:1080px){ .nav :focus-visible{outline-color:var(--accent-2)} }
.field input,.field select,.field textarea{
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 4px rgba(196,13,22,.12)}
@media(hover:hover){
  .btn-ghost:hover{background:rgba(14,14,16,.03)}
  .hero .btn-ghost:hover,.night .btn-ghost:hover,.cta-band .btn-ghost:hover{background:rgba(255,255,255,.06)}
}
.consent{color:var(--ink-2)}

/* 7. Tres tamaños de título de tarjeta en lugar de nueve */
:root{--t-card:clamp(1.04rem,1.5vw,1.16rem);--t-row:clamp(1.08rem,1.7vw,1.26rem)}
.cu h3,.extra h3,.palm-txt h3,.coach h3,.alt-h,.cta-preguntas h3,.linea h3,
.serv-nom,.alt-txt b{font-size:var(--t-card);line-height:1.25;letter-spacing:-.018em}
.cam-t b,.paso-txt h3{font-size:var(--t-row)}

/* 8. Precio del bono: «90 € al mes» se leía «90 €almes» (heredaba el tracking
      negativo de la cifra). Y el bono único, a dos columnas en escritorio */
.plan .price span,.price span{letter-spacing:0}
.plan .price{margin:8px 0 22px}
@media(min-width:700px){
  .plan:only-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    column-gap:clamp(36px,5vw,72px);align-content:start}
  .plan:only-child > :not(.tag){grid-column:1}
  .plan:only-child > ul.ticks{grid-column:2;grid-row:1 / span 6;align-self:center;
    margin:0;padding-left:clamp(28px,4vw,56px);border-left:1px solid var(--line)}
  .plan:only-child .plan-foot{text-align:left}
}

/* 9. Portada en móvil: el número de los tres caminos siempre a la izquierda */
@media(max-width:600px){
  .camino{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:10px;align-items:start}
  .cam-n{padding-top:4px}
  .cam-mas{grid-column:2;margin-top:0}
}

/* 10. Ruleta de Cross training: el punto elegido ya no pisa el subtítulo */
.ruleta-circulo{margin-block:clamp(30px,3.6vw,48px) clamp(8px,1.6vw,20px)}

/* 11. Palmarés: el texto justo debajo del título y la etiqueta en una línea */
@media(min-width:601px){
  .palm-txt h3{min-height:2.5em}
  .palm-txt p{margin-top:0;padding-top:0}
}
@media(max-width:600px){ .palm .palm-dep{white-space:nowrap;letter-spacing:.03em;font-size:.75rem} }   /* 12 px: mínimo legible de la auditoría móvil */
/* en móviles muy estrechos «Fútbol americano» no cabe en una línea: se parte con forma de etiqueta, sin bajar la letra */
@media(max-width:380px){ .palm .palm-dep{white-space:normal;line-height:1.3;border-radius:10px} }

/* 12. Cabeceras de página con fondo de marca (blanco → arena con un halo rojo
       muy suave, el mismo gesto del hero en claro) y migas alineadas al H1 */
:root{--gut:22px}
.page-head{position:relative;isolation:isolate}
.page-head::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 90% at 96% 92%,rgba(246,18,28,.07),transparent 70%),
    linear-gradient(180deg,#fff 0%,var(--sand) 100%)
}

/* 13. Entrada escalonada en las rejillas que aparecían de golpe */
@keyframes sube-suave{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  :is(.caminos,.reviews,.casos-uso,.extras,.bloques,.g4-auto,.hoy-galeria).rv{opacity:1;transform:none}
  :is(.caminos,.reviews,.casos-uso,.extras,.bloques,.g4-auto,.hoy-galeria).rv:not(.in) > *{opacity:0}
  :is(.caminos,.reviews,.casos-uso,.extras,.bloques,.g4-auto,.hoy-galeria).rv.in > *{animation:sube-suave .7s var(--ease) backwards}
  :is(.caminos,.reviews,.casos-uso,.extras,.bloques,.g4-auto,.hoy-galeria).rv.in > :nth-child(2){animation-delay:.07s}
  :is(.caminos,.reviews,.casos-uso,.extras,.bloques,.g4-auto,.hoy-galeria).rv.in > :nth-child(3){animation-delay:.14s}
  :is(.caminos,.reviews,.casos-uso,.extras,.bloques,.g4-auto,.hoy-galeria).rv.in > :nth-child(4){animation-delay:.21s}
  :is(.caminos,.reviews,.casos-uso,.extras,.bloques,.g4-auto,.hoy-galeria).rv.in > :nth-child(5){animation-delay:.28s}
  :is(.caminos,.reviews,.casos-uso,.extras,.bloques,.g4-auto,.hoy-galeria).rv.in > :nth-child(n+6){animation-delay:.35s}
}

/* 14. Preguntas frecuentes: responden al ratón con la curva común */
.faq summary{transition:color var(--dur) var(--ease-out)}
.faq summary::after{transition:transform var(--dur) var(--ease-out),top var(--dur) var(--ease-out)}
@media(hover:hover){ .faq summary:hover{color:var(--accent)} }

/* 15. Pie: las píldoras recuperan su relleno (las pisaba .site-footer a) */
.site-footer .foot-rating{display:inline-flex;padding:8px 13px}
.site-footer .legal-nav a{display:inline-flex;align-items:center;padding:7px 13px}
@media(max-width:640px){ .site-footer .legal-nav a{min-height:44px} }
.nw{white-space:nowrap}

/* 16. Franja roja final: titular en 2-3 líneas junto a su botón, con aire
       hasta el texto; el texto en blanco y negrita (contraste AA de texto grande) */
.cta-band .cta-txt{flex:0 1 780px;min-width:0}
.cta-band h2{max-width:none;text-wrap:balance}
.cta-band .cta-txt p{max-width:42em;color:#fff;font-weight:700;font-size:clamp(1.17rem,1.5vw,1.22rem)}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:560px){
  .cta-btns{flex:1 1 100%}
  .page-head .btn{flex:1 1 100%;justify-content:center}
}

/* 17. Mapa: mientras no se carga, la caja crece si su aviso no cabe
       (antes «Abrir en Google Maps» quedaba cortado en móvil y tableta) */
.mapa:not(.cargado){overflow:visible}

/* 18. Antes y después: cuatro tarjetas exactas en escritorio (la cuarta se
       cortaba 3 px) y, en móvil, el carrusel y las pestañas llegan al canto */
@media(min-width:901px){ .tr-caso{flex:0 0 clamp(250px,calc((100% - 48px) / 4),320px)} }
@media(max-width:600px){
  .tr-pista,.tr-tabs{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
}

/* 19. Tablas de bonos en móvil: caben enteras, sin esconder la columna Open Box */
@media(max-width:600px){
  .tabla-dur thead th,.tabla-dur tbody th{letter-spacing:.02em}
  .mas-bonos-cuerpo .table-wrap{margin-inline:-12px}
  .mas-dur .table-wrap{margin-inline:-16px}
}

/* 20. Equipo en móvil: con tres tarjetas, la tercera centrada (no sola a la izquierda) */
@media(max-width:600px){
  .caras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caras > .cara:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
}

/* 22. Equipo: Aarón e Iván un pelín más grandes que el resto de entrenadores (no el doble) y centrados
   (14/10/2026, Adrián). Con el 77 % del ancho, cada uno sale ~1,15 veces la tarjeta de un entrenador.
   En móvil (≤600 px) las dos filas van a dos columnas: la de los entrenadores se estrecha al 88 % para que
   Aarón e Iván sigan siendo un poco más grandes. */
@media(min-width:601px){
  .caras-jefes{grid-template-columns:repeat(2,minmax(0,1fr));width:77%;margin-inline:auto}
}
@media(max-width:600px){
  .caras:not(.caras-jefes){width:88%;margin-inline:auto}
}

/* 21. Historia: con un texto muy largo al lado, la foto acompaña al leer */
@media(min-width:881px){
  .split-largo{align-items:start}
  .split-largo .shot{position:sticky;top:110px}
}
.night .wrap > p{max-width:68ch}
.hoy-galeria + p{margin-top:clamp(28px,3.4vw,40px)}

/* 22. Páginas legales: apartados a su distancia (heredaban el relleno de
       sección y quedaban 222 px entre uno y otro) y listas sin «visto bueno» */
.ldoc-sec{padding:0}
.ldoc-sec + .ldoc-sec{margin-top:clamp(40px,4.5vw,56px)}
.ldoc-lista{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:9px}
.ldoc-lista li{position:relative;padding-left:22px;color:var(--ink);line-height:1.55}
.ldoc-lista li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:2px;background:var(--accent)}
.ldoc-nota{background:var(--sand);border:0;border-left:3px solid var(--line);border-radius:0 8px 8px 0;color:var(--ink-2)}

/* 23. Tienda: nombres visibles en el bloque oscuro, precios alineados en la fila */
.night .ti h3{color:var(--ink)}
.ti-txt h3{min-height:2.6em}
@media(max-width:600px){ .ti-txt h3{min-height:3.9em} }

/* 24. Instalaciones en móvil: siempre antetítulo, texto y después su carrusel */
/* mismo criterio que el resto de la web en móvil: primero la imagen y después su texto (así nunca
   quedan dos carruseles seguidos) */
@media(max-width:880px){ .split > .inst-carrusel{order:-1;width:100%;align-self:stretch} }

/* 25. Menú móvil: sin velo gris sobre la cabecera cuando está cerrado, sin
       enlaces invisibles en el tabulador, e Instalaciones y Tienda plegados
       (se abren con su flecha; antes el menú medía casi dos pantallas) */
@media(max-width:1080px){
  .nav{box-shadow:none;visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s}
  .nav.open{box-shadow:0 20px 60px rgba(0,0,0,.4);visibility:visible;transition:transform .45s var(--ease),visibility 0s}
  .nav-grupo-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;border-bottom:1px solid var(--line-night)}
  .nav .nav-grupo-link > a{border-bottom:0}
  .nav-grupo-link .nav-bt-mini{display:inline-flex;align-items:center;justify-content:center;
    width:52px;margin:0;padding:0;color:var(--on-night-2);border-radius:10px}
  .nav-grupo-link .nav-bt-mini svg{width:20px;height:20px}
  .nav-grupo-link[data-abierto] .nav-bt-mini{color:#fff}
  .nav-grupo-link .nav-sub{grid-column:1/-1;display:none;padding-bottom:10px}
  .nav-grupo-link[data-abierto] .nav-sub{display:block}
  .nav-grupo-link .nav-sub-t{display:none}
  .nav .nav-grupo-link .nav-sub a{font-size:1rem;font-weight:600;padding:11px 4px 11px 16px;border-bottom:0;color:var(--on-night-2)}
  .nav .nav-grupo-link .nav-sub a:hover{color:#fff}
}
@media(max-width:1080px) and (prefers-reduced-motion:reduce){
  .nav,.nav.open{transition:none}
}

/* 26. Instalaciones: la galería final pasa a cuatro fotos (antes había tres tomas casi
       iguales de la cabina roja): 4 columnas, 2 en tableta y en móvil */
@media(max-width:900px){ .inst-galeria.g4{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px} }

/* 27. Grupos de botones en una línea con su hueco (antes iban pegados) */
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* 28. Contacto: columnas alineadas arriba y datos como dato, no como botón */
.contacto-sec{padding-top:clamp(32px,4vw,56px)}
.split-top{align-items:start}
.datos-contacto{margin:26px 0 30px;display:grid;gap:0;border-top:1px solid var(--line)}
.datos-contacto > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.datos-contacto dt{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.datos-contacto dd{margin:0;color:var(--ink);font-weight:600}
.datos-contacto a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;
  transition:text-decoration-color var(--dur) var(--ease-out)}
.datos-contacto a:hover{text-decoration-color:var(--accent)}
@media(max-width:420px){ .datos-contacto > div{grid-template-columns:96px minmax(0,1fr);gap:12px} }

/* 29. Preguntas frecuentes: temas y WhatsApp a la izquierda, preguntas agrupadas a la derecha */
.faq-lay{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.faq-lado{position:sticky;top:110px;display:grid;gap:24px}
.faq-idx{display:flex;flex-direction:column;border-left:2px solid var(--line)}
.faq-idx a{text-decoration:none;font-weight:700;font-size:.95rem;color:var(--ink-2);
  padding:8px 0 8px 16px;margin-left:-2px;border-left:2px solid transparent;
  transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.faq-idx a:hover{color:var(--ink);border-left-color:var(--accent)}
.faq-caja{background:var(--sand);border-radius:var(--r-lg);padding:var(--pad-card)}
.faq-caja-t{font-weight:800;font-size:1.08rem;margin:0 0 8px;color:var(--ink)}
.faq-caja p:not(.faq-caja-t){color:var(--ink-2);font-size:.95rem;margin-bottom:18px}
.faq-grupo{scroll-margin-top:110px}
.faq-grupo + .faq-grupo{margin-top:clamp(40px,5vw,60px)}
.faq-grupo .faq{max-width:none}
@media(max-width:880px){
  .faq-lay{grid-template-columns:1fr}
  /* en una columna: temas arriba, preguntas y, al final, la caja de WhatsApp */
  .faq-lado{display:contents}
  .faq-idx{order:0;flex-direction:row;flex-wrap:wrap;gap:8px;border-left:0}
  .faq-idx a{border:1px solid var(--line);border-radius:999px;padding:8px 15px;margin:0;font-size:.88rem}
  .faq-idx a:hover{border-color:var(--ink)}
  .faq-grupos{order:1}
  .faq-caja{order:2}
}

/* 30. Pie: botón para cambiar la decisión de cookies, con el mismo aspecto que los enlaces legales */
.legal-nav .ck-cambiar{font:inherit;font-size:.8rem;color:var(--on-night-2);background:none;cursor:pointer;
  padding:7px 13px;border:1px solid var(--line-night);border-radius:999px;white-space:nowrap;
  transition:border-color .3s,color .3s}
.legal-nav .ck-cambiar:hover{border-color:var(--accent-2);color:#fff}
@media(max-width:640px){ .legal-nav .ck-cambiar{min-height:44px} }

/* =========================================================
   ACABADO II · segunda pasada (10/10/2026), tras la revisión final
   ========================================================= */
/* Tablas de bonos: caben enteras también a 360-375 px */
@media(max-width:400px){ .tabla-dur th,.tabla-dur td{padding:9px 3px} .tabla-dur{font-size:.8rem} }
/* Horario del centro: 4 casillas en 4 columnas o en 2, nunca 3+1 */
.horario-centro .hm-lista{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:880px){ .horario-centro .hm-lista{grid-template-columns:1fr 1fr} }
/* «También hacemos»: en tableta, la tercera tarjeta ocupa la fila entera */
@media(min-width:601px) and (max-width:920px){ .extras > .extra:last-child:nth-child(odd){grid-column:1/-1} }
/* Pie: la pastilla de reseñas, cuando no cabe en una línea, se parte con forma de etiqueta */
@media(min-width:641px) and (max-width:1180px){ .site-footer .foot-rating{border-radius:16px;text-wrap:balance} }
@media(max-width:640px){ .site-footer .legal-nav a,.legal-nav .ck-cambiar{justify-content:center;text-align:center} }
/* Menú móvil: todos los filetes rectos y el botón de clase de prueba siempre a la vista */
@media(max-width:1080px){
  .nav > a:not(.btn),.nav .nav-sub a{border-radius:0}
  .nav > .btn{position:sticky;bottom:14px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
}
/* Antetítulos en móvil: más compactos y, si se parten, la raya a la altura de la primera línea */
.eyebrow{align-items:flex-start}
.eyebrow::before{margin-top:.5em}
@media(max-width:600px){ .eyebrow{font-size:.72rem;letter-spacing:.14em} }
/* Franja roja con dos botones: los botones, apilados a la derecha del texto (como en el resto) */
@media(min-width:901px){
  .cta-band .cta-inner{flex-wrap:nowrap}
  .cta-band .cta-btns{flex:none}
  .cta-band .cta-btns:has(> .btn + .btn){flex-direction:column;align-items:stretch}
}
/* Antes y después: entre 901 y 1091 px caben tres tarjetas exactas (con cuatro, se cortaba la última) */
@media(min-width:901px) and (max-width:1091px){ .tr-caso{flex-basis:calc((100% - 32px) / 3)} }
/* En móvil, los botones del cuerpo de la página van a ancho completo, como en cabeceras y franjas */
@media(max-width:560px){
  main p:has(> .btn){display:flex;flex-wrap:wrap;gap:12px}
  main p:has(> .btn) > .btn{flex:1 1 100%;justify-content:center}
}
/* Cifras: etiquetas sin palabras sueltas en la segunda línea */
.proof-item .lbl,.proof-hist span{text-wrap:balance}
.proof-hist span{display:block;line-height:1.45}
/* Equipo en móvil: la foto de la ficha centrada, como la tarjeta de encima */
@media(max-width:600px){ .ficha-foto{margin-inline:auto;width:100%} }
/* Movimiento reducido: sin animaciones, pero los retratos siguen en reposo (grises) salvo el elegido */
@media(prefers-reduced-motion:reduce){
  .portrait .shot{filter:grayscale(.72) contrast(1.08) brightness(.82)}
  .portrait::after{opacity:1}
  .portrait::before{clip-path:inset(0 100% 100% 0)}
  .portrait:hover .shot,.portrait:focus-within .shot,.cara.is-on .portrait .shot,.ficha-foto .portrait .shot{filter:none}
  .portrait:hover::after,.portrait:focus-within::after,.cara.is-on .portrait::after,.ficha-foto .portrait::after{opacity:0}
  .portrait:hover::before,.portrait:focus-within::before,.cara.is-on .portrait::before,.ficha-foto .portrait::before{clip-path:inset(0)}
}
/* Legales: la fecha se ve sobre el degradado de la cabecera y las listas van al cuerpo del texto */
.page-head .ldoc-fecha{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
@media(max-width:900px){ .ldoc-lista li{font-size:.96rem} }
/* Contacto: la columna del mapa y el horario acompaña al formulario al bajar */
@media(min-width:881px){ .contacto-sec .split-top > div:last-child{position:sticky;top:110px} }
/* Horarios: la fila se marca al pasar el ratón, para seguirla con la vista */
@media(hover:hover){ .semana tbody tr:hover th,.semana tbody tr:hover td{background:rgba(14,14,16,.025)} }
/* Tienda: casilla final para preguntar por otros productos, que completa la última fila */
.ti-mas{grid-column:span var(--span-d,1);display:flex;flex-direction:column;justify-content:center;gap:10px;
  background:var(--sand);border:1px dashed var(--line);border-radius:var(--r-lg);padding:var(--pad-card)}
.ti-mas b{font-size:1.05rem}
.ti-mas p{margin:0;color:var(--ink-2);font-size:.94rem}
.ti-mas .btn{align-self:flex-start}
@media(max-width:600px){ .ti-mas{grid-column:span var(--span-m,1)} }


/* =========================================================
   BORDE VIVO + RULETA II (10/10/2026, Adrián)
   «Que se vaya moviendo alrededor del borde… sin que sea demasiado
   llamativo: que inconscientemente se note que es mejor.»
   1) Borde vivo: una luz roja fina recorre el borde de las cajitas.
      En reposo apenas se ve; al pasar el ratón se enciende y engorda.
      El gris de las líneas no cambia. Sustituye al degradado quieto
      de PULIDO (mismo ::after, ahora con degradado cónico que gira).
   2) Líneas divisorias: un brillo rojo tenue las cruza de vez en cuando.
   3) Ruleta II: la órbita se carga del bloque activo al siguiente y eso
      marca el ritmo (animationend en app.fuente.js y bundle.py), con
      cometa, onda al llegar, barras de progreso y número perfilado.
   Sin @property (navegadores viejos) la luz se queda quieta: no rompe.
   Movimiento reducido: todo quieto y la ruleta no avanza sola.
   ========================================================= */
@property --bv{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --bl{syntax:'<percentage>';inherits:false;initial-value:-30%}
@keyframes bv-vuelta{to{--bv:360deg}}
:root{--bv-t:11s;--rl-t:5s;--bv-borde:var(--line)}
.night,.cu-mas{--bv-borde:var(--line-night)}

/* 1) Borde vivo */
.cu,.extra,.camino,.bloque,.titus,.ti,.precio-caja,.cta-preguntas,.ti-mas,.mas-bonos,.horario-mini{position:relative}
:is(.card,.plan,.serv,.review,.palm,.tr-caso,.coach,.cu,.extra,.camino,.bloque,.titus,.ti,.precio-caja,.cta-preguntas,.ti-mas,.mas-bonos,.horario-mini)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--bv),
    rgba(246,18,28,0) 0 52%,rgba(246,18,28,.12) 70%,rgba(246,18,28,.55) 92%,
    var(--accent-pure) 99.3%,rgba(246,18,28,0) 99.5%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.32;
  animation:bv-vuelta var(--bv-t) linear infinite;animation-delay:var(--bv-d,0s);
  transition:opacity var(--dur) var(--ease-out),padding var(--dur) var(--ease-out)
}
/* cada caja va por un punto distinto de la vuelta: nunca en fila */
:is(.card,.plan,.serv,.review,.palm,.tr-caso,.coach,.cu,.extra,.camino,.bloque,.titus,.ti,.precio-caja,.cta-preguntas,.ti-mas,.mas-bonos,.horario-mini):nth-child(4n+2){--bv-d:-2.75s}
:is(.card,.plan,.serv,.review,.palm,.tr-caso,.coach,.cu,.extra,.camino,.bloque,.titus,.ti,.precio-caja,.cta-preguntas,.ti-mas,.mas-bonos,.horario-mini):nth-child(4n+3){--bv-d:-5.5s}
:is(.card,.plan,.serv,.review,.palm,.tr-caso,.coach,.cu,.extra,.camino,.bloque,.titus,.ti,.precio-caja,.cta-preguntas,.ti-mas,.mas-bonos,.horario-mini):nth-child(4n+4){--bv-d:-8.25s}
/* en oscuro el rojo tenue se pierde: un poco más de luz */
:is(.night,.cu-mas) :is(.card,.palm,.precio-caja)::after,.cu-mas::after{opacity:.5}
/* Luz del ratón: segunda capa (::before) más viva, más rápida y con más estela,
   como el degradado rojo que ya gustaba, pero dando la vuelta. Va parada
   (paused) hasta que entra el ratón, así no gasta nada en reposo; al entrar,
   funde con la luz tenue de ::after, sin saltos. */
:is(.card,.plan,.serv,.review,.palm,.tr-caso,.coach,.cu,.extra,.camino,.bloque,.titus,.ti,.precio-caja,.cta-preguntas,.ti-mas,.mas-bonos,.horario-mini)::before{
  content:"";display:block;position:absolute;inset:0;width:auto;height:auto;transform:none;
  border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--bv),
    rgba(246,18,28,0) 0 28%,rgba(246,18,28,.22) 52%,rgba(246,18,28,.72) 80%,
    var(--accent-pure) 95%,rgba(246,18,28,.4) 98.6%,rgba(246,18,28,0) 99.6%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;animation:bv-vuelta 3.8s linear infinite paused;animation-delay:var(--bv-d,0s);
  transition:opacity .45s var(--ease-out)
}
@media(hover:hover){
  :is(.card,.plan,.serv,.review,.palm,.tr-caso,.coach,.cu,.extra,.camino,.bloque,.titus,.ti,.precio-caja,.cta-preguntas,.ti-mas,.mas-bonos,.horario-mini):hover::before{opacity:1;animation-play-state:running;transform:none}
  :is(.card,.plan,.serv,.review,.palm,.tr-caso,.coach,.cu,.extra,.camino,.bloque,.titus,.ti,.precio-caja,.cta-preguntas,.ti-mas,.mas-bonos,.horario-mini):hover::after{opacity:0}
  /* el gris del borde se queda (PULIDO lo quitaba): la caja no pierde el contorno */
  .card:hover,.serv:hover,.review:hover,.coach:hover,.palm:hover,.tr-caso:hover{border-color:var(--bv-borde)}
  .cu:hover{border-color:var(--line)}
  .cu-mas:hover{border-color:var(--night)}
}

/* 2) Líneas divisorias: un brillo que las cruza y descansa */
@keyframes bl-pasa{0%{--bl:-30%}42%,100%{--bl:130%}}
.page-head,.faq,.datos-contacto,.rl-datos{
  border-image:linear-gradient(90deg,var(--line) calc(var(--bl) - 24%),rgba(246,18,28,.42) var(--bl),var(--line) calc(var(--bl) + 24%)) 1;
  animation:bl-pasa 12s var(--ease-out) infinite
}
.proof,.legal{
  border-image:linear-gradient(90deg,var(--line-night) calc(var(--bl) - 24%),rgba(255,90,80,.5) var(--bl),var(--line-night) calc(var(--bl) + 24%)) 1;
  animation:bl-pasa 12s var(--ease-out) infinite;animation-delay:-4s
}
.faq,.rl-datos{animation-delay:-7s}

/* 3) Ruleta II */
.rl-pista{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
  transform:rotate(calc(var(--desde,0deg) - 90deg))
}
/* 120 de 360 = un tercio de vuelta (tres bloques). Periodo 600 > 360 para que no asome nada al empezar */
.rl-arco{
  fill:none;stroke:var(--accent-pure);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:120 480;stroke-dashoffset:120
}
@keyframes rl-carga{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
.ruleta.carga .rl-arco{animation:rl-carga var(--rl-t) linear both}
.rl-cometa{position:absolute;inset:0;pointer-events:none;transform:rotate(var(--desde,0deg))}
.rl-cometa::before{
  content:"";position:absolute;left:50%;top:14%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2.5px var(--accent-pure),0 0 18px 5px rgba(246,18,28,.45)
}
@keyframes rl-viaja{from{transform:rotate(var(--desde,0deg))}to{transform:rotate(calc(var(--desde,0deg) + 120deg))}}
.ruleta.carga .rl-cometa{animation:rl-viaja var(--rl-t) linear both}
/* espera: fuera de pantalla o leyendo la ficha con el ratón encima */
.ruleta:not(.en-vista) .rl-arco,.ruleta:not(.en-vista) .rl-cometa,.ruleta:not(.en-vista) .rl-barras i.is-on::after,
.ruleta.leyendo .rl-arco,.ruleta.leyendo .rl-cometa,.ruleta.leyendo .rl-barras i.is-on::after{animation-play-state:paused}

/* onda al llegar a un bloque */
.rl-punto::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--accent-pure);
  opacity:0;pointer-events:none
}
@keyframes rl-onda{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}
.rl-punto.is-on::after{animation:rl-onda 1.1s var(--ease-out) both}

/* el centro con su propio borde vivo */
.ruleta-centro::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--bv),rgba(246,18,28,0) 0 45%,rgba(246,18,28,.18) 68%,rgba(246,18,28,.7) 93%,var(--accent-pure) 99.3%,rgba(246,18,28,0) 99.5%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:bv-vuelta 6s linear infinite
}

/* barras de progreso (como las historias): hecha, cargando, pendiente */
.ruleta-fichas{grid-template-rows:auto auto}
.rl-barras{grid-area:1/1;display:flex;gap:6px;width:min(100%,210px);margin-bottom:22px}
.rl-ficha{grid-area:2/1;position:relative;z-index:0}
.rl-barras i{flex:1;height:2px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.rl-barras i::after{
  content:"";position:absolute;inset:0;background:var(--accent-pure);
  transform:scaleX(0);transform-origin:left center
}
.rl-barras i.hecha::after{transform:scaleX(1)}
@keyframes rl-barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ruleta.carga .rl-barras i.is-on::after{animation:rl-barra var(--rl-t) linear both}

/* número grande perfilado detrás de la ficha */
.rl-ficha::before{
  content:attr(data-n);position:absolute;top:-.34em;right:0;z-index:-1;pointer-events:none;
  font-size:clamp(5.5rem,10vw,8.5rem);font-weight:900;font-stretch:125%;letter-spacing:-.05em;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(196,13,22,.16)
}
@keyframes rl-num{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
.rl-ficha.is-on::before{animation:rl-num .9s var(--ease-out) both}

/* entrada escalonada de la ficha: antetítulo, título, textos y datos */
.rl-ficha.is-on{animation:none}
/* 13/10/2026 (Adrián): sin desenfoque al entrar; el título se veía borroso («que se vea definido siempre») */
@keyframes rl-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rl-ficha.is-on > *{animation:rl-sube .6s var(--ease-out) both}
.rl-ficha.is-on > :nth-child(2){animation-delay:.07s}
.rl-ficha.is-on > :nth-child(3){animation-delay:.14s}
.rl-ficha.is-on > :nth-child(4){animation-delay:.21s}
.rl-ficha.is-on > :nth-child(5){animation-delay:.28s}

@media(max-width:600px){
  .rl-cometa::before{width:8px;height:8px;margin:-4px 0 0 -4px}
  .rl-ficha::before{font-size:4.6rem;top:-.2em}
}
@media(prefers-reduced-motion:reduce){
  :is(.card,.plan,.serv,.review,.palm,.tr-caso,.coach,.cu,.extra,.camino,.bloque,.titus,.ti,.precio-caja,.cta-preguntas,.ti-mas,.mas-bonos,.horario-mini)::after,
  :is(.card,.plan,.serv,.review,.palm,.tr-caso,.coach,.cu,.extra,.camino,.bloque,.titus,.ti,.precio-caja,.cta-preguntas,.ti-mas,.mas-bonos,.horario-mini)::before{animation:none;transition:none}
  .page-head,.faq,.datos-contacto,.rl-datos,.proof,.legal{animation:none;border-image:none}
  .rl-pista,.rl-cometa,.ruleta-centro::after{display:none}
  .rl-barras i.is-on::after{animation:none;transform:scaleX(1)}
  .rl-ficha.is-on > *,.rl-ficha.is-on::before,.rl-punto.is-on::after{animation:none}
}

/* =========================================================
   RESULTADOS · comparador de borde a borde y fotos juntas (10/10/2026, Adrián)
   - La línea recorre el 0-100 % (las fotos ya no llevan el sello de Naga);
     el tirador se queda siempre entero dentro de la foto (--tir, en el JS).
   - Arrastrar compara; un clic o un toque sin arrastrar (o el botón ⧉)
     abre las dos fotos juntas, una al lado de la otra.
   - Flechas ‹ › de los carruseles que se deslizan: solo con ratón; en
     táctil se desliza con el dedo y en el iPhone chocaban con el encaje.
   ========================================================= */
.tr-tirador{translate:var(--tir,0px) 0}
.tr-ayuda{margin:8px 0 0;font-size:.92rem;color:var(--muted)}
.tr-juntas{
  position:absolute;top:10px;right:10px;z-index:5;width:36px;height:36px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--ink);cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.18);transition:transform .2s var(--ease),background .2s
}
.tr-juntas svg{width:18px;height:18px}
@media(hover:hover){.tr-juntas:hover{background:#fff;transform:scale(1.08)}}
.tr-juntas:focus-visible{outline:3px solid var(--accent-pure);outline-offset:2px}
.tr-modal{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:64px clamp(12px,3vw,40px) clamp(16px,3vw,40px);
  background:rgba(10,10,12,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:trm-in .25s var(--ease-out)
}
.tr-modal[hidden]{display:none}
@keyframes trm-in{from{opacity:0}to{opacity:1}}
.tr-modal-caja{position:relative;width:min(980px,100%,calc((100vh - 170px) * 1.556 + 12px));animation:trm-caja .3s var(--ease-out)}
@keyframes trm-caja{from{transform:translateY(14px) scale(.98)}to{transform:none}}
.tr-modal-fotos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,1vw,12px)}
.tr-modal-fotos figure{position:relative;margin:0;aspect-ratio:14/18;border-radius:var(--r-lg);overflow:hidden;background:var(--night)}
.tr-modal-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tr-modal-pie{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:14px 2px 0;color:#fff}
.tr-modal-pie b{font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.tr-modal-pie span{font-size:.8rem;font-weight:800;color:#fff;background:var(--accent-pure);padding:5px 11px;border-radius:999px}
.tr-modal-pie small{flex-basis:100%;font-size:.86rem;color:var(--on-night-2)}
.tr-modal-x{
  position:absolute;top:-54px;right:0;width:44px;height:44px;border:0;border-radius:50%;
  background:#fff;color:var(--ink);font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3)
}
.tr-modal-x:focus-visible{outline:3px solid var(--accent-pure);outline-offset:3px}
@media(hover:none) and (pointer:coarse){ .desliza-btns{display:none} }
@media(prefers-reduced-motion:reduce){ .tr-modal,.tr-modal-caja{animation:none} .tr-juntas{transition:none} }

/* =========================================================
   WHATSAPP: verde entero y sin fallos (10/10/2026, Adrián)
   «Se rellena todo verde menos una raya pequeñísima a la derecha que se
   completa al poco». El verde era una capa (::before) que se fundía dentro
   de un botón redondeado con overflow:hidden y un leve desplazamiento: en
   Safari quedaba una línea sin pintar hasta acabar la transición. Ahora se
   pinta el FONDO del propio botón: blanco (o su color) en reposo y verde
   entero al pasar el ratón o al pulsar en móvil.
   ========================================================= */
.btn.wa::before{display:none}
.btn.wa{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color .22s ease,border-color .22s ease,color .22s ease}
@media(min-width:1081px){
  .btn.wa:hover,.btn.wa:focus-visible{background-color:#25D366;border-color:#25D366;color:#fff;box-shadow:0 8px 26px rgba(37,211,102,.34)}
}
@media(max-width:1080px){
  .btn.wa:active{background-color:#25D366;border-color:#25D366;color:#fff}
}

/* =========================================================
   TIENDA · casilla «¿Buscas otro producto?» (10/10/2026, Adrián)
   Completa la última fila de suplementos y se estira a la altura de la
   tarjeta de al lado: en vez de un recuadro vacío, texto a la izquierda y la
   vitrina real de recepción a la derecha. En una sola columna, foto arriba.
   ========================================================= */
.ti-mas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:0;overflow:hidden;
  background:var(--sand);border:1px solid var(--line);justify-content:stretch}
.ti-mas-txt{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(24px,3vw,40px)}
.ti-mas-et{margin:0;font-size:.76rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ti-mas b{font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  text-transform:uppercase;letter-spacing:-.03em;line-height:1.02}
.ti-mas-txt > p:not(.ti-mas-et){margin:0;color:var(--ink-2);font-size:.98rem;max-width:36ch}
.ti-mas .btn{align-self:flex-start;margin-top:6px}
.ti-mas-foto{position:relative;min-height:220px}
.ti-mas-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
/* si solo ocupa una columna (móvil o fila casi llena): foto arriba y texto debajo */
.ti-mas[style*="--span-d:1"]{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.ti-mas[style*="--span-d:1"] .ti-mas-foto{order:-1;aspect-ratio:4/3;min-height:0}
@media(max-width:600px){
  .ti-mas{grid-template-columns:1fr}
  .ti-mas-foto{order:-1;aspect-ratio:4/3;min-height:0}
  .ti-mas-txt{padding:16px 14px 18px;gap:9px}
  .ti-mas b{font-size:1.1rem}
  .ti-mas-txt > p:not(.ti-mas-et){font-size:.88rem}
  .ti-mas .btn{width:100%;justify-content:center}
  .ti-mas-pc{display:none}
}

/* Instalaciones (10/10/2026, Adrián: «mucho espacio encima de la foto, pon el mismo que en las demás»):
   la foto ya no se centra en vertical contra un texto largo; arranca a la altura del título en todas
   las zonas y acompaña al bajar mientras se lee. */
@media(min-width:881px){
  .inst-split{align-items:start}
  .inst-split > .inst-carrusel{position:sticky;top:110px;margin-top:var(--inst-ajuste,40px)}
}

/* =========================================================
   ENTRENAMIENTO PERSONAL con mimo (10/10/2026, Adrián: «la página más importante»)
   Confianza junto al botón, tres antes/después con el comparador de Resultados,
   qué incluye la sesión con la sala, una reseña literal y dudas antes de decidir.
   ========================================================= */
.ep-confianza{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:18px 0 0;font-size:.92rem;color:var(--ink-2)}
.ep-confianza b{color:var(--ink);font-weight:850}
.ep-estrellas{color:#F5A400;letter-spacing:.08em;font-size:.95rem}
.ep-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ep-res .tr-caso{flex:none}
@media(max-width:900px){
  .ep-res{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-20px;padding:0 20px 8px;scrollbar-width:none}
  .ep-res::-webkit-scrollbar{display:none}
  .ep-res .tr-caso{flex:0 0 min(78%,320px);scroll-snap-align:start;scroll-margin-left:20px}
}
.ep-resena-sec{padding-block:clamp(48px,6vw,84px)}
.ep-resena{margin:0 auto;max-width:760px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.ep-resena-nota{margin:0;font-size:.95rem;color:var(--ink-2)}
.ep-resena-nota b{color:var(--ink)}
.ep-resena blockquote{margin:0;font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:700;line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.ep-resena figcaption{font-size:.9rem;color:var(--muted)}
.ep-resena .btn{margin-top:6px}
.split ul.ticks + p{margin-top:18px}

/* Cabeceras con foto (10/10/2026, Adrián: «mucho espacio vacío en PC»): las que no tenían llevan foto como
   Cross training; las de poco texto, apaisada (5/4) para no estirar la cabecera. Resultados va SIN foto
   (Adrián: «no me renta»): titular a lo ancho, en dos líneas, y la cabecera más baja. */
.ph-ancha h1{max-width:none}
.ph-ancha .lead{max-width:60ch}
/* el botón de ver las dos fotos juntas, a tamaño de dedo en pantallas táctiles */
@media(hover:none),(max-width:900px){ .tr-juntas{width:44px;height:44px;top:8px;right:8px} .tr-juntas svg{width:20px;height:20px} }
.ep-confianza{display:block;line-height:1.6}
.ep-confianza .ep-estrellas{margin-right:6px}

/* Horarios (11/10/2026): el Open Box no va por franjas; aviso propio encima de la leyenda */
.open-todo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:14px 18px;
  background:var(--sand);border:1px solid var(--line);border-radius:var(--r)}
.open-todo p{margin:0;flex:1 1 320px;font-size:.95rem;color:var(--ink-2)}
.open-todo p b{color:var(--ink)}
/* Open Box como columna continua entre la hora y el lunes (11/10/2026): una sola celda de arriba abajo */
.semana .th-open{width:58px;padding:0}
.semana td.td-open{width:58px;padding:10px 0;vertical-align:middle;border-bottom:0;
  background:repeating-linear-gradient(180deg,#EDE9E1 0 10px,#E6E1D7 10px 20px)!important;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.td-open-txt{display:inline-flex;align-items:center;gap:10px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.td-open-txt b{font-size:.92rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.td-open-txt small{font-size:.78rem;font-weight:600;color:var(--ink-2)}
.dia-lista li.dia-open{background:#EDE9E1;border-color:#E2DCD0}
.dia-lista li.dia-open small{margin-left:auto;font-size:.78rem;color:var(--ink-2)}
.dia-lista li.dia-open .dia-hora{min-width:0;font-size:.82rem}
/* Formulario de contacto por correo (11/10/2026) */
.form .trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-estado{margin:14px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--sand);font-size:.95rem;color:var(--ink-2)}
.form-estado.ok{background:#ECFDF3;color:#14532D;border:1px solid #BBF7D0}
.form-estado.error{background:#FFF4ED;color:#9A3412;border:1px solid #FED7AA}
.form-estado a{color:inherit;font-weight:750}
/* El número perfilado de la ruleta entra desde la derecha: que no desborde la página en móvil (11/10/2026) */
.ruleta-fichas{overflow-x:clip}

/* =========================================================
   SIN MATRÍCULA (12/10/2026, Adrián: «No hay matrícula, que quede claro»)
   Aviso destacado antes de los bonos y una línea en cada tarjeta.
   ========================================================= */
.sin-mat{
  display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;
  margin:0 0 clamp(28px,4vw,40px);padding:16px 22px;
  background:var(--accent-soft);border:1px solid #f5cfcd;border-left:5px solid var(--accent);
  border-radius:var(--r);
}
.sin-mat-sello{
  font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  text-transform:uppercase;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.55rem,3.4vw,2.3rem);color:var(--accent);white-space:nowrap;
}
.sin-mat p{margin:0;color:var(--ink);font-size:1.05rem;line-height:1.45;max-width:60ch}
.plan-sinmat{
  margin:-4px 0 14px;font-weight:700;font-size:.92rem;color:var(--accent);
  display:flex;align-items:center;gap:7px;
}
.plan-sinmat::before{content:"";width:16px;height:2px;background:currentColor;border-radius:2px;flex:none}


/* Inicio › «02 · Entrenamiento personal» (12/10/2026, Adrián): un antes y después dentro de la ventana de detalle
   y el enlace a todos los cambios físicos de Entrenamiento personal */
.cam-cambio{margin:18px 0 6px}
.cam-cambio .tr-caso{max-width:300px;margin:0 auto}
.cam-cambio-mas{text-align:center;margin:12px 0 0}

/* Foto de calidad baja (París 2024, móvil): se enseña más pequeña para que no se note (Adrián, 12/10/2026) */
.shot.shot-peq{max-width:440px;width:100%;margin-inline:auto;align-self:center}