@charset "UTF-8";
/* ==========================================================================
   JOSÉ ÁNGEL PRAENA · PODOLOGÍA AVANZADA
   Hoja de estilos única
   --------------------------------------------------------------------------
   Está ordenada de lo general a lo concreto. Si buscas algo, ve por el índice:

     01. Variables .............. colores, tipos, medidas. Toca aquí primero.
     02. Base ................... reset y estilos por defecto
     03. Disposición ............ contenedores y secciones
     04. Tipografía ............. títulos, texto, detalles
     05. Botones
     06. Cabecera y menú
     07. Portada (hero)
     08. Tarjetas
     09. Bloques de la home
     10. Formularios
     11. Reservas
     12. Pie de página
     13. Animaciones y remates

   La paleta sale de la marca del cliente: el azul #00588E es el del logotipo.
   ========================================================================== */

/* ==========================================================================
   01. VARIABLES
   Cambiando estos valores cambia toda la web de golpe.
   ========================================================================== */

:root {
  /* ---- Azul de marca ---- */
  --azul-900: #00304F;
  --azul-800: #004672;
  --azul-700: #00588E;   /* color principal, el del logotipo */
  --azul-600: #17709F;
  --azul-500: #5194A9;   /* azul verdoso secundario */
  --azul-300: #9CC6E4;
  --azul-100: #E5F1FD;   /* fondo suave */
  --azul-50:  #F3F8FD;

  /* ---- Acento cálido ---- */
  --arena-500: #E0A87B;
  --arena-400: #F4C5A2;  /* melocotón de la marca */
  --arena-100: #FDF1E7;

  /* ---- Neutros ---- */
  --tinta:      #14293A;  /* titulares */
  --texto:      #3D4B57;  /* texto corrido */
  /* Este gris estuvo en #6B7A88, que daba 4,41:1 sobre blanco y suspendía el
     mínimo de 4,5:1 que exige el nivel AA para texto normal. Se oscureció lo
     justo: ahora da 5,0:1 sobre blanco, 4,8 sobre el fondo alterno y 4,7 sobre
     el azul claro. La diferencia no se nota; el suspenso sí lo notaba quien
     tiene la vista cansada, que es media consulta. */
  --texto-tenue:#64717D;  /* apoyos y pies de foto */
  --linea:      #E1E9F0;
  --hueso:      #FAFBFC;
  --blanco:     #FFFFFF;

  /* ---- Estados ---- */
  --exito:  #1F8A5B;
  --exito-fondo: #E7F6EF;
  --alerta: #B4451F;
  --alerta-fondo: #FDEDE6;

  /* ---- Tipografía ---- */
  --tipo-titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --tipo-texto:  "Inter", "Segoe UI", system-ui, sans-serif;

  /* Escala fluida: el tamaño se adapta al ancho sin saltos bruscos. */
  --t-xs:   0.8125rem;
  --t-sm:   0.9063rem;
  --t-base: 1rem;
  --t-md:   clamp(1.0625rem, 0.4vw + 0.97rem, 1.1875rem);
  --t-lg:   clamp(1.25rem, 0.7vw + 1.1rem, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
  --t-2xl:  clamp(1.875rem, 2vw + 1.4rem, 2.75rem);
  --t-3xl:  clamp(2.25rem, 3.4vw + 1.4rem, 3.75rem);

  /* ---- Medidas ---- */
  --ancho: 1180px;
  --ancho-estrecho: 760px;
  --hueco: clamp(1.25rem, 3vw, 2rem);
  --aire-seccion: clamp(4rem, 8vw, 7.5rem);

  /* ---- Curvas y sombras ---- */
  --radio-sm: 10px;
  --radio:    18px;
  --radio-lg: 28px;
  --radio-xl: 40px;

  --sombra-sm: 0 2px 8px rgba(0, 48, 79, 0.06);
  --sombra:    0 12px 32px -12px rgba(0, 48, 79, 0.16);
  --sombra-lg: 0 28px 64px -24px rgba(0, 48, 79, 0.28);

  --transicion: 0.24s cubic-bezier(0.32, 0.72, 0.28, 1);

  --alto-cabecera: 76px;
}

/* ==========================================================================
   02. BASE
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Para que los enlaces internos no queden tapados por la cabecera fija. */
  scroll-padding-top: calc(var(--alto-cabecera) + 1.5rem);
}

