/* ===========================================================================
   Estilos base de la Fábrica. Un solo archivo: cambiar «ese azul más oscuro»
   es cambiar una línea (patrones/mantenimiento.md).

   1. Colores: el PATRÓN DE TRES TONOS (patrones/color.md). El de marca, tal
      cual, SOLO para decorar; el oscurecido para todo el texto de color.
      Mide cada uno contra su fondo y apunta el contraste al lado.
   2. Escala tipográfica y de espacios (patrones/diseno.md): 7 tamaños, no 30.
   3. Tres puntos de ruptura para todas las webs: 560 · 900.
   =========================================================================== */
:root {
  /* Global Therapy Mallén: el azul de su CSS y de la pelota del logo, y el
     verde agua del mural de su gimnasio (branding.json → colores_nota). */
  --marca: #3E46CA;        /* su azul, tal cual: 7,16 sobre blanco, 6,58 sobre --fondo-alt */
  --marca-texto: #3E46CA;  /* ya cumple: texto y enlaces */
  --marca-honda: #262B85;  /* botones, pie y foco: 11,89 sobre blanco */
  --acento: #26B5A3;       /* verde agua del mural: 2,55, SOLO decoración */
  --acento-texto: #0F7163; /* 5,9 sobre blanco y 5,4 sobre --fondo-alt (#12806F daba 4,44 ahí) */
  --fondo: #FFFFFF;
  --fondo-alt: #F4F5FB;
  --tinta: #16172B;        /* casi negro azulado */
  --tinta-suave: #474A63;
  --borde: #D9DBEA;

  --p0: 1rem; --p1: 1.125rem; --p2: 1.25rem; --p3: 1.6rem; --p4: 2rem; --p5: 2.5rem; --p6: 3.2rem;
  --h1: clamp(var(--p4), 6vw, var(--p6));
  --h2: clamp(var(--p3), 4vw, var(--p5));
  --e1: .5rem; --e2: 1rem; --e3: 1.6rem; --e4: 2.5rem; --e5: 4rem;

  --barra: 64px;           /* el alto de la barra fija, en UN sitio */
  --radio: 10px;
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* cero peticiones de fuera */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 1.4rem); } /* el freno de las anclas */
body { margin: 0; font: var(--p1)/1.65 var(--letra); color: var(--tinta); background: var(--fondo); }
img, svg, video { max-width: 100%; height: auto; }
figure { margin: 1.7em 0; } /* el margin:1em 40px de fábrica descuadra las fotos */
[hidden] { display: none !important; } /* cualquier display tuyo le gana a hidden */
a { color: var(--marca-texto); }
/* --marca-texto da 4,51 sobre BLANCO y 4,16 sobre el gris de las secciones
   alternas (medido con contraste.py en Casa Emilia): un tono cumple sobre los
   fondos con los que se calibro, no sobre todos. Ahi los enlaces van en el hondo. */
.seccion--alt a:not(.boton), .hero a:not(.boton) { color: var(--marca-honda); }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--marca-honda); outline-offset: 2px; }
:where(p, li, td) a:where([href^="tel:"], [href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; } /* se pulsan con el dedo */
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--h1); margin: 0 0 var(--e2); }
h2 { font-size: var(--h2); margin: var(--e4) 0 var(--e2); }
h3 { font-size: var(--p2); margin: var(--e3) 0 var(--e1); }

.contenedor { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.estrecho { max-width: 44rem; }
.seccion { padding: 2.1rem 0; } /* en el móvil; en escritorio, --e5 (abajo) */
.seccion--alt { background: var(--fondo-alt); }
/* Con la barra delante: .boton (display:inline-flex) va despues y ganaba,
   y el boton de escritorio aparecia en la cabecera del movil (visto en la
   revision visual de Casa Emilia). En el movil llama la barra de abajo. */
.barra .solo-escritorio { display: none; }

/* --- barra fija --- */
.salto { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--fondo); }
.salto:focus { left: 1rem; }
.barra { position: sticky; top: 0; z-index: 50; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.barra__in { display: flex; align-items: center; gap: var(--e2); min-height: var(--barra); }
.barra__marca { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin-right: auto; color: var(--tinta); font-weight: 700; text-decoration: none; }
.barra__logo { height: 40px; width: auto; }
.nav-escritorio { display: none; gap: .25rem; }
.nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; color: var(--tinta); text-decoration: none; border-radius: 6px; }
.nav-escritorio a[aria-current="page"], .nav-movil nav a[aria-current="page"] { color: var(--marca-honda); font-weight: 700; }
.nav-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--borde); border-radius: 6px; cursor: pointer; list-style: none; }
.nav-movil summary::-webkit-details-marker { display: none; }
.nav-movil nav { position: absolute; left: 0; right: 0; top: var(--barra); display: grid; background: var(--fondo); border-bottom: 1px solid var(--borde); padding: var(--e1) 1rem var(--e2); box-shadow: 0 12px 24px rgba(20, 24, 70, .18); z-index: 20; }
/* el grupo de las páginas por situación dentro del menú del móvil (QA-02) */
.nav-movil__grupo { display: block; margin-top: var(--e1); padding: .6rem 0 .2rem; color: var(--acento-texto); font-size: var(--p0); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.nav-movil nav { max-height: calc(100vh - var(--barra) - 64px); overflow-y: auto; }
.nav-movil nav a { display: flex; align-items: center; min-height: 48px; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--fondo-alt); }

