/* =============================================================
   CHROME · navegación, pie y estilos de enlace comunes
   Única definición para las 27 páginas (antes repartida entre
   base.css, pagina.css y el <style> en línea de la portada).
   Se carga después de base.css y antes de pagina.css o del
   <style> de la portada. Unificado el 16 sep 2026 y verificado
   con capturas píxel a píxel (herramientas/capturas-chrome.mjs).
   ============================================================= */

/* ---- 1 · Base (venía de base.css) ---- */

/* ---------- navegación ---------- */
.nav { position:sticky;top:0;z-index:60;background:var(--bone);border-bottom:1px solid var(--line) }
.nav__in { display:flex;align-items:center;justify-content:space-between;height:80px }
.logo { display:flex;align-items:center;gap:12px;font-size:var(--t-xs);font-weight:var(--w-semibold);letter-spacing:.01em }
.logo__mark { width:30px;height:30px;background:var(--brand);color:var(--bone);display:grid;place-items:center;font-size:var(--t-2xs);letter-spacing:.02em }
.nav__links { display:flex;align-items:center;gap:34px }
.nav__links a { font-size:var(--t-xs);font-weight:var(--w-medium);letter-spacing:0 }
.nav__links a:hover { color:var(--brand) }
.nav__cta { color:var(--brand);border-bottom:2px solid var(--brand);padding-bottom:3px }
@media (prefers-reduced-motion:no-preference) {
  .nav { view-transition-name:nav }
  /* Regla aparte: un navegador que no entienda la pseudoclase descarta solo
       el filete, no la transición. Dura lo mismo que la transición entera
       (230 + 310 ms) para estar apagado cuando la pseudoclase deja de aplicarse;
       si durase más, se cortaría en seco. El 43 % son los 230 ms del tiempo 1.
       El trazo lleva curva de entrada y salida, no la del sistema: con la del
       sistema llegaba al 89 % a los 120 ms y el tiempo 1 no se leía. Así cruza
       la pantalla durante todo el tramo y termina justo cuando sube la página. */
  :root:active-view-transition .nav::after {
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
      background:var(--brand);transform-origin:0 50%;animation:pagina-filete .54s cubic-bezier(.16,1,.3,1) both
  }
}
/* ---------- footer ---------- */
.ft { padding:56px 0 0;border-top:1px solid var(--line) }
/* Una sola fila: logotipo, menú y los dos teléfonos con el correo. Ya no es
   una rejilla de 12 tramos. El pie llevaba cuatro columnas de enlaces y un
   párrafo de marca; el 20 sep 2026 el usuario lo dejó en esto, y midiendo
   132 + 494 + 485 px las tres piezas caben en una línea a partir de 1.280.
   Debajo de ese ancho se pliegan solas. */
.ft__grid { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:32px;row-gap:4px;padding-bottom:12px }
/* `> li > a` y no `a`: dentro del menú cuelgan ahora los desplegables de la
   barra, y sus tarjetas (`.mega`) NO son enlaces de pie. Sin acotar, el
   tamaño, el relleno de 11 px y el subrayado del pie entraban en las
   tarjetas y cada una crecía 3 px al pasar el ratón. */
.ft__l > li > a { font-size:var(--t-sm);color:var(--ink-2) }
.ft__b { border-top:1px solid var(--line);padding:8px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:var(--t-2xs);letter-spacing:.01em;color:var(--ink-3) }
.ft__b ul { display:flex;gap:24px }
@media(max-width:900px) {
  .nav__links { display:none }
  /* En el teléfono las tres piezas van una debajo de otra y alineadas a la
     izquierda: el menú ya es una fila de enlaces que se pliega sola. */
  .ft__grid { align-items:flex-start;row-gap:0;padding-bottom:8px }
  .ft__grid>* { flex:1 0 100% }
}
@media (forced-colors: active) {
  .nav__cta { forced-color-adjust:auto }
  .ft__k, .ft__l > li > a, .ft__b a, .nav__links a { text-decoration:underline }
}
/* 25 sep 2026: vuelve el logotipo «Quality Clinic Consulting» (decisión del usuario), a 118 px
   como en main, y con él la barra completa desde 1000 px. El salto a 1100 era por el de una
   línea, de 150 px. */
