/* ============================================================
   Sitio Dra. Gretel Riveros — Ortopedia y Traumatología
   Sistema de diseño basado en la identidad gráfica de la doctora
   ============================================================ */

:root {
  /* Identidad */
  --lila: #dfc3dc;
  --violeta: #5c63b4;
  --azul: #0d3a76;

  /* Texto */
  --ink: #14264e;            /* titulares sobre fondo claro */
  --texto: #46506b;          /* párrafos sobre fondo claro */
  --texto-suave: #6a739a;

  /* Fondos */
  --blanco: #ffffff;
  --fondo-suave: #f5f6fc;    /* blanco ligeramente azulado */
  --linea: #e3e6f4;

  /* Degradados oficiales */
  --grad-light: radial-gradient(circle at 50% 30%, #dfc3dc 0%, #5c63b4 100%);
  --grad-dark: radial-gradient(circle at 50% 20%, #5c63b4 0%, #0d3a76 100%);

  --sombra: 0 24px 60px rgba(13, 58, 118, 0.10);
  --sombra-suave: 0 12px 30px rgba(13, 58, 118, 0.07);
  --radio: 28px;
  --radio-sm: 16px;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--violeta); }
ul { padding-left: 1.2rem; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 0.9rem;
  letter-spacing: -0.015em;
}
h1 { font-weight: 900; font-size: clamp(2.35rem, 5.2vw, 3.55rem); }
h2 { font-weight: 800; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.35rem); }
p { margin: 0 0 1rem; }
h1 em, h2 em { font-style: italic; font-weight: inherit; }

.on-grad h1, .on-grad h2, .on-grad h3 { color: #fff; }
.on-grad p { color: rgba(255, 255, 255, 0.88); }
.on-grad .eyebrow { background: rgba(255, 255, 255, 0.16); color: #fff; }
.on-grad .micro { color: rgba(255, 255, 255, 0.7); }

/* Las tarjetas de fondo claro colocadas sobre un degradado conservan los
   mismos colores tipográficos que en las secciones normales —los de
   "Áreas de atención"—, para no quedar en blanco sobre blanco. */
.on-grad .card h2,
.on-grad .card h3,
.on-grad .card h4 { color: var(--ink); }
.on-grad .card p { color: var(--texto); }
.on-grad .card .micro { color: var(--texto-suave); }
.on-grad .card a:not(.btn) { color: var(--violeta); }

.lead { font-size: 1.15rem; }
.micro { font-size: 0.9rem; color: var(--texto-suave); }

/* Etiqueta superior de sección (pill) */
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violeta);
  background: rgba(92, 99, 180, 0.12);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}

/* ---------- Layout ---------- */
.container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.section { padding-block: clamp(4rem, 8vw, 6.5rem); }
.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head.center { margin-inline: auto; text-align: center; }

.bg-soft { background: var(--fondo-suave); }
.grad-light { background: var(--grad-light); }
.grad-dark { background: var(--grad-dark); }
.grad-light, .grad-dark { position: relative; overflow: hidden; }

/* Brillo decorativo suave en secciones con degradado */
.grad-light::before, .grad-dark::before {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 70%);
  top: -240px; right: -160px;
  pointer-events: none;
}
.grad-light > .container, .grad-dark > .container { position: relative; z-index: 1; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.85rem 1.7rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid rgba(92, 99, 180, 0.5); outline-offset: 2px; }

.btn-primary {
  background: var(--azul);
  color: #fff;
}
.btn-primary:hover { background: #0a2f61; box-shadow: 0 14px 30px rgba(13, 58, 118, 0.28); }

.btn-ghost {
  background: transparent;
  color: var(--azul);
  border-color: rgba(13, 58, 118, 0.28);
}
.btn-ghost:hover { border-color: var(--azul); }

/* Sobre degradados */
.btn-light {
  background: #fff;
  color: var(--azul);
}
.btn-light:hover { box-shadow: 0 14px 30px rgba(13, 58, 118, 0.3); }
.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.btn .arr { font-style: normal; transition: transform 0.2s ease; }
.btn:hover .arr { transform: translate(2px, -2px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* ---------- Header / Navegación ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(227, 230, 244, 0.8);
}
.nav-wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 78px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}
/* Imagotipo horizontal (1241 × 316). El ancho manda y la altura se calcula
   sola, de modo que nunca se deforma ni altera la altura del header. */
.navbar-logo {
  width: clamp(148px, 17vw, 208px);
  flex-shrink: 0;
}
.navbar-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
}
.main-nav a, .main-nav .sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.main-nav a:hover, .main-nav .sub-toggle:hover { background: rgba(92, 99, 180, 0.1); }
.main-nav a[aria-current="page"] { color: var(--violeta); background: rgba(92, 99, 180, 0.12); }
.main-nav a:focus-visible,
.main-nav .sub-toggle:focus-visible,
.brand:focus-visible {
  outline: 3px solid var(--violeta);
  outline-offset: 2px;
}

