/* Web del Dr. Ricardo Guzmán · rediseño del 12/10/2026 (referencia: web del Dr. Nervo). Un solo tema claro con bandas
   oscuras: azul Galeras (#14303D) para portada, cruzado, trayectoria, cierre y pie; gris claro en vez del verde niebla
   (pedido de Ricardo: «más premium»); blanco en el resto. Petróleo #114358 = color del logo, para botones sobre claro.
   Texto de lectura ≥ 7:1 (pizarra sobre blanco 10:1 y sobre gris 8,6:1; hueso sobre Galeras 12:1). El celeste #8DB8E8 (la
   rodilla del logo sobre oscuro) solo en el titular grande (6,6:1, AAA para letra grande). El barniz, solo en líneas.
   Imágenes con IA siempre con su asterisco (.ilustrativa) y la nota del pie. Letra Atkinson Hyperlegible (baja visión) y Source Serif 4. */
:root {
  --noche: #14303D; --petroleo: #114358; --hueso: #F4F1EA; --barniz: #C46A2B; --celeste: #8DB8E8;
  --gris: #EFEFEC; --blanco: #FFFFFF; --pizarra: #33464F; --linea: #DCDCD7;
  --panel: #1F4152; /* tarjeta sobre Galeras; hueso encima da 10:1 */
  --bruma: #C9D6DC; /* texto secundario sobre Galeras: 9,6:1 */
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --texto: "Atkinson Hyperlegible", Verdana, "Segoe UI", sans-serif;
  --r: 18px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--blanco); color: var(--pizarra); font: 400 19px/1.65 var(--texto); padding-inline: 20px; padding-block: 0; }
.ancho { max-width: 1180px; margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; color: var(--noche); text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.05; letter-spacing: -.015em; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.75rem); line-height: 1.12; letter-spacing: -.01em; }
h3 { font-size: 1.32rem; line-height: 1.3; }
p { margin: 0; max-width: 64ch; }
a { color: var(--petroleo); }
:focus-visible { outline: 3px solid var(--barniz); outline-offset: 3px; border-radius: 6px; }
.etiqueta { display: inline-flex; align-items: center; gap: 10px; font: 700 .92rem/1.25 var(--texto); letter-spacing: .12em; text-transform: uppercase; text-wrap: balance; color: var(--petroleo); }
.etiqueta:has(a) { align-items: baseline; } /* la raya acompaña a la primera línea */
.etiqueta a { color: inherit; padding-block: 12px; } /* en línea: el relleno agranda la zona de toque sin mover el texto */
.etiqueta::before { content: ""; width: 28px; height: 2px; background: var(--barniz); flex: none; }
.pend { font: 700 max(.85em, 14px)/1.1 var(--texto); background: var(--blanco); color: var(--noche); border: 1.5px dashed var(--barniz); border-radius: 6px; padding: 3px 7px; display: inline-block; max-width: 100%; vertical-align: baseline; }
.aviso { margin-inline: -20px; background: var(--hueso); color: var(--noche); font-size: 1rem; text-align: center; padding: 8px 16px; }

/* Bandas a todo el ancho (el body tiene 20 px de margen lateral) */
.banda, .oscuro { margin-inline: -20px; padding-inline: 20px; }
.banda { background: var(--gris); }
.oscuro { background: var(--noche); color: var(--hueso); }
.oscuro h1, .oscuro h2, .oscuro h3 { color: var(--hueso); }
.oscuro .etiqueta { color: var(--hueso); }
.oscuro p, .oscuro li { color: var(--hueso); }
.oscuro a:not(.boton) { color: var(--hueso); }

/* Cabecera oscura, como la portada */
.cab-banda { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(244, 241, 234, .12); }
.cab { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
.firma { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.oscuro .firma { color: var(--hueso); }
.firma img { width: 52px; height: 52px; flex: none; }
.firma b { font: 600 1.2rem/1.1 var(--display); display: block; }
.firma small { font-size: 1rem; line-height: 1.3; color: var(--bruma); display: block; }
.menu { display: flex; gap: 18px; flex-wrap: nowrap; white-space: nowrap; } /* en una línea: si se parte, la cabecera pegajosa pasa de 80 a 150 px */
.oscuro .menu a { text-decoration: none; font-weight: 700; color: var(--hueso); font-size: 1rem; padding: 10px 0; border-bottom: 2px solid transparent; }
.oscuro .menu a:hover { border-color: var(--barniz); }
@media (max-width: 1200px) { .menu { display: none; } } /* por debajo no cabe en una línea junto a la firma y el botón (en el móvil se navega por las tarjetas y el pie) */

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; background: var(--petroleo); color: var(--blanco);
  font: 700 1.05rem/1.15 var(--texto); text-decoration: none; padding: 14px 26px; border-radius: 999px; transition: transform .25s, box-shadow .25s, background .25s; white-space: nowrap; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17, 67, 88, .28); }