body {
  font-family: var(--tipo-texto);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Envoltorio que el JS pone alrededor de los iconos sueltos, para que un SVG
   de bloque no parta en dos la línea de texto donde está metido. */
.icono { display: inline-flex; flex: none; }

/* El atributo hidden de HTML solo vale display:none, así que CUALQUIER regla
   posterior con display (por ejemplo .aviso, que es flex) lo pisa y el elemento
   se ve igualmente. Sin esta línea aparecen cajas vacías por toda la web. */
[hidden] { display: none !important; }

a { color: var(--azul-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--azul-800); }

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { padding: 0; list-style: none; }

/* Anillo de foco visible solo para quien navega con teclado. */
:focus-visible {
  outline: 3px solid var(--azul-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Oculta visualmente pero lo sigue leyendo un lector de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Enlace de salto: aparece al tabular por primera vez. */
.salto-contenido {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 999;
  padding: 0.75rem 1.5rem;
  background: var(--azul-700);
  color: var(--blanco);
  border-radius: 0 0 var(--radio-sm) var(--radio-sm);
  text-decoration: none;
  transition: transform var(--transicion);
}
.salto-contenido:focus { transform: translate(-50%, 0); color: var(--blanco); }

/* ==========================================================================
   03. DISPOSICIÓN
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--hueco);
}

.contenedor--estrecho { max-width: var(--ancho-estrecho); }

.seccion { padding-block: var(--aire-seccion); }
.seccion--compacta { padding-block: clamp(3rem, 5vw, 4.5rem); }
.seccion--clara { background: var(--azul-50); }
.seccion--hueso { background: var(--hueso); }
.seccion--arena { background: var(--arena-100); }

/* Cabecera de sección: antetítulo, título y entradilla, centrados. */
.cabecera-seccion {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.cabecera-seccion--izq { margin-inline: 0; text-align: left; }

.rejilla { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Dos columnas con texto e imagen. */
.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62em) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--texto-ancho { grid-template-columns: 1.15fr 1fr; }
  .duo--imagen-ancha { grid-template-columns: 1fr 1.15fr; }
  /* Invierte el orden visual sin tocar el orden del HTML. */
  .duo--invertido > :first-child { order: 2; }
}

/* ==========================================================================
   04. TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--tipo-titulo);
  color: var(--tinta);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 700;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

.entradilla {
  font-size: var(--t-md);
  color: var(--texto-tenue);
  line-height: 1.75;
  max-width: 42rem;
}
.cabecera-seccion .entradilla { margin-inline: auto; }
.cabecera-seccion--izq .entradilla { margin-inline: 0; }

.entradilla:not(:first-child) { margin-top: 1rem; }

/* Antetítulo en cápsula: sitúa al lector antes de leer el titular. */
.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.6rem;
  margin-bottom: 1.1rem;
  border-radius: 999px;
  background: var(--azul-100);
  color: var(--azul-800);
  font-family: var(--tipo-titulo);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.antetitulo::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--azul-600);
}
.antetitulo--arena { background: var(--arena-100); color: #8A5327; }
.antetitulo--arena::before { background: var(--arena-500); }
.antetitulo--claro { background: rgba(255, 255, 255, 0.16); color: var(--blanco); }
.antetitulo--claro::before { background: var(--arena-400); }

/* Palabra destacada del titular, con un trazo dibujado a mano debajo. */
.resalte {
  color: var(--azul-700);
  position: relative;
  white-space: nowrap;
}
.resalte::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.16em;
  height: 0.34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M3 13.5C48 6.5 104 3.2 152 4.4c47 1.2 96 5.4 145 9.6' stroke='%23F4C5A2' stroke-width='6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}

.texto-tenue { color: var(--texto-tenue); }
.texto-centrado { text-align: center; }

/* Lista con marca de verificación, para enumerar lo que incluye un servicio. */
.lista-checks { display: grid; gap: 0.7rem; }
.lista-checks li {
  position: relative;
  padding-left: 2rem;
  line-height: 1.6;
}
.lista-checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.28em;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--azul-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' stroke='%2300588E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 0.8rem;
}

/* ==========================================================================
   05. BOTONES
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--tipo-titulo);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion),
              box-shadow var(--transicion);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton svg { width: 1.15em; height: 1.15em; flex: none; }

.boton--primario {
  background: var(--azul-700);
  color: var(--blanco);
  box-shadow: 0 10px 24px -10px rgba(0, 88, 142, 0.7);
}
.boton--primario:hover {
  background: var(--azul-800);
  color: var(--blanco);
  box-shadow: 0 16px 32px -12px rgba(0, 88, 142, 0.75);
}

.boton--secundario {
  background: var(--blanco);
  color: var(--azul-800);
  border-color: var(--linea);
  box-shadow: var(--sombra-sm);
}
.boton--secundario:hover { border-color: var(--azul-300); color: var(--azul-900); }

.boton--fantasma { background: transparent; color: var(--azul-800); border-color: currentColor; }
.boton--fantasma:hover { background: var(--azul-700); color: var(--blanco); border-color: var(--azul-700); }

.boton--claro { background: var(--blanco); color: var(--azul-800); }
.boton--claro:hover { background: var(--arena-100); color: var(--azul-900); }

.boton--contorno-claro { background: transparent; color: var(--blanco); border-color: rgba(255, 255, 255, 0.5); }
.boton--contorno-claro:hover { background: rgba(255, 255, 255, 0.14); color: var(--blanco); border-color: var(--blanco); }

.boton--grande { padding: 1.15rem 2.1rem; font-size: var(--t-base); }
.boton--bloque { width: 100%; }

.boton[disabled], .boton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Enlace con flecha que se desplaza al pasar por encima. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--tipo-titulo);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--azul-700);
  text-decoration: none;
}
.enlace-flecha svg { width: 1.05em; height: 1.05em; transition: transform var(--transicion); }
.enlace-flecha:hover svg { transform: translateX(4px); }

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.cabecera-seccion .grupo-botones { justify-content: center; }

/* ==========================================================================
   06. CABECERA Y MENÚ
   ========================================================================== */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), box-shadow var(--transicion),
              background var(--transicion);
}
/* La clase la pone el JS al bajar del todo: sombra solo cuando hace falta. */
.cabecera.esta-desplazada {
  border-bottom-color: var(--linea);
  box-shadow: 0 4px 20px -12px rgba(0, 48, 79, 0.3);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--alto-cabecera);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}
