/* ==========================================================================
   ECSM Estudio Contable Digital — Hoja de estilos principal
   Paleta de marca: Navy #042e65 · Blue #0068a8
   ========================================================================== */

:root{
  --navy:#042e65;
  --navy-dark:#021b3d;
  --navy-rgb:4,46,101;
  --blue:#0068a8;
  --blue-light:#1a8fd1;
  --blue-rgb:0,104,168;
  --gold:#f2a83d;
  --gold-dark:#c9821a;
  --gold-deep:#8a5a10; /* variante oscura de --gold-dark, con contraste AA para texto sobre blanco */
  --whatsapp:#25d366;
  --whatsapp-dark:#1da851;

  --bg:#ffffff;
  --bg-alt:#f4f8fb;
  --bg-navy-soft:#eaf2fa;
  --text:#152438;
  --text-muted:#5c6c7c;
  --text-soft:#8394a3;
  --border:#e3eaf1;

  --radius-sm:10px;
  --radius:18px;
  --radius-lg:28px;
  --shadow-sm:0 2px 10px rgba(4,46,101,.07);
  --shadow:0 10px 30px rgba(4,46,101,.12);
  --shadow-lg:0 24px 60px rgba(4,46,101,.18);

  --container:1240px;
  --font-head:'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;

  --header-h:84px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;line-height:1.18;color:var(--navy);}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
section{position:relative;}
::selection{background:var(--blue);color:#fff;}

/* Skip link */
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;z-index:10000;font-weight:600;
}
.skip-link:focus{left:0;}

/* Focus visibility for a11y */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px;
}

