/* ==========================================================================
   Cuida't Centre de Fisioteràpia — propuesta de rediseño
   Dirección de diseño «Servicio» · ver planta/direcciones/servicio.md
   --------------------------------------------------------------------------
   Clínica y serena. Quien busca un fisioterapeuta llega con dolor y con prisa, y
   casi siempre desde el móvil: lo que necesita —teléfono, WhatsApp, dónde está,
   qué se trata— va delante, grande y sin adorno. El color sale de su propio
   logotipo, muestreado: verde #016e1d y menta #9ad6d4.
   ========================================================================== */

/* ==========================================================================
   Base de una pieza de propuesta
   --------------------------------------------------------------------------
   Esto NO es la hoja de una pieza: es de donde arranca. `nuevo.py` la copia a
   `sitios/<slug>/estilos.css` cuando esa pieza todavía no tiene hoja, y a partir
   de ahí el fichero es de la pieza y se toca a mano —el taller no lo vuelve a
   escribir nunca—.

   Está aquí porque escribir 18 KB de CSS desde cero en cada pieza es tiempo
   tirado y, peor, hace que cada una resuelva lo mismo de forma distinta: el menú
   del móvil, el aviso de cookies, la rejilla que se apila. Lo que cambia de una
   pieza a otra es la MARCA y el TONO, y eso son las fichas de arriba.

   Tres reglas que sí son de todas:

   1. **Sin tipografías externas.** Los tipos del sistema existen en todas
      partes y no cuestan una petición. En una pieza que discute el peso de la
      web original, pedir una fuente a un tercero es contradecirse.
   2. **Sin JavaScript no se pierde nada.** El menú del móvil se despliega con
      `.sin-js` y el aviso de cookies solo aparece cuando hay JS para recordar la
      elección. La navegación no puede depender de un fichero que puede no llegar.
   3. **El foco se ve siempre.** `:focus-visible` con contraste, y el enlace de
      saltar al contenido es lo primero que recibe el tabulador.
   ========================================================================== */

:root {
  /* --- La marca. Es lo único que una pieza TIENE que cambiar ------------- */
  /* Muestreados de su logotipo: el verde del nombre y la menta de la forma. */
  --marca: #016e1d;
  --marca-fuerte: #02500f;
  --marca-clara: #4f9c6a;
  --acento: #1f7377;
  --acento-fuerte: #155558;
  --realce: #9ad6d4;

  /* --- Neutros. Casi nunca hace falta tocarlos --------------------------- */
  --tinta: #16211b;
  --gris: #55635b;
  --gris-claro: #eef4f0;
  --linea: #dce7e0;
  --papel: #fff;
  --crema: #f2f8f4;

  /* --- Tipografía y medidas --------------------------------------------- */
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ancho: 1140px;
  --radio: 3px;
  --sombra: 0 1px 2px rgba(27, 31, 38, .06), 0 8px 24px rgba(27, 31, 38, .06);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.18; margin: 0; }
p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marca); }
a:hover { color: var(--acento); }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--realce); outline-offset: 2px; }

/* Texto solo para lectores de pantalla. */
.oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

/* --- Saltar al contingut ------------------------------------------------- */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--realce); color: var(--tinta); padding: .7rem 1.1rem;
  font-weight: 600; text-decoration: none;
}
.saltar:focus { left: 0; }

/* --- Botones -------------------------------------------------------------
   Uno base y tres variantes. La pieza decide cuál usa en cada sitio; no hace
   falta inventar un botón nuevo por sección.                                   */
