/* ==critico== */
/* Lo que va entre ==critico== y ==/critico== (esta cabecera hasta el
   revelado, y el bloque responsive del final) es lo que pinta la primera
   pantalla. scripts/sellar.mjs lo copia dentro de cada pagina, en un
   <style id="critico">, para que el primer trazado no espere a esta hoja;
   el resto llega despues sin bloquear nada. check.mjs comprueba que lo
   copiado coincide con esto. */
/* 202 Entrenamiento Personal.
   Hoja de estilos única, compartida por la portada y las interiores.

   Dirección: editorial cálida sobre marfil. El negro deja de ser el lienzo y
   pasa a ser la tinta; el protagonismo visual lo recuperan las fotografías
   reales del centro y el ocre de su pared.

   El ocre no es un color elegido a ojo: está muestreado de la pared del
   propio local en assets/img/centro.webp (mediana #AC7231).
   ============================================================ */

/* ── Tipografias ─────────────────────────────────────────────────────
   Autoalojadas. Antes venian de Google: el navegador tenia que abrir dos
   conexiones a terceros (fonts.googleapis.com para el CSS y luego
   fonts.gstatic.com para los archivos) antes de poder pintar el texto
   definitivo. Sirviendolas desde aqui van en la misma conexion que ya
   esta abierta, y de paso no se manda la IP de nadie a un tercero.

   Solo el subconjunto latino: cubre castellano y gallego, el simbolo del
   euro y los guiones tipograficos. El resto (vietnamita, latino extendido)
   no se usa en esta web y eran 18 archivos mas.

   Las caras son las que el navegador pinta de verdad, medidas sobre las 7
   paginas. Barlow Condensed 600 no la usaba nadie. Barlow 700 si la usaban
   36 elementos (los <strong> del texto), pero no se pedia: Chrome la
   engordaba a mano, que se nota y se ve peor que la negrita de verdad.
   ──────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/barlow-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/barlow-500.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/barlow-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/barlow-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-600-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── LAS FUENTES DE RESPALDO, A LA MISMA MEDIDA ──────────────────────
   Con font-display:swap el texto se pinta antes con la fuente del sistema y
   cambia a la nuestra al llegar. Si las dos no miden lo mismo, el texto se
   reajusta y lo que hay debajo salta: en la 404 eso valia 0,174 de
   Cumulative Layout Shift, el peor dato de todo el sitio.

   Estas tres caras no descargan nada: son la fuente que ya tiene el sistema
   (Arial y Georgia, o sus equivalentes en Android y Linux) estirada para que
   la altura de mayuscula y el ancho medio coincidan con los de Barlow,
   Barlow Condensed y Cormorant Garamond. Los numeros salen de las metricas
   reales de cada fuente (capsize), no a ojo. Van justo detras de la nuestra
   en cada pila: 'Barlow','Barlow Fallback',system-ui...
   ──────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Barlow Fallback';
  src:local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Roboto'), local('Helvetica Neue');
  ascent-override:103.4341%;descent-override:20.6868%;line-gap-override:0%;size-adjust:96.68%}
@font-face{font-family:'Barlow Condensed Fallback';
  src:local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Roboto'), local('Helvetica Neue');
  ascent-override:130.7334%;descent-override:26.1467%;line-gap-override:0%;size-adjust:76.4916%}
@font-face{font-family:'Cormorant Garamond Fallback';
  src:local('Georgia'), local('Times New Roman'), local('Tinos'), local('Noto Serif');
  ascent-override:104.5482%;descent-override:32.4733%;line-gap-override:0%;size-adjust:88.3803%}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}



:root{
  /* ── Superficies. Tres marfiles, no uno: dan ritmo sin invertir el tema ── */
  --bg:#F5F2EC;
  --bg-alt:#ECE7DE;
  --surface:#FAF8F4;
  --dark:#151515;

  /* ── Tinta. El gris medio del brief (#817C74) da 3,71 sobre marfil y no
       llega a AA para texto corrido; se oscurece a #6B6760, que da 5,03 ── */
  --ink:#161616;
  --ink-soft:#55524C;
  --ink-muted:#6B6760;

  /* ── Ocre de la pared ──
       --wall  es el tono real muestreado.
       --accent es el de relleno (botón, distintivo, pestaña activa): con
               tinta #161616 encima da 4,72 y cumple AA.
       --accent-ink es el de TEXTO en ocre sobre marfil: 5,30, cumple AA.
               Hacen falta los dos; uno solo no cubre ambos usos. */
  --wall:#AC7231;
  --accent:#B0762C;
  --accent-ink:#8F571A;
  --accent-dark:#7A4912;
  --accent-soft:#E7D3B4;
  --accent-tint:rgba(176,118,44,.10);

  /* Tinta SOBRE el ocre, y superficie elevada. Estaban fijas en el codigo y
     eran justo lo que impedia tener modo oscuro. */
  --on-accent:#161616;
  --on-accent-hover:#FFFFFF;
  --surface-hi:#FFFFFF;
  --av-ink:#5C360B;
  /* Superficies translucidas y realces. Estaban fijas en valores claros y
     eran lo que dejaba el nav en marfil sobre fondo oscuro. */
  --nav-bg:rgba(245,242,236,.92);
  --veil:rgba(250,248,244,.94);
  --hover-wash:rgba(22,22,22,.04);
  --sombra:rgba(22,22,22,.10);
  --marca-agua:rgba(22,22,22,.04);
  /* Tinta para las superficies que son oscuras en los dos modos: el pie y
     el visor de fotos. No puede ser --bg, que cambia con el tema. */
  --sobre-oscuro:#F5F2EC;

  --border:rgba(22,22,22,.12);
  --border-strong:rgba(22,22,22,.22);
  --border-light:rgba(245,242,236,.16);

  /* ── Radios moderados y consistentes ── */
  --sp-borde:56px;            /* cuanto se difumina el borde de la galeria */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;

  /* ── Escala de espaciado ── */
  --s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;
  /* Los tres escalones grandes son fluidos; los seis pequenos, no. Por debajo
     de 48px un hueco es estructura -la distancia entre un rotulo y su dato- y
     mide igual en un movil que en un monitor. Por encima es aire, y el aire
     tiene que encoger con la pagina: en un movil, el hueco entre un titular de
     seccion y su contenido (64px) medía lo mismo que el que separa dos
     secciones (64px), asi que la jerarquia se perdia justo donde menos sitio
     hay. En escritorio no cambia nada: 64, 96 y 128 como siempre. */
  --s7:clamp(40px,32px + 2.222vw,64px);
  --s8:clamp(56px,42.67px + 3.704vw,96px);
  --s9:clamp(72px,53.33px + 5.185vw,128px);

  --z-grain:5;--z-nav:100;--z-menu:101;--z-lb:200;--z-modal:300;
  --ease:cubic-bezier(.32,.72,0,1);
  --t:160ms;
  /* Muelle: rebasa un poco y se asienta. Para lo que responde a una accion
     (pulsar, elegir, abrir). Lo que entra al hacer scroll sigue con --ease,
     sin rebote: ahi el movimiento no responde a nadie. */
  --spring:cubic-bezier(.22,1.2,.36,1);
  --t-spring:420ms;
}

/* ── Modo oscuro ──────────────────────────────────────────────────────
   El sitio se diseño en marfil y ese sigue siendo su tono. Esto no es otro
   diseño: son los mismos tokens con los papeles invertidos, para quien lleva
   el movil en oscuro y no quiere una pagina blanca a las once de la noche.

   Los fondos son calidos, no grises: un marfil muy oscurecido. Si se usa un
   gris neutro, el ocre de la pared deja de pertenecer a la pagina.

   El ocre sube de tono en vez de bajar. En marfil hacian falta dos ocres
   -uno para rellenar y otro, mas oscuro, para texto-; sobre fondo oscuro el
   mismo valor sirve para los dos, porque el contraste ya viene del fondo.
   Y el hover aclara en lugar de oscurecer, que es lo que espera el ojo.

   Todos los pares los verifica scripts/check.mjs en los dos modos.
   ──────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14120F;
    --bg-alt:#1C1915;
    --surface:#221E19;
    --surface-hi:#2A251F;
    --dark:#0E0C0A;

    --ink:#F2EEE7;
    --ink-soft:#C7C0B5;
    --ink-muted:#A9A195;

    --wall:#AC7231;
    --accent:#C98F3E;
    --accent-ink:#C98F3E;
    --accent-dark:#E0B06A;
    --accent-soft:#4A3820;
    --accent-tint:rgba(201,143,62,.14);

    --on-accent:#14120F;
    --on-accent-hover:#14120F;
    --av-ink:#F0D8B4;

    --border:rgba(242,238,231,.13);
    --border-strong:rgba(242,238,231,.26);

    --nav-bg:rgba(20,18,15,.92);
    --veil:rgba(20,18,15,.90);
    --hover-wash:rgba(242,238,231,.06);
    --sombra:rgba(0,0,0,.45);
    --marca-agua:rgba(242,238,231,.05);
  }
  /* El grano multiplicaba sobre marfil; sobre un fondo oscuro eso lo borra.
     Aclarando en vez de oscurecer se conserva la textura de papel. */
  .grain{mix-blend-mode:screen;opacity:.26}
  /* El marco del logotipo es negro y sobre fondo oscuro desaparecia. */
  .nl img,.fll img{background:#2A251F}
  /* Las fotos a plena luz sobre negro deslumbran. Un punto menos y ya. */
  .ph-media img,.foto-grid img,.fimg,.sp-item img{filter:brightness(.9)}
}

/* El recuadro gris que iOS y Android pintan sobre lo que tocas llega tarde
   -despues de la pulsacion- y se queda encima del color que ya tiene cada
   boton. Se quita y manda el :active de la hoja, que es inmediato. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Barlow','Barlow Fallback',system-ui,-apple-system,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* Ligaduras y kerning de la fuente, no los que el navegador improvisa. */
  text-rendering:optimizeLegibility;
}

/* Seleccionar texto tambien es parte del sitio: el azul del sistema no pinta
   nada aqui. Ocre muy diluido y la tinta de siempre, para que lo
   seleccionado se siga leyendo igual de bien. */
::selection{background:var(--accent-tint);color:var(--ink)}
a{text-decoration:none;color:inherit}

