/* src/styles/agendar-pasos.css */
/* Pasos de agendamiento (seccion #agendar de la home).

   POR QUE EXISTE ESTE ARCHIVO
   El CSS que trajo el Super Import estiliza `.pasos` y sus `li` con selectores
   de atributo de Astro: `.pasos[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]`.
   El marcado que reemplaza los pasos desde el editor no lleva ese atributo,
   asi que esas reglas no lo alcanzan: se perdia el circulo numerado y el
   espaciado entre pasos, quedando todo el texto apilado sin jerarquia.

   Mismo patron que equipo-guiado.css y nav-otras-paginas.css: se repiten las
   mismas reglas con la clase a secas, sin el atributo. */

.agendar__tip {
  margin-top: .75rem;
  color: var(--p-texto-2);
}

.pasos {
  counter-reset: paso 0;
  display: flex;
  flex-direction: column;
  row-gap: 1.75rem;
  column-gap: 1.75rem;
  margin-top: 2.5rem;
}

.pasos li {
  counter-increment: paso 1;
  display: grid;
  grid-template-columns: 2rem minmax(0px, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.pasos li::before {
  content: counter(paso);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--p-radio-pill);
  background: var(--p-acento-suave);
  color: var(--p-acento);
  font-size: .875rem;
  font-weight: 600;
}

.pasos li h3,
.pasos li p {
  grid-column: 2 / auto;
}

.pasos li p {
  margin-top: .3rem;
  max-width: 52ch;
}


/* src/styles/atencion-grupos.css */
/* Grupos de "Que atendemos por videollamada" (seccion #atencion de la home).

   Mismo motivo que agendar-pasos.css: el CSS del Super Import estiliza estas
   clases con el atributo de Astro (`.grupos[data-astro-cid-lcdefpme]`, etc.)
   y el marcado reemplazado desde el editor no lo lleva. Se repiten aqui las
   mismas reglas con la clase a secas. */

.grupos {
  display: grid;
  row-gap: 2rem;
  column-gap: 2rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .grupos {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    row-gap: 2.5rem;
    column-gap: 2.5rem;
  }
}

.grupo__titulo {
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--p-borde);
}

.grupo__lista {
  display: flex;
  flex-direction: column;
  row-gap: .7rem;
  column-gap: .7rem;
  margin-top: 1rem;
}

.grupo__lista li {
  display: flex;
  align-items: flex-start;
  row-gap: .55rem;
  column-gap: .55rem;
  font-size: .9375rem;
  line-height: 1.45;
}

.grupo__lista svg {
  margin-top: .12rem;
  color: var(--p-acento);
  flex: none;
}


/* src/styles/bricolage.css */
/* Bricolage Grotesque — variable 200..800.
   Archivos subidos al media de Instatic. Las @font-face no sobreviven al
   Super Import, por eso viven aqui como asset de estilo. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/uploads/8759peKAiTRsr3XgaW7wT-bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/uploads/ibNCHm8a5MpyPadAs8HFw-bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* src/styles/buscador.css */
/* Tarjeta del buscador, compartida por la portada y /equipo.

   POR QUE AQUI
   Las dos paginas usaban las mismas clases .eq-*, pero solo /equipo habia
   recibido el tratamiento de tarjeta: en la portada el campo seguia suelto
   sobre el fondo, con el rotulo en versalitas. Misma pieza, dos acabados. Se
   define una vez y las dos la heredan.

   QUE COMPARTEN Y QUE NO
   Comparten la caja, el titulo y el aspecto del campo. NO comparten filtros, a
   proposito. Se probo llevar a la portada las tres facetas de /equipo y se
   retiro el 3 de septiembre de 2026: alli una faceta cambia la lista en el
   acto, y aqui el mismo control guardaba un valor en silencio hasta cambiar de
   pagina. Mismo aspecto, contrato distinto — el hallazgo 20 de la auditoria a
   mayor escala. La division es: la portada invita, /equipo filtra.

   ESPECIFICIDAD
   Las reglas de la portada van encadenadas bajo .home-filtros para puntuar
   0-2-0 y ganarle a las .eq-* sueltas de la hoja del sitio, que puntuan 0-1-0.
   Sin eso el borde y el fondo originales sobrevivirian por orden de cascada. */

/* ---- la tarjeta ---- */
.eq-busca,
.home-filtros .eq-campo {
  background: var(--p-superficie);
  border: 1px solid var(--p-borde);
  border-radius: var(--p-radio);
  box-shadow: var(--p-sombra);
  padding: .9rem 1rem 1rem;
}
.eq-busca { display: flex; flex-direction: column; gap: .55rem; }

/* ---- el titulo ---- */
/* Deja de ser un rotulo en versalitas y pasa a ser una pregunta legible, que
   es lo que hace que el campo se entienda sin leer el placeholder. */
.eq-busca-t,
.home-filtros .eq-t {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--p-texto);
  letter-spacing: normal;
  text-transform: none;
}

/* ---- el campo ---- */
.eq-busca .eq-buscador,
.home-filtros .eq-buscador {
  max-width: none;
  background: var(--p-fondo);
  border: 1px solid var(--p-borde);
  border-radius: var(--p-radio-chico);
  padding: .65rem .85rem;
}
.eq-busca .eq-sugerencias,
.home-filtros .eq-sugerencias { padding-inline: .15rem; }

/* ---- el contenedor de la portada ---- */
/* .eq-filtros trae borde, fondo y relleno propios. Con la tarjeta dentro se
   dibujaban dos marcos, uno pegado al otro. En /equipo esto lo resuelve
   data-facetas="si"; aqui hace falta el equivalente. */
.eq-filtros.home-filtros {
  border: 0;
  background: none;
  padding: 0;
  box-shadow: none;
}

/* ---- portada: campo y boton en linea ---- */
/* El boton al lado del campo no es decoracion: hasta ahora la unica forma de
   enviar era pulsar Intro, y eso no lo descubre todo el mundo.

   Rejilla y no flex porque el titulo ocupa la fila entera y debajo van campo y
   boton: con areas se dice de una vez y no hay que envolver nada en el
   marcado. */
.home-filtros .eq-campo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titulo titulo"
    "campo  boton";
  gap: .55rem .7rem;
  align-items: center;
}
.home-filtros .eq-t { grid-area: titulo; }
.home-filtros .eq-buscador { grid-area: campo; }
.home-buscar { grid-area: boton; white-space: nowrap; }

@media (max-width: 719px) {
  /* El boton baja a su propia fila y ocupa el ancho: en un movil, un campo y
     un boton compartiendo linea dejan el campo en nada. */
  .home-filtros .eq-campo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "titulo"
      "campo"
      "boton";
  }
  .home-buscar { justify-content: center; }

  .eq-busca { margin-top: clamp(1.25rem, 3.5vw, 2rem); }
}


/* src/styles/correcciones-auditoria.css */
/* Correcciones de la auditoria de diseno y UX (tanda 1, globales).

   POR QUE ESTE ARCHIVO Y NO LA HOJA DEL SITIO
   Los hallazgos 02, 13 y 14 son reglas que ya existen en style.css, y esa hoja
   la tiene el motor duplicada entera (hallazgo 15: dos :root, dos body, dos
   :focus-visible, dos html[data-tema="oscuro"] .emblema). Editarlas con
   site_apply_css es ambiguo cuando el mismo selector aparece dos veces, asi
   que se sobrescriben desde aqui, que carga despues.

   SOBRE LAS ESPECIFICIDADES
   El orden entre assets de codigo no esta garantizado, asi que ninguna regla
   depende de llegar despues: cada una gana por especificidad. De ahi el
   prefijo `html` y el duplicado con [data-astro-cid-*], que es el atributo con
   que el Super Import estilizo el marcado de la home. Al limpiar esos
   atributos algun dia, la mitad sin atributo sigue funcionando sola. */