/* --- botones --- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.2rem; border-radius: var(--radio); background: var(--marca-honda); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid var(--marca-honda); }
.boton--sec { background: transparent; color: var(--marca-honda); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e1); }

/* --- bloques --- */
.hero { padding: var(--e4) 0 var(--e5); background: var(--fondo-alt); }
.antetitulo { margin: 0 0 var(--e1); color: var(--tinta-suave); font-weight: 700; letter-spacing: .02em; }
.entradilla { font-size: var(--p2); color: var(--tinta-suave); max-width: 40rem; }
.rejilla { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } /* min(100%,…): con 300px fijos desborda el móvil */
/* seis tarjetas: tres columnas en escritorio, sin fila coja (diseño, vuelta 2) */
/* tres tarjetas cortas dentro del contenedor estrecho (contacto): en una fila (diseño, vuelta 3) */
.rejilla--datos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.tarjeta { display: block; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); color: var(--tinta); text-decoration: none; }
.tarjeta h3 { margin-top: 0; color: var(--marca-honda); }
.pasos { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: var(--e2); }
.pasos li { counter-increment: paso; padding-left: 3rem; position: relative; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--marca-honda); color: #fff; font-weight: 700; }
.preguntas details { border-bottom: 1px solid var(--borde); padding: var(--e1) 0; }
.preguntas summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--e1); cursor: pointer; font-weight: 700; }
.preguntas summary::after { content: "+"; flex: none; font-size: 1.4em; line-height: 1; color: var(--marca-honda); }
.preguntas details[open] > summary::after { content: "–"; }
.dato { font-size: var(--p4); font-weight: 800; color: var(--marca-honda); }
table { width: 100%; border-collapse: collapse; margin: var(--e2) 0; }
th, td { padding: .7rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
th { font-size: var(--p0); color: var(--tinta-suave); }
.precio { text-align: right; white-space: nowrap; }
blockquote { margin: var(--e3) 0; padding-left: var(--e2); border-left: 4px solid var(--marca); }
blockquote p { margin: 0; font-size: var(--p2); }
.firma { margin-top: var(--e1); color: var(--tinta-suave); }
.oscuro { background: var(--tinta); color: #fff; }
.oscuro a, .oscuro strong { color: inherit; } /* sobre fondo oscuro, la negrita no puede ir en tinta */

/* --- Global Therapy: piezas propias --- */
.barra__logo { height: 44px; }
.nav-escritorio a, .barra .boton { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1180px) {
  /* el logo ya dice «Global Therapy»: sin el nombre a la vista caben menú y botón
     en una línea. Escondido solo a la vista: es el texto del enlace (el logo va con alt="") */
  .barra__marca span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.barra__marca span { color: var(--marca-honda); }
@media (max-width: 360px) { .barra__marca span { font-size: .95rem; } .barra__logo { height: 36px; } }
.hero__rej { display: grid; gap: var(--e3); align-items: center; }
.hero__foto { margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: 0 10px 30px rgb(38 43 133 / .18); }
.hero__foto img { display: block; width: 100%; height: auto; }
/* la claraboya de arriba quema la foto: se recorta por arriba y manda el mural (diseño, vuelta 1) */
.hero__foto img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 80%; }
.hero__foto figcaption, .pie-foto { padding: .5rem .8rem; font-size: var(--p0); color: var(--tinta-suave); background: var(--fondo); }
.hero .antetitulo { color: var(--acento-texto); text-transform: uppercase; letter-spacing: .06em; font-size: var(--p0); }
h1, h2 { color: var(--marca-honda); }
.tres-frases { list-style: none; margin: var(--e2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; color: var(--tinta-suave); font-size: var(--p0); }
.tres-frases li::before { content: "• "; color: var(--acento-texto); font-weight: 700; }
.tarjeta { border-top: 5px solid var(--acento); transition: border-color .15s; }
.tarjeta:hover, .tarjeta:focus-visible { border-color: var(--marca); }
.tarjeta p { margin-bottom: 0; }
@media (max-width: 559px) { .tarjeta { padding: var(--e2) var(--e2) 1.1rem; } .tarjeta p { margin-top: .4rem; } }
.tarjeta .ir { display: inline-block; margin-top: var(--e1); color: var(--marca-texto); font-weight: 700; }
.datos { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); list-style: none; padding: 0; margin: var(--e3) 0 0; }
.datos li { padding: var(--e2); border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--borde); }
.datos b { display: block; font-size: var(--p4); line-height: 1.1; color: var(--marca); }
.lista-dos { columns: 2 14rem; gap: var(--e3); padding-left: 1.2rem; }
.lista-dos li { break-inside: avoid; margin-bottom: .3rem; }
.persona { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0 var(--e2); align-items: start; padding: var(--e3) 0; border-bottom: 1px solid var(--borde); }
.persona__ini { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--marca); color: #fff; font-weight: 800; letter-spacing: .03em; }
.persona h3 { margin: .2rem 0 0; color: var(--marca-honda); }
.persona__puesto { margin: 0 0 var(--e1); color: var(--acento-texto); font-weight: 700; }
.persona ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.persona blockquote { grid-column: 2; }
/* quien solo tiene nombre y puesto publicados: fila compacta, no ficha a medio llenar */
.persona--breve { grid-template-columns: 2.4rem 1fr; align-items: center; padding: var(--e2) 0; }
.persona--breve .persona__ini { width: 2.4rem; height: 2.4rem; font-size: .85rem; }
.persona--breve h3 { display: inline; margin: 0; }
.persona--breve .persona__puesto { display: inline; margin: 0 0 0 .5rem; }
.aviso { padding: var(--e2) var(--e3); border-left: 5px solid var(--acento); background: var(--fondo-alt); border-radius: 0 var(--radio) var(--radio) 0; }
.seccion--alt .aviso { background: var(--fondo); }
.salto-seccion, .persona, h2[id] { scroll-margin-top: calc(var(--barra) + 1rem); }
@media (min-width: 900px) {
  .hero__rej { grid-template-columns: 1.1fr 1fr; gap: var(--e4); }
}

/* --- páginas por situación y primera visita (encargo del 24/9/2026) --- */
/* los recortes de su foto ya vienen encuadrados: sin el recorte del hero principal */
.hero__foto--mural img, .hero__foto--recorte img { aspect-ratio: auto; object-position: 50% 50%; }
.para-quien, .para-preguntar { list-style: none; padding: 0; display: grid; gap: .5rem; }
.para-quien li, .para-preguntar li { position: relative; padding-left: 1.8rem; }
.para-quien li::before { content: "✓"; position: absolute; left: 0; color: var(--acento-texto); font-weight: 800; }
.para-preguntar li::before { content: "?"; position: absolute; left: 0; width: 1.3rem; text-align: center; border-radius: 50%; background: var(--marca-honda); color: #fff; font-weight: 800; font-size: .85em; line-height: 1.3rem; top: .25em; }
/* el recorrido fisio → gimnasio: en fila en escritorio, en columna en el móvil */
/* dos por fila ya en el móvil: la portada no pasa de 8 pantallas (motor, portada-larga) */
.recorrido { counter-reset: paso; list-style: none; padding: 0; margin: var(--e3) 0 0; display: grid; gap: var(--e3) var(--e1); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
@media (min-width: 900px) { .recorrido { gap: var(--e2); grid-template-columns: repeat(4, 1fr); } }
.recorrido li { counter-increment: paso; position: relative; padding: var(--e3) .8rem .8rem; border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--borde); border-top: 5px solid var(--acento); }
.seccion--alt .recorrido li { background: var(--fondo); }
.seccion:not(.seccion--alt) .recorrido li { background: var(--fondo-alt); }
.recorrido li::before { content: counter(paso); position: absolute; top: -1.1rem; left: var(--e2); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--marca-honda); color: #fff; font-weight: 700; }
.recorrido b { display: block; color: var(--marca-honda); font-size: var(--p1); line-height: 1.3; }
.recorrido span { display: block; margin-top: .3rem; color: var(--tinta); font-size: var(--p0); line-height: 1.5; }
.recorrido__nota { margin-top: var(--e2); color: var(--tinta-suave); }
.otras { color: var(--tinta-suave); }
.foto-pequena { display: flex; gap: var(--e2); align-items: flex-end; }
.foto-pequena img { width: 196px; border-radius: var(--radio); }
.foto-pequena figcaption { color: var(--tinta-suave); font-size: var(--p0); }

/* --- página privada para el dueño (para-el-centro.html) --- */
/* captura contra captura: siempre lado a lado, también en el móvil; la explicación, debajo */
.comparar { display: grid; gap: var(--e2); grid-template-columns: 1fr 1fr; max-width: 50rem; margin: var(--e2) 0 var(--e1); }
.comparar figure { margin: 0; }
.comparar img { display: block; width: 100%; max-width: 390px; border: 1px solid var(--borde); border-radius: 6px; }
.comparar__texto { max-width: 44rem; margin-bottom: var(--e3); }
.comparar__texto p { margin: .5rem 0; }
.comparar .etiqueta { display: inline-block; margin-bottom: .4rem; padding: .1rem .6rem; border-radius: 999px; font-size: var(--p0); font-weight: 700; color: #fff; background: var(--tinta-suave); }
.comparar .etiqueta--nueva { background: var(--marca-honda); }
.decision { padding: var(--e2) 0; border-bottom: 1px solid var(--borde); }
.decision h3 { margin: 0 0 .3rem; color: var(--marca-honda); }
.decision p { margin: .3rem 0; }
.decision .prueba { color: var(--tinta-suave); font-size: var(--p0); }

/* --- «Prepara tu llamada» (encargo «al máximo nivel», 24/9/2026) --- */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.privado { margin: var(--e2) 0 0; padding: .8rem 1rem; border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--borde); color: var(--tinta); font-size: var(--p0); }
.privado b { color: var(--acento-texto); }
.asistente { display: grid; gap: var(--e3); }
.asistente__paso { margin: 0; padding: 0; border: 0; min-width: 0; }
.asistente__paso legend { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--e1); font-size: var(--p2); font-weight: 800; color: var(--marca-honda); }
.asistente__n { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--marca-honda); color: #fff; font-size: var(--p0); }
.asistente__ayuda { margin: 0 0 var(--e1); color: var(--tinta-suave); font-size: var(--p0); }
.opcion { display: flex; align-items: center; gap: .7rem; min-height: 52px; margin-bottom: .5rem; padding: .5rem 1rem; border: 2px solid var(--borde); border-radius: var(--radio); background: var(--fondo); cursor: pointer; }
.opcion input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--marca-honda); }
.opcion:has(input:checked) { border-color: var(--marca-honda); background: var(--fondo-alt); font-weight: 700; }
.opcion:has(input:focus-visible) { outline: 3px solid var(--marca-honda); outline-offset: 2px; }
.asistente__urgencia { margin: 0; color: var(--tinta-suave); font-size: var(--p0); }
.asistente__urgencia a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.resultado { margin-top: var(--e4); padding: var(--e3); border-radius: var(--radio); border: 2px solid var(--marca-honda); border-top-width: 6px; background: var(--fondo); }
.resultado h2 { margin-top: 0; }
.resultado h2:focus { outline: none; }
.destino__pagina { font-size: var(--p2); font-weight: 700; }
.destino__pagina a { color: var(--marca-honda); }
.resultado__frase { border-left-color: var(--acento); background: var(--fondo-alt); padding: .8rem 1rem; border-radius: 0 var(--radio) var(--radio) 0; }
.resultado__otra { color: var(--tinta-suave); font-size: var(--p0); }
button.enlace { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--marca-honda); font: inherit; text-decoration: underline; cursor: pointer; }