.marca img { width: 40px; height: auto; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nombre {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--azul-800);
  letter-spacing: -0.01em;
}
.marca__claim {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 600;
}

.navegacion { display: flex; align-items: center; gap: 0.4rem; }

.navegacion a {
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-family: var(--tipo-titulo);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto);
  text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
}
.navegacion a:hover { background: var(--azul-50); color: var(--azul-800); }
/* aria-current lo pone cada página en su propio enlace del menú. */
.navegacion a[aria-current="page"] { color: var(--azul-800); font-weight: 600; background: var(--azul-100); }

.cabecera__acciones { display: flex; align-items: center; gap: 0.75rem; }

.telefono-cabecera {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--azul-800);
  text-decoration: none;
  white-space: nowrap;
}
.telefono-cabecera svg { width: 1.1em; height: 1.1em; }

/* Botón hamburguesa: solo se ve en pantallas estrechas. */
.boton-menu {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 12px;
  cursor: pointer;
}
.boton-menu span {
  position: relative;
  display: block;
  width: 19px; height: 2px;
  border-radius: 2px;
  background: var(--azul-800);
  transition: background var(--transicion);
}
.boton-menu span::before, .boton-menu span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px; height: 2px;
  border-radius: 2px;
  background: var(--azul-800);
  transition: transform var(--transicion), top var(--transicion);
}
.boton-menu span::before { top: -6px; }
.boton-menu span::after { top: 6px; }
/* Con el menú abierto las tres barras se convierten en una equis. */
.boton-menu[aria-expanded="true"] span { background: transparent; }
.boton-menu[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.boton-menu[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 60em) {
  .boton-menu { display: inline-flex; }
  .telefono-cabecera .telefono-cabecera__texto { display: none; }

  .navegacion {
    position: fixed;
    inset: var(--alto-cabecera) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 1rem var(--hueco) 1.75rem;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
    /* Se oculta con clip-path para que la animación no descuadre el layout. */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transicion), opacity var(--transicion), visibility var(--transicion);
  }
  .navegacion.esta-abierto { transform: translateY(0); opacity: 1; visibility: visible; }
  .navegacion a { padding: 0.9rem 1rem; font-size: var(--t-md); border-radius: var(--radio-sm); }
  .navegacion .boton { margin-top: 0.75rem; }
}

@media (min-width: 60.01em) {
  /* En escritorio el botón de reserva del menú desplegable sobra. */
  .navegacion .boton { display: none; }
}
@media (max-width: 30em) {
  .cabecera__acciones > .boton { display: none; }
}

/* ==========================================================================
   07. PORTADA (HERO)
   ========================================================================== */

.portada {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(64rem 40rem at 78% -8%, var(--azul-100) 0%, transparent 62%),
    radial-gradient(40rem 30rem at 4% 105%, var(--arena-100) 0%, transparent 60%),
    var(--blanco);
  overflow: hidden;
}

.portada__interior {
  display: grid;
  gap: clamp(3rem, 6vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62em) {
  .portada__interior { grid-template-columns: 1.02fr 0.98fr; }
}

.portada h1 { margin-bottom: 1.25rem; }
.portada .entradilla { font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem); }
.portada .grupo-botones { margin-top: 2rem; }

/* Fila de confianza bajo los botones: quién eres y a qué distancia estás. */
.portada__avales {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
}
.aval__valor {
  font-family: var(--tipo-titulo);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--azul-700);
  line-height: 1.1;
}
.aval__texto { font-size: var(--t-xs); color: var(--texto-tenue); letter-spacing: 0.01em; }

/* --- Composición de la foto --- */
.portada__medio { position: relative; }

/* Arco: recto abajo y redondeado arriba. Es la forma que le da carácter. */
.marco-arco {
  position: relative;
  border-radius: 999px 999px var(--radio-lg) var(--radio-lg);
  overflow: hidden;
  background: var(--azul-100);
  box-shadow: var(--sombra-lg);
  aspect-ratio: 4 / 4.6;
}
.marco-arco img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }

/* Círculo de color detrás de la foto, descentrado a propósito. */
.portada__mancha {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
}
.portada__mancha--arena {
  width: 42%; aspect-ratio: 1;
  right: -6%; bottom: 6%;
  background: var(--arena-400);
  opacity: 0.45;
}
.portada__mancha--azul {
  width: 34%; aspect-ratio: 1;
  left: -9%; top: 10%;
  background: var(--azul-300);
  opacity: 0.4;
}

/* Tarjetitas que flotan sobre la foto. */
.tarjeta-flotante {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta-flotante__icono {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--azul-100);
  color: var(--azul-700);
}
.tarjeta-flotante__icono svg { width: 20px; height: 20px; }
/* display:block es imprescindible: si no, el título y el pie son dos <span>
   en línea y el texto sale pegado en un churro ("Ecografía en consulta
   Diagnóstico el mismo día"). */
