/* Piel «oscuro atlético» de Fisioterapia Arenal.
   Es la única piel que invierte el fondo, así que también viste el pie
   de página (que vive fuera de la piel) con :has(). */

.piel-fisio { --fa-fondo: oklch(0.19 0.03 245); --fa-fondo-2: oklch(0.24 0.03 245);
              --fa-linea: oklch(0.30 0.03 245); --fa-claro: oklch(0.96 0.008 245);
              --fa-acento: oklch(0.78 0.09 245); --fa-texto-2: oklch(0.80 0.02 245);
              background: var(--fa-fondo); color: var(--fa-claro); }
.piel-fisio h1, .piel-fisio h2, .piel-fisio h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.025em; }
.piel-fisio a:not(.btn):not([class*="fa-btn"]) { color: var(--fa-acento); }
.piel-fisio a:not(.btn):not([class*="fa-btn"]):hover { color: oklch(0.88 0.06 245); }

body:has(.piel-fisio) { background: oklch(0.19 0.03 245); }
body:has(.piel-fisio) .pie { border-top-color: oklch(0.30 0.03 245); color: oklch(0.74 0.02 245); }
body:has(.piel-fisio) .pie a { color: oklch(0.82 0.05 245); }

.piel-fisio .fa-contenedor { width: min(1296px, 100% - 96px); margin-inline: auto; }

.fa-cabecera { border-bottom: 1px solid var(--fa-linea); }
.fa-cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 26px; }
.fa-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fa-claro) !important; }
.fa-marca svg { color: var(--fa-acento); }
.fa-marca span { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.fa-menu { display: flex; align-items: center; gap: 30px; }
.fa-menu a { font-size: 15.5px; text-decoration: none; }
.fa-tel { color: oklch(0.75 0.02 245) !important; }

.fa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none;
          font-size: 15.5px; font-weight: 600; padding: 12px 22px; border-radius: 10px; white-space: nowrap; }
.fa-btn-grande { font-size: 16.5px; padding: 16px 30px; border-radius: 12px; }
.piel-fisio .fa-btn-claro { background: var(--fa-acento); color: var(--fa-fondo); }
.piel-fisio .fa-btn-claro:hover { background: oklch(0.86 0.07 245); color: var(--fa-fondo); }
.piel-fisio .fa-btn-borde { border: 1px solid oklch(0.40 0.04 245); color: var(--fa-claro); }
.piel-fisio .fa-btn-borde:hover { border-color: var(--fa-acento); color: var(--fa-claro); }

.fa-heroe { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; padding: 80px 0 72px; align-items: center; }
.fa-heroe-texto { display: flex; flex-direction: column; gap: 28px; }
.fa-eyebrow { font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fa-acento); font-weight: 600; }
.piel-fisio h1 { font-size: clamp(38px, 4.8vw, 68px); line-height: 1.02; }
.fa-lead { font-size: 19px; line-height: 1.62; color: var(--fa-texto-2); max-width: 44ch; }
.fa-acciones { display: flex; gap: 14px; flex-wrap: wrap; }
.fa-heroe-foto { width: 100%; height: 460px; object-fit: cover; border-radius: 20px; }

.fa-claims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--fa-linea); }
.fa-claims > div { padding: 34px 40px; border-right: 1px solid var(--fa-linea); display: flex; flex-direction: column; gap: 6px; }
.fa-claims > div:last-child { border-right: 0; }
.fa-cifra { font-size: 46px; font-weight: 700; letter-spacing: -0.04em; color: var(--fa-acento); line-height: 1.1; }
.fa-claims b { font-size: 16px; font-weight: 600; }
.fa-claim-texto { font-size: 15px; color: oklch(0.72 0.02 245); }

.fa-seccion { padding-block: 76px; }
.fa-titulo { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; max-width: 24ch; margin-bottom: 40px; }

.fa-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.fa-paso { display: flex; flex-direction: column; gap: 14px; }
.fa-paso-num { display: flex; align-items: center; gap: 12px; }
.fa-paso-num span { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--fa-acento); color: var(--fa-acento);
                    display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.fa-paso-num i { height: 1px; flex-grow: 1; background: oklch(0.32 0.03 245); }
.fa-paso b { font-size: 19px; font-weight: 600; }
.fa-paso p { font-size: 15.5px; line-height: 1.6; color: oklch(0.78 0.02 245); }

.fa-servicios { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 76px; align-items: start; }
.fa-lista { display: flex; flex-direction: column; }
.fa-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 24px 0; border-top: 1px solid var(--fa-linea); }
.fa-lista .fa-linea:last-child { border-bottom: 1px solid var(--fa-linea); }
.fa-linea b { font-size: 21px; font-weight: 600; display: block; }
.fa-linea span { font-size: 15.5px; color: oklch(0.76 0.02 245); display: block; margin-top: 5px; }
.fa-linea-precio { font-size: 24px; font-weight: 700; flex-shrink: 0; }
.fa-linea-destacada .fa-linea-precio { color: var(--fa-acento); }
.fa-lado { display: flex; flex-direction: column; gap: 24px; }
.fa-lado img { width: 100%; height: 300px; object-fit: cover; border-radius: 20px; }
.fa-nota { background: var(--fa-fondo-2); border: 1px solid var(--fa-linea); border-radius: 20px; padding: 30px;
           display: flex; flex-direction: column; gap: 14px; }
.fa-nota p { font-size: 16.5px; line-height: 1.6; color: oklch(0.82 0.02 245); }