@media (min-width: 1000px) and (max-width: 1100px) {
  .nav__links { gap: 22px }
}

/* ---- 2 · Ajustes (venían de pagina.css; la portada tenía una copia propia) ---- */

.nav__links a, .ft__b a { font-size: var(--t-sm) }
.ft__k, .ft__l > li > a, .ft__b a, .nav__links a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .18s ease, color .18s ease;
}
.ft__k:hover, .ft__l > li > a:hover, .ft__b a:hover, .nav__links a:hover { text-decoration-color: currentColor }
.ft__k:focus-visible, .ft__l > li > a:focus-visible, .ft__b a:focus-visible, .nav__links a:focus-visible { text-decoration-color: currentColor }
@media (prefers-reduced-motion: reduce) {
  .ft__k, .ft__l > li > a, .ft__b a, .nav__links a { transition: none }
}
/* ---- saltar al contenido ---- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--bone); padding: 14px 20px;
  font-size: var(--t-2xs); font-weight: var(--w-semibold);
}
.skip:focus { left: 0; outline: 2px solid var(--brand); outline-offset: 3px }
/* ---- nav ------------------------------------------------------------
   Sin filete inferior: el cambio de papel es lo que la separa. */
.nav { background: var(--paper); border-bottom: 0 }
.logo { gap: 0 }
.logo__img { width: 118px; height: auto }
.nav__cta {
  background: var(--brand); color: var(--bone); border-bottom: 0;
  padding: 14px 20px; transition: background .18s ease;
}
.nav__cta:hover, .nav__cta:focus-visible { background: var(--brand-3); color: var(--bone) }
/* Los dos controles del extremo derecho van en fila. Faltaba: `pagina.css`
   heredaba de `base.css`, que no declara `.nav__end` porque la portada la
   resuelve en su copia inline. Sin esto, en el teléfono el CTA y el botón de
   menú se apilaban y el bloque medía 96 px dentro de una nav de 80: el CTA
   salía 8 px por encima del borde superior. Afectaba a las tres páginas
   interiores, no solo a las nuevas. Es la deuda del chrome duplicado. */
.nav__end { display: flex; align-items: center; gap: 16px }
.navdrop { display: none; position: relative }
.navdrop > summary {
  list-style: none; cursor: pointer; border: 1px solid var(--line);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
}
.navdrop > summary::-webkit-details-marker { display: none }
.navdrop[open] > summary { background: var(--brand); color: var(--bone); border-color: var(--brand) }
.navdrop > ul {
  position: absolute; right: 0; top: calc(100% + 12px); background: var(--bone);
  border: 1px solid var(--brand); min-width: 220px; padding: 8px 0;
}
.navdrop > ul a { display: block; padding: 14px 20px; font-size: var(--t-sm) }
.navdrop > ul a:hover { background: var(--bone-2); color: var(--brand) }
/* Tres barras de 2 px que se pliegan en aspa. `currentColor` para que el
   aspa se vuelva hueso sola cuando el botón se llena de marino. */
.burger { position: relative; display: block; width: 18px; height: 14px }
.burger i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor }
.burger i:nth-child(1) { top: 0 }
.burger i:nth-child(2) { top: 6px }
.burger i:nth-child(3) { top: 12px }
.navdrop[open] .burger i:nth-child(1) { top: 6px; transform: rotate(45deg) }
.navdrop[open] .burger i:nth-child(2) { opacity: 0 }
.navdrop[open] .burger i:nth-child(3) { top: 6px; transform: rotate(-45deg) }
@media (prefers-reduced-motion: no-preference) {
  .navdrop > ul {
    opacity: 0; translate: 0 -8px;
      transition: opacity .16s ease, translate .16s ease, display .16s allow-discrete;
  }
  .navdrop[open] > ul {
    opacity: 1; translate: 0 0;
      transition: opacity .26s ease, translate .26s cubic-bezier(.16, 1, .3, 1),
                  display .26s allow-discrete;
  }
  .burger i {
    transition: top .26s cubic-bezier(.16, 1, .3, 1),
                  transform .26s cubic-bezier(.16, 1, .3, 1),
                  opacity .14s ease;
  }
}
/* ---- mega menú de Servicios --------------------------------------------
   Sustituye al desplegable de cinco líneas de texto. Ancho del CONTENEDOR:
   arranca donde arranca el logotipo y acaba donde acaba el botón, porque el
   panel se ancla a `.nav__in`, que es el `.container` de la barra, con
   `left` y `right` a `--pad`. Para un elemento posicionado el bloque
   contenedor es la caja de relleno del antecesor, así que esos dos valores
   caen exactamente en el borde de contenido: el mismo eje que el logotipo.

   Vive en las DOS capas de chrome —esta y el `<style>` inline de la
   portada— y lo inserta el mismo script en las dos, para que no puedan
   divergir por una errata.

   SIN JAVASCRIPT FUNCIONA ENTERO: abre con `:hover` y con `:focus-within`.
   `nav.js` solo añade el cierre con Escape, que es lo que pide WCAG 1.4.13
   para el contenido que aparece al pasar el puntero por encima.

   `.has-sub` NO lleva `position`, y es deliberado: si lo llevara, el panel
   se anclaría a él —200 px de ancho— en vez de al contenedor. Por eso el
   chevron no va posicionado sino como ítem flexible del propio `<li>`. */
