/*
Theme Name:     Eurosport
Theme URI:      https://eurosport-bcn.com
Description:    Tema hijo de GeneratePress para Eurosport, centro de rehabilitacion y medicina del deporte en Barcelona.
Author:         Sants Web Design
Author URI:     https://santswebdesign.com
Template:       generatepress
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    eurosport
*/

/* =====================================================================
   BASE DE DISENO · Eurosport
   ---------------------------------------------------------------------
   Paleta medida sobre el PDF de referencia (HOME WEB.pdf, lienzo 1440).

   La diferencia con la version anterior es que las medidas NO se escalan
   con un factor de lienzo, sino que son FLUIDAS con clamp() entre 320 y
   1440 px. Asi no hay saltos entre puntos de ruptura y no hay que
   reescribir tamanos dentro de cada media query.

   Puntos de ruptura: 768 y 1024, los que Marc ya usaba en sus proyectos.
   Se declaran SIEMPRE con min-width (movil primero) para no dejar huecos
   en pantallas de densidad fraccionaria.
   ===================================================================== */

:root {
  /* --- color · paleta medida del PDF, con el contraste ya comprobado --- */
  --eu-azul:          #6B85B6;  /* marca. 3.44:1 -> SOLO texto grande (>=24px, o >=18.5px negrita) e iconos */
  --eu-azul-texto:    #526FA6;  /* mismo tono, 4.64:1 sobre el fondo. Para texto pequeno y enlaces */
  --eu-hero-bg:       #5B719A;  /* fondo del hero. Encima va SIEMPRE texto blanco (4.91:1) */
  --eu-testim-bg:     #94A6C8;  /* azul claro del PDF. NO se usa de fondo: con texto blanco da 2,46:1. Queda para detalles sobre azul oscuro */
  --eu-fondo:         #F7F6F4;
  --eu-texto:         #3A3A3A;  /* 10.53:1 sobre el fondo */
  --eu-texto-suave:   #6B6B6B;  /* 4.93:1 sobre el fondo */
  --eu-blanco:        #FFFFFF;
  --eu-borde:         #D8D5D0;

  /* --- tipografia --- */
  --eu-serif: 'Bodoni Moda', Didot, Georgia, serif;
  --eu-sans:  'IBM Plex Sans Condensed', system-ui, -apple-system, sans-serif;
  --eu-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* =====================================================================
     ESCALA TIPOGRAFICA · modular, razon 1,333 (cuarta perfecta) desde 20px

     Es la escala que el PDF ya usaba sin declararla: 20 -> 26,7 -> 35,5 ->
     47,4 -> 63,2 -> 84,2, que son los 20 / 25 / 50 / 85 del diseno.
     Formalizarla evita que cada seccion invente su tamano.

     SEIS ROLES, ni uno mas. La auditoria del 16/08 encontro ONCE estilos
     distintos, OCHO de ellos a 20px con siete interlineados diferentes
     (19,6 / 24 / 27 / 30 / 32). Eso era lo que hacia que las secciones no
     parecieran de la misma web.

     Los topes a 1440 salen del PDF. Los valores a 320 son criterio propio,
     para que un titular largo no se coma media pantalla en un movil.
     ===================================================================== */
  --fs-display:   clamp(2.125rem,  1.2143rem + 4.5536vw, 5.3125rem); /* 34 -> 85 · H1 y H2 */
  --fs-titulo:    clamp(1.5rem,    1.1429rem + 1.7857vw, 2.75rem);   /* 24 -> 44 · H3 */
  --fs-cifra:     clamp(1.875rem,  1.5179rem + 1.7857vw, 3.125rem);  /* 30 -> 50 · datos */
  --fs-destacado: clamp(1.1875rem, 1.0804rem + 0.5357vw, 1.5625rem); /* 19 -> 25 · entradillas */
  --fs-cuerpo:    clamp(1.0625rem, 1.0089rem + 0.2679vw, 1.25rem);   /* 17 -> 20 · texto corrido */
  /* El minimo era 14px y en movil se quedaba justo ahi. Todo lo que usa este
     rol va en versalitas con tracking —etiquetas, botones, menu, preguntas
     de la FAQ, pesos de PDF, pie— y a 14px con las mayusculas espaciadas
     cuesta leerlo en un telefono. NN/G, "Typography for Glanceable Reading:
     Bigger Is Better": lo que se lee de un vistazo pide MAS cuerpo, no menos.
     Sube a 16px, que es el minimo comodo en movil, y el maximo no cambia. */
  --fs-ui:        clamp(1rem,      0.8571rem + 0.7143vw, 1.25rem);   /* 16 -> 20 · etiquetas, botones, menu */
  /* NOTA: --esp-borde, el margen lateral de la pagina, se define mas abajo
     en la escala de espaciado. Su minimo subio de 16 a 20px porque a 16 el
     contenido ocupaba el 91% del ancho del telefono y quedaba pegado a los
     dos bordes. */

  /* TRES interlineados, uno por familia de uso */
  --lh-titulo: 1;     /* el PDF va entre 0,94 y 1,0 */
  --lh-texto:  1.6;   /* WCAG 1.4.8 (AAA) pide >= 1,5, y asi aguanta el 1,5 que el usuario puede forzar (1.4.12) */
  --lh-ui:     1.3;   /* etiquetas y botones, casi siempre de una linea */

  /* =====================================================================
     ESPACIADO · la misma escala, pero con ROLES

     El problema no era la escala sino usarla a ojo: habia cinco
     combinaciones distintas de relleno vertical entre secciones. Ahora
     cada hueco tiene un nombre y se usa ese, no un paso al azar.
     ===================================================================== */
  --paso-1: clamp(0.25rem, 0.2277rem + 0.1116vw, 0.3125rem);
  --paso-2: clamp(0.5rem,  0.4554rem + 0.2232vw, 0.625rem);
  --paso-3: clamp(0.75rem, 0.6384rem + 0.5580vw, 1.1563rem);
  --paso-4: clamp(1rem,    0.8438rem + 0.7813vw, 1.5625rem);
  --paso-5: clamp(1.5rem,  1.1875rem + 1.5625vw, 2.625rem);
  --paso-6: clamp(2rem,    1.4643rem + 2.6786vw, 3.875rem);
  --paso-7: clamp(3rem,    2.1071rem + 4.4643vw, 6.125rem);

  --esp-seccion:  var(--paso-7);  /* 48 -> 98 · relleno vertical de CADA seccion */
  --esp-bloque:   var(--paso-6);  /* 32 -> 62 · entre bloques de una seccion */
  --esp-elemento: var(--paso-5);  /* 24 -> 42 · entre elementos relacionados */
  --esp-texto:    var(--paso-4);  /* 16 -> 25 · entre lineas de texto */
  --esp-minimo:   var(--paso-3);  /* 12 -> 18,5 */
  /* El margen lateral de la pagina. Era --paso-4, o sea 16px en movil, y con
     eso el contenido ocupaba el 91% del ancho del telefono y quedaba pegado
     a los dos bordes. Sube a 20px de minimo. En escritorio no cambia nada,
     porque alli el margen real lo pone el ancho de contenedor. */
  --esp-borde:    clamp(1.25rem, 1.0938rem + 0.7813vw, 1.5625rem);  /* 20 -> 25 */

  /* --- disposicion · UN solo contenedor en toda la web --- */
  --ancho-contenido: 1252px;  /* medido en el PDF: contenido de x=84 a x=1336 */
  --ancho-texto:     68ch;    /* WCAG 1.4.8 (AAA): no pasar de 80 caracteres por linea */
  --objetivo-min:    24px;    /* WCAG 2.2 · 2.5.8 (AA) */
  --objetivo-comodo: 44px;    /* WCAG 2.2 · 2.5.5 (AAA), el que se usa de verdad */

  /* --- forma · DOS radios, no tres sueltos --- */
  --radio:      24px;   /* tarjetas, cajas y bloques con fondo */
  --radio-pill: 999px;  /* solo botones */

  /* --- velo sobre foto, un solo color --- */
  --velo: 26 32 44;
}