.boton svg { width: 22px; height: 22px; flex: none; }
.boton.claro { background: var(--hueso); color: var(--noche); }
.boton.claro:hover { background: var(--blanco); box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }
.boton.secundario { background: transparent; color: var(--petroleo); box-shadow: inset 0 0 0 2px currentColor; }
.oscuro .boton.secundario { color: var(--hueso); }
.boton.secundario:hover { background: rgba(244, 241, 234, .08); }
.boton.chico { min-height: 46px; padding: 10px 20px; font-size: .98rem; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 640px) { .cab .boton { display: none; } .botones .boton { width: 100%; white-space: normal; } }

/* Portada: retrato recortado sobre Galeras con un halo petróleo, como el hero de Nervo */
.hero-banda { overflow: hidden; background: radial-gradient(60% 90% at 78% 55%, #1F4152 0%, var(--noche) 70%); }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: end; padding-top: clamp(32px, 5vw, 64px); }
.hero > div:not(.retrato) { min-width: 0; display: grid; gap: 24px; padding-bottom: clamp(40px, 6vw, 80px); }
.hero h1 em, .pagina-hero h1 em { font-style: italic; color: var(--celeste); }
.pagina-hero { margin-bottom: 0; }
.lead { font-size: 1.2rem; }
.oscuro .lead { color: var(--bruma); }
.retrato { align-self: end; justify-self: center; width: 100%; max-width: 500px; }
.retrato img { width: 100%; height: auto; max-height: 58vh; object-fit: contain; object-position: bottom; display: block;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero > div:not(.retrato) { padding-bottom: 8px; }
  .retrato { max-width: 320px; }
  .retrato img { max-height: 46vh; }
}

/* Cabecera con foto IA del doctor (portada): foto con esquinas, centrada frente al texto */
.hero-foto { align-items: center; padding-bottom: clamp(32px, 5vw, 64px); }
.hero-foto .foto { justify-self: center; width: 100%; max-width: 440px; }
.hero-foto .foto img { aspect-ratio: 3 / 4; object-position: 50% 10%; } /* si la altura la topa (1280×620), que el recorte no se coma la cabeza (centrado tocaba el pelo) */
@media (min-width: 861px) { .hero.hero-foto { padding-block: 32px; } /* .hero (más abajo) le quitaba el de arriba y la foto quedaba a 18 px de la cabecera */ .hero-foto .foto img { max-height: calc(100svh - 190px); } }
@media (max-width: 860px) { .hero-foto .foto { max-width: 320px; order: -1; } } /* en el móvil, la foto primero */
.hero-foto .retrato-foto img { object-position: 50% 0; } /* Quién soy (en 1280×620 el marco sale apaisado: que el recorte sea abajo, no la cabeza): el retrato recortado va en un marco (fondo gris de .foto) como las demás cabeceras; suelto, su corte del pecho flotaba a media franja */
.foto img[src$="/lajas.jpg"] { object-position: 62% 50%; } /* Ecuador: puente y santuario en el recorte vertical */
@media (max-width: 640px) { .hero-foto .foto { max-width: none; } .hero-foto .foto img { aspect-ratio: 4 / 3; object-position: 50% 15%; } } /* móvil: foto apaisada (3:4 ocupaba el 55 % de la pantalla y dejaba el título bajo el botón flotante) */

/* Credenciales en franja, bajo la portada */
.sellos { list-style: none; margin: 0 auto; padding: 22px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; border-bottom: 1px solid var(--linea); }
.sellos li { display: grid; gap: 2px; padding-left: 16px; border-left: 2px solid var(--barniz); min-width: 0; }
.sellos b { font: 600 1.15rem/1.25 var(--display); color: var(--noche); }
.sellos span { font-size: 1.0625rem; line-height: 1.4; }
@media (max-width: 760px) { .sellos { grid-template-columns: 1fr; } }

section { padding-block: clamp(48px, 5vw, 68px); }
section[id] { scroll-margin-top: 48px; } /* la cabecera pegajosa (81 px) tapa solo parte del relleno de arriba: la etiqueta se ve */
.cabeza { display: grid; gap: 14px; margin-bottom: 36px; }
main > section:first-child { padding-top: 28px; }

/* Imagen con su rótulo «Imagen ilustrativa» */
.foto { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--linea); }
.foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* Asterisco pequeño (la nota del pie explica que es IA) */
.ilustrativa { position: absolute; left: 10px; bottom: 10px; width: 22px; height: 22px; display: grid; place-items: center;
  background: rgba(20, 48, 61, .92); color: var(--hueso); font: 700 24px/1 var(--texto); padding-top: 3px; /* asterisco de 8 px centrado (medido) */ border-radius: 50%; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nota-ia { font-size: 1rem; } /* sin opacidad: baja el contraste */
.foto img[src$="/artroscopia.jpg"] { object-position: 100% 0; } /* foto alta (tema estirado, 861-1000 px): el recorte lateral se come la cara del doctor, que está a la derecha */
@media (min-width: 861px) and (max-height: 960px) { .foto img[src$="/infiltracion.jpg"] { object-position: 50% 100%; } } /* a 3:1 no caben cara y rodilla: mejor manos, aguja y rodilla que la cara cortada por los ojos */
.foto img[src$="/consulta-tableta.jpg"] { object-position: 50% 20%; } /* a 5:2, cara entera y la tableta asomando */ /* 16:9 recortada a 2:1 o 3:1: que no corte la cara del doctor */

/* Antes de operar: cuatro pasos con foto */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: paso; }
.pasos li { background: var(--blanco); border-radius: var(--r); padding: 12px 12px 24px; display: grid; gap: 10px; align-content: start; counter-increment: paso; min-width: 0;
  grid-template-columns: minmax(0, 1fr); box-shadow: 0 1px 0 var(--linea); }
.pasos li > .foto { grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; }
.pasos li > .foto img { aspect-ratio: 3 / 2; }
.pasos li::before { content: counter(paso, decimal-leading-zero); font: 600 1.1rem/1 var(--display); color: var(--petroleo); padding-left: 12px; margin-bottom: -4px; } /* el número, encima del título: al lado, un título de dos líneas («Opciones / sin cirugía») quedaba sangrado */
.pasos h3 { padding-inline: 12px; }
.pasos li > p { grid-column: 1 / -1; padding-inline: 12px; font-size: 1.125rem; }
@media (min-width: 981px) { .pasos li > .foto img { aspect-ratio: 16 / 9; } .pasos.viaje { grid-template-columns: 1.3fr 1.15fr 1fr 1fr; } .pasos.viaje li > .foto img { aspect-ratio: 8 / 3; } /* Ecuador: «Documentos» es el paso más largo; así la sección cabe en 1366×768 */ }
@media (max-width: 980px) { .pasos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .pasos { grid-template-columns: 1fr; } }

/* Servicios: tarjetas con foto completa y nombre; la descripción aparece al pasar el ratón (en pantallas táctiles, siempre) */
.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tarjeta { position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; text-decoration: none; isolation: isolate; background: var(--noche); }
.tarjeta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; z-index: -2; }
.tarjeta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 48, 61, 0) 30%, rgba(20, 48, 61, .92) 100%); transition: background .4s; }
.tarjeta > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 22px 20px; display: grid; gap: 6px;
  background: linear-gradient(180deg, rgba(20, 48, 61, 0) 0, rgba(20, 48, 61, .92) 34px); } /* el texto, siempre sobre Galeras al 92 %: 7:1 aunque la foto sea clara */
