/* ============================================================
   bloques.css — retícula, ritmo vertical y bloques compartidos
   por todas las páginas del sitio.
   ============================================================ */

/* ── Salto al contenido (accesibilidad) ── */
.salta-al-contenido {
  position: absolute;
  left: var(--esp-2);
  top: -100px;
  z-index: 200;
  background: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--radio-pill);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: top var(--t-rapida) ease;
}

.salta-al-contenido:focus {
  top: var(--esp-2);
  color: var(--color-texto-inverso);
}

/* ── Contenedores ── */
.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding-left: var(--padding-lateral);
  padding-right: var(--padding-lateral);
}

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

/* ── Ritmo vertical: 64px en móvil, 96px en escritorio ── */
.seccion {
  padding-top: var(--ritmo);
  padding-bottom: var(--ritmo);
}

@media (min-width: 768px) {
  :root { --ritmo: 96px; }
}

/* Alternancia de fondo: dos secciones seguidas nunca se leen igual */
.seccion--suave {
  background: var(--color-superficie-alta);
}

.seccion--inversa {
  background: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
}

.seccion--inversa a:not(.boton-wa):not(.boton-primario) {
  color: var(--color-texto-inverso);
}

/* ── Cabecera de página interior ── */
.pagina-hero {
  padding-top: var(--padding-cabecera);
  background: var(--color-superficie-alta);
}

.titulo-pagina {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: clamp(2rem, 5vw, var(--txt-3xl));
  line-height: 1.1;
  margin: 0 0 var(--esp-3);
  text-wrap: balance;
}

.titulo-seccion {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: clamp(1.6rem, 4vw, var(--txt-2xl));
  line-height: 1.15;
  margin: 0 0 var(--esp-3);
  text-wrap: balance;
}

.entrada {
  font-size: var(--txt-md);
  font-weight: var(--peso-ligero);
  line-height: 1.6;
  color: var(--color-texto-secundario);
  max-width: 58ch;
  margin: 0 0 var(--esp-3);
}

/* ── Migas de pan ── */
.migas {
  margin-bottom: var(--esp-3);
}

.migas ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  padding: 0;
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--color-texto-suave);
  align-items: center;
}

.migas li {
  display: inline-flex;
  align-items: center;
}

.migas li + li::before {
  content: "›";
  margin-right: var(--esp-1);
  color: var(--color-acento-oscuro);
}

.migas a {
  color: var(--color-texto-secundario);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Cabecera de bloque con nota lateral ── */
.bloque-cabecera {
  display: grid;
  gap: var(--esp-3);
  margin-bottom: var(--esp-6);
}

@media (min-width: 900px) {
  .bloque-cabecera {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
  }
}

.bloque-cabecera-nota {
  font-size: var(--txt-base);
  color: var(--color-texto-secundario);
  margin: 0;
}

/* Sobre fondo Kombu el gris secundario se pierde */
.seccion--inversa .bloque-cabecera-nota { color: var(--color-texto-meta); }

/* ── Pasos numerados ── */
.pasos-lista {
  list-style: none;
  counter-reset: paso;
  padding: 0;
  margin: 0 0 var(--esp-6);
  display: grid;
  gap: var(--esp-4);
}

@media (min-width: 768px) {
  .pasos-lista { grid-template-columns: repeat(3, 1fr); }
  .pasos-lista--simple { grid-template-columns: repeat(2, 1fr); }
}

/* Cuando los pasos comparten fila con la ficha de valoración se
   apilan: en media pantalla, tres columnas quedan ilegibles. */
.pasos-grid {
  display: grid;
  gap: var(--esp-6);
  align-items: center;
}

@media (min-width: 960px) {
  .pasos-grid { grid-template-columns: 1fr 0.88fr; gap: var(--esp-8); }
}

@media (min-width: 768px) {
  .pasos-lista--columna { grid-template-columns: 1fr; gap: var(--esp-3); }
}

.pasos-texto { min-width: 0; }

.pasos-lista li {
  border-top: 2px solid var(--color-texto);
  padding-top: var(--esp-2);
}

.pasos-num {
  font-family: var(--font-titular);
  font-size: var(--txt-xl);
  color: var(--color-acento-oscuro);
  display: block;
}

.pasos-lista h3 {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: var(--txt-md);
  margin: var(--esp-1) 0;
}

.pasos-lista p {
  margin: 0;
  font-weight: var(--peso-ligero);
  line-height: 1.6;
  color: var(--color-texto-secundario);
}

/* ── Tabla comparativa ── */
.tabla-scroll {
  overflow-x: auto;
  margin-bottom: var(--esp-4);
}

.comparador-tabla {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  text-align: left;
}

.comparador-tabla th,
.comparador-tabla td {
  padding: var(--esp-2);
  border-bottom: 1px solid var(--velo-borde);
  vertical-align: top;
  font-weight: var(--peso-cuerpo);
}

.comparador-tabla thead th {
  font-size: var(--txt-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-acento-texto);
}

.comparador-tabla tbody th {
  font-family: var(--font-titular);
  font-size: var(--txt-base);
  width: 30%;
}

.comparador-tabla a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.comparador-intro,
.comparador-cta { max-width: 62ch; }

/* ── Listas de contenido ── */
.precio-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--esp-4);
  display: grid;
  gap: var(--esp-2);
}

.precio-lista li {
  padding-left: var(--esp-3);
  position: relative;
  line-height: 1.6;
  font-weight: var(--peso-ligero);
}

.precio-lista li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-acento-oscuro);
}