.nav__in { position: relative }
.nav__links .has-sub { display: flex; align-items: center; gap: 9px; padding-block: 28px; margin-block: -28px }
/* El chevron es un SVG en `data:` URI, el mismo idioma que la flecha del
   `<select>`: trazo de 1,5 px y 14 px de ancho. Va como ítem flexible del
   `<li>` y no dentro del `<a>` para que el subrayado que nace de la letra no
   lo cruce. */
.nav__links .has-sub::after, .ft__l .has-sub::after {
  content: ''; flex: none; width: 14px; height: 9px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23141210' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.nav__links .has-sub:hover::after, .nav__links .has-sub.is-open::after, .nav__links .has-sub:focus-within::after,
.ft__l .has-sub:hover::after, .ft__l .has-sub:focus-within::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%2314315F' stroke-width='1.5'/%3E%3C/svg%3E");
      transform: rotate(180deg)
}
/* Con dedo no hay «pasar por encima»: el primer toque abre el panel y el
       segundo navega. `nav.js` pone `.is-open`, y esta regla es la que lo pinta
       porque `:hover` no se cumple nunca en una pantalla táctil. */
.nav__links .has-sub.is-open>.sub-menu { display: grid }
.nav__links .sub-menu, .ft__l .sub-menu {
  position: absolute; top: 100%; left: var(--pad); right: var(--pad); z-index: 70;
  display: none; padding: 26px 26px 30px;
  background: var(--bone);
  /* EL FILETE VA EN MARINO. El panel es hueso y el cuerpo de la página
     también: no hay cambio de capa tonal, así que este filete de 1 px es la
     única señal de dónde empieza y dónde acaba, y le aplica el 3:1 de borde
     de componente. En `--line` daba 1,40:1 sobre el papel de la barra; en
     marino da 11,49:1. */
  border: 1px solid var(--brand);
  grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 26px;
}
.nav__links .has-sub:hover > .sub-menu, .nav__links .has-sub:focus-within > .sub-menu { display: grid }
@media (min-width: 901px) {
  .ft__l .has-sub:hover > .sub-menu, .ft__l .has-sub:focus-within > .sub-menu { display: grid }
}
/* Cierre con Escape: `nav.js` marca la barra y esta regla, con una clase más,
   gana a las dos de arriba sin recurrir a `!important`. */
.nav--sinhover .nav__links .has-sub:hover > .sub-menu, .nav--sinhover .nav__links .has-sub:focus-within > .sub-menu { display: none }
/* La tarjeta va sin filete arriba (usuario, 26 sep 2026): el panel ya tiene
   su borde marino y la foto marca dónde empieza cada entrada. Al pasar por
   encima se subraya el título, y solo el título: `.nav__links .mega` y no
   `.mega` para ganar a `.nav__links a`, que subraya todos los enlaces de la
   barra, y ese subrayado cruzaba también la descripción. */
