/* ============================================================
   Clínica Pucalán — Salud y Estética Integral
   Hoja de estilos única. Todas las variables de marca están
   declaradas en :root para poder ajustarlas en un solo lugar.
   ============================================================ */

:root {
  /* --- Color: navy + azul clínico sobre blanco azulado --- */
  --gris-900: #0c2352;   /* Navy de marca: titulares, pie de página */
  --gris-800: #16305f;   /* Navy algo más claro */
  --gris-700: #33456b;   /* Texto principal */
  --gris-500: #55647a;   /* Texto secundario y descriptivo */
  --gris-400: #8a97ab;
  --gris-300: #c3ceda;   /* Bordes marcados */
  --gris-200: #dee6ec;   /* Bordes limpios */
  --gris-100: #eff4f8;
  --crema:    #f8fafd;   /* Fondo suave blanco-azulado */
  --blanco:   #ffffff;

  /* Azul primario: botones, enlaces y destaques */
  --azul-clinico:  #297cef;
  --azul-oscuro:   #1c62c7;
  --azul-suave:    #e8f1fe;

  /* Cian pálido de apoyo: chips e insignias */
  --cian-suave:    #d2eef0;
  --cian-oscuro:   #146b73;

  /* Acentos en cascada */
  --acento:        #1c62c7; /* Azul con contraste suficiente para texto */
  --acento-oscuro: #16509f;
  --acento-suave:  #e8f1fe;
  --acento-medio:  #297cef; /* Azul primario, para fondos y bordes */

  /* --- Tipografía ------------------------------------------ */
  --fuente-titulo:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fuente-subtitulo: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fuente-texto:     "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fuente-mono:      "DM Mono", "Courier New", monospace;

  --t-xs:   0.78rem;
  --t-sm:   0.88rem;
  --t-base: 1rem;
  --t-md:   1.075rem;
  --t-lg:   1.35rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.3rem;
  --t-3xl:  3.4rem;

  /* --- Medidas --------------------------------------------- */
  --ancho-max:     1180px;
  --ancho-texto:   68ch;
  --radio:         12px;
  --radio-lg:      20px;
  --radio-pastilla: 999px;
  --espacio-seccion: 5.5rem;
  --sombra-suave:  0 1px 2px rgba(12,35,82,.03), 0 4px 12px rgba(12,35,82,.04);
  --sombra:        0 1px 2px rgba(12,35,82,.04), 0 8px 24px rgba(12,35,82,.06);
  --sombra-fuerte: 0 2px 4px rgba(12,35,82,.06), 0 18px 48px rgba(12,35,82,.12);
  --transicion:    180ms ease;
  --alto-header:   84px;
  --alto-barra:    38px;   /* barra superior de utilidades */
}

/* --- Reset acotado ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.68;
  color: var(--gris-700);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.15rem; }
figure { margin: 0; }

h1, h2, h3, h4 {
  color: var(--gris-900);
  line-height: 1.18;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}
h1 { font-family: var(--fuente-titulo); font-size: var(--t-3xl); font-weight: 800; }
h2 { font-family: var(--fuente-subtitulo); font-size: var(--t-2xl); font-weight: 700; }
h3 { font-family: var(--fuente-subtitulo); font-size: var(--t-lg); font-weight: 700; }
h4 { font-size: var(--t-md); font-family: var(--fuente-texto); font-weight: 600; }
p  { margin: 0 0 1.1em; }

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

/* --- Utilidades -------------------------------------------- */
.contenedor { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 0 1.25rem; }
.contenedor-angosto { max-width: 780px; }
.seccion { padding: var(--espacio-seccion) 0; }
.seccion--crema { background: var(--crema); }
.seccion--gris { background: var(--gris-100); }
.centrado { text-align: center; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar-al-contenido {
  position: absolute; left: 1rem; top: -60px; z-index: 200;
  background: var(--gris-900); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--radio); transition: top var(--transicion);
}
.saltar-al-contenido:focus { top: 1rem; }

.antetitulo {
  font-family: var(--fuente-texto);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento);
  font-weight: 600;
  margin: 0 0 .9rem;
}
.entradilla {
  font-size: var(--t-md);
  color: var(--gris-500);
  max-width: var(--ancho-texto);
}
.centrado .entradilla { margin-left: auto; margin-right: auto; }

/* Marcador de dato pendiente de confirmar por la clínica */
.pendiente {
  background: #fff6e0;
  border: 1px dashed #c9a227;
  color: #6a5310;
  padding: 0 .35em;
  border-radius: 2px;
  font-size: .95em;
  font-style: normal;
}

/* --- Botones ------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--fuente-texto);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .03em;
  padding: .82rem 1.5rem;
  border-radius: var(--radio-pastilla);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
/* Se usa el azul profundo, no el primario: sobre el primario el texto blanco
   queda en 4.02:1 y no alcanza el 4.5:1 que pide WCAG AA para texto normal. */
