/* ==========================================================================
   Dr. Hiram Medel Martínez — Sistema de diseño
   Mobile-first. Fuente única (Mulish) por legibilidad en público 45–75 años.
   ========================================================================== */

:root{
  /* Marca (manual de marca oficial) */
  --azul-1: #5CAABF;     /* teal claro (acento) */
  --azul-2: #2574A9;     /* azul principal */
  --gris-pizarra: #6C7A89; /* texto secundario / logotipo */
  --gris-claro: #BDC3C7;
  --gris-fondo: #E6E7E8;

  /* Tinta de lectura — más oscura que el gris de marca para cumplir AA */
  --tinta: #24303A;
  --tinta-suave: #46545F;
  --blanco: #FFFFFF;

  --exito: #2E8B57;
  --whatsapp: #25D366;
  --whatsapp-oscuro: #1DA851;

  --radio: 14px;
  --radio-chico: 8px;
  --sombra: 0 4px 18px rgba(36,48,58,.10);
  --sombra-flotante: 0 6px 24px rgba(36,48,58,.22);

  --ancho-maximo: 1120px;

  --fuente: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-titulo: 'Newsreader', Georgia, serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  /* clip (y no hidden) para no romper la cabecera sticky */
  overflow-x: clip; max-width:100%;
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: var(--azul-2); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1,h2,h3,h4{
  font-family: var(--fuente);
  color: var(--azul-2);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 800;
}
h1,h2{ font-family: var(--fuente-titulo); font-weight: 600; }
h1{ font-size: clamp(1.8rem, 5.5vw, 2.75rem); color: var(--tinta); }
h2{ font-size: clamp(1.45rem, 4.2vw, 2rem); }
h3{ font-size: 1.15rem; color: var(--tinta); font-weight: 700; }
p{ margin: 0 0 1em; }
ul, ol{ padding-left: 1.2em; }
.container{
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 20px;
}
section{ padding: 48px 0; }
section.compacta{ padding: 28px 0; }
.fondo-gris{ background: var(--azul-2); color:#fff; }
.fondo-gris h1, .fondo-gris h2, .fondo-gris h3, .fondo-gris h4{ color:#fff; }
.fondo-gris p{ color:#fff; }
.fondo-gris .muted{ color:#cfe3ef; }
.fondo-gris a:not(.boton){ color:#fff; text-decoration:underline; }
.fondo-gris .faq-pregunta{ color:#fff; }
.fondo-gris .faq-pregunta .mas{ color:#fff; }
.fondo-gris .faq-item{ border-bottom-color: rgba(255,255,255,.25); }
.fondo-gris .faq-respuesta{ color:#cfe3ef; }
.fondo-gris .credenciales .item{ color:#fff; }
.fondo-gris .tarjeta-icono h3{ color:#fff; }
.fondo-gris .tarjeta-icono p{ color:#cfe3ef; }
.fondo-gris .etiqueta{ color:#08323f; }
.fondo-gris .centrado.muted{ color:#cfe3ef; }
.fondo-gris .tarjeta h3, .fondo-gris .tarjeta-sede h3, .fondo-gris .protocolo-paso h3{ color: var(--tinta); }
.fondo-gris .tarjeta p, .fondo-gris .tarjeta-sede p, .fondo-gris .protocolo-paso p{ color: var(--tinta); }
.fondo-gris .tarjeta .muted, .fondo-gris .tarjeta-sede .muted, .fondo-gris .protocolo-paso .muted{ color: var(--tinta-suave); }
.fondo-gris .tarjeta a:not(.boton), .fondo-gris .tarjeta-sede a:not(.boton){ color: var(--azul-2); }
.fondo-azul{ background: var(--azul-2); color: #fff; }
.fondo-azul h1, .fondo-azul h2, .fondo-azul h3{ color:#fff; }
.centrado{ text-align:center; }
.muted{ color: var(--tinta-suave); }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:#fff; color:var(--azul-2);
  padding:12px 18px; z-index:1000; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Botones ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor:pointer;
  min-height: 48px;
  text-decoration:none;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.boton:hover{ text-decoration:none; transform: translateY(-1px); }
.boton:active{ transform: translateY(0); }
.boton-whatsapp{
  background: var(--whatsapp); color:#fff;
}
.boton-whatsapp:hover{ background: var(--whatsapp-oscuro); }
.boton-primario{ background: var(--azul-2); color:#fff; }
.boton-primario:hover{ background:#1c5c86; }
.boton-secundario{ background:#fff; color: var(--azul-2); border-color: var(--azul-2); }
.boton-fantasma{ background:transparent; color:#fff; border-color: rgba(255,255,255,.7); }
.boton-bloque{ width:100%; }
.icono-boton{ width:20px; height:20px; flex:none; }

.fila-botones{
  display:flex; flex-wrap:wrap; gap:12px; margin-top: 18px;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 90;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--gris-fondo);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:10px; padding-bottom:10px;
}
.marca-header{ display:flex; align-items:center; gap:10px; }
.marca-header img{ height:52px; width:auto; }
.marca-header .nombre{
  font-weight:800; color: var(--tinta); font-size: .98rem; line-height:1.15;
}
.marca-header .especialidad{ display:block; font-size:.68rem; color:var(--tinta-suave); font-weight:600; }

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius: 10px; border:1px solid var(--gris-claro);
  background:#fff; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background: var(--tinta); position:relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

.nav-principal{
  position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); height:100vh;
  background:#fff; box-shadow: var(--sombra-flotante);
  /* Cerrado no se renderiza: si quedara fuera de pantalla a la derecha
     ensancharía la página y provocaría scroll horizontal en móvil. */
  display:none;
  padding: 22px 22px 100px; overflow-y:auto; z-index: 95;
}
.nav-principal.abierto{ display:block; animation: nav-entrar .25s ease; }
@keyframes nav-entrar{ from{ transform: translateX(100%); } to{ transform: translateX(0); } }
.nav-cerrar{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--gris-claro);
  background:#fff; margin-left:auto; display:flex; align-items:center; justify-content:center;
}
.nav-principal ul{ list-style:none; padding:0; margin: 18px 0 0; }
.nav-principal li{ border-bottom: 1px solid var(--gris-fondo); }
.nav-principal a{
  display:block; padding: 14px 4px; color: var(--tinta); font-weight:700;
}
.nav-principal .subnav{ padding-left: 12px; }
.nav-principal .subnav a{ font-weight:600; color: var(--tinta-suave); font-size:.95rem; }
.nav-overlay{
  position:fixed; inset:0; background: rgba(20,26,31,.45); opacity:0; pointer-events:none;
  transition: opacity .2s ease; z-index: 92;
}
.nav-overlay.visible{ opacity:1; pointer-events:auto; }

@media (min-width: 900px){
  .nav-toggle{ display:none; }
  .nav-overlay{ display:none; }
  .nav-principal{
    position:static; width:auto; height:auto; transform:none; box-shadow:none;
    padding:0; display:flex; align-items:center;
  }
  .nav-cerrar{ display:none; }
  .nav-principal ul{ display:flex; align-items:center; gap: 6px; margin:0; }
  .nav-principal li{ border:0; position:relative; }
  .nav-principal a{ padding: 10px 12px; border-radius: 8px; font-size:.92rem; }
  .nav-principal a:hover{ background: var(--gris-fondo); text-decoration:none; }
  .nav-principal .subnav{
    display:none; position:absolute; top:100%; left:0; background:#fff;
    box-shadow: var(--sombra); border-radius: var(--radio-chico); padding: 8px; min-width:240px;
  }
  .nav-principal li:hover .subnav, .nav-principal li:focus-within .subnav{ display:block; }
  .nav-cta{ margin-left: 8px; }
  .site-header .container{ max-width: 1320px; gap: 16px; }
  .nav-principal a{ white-space:nowrap; }
}
@media (min-width: 900px) and (max-width: 1099px){
  .nav-principal ul{ gap:0; }
  .nav-principal a{ padding: 8px 6px; font-size:.84rem; }
  .marca-header img{ height:42px; }
  .marca-header .especialidad{ display:none; }
}
/* En la franja más angosta, "Inicio" sobra: el logo ya lleva a la portada. */
@media (min-width: 900px) and (max-width: 979px){
  .nav-principal > ul > li:first-child{ display:none; }
}
/* Por debajo de 1400px el botón no cabe en la cabecera; ahí queda el flotante. */
@media (min-width: 900px) and (max-width: 1399px){
  .nav-cta{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  background: linear-gradient(160deg, #eef6f8 0%, #fff 55%);
  padding: 36px 0 40px;
}
.hero-perfil{ display:grid; gap:22px; align-items:center; }
@media (min-width:760px){ .hero-perfil{ grid-template-columns: 220px 1fr; gap:32px; } }
.hero-foto{
  width:112px; height:112px; border-radius:999px; overflow:hidden;
  border:4px solid #fff; box-shadow: var(--sombra-flotante); margin:0 auto;
}
@media (min-width:760px){ .hero-foto{ width:220px; height:220px; margin:0; } }
.hero-foto img{ width:100%; height:100%; object-fit:cover; }
.hero-perfil .hero-texto{ text-align:center; }
@media (min-width:760px){ .hero-perfil .hero-texto{ text-align:left; } }
.hero-especialidad{ margin-bottom:.25em; font-size:1.08rem; color:var(--azul-2); }
.hero-procedimientos{ margin-bottom:.55em; font-weight:700; }
.hero-resumen{ max-width:62ch; color:var(--tinta-suave); }
/* Portada en móvil: el botón de WhatsApp debe quedar completo en la
   primera pantalla, por encima de la barra fija inferior. */
@media (max-width:759px){
  .hero-campana{ padding: 14px 0 20px; }
  .hero-campana .hero-perfil{ gap:10px; }
  .hero-campana .hero-foto{ width:110px; height:110px; border-width:3px; }
  .hero.hero-campana .kicker{ display:none; }
  .hero-campana h1{ font-size:1.55rem; margin-bottom:.3em; }
  .hero-campana .hero-especialidad{ font-size:1.12rem; line-height:1.3; }
  .hero-campana .hero-procedimientos{ font-size:.98rem; line-height:1.4; }
  .hero-campana .hero-resumen{ font-size:.9rem; line-height:1.45; margin-bottom:0; }
  .hero-campana .fila-botones{ margin-top:14px; justify-content:center; }
  .hero-campana .fila-botones .boton-secundario{ display:none; }
}
.hero .kicker{
  display:inline-block; background: var(--azul-1); color:#08323f; font-weight:800;
  font-size:.78rem; letter-spacing:.02em; padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.datos-rapidos{
  background:#fff; border:1px solid var(--gris-fondo); border-radius: var(--radio);
  padding: 16px 18px; margin: 20px 0; box-shadow: var(--sombra);
  display:grid; gap:10px;
}
.datos-rapidos .dato{ display:flex; gap:10px; align-items:flex-start; font-size:.96rem; }
.datos-rapidos .dato svg{ flex:none; width:20px; height:20px; color: var(--azul-2); margin-top:2px; }
.calificacion{
  display:flex; align-items:center; gap:8px; font-weight:800; color:var(--tinta);
}
.estrellas{ color:#F2A93B; letter-spacing:1px; }

/* ---------- Tarjetas ---------- */
.grid{ display:grid; gap:18px; }
@media (min-width:640px){ .grid-2{ grid-template-columns: 1fr 1fr; } }
@media (min-width:900px){ .grid-3{ grid-template-columns: repeat(3,1fr); } }

.tarjeta{
  background:#fff; border:1px solid var(--gris-fondo); border-radius: var(--radio);
  padding: 20px; box-shadow: var(--sombra);
}
.tarjeta h3{ margin-bottom:.4em; }
.tarjeta a.enlace-tarjeta{ font-weight:800; font-size:.92rem; }

.tarjeta-sede{
  background:#fff; border:2px solid var(--gris-fondo); border-radius: var(--radio);
  padding: 22px; box-shadow: var(--sombra);
}
.tarjeta-sede.destacada{ border-color: var(--azul-1); }
.tarjeta-sede .etiqueta{
  display:inline-block; font-size:.72rem; font-weight:800; color:#08323f;
  background: var(--azul-1); padding:4px 10px; border-radius:999px; margin-bottom:10px;
}

/* ---------- EVA: escala de dolor ---------- */
.eva{
  background:#fff; border:1px solid var(--gris-fondo); border-radius: var(--radio);
  padding: 22px; box-shadow: var(--sombra);
}
.eva-escala{
  display:flex; gap:6px; flex-wrap:wrap; margin: 16px 0;
}
.eva-escala button{
  flex:1 1 8%; min-width:30px; height:46px; border-radius:10px; border:1px solid var(--gris-claro);
  background:#fff; font-weight:800; cursor:pointer; font-size:.95rem;
}
.eva-escala button:hover, .eva-escala button:focus-visible{ border-color: var(--azul-2); }
.eva-escala button[aria-pressed="true"]{ color:#fff; }
.eva-escala button[data-valor="0"][aria-pressed="true"]{ background:#2E8B57; border-color:#2E8B57; }
.eva-escala button[data-valor="1"][aria-pressed="true"]{ background:#4E9A55; border-color:#4E9A55; }
.eva-escala button[data-valor="2"][aria-pressed="true"]{ background:#6EA84F; border-color:#6EA84F; }
.eva-escala button[data-valor="3"][aria-pressed="true"]{ background:#93A83F; border-color:#93A83F; }
.eva-escala button[data-valor="4"][aria-pressed="true"]{ background:#C0A030; border-color:#C0A030; color:#3a2f00; }
.eva-escala button[data-valor="5"][aria-pressed="true"]{ background:#E0A233; border-color:#E0A233; color:#3a2200; }
.eva-escala button[data-valor="6"][aria-pressed="true"]{ background:#E28A38; border-color:#E28A38; }
.eva-escala button[data-valor="7"][aria-pressed="true"]{ background:#DD6E3A; border-color:#DD6E3A; }
.eva-escala button[data-valor="8"][aria-pressed="true"]{ background:#D2543B; border-color:#D2543B; }
.eva-escala button[data-valor="9"][aria-pressed="true"]{ background:#C23F3F; border-color:#C23F3F; }
.eva-escala button[data-valor="10"][aria-pressed="true"]{ background:#A32D2D; border-color:#A32D2D; }
.eva-resultado{
  margin-top: 14px; padding: 14px 16px; border-radius: var(--radio-chico);
  background: var(--gris-fondo); font-weight:700; display:none;
}
.eva-resultado.visible{ display:block; }
.eva-aviso{ font-size:.85rem; color: var(--tinta-suave); margin-top:12px; }

/* ---------- FAQ ---------- */
.faq-item{
  border-bottom: 1px solid var(--gris-fondo);
}
.faq-pregunta{
  width:100%; text-align:left; background:none; border:0; padding: 16px 4px;
  font-weight:800; font-size:1.02rem; color: var(--tinta); display:flex;
  align-items:center; justify-content:space-between; gap: 12px; cursor:pointer;
}
.faq-pregunta .mas{ flex:none; width:24px; height:24px; color:var(--azul-2); transition: transform .2s ease; }
.faq-pregunta[aria-expanded="true"] .mas{ transform: rotate(45deg); }
.faq-respuesta{ display:none; padding: 0 4px 18px; color: var(--tinta-suave); }
.faq-respuesta.visible{ display:block; }

/* ---------- Diplomas ---------- */
.galeria-diplomas{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
}
@media (min-width:640px){ .galeria-diplomas{ grid-template-columns: repeat(3,1fr); } }
.galeria-diplomas button{
  padding:0; border:1px solid var(--gris-fondo); border-radius: var(--radio-chico);
  overflow:hidden; background:#fff; cursor: zoom-in;
}
.galeria-diplomas img{ aspect-ratio: 3/4; object-fit:cover; }

/* ---------- Acordeón de trayectoria ---------- */
.acordeon-credenciales{ display:flex; flex-direction:column; gap:10px; margin:4px 0 20px; }
.acordeon-item{ background:#fff; border-radius: var(--radio-chico); box-shadow: var(--sombra); overflow:hidden; }
.acordeon-titulo{
  width:100%; text-align:left; background:none; border:0; padding:16px 18px;
  font-weight:800; font-size:1rem; color: var(--tinta); display:flex;
  align-items:center; justify-content:space-between; gap:12px; cursor:pointer;
}
.acordeon-titulo .mas{ flex:none; width:22px; height:22px; color: var(--azul-2); transition: transform .2s ease; }
.acordeon-titulo[aria-expanded="true"] .mas{ transform: rotate(45deg); }
.acordeon-cuerpo{ display:none; padding:0 18px 18px; }
.acordeon-cuerpo.visible{ display:block; }
.acordeon-cuerpo ul{ margin:0; padding-left:1.1em; color: var(--tinta-suave); }
.acordeon-cuerpo li{ margin-bottom:6px; }
.logos-instituciones{ display:flex; flex-wrap:wrap; align-items:center; gap:28px; margin-top:28px; }
.logos-instituciones img{ height:56px; width:auto; filter:grayscale(100%); opacity:.75; }

.lightbox{
  position: fixed; inset:0; background: rgba(20,26,31,.85); display:none;
  align-items:center; justify-content:center; z-index: 200; padding: 26px;
}
.lightbox.visible{ display:flex; }
.lightbox img{ max-height: 88vh; border-radius: 8px; }
.lightbox-cerrar{
  position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:999px;
  background:#fff; border:0; font-size:1.4rem; cursor:pointer;
}

/* ---------- Reseñas (sin marcado AggregateRating, solo visual) ---------- */
.resenas-cabecera{
  display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-bottom: 18px;
}
.resena-stat{ display:flex; align-items:center; gap:10px; }
.resena-stat strong{ font-size:1.4rem; color: var(--tinta); }

/* ---------- Franja de credenciales ---------- */
.credenciales{
  display:flex; flex-wrap:wrap; gap: 10px 22px; margin: 18px 0;
}
.credenciales .item{ display:flex; gap:8px; align-items:center; font-weight:700; font-size:.92rem; }
.credenciales svg{ width:20px; height:20px; color: var(--azul-1); flex:none; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--tinta); color: #cfd8de; padding: 40px 0 110px; }
.site-footer a{ color:#fff; }
.site-footer h4{ color:#fff; font-size:.95rem; margin-bottom:.7em; }
.footer-grid{ display:grid; gap:26px; }
@media (min-width:760px){ .footer-grid{ grid-template-columns: repeat(4,1fr); } }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:.92rem; }
.footer-legal{
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 18px;
  font-size:.8rem; color:#9fadb6; display:flex; flex-wrap:wrap; gap:10px 18px;
}
.footer-legal a{ color:#c9d3d9; }

/* ---------- Barra fija móvil ---------- */
.barra-movil{
  position: fixed; left:0; right:0; bottom:0; width:100%; z-index: 80;
  background:#fff; border-top:1px solid var(--gris-fondo);
  box-shadow: 0 -6px 18px rgba(0,0,0,.08);
  display:flex; gap:10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.barra-movil .boton{ flex:1; font-size:.92rem; padding: 12px 10px; }
.barra-movil .boton-whatsapp{ font-size:.86rem; line-height:1.15; text-align:center; padding: 8px 10px; }
.barra-movil .boton-whatsapp{ gap:.4em; }
.barra-movil .icono-boton{ width:18px; height:18px; }
@media (min-width: 900px){ .barra-movil{ display:none; } }
body{ padding-bottom: 76px; }
@media (min-width: 900px){ body{ padding-bottom:0; } }

/* ---------- Asistente guiado (chatbot sin IA) ---------- */
.asistente-fab{
  /* En móvil va a la izquierda para no taparse con el botón flotante de WhatsApp. */
  position: fixed; left: 20px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 85;
  width:60px; height:60px; border-radius:999px; background: var(--azul-2); color:#fff;
  border:0; box-shadow: var(--sombra-flotante); display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
@media (min-width:900px){ .asistente-fab{ left:auto; right: 20px; bottom: 96px; } }
.asistente-fab svg{ width:28px; height:28px; }
.asistente-panel{
  position: fixed; right: 14px; bottom: 158px; left:14px; z-index: 86;
  max-width: 380px; margin-left:auto;
  background:#fff; border-radius: var(--radio); box-shadow: var(--sombra-flotante);
  display:none; flex-direction:column; max-height: 70vh; overflow:hidden;
  border: 1px solid var(--gris-fondo);
}
@media (min-width:900px){ .asistente-panel{ bottom: 96px; } }
.asistente-panel.abierto{ display:flex; }
.whatsapp-flotante{
  /* En móvil sube por encima de la barra fija inferior para no tapar "Llamar". */
  position:fixed; right:20px; bottom:calc(86px + env(safe-area-inset-bottom)); z-index:9999;
  width:58px; height:58px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:var(--whatsapp); color:#fff; box-shadow:var(--sombra-flotante);
  border:3px solid #fff; transition:transform .15s ease, background .15s ease;
}
.whatsapp-flotante:hover{ background:var(--whatsapp-oscuro); color:#fff; transform:translateY(-2px); }
.whatsapp-flotante svg{ width:28px; height:28px; }
.menu-abierto .whatsapp-flotante{ display:none; }
@media (min-width:900px){ .whatsapp-flotante{ right:20px; bottom:20px; } }
.asistente-cabecera{
  background: var(--azul-2); color:#fff; padding: 14px 16px; display:flex; align-items:center; justify-content:space-between;
}
.asistente-cabecera strong{ font-size:.95rem; }
.asistente-cabecera button{ background:transparent; border:0; color:#fff; font-size:1.3rem; cursor:pointer; }
.asistente-cuerpo{ padding: 16px; overflow-y:auto; }
.asistente-mensaje{
  background: var(--gris-fondo); border-radius: 12px 12px 12px 2px; padding: 12px 14px;
  margin-bottom: 14px; font-size:.95rem;
}
.asistente-opciones{ display:grid; gap:8px; }
.asistente-opciones button{
  text-align:left; padding: 12px 14px; border-radius: 10px; border:1px solid var(--gris-claro);
  background:#fff; font-weight:700; font-size:.92rem; cursor:pointer;
}
.asistente-opciones button:hover{ border-color: var(--azul-2); background:#f3f9fb; }
.asistente-volver{
  margin-top: 10px; font-size:.85rem; font-weight:700; background:none; border:0;
  color: var(--azul-2); cursor:pointer; padding: 6px 0;
}

/* ---------- Utilidades ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; background: var(--gris-fondo);
  color: var(--tinta); font-weight:700; font-size:.82rem; padding: 6px 12px; border-radius:999px;
}
.separador{ height:1px; background: var(--gris-fondo); border:0; margin: 32px 0; }
.mapa-embebido{ border-radius: var(--radio); overflow:hidden; border:1px solid var(--gris-fondo); }
.mapa-embebido iframe{ width:100%; height: 280px; border:0; display:block; }
.aviso-caja{
  background:#fff7e6; border:1px solid #f2d9a3; color:#6b4d00; border-radius: var(--radio-chico);
  padding: 14px 16px; font-size:.9rem;
}
.franja-cta{
  background: var(--azul-2); color:#fff; border-radius: var(--radio); padding: 28px 22px; text-align:center;
}
.franja-cta .fila-botones{ justify-content:center; }

/* ---------- Protocolo escalonado ---------- */
.protocolo{ counter-reset: paso; }
.protocolo-paso{
  position:relative; background:#fff; border:1px solid var(--gris-fondo); border-radius: var(--radio);
  padding: 24px 20px 20px; text-align:center;
}
.protocolo-paso::before{
  counter-increment: paso; content: counter(paso);
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:999px; background: var(--azul-2); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; box-shadow: var(--sombra);
}
.protocolo-paso h3{ margin-top:8px; }
.protocolo-conector{ display:none; }
@media (min-width:900px){
  .protocolo{ display:grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items:center; gap:6px; }
  .protocolo-conector{ display:block; color: var(--gris-claro); font-size:1.6rem; text-align:center; }
}

/* ---------- Banner de urgencia ---------- */
.banner-urgencia{
  background: #fff7ee; border:1px solid #f2c98f; border-radius: var(--radio);
  padding: 18px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; justify-content:space-between;
}
.banner-urgencia .texto{ flex:1 1 260px; }
.banner-urgencia h3{ margin:0 0 .2em; color:#8a4b00; font-size:1.05rem; }
.banner-urgencia p{ margin:0; color:#6b4d00; font-size:.94rem; }

/* ---------- Íconos de padecimiento ---------- */
.lista-padecimientos{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.lista-padecimientos li{ display:flex; gap:12px; align-items:flex-start; }
.lista-padecimientos .icono-pad{
  flex:none; width:38px; height:38px; border-radius:10px; background: var(--gris-fondo);
  display:flex; align-items:center; justify-content:center; color: var(--azul-2);
}
.lista-padecimientos .icono-pad svg{ width:20px; height:20px; }
.lista-padecimientos strong{ display:block; }

/* ---------- Íconos circulares tipo insignia (servicios/padecimientos) ---------- */
.grid-iconos{ display:grid; gap:22px; grid-template-columns: repeat(2,1fr); }
@media (min-width:640px){ .grid-iconos{ grid-template-columns: repeat(3,1fr); } }
.tarjeta-icono{ text-align:center; }
.tarjeta-icono .circulo{
  width:84px; height:84px; border-radius:999px; background: var(--azul-1);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.tarjeta-icono .circulo svg{ width:38px; height:38px; color:#fff; }
.icono-insignia{
  display:flex; align-items:center; justify-content:center;
  width:112px; height:112px; margin:0 auto 14px; padding:12px;
  border-radius: var(--radio); background:#fff; box-shadow: var(--sombra); overflow:hidden;
}
.tarjeta-icono .icono-img{ height:100%; width:100%; max-width:100%; display:block; margin:0; object-fit:contain; }
.tarjeta-icono h3{ font-size:1rem; margin-bottom:.35em; }
.tarjeta-icono p{ font-size:.9rem; color: var(--tinta-suave); }

/* ---------- Tarjeta de confianza (reseñas) ---------- */
.tarjeta-confianza{
  background: linear-gradient(155deg, var(--tinta) 0%, #33475a 100%);
  color:#fff; border-radius: var(--radio); padding: 28px 24px; display:grid; gap:18px;
}
.tarjeta-confianza .stats{ display:flex; flex-wrap:wrap; gap:22px; }
.tarjeta-confianza .stat{ display:flex; align-items:center; gap:10px; }
.tarjeta-confianza .stat strong{ font-size:1.5rem; }
.tarjeta-confianza .stat .estrellas{ color:#F2A93B; }
.tarjeta-confianza p{ color:#cfd8de; margin:0; }
.tarjeta-confianza a{ color:#fff; text-decoration:underline; }