.mega { display: block }
.nav__links .mega, .ft__l .mega { text-decoration: none }
.mega__ph { display: block; aspect-ratio: 16/10; margin-bottom: 16px }
.mega__t {
  display: block; font-size: var(--t-sm); font-weight: var(--w-semibold);
  color: var(--brand); letter-spacing: -.01em; margin-bottom: 6px;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .18s ease, color .18s ease;
}
.mega__d { display: block; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-2) }
.mega:hover .mega__t, .mega:focus-visible .mega__t { text-decoration-color: currentColor; color: var(--brand-3) }
/* Fotos del menú con más color que el resto del sitio (usuario, 26 sep 2026:
   con el duotono al 0,88 y el velo al 0,35 «se ven blanco y negro casi», y son
   las imágenes de ChatGPT hechas para cada servicio). Desaturado al 0,25 y
   velo al 0,15; al pasar por encima, color entero y sin velo. Es una
   transición que explica un estado, no un segundo momento animado. */
.mega .ph { --velo-foto: .15 }
.mega .ph img { filter: grayscale(.25) sepia(.06) contrast(1.02); transition: filter .28s ease }
.mega .ph::after { transition: background-color .28s ease }
.mega:hover .ph img, .mega:focus-visible .ph img { filter: none }
.mega:hover .ph, .mega:focus-visible .ph { --velo-foto: 0 }
/* El panel de la red tiene dos entradas, no cinco: no necesita el ancho de la
   barra ni una rejilla. Este `.has-sub` SÍ lleva `position` —al revés que el
   de Servicios, y por el mismo motivo— para que el panel se ancle al propio
   ítem y salga a su izquierda, con el ancho de una columna de lectura. */
.nav__links .has-sub--red, .ft__l .has-sub--red { position: relative }
.nav__links .sub-menu--red, .ft__l .sub-menu--red {
  left: 0; right: auto; width: 320px;
  padding: 20px 22px 24px;
  grid-template-columns: minmax(0, 1fr); row-gap: 20px;
}
/* En la red el filete solo va entre las dos entradas, porque ahí separa una de
   otra; la primera no lo lleva porque el borde marino del panel ya está a
   20 px por encima. Es fijo: al pasar por encima no cambia (usuario, 26 sep
   2026). */
.sub-menu--red > li + li .mega { border-top: 1px solid var(--line-2); padding-top: 14px }
/* Entre 901 y 1100 px las tarjetas de Servicios pierden la descripción porque
   son cinco en una fila. Aquí son dos, una debajo de otra: caben enteras. */
@media(min-width:901px) and (max-width:1100px) {
  .sub-menu--red .mega__d { display: block }
}