.tarjeta-flotante__titulo {
  display: block;
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--tinta);
  line-height: 1.25;
}
.tarjeta-flotante__pie {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  line-height: 1.35;
}

/* Colocadas a media altura y abajo: más arriba taparían la cara del retrato. */
.tarjeta-flotante--arriba { top: 38%; left: -7%; max-width: 15rem; animation: flotar 6s ease-in-out infinite; }
.tarjeta-flotante--abajo  { bottom: 7%; right: -5%; max-width: 15rem; animation: flotar 6s ease-in-out infinite 3s; }

@media (max-width: 47.99em) {
  /* En móvil las tarjetas se salen de la pantalla: se meten hacia dentro. */
  .tarjeta-flotante--arriba { left: 0; top: 4%; }
  .tarjeta-flotante--abajo { right: 0; bottom: 4%; }
  .tarjeta-flotante { padding: 0.7rem 0.9rem; }
  .tarjeta-flotante__pie { display: none; }
}

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* --- Cabecera de las páginas interiores --- */
.portada-interior {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(48rem 28rem at 82% 0%, var(--azul-100) 0%, transparent 65%),
    var(--azul-50);
  border-bottom: 1px solid var(--linea);
}
.portada-interior h1 { margin-bottom: 1rem; }

/* Migas de pan. */
.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}
.migas a { color: var(--texto-tenue); text-decoration: none; }
.migas a:hover { color: var(--azul-700); text-decoration: underline; }
.migas li + li::before { content: "›"; margin-right: 0.5rem; opacity: 0.6; }
.migas li { display: inline-flex; align-items: center; }
.migas [aria-current] { color: var(--tinta); font-weight: 600; }

/* ==========================================================================
   08. TARJETAS
   ========================================================================== */

.tarjeta {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta:hover {
  transform: translateY(-5px);
  border-color: var(--azul-300);
  box-shadow: var(--sombra);
}
.tarjeta h3 { margin-bottom: 0.6rem; font-size: var(--t-lg); }
.tarjeta p { color: var(--texto-tenue); font-size: var(--t-sm); line-height: 1.7; }
/* Empuja el enlace al fondo para que todas las tarjetas lo alineen. */
.tarjeta .enlace-flecha { margin-top: auto; padding-top: 1.35rem; }

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 1.25rem;
  border-radius: 16px;
  background: var(--azul-100);
  color: var(--azul-700);
  transition: background var(--transicion), color var(--transicion);
}
.tarjeta__icono svg { width: 27px; height: 27px; }
.tarjeta:hover .tarjeta__icono { background: var(--azul-700); color: var(--blanco); }

.tarjeta__duracion {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--arena-100);
  color: #8A5327;
  font-size: var(--t-xs);
  font-weight: 600;
  align-self: flex-start;
  /* Sin esto, "45 min" parte en dos líneas y la cápsula se deforma en un óvalo. */
  white-space: nowrap;
}
.tarjeta__duracion svg { width: 1.05em; height: 1.05em; }

/* El antetítulo también lleva icono y texto en línea, pero aquí no se fuerza
   nowrap: son etiquetas cortas y, si alguna crece, es mejor que parta de línea
   a que se salga de la pantalla en un móvil. */
.antetitulo svg { width: 1.05em; height: 1.05em; }

/* Tarjeta con foto arriba, para el listado grande de servicios. */
.tarjeta-foto {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta-foto:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.tarjeta-foto__imagen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--azul-100); }
.tarjeta-foto__imagen img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0.28, 1);
}
.tarjeta-foto:hover .tarjeta-foto__imagen img { transform: scale(1.05); }
.tarjeta-foto__cuerpo { display: flex; flex-direction: column; flex: 1; padding: clamp(1.4rem, 2.4vw, 1.85rem); }
.tarjeta-foto__cuerpo h3 { margin-bottom: 0.5rem; font-size: var(--t-lg); }
.tarjeta-foto__cuerpo p { color: var(--texto-tenue); font-size: var(--t-sm); }
.tarjeta-foto .enlace-flecha { margin-top: auto; padding-top: 1.35rem; }

/* Etiqueta sobre la foto. */
.etiqueta-foto {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  font-family: var(--tipo-titulo);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--azul-800);
}

/* ==========================================================================
   09. BLOQUES DE LA HOME
   ========================================================================== */

/* --- Franja de cifras --- */
.cifras {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  overflow: hidden;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
}
.cifra { padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem; background: var(--blanco); text-align: center; }
.cifra__valor {
  font-family: var(--tipo-titulo);
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--azul-700);
  line-height: 1;
}
.cifra__etiqueta { margin-top: 0.5rem; font-size: var(--t-sm); color: var(--texto-tenue); }

/* --- Proceso en pasos --- */
.pasos { counter-reset: paso; display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 48em) { .pasos { grid-template-columns: repeat(4, 1fr); } }

.paso { position: relative; counter-increment: paso; padding-top: 3.75rem; }
.paso::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--blanco);
  border: 1.5px solid var(--azul-300);
  color: var(--azul-700);
  font-family: var(--tipo-titulo);
  font-size: var(--t-sm);
  font-weight: 700;
}
/* Línea de puntos que une un paso con el siguiente. */
@media (min-width: 48em) {
  .paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 26px; left: 62px; right: 12px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--azul-300) 0 5px, transparent 5px 11px);
  }
}
.paso h3 { margin-bottom: 0.5rem; font-size: var(--t-md); }
.paso p { font-size: var(--t-sm); color: var(--texto-tenue); }