/* =====================================================================
   BASE
   ===================================================================== */

body {
  background-color: var(--eu-fondo);
  color: var(--eu-texto);
  font-family: var(--eu-sans);
  font-size: var(--fs-cuerpo);
  line-height: var(--lh-texto);
  /* Los bloques con layout "constrained" se centran usando ESTA variable de
     WordPress, no el ancho del tema. Sin igualarla, las secciones montadas
     con grid propio arrancaban en x=94 y las constrained en x=120, y los
     margenes de la pagina no cuadraban entre si. */
  --wp--style--global--content-size: var(--ancho-contenido);
  --wp--style--global--wide-size: var(--ancho-contenido);
}

h1, h2, h3, h4 {
  font-family: var(--eu-serif);
  line-height: var(--lh-titulo);
  color: var(--eu-texto);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-display); }
h3 { font-size: var(--fs-titulo); }

/* El limite de 68ch es para TEXTO DE LECTURA. Aplicarlo a cualquier <p>
   daba anchos sin sentido —1.836px en las cifras, que van a cuerpo 50— y
   ademas dejaba las etiquetas pegadas a la izquierda en secciones
   centradas, porque un bloque con max-width y sin margen automatico no se
   centra. Los componentes de interfaz quedan exentos. */
p { max-inline-size: var(--ancho-texto); }
.eu-etiqueta,
.eu-h2-mutuas,
.eu-tarjeta-t,
.eu-tarjeta-b,
.eu-cifra-n,
.eu-cifra-t,
.eu-pie-marca,
.eu-descarga,
.eu-copyright { max-inline-size: none; }

/* Enlaces con el azul accesible, nunca con el de marca */
a { color: var(--eu-azul-texto); }
a:hover, a:focus { color: var(--eu-texto); }

/* =====================================================================
   ACCESIBILIDAD · esto no se negocia, cueste lo que cueste el proyecto
   ===================================================================== */

/* Foco siempre visible y con contraste suficiente (WCAG 2.4.7 y 1.4.11) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--eu-azul-texto);
  outline-offset: 2px;
}

/* Objetivos tactiles de 24x24 como minimo (WCAG 2.5.8, nivel AA) */
:where(a, button, input[type="submit"], input[type="button"], .wp-block-button__link) {
  min-block-size: var(--objetivo-min);
  min-inline-size: var(--objetivo-min);
}

/* Los enlaces dentro de un parrafo quedan exentos por la excepcion "inline" del criterio */
p :where(a) {
  min-block-size: auto;
  min-inline-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Nada de desbordamiento horizontal a ningun ancho (WCAG 1.4.10, 320px) */
html, body { overflow-x: clip; }

img, video, svg { max-inline-size: 100%; block-size: auto; }

/* Tablas y bloques anchos hacen scroll dentro de su caja, nunca la pagina entera */
:where(table, pre) { max-inline-size: 100%; overflow-x: auto; }

/* =====================================================================
   COMPONENTES · definidos UNA vez y reutilizados

   La auditoria del 16/08 encontro el mismo componente repetido con
   estilos distintos: el texto de interfaz aparecia con tres tracking
   diferentes (0,04 / 0,06 / 0,08) y cinco interlineados (19,6 / 24 / 27 /
   30 / 32), y habia dos sistemas de boton que no compartian nada.
   ===================================================================== */

/* --- 1 · TEXTO DE INTERFAZ ---
   Etiquetas de seccion, rotulos de tarjeta, botones, menu y enlaces de
   accion. Todo lo que NO es texto corrido comparte familia, cuerpo,
   interlineado y tracking. Lo unico que cambia por contexto es el color.

   Los <button> NO heredan la fuente del documento, y GeneratePress declara
   'body, button, input, select, textarea', asi que hay que nombrarlos. */
.eu-etiqueta,
.eu-h2-mutuas,
.eu-tarjeta-t,
.eu-tarjeta-b,
.eu-leer-mas,
.eu-descarga a,
.eu-pie-marca,
.eu-cta a.wp-block-button__link,
.main-navigation .main-nav > ul > li > a {
  font-family: var(--eu-mono);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* La FAQ comparte familia y cuerpo pero NO las versalitas: son preguntas
   completas y no etiquetas. Se declara aparte, mas abajo. */
.eu-faq summary {
  font-family: var(--eu-mono);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}

/* --- 2 · BOTONES ---
   Un solo componente con dos variantes. La primaria es la pastilla con
   borde del PDF. La secundaria es un enlace de accion subrayado, para lo
   que no debe competir con la llamada principal: "leer mas" y descargas.
   Las dos comparten cuerpo, tracking y objetivo tactil de 44px (2.5.5). */
.eu-cta a.wp-block-button__link,
.eu-leer-mas,
.eu-descarga a {
  display: inline-flex;
  align-items: center;
  gap: var(--paso-2);
  min-block-size: var(--objetivo-comodo);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* primaria · pastilla con borde */
.eu-cta a.wp-block-button__link:not(.has-background) {
  line-height: var(--lh-ui);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radio-pill);
  color: inherit;
  padding: var(--esp-minimo) var(--esp-elemento);
}
.eu-cta a.wp-block-button__link::after { content: '\2192'; }
.eu-cta a.wp-block-button__link:hover,
.eu-cta a.wp-block-button__link:focus-visible {
  background: var(--eu-blanco);
  color: var(--eu-hero-bg);
}

/* secundaria · enlace de accion subrayado */
.eu-leer-mas,
.eu-descarga a {
  background: none;
  border: 0;
  border-block-end: 1px solid currentColor;
  border-radius: 0;
  padding: var(--paso-2) 0;
  text-decoration: none;
}
.eu-leer-mas:hover,
.eu-leer-mas:focus-visible,
.eu-descarga a:hover,
.eu-descarga a:focus-visible { color: var(--eu-testim-bg); }

/* --- 3 · ETIQUETA DE SECCION ---
   El rotulo que abre cada seccion. Sobre fondo claro va en el azul
   accesible; sobre azul, en blanco. Nada mas cambia. */
.eu-etiqueta {
  color: var(--eu-azul-texto);
  margin-block: 0 var(--esp-texto);
}
.eu-sobre-hero .eu-etiqueta,
.eu-sobre-testim .eu-etiqueta,
.eu-proceso .eu-etiqueta { color: var(--eu-blanco); }

/* El rotulo de mutuas es un H2 por estructura del documento, pero
   visualmente es una etiqueta: usa el MISMO componente, no un estilo
   propio. Por eso hay que ganarle al 'h2 { font-size }' de la base. */
h2.eu-h2-mutuas {
  font-size: var(--fs-ui);
  color: var(--eu-blanco);
  margin-block: 0 var(--esp-bloque);
}

/* --- 4 · CONTENEDOR ---
   UN solo ancho para toda la web. Antes convivian dos sistemas: las
   secciones con reticula propia se centraban a 1252 y arrancaban en x=94,
   y las que usan el layout "constrained" de WordPress se centraban al
   ancho del tema y arrancaban en x=120. De ahi los tres margenes
   izquierdos distintos que encontro la auditoria.

   El min() mete el respiro lateral DENTRO del calculo, asi que el margen
   es el mismo en pantalla ancha y en movil sin necesidad de padding
   adicional en cada seccion. */
.eu-hero > .wp-block-cover__inner-container,
.eu-cifras > .wp-block-group__inner-container,
.eu-historia > .wp-block-group__inner-container,
.eu-seccion > .wp-block-group__inner-container,
.eu-servicios > .wp-block-group__inner-container,
.eu-proceso > .wp-block-cover__inner-container,
.eu-faq > .wp-block-group__inner-container,
.eu-testimonios > .wp-block-group__inner-container,
.eu-mutuas > .wp-block-group__inner-container,
.site-footer .footer-widgets-container .inside-footer-widgets,
.site-info .inside-site-info,
.site-header .inside-header {
  inline-size: 100%;
  max-inline-size: min(var(--ancho-contenido), 100% - var(--esp-borde) * 2);
  margin-inline: auto;
  /* el relleno vertical lo pone la SECCION, no el envoltorio: GeneratePress
     mete 40px aqui y se sumaban a los 98 de la seccion */
  padding: 0;
}

/* =====================================================================
   UTILIDADES DE DISPOSICION · sin puntos de ruptura
   ===================================================================== */

/* ---------------------------------------------------------------------
   EL ENVOLTORIO DE LOS GRUPOS, RESUELTO DE UNA VEZ

   Un grupo de WordPress mete sus hijos dentro de
   .wp-block-group__inner-container. Declarar la disposicion sobre
   :where(.clase, .clase > envoltorio) hacia que la regla cayera sobre LOS
   DOS cuando el envoltorio existe: un grid dentro de otro y el relleno
   contado dos veces. Y ese envoltorio computa 'box-sizing: content-box',
   asi que su relleno SUMA ancho en vez de restarlo. Medido a 320px: la
   caja pedia 772px dentro de 305 disponibles.

   NO se usa 'display: contents' para esto. MDN lo desaconseja: los
   navegadores sacan del arbol de accesibilidad el elemento y, en algunas
   versiones, TAMBIEN SUS DESCENDIENTES, que aqui son las cifras, las
   tarjetas, los testimonios, las mutuas y las 12 pautas. Un lector de
   pantalla dejaria de anunciarlas.

   La rejilla vive en UN SOLO SITIO, elegido con :has() — en el envoltorio
   si existe, y en la propia seccion si no. Nunca en los dos. Al envoltorio
   se le neutraliza la caja para que el relleno deje de sumar ancho.
   :has() es seguro aqui: lo usa el CSS del propio nucleo de WordPress.

   OJO: esta lista NO va envuelta en :where(). Tiene especificidad cero y
   el relleno de 30px que mete el tema le ganaba, dejando un sangrado doble.
   --------------------------------------------------------------------- */
/* OJO: aqui van solo envoltorios de rejillas ANIDADAS. '.eu-cifras' estaba
   en la lista y no le toca: es una seccion de primer nivel, asi que su
   envoltorio ES el contenedor de la seccion. El 'margin-inline: 0' de aqui
   pisaba el 'auto' de la regla de contenedor y en movil las cifras se
   quedaban sin margen lateral, en x=0. */
.eu-rejilla > .wp-block-group__inner-container,
.eu-rejilla-mutuas > .wp-block-group__inner-container,
.eu-pauta > .wp-block-group__inner-container,
.eu-faq-lista > .wp-block-group__inner-container {
  box-sizing: border-box;
  inline-size: 100%;
  padding-inline: 0;
  margin-inline: 0;
}

/* Rejilla que se recompone sola segun el hueco disponible, no segun la pantalla.
   El ancho minimo de columna es un parametro, asi que es UNA rejilla que sirve
   para tarjetas, para textos largos y para listas de nombres, en vez de tres
   rejillas distintas que luego hay que mantener a la vez. */
.eu-rejilla > .wp-block-group__inner-container,
.eu-rejilla:not(:has(> .wp-block-group__inner-container)) {
  display: grid;
  gap: var(--paso-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min-columna, 18rem)), 1fr));
  align-content: start;
}