.tarjeta h3 { color: var(--hueso); font-size: 1.45rem; }
.tarjeta p { color: var(--hueso); font-size: 1.0625rem; line-height: 1.45; }
.tarjeta .ilustrativa { left: auto; right: 12px; top: 12px; bottom: auto; }
@media (hover: hover) {
  .tarjeta p { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .3s; }
  .tarjeta:hover p, .tarjeta:focus-visible p { max-height: 8em; opacity: 1; }
  .tarjeta:hover::after, .tarjeta:focus-visible::after { background: linear-gradient(180deg, rgba(20, 48, 61, .25) 0%, rgba(20, 48, 61, .95) 100%); }
  .tarjeta:hover img { transform: scale(1.05); }
}
@media (min-width: 981px) { .tarjeta { aspect-ratio: 2 / 1; } } /* servicios cabe en 1366×768 */
@media (max-width: 980px) { .tarjetas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tarjetas { grid-template-columns: 1fr; } .tarjeta { aspect-ratio: 3 / 2; } .tarjeta > div { padding: 40px 18px 16px; } }
/* En pantallas táctiles la descripción está siempre a la vista: va debajo de la foto, sobre Galeras, para que la foto se vea entera */
@media (hover: none) {
  .tarjeta { aspect-ratio: auto; }
  .tarjeta img { position: static; display: block; height: auto; aspect-ratio: 16 / 9; }
  .tarjeta::after { content: none; }
  .tarjeta > div { position: static; background: var(--noche); padding: 16px 18px 20px; }
}