/* ── UN SOLO PESO DE TRAZO PARA TODOS LOS ICONOS ──────────────────────
   Los svg declaraban 1,5 (y uno 1,8) sobre una rejilla de 24, pero ese es el
   grosor ANTES de escalar: el mismo 1,5 se pinta a 0,94px en un icono de 15px
   y a 1,63px en uno de 26px. Medido sobre las seis paginas, el trazo real iba
   de 0,94 a 1,63: un 73% de diferencia entre el mas fino y el mas grueso, que
   es justo lo que hace que un juego de iconos parezca de dos sitios distintos.
   Con non-scaling-stroke el grosor se mide en pantalla y no en la rejilla, asi
   que 1,25 es 1,25 en todos: ni el de 15px se queda en subpixel (borroso) ni
   el de 26px engorda. */
svg path,svg circle,svg rect,svg line,svg polyline,svg polygon{vector-effect:non-scaling-stroke}
svg{stroke-width:1.25}
/* Pulsar dos veces un boton -o arrastrar desde el- seleccionaba su etiqueta y
   la dejaba resaltada en azul. El texto de un control no es texto para
   copiar; el de la pagina, si, y ese no se toca. */
button,.bg,.bo,.bwa,.ncta,.mob-cta,.pr-cta,.rv-gbtn,.emp-cta,.emp-wa,.emp-mail,
/* El navegador espera 300 ms por si viene un segundo toque para hacer zoom.
   Decirle que aquí no lo va a haber hace que el toque responda al momento. */
button,a,summary,label,[role="button"]{touch-action:manipulation}
.nm a,#mob a,.nsub-p a,.rsv-c,.pr-tab,.crumb a{user-select:none;-webkit-user-select:none}
/* Un telefono partido en dos renglones deja de leerse como un numero. */
a[href^="tel:"]{white-space:nowrap}

/* El `display:none` de [hidden] lo pone la hoja del navegador, y cualquier
   `display` que escribamos nosotros lo gana: no por especificidad, sino
   porque la hoja del autor manda sobre la del navegador. Asi que a un
   componente que se conmuta con la propiedad `hidden` y ademas lleva su
   propio `display` deja de hacerle efecto esconderse: el JS pone bien el
   atributo y el panel se queda a la vista igual. Le paso al desplegable de
   la barra, que salia abierto desde que cargaba la pagina. Aqui se declara
   una vez para todo el sitio en vez de parchear cada componente. */
[hidden]{display:none!important}
img{max-width:100%;display:block;transition:opacity .6s var(--ease)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg-alt)}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}

:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:2px}
/* Texto solo para lectores de pantalla. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Las cinco estrellas son decoracion: van como contenido CSS en un span
   aria-hidden, no como texto. Asi no entran en el nombre accesible del
   enlace (que es lo que se ve: "5,0 en Google") ni un lector de pantalla
   lee "estrella" cinco veces. */
.est::before{content:"★★★★★"}

.skip{position:absolute;left:-9999px;top:0;z-index:calc(var(--z-modal) + 1);background:var(--accent);color:var(--on-accent);
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:12px 20px;border-radius:var(--r-sm)}
.skip:focus{left:12px;top:12px}

/* Grano de papel. Multiplica en vez de superponer: sobre marfil se lee como
   textura de impresión, no como ruido. */
.grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E")}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
}

/* ============================================================
   TIPOGRAFÍA
   Tres papeles, uno por función, sin mezclar dentro de un bloque:
     Cormorant Garamond 600  display: solo h1 y h2
     Barlow                  cuerpo, datos, navegación
     Barlow Condensed 600/700 etiquetas, botones, epígrafes
   La cursiva serif queda reservada al h1 de la portada. Los <em> de los
   demás titulares pasan a redonda: la cursiva sistemática era justo lo que
   hacía que el conjunto pareciese una plantilla.
   ============================================================ */
.trust-num,.rv-num,.pr-n,.pr-fee,.mt-pill i,.pr-ses b,.pr-mo,.tf-v,.acc-a{
  font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.pr-n,.pr-fee,.pr-ses b{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
h1,h2{font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;letter-spacing:-.015em;
  line-height:1.04;padding-bottom:.06em;text-wrap:balance}
/* El tracking se ajusta al tamano: a 73px, el mismo -.015em que basta a 38px
   deja las letras sueltas. Cuanto mas grande es el display, mas se cierra.
   Va despues del bloque de arriba a proposito: lo pisa. */
h1{font-size:clamp(3rem,2.47rem + 2.356vw,4.59rem);letter-spacing:-.022em}
h2{font-size:clamp(2.4rem,2rem + 1.778vw,3.6rem)}
h2 em{font-style:normal}
/* Ritmo vertical del titular.
   Los titulares no llevaban separacion propia: el texto que venia debajo
   arrancaba pegado a la linea base y el bloque se leia amontonado. Donde el
   hueco ya lo pone una rejilla o una regla propia, se anula. */
h2{margin-bottom:var(--s4)}
.sh h2,.rv-head h2,.gal-intro h2,.pr-head h2,.emp-box h2,.fq-side h2{margin-bottom:0}
h3{margin-bottom:var(--s1)}
.mt-pill h3,.pr-head h3{margin-bottom:4px}
h1 em{font-style:italic;color:var(--accent-ink)}
h3{font-family:'Barlow','Barlow Fallback',sans-serif;font-weight:600;font-size:clamp(1.25rem,1.187rem + 0.2815vw,1.44rem);
  line-height:1.3;letter-spacing:-.01em}
h4{font-family:'Barlow','Barlow Fallback',sans-serif;font-weight:600;font-size:1.05rem;line-height:1.4}
p{max-width:68ch}

/* Epígrafe de sección: filete corto y versalitas. Un solo patrón para todos. */
.stag,.pr-eb,.hero-eb,.gal-intro .gn{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;font-size:13px;color:var(--accent-ink)}
.stag{display:flex;align-items:center;gap:14px;margin-bottom:var(--s4)}
.stag::before{content:"";width:38px;height:1px;background:var(--accent);flex:none}

/* ============================================================
   ESTRUCTURA Y RITMO DE FONDOS
   ============================================================ */
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,8px + 3.333vw,56px)}
.sec{padding:clamp(64px,42.67px + 5.926vw,128px) 0}

#hero,#servicios,#faq,#empleo,#stats,#empezar{background:var(--bg)}
#metodo,#tarifas,#contacto{background:var(--bg-alt)}
#instalaciones,#resenas{background:var(--surface)}
/* Las interiores no tienen los ids de la portada: su cadencia se marca
   seccion a seccion para que ninguna pagina quede plana. */
.sec-alt{background:var(--bg-alt)}
.sec-surface{background:var(--surface)}
/* La banda de valoracion separa hero de contenido en las interiores */
#valoracion .wrap{padding-top:var(--s6);padding-bottom:var(--s6);border-top:1px solid var(--border)}

/* Anclajes: el nav es fijo y se comería el titular */
#hero,#stats,#metodo,#servicios,#instalaciones,#tarifas,#empezar,#resenas,#faq,#contacto,#empleo,#cuotas,#valoracion,#mapa,#individual,#grupos,#duo,.fq-item{scroll-margin-top:104px}

/* Cabecera de sección: titular a la izquierda, entradilla a la derecha */
.sh,.rv-head,.gal-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:var(--s5) var(--s7);align-items:end;margin-bottom:var(--s7)}
.sld,.rv-head p,.gal-intro p{color:var(--ink-soft);font-size:1.05rem;max-width:46ch}

/* ============================================================
   BOTONES
   Principal ocre con tinta encima, secundario con borde, terciario enlace.
   Sin pill, sin degradado, sin sombra.
   ============================================================ */
.bg,.bo,.bwa,.ncta,.pr-cta,.rv-gbtn,.emp-cta,.emp-mail,.emp-wa,.mob-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:var(--r-sm);border:1px solid transparent;
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:14px;line-height:1;cursor:pointer;white-space:nowrap;
  max-width:100%;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease),
    transform var(--t-spring) var(--spring);
}
.bg,.pr-cta,.emp-cta,.mob-cta,.ncta{background:var(--accent);color:var(--on-accent)}
@media(hover:hover) and (pointer:fine){.bg:hover,.pr-cta:hover,.emp-cta:hover,.mob-cta:hover,.ncta:hover{background:var(--accent-dark);color:var(--on-accent-hover)}}
.bo,.rv-gbtn,.emp-mail{background:transparent;color:var(--ink);border-color:var(--border-strong)}
@media(hover:hover) and (pointer:fine){.bo:hover,.rv-gbtn:hover,.emp-mail:hover{border-color:var(--ink);background:var(--hover-wash)}}
.bwa,.emp-wa{background:var(--accent);color:var(--on-accent)}
@media(hover:hover) and (pointer:fine){.bwa:hover,.emp-wa:hover{background:var(--accent-dark);color:var(--on-accent-hover)}}
/* Se hunde al pulsar y vuelve con muelle al soltar: la mano nota que ha
   pulsado algo. Transform solo. */
.bg:active,.bo:active,.bwa:active,.pr-cta:active,.ncta:active,.rv-gbtn:active,.emp-cta:active,.mob-cta:active{transform:translateY(1px) scale(.985)}
.bg svg,.bo svg,.bwa svg,.ncta svg,.pr-cta svg,.rv-gbtn svg,
.emp-cta svg,.emp-mail svg,.emp-wa svg,.mob-cta svg{flex:none}
/* La flecha se desplaza; es el único movimiento permitido en un botón */
.bg .ar,.pr-cta .ar,.bo .ar{transition:transform var(--t-spring) var(--spring)}
@media(hover:hover) and (pointer:fine){.bg:hover .ar,.pr-cta:hover .ar,.bo:hover .ar{transform:translateX(4px)}}

/* Enlace de texto con subrayado fino */
.lnk{color:var(--accent-ink);border-bottom:1px solid var(--accent-soft);
  transition:border-color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.lnk:hover{border-bottom-color:var(--accent-ink)}}

/* ============================================================
   NAVEGACIÓN
   Fondo claro, logo real a la izquierda, menú centrado, CTA a la derecha.
   Sin caja oscura, sin sombra: solo un filete inferior al hacer scroll.
   ============================================================ */
#nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);height:84px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:0 clamp(20px,8px + 3.333vw,56px);background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),height var(--t) var(--ease)}
#nav.on{background:var(--nav-bg);backdrop-filter:saturate(1.1) blur(10px);
  -webkit-backdrop-filter:saturate(1.1) blur(10px);border-bottom-color:var(--border);height:72px}
