/* ═══════════════════════════════════════════════════════════════════════
   LANDING «CLÍNICA» — estilos del sitio propio de un centro de salud

   Va DESPUÉS de surfaces/salud/salud.css y usa SOLO sus tokens (colores,
   tipografía, espacio, radios): así el tema claro y el oscuro de
   docs/DESIGN_SALUD.md valen tal cual, sin un color escrito aquí.
   Móvil primero; 16 px de margen lateral en teléfonos.
   ═══════════════════════════════════════════════════════════════════════ */

.cl { min-height: 100dvh; display: flex; flex-direction: column; }
.cl .contenedor { padding: 0 16px; }
@media (min-width: 720px) { .cl .contenedor { padding: 0 20px; } }

/* ── Barra ──────────────────────────────────────────────────────────── */
.cl-marca {
  display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; text-decoration: none; color: var(--texto);
  font-family: var(--f-titulo); font-size: var(--t-h3); font-weight: 500;
}
.cl-marca .av { width: 36px; height: 36px; }
.cl-marca-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-nav { min-width: 0; }
.cl-barra-cita { display: none; }
@media (min-width: 560px) { .cl-barra-cita { display: inline-flex; } }

/* ── Portada ────────────────────────────────────────────────────────── */
.cl-hero { background: var(--fondo-alt); border-bottom: 1px solid var(--borde); padding: var(--e-7) 0; }
.cl-hero-in { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 880px) { .cl-hero-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.cl-hero .bajada { color: var(--texto-2); margin: 0 0 var(--e-4); max-width: 60ch; }
.cl-presentacion { color: var(--texto-2); max-width: 65ch; margin: var(--e-4) 0 0; }
.cl-esps { margin-top: var(--e-3); }
.cl-cta { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-5) 0 var(--e-3); }
.cl-hero-foto {
  aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--superficie-2);
  border: 1px solid var(--borde); box-shadow: var(--sombra-2); display: grid; place-items: center;
}
.cl-hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.cl-hero-foto .iniciales { font-family: var(--f-titulo); font-size: clamp(2.5rem, 2rem + 4vw, 4.5rem); color: var(--texto-2); }

/* ── Secciones ──────────────────────────────────────────────────────── */
.cl-sec { padding: var(--e-7) 0; }
.cl-sec-alt { background: var(--fondo-alt); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }

.cl-servicios, .cl-pros, .cl-politicas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
@media (min-width: 720px) { .cl-servicios, .cl-pros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .cl-servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cl-servicio {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-3);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--e-4);
  box-shadow: var(--sombra-1);
}
.cl-servicio h3 { font-size: var(--t-h3); margin: 0 0 var(--e-1); }
.cl-servicio p { margin: 0 0 var(--e-2); color: var(--texto-2); font-size: var(--t-control); }
.cl-servicio-meta { color: var(--texto); font-weight: 500; }
.cl-servicio .btn { align-self: flex-start; }

.cl-pro {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--e-3); align-items: start;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--e-4);
}
.cl-pro-foto { width: 72px; height: 72px; border-radius: var(--r-md); overflow: hidden; background: var(--superficie-2); display: grid; place-items: center; }
.cl-pro-foto img { width: 100%; height: 100%; object-fit: cover; }
.cl-pro h3 { font-size: 1rem; margin: 0 0 2px; }
.cl-pro p { margin: 0 0 var(--e-1); font-size: var(--t-control); }
.cl-pro-esp { color: var(--acento-texto); }
.cl-pro-bio { color: var(--texto-2); }

/* ── Horario ────────────────────────────────────────────────────────── */
.cl-horario { margin: 0; display: grid; gap: 0; max-width: 560px; border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); }
.cl-dia { display: flex; justify-content: space-between; gap: var(--e-4); padding: 10px var(--e-4); border-top: 1px solid var(--borde); }
.cl-dia:first-child { border-top: 0; }
.cl-dia dt { font-weight: 500; }
.cl-dia dd { margin: 0; text-align: right; color: var(--texto-2); }
.cl-cerrado dd { color: var(--texto-3); }
.cl-nota { margin-top: var(--e-3); max-width: 60ch; }

/* ── Ubicación ──────────────────────────────────────────────────────── */
.cl-ubicacion { display: grid; gap: var(--e-5); }
@media (min-width: 880px) { .cl-ubicacion { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; } }
.cl-direccion { font-size: var(--t-bajada); margin: 0 0 var(--e-1); }
.cl-contacto { margin-top: var(--e-4); }
.cl-mapa { height: 20rem; }

/* ── Políticas ──────────────────────────────────────────────────────── */
.cl-politicas li {
  background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--borde-acento);
  border-radius: var(--r-sm); padding: var(--e-3) var(--e-4); max-width: 75ch;
}

/* ── Pie: el acceso del centro, discreto ────────────────────────────── */
.cl-pie { margin-top: auto; }
.cl-pie-nombre { margin: 0 0 var(--e-3); color: var(--texto-2); }
.cl-acceso { margin: var(--e-4) 0 0; font-size: var(--t-chico); }
.cl-acceso a { color: var(--texto-3); }
.cl-acceso a:hover { color: var(--texto); }