/* ================================================================
   RDC SAINT KITTS — STYLES  (TEMA CLARO)
   ================================================================
   Indice:
     1. Design tokens (colores, fuentes, medidas)
     2. Reset & base
     3. Helpers / botones / titulos
     4. Barra de promocion
     5. Navbar + logo
     6. Hero (carrusel + entrada del titulo)
    6b. Quienes somos
     7. Modalities (carrusel horizontal + tarjetas)
     8. About strip / stats  (sin uso: la franja se quito del HTML)
     9. Booking form
    10. Studies grid
    11. Contact / footer
   11b. Ventana de detalle (modal)
    12. Reveal-on-scroll
    13. Responsive
   ================================================================ */

/* ---------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------
   TODO el tema sale de aqui. Para volver al tema oscuro basta
   cambiar estos valores; el resto del archivo no usa colores fijos.
   --------------------------------------------------------------- */
:root {
  --bg-deep: #f7f9fa;
  --bg-panel: #ffffff;
  --bg-panel-light: #ffffff;
  --surface-tint: #eef2f5;

  --ink: #0e1c28;
  --ink-dim: #5b6d7c;

  --teal: #12a594;
  --teal-dim: #0d7a6d;
  --blue: #3b7fc4;
  --amber: #c08829;
  --danger: #c94f4f;

  --border: rgba(14, 28, 40, 0.10);
  --border-strong: rgba(14, 28, 40, 0.18);
  --shadow-card: 0 1px 2px rgba(14, 28, 40, 0.05);
  --shadow-lift: 0 18px 40px -18px rgba(14, 28, 40, 0.25);

  --on-accent: #ffffff;

  /* Montserrat, que es la que pediste. Los sustitutos de detras son
     geometricos de palo seco como ella, para que si un dia no carga
     Google Fonts el titular no cambie de caracter: Futura si esta
     instalada (Mac y muchos Windows la traen), luego Century Gothic,
     y al final el palo seco del sistema. */
  --font-head: 'Montserrat', Futura, 'Century Gothic', Arial, sans-serif;
  --font-body: 'Inter', Georgia, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --container: 1180px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

.section {
  position: relative;
  padding: 7rem 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
}

/* ---------------------------------------------------------------
   3. HELPERS / BOTONES / TITULOS
   --------------------------------------------------------------- */
.eyebrow {
  color: var(--teal-dim);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.section-heading { max-width: 640px; margin-bottom: 3.5rem; }
.section-sub { color: var(--ink-dim); margin-top: 0.75rem; font-size: 1.05rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s, box-shadow 0.25s;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: var(--on-accent);
  box-shadow: 0 8px 22px -10px rgba(18, 165, 148, 0.7);
}
.btn-primary:hover { box-shadow: 0 14px 30px -10px rgba(18, 165, 148, 0.8); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--teal-dim); color: var(--teal-dim); }

.btn-block { width: 100%; justify-content: center; }

.icon svg { width: 1.1em; height: 1.1em; display: block; }

/* ---------------------------------------------------------------
   4. BARRA DE PROMOCION
   --------------------------------------------------------------- */
.promo-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  color: var(--on-accent);
  text-align: center;
  font-size: 0.87rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
}
.promo-bar[hidden] { display: none; }
body.has-promo .navbar { top: 38px; }

/* ---------------------------------------------------------------
   5. NAVBAR + LOGO
   --------------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(247, 249, 250, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.navbar.scrolled {
  border-color: var(--border);
  background: rgba(247, 249, 250, 0.94);
}

.navbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 0.7rem; }

/* 56px y no 44px: el logo es un ovalo de proporcion 1,7:1 con tres
   lineas de texto fino dentro. A 44 de alto, "Radiology Diagnostic
   Center" quedaba en una mancha ilegible — no por calidad del
   archivo, sino por geometria. */
.brand-logo {
  height: 56px;
  width: auto;
  border-radius: 50% / 40%;
  object-fit: cover;
  display: block;
}

/* Solo se muestra si el logo no carga (js/main.js lo activa) */
.brand-name {
  display: none;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
}