/* ---- 02 · el emblema perdia la foto en tema oscuro ----------------------
   La regla oscura de style.css usa la abreviatura `background`, que reinicia
   background-image a none y borraba la foto del centro. Aqui se repone el
   valor original y se fija el color con background-color, que no arrastra la
   imagen. `:root[...]` en vez de `html[...]` para ganar por especificidad
   (0,4,0) a la regla original (0,3,1) sin depender del orden de carga. */
:root[data-tema="oscuro"] .emblema,
:root[data-tema="oscuro"] .emblema[data-astro-cid-jff2jlp2] {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .45) 65%, rgba(0, 0, 0, .78) 100%),
    url("/uploads/fVx5JBNSnT7bN8N-UB5-g-Gemini_Generated_Image_8mj7ht8mj7ht8mj7__1_-w2048.webp");
  background-image:
    linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .45) 65%, rgba(0, 0, 0, .78) 100%),
    image-set(
      url("/uploads/fVx5JBNSnT7bN8N-UB5-g-Gemini_Generated_Image_8mj7ht8mj7ht8mj7__1_-w640.webp") .63x,
      url("/uploads/fVx5JBNSnT7bN8N-UB5-g-Gemini_Generated_Image_8mj7ht8mj7ht8mj7__1_-w1024.webp") 1x,
      url("/uploads/fVx5JBNSnT7bN8N-UB5-g-Gemini_Generated_Image_8mj7ht8mj7ht8mj7__1_-w1600.webp") 1.56x,
      url("/uploads/fVx5JBNSnT7bN8N-UB5-g-Gemini_Generated_Image_8mj7ht8mj7ht8mj7__1_-w2048.webp") 2x);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}


/* ---- 13 · la barra de confianza se veia a dos columnas ------------------
   En style.css la media query de 1024px (4 columnas) quedo ANTES que la de
   640px (2 columnas). Misma especificidad, gana la ultima, asi que en toda
   pantalla grande se veian dos columnas con columnas de 526px y mucho aire
   muerto. Con auto-fit sobran ambas media queries y no vuelve a depender del
   orden de fuente. */
html .confianza__reja,
html .confianza__reja[data-astro-cid-lcdefpme] {
  /* El suelo es 13rem y no 15rem por un pixel: con 1100px de contenido y 48px
     de gap, cuatro columnas dan 239px cada una, y un minimo de 240px hacia
     que auto-fit se rindiera a tres. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  align-items: start;
}


/* ---- 14 · escala y pesos tipograficos -----------------------------------
   Bricolage Grotesque se carga como variable 200-800 y la hoja usaba un unico
   peso (600, 24 veces). El titular ademas se congelaba en 40px desde los
   1143px: el mismo tamano en un telefono de 375px que en un monitor de 1920.
   Se sube el techo y se separan dos pesos: 700 para el display, 600 se queda
   para h2/h3. */
html .p-display {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.036em;
  line-height: 1.03;
}


/* ---- 12 · la pagina activa no se marcaba en el menu ---------------------
   El marcado ya trae aria-current="page" en el enlace correcto; no existia
   ninguna regla que lo usara, asi que los cuatro enlaces se veian iguales. */
html .nav__enlaces a[aria-current="page"],
html .nav__enlaces[data-astro-cid-lcdefpme] a[aria-current="page"] {
  color: var(--p-texto);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--p-acento);
}


/* ---- 17 · objetivos tactiles bajo el minimo ----------------------------
   44 controles median menos de 44px de alto a 375px, incluido el CTA
   principal (38px) y el enlace al inicio, que en movil es la unica
   navegacion que existe. Se acota a punteros gruesos para no engordar la
   composicion de escritorio. */
@media (pointer: coarse) {
  html .p-btn,
  html .p-btn[data-astro-cid-lcdefpme] {
    min-height: 44px;
  }

  html .tema,
  html .tema[data-astro-cid-lcdefpme] {
    width: 44px;
    height: 44px;
  }

  /* El logo conserva su tamano visual: solo se le amplia el area sensible. */
  html .nav__marca,
  html .nav__marca[data-astro-cid-lcdefpme] {
    min-height: 44px;
  }

  html .pie__redes a,
  html .pie__redes[data-astro-cid-lcdefpme] a[data-astro-cid-lcdefpme] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}


/* ---- 23 · las anclas aterrizaban debajo de la cabecera ------------------
   `.nav` es sticky y mide 68px, y ninguna seccion declaraba scroll-margin, asi
   que cada enlace del menu (#agendar, #cobertura, ...) dejaba el titulo de la
   seccion 69px por detras de la barra: se saltaba y no se veia adonde. Ya
   pasaba antes, pero el menu movil nuevo lo vuelve alcanzable desde cualquier
   pagina y en el dispositivo donde mas se usa.
   68px de cabecera mas aire para que el titulo no quede pegado al borde. */
html section[id],
html [id].p-seccion,
html #eq-reja,
html #contenido {
  scroll-margin-top: 84px;
}


/* src/styles/equipo-guiado.css */
/* Filtro guiado del directorio (variante 1a de la auditoria UX).
   Vive en un asset de codigo y no en la hoja del sitio porque las reglas
   nuevas agregadas ahi no llegaron al sitio publicado en intentos previos.
   Reutiliza los tokens --p-* que ya define la hoja del sitio.

   Nota de marcado: site_replace_node_html reemplaza los HIJOS de un nodo, no
   el nodo. Por eso el contenedor del panel sigue siendo `.eq-filtros` (que ya
   traia borde, fondo y padding) y no un `.eq-guia` propio: envolverlo habria
   dibujado dos marcos, uno dentro del otro. */

/* ---- panel guiado ---- */
.eq-cuerpo { display: flex; flex-direction: column; gap: 1.6rem; }
.eq-fila { display: flex; flex-wrap: wrap; gap: 2rem; }
.eq-campo { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.eq-t {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--p-texto-3);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.eq-buscador { max-width: none; border-radius: var(--p-radio-chico); padding: .7rem .95rem; }
.eq-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  font-size: .9375rem;
  color: var(--p-texto-2);
}
/* 20 (auditoria) · la sugerencia era una pastilla mas, identica a los chips
   de filtro y a las pastillas de filtro activo: tres controles con la misma
   forma y tres significados distintos. La sugerencia no es un filtro, es una
   pregunta, asi que va como enlace de texto. */
.eq-chip--sug {
  border: 0;
  background: none;
  border-radius: 0;
  padding: .2rem .1rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--p-acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.eq-chip--sug:hover { color: var(--p-acento-alto); background: none; }

.eq-enlace {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--p-acento);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: .45rem .25rem;
}
.eq-mas {
  border-top: 1px solid var(--p-borde);
  padding-top: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.eq-mas-g { display: flex; flex-direction: column; gap: .55rem; }
.eq-mas-t {
  font-size: .75rem;
  font-weight: 600;
  color: var(--p-texto-3);
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* Los chips del panel ya no llevan contador: los numeros se leian como precio
   o ranking y quedaban obsoletos al filtrar. */
.eq-chip .eq-n { display: none; }

/* ---- barra de resultados ---- */
.eq-izq { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* 20 (auditoria) · la pastilla de filtro activo va en solido, para que se
   distinga de un vistazo del chip activable, que es de contorno. */
.eq-pastilla {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--p-acento);
  background: var(--p-acento);
  color: var(--p-sobre-acento);
  border-radius: var(--p-radio-pill);
  padding: .3rem .75rem;
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
.eq-orden { font-size: .875rem; color: var(--p-texto-3); }

/* ---- tarjetas ---- */
.eq-reja { grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); }
.eq-tarjeta {
  gap: .85rem;
  height: 100%;
  padding: 1.25rem 1.35rem;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.eq-tarjeta[data-abierta="si"] { border-color: var(--p-acento); }
.eq-enc { display: flex; align-items: flex-start; gap: .9rem; }
/* Marcador de posicion del retrato: iniciales hasta que existan las fotos
   recortadas sin el marco verde. Mismo tamano que tendra la foto, para que
   reemplazarlo no mueva el layout. */
.eq-retrato {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--p-radio-pill);
  background: var(--p-acento-suave);
  color: var(--p-acento);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  overflow: hidden;
}
.eq-retrato-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eq-id { flex: 1; min-width: 0; }
.eq-linea {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  justify-content: space-between;
}
.eq-nombre { font-size: 1.0625rem; }
/* Previsión arriba a la derecha: la esquina donde despues aterriza el precio
   cuando exista la API de Reservo. */
.eq-prev {
  flex: none;
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 600;
  color: var(--p-acento-alto);
  background: var(--p-acento-suave);
  border-radius: var(--p-radio-chico);
  padding: .15rem .5rem;
}
/* Sin previsión declarada: gris, no verde. Un badge afirmativo para un dato
   que nadie confirmo se leeria como una confirmacion. */
.eq-prev[data-dato="no"] {
  color: var(--p-texto-3);
  background: var(--p-superficie-2);
  font-weight: 400;
}
.eq-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-top: .15rem; }
/* Motivos en chips, no en un parrafo truncado con "…" (punto 03 del diagnostico). */
.eq-etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; }
/* 14 (auditoria) · en peso 600 las etiquetas competian con el nombre del
   profesional, que tambien es 600. Bajan a 500. */