/* Bloques de tema (rodilla, cruzado, niños, segunda opinión) */
.tema { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.tema > div { min-width: 0; display: grid; gap: 16px; }
.aparte { display: grid; gap: 18px; min-width: 0; }
.lista { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.ficha { background: var(--blanco); border-radius: var(--r); padding: 28px; display: grid; gap: 12px; border: 1px solid var(--linea); }
.oscuro .ficha { background: var(--panel); border-color: transparent; }
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cifra { background: var(--gris); border-radius: 14px; padding: 18px; min-width: 0; }
.oscuro .cifra { background: var(--panel); }
.cifra b { display: block; font: 600 2.1rem/1.1 var(--display); color: var(--noche); white-space: nowrap; }
.oscuro .cifra b { color: var(--hueso); }
.cifra span { font-size: 1.0625rem; line-height: 1.45; display: block; margin-top: 6px; }
@media (max-width: 480px) { .cifras { grid-template-columns: 1fr; } }
.nota { font-size: 1.0625rem; }
/* El póster acompaña, no manda: miniatura con enlace para verlo en grande */
.poster { display: flex; align-items: center; gap: 18px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; }
.poster img { width: 120px; height: auto; flex: none; border-radius: 10px; border: 3px solid var(--panel); display: block; }
.poster:hover img { border-color: var(--hueso); }
@media (max-width: 860px) { .tema { grid-template-columns: 1fr; } }
@media (min-width: 861px) { #cruzado { align-items: center; } } /* texto y cifras, centrados juntos */
.sedes-ecuador { margin-top: 24px; }
@media (min-width: 861px) { .tema .foto img { aspect-ratio: 2 / 1; } #cruzado .foto img { aspect-ratio: 5 / 2; } #cruzado .poster img { width: 90px; } }
/* Tema con una sola foto: en PC la foto ocupa todo el alto del texto, hasta su última línea */
@media (min-width: 861px) { .tema:has(> .aparte > .foto:only-child) { align-items: stretch; } .tema > .aparte > .foto:only-child { min-height: min(46vh, 400px); max-height: 60vh; } .tema:has(> .aparte > .foto:only-child) > .aparte { align-content: center; } /* con texto largo, la foto estirada no pasa del 60 % del alto */ /* con poco texto la foto no se queda en una tira: llena la franja sin pasar del 46 % del alto */ .tema > .aparte > .foto:only-child img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; } }

/* Franja con foto de Pasto */
.franja { display: grid; text-decoration: none; position: relative; margin-inline: -20px; min-height: clamp(260px, 38vw, 460px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.franja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.franja::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 48, 61, 0) 20%, rgba(20, 48, 61, .9) 100%); }
.franja p { color: var(--hueso); font: 600 clamp(1.6rem, 3.6vw, 2.8rem)/1.15 var(--display); max-width: 1180px; width: calc(100% - 40px); padding-bottom: clamp(32px, 5vw, 56px); text-wrap: balance; }
.franja p { position: relative; }
.franja p::before { content: ""; position: absolute; inset: -90px -100vw 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 48, 61, 0) 0, rgba(20, 48, 61, .92) 90px); } /* la frase, sobre Galeras al 92 % */
.franja .ilustrativa { left: auto; right: 16px; top: 16px; bottom: auto; }

/* Trayectoria sobre oscuro: línea de tiempo vertical y foto */
.trayectoria { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 5vw, 72px); align-items: center; } /* la foto, centrada frente al texto largo (arriba dejaba un hueco debajo) */
.trayectoria > div { min-width: 0; display: grid; gap: 32px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 18px; border-left: 2px solid var(--panel); }
.linea-tiempo li { position: relative; display: grid; grid-template-columns: 10rem 1fr; gap: 16px; align-items: baseline; min-width: 0; }
.linea-tiempo li::before { content: ""; position: absolute; left: -29px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--barniz); }
.linea-tiempo b { font: 600 1.3rem/1.15 var(--display); color: var(--hueso); }
@media (max-width: 560px) { .linea-tiempo li { grid-template-columns: 1fr; gap: 2px; } } /* rótulos de palabra («Nueva Orleans»), no años: encima de su texto */
.linea-tiempo span { font-size: 1.0625rem; line-height: 1.45; color: var(--bruma); }
.persona-texto { display: grid; gap: 14px; }
.persona img { aspect-ratio: 3 / 4; max-height: 60vh; object-position: 50% 30%; }
@media (max-width: 860px) { .trayectoria { grid-template-columns: 1fr; } .trayectoria > .persona { order: -1; } .persona img { aspect-ratio: 4 / 3; } }