.eu-seccion {
  padding-block: var(--esp-seccion);
  }

.eu-contenedor {
  max-inline-size: var(--ancho-contenido);
  margin-inline: auto;
}

/* --- clases de la paleta ---
   Aqui habia 24 reglas '.has-eu-*-color' y '.has-eu-*-background-color'
   escritas a mano. Ya no hacen falta y se han retirado.

   Las puse porque medi que el velo de un bloque de portada salia
   transparente, y era cierto. Pero la causa no era que WordPress no
   generase las clases: era que el add_theme_support del tema hijo lo
   sobrescribia GeneratePress. Los dos se enganchan a 'after_setup_theme'
   con prioridad 10, y como el functions.php del hijo se carga ANTES que el
   del padre, generate_setup() corria despues y ponia su propia paleta.

   Con el hook del hijo a prioridad 11, WordPress genera solo tanto las
   variables '--wp--preset--color--eu-*' como las clases '.has-eu-*', y
   ademas con !important, asi que estas de aqui nunca llegaban a aplicarse. */

/* Superficies con su pareja de texto ya garantizada por contraste */
.eu-sobre-hero   { background-color: var(--eu-hero-bg); color: var(--eu-blanco); }
.eu-sobre-hero :where(h1, h2, h3, p) { color: var(--eu-blanco); }
/* En el diseno el texto de esta banda va en BLANCO, y sobre el azul claro
   #94A6C8 daba 2,46:1. En vez de cambiar el texto a oscuro —que rompia el
   estilo— se usa el azul de marca, que con blanco da 4,87:1.
   Los dos azules NO son contiguos: entre el hero y esta banda hay toda la
   zona de fondo claro, asi que no se pierde la separacion entre secciones. */
.eu-sobre-testim { background-color: var(--eu-hero-bg); color: var(--eu-blanco); }
.eu-sobre-testim :where(h1, h2, h3, p, cite, blockquote) { color: var(--eu-blanco); }

.eu-etiqueta {
  color: var(--eu-azul-texto);
  margin-block-end: var(--esp-texto);
}

/* Sobre el azul claro de testimonios, el azul de enlaces da 2,04:1. El texto
   oscuro da 4,63:1, que es la misma solucion que ya se tomo para las citas. */

/* =====================================================================
   CABECERA
   En la referencia la cabecera va SOBRE el azul del hero, y el logo es
   la version en negativo. Por eso el fondo es el mismo azul.
   ===================================================================== */

/* GeneratePress ya mete 40px arriba y abajo en .inside-header. Sumarle aqui
   otro relleno subia la cabecera a 190px, cuando en el PDF el logo cae a
   y=45 y la banda mide unos 145. El relleno se pone en un solo sitio. */
.site-header {
  background-color: var(--eu-hero-bg);
  padding-block: 0;
}
.site-header .inside-header { padding-block: var(--paso-5); }
/* Nada de flex aqui: GeneratePress coloca el menu con float y meterle
   flex le rompe el orden (el logo se iba a la derecha y el menu abajo). */
.site-header .inside-header { align-items: center; }
.site-logo img, .custom-logo { max-block-size: 3.25rem; inline-size: auto; }
/* A 320 el logo se encoge hasta 22px de alto y su enlace se queda por debajo
   del objetivo tactil de 24x24 (WCAG 2.5.8). Se le da altura al enlace, no a
   la imagen, para no deformarla. */
.site-logo a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--objetivo-comodo);
}

/* --- cabecera en movil ---
   GeneratePress centra el contenido de la cabecera y le da ancho completo al
   boton del menu ('button.menu-toggle{width:100%}'), asi que el logo y el
   "Menu" quedaban APILADOS y se comian 170px de la primera pantalla.
   En escritorio van en una fila, logo a la izquierda y navegacion a la
   derecha. Se mantiene esa misma composicion, que es la intencion del
   diseno, en vez de una version encogida.
   El punto de ruptura es el de GeneratePress para el menu movil
   ('generate_mobile_media_query' = max-width:768px, inc/theme-functions.php:359),
   que ademas coincide con el del proyecto. No se anade ninguno nuevo. */