@media (prefers-reduced-motion: no-preference) {
  .nav__links .sub-menu, .ft__l .sub-menu {
    opacity: 0; translate: 0 -8px;
      transition: opacity .16s ease, translate .16s ease, display .16s allow-discrete;
  }
  .nav__links .has-sub:hover > .sub-menu, .nav__links .has-sub:focus-within > .sub-menu,
  .ft__l .has-sub:hover > .sub-menu, .ft__l .has-sub:focus-within > .sub-menu {
    opacity: 1; translate: 0 0;
      transition: opacity .24s ease, translate .24s cubic-bezier(.16, 1, .3, 1), display .24s allow-discrete;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav__links .has-sub::after, .mega__t, .mega .ph img { transition: none }
}
@media(min-width:901px) and (max-width:1100px) {
  .mega__d { display: none }
  .mega__ph { margin-bottom: 12px }
}
@media(max-width:900px) {
  .navdrop .sub-menu { padding: 0; display: block; border: 0; background: none; position: static }
  .navdrop .sub-menu a { padding-left: 38px; font-size: var(--t-xs); color: var(--ink-3) }
}
/* ---- pie -------------------------------------------------------------
   Sin filete superior, igual que la nav: lo separa el cambio de papel. */
.ft { background: var(--paper); border-top: 0; padding-top: 80px }
.ft__logo { width: 132px; max-width: 100%; height: auto; display: block }
/* 11 px de relleno y no 7. Con 7 los enlaces medían 38,8 px de alto, 5,2 por
   debajo del suelo táctil de 44 que se fijó el proyecto, y eso en las 24
   páginas interiores; la portada ya llevaba 11 en su copia inline y daba 46,8.
   Eran once enlaces por página fallando el mínimo y, encima, el mismo
   componente midiendo distinto según en qué página estuviera el visitante. */
/* `block` y no `inline-block`: en línea, «Blog» medía 32 px de ancho y se
   quedaba a 12 del suelo táctil de 44. Como es una lista de navegación y no
   prosa, no le vale la excepción de la 2.5.8. Ocupando el ancho de la
   columna pasa a 150 × 47. El subrayado nace de la letra, así que no se
   estira con la caja. */
.ft__l > li > a { display: block; padding-block: 11px; font-size: var(--t-sm); color: var(--ink-2) }
/* Desplegables del pie: son LOS MISMOS que los de la barra —el mismo HTML,
   sacado de `.nav__links` de cada página, y las mismas reglas— con dos
   cambios: se anclan a la fila del pie y abren hacia arriba, que es donde
   hay página. En el teléfono no hay hover, así que no se abren: el enlace
   padre lleva a /#servicios y a /clinicas/, con las dos listas completas.
   `nav.js` solo gobierna la barra; aquí abren con `:hover` y con
   `:focus-within`, sin JavaScript. */
.ft__grid { position: relative }
/* El `<li>` del pie también es caja flexible: el chevron es un `::after` con
   medidas propias y, como ítem en línea, el navegador se las come.
   El relleno de arriba con margen negativo es el PUENTE del ratón: el panel
   abre 14 px por encima del enlace y, sin él, al subir hacia el desplegable
   el puntero cruzaba tierra de nadie, se perdía el `:hover` y el panel se
   cerraba antes de llegar. La caja del `<li>` llega ahora hasta el panel sin
   mover nada de sitio (14 de relleno, -14 de margen). */
.ft__l .has-sub { display: flex; align-items: center; gap: 9px; padding-top: 14px; margin-top: -14px }
.ft__l .sub-menu { top: auto; bottom: 100%; left: 0; right: 0 }
.ft__l .sub-menu--red { left: 0; right: auto; bottom: 100% }
@media (prefers-reduced-motion: no-preference) {
  /* Nace 8 px por debajo, no por encima: entra en el sentido en que abre. */
  .ft__l .sub-menu { translate: 0 8px }
  .ft__l .has-sub:hover > .sub-menu, .ft__l .has-sub:focus-within > .sub-menu { translate: 0 0 }
}
/* El logotipo sube un punto sobre la línea de los enlaces: su caja tiene aire
   arriba y abajo y sin el empujón se leía bajo respecto al menú. */
.ft__brand { position: relative; top: -5px }
/* Los cuatro datos van en línea y se pliegan solos: en columna eran cuatro
   filas de 44 px con 140 a 250 px de texto cada una. */
.ft__adr { font-style: normal; display: flex; flex-flow: row wrap; align-items: baseline; column-gap: 24px }
.ft__k { display: inline-block; padding-block: 11px; font-size: var(--t-sm); color: var(--ink-2) }
.ft__k--quiet { color: var(--ink-3) }
/* Barra legal. COPIA EXACTA de las reglas del `<style>` inline de la
   portada: son el mismo pie y tienen que pintarse igual. Las dos capas van
   juntas —es la deuda del chrome duplicado—, así que un cambio aquí se
   aplica también en el `<style>` de la portada.

   El selector de idioma vivía aquí, entre la rejilla del pie y la barra
   legal. Se retiró el 17 ago 2026: los cinco enlaces eran `href="#"`, el
   de castellano llevaba además `aria-current="true"`, y en las tres
   páginas legales eso prometía un aviso legal en catalán, gallego o
   euskera que llevaba a ninguna parte. Vuelve cuando existan las
   traducciones, no antes. Sus reglas están en el historial de git. */
/* Los enlaces legales van al extremo opuesto del aviso de copyright, no
   pegados a él. Decisión del usuario del 27 jul 2026. */
.ft__b {
  border-top: 1px solid var(--line); color: var(--ink-3);
  font-size: var(--t-sm); justify-content: space-between;
  gap: 10px 32px; align-items: baseline;
}
.ft__b span { font-variant-numeric: tabular-nums }
.ft__b ul { gap: 8px 24px; flex-wrap: wrap }
.ft__b a { display: block; padding-block: 11px }
@media(max-width:900px) {
  .nav__links { display: none }
  .navdrop { display: block }
  .nav__in { gap: 10px }
  .nav__end { gap: 10px }
  /* El logotipo mide 104 × 38,9 y se quedaba a 5,1 px del suelo táctil.
       Es un control suelto, no un enlace dentro de un párrafo. */
  .logo { min-height: 44px; display: flex; align-items: center }
  .logo__img { width: 104px }
  /* Los dos controles de la nav miden lo mismo. */
  .nav__cta, .navdrop > summary { height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .nav__cta { font-size: var(--t-xs); white-space: nowrap; padding: 0 14px }
  /* Los tramos de la sección 1 son `:nth-child()` (0,2,1) y ganan por
       especificidad, no por orden: el reparto del teléfono se escribe con la
       misma forma. Marca y Contacto al ancho, los dos menús a media caja. */
  .ft__grid > *:nth-child(n) { grid-column: 1/-1 }
}
@media(min-width:901px) and (max-width:1200px) {
  /* El mismo reparto que en escritorio ancho: antes esta banda tenía el suyo
     propio, los tramos sumaban 18 de 12 y Contacto caía a una fila extra. El
     logotipo se encoge con `max-width` cuando el tramo es más estrecho. */
  .ft__grid > *:nth-child(1) { grid-column: span 2 }
  .ft__grid > *:nth-child(2) { grid-column: span 10 }
  .ft__grid > *:nth-child(3) { grid-column: 1/-1 }
}
@media print {
  .nav, .skip, .ft__grid, .navdrop { display: none }
  /* La barra legal se queda: en papel es lo único que dice de quién es
       el documento y dónde vive el original. */
  .ft { border-top: 1px solid #000; background: #fff; padding-top: 8pt }
  .ft__b { border-top: 0; color: #000; font-size: 8pt }
}
@media (min-width: 901px) and (max-width: 999px) {
  .nav__links { display: none }
  .navdrop { display: block }
  .nav__in { gap: 10px }
  .nav__end { gap: 10px }
  .nav__cta, .navdrop > summary { height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .nav__cta { font-size: var(--t-xs); white-space: nowrap; padding: 0 14px }
  .navdrop .sub-menu { padding: 0; display: block; border: 0; background: none; position: static }
  .navdrop .sub-menu a { padding-left: 38px; font-size: var(--t-xs); color: var(--ink-3) }
}
@media(max-width:900px) {
  /* ---- 4 · el pie ------------------------------------------------------
       La rejilla a dos columnas la pone `base.css`, que sirve a las 25
       páginas. Aquí solo cede el relleno de apertura: 88 px de aire para
       entrar en la navegación de salida, en una pieza que en el blog llegaba
       a ser el 36 % de la página entera. */
  .ft { padding-top: 56px }
  /* Sin ratón no hay desplegable, así que tampoco chevron: prometía un panel
     que en el teléfono no abre. El enlace lleva a la página completa. */
  .ft__l .has-sub::after { display: none }
  .ft__l .has-sub { padding-top: 0; margin-top: 0 }
  .ft__logo { width: 120px; margin-bottom: 6px }
}

/* ---- 3 · Mejoras que solo tenía la portada: objetivo táctil de 44 px en el menú y color al pasar por los contactos del pie ---- */

.ft__k:hover { color: var(--brand) }
/* Los dos menús del pie, a dos columnas desde 901 px: Servicios pasa de cinco
   filas a tres y Web, de seis a tres. Con `columns` el orden de lectura sigue
   siendo vertical (1-2-3 | 4-5-6), que es como se lee una lista. Cada enlace
   conserva sus 44 px de alto. */
/* El menú del pie es una fila de enlaces, no una columna: los tres primeros
   de la barra de arriba, en el mismo orden. Testimonios y Blog salieron del
   pie el 25 sep 2026, a petición del usuario, para darle aire; siguen en la
   barra. Con tres, la fila cabe en una línea también en el teléfono. */
.ft__nav .ft__l { display: flex; flex-wrap: wrap; column-gap: 20px }
.ft__nav .ft__l > li > a { display: inline-block }
@media (min-width: 901px) {
  .nav__links>li>a {
    display: inline-flex;
          align-items: center;
          min-height: 44px;
          padding-block: 11px;
          margin-block: -11px
  }
}

/* ---- 5 · Aviso de reCAPTCHA y botón de WhatsApp (17 sep 2026) ----------
   El sello flotante de reCAPTCHA se oculta a petición del usuario: tapaba la
   esquina inferior derecha en el teléfono. `visibility` y no `display: none`,
   que es lo que pide Google para no romper la puntuación. El aviso con sus
   dos enlaces estaba en la barra legal del pie; el 20 sep 2026, al compactar
   el pie, el usuario lo movió al apartado de cookies técnicas de
   `/legal/cookies/`, que es donde ya se declaraba reCAPTCHA.
   En la maqueta estática reCAPTCHA no carga y la regla no hace nada. */
.grecaptcha-badge { visibility: hidden }

/* Botón de WhatsApp. Sustituye al plugin Social Chat, que el tema anula sin
   desactivarlo (la web antigua lo sigue usando). CIRCULAR por petición
   expresa del usuario: es la única esquina redonda del sitio.
   Marino y no verde WhatsApp: el glifo blanco sobre #25D366 da 1,98:1 y no
   llega al 3:1 de un icono; sobre marino da 12,9:1. El anillo de papel es un
   filete sólido, no una sombra, y lo separa de las franjas marinas. Queda por
   debajo del menú (60 y 70) y del aviso de cookies del plugin (9999), así
   que no tapa ninguno de los dos. El pie reserva su altura al final de la
   página para que no quede encima de la barra legal. */
.wa {
  position: fixed; z-index: 50;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  box-shadow: 0 0 0 2px var(--paper);
  transition: background-color .2s cubic-bezier(.16, 1, .3, 1);
}
.wa svg { width: 28px; height: 28px; fill: currentColor }
.wa:hover { background: var(--brand-2) }
.wa:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px }
/* Reserva del botón: el botón ocupa los últimos 72 px de la ventana en el
   teléfono (16 de margen + 56 de alto) y 88 en el escritorio (32 + 56). La
   última línea del pie es ahora la barra legal, así que en vez de reservar
   esa altura entera debajo —88 px de hueco muerto— se aparta el texto de la
   barra: 76 px de guarda a la derecha, que es por donde sube el botón. El
   relleno de abajo queda como aire, no como reserva. */
.ft { padding-bottom: 56px }
/* Los enlaces legales llegan al borde del margen, en el mismo eje que el
   correo (decisión del usuario, 20 sep 2026). Así que la guarda contra el
   botón de WhatsApp vuelve a ser el relleno de abajo del pie: 88 px en
   escritorio (32 de margen + 56 de botón) y 76 en el teléfono, donde además
   el botón queda a la derecha de la barra legal, no encima. */
/* En el teléfono, mientras se escribe en un campo, el botón se aparta: con el
   teclado abierto quedaba encima del borde derecho de los campos (medido en
   /contacto/ a 390 px: 52 px de solape). `:has` sin soporte = el botón se ve. */
@media (max-width: 900px) {
  body:has(form :is(input, select, textarea):focus) .wa { visibility: hidden }
}
@media (min-width: 901px) {
  .wa { right: 32px; bottom: 32px }
  .ft { padding-bottom: 80px }
}
@media (prefers-reduced-motion: reduce) {
  .wa { transition: none }
}
@media print {
  .wa { display: none }
  .ft { padding-bottom: 0 }
}

/* ---- 6 · Aviso de cookies (24 sep 2026) --------------------------------
   El aviso lo pinta el plugin cookie-law-info; sus textos, el orden de los
   botones y sus colores los fija el tema en `functions.php`, y aquí va el
   aspecto. Por decisión del usuario: «Aceptar todas» el doble de grande que
   antes (108 × 31 px → 216 × 62) y encima; «Configurar cookies» debajo, como
   enlace sin fondo que se subraya al pasar. En la maqueta estática el aviso no
   existe y estas reglas no hacen nada.
   Todas empiezan por `body #cookie-law-info-bar[data-cli-style]`: la hoja del
   plugin se carga después y sus reglas llegan a `id` + atributo + clase, así
   que con el `id` solo perdían. El color de los botones lo escribe en línea su JavaScript
   con los valores del tema, así que aquí no se repite. El contenido se alinea
   con el de la página: mismo ancho máximo y el mismo margen lateral. */
body #cookie-law-info-bar[data-cli-style] {
  padding: 28px calc(max(0px, (100% - var(--container)) / 2) + var(--pad));
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 32px rgba(20, 18, 16, .08);
  font-family: var(--f);
}
body #cookie-law-info-bar[data-cli-style] .cli-bar-container { align-items: center; gap: 56px }
body #cookie-law-info-bar[data-cli-style] .cli_messagebar_head {
  margin: 0 0 8px; font-size: var(--t-lg); line-height: 1.3;
  font-weight: var(--w-semibold); color: var(--brand); letter-spacing: -.005em;
}
body #cookie-law-info-bar[data-cli-style] .cli-bar-message {
  width: auto; flex: 1 1 auto; max-width: 78ch;
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2);
}
body #cookie-law-info-bar[data-cli-style] .cli-bar-message a {
  color: var(--brand); text-decoration: underline; text-underline-offset: 3px;
}
body #cookie-law-info-bar[data-cli-style] .cli-bar-btn_container {
  flex: none; flex-direction: column; align-items: stretch; gap: 6px; margin: 0;
}
body #cookie-law-info-bar[data-cli-style] .wt-cli-accept-all-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 216px; min-height: 62px; margin: 0; padding: 0 40px;
  font-size: var(--t-base); font-weight: var(--w-semibold); letter-spacing: .01em;
  border-radius: 0; transition: background-color .2s;
}
body #cookie-law-info-bar[data-cli-style] .cli_settings_button {
  align-self: center; display: inline-flex; align-items: center;
  min-height: 44px; margin: 0; padding: 0 4px;
  font-size: var(--t-sm); font-weight: var(--w-medium);
  text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