/* Preguntas */
.preguntas { display: grid; border-top: 1px solid var(--linea); max-width: 900px; }
details { border-bottom: 1px solid var(--linea); }
summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative; font: 600 1.25rem/1.35 var(--display); color: var(--noche); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 8px; top: 16px; font: 700 1.7rem/1 var(--texto); color: var(--petroleo); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 0 22px; }

/* Sedes, precio y cierre */
.sedes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--noche); }
.sede { padding: 24px 28px 24px 0; display: grid; gap: 8px; min-width: 0; align-content: start; }
.sede + .sede { padding-left: 28px; border-left: 1px solid var(--linea); }
@media (max-width: 760px) { .sedes { grid-template-columns: 1fr; } .sede + .sede { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); } }
/* de 761 a 1023 px, tres columnas dejan la de Protegemos en 240 px con todo partido: dos arriba y la tercera a lo ancho */
@media (min-width: 761px) and (max-width: 1023px) { .sedes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sede:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); } }
.tel { white-space: nowrap; }
.numeros > span + span::before { content: "· "; }
@media (max-width: 640px) { .numeros > span { display: block; } .numeros > span + span::before { content: none; } } /* un número por línea */
.ficha.precio { margin-top: 28px; grid-template-columns: 1fr 260px; gap: 28px; align-items: center; }
.ficha.precio > div { display: grid; gap: 12px; min-width: 0; }
.ficha.precio .foto img { aspect-ratio: 3 / 2; }
@media (max-width: 760px) { .ficha.precio { grid-template-columns: 1fr; } }
.cierre-banda { position: relative; overflow: hidden; isolation: isolate; }
.cierre-banda .fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; }
.cierre-banda::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 48, 61, .97) 0%, rgba(20, 48, 61, .88) 50%, rgba(20, 48, 61, .25) 100%); }
.cierre-banda section { position: relative; }
.cierre { display: grid; gap: 18px; justify-items: start; max-width: 620px; }
@media (max-width: 640px) { .cierre .botones { justify-self: stretch; } } /* el botón, a todo el ancho como en la portada */
.cierre-banda .ilustrativa { left: auto; right: 0; bottom: 16px; }
@media (max-width: 980px) { .cierre-banda::before { background: rgba(20, 48, 61, .94); } } /* en tablet y móvil el texto cruza la parte clara de la foto */

footer { padding-block: 32px; display: grid; gap: 14px; font-size: 1.0625rem; }
.pie-banda footer p { color: var(--bruma); }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* WhatsApp flotante en el móvil */
.flotante { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 30; box-shadow: 0 12px 30px rgba(20, 48, 61, .35); transition: opacity .25s, transform .25s; }
.flotante.oculto { opacity: 0; transform: translateY(20px); pointer-events: none; }
@media (min-width: 641px) { .flotante { display: none; } }
@media (max-width: 640px) { .pie-banda { padding-bottom: 96px; } } /* hueco para el botón flotante dentro del pie oscuro, no en una franja blanca bajo él */

/* Primera capa del tratamiento de datos junto a WhatsApp */
.aviso-datos { font-size: 1rem; line-height: 1.5; max-width: 60ch; }
.oscuro .aviso-datos { color: var(--bruma); }


/* Páginas legales (generadas desde legal/colombia/*.md) */
.legal { display: grid; gap: 16px; max-width: 860px; padding-top: 28px; }
.legal > h1 { margin-bottom: 8px; }
.legal > h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-top: 26px; }
.legal > h3 { margin-top: 12px; }
.legal p, .legal li { max-width: 72ch; }
.legal ul, .legal ol { margin: 0; padding-left: 24px; display: grid; gap: 8px; }
.legal .tabla { overflow-x: auto; }
.legal table { border-collapse: collapse; width: 100%; background: var(--gris); border-radius: 12px; font-size: 1.0625rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 2px solid var(--linea); }
.legal thead th { color: var(--noche); }
.legal tbody th { color: var(--noche); font-weight: 700; width: 34%; }
.legal .pend { white-space: normal; }
.legal td, .legal th { overflow-wrap: anywhere; }
/* En el móvil la tabla se apila: cada fila es una ficha y cada celda lleva el nombre de su columna (data-label) */
@media (max-width: 640px) {
  .legal table, .legal tbody, .legal tr, .legal th, .legal td { display: block; width: auto; }
  .legal thead { display: none; }
  .legal tr { padding: 14px 16px; border-bottom: 2px solid var(--linea); display: grid; gap: 6px; }
  .legal th, .legal td { padding: 0; border: 0; }
  .legal tbody th { width: auto; }
  .legal td[data-label]::before { content: attr(data-label); display: block; font-weight: 700; color: var(--noche); }
}
/* Las páginas legales se leen enteras: sin botón flotante que tape el texto */
body:has(.legal) .flotante { display: none; }
@media (max-width: 640px) { body:has(.legal) .pie-banda { padding-bottom: 0; } }