@media (max-width: 768px) {
  .site-header { position: relative; text-align: start; }
  .site-header .inside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* SIN gap. Entre el logo y el nav hay saltos de linea del HTML, y el
       navegador crea items flex anonimos con ellos: el gap los separaba y
       empujaba el logo 16px hacia dentro, fuera del margen de la pagina.
       La separacion la da el 'margin-inline-start: auto' del nav. */
    padding-block: var(--paso-3);
  }
  /* GeneratePress separa los hijos de la cabecera con 20px por debajo,
     que en una sola fila sobra */
  .site-header .inside-header > :not(:last-child):not(.main-navigation) {
    margin-bottom: 0;
  }
  .site-header .main-navigation { margin-inline-start: auto; }
  .main-navigation button.menu-toggle {
    inline-size: auto;
    padding-inline: 0;
    text-align: end;
  }
  /* Desplegado, el menu ocupa el ancho ENTERO por debajo de la cabecera y no
     la columna estrecha que le queda al lado del logo.
     GeneratePress pone 'position: relative' en '.inside-navigation' para
     colgar los submenus. Sin neutralizarlo, el menu se anclaba a esa caja de
     65px y salia cortado por la derecha. El ancla tiene que ser la cabecera. */
  .main-navigation,
  .main-navigation .inside-navigation { position: static; }
  .main-navigation.toggled .main-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background-color: var(--eu-hero-bg);
    padding: var(--paso-3) var(--esp-borde) var(--paso-5);
    z-index: 20;
  }
}

.main-navigation,
.main-navigation .inside-navigation { background: transparent; }
.main-navigation .main-nav > ul > li > a {
  color: var(--eu-blanco);
  font-family: var(--eu-mono);
  font-size: var(--fs-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-block-size: var(--objetivo-comodo);
  display: flex;
  align-items: center;
}
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a {
  color: var(--eu-blanco);
  text-decoration: underline;
  text-underline-offset: 0.4em;
  background: transparent;
}
.menu-toggle { color: var(--eu-blanco); min-block-size: var(--objetivo-comodo); }

/* El contenido a ancho completo no debe heredar el padding del tema */
.generate-columns-container,
.full-width-content .site-content .content-area { padding: 0; }

/* =====================================================================
   SECCIONES DE LA HOME
   Todas heredan de la base. Ninguna repite un color ni una medida.
   ===================================================================== */

/* Las secciones van pegadas. El margen entre bloques de WordPress deja
   una banda del color del body y parte el hero en dos.
   Se aplica a cualquier bloque de primer nivel, no solo a los de .entry-content,
   porque GeneratePress puede meter contenedores intermedios. */
/* GeneratePress imprime en linea, y DESPUES de esta hoja:
     .entry-content > [class*="wp-block-"]:not(:last-child):not(.wp-block-heading){margin-bottom:1.5em}
   Son cuatro clases de especificidad y gana siempre. Ese margen deja una
   banda del color del body entre secciones y parte el hero en dos.
   El !important esta justificado: es CSS generado que no controlo. */
.entry-content > .eu-hero,
.entry-content > .eu-cifras,
.entry-content > .eu-historia,
.entry-content > .eu-seccion,
.entry-content > .eu-servicios,
.entry-content > .eu-proceso,
.entry-content > .eu-faq,
.entry-content > .eu-testimonios,
.entry-content > .eu-mutuas {
  margin-block: 0 !important;
}

/* --- hero ---
   Es un bloque de PORTADA con la foto de las manos de fondo. El cliente la
   envio tres veces con el nombre "Fondo web.jpg" y Rebeca confirmo el
   31/07 que va "situada en el Hero Section". En el PDF el hero es azul
   liso, asi que la foto entra como fondo y no como figura suelta.

   El velo va en MULTIPLY sobre el azul de marca. Es lo que garantiza el
   contraste por construccion: multiply nunca aclara, asi que ningun punto
   del fondo puede quedar mas claro que #5B719A, y el blanco encima cumple
   4.91:1 en TODA la superficie sea cual sea la foto. Con un velo normal a
   opacidad parcial eso dependeria de lo clara que fuese la imagen. */

.eu-hero {
  padding-block: var(--esp-seccion);
  /* El bloque de portada mete relleno lateral propio (17px a 320). Sumado al
     margen del contenedor dejaba el hero y las cabeceras arrancando en x=33
     cuando el resto de la pagina arranca en 16. El lateral lo pone la regla
     de contenedor, aqui solo el vertical. */
  padding-inline: 0;
  text-align: center;
  /* el core centra con align-items:center y deja el contenido sin estirar */
  align-items: center;
}
.eu-hero .wp-block-cover__background {
  background-color: var(--eu-hero-bg) !important;
  mix-blend-mode: multiply;
  opacity: 1 !important;
}
/* Blanco DEBAJO de la foto, no el azul que hereda de .eu-sobre-hero.
   El velo va en multiply, y multiply sobre blanco devuelve el color tal
   cual: donde la foto no llega, el fondo es #5B719A exacto. Con el azul
   debajo saldria azul por azul, que es casi negro. */
.eu-hero {
  background-color: var(--eu-blanco);
  /* MDN: mix-blend-mode mezcla con lo que hay detras DENTRO DEL MISMO
     contexto de apilamiento. El bloque de portada no crea uno propio, asi que
     sin aislarlo el velo podria mezclarse con lo que hubiera debajo del hero.
     Funcionaba, pero por casualidad. */
  isolation: isolate;
}

/* La foto en gris antes de teñirla, para que el azul salga limpio y no
   arrastre los tonos de piel. La mascara la desvanece en la franja de
   arriba, que es donde entra una mano oscura pegada al borde y dejaba un
   corte contra el azul plano de la cabecera. */
.eu-hero img.wp-block-cover__image-background {
  filter: grayscale(1) contrast(1.05);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--paso-8));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--paso-8));
}
.eu-hero .wp-block-cover__inner-container {
  /* el ancho y el centrado los da la regla de contenedor unico. Repetir
     aqui 'max-inline-size: var(--ancho-contenido)' la pisaba y en movil
     dejaba el hero sin margen lateral. */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eu-hero .wp-block-cover__inner-container > * {
  align-self: center;
  max-inline-size: 100%;
  margin-inline: auto;
}
.eu-hero .wp-block-buttons { justify-content: center; }
.eu-hero .eu-display {
  font-style: italic;             /* como la referencia */
  max-inline-size: 18ch;
  margin-block: var(--paso-4);
}
.eu-hero .eu-subtitulo {
  font-family: var(--eu-serif);
  font-size: var(--fs-destacado);
  max-inline-size: 52ch;
  margin-block-end: var(--paso-5);
}

/* --- boton ---
   GeneratePress imprime en linea 'a.wp-block-button__link:not(.has-background)'
   con fondo #666. Eso es 0-2-1 de especificidad y le gana a '.eu-cta .wp-block-button__link',
   que es 0-2-0, sin que el orden importe. Se sube el selector propio a 0-3-1
   en vez de tirar de !important. */
.eu-cta a.wp-block-button__link:not(.has-background) {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radio-pill);
  color: inherit;
  font-family: var(--eu-mono);
  font-size: var(--fs-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--paso-3) var(--paso-5);
  min-block-size: var(--objetivo-comodo);           /* 2.5.5, el nivel bueno, no el minimo */
  display: inline-flex;
  align-items: center;
  gap: var(--paso-2);
}

/* --- cifras ---
   El relleno superior lo aportaba el parrafo de historia, que ya no esta
   aqui: sin el, las cifras quedaban pegadas al hero. La franja lleva el
   mismo aire arriba y abajo, como cualquier otra seccion del sistema. */