.eq-etiqueta {
  font-size: .75rem;
  font-weight: 500;
  color: var(--p-texto-3);
  background: var(--p-superficie-2);
  border-radius: var(--p-radio-chico);
  padding: .2rem .55rem;
}
.eq-detalle {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--p-borde);
  padding-top: 1rem;
}
.eq-bio { font-size: .9375rem; line-height: 1.5; color: var(--p-texto); }
.eq-dato-t {
  font-size: .75rem;
  font-weight: 600;
  color: var(--p-texto-3);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.eq-dato p { font-size: .9375rem; color: var(--p-texto-2); line-height: 1.45; }
/* El pie va al fondo con margin-top:auto, asi "Ver mas" queda siempre abajo
   y alineado entre tarjetas vecinas aunque una este abierta. */
.eq-pie {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--p-borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.eq-hora { font-size: .9375rem; color: var(--p-texto-3); }
.eq-ver {
  border: 0;
  background: none;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--p-acento);
  cursor: pointer;
  padding: .2rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.eq-ver:hover { color: var(--p-acento-alto); }

/* ---- 17 (auditoria) · objetivos tactiles ----
   "Ver mas" median 30px de alto, repetido en las 38 fichas, y los chips del
   panel quedaban justos. Se acota a punteros gruesos para no alterar la
   composicion con mouse. */
@media (pointer: coarse) {
  .eq-ver { min-height: 44px; display: inline-flex; align-items: center; }
  .eq-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .eq-enlace { min-height: 44px; display: inline-flex; align-items: center; }
  .eq-pastilla { min-height: 44px; }
  .eq-limpiar { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- movil: el filtro no puede ser la pagina ---- */
@media (max-width: 719px) {
  /* 01 (auditoria) · el panel se pegaba a top:0, igual que .nav, que tiene
     z-index 20 contra los 5 de aqui. La cabecera de 68px se pintaba encima de
     los primeros 68px del panel — justo donde vive el boton que lo cierra —
     asi que una vez abierto no habia forma de cerrarlo, y sus 599px sobre una
     ventana de 813px dejaban las fichas en una franja de 200px.
     Ahora se pega BAJO la cabecera y nunca pasa del alto de la pantalla: el
     que scrollea es el panel, no la pagina. */
  .eq-filtros {
    position: sticky;
    top: 68px;
    z-index: 5;
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-inline: calc(var(--p-margen) * -1);
    border-radius: 0;
    border-inline: 0;
    padding: 0 var(--p-margen) 1rem;
  }
  .eq-cuerpo { margin-top: 1rem; }
  /* El boton se queda fijo en el borde del panel scrolleable, asi que sigue
     alcanzable con el panel abierto y a mitad de scroll. El fondo es opaco
     para que las opciones no se lean por debajo al pasar. */
  .eq-abrir {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    width: 100%;
    min-height: 44px;
    border: 0;
    background: var(--p-superficie);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 1rem 0 .75rem;
    color: inherit;
  }
  /* El contador lo crea el script: el motor descarta el span vacio del
     marcado, y sin el las dos etiquetas salian pegadas ("Filtrar38
     profesionales") y el numero nunca se actualizaba. */
  .eq-abrir #eq-abrir-n {
    margin-left: auto;
    font-weight: 400;
    color: var(--p-texto-3);
  }
  /* Chevron: el boton no daba ninguna senal de abrir ni de cerrar. */
  .eq-abrir::after {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.15em) rotate(45deg);
    transition: transform .18s ease;
  }
  .eq-abrir[aria-expanded="true"]::after {
    transform: translateY(.1em) rotate(225deg);
  }
  .eq-fila { flex-direction: column; gap: 1.15rem; }
}
@media (min-width: 720px) { .eq-abrir { display: none; } }


/* ============ hoja de filtros de movil ============
   Reemplaza el panel plegable cuando src/scripts/equipo-hoja.js consigue
   montarse: buscador arriba, tres facetas, y las opciones en una hoja inferior
   que deja las fichas a la vista. El bloque de arriba se conserva a proposito
   como respaldo: si el script no corre, el acordeon de siempre sigue ahi. */
@media (max-width: 719px) {
  /* Con la hoja montada el panel solo lleva el buscador y las facetas, asi que
     no necesita ni el alto maximo ni el scroll propio que pedia el acordeon. */
  .eq-filtros[data-movil="si"] {
    max-height: none;
    overflow: visible;
    padding-bottom: 0;
  }
  .eq-filtros[data-movil="si"] > .eq-abrir,
  .eq-filtros[data-movil="si"] > .eq-cuerpo { display: none !important; }

  .eq-movil { display: flex; flex-direction: column; gap: .6rem; padding: .85rem 0; }
  .eq-movil .eq-buscador { max-width: none; }

  /* Fila de facetas: se desplaza en horizontal en vez de apilarse, que era el
     origen de los 1.633 px. */
  .eq-facetas {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--p-margen) * -1);
    padding-inline: var(--p-margen);
  }
  .eq-facetas::-webkit-scrollbar { display: none; }
  .eq-faceta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    border: 1px solid var(--p-borde-fuerte);
    border-radius: var(--p-radio-pill);
    background: var(--p-fondo);
    color: var(--p-texto);
    font: inherit;
    font-size: .875rem;
    padding: .35rem .85rem;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  }
  .eq-faceta[aria-pressed="true"] {
    background: var(--p-acento);
    border-color: var(--p-acento);
    color: var(--p-sobre-acento);
    font-weight: 600;
  }
  .eq-faceta-v { font-size: .6em; opacity: .7; }

  body.eq-sin-scroll { overflow: hidden; }
}

/* La hoja cuelga de <body>, no de .eq-filtros, que es sticky: un position
   fixed dentro de un sticky queda atado a su bloque contenedor. Por eso estas
   reglas no van dentro de la media query de arriba por herencia, sino que se
   apagan solas en escritorio, donde el script desmonta la hoja del DOM. */