/* Crédito de Telarlab en el pie (logo + Instagram + Telegram), versión para pie claro */
.credito-telar { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--linea); }
.credito-telar a { color: var(--pizarra); text-decoration: none; transition: border-color .3s, transform .3s; }
.ct-marca { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 500 1rem/1.2 var(--texto); letter-spacing: .04em; }
.ct-marca img { width: 30px; height: 30px; flex: none; }
.ct-marca b { font-weight: 700; }
.ct-red { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); }
.ct-red svg { width: 20px; height: 20px; }
.ct-marca:hover b, .ct-marca:focus-visible b { text-decoration: underline; }
.ct-red:hover, .ct-red:focus-visible { border-color: var(--pizarra); }
.ct-red:hover { transform: translateY(-2px); }
/* En el móvil el crédito va en dos líneas («created and managed by» / «telarlab.com») centradas sobre los botones */
@media (max-width: 560px) { .ct-marca { flex-basis: 100%; justify-content: center; } .ct-marca b { display: block; } }
@media (prefers-reduced-motion: reduce) { .credito-telar a { transition: none; } }

/* Pie oscuro: el logo de Telarlab (azul marino) va sobre una pastilla hueso para que se vea */
.pie-banda .credito-telar { border-top-color: rgba(244, 241, 234, .16); }
.pie-banda .credito-telar a { color: var(--hueso); }
.pie-banda .ct-marca img { background: var(--hueso); border-radius: 7px; padding: 3px; width: 34px; height: 34px; }
.pie-banda .ct-red { border-color: rgba(244, 241, 234, .3); }
.pie-banda .ct-red:hover, .pie-banda .ct-red:focus-visible { border-color: var(--hueso); }

/* Dudas frecuentes con la foto del doctor al lado */
.dudas { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.dudas .foto img { aspect-ratio: 1 / 1; max-height: 60vh; }
@media (max-width: 860px) { .dudas { grid-template-columns: 1fr; } .dudas .foto img { aspect-ratio: 4 / 3; } }

/* Portada: lo más consultado, en botones que llevan a cada página */
.consultas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.consultas a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; height: 100%; box-sizing: border-box; padding: 14px 20px;
  border: 1px solid var(--linea); border-radius: var(--r); background: var(--blanco); color: var(--noche); font-weight: 700; text-decoration: none; }
.consultas a::after { content: "→"; color: var(--petroleo); flex: none; }
.consultas a:hover { border-color: var(--petroleo); background: var(--gris); }
@media (max-width: 860px) { .consultas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .consultas { grid-template-columns: 1fr; } }
.tema > div > h3 { margin-top: 8px; }

/* Pantallas bajas de PC (p. ej. 1920×1080 al 150 %: 1280×~620 útiles). La portada entra entera en la primera pantalla y las
   secciones se compactan para no quedar cortadas bajo la cabecera pegajosa (81 px). */