/* ── Testimonios en mensaje ──
   La home no enseña fotos de pacientes: enseña lo que escribieron.
   La tarjeta imita un mensaje recibido, con la comilla de apertura
   como marca de agua y la firma abajo, alineada a la derecha. */
.mensajes {
  list-style: none;
  padding: 0;
  margin: var(--esp-4) 0;
  display: grid;
  gap: var(--esp-2);
}

@media (min-width: 780px) {
  .mensajes { grid-template-columns: repeat(3, 1fr); gap: var(--esp-3); }
}

.mensaje {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg) var(--radio-lg) var(--radio-lg) var(--radio-sm);
  background: var(--color-superficie-alta);
}

/* La comilla de apertura, en la serif del manual */
.mensaje::before {
  content: "\201C";
  position: absolute;
  top: 2px;
  left: var(--esp-2);
  font-family: var(--font-titular);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-acento);
  opacity: 0.35;
  pointer-events: none;
}

.mensaje-texto {
  position: relative;
  margin: 0;
  flex: 1;
  font-weight: var(--peso-ligero);
  line-height: 1.7;
  color: var(--color-texto-secundario);
}

.mensaje-firma {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-1);
  margin: 0;
  padding-top: var(--esp-2);
  border-top: 1px solid var(--color-borde);
}

.mensaje-quien {
  font-size: var(--txt-sm);
  color: var(--color-texto);
}

.mensaje-que {
  font-size: var(--txt-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
}

.testimonios-teaser-entrada {
  max-width: 66ch;
  line-height: 1.7;
}


.nota-legal p {
  font-size: var(--txt-sm);
  color: var(--color-texto-secundario);
  line-height: 1.7;
  max-width: 68ch;
}

.legal p { line-height: 1.7; max-width: 68ch; }

/* ── Credenciales y listas de definición ── */
.credenciales,
.tec-lista {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-3) 0;
}

.credenciales div,
.tec-lista div {
  border-top: 1px solid var(--color-borde);
  padding-top: var(--esp-1);
}

.credenciales dt,
.tec-lista dt {
  font-size: var(--txt-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
}

.credenciales dd,
.tec-lista dd {
  margin: 4px 0 0;
  font-weight: var(--peso-ligero);
}

/* ── Fotos ── */
.foto {
  border-radius: var(--radio-2xl);
  overflow: hidden;
  background: var(--hueco-fondo);
}

.foto-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── Rejilla de equipo / dos columnas ── */
.equipo-teaser-grid {
  display: grid;
  gap: var(--esp-6);
  align-items: center;
}

@media (min-width: 900px) {
  .equipo-teaser-grid { grid-template-columns: 1fr 1.1fr; }
}

/* ── Cierre ── */
.cierre-interior { text-align: center; }
.cierre-interior p { max-width: 60ch; margin-left: auto; margin-right: auto; }

/* ── Declaración ── */
.declaracion-bloque { text-align: center; }

.declaracion-frase {
  font-family: var(--font-titular);
  font-size: clamp(1.5rem, 3.5vw, var(--txt-xl));
  line-height: 1.3;
  margin: 0 auto;
  max-width: 24ch;
  text-wrap: balance;
}

.declaracion-firma {
  font-size: var(--txt-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
  margin-top: var(--esp-2);
}

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


/* Los enlaces dentro de la tabla comparativa y de las migas también
   necesitan alcanzar el target táctil de 44px. */
.comparador-tabla a,
.migas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ── Variantes de foto ── */
.foto--ancha {
  /* Las fotos de la clínica miden 1024 de ancho. A todo lo ancho de
     un contenedor de 1200 el navegador tendría que inventarse
     píxeles, que es exactamente lo que se veía borroso. */
  max-width: 1024px;
  margin: var(--esp-3) auto;
}

.foto--ancha .foto-img { aspect-ratio: 16 / 10; }

/* Retrato: para una persona, no para una sala */
.foto--retrato .foto-img { aspect-ratio: 3 / 4; }

.foto--sucursal {
  margin: var(--esp-2) 0;
  border-radius: var(--radio-lg);
}

.foto--sucursal .foto-img { aspect-ratio: 3 / 2; }

/* ── Rejillas de imagen ──
   Sin uso desde que tecnologia.html pasó la galería de equipo a
   carrusel. Se conserva por si vuelve a hacer falta una rejilla. */
.galeria-equipos {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-3) 0 var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* ── Anticipo de aparatología (home) ──
   La sección se quedó en título + una línea + botón y se veía coja.
   Se centra el bloque y se apoya en tres fotos del equipo real: dicen
   lo que decía el párrafo que se retiró, sin volver a describirlo, y
   anticipan lo que hay detrás del botón. */
.tec-teaser .contenedor {
  text-align: center;
}

.tec-tira {
  list-style: none;
  margin: var(--esp-6) 0 var(--esp-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-2);
}

.tec-tira img {
  display: block;
  width: 100%;
  /* `height: auto` es obligatorio: los <img> llevan el height real en
     el atributo (1536px) y, con una altura explícita, el navegador
     ignora el aspect-ratio y estira la foto entera. */
  height: auto;
  /* Las fotos son verticales; recortadas a 4:5 la tira no se alarga
     y el sujeto de cada una queda dentro del encuadre. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-tarjeta);
}

/* La del medio se adelanta un poco: rompe la simetría plana y da
   profundidad sin necesidad de más texto. */
@media (min-width: 700px) {
  .tec-tira li:nth-child(2) img {
    transform: scale(1.06);
  }
}

.tec-cta {
  margin: 0;
}