.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a { font-size: 0.92rem; color: var(--ink-dim); transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  background: var(--teal-dim);
  color: var(--on-accent) !important;
  font-weight: 600;
}

/* Selector de idioma.
   Con borde y no como enlace suelto: es un CONTROL, no un destino, y
   la diferencia importa porque esta rodeado de enlaces. El ancho
   minimo evita que la barra entera baile al pasar de "Español" a
   "English", que tienen distinto largo. */
.nav-lang {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  min-width: 5.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-lang:hover {
  color: var(--teal-dim);
  border-color: var(--teal-dim);
  background: rgba(18, 165, 148, 0.06);
}

/* Acceso al panel del personal.
   Se ve, pero pesa menos que el resto del menu: es una puerta de
   servicio, no un destino para el visitante. La linea vertical la
   separa de los enlaces de la clinica, que es lo que evita que se
   lea como una seccion mas del sitio. */
.nav-staff {
  font-size: 0.82rem !important;
  opacity: 0.65;
  padding-left: 2rem;
  border-left: 1px solid var(--border);
  transition: opacity 0.2s, color 0.2s;
}
.nav-staff:hover { opacity: 1; color: var(--teal-dim) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); transition: transform 0.25s, opacity 0.25s; }

/* ---------------------------------------------------------------
   6. HERO
   ---------------------------------------------------------------
   Tres capas apiladas:
     1. .hero-slides  -> fotos que rotan (z-index 0)
     2. .hero-layers  -> manchas de color suaves (z-index 1)
     3. .hero-content -> el texto (z-index 2)

   Como el sitio es claro, encima de las fotos va un velo BLANCO
   para que el texto oscuro siga leyendose.
   --------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  perspective: 1000px;
  overflow: hidden;
  padding-top: 6rem;
}

.hero-slides { position: absolute; inset: 0; z-index: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease-in-out, transform 8s linear;
  transform: scale(1.06);
}
.hero-slide.active { opacity: 1; transform: scale(1); }

.hero-slides.has-images::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(247, 249, 250, 0.90) 0%,
    rgba(247, 249, 250, 0.78) 45%,
    rgba(247, 249, 250, 0.96) 100%
  );
  z-index: 1;
}

.hero-dots {
  position: absolute;
  bottom: 6.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 3;
}
.hero-dot {
  width: 9px; height: 9px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(14, 28, 40, 0.22);
  transition: background 0.3s, width 0.3s;
}
.hero-dot.active { background: var(--teal-dim); width: 26px; border-radius: 999px; }

.hero-layers { position: absolute; inset: 0; z-index: 1; }
.hero-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.22;
  will-change: transform;
}
.layer-1 { width: 520px; height: 520px; background: var(--teal); top: -120px; left: -120px; }
.layer-2 { width: 420px; height: 420px; background: var(--blue); bottom: -140px; right: -100px; }
.layer-3 { width: 300px; height: 300px; background: var(--amber); top: 40%; right: 15%; opacity: 0.12; }

.hero-content { position: relative; z-index: 2; max-width: 780px; }
/* Montserrat es mas ancha que la fuente anterior y a tamano de
   titular las letras se separan de mas. Se aprieta el espaciado solo
   aqui: en un parrafo esto se leeria peor, en un titular grande lo
   compacta y le da presencia. */