/* --- Testimonios --- */
.testimonio {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
}
.testimonio__estrellas { display: flex; gap: 2px; margin-bottom: 1rem; color: #E8A33D; }
.testimonio__estrellas svg { width: 17px; height: 17px; }
.testimonio blockquote { flex: 1; font-size: var(--t-sm); line-height: 1.75; color: var(--texto); }
.testimonio blockquote::before { content: "“"; color: var(--azul-300); font-size: 1.4em; line-height: 0; vertical-align: -0.15em; }
.testimonio blockquote::after { content: "”"; color: var(--azul-300); font-size: 1.4em; line-height: 0; vertical-align: -0.35em; }
.testimonio__pie { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.testimonio__inicial {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--azul-100);
  color: var(--azul-800);
  font-family: var(--tipo-titulo);
  font-weight: 700;
}
.testimonio__autor { font-family: var(--tipo-titulo); font-weight: 600; font-size: var(--t-sm); color: var(--tinta); }
.testimonio__detalle { font-size: var(--t-xs); color: var(--texto-tenue); }

/* --- Preguntas frecuentes --- */
.acordeon { display: grid; gap: 0.75rem; }
.acordeon__item {
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.acordeon__item:has([aria-expanded="true"]) { border-color: var(--azul-300); box-shadow: var(--sombra-sm); }

.acordeon__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.25rem 1.4rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--tipo-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--tinta);
}
.acordeon__boton:hover { color: var(--azul-700); }

.acordeon__signo {
  position: relative;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--azul-100);
  transition: background var(--transicion), transform var(--transicion);
}
.acordeon__signo::before, .acordeon__signo::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 2px;
  border-radius: 2px;
  background: var(--azul-700);
  transform: translate(-50%, -50%);
  transition: transform var(--transicion), background var(--transicion);
}
.acordeon__signo::after { transform: translate(-50%, -50%) rotate(90deg); }
/* Abierto: la cruz se convierte en un guion. */
[aria-expanded="true"] .acordeon__signo { background: var(--azul-700); }
[aria-expanded="true"] .acordeon__signo::before,
[aria-expanded="true"] .acordeon__signo::after { background: var(--blanco); }
[aria-expanded="true"] .acordeon__signo::after { transform: translate(-50%, -50%) rotate(0deg); }

/* La altura la anima el JS con grid-template-rows, que sí es animable. */
.acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transicion);
}
.acordeon__panel.esta-abierto { grid-template-rows: 1fr; }
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p { padding: 0 1.4rem 1.4rem; font-size: var(--t-sm); color: var(--texto-tenue); }

/* --- Franja de llamada a la acción --- */
.franja-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(2.75rem, 6vw, 4.5rem);
  border-radius: var(--radio-xl);
  background:
    radial-gradient(34rem 24rem at 88% 110%, rgba(244, 197, 162, 0.28) 0%, transparent 65%),
    linear-gradient(120deg, var(--azul-800) 0%, var(--azul-700) 55%, var(--azul-600) 100%);
  color: var(--blanco);
  text-align: center;
}
.franja-cta h2 { color: var(--blanco); margin-bottom: 1rem; }
.franja-cta p { max-width: 40rem; margin-inline: auto; color: rgba(255, 255, 255, 0.86); font-size: var(--t-md); }
.franja-cta .grupo-botones { justify-content: center; margin-top: 2rem; }
/* Anillos decorativos, muy tenues, para que el bloque no sea un rectángulo plano. */
.franja-cta::before {
  content: "";
  position: absolute;
  top: -35%; left: -8%;
  width: 24rem; aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  pointer-events: none;
}
.franja-cta::after {
  content: "";
  position: absolute;
  bottom: -55%; right: -4%;
  width: 30rem; aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

/* --- Bloque de imagen con recuadro superpuesto --- */
.imagen-marco { position: relative; }
.imagen-marco > img {
  width: 100%;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
}
.imagen-marco__nota {
  position: absolute;
  right: -1rem; bottom: -1.5rem;
  max-width: 15rem;
  padding: 1.15rem 1.35rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.imagen-marco__nota strong { display: block; font-family: var(--tipo-titulo); color: var(--azul-700); font-size: var(--t-lg); }
.imagen-marco__nota span { font-size: var(--t-xs); color: var(--texto-tenue); }
@media (max-width: 47.99em) { .imagen-marco__nota { right: 0.5rem; bottom: -1rem; max-width: 12rem; } }

/* --- Ficha de credenciales --- */
.credenciales { display: grid; gap: 1rem; }
.credencial {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.credencial__icono {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--azul-100);
  color: var(--azul-700);
}
.credencial__icono svg { width: 21px; height: 21px; }
.credencial h4 { font-size: var(--t-sm); margin-bottom: 0.15rem; }
.credencial p { font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.6; }

/* --- Bloque de información de contacto --- */
.dato-contacto {
  display: flex;
  gap: 1.1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--linea);
}
.dato-contacto:last-child { border-bottom: 0; }
.dato-contacto__icono {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--azul-100);
  color: var(--azul-700);
}
.dato-contacto__icono svg { width: 22px; height: 22px; }
.dato-contacto h3 { font-size: var(--t-sm); margin-bottom: 0.25rem; }
.dato-contacto p, .dato-contacto a { font-size: var(--t-sm); color: var(--texto-tenue); text-decoration: none; }
.dato-contacto a:hover { color: var(--azul-700); text-decoration: underline; }