body #cookie-law-info-bar[data-cli-style] .cli_settings_button:hover { text-decoration: underline }
body #cookie-law-info-bar[data-cli-style] .wt-cli-accept-all-btn:focus-visible,
body #cookie-law-info-bar[data-cli-style] .cli_settings_button:focus-visible,
body #cookie-law-info-bar[data-cli-style] .cli-bar-message a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; text-decoration: underline;
}
/* Por debajo de 986 px el plugin apila mensaje y botones; aquí el botón pasa a
   ocupar el ancho entero, que en el teléfono es donde cae el pulgar. */
@media (max-width: 985px) {
  body #cookie-law-info-bar[data-cli-style] { padding-block: 24px 20px }
  body #cookie-law-info-bar[data-cli-style] .cli-bar-container { gap: 20px }
  body #cookie-law-info-bar[data-cli-style] .cli-bar-btn_container { width: 100%; margin: 0 }
}
@media (max-width: 600px) {
  body #cookie-law-info-bar[data-cli-style] .cli_messagebar_head { font-size: 1.125rem }
  body #cookie-law-info-bar[data-cli-style] .cli-bar-message { font-size: var(--t-xs); line-height: 1.55 }
}
@media (prefers-reduced-motion: reduce) {
  body #cookie-law-info-bar[data-cli-style] .wt-cli-accept-all-btn { transition: none }
}
@media print {
  #cookie-law-info-bar { display: none !important }
}