.has-sub { position: relative; }
.sub-toggle .caret { transition: transform 0.2s ease; font-size: 0.7em; }
.has-sub.open .caret { transform: rotate(180deg); }
/* Se cualifica con .main-nav para ganar en especificidad a `.main-nav ul`,
   que de otro modo impone su `display: flex` y deja el desplegable
   permanentemente abierto. */
.main-nav .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  max-width: calc(100vw - 2rem);
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--sombra);
  border: 1px solid var(--linea);
  list-style: none;
  padding: 0.5rem;
  margin: 0;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
}
.main-nav .has-sub.open .sub-menu { display: flex; }
.sub-menu a {
  display: block;
  width: 100%;
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
}

.nav-cta { flex-shrink: 0; }
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: 0.3rem;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-light);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.hero::before {
  content: "";
  position: absolute;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 68%);
  top: -260px; left: -200px;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Slider de texto.
   Las diapositivas se apilan en la misma celda de la retícula: el slider
   mantiene siempre la altura de la más alta, de modo que ni el hero ni los
   controles saltan al cambiar de una a otra. */
.hero-slider {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

/* Todas las diapositivas comparten la misma escala de titular: el <h1> de la
   primera conserva su valor semántico, solo se iguala su tamaño visual al de
   los <h2> para que no destaque ni altere la altura del slider. */
.hero-slider h1,
.hero-slider h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
}

.slide {
  grid-area: 1 / 1;
  align-self: start;
  visibility: hidden;   /* oculta también para lectores de pantalla y tabulación */
  opacity: 0;
  pointer-events: none;
}
.slide.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: fadeUp 0.6s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.slider-nav {
  grid-area: 2 / 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
}
.slider-dots { display: flex; gap: 0.45rem; }
.slider-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.45);
  transition: width 0.25s ease, background 0.25s ease;
  padding: 0;
}
.slider-dots button.is-active { width: 26px; border-radius: 999px; background: #fff; }
.slider-arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}
.slider-arrow:hover { background: rgba(255, 255, 255, 0.3); }

/* Visual del hero: marco de arco + chips flotantes */
.hero-visual { position: relative; }
.photo-arch {
  aspect-ratio: 4 / 4.8;
  /* Ancho explícito: el contenido puede ir en posición absoluta (retrato
     recortado), así que el arco no debe depender de su tamaño intrínseco. */
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  border-radius: 220px 220px 32px 32px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 55%),
    var(--grad-dark);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: var(--sombra);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.photo-arch img { width: 100%; height: 100%; object-fit: cover; }

/* Retrato recortado con fondo transparente. Estos archivos traen aire
   alrededor de la figura, así que el encuadre se calcula por porcentajes a
   partir de su recuadro real y se pasa con --foto-ancho / --foto-izq, de modo
   que la figura quede centrada y apoyada en la base del arco. */
.photo-arch.con-foto {
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 62%),
    rgba(255, 255, 255, 0.1);
}
.photo-arch.con-foto img {
  position: absolute;
  bottom: 0;
  left: var(--foto-izq, -2%);
  width: var(--foto-ancho, 147%);
  height: auto;
  max-width: none;
  object-fit: fill;
}
.photo-arch .arch-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(7rem, 14vw, 10rem);
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
}
.float-chip {
  position: absolute;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  box-shadow: var(--sombra-suave);
  padding: 0.7rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--ink);
  z-index: 2;
}
.float-chip strong { display: block; font-weight: 800; font-size: 0.92rem; }
.float-chip .chip-ico {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad-light);
  color: #fff;
  display: grid;
  place-items: center;
}
/* A media altura, no arriba: así no cubre el rostro del retrato. */
.float-chip.pos-tl { top: 38%; left: -6%; }
.float-chip.pos-br { bottom: 10%; right: -4%; }
.float-chip.pos-bl { bottom: -4%; left: 2%; }

/* ---------- Tarjetas de tratamiento ---------- */
.card {
  background: #fff;
  border-radius: var(--radio);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--sombra-suave);
  border: 1px solid var(--linea);
}
.card-treat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-treat:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.card-treat .icon-circle {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--grad-light);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}
.card-treat p { font-size: 0.98rem; }
.card-treat .card-link {
  margin-top: auto;
  padding-top: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--violeta);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.card-treat .card-link .arr { transition: transform 0.2s ease; }
.card-treat .card-link:hover .arr { transform: translate(3px, -3px); }

