/* Dr. Darío Villarreal: marca azul, mucho blanco y una sola familia tipográfica. */
@font-face { font-family: Gabarito; src: url(/fonts/gabarito-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Gabarito; src: url(/fonts/gabarito-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --tinta: #0f2b3d;
  --tinta-suave: #41606f;
  --azul: #005687;
  --azul-osc: #00416a;
  --marca: #3ea1d9;
  --cielo: #eaf5fb;
  --linea: #cfe3ef;
  --blanco: #fff;
  --wa: #0e7a55;
  --wa-osc: #0b6345;
  --radio: 16px;
  --sangria: clamp(16px, 4vw, 40px);
  --separacion: clamp(56px, 8vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 1.125rem/1.6 Gabarito, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--azul); text-underline-offset: 3px; }
a:hover { color: var(--azul-osc); }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 4px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
small { font-size: .5em; font-weight: 400; letter-spacing: 0; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.08; letter-spacing: -.018em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.45rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -.026em; color: var(--azul); }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem); color: var(--azul); }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.008em; }

.envoltura { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--sangria); }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; background: var(--azul); color: var(--blanco); border-radius: 8px; }
.saltar:focus { top: 12px; color: var(--blanco); }

/* Botones */
.i { width: 1.25em; height: 1.25em; flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 12px 24px; border: 2px solid transparent; border-radius: 999px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; }
.btn-wa { background: var(--wa); color: var(--blanco); }
.btn-wa:hover { background: var(--wa-osc); color: var(--blanco); }
.btn-llamar { background: var(--azul); color: var(--blanco); }
.btn-llamar:hover { background: var(--azul-osc); color: var(--blanco); }
.btn-claro { background: var(--blanco); border-color: var(--azul); color: var(--azul); }
.btn-claro:hover { background: var(--cielo); }
.btn-contorno { border-color: var(--blanco); color: var(--blanco); }
.btn-contorno:hover { background: var(--blanco); color: var(--azul); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.enlace { font-weight: 700; }

/* Botón flotante en celular: el pie reserva su espacio para que no tape contenido */
.btn-flotante { position: fixed; right: 16px; bottom: 16px; z-index: 20; box-shadow: 0 8px 24px rgba(15, 43, 61, .28); }

/* Encabezado */
.sitio-cabecera { border-bottom: 1px solid var(--linea); }
.cabecera-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-block: 12px; }
.marca { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--azul); text-decoration: none; }
.marca img { width: auto; height: 50px; }
.marca-texto { display: grid; line-height: 1.2; }
.marca-texto strong { font-size: 1.125rem; letter-spacing: -.01em; }
.marca-texto span { font-size: .875rem; color: var(--tinta-suave); }
.navegacion { display: flex; flex-wrap: wrap; gap: 0 20px; margin-inline: -4px; }
.navegacion a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; color: var(--tinta); font-size: 1rem; text-decoration: none; }
.navegacion a:hover { color: var(--azul); text-decoration: underline; }

/* Portada del inicio */
.portada-inicio-rejilla { display: grid; gap: 24px; padding-block: clamp(28px, 5vw, 56px) 0; }
.portada-texto { align-self: center; padding-bottom: 8px; }
.portada-quien { margin: 20px 0 0; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.4; }
.portada-tesis { margin: 16px 0 0; padding-left: 14px; border-left: 4px solid var(--marca); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--azul); }
.portada-datos { margin: 18px 0 0; font-size: 1rem; color: var(--tinta-suave); }
.portada-foto { justify-self: center; align-self: end; width: min(100%, 460px); }
.portada-foto img { width: 100%; }

/* Franja de credenciales */
.franja { background: var(--azul); color: var(--blanco); }
.franja ul { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-block: 18px; font-size: 1rem; line-height: 1.35; }