.eu-cifras {
  padding-block: var(--esp-seccion);
}
/* Son CUATRO, asi que el reparto tiene que ser par en todos los tramos.
   Con 'auto-fit' salian tres columnas entre 700 y 1000 y la cuarta cifra
   se quedaba sola en una segunda fila. Se declaran los tramos con los dos
   puntos de ruptura que ya usa el proyecto, sin anadir ninguno nuevo. */
.eu-cifras > .wp-block-group__inner-container,
.eu-cifras:not(:has(> .wp-block-group__inner-container)) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--paso-5);
  /* El ancho y el centrado los pone YA la regla de contenedor unico. Aqui
     habia un 'max-inline-size: var(--ancho-contenido)' que la pisaba por ir
     despues en el fichero: en escritorio no se notaba porque 1252 es menor
     que el hueco, pero en movil anulaba el margen lateral y las cifras
     arrancaban en x=0 mientras el resto de la pagina arranca en x=16. */
}
@media (min-width: 768px) {
  .eu-cifras > .wp-block-group__inner-container,
  .eu-cifras:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .eu-cifras > .wp-block-group__inner-container,
  .eu-cifras:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Cada cifra es un grupo, asi que sus dos parrafos cuelgan del envoltorio
   de WordPress y no de la propia caja: el flex caia sobre UN solo hijo y el
   numero y su rotulo se apilaban en vez de ir en linea como en el PDF.
   La fila se declara donde estan los hijos de verdad. */
.eu-cifra > .wp-block-group__inner-container,
.eu-cifra:not(:has(> .wp-block-group__inner-container)) {
  display: flex;
  /* Medido en el diseno: la base de la SEGUNDA linea del rotulo cae a la
     misma altura que la base del numero. Con 'baseline' a secas alinea la
     PRIMERA, que es lo que dejaba las cuatro cifras a distinta altura.
     Si un navegador no entiende el valor, MDN dice que recae en 'end',
     que aqui deja practicamente el mismo resultado. */
  align-items: last baseline;
  gap: var(--paso-2);
  padding: 0;
}
.eu-cifra-n {
  font-family: var(--eu-sans);
  font-size: var(--fs-cifra);
  font-weight: 500;
  line-height: var(--lh-titulo);
  margin: 0;
}
/* Por debajo de 1024 las cifras dejan de ir en cuatro columnas y se apilan.
   Ahi los numeros tienen anchos muy distintos —"150.000" mide el doble que
   "40+"— y cada rotulo arrancaba en una x diferente: 75, 134, 75, 75.
   Se le da al numero el ancho del mas largo para que los cuatro rotulos
   caigan en la misma vertical. En em, asi escala con el propio cuerpo. */
@media (max-width: 1023px) {
  .eu-cifra-n { min-inline-size: 3.7em; }
}
.eu-cifra-t {
  font-family: var(--eu-serif);
  font-size: var(--fs-ui);
  margin: 0;
  /* En el diseno los CUATRO rotulos van a dos lineas. A 16ch "anos de
     experiencia" cabia en una y esa cifra quedaba descolgada del resto. */
  max-inline-size: 14ch;
  line-height: var(--lh-ui);
}

/* =====================================================================
   PAGINAS INTERIORES · Medicina y Fisioterapia
   Comparten estructura, asi que comparten componentes. Ninguna trae
   diseno: el PDF del cliente era SOLO la home. Todo lo de aqui sale del
   sistema ya montado, no de criterios nuevos.
   ===================================================================== */

/* La cabecera es el MISMO hero, con la clase .eu-hero, y aqui solo se
   ajusta lo que cambia: no lleva boton ni subtitulo de portada, asi que
   sale mas baja sola, y el titular no necesita el ancho corto de 18ch. */
.eu-cabecera .eu-display { max-inline-size: 24ch; }
.eu-cabecera .eu-entradilla {
  font-family: var(--eu-serif);
  font-size: var(--fs-destacado);
  line-height: var(--lh-texto);
  max-inline-size: 58ch;
  margin-block: 0;
}

/* Columnas de TEXTO, para bloques de altura muy desigual.
   No es lo mismo que .eu-rejilla y por eso no es la misma clase: la rejilla
   alinea en filas, y ahi cada fila crece hasta el elemento mas alto. Con las
   7 tecnicas medidas eso dejaba 600px de aire muerto al lado de "ondas de
   choque", que es larga porque lleva las ocho indicaciones. Las columnas
   empaquetan sin hueco. Se usa donde el orden es una lista, no una parrilla. */
.eu-columnas > .wp-block-group__inner-container,
.eu-columnas:not(:has(> .wp-block-group__inner-container)) {
  columns: var(--min-columna, 18rem) auto;
  column-gap: var(--paso-6);
}

/* Tecnicas: bloques de titulo y explicacion. NN/G desaconseja el acordeon
   cuando el visitante necesita ver la mayoria del contenido, que es el caso
   de una pagina de servicios, asi que van visibles. */
/* 26rem y no 28: a 28 el calculo de columnas se quedaba en 1,95 a 1024px y
   la pagina entera bajaba a una sola columna justo por debajo del umbral. */
.eu-tecnicas .eu-columnas { --min-columna: 26rem; }
.eu-tecnica {
  /* sin esto un titulo puede quedarse al final de una columna con su texto
     en la siguiente */
  break-inside: avoid-column;
  /* de elemento y no de bloque: son piezas de una misma lista, no secciones */
  margin-block-end: var(--esp-elemento);
}
.eu-tecnica h3 {
  font-size: var(--fs-destacado);
  font-family: var(--eu-serif);
  color: var(--eu-hero-bg);
  margin-block: 0 var(--esp-texto);
}
.eu-tecnica p { margin-block: 0 var(--esp-texto); }
.eu-tecnica p:last-child { margin-block-end: 0; }
/* La lista de indicaciones cuelga de su tecnica, no del cuerpo de la pagina */
.eu-tecnica ul {
  margin-block: 0;
  padding-inline-start: var(--paso-5);
}
.eu-tecnica li { margin-block-end: var(--esp-minimo); }

/* Listas de una linea por elemento —el equipo y las areas de intervencion—
   en columnas de TEXTO y no en rejilla, porque asi siguen siendo UNA sola
   lista para quien navega con lector de pantalla, en vez de tres listas
   troceadas. El reparto es por columna, de arriba abajo, asi que el
   Dr. Sanchez —que es la direccion medica— se sigue leyendo el primero. */
.eu-equipo ul,
.eu-areas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* a 14rem el navegador cabia cinco columnas, repartia los nueve nombres en
     tres y dejaba 329px de aire muerto a la derecha. A 20rem salen tres que
     llenan el ancho, dos en tableta y una en movil. */
  columns: 20rem auto;
  column-gap: var(--paso-6);
}
.eu-equipo li,
.eu-areas li {
  /* MDN: si no genera caja se ignora. El li si la genera, y sin esto un
     nombre puede partirse por la mitad entre dos columnas. */
  break-inside: avoid-column;
  padding-block: var(--esp-minimo);
  border-block-end: 1px solid rgb(var(--velo) / 0.15);
}
.eu-sobre-testim .eu-equipo li,
.eu-equipo.eu-sobre-testim li { border-block-end-color: rgb(255 255 255 / 0.2); }

/* --- historia del centro ---
   El Word la pide en la pagina principal pero no dice donde. Marc la situa
   sobre blanco y por delante de servicios. */
.eu-historia { padding-block-start: var(--esp-seccion); }
/* El aire lo pone SOLO una de las dos secciones. Si cada una aporta su
   relleno completo salen 196px de hueco. La frase respira lo mismo por
   arriba que por abajo, asi que el de abajo tambien es --esp-seccion. */