.card-treat.dark {
  background: var(--grad-dark);
  border: 0;
}
.card-treat.dark h3 { color: #fff; }
.card-treat.dark p { color: rgba(255, 255, 255, 0.85); }
.card-treat.dark .icon-circle { background: rgba(255, 255, 255, 0.16); }
.card-treat.dark .card-link { color: #fff; }

/* ---------- Lista de señales (burbujas estilo chat) ---------- */
.bubble-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.bubble-list li {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff;
  padding: 0.8rem 1.2rem;
  border-radius: 20px 20px 20px 6px;
  font-size: 0.98rem;
  line-height: 1.4;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Lista con palomitas sobre fondo claro */
.check-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.4rem;
  display: grid;
  gap: 0.65rem;
}
.check-list li {
  position: relative;
  padding-left: 2rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.28em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--grad-light);
}
.check-list li::after {
  content: "✓";
  position: absolute;
  left: 4px; top: 0.22em;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
}

/* ---------- Testimonios ---------- */
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
blockquote.quote {
  margin: 0;
  background: var(--fondo-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 2rem;
  position: relative;
}
blockquote.quote::before {
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--violeta);
  opacity: 0.35;
  position: absolute;
  top: 1rem; left: 1.4rem;
}
blockquote.quote p { position: relative; }
.quote-author { font-weight: 700; color: var(--ink); margin-bottom: 0; }

/* ---------- Ubicaciones ---------- */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.loc-card h3 { display: flex; align-items: center; gap: 0.6rem; }
.loc-card .loc-pin {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad-dark);
  color: #fff;
  display: grid;
  place-items: center;
}
.loc-card .btn { padding: 0.65rem 1.2rem; font-size: 0.9rem; }

/* ---------- Valores ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.2rem;
}
.value-card { text-align: left; }
.value-card .icon-circle {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--grad-light);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.value-card p { font-size: 0.95rem; margin-bottom: 0; }

/* ---------- Pasos (PRP) ---------- */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  counter-reset: paso;
}
.step-card { position: relative; counter-increment: paso; }
.step-card::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  background: linear-gradient(120deg, var(--lila), var(--violeta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.8rem;
}
.step-card p { font-size: 0.97rem; margin-bottom: 0; }

/* ---------- FAQ (acordeón) ---------- */
.faq-list { max-width: 820px; }
.faq-list details {
  border-bottom: 1px solid var(--linea);
  padding: 0.4rem 0;
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { margin: 0; font-size: 1.08rem; }
.faq-list summary .faq-ico {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(92, 99, 180, 0.12);
  color: var(--violeta);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.1rem;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.faq-list details[open] summary .faq-ico {
  transform: rotate(45deg);
  background: var(--violeta);
  color: #fff;
}
.faq-list details p { padding-bottom: 1rem; max-width: 700px; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  font-size: 0.88rem;
  margin-bottom: 1.4rem;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 0.4rem; opacity: 0.6; }
.on-grad .breadcrumbs a { color: rgba(255, 255, 255, 0.85); }
.on-grad .breadcrumbs li:last-child { color: rgba(255, 255, 255, 0.65); }

/* ---------- Nota de revisión médica ---------- */
.review-note {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: var(--texto-suave);
  border: 1px dashed var(--linea);
  border-radius: var(--radio-sm);
  padding: 0.8rem 1.2rem;
  margin-top: 2rem;
  max-width: 620px;
}

/* ---------- CTA final ---------- */
.cta-band { text-align: center; }
.cta-band .container { max-width: 760px; }
.cta-band .btn-row { justify-content: center; margin-top: 1.6rem; }

/* ---------- Formulario ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  border: 1.5px solid #d6dbf0;
  border-radius: 14px;
  padding: 0.8rem 1rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--violeta);
  box-shadow: 0 0 0 4px rgba(92, 99, 180, 0.15);
}
.form-check {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.92rem;
}
.form-check input { margin-top: 0.3rem; accent-color: var(--violeta); }
.form-ok {
  display: none;
  background: rgba(92, 99, 180, 0.1);
  border: 1px solid rgba(92, 99, 180, 0.3);
  border-radius: var(--radio-sm);
  padding: 1.2rem 1.4rem;
  margin-top: 1.2rem;
}
.form-ok.visible { display: block; }
.form-ok p:first-child { font-weight: 700; color: var(--ink); }

/* ---------- Páginas legales ---------- */
.legal { max-width: 820px; }
.legal h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
}
.legal h2:first-of-type { margin-top: 2rem; }
.legal h3 {
  font-size: 1.05rem;
  margin-top: 1.6rem;
}
.legal ul { margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.legal li { line-height: 1.6; }
.legal .lead { margin-bottom: 0.5rem; }
.legal-fecha {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--violeta);
  background: rgba(92, 99, 180, 0.1);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.6rem;
}

/* ---------- Teléfono de urgencias ----------
   Se distingue del teléfono de citas para que no se confundan. Versión base
   sobre fondo claro; sobre degradado adopta el tratamiento en blanco. */
.urgencia {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #fff;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-sm);
  padding: 0.95rem 1.25rem;
  margin: 1.4rem 0 0;
}
.urgencia-ico {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad-dark);
  color: #fff;
  display: grid;
  place-items: center;
}
.urgencia-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.15rem;
}
.urgencia-tel {
  display: inline-block;
  /* El número no se parte en dos líneas, así que su tamaño mínimo define el
     ancho mínimo del bloque: se deja bajar hasta 1rem para que quepa a 320 px. */
  font-size: clamp(1rem, 4.2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--azul);
  text-decoration: none;
  white-space: nowrap;
}
.urgencia-tel:hover { text-decoration: underline; }
.urgencia-tel:focus-visible { outline: 3px solid var(--violeta); outline-offset: 3px; }