.mapa {
  width: 100%;
  aspect-ratio: 16 / 11;
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  filter: saturate(0.85);
}

/* Tabla de horarios. */
.horario { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.horario__grupo + .horario__grupo { border-top: 1px solid var(--linea); }
.horario__cabecera { padding: 0.9rem 1.25rem; background: var(--azul-50); }
.horario__temporada { font-family: var(--tipo-titulo); font-weight: 600; font-size: var(--t-sm); color: var(--tinta); }
.horario__vigencia { font-size: var(--t-xs); color: var(--texto-tenue); }
.horario__fila { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.25rem; font-size: var(--t-sm); }
.horario__fila + .horario__fila { border-top: 1px dashed var(--linea); }
.horario__dias { color: var(--texto); }
.horario__horas { font-variant-numeric: tabular-nums; color: var(--azul-800); font-weight: 600; text-align: right; }
.horario__cerrado { padding: 0.85rem 1.25rem; background: var(--hueso); font-size: var(--t-xs); color: var(--texto-tenue); }

/* ==========================================================================
   10. FORMULARIOS
   ========================================================================== */

/* align-content:start es necesario cuando dos campos van lado a lado y uno lleva
   texto de ayuda debajo: sin él, las filas del campo corto se reparten el alto
   sobrante y su recuadro queda a distinta altura que el del campo de al lado. */
.campo { display: grid; gap: 0.4rem; align-content: start; }
.campo + .campo { margin-top: 1.15rem; }

.campo label {
  font-family: var(--tipo-titulo);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tinta);
}
.campo__ayuda { font-size: var(--t-xs); color: var(--texto-tenue); }
.campo__obligatorio { color: var(--alerta); }

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-sm);
  font-size: var(--t-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--azul-300); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul-600);
  box-shadow: 0 0 0 4px rgba(0, 88, 142, 0.11);
}
.campo textarea { min-height: 7rem; resize: vertical; }

.campo select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5l4 4 4-4' stroke='%2300588E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

/* Estado de error: borde rojo y mensaje debajo. */
.campo[data-error] input,
.campo[data-error] select,
.campo[data-error] textarea { border-color: var(--alerta); }
.campo__error { font-size: var(--t-xs); color: var(--alerta); font-weight: 500; }
.campo:not([data-error]) .campo__error { display: none; }

.fila-campos { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .fila-campos { grid-template-columns: 1fr 1fr; } }
.fila-campos .campo + .campo { margin-top: 0; }

/* Casilla de verificación. */
.casilla { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; }
.casilla input[type="checkbox"] {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.22rem;
  accent-color: var(--azul-700);
  cursor: pointer;
}
.casilla span { font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.6; }
.casilla a { color: var(--azul-700); }

/* Campo trampa para robots: invisible y fuera del recorrido del tabulador. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Avisos. */
.aviso {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radio-sm);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.aviso svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.15rem; }
.aviso--error { background: var(--alerta-fondo); color: var(--alerta); }
.aviso--exito { background: var(--exito-fondo); color: var(--exito); }
.aviso--info  { background: var(--azul-100); color: var(--azul-800); }

/* ==========================================================================
   11. RESERVAS
   ========================================================================== */

.reserva {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  overflow: hidden;
}

/* --- Indicador de pasos --- */
.reserva__pasos {
  display: flex;
  gap: 0.5rem;
  padding: 1.1rem clamp(1.25rem, 3vw, 2rem);
  background: var(--azul-50);
  border-bottom: 1px solid var(--linea);
  overflow-x: auto;
  scrollbar-width: none;
}
.reserva__pasos::-webkit-scrollbar { display: none; }