.boton {
  display: inline-block; padding: .78rem 1.5rem; border: 2px solid var(--marca);
  border-radius: var(--radio); background: var(--marca); color: #fff;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.boton:hover { background: var(--marca-fuerte); border-color: var(--marca-fuerte); color: #fff; }
.boton--linea { background: transparent; color: var(--marca); }
.boton--linea:hover { background: var(--marca); color: #fff; }
.boton--acento { background: var(--acento); border-color: var(--acento); }
.boton--acento:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.boton--claro { background: var(--realce); border-color: var(--realce); color: var(--tinta); }
.boton--claro:hover { background: #fff; border-color: #fff; color: var(--tinta); }
.boton--linea-clara { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.boton--linea-clara:hover { background: #fff; border-color: #fff; color: var(--marca); }

/* --- Aviso de cookies ---------------------------------------------------- */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  background: var(--marca-fuerte); color: #fff;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
}
.cookies[hidden] { display: none; }
.cookies__interior {
  display: flex; flex-wrap: wrap; gap: .8rem 1.2rem;
  align-items: center; justify-content: space-between; padding: .9rem 0;
}
.cookies__texto { margin: 0; font-size: .92rem; max-width: 62ch; }
.cookies__acciones { display: flex; gap: .5rem; flex-shrink: 0; }
.cookies .boton { padding: .5rem 1rem; font-size: .9rem; }
.cookies .boton--linea { color: #fff; border-color: rgba(255, 255, 255, .5); }
.cookies .boton--linea:hover { background: #fff; color: var(--marca-fuerte); }

/* --- Cabecera ------------------------------------------------------------ */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--linea);
  backdrop-filter: saturate(1.4) blur(6px);
}
.cabecera__interior { display: flex; align-items: center; gap: 1rem; min-height: 68px; padding: .5rem 0; }

.marca { display: flex; align-items: center; text-decoration: none; color: var(--marca); margin-right: auto; }
.marca__nombre { font-family: var(--serif); font-size: 1.32rem; letter-spacing: .01em; line-height: 1.1; }
.marca__nombre small {
  display: block; font-family: var(--sans); font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gris); font-weight: 600; margin-top: .15rem;
}

.nav__lista { display: flex; flex-wrap: wrap; gap: .2rem 1.05rem; }
.nav__enlace {
  text-decoration: none; color: var(--tinta); font-size: .93rem; font-weight: 500;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.nav__enlace:hover { color: var(--marca); border-bottom-color: var(--realce); }

/* Selector de idioma. Lleva a ESTA página en el otro idioma, no a la portada. */
.idiomas { display: flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; }
.idiomas__actual { color: var(--gris); padding: .2rem .45rem; }
.idiomas__enlace {
  text-decoration: none; color: var(--marca); padding: .2rem .45rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.idiomas__enlace:hover { border-color: var(--marca); background: var(--gris-claro); }

.menu-boton {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--linea); border-radius: var(--radio); cursor: pointer;
}
.menu-boton__barras, .menu-boton__barras::before, .menu-boton__barras::after {
  display: block; width: 20px; height: 2px; background: var(--marca);
  margin-inline: auto; content: ''; position: relative;
}
.menu-boton__barras::before { position: absolute; top: -6px; }
.menu-boton__barras::after { position: absolute; top: 6px; }

/* --- Seccions ------------------------------------------------------------ */
.seccion { padding: clamp(2.6rem, 5vw, 4.4rem) 0; }
.seccion__titulo {
  font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.5rem);
  color: var(--marca-fuerte); margin-bottom: .9rem; letter-spacing: -.01em;
}
.seccion__entradilla { font-size: 1.06rem; color: var(--gris); max-width: 68ch; margin-bottom: 2rem; }
.etiqueta {
  display: inline-block; margin: 0 0 .9rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--acento);
}
.accion { margin-top: 2rem; }
.accion .boton + .boton { margin-left: .6rem; }

.rejilla { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }

/* Ficha: el bloque pequeño y repetido. Tarjetas, servicios, sedes. */
.ficha { background: var(--crema); border-radius: var(--radio); padding: 1.3rem 1.4rem; border-left: 3px solid var(--acento); }
.ficha__titulo { font-size: 1.14rem; margin-bottom: .5rem; color: var(--marca-fuerte); }
.ficha__texto { margin: 0; font-size: .95rem; color: var(--gris); }

/* --- Pie ----------------------------------------------------------------- */
.pie { background: var(--marca-fuerte); color: rgba(255, 255, 255, .82); padding: 2.8rem 0 1.6rem; font-size: .93rem; }
.pie__rejilla { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.6rem); }
.pie__bloque strong {
  display: block; font-family: var(--serif); font-size: 1.1rem;
  color: #fff; margin-bottom: .7rem; font-weight: 400;
}
.pie__bloque p { margin: 0 0 .8rem; }
.pie a { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }
.pie a:hover { color: var(--realce); }
.pie__contacto li, .pie__legal li { margin-bottom: .45rem; }
.pie__nota {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: space-between;
  margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .82rem; color: rgba(255, 255, 255, .62);
}

/* --- Pantallas estretes -------------------------------------------------- */
@media (max-width: 1000px) {
  .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .menu-boton { display: block; }
  .nav {
    order: 3; flex-basis: 100%; display: none;
    border-top: 1px solid var(--linea); padding: .6rem 0 .9rem;
  }
  /* Sin JavaScript la lista queda a la vista: la navegación no puede depender
     de un fichero que puede no llegar. */
  .nav.abierto, .sin-js .nav { display: block; }
  .nav__lista { flex-direction: column; gap: 0; }
  .nav__enlace { display: block; padding: .6rem 0; border-bottom: 1px solid var(--linea); }
  .cabecera__interior { flex-wrap: wrap; }
}

@media (max-width: 620px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .cookies__interior { flex-direction: column; align-items: stretch; }
  .cookies__acciones { justify-content: flex-end; }
}

/* ==========================================================================
   LA PIEZA
   --------------------------------------------------------------------------
   Lo de arriba es la base, que resuelve lo que comparten todas las propuestas.
   Lo de abajo es de Cuida't y solo de Cuida't.
   ========================================================================== */

/* --- El foco -------------------------------------------------------------
   La menta del logotipo no contrasta sobre blanco, así que el foco va en el
   verde oscuro de la marca. Un foco que no se ve es un foco que no existe. */
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }

/* --- Cabecera ------------------------------------------------------------ */
.cabecera { background: rgba(255, 255, 255, .97); }
.marca__logo { width: 140px; max-width: 38vw; height: auto; }
.nav__enlace[aria-current="page"] { color: var(--marca); border-bottom-color: var(--marca); }

/* --- Portada: la cabecera de la página ----------------------------------- */
.heroe { padding: clamp(2rem, 4vw, 3.6rem) 0 clamp(2.4rem, 5vw, 4.4rem); }
.heroe__rejilla {
  display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .heroe__rejilla { grid-template-columns: 1.05fr 1fr; }
}
.heroe__titulo {
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.5rem);
  color: var(--marca-fuerte); margin-bottom: 1rem; letter-spacing: -.015em;
}
.heroe__entradilla { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--gris); max-width: 46ch; }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.heroe__figura { margin: 0; }
.heroe__foto { width: 100%; border-radius: var(--radio); }

/* --- Secciones ----------------------------------------------------------- */
.seccion--crema { background: var(--crema); }
.seccion--marca { background: var(--marca-fuerte); color: #fff; }
.seccion--marca .cita__titulo { color: #fff; }
.rejilla--centrada { align-items: center; }

/* --- La prosa ------------------------------------------------------------ */
.prosa { max-width: 68ch; }
.prosa > p { margin-bottom: 1.1rem; }
.prosa--centrada { margin-inline: auto; text-align: left; }
.prosa--centrada .seccion__titulo { max-width: 26ch; }

.apartado {
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.65rem);
  color: var(--marca-fuerte); margin: 2.6rem 0 .8rem;
}

/* --- Listas --------------------------------------------------------------
   Su web da las patologías en un párrafo corrido separado por puntos. Aquí van
   en lista, que es como se leen. */
.lista { margin: .6rem 0 1.4rem; }
.lista li {
  position: relative; padding-left: 1.5rem; margin-bottom: .5rem;
}
.lista li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--realce);
}
.lista--compacta li { margin-bottom: .35rem; }

/* --- Figuras ------------------------------------------------------------- */
.figura { margin: 2rem 0; }
.figura__foto { width: 100%; border-radius: var(--radio); }
.figura__pie { font-size: .85rem; color: var(--gris); margin-top: .6rem; }
.figura--cabecera { margin: 0; }

/* --- Destacado ----------------------------------------------------------- */
.destacado {
  background: var(--crema); border-left: 3px solid var(--realce);
  padding: 1.4rem 1.6rem; margin: 2rem 0; border-radius: var(--radio);
}
.destacado__titulo { font-size: 1.2rem; color: var(--marca-fuerte); margin-bottom: .7rem; }
.destacado p:last-child { margin-bottom: 0; }

/* --- El aviso de que un texto no está traducido -------------------------- */
.aviso-editorial {
  background: var(--gris-claro); border-left: 3px solid var(--acento);
  padding: .9rem 1.2rem; font-size: .92rem; color: var(--gris);
  border-radius: var(--radio); margin: 1.2rem 0;
}

/* --- La ficha del equipo ------------------------------------------------- */
.equipo {
  background: var(--crema); border-radius: var(--radio);
  padding: 1.6rem 1.8rem; margin: 2.6rem 0;
}
.equipo__titulo { font-size: 1.3rem; color: var(--marca-fuerte); margin-bottom: .3rem; }
.equipo__nombre { font-weight: 600; margin-bottom: .9rem; }
.equipo .lista { margin-bottom: 0; }