/* ---------- Utilities ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);
  background:rgba(var(--blue-rgb),.09);
  padding:7px 16px;border-radius:100px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);}

.section-head{max-width:720px;margin:0 0 52px;}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:16px;}
.section-head p{color:var(--text-muted);font-size:1.08rem;}

.section-pad{padding:100px 0;}
@media (max-width:768px){.section-pad{padding:64px 0;}}
.bg-alt{background:var(--bg-alt);}
.bg-navy{background:linear-gradient(155deg,var(--navy) 0%,var(--navy-dark) 100%);color:#fff;}
.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff;}

.text-center{text-align:center;}
.mt-24{margin-top:24px;}
.mt-40{margin-top:40px;}

.badge-new{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(120deg,var(--gold),var(--gold-dark));
  color:#3a2400;font-weight:800;font-size:.72rem;letter-spacing:.06em;
  padding:5px 12px;border-radius:100px;text-transform:uppercase;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:100px;font-family:var(--font-head);
  font-weight:700;font-size:.98rem;transition:all .25s ease;white-space:nowrap;
  cursor:pointer;
}
.btn svg{width:19px;height:19px;flex-shrink:0;}
.btn-primary{
  background:linear-gradient(120deg,var(--blue),var(--navy));
  color:#fff;box-shadow:0 10px 24px rgba(var(--blue-rgb),.32);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(var(--blue-rgb),.4);}
.btn-outline{
  background:transparent;color:var(--navy);border:2px solid var(--border);
}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);background:rgba(var(--blue-rgb),.05);}
.btn-white{background:#fff;color:var(--navy);box-shadow:0 10px 24px rgba(0,0,0,.15);}
.btn-white:hover{transform:translateY(-2px);}
.btn-ghost-white{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.5);backdrop-filter:blur(4px);}
.btn-ghost-white:hover{background:rgba(255,255,255,.22);}
.btn-whatsapp{background:linear-gradient(120deg,#2be579,var(--whatsapp-dark));color:#06341a;box-shadow:0 10px 24px rgba(37,211,102,.35);}
.btn-whatsapp:hover{transform:translateY(-2px);}
.btn-sm{padding:10px 20px;font-size:.88rem;}
.btn-block{width:100%;}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.topbar{
  background:var(--navy-dark);color:#cfe0f2;font-size:.82rem;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:8px;}
.topbar a{display:inline-flex;align-items:center;gap:6px;color:#cfe0f2;transition:color .2s;}
.topbar a:hover{color:#fff;}
.topbar-left{display:flex;gap:22px;flex-wrap:wrap;}
.topbar svg{width:14px;height:14px;}

.site-header{
  position:sticky;top:0;z-index:1000;background:#fff;
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease, padding .25s ease;
}
.site-header.scrolled{box-shadow:0 6px 24px rgba(4,46,101,.1);}
.site-header .nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand img{height:40px;width:auto;}

.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links a{
  padding:10px 16px;border-radius:100px;font-weight:600;font-size:.95rem;
  color:var(--text);transition:all .2s;position:relative;
}
.nav-links a:hover{color:var(--blue);background:rgba(var(--blue-rgb),.07);}
.nav-links a.active{color:var(--blue);background:rgba(var(--blue-rgb),.09);}
.nav-cta{display:flex;align-items:center;gap:12px;}

.nav-toggle{
  display:none;flex-direction:column;gap:5px;padding:10px;z-index:1200;
}
.nav-toggle span{width:26px;height:2.5px;background:var(--navy);border-radius:2px;transition:all .25s;}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

@media (max-width:980px){
  .nav-links{
    position:fixed;inset:0 0 0 auto;top:0;height:100vh;width:min(340px,84vw);
    background:#fff;flex-direction:column;align-items:stretch;
    padding:100px 28px 40px;gap:6px;box-shadow:-20px 0 60px rgba(0,0,0,.15);
    transform:translateX(100%);transition:transform .35s ease;overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{padding:14px 18px;font-size:1.05rem;}
  .nav-toggle{display:flex;}
  .nav-cta .btn-sm-desktop{display:none;}
  .nav-backdrop{
    position:fixed;inset:0;background:rgba(4,10,20,.5);z-index:999;
    opacity:0;pointer-events:none;transition:opacity .3s;
  }
  .nav-backdrop.open{opacity:1;pointer-events:auto;}
}
@media (min-width:981px){
  .nav-cta-mobile-only{display:none;}
}

.breadcrumb{padding:18px 0;font-size:.88rem;color:var(--text-muted);}
.breadcrumb a{color:var(--blue);font-weight:600;}
.breadcrumb span{margin:0 8px;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#03234f 0%,var(--navy) 46%, var(--blue) 130%);
  color:#fff;padding:96px 0 140px;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;}}

.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  padding:7px 14px;border-radius:100px;backdrop-filter:blur(6px);
}
.hero-badge svg{width:15px;height:15px;color:var(--gold);}

.hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:20px;}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,#8fd6ff,#e3f3ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.lead{font-size:1.18rem;color:rgba(255,255,255,.86);max-width:560px;margin-bottom:34px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px;}

.hero-trust{display:flex;flex-wrap:wrap;gap:28px;}
.hero-trust div{display:flex;flex-direction:column;}
.hero-trust strong{font-family:var(--font-head);font-size:1.5rem;color:#fff;}
.hero-trust span{font-size:.82rem;color:rgba(255,255,255,.72);}

/* Visual mock/graphic */
.hero-visual{position:relative;height:440px;}
.hv-card{
  position:absolute;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);color:var(--text);padding:22px;
}
.hv-card h4{font-size:.95rem;color:var(--navy);margin-bottom:2px;}
.hv-card p{font-size:.78rem;color:var(--text-muted);}
.hv-main{width:78%;left:2%;top:6%;padding:26px;z-index:3;}
.hv-main .hv-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.hv-main .hv-chip{background:rgba(var(--blue-rgb),.1);color:var(--blue);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:100px;}
.hv-bars{display:flex;align-items:flex-end;gap:8px;height:70px;margin:14px 0;}
.hv-bars i{flex:1;background:linear-gradient(180deg,var(--blue-light),var(--blue));border-radius:6px 6px 0 0;display:block;}
.hv-float-1{width:56%;right:0;bottom:8%;z-index:4;padding:16px 18px;display:flex;align-items:center;gap:12px;}
.hv-float-1 .ic{width:42px;height:42px;border-radius:12px;background:rgba(37,211,102,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hv-float-1 .ic svg{width:22px;height:22px;color:var(--whatsapp-dark);}
.hv-float-2{width:44%;left:0;bottom:-4%;z-index:2;padding:16px 18px;display:flex;align-items:center;gap:12px;}
.hv-float-2 .ic{width:42px;height:42px;border-radius:12px;background:rgba(242,168,61,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hv-float-2 .ic svg{width:22px;height:22px;color:var(--gold-dark);}
.hv-ring{position:absolute;border-radius:50%;border:2px dashed rgba(255,255,255,.25);}
.hv-ring.r1{width:340px;height:340px;top:-40px;right:-60px;}
.hv-dot{position:absolute;width:14px;height:14px;background:var(--gold);border-radius:50%;box-shadow:0 0 0 8px rgba(242,168,61,.18);}
@media (max-width:960px){.hero-visual{height:360px;margin-top:20px;}}
@media (max-width:520px){.hero-visual{height:300px;}.hv-main{padding:18px;}}

.hero-wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;}
.hero-wave svg{width:100%;height:70px;display:block;}

/* Page hero (inner pages) */
.page-hero{
  background:linear-gradient(155deg,#03234f 0%,var(--navy) 60%,var(--blue) 150%);
  color:#fff;padding:64px 0 84px;position:relative;overflow:hidden;
}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,2.9rem);max-width:760px;}
.page-hero p{color:rgba(255,255,255,.85);max-width:620px;font-size:1.08rem;margin-top:14px;}
.page-hero .breadcrumb{color:rgba(255,255,255,.7);}
.page-hero .breadcrumb a{color:#fff;}

/* ==========================================================================
   STATS BAR
   ========================================================================== */
.stats-bar{background:#fff;margin-top:-64px;position:relative;z-index:5;}
.stats-card{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:repeat(4,1fr);padding:38px 20px;
}
.stat-item{text-align:center;border-right:1px solid var(--border);padding:0 10px;}
.stat-item:last-child{border-right:none;}
.stat-number{
  font-family:var(--font-head);font-weight:800;font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--navy);display:flex;align-items:baseline;justify-content:center;gap:2px;
}
.stat-number .suffix{font-size:1.3rem;color:var(--blue);}
.stat-label{color:var(--text-muted);font-size:.85rem;margin-top:6px;font-weight:600;}
@media (max-width:760px){
  .stats-card{grid-template-columns:repeat(2,1fr);gap:24px 0;}
  .stat-item{border-right:none;border-bottom:1px solid var(--border);padding-bottom:20px;}
  .stat-item:nth-child(2n){border-right:none;}
}

/* ==========================================================================
   DUAL SERVICES (home) — dos líneas de negocio
   ========================================================================== */
.dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
@media (max-width:860px){.dual-grid{grid-template-columns:1fr;}}
.dual-card{
  border-radius:var(--radius-lg);padding:44px 38px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .3s ease, box-shadow .3s ease;
}
.dual-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.dual-card.card-a{background:linear-gradient(155deg,#04264f,var(--navy));color:#fff;}
.dual-card.card-b{background:linear-gradient(155deg,var(--blue),#025089);color:#fff;}
.dual-card .dc-icon{
  width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.dual-card .dc-icon svg{width:32px;height:32px;color:#fff;}
.dual-card h3{color:#fff;font-size:1.55rem;margin-bottom:12px;}
.dual-card p{color:rgba(255,255,255,.85);margin-bottom:22px;}
.dual-card ul{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.dual-card li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:rgba(255,255,255,.92);}
.dual-card li svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--gold);}
.dual-card .dc-actions{display:flex;flex-wrap:wrap;gap:12px;}
.dual-card .professional-tag{
  display:flex;align-items:center;gap:10px;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.2);font-size:.85rem;color:rgba(255,255,255,.8);
}
.dual-card .professional-tag strong{display:block;color:#fff;font-size:.95rem;}

/* ==========================================================================
   TABS — servicios detallados
   ========================================================================== */
.tabs-nav{display:flex;justify-content:center;gap:10px;margin-bottom:44px;flex-wrap:wrap;}
.tab-btn{
  padding:14px 28px;border-radius:100px;font-family:var(--font-head);font-weight:700;
  background:#fff;border:2px solid var(--border);color:var(--text-muted);
  display:flex;align-items:center;gap:10px;transition:all .2s;
}
.tab-btn svg{width:19px;height:19px;}
.tab-btn:hover{border-color:var(--blue);color:var(--blue);}
.tab-btn.active{background:linear-gradient(120deg,var(--blue),var(--navy));border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(var(--blue-rgb),.3);}

.tab-panel{display:none;}
.tab-panel.active{display:block;animation:fadeIn .4s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.service-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.service-grid{grid-template-columns:1fr;}}
.service-item{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 24px;transition:all .25s ease;
}
.service-item:hover{border-color:transparent;box-shadow:var(--shadow);transform:translateY(-4px);}
.service-item .si-icon{
  width:52px;height:52px;border-radius:14px;background:var(--bg-navy-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.service-item .si-icon svg{width:26px;height:26px;color:var(--blue);}
.service-item h4{font-size:1.06rem;margin-bottom:8px;color:var(--navy);}
.service-item p{font-size:.92rem;color:var(--text-muted);}

/* ==========================================================================
   WHY US
   ========================================================================== */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:960px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr;}}
.why-card{text-align:left;padding:8px;}
.why-card .wc-icon{
  width:58px;height:58px;border-radius:16px;
  background:linear-gradient(140deg,var(--blue),var(--navy));
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  box-shadow:0 10px 22px rgba(var(--blue-rgb),.28);
}
.why-card .wc-icon svg{width:28px;height:28px;color:#fff;}
.why-card h4{font-size:1.08rem;margin-bottom:8px;}
.why-card p{color:var(--text-muted);font-size:.93rem;}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
@media (max-width:820px){.team-grid{grid-template-columns:1fr;}}
.team-card{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:36px;display:flex;flex-direction:column;gap:18px;border-top:5px solid var(--blue);
}
.team-card.alt{border-top-color:var(--gold);}
.team-head{display:flex;gap:20px;align-items:center;}
.team-avatar{
  width:84px;height:84px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,var(--blue),var(--navy));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:1.6rem;color:#fff;
  box-shadow:0 10px 22px rgba(var(--blue-rgb),.3);
}
.team-card.alt .team-avatar{background:linear-gradient(140deg,var(--gold),var(--gold-dark));box-shadow:0 10px 22px rgba(242,168,61,.35);}
.team-head h3{font-size:1.28rem;margin-bottom:4px;}
.team-head .role{color:var(--blue);font-weight:700;font-size:.92rem;}
.team-card.alt .role{color:var(--gold-deep);}
.team-card p.bio{color:var(--text-muted);font-size:.95rem;}
.team-matriculas{background:var(--bg-alt);border-radius:var(--radius-sm);padding:16px 18px;display:flex;flex-direction:column;gap:8px;}
.team-matriculas div{display:flex;gap:10px;font-size:.86rem;color:var(--text);align-items:flex-start;}
.team-matriculas svg{width:16px;height:16px;color:var(--blue);flex-shrink:0;margin-top:3px;}
.team-card .btn{align-self:flex-start;}

/* ==========================================================================
   CLIENTES / MARQUEE
   ========================================================================== */
.clients-marquee{overflow:hidden;position:relative;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:20px;width:max-content;animation:scrollX 32s linear infinite;}
.clients-marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scrollX{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.client-tile{
  width:190px;height:96px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--text-soft);flex-shrink:0;
}
.client-tile svg{width:30px;height:30px;color:var(--blue);opacity:.55;}
.client-tile span{font-size:.74rem;font-weight:700;letter-spacing:.03em;color:var(--text-soft);}
.clients-note{
  text-align:center;color:var(--text-muted);font-size:.9rem;margin-top:22px;
  background:var(--bg-navy-soft);display:inline-block;padding:10px 20px;border-radius:100px;
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews-top{display:grid;grid-template-columns:.9fr 1.6fr;gap:40px;align-items:center;margin-bottom:44px;}
@media (max-width:860px){.reviews-top{grid-template-columns:1fr;}}
.rating-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:32px;text-align:center;}
.rating-number{font-family:var(--font-head);font-weight:800;font-size:3.2rem;color:var(--navy);line-height:1;}
.stars{display:flex;gap:4px;justify-content:center;margin:12px 0;}
.stars svg{width:22px;height:22px;color:var(--gold);}
.rating-card p{color:var(--text-muted);font-size:.92rem;}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:900px){.testimonial-grid{grid-template-columns:1fr;}}
.testimonial-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;gap:14px;
}
.testimonial-card .stars{justify-content:flex-start;margin:0;}
.testimonial-card .stars svg{width:16px;height:16px;}
.testimonial-card p{font-size:.94rem;color:var(--text);flex:1;}
.testimonial-who{display:flex;align-items:center;gap:10px;}
.testimonial-who .tw-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--bg-navy-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--font-head);
}
.testimonial-who strong{font-size:.86rem;display:block;}
.testimonial-who span{font-size:.78rem;color:var(--text-muted);}

/* ==========================================================================
   BLOG / NOVEDADES
   ========================================================================== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:all .25s;
}
.blog-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);}
.blog-cover{
  height:150px;background:linear-gradient(140deg,var(--blue),var(--navy));
  display:flex;align-items:center;justify-content:center;position:relative;
}
.blog-cover svg{width:44px;height:44px;color:rgba(255,255,255,.9);}
.blog-cat{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--navy);font-size:.7rem;font-weight:800;padding:5px 12px;border-radius:100px;text-transform:uppercase;letter-spacing:.04em;}
.blog-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.blog-meta{display:flex;gap:12px;font-size:.78rem;color:var(--text-soft);}
.blog-body h3{font-size:1.14rem;}
.blog-body p{color:var(--text-muted);font-size:.92rem;flex:1;}
.blog-readmore{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;font-size:.9rem;margin-top:6px;}
.blog-readmore svg{width:16px;height:16px;transition:transform .2s;}
.blog-card:hover .blog-readmore svg{transform:translateX(4px);}

/* Article page */
.article-wrap{max-width:760px;margin:0 auto;}
.article-wrap h2{font-size:1.5rem;margin:36px 0 14px;}
.article-wrap h3{font-size:1.2rem;margin:26px 0 10px;color:var(--navy);}
.article-wrap p{margin-bottom:18px;color:var(--text);font-size:1.03rem;}
.article-wrap ul{margin:0 0 20px 0;display:flex;flex-direction:column;gap:10px;}
.article-wrap ul li{display:flex;gap:10px;padding-left:0;}
.article-wrap ul li svg{width:18px;height:18px;color:var(--blue);flex-shrink:0;margin-top:4px;}
.article-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--text-muted);font-size:.88rem;margin-bottom:10px;}
.article-cta{
  background:var(--bg-navy-soft);border-radius:var(--radius);padding:28px;margin-top:36px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.article-cta h4{font-size:1.1rem;margin-bottom:4px;}
.article-cta p{color:var(--text-muted);font-size:.9rem;margin:0;}
.article-disclaimer{
  font-size:.84rem;color:var(--text-muted);background:#fff8ea;border:1px solid #f2d9a1;
  padding:14px 18px;border-radius:var(--radius-sm);margin:22px 0;
}

/* ==========================================================================
   PROCESO / PASOS
   ========================================================================== */
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step;}
@media (max-width:900px){.process-steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.process-steps{grid-template-columns:1fr;}}
.step-item{position:relative;padding:30px 22px 22px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);}
.step-number{
  width:42px;height:42px;border-radius:12px;background:linear-gradient(140deg,var(--blue),var(--navy));
  color:#fff;font-family:var(--font-head);font-weight:800;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;font-size:1.1rem;
}
.step-item h4{font-size:1.02rem;margin-bottom:8px;}
.step-item p{font-size:.9rem;color:var(--text-muted);}

/* ==========================================================================
   AUDIENCIA (para quién es)
   ========================================================================== */
.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;}
.audience-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.audience-card .ac-icon{width:46px;height:46px;border-radius:12px;background:var(--bg-navy-soft);display:flex;align-items:center;justify-content:center;}
.audience-card .ac-icon svg{width:24px;height:24px;color:var(--blue);}
.audience-card h4{font-size:.98rem;}
.audience-card p{font-size:.86rem;color:var(--text-muted);}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.faq-question{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 26px;text-align:left;font-family:var(--font-head);font-weight:700;color:var(--navy);
}
.faq-question .fq-ic{
  width:32px;height:32px;border-radius:50%;background:var(--bg-navy-soft);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:transform .3s;
}
.faq-question .fq-ic svg{width:16px;height:16px;color:var(--blue);}
.faq-item.open .fq-ic{transform:rotate(45deg);background:var(--blue);}
.faq-item.open .fq-ic svg{color:#fff;}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-answer-inner{padding:0 26px 22px;color:var(--text-muted);font-size:.95rem;}

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.cta-banner{
  border-radius:var(--radius-lg);padding:56px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%);color:#fff;
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
}
.cta-banner h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:10px;}
.cta-banner p{color:rgba(255,255,255,.85);max-width:460px;}
.cta-banner .cta-actions{display:flex;gap:14px;flex-wrap:wrap;}
.cta-banner::after{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.18);top:-120px;right:-80px;
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr;}}