.on-grad .urgencia {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.on-grad .urgencia-ico { background: rgba(255, 255, 255, 0.2); }
.on-grad .urgencia-label { color: rgba(255, 255, 255, 0.75); }
.on-grad .urgencia-tel { color: #fff; }
.on-grad .urgencia-tel:focus-visible { outline-color: #fff; }

/* ---------- Aside urgencias ---------- */
.aside-urgencias {
  border-left: 5px solid var(--violeta);
  background: var(--fondo-suave);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  padding: 1.4rem 1.8rem;
}
.aside-urgencias h2 { font-size: 1.25rem; }
.aside-urgencias p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--grad-dark);
  color: rgba(255, 255, 255, 0.85);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 70%);
  bottom: -280px; left: -160px;
  pointer-events: none;
}
.site-footer .container { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
/* Isotipo sólido blanco (368 × 491). Se usa el archivo tal cual, sin
   recolorear; el ancho define la escala y la altura se ajusta sola. */
.footer-logo {
  display: block;
  width: clamp(54px, 6vw, 72px);
}
.footer-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.footer-brand h2 { color: #fff; font-size: 1.35rem; margin-top: 1.2rem; }
.footer-brand p { margin-bottom: 0.35rem; font-size: 0.95rem; }
.footer-title {
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

/* Avisos de funcionamiento y publicidad ante COFEPRIS */
.footer-avisos {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-avisos p {
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.35rem;
}
.footer-avisos-titulo {
  font-weight: 700;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 0.5rem;
}
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer-nav a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-contact p { margin-bottom: 0.5rem; font-size: 0.95rem; }
.footer-contact a { color: #fff; }

/* Datos de contacto con icono en lugar de la etiqueta escrita.
   El texto de la etiqueta sigue en el HTML para los lectores de pantalla. */
.footer-dato {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.footer-ico {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  color: #fff;
}
.footer-dato a { overflow-wrap: anywhere; }

/* Visible solo para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.footer-legal {
  padding-top: 1.6rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  display: grid;
  gap: 0.6rem;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.6rem);
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 70;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 32px rgba(18, 140, 74, 0.4);
  transition: transform 0.2s ease;
}
.wa-float:hover { transform: scale(1.08); }

/* ---------- Animación de entrada ----------
   Solo se oculta el contenido cuando main.js cargó (clase .js en <html>);
   si el JS falla, todo permanece visible. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* `margin-inline: auto` en un grid item impide que se estire, así que el
     ancho se fija de forma explícita. */
  .hero-visual { width: 100%; max-width: 420px; margin-inline: auto; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
    display: none;
    padding: 1rem clamp(1.25rem, 4vw, 2rem) 1.4rem;
  }
  .site-header.open .main-nav { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0.2rem; }
  .main-nav a, .main-nav .sub-toggle { width: 100%; justify-content: space-between; padding: 0.8rem 1rem; }
  .main-nav .sub-menu {
    position: static;
    box-shadow: none;
    border: 0;
    background: var(--fondo-suave);
    border-radius: 14px;
    margin-top: 0.2rem;
  }
  .nav-cta { display: none; }
  .site-header.open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .site-header.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

@media (max-width: 420px) {
  /* Holgura para el teléfono de urgencias en pantallas muy estrechas */
  .aside-urgencias { padding: 1.2rem 1.1rem; }
  .urgencia { padding: 0.85rem 0.95rem; gap: 0.7rem; }
  .urgencia-ico { width: 38px; height: 38px; }
}

@media (max-width: 680px) {
  .grid-3 { grid-template-columns: 1fr; }
  .quote-grid, .loc-grid, .form-grid { grid-template-columns: 1fr; }
  .bubble-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .float-chip.pos-tl { left: 0; }
  .float-chip.pos-br { right: 0; }
}