.fa-banda { border-block: 1px solid var(--fa-linea); padding-block: 72px; background: var(--fa-fondo-2); }
.fa-reserva { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.fa-reserva-texto { display: flex; flex-direction: column; gap: 24px; }
.fa-reserva-texto h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; }
.fa-ventajas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fa-ventajas li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--fa-texto-2); }
.fa-ventajas svg { flex-shrink: 0; margin-top: 2px; color: var(--fa-acento); }

.fa-equipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.fa-persona { display: flex; flex-direction: column; gap: 14px; }
.fa-persona img { width: 100%; height: 260px; object-fit: cover; border-radius: 18px; }
.fa-persona b { font-size: 18px; font-weight: 600; display: block; }
.fa-rol { font-size: 14px; color: oklch(0.72 0.02 245); display: block; margin-top: 3px; }
.fa-persona p { font-size: 15px; line-height: 1.6; color: var(--fa-texto-2); margin-top: 10px; }

.fa-claro { background: var(--fa-claro); color: oklch(0.22 0.03 245); padding-block: 64px; }
.fa-testimonios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.fa-testimonios blockquote { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.fa-testimonios p { font-family: var(--serif); font-size: 20px; line-height: 1.5; }
.fa-testimonios cite { font-size: 14.5px; color: oklch(0.48 0.02 245); font-style: normal; }

.fa-preguntas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.fa-faq { padding: 20px 0; border-top: 1px solid var(--fa-linea); }
.fa-faq b { font-size: 17px; font-weight: 600; display: block; }
.fa-faq p { font-size: 15.5px; line-height: 1.6; color: var(--fa-texto-2); margin-top: 6px; }
.fa-lateral { display: flex; flex-direction: column; gap: 22px; }
.fa-mapa { width: 100%; height: 260px; object-fit: cover; border-radius: 20px; }
.fa-horario { background: var(--fa-fondo-2); border: 1px solid var(--fa-linea); border-radius: 20px; padding: 26px;
              display: flex; flex-direction: column; gap: 12px; }
.fa-horario > div { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; border-top: 1px solid var(--fa-linea); font-size: 15.5px; }
.fa-horario > div span { color: oklch(0.76 0.02 245); }

.fa-cierre { border-top: 1px solid var(--fa-linea); padding-block: 56px; }
.fa-cierre-fila { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.fa-cierre b { font-size: 17px; font-weight: 600; display: block; }
.fa-cierre span { font-size: 15.5px; color: oklch(0.74 0.02 245); display: block; margin-top: 8px; }

/* El widget compartido, vestido de oscuro. */
.piel-fisio .widget { background: var(--fa-fondo); border-color: var(--fa-linea); box-shadow: none; }
.piel-fisio .widget-cabecera small, .piel-fisio .widget-etiqueta, .piel-fisio .nota-privacidad { color: oklch(0.72 0.02 245); }
.piel-fisio .widget .dia, .piel-fisio .widget .hora { background: var(--fa-fondo-2); border-color: var(--fa-linea); color: var(--fa-claro); }
.piel-fisio .widget .dia[aria-pressed="true"] { background: var(--fa-acento); border-color: var(--fa-acento); color: var(--fa-fondo); }
.piel-fisio .widget .hora[aria-pressed="true"] { background: var(--fa-acento); border-color: var(--fa-acento); color: var(--fa-fondo); }
.piel-fisio .widget .btn-primario { background: var(--fa-acento); color: var(--fa-fondo); }
.piel-fisio .widget .btn-fantasma { background: transparent; border-color: var(--fa-linea); color: var(--fa-claro); }
.piel-fisio .widget p { color: var(--fa-texto-2); }

@media (max-width: 1080px) {
  .fa-equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .fa-testimonios { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 980px) {
  .piel-fisio .fa-contenedor { width: min(1296px, 100% - 40px); }
  .fa-heroe, .fa-servicios, .fa-reserva, .fa-preguntas { grid-template-columns: 1fr; gap: 40px; }
  .fa-claims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa-claims > div:nth-child(2n) { border-right: 0; }
  .fa-oculta { display: none; }
}
@media (max-width: 700px) {
  .fa-heroe { padding-top: 44px; }
  .fa-seccion { padding-block: 52px; }
  .fa-claims, .fa-equipo, .fa-pasos { grid-template-columns: 1fr; }
  .fa-claims > div { border-right: 0; }
  .fa-linea { flex-direction: column; gap: 8px; }
}

@media (max-width: 700px) {
  .fa-cabecera-fila { flex-wrap: wrap; gap: 12px; }
  .fa-marca span { font-size: 20px; }
  .fa-menu { gap: 16px; }
  .fa-btn { padding: 11px 18px; font-size: 15px; }
  .fa-btn-grande { font-size: 15.5px; padding: 14px 22px; }
  .fa-acciones .fa-btn { flex: 1 1 100%; }
  .fa-heroe-foto { height: 300px; }
  .fa-cierre-fila { align-items: flex-start; }
  .fa-cierre-fila .fa-btn { width: 100%; }
}

/* Cabecera de las páginas de sección */
.fa-pagina-cabeza { display: flex; flex-direction: column; gap: 16px; padding: 56px 0 8px; }
.fa-migas { font-size: 14.5px; font-weight: 600; text-decoration: none; }
.fa-pagina-cabeza h1 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.04; }
.fa-pagina-entradilla { font-size: 18.5px; line-height: 1.6; color: var(--fa-texto-2); max-width: 56ch; }
.fa-menu a[aria-current="page"] { color: var(--fa-acento); text-decoration: underline; text-underline-offset: 5px; }