/* Mapa del pie */
.mapa { padding-block: var(--separacion); background: var(--cielo); }
.mapa-ayuda { margin: 10px 0 0; font-size: 1.25rem; color: var(--tinta-suave); }
.mapa-rejilla { display: grid; gap: 28px; margin-top: 28px; }
.mapa-dibujo { min-width: 0; }
.pie { width: 100%; overflow: visible; }
.pie-contorno { fill: var(--blanco); stroke: var(--azul); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pie-detalle { fill: none; stroke: var(--marca); stroke-width: 2.5; stroke-linecap: round; }
.pin-area { fill: transparent; }
.pin-punto { fill: var(--azul); stroke: var(--blanco); stroke-width: 3; transition: fill .15s, stroke .15s; }
.pin text { fill: var(--blanco); font: 700 27px Gabarito, system-ui, sans-serif; pointer-events: none; }
a.pin:hover .pin-punto, a.pin:focus-visible .pin-punto { fill: var(--wa); }
a.pin:focus-visible { outline: none; }
.mapa-lista { display: grid; gap: 8px; align-self: center; }
.padecimiento { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px 8px 10px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tinta); font-weight: 700; line-height: 1.2; text-decoration: none; }
span.padecimiento { font-weight: 400; }
a.padecimiento { color: var(--azul); transition: border-color .15s, background-color .15s; }
a.padecimiento:hover { border-color: var(--azul); color: var(--azul); }
.padecimiento > span:nth-child(2) { flex: 1; }
.num { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--azul); color: var(--blanco); font-size: 1rem; font-weight: 700; }
.num-vacio { background: transparent; }
.i-flecha { transition: transform .15s; }
a.padecimiento:hover .i-flecha { transform: translateX(3px); }
/* Al pasar por la lista se ilumina el punto del dibujo */
.mapa-rejilla:has([data-zona="1"]:hover) [data-pin="1"] .pin-punto,
.mapa-rejilla:has([data-zona="2"]:hover) [data-pin="2"] .pin-punto,
.mapa-rejilla:has([data-zona="3"]:hover) [data-pin="3"] .pin-punto,
.mapa-rejilla:has([data-zona="4"]:hover) [data-pin="4"] .pin-punto,
.mapa-rejilla:has([data-zona="5"]:hover) [data-pin="5"] .pin-punto,
.mapa-rejilla:has([data-zona="6"]:hover) [data-pin="6"] .pin-punto,
.mapa-rejilla:has([data-zona="7"]:hover) [data-pin="7"] .pin-punto { fill: var(--wa); }

/* Sobre mí */
.sobre { padding-block: var(--separacion); }
.sobre-rejilla { display: grid; gap: 28px; }
.sobre-foto img { width: 100%; max-width: 440px; border-radius: 220px 220px var(--radio) var(--radio); }
.sobre-texto h2 { margin-bottom: 20px; }

/* Credenciales */
.credenciales { margin-top: 40px; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--linea); border-radius: var(--radio); }
.credenciales h2 { font-size: 1.375rem; letter-spacing: -.01em; }
.credenciales ul { display: grid; gap: 10px; margin-top: 14px; }
.credenciales li { padding-left: 16px; border-left: 3px solid var(--marca); line-height: 1.4; }

