/* CLINILAB MB - capa visual dinámica (servicios, sucursales, nosotros, contacto) */
:root{--grad:linear-gradient(135deg,#1a4d7a 0%,#2b8a99 55%,#5dced7 100%)}
body{background:radial-gradient(900px 500px at 90% -5%,rgba(93,206,215,.25),transparent 60%),radial-gradient(800px 500px at -10% 40%,rgba(26,77,122,.10),transparent 60%),#f6fbfc}
#progreso{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,#5dced7,#1a4d7a,#5dced7);background-size:200% 100%;animation:fluye 3s linear infinite;z-index:300;border-radius:0 4px 4px 0}
@keyframes fluye{to{background-position:-200% 0}}

/* HERO animado */
.page-hero{position:relative;overflow:hidden;padding:5rem 2rem 6rem;background:linear-gradient(120deg,#0f2847,#1a4d7a,#2b8a99,#1a4d7a);background-size:300% 300%;animation:mesh 14s ease infinite;border-radius:0}
@keyframes mesh{50%{background-position:100% 50%}}
.page-hero h1{position:relative;z-index:2;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.02em;text-shadow:0 6px 24px rgba(0,0,0,.25);animation:entra .8s cubic-bezier(.2,.8,.2,1) both}
.page-hero p{position:relative;z-index:2;max-width:640px;margin:.8rem auto 0;animation:entra .8s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.page-hero::before,.page-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;z-index:0}
.page-hero::before{width:340px;height:340px;background:#5dced7;top:-120px;left:-80px;animation:flota 9s ease-in-out infinite}
.page-hero::after{width:300px;height:300px;background:#7c9cff;bottom:-140px;right:-60px;animation:flota 11s ease-in-out infinite reverse}
@keyframes flota{50%{transform:translate(40px,30px) scale(1.15)}}
.onda{position:absolute;left:0;right:0;bottom:-1px;height:60px;z-index:2;line-height:0}
.onda svg{width:200%;height:100%;animation:ondea 12s linear infinite}
@keyframes ondea{to{transform:translateX(-50%)}}
.flot{position:absolute;z-index:1;font-size:2rem;opacity:.35;animation:sube linear infinite;pointer-events:none;user-select:none}
@keyframes sube{from{transform:translateY(40px) rotate(0)}to{transform:translateY(-320px) rotate(360deg);opacity:0}}

/* Cinta de áreas */
.cinta{overflow:hidden;background:#0f2847;color:#fff;padding:.7rem 0;white-space:nowrap;position:relative;z-index:3}
.cinta div{display:inline-block;animation:cinta 40s linear infinite}
.cinta span{margin:0 1.4rem;font-weight:700;font-size:.9rem;letter-spacing:.04em}
.cinta span::before{content:"✦";color:#5dced7;margin-right:.9rem}
@keyframes cinta{to{transform:translateX(-50%)}}

/* Aparecer al hacer scroll */
.rv{opacity:0;transform:translateY(34px) scale(.97);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* Tarjetas con tilt + brillo que sigue al mouse */
.tilt{position:relative;transition:transform .25s ease,box-shadow .25s ease;transform-style:preserve-3d;will-change:transform}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(93,206,215,.28),transparent 60%)}
.tilt:hover::after{opacity:1}
.tilt:hover{box-shadow:0 22px 45px rgba(15,40,71,.22)}

/* SERVICIOS */
.filtro-section{background:linear-gradient(135deg,#0f2847 0%,#1a4d7a 45%,#2b8a99 100%);color:#fff;border-radius:22px;padding:1.8rem;box-shadow:0 14px 40px rgba(15,40,71,.25)}
.chip{color:#fff;border-color:rgba(255,255,255,.85)}
.chip:hover{background:rgba(255,255,255,.18)}
.view-btn{color:#fff;border-color:#fff}
.view-btn:hover{background:rgba(255,255,255,.18)}
.chip.on,.view-btn.active{background:#fff!important;color:#1a4d7a!important;border-color:#fff!important}
#buscar{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border-radius:999px;padding:.9rem 1.4rem;font-size:1rem;width:100%;transition:box-shadow .3s}
#buscar:focus{outline:none;box-shadow:0 0 0 6px rgba(93,206,215,.3)}
.chip{transition:transform .2s,box-shadow .2s,background .2s}
.chip:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 8px 18px rgba(43,138,153,.25)}
.chip.on{box-shadow:0 8px 20px rgba(0,0,0,.3);animation:pop .35s}
@keyframes pop{50%{transform:scale(1.1)}}
.categorias-grid{perspective:1000px}
.categoria-card{--c1:#1a4d7a;--c2:#5dced7;position:relative;overflow:hidden;color:#fff!important;background:linear-gradient(135deg,var(--c1),var(--c2))!important;border:none!important;border-radius:20px!important;padding:1.6rem 1.4rem!important;cursor:pointer;transition:transform .25s,box-shadow .25s}
.categoria-card::before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.16);right:-40px;top:-40px;transition:transform .5s}
.categoria-card:hover::before{transform:scale(2.4)}
.categoria-card h3{color:#fff!important;position:relative}
.categoria-card .count{color:#fff!important;opacity:.9;position:relative;font-weight:700}
.categoria-card:nth-child(5n+1){--c1:#1a4d7a;--c2:#2b8a99}
.categoria-card:nth-child(5n+2){--c1:#6a4fd6;--c2:#5dced7}
.categoria-card:nth-child(5n+3){--c1:#0f7b8a;--c2:#69d6a5}
.categoria-card:nth-child(5n+4){--c1:#c94f7c;--c2:#ff9a76}
.categoria-card:nth-child(5n+5){--c1:#2f5bd1;--c2:#6bb6ff}
.categoria-card h3{font-size:1.15rem}
.examen-item{position:relative;overflow:hidden;border-radius:16px!important;border:1px solid rgba(43,138,153,.18)!important;background:#fff;transition:transform .25s,box-shadow .25s}
.examen-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad);transition:width .25s}
.examen-item:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(15,40,71,.15)}
.examen-item:hover::before{width:10px}
.btn-add{transition:transform .2s,box-shadow .2s}
.btn-add:hover{transform:scale(1.04);box-shadow:0 8px 18px rgba(43,138,153,.35)}
.cart-toggle{animation:latido 2.6s ease-in-out infinite}
@keyframes latido{50%{transform:scale(1.06)}}
.cart-count{animation:pop .4s}

/* SUCURSALES */
.banner-superior{border-radius:22px!important;background:var(--grad)!important;color:#fff!important;box-shadow:0 14px 40px rgba(15,40,71,.2)}
.filtro-btn{transition:transform .2s,box-shadow .2s}
.filtro-btn:hover{transform:translateY(-3px)}
.filtro-btn.active{background:var(--grad)!important;color:#fff!important;box-shadow:0 8px 20px rgba(43,138,153,.35)}
.sucursal-card{border-radius:24px!important;overflow:hidden;border:none!important;box-shadow:0 12px 34px rgba(15,40,71,.12)}
.sucursal-header{background:linear-gradient(120deg,#0f2847,#2b8a99,#0f2847)!important;background-size:250% 100%!important;animation:mesh 8s ease infinite;color:#fff}
.sucursal-card.centro .sucursal-header{background:linear-gradient(120deg,#c94f7c,#ff9a76,#c94f7c)!important;background-size:250% 100%!important}
.sucursal-card.sur .sucursal-header{background:linear-gradient(120deg,#0f7b8a,#69d6a5,#0f7b8a)!important;background-size:250% 100%!important}
.sucursal-info-item{transition:transform .2s,background .2s;border-radius:12px;padding:.4rem .6rem}
.sucursal-info-item:hover{transform:translateX(8px);background:rgba(93,206,215,.14)}
.info-icon{transition:transform .35s}
.sucursal-info-item:hover .info-icon{transform:rotate(-12deg) scale(1.25)}
.btn-sucursal{transition:transform .2s,box-shadow .2s}
.btn-sucursal:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 22px rgba(15,40,71,.25)}

/* NOSOTROS */
.nos-bloque{background:rgba(255,255,255,.8)!important;backdrop-filter:blur(8px);border-radius:26px!important;border:1px solid rgba(93,206,215,.3)!important;box-shadow:0 14px 40px rgba(15,40,71,.08)!important}
.nos-bloque h2{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-family:'Sora',sans-serif}
.nos-datos>div{background:var(--grad)!important;color:#fff!important;border-radius:20px!important;transition:transform .25s}
.nos-datos>div:hover{transform:scale(1.05) rotate(-1deg)}
.nos-datos strong{color:#fff!important;font-size:2.6rem!important;font-family:'Sora',sans-serif}
.nos-datos span{color:#e8f5f7!important}
.nos-pasos{counter-reset:paso}
.nos-pasos li{transition:transform .25s}
.nos-pasos li:hover{transform:translateY(-6px)}
.nos-valores>div{border-radius:18px;transition:transform .25s,box-shadow .25s;background:#fff;border:1px solid rgba(43,138,153,.15)}
.nos-areas li{transition:transform .2s,background .2s,color .2s;cursor:default}
.nos-areas li:hover{transform:translateY(-4px) rotate(-1.5deg);background:var(--grad)!important;color:#fff!important}
.nos-cta{background:var(--grad)!important;color:#fff!important}
.nos-cta h2{-webkit-text-fill-color:#fff!important;background:none!important}
.nos-enlace{transition:transform .2s,box-shadow .2s}
.nos-enlace:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 24px rgba(0,0,0,.25)}

/* CONTACTO */
.contacto-form{background:rgba(255,255,255,.9)!important;border-radius:24px!important;border:1px solid rgba(93,206,215,.3)!important;box-shadow:0 14px 40px rgba(15,40,71,.1)!important}
.info-card{border-radius:24px!important;box-shadow:0 14px 40px rgba(15,40,71,.2)!important}
.contacto-form input,.contacto-form select,.contacto-form textarea{transition:box-shadow .25s,border-color .25s,transform .2s}
.contacto-form input:focus,.contacto-form select:focus,.contacto-form textarea:focus{outline:none;border-color:var(--sky)!important;box-shadow:0 0 0 5px rgba(93,206,215,.3);transform:translateY(-2px)}
.contacto-form .btn{width:100%;position:relative;overflow:hidden;font-size:1.05rem;padding:1rem}
.contacto-form .btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:brillo 3.2s ease-in-out infinite}
@keyframes brillo{60%,100%{left:140%}}
.horario-item{transition:background .2s,padding .2s;border-radius:10px}
.horario-item:hover{background:rgba(93,206,215,.18);padding-left:.8rem}
.metodo{background:#fff;border-radius:20px;transition:transform .25s,box-shadow .25s}
.metodo-icon{display:inline-block;transition:transform .4s}
.metodo:hover .metodo-icon{transform:translateY(-8px) rotate(14deg) scale(1.25)}
.wa{animation:onda 2.2s infinite}
@keyframes onda{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}100%{box-shadow:0 0 0 24px rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* Ajustes de espacio en Nosotros */
.nos-bloque:not(.nos-cta){padding:2rem 2.2rem}
.nos-valores>div{padding:1.2rem 1.3rem!important;border-left:4px solid var(--sky)!important}
.nos-pasos li{background:#fff;border-radius:18px}
@media (max-width:600px){.nos-bloque:not(.nos-cta){padding:1.4rem 1.2rem}}