.hero-content h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: -0.03em;
  font-weight: 700;
}
.hero-sub { color: var(--ink-dim); font-size: 1.15rem; margin: 1.25rem auto 2.25rem; max-width: 520px; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* --- Entrada del titulo linea por linea ----------------------
   js/main.js parte el titulo y le pone a cada linea la clase
   .from-left o .from-right, alternando.

   Distancia del deslizamiento: los 70px. Velocidad: 0.9s.
   Desfase entre lineas: los animation-delay de nth-child.
   Para que las dos lineas entren A LA VEZ, pon los delay en 0s
   o borra esas tres reglas.
   ------------------------------------------------------------- */
.hero-line {
  display: block;
  opacity: 0;
  will-change: transform, opacity;
  /* Recorrido largo y lento a proposito. Estos valores estuvieron
     en el sitio y se perdieron en el commit 4911bfb, que iba de
     otra cosa: bajaron de 600px a 70px y de 2s a 0.9s. Con 70px el
     titulo apenas se mueve y el efecto no se lee. */
  animation-duration: 2s;
  animation-timing-function: var(--ease);
  animation-fill-mode: forwards;
}
.hero-line.from-left  { animation-name: heroLineLeft; }
.hero-line.from-right { animation-name: heroLineRight; }

.hero-line:nth-child(2) { animation-delay: 0s; }
.hero-line:nth-child(3) { animation-delay: 0.32s; }
.hero-line:nth-child(4) { animation-delay: 0.48s; }

@keyframes heroLineLeft {
  from { opacity: 0; transform: translateX(-600px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroLineRight {
  from { opacity: 0; transform: translateX(600px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero-sub,
.hero-actions {
  opacity: 0;
  animation: heroFadeUp 0.8s var(--ease) forwards;
}
.hero-sub { animation-delay: 0.5s; }
.hero-actions { animation-delay: 0.65s; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Si el usuario pidio menos animacion, se muestra todo de una */
@media (prefers-reduced-motion: reduce) {
  .hero-line,
  .hero-sub,
  .hero-actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.scroll-hint {
  position: absolute;
  z-index: 3;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-dim);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scroll-hint-line {
  width: 1px; height: 34px;
  background: linear-gradient(var(--teal-dim), transparent);
  animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}


/* ---------------------------------------------------------------
   6b. QUIENES SOMOS
   ---------------------------------------------------------------
   Texto a la izquierda y foto a la derecha, con el texto algo mas
   ancho: es lo que se lee, y la foto acompaña.

   La foto lleva aspect-ratio fijo. Sin eso, mientras carga, el
   navegador no sabe cuanto alto reservar y toda la seccion salta
   hacia abajo cuando la imagen aparece — justo cuando alguien
   puede estar a punto de tocar un enlace.
   --------------------------------------------------------------- */
.about-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-text h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.about-text p {
  color: var(--ink-dim);
  margin-bottom: 1rem;
  max-width: 52ch;
}

/* Los tres apoyos. Cada uno es un titulo corto y una linea que lo
   explica; el titulo en color para que se lea de un barrido sin
   tener que leer las tres frases enteras. */
.about-pillars {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.about-pillars li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.about-pillars strong {
  font-family: var(--font-head);
  font-size: 0.97rem;
  color: var(--teal-dim);
}

.about-pillars span {
  color: var(--ink-dim);
  font-size: 0.93rem;
  line-height: 1.5;
}

.about-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

/* Fotos del equipo. El circulo es object-fit: cover y no un recorte
   previo: la clinica sube la foto que tenga, del tamano que sea, y
   sale centrada sin deformar la cara. */
.team-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.2rem;
  margin-top: 3.5rem;
}

.team-member {
  margin: 0;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.team-photo {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg-panel);
  box-shadow: var(--shadow-card);
}

.team-member figcaption { display: flex; flex-direction: column; gap: 0.15rem; }
.team-member figcaption strong { font-size: 0.92rem; }
.team-member figcaption span { color: var(--ink-dim); font-size: 0.84rem; line-height: 1.4; }

@media (max-width: 720px) {
  .team-strip { gap: 1.6rem; margin-top: 2.5rem; }
  .team-member { width: 120px; }
  .team-photo { width: 96px; height: 96px; }
}

/* ---------------------------------------------------------------
   7. MODALITIES — el scroll vertical mueve las tarjetas de lado
   ---------------------------------------------------------------
   .modalities-pin usa position:sticky, asi que se queda fijo
   mientras la seccion (muy alta) pasa por detras. js/main.js mide
   el avance y desplaza .modalities-track en esa proporcion.
   --------------------------------------------------------------- */
.modalities {
  padding-top: 6rem;
  min-height: 220vh;   /* da distancia de scroll al efecto */
}

/* Franja de fondo a todo el ancho: .section esta limitado a
   1180px, asi que se usa una capa detras de 100vw centrada. */
.modalities::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--surface-tint);
  z-index: -1;
}

.modalities-pin {
  position: sticky;
  top: 90px;
  height: 66vh;
  overflow: hidden;
  border-radius: var(--radius);
}

.modalities-track {
  display: flex;
  gap: 1.5rem;
  height: 100%;
  will-change: transform;
  padding-right: 2rem;
}

/* --- Tarjeta de servicio -------------------------------------
   Es un <button>, no un <div>: se puede activar con teclado y los
   lectores de pantalla la anuncian como pulsable. Por eso hay que
   quitarle los estilos que trae por defecto un boton.
   ------------------------------------------------------------- */
.modality-card {
  flex: 0 0 clamp(260px, 32vw, 380px);
  height: 100%;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;

  /* Reset del boton */
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}
.modality-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
}
.modality-card:focus-visible {
  outline: none;
  border-color: var(--teal-dim);
  box-shadow: 0 0 0 3px rgba(18, 165, 148, 0.25), var(--shadow-lift);
}

/* Las marcas son abstractas y centradas: "contain" con aire,
   porque con "cover" se recortarian los bordes. */
.modality-media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.75rem;
  background: var(--surface-tint);
}
.modality-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modality-body {
  display: block;
  padding: 1.4rem 1.5rem 1.6rem;
  flex: 0 0 auto;
}
.modality-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
}
.modality-desc {
  display: block;
  color: var(--ink-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* "Learn more": la flechita avanza al pasar el mouse */
.modality-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-dim);
}
.modality-more svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--ease);
}
.modality-card:hover .modality-more svg,
.modality-card:focus-visible .modality-more svg {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------
   8. ABOUT STRIP / STATS
   ---------------------------------------------------------------
   SIN USO. La franja de cifras (6 modalidades / 7 dias / 100%) se
   quito del HTML porque eran afirmaciones sin respaldo.
   Los estilos quedan por si algun dia se recupera con datos
   reales; no afectan a nada mientras no exista el marcado.
   --------------------------------------------------------------- */
.about-strip { padding: 3rem 1.5rem; }
.about-strip-inner {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2.5rem;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.stat { text-align: center; }
.stat-number {
  display: block;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--teal-dim);
}
.stat-label { color: var(--ink-dim); font-size: 0.9rem; }

/* ---------------------------------------------------------------
   9. BOOKING FORM
   --------------------------------------------------------------- */
.booking-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3.5rem;
  align-items: start;
}

.booking-contact-links { display: flex; gap: 0.8rem; margin-top: 2rem; flex-wrap: wrap; }
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 0.88rem;
  color: var(--ink-dim);
  transition: border-color 0.2s, color 0.2s;
}
.contact-pill:hover { border-color: var(--teal-dim); color: var(--ink); }

.booking-form {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  box-shadow: var(--shadow-card);
}

.form-row { display: flex; flex-direction: column; gap: 0.5rem; }
.form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }

label { font-size: 0.85rem; color: var(--ink-dim); }

/* Los campos van un tono mas gris que la tarjeta blanca */
input, select, textarea {
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color: #9aa8b3; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal-dim);
  box-shadow: 0 0 0 3px rgba(18, 165, 148, 0.15);
}

/* --- Campos obligatorios y errores --------------------------- */
.required { color: var(--danger); font-weight: 700; }

input.has-error,
select.has-error,
textarea.has-error {
  border-color: var(--danger);
  background: rgba(201, 79, 79, 0.05);
}

.field-error {
  display: none;
  color: var(--danger);
  font-size: 0.8rem;
  margin-top: 0.35rem;
  line-height: 1.4;
}

/* Trampa anti-robots del formulario de reservas.
   Se saca de la pantalla en vez de usar display:none porque
   algunos robots detectan display:none y saltan el campo. Fuera
   del viewport lo rellenan igual, que es justo lo que se busca.
   Nadie lo ve, nadie llega con el tabulador, y ningun lector de
   pantalla lo anuncia (el div lleva aria-hidden). */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: 0.8rem;
  color: var(--ink-dim);
  margin-top: -0.3rem;
}

.form-status { min-height: 1.2em; font-size: 0.88rem; }
.form-status.success { color: var(--teal-dim); }
.form-status.error { color: var(--danger); }