.boton--principal { background: var(--azul-oscuro); color: #fff; }
.boton--principal:hover { background: var(--acento-oscuro); color: #fff; }
.boton--secundario { background: #fff; color: var(--gris-900); border-color: var(--gris-200); }
.boton--secundario:hover { background: var(--gris-100); border-color: var(--gris-300); }
.boton--oscuro { background: var(--gris-800); color: #fff; }
.boton--oscuro:hover { background: var(--gris-900); color: #fff; }
.boton--claro { background: #fff; color: var(--gris-900); }
.boton--claro:hover { background: var(--gris-100); }
.boton--grande { font-size: var(--t-base); padding: 1.05rem 2rem; }
.boton--ancho { width: 100%; justify-content: center; }
.boton svg { width: 1.05em; height: 1.05em; flex: none; }

.grupo-botones { display: flex; flex-wrap: wrap; gap: .8rem; }
.centrado .grupo-botones { justify-content: center; }

/* --- Carrusel horizontal de áreas --------------------------- */
.areas-zona { position: relative; }
.areas-carril {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* El padding evita que la sombra y el foco se recorten en los extremos */
  padding: .4rem .3rem 1.4rem;
  margin: -.4rem -.3rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gris-300) transparent;
  overscroll-behavior-x: contain;
}
.areas-carril::-webkit-scrollbar { height: 6px; }
.areas-carril::-webkit-scrollbar-track { background: transparent; }
.areas-carril::-webkit-scrollbar-thumb {
  background: var(--gris-300); border-radius: 999px;
}
.areas-carril:focus-visible { outline: 2px solid var(--azul-clinico); outline-offset: 4px; }

/* Ancho fijo: se ven ~3 tarjetas y la siguiente asoma, que es la pista visual
   de que el carril continúa. */
.areas-carril > .area {
  flex: 0 0 clamp(258px, 31%, 340px);
  scroll-snap-align: start;
}

.areas-flecha {
  position: absolute; top: 38%; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--gris-200);
  color: var(--gris-900);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}
.areas-flecha:hover { background: var(--gris-100); border-color: var(--gris-300); }
.areas-flecha svg { width: 20px; height: 20px; }
.areas-flecha--anterior { left: -14px; }
.areas-flecha--siguiente { right: -14px; }
.areas-flecha[hidden] { display: none; }

@media (max-width: 620px) {
  .areas-carril { gap: 1rem; }
  .areas-carril > .area { flex: 0 0 84%; }
  .areas-flecha { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .areas-carril { scroll-behavior: auto; }
}

/* --- Accesos rápidos bajo el héroe -------------------------- */
.seccion--accesos { padding: 3.2rem 0 1.4rem; }
.acceso {
  display: flex; flex-direction: column; align-items: flex-start;
  height: 100%;
  padding: 1.6rem 1.5rem;
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-lg);
  text-decoration: none !important;
  transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.acceso:hover {
  border-color: var(--azul-clinico);
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}
.acceso__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 16px;
  background: var(--azul-suave);
  color: var(--azul-oscuro);
  margin-bottom: 1.1rem;
}
.acceso__icono svg { width: 24px; height: 24px; }
.acceso h3 {
  font-size: var(--t-md); font-weight: 700;
  color: var(--gris-900);
  margin: 0 0 .35rem;
}
.acceso p {
  font-size: var(--t-sm); color: var(--gris-500);
  margin: 0;
}
@media (max-width: 620px) {
  .seccion--accesos { padding-top: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .acceso:hover { transform: none; }
}

/* --- Chips de confianza del héroe --------------------------- */
.chips-confianza {
  display: flex; flex-wrap: wrap; gap: .6rem;
  list-style: none; margin: 0 0 1.6rem; padding: 0;
}
.chips-confianza li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  border-radius: var(--radio-pastilla);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 500;
}
.chips-confianza svg { width: 15px; height: 15px; flex: none; }

/* --- Lanzador de reserva superpuesto al héroe --------------- */
.reserva-lanzador-zona {
  position: relative; z-index: 5;
  margin-top: -3.6rem;
  margin-bottom: 1.4rem;
}
.reserva-lanzador {
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-fuerte);
  padding: 1.5rem 1.6rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.6rem; flex-wrap: wrap;
}
.reserva-lanzador__intro { display: flex; align-items: center; gap: .95rem; }
.reserva-lanzador__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 13px;
  background: var(--azul-suave);
  color: var(--azul-oscuro);
}
.reserva-lanzador__icono svg { width: 23px; height: 23px; }
.reserva-lanzador__titulo {
  font-size: var(--t-md); margin: 0 0 .15rem;
  font-family: var(--fuente-titulo); font-weight: 700;
}
.reserva-lanzador__bajada { margin: 0; font-size: var(--t-sm); color: var(--gris-500); }
.reserva-lanzador__campos {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.reserva-lanzador__campos select {
  min-width: 220px;
  padding: .82rem 1rem;
  font-family: var(--fuente-texto); font-size: var(--t-sm);
  color: var(--gris-900);
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-pastilla);
}
.reserva-lanzador__campos select:focus-visible {
  outline: 2px solid var(--azul-clinico); outline-offset: 2px;
}
@media (max-width: 820px) {
  .reserva-lanzador-zona { margin-top: -2.2rem; }
  .reserva-lanzador { padding: 1.3rem; }
  .reserva-lanzador__campos { width: 100%; }
  .reserva-lanzador__campos select,
  .reserva-lanzador__campos .boton { width: 100%; justify-content: center; }
}

/* --- Barra superior de utilidades --------------------------- */
.barra-utilidades {
  background: var(--gris-900);
  color: rgba(255,255,255,.82);
  font-size: var(--t-xs);
}
.barra-utilidades__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem; min-height: var(--alto-barra);
}
.barra-utilidades__datos {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem;
  list-style: none; margin: 0; padding: 0;
}
.barra-utilidades li,
.barra-utilidades__social { display: inline-flex; align-items: center; gap: .45rem; }
.barra-utilidades svg { width: 14px; height: 14px; flex: none; opacity: .75; }
.barra-utilidades a { color: #fff; text-decoration: none; }
.barra-utilidades a:hover { text-decoration: underline; }
/* Se cualifica con `li` porque `.barra-utilidades li` (0,1,1) tiene más
   especificidad que la clase sola y ganaba con su `display: inline-flex`. */
@media (max-width: 980px) {
  .barra-utilidades li.barra-utilidades__direccion { display: none; }
}
@media (max-width: 720px) {
  .barra-utilidades__social span { display: none; }
  .barra-utilidades__fila { gap: .8rem; }
  .barra-utilidades__datos { gap: .9rem; }
}
/* En móvil la barra debe ser una sola línea: con el horario se envolvía en tres
   y se comía casi 90px de pantalla antes del héroe. */
@media (max-width: 560px) {
  .barra-utilidades li.barra-utilidades__horario { display: none; }
  .barra-utilidades { font-size: .74rem; }
}

/* --- Encabezado --------------------------------------------- */
/* El encabezado fijo taparía el destino de los enlaces con ancla (#nutricion,
   #psicologia), así que se reserva su alto al saltar. */
[id] { scroll-margin-top: calc(var(--alto-header) + 1.5rem); }

.encabezado {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--gris-200);
}
.encabezado__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: var(--alto-header);
}
.marca { display: flex; align-items: center; }
.marca img { height: 56px; width: auto; }
.marca:hover { text-decoration: none; }