.eq-tapa {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: color-mix(in srgb, var(--p-texto) 34%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.eq-tapa[data-abierta="si"] { opacity: 1; pointer-events: auto; }

.eq-hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;   /* .nav es 20 */
  display: flex;
  flex-direction: column;
  max-height: 78dvh;
  background: var(--p-superficie);
  border-top: 1px solid var(--p-borde-fuerte);
  border-radius: var(--p-radio) var(--p-radio) 0 0;
  box-shadow: 0 -20px 44px -30px color-mix(in srgb, var(--p-texto) 70%, transparent);
  transform: translateY(101%);
  transition: transform .26s cubic-bezier(.16, 1, .3, 1);
}
.eq-hoja[data-abierta="si"] { transform: translateY(0); }

.eq-hoja-asa {
  position: absolute;
  top: .45rem;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 3px;
  border-radius: 9px;
  background: var(--p-borde-fuerte);
}
.eq-hoja-cab {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem var(--p-margen) .75rem;
  border-bottom: 1px solid var(--p-borde);
}
.eq-hoja-t { font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.eq-hoja-x {
  margin-left: auto;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--p-texto-3);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.eq-hoja-x:hover { color: var(--p-texto); }

.eq-hoja-cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .9rem var(--p-margen) 1.1rem;
}
/* El titulo del grupo ya lo dice la cabecera de la hoja. */
.eq-hoja-cuerpo .eq-t { display: none; }
.eq-hoja-cuerpo .eq-campo { gap: .9rem; }

.eq-hoja-pie {
  padding: .8rem var(--p-margen) 1rem;
  border-top: 1px solid var(--p-borde);
  background: var(--p-superficie);
}
.eq-hoja-ok {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--p-radio-pill);
  background: var(--p-acento);
  color: var(--p-sobre-acento);
  font: inherit;
  font-weight: 600;
  font-size: .9375rem;
  cursor: pointer;
}
.eq-hoja-ok:hover { background: var(--p-acento-alto); }

/* Seleccion unica: en la hoja se dibuja como radios. Con chips identicos a los
   de motivo nada avisaba que las opciones se excluyen, y la regla se descubria
   cuando la anterior se apagaba sola. */
/* El grupo trae margen y separacion propios del panel de escritorio. Dentro de
   la hoja partiria la lista en dos: "Cualquiera" arriba y las seis opciones
   28 px mas abajo, como si fueran cosas distintas. */
.eq-hoja-cuerpo .eq-campo,
.eq-hoja-cuerpo .eq-chips { margin-top: 0; }
.eq-hoja-cuerpo .eq-unico .eq-chips { display: flex; flex-direction: column; gap: 0; }
.eq-hoja-cuerpo .eq-chip--todo,
.eq-hoja-cuerpo .eq-unico .eq-chips .eq-chip {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid var(--p-borde);
  border-radius: 0;
  background: none;
  color: var(--p-texto);
  text-align: left;
  padding: .2rem .1rem;
  font-size: .9375rem;
}
.eq-hoja-cuerpo .eq-unico .eq-chips .eq-chip:last-child { border-bottom: 0; }
.eq-hoja-cuerpo .eq-chip--todo::before,
.eq-hoja-cuerpo .eq-unico .eq-chips .eq-chip::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: var(--p-radio-pill);
  border: 1.5px solid var(--p-borde-fuerte);
  box-shadow: inset 0 0 0 3px var(--p-superficie);
  background: transparent;
  transition: background-color .14s ease, border-color .14s ease;
}
.eq-hoja-cuerpo .eq-chip--todo[aria-checked="true"],
.eq-hoja-cuerpo .eq-unico .eq-chips .eq-chip[aria-checked="true"] { font-weight: 600; }
.eq-hoja-cuerpo .eq-chip--todo[aria-checked="true"]::before,
.eq-hoja-cuerpo .eq-unico .eq-chips .eq-chip[aria-checked="true"]::before {
  background: var(--p-acento);
  border-color: var(--p-acento);
}

@media (prefers-reduced-motion: reduce) {
  .eq-hoja, .eq-tapa, .eq-faceta { transition: none; }
}


/* src/styles/equipo-hero.css */
/* Hero de /equipo y facetas como tarjetas.

   Va en un asset propio y no dentro de equipo-guiado.css para que la capa
   nueva se pueda revisar —y revertir— sin tocar las reglas del filtro guiado,
   que ya llevan dos rondas de auditoria encima.

   Depende de src/scripts/equipo-hoja.js, que marca .eq-filtros con
   data-facetas="si" cuando consigue montar la fila. Casi todo aqui cuelga de
   ese atributo, por dos razones: si el script no corre, el panel de chips de
   siempre sigue en pie y la pagina sigue siendo usable; y el prefijo da la
   especificidad que hace falta para ganarle a las reglas de .eq-faceta que
   equipo-guiado.css dejo escritas para la version de pastillas. */

/* ============ hero ============ */
/* La banda de foto y su velo NO estan aqui: viven en src/styles/hero.css, en un
   selector agrupado con .hero para que la portada y esta pagina compartan una
   sola definicion. Aqui solo queda lo propio de /equipo. */
.eq-seccion .p-display { max-width: 16ch; }
.eq-intro { max-width: 40ch; }

/* ============ la columna de cajas ============ */
.eq-filtros[data-facetas="si"] .eq-movil {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 0;
  margin-top: clamp(1.25rem, 3.5vw, 2rem);
}

/* El panel deja de ser una tarjeta: el marco lo llevan ahora las cajas de
   dentro. Envolverlas en un contenedor con borde propio dibujaba dos marcos
   anidados, que es lo que hacia flotar los botones sueltos en un cajon vacio. */
.eq-filtros[data-facetas="si"] {
  border: 0;
  background: none;
  padding: 0;
  box-shadow: none;
}
/* El acordeon y el panel de 38 chips: el script mueve los grupos dentro y
   fuera de .eq-cuerpo, asi que sigue en el DOM, solo que no se pinta. */
.eq-filtros[data-facetas="si"] > .eq-abrir,
.eq-filtros[data-facetas="si"] > .eq-cuerpo { display: none !important; }

/* ---- caja 1: el buscador ---- */
/* Al sacar el campo del grupo de motivos pierde el .eq-t que lo rotulaba —ese
   texto pasa a ser la cabecera del popover— y quedaba a la intemperie. El
   script le pone su propio titulo. */
/* La tarjeta del buscador (.eq-busca) NO se define aqui: vive en
   src/styles/buscador.css, agrupada con la de la portada para que las dos
   paginas compartan una sola definicion. Aqui solo queda lo propio de /equipo.

   Nota de por que aquella no lleva el prefijo .eq-filtros: en movil el script
   saca esta caja del panel para que el sticky abarque solo la fila de facetas,
   asi que el prefijo la dejaria sin estilos justo en el ancho que mas lo
   necesita. */

/* ---- caja 2: la pista ---- */
.eq-pista {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  background: var(--p-acento-suave);
  border: 1px solid color-mix(in srgb, var(--p-acento) 18%, transparent);
  border-radius: var(--p-radio);
  padding: 1rem 1.15rem;
}
.eq-pista-t { font-weight: 600; }
.eq-pista-s { font-size: .9375rem; color: var(--p-texto-2); }
.eq-pista .p-btn { padding: .7rem 1.15rem; background: var(--p-superficie); }

/* ---- caja 3: las facetas ---- */
/* Cada faceta es su propia tarjeta, no una pastilla dentro de un contenedor:
   asi el bloque se lee como parte del mismo sistema que el buscador y la
   pista, y el rotulo cabe encima del valor sin apretar. */
.eq-filtros[data-facetas="si"] .eq-facetas {
  position: relative;   /* ancla del popover */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
  margin-inline: 0;
  padding-inline: 0;
}
.eq-filtros[data-facetas="si"] .eq-faceta {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--p-borde);
  border-radius: var(--p-radio);
  background: var(--p-superficie);
  color: inherit;
  font: inherit;
  padding: .7rem .8rem;
  box-shadow: var(--p-sombra);
  transition: border-color .16s ease, background-color .16s ease;
}
.eq-filtros[data-facetas="si"] .eq-faceta:hover { border-color: var(--p-borde-fuerte); }
.eq-filtros[data-facetas="si"] .eq-faceta[aria-expanded="true"] { border-color: var(--p-acento); }
/* Activo: la tarjeta se queda blanca y quien cambia es el icono. El verde
   solido esta reservado para la pastilla de la barra de resultados, que es la
   que QUITA el filtro; dos controles con la misma forma y acciones opuestas
   era justo el hallazgo 20 de la auditoria. */