/* ---------------------------------------------------------------
   10. STUDIES GRID
   --------------------------------------------------------------- */
.studies-grid {
  display: grid;
  /* 340px minimo: tarjetas mas anchas, para que la imagen del
     estudio tenga sitio suficiente para leerse */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.75rem;
}

.study-card {
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.study-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.study-link { display: block; }

/* --- Zona de la imagen del estudio ---------------------------
   Decisiones y por que:

   1. aspect-ratio en vez de altura fija: el alto crece con el
      ancho de la tarjeta, asi que se ve igual de bien en un
      monitor grande que en el movil.

   2. background-size: contain (no cover): las imagenes son
      estudios medicos. Con "cover" se recortaban los bordes y
      se perdia justo la anatomia. Con "contain" se ve el
      estudio completo, sin cortar.

   3. Fondo oscuro: los estudios vienen con fondo negro, asi que
      el panel oscuro los continua sin costura y ademas los hace
      resaltar sobre la tarjeta blanca, como un negatoscopio.

   Si algun dia publican fotos normales (equipo, eventos) y las
   prefieren a sangre, cambia "contain" por "cover" y quita el
   background-repeat.
   ------------------------------------------------------------- */
.study-card-media {
  aspect-ratio: 4 / 3;
  background-size: contain;
  background-repeat: no-repeat;   /* obligatorio con "contain" */
  background-position: center;
  background-color: #0b1520;
}
.study-card-body { padding: 1.6rem; }
.study-card-date { color: var(--ink-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.study-card h3 { font-size: 1.15rem; margin: 0.5rem 0 0.6rem; }
.study-card p { color: var(--ink-dim); font-size: 0.92rem; }

.studies-empty { color: var(--ink-dim); font-size: 0.95rem; }

/* ---------------------------------------------------------------
   11. CONTACT / FOOTER
   --------------------------------------------------------------- */
.contact { padding-bottom: 4rem; }

/* Dos columnas: los datos a la izquierda, el mapa a la derecha. El
   minmax(0,...) evita que el iframe, que no encoge solo, desborde la
   rejilla y saque una barra horizontal en pantallas medianas. */
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.contact-block { max-width: 560px; }

.contact-map { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.contact-map iframe {
  width: 100%;
  height: 360px;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Ocupa las dos columnas: va debajo de los datos y del mapa, no al
   lado de ninguno de los dos. */
.contact-reviews {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.reviews-sub { color: var(--ink-dim); max-width: 52ch; margin: 0.6rem 0 1.6rem; }
.reviews-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Debajo de 900 px el mapa pasa a ocupar el ancho completo, y baja de
   altura porque en un movil un mapa alto empuja el pie fuera de vista. */
@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-map iframe { height: 280px; }
}
.contact-list { display: flex; flex-direction: column; gap: 0.9rem; margin: 1.5rem 0; }
.contact-list li { display: flex; align-items: center; gap: 0.7rem; color: var(--ink-dim); }
.contact-list .icon { color: var(--teal-dim); }
.contact-list a:hover { color: var(--teal-dim); }

.hours-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.75rem; font-size: 0.92rem; }
.hours-list li { display: flex; justify-content: space-between; max-width: 320px; color: var(--ink-dim); }
.hours-list li span:last-child { color: var(--ink); }

.social-links { display: flex; gap: 0.8rem; }
.social-links a {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--ink-dim);
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.social-links a svg { width: 18px; height: 18px; }
.social-links a:hover { border-color: var(--teal-dim); color: var(--teal-dim); transform: translateY(-3px); }

.site-footer {
  text-align: center;
  padding: 2rem 1.5rem 3rem;
  color: var(--ink-dim);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  background: var(--surface-tint);
}

/* El enlace al panel del personal ya no vive en el pie: se movio a
   la barra de arriba. Sus estilos estan en .nav-staff, junto al
   resto del menu. */

/* ---------------------------------------------------------------
   11b. VENTANA DE DETALLE (modal de modalidades)
   ---------------------------------------------------------------
   Se abre al hacer clic en una tarjeta de servicio. Empieza con
   el atributo [hidden] y js/main.js lo quita.
   --------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14, 28, 40, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: modalFade 0.25s var(--ease);
}
.modal-overlay[hidden] { display: none; }

@keyframes modalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-window {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -30px rgba(14, 28, 40, 0.5);
  animation: modalRise 0.35s var(--ease);
}

@keyframes modalRise {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--ink-dim);
  font-size: 1.5rem;
  line-height: 1;
  transition: all 0.2s;
}
.modal-close:hover { color: var(--ink); border-color: var(--border-strong); }

/* Dos columnas: ilustracion a la izquierda, texto a la derecha */
.modal-body {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
}

.modal-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  background: var(--surface-tint);
}
.modal-media img { width: 100%; height: auto; max-width: 300px; }

.modal-text { padding: 2.75rem 2.5rem 2.5rem; }
.modal-text h3 { font-size: 1.7rem; margin-bottom: 1rem; }
.modal-text h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin: 1.75rem 0 0.7rem;
}

.modal-summary {
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 1.7;
}

.modal-list { display: flex; flex-direction: column; gap: 0.45rem; }
.modal-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.94rem;
  color: var(--ink-dim);
}
/* Punto de vinneta dibujado a mano para poder colorearlo */
.modal-list li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

/* Datos sueltos: duracion y preparacion */
.modal-facts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.4rem;
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
}
.modal-fact-label {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-dim);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.modal-fact-value {
  display: block;
  font-size: 0.92rem;
  color: var(--ink-dim);
  line-height: 1.6;
}