.nav__lista {
  display: flex; align-items: center; gap: .35rem;
  list-style: none; margin: 0; padding: 0;
}
.nav__enlace {
  display: block;
  padding: .55rem .8rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--gris-700);
  border-radius: var(--radio);
  transition: color var(--transicion), background var(--transicion);
}
.nav__enlace:hover { color: var(--gris-900); background: var(--gris-100); text-decoration: none; }
.nav__enlace[aria-current="page"] { color: var(--acento-oscuro); font-weight: 600; }
.nav__lista .boton { margin-left: .5rem; }

.menu-boton {
  display: none;
  background: none; border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: .5rem .7rem; cursor: pointer;
  color: var(--gris-700);
}
.menu-boton svg { width: 22px; height: 22px; display: block; }

@media (max-width: 900px) {
  .menu-boton { display: block; }
  .nav {
    position: fixed; inset: var(--alto-header) 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--gris-200);
    box-shadow: var(--sombra);
    max-height: calc(100vh - var(--alto-header));
    overflow-y: auto;
    display: none;
  }
  .nav.abierto { display: block; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; padding: .6rem 1.25rem 1.4rem; }
  .nav__enlace { padding: .85rem .2rem; border-bottom: 1px solid var(--gris-100); font-size: var(--t-base); }
  .nav__lista .boton { margin: .9rem 0 0; justify-content: center; }
}

/* --- Portadas / héroes -------------------------------------- */
.hero {
  position: relative;
  min-height: 560px;
  display: flex; align-items: flex-end;
  color: #fff;
  background: var(--gris-800);
  overflow: hidden;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(25,25,25,.86) 0%, rgba(25,25,25,.55) 45%, rgba(25,25,25,.25) 100%);
}
.hero__contenido { position: relative; z-index: 2; padding: 3.5rem 0 4rem; max-width: 680px; }
.hero h1 { color: #fff; margin-bottom: .5rem; }
.hero__bajada {
  font-family: var(--fuente-subtitulo);
  font-size: var(--t-lg);
  color: rgba(255,255,255,.9);
  margin-bottom: 1.6rem;
}
.hero .antetitulo { color: rgba(255,255,255,.82); }

.portada {
  background: var(--crema);
  border-bottom: 1px solid var(--gris-200);
  padding: 3.6rem 0 3.2rem;
}
.portada h1 { margin-bottom: .45rem; }
.portada--imagen { position: relative; background: var(--gris-800); border: 0; padding: 0; }
.portada--imagen .portada__caja { position: relative; z-index: 2; padding: 4.5rem 0 3.6rem; color: #fff; }
.portada--imagen h1 { color: #fff; }
.portada--imagen .entradilla { color: rgba(255,255,255,.88); }
.portada--imagen .antetitulo { color: rgba(255,255,255,.8); }
.portada--imagen img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.portada--imagen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(25,25,25,.88) 0%, rgba(25,25,25,.62) 60%, rgba(25,25,25,.42) 100%);
}

/* --- Migas de pan ------------------------------------------- */
.migas { font-size: var(--t-xs); color: var(--gris-500); padding: 1rem 0 0; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.migas li::after { content: "›"; margin-left: .4rem; color: var(--gris-400); }
.migas li:last-child::after { content: ""; }
.migas a { color: var(--gris-500); }

/* --- Rejillas ----------------------------------------------- */
.rejilla { display: grid; gap: 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); }
@media (max-width: 900px) {
  .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
}

.encabezado-seccion { max-width: var(--ancho-texto); margin-bottom: 2.6rem; }
.encabezado-seccion.centrado { margin-left: auto; margin-right: auto; }

/* --- Tarjetas ----------------------------------------------- */
.tarjeta {
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta:hover { border-color: var(--gris-300); box-shadow: var(--sombra); transform: translateY(-2px); }
.tarjeta__figura { margin: 0; background: var(--gris-100); }
.tarjeta__figura img { width: 100%; height: 220px; object-fit: cover; }
.tarjeta__cuerpo { padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta__cuerpo h3 { margin-bottom: .45rem; }
.tarjeta__cuerpo h3 a { color: var(--gris-900); text-decoration: none; }
.tarjeta__cuerpo h3 a:hover { color: var(--acento-oscuro); }
.tarjeta__cuerpo p { color: var(--gris-500); font-size: var(--t-sm); }
.tarjeta__pie { margin-top: auto; padding-top: 1rem; }
.tarjeta__enlace {
  font-size: var(--t-sm); font-weight: 600; color: var(--acento-oscuro);
  display: inline-flex; align-items: center; gap: .35rem;
}
.tarjeta__enlace::after { content: "→"; transition: transform var(--transicion); }
.tarjeta:hover .tarjeta__enlace::after { transform: translateX(3px); }

/* Tarjeta de área en portada */
.area {
  background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.area img { width: 100%; height: 240px; object-fit: cover; }
.area__cuerpo { padding: 1.6rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.area__lista { list-style: none; padding: 0; margin: 0 0 1.2rem; font-size: var(--t-sm); color: var(--gris-500); }
.area__lista li { padding: .28rem 0 .28rem 1.1rem; position: relative; }
.area__lista li::before {
  content: ""; position: absolute; left: 0; top: .85em;
  width: 5px; height: 1px; background: var(--acento);
}
.area .tarjeta__pie { margin-top: auto; padding-top: 0; }

/* --- Lista de servicios ------------------------------------- */
.servicio {
  border-top: 1px solid var(--gris-200);
  padding: 1.9rem 0;
  display: grid; grid-template-columns: 1fr auto; gap: 1.2rem 2rem;
  align-items: start;
}
.servicio:last-child { border-bottom: 1px solid var(--gris-200); }
.servicio h3 { margin-bottom: .3rem; }
.servicio p { margin: 0; color: var(--gris-500); font-size: var(--t-sm); max-width: 60ch; }
.servicio__tecnico { color: var(--gris-400); font-style: italic; }
.servicio__accion { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }
.servicio__valor { font-size: var(--t-xs); color: var(--gris-400); white-space: nowrap; }
@media (max-width: 720px) {
  .servicio { grid-template-columns: 1fr; }
  .servicio__accion { align-items: flex-start; }
}

/* --- Avisos y notas ----------------------------------------- */
.nota {
  background: var(--acento-suave);
  border-left: 3px solid var(--acento);
  padding: 1.2rem 1.4rem;
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: var(--t-sm);
  color: var(--gris-700);
}
.nota p:last-child { margin-bottom: 0; }
.nota strong { color: var(--gris-900); }

/* Respaldo visible cuando el widget externo de reseñas no carga */
.resenas-respaldo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  text-align: center;
}
.resenas-respaldo[hidden] { display: none; }
.resenas-respaldo__texto {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--gris-700);
}

.aviso-legal {
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 1.1rem 1.3rem;
  font-size: var(--t-sm);
  color: var(--gris-500);
}
.aviso-legal p:last-child { margin-bottom: 0; }

/* --- Diferenciadores ---------------------------------------- */
.punto { }
.punto__numero {
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl);
  color: var(--acento);
  display: block;
  line-height: 1;
  margin-bottom: .7rem;
}
.punto h3 { font-size: var(--t-md); font-family: var(--fuente-texto); font-weight: 600; margin-bottom: .35rem; }
.punto p { font-size: var(--t-sm); color: var(--gris-500); margin: 0; }

/* Fondo decorativo abstracto de sección.
   Va atenuado y con un velo del color de la sección encima, para que
   las tarjetas y el texto conserven contraste. */
.seccion--fondo-decorativo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.seccion--fondo-decorativo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to bottom, rgba(245,249,252,.72), rgba(245,249,252,.88)),
    url("../img/fondo-como-trabajamos.jpg");
  background-size: cover;
  background-position: center;
}