.eq-filtros[data-facetas="si"] .eq-faceta[aria-pressed="true"] {
  border-color: var(--p-acento);
  background: color-mix(in srgb, var(--p-acento-suave) 45%, var(--p-superficie));
}
.eq-faceta-i {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: var(--p-radio-chico);
  background: var(--p-acento-suave);
  color: var(--p-acento);
  transition: background-color .16s ease, color .16s ease;
}
.eq-faceta[aria-pressed="true"] .eq-faceta-i {
  background: var(--p-acento);
  color: var(--p-sobre-acento);
}
.eq-faceta-txt { flex: 1; min-width: 0; display: block; }
.eq-faceta-l {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: var(--p-texto-3);
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eq-faceta-r {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eq-faceta-v {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--p-texto-3);
  transition: transform .16s ease;
}
.eq-faceta[aria-expanded="true"] .eq-faceta-v { transform: rotate(180deg); }

@media (min-width: 720px) {
  .eq-filtros[data-facetas="si"] .eq-facetas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
  }
  .eq-filtros[data-facetas="si"] .eq-faceta { padding: .75rem .9rem; }
}
/* ---- movil: una fila que se desliza, y solo ella pegada ---- */
/* Dos filas de tarjetas costaban 129px justo antes de la lista; una cuesta 66.
   Y se pega solo la fila: hasta ahora se pegaba .eq-filtros entera, o sea el
   buscador viajaba contigo durante todo el scroll sin hacer ninguna falta.
   equipo-hoja.js saca el buscador del panel en este ancho, asi que .eq-filtros
   contiene ya solo la fila y su sticky de siempre hace justo lo que se quiere. */
@media (max-width: 719px) {
  .eq-filtros[data-facetas="si"] {
    top: 69px;                    /* alto medido de .nav */
    background: var(--p-fondo);   /* opaco: las fichas pasan por debajo */
    margin-inline: calc(var(--p-margen) * -1);
    padding: .5rem var(--p-margen);
  }
  /* El buscador ya no esta aqui dentro; el envoltorio no necesita separar nada. */
  .eq-filtros[data-facetas="si"] .eq-movil { gap: 0; margin-top: 0; }
  .eq-filtros[data-facetas="si"] .eq-facetas {
    display: flex;
    grid-template-columns: none;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    margin-inline: 0;
    padding-inline: 0;
  }
  .eq-filtros[data-facetas="si"] .eq-facetas::-webkit-scrollbar { display: none; }
  .eq-filtros[data-facetas="si"] .eq-faceta {
    flex: 0 0 auto;
    width: auto;
    max-width: 13.5rem;
    scroll-snap-align: start;
    box-shadow: none;   /* en fila apretada la sombra ensucia mas que separa */
  }
  .eq-faceta-r { max-width: 8rem; }

  /* El margen superior del buscador suelto lo pone src/styles/buscador.css. */
  /* Y la pista, al final de la lista, necesita despegarse de la ultima ficha. */
  #eq-pista { margin-top: 1.5rem; }
}

/* ============ popover de escritorio ============ */
/* Solo se pinta con data-abierta="si", y el script solo lo abre sobre 720px,
   asi que no hace falta encerrarlo en la media query. */
.eq-pop {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  min-width: 19rem;
  max-width: min(90vw, 26rem);
  max-height: 60vh;
  background: var(--p-superficie);
  border: 1px solid var(--p-borde);
  border-radius: var(--p-radio);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--p-texto) 8%, transparent),
              0 18px 40px -18px color-mix(in srgb, var(--p-texto) 35%, transparent);
}
.eq-pop[data-abierta="si"] { display: flex; }
/* Los 29 motivos en cuatro subgrupos necesitan mas ancho que tres chips. */
.eq-pop--ancho { min-width: min(90vw, 32rem); }

.eq-pop-cab {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem .65rem;
  border-bottom: 1px solid var(--p-borde);
}
.eq-pop-t {
  font-size: .8125rem;
  font-weight: 600;
  margin: 0;
  color: var(--p-texto-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.eq-pop-x {
  margin-left: auto;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--p-texto-3);
  cursor: pointer;
  padding: .2rem .1rem;
}
.eq-pop-x:hover { color: var(--p-texto); }

.eq-pop-cuerpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .9rem 1rem 1rem;
}
/* El titulo del grupo ya lo dice la cabecera del popover. */
.eq-pop-cuerpo .eq-t { display: none; }
.eq-pop-cuerpo .eq-campo { gap: .9rem; margin-top: 0; }
/* Dentro del popover el buscador ya quedo fuera del grupo de motivos, asi que
   el bloque plegado no necesita el filete que lo separaba de el. */
.eq-pop-cuerpo .eq-mas { border-top: 0; padding-top: 0; }
/* "Ver los 24 motivos / Ocultar motivos" no pinta nada dentro de un modal: el
   contenedor abre el bloque solo al entrar, y desde que los subgrupos son
   plegables el enlace ya no revela nada —lo unico que puede hacer es esconder
   los cuatro apartados de golpe. Fuera en los dos contenedores. */
.eq-pop-cuerpo .eq-enlace,
.eq-hoja-cuerpo .eq-enlace { display: none; }

/* Seleccion unica dibujada como radios, igual que en la hoja de movil: con
   chips identicos a los de motivo nada avisa que las opciones se excluyen. */
.eq-pop-cuerpo .eq-unico .eq-chips { display: flex; flex-direction: column; gap: 0; }
.eq-pop-cuerpo .eq-chip--todo,
.eq-pop-cuerpo .eq-unico .eq-chips .eq-chip {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 40px;
  border: 0;
  border-bottom: 1px solid var(--p-borde);
  border-radius: 0;
  background: none;
  color: var(--p-texto);
  text-align: left;
  padding: .2rem .1rem;
  font-size: .9375rem;
}
.eq-pop-cuerpo .eq-unico .eq-chips .eq-chip:last-child { border-bottom: 0; }
.eq-pop-cuerpo .eq-chip--todo::before,
.eq-pop-cuerpo .eq-unico .eq-chips .eq-chip::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: var(--p-radio-pill);
  border: 1.5px solid var(--p-borde-fuerte);
  box-shadow: inset 0 0 0 3px var(--p-superficie);
  background: transparent;
  transition: background-color .14s ease, border-color .14s ease;
}
.eq-pop-cuerpo .eq-chip--todo[aria-checked="true"],
.eq-pop-cuerpo .eq-unico .eq-chips .eq-chip[aria-checked="true"] { font-weight: 600; }
.eq-pop-cuerpo .eq-chip--todo[aria-checked="true"]::before,
.eq-pop-cuerpo .eq-unico .eq-chips .eq-chip[aria-checked="true"]::before {
  background: var(--p-acento);
  border-color: var(--p-acento);
}

/* ============ movil ============ */
@media (max-width: 719px) {
  /* El alto de la banda y el velo vertical los pone src/styles/hero.css. */
  .eq-seccion .p-display, .eq-intro { max-width: none; }
  /* La pista compacta: sobre el filtro sticky no puede comerse la pantalla. */
  .eq-pista { flex-direction: column; align-items: stretch; gap: .7rem; }
  .eq-pista .p-btn { width: 100%; }
}

/* ============ subgrupos de motivos, plegados ============ */
/* Los monta src/scripts/equipo-grupos.js. Cada .eq-mas-g pasa a ser una fila
   pulsable con sus chips escondidos debajo, para que abrir el filtro de motivo
   no vuelque 29 pastillas de una vez. Valen para los dos contenedores: la hoja
   de movil y el popover de escritorio se llevan estos mismos nodos. */
.eq-mas[data-acordeon="si"] { gap: .5rem; }
.eq-mas[data-acordeon="si"] .eq-mas-g {
  gap: 0;
  border: 1px solid var(--p-borde);
  border-radius: var(--p-radio-chico);
  background: var(--p-superficie);
  overflow: hidden;
}
.eq-mas[data-acordeon="si"] .eq-mas-g[data-abierto="si"] { border-color: var(--p-borde-fuerte); }