/* En la portada la barra arranca sobre la foto: sin fondo, marca y menu en
   claro, y el logotipo mucho mas grande, como en las maquetas (el 202 casi
   dobla el ancho de la hamburguesa). Se agranda con transform, que no mueve
   nada alrededor, desde su esquina izquierda. La portada usa logo-claro.webp,
   el 202 en blanco sobre transparente, asi que sobre la foto no hay cuadro
   que esconder; el cuadro negro de la barra marfil lo pone el fondo del
   propio <img>, que aqui se quita. Al bajar vuelve la barra de siempre. */
#nav.sobre-foto:not(.on) .nl img{background:transparent;padding:0;transform:scale(1.6)}
@media(min-width:1025px){#nav.sobre-foto:not(.on) .nl img{transform:scale(1.9)}}
/* Y en la portada la barra empieza donde empieza el texto: el borde
   izquierdo del 202 cae sobre el del titular, como en las maquetas. En
   pantallas anchas el contenido (.wrap) se centra a 1280px y su margen ya
   no es el de la barra; se le da el mismo. */
#nav.sobre-foto{padding-left:max(clamp(20px,8px + 3.333vw,56px),calc((100% - 1280px)/2 + 56px))}
#nav.sobre-foto:not(.on) .nb,#nav.sobre-foto:not(.on) .ncta{display:none}
#nav.sobre-foto:not(.on) .nm a,#nav.sobre-foto:not(.on) .nsub-b{color:rgba(242,238,231,.86)}
#nav.sobre-foto:not(.on) .nm a[aria-current="page"],
#nav.sobre-foto:not(.on) .nsub:has(a[aria-current="page"]) .nsub-b{color:#F2EEE7}
@media(hover:hover) and (pointer:fine){#nav.sobre-foto:not(.on) .nm a:hover,#nav.sobre-foto:not(.on) .nsub-b:hover{color:#F2EEE7}}
#nav.sobre-foto:not(.on) .bur{border-color:rgba(242,238,231,.45)}
#nav.sobre-foto:not(.on) .bur span{background:#F2EEE7}

/* Bloque de marca: el logotipo real dentro de su cuadro, más el nombre */
.nl{display:flex;align-items:center;gap:14px;flex:none;min-height:46px}
/* El logotipo es 4:3 y el marco es cuadrado: con cover se recortaban los
   laterales de la marca. Con contain se conserva entero y el fondo negro
   del propio archivo completa el cuadro. */
.nl img,.fll img{object-fit:contain;background:#000}
.nl img{width:46px;height:46px;border-radius:var(--r-sm);transform-origin:left center;transition:transform var(--t) var(--ease)}
/* La portada lleva el 202 recortado al dibujo y sobre transparente
   (logo-claro.webp, 153x77). En la barra marfil, el relleno le da el mismo
   aire dentro del cuadro negro que tiene el logotipo de las demas paginas. */
.nl-claro{padding:17px 11px}
#nav.on .nl img{transform:scale(.87)}
.nb{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:13px;line-height:1.25;color:var(--ink)}
.nb span{display:block}

.nm{display:flex;align-items:center;gap:clamp(18px,12.48px + 1.533vw,34.56px)}
.nm a{font-size:16px;font-weight:500;color:var(--ink-soft);position:relative;padding:6px 0;
  transition:color var(--t) var(--ease)}
/* El filete se dibuja de izquierda a derecha y se recoge hacia la derecha:
   cambia el origen de la escala, no la anchura. Antes animaba `right`, que
   recalcula el maquetado en cada fotograma. */
.nm a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .32s var(--ease)}
@media(hover:hover) and (pointer:fine){.nm a:hover{color:var(--ink)}}
@media(hover:hover) and (pointer:fine){.nm a:hover::after{transform:scaleX(1);transform-origin:left}}
/* La pagina en la que se esta va marcada en el menu: la tinta llena y el
   filete quieto. No lo llevaba ninguna, asi que desde una interior el menu
   se leia igual que desde la portada. Se declara en el marcado
   (aria-current), que es lo que ademas anuncia un lector de pantalla. */
.nm a[aria-current="page"]{color:var(--ink)}
.nm a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nsub:has(a[aria-current="page"]) .nsub-b{color:var(--ink)}
.ncta{min-height:46px;padding:0 22px;font-size:13px}
/* Acceso discreto al área de cliente: un enlace de texto junto al botón de
   reservar, en tinta suave. No compite con la llamada comercial. */
.nac{display:inline-flex;align-items:center;gap:8px;min-height:46px;margin-right:var(--s3);font-size:15px;font-weight:500;
  color:var(--ink-soft);white-space:nowrap;border:1px solid transparent;border-radius:var(--r-sm);
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.nac svg{width:18px;height:18px;flex:none}
@media(hover:hover) and (pointer:fine){.nac:hover{color:var(--ink)}}
/* Entre 900 y 1199px la barra no tiene sitio para una palabra más: queda el
   icono, con su borde para que se lea como control. Sobre la foto de la
   portada no aparece, como tampoco aparece el botón de reservar. */
@media(max-width:1199px){.nac{width:46px;justify-content:center;margin-right:var(--s2);border-color:var(--border-strong)}.nac span{display:none}}
#nav.sobre-foto:not(.on) .nac{display:none}

/* Desplegable "Entrenamiento". Las tres modalidades son el producto y hasta
   ahora no estaban en el menu: "Servicios" llevaba a una seccion de la
   portada y a las paginas de servicio solo se llegaba desde las tarjetas de
   la portada o desde el pie. */
.nsub{position:relative;display:flex;align-items:center}
.nsub-b{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;
  min-height:46px;
  font-family:inherit;font-size:16px;font-weight:500;color:var(--ink-soft);cursor:pointer;
  transition:color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.nsub-b:hover,.nsub-b[aria-expanded="true"]{color:var(--ink)}}
.nsub-b svg{flex:none;transition:transform var(--t) var(--ease)}
.nsub-b[aria-expanded="true"] svg{transform:rotate(180deg)}
/* El puente invisible evita que el menu se cierre al cruzar el hueco entre
   el boton y el panel con el raton. */
.nsub-p{position:absolute;top:100%;left:-18px;min-width:250px;padding:var(--s2);
  margin-top:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:0 12px 32px var(--sombra);
  display:flex;flex-direction:column;animation:entra .32s var(--spring)}
.nsub-p::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nsub-p a{font-size:15px;font-weight:500;color:var(--ink-soft);padding:10px 12px;
  border-radius:var(--r-sm);transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.nsub-p a::after{display:none}
@media(hover:hover) and (pointer:fine){.nsub-p a:hover{background:var(--accent-tint);color:var(--ink)}}
/* Dentro del desplegable no hay filete: peso y un punto de ocre delante. */
.nsub-p a[aria-current="page"]{color:var(--ink);font-weight:600;display:flex;align-items:center;gap:8px}
.nsub-p a[aria-current="page"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* Hamburguesa */
.bur{display:none;width:46px;height:46px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-sm);cursor:pointer;flex:none}
.bur{flex-direction:column;gap:5px}
.bur span{display:block;width:20px;height:1.5px;background:var(--ink);
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.bur[aria-expanded="true"] span:first-child{transform:translateY(6.5px) rotate(45deg)}
.bur[aria-expanded="true"] span:nth-child(2){opacity:0}
.bur[aria-expanded="true"] span:last-child{transform:translateY(-6.5px) rotate(-45deg)}

/* Menú móvil: marfil, no una cortina negra */
#mob{position:fixed;inset:0;z-index:var(--z-menu);background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s8) clamp(25.2px,14.93px + 2.852vw,56px) var(--s7);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
#mob.on{opacity:1;visibility:visible;transform:none}
/* Con las tres modalidades dentro son siete enlaces, no cinco: el cuerpo baja
   lo justo para que "Entrenamiento personal" quepa en una linea a 360px. */
#mob a:not(.mob-cta){font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;font-size:clamp(1.45rem,1.267rem + 0.8148vw,2rem);
  line-height:1.25;color:var(--ink);border-bottom:1px solid var(--border);
  /* El aire entre enlaces va dentro del enlace, no en un gap: en una lista
     vertical que se toca con el dedo, un hueco entre dos es un sitio donde
     pulsar no hace nada. Mismo ritmo, y cada fila se puede tocar entera. */
  padding:15px 0}
/* Rotulo de grupo: no es un enlace, ordena la lista */
.mob-g{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:12px;color:var(--accent-ink);margin-top:var(--s3)}
.mob-g:first-of-type{margin-top:0}
#mob .mob-cta{margin-top:var(--s4);align-self:flex-start}
/* Los enlaces entran uno detras de otro, de arriba abajo: el menu acaba de
   abrirse y el ojo sabe por donde empezar. Al cerrar, todos a la vez. */
#mob>a,#mob>.mob-g{opacity:0;transform:translateY(10px);
  transition:opacity .36s var(--ease),transform .5s var(--spring)}
#mob.on>a,#mob.on>.mob-g{opacity:1;transform:none}
#mob.on>:nth-child(3){transition-delay:30ms}#mob.on>:nth-child(4){transition-delay:60ms}
#mob.on>:nth-child(5){transition-delay:90ms}#mob.on>:nth-child(6){transition-delay:120ms}
#mob.on>:nth-child(7){transition-delay:150ms}#mob.on>:nth-child(8){transition-delay:180ms}
#mob.on>:nth-child(9){transition-delay:210ms}#mob.on>:nth-child(10){transition-delay:240ms}
#mob.on>:nth-child(11){transition-delay:270ms}#mob.on>:nth-child(12){transition-delay:300ms}
#mob a[aria-current="page"]{color:var(--accent-ink)}
#mxc{position:absolute;top:19px;right:clamp(20px,8px + 3.333vw,56px);width:46px;height:46px;
  background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-size:26px;line-height:1;color:var(--ink);cursor:pointer}

/* ============================================================
   HERO DE PORTADA
   La foto del centro a sangre -la sala con la pared ocre, la Echo Bike y
   los remos-, oscurecida por arriba para que el titular se lea, y una sola
   llamada a la accion. Es la portada que pidio el cliente con su maqueta.
   En movil ocupa la pantalla entera con el boton abajo; en escritorio el
   discurso va a la izquierda sobre fondo oscuro y la foto, a su tamaño, a
   la derecha. Los colores van fijos, no por tema: la foto es la misma de
   dia y de noche.
   ============================================================ */
/* Lo que comparten portada y cabeceras interiores (.ph): el bloque de
   texto, el epigrafe, el subtitulo y la fila de botones. */
#hero{padding:calc(84px + clamp(40px,26.67px + 3.704vw,80px)) 0 clamp(56px,41.07px + 4.148vw,100.8px)}
.hero-eb{display:flex;align-items:center;gap:14px;margin-bottom:var(--s4)}
.hero-eb::before{content:"";width:46px;height:1px;background:var(--accent);flex:none}
.hb h1{margin-bottom:var(--s4)}
.hsub{font-size:clamp(1.05rem,0.995rem + 0.2444vw,1.215rem);color:var(--ink-soft);max-width:42ch;margin-bottom:var(--s6)}
.hbs{display:flex;gap:var(--s2);flex-wrap:wrap}

/* Y la portada. Todo va acotado a .portada: #hero a secas es tambien la
   cabecera de las paginas interiores. */
#hero.portada{position:relative;isolation:isolate;overflow:hidden;background:#0E0C0A;color:#F2EEE7;
  display:flex;flex-direction:column;min-height:100vh;min-height:100svh;
  padding:calc(84px + var(--s5)) 0 var(--s5)}
/* En movil la foto va anclada al pie, a su ancho, y el tercio de arriba es
   velo: asi se ve la sala entera, sin recortar la pared ni el rack. Su techo
   se funde con el fondo con una mascara, que va con la foto y no con el alto
   de la pantalla: el borde de arriba no se ve en ningun movil. */
.hero-img{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;z-index:-2;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%);mask-image:linear-gradient(180deg,transparent 0,#000 40%)}
/* El velo: casi opaco arriba, donde van la barra y el texto; abierto a
   media altura para que la sala se vea; y cierra un poco abajo, bajo el
   boton. */
#hero.portada::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#0E0C0A 0%,#0E0C0A 14%,rgba(14,12,10,.9) 27%,rgba(14,12,10,.3) 46%,rgba(14,12,10,0) 58%,rgba(14,12,10,0) 82%,rgba(14,12,10,.55) 100%)}
.hero-in{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 auto;gap:var(--s6);width:100%}
.portada h1{color:#F2EEE7;margin-bottom:var(--s3)}
.portada h1 em{color:#C98F3E}
.portada .hsub{color:rgba(242,238,231,.88);max-width:30ch;margin-bottom:0;letter-spacing:.03em;line-height:1.5}
.portada .hbs .bg{width:100%;background:#C98F3E;color:#161616}
@media(hover:hover) and (pointer:fine){.portada .hbs .bg:hover{background:#E0B06A;color:#161616}}
@media(min-width:768px){
  /* Tableta: hay alto de sobra y la foto puede cubrir el bloque entero. */
  .hero-img{top:0;height:100%;object-fit:cover;object-position:50% 60%;-webkit-mask-image:none;mask-image:none}
}
@media(min-width:1025px){
  /* Escritorio, segun la segunda maqueta del cliente: su imagen entera, a
     sangre (portada-pc.webp es la maqueta con las zonas de texto tapadas
     con trozos limpios de al lado). Trae ya el lado izquierdo oscurecido,
     con la puerta y la pared ocre junto al titular; el velo solo refuerza
     la legibilidad del texto y de los enlaces de la barra. Titular a tres
     lineas y mas grande, subtitulo y boton en proporcion. */
  #hero.portada{min-height:min(100svh,880px);padding:calc(84px + var(--s6)) 0 var(--s7)}
  .hero-in{justify-content:center;gap:var(--s5)}
  .portada .hb,.portada .hbs{max-width:640px}
  .portada h1{font-size:clamp(4.4rem,2.4rem + 3.6vw,6.2rem);line-height:.98}
  .portada h1 .ln{display:block}
  .portada .hsub{font-size:1.5rem;max-width:30ch;letter-spacing:.05em;line-height:1.45}
  .portada .hbs .bg{width:auto;min-width:340px;min-height:64px;padding:0 48px;font-size:17px;letter-spacing:.1em}
  .portada picture{display:contents}
  .hero-img{left:0;width:100%;object-position:50% 50%}
  #hero.portada::before{background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 14%),
    linear-gradient(90deg,rgba(14,12,10,.75) 0,rgba(14,12,10,.6) 22%,rgba(14,12,10,.25) 34%,rgba(14,12,10,0) 44%)}
}

/* Las cuatro modalidades, en su banda justo debajo de la portada: cuatro
   tarjetas en fila en escritorio, dos en tableta, una en movil. Borde fino,
   radio moderado, sin sombra. */
#modalidades{background:var(--bg)}
#modalidades .wrap{padding-top:var(--s6);padding-bottom:var(--s6)}
.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
@media(min-width:1025px){
  /* En fila no cabe icono, texto y flecha en horizontal: se apilan. */
  .mod{grid-template-columns:1fr;align-items:start;gap:var(--s3);padding:24px}
  .mod-ar{display:none}
}
.mod{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:20px 22px;transition:border-color var(--t) var(--ease),background var(--t) var(--ease),opacity .32s var(--ease)}
@media(hover:hover) and (pointer:fine){.mod:hover{border-color:var(--border-strong);background:var(--surface-hi)}}
@media(hover:hover) and (pointer:fine){
  /* Con el raton sobre una, las otras tres se apartan: la que se va a pulsar
  es la que queda a la vista. Solo opacidad. */
  .mods:has(.mod:hover) .mod:not(:hover){opacity:.6}
}
.mod-ic{width:52px;height:52px;border-radius:50%;background:var(--bg-alt);
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:background var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.mod:hover .mod-ic{background:var(--accent-tint)}}
.mod-ic svg{stroke:var(--ink);fill:none;stroke-linecap:round;stroke-linejoin:round}
.mod-t{display:block;font-size:1.12rem;font-weight:600;line-height:1.3}
.mod-d{display:block;font-size:.95rem;color:var(--ink-muted);margin-top:2px;line-height:1.5}
.mod-ar{color:var(--ink-muted);flex:none;transition:transform var(--t-spring) var(--spring),color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.mod:hover .mod-ar{transform:translateX(4px);color:var(--accent-ink)}}

/* ============================================================
   CABECERA DE PÁGINA INTERIOR
   Mismo ritmo de dos columnas que la portada, con la foto contenida en un
   marco en vez de a sangre bajo un velo.
   ============================================================ */
.ph{padding:calc(84px + clamp(36px,26.67px + 2.593vw,64px)) 0 clamp(40px,29.33px + 2.963vw,72px);background:var(--bg)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,23.47px + 2.37vw,57.6px);align-items:center}
.ph-media{border-radius:var(--r-lg);overflow:hidden;background:var(--bg-alt)}
.ph-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* ============================================================
   BANDA DE CONFIANZA
   ============================================================ */
#stats{padding:0}
#stats .wrap{padding-top:var(--s6);padding-bottom:var(--s6);border-top:1px solid var(--border)}
.trust{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:var(--s6);align-items:center}
.trust-rate{display:flex;align-items:center;gap:18px;padding-right:var(--s6);
  border-right:1px solid var(--border);transition:opacity var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.trust-rate:hover{opacity:.75}}
.trust-num{font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-size:clamp(3rem,2.533rem + 2.074vw,4.4rem);
  font-weight:600;line-height:.85;color:var(--ink);font-variant-numeric:lining-nums}
.trust-st{display:flex;align-items:center;gap:8px;color:var(--accent-ink);font-size:15px;letter-spacing:2px;line-height:1}
.trust-st svg{width:16px;height:16px;flex:none}
.trust-src{display:block;font-size:14px;font-weight:500;color:var(--ink-muted);margin-top:6px}
.trust-rate{min-height:44px}
.tf-v a,.ci-v a{display:inline-flex;align-items:center;min-height:26px}
.trust-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.tf-l{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:12px;color:var(--accent-ink);margin-bottom:6px}
.tf-v{font-size:1rem;color:var(--ink);line-height:1.5}
.tf-v a{border-bottom:1px solid var(--border-strong)}
@media(hover:hover) and (pointer:fine){.tf-v a:hover{border-bottom-color:var(--ink)}}

/* Estado del horario. "Lunes a viernes, de 7:00 a 22:00" es el dato;
   "abierto ahora" es la respuesta que busca quien mira la web a las nueve de
   la noche. Lo calcula assets/js/site.js con la hora de Vigo y lo escribe
   aqui; sin JS el span sigue oculto y queda el horario de siempre. El punto
   acompana al texto, no lo sustituye: el estado se lee, no se adivina por
   el color. Ocre y no verde: el verde es de WhatsApp. */
.hs{display:flex;align-items:center;gap:8px;margin-top:6px;min-height:22px;font-size:14px;font-weight:500;color:var(--ink-soft)}
/* El hueco de la linea se reserva desde el marcado (min-height) para que
   el texto de debajo no salte cuando el JS escribe el estado. */
.hs::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;box-sizing:border-box}
.hs:empty::before{display:none}
/* El punto late solo cuando esta abierto: el dato es en vivo, no un texto
   fijo, y un anillo que se expande cada 2,8 s lo dice sin gritar. Con
   "reducir movimiento" se queda quieto. */
.hs{position:relative}
.hs::after{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  border:1px solid var(--accent);opacity:0;pointer-events:none}
.hs:not(.cerrado):not(:empty)::after{animation:late 2.8s var(--ease) infinite}
/* Una animacion en bucle fuera de pantalla es trabajo que el movil paga en
   bateria sin que nadie lo vea: site.js marca las que salen del encuadre. */
.hs.quieto::after{animation-play-state:paused}
.hs.cerrado::before{background:transparent;border:1.5px solid var(--ink-muted)}

/* ============================================================
   REVELADO
   Desplazamiento corto y opacidad. Nada más.
   ============================================================ */
.js-anim .rv{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-anim .rv.on{opacity:1;transform:none}
.js-anim .rv.d1{transition-delay:80ms}
.js-anim .rv.d2{transition-delay:160ms}
.js-anim .rv.d3{transition-delay:240ms}
/* La primera pantalla no espera al JS. Con .rv a secas el titular estaba a
   opacidad 0 hasta que site.js bajaba, observaba y disparaba, y el LCP en
   movil se iba casi dos segundos mas alla del primer pintado. Dentro del
   hero y de la cabecera interior, el mismo revelado va como animacion CSS,
   que arranca sola. Con "reducir movimiento", el !important de .rv gana a
   la animacion y se ve todo desde el principio. */
@keyframes revela{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js-anim #hero .rv,.js-anim .ph .rv{opacity:1;transform:none;animation:revela .7s var(--ease) both}
.js-anim #hero .rv.d1,.js-anim .ph .rv.d1{animation-delay:80ms}
.js-anim #hero .rv.d2,.js-anim .ph .rv.d2{animation-delay:160ms}
.js-anim #hero .rv.d3,.js-anim .ph .rv.d3{animation-delay:240ms}

/* Las imagenes diferidas entran, no aparecen de golpe: site.js las marca al
   cargar (y a los 3 s todas, por si alguna no avisa). Sin JS no hay clase
   js-anim y se ven desde el principio. */
.js-anim img[loading="lazy"]:not(.cargada){opacity:0}

/* Cuatro movimientos con nombre, todos de transform y opacidad. */
@keyframes entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.94)}to{transform:scale(1)}}
@keyframes lb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes late{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
/* Cuando el sistema pasa de claro a oscuro cambian de golpe fondos, tintas y
   filetes: con sus transiciones puestas, la pagina entera se funde durante
   medio segundo y se ve como un fallo. site.js pone esta clase mientras dura
   el cambio. */
html.sin-transicion *,html.sin-transicion *::before,html.sin-transicion *::after{
  transition:none!important;animation-duration:.001ms!important}
/* ==/critico== */

/* ============================================================
   MÉTODO · Entrenamiento con criterio
   Lista editorial con numeración grande y suave. No cuatro tarjetas iguales.
   ============================================================ */
/* En movil se apila en el orden del marcado: titular, puntos, boton. En
   escritorio el boton vuelve a la columna del titular, debajo. El orden del
   marcado manda porque es el que lee un lector de pantalla. */
.mt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"tx pil" "act pil";align-content:start;
  gap:clamp(40px,29.33px + 2.963vw,72px)}
.mt-tx{grid-area:tx}
.mt-pillars{grid-area:pil}
.mt-act{grid-area:act;align-self:start}
.mt-lead{font-size:clamp(1.1rem,1.017rem + 0.3704vw,1.35rem);color:var(--ink);line-height:1.6;margin-bottom:var(--s4)}
.mt-p{color:var(--ink-soft);margin-bottom:var(--s4)}
.mt-pillars{display:flex;flex-direction:column}
.mt-pill{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
  padding:var(--s4) 0;border-top:1px solid var(--border);align-items:start}
.mt-pill:last-child{border-bottom:1px solid var(--border)}
/* El numero va en --accent-ink, no en --accent-soft: el ocre palido sobre
   marfil se queda en 1,3:1 y es texto a la vista, no un adorno. Es el mismo
   ocre de la marca al tono que este documento reserva para texto (5,3:1). */
.mt-pill i{font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-style:normal;font-weight:600;
  font-size:2.4rem;line-height:.9;color:var(--accent-ink);font-variant-numeric:lining-nums}
/* La cursiva sistemática dentro del cuerpo era parte del problema: el <em>
   sigue marcando énfasis semántico, pero se resuelve con peso, no inclinando. */
p em,li em,.mt-lead em{font-style:normal;font-weight:600;color:var(--ink)}
.mt-pill h3{font-size:1.06rem;margin-bottom:4px}
.mt-pill p{font-size:.98rem;color:var(--ink-muted);line-height:1.55}

/* Bloque de modalidad, version sencilla: migas, titular, una entradilla
   corta, tres puntos separados por filete, boton y pie. Antes eran tres
   parrafos largos, una firma y cuatro puntos; se leia como un folleto.
   El icono no decora: identifica el punto de un vistazo. */
.mt-pill-ic{grid-template-columns:auto auto minmax(0,1fr)}
.mt-ic{width:26px;height:26px;color:var(--ink);flex:none;margin-top:3px}
.mt-ic svg{width:26px;height:26px;display:block}
/* El boton ocupa el ancho en movil, como en la referencia; en escritorio se
   ajusta al texto para no quedar como una barra suelta. */
.mt-act{margin-top:var(--s5)}
.mt-act .bg{width:100%;justify-content:center}
.mt-foot{margin-top:var(--s3);font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink-muted);
  text-align:center}
@media(min-width:901px){
  .mt-act .bg{width:auto}
  .mt-foot{text-align:left}
}

/* ============================================================
   SERVICIOS · listado editorial a dos columnas
   Número pequeño, nombre, divisor. Ni tarjetas ni doce iconos distintos.
   ============================================================ */
.svg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,18.67px + 3.704vw,72px)}
.sv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:baseline;
  padding:var(--s4) 0;border-top:1px solid var(--border)}