.contact-form-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:40px;}
.contact-form-card h3{font-size:1.4rem;margin-bottom:6px;}
.contact-form-card > p{color:var(--text-muted);margin-bottom:26px;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-weight:700;font-size:.86rem;color:var(--navy);margin-bottom:7px;}
.form-group label .req{color:var(--blue);}
.form-control{
  width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg-alt);transition:all .2s;font-size:.96rem;
}
.form-control:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(var(--blue-rgb),.12);}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6c7c' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px;}
textarea.form-control{resize:vertical;min-height:120px;}
.form-hint{font-size:.78rem;color:var(--text-soft);margin-top:5px;}
.form-error{font-size:.8rem;color:#c0392b;margin-top:5px;display:none;}
.form-group.invalid .form-control{border-color:#c0392b;}
.form-group.invalid .form-error{display:block;}
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0;}

.form-status{
  border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:18px;font-size:.92rem;
  font-weight:600;display:none;align-items:center;gap:10px;
}
.form-status.show{display:flex;}
.form-status.success{background:#e7f8ef;color:#1a7a44;}
.form-status.error{background:#fdecea;color:#b3261e;}

.contact-side{display:flex;flex-direction:column;gap:20px;}
.info-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;gap:16px;}
.info-card .ic{
  width:48px;height:48px;border-radius:12px;background:var(--bg-navy-soft);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.info-card .ic svg{width:24px;height:24px;color:var(--blue);}
.info-card h4{font-size:.98rem;margin-bottom:4px;}
.info-card p{font-size:.9rem;color:var(--text-muted);}
.info-card a{color:var(--blue);font-weight:600;}
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);height:240px;}
.map-embed iframe{width:100%;height:100%;border:0;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--navy-dark);color:#c9d7e6;padding-top:72px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand img{height:38px;margin-bottom:16px;}
.footer-brand p{font-size:.9rem;color:#9fb2c4;max-width:280px;margin-bottom:18px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.footer-social a:hover{background:var(--blue);}
.footer-social svg{width:17px;height:17px;color:#fff;}
.footer-col h5{font-family:var(--font-head);color:#fff;font-size:.95rem;margin-bottom:18px;letter-spacing:.02em;}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col a{font-size:.9rem;color:#9fb2c4;transition:color .2s;}
.footer-col a:hover{color:#fff;}
.footer-col .fc-item{display:flex;gap:10px;font-size:.88rem;color:#9fb2c4;align-items:flex-start;}
.footer-col .fc-item svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--blue-light);}
.footer-bottom{
  padding:26px 0 30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:.8rem;color:#7d92a6;
}
.footer-legal{font-size:.78rem;color:#7d92a6;text-align:center;padding:20px 0;border-top:1px solid rgba(255,255,255,.08);line-height:1.8;}
.footer-legal strong{color:#aebfd0;}

/* ==========================================================================
   WHATSAPP FLOAT + BACK TO TOP
   ========================================================================== */
.whatsapp-float{
  position:fixed;bottom:26px;right:26px;z-index:1500;
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(140deg,#2be579,var(--whatsapp-dark));
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(37,211,102,.45);
  transition:transform .25s;
}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:32px;height:32px;color:#fff;}
.whatsapp-float .ring{
  position:absolute;inset:0;border-radius:50%;background:var(--whatsapp);
  animation:pulse-ring 2.2s cubic-bezier(.4,0,.6,1) infinite;z-index:-1;
}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.55;}100%{transform:scale(1.9);opacity:0;}}
.whatsapp-tooltip{
  position:absolute;right:76px;top:50%;transform:translateY(-50%);
  background:#fff;color:var(--navy);padding:10px 16px;border-radius:10px;font-size:.85rem;
  font-weight:700;white-space:nowrap;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s;
}
.whatsapp-float:hover .whatsapp-tooltip{opacity:1;}

.back-to-top{
  position:fixed;bottom:26px;left:26px;z-index:1400;width:48px;height:48px;border-radius:50%;
  background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transform:translateY(10px);transition:all .3s;
}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top svg{width:20px;height:20px;color:var(--navy);}

@media (max-width:600px){
  .whatsapp-float{width:56px;height:56px;bottom:18px;right:18px;}
  .whatsapp-float svg{width:28px;height:28px;}
  .whatsapp-tooltip{display:none;}
  .back-to-top{width:42px;height:42px;bottom:18px;left:18px;}
}

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.active{opacity:1;transform:translateY(0);}
.reveal-stagger.active > *{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal-stagger.active > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.active > *:nth-child(2){transition-delay:.12s;}
.reveal-stagger.active > *:nth-child(3){transition-delay:.19s;}
.reveal-stagger.active > *:nth-child(4){transition-delay:.26s;}
.reveal-stagger.active > *:nth-child(5){transition-delay:.33s;}
.reveal-stagger.active > *:nth-child(6){transition-delay:.4s;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-stagger>*,.marquee-track,.whatsapp-float .ring{transition:none;animation:none;opacity:1;transform:none;}
}

/* ==========================================================================
   MISC PAGE HELPERS
   ========================================================================== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:30px;}}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;}
.pill{background:var(--bg-navy-soft);color:var(--navy);font-size:.85rem;font-weight:700;padding:8px 16px;border-radius:100px;}

.divider-icon{
  width:70px;height:70px;border-radius:50%;background:var(--bg-navy-soft);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.divider-icon svg{width:34px;height:34px;color:var(--blue);}

.not-found{padding:120px 0;text-align:center;}
.not-found .code{font-family:var(--font-head);font-size:6rem;font-weight:800;color:var(--bg-navy-soft);}

.gracias-box{
  max-width:640px;margin:0 auto;text-align:center;background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:56px 40px;
}
.gracias-icon{
  width:88px;height:88px;border-radius:50%;background:#e7f8ef;display:flex;align-items:center;
  justify-content:center;margin:0 auto 26px;
}
.gracias-icon svg{width:44px;height:44px;color:#1a7a44;}