.eq-mas-b {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: 44px;
  padding: .6rem .8rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.eq-mas-b:hover { background: var(--p-superficie-2); }
/* El titulo estaba en versalitas de rotulo cuando era una cabecera muda. Ahora
   es la etiqueta de un control, y tiene que leerse como tal. */
.eq-mas-b .eq-mas-t {
  flex: 1;
  min-width: 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--p-texto);
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
}
.eq-mas-n {
  flex: none;
  min-width: 1.35rem;
  padding: 0 .35rem;
  border-radius: var(--p-radio-pill);
  background: var(--p-acento);
  color: var(--p-sobre-acento);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.35rem;
  text-align: center;
}
.eq-mas-n[hidden] { display: none; }
.eq-mas-v {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--p-texto-3);
  transition: transform .16s ease;
}
.eq-mas-b[aria-expanded="true"] .eq-mas-v { transform: rotate(180deg); }

.eq-mas[data-acordeon="si"] .eq-mas-g .eq-chips {
  padding: .15rem .8rem .8rem;
  gap: .4rem;
}
.eq-mas[data-acordeon="si"] .eq-mas-g .eq-chips[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .eq-mas-v { transition: none; }
}

/* ============ "Ver más profesionales" ============ */
/* El recorte lo marca src/scripts/equipo-paginacion.js con data-pag, y no con
   style.display, que es de quien filtra. Dos capas, dos sitios donde escribir.
   El !important defiende el recorte del display:"" que el filtro pone al
   mostrar una tarjeta: sin el, una ficha recortada reaparecería en cuanto el
   filtro la diera por buena. */
/* Descendiente y no hijo directo: el bucle de Instatic mete las tarjetas en un
   <div display:contents>, asi que no cuelgan de .eq-reja sino de ese envoltorio. */
.eq-reja [data-pag="oculto"] { display: none !important; }

.eq-mas-fichas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 1.75rem auto 0;
  padding: .8rem 1.6rem;
  border: 1px solid var(--p-borde-fuerte);
  border-radius: var(--p-radio-pill);
  background: var(--p-superficie);
  color: var(--p-texto);
  font: inherit;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
  min-height: 44px;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.eq-mas-fichas:hover {
  background: var(--p-superficie-2);
  border-color: var(--p-texto-3);
}
.eq-mas-fichas[hidden] { display: none; }
.eq-mas-fichas svg { flex: none; color: var(--p-texto-3); }

@media (prefers-reduced-motion: reduce) {
  .eq-faceta, .eq-faceta-i, .eq-faceta-v, .eq-mas-fichas { transition: none; }
}


/* src/styles/hero.css */
/* Banda de hero, compartida por la portada y /equipo.

   POR QUE AQUI
   Las dos paginas parecian de sitios distintos: /equipo abria con una foto a
   sangre y tipografia grande encima, y la portada con una reticula de dos
   columnas y una tarjeta gris a la derecha. La banda se define UNA vez, en un
   selector agrupado, y las dos la heredan. Copiarla en cada hoja habria
   repetido el problema que se acaba de limpiar con los tokens duplicados.

   Los pseudoelementos llevan la foto porque es decorativa: no debe estar en el
   arbol de accesibilidad ni empujar el layout mientras carga. Y la banda se
   limita a la franja de arriba, no a toda la seccion, que con 38 fichas o con
   la portada entera mide varias pantallas.

   Para cambiar la foto basta con --p-hero-foto. Si el archivo faltara, queda
   el degradado de marca, que es un fondo terminado y no un hueco. */

.hero,
.eq-seccion {
  --p-hero-foto: url("/uploads/PpJbhXTvS4L9rhF0x_9EC-bienestar_foto.png");
  --p-hero-alto: 34rem;
  position: relative;
  isolation: isolate;
}

.hero::before,
.eq-seccion::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--p-hero-alto);
  z-index: -2;
  background-image: var(--p-hero-foto),
    linear-gradient(120deg, var(--p-acento-suave), var(--p-superficie-2));
  background-size: cover;
  background-position: 72% center;
}

/* Velo. El titular necesita contraste contra una foto clara y de detalle alto,
   y el borde inferior tiene que fundirse con el fondo de la pagina o se veria
   el corte de la franja. */
.hero::after,
.eq-seccion::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--p-hero-alto);
  z-index: -1;
  background:
    linear-gradient(100deg,
      var(--p-fondo) 0%,
      color-mix(in srgb, var(--p-fondo) 94%, transparent) 38%,
      color-mix(in srgb, var(--p-fondo) 55%, transparent) 66%,
      color-mix(in srgb, var(--p-fondo) 12%, transparent) 100%),
    linear-gradient(180deg, transparent 62%, var(--p-fondo) 100%);
}

.hero > .p-limite,
.eq-seccion > .p-limite { position: relative; }

/* ---- portada ---- */
/* La banda es algo mas baja que en /equipo: alli el hero sostiene ademas el
   buscador, la pista y los filtros; aqui solo titular, bajada y dos botones. */
/* Sin padding-block aqui: `.hero[data-astro-cid-lcdefpme]` ya lo fija con
   0-2-0 y le ganaria a esta clase suelta. El relleno original sirve, asi que
   se deja en pie en vez de encadenar selectores para pelearlo. */
.hero { --p-hero-alto: 30rem; }

/* De dos columnas a una: la derecha la ocupaba una tarjeta gris con la
   direccion, y ahora ese lado es la foto. El dato no se pierde — sigue en la
   fila de confianza justo debajo y en la seccion de contacto.

   OJO CON LA ESPECIFICIDAD. El marcado importado desde Astro trae reglas con
   el atributo del componente: `.hero__reja[data-astro-cid-lcdefpme]` puntua
   0-2-0 y le gana a una clase suelta. Escritas como `.hero__reja { ... }`
   estas dos reglas no hacian NADA —la reticula seguia a dos columnas y la
   bajada conservaba su max-width—. Por eso van encadenadas, para puntuar
   0-3-0 sin recurrir a !important. */
.hero .p-limite.hero__reja { grid-template-columns: minmax(0, 1fr); }
.hero .hero__reja .hero__figura { display: none; }

.hero .hero__texto .p-display { max-width: 18ch; }
.hero .hero__texto .hero__bajada { max-width: 42ch; }
.hero .hero__texto .hero__botones { margin-top: 1.75rem; }

/* ---- movil ---- */
@media (max-width: 719px) {
  .hero { --p-hero-alto: 20rem; }
  .eq-seccion { --p-hero-alto: 22rem; }
  /* En vertical la foto queda detras del texto, no al lado: el velo pasa a ser
     de arriba abajo o el titular se lee sobre el respaldo del sillon. */
  .hero::after,
  .eq-seccion::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--p-fondo) 86%, transparent) 0%,
      color-mix(in srgb, var(--p-fondo) 97%, transparent) 55%,
      var(--p-fondo) 100%);
  }
  .hero .hero__texto .p-display,
  .hero .hero__texto .hero__bajada { max-width: none; }
}


/* src/styles/home-equipo.css */
/* Vista previa del equipo en la home.

   La home muestra el buscador y seis profesionales reales, y manda al
   directorio completo. No repite las 38 tarjetas ni filtra aqui: el panel es
   una puerta de entrada. Escribir y pulsar "Buscar" viaja a /equipo?q=… y alli
   el filtro lo aplica al llegar, asi el gesto no se pierde al cambiar de
   pagina.

   Las tarjetas usan `.ficha` como contenedor pero por dentro llevan el mismo
   lenguaje que /equipo (`.eq-enc`, `.eq-retrato`, `.eq-etiqueta`), armado por
   src/scripts/home-equipo.js. La diferencia deliberada es que no hay boton
   "Ver mas": el detalle vive en el directorio.

   POR QUE SE REDEFINEN AQUI `.equipo__reja` y `.ficha`: el CSS original del
   sitio las estiliza con selectores de atributo de Astro
   (`.ficha[data-astro-cid-lcdefpme]`). El marcado nuevo no lleva ese atributo,
   asi que aquellas reglas no lo alcanzan y la reja quedaba en una columna. */