/* Se desplazan el numero y el nombre, no la fila: el filete se queda quieto
   y no se recalcula nada. Antes animaba padding-left. */
.sv-n,.sv-t{transition:transform .32s var(--spring)}
@media(hover:hover) and (pointer:fine){.sv:hover .sv-n,.sv:hover .sv-t{transform:translateX(6px)}}
.sv-n{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;
  color:var(--accent-ink);font-variant-numeric:lining-nums tabular-nums}
.sv-t{font-size:1.06rem;font-weight:500;line-height:1.45;color:var(--ink)}

/* ============================================================
   INSTALACIONES · galería
   Las fotografías mandan: sin velo, sin overlay ámbar, sin oscurecer.
   ============================================================ */
.sp-zona{position:relative}
.sp-wrap{overflow:visible}
.sp-track{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:0 clamp(20px,8px + 3.333vw,56px) 2px;
  scroll-padding-left:clamp(20px,8px + 3.333vw,56px);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
/* El lado por donde quedan fotos se difumina; el que ya no tiene nada detras,
   no. Antes la tira se cortaba en seco contra el borde de la pantalla y la
   ultima foto parecia recortada, no continuada. Las clases las pone el mismo
   codigo que enciende y apaga las flechas, asi que el difuminado dice
   exactamente lo que dicen ellas. No es un adorno: es un degradado de
   mascara, y lo que hace es informar de que hay mas. */
.sp-track.hay-antes{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--sp-borde));
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--sp-borde))}
.sp-track.hay-despues{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--sp-borde)),transparent 100%);
  mask-image:linear-gradient(90deg,#000 calc(100% - var(--sp-borde)),transparent 100%)}
.sp-track.hay-antes.hay-despues{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--sp-borde),#000 calc(100% - var(--sp-borde)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--sp-borde),#000 calc(100% - var(--sp-borde)),transparent 100%)}
.sp-track::-webkit-scrollbar{display:none}
/* Mientras se arrastra con el raton hay que apagar el ajuste magnetico y el
   desplazamiento suave: el primero devolvia la tira a su sitio en cada
   movimiento y el segundo animaba cada paso contra el siguiente, asi que
   arrastrar no movia nada. La clase se ponia desde el JS y no tenia ninguna
   regla detras. */
.sp-track.arrastrando{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.sp-track.arrastrando .sp-item{cursor:grabbing}
.sp-track.arrastrando .sp-item img{transform:none}
.sp-item{position:relative;flex:0 0 clamp(260px,32vw,420px);scroll-snap-align:start;
  border-radius:var(--r-md);overflow:hidden;background:var(--bg-alt);cursor:zoom-in}
/* La primera imagen manda como pieza protagonista */
.sp-item:first-child{flex:0 0 clamp(300px,44vw,600px)}
.sp-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  -webkit-user-drag:none;user-select:none;
  transition:transform .5s var(--ease),opacity .6s var(--ease)}
.sp-item:first-child img{aspect-ratio:4/3}
@media(hover:hover) and (pointer:fine){.sp-item:hover img{transform:scale(1.02)}}
.sp-cap{position:absolute;left:14px;bottom:14px;background:var(--veil);
  color:var(--ink);font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;padding:7px 12px;border-radius:var(--r-sm)}
.sp-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:var(--veil);border:1px solid var(--border);border-radius:50%;
  color:var(--ink);cursor:pointer;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t-spring) var(--spring)}