@media (min-width: 861px) {
  .hero { min-height: calc(100svh - 123px); align-items: center; padding-top: 0; }
  .hero > div:not(.retrato) { padding-block: 32px; }
  .retrato { align-self: end; }
  .retrato img { max-height: calc(100svh - 150px); }
}
@media (min-width: 861px) and (max-height: 960px) {
  h1 { font-size: min(clamp(2.4rem, 5.4vw, 4.1rem), 8.6vh); }
  h2 { font-size: min(clamp(1.85rem, 3.5vw, 2.75rem), 6vh); }
  .hero > div:not(.retrato) { gap: 16px; padding-block: 20px; }
  .lead { font-size: 1.08rem; }
  section { padding-block: 26px; }
  body { line-height: 1.5; }
  .cabeza { gap: 8px; margin-bottom: 16px; }
  .sellos { padding: 14px 0; }
  .tarjeta { aspect-ratio: 5 / 2; }
  .consultas a { min-height: 52px; padding-block: 10px; }
  .franja { min-height: min(clamp(260px, 38vw, 460px), 58vh); }
  .pagina-hero { padding-block: 28px; }
  /* Temas a dos columnas: foto más apaisada, huecos más cortos; la columna de texto larga (tratamientos), más ancha */
  .tema > div, .aparte { gap: 10px; }
  .tema > div > h3 { margin-top: 4px; }
  #tratamientos { grid-template-columns: 1.25fr .75fr; }
  .ficha { padding: 20px 24px; gap: 8px; }
  /* Citas: con tres sedes, sedes y precio pasaban de la pantalla */
  .sede { padding-block: 14px; gap: 4px; }
  .ficha.precio { margin-top: 14px; }
  .sedes-ecuador { margin-top: 12px; }
  .ficha.precio .foto img { aspect-ratio: 5 / 2; }
  .lista { gap: 4px; }
  #cruzado .foto img { aspect-ratio: 7 / 2; }
  #cruzado .poster img { width: 64px; }
  .cifra { padding: 12px 16px; }
  /* Trayectoria */
  .linea-tiempo { gap: 8px; }
  .trayectoria > div { gap: 18px; }
  .trayectoria { grid-template-columns: 1fr 280px; } /* la foto 3:4 ya está topada a 60vh (≈280 px de ancho): el texto, más ancho y con menos líneas */
  .persona-texto { gap: 10px; }
  /* Pasos (quién soy y Ecuador): en Ecuador, cada columna según lo largo de su texto */
  .pasos li { padding-bottom: 16px; gap: 6px; }
  .pasos li > .foto { margin-bottom: 4px; }
  .pasos li > .foto img { aspect-ratio: 5 / 2; }
  .pasos li > p { font-size: 1.0625rem; }
  .pasos.viaje li > .foto img { aspect-ratio: 7 / 2; }
  /* Dudas y Ecuador */
  summary { padding-block: 12px; }
  details p { padding-bottom: 14px; }
}
/* 1280×620: con los párrafos nuevos del doctor, el cruzado y la trayectoria pasaban de la pantalla */
@media (min-width: 861px) and (max-height: 700px) {
  .tema .foto img { aspect-ratio: 3 / 1; } /* solo aquí: en 1366×768 las fotos de tema a 3:1 quedaban en una tira */
  .persona-texto p { max-width: 84ch; }
  #cruzado .aparte > .foto { display: none; } /* queda el póster como imagen */
  .linea-tiempo { gap: 4px; }
  .trayectoria > div { gap: 12px; }
  .persona-texto { gap: 6px; }
  #donde .cabeza { margin-bottom: 10px; }
}
/* 1280×620: con el título «Dónde atiendo», las sedes pasaban de la pantalla; la de Protegemos (la más larga), más ancha */
@media (min-width: 1024px) and (max-height: 700px) {
  #donde { padding-block: 14px; }
  #donde .cabeza { display: flex; align-items: baseline; gap: 20px; } /* etiqueta y título en una fila */
  #donde .sedes { grid-template-columns: 1fr 1.05fr 1.2fr; }
  #donde .sede { padding-block: 10px; }
  #donde .sedes-ecuador { margin-top: 6px; }
  #donde .ficha.precio { margin-top: 10px; padding-block: 14px; }
}
@media (min-width: 981px) and (max-height: 960px) { .pasos.viaje { grid-template-columns: 1.6fr 1.4fr .8fr .8fr; } } /* por debajo de 981 px los pasos van de dos en dos */
@media (min-width: 1600px) { .retrato { max-width: 600px; } } /* en 1920×1080 el retrato no queda pequeño */

/* PC: cada franja de color ocupa al menos una pantalla (bajo la cabecera de 81 px), para que no se vean varias a la vez como una cebra */
@media (min-width: 861px) { main > section, main > div > section { box-sizing: border-box; min-height: calc(100svh - 81px); align-content: center; }
  section[id] { scroll-margin-top: 81px; } } /* al llegar con un ancla, la franja ocupa justo la pantalla bajo la cabecera (con 48 px la etiqueta quedaba tapada en 1280×620) */
/* Cabeceras en PC (regla de Ricardo, 15/10): título arriba, su texto y el botón debajo, foto a la derecha; los dos bloques
   centrados en su espacio (nada pegado a un borde con un hueco grande al otro lado) y la foto proporcionada (≤ 60 % del alto) */