.home-filtros { margin-top: 2rem; }
.home-filtros .eq-buscador { max-width: none; }

.equipo__reja {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

/* El loop mete un contenedor entre la reja y las fichas; sin esto la grilla
   ve un solo hijo y las seis se apilan en una columna. */
.equipo__reja > [data-instatic-loop] {
  display: contents;
}

.ficha {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  background: var(--p-superficie);
  border: 1px solid var(--p-borde);
  border-radius: var(--p-radio);
  padding: 1.25rem 1.35rem;
  height: 100%;
}

.ficha .eq-id { min-width: 0; }

/* Motivos en lista, no en chips: una lista deja que un item largo (ej.
   "Atencion nutricional mediante bioimpedanciometria") se envuelva en su
   propia linea sin desbordar ni estirar la ficha mas que sus vecinas. */
.eq-motivos-lista {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding-left: 1.1rem;
  font-size: .9375rem;
  color: var(--p-texto-2);
  line-height: 1.4;
}
.eq-motivos-lista li { list-style: disc; }

/* ---- pie: tarifa y prevision, sobre una linea divisoria ---- */
/* Antes la prevision iba arriba a la derecha, flotada junto al nombre. Con la
   foto real y la lista de motivos la cabecera ya tiene suficiente; tarifa y
   prevision comparten una segunda fila abajo, igual que "Ver mas" en /equipo. */
.eq-pie-home {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--p-borde);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem .75rem;
  flex-wrap: wrap;
}
.eq-tarifa-home {
  font-size: 1rem;
  font-weight: 600;
}
.eq-prev-home {
  font-size: .875rem;
  color: var(--p-texto-3);
}

.equipo__pie {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}


/* src/styles/legal.css */
/* Paginas legales (/terminos y /privacidad).

   Son marcadores de posicion a proposito: el pie enlaza los dos documentos
   desde todas las paginas, y sin ellas esos enlaces caerian en el 404 de esta
   instancia de Instatic, que devuelve JSON en crudo. Mejor una pagina que
   explica que el texto esta en camino y ofrece un canal, que un error tecnico.

   Cuando llegue el texto definitivo se sustituye el bloque .legal__aviso y la
   lista de "que cubrira" por el contenido real; la estructura ya sirve. */

.legal { max-width: 68ch; }
.legal__intro { margin-top: 1rem; }

/* El aviso es lo primero que hay que leer, asi que va en la superficie de
   marca y no como una nota al margen. */
.legal__aviso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  background: var(--p-acento-suave);
  border: 1px solid color-mix(in srgb, var(--p-acento) 18%, transparent);
  border-radius: var(--p-radio);
}
.legal__aviso-t { font-weight: 600; }
.legal__aviso-s { font-size: .9375rem; color: var(--p-texto-2); line-height: 1.55; }
.legal__aviso .p-btn { margin-top: .5rem; }

.legal__bloque { margin-top: 2.5rem; }
.legal__lista { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }
.legal__lista li {
  position: relative;
  padding-left: 1.15rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--p-texto-2);
}
.legal__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: var(--p-radio-pill);
  background: var(--p-acento);
}


/* src/styles/marca.css */
/* Logotipo del navbar.

   Antes eran dos imagenes, /marca/loto.svg y /marca/bienestar.svg, que daban
   404 en todo el sitio: el navbar salia sin marca. Ahora es una sola pieza,
   LogoHorizontal.svg, servida desde el media de Instatic (/uploads/...), que
   es donde viven de verdad los archivos.

   Se usa el horizontal y no el vertical porque el vertical es casi cuadrado
   (527 x 481) y en una barra de 68px obligaria a reducirlo hasta volverlo
   ilegible. El horizontal es 587 x 111, o sea 5,3:1, la proporcion de una barra.

   POR QUE `aspect-ratio` Y NO LOS ATRIBUTOS width/height DEL <img>:
   el motor descarta esos atributos al guardar el nodo y ademas fuerza
   loading="lazy". Un SVG sin tamano intrinseco, sin atributos y con
   `width:auto` calcula 0px de ancho; y con 0px de ancho la carga diferida
   nunca se dispara, asi que la imagen no llegaba a cargar nunca. Fijar la
   relacion de aspecto aqui rompe ese circulo: el alto manda, el ancho sale
   de la proporcion y la barra no da un salto al cargar. */

.nav__logo {
  height: 1.6rem;
  width: auto;
  aspect-ratio: 587 / 111;
  flex: none;
}

@media (min-width: 480px) {
  .nav__logo { height: 1.75rem; }
}


/* src/styles/menu-movil.css */
/* Menu movil (hallazgo 09 de la auditoria).

   `.nav__enlaces` esta en display:none hasta los 1024px y no habia hamburguesa,
   asi que bajo esa medida —todos los telefonos y los iPad en vertical— las
   cuatro secciones que explican que hace el centro eran inalcanzables: desde
   /equipo la unica salida era el logo.

   El boton y el panel los construye src/scripts/menu-movil.js clonando los
   enlaces que ya existen, sin tocar el marcado. Es a proposito: el motor
   descarta los nodos vacios del marcado, que fue lo que rompio el contador del
   boton de filtros. Las clases de aqui son nuevas, asi que no compiten con las
   reglas del Super Import ni necesitan trucos de especificidad.

   El panel cuelga de `.nav` en position:absolute, NO en sticky propio: dos
   sticky compitiendo por top:0 es exactamente el hallazgo 01. */

.nav__menu { display: none; }

@media (max-width: 1023px) {
  .nav__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--p-borde);
    border-radius: var(--p-radio-pill);
    background: none;
    color: var(--p-texto-2);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
  }
  .nav__menu:hover {
    color: var(--p-texto);
    border-color: var(--p-borde-fuerte);
    background: var(--p-superficie-2);
  }

  /* Tres barras dibujadas con la barra central y sus dos pseudo-elementos, sin
     mask-image: el saneador de CSS de Instatic borra las que usan `data:`. */
  .nav__menu-barra,
  .nav__menu-barra::before,
  .nav__menu-barra::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .18s ease, opacity .12s ease;
  }
  .nav__menu-barra { position: relative; }
  .nav__menu-barra::before,
  .nav__menu-barra::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .nav__menu-barra::before { top: -6px; }
  .nav__menu-barra::after  { top: 6px; }

  /* Abierto: la barra central desaparece y las otras dos cruzan. */
  .nav__menu[aria-expanded="true"] .nav__menu-barra { background: transparent; }
  .nav__menu[aria-expanded="true"] .nav__menu-barra::before { transform: translateY(6px) rotate(45deg); }
  .nav__menu[aria-expanded="true"] .nav__menu-barra::after  { transform: translateY(-6px) rotate(-45deg); }

  .nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    /* Opaco a proposito: `.nav` es semitransparente con backdrop-filter, y con
       ese mismo fondo el contenido de la pagina se leia bajo los enlaces. */
    background: var(--p-fondo);
    border-bottom: 1px solid var(--p-borde);
    box-shadow: 0 14px 28px -20px rgba(0, 0, 0, .5);
    padding: .25rem var(--p-margen) .75rem;
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__panel a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 .25rem;
    border-bottom: 1px solid var(--p-borde);
    color: var(--p-texto-2);
    font-size: 1.0625rem;
    text-decoration: none;
  }
  .nav__panel a:last-child { border-bottom: 0; }
  .nav__panel a:hover { color: var(--p-texto); }
  /* Misma senal de pagina activa que en el menu de escritorio (hallazgo 12),
     girada al borde izquierdo porque aqui los enlaces se apilan. */
  .nav__panel a[aria-current="page"] {
    color: var(--p-texto);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--p-acento);
    padding-left: .75rem;
  }

  /* ---- "Agendar hora" dentro del panel ---- */
  /* Bajo 720px el script mueve el CTA aqui dentro: en 375px la cabecera
     desbordaba 29px porque el logo (167) mas los tres controles (236) no caben
     en 375. Entre 720 y 1023 se queda fuera, donde si cabe y convierte mejor.

     Hacen falta estas reglas porque `.nav__panel a` puntua 0-1-1 y le gana a
     `.p-btn--principal`, que puntua 0-1-0: sin ellas el CTA aterrizaba aqui
     como un enlace mas, con el color apagado y su filete inferior. */
  .nav__panel .nav__btn--panel {
    justify-content: center;
    min-height: 48px;
    margin-top: .85rem;
    border: 0;
    border-radius: var(--p-radio-pill);
    background: var(--p-acento);
    color: var(--p-sobre-acento);
    font-weight: 600;
    font-size: 1rem;
  }
  .nav__panel .nav__btn--panel:hover {
    background: var(--p-acento-alto);
    color: var(--p-sobre-acento);
  }
}