.paso-indicador {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  padding: 0.4rem 0.85rem 0.4rem 0.4rem;
  border-radius: 999px;
  font-family: var(--tipo-titulo);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto-tenue);
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.paso-indicador__numero {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  font-size: 0.75rem;
}
.paso-indicador[data-estado="activo"] { background: var(--azul-700); color: var(--blanco); }
.paso-indicador[data-estado="activo"] .paso-indicador__numero { background: var(--blanco); color: var(--azul-700); border-color: var(--blanco); }
.paso-indicador[data-estado="hecho"] { color: var(--azul-800); }
.paso-indicador[data-estado="hecho"] .paso-indicador__numero {
  background: var(--azul-700);
  border-color: var(--azul-700);
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.8 8.4l2.9 2.9 5.5-6' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.reserva__cuerpo { padding: clamp(1.5rem, 3.5vw, 2.5rem); }

.reserva__panel { display: none; }
.reserva__panel.esta-activo { display: block; animation: entrar-suave 0.32s cubic-bezier(0.32, 0.72, 0.28, 1); }

@keyframes entrar-suave {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reserva__titulo { font-size: var(--t-lg); margin-bottom: 0.35rem; }
.reserva__ayuda { font-size: var(--t-sm); color: var(--texto-tenue); margin-bottom: 1.6rem; }

/* --- Paso 1: elegir servicio --- */
.opciones-servicio { display: grid; gap: 0.75rem; }
@media (min-width: 44em) { .opciones-servicio { grid-template-columns: 1fr 1fr; } }

.opcion-servicio { position: relative; display: block; cursor: pointer; }
.opcion-servicio input { position: absolute; opacity: 0; pointer-events: none; }

.opcion-servicio__caja {
  display: flex;
  gap: 0.9rem;
  height: 100%;
  padding: 1.1rem 1.2rem;
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color var(--transicion), background var(--transicion), box-shadow var(--transicion);
}
.opcion-servicio:hover .opcion-servicio__caja { border-color: var(--azul-300); }
.opcion-servicio input:checked + .opcion-servicio__caja {
  border-color: var(--azul-700);
  background: var(--azul-50);
  box-shadow: 0 0 0 3px rgba(0, 88, 142, 0.1);
}
/* El foco tiene que verse también aquí, que el input real está oculto. */
.opcion-servicio input:focus-visible + .opcion-servicio__caja { outline: 3px solid var(--azul-500); outline-offset: 2px; }

.opcion-servicio__icono {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--azul-100);
  color: var(--azul-700);
}
.opcion-servicio__icono svg { width: 20px; height: 20px; }
.opcion-servicio input:checked + .opcion-servicio__caja .opcion-servicio__icono { background: var(--azul-700); color: var(--blanco); }
/* Ambos en bloque: si no, el nombre y la duración salen seguidos en la misma
   línea ("Quiropodia, hongos y papilomas 45 minutos"). */
.opcion-servicio__nombre {
  display: block;
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--tinta);
  line-height: 1.35;
}
.opcion-servicio__duracion {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

/* --- Paso 2: calendario --- */

/* Calendario y horas, uno al lado del otro en pantallas anchas.
   Además de aprovechar el espacio, esto evita que las celdas del calendario se
   estiren: son cuadradas (aspect-ratio 1), así que a todo lo ancho del asistente
   quedarían de 145 px de alto y el mes ocuparía una pantalla entera. */
.reserva__doble { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; }
@media (min-width: 60em) {
  .reserva__doble { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
  .reserva__doble .horas { margin-top: 0; }
}

.calendario { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }

.calendario__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--azul-50);
  border-bottom: 1px solid var(--linea);
}
.calendario__mes {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--tinta);
}
/* Solo la inicial en mayúscula. Con text-transform:capitalize saldría
   "Julio De 2026", porque capitaliza todas las palabras, también el "de". */
.calendario__mes::first-letter { text-transform: uppercase; }
.calendario__nav { display: flex; gap: 0.4rem; }
.calendario__flecha {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  color: var(--azul-700);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.calendario__flecha:hover:not([disabled]) { border-color: var(--azul-300); background: var(--azul-100); }
.calendario__flecha svg { width: 17px; height: 17px; }
.calendario__flecha[disabled] { opacity: 0.35; cursor: not-allowed; }

.calendario__dias-semana,
.calendario__rejilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 0.75rem;
}
.calendario__dias-semana { padding-top: 0.9rem; padding-bottom: 0.35rem; }
.calendario__dias-semana span {
  text-align: center;
  font-family: var(--tipo-titulo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.calendario__rejilla { padding-bottom: 0.9rem; }

.dia {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  background: none;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-family: var(--tipo-titulo);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.dia--vacio { visibility: hidden; }
.dia[disabled] { color: var(--linea); cursor: not-allowed; font-weight: 500; }
.dia--libre:hover { background: var(--azul-100); border-color: var(--azul-300); }
/* Puntito verde: este día tiene huecos. Se lee de un vistazo. */
.dia--libre::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--exito);
}
.dia[aria-pressed="true"] {
  background: var(--azul-700);
  border-color: var(--azul-700);
  color: var(--blanco);
}
.dia[aria-pressed="true"]::after { background: var(--blanco); }
.dia--hoy:not([aria-pressed="true"]) { border-color: var(--arena-400); }

.calendario__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--linea);
  background: var(--hueso);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}
.calendario__leyenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.punto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.punto--libre { background: var(--exito); }
.punto--hoy { background: var(--arena-400); }
.punto--lleno { background: var(--linea); }

/* --- Horas disponibles --- */
.horas { margin-top: 1.75rem; }
.horas__titulo { font-family: var(--tipo-titulo); font-weight: 700; font-size: var(--t-sm); color: var(--tinta); margin-bottom: 0.85rem; }
.horas__tramo + .horas__tramo { margin-top: 1.35rem; }
.horas__etiqueta-tramo {
  display: block;
  margin-bottom: 0.6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.horas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: 0.5rem; }

.hora {
  padding: 0.65rem 0.4rem;
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  font-family: var(--tipo-titulo);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--azul-800);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.hora:hover:not([disabled]) { border-color: var(--azul-600); background: var(--azul-50); }
.hora[aria-pressed="true"] { background: var(--azul-700); border-color: var(--azul-700); color: var(--blanco); }
/* Las horas ocupadas se muestran tachadas en vez de esconderse: así el paciente
   ve lo llena que está la agenda y entiende por qué quedan pocas opciones. */