/* Ubicación y horario */
.ubicacion { padding-block: var(--separacion); background: var(--cielo); }
.ubicacion-rejilla { display: grid; gap: 32px; }
.ubicacion-lugar { margin: 16px 0 4px; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.horario { width: 100%; border-collapse: collapse; background: var(--blanco); border-radius: var(--radio); overflow: hidden; }
.horario caption { padding-bottom: 8px; font-weight: 700; text-align: left; color: var(--azul); }
.horario th, .horario td { padding: 10px 16px; border-bottom: 1px solid var(--linea); text-align: left; font-weight: 400; }
.horario tr:last-child th, .horario tr:last-child td { border-bottom: 0; color: var(--tinta-suave); }
.horario td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Páginas internas */
.migas { padding-block: 14px 0; font-size: .9375rem; color: var(--tinta-suave); }
.migas ol { display: flex; flex-wrap: wrap; gap: 4px; }
.migas li + li::before { content: "›"; margin-right: 4px; }
.portada-tema { padding-block: 16px clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--linea); }
.portada-tema-rejilla { display: grid; gap: 24px; align-items: center; }
.portada-tema h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); }
.entrada { margin: 18px 0 0; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem); line-height: 1.45; }
.portada-tema-pie { max-width: 460px; }
.zona-halo { fill: var(--marca); opacity: .22; }
.zona-punto { fill: var(--azul); stroke: var(--blanco); stroke-width: 4; }
.portada-urgencias { margin-top: 14px; padding-top: clamp(28px, 4vw, 48px); background: var(--cielo); border-bottom: 0; }
.portada-urgencias h1 { max-width: 16ch; }
.portada-urgencias .entrada { max-width: 62ch; }
.precio-grande { padding: 24px; background: var(--azul); color: var(--blanco); border-radius: var(--radio); }
.precio-grande p { margin: 0; }
.precio-cifra { font-size: clamp(3rem, 2rem + 4vw, 5rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }

.lectura-rejilla { display: grid; gap: 32px; padding-block: 8px 24px; }
.lectura-sola { padding-block: 8px 48px; }
.lectura { max-width: 42rem; }
.lectura h2 { margin: 1.7em 0 .4em; font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.lectura h3 { margin: 1.3em 0 .25em; color: var(--azul); }
.lectura ul { display: grid; gap: 6px; margin-bottom: 1em; }
.lectura li { position: relative; padding-left: 22px; }
.lectura li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--marca); }
.lectura-foto { margin: 8px 0 8px; }
.lectura-foto img { width: 100%; border-radius: var(--radio); }
.pronto { padding: 14px 18px; background: var(--cielo); border-left: 4px solid var(--azul); border-radius: 0 var(--radio) var(--radio) 0; }
.ficha { align-self: start; padding: 22px; background: var(--cielo); border-radius: var(--radio); }
.ficha p { margin-bottom: .6em; line-height: 1.4; }
.ficha .btn { width: 100%; margin-top: 8px; }
.ficha .horario { margin-bottom: 16px; }
.ficha-titulo { font-weight: 700; color: var(--azul); }
.ficha-precio { font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--azul); }
.llamado { margin-top: var(--separacion); padding-block: clamp(40px, 6vw, 72px); background: var(--azul); color: var(--blanco); }
.llamado h2 { color: var(--blanco); max-width: 20ch; }
.relacionadas { padding-block: 28px; }
.relacionadas ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.relacionadas a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.lectura-legal h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); margin-top: 16px; }
.lectura-legal h2 { font-size: 1.375rem; }
.fecha { margin-top: 2em; color: var(--tinta-suave); }
.no-encontrada { padding-block: var(--separacion); }

/* Pie de página */
.aviso-urgencias { background: var(--cielo); border-top: 1px solid var(--linea); }
.aviso-urgencias a { display: flex; align-items: center; min-height: 56px; padding-block: 12px; font-weight: 700; line-height: 1.3; }
.sitio-pie { padding-block: 40px 104px; background: var(--azul-osc); color: var(--blanco); font-size: 1rem; line-height: 1.5; }
.sitio-pie a { color: var(--blanco); }
.sitio-pie a:hover { color: var(--cielo); }
.pie-rejilla { display: grid; gap: 24px; }
.pie-rejilla p { margin-bottom: .7em; }
.pie-nombre { font-weight: 700; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 0 18px; }
.pie-enlaces a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 899.98px) {
  .acciones .btn { width: 100%; }
  .navegacion { gap: 0 14px; }
  .navegacion a { font-size: .9375rem; }
  .solo-escritorio { display: none; }
  .portada-tema-pie { width: min(70%, 260px); margin-inline: auto; }
}

@media (min-width: 900px) {
  .portada-inicio-rejilla { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; }
  .portada-texto { padding-bottom: 56px; }
  .portada-foto { width: 100%; max-width: 500px; justify-self: end; }
  .mapa-rejilla { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; }
  .sobre-rejilla { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 56px; align-items: center; }
  .credenciales ul { grid-template-columns: 1fr 1fr; gap: 14px 40px; }
  .ubicacion-rejilla { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .portada-tema-rejilla { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 56px; }
  .lectura-rejilla { grid-template-columns: minmax(0, 42rem) 320px; justify-content: space-between; }
  .ficha { position: sticky; top: 16px; margin-top: 40px; }
  .pie-rejilla { grid-template-columns: 1.1fr 1.2fr .9fr; gap: 40px; }
  .sitio-pie { padding-bottom: 40px; }
  .btn-flotante { display: none; }
}

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