.eu-historia + .eu-servicios { padding-block-start: var(--esp-seccion); }
.eu-historia-t {
  /* el azul de marca da 4,87:1 sobre blanco y cumple 1.4.3 a cualquier
     tamano. El azul claro del titular esta en 3,44:1 y solo vale para
     texto grande, que esta frase no es en el extremo bajo de su escala. */
  color: var(--eu-hero-bg);
  font-family: var(--eu-serif);
  /* dos puntos por encima del destacado, escrito como calc sobre el token
     para que se vea de donde sale y no como un tamano suelto mas */
  font-size: calc(var(--fs-destacado) + 2px);
  line-height: var(--lh-texto);
  text-align: center;
  max-inline-size: var(--ancho-texto);
  /* el auto centra la CAJA: sin el, el texto se centraria dentro de un
     bloque que sigue pegado al margen izquierdo */
  margin-block: 0;
  margin-inline: auto;
}

/* --- servicios --- */
.eu-servicios { padding-block: var(--esp-seccion); }

/* En la referencia el texto va a la izquierda y las tarjetas en dos columnas
   a la derecha. Por debajo de 1024 se recompone y va todo apilado. */
@media (min-width: 1024px) {
  /* Medido en el PDF: el contenido va de x=84 a x=1336 (1252 de ancho), las
     dos tarjetas ocupan de 696 a 1336 (640) y el texto se queda con el resto.
     Con '1fr 1.5fr' la columna del titular caia a 441px y "que ofrecemos",
     que necesita 474 a cuerpo 85, se partia en una tercera linea. */
  .eu-servicios > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr 640px;
    column-gap: var(--paso-6);
    align-items: start;
    align-content: start;
  }
  .eu-servicios > .wp-block-group__inner-container > :not(.eu-rejilla) {
    grid-column: 1;
  }
  /* OJO: 'grid-row: 1 / -1' sin filas explicitas resuelve a UNA sola fila y
     empuja el resto del texto debajo. Hay que decir cuantas filas abarca. */
  .eu-servicios .eu-rejilla {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
  }
  /* dos columnas de tarjetas, no las que quepan. Va donde vive la rejilla,
     que es el envoltorio cuando existe. */
  .eu-servicios .eu-rejilla > .wp-block-group__inner-container,
  .eu-servicios .eu-rejilla:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: repeat(2, 1fr);
  }
}
.eu-h2-azul { color: var(--eu-azul); font-style: italic; }   /* texto grande: 3.44:1 vale */
/* En el PDF el parrafo va justo debajo del titular (1326 -> 1462, 136px de
   linea base a linea base), no separado media pantalla. */
.eu-servicios .eu-etiqueta { margin-block-end: var(--paso-4); }
/* Titular y parrafo: el mismo hueco en TODAS las secciones. */
.eu-h2-azul,
.eu-proceso-t,
.eu-testimonios h2 { margin-block: 0 var(--esp-elemento); }
/* La tarjeta es un bloque de PORTADA: WordPress resuelve de forma nativa la
   imagen de fondo, el relleno y el velo. Aqui solo se ajusta la proporcion
   y donde cae la etiqueta. Nada de pelear con figuras ni envoltorios. */
/* En el PDF son DOS tarjetas de 306x414 (proporcion 3/4), no cuatro, y cada
   una lleva DOS etiquetas: el servicio arriba y el detalle abajo. */
.eu-tarjeta {
  aspect-ratio: 306 / 414;
  align-items: stretch;
  padding: var(--paso-4);
  min-block-size: 0;
}
/* En movil la tarjeta deja de compartir fila y pasa a ocupar el ancho entero.
   Manteniendo el 3:4 del PDF —que esta pensado para una caja de 306px— a 342
   de ancho se estiraba hasta 463px de alto, y dos seguidas convertian
   "Servicios" en 1,6 pantallas para presentar dos cosas. La proporcion se
   vuelve apaisada, que es lo que corresponde a una tarjeta ancha, y la
   composicion —foto de fondo con rotulo arriba y detalle abajo— no cambia. */
@media (max-width: 768px) {
  .eu-tarjeta { aspect-ratio: 4 / 3; }
}
.eu-tarjeta .wp-block-cover__inner-container {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--paso-4);
}

/* El velo se define AQUI y no en los atributos del bloque, para que no
   dependa de que exista una clase de color en la paleta. Garantiza el
   contraste de la etiqueta sobre cualquier foto (WCAG 1.4.3). */
/* El velo va oscuro en los DOS extremos, porque ahora hay una etiqueta arriba
   y otra abajo. Antes solo protegia la de arriba. */
/* Los topes eran 42% y 58%, y las etiquetas ocupan DOS lineas: la segunda
   caia ya en la parte clara del degradado. Medido sobre la captura, el 8-10%
   del fondo bajo cada etiqueta quedaba por debajo de 4,5:1, con pixeles a
   rgb(255,246,219) — ahi el texto blanco no se lee, y se ve a simple vista
   en "REHABILITADORA" y "FISIOTERAPIA" contra la pared clara.
   Las etiquetas ocupan del 6% al 19% y del 81% al 94% del alto, asi que la
   zona oscura llega hasta 22% y arranca en 78%. Peor caso medido, 8,6:1. */
.eu-tarjeta .wp-block-cover__background {
  background: linear-gradient(to bottom, rgb(var(--velo) / 0.80) 0%, rgb(var(--velo) / 0.80) 22%, rgb(var(--velo) / 0.22) 42%, rgb(var(--velo) / 0.22) 58%, rgb(var(--velo) / 0.80) 78%, rgb(var(--velo) / 0.80) 100%) !important;
  opacity: 1 !important;
}
.eu-tarjeta-t,
.eu-tarjeta-b {
  margin: 0;
  color: var(--eu-blanco);
  text-align: center;
  max-inline-size: none;
}

/* --- la tarjeta entera enlaza a su pagina ---
   UN solo enlace por tarjeta, con el nombre del servicio como texto, y
   estirado sobre la tarjeta con un ::after. No se enlaza la foto por
   separado: la tecnica H2 de WCAG pide combinar imagen y texto en un unico
   enlace, y el fallo F89 es justamente el enlace cuyo unico contenido es una
   imagen sin nombre accesible. La foto es fondo decorativo con alt vacio,
   asi que el nombre del enlace es el rotulo del servicio. */
.eu-tarjeta { position: relative; }
.eu-tarjeta-t a {
  color: inherit;
  text-decoration: none;
  /* el area pulsable es la tarjeta entera, no estas dos palabras, asi que
     el minimo tactil de la base aqui sobra */
  min-block-size: 0;
}
.eu-tarjeta-t a::after {
  content: '';
  position: absolute;
  /* NO 'inset: 0'. El ancestro posicionado no es la tarjeta sino
     '.wp-block-cover__inner-container', que el nucleo declara con
     'position: relative; z-index: 1' y que lleva ya el relleno de la
     tarjeta. Con inset:0 el area pulsable se quedaba en 249x355 dentro de
     una tarjeta de 299x405: el centro respondia y las esquinas no.
     Se compensa con el mismo token que da ese relleno, asi que si cambia
     el padding de la tarjeta esto sigue cuadrando. */
  inset: calc(var(--paso-4) * -1);
  border-radius: var(--radio);
}
/* El contorno de foco va en la TARJETA y no rodeando el rotulo, porque lo
   que se pulsa es la tarjeta.
   En el azul de foco del sistema, no en blanco: el contorno se dibuja POR
   FUERA de la tarjeta, o sea sobre el fondo claro de la seccion, y en
   blanco no se veia. Es el mismo color que usa el resto de la web. */
.eu-tarjeta:has(a:focus-visible) {
  outline: 3px solid var(--eu-azul-texto);
  outline-offset: 3px;
}
.eu-tarjeta-t a:focus-visible { outline: none; }
/* Señal de que es pulsable. Es un ANADIDO, no la unica pista: el cursor y
   el propio enlace funcionan igual sin pasar el raton, que en un movil no
   existe. */