@media (min-width: 861px) {
  .hero { align-items: center; align-content: center; padding-block: 40px; }
  .hero > div:not(.retrato) { padding-block: 0; }
  .hero .retrato { align-self: center; }
  .hero .retrato img, .hero-foto .foto img { max-height: 60vh; }
  .hero-foto .foto { max-width: 420px; }
}

/* Lo más consultado con miniatura a la izquierda (regla de Ricardo, 16/10: ninguna sección sin imagen) */
.consultas a { position: relative; overflow: hidden; padding: 0 20px 0 0; gap: 16px; min-height: 96px; }
.consultas img { flex: none; width: 112px; align-self: stretch; height: auto; object-fit: cover; contain: size; } /* contain: la foto vertical (c-dudas) no estira la tarjeta: el alto lo pone el texto */ /* alt vacío: el texto del enlace ya lo nombra */
.consultas a > span:not(.ilustrativa) { flex: 1; }
.consultas .ilustrativa { left: 6px; bottom: 6px; width: 18px; height: 18px; }
@media (max-width: 560px) { .consultas a { min-height: 80px; } .consultas img { width: 96px; } }
@media (max-width: 640px) { .hero-foto .foto img { aspect-ratio: 5 / 4; } } /* móvil: foto de cabecera un poco más grande (Ricardo, 16/10) */

/* Portada: los sellos (Pionero, Fundador, Ponente) dentro de la cabecera oscura; fuera, asomaban cortados al pie de la primera pantalla */
.hero > .sellos { grid-column: 1 / -1; width: 100%; padding: 22px 0 0; border-bottom: 0; border-top: 1px solid rgba(244, 241, 234, .16); }
.oscuro .sellos b { color: var(--hueso); }
.oscuro .sellos span { color: var(--bruma); }
.sellos li { align-content: start; } /* el texto de cada sello, arriba, a la misma altura aunque «Pionero» ocupe dos líneas */
@media (min-width: 861px) {
  .hero:has(> .sellos) { row-gap: 28px; }
  .hero:has(> .sellos) .foto img { max-height: min(60vh, calc(100svh - 330px)); } /* foto + sellos caben en la primera pantalla */
}
@media (min-width: 861px) and (max-height: 960px) { .hero > .sellos { padding-top: 14px; } .hero:has(> .sellos) { row-gap: 16px; } }
@media (min-width: 861px) and (max-height: 700px) { .hero.hero-foto:has(> .sellos) { padding-block: 12px; } .hero:has(> .sellos) h1 { font-size: 7.4vh; } } /* 1280×620: la portada con sus sellos cabe en la primera pantalla */

/* Móvil y tablet: la imagen de cada bloque, arriba (como en la cabecera); el texto y la ficha, debajo */
@media (max-width: 860px) {
  .tema { gap: 16px; }
  .tema > div { display: contents; }
  .tema > .aparte > .foto { order: -1; }
  .tema .ficha, .tema .cifras { margin-top: 8px; }
}
@media (max-width: 760px) { .ficha.precio > .foto { order: -1; } }
@media (min-width: 641px) and (max-width: 860px) { .tema .foto img { aspect-ratio: 16 / 9; } } /* tablet: a 4:3 y todo el ancho, la foto ocupaba más de media pantalla */
/* PC: en los temas de dos columnas, la columna más corta se centra frente a la otra (arriba dejaba un hueco debajo); si la foto
   se estira hasta el alto del texto, el texto se queda junto (sin repartir el sobrante entre los párrafos) */
@media (min-width: 861px) { .tema { align-items: center; } .tema > div:first-child { align-content: center; } }

/* PC: «¿Qué le trae por aquí?» con tarjetas y miniaturas grandes (las fotos miden 896-1200 px: no se ven borrosas). Con
   miniaturas de 112 px el contenido llenaba la mitad de una franja de una pantalla y se veía vacía (332 de 687 px en 1366) */
@media (min-width: 861px) {
  .consultas { gap: 20px; }
  .consultas a { min-height: clamp(150px, 26vh, 290px); gap: 22px; padding-right: 24px; font: 600 clamp(1.2rem, 1.45vw, 1.5rem)/1.3 var(--display); }
  .consultas img { width: 46%; }
  .consultas .ilustrativa { left: 10px; bottom: 10px; width: 22px; height: 22px; }
}
/* Pantallas grandes: contenido más ancho (los párrafos siguen topados a 64ch) */
@media (min-width: 1600px) { .ancho, .franja p { max-width: 1320px; } }

/* Miniatura de banco «dudas»: la cara queda arriba de la foto */
.consultas img[src$="banco/c-dudas.jpg"] { object-position: 50% 20%; }