/* Variante con ícono: tarjeta sobre fondo crema */
.punto--tarjeta {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-lg);
  padding: 1.7rem 1.5rem 1.6rem;
  transition: border-color .18s ease, transform .18s ease;
}
.punto--tarjeta:hover {
  border-color: var(--acento);
  transform: translateY(-2px);
}
.punto__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--acento-suave);
  color: var(--acento-oscuro);
  margin-bottom: 1.1rem;
}
.punto__icono svg { width: 24px; height: 24px; }
/* El número pasa a ser una marca discreta en la esquina */
.punto--tarjeta .punto__numero {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  color: var(--gris-400);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .punto--tarjeta { transition: none; }
  .punto--tarjeta:hover { transform: none; }
}

/* --- Bloque de dos columnas --------------------------------- */
.dos-columnas {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3.5rem; align-items: center;
}
.dos-columnas img { border-radius: var(--radio-lg); }
@media (max-width: 860px) {
  .dos-columnas { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* --- Galería ------------------------------------------------ */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.galeria figure { margin: 0; }
.galeria img {
  width: 100%; height: 340px; object-fit: cover;
  border-radius: var(--radio-lg);
  background: var(--gris-100);
}
.galeria figcaption { font-size: var(--t-xs); color: var(--gris-500); padding-top: .55rem; }
@media (max-width: 900px) { .galeria { grid-template-columns: repeat(2, 1fr); } .galeria img { height: 280px; } }
@media (max-width: 560px) { .galeria { grid-template-columns: 1fr; } .galeria img { height: 320px; } }

/* --- Profesionales ------------------------------------------ */
.profesional {
  background: #fff; border: 1px solid var(--gris-200);
  border-radius: var(--radio-lg); padding: 1.9rem 1.6rem;
  text-align: center; display: flex; flex-direction: column;
}
.profesional__retrato {
  width: 128px; height: 128px; border-radius: 50%;
  margin: 0 auto 1.1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  font-family: var(--fuente-titulo);
  font-size: 1.9rem; color: var(--gris-500); letter-spacing: .04em;
}
.profesional__foto {
  width: 128px; height: 128px; border-radius: 50%;
  margin: 0 auto 1.1rem;
  object-fit: cover;
  border: 1px solid var(--gris-200);
}
.profesional h3 { margin-bottom: .25rem; font-size: var(--t-md); }
.profesional__cargo {
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento); font-weight: 600; margin-bottom: .9rem;
}
.profesional p { font-size: var(--t-sm); color: var(--gris-500); margin: 0; }

/* --- Blog --------------------------------------------------- */
.etiqueta {
  display: inline-block;
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris-500); font-weight: 600;
  border: 1px solid var(--gris-200); background: var(--crema);
  padding: .2rem .6rem; border-radius: 100px;
}
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.4rem; }
.filtro {
  font-family: var(--fuente-texto); font-size: var(--t-sm);
  padding: .5rem 1rem; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--gris-300); background: #fff; color: var(--gris-700);
  transition: all var(--transicion);
}
.filtro:hover { border-color: var(--gris-400); background: var(--gris-100); }
.filtro[aria-pressed="true"] { background: var(--gris-800); border-color: var(--gris-800); color: #fff; }

.meta-articulo {
  font-size: var(--t-xs); color: var(--gris-400);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-bottom: 1rem;
}
.meta-articulo span + span::before { content: "·"; margin-right: .5rem; }

.articulo { max-width: var(--ancho-texto); }
.articulo h2 { font-size: var(--t-xl); margin-top: 2.4rem; }
.articulo h3 { font-size: var(--t-md); font-family: var(--fuente-texto); font-weight: 600; margin-top: 1.8rem; }
.articulo ul, .articulo ol { margin: 0 0 1.2rem; }
.articulo li { margin-bottom: .5rem; }
.articulo > p:first-of-type { font-size: var(--t-md); color: var(--gris-700); }

.cierre-articulo {
  margin-top: 2.6rem; padding: 1.8rem;
  background: var(--crema); border: 1px solid var(--gris-200);
  border-radius: var(--radio-lg);
}
.cierre-articulo h3 { margin-top: 0; }
.cierre-articulo p { font-size: var(--t-sm); color: var(--gris-500); }

/* --- Formulario --------------------------------------------- */
.formulario { display: grid; gap: 1.15rem; }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo label { font-size: var(--t-sm); font-weight: 600; color: var(--gris-700); }
.campo .ayuda { font-size: var(--t-xs); color: var(--gris-400); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  font-family: var(--fuente-texto); font-size: var(--t-base);
  color: var(--gris-900);
  padding: .8rem .9rem;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  background: #fff;
  width: 100%;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(28,98,199,.15);
}
.campo textarea { resize: vertical; min-height: 120px; }
.formulario__aviso { font-size: var(--t-xs); color: var(--gris-400); }

/* --- Pasos -------------------------------------------------- */
.pasos { counter-reset: paso; display: grid; gap: 1.6rem; }
.paso { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
.paso__numero {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gris-800); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fuente-titulo); font-size: 1.2rem;
}
.paso h3 { font-size: var(--t-md); font-family: var(--fuente-texto); font-weight: 600; margin-bottom: .3rem; }
.paso p { font-size: var(--t-sm); color: var(--gris-500); margin: 0; }