.eu-tarjeta:has(a:hover) .eu-tarjeta-t,
.eu-tarjeta:has(a:focus-visible) .eu-tarjeta-t {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* --- proceso --- */
/* Es un bloque de PORTADA, como las tarjetas de servicios: WordPress resuelve
   la foto de fondo y el velo, y aqui solo se coloca el contenido.
   En la referencia (lienzo 1440) la caja mide 1350 x 654, o sea 45px de margen
   a cada lado y una proporcion de 2,06:1. */
.eu-proceso {
  border-radius: var(--radio);
  margin-inline: var(--paso-5);
  padding: var(--paso-6);
  min-block-size: clamp(26rem, 45vw, 41rem);
  /* El core centra el contenido con align-items:center y entonces el
     envoltorio no se estira, asi que no hay alto que repartir. */
  align-items: stretch;
}
/* El minimo de 26rem son 416px, pensados para la caja apaisada de escritorio.
   En movil, con la caja ya estrecha, obligaba a 446px de alto para cuatro
   lineas de texto y un boton. Manda el contenido. */
@media (max-width: 768px) {
  .eu-proceso {
    min-block-size: 0;
    padding: var(--paso-5);
  }
}
.eu-proceso .wp-block-cover__inner-container {
  inline-size: 100%;
  max-inline-size: var(--ancho-contenido);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--paso-4);
}
.eu-proceso :where(h2, p) { color: var(--eu-blanco); }
.eu-proceso .eu-etiqueta { margin-block-end: 0; }
.eu-proceso-t {
  font-style: italic;
  max-inline-size: 16ch;
  margin-block: 0;
}
.eu-proceso-texto { max-inline-size: 46ch; margin-block: 0; }

/* En la referencia el titulo va arriba y, abajo del todo, el parrafo a la
   izquierda con el boton a su derecha, ambos sobre la misma linea de base.
   La fila 3 vacia (1fr) es la que se come el alto sobrante y empuja
   la ultima fila al fondo de la caja. */
@media (min-width: 1024px) {
  .eu-proceso .wp-block-cover__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--paso-6);
    row-gap: var(--paso-3);
  }
  .eu-proceso .eu-etiqueta      { grid-area: 1 / 1; }
  .eu-proceso .eu-proceso-t     { grid-area: 2 / 1; }
  .eu-proceso .eu-proceso-texto { grid-area: 4 / 1; align-self: end; }
  .eu-proceso .eu-proceso-cta   { grid-area: 4 / 2; align-self: end; justify-content: flex-end; }
}

/* --- FAQ ---
   En el PDF y en la version que valido el cliente va a DOS columnas:
   etiqueta, titulo y parrafo a la izquierda, y el acordeon a la derecha.
   Estaba apilado. */
.eu-faq { padding-block: var(--esp-seccion); }
.eu-faq-lista { margin-block-start: var(--paso-6); }

@media (min-width: 1024px) {
  /* Medido en el PDF: el titulo va de x=79 a 595 y las preguntas empiezan en
     x=801, o sea la columna ANCHA es la de la izquierda (621 contra 557).
     Con '1fr 1.2fr' era al reves y "primera visita" caia a una tercera linea. */
  .eu-faq > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: var(--paso-6);
    align-items: start;
    align-content: start;
  }
  .eu-faq > .wp-block-group__inner-container > :not(.eu-faq-lista) { grid-column: 1; }
  .eu-faq .eu-faq-lista {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-block-start: 0;
  }
}
.eu-faq details {
  border-block-end: 1px solid var(--eu-borde);
  padding-block: var(--paso-4);
}
/* Las preguntas van en CAJA NORMAL, no en versalitas.
   NN/G distingue dos usos: para una etiqueta corta que se lee de un vistazo
   las mayusculas funcionan, pero en lectura sostenida bajan la legibilidad
   un 10% porque se pierde la silueta de la palabra. Una pregunta entera
   —"¿Que puedo esperar en la primera visita?"— es lectura, no un rotulo, y
   en movil ademas parte en dos lineas. El resto del sistema de versalitas
   no se toca: ahi si son etiquetas cortas. */
.eu-faq summary {
  cursor: pointer;
  font-family: var(--eu-mono);
  font-size: var(--fs-ui);
  letter-spacing: 0.01em;
  color: var(--eu-azul-texto);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--paso-4);
  min-block-size: var(--objetivo-comodo);
  list-style: none;
}
.eu-faq summary::-webkit-details-marker { display: none; }
.eu-faq summary::after { content: '+'; font-size: 1.4em; line-height: 1; }
.eu-faq details[open] summary::after { content: '\2212'; }
.eu-faq details p { margin-block-start: var(--paso-3); }

/* --- testimonios · texto OSCURO, el blanco del diseno daba 2.46:1 --- */
.eu-testimonios { padding-block: var(--esp-seccion); text-align: center; }
.eu-testimonios h2 { font-style: italic; max-inline-size: 18ch; margin-inline: auto; }
/* Los parrafos heredan 'max-width: 68ch' de la base y sin margen automatico
   se quedan pegados a la izquierda: la etiqueta salia 192px descentrada
   aunque su texto estuviera centrado dentro de su propia caja.
   SIN :where(), que tiene especificidad cero y perdia contra 'p { max-width }'. */
.eu-testimonios p,
.eu-testimonios .eu-etiqueta,
.eu-mutuas p,
.eu-mutuas .eu-etiqueta { margin-inline: auto; }
/* Las tres tarjetas a la MISMA altura. Con el "leer mas" recortando las citas
   a 7 lineas ya no hay una que dispare el alto de la fila. */
.eu-testimonios .eu-rejilla,
.eu-testimonios .eu-rejilla > .wp-block-group__inner-container {
  margin-block-start: var(--paso-6);
  text-align: start;
  align-items: stretch;
}
.eu-testimonio {
  display: flex;
  flex-direction: column;
}
.eu-testimonio blockquote {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}
/* la firma siempre abajo, para que las tres queden alineadas entre si */
.eu-testimonio cite { margin-block-start: auto; }
.eu-testimonio blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--eu-blanco);
  /* El core pone las citas en cursiva y el PDF las tiene en redonda. Con
     testimonios de 100 palabras, la cursiva ademas se lee peor y estira la
     columna varias lineas de mas. */
  font-style: normal;
}
.eu-testimonio blockquote p { font-style: normal; }
.eu-testimonio blockquote::before {
  content: '\201C';
  display: block;
  font-family: var(--eu-serif);
  font-size: var(--fs-display);
  line-height: 0.8;
  color: var(--eu-blanco);        /* solo decorativo, no transmite informacion */
  margin-block-end: var(--paso-3);
}
.eu-testimonio blockquote p { font-size: var(--fs-cuerpo); max-inline-size: none; }

/* --- "leer mas" de los testimonios · patron Disclosure de ARIA ---
   El recorte lo pone el JS con esta clase, asi que sin JavaScript la cita se
   lee entera y no hay boton. */
