/* ===== Dintelec — estilos.css ===== */
:root{
  --azul-oscuro:#1d4a68; --azul:#20618f; --azul-claro:#4fa3c4; --cian:#6ec6dd;
  --tinta:#22313d; --gris:#5b6b77; --fondo:#f7f9fa; --blanco:#ffffff;
  --borde:#e3e8ec; --verde-wa:#25d366;
  --fuente-titulos:'Sora',sans-serif; --fuente-texto:'Manrope',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--fuente-texto);line-height:1.6}
a{color:var(--azul);text-decoration:none}
a:hover{color:var(--azul-claro)}
h1,h2,h3,h4{font-family:var(--fuente-titulos);color:#1c2b38}
img{max-width:100%}
.contenedor{max-width:1200px;margin:0 auto;padding:0 24px}
/* ===== Encabezado ===== */
.encabezado{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--borde)}
.encabezado .contenedor{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:10px;padding-bottom:10px}
.logo img{height:52px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu>li{position:relative}
.menu>li>a{display:flex;align-items:center;gap:6px;font-weight:600;font-size:15px;padding:10px 13px;border-radius:10px;color:#33424e}
.menu>li>a:hover,.menu>li>a.activo{background:#e8f0f4;color:var(--azul)}
.submenu{position:absolute;top:100%;left:0;min-width:320px;background:var(--blanco);border:1px solid var(--borde);border-radius:14px;box-shadow:0 18px 50px rgba(29,60,86,.18);padding:8px;list-style:none;margin:0;display:none}
.menu li:hover .submenu{display:block}
.submenu a{display:block;padding:10px 14px;border-radius:10px;font-size:14.5px;font-weight:500;color:#33424e}
.submenu a:hover{background:#eef4f7;color:var(--azul)}
.flecha{font-size:9px;opacity:.55}
.boton{display:inline-block;border:none;cursor:pointer;font-family:var(--fuente-texto);font-weight:700;font-size:15px;padding:13px 26px;border-radius:999px;background:var(--azul-oscuro);color:#fff;box-shadow:0 6px 18px rgba(29,74,104,.35);transition:transform .2s,background .2s}
.boton:hover{background:var(--azul);color:#fff;transform:translateY(-2px)}
.boton-claro{background:#fff;color:var(--azul-oscuro);box-shadow:0 10px 30px rgba(10,30,50,.35)}
.boton-claro:hover{background:#f0f6f9;color:var(--azul-oscuro)}
.boton-borde{background:transparent;border:1.5px solid rgba(255,255,255,.5);box-shadow:none;color:#fff}
.boton-borde:hover{background:rgba(255,255,255,.12)}
/* ===== Héroe ===== */
.heroe{position:relative;overflow:hidden;background:linear-gradient(160deg,#173c55 0%,#20618f 55%,#3d88ac 100%);color:#fff}
.heroe .contenedor{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:80px;padding-bottom:100px}
.heroe h1{font-size:54px;line-height:1.08;margin:0 0 18px;font-weight:800;color:#fff}
.heroe .lema{font-size:22px;font-weight:600;color:#eaf4f8;margin:0 0 14px}
.heroe p.intro{font-size:17px;color:#d9e8f0;max-width:520px;margin:0 0 32px}
.insignia{display:inline-block;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:22px}
.heroe-foto{position:relative;display:grid;place-items:center}
.heroe-foto .circulo{width:340px;height:340px;border-radius:50%;overflow:hidden;border:6px solid rgba(255,255,255,.8);box-shadow:0 24px 60px rgba(10,30,50,.45);background:#fff;animation:flotar 6s ease-in-out infinite}
.heroe-foto .circulo img{width:100%;height:100%;object-fit:cover}
.heroe-foto .anillo{position:absolute;width:340px;height:340px;border-radius:50%;border:2px solid rgba(255,255,255,.35);animation:pulso 3s ease-out infinite}
.heroe-foto .anillo2{animation-delay:1.2s;border-color:rgba(255,255,255,.25)}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulso{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}
@keyframes aparecer{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.animar{animation:aparecer .7s ease both}
/* ===== Secciones ===== */
.seccion{padding:70px 0}
.seccion-blanca{background:#fff;border-bottom:1px solid var(--borde)}
.seccion-gris{background:#eef3f6}
.kicker{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--azul-claro);margin-bottom:10px}
.titulo-seccion{font-size:36px;margin:0 0 12px}
.centrado{text-align:center}
.centrado .kicker{margin-left:auto;margin-right:auto}
/* Contadores */
.contadores{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;padding:44px 0}
.contadores .numero{font-family:var(--fuente-titulos);font-size:46px;font-weight:800;color:var(--azul)}
.contadores .etiqueta{font-size:15px;color:var(--gris);font-weight:600;margin-top:4px}
/* Tarjetas */
.rejilla{display:grid;gap:20px}
.rejilla-4{grid-template-columns:repeat(4,1fr)}
.rejilla-3{grid-template-columns:repeat(3,1fr)}
.rejilla-2{grid-template-columns:repeat(2,1fr)}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:18px;padding:26px 22px;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;gap:12px}
.tarjeta:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(32,80,120,.14);border-color:var(--cian)}
.tarjeta .icono{width:48px;height:48px;border-radius:14px;background:#e8f2f6;display:grid;place-items:center;font-size:22px;color:var(--azul);font-family:var(--fuente-titulos);font-weight:800}
.tarjeta h3{font-size:17px;margin:0}
.tarjeta p{font-size:14px;color:var(--gris);margin:0;text-align:justify}
.tarjeta .mas{font-size:14px;font-weight:700;color:var(--azul-claro)}
/* Banda pasos */
.banda{background:linear-gradient(140deg,#1c4361,#2c6d94);border-radius:28px;padding:52px 48px;color:#fff;display:grid;grid-template-columns:1fr 1.4fr;gap:44px;align-items:center}
.banda h2{color:#fff;font-size:32px;margin:0 0 14px}
.banda p{color:#dcebf2;margin:0}
.paso{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:16px 18px;margin-bottom:16px}
.paso:last-child{margin-bottom:0}
.paso .n{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#fff;color:var(--azul);display:grid;place-items:center;font-family:var(--fuente-titulos);font-weight:800;font-size:15px}
.paso h4{margin:0 0 3px;font-size:16px;color:#fff;font-family:var(--fuente-texto)}
.paso p{font-size:14px;color:#dcebf2}
/* Galería */
.galeria img{width:100%;height:260px;object-fit:cover;border-radius:18px;display:block}
/* Testimonios */
.testimonio{background:#fff;border-radius:24px;padding:48px 52px;box-shadow:0 14px 44px rgba(32,80,120,.1);min-height:200px}
.testimonio .comilla{font-size:44px;line-height:.5;color:var(--cian);font-family:var(--fuente-titulos)}
.testimonio p{font-size:20px;font-weight:500;color:#2c3b47}
.testimonio .autor{font-family:var(--fuente-titulos);font-weight:700;font-size:15px;color:var(--azul)}
.testimonio .rol{font-size:13.5px;color:var(--gris)}
.puntos{display:flex;justify-content:center;gap:10px;margin-top:22px}
.puntos button{width:12px;height:12px;border-radius:50%;border:none;cursor:pointer;background:#ccd8df;padding:0}
.puntos button.activo{background:var(--azul)}
/* FAQ */
.faq{background:#fff;border:1px solid var(--borde);border-radius:16px;overflow:hidden;margin-bottom:12px}
.faq button{width:100%;text-align:left;border:none;background:none;cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--fuente-texto);font-weight:700;font-size:16.5px;color:#2c3b47}
.faq .signo{color:var(--azul-claro);font-size:20px}
.faq .respuesta{display:none;padding:0 24px 22px;font-size:15.5px;color:#4b5c68}
.faq.abierto .respuesta{display:block}
/* CTA */
.cta{background:linear-gradient(120deg,#3f96b4,#2a5d88);border-radius:26px;padding:52px;text-align:center;color:#fff}
.cta h2{color:#fff;font-size:34px;margin:0 0 12px}
.cta p{font-size:17px;color:#e9f4f8;margin:0 0 28px}
/* ===== Página interior / artículo ===== */
.cabecera-pagina{background:linear-gradient(150deg,#173c55,#2a6285);color:#fff;padding:64px 0}
.cabecera-pagina h1{color:#fff;font-size:42px;line-height:1.15;margin:0 0 16px}
.cabecera-pagina .kicker{color:#9fd2e2}
.cabecera-pagina p{font-size:18px;color:#dcebf2;max-width:720px;margin:0}
.articulo{max-width:900px;margin:0 auto;padding:56px 24px}
.articulo h2{font-size:26px;margin:40px 0 12px}
.articulo h2:first-child{margin-top:0}
.articulo p{font-size:16px;color:#43535f}
.articulo .imagen-principal{width:100%;height:340px;object-fit:cover;border-radius:22px;margin-bottom:40px}
.lista-viñetas{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.lista-viñetas li{display:flex;gap:12px;background:#eef3f6;border-radius:12px;padding:14px 18px;font-size:15px;color:#3b4b57}
.lista-viñetas li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cian);margin-top:7px;flex-shrink:0}
.tarjeta-servicio{background:#fff;border:1px solid var(--borde);border-radius:18px;padding:28px}
.tarjeta-servicio h3{font-size:18px;color:var(--azul);margin:0 0 12px}
.tarjeta-servicio p{font-size:14.5px;margin:0 0 12px}
.tarjeta-servicio p:last-child{margin:0}
/* Placeholder de imagen */
.marcador-imagen{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#eef3f6,#eef3f6 12px,#e4ebef 12px,#e4ebef 24px);border:2px dashed #b9c8d2;border-radius:18px;color:#6b7d8a;font-size:14px;font-weight:600;text-align:center;padding:20px;min-height:200px}
/* Línea de tiempo */
.linea-tiempo{position:relative;padding-left:40px;border-left:3px solid #c3d6e0;display:grid;gap:40px}
.hito{position:relative}
.hito::before{content:"";position:absolute;left:-52px;top:4px;width:22px;height:22px;border-radius:50%;background:var(--azul-claro);border:5px solid #fff;box-shadow:0 0 0 3px rgba(79,163,196,.35)}
.hito .año{font-family:var(--fuente-titulos);font-weight:800;font-size:22px;color:var(--azul)}
.hito h3{font-size:18px;margin:6px 0}
.hito p{margin:0;font-size:15.5px;color:#4b5c68}
/* Equipo */
.perfil{background:#fff;border:1px solid var(--borde);border-radius:20px;padding:24px;text-align:center}
.perfil .foto{width:130px;height:130px;border-radius:50%;margin:0 auto 16px;overflow:hidden}
.perfil h3{font-size:17px;margin:0}
.perfil .cargo{font-size:13.5px;font-weight:700;color:var(--azul-claro);margin:5px 0 10px}
.perfil p{font-size:13.5px;color:var(--gris);margin:0}
/* Contacto */
.formulario{background:#fff;border:1px solid var(--borde);border-radius:22px;padding:36px;display:grid;gap:18px}
.formulario label{font-size:13.5px;font-weight:700;color:#3b4b57;display:block;margin-bottom:6px}
.formulario input,.formulario textarea{width:100%;border:1.5px solid #dbe3e8;border-radius:12px;padding:13px 16px;font-family:var(--fuente-texto);font-size:15px}
.formulario input:focus,.formulario textarea:focus{outline:2px solid var(--azul-claro);border-color:var(--azul-claro)}
.caja-info{background:#fff;border:1px solid var(--borde);border-radius:22px;padding:30px;display:grid;gap:14px}
.mapa{width:100%;height:320px;border:none;border-radius:22px}
/* ===== Pie ===== */
.pie{background:#152b3d;color:#c3d2dc;padding:56px 0 30px;margin-top:70px}
.pie .contenedor{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.pie h4{color:#fff;font-size:15px;margin:0 0 14px;font-family:var(--fuente-texto)}
.pie .marca{font-family:var(--fuente-titulos);font-weight:800;font-size:22px;letter-spacing:.06em;color:#fff;margin-bottom:12px}
.pie a{color:#c3d2dc}
.pie a:hover{color:#fff}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
.pie .wa{color:#69d99a;font-weight:700}
.derechos{max-width:1200px;margin:36px auto 0;padding:22px 24px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#8fa2af;text-align:center}
/* WhatsApp flotante */
.whatsapp-flotante{position:fixed;bottom:26px;right:26px;z-index:100;width:60px;height:60px;border-radius:50%;background:var(--verde-wa);display:grid;place-items:center;box-shadow:0 10px 28px rgba(18,140,80,.5);transition:transform .2s}
.whatsapp-flotante:hover{transform:scale(1.08)}
/* ===== Responsive ===== */
@media(max-width:960px){
  .heroe .contenedor,.banda,.pie .contenedor{grid-template-columns:1fr}
  .rejilla-4{grid-template-columns:repeat(2,1fr)}
  .rejilla-3,.rejilla-2{grid-template-columns:1fr}
  .contadores{grid-template-columns:1fr}
  .heroe h1{font-size:40px}
  .encabezado .contenedor{flex-direction:column}
}

/* Textos justificados */
.articulo p,.hito p,.tarjeta-servicio p,.testimonio p,.faq .respuesta,.heroe p.intro,.perfil p,.paso p,.banda>div>p,.lista-viñetas li,.pie p{text-align:justify}

/* ===== Héroe con foto de la clínica ===== */
.heroe-clinica{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden}
.heroe-fondo{position:absolute;inset:0}
.heroe-fondo img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{0%{transform:scale(1) translateX(0)}100%{transform:scale(1.12) translateX(-2.5%)}}
.heroe-velo{position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,45,70,.93) 0%,rgba(23,60,85,.85) 38%,rgba(32,97,143,.45) 68%,rgba(32,97,143,.15) 100%)}
.heroe-clinica .heroe-contenido{position:relative;z-index:2;padding-top:90px;padding-bottom:110px;width:100%}
.heroe-clinica h1{font-size:54px;line-height:1.08;margin:0 0 18px;font-weight:800;color:#fff}
.heroe-clinica .intro{font-size:17px;color:#d9e8f0;max-width:520px;margin:0 0 32px}
/* Onda de sonido animada */
.onda-sonido{position:absolute;z-index:1;right:6%;bottom:40px;display:flex;align-items:flex-end;gap:7px;height:70px;opacity:.75}
.onda-sonido span{width:5px;border-radius:99px;background:linear-gradient(180deg,#8fd6ec,#4fa3c4);animation:onda 1.6s ease-in-out infinite}
.onda-sonido span:nth-child(1){height:22%;animation-delay:0s}
.onda-sonido span:nth-child(2){height:45%;animation-delay:.12s}
.onda-sonido span:nth-child(3){height:70%;animation-delay:.24s}
.onda-sonido span:nth-child(4){height:95%;animation-delay:.36s}
.onda-sonido span:nth-child(5){height:60%;animation-delay:.48s}
.onda-sonido span:nth-child(6){height:85%;animation-delay:.6s}
.onda-sonido span:nth-child(7){height:40%;animation-delay:.72s}
.onda-sonido span:nth-child(8){height:75%;animation-delay:.84s}
.onda-sonido span:nth-child(9){height:50%;animation-delay:.96s}
.onda-sonido span:nth-child(10){height:88%;animation-delay:1.08s}
.onda-sonido span:nth-child(11){height:35%;animation-delay:1.2s}
.onda-sonido span:nth-child(12){height:65%;animation-delay:1.32s}
@keyframes onda{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media(max-width:960px){.onda-sonido{display:none}.heroe-clinica h1{font-size:40px}}