/* --- Datos de contacto / horario ---------------------------- */
.datos { list-style: none; padding: 0; margin: 0; }
.datos li { padding: .75rem 0; border-bottom: 1px solid var(--gris-200); font-size: var(--t-sm); }
.datos li:last-child { border-bottom: 0; }
.datos strong { display: block; color: var(--gris-900); font-weight: 600; margin-bottom: .12rem; }

.horario { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.horario th, .horario td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--gris-200); }
.horario th { font-weight: 500; color: var(--gris-700); }
.horario td { text-align: right; color: var(--gris-500); }

.mapa {
  border: 0; width: 100%; height: 420px;
  border-radius: var(--radio-lg);
  background: var(--gris-100);
  display: block;
}

/* --- Llamado final ------------------------------------------ */
.llamado {
  background: var(--gris-800);
  color: rgba(255,255,255,.82);
  padding: var(--espacio-seccion) 0;
  text-align: center;
}
.llamado h2 { color: #fff; }
.llamado p { max-width: 56ch; margin-left: auto; margin-right: auto; }

/* --- Pie de página ------------------------------------------ */
.pie {
  background: var(--gris-900);
  color: rgba(255,255,255,.68);
  font-size: var(--t-sm);
  padding: 3.6rem 0 0;
}
.pie a { color: rgba(255,255,255,.78); }
.pie a:hover { color: #fff; }
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.4rem;
  padding-bottom: 2.8rem;
}
@media (max-width: 860px) { .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .pie__rejilla { grid-template-columns: 1fr; } }
.pie__logo { height: 72px; width: auto; margin-bottom: 1.1rem; }
.pie h3 {
  color: #fff; font-family: var(--fuente-texto);
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .95rem; font-weight: 600;
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .5rem; }
.pie__legal {
  border-top: 1px solid rgba(255,255,255,.13);
  padding: 1.5rem 0 2.2rem;
  font-size: var(--t-xs);
  color: rgba(255,255,255,.55);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
}
.pie__legal p { margin: 0; }
.pie address { font-style: normal; }

/* --- Botón flotante de WhatsApp ------------------------------ */
.flotante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--gris-800); color: #fff;
  padding: .85rem 1.2rem;
  border-radius: 100px;
  box-shadow: var(--sombra-fuerte);
  font-size: var(--t-sm); font-weight: 600;
  transition: background var(--transicion), transform var(--transicion);
}
.flotante:hover { background: var(--gris-900); color: #fff; text-decoration: none; transform: translateY(-2px); }
.flotante svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 520px) {
  .flotante { padding: .8rem 1rem; right: .8rem; bottom: .8rem; }
  .pie__legal { padding-bottom: 5.5rem; }
}