@media(hover:hover) and (pointer:fine){.sp-nav:hover:not(:disabled){background:var(--surface-hi);border-color:var(--border-strong)}}
.sp-nav:active:not(:disabled){transform:translateY(-50%) scale(.94)}
/* Al llegar al extremo la flecha se apaga. Antes se desactivaba sin cambiar
   de aspecto: se veia pulsable, no hacia nada y no habia forma de saber por
   que. Se atenua, pero no tanto como para perder el contraste de su icono. */
.sp-nav:disabled{opacity:.42;cursor:default}
.sp-prev{left:clamp(10px,5.333px + 1.296vw,24px)}
.sp-next{right:clamp(10px,5.333px + 1.296vw,24px)}
.sp-nav svg{width:19px;height:19px;fill:none;stroke:currentColor}
.gal-intro .gn{display:block;margin-bottom:var(--s2)}
/* El pase avanza solo cada 3,8 s: quien quiera mirar una foto con calma
   tiene que poder pararlo (WCAG 2.2.2). Con "reducir movimiento" no hay
   pase y el boton se esconde. */
.gal-ctl{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.gal-ctl .gn{margin-bottom:0}
.sp-pausa{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  color:var(--ink);cursor:pointer;transition:border-color var(--t) var(--ease),transform var(--t-spring) var(--spring)}
@media(hover:hover) and (pointer:fine){.sp-pausa:hover{border-color:var(--ink)}}
.sp-pausa:active{transform:translateY(1px) scale(.985)}
.sp-pausa svg{width:14px;height:14px;fill:currentColor;flex:none}
.sp-pausa-t{white-space:nowrap}
.sp-pausa[aria-pressed="true"] .ic-pausa,.sp-pausa:not([aria-pressed="true"]) .ic-sigue{display:none}
/* Rejilla de fotos de la pagina de instalaciones. Aqui mandan las imagenes:
   la primera ocupa dos columnas y el resto acompanan.
   Ojo con height:100% junto a aspect-ratio: si el padre no tiene altura
   definida, la imagen colapsa a cero. Va height:auto. */
.foto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s4) var(--s3)}
.foto-grid figure{margin:0;display:flex;flex-direction:column;gap:10px}
.foto-grid img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-md);background:var(--bg-alt)}
.foto-grid figcaption{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink-muted)}
@media(min-width:900px){
  .foto-grid figure:first-child{grid-column:span 2}
  .foto-grid figure:first-child img{aspect-ratio:16/10}
}

/* Visor */
#lb{position:fixed;inset:0;z-index:var(--z-lb);background:rgba(21,21,21,.94);
  display:none;align-items:center;justify-content:center;padding:clamp(16px,2.667px + 3.704vw,56px)}
#lb.on{display:flex}
#lbI{max-width:100%;max-height:86vh;width:auto;object-fit:contain;border-radius:var(--r-md);transition:opacity .13s var(--ease)}
#lb.on #lbI{animation:lb-in .38s var(--spring)}
#lbX{position:absolute;top:20px;right:20px;width:48px;height:48px;font-size:26px;line-height:1;
  background:transparent;border:1px solid var(--border-light);border-radius:var(--r-sm);
  color:var(--sobre-oscuro);cursor:pointer}