/* --- Tarjetas ------------------------------------------------------------ */
.tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.6rem 1.7rem;
  box-shadow: var(--sombra); display: flex; flex-direction: column;
}
.tarjeta__titulo { font-size: 1.3rem; color: var(--marca-fuerte); margin-bottom: .6rem; }
.tarjeta__texto { color: var(--gris); margin-bottom: 1.1rem; }
.tarjeta--con-foto { padding: 0; overflow: hidden; }
.tarjeta--con-foto img { width: 100%; }
.tarjeta__cuerpo { padding: 1.5rem 1.7rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta__cuerpo p:last-child { margin-top: auto; margin-bottom: 0; }
.nota-servicios { color: var(--gris); font-style: italic; margin-top: 1.4rem; }

.enlace-flecha { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--realce); }
.enlace-flecha::after { content: ' →'; }
.enlace-flecha:hover { color: var(--acento); }

/* --- La banda de pedir cita ---------------------------------------------- */
.cita {
  display: grid; gap: 1.8rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cita { grid-template-columns: 1.2fr 1fr; }
}
.cita__titulo { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); margin-bottom: .6rem; }
.cita__texto { color: rgba(255, 255, 255, .85); margin-bottom: 0; }
.cita__datos { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; }
.cita__datos li { display: flex; flex-direction: column; }
.cita__telefono { font-family: var(--serif); font-size: 1.7rem; color: #fff; text-decoration: none; }
.cita__telefono:hover { color: var(--realce); }
.cita__datos span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

/* --- Páginas interiores -------------------------------------------------- */
.pagina__cabecera { padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1.6rem, 3vw, 2.6rem); }
.pagina__presentacion { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; }
@media (min-width: 900px) {
  .pagina__presentacion { grid-template-columns: 1.1fr .9fr; }
}
.pagina__titulo {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  color: var(--marca-fuerte); margin-bottom: .8rem; letter-spacing: -.015em;
}
.pagina__entradilla { font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem); color: var(--gris); max-width: 48ch; }
.pagina__cuerpo { padding-bottom: clamp(2rem, 4vw, 3.4rem); }

.migas { font-size: .85rem; margin-bottom: 1.2rem; }
.migas__lista { display: flex; flex-wrap: wrap; gap: .3rem .6rem; color: var(--gris); }
.migas__lista li + li::before { content: '/'; margin-right: .6rem; color: var(--linea); }
.migas__lista a { color: var(--gris); }
.migas__lista a:hover { color: var(--marca); }

.servicios { margin-top: 2.4rem; }
.accion--centrada { text-align: center; }

/* --- Contacto ------------------------------------------------------------ */
.rejilla--contacto { align-items: start; padding-bottom: clamp(2rem, 4vw, 3.4rem); }
.datos-contacto__lista { margin: .4rem 0 1.6rem; }
.datos-contacto__lista li { display: flex; flex-direction: column; margin-bottom: .9rem; }
.datos-contacto__lista span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.dato-grande { font-family: var(--serif); font-size: 1.6rem; color: var(--marca); text-decoration: none; }
.dato-grande:hover { color: var(--acento); }
.datos-contacto__direccion { line-height: 1.8; }

/* --- Formulario ---------------------------------------------------------- */
.formulario { margin-top: 1.2rem; }
.campo { margin-bottom: 1rem; }
.campo label {
  display: block; font-size: .8rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gris); margin-bottom: .35rem;
}
.campo input, .campo textarea {
  width: 100%; padding: .7rem .85rem; font: inherit;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel);
}
.campo input:focus, .campo textarea:focus { border-color: var(--marca); }
.formulario__estado { min-height: 1.4em; font-size: .9rem; color: var(--gris); margin: .9rem 0 0; }
.nota { font-size: .85rem; color: var(--gris); }

/* --- El pie -------------------------------------------------------------- */
.pie__fuera {
  margin: 2rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .82rem; color: rgba(255, 255, 255, .62); max-width: 68ch;
}
.pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; }

/* --- La banda de foto ----------------------------------------------------
   Una sola imagen ancha para abrir una página. Sin marco ni sombra: la foto es
   la foto. */
.banda { margin: 0 0 clamp(1.6rem, 3vw, 2.6rem); }
.banda__foto { width: 100%; border-radius: var(--radio); }