/* ---- 7 · El pie en el teléfono, en vertical (27 sep 2026) --------------
   Petición del usuario: en el móvil «no se ve nada bien», «más vertical y no
   todo tan apeñado». Hasta 700 px, cada pieza en su bloque y una debajo de
   otra: el logotipo; el menú como lista, un enlace por fila con filete entre
   ellas; los teléfonos y el correo, uno por línea; y la barra legal con el
   aviso de copyright encima de los tres enlaces. Filas de 48 px: más que el
   suelo táctil de 44. La tablet conserva el pie en filas. */
@media (max-width: 700px) {
  .ft { padding-top: 48px }
  .ft__grid { flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding-bottom: 0 }
  .ft__grid > * { flex: none }
  .ft__brand { top: 0; margin-bottom: 28px }
  .ft__logo { margin-bottom: 0 }
  .ft__nav .ft__l { flex-direction: column; flex-wrap: nowrap; border-top: 1px solid var(--line) }
  .ft__nav .ft__l > li { border-bottom: 1px solid var(--line) }
  .ft__nav .ft__l > li > a { display: block; padding-block: 13px; font-size: var(--t-base); color: var(--ink) }
  .ft__adr { flex-direction: column; align-items: flex-start; margin-top: 28px }
  .ft__k { display: block; padding-block: 10px; font-size: var(--t-base) }
  .ft__b { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 28px; padding-top: 20px }
  .ft__b ul { gap: 0 24px }
}