.lbn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;background:transparent;
  border:1px solid var(--border-light);border-radius:var(--r-sm);color:var(--sobre-oscuro);cursor:pointer}
#lbP{left:20px}#lbN{right:20px}
.lbn svg{width:20px;height:20px}
@media(hover:hover) and (pointer:fine){#lbX:hover,.lbn:hover{border-color:var(--sobre-oscuro)}}
/* Las teclas, escritas. El visor siempre respondio a las flechas y a Escape,
   pero no lo decia en ninguna parte: quien no lo prueba no lo sabe. Se
   ensenan solo donde hay teclado (puntero fino), y la posicion -"foto 3 de
   9"- viaja en un parrafo oculto que solo leen los lectores de pantalla. */
/* El gris del pie de pagina, que es el que este sistema usa para texto
   atenuado sobre carbon (7,6:1). No --border-light: ese es un filete al 16%
   de opacidad y como color de texto se queda en 1,3:1. */
.lb-pie{position:absolute;left:0;right:0;bottom:16px;display:none;
  justify-content:center;gap:var(--s3);font-size:13px;color:#A8A29A}
@media(hover:hover) and (pointer:fine){ #lb.on .lb-pie{display:flex} }
.lb-pie span{display:inline-flex;align-items:center;gap:6px}
kbd{font-family:'Barlow','Barlow Fallback',system-ui,sans-serif;font-size:11px;font-weight:600;
  line-height:1;padding:4px 6px;min-width:22px;text-align:center;
  border:1px solid currentColor;border-radius:4px}

/* ============================================================
   TARIFAS
   ============================================================ */
.pr{max-width:1080px;margin:0 auto}
/* Cuando las cuotas siguen al bloque de modalidad dentro de la misma seccion,
   arrancaban a 0px de su boton. Un filete y aire: el sistema separa temas
   asi, no metiendolo en una tarjeta. */
.mt-grid + .pr{margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--border)}
.pr-head{text-align:center;max-width:760px;margin:0 auto var(--s6)}
.pr-eb{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:var(--s4)}
.pr-eb i{height:1px;width:clamp(24px,5vw,58px);background:var(--accent)}
.pr-sub{color:var(--ink-soft);margin:var(--s3) auto 0;font-size:1.05rem}

.pr-tabs{position:relative;display:flex;max-width:560px;margin:0 auto var(--s6);gap:var(--s1);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:5px}
.pr-tab{flex:1;min-height:48px;padding:0 12px;background:transparent;border:0;border-radius:var(--r-sm);
  color:var(--ink-soft);font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:13px;cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.pr-tab:hover{color:var(--ink)}}
.pr-tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
/* La pildora ocre se desliza de una pestaña a otra en vez de apagarse en
   una y encenderse en la siguiente: se ve a donde ha ido la eleccion. Es un
   solo elemento (::before del tablist) movido con transform; las tres
   pestañas miden lo mismo (flex:1), asi que el paso es su propia anchura mas
   el hueco. Donde no hay :has() queda el relleno de siempre. */
@supports selector(:has(*)){
  .pr-tab{position:relative;z-index:1;transition:background var(--t) var(--ease),color .2s var(--ease) .1s}
  .pr-tab[aria-selected="true"]{background:transparent}
  .pr-tabs::before{content:"";position:absolute;z-index:0;top:5px;bottom:5px;left:5px;
    width:calc((100% - 10px - 2*var(--s1)) / 3);background:var(--accent);border-radius:var(--r-sm);
    transition:transform var(--t-spring) var(--spring)}
  .pr-tabs:has(#tab-duo[aria-selected="true"])::before{transform:translateX(calc(100% + var(--s1)))}
  .pr-tabs:has(#tab-grp[aria-selected="true"])::before{transform:translateX(calc(200% + 2*var(--s1)))}
}
/* El panel oculto ya lo cubre la regla [hidden] de la base. */

/* Filas horizontales: frecuencia, sesiones, cuota, precio por sesión */
.pr-grid,.pr-grid.n3{display:flex;flex-direction:column;gap:var(--s1);list-style:none;max-width:none;margin:0}
.pr-card{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1.25fr) minmax(0,1fr) auto;
  grid-template-areas:"num per ses fee" "num mo ses feeu";
  align-items:center;gap:0 var(--s4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:22px 26px;text-align:left;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.pr-card:hover{border-color:var(--border-strong)}}
.pr-card.pop{border-color:var(--accent);background:var(--surface-hi)}
.pr-n{grid-area:num;align-self:center;font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;
  font-size:2.6rem;line-height:1;color:var(--ink);min-width:42px;text-align:center}
.pr-per{grid-area:per;align-self:end;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink-muted)}
.pr-mo{grid-area:mo;align-self:start;font-size:.98rem;color:var(--ink-soft);margin-top:2px}
.pr-rule{display:none}
.pr-fee{grid-area:fee;align-self:end;font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;
  font-size:2.3rem;line-height:1;color:var(--ink);text-align:right}
.pr-card.pop .pr-fee{color:var(--accent-ink)}
.pr-feeu{grid-area:feeu;align-self:start;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--ink-muted);text-align:right;margin-top:4px}
.pr-ses{grid-area:ses;align-self:center;font-size:.98rem;color:var(--ink-soft);
  text-align:right;white-space:nowrap}
.pr-ses b{font-weight:600;color:var(--ink)}
.pr-cur{font-size:.78em}
.pr-badge{position:absolute;top:-9px;left:26px;background:var(--accent);color:var(--on-accent);
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:11px;padding:4px 10px;border-radius:99px}
.pr-act{text-align:center;margin-top:var(--s6)}
.pr-note{margin:var(--s3) auto 0;font-size:.95rem;color:var(--ink-muted)}

/* ── Horarios de los grupos ─────────────────────────────────────────
   Una tabla de verdad: los dias en la cabecera, la hora en la primera
   columna con su numeral en serifa, y un punto ocre donde hay grupo. Lo
   que no hay es un guion corto, sin texto, para que ni se lea en voz alta
   ni cuente como texto sin contraste; lo que se oye va en .vh. La tabla
   vive dentro de una caja con borde y radio, porque el radio no recorta
   una tabla. */
.hor-w{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.hor{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.hor th,.hor td{padding:20px 12px;text-align:center;border-top:1px solid var(--border);vertical-align:middle}
.hor thead th{border-top:0;padding:16px 12px;background:var(--bg);
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:12px;color:var(--accent-ink)}
.hor tbody th{text-align:left;padding-left:24px;font-weight:400;width:32%}
.hor-h{display:block;font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;
  font-size:1.8rem;line-height:1;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.hor-t{display:block;margin-top:5px;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--ink-muted)}
.hor-si{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--accent);vertical-align:middle}
.hor-no{display:inline-block;width:14px;height:1px;background:var(--border-strong);vertical-align:middle}
.hor-nota{margin:var(--s4) auto 0;max-width:56ch;text-align:center;font-size:.95rem;color:var(--ink-muted)}
@media(max-width:768px){
  .hor th,.hor td{padding:14px 6px}
  .hor thead th{padding:12px 6px;font-size:11px;letter-spacing:.1em}
  .hor tbody th{padding-left:14px;width:30%}
  .hor-h{font-size:1.4rem}
}

/* ── Cómo funciona la cuota: disclosure nativo, sin JS y rastreable ── */
.gq-note{margin-top:var(--s6);border-top:1px solid var(--border)}
.gq-note>.il{display:block;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;font-size:13px;color:var(--accent-ink);
  padding:var(--s5) 0 var(--s3)}
.gq-list{list-style:none;display:block}
.acc{border-bottom:1px solid var(--border)}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);min-height:60px;padding:14px 0;font-size:1.06rem;font-weight:500;color:var(--ink)}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"";flex:none;width:15px;height:15px;
  background:linear-gradient(var(--ink-muted),var(--ink-muted)) center/15px 1.5px no-repeat,
             linear-gradient(var(--ink-muted),var(--ink-muted)) center/1.5px 15px no-repeat;
  transition:transform var(--t-spring) var(--spring)}
.acc[open]>summary{color:var(--accent-ink)}
.acc[open]>summary::after{transform:rotate(90deg);
  background:linear-gradient(var(--accent-ink),var(--accent-ink)) center/15px 1.5px no-repeat}
.acc-a{padding:0 0 var(--s4);color:var(--ink-soft);max-width:72ch}
/* Al abrir, la respuesta baja y se asienta; al cerrar, se va sin mas. */
.acc[open]>.acc-a{animation:entra .42s var(--spring)}
.acc-a strong{color:var(--ink);font-weight:600}

/* ── Lo que incluye ── */
.pr-incs{margin-top:var(--s7);padding:var(--s6) clamp(24px,16px + 2.222vw,48px);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) clamp(32px,18.67px + 3.704vw,72px)}
.pr-inc{display:block}
.pr-inc-l{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:12px;color:var(--accent-ink);margin-bottom:var(--s4);
  padding-bottom:var(--s2);border-bottom:1px solid var(--border)}
.pr-items{display:flex;flex-direction:column;gap:11px}
.pr-item{display:flex;align-items:center;gap:12px;font-size:1.02rem;color:var(--ink)}
.pr-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.pr-item svg{display:none}

/* ============================================================
   CÓMO EMPEZAR · tres pasos
   Responde a la pregunta que queda despues de ver el precio: "¿y ahora
   que hago?". Tres pasos, los que son, con numeracion grande y filete,
   como el resto de listas editoriales del sitio. Nada de circulos con
   lineas conectoras: es una lectura, no un asistente.
   ============================================================ */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) clamp(24px,13.33px + 2.963vw,56px)}
.paso{border-top:1px solid var(--border);padding-top:var(--s4)}
.paso i{display:block;font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-style:normal;font-weight:600;
  font-size:2.6rem;line-height:.9;color:var(--accent-ink);font-variant-numeric:lining-nums;margin-bottom:var(--s3)}