/* --- Ajustes móviles globales -------------------------------- */
@media (max-width: 720px) {
  :root {
    --alto-header: 70px;
    --t-3xl: 2.1rem;
    --t-2xl: 1.7rem;
    --t-xl:  1.45rem;
    --t-lg:  1.2rem;
    --espacio-seccion: 3.6rem;
  }
  .marca img { height: 44px; }
  .pie__logo { height: 62px; }
  .hero { min-height: 460px; }
  .hero__contenido { padding: 2.6rem 0 3rem; }
  .portada { padding: 2.4rem 0 2.2rem; }
  .portada--imagen .portada__caja { padding: 3rem 0 2.6rem; }
  .mapa { height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ============================================================
   Flujo de Reserva en 4 Pasos (Conectado a Base de Datos)
   ============================================================ */
.reserva-flujo {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.reserva-paso {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-lg);
  padding: 1.6rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.reserva-paso.activo {
  border-color: var(--acento);
  box-shadow: var(--sombra);
}

.reserva-paso.inactivo {
  opacity: 0.6;
  pointer-events: none;
  background: var(--crema);
}

.reserva-paso__cabecera {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.2rem;
}

.reserva-paso__numero {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gris-200);
  color: var(--gris-700);
  font-size: var(--t-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reserva-paso.activo .reserva-paso__numero {
  background: var(--acento);
  color: #fff;
}

.reserva-paso.completado .reserva-paso__numero {
  background: var(--gris-800);
  color: #fff;
}

.reserva-paso__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--gris-900);
  margin: 0;
}

.reserva-paso__subtitulo {
  font-size: var(--t-xs);
  color: var(--gris-500);
  margin: 0;
}

/* Grilla de bloques horarios */
.horas-contenedor {
  min-height: 80px;
}

.horas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: .6rem;
  margin-top: .8rem;
}

.hora-btn {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: .65rem .4rem;
  text-align: center;
  font-family: var(--fuente-texto);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--gris-800);
  cursor: pointer;
  transition: all var(--transicion);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hora-btn span.hora-prof {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gris-500);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hora-btn:hover:not(:disabled) {
  border-color: var(--acento);
  background: var(--acento-suave);
  color: var(--acento-oscuro);
}

.hora-btn.seleccionada {
  background: var(--acento);
  border-color: var(--acento-oscuro);
  color: #fff;
}

.hora-btn.seleccionada span.hora-prof {
  color: rgba(255,255,255,.85);
}

.hora-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Avisos y Mensajes */
.aviso-bloques {
  background: var(--crema);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 1rem 1.2rem;
  font-size: var(--t-sm);
  color: var(--gris-700);
  margin-top: .6rem;
}

.aviso-alerta {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #9b2c2c;
}

.aviso-info {
  background: var(--acento-suave);
  border: 1px solid var(--acento);
  color: var(--acento-oscuro);
}

/* Checkbox Consentimiento */
.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 1.2rem 0;
  font-size: var(--t-sm);
  color: var(--gris-700);
  line-height: 1.45;
}

.campo-checkbox input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--acento);
  cursor: pointer;
}

.campo-checkbox label {
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}

/* Botón de Confirmar Deshabilitado */
.boton:disabled,
.boton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--gris-400) !important;
  border-color: var(--gris-400) !important;
}

/* Pantalla de Confirmación Exitosa */
.reserva-exito {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radio-lg);
  padding: 2rem;
  text-align: center;
  color: #166534;
}

.reserva-exito h2 {
  color: #14532d;
  margin-bottom: .6rem;
}

.reserva-resumen {
  background: #fff;
  border: 1px solid #dcfce7;
  border-radius: var(--radio);
  padding: 1.2rem;
  margin: 1.4rem auto;
  max-width: 480px;
  text-align: left;
  font-size: var(--t-sm);
  color: var(--gris-800);
}

.reserva-resumen dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: .4rem;
  margin: 0;
}

.reserva-resumen dt {
  font-weight: 600;
  color: var(--gris-500);
}

.reserva-resumen dd {
  margin: 0;
  font-weight: 500;
}

/* Indicador de Carga */
.cargando-spinner {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--gris-500);
  font-size: var(--t-sm);
  padding: 1rem 0;
}

.spinner-icon {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gris-200);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}


/* ============================================================
   Carrusel Hero Interactivo (Transición Ultra Suave, Lenta y Fluida)
   ============================================================ */
.hero-carrusel {
  position: relative;
  min-height: 580px;
  background: #151515;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.carrusel__pistas {
  position: relative;
  width: 100%;
  min-height: 580px;
  display: flex;
}

.carrusel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  transition: opacity 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  will-change: opacity;
}

.carrusel__slide.activo {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}


.carrusel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.carrusel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 10s ease-out;
  transform: scale(1.04);
  will-change: transform;
}

.carrusel__slide.activo 
.carrusel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.carrusel__img {
  transform: scale(1);
}

.carrusel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16,16,16,.92) 0%, rgba(16,16,16,.58) 50%, rgba(16,16,16,.28) 100%);
  z-index: 1;
}

.carrusel__contenido {
  position: relative;
  z-index: 2;
  padding: 4rem 1.25rem 4.6rem;
  max-width: 740px;
  color: #fff;
  opacity: 0;
  transition: opacity 2.3s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.1s;
  will-change: opacity;
}

.carrusel__slide.activo .carrusel__contenido {
  opacity: 1;
}

.carrusel__contenido h1,
.carrusel__contenido h2 {
  color: #fff;
  margin-bottom: .65rem;
}