.eu-cita-recortada {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.eu-leer-mas { align-self: flex-start; margin-block-start: var(--esp-minimo); color: var(--eu-blanco); }
.eu-leer-mas:hover,
.eu-leer-mas:focus-visible { color: var(--eu-testim-bg); }
.eu-testimonio cite {
  display: block;
  margin-block-start: var(--paso-4);
  font-family: var(--eu-serif);
  font-style: italic;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}

/* --- mutuas ---
   No estan en el PDF de diseno: las pide el Word del cliente. La version
   que se valido el 17/07 las puso DENTRO de la banda azul de testimonios,
   asi que van pegadas a esa seccion y sin relleno superior, para que no
   quede una banda suelta entre las dos. */
.eu-mutuas {
  padding-block: 0 var(--esp-seccion);
    text-align: center;
}
/* Rebeca preparo los logos en DOS versiones el 04/08: negativo (blanco) para
   los fondos de color y positivo para los claros. Sobre el azul van los
   blancos, sin placa de ningun tipo. */
.eu-mutua {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 4.5rem;
}
.eu-rejilla-mutuas { margin-block-start: var(--paso-6); }
.eu-rejilla-mutuas > .wp-block-group__inner-container,
.eu-rejilla-mutuas:not(:has(> .wp-block-group__inner-container)) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--paso-6) var(--paso-5);
  align-items: center;
}
.eu-mutua { margin: 0; }
.eu-mutua img {
  max-block-size: 3.25rem;
  inline-size: auto;
  margin-inline: auto;
  object-fit: contain;
}

/* =====================================================================
   PIE · en las CUATRO paginas

   El Word lo pide textual — "al final de cada pagina, incluida la
   principal, los datos de contacto". En el PDF va dentro de la banda azul
   de testimonios, separado por una linea fina, con el copyright a la
   izquierda y el nombre del centro a la derecha.

   El contenido vive en AREAS DE WIDGETS, no en el contenido de cada pagina
   ni en el PHP. Asi el cliente lo edita una sola vez y cambia en las
   cuatro, que es lo que exige venderla como autogestionable.
   ===================================================================== */

.site-footer { background-color: var(--eu-hero-bg); }

/* GeneratePress pinta '.footer-widgets' de blanco desde su CSS en linea, y
   ese blanco tapa el azul del padre. Hay que declararlo aqui tambien. */
/* El div del pie lleva ademas la clase '.site', que GeneratePress limita al
   ancho de contenedor del tema (1200). Eso dejaba el pie arrancando en x=120
   cuando el resto de secciones arrancan en 94. */
.site-footer .footer-widgets {
  background-color: transparent;
  padding-block: var(--esp-bloque) var(--esp-elemento);
  padding-inline: 0;
  max-inline-size: none;
}
/* GeneratePress monta el pie con TRES capas de contenedor: '.site', un
   '.footer-widgets-container' limitado al ancho del tema, y un
   '.inside-footer-widgets' con margen negativo que compensa los 40px de
   relleno que lleva cada widget. Ese apilamiento es el que dejaba el pie
   arrancando en x=120 cuando el resto de la pagina arranca en 94.
   Se neutraliza entero y manda la reticula del tema hijo. */
.site-footer .footer-widgets-container {
  max-inline-size: none;
  margin-inline: 0;
  padding-inline: 0;
}
/* y el relleno de 40px de cada widget lo declara con la misma estructura
   de tres clases, asi que se iguala igual */
.site-footer .footer-widgets-container .inside-footer-widgets .widget,
.site-footer .footer-widgets-container .inside-footer-widgets .inner-padding {
  padding: 0;
}
/* GeneratePress aplica 'margin-left: -40px' con tres clases
   ('.site-footer .footer-widgets-container .inside-footer-widgets'), asi
   que hay que igualar la especificidad para poder centrarlo.

   Y en movil.min.css lo vuelve a declarar con CUATRO
   ('.site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets{margin:0}'),
   en una hoja que ademas carga despues de esta. Eso dejaba el pie pegado al
   borde izquierdo en movil mientras el resto de la pagina arranca en x=16.
   El !important esta justificado igual que en el margen de las secciones:
   es CSS generado, con mas peso y en otro fichero. */
.site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets,
.site-footer .footer-widgets-container .inside-footer-widgets {
  margin-inline: auto !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-elemento);
}
@media (min-width: 768px) {
  .site-footer .inside-footer-widgets {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  /* el texto de marca pegado al margen derecho, no centrado en su columna */
  .site-footer .footer-widget-2,
  .site-footer .footer-widget-2 p { text-align: end; }
}
/* GeneratePress mete float y un margen negativo en las columnas del pie.
   Con grid sobra y descuadra la reticula. */
.site-footer .inside-footer-widgets > div {
  float: none;
  padding: 0;
  margin: 0;
  width: auto;
}
.site-footer :where(p, li, a) { color: var(--eu-blanco); }
.eu-pie-titulo {
  font-family: var(--eu-serif);
  font-size: var(--fs-titulo);
  margin-block: 0 var(--paso-3);
}
.site-footer .footer-widgets p { margin-block: 0 var(--paso-3); max-inline-size: none; }
.eu-pie-contacto a { text-decoration: underline; text-underline-offset: 0.25em; }
.eu-pie-contacto a:hover, .eu-pie-contacto a:focus-visible { color: var(--eu-testim-bg); }

/* la barra de copyright, separada por la linea fina del diseno */
.site-info {
  background-color: var(--eu-hero-bg);
  color: var(--eu-blanco);
  padding-block: var(--paso-5);
  padding-inline: 0;
  font-size: var(--fs-ui);
}
/* GeneratePress centra la barra de copyright. En el PDF va a la izquierda.
   El ancho y el centrado los da la regla de contenedor unico: declararlos
   aqui otra vez la pisaba y en movil el copyright se iba a x=0. */
.site-info .inside-site-info {
  padding-inline: 0 !important;
  border-block-start: 1px solid rgb(255 255 255 / 0.35);
  padding-block-start: var(--paso-4);
  text-align: start;
}
/* En movil GeneratePress centra la barra de copyright con
   '.copyright-bar{text-align:center!important}' (mobile.min.css), y dejaba el
   "© 2026" centrado mientras el resto del pie va a la izquierda. El
   !important aqui es el unico modo de igualar el suyo. */
.site-info .copyright-bar { text-align: start !important; }
@media (max-width: 768px) {
  .site-info,
  .site-info .inside-site-info { text-align: start; }
}
.eu-copyright { margin: 0; max-inline-size: none; }
.site-info a { color: var(--eu-blanco); text-decoration: underline; text-underline-offset: 0.25em; }
.site-info a:hover, .site-info a:focus-visible { color: var(--eu-testim-bg); }

/* =====================================================================
   BIBLIOTECA DE EJERCICIOS
   ===================================================================== */

.eu-aviso {
  border-inline-start: 3px solid var(--eu-azul);
  padding-inline-start: var(--paso-4);
  color: var(--eu-texto-suave);
  font-size: var(--fs-ui);
}

/* Las pautas usan .eu-rejilla como todo lo demas. Tenian su propia rejilla
   con la misma declaracion y otro nombre, que es exactamente el estilo
   duplicado que luego hay que mantener por partida doble. */
/* 18rem y no 15: a 15 la columna dejaba 240px utiles y el texto del enlace
   —que va en versalitas con tracking— se partia en TRES lineas, inflando la
   tarjeta hasta 420px de alto para un titulo y un enlace. */
.eu-pautas .eu-rejilla { --min-columna: 18rem; margin-block-start: var(--paso-6); }
.eu-pauta {
  border: 1px solid var(--eu-borde);
  padding: var(--paso-5);
}
/* GeneratePress mete otros 40px en el envoltorio del grupo, que se sumaban
   a los de la tarjeta y daban 81px de sangrado por lado. */
.eu-pauta > .wp-block-group__inner-container { padding: 0; }
/* h2 y no h3: colgaban directamente del H1 de la pagina, sin un nivel 2 en
   medio, y eso es un salto de jerarquia. El aspecto no cambia. */
.eu-pauta h2 { font-size: var(--fs-destacado); margin-block: 0 var(--paso-3); }
.eu-descarga { margin: 0; max-inline-size: none; }
.eu-descarga a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--paso-2);
  min-block-size: var(--objetivo-comodo);
  font-family: var(--eu-mono);
  font-size: var(--fs-ui);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eu-peso {
  color: var(--eu-texto-suave);
  text-transform: none;
  letter-spacing: 0;
}