.paso h3{font-size:1.15rem;margin-bottom:var(--s1)}
.paso p{color:var(--ink-soft);font-size:1rem;line-height:1.6}
.pasos-act{margin-top:var(--s7);display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.pasos-act p{color:var(--ink-muted);font-size:.98rem}

/* ============================================================
   RESEÑAS
   Datos reales: 5,0 y 41 reseñas. Iniciales, nunca retratos inventados.
   ============================================================ */
.rv-score{display:flex;align-items:center;gap:20px;margin-bottom:var(--s6)}
.rv-num{font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;font-size:clamp(3.4rem,2.867rem + 2.37vw,5rem);
  line-height:.85;color:var(--ink);font-variant-numeric:lining-nums}
.rv-st{color:var(--accent-ink);font-size:19px;letter-spacing:3px;line-height:1}
.rv-meta{font-size:15px;color:var(--ink-muted);margin-top:6px}
/* El enlace de la valoracion medía 18px: por debajo del minimo AA. */
.rv-c a,.rv-score a{display:inline-flex;align-items:center;min-height:26px}
.rv-c{display:block}
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.rv-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
/* Solo tres a la vista; las demás siguen indexadas pero no llenan la pantalla */
.rv-card:nth-child(n+4){display:none}
.rv-cst{color:var(--accent-ink);font-size:15px;letter-spacing:2px;line-height:1}
.rv-txt{color:var(--ink-soft);font-size:1.02rem;line-height:1.65;flex:1}
.rv-auth{display:flex;align-items:center;gap:12px;padding-top:var(--s3);border-top:1px solid var(--border)}
.rv-av{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--av-ink);
  display:flex;align-items:center;justify-content:center;flex:none;
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;font-size:17px}
.rv-an{font-weight:600;font-size:1rem;line-height:1.3}
.rv-src{display:block;font-size:13px;color:var(--ink-muted);font-weight:400}
/* Habia nueve opiniones en la pagina y solo se veian tres: las otras seis
   estaban en el marcado, indexadas, pero sin forma de llegar a ellas. Un
   boton las ensena; el enlace a Google sigue al lado para quien quiera
   verlas todas en su sitio. */
.rv-grid.todo .rv-card{display:flex}
.rv-cta{margin-top:var(--s6);display:flex;justify-content:center;align-items:center;gap:var(--s3);flex-wrap:wrap}

/* ============================================================
   FAQ
   ============================================================ */
/* Dos columnas: el titular y el enlace de "no encuentro mi duda" a la
   izquierda, fijos mientras se recorre la lista; las preguntas a la
   derecha. Antes el titular usaba la cabecera de dos columnas con la
   segunda vacia. Cada pregunta tiene su id y se puede enlazar (#faq-precio):
   la pagina la abre sola al llegar con ese ancla. */
.fq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--s5) clamp(32px,13.87px + 5.037vw,86.4px);align-items:start}
.fq-side{position:sticky;top:104px}
.fq-side p{margin-top:var(--s4);color:var(--ink-soft);max-width:34ch}
.fq-wrap{border-top:1px solid var(--border)}
.fq-item{border-bottom:1px solid var(--border)}
.fq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:72px;padding:18px 0;background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:'Barlow','Barlow Fallback',sans-serif;font-size:1.1rem;font-weight:500;color:var(--ink);
  transition:color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.fq-q:hover{color:var(--accent-ink)}}
.fq-ic{flex:none;width:16px;height:16px;position:relative}
.fq-ic::before,.fq-ic::after{content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;
  background:var(--ink-muted);transition:transform var(--t-spring) var(--spring),background var(--t) var(--ease)}
.fq-ic::after{transform:rotate(90deg)}
.fq-q[aria-expanded="true"]{color:var(--accent-ink)}
.fq-q[aria-expanded="true"] .fq-ic::before,.fq-q[aria-expanded="true"] .fq-ic::after{background:var(--accent-ink)}
.fq-q[aria-expanded="true"] .fq-ic::after{transform:rotate(0)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.fq-a p{padding:0 0 var(--s4);color:var(--ink-soft);max-width:72ch}
.fq-item.on .fq-a p{animation:entra .42s var(--spring)}

/* ============================================================
   CONTACTO
   ============================================================ */
.ctg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,29.33px + 2.963vw,72px);align-items:start}
.cts{font-size:1.1rem;color:var(--ink-soft);margin-bottom:var(--s6)}
.ci-w{display:flex;flex-direction:column}
.ci{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:start;
  padding:var(--s4) 0;border-top:1px solid var(--border)}
.ci:last-child{border-bottom:1px solid var(--border)}
.ci-ic{width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex:none}
.ci-ic svg{width:19px;height:19px;fill:none;stroke:var(--accent-ink);
  stroke-linecap:round;stroke-linejoin:round}
.ci-l{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:12px;color:var(--ink-muted);margin-bottom:3px}
.ci-v{font-size:1.08rem;color:var(--ink);line-height:1.5}
@media(hover:hover) and (pointer:fine){.ci-v a:hover{color:var(--accent-ink)}}
/* La referencia ("entre el Hotel Nagari y Montero Rios") iba en linea y en
   escritorio salia pegada a la direccion, sin espacio: "VigoEntre". */
.ci-v small{display:block;font-size:.88rem;color:var(--ink-muted);margin-top:2px;line-height:1.5}
/* Reserva por WhatsApp con el mensaje ya escrito. Dos preguntas -que
   modalidad y a que hora- y el boton abre el chat con la respuesta puesta.
   Son botones de radio de verdad, con su teclado y su agrupacion; la caja
   visible es el <span> de al lado. El estado elegido lleva relleno ocre y
   ademas una marca, porque el estado no se comunica solo con color. */
.rsv{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--border)}
.rsv h3{margin-bottom:var(--s3)}
.rsv-f{border:0;padding:0;margin:0 0 var(--s4);min-width:0}
.rsv-l{display:block;padding:0;margin-bottom:var(--s2);font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink-muted)}
.rsv-ops{display:flex;flex-wrap:wrap;gap:var(--s1)}
.rsv-c{position:relative;display:inline-flex}
.rsv-c input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.rsv-c span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);
  font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.rsv-c:hover span{border-color:var(--ink)}}
.rsv-c input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent);
  animation:pop var(--t-spring) var(--spring)}
.rsv-c input:checked+span::before{content:"";width:6px;height:11px;margin-top:-3px;flex:none;
  border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.rsv-c input:focus-visible+span{outline:2px solid var(--accent-ink);outline-offset:3px}
.rsv-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}
.rsv-act .lnk{display:inline-flex;align-items:center;min-height:26px}
.rsv-p{margin-top:var(--s3);font-size:.95rem;color:var(--ink-muted);max-width:56ch;line-height:1.55}
.rsv-p b{font-weight:500;color:var(--ink-soft)}
.ctm{display:flex;flex-direction:column;gap:var(--s2)}
.fimg{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.mb{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--bg-alt)}
.mb iframe{display:block;width:100%;height:280px;border:0;filter:grayscale(.25);transition:opacity .6s var(--ease)}
/* El mapa se carga cuando se pide. Era la unica peticion a un tercero que
   hacia la web al abrirse, y Google pone cookies con ella sin que nadie las
   haya aceptado. En su lugar, un hueco del mismo alto que el mapa (para que
   nada salte al cargarlo) con lo que hace falta para llegar: la direccion,
   el boton que lo carga y el enlace a Google Maps. */
.mb-ph{min-height:280px;display:flex;flex-direction:column;justify-content:center;gap:var(--s2);
  padding:var(--s5) clamp(20px,13.33px + 1.852vw,40px)}
.mb-t{font-weight:600;font-size:1.05rem;color:var(--ink)}
.mb-x{font-size:.95rem;color:var(--ink-soft);max-width:44ch;line-height:1.55}
.mb-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-top:var(--s2)}
.mb-act .lnk{display:inline-flex;align-items:center;min-height:26px}
/* Entre pulsar "Cargar el mapa" y el primer trazado de Google hay una espera
   que antes era un hueco vacio: el boton desaparecia y no pasaba nada. Ahora
   queda un esqueleto del mismo alto, con el aviso en un aria-live para quien
   no lo ve. La franja no se mueve con "reducir movimiento" activado. */
.mb{position:relative}
.mb-carga{position:absolute;top:0;left:0;right:0;height:280px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--bg-alt)}
.mb-carga::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,var(--surface) 50%,transparent 80%);
  animation:brilla 1.4s linear infinite}
.mb-carga p{position:relative;font-size:.95rem;color:var(--ink-soft)}
@keyframes brilla{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){ .mb-carga::before{animation:none} }
/* El pie del mapa: chincheta y direccion en una linea. El svg va sin width
   en el HTML, asi que si no se le da medida aqui se estira hasta llenar la
   caja entera. */
.mf{display:flex;align-items:center;justify-content:center;gap:var(--s1);
  padding:14px 18px;border-top:1px solid var(--border);
  font-size:13px;color:var(--ink-muted)}
.mf svg{flex:none;width:15px;height:15px;color:var(--accent-ink)}
.mf a{color:inherit;transition:color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.mf a:hover{color:var(--ink)}}

/* ============================================================
   EMPLEO
   Banda secundaria: no debe competir con "Reservar cita".
   ============================================================ */
#empleo{padding:clamp(48px,37.33px + 2.963vw,80px) 0}
.emp-box{background:var(--bg-alt);border-radius:var(--r-lg);padding:clamp(32px,24px + 2.222vw,56px);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s6);align-items:center}
/* Columna izquierda, no un epigrafe: si hereda versalitas condensadas el
   parrafo entero sale en mayusculas. */
.emp-l{min-width:0}
.emp-box h2{font-size:clamp(1.9rem,1.753rem + 0.6519vw,2.34rem);margin-bottom:var(--s3)}
.emp-p{color:var(--ink-soft);font-size:1.02rem}
.emp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.emp-tags span{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:12px;color:var(--ink-soft);
  background:var(--bg);border:1px solid var(--border);border-radius:99px;padding:6px 14px}
.emp-r{display:flex;flex-direction:column;gap:var(--s2);align-items:stretch}
.emp-cta,.emp-mail,.emp-wa{min-height:50px;font-size:13px}
/* Mismo caso que la chincheta del mapa: el sobre va sin width en el HTML. */
.emp-cta svg{width:15px;height:15px}

/* ============================================================
   PIE
   Aquí sí manda el carbón.
   ============================================================ */
footer{background:var(--dark);color:var(--sobre-oscuro);
  padding:clamp(56px,45.33px + 2.963vw,88px) clamp(20px,8px + 3.333vw,56px) var(--s6)}
footer>*{max-width:1280px;margin-left:auto;margin-right:auto}
/* Para un negocio local el pie es donde se busca la direccion, el telefono
   y el horario, no una fila de enlaces. Tres columnas: marca, "Visitanos"
   y "Escribenos", con los enlaces de paginas debajo. Los colores van
   fijos porque el pie es oscuro en los dos modos. */