.carrusel__bajada {
  font-family: var(--fuente-subtitulo);
  font-size: var(--t-lg);
  color: rgba(255,255,255,.94);
  margin-bottom: 1.6rem;
  line-height: 1.55;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.carrusel__contenido .antetitulo {
  color: rgba(255,255,255,.85);
}

/* Flechas de navegación */
.carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(25,25,25,.4);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.carrusel__flecha svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.carrusel__flecha:hover {
  background: var(--acento);
  border-color: var(--acento-oscuro);
  transform: translateY(-50%) scale(1.08);
}

.carrusel__flecha--anterior { left: 1.25rem; }
.carrusel__flecha--siguiente { right: 1.25rem; }

/* Indicadores / Dots con transición suave */
/* La tarjeta de reserva se superpone al borde inferior del héroe. El contenido
   sube para dejar una banda libre donde los puntos no chocan ni con los botones
   ni con la tarjeta. */
.hero-carrusel .carrusel__contenido { transform: translateY(-2.6rem); }

.carrusel__indicadores {
  position: absolute;
  bottom: 4.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
  align-items: center;
}

.carrusel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1), background 0.6s ease, border-radius 0.6s ease;
}

.carrusel__dot:hover {
  background: rgba(255,255,255,.8);
}

.carrusel__dot.activo {
  width: 32px;
  border-radius: 12px;
  background: var(--acento);
  box-shadow: 0 0 10px rgba(79,168,155,.6);
}

@media (max-width: 720px) {
  /* 640px (en vez de 480px): con el texto ya reducido, la diapositiva 1
     (antetítulo + h1 + bajada + chips de confianza + 2 botones apilados)
     sigue necesitando ~560px de alto. Con 480px el bloque se desbordaba
     por arriba y, como el héroe recorta lo que sobresale (overflow:
     hidden), el antetítulo y el título quedaban completamente invisibles
     detrás del encabezado. */
  .hero-carrusel, .carrusel__pistas { min-height: 640px; }
  /* En desktop el contenido se ancla abajo (align-items: flex-end), que es
     el diseño previsto: el texto queda sobre la parte inferior de la foto.
     En mobile eso hace que el bloque de texto de cada diapositiva "flote"
     a una altura distinta según cuánto contenido tenga: la diapositiva 1
     (con los chips de confianza) es más alta y arranca más arriba; las
     diapositivas 2 y 3 (sin chips) son más bajas y todo su bloque queda
     más abajo, cayendo justo sobre las flechas del carrusel. Ancladas
     arriba (flex-start) las tres arrancan siempre en el mismo punto. */
  .hero-carrusel .carrusel__slide { align-items: flex-start; }
  .hero-carrusel .carrusel__contenido { transform: none; }
  .carrusel__contenido { padding: 2.6rem 1.25rem 3.4rem; max-width: 100%; }
  .hero-carrusel .carrusel__contenido h1,
  .hero-carrusel .carrusel__contenido h2 {
    font-size: 1.65rem !important;
    line-height: 1.22 !important;
  }
  .hero-carrusel .carrusel__bajada { font-size: 1rem !important; }
  .hero-carrusel .chips-confianza { margin-bottom: 1rem; }
  /* Con el texto ya anclado arriba, las flechas no pueden seguir centradas
     verticalmente (top:50%): quedarían sobre el texto o los chips en
     cualquier diapositiva. Se bajan a una franja fija que en las tres
     diapositivas queda siempre libre, entre el final del contenido más
     largo (diapositiva 1, con chips y dos botones) y los puntos. */
  .carrusel__flecha {
    width: 38px; height: 38px;
    top: auto; bottom: 6rem; transform: none;
  }
  .carrusel__flecha--anterior { left: .5rem; }
  .carrusel__flecha--siguiente { right: .5rem; }
}

@media (max-width: 480px) {
  .hero-carrusel .carrusel__contenido h1,
  .hero-carrusel .carrusel__contenido h2 {
    font-size: 1.45rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carrusel__slide { transition: none !important; }
  
.carrusel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.carrusel__img { transition: none !important; transform: none !important; }
  .carrusel__contenido { opacity: 1 !important; transition: none !important; }
}


/* ============================================================
   Widget Nativo de Reseñas de Google (Nuestra Clínica)
   ============================================================ */
.google-resenas-caja {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-lg);
  padding: 2.2rem;
  box-shadow: var(--sombra);
  margin-bottom: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.google-resenas__insignia {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.google-g-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.google-calificacion-num {
  font-family: var(--fuente-titulo);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gris-900);
  line-height: 1;
}

.estrellas-doradas {
  color: #f59e0b;
  font-size: 1.25rem;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 3px;
}

.google-resenas__subtexto {
  font-size: var(--t-xs);
  color: var(--gris-500);
  margin: 0;
}

.resenas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}

.tarjeta-resena {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.tarjeta-resena:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra);
  border-color: var(--acento);
}

.tarjeta-resena__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9rem;
}

.tarjeta-resena__autor {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.tarjeta-resena__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento-oscuro);
  font-weight: 700;
  font-size: var(--t-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tarjeta-resena__nombre {
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--gris-900);
  margin: 0;
}

.tarjeta-resena__servicio {
  font-size: 0.72rem;
  color: var(--gris-500);
  margin: 0;
}

.tarjeta-resena__texto {
  font-size: var(--t-sm);
  color: var(--gris-700);
  line-height: 1.55;
  margin-bottom: 1.2rem;
  font-style: italic;
}

.tarjeta-resena__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--gris-400);
  border-top: 1px solid var(--gris-100);
  padding-top: .75rem;
}

.google-verificado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1a73e8;
  font-weight: 600;
}


/* Tipografía específica del Héroe: Manrope + DM Sans */
.hero-carrusel .antetitulo {
  font-family: var(--fuente-mono) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.9) !important;
  margin-bottom: 0.6rem !important;
}

.hero-carrusel .carrusel__contenido h1,
.hero-carrusel .carrusel__contenido h2 {
  font-family: var(--fuente-titulo) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.14 !important;
  color: #fff !important;
}