.modal-note {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
  opacity: 0.85;
  font-style: italic;
}

.modal-cta { margin-top: 1.75rem; }

/* Mientras la ventana esta abierta, el fondo no debe hacer scroll */
body.modal-open { overflow: hidden; }

/* ---------------------------------------------------------------
   12. REVEAL-ON-SCROLL
   Elementos con class="reveal" aparecen al entrar en pantalla.
   Lo activa js/main.js con IntersectionObserver.
   --------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------
   13. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Apilado. La foto va ARRIBA y no debajo del texto: en un movil,
     dos parrafos seguidos de tres apoyos son mucha pared de letra
     antes de ver nada. */
  .about-inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .about-media { order: -1; }
  .about-media img { aspect-ratio: 16 / 10; }

  .booking-inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .brand-logo { height: 36px; }
  .hero-dots { bottom: 5.5rem; }
  .promo-bar { font-size: 0.78rem; padding: 0.45rem 0.8rem; }

  .nav-links {
    position: fixed;
    top: 68px; left: 0; right: 0;
    /* Opaco del todo y con sombra. Antes era rgba(...,0.98) y aun
       asi el titulo del banner se leia a traves del menu: sobre un
       texto de 4rem en negrita, un 2% de transparencia se nota. Con
       el menu abierto, las opciones tienen que ser lo unico que se
       lee ahi. */
    background: var(--surface-tint, #f7f9fa);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.12);
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 1.25rem;
    border-bottom: 1px solid var(--border);
    transform: translateY(-130%);
    transition: transform 0.3s var(--ease);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-toggle { display: flex; }

  /* En el menu desplegable los enlaces se apilan, asi que la linea
     separadora tiene que ir arriba y no a la izquierda: una raya
     vertical junto a un solo elemento de una columna se lee como un
     error de maquetacion, no como una separacion. */
  .nav-staff {
    width: 100%;
    padding-left: 0;
    padding-top: 1.25rem;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .section { padding: 4.5rem 1.25rem; }
  .modalities { padding-top: 4.5rem; }
  .modalities-pin { height: 62vh; }
  .modality-card { flex-basis: 80vw; }
  .modality-media { padding: 1.25rem; }
  .modality-body { padding: 1.2rem 1.25rem 1.4rem; }
  .form-row.two-col { grid-template-columns: 1fr; }

  /* El modal pasa a una sola columna, con la ilustracion arriba */
  .modal-overlay { padding: 0.75rem; }
  .modal-body { grid-template-columns: 1fr; }
  .modal-media { padding: 2rem; }
  .modal-media img { max-width: 200px; }
  .modal-text { padding: 1.75rem 1.5rem 2rem; }
  .modal-text h3 { font-size: 1.4rem; }
}