.ft-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--s6) clamp(32px,18.67px + 3.704vw,72px);padding-bottom:var(--s6);border-bottom:1px solid var(--border-light)}
.ft-brand{min-width:0}
.ft-desc{margin-top:var(--s3);color:#A8A29A;font-size:15px;max-width:38ch;line-height:1.6}
.ft-col{min-width:0}
.ft-h{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:12px;line-height:1.3;color:#D9A75C;margin-bottom:var(--s3);padding-bottom:0;text-wrap:initial}
.ft-col p,.ft-col address{font-style:normal;font-size:15px;line-height:1.6;color:var(--sobre-oscuro);margin-bottom:var(--s2)}
.ft-col a{display:inline-flex;align-items:center;min-height:28px;color:var(--sobre-oscuro);
  border-bottom:1px solid var(--border-light);transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.ft-col a:hover{color:#D9A75C;border-bottom-color:#D9A75C}}
.ft-tel{font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;font-size:1.9rem;line-height:1.1;
  border-bottom:0;font-variant-numeric:lining-nums;margin-bottom:var(--s2)}
@media(hover:hover) and (pointer:fine){.ft-col .ft-tel:hover{border-bottom:0}}
.ft-meta{color:#A8A29A;font-size:14px}
.ft-col .hs{color:#A8A29A;margin-top:0;margin-bottom:var(--s2)}
.ft-col .hs.cerrado::before{border-color:#A8A29A}
.ft-soc{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4)}
.fll{display:flex;align-items:center;gap:14px}
.fll img{width:48px;height:48px;border-radius:var(--r-sm)}
.flb{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:13px;line-height:1.3;color:var(--sobre-oscuro)}
.flb span{display:block;color:#A8A29A;letter-spacing:.1em}
.fls{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);padding:var(--s5) 0}
.fls a{display:inline-flex;align-items:center;min-height:28px;font-size:15px;
  color:#A8A29A;transition:color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.fls a:hover{color:#D9A75C}}
.flc{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;justify-content:space-between;
  padding-top:var(--s4);border-top:1px solid var(--border-light);font-size:14px;color:#A8A29A}
.fleg{display:flex;flex-wrap:wrap;gap:var(--s4)}
/* En la portada son botones que abren el aviso; en las interiores, enlaces
   a la portada con el ancla que lo abre (/#aviso-legal). */
.fleg button,.fleg a{display:inline-flex;align-items:center;min-height:44px;background:transparent;
  border:0;padding:0;cursor:pointer;font:inherit;color:#A8A29A;
  transition:color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.fleg button:hover,.fleg a:hover{color:#D9A75C}}
/* Sin opacidad: con .72 el credito quedaba en 4,34 de contraste, por debajo
   de AA. El tamaño ya lo hace secundario. */
.fcp-s{margin-top:6px;font-size:.92em}
/* Con inline-flex el espacio antes del <strong> se pierde ("porCarballo");
   el hueco lo pone gap. */
.fcp a{display:inline-flex;align-items:center;gap:.3em;min-height:26px;color:#A8A29A}
@media(hover:hover) and (pointer:fine){.fcp a:hover{color:#D9A75C}}

/* Botón flotante de WhatsApp */
.fwa{position:fixed;right:clamp(16px,12.67px + 0.9259vw,26px);bottom:clamp(16px,12.67px + 0.9259vw,26px);z-index:calc(var(--z-nav) - 1);
  width:54px;height:54px;border-radius:50%;background:#1FA855;color:#FFF;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(21,21,21,.18);
  transition:background var(--t) var(--ease),opacity .28s var(--ease),transform var(--t-spring) var(--spring),visibility .28s}
@media(hover:hover) and (pointer:fine){.fwa:hover{background:#178B45}}
.fwa:active{transform:scale(.92)}
/* Mientras la primera pantalla esta a la vista ya hay un "Reserva tu cita"
   en ella, y el flotante lo duplicaba pegado al lado. Se esconde hasta que
   el hero se va; lo conmuta site.js observando el hero. Sin JS se ve siempre. */
.fwa.oculto{opacity:0;visibility:hidden;transform:translateY(12px) scale(.9)}
.fwa svg{width:26px;height:26px}
.fwr{display:none}

/* ============================================================
   MODALES LEGALES
   ============================================================ */
.modal-bg{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(21,21,21,.55);
  display:none;align-items:center;justify-content:center;padding:clamp(16px,5.333px + 2.963vw,48px)}
.modal-bg.on{display:flex}
.modal{background:var(--surface);border-radius:var(--r-lg);max-width:720px;width:100%;
  max-height:84vh;overflow-y:auto;padding:clamp(28px,21.33px + 1.852vw,48px);position:relative}
.modal h3{margin-bottom:var(--s4);font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;font-size:1.9rem}
.modal p,.modal li{color:var(--ink-soft);font-size:1rem;margin-bottom:var(--s2)}
.modal h4{margin:var(--s4) 0 var(--s2)}
.modal ul{padding-left:var(--s4)}
.modal-x{position:absolute;top:16px;right:16px;width:44px;height:44px;font-size:24px;line-height:1;
  background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  color:var(--ink);cursor:pointer}
@media(hover:hover) and (pointer:fine){.modal-x:hover{border-color:var(--ink)}}

/* ============================================================
   PÁGINAS INTERIORES · piezas sueltas
   ============================================================ */
/* Las migas de pan median 17px de alto: por debajo del minimo AA de 24. */
.crumb{font-size:14px;color:var(--ink-muted);margin-bottom:var(--s4);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.crumb a{display:inline-flex;align-items:center;min-height:26px;
  border-bottom:1px solid var(--border-strong)}
@media(hover:hover) and (pointer:fine){.crumb a:hover{color:var(--accent-ink)}}
.close-cta{text-align:center;max-width:640px;margin:0 auto}
/* Cuando el cierre va detras de contenido dentro de la misma seccion arrancaba
   pegado a el. Cuando abre la seccion, el padding de la seccion ya hace su papel. */
.close-cta:not(:first-child){margin-top:var(--s8)}
.close-cta p{margin:var(--s4) auto 0;color:var(--ink-soft)}
/* El 404 llevaba su propio <style> con el tema oscuro cableado y variables
   que ya no existen. Ahora vive en el sistema, como el resto. */
.e404{position:relative;overflow:hidden;min-height:76vh;display:flex;align-items:center;
  padding:calc(84px + var(--s8)) clamp(20px,8px + 3.333vw,56px) var(--s8)}
.e404::after{content:'404';position:absolute;right:-2vw;bottom:-5vh;pointer-events:none;
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-size:clamp(160px,26vw,420px);font-weight:700;
  line-height:1;letter-spacing:-.04em;color:var(--marca-agua)}
.e404-in{max-width:640px;position:relative;z-index:2}
.e404 p{color:var(--ink-soft);max-width:56ch}
.e404-more ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px}
.e404-more a{display:inline-flex;align-items:center;min-height:28px;font-size:15px;
  color:var(--ink-soft);border-bottom:1px solid var(--border-strong)}
@media(hover:hover) and (pointer:fine){.e404-more a:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}}
.e404-in h1{margin-bottom:var(--s3)}
.e404-links{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s6)}
.e404-more{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--border)}
.e404-more-l{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:12px;color:var(--ink-muted);margin-bottom:var(--s2)}

/* ==critico== */
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .ph-grid,.mt-grid,.ctg,.emp-box{grid-template-columns:1fr}
  .mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Una columna: las areas dejan de mandar y se apila como el marcado. */
  .mt-grid{grid-template-areas:none;gap:var(--s5)}
  .mt-tx,.mt-pillars,.mt-act{grid-area:auto}
  .ph-grid{gap:var(--s5)}
  .emp-box{gap:var(--s5)}
  .emp-r{flex-direction:row;flex-wrap:wrap}
  .rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-card:nth-child(n+3){display:none}
  .trust{grid-template-columns:1fr;gap:var(--s5)}
  .trust-rate{border-right:0;padding-right:0;padding-bottom:var(--s5);border-bottom:1px solid var(--border)}
  .pr-card{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"num per fee" "num mo feeu" "num ses ses"}
  .pr-ses{text-align:left;margin-top:8px}
}

@media(max-width:900px){
  .nm,.ncta,.nac{display:none}
  .bur{display:flex}
  .sh,.rv-head,.gal-intro{grid-template-columns:1fr;gap:var(--s4);align-items:start}
  .fq-grid,.pasos{grid-template-columns:1fr}
  .fq-side{position:static}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1 / -1}
  .svg{grid-template-columns:1fr}
  .pr-inc{grid-template-columns:1fr;gap:var(--s5)}
}

@media(max-width:768px){
  body{font-size:16px}
  #hero{padding:calc(84px + var(--s6)) 0 var(--s7)}
  .hsub{margin-bottom:var(--s5)}
  .hbs{gap:var(--s1)}
  .hbs .bg,.hbs .bo{flex:1 1 100%}
  .mods{grid-template-columns:1fr}
  .trust-facts{grid-template-columns:1fr;gap:var(--s4)}
  .rv-grid{grid-template-columns:1fr}
  .rv-card:nth-child(n+3){display:flex}
  .rv-card:nth-child(n+4){display:none}
  .mb iframe{height:240px}
  .mb-ph{min-height:240px}
  .mb-carga{height:240px}
  .sp-item:first-child{flex:0 0 clamp(280px,86vw,420px)}
  .sp-item{flex:0 0 clamp(240px,78vw,360px)}
}

@media(max-width:600px){
  .ft-top{grid-template-columns:1fr}
  .rsv-c span{white-space:normal}
  .bg,.bo,.bwa,.pr-cta,.rv-gbtn,.emp-cta,.emp-mail,.emp-wa,.mob-cta{
    white-space:normal;text-align:center;line-height:1.3;padding:12px 18px}
  .mod{gap:var(--s3);padding:16px 16px}
  .mod-ic{width:46px;height:46px}
  .mod-t{font-size:1.05rem}
  .pr-tabs{max-width:none}
  .pr-tab{letter-spacing:.06em;font-size:12px;padding:0 6px}
  .pr-long{display:none}
  .pr-card{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"num per fee" "num mo feeu" "num ses ses";
    gap:0 var(--s3);padding:18px 16px}
  .pr-grid,.pr-grid.n3{gap:var(--s2)}
  .pr-incs{grid-template-columns:1fr;gap:var(--s5)}
  .pr-n{font-size:2.1rem;min-width:34px}
  .pr-fee{font-size:1.9rem}
  .pr-badge{left:16px}
  .emp-r{flex-direction:column}
  .sp-nav{justify-content:center}
  .flc{flex-direction:column;align-items:flex-start}
}
/* ==/critico== */