/* =========================================================
   Podología Roma — hoja de estilos
   Paleta y tipografía extraídas de la web original (Wix)
   ========================================================= */
:root{
  --azul:#128BCC;        /* barra superior, menú, etiquetas */
  --azul-osc:#0C5D88;    /* títulos, bloques oscuros */
  --teal:#387C7F;        /* texto corporativo */
  --verde-osc:#095154;   /* teléfonos */
  --cian:#1BF2FD;        /* acentos / activo */
  --cian-claro:#B7FBFE;  /* bloque ubicación */
  --gris:#868686;
  --gris-claro:#D9D9D9;
  --txt:#2b4a5c;
  --blanco:#fff;
  --max:1180px;
  --ff:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ff);font-weight:400;color:var(--txt);background:#fff;line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-weight:600;line-height:1.08;margin:0;letter-spacing:.01em}
strong,b{font-weight:600}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--azul-osc);color:#fff;padding:8px 14px;z-index:999}
.skip:focus{left:8px}

/* ---------- Barra superior ---------- */
.topbar{background:var(--azul);color:#fff;font-size:14px}
.topbar .container{display:flex;align-items:center;justify-content:center;gap:22px;min-height:40px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
.topbar a{text-decoration:none}
.topbar a:hover{text-decoration:underline}
.topbar .grp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topbar .lbl{font-weight:700;letter-spacing:.02em}
.topbar .it{display:inline-flex;align-items:center;gap:6px}
.topbar svg{width:15px;height:15px;flex:none}
.ico-wa{color:#25D366}
.topbar .ico-wa{color:#BFFF00}

/* ---------- Cabecera ---------- */
.header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(12,93,136,.08)}
.logos{display:flex;align-items:center;justify-content:space-around;gap:20px;padding:12px 0 4px}
.logos a{display:block}
.logos img{height:auto}
.logo-main{width:190px}
.logo-ag{width:150px}
.logo-fisio{width:200px}
.nav{display:flex;justify-content:space-around;align-items:center;list-style:none;margin:0;padding:10px 0 14px}
.nav>li{position:relative}
.nav a{display:block;text-decoration:none;color:var(--azul-osc);font-weight:600;font-size:14px;letter-spacing:.06em;padding:6px 10px;transition:color .2s}
.nav a:hover,.nav a[aria-current="page"],.nav .open>a{color:var(--azul)}
.nav a[aria-current="page"]{color:#2fd3de}
.nav .sub{position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(6px);min-width:250px;background:#fff;list-style:none;margin:0;padding:8px 0;box-shadow:0 12px 30px rgba(12,93,136,.18);opacity:0;visibility:hidden;transition:.2s}
.nav li:hover>.sub,.nav li:focus-within>.sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav .sub a{padding:10px 20px;font-size:13px}
.nav .sub a:hover{background:var(--cian-claro)}
.caret{display:inline-block;margin-left:4px;font-size:10px}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;color:var(--azul-osc)}
.burger svg{width:28px;height:28px}

/* ---------- Hero portada ---------- */
.hero{position:relative;min-height:724px;display:flex;align-items:center;overflow:hidden;background:#dfe9ef}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,93,136,.25),rgba(12,93,136,0) 60%)}
.hero .container{position:relative;z-index:1}
.hero h1{color:#fff;font-size:clamp(42px,6.2vw,76px);font-weight:600;text-transform:uppercase;max-width:680px;text-shadow:0 2px 20px rgba(0,0,0,.18);margin:0 0 26px 0;padding-left:60px}
.hero .box{background:rgba(18,139,204,.88);color:#fff;max-width:640px;padding:26px 44px;text-align:justify;font-size:16px}
.hero .box .c{color:var(--cian);font-weight:600}
.hero .box strong{font-weight:600}

/* ---------- Bloque ubicación / imagen / cita ---------- */
.trio{display:grid;grid-template-columns:1fr 1fr 1fr}
.ubic{background:var(--cian-claro);text-align:center;padding:26px 24px 50px;color:var(--azul-osc)}
.ubic h2{font-size:50px;color:var(--azul-osc);margin-bottom:10px}
.ubic .dir{font-weight:600;font-size:18px;margin-bottom:22px}
.ubic .area{font-weight:700;font-size:24px;color:var(--verde-osc);margin:18px 0 6px}
.tel{display:inline-flex;align-items:center;gap:8px;font-size:30px;font-weight:600;text-decoration:none;line-height:1.25}
.tel.fijo{color:var(--gris)}
.tel.wa{color:var(--verde-osc);text-decoration:underline;text-underline-offset:4px}
.tel svg{width:26px;height:26px}
.trio-img{position:relative;min-height:540px}
.trio-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cita{padding:40px 12% 50px;display:flex;flex-direction:column;justify-content:center}
.cita h2{color:var(--azul-osc);font-size:44px;text-align:center;margin-bottom:28px;text-transform:uppercase}

/* ---------- Formulario ---------- */
.form label{display:block;color:var(--azul);font-weight:600;font-size:14px;margin:12px 0 5px}
.form input,.form textarea{width:100%;border:1px solid var(--azul);background:#fff;font:inherit;font-size:15px;padding:11px 14px;color:var(--txt);border-radius:0;transition:box-shadow .2s}
.form input:focus,.form textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(18,139,204,.25)}
.form textarea{min-height:110px;resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form .chk{display:flex;gap:10px;align-items:flex-start;color:var(--txt);font-weight:400;font-size:13px;margin-top:14px}
.form .chk input{width:auto;margin-top:3px}
.form .hp{position:absolute;left:-9999px}
.btn{display:inline-block;background:#555;color:#fff;border:0;font:inherit;font-weight:600;font-size:15px;padding:12px 28px;cursor:pointer;margin-top:16px;width:100%;transition:background .2s;text-decoration:none;text-align:center}
.btn:hover{background:var(--azul-osc)}
.btn.azul{background:var(--azul);width:auto}
.btn.azul:hover{background:var(--azul-osc)}
.form-msg{margin-top:14px;padding:12px 14px;font-weight:600;display:none}
.form-msg.ok{display:block;background:#e6fbf0;color:#136b3d}
.form-msg.err{display:block;background:#fdecec;color:#9b1c1c}

/* ---------- Franja cita (frase) ---------- */
.quote{position:relative;min-height:307px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.quote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quote::before{content:"";position:absolute;inset:0;background:rgba(12,93,136,.72);z-index:1}
.quote blockquote{position:relative;z-index:2;color:#fff;font-size:22px;max-width:660px;margin:0;padding:40px 24px;font-style:italic;font-weight:300}

/* ---------- Cabecera de subpágina ---------- */
.page-hero{position:relative;height:307px;display:flex;align-items:center;overflow:hidden}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::before{content:"";position:absolute;inset:0;background:rgba(12,93,136,.55);z-index:1}
.page-hero h1{position:relative;z-index:2;color:#fff;font-size:clamp(34px,4.4vw,56px);text-transform:uppercase;padding-left:8%}
.section{padding:70px 0}

/* ---------- Servicios (carrusel de paneles) ---------- */
.slider{position:relative;margin-top:16px}
.track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.panel{flex:0 0 min(742px,88vw);aspect-ratio:1/1;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 7%;color:#fff}
.panel h2{font-size:clamp(44px,6vw,84px);text-transform:uppercase;margin-bottom:22px;font-weight:600}
.panel h2 small{display:block;font-size:.8em;font-weight:500}
.panel p{font-weight:600;font-size:clamp(15px,1.6vw,20px);text-transform:uppercase;letter-spacing:.02em;margin:0;max-width:600px}
.panel.claro{color:var(--azul-osc)}
.slider .arr{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--azul-osc);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.15);display:grid;place-items:center;z-index:3}
.slider .arr svg{width:24px;height:24px}
.slider .prev{left:14px}.slider .next{right:14px}
.dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--gris-claro);cursor:pointer;padding:0}
.dots button.on{background:var(--azul)}
.svc-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* ---------- Detalle de servicio (lista con números romanos) ---------- */
.detail{display:grid;grid-template-columns:1fr 300px;gap:60px;align-items:start}
.detail .lead{color:var(--azul-osc);font-size:18px;font-weight:400;margin:0 0 24px;text-align:justify}
.roman{list-style:none;margin:0;padding:0;counter-reset:r}
.roman li{margin-bottom:26px;color:var(--azul-osc);text-align:justify}
.roman li b{display:block;color:var(--azul);font-weight:600;margin-bottom:6px}
.bullets{margin:0;padding:0;list-style:none}
.bullets li{position:relative;padding-left:22px;margin-bottom:16px;color:var(--azul-osc)}
.bullets li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--azul);border-radius:50%}
.detail .side{position:sticky;top:210px}
.detail .side img{width:100%;height:auto;aspect-ratio:254/401;object-fit:cover}
.detail .side .btn{margin-top:18px}

/* ---------- Nosotros ---------- */
.team{display:grid;gap:70px}
.member{display:grid;grid-template-columns:434px 1fr;gap:60px;align-items:center}
.member.rev{grid-template-columns:1fr 434px}
.member.rev .ph{order:2}
.member .ph img{width:100%;aspect-ratio:434/650;object-fit:cover}
.member h2{font-size:34px;color:var(--azul-osc);text-transform:uppercase;margin-bottom:18px}
.member h2 span{font-weight:300}
.member p{color:var(--azul-osc);text-align:justify;margin:0}
.member .col{font-size:14px;color:var(--gris);margin-top:10px}

/* ---------- Instalaciones (galería) ---------- */
.gallery{columns:3 280px;column-gap:10px}
.gallery a{display:block;margin-bottom:10px;break-inside:avoid;overflow:hidden;cursor:zoom-in}
.gallery img{width:100%;height:auto;transition:transform .5s}
.gallery a:hover img{transform:scale(1.04)}
.lb{position:fixed;inset:0;background:rgba(5,30,45,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:30px}
.lb.on{display:flex}
.lb img{max-height:88vh;max-width:92vw;width:auto}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;padding:14px}
.lb .x{top:10px;right:14px;font-size:38px;line-height:1}
.lb .l,.lb .r{top:50%;transform:translateY(-50%)}
.lb .l{left:6px}.lb .r{right:6px}
.lb svg{width:40px;height:40px}

/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.contact .info h2{color:var(--azul-osc);font-size:30px;text-transform:uppercase;margin-bottom:16px}
.contact .info p{margin:0 0 6px;color:var(--azul-osc)}
.contact .area{font-weight:700;color:var(--verde-osc);font-size:20px;margin:22px 0 6px}
.contact .tel{font-size:26px}
.map{margin-top:28px;position:relative;aspect-ratio:4/3;background:var(--cian-claro);display:grid;place-items:center;text-align:center;padding:20px}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map p{color:var(--azul-osc);font-size:14px;margin:0 0 10px}
.horario{margin-top:22px;font-size:15px}

/* ---------- Blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid #e3edf2;text-decoration:none;transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:0 14px 34px rgba(12,93,136,.14);transform:translateY(-3px)}
.card .th{aspect-ratio:1/1;overflow:hidden;background:#eaf3f7;position:relative}
.card .th img{width:100%;height:100%;object-fit:cover}
.card .play{position:absolute;inset:0;display:grid;place-items:center}
.card .play span{width:62px;height:62px;border-radius:50%;background:rgba(12,93,136,.85);display:grid;place-items:center}
.card .play svg{width:26px;height:26px;color:#fff;margin-left:4px}
.card .bd{padding:20px 22px 24px}
.card .meta{font-size:13px;color:var(--gris);margin-bottom:8px}
.card h2{font-size:21px;color:var(--azul-osc);font-weight:600}
.post{max-width:780px;margin:0 auto}
.post .back{display:inline-block;margin-bottom:20px;color:var(--azul);font-weight:600;text-decoration:none}
.post h1{font-size:clamp(30px,4vw,44px);color:var(--azul-osc);margin-bottom:12px}
.post .meta{color:var(--gris);font-size:14px;margin-bottom:28px}
.post .cover{margin:0 0 30px}
.post .body p{margin:0 0 18px;text-align:justify}
.post .body h2{font-size:22px;color:var(--azul-osc);margin:30px 0 10px}
.video{position:relative;aspect-ratio:16/9;background:#000;margin:10px 0 30px}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.recent{margin-top:60px;border-top:1px solid #e3edf2;padding-top:30px}
.recent h2{font-size:20px;color:var(--azul-osc);margin-bottom:14px}
.recent ul{list-style:none;padding:0;margin:0}
.recent li{margin-bottom:10px}
.recent a{color:var(--azul);font-weight:500}

/* ---------- Legales ---------- */
.legal{max-width:820px}
.legal h2{color:var(--azul-osc);font-size:22px;margin:30px 0 10px}
.legal p,.legal li{text-align:justify}
.todo{background:#fff6d6;padding:1px 5px}

/* ---------- Pie ---------- */
.cta-band{background:var(--azul-osc);color:#fff;text-align:center;padding:44px 24px}
.cta-band h2{font-size:30px;text-transform:uppercase;margin-bottom:10px}
.cta-band p{margin:0 0 18px}
.cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-band .btn{width:auto;margin:0;background:var(--azul)}
.cta-band .btn.wa{background:#25D366}
.cta-band .btn:hover{filter:brightness(1.1)}
.footer{padding:24px 0 30px;text-align:center;font-size:14px;color:var(--azul-osc)}
.footer .legal-links{margin-top:8px;font-size:13px}
.footer .legal-links a{margin:0 8px;color:var(--gris)}
.footer .mc{color:var(--azul);text-decoration:none;font-weight:600}

/* WhatsApp flotante */
.wa-float{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:90;transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px}

/* Animación de entrada */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .trio{grid-template-columns:1fr 1fr}
  .trio-img{display:none}
  .member,.member.rev{grid-template-columns:320px 1fr;gap:40px}
  .member.rev{grid-template-columns:1fr 320px}
  .posts{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .topbar{font-size:13px}
  .topbar .dir,.topbar .mail{display:none}
  .logos{justify-content:space-between;padding:10px 0}
  .logo-ag,.logo-fisio{display:none!important}
  .logo-main{width:150px}
  .burger{display:block}
  .header .container{position:relative}
  .header .row-top{display:flex;align-items:center;justify-content:space-between}
  .nav{display:none;flex-direction:column;align-items:stretch;padding:0 0 14px}
  .nav.open{display:flex}
  .nav a{padding:13px 4px;border-top:1px solid #eef3f6;font-size:15px}
  .nav .sub{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;padding:0 0 0 16px;min-width:0}
  .nav .sub a{font-size:14px}
  .hero{min-height:560px;padding:60px 0 40px}
  .hero h1{padding-left:0}
  .hero .box{padding:22px 24px;text-align:left}
  .wa-float{width:52px;height:52px;right:14px;bottom:14px}
  .trio{grid-template-columns:1fr}
  .cita{padding:40px 24px 50px}
  .ubic h2{font-size:42px}
  .page-hero{height:200px}
  .detail{grid-template-columns:1fr;gap:30px}
  .detail .side{position:static;max-width:320px}
  .member,.member.rev{grid-template-columns:1fr;gap:24px}
  .member.rev .ph{order:0}
  .member .ph img{max-width:380px}
  .contact{grid-template-columns:1fr;gap:40px}
  .posts{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .section{padding:50px 0}
  .roman li,.member p,.post .body p,.detail .lead,.legal p{text-align:left}
  .detail .side img{aspect-ratio:4/3}
}