.hora[disabled] {
  background: var(--hueso);
  border-color: var(--linea);
  color: var(--texto-tenue);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.65;
  cursor: not-allowed;
}

/* --- Resumen lateral --- */
.resumen-cita {
  padding: 1.35rem 1.5rem;
  background: var(--azul-50);
  border: 1px solid var(--azul-100);
  border-radius: var(--radio);
}
.resumen-cita h4 { font-size: var(--t-sm); margin-bottom: 1rem; }
.resumen-cita dl { display: grid; gap: 0.75rem; }
.resumen-cita div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.resumen-cita dt { font-size: var(--t-xs); color: var(--texto-tenue); flex: none; }
.resumen-cita dd { margin: 0; font-family: var(--tipo-titulo); font-size: var(--t-sm); font-weight: 600; color: var(--tinta); text-align: right; }

.reserva__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
}

/* --- Cargando --- */
.cargando { display: flex; align-items: center; gap: 0.75rem; padding: 2.5rem 0; justify-content: center; color: var(--texto-tenue); font-size: var(--t-sm); }
.girador {
  width: 22px; height: 22px;
  border: 2.5px solid var(--azul-100);
  border-top-color: var(--azul-700);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.estado-vacio { padding: 2.25rem 1.25rem; text-align: center; color: var(--texto-tenue); font-size: var(--t-sm); }
.estado-vacio strong { display: block; color: var(--tinta); font-family: var(--tipo-titulo); margin-bottom: 0.35rem; }

/* --- Confirmación --- */
.confirmacion { text-align: center; padding: 1.5rem 0; }
.confirmacion__marca {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--exito-fondo);
  color: var(--exito);
  animation: aparecer-sello 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.confirmacion__marca svg { width: 34px; height: 34px; }
@keyframes aparecer-sello {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.confirmacion h3 { margin-bottom: 0.6rem; }
.confirmacion > p { max-width: 32rem; margin-inline: auto; color: var(--texto-tenue); font-size: var(--t-sm); }

.ficha-cita {
  max-width: 26rem;
  margin: 1.75rem auto 0;
  padding: 1.5rem;
  background: var(--blanco);
  border: 1.5px dashed var(--azul-300);
  border-radius: var(--radio);
  text-align: left;
}
.ficha-cita__referencia {
  display: block;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px dashed var(--linea);
  text-align: center;
}
.ficha-cita__referencia span { display: block; font-size: var(--t-xs); color: var(--texto-tenue); letter-spacing: 0.06em; text-transform: uppercase; }
.ficha-cita__referencia strong {
  font-family: var(--tipo-titulo);
  font-size: var(--t-xl);
  color: var(--azul-700);
  letter-spacing: 0.08em;
}

/* ==========================================================================
   12. PIE DE PÁGINA
   ========================================================================== */

.pie {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--azul-900);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--t-sm);
}
.pie__rejilla {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
}
@media (min-width: 44em) { .pie__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .pie__rejilla { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }

.pie h3 {
  margin-bottom: 1.1rem;
  color: var(--blanco);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pie a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
.pie li + li { margin-top: 0.6rem; }
.pie p { line-height: 1.75; }

.pie__marca { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; }
.pie__marca img { width: 44px; filter: brightness(0) invert(1); opacity: 0.95; }
.pie__marca .marca__nombre { color: var(--blanco); }
.pie__marca .marca__claim { color: rgba(255, 255, 255, 0.6); }

.pie__redes { display: flex; gap: 0.6rem; margin-top: 1.35rem; }
.pie__redes a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: var(--blanco);
  transition: background var(--transicion), border-color var(--transicion);
}
.pie__redes a:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
.pie__redes svg { width: 19px; height: 19px; }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: var(--t-xs);
}
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pie__legal li + li { margin-top: 0; }

/* Botón flotante de WhatsApp. */
.wasap {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: var(--blanco);
  box-shadow: 0 10px 28px -8px rgba(37, 211, 102, 0.65);
  transition: transform var(--transicion);
}
.wasap:hover { transform: scale(1.07); color: var(--blanco); }
.wasap svg { width: 29px; height: 29px; }

/* ==========================================================================
   13. ANIMACIONES Y REMATES
   ========================================================================== */

/* Aparición al hacer scroll. El JS quita el atributo cuando el bloque entra
   en pantalla; si el JS no carga, el contenido se ve igual (ver más abajo). */
[data-revelar] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 0.7, 0.3, 1);
}
[data-revelar="visible"] { opacity: 1; transform: none; }

/* Sin JavaScript no hay quien quite el atributo, así que se muestra todo. */
.sin-js [data-revelar] { opacity: 1; transform: none; }

/* Respeta a quien ha pedido en su sistema que no le muevan la pantalla. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
  .tarjeta:hover, .tarjeta-foto:hover, .boton:hover { transform: none; }
}

/* Impresión: fuera todo lo que no sea el contenido. */
@media print {
  .cabecera, .pie, .wasap, .franja-cta, .reserva__pasos, .reserva__acciones { display: none !important; }
  body { color: #000; }
  .ficha-cita { border-color: #000; }
}