.hero-carrusel .carrusel__bajada {
  font-family: var(--fuente-texto) !important;
  font-weight: 400 !important;
  font-size: var(--t-lg) !important;
  letter-spacing: -0.01em !important;
  color: rgba(255,255,255,.94) !important;
  line-height: 1.55 !important;
}

.hero-carrusel .boton {
  font-family: var(--fuente-titulo) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}


/* Alineaciones específicas por Diapositiva */
.carrusel__slide--izq .carrusel__contenido {
  margin-right: auto;
  margin-left: 5rem;
  max-width: 620px;
  text-align: left;
}

@media (max-width: 1080px) {
  .carrusel__slide--izq .carrusel__contenido {
    margin-left: 2rem;
  }
}

.carrusel__slide--izq .carrusel__overlay {
  background: linear-gradient(to right, rgba(16,16,16,.88) 0%, rgba(16,16,16,.60) 45%, rgba(16,16,16,.15) 100%),
              linear-gradient(to top, rgba(16,16,16,.80) 0%, rgba(16,16,16,.20) 60%, transparent 100%);
}

.carrusel__slide--der .carrusel__contenido {
  margin-left: auto;
  margin-right: 0;
  max-width: 660px;
  text-align: left;
}

.carrusel__slide--der .carrusel__overlay {
  background: linear-gradient(to left, rgba(16,16,16,.88) 0%, rgba(16,16,16,.60) 45%, rgba(16,16,16,.15) 100%),
              linear-gradient(to top, rgba(16,16,16,.80) 0%, rgba(16,16,16,.20) 60%, transparent 100%);
}

@media (max-width: 720px) {
  .carrusel__slide--izq .carrusel__contenido,
  .carrusel__slide--der .carrusel__contenido {
    margin: 0 auto;
    max-width: 100%;
  }
}


/* Botones de marca.
   El fondo usa el azul profundo y no el primario: sobre el primario (#297cef)
   el texto blanco queda en 4.02:1 y no alcanza el 4.5:1 de WCAG AA. */
.boton--principal {
  background: var(--azul-oscuro);
  color: #fff !important;
  border: 1px solid var(--azul-oscuro);
}

.boton--principal:hover {
  background: var(--acento-oscuro);
  border-color: var(--acento-oscuro);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(28,98,199,.32);
}

.boton--secundario {
  background: #fff;
  color: var(--gris-900) !important;
  border: 1px solid var(--gris-200);
}

.boton--secundario:hover {
  background: var(--gris-100);
  border-color: var(--gris-300);
  color: var(--gris-900) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(12,35,82,.12);
}

.antetitulo {
  color: var(--acento);
}

.carrusel__dot.activo {
  background: var(--azul-clinico) !important;
  box-shadow: 0 0 10px rgba(41,124,239,.7) !important;
}

@media (prefers-reduced-motion: reduce) {
  .boton--principal:hover,
  .boton--secundario:hover { transform: none; }
}

/* --- Popup de ofertas ---------------------------------------
   Se activa desde assets/js/ofertas.js (campo `activa`).
   Si el popup está apagado, nada de esto llega a renderizarse. */
.oferta-capa {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(12, 35, 82, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 200ms ease;
  overflow-y: auto;
}
.oferta-capa.visible { opacity: 1; }
body.con-oferta { overflow: hidden; }

.oferta {
  position: relative;
  width: 100%; max-width: 440px;
  margin: auto;
  background: var(--blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-fuerte);
  overflow: hidden;
  transform: translateY(12px) scale(.98);
  transition: transform 220ms ease;
}
.oferta-capa.visible .oferta { transform: translateY(0) scale(1); }

.oferta__cerrar {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--gris-700);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(12,35,82,.18);
  transition: background var(--transicion), color var(--transicion);
}
.oferta__cerrar:hover { background: var(--gris-100); color: var(--gris-900); }
.oferta__cerrar svg { width: 18px; height: 18px; }

.oferta__figura { background: var(--gris-100); }
.oferta__figura img { width: 100%; height: 190px; object-fit: cover; }

.oferta__cuerpo { padding: 1.9rem 1.7rem 1.7rem; }

.oferta__antetitulo {
  font-family: var(--fuente-texto);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--acento);
  margin: 0 0 .6rem;
}
.oferta__titulo {
  font-size: var(--t-xl);
  margin: 0 0 .7rem;
}
.oferta__texto {
  font-size: var(--t-sm);
  color: var(--gris-500);
  margin: 0 0 1.1rem;
}
.oferta__lista {
  list-style: none; padding: 0;
  margin: 0 0 1.3rem;
  font-size: var(--t-sm);
  color: var(--gris-700);
}
.oferta__lista li {
  position: relative;
  padding: .3rem 0 .3rem 1.4rem;
}
.oferta__lista li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--azul-clinico);
}
.oferta__legal {
  font-size: var(--t-xs);
  color: var(--gris-400);
  margin: .9rem 0 0;
  text-align: center;
}

@media (max-width: 520px) {
  .oferta__figura img { height: 150px; }
  .oferta__cuerpo { padding: 1.6rem 1.3rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .oferta-capa, .oferta { transition: none; }
  .oferta { transform: none; }
}

/* --- Reserva simple: seleccionar área y reservar por WhatsApp en un clic --- */
.reserva-simple {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.8rem;
  max-width: 560px;
}
.reserva-simple select {
  flex: 1 1 220px;
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  color: var(--gris-900);
  padding: .8rem .9rem;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  background: var(--blanco);
}
.reserva-simple select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(28,98,199,.15);
}
.reserva-simple .boton {
  flex: 0 0 auto;
}
@media (max-width: 520px) {
  .reserva-simple { flex-direction: column; }
  .reserva-simple .boton { width: 100%; justify-content: center; }
}