/* Sobre 1024px el menu de escritorio ya muestra los cuatro enlaces. El
   !important es necesario porque el script abre el panel con estilo en linea,
   y una hoja sin !important no le gana. */
@media (min-width: 1024px) {
  .nav__menu,
  .nav__panel { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__menu-barra,
  .nav__menu-barra::before,
  .nav__menu-barra::after { transition: none; }
}


/* src/styles/nav-otras-paginas.css */
/* Navbar, enlace de salto y pie para las paginas distintas de la home.

   POR QUE EXISTE ESTE ARCHIVO
   El CSS que trajo el Super Import estiliza estas piezas con selectores de
   atributo de Astro: `.nav[data-astro-cid-lcdefpme]`, `.pie[...]`, etc. El
   marcado que se crea desde el editor no lleva ese atributo, asi que ninguna
   de esas reglas lo alcanza: el header quedaba estatico y transparente, el
   boton de tema con 0px de ancho y el enlace "Saltar" visible en medio de la
   pagina. Estaba en el DOM pero no se veia como una barra.

   Aqui van las mismas reglas con la clase a secas. No pisan a las de la home:
   un selector de atributo (0,2,0) gana a una clase (0,1,0), asi que donde el
   marcado antiguo tiene ambos manda el original. Los valores son copia del
   mismo CSS, de modo que ambos caminos se ven igual.

   Si algun dia se limpian los `data-astro-cid-*` del sitio, estas reglas
   pasan a ser las unicas y hay que conservarlas. */

.saltar {
  z-index: 40;
  background: var(--p-acento);
  color: var(--p-sobre-acento);
  border-radius: var(--p-radio-pill);
  padding: .75rem 1.25rem;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  position: absolute;
  top: 1rem;
  left: 1rem;
  transform: translateY(-200%);
}
.saltar:focus-visible { transform: translateY(0); }

.nav {
  z-index: 20;
  background: color-mix(in srgb, var(--p-fondo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--p-borde);
  position: sticky;
  top: 0;
}
.nav__interior {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  height: 68px;
}
@media (min-width: 1024px) { .nav__interior { gap: 1.5rem; } }

.nav__marca { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.nav__loto { width: auto; height: 1.75rem; }
.nav__palabra { width: auto; height: 1.15rem; display: none; }
@media (min-width: 480px) { .nav__palabra { display: block; } }

.nav__enlaces {
  color: var(--p-texto-2);
  gap: 1.75rem;
  font-size: .9375rem;
  display: none;
}
@media (min-width: 1024px) { .nav__enlaces { display: inline-flex; } }
.nav__enlaces a {
  padding-block: .55rem;
  text-decoration: none;
  transition: color .18s ease;
  display: inline-block;
}
.nav__enlaces a:hover { color: var(--p-texto); }

.nav__acciones { flex: none; display: flex; align-items: center; gap: .5rem; }
@media (min-width: 1024px) { .nav__acciones { gap: .75rem; } }
.nav__btn { padding: .55rem 1rem; font-size: .9375rem; }
@media (min-width: 1024px) { .nav__btn { padding: .6rem 1.15rem; } }

.tema {
  border: 1px solid var(--p-borde);
  border-radius: var(--p-radio-pill);
  width: 40px;
  height: 40px;
  color: var(--p-texto-2);
  cursor: pointer;
  background: none;
  flex: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.tema:hover {
  color: var(--p-texto);
  border-color: var(--p-borde-fuerte);
  background: var(--p-superficie-2);
}
/* El icono va como pseudo-elemento porque base.button no acepta nodos hijos,
   y con mascara —no imagen de fondo— para que herede currentColor y conserve
   el cambio en :hover. Vive en un asset de codigo porque el saneador de CSS
   de Instatic elimina `mask-image` cuando la URL es `data:`. */
.tema::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="black" d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/></svg>') center / 18px 18px no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="black" d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/></svg>') center / 18px 18px no-repeat;
}
html[data-tema="oscuro"] .tema::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="black" d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="black" d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/></svg>');
}

.pie { border-top: 1px solid var(--p-borde); padding-block: 2rem; }
.pie__interior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem 1.5rem;
}
.pie__redes {
  color: var(--p-texto-2);
  display: flex;
  gap: 1.5rem;
  font-size: .9375rem;
}
.pie__redes a { padding-block: .4rem; display: inline-block; }


/* src/styles/pie.css */
/* Pie con columnas.

   Antes eran una linea de copyright y dos redes. Ahora lleva marca, Legal y
   "¿Necesitas ayuda?" arriba, y esa misma linea de siempre abajo como base.

   Ojo al mantenerlo: el pie NO es una plantilla compartida. Este sitio no tiene
   ninguna (get_context devuelve templates: []), asi que cada pagina lleva su
   propia copia del marcado y ya habian divergido —la portada decia "© 2026
   Centro Bienestar…" y /equipo se habia quedado sin el ©—. Cualquier cambio de
   contenido hay que repetirlo en todas las paginas, o convertirlo antes en
   plantilla. */

.pie__interior {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.pie__reja {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  align-items: start;
}

.pie__marca { display: flex; flex-direction: column; gap: .8rem; }
.pie__logo { width: auto; height: 32px; }
.pie__lema {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--p-texto-2);
  max-width: 34ch;
}

.pie__col { display: flex; flex-direction: column; gap: .8rem; }
/* Es un h2 por jerarquia del documento, no por tamano: se pinta como rotulo. */
.pie__t {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.pie__lista { display: flex; flex-direction: column; gap: .6rem; }
.pie__lista a {
  font-size: .9375rem;
  color: var(--p-texto-2);
  text-decoration: none;
}
.pie__lista a:hover { color: var(--p-texto); text-decoration: underline; text-underline-offset: 3px; }

.pie__ayuda { display: inline-flex; align-items: center; gap: .55rem; }
.pie__ayuda svg { flex: none; color: var(--p-acento); }

/* La base conserva el reparto que ya tenia el pie: texto a la izquierda,
   redes a la derecha. */
.pie__base {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--p-borde);
  padding-top: 1.5rem;
}

@media (max-width: 899px) {
  .pie__reja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 539px) {
  .pie__reja { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .pie__marca { grid-column: auto; }
}

/* Objetivo tactil: los enlaces del pie median 22px de alto. */
@media (pointer: coarse) {
  .pie__lista a { min-height: 44px; display: inline-flex; align-items: center; }
  .pie__lista { gap: .2rem; }
}


/* src/styles/tema-icono.css */
/* Icono del conmutador de tema.
   base.button no acepta nodos hijos, asi que los iconos van como pseudo-elemento.
   Vive en un asset de codigo y no en la hoja del sitio porque el saneador de CSS
   de Instatic elimina `mask-image` cuando la URL es `data:`.
   Se usa mascara y no imagen de fondo para que el icono herede `currentColor`
   y conserve el cambio de color en :hover, igual que en el sitio original. */

.tema[data-astro-cid-lcdefpme]::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="black" d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/></svg>') center / 18px 18px no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="black" d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/></svg>') center / 18px 18px no-repeat;
}

html[data-tema="oscuro"] .tema[data-astro-cid-lcdefpme]::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="black" d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="black" d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/></svg>');
}