/* --- borradores, marcas de lo que falta y formularios apagados --- */
.borrador { margin: 0; padding: .8rem 1rem; background: #FFF4C2; color: var(--tinta); border-bottom: 2px solid #C79A00; font-size: var(--p0); text-align: center; }
mark.revisar { padding: 0 .3em; border-radius: 4px; background: #FFF4C2; color: #5C4300; font-size: .85em; font-weight: 700; overflow-wrap: anywhere; }
.oculto { position: absolute; left: -9999px; }
.te-llamamos label { display: block; font-weight: 700; }
.te-llamamos input:not([type="checkbox"]), .te-llamamos select { width: 100%; min-height: 48px; padding: .4rem .7rem; border: 1px solid var(--tinta-suave); border-radius: 6px; font: inherit; }
.te-llamamos .casilla { display: flex; gap: .6rem; align-items: center; min-height: 44px; font-weight: 400; }
.nota { color: var(--tinta-suave); font-size: var(--p0); }
.resenas__lista { list-style: none; padding: 0; display: grid; gap: var(--e2); }

/* --- lo que le hace distinto (encargo «al máximo nivel») --- */
.linea-tiempo { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.linea-tiempo li { position: relative; padding: 0 0 var(--e2) 2.4rem; }
.linea-tiempo li::before { content: ""; position: absolute; left: .45rem; top: .35rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--fondo); border: 4px solid var(--marca-honda); }
.linea-tiempo li::after { content: ""; position: absolute; left: .88rem; top: 1.6rem; bottom: 0; width: 3px; background: var(--acento); }
.linea-tiempo li:last-child::after { display: none; }
.linea-tiempo b { display: block; font-size: var(--p3); line-height: 1.1; color: var(--marca-honda); }
.linea-tiempo span { color: var(--tinta); }
.linea-tiempo__hoy::before { background: var(--acento) !important; border-color: var(--acento-texto) !important; }
@media (min-width: 900px) {
  .linea-tiempo { grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
  .linea-tiempo li { padding: 2.2rem var(--e1) 0 0; }
  .linea-tiempo li::before { left: 0; top: 0; }
  .linea-tiempo li::after { left: 1.4rem; right: calc(-1 * var(--e2)); top: .6rem; bottom: auto; width: auto; height: 3px; }
}
.recorrido-esquema { margin: var(--e3) 0 0; }
.esquema { display: block; width: 100%; height: auto; max-width: 30rem; }
.esquema--ancho { display: none; max-width: none; }
@media (min-width: 900px) { .esquema--movil { display: none; } .esquema--ancho { display: block; } }
.confianza { display: grid; gap: var(--e3); }
@media (min-width: 900px) { .confianza { grid-template-columns: 3fr 2fr; align-items: start; } }
.comprobable { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.comprobable li { padding: var(--e2); background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); border-left: 5px solid var(--marca-honda); }
.comprobable b { display: block; color: var(--marca-honda); font-size: var(--p1); }
.comprobable span { display: block; margin-top: .3rem; font-size: var(--p0); color: var(--tinta); }
.no-prometemos { padding: var(--e2) var(--e3); border-radius: var(--radio); background: var(--marca-honda); color: #fff; }
.no-prometemos h3 { margin-top: 0; color: #fff; }
/* :not(.boton) sube la especificidad sobre «.seccion--alt a:not(.boton)»: sin empate, gana siempre el blanco */
.no-prometemos a, .seccion--alt .no-prometemos a:not(.boton) { color: #fff; }

/* «Quién te atiende» con chispa y sin fotos (lecciones.md) */
.persona__ini { background: linear-gradient(135deg, var(--marca) 0%, var(--marca-honda) 100%); box-shadow: 0 0 0 3px var(--fondo), 0 0 0 6px var(--acento); font-size: 1.05rem; }
.persona { grid-template-columns: 4rem 1fr; }
.persona .persona__ini { width: 3.6rem; height: 3.6rem; margin-top: .3rem; }
.persona--breve { grid-template-columns: 3rem 1fr; }
/* Hueco de foto (FOTOS_EQUIPO en datos.py): mismo círculo y anillo que las iniciales */
.persona__foto { display: block; object-fit: cover; background: var(--fondo-alt, #F4F5FB); }
.persona--breve .persona__ini { width: 2.5rem; height: 2.5rem; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--acento); }
.quien-lleva { list-style: none; margin: 0 0 var(--e2); padding: 0; display: grid; gap: .5rem; }
.quien-lleva li { display: grid; gap: .2rem; padding: .7rem 1rem; border-radius: var(--radio); background: var(--fondo-alt); border-left: 5px solid var(--acento); }
@media (min-width: 560px) { .quien-lleva li { grid-template-columns: 1fr auto; align-items: center; } }
.quien-lleva__que { font-weight: 700; color: var(--marca-honda); }
.quien-lleva__quien a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-weight: 700; }

/* La portada en el móvil, dentro de 8 pantallas (motor, portada-larga): la
   tarjeta entera es el enlace, así que su «→» sobra; línea de tiempo y
   «Lo que puedes comprobar», de dos en dos. */
@media (max-width: 559px) {
  .rejilla--3 .tarjeta .ir { display: none; }
  .triaje .tarjeta p { display: none; } /* el título ya dice el caso */
  .triaje .tarjeta h3 { margin: 0; }
  .triaje { gap: var(--e1); }
  .linea-tiempo { grid-template-columns: 1fr 1fr; gap: var(--e2) var(--e1); }
  .linea-tiempo li { padding: 1.8rem 0 0; }
  .linea-tiempo li::before { left: 0; top: 0; }
  .linea-tiempo li::after { display: none; }
  .linea-tiempo span { display: block; font-size: var(--p0); line-height: 1.45; }
  .comprobable { grid-template-columns: 1fr 1fr; gap: var(--e1); }
  .comprobable li { padding: .7rem; border-left-width: 4px; }
  .comprobable b { font-size: var(--p0); line-height: 1.3; }
  .comprobable span { font-size: .95rem; line-height: 1.45; }
}

/* --- guías (borradores hasta que las valide el fisioterapeuta) --- */
.fuentes { font-size: var(--p0); color: var(--tinta-suave); padding-left: 1.2rem; }
.fuentes li { margin-bottom: .4rem; overflow-wrap: anywhere; }

/* --- Salto de diseño (29/9/2026): que parezca de ESTE centro, no de plantilla --- */
/* Letra de titulares alojada en la propia web (OFL, assets/fuentes/OFL.txt):
   cero peticiones de fuera; si no carga, la del sistema, sin salto (swap + ajuste). */
@font-face {
  font-family: "Jakarta"; src: url("assets/fuentes/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face { font-family: "Jakarta-respaldo"; src: local("Segoe UI"), local("Roboto"), local("Arial"); size-adjust: 104%; ascent-override: 96%; }
:root { --letra-titulos: "Jakarta", "Jakarta-respaldo", var(--letra); }
h1, h2, h3, .boton, .barra__marca, .linea-tiempo b, .recorrido b, .antetitulo, .barra-movil a, .datos b, .dato { font-family: var(--letra-titulos); }
h1 { font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
h2 { font-weight: 800; letter-spacing: -.02em; }
h3 { font-weight: 700; letter-spacing: -.01em; }

/* Portada: el verde agua del mural como firma, detrás de la foto y bajo el titular */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(60rem 30rem at 110% -10%, rgb(38 181 163 / .16), transparent 60%),
  radial-gradient(40rem 24rem at -10% 110%, rgb(62 70 202 / .10), transparent 60%),
  var(--fondo-alt); }
.hero h1 { position: relative; }
.hero h1::after { content: ""; display: block; width: 3.2rem; height: 6px; margin-top: .9rem; border-radius: 3px; background: var(--acento); }
.hero__foto { position: relative; overflow: visible; box-shadow: none; }
.hero__foto picture { display: block; position: relative; z-index: 1; border-radius: calc(var(--radio) + 4px); overflow: hidden; box-shadow: 0 18px 40px rgb(38 43 133 / .22); }
.hero__foto::before { content: ""; position: absolute; inset: 1.1rem -0.9rem -0.9rem 1.1rem; border-radius: calc(var(--radio) + 4px); background: repeating-linear-gradient(135deg, var(--acento) 0 3px, transparent 3px 12px); opacity: .45; }
.hero__sello { position: absolute; z-index: 2; left: -.8rem; bottom: 1.2rem; margin: 0; padding: .6rem .9rem; border-radius: var(--radio); background: var(--fondo); box-shadow: 0 8px 22px rgb(22 23 43 / .16); font-family: var(--letra-titulos); line-height: 1.15; color: var(--tinta); }
.hero__sello b { display: block; font-size: var(--p3); font-weight: 800; color: var(--marca-honda); }
.hero__sello span { font-size: .9rem; color: var(--tinta-suave); }
@media (max-width: 559px) { .hero__sello { left: .6rem; bottom: .6rem; } .hero__foto::before { inset: .7rem -.4rem -.5rem .7rem; } }
.boton { transition: transform .15s, box-shadow .15s, background-color .15s; }
.boton:not(.boton--sec) { box-shadow: 0 6px 16px rgb(38 43 133 / .28); }
.boton:hover { transform: translateY(-1px); }
.boton:not(.boton--sec):hover { background: #1D2170; border-color: #1D2170; }
.boton--sec { background: var(--fondo); }

/* «¿Qué necesitas?»: un icono por situación, para escanear sin leer */
.triaje .tarjeta { position: relative; border-top: 1px solid var(--borde); padding-top: var(--e3); transition: transform .15s, box-shadow .15s, border-color .15s; }
.triaje .tarjeta::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 4px; border-radius: var(--radio) var(--radio) 0 0; background: linear-gradient(90deg, var(--acento), var(--marca)); }
.triaje .tarjeta:hover, .triaje .tarjeta:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(38 43 133 / .14); border-color: var(--borde); }
.triaje .tarjeta h3 { display: flex; align-items: center; gap: .75rem; }
.icono { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 12px; background: rgb(38 181 163 / .14); color: var(--acento-texto); }
.icono svg { width: 1.45rem; height: 1.45rem; }
@media (max-width: 559px) {
  .triaje .tarjeta { padding: .75rem .9rem; display: flex; align-items: center; }
  .triaje .tarjeta::before { top: 0; bottom: 0; right: auto; width: 4px; height: auto; border-radius: var(--radio) 0 0 var(--radio); background: linear-gradient(180deg, var(--acento), var(--marca)); }
  .triaje .tarjeta h3 { font-size: 1.05rem; }
  .icono { width: 2.3rem; height: 2.3rem; border-radius: 10px; }
  .icono svg { width: 1.25rem; height: 1.25rem; }
}

/* Cómo se pide cita: el cierre de la portada, en banda de su azul */
.seccion--cita { background: linear-gradient(135deg, var(--marca-honda) 0%, #1D2170 100%); color: #fff; position: relative; overflow: hidden; }
.seccion--cita::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 18rem; height: 18rem; border-radius: 50%; border: 28px solid rgb(38 181 163 / .22); pointer-events: none; }
.seccion--cita h2 { color: #fff; }
.seccion--cita a:not(.boton) { color: #fff; }
.seccion--cita .pasos li::before { background: var(--acento); color: var(--tinta); }
.seccion--cita .boton { background: #fff; color: var(--marca-honda); border-color: #fff; box-shadow: 0 8px 20px rgb(0 0 0 / .25); }
.seccion--cita .boton:hover { background: #EEF0FF; border-color: #EEF0FF; }
.seccion--cita :focus-visible { outline-color: #fff; }
@media (max-width: 559px) { .seccion--cita::after { right: -9rem; top: -9rem; opacity: .6; } } /* en el móvil el aro tapaba el titular */
.seccion--cita h2 { position: relative; z-index: 1; }

/* ===========================================================================
   Sistema de las páginas interiores (29/9/2026, «mejórala muchísimo»):
   docs/auditorias/2026-09-29-salto/. Un color por área dentro de su paleta,
   emblema propio en cada hero, cifras probadas como tipografía, «¿Cuál es tu
   caso?» único, iconos en modalidades y tratamientos, estética con su aire.
   =========================================================================== */
.hero > .contenedor { position: relative; }
.hero:not(:has(.hero__foto)) { padding-bottom: var(--e4); }

/* Emblema del área: en el móvil, sello pequeño al lado del antetítulo; en
   escritorio, grande a la derecha del titular. Decorativo (aria-hidden). */
.hero__emblema { position: absolute; right: -4px; top: -10px; width: 68px; height: 68px; }
.hero:has(.hero__emblema) .antetitulo { padding-right: 72px; }
.hero__emblema svg { display: block; width: 100%; height: 100%; }
@media (min-width: 900px) {
  .hero:not(:has(.hero__foto)) .hero__emblema { position: absolute; right: 0; top: 50%; width: 260px; height: 260px; margin: 0; transform: translateY(-50%); }
  .hero:not(:has(.hero__foto)) .antetitulo { padding-right: 0; }
  .hero:not(:has(.hero__foto)) .contenedor.estrecho { max-width: 72rem; }
  .hero:not(:has(.hero__foto)) .contenedor.estrecho > :not(.hero__emblema) { max-width: 44rem; }
}

/* Un tono por área */
.hero--fisio { background:
  linear-gradient(90deg, var(--marca) 0 6px, transparent 6px),
  radial-gradient(50rem 26rem at 105% 0%, rgb(62 70 202 / .12), transparent 60%), var(--fondo); }
.hero--entreno { background:
  radial-gradient(46rem 24rem at 100% 0%, rgb(38 181 163 / .30), transparent 60%),
  linear-gradient(135deg, var(--marca-honda) 0%, #1B1F66 100%); color: #fff; }
.hero--entreno h1, .hero--entreno .entradilla, .hero--entreno .tres-frases { color: #fff; }
.hero--entreno .antetitulo { color: #8FE3D8; }
.hero--entreno h1::after { background: #8FE3D8; }
.hero--entreno a:not(.boton) { color: #fff !important; }
.hero--entreno .boton { background: #fff; color: var(--marca-honda); border-color: #fff; }
.hero--entreno .boton--sec { background: transparent; color: #fff; border-color: #fff; }
.hero--entreno :focus-visible { outline-color: #fff; }
.hero--entreno .hero__emblema path[fill] { opacity: .35; }
.hero--entreno .hero__emblema g { stroke: #fff; }
.hero--estetica { background:
  radial-gradient(40rem 22rem at 100% 0%, rgb(38 181 163 / .22), transparent 62%),
  radial-gradient(30rem 20rem at 0% 100%, rgb(232 196 170 / .35), transparent 60%), #FBF7F3; }
.hero--estetica .antetitulo { color: #0F6B5E; }

/* Cifras PROBADAS como tipografía (DIS-05). Solo datos de AFIRMACIONES. */
.cifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e1); }
.cifras li { padding: .9rem .7rem; border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--borde); text-align: center; }
.cifras b { display: block; font-family: var(--letra-titulos); font-size: clamp(1.5rem, 5vw, 2.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--marca-honda); }
.cifras span { display: block; margin-top: .3rem; font-size: .92rem; line-height: 1.35; color: var(--tinta-suave); }
.banda-cifras { padding: var(--e3) 0; background: var(--fondo-alt); border-block: 1px solid var(--borde); }
.hero--entreno + .banda-cifras { background: #EEF0FB; }

/* H2 de pregunta (los que citan Google y las IA): más contenidos, con su «?» (DIS-12) */
h2[data-pregunta] { position: relative; }
@media (max-width: 559px) { h2[data-pregunta] { font-size: 1.45rem; } }
h2[data-pregunta]::before { content: "?" / ""; display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: .45rem; border-radius: 50%; background: rgb(38 181 163 / .18); color: var(--acento-texto); font-size: .72em; vertical-align: .18em; }

/* «¿Cuál es tu caso?» (DIS-13): chips con icono, desplazables en el móvil */
.casos { margin-top: var(--e3); }
.casos__titulo { margin: 0 0 var(--e1); font-family: var(--letra-titulos); font-weight: 800; color: var(--marca-honda); }
.casos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.casos a { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .35rem .95rem .35rem .45rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo); color: var(--tinta); font-weight: 600; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.seccion--alt .casos a:not(.boton) { color: var(--tinta); }
.casos a:hover { border-color: var(--marca); box-shadow: 0 6px 16px rgb(38 43 133 / .12); }
.casos a[aria-current="page"], .seccion--alt .casos a[aria-current="page"] { background: var(--marca-honda); border-color: var(--marca-honda); color: #fff; }
.casos a[aria-current="page"] .icono { background: rgb(255 255 255 / .16); color: #fff; }
.icono--chip { width: 2.1rem; height: 2.1rem; border-radius: 999px; }
.icono--chip svg { width: 1.15rem; height: 1.15rem; }
@media (max-width: 559px) {
  .casos ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; margin-inline: -1rem; padding-inline: 1rem; scroll-snap-type: x proximity; }
  .casos li { flex: none; scroll-snap-align: start; }
}

/* Tarjetas con icono (modalidades, tratamientos, unidades) */
.tarjeta--icono { position: relative; border-top: 1px solid var(--borde); }
.tarjeta--icono > .icono { margin-bottom: var(--e1); }
.tarjeta--icono h3 { margin-top: .2rem; }
.tarjeta--destacada { border: 2px solid var(--acento); background: linear-gradient(180deg, rgb(38 181 163 / .08), var(--fondo) 60%); }

/* Chips de herramientas («Con qué trabajamos», DIS-08) */
.herramientas { list-style: none; margin: var(--e2) 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.herramientas li { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem .35rem .4rem; border-radius: 999px; background: var(--fondo-alt); font-size: var(--p0); font-weight: 600; }
.seccion--alt .herramientas li { background: var(--fondo); }
.herramientas .icono { width: 2rem; height: 2rem; border-radius: 999px; }
.herramientas .icono svg { width: 1.1rem; height: 1.1rem; }

/* Sus palabras, en grande (investigador: su frase literal, PROBADO) */
.sus-palabras { margin: 0; padding: var(--e4) 0; text-align: center; }
.sus-palabras p { margin: 0 auto; max-width: 40rem; font-family: var(--letra-titulos); font-size: clamp(1.5rem, 4.5vw, 2.3rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--marca-honda); }
.sus-palabras p::before { content: "«"; color: var(--acento-texto); }
.sus-palabras p::after { content: "»"; color: var(--acento-texto); }
.sus-palabras cite { display: block; margin-top: var(--e1); font-style: normal; color: var(--tinta-suave); font-size: var(--p0); }

/* Instagram, visible con una frase (sin incrustar nada de fuera) */
.en-instagram { display: flex; align-items: center; gap: .8rem; margin-top: var(--e3); padding: .9rem 1rem; border-radius: var(--radio); background: var(--fondo); border: 1px dashed var(--borde); }
.en-instagram p { margin: 0; }
.en-instagram .icono { background: rgb(62 70 202 / .10); color: var(--marca-honda); }

/* Estética: su propio aire (DIS-03). Cálido de fondo; el verde agua decora. */
.pagina-estetica .seccion--alt { background: #FBF7F3; }
.tratamientos { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e1); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.tratamientos li { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: 14px; background: var(--fondo); border: 1px solid #EADFD5; font-weight: 600; line-height: 1.35; }
.tratamientos .icono { background: rgb(38 181 163 / .15); }
@media (max-width: 559px) { .tratamientos { grid-template-columns: 1fr 1fr; } .tratamientos li { flex-direction: column; align-items: flex-start; gap: .5rem; font-size: .95rem; } }
.producto { display: grid; gap: var(--e2); padding: var(--e3); border-radius: 18px; background: linear-gradient(135deg, #0F6B5E 0%, #0B5148 100%); color: #fff; }
.producto h2, .producto h3 { color: #fff; margin-top: 0; }
.producto p { margin: 0; }
.producto a:not(.boton) { color: #fff; }
.producto .boton { background: #fff; color: #0B5148; border-color: #fff; justify-self: start; }
.producto :focus-visible { outline-color: #fff; }
.producto .icono { background: rgb(255 255 255 / .16); color: #fff; }

/* Equipo: color por área y organigrama (DIS-07) */
.areas-equipo { list-style: none; margin: var(--e3) 0 var(--e2); padding: 0; display: grid; gap: var(--e1); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.areas-equipo li { padding: var(--e2); border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--borde); border-top: 4px solid var(--area, var(--marca)); }
.areas-equipo b { display: flex; align-items: center; gap: .6rem; font-family: var(--letra-titulos); color: var(--marca-honda); }
.areas-equipo .icono { width: 2.2rem; height: 2.2rem; }
.areas-equipo .nombres { display: flex; flex-wrap: wrap; gap: 0 .9rem; margin-top: .4rem; }
.areas-equipo .nombres a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-weight: 600; }
.area--fisio { --area: var(--marca); }
.area--entreno { --area: var(--acento); }
.area--estetica { --area: #D9A58A; }
.area--gestion { --area: var(--tinta-suave); }
.area--entreno .persona__ini { background: linear-gradient(135deg, #0F7163 0%, #0B5148 100%); }
.area--estetica .persona__ini { background: linear-gradient(135deg, #B7735A 0%, #8C4F3A 100%); }
.area--gestion .persona__ini { background: linear-gradient(135deg, #5C6078 0%, #3A3D52 100%); }
.persona details { margin-top: .4rem; }
.persona details summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--marca-honda); }

/* Primera visita: los pasos, unidos por una línea y con su icono (DIS-11) */
.pasos--linea { position: relative; gap: var(--e3); }
.pasos--linea li { padding-left: 3.6rem; min-height: 2.8rem; }
.pasos--linea li::before { content: none; }
.pasos--linea li > .icono { position: absolute; left: 0; top: -.2rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--marca-honda); color: #fff; z-index: 1; }
.pasos--linea li > .icono svg { width: 1.3rem; height: 1.3rem; }
.pasos--linea li:not(:last-child)::after { content: ""; position: absolute; left: 1.33rem; top: 2.6rem; bottom: calc(-1 * var(--e3)); width: 3px; background: var(--acento); border-radius: 2px; }
.nota-llamada { padding: var(--e3); border-radius: var(--radio); background: var(--fondo); border: 2px dashed var(--acento); }
.nota-llamada h2 { margin-top: 0; }

/* Esta temporada (vacío hasta que el centro dé fechas) */
.temporada__lista { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: var(--e1); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.temporada__lista li { display: flex; gap: .8rem; padding: var(--e2); border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--borde); border-left: 5px solid var(--acento); }
.temporada__lista b, .temporada__lista span { display: block; }
.temporada__lista .icono { display: grid; } /* la regla de arriba lo dejaba en bloque y el dibujo, en la esquina */
.temporada__cuando { color: var(--acento-texto); font-weight: 700; }

/* El panel de muestra (8/10/2026), copiado del de Gálvez Gil. Sólo lo usa el
   guion del panel, que sólo viaja en la muestra: lo que se prueba en panel/ se ve
   en ESE navegador, y la franja y la marca «Modo muestra» lo dicen siempre.
   Ojo: aquí no se escribe la ruta entera del guion; empaqueta.py lee también los
   comentarios del CSS, y nombrarla lo metería en el zip de la web publicada. */
.vivo-franja { padding: .2rem 0; background: #FFF3B0; border-bottom: 2px solid var(--tinta); color: var(--tinta); font-size: var(--p0); }
.vivo-franja p { margin: 0; }
.vivo-franja a { display: inline-flex; align-items: center; min-height: 44px; color: var(--marca-honda); font-weight: 700; }
/* El aviso: blanco sobre el azul hondo (11,89) */
.aviso-vivo { padding: .85rem 0; background: var(--marca-honda); color: #fff; }
.aviso-vivo p { margin: 0; overflow-wrap: anywhere; }
.muestra-marca { display: inline-block; max-width: 100%; margin: .3rem 0 0; padding: .05rem .6rem; border: 1px dashed currentColor;
  border-radius: var(--radio); font-size: .875rem; font-weight: 600; line-height: 1.5; vertical-align: middle; }
.temporada .muestra-marca { display: table; margin-top: var(--e1); color: var(--tinta-suave); }

/* Equipo en el móvil: la frase de cada uno a todo el ancho y a tamaño de lectura */
@media (max-width: 559px) { .persona blockquote { grid-column: 1 / -1; margin: var(--e2) 0 0; } .persona blockquote p { font-size: var(--p1); } }
/* Estética cierra en su verde, no en el azul de la clínica */
.pagina-estetica .seccion--cita { background: linear-gradient(135deg, #0F6B5E 0%, #0B5148 100%); }
.pagina-estetica .seccion--cita .boton { color: #0B5148; }

/* «¿Cuál es tu caso?» dentro de la banda de cita: título en blanco, chips claros */
.seccion--cita .casos__titulo { color: #fff; }
.seccion--cita .casos a:not(.boton) { color: var(--tinta); }
.seccion--cita .casos a[aria-current="page"] { background: var(--acento); border-color: var(--acento); color: var(--tinta); }
.seccion--cita .casos a[aria-current="page"] .icono { background: rgb(255 255 255 / .35); color: var(--tinta); }

/* Pie en tres grupos (DIS-14) */
.pie__nav { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.pie__nav .pie__enlaces { grid-template-columns: 1fr; }
.pie__grupo { margin: 0 0 .2rem; color: #8FE3D8; font-family: var(--letra-titulos); font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.pie p { margin: .35rem 0; }
@media (min-width: 900px) { .pie__rej { grid-template-columns: 1.1fr 2fr; } }
@media (max-width: 559px) { .pie__nav { grid-template-columns: 1fr 1fr; } .pie__nav > div:first-child { grid-column: 1 / -1; } .pie__nav > div:first-child .pie__enlaces { grid-template-columns: 1fr 1fr; } }

/* --- pie --- */
.pie { padding: var(--e4) 0 calc(var(--e4) + 64px); background: var(--tinta); color: #E9ECEF; font-size: var(--p0); }
.pie a { color: #fff; }
.pie__rej { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.pie__enlaces a { display: flex; align-items: center; min-height: 44px; }
.pie__demo { margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid #3A4048; color: #C9CED4; }

/* --- botón fijo de llamada, solo en el móvil --- */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--marca-honda); box-shadow: 0 -2px 10px rgb(0 0 0 / .15); }
.barra-movil a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; color: #fff; font-weight: 700; text-decoration: none; }
.barra-movil a + a { border-left: 1px solid rgb(255 255 255 / .3); }
/* Mientras el cartel de cookies (cookies-kit) está abierto, la barra le quedaría debajo. */
.cookies-abierto .barra-movil { display: none; }

@media (min-width: 900px) {
  .nav-escritorio { display: flex; }
  .nav-movil, .barra-movil { display: none; }
  .barra .solo-escritorio { display: inline-flex; }
  .seccion { padding: var(--e5) 0; }
  .pie { padding-bottom: var(--e4); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .barra, .barra-movil, .nav-movil, .salto { display: none !important; }
  * { animation: none !important; opacity: 1 !important; }
}

/* «¿Primera vez?» es la frase que desarma al que duda: a la talla del cuerpo, no en gris pequeño (CRO-07, 1/10/2026) */
.tres-frases__destacada { flex-basis: 100%; font-size: var(--p1); font-weight: 700; }
.tres-frases__destacada::before { content: none !important; }
/* «Lo puedes comprobar» se queda solo en la portada: a lo ancho del contenedor estrecho */
.confianza--sola { grid-template-columns: 1fr !important; max-width: 44rem; }
/* «¿No sabes qué decir al llamar?», bajo el botón de cada situación (CRO-06, 1/10/2026) */
.prepara { margin: var(--e1) 0 0; font-size: var(--p0); }
.prepara a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }