/* ============================================================
   ASIMTRA · Consejeros de Seguridad ADR
   Sistema de diseño v2.0 — web institucional estática
   ============================================================ */

:root{
  /* Color */
  --navy:#0D1F3C; --navy-d:#081428; --blue:#185FA5; --blue-l:#4A8BCE;
  --teal:#1D9E75; --teal-l:#9FE1CB; --teal-d:#147A5A;
  --bg:#FAFAF8; --gray:#F5F5F3; --s100:#EFF2F6; --s200:#E1E5EC;
  --s500:#6B7890; --s700:#3B4A63;

  /* Type */
  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* Radius / shadow */
  --r-btn:10px; --r-card:16px; --r-pill:30px;
  --sh-card:0 30px 50px -20px rgba(13,31,60,.2);
  --sh-form:0 30px 60px -30px rgba(13,31,60,.2);

  /* Layout */
  --nav-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);color:var(--navy);background:var(--bg);
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{list-style:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;color:var(--navy);line-height:1.05}
.mono{font-family:var(--font-mono);letter-spacing:.05em}
.kicker{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:32px;height:1px;background:currentColor}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;
  border-radius:var(--r-btn);transition:transform .15s, background .15s, border-color .15s, color .15s;
  cursor:pointer;border:1.5px solid transparent;font-family:var(--font-body);
}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--teal);color:#fff;padding:16px 28px;font-size:15px}
.btn-primary:hover{background:var(--teal-d);transform:translateY(-1px)}
.btn-secondary{color:var(--navy);padding:16px 24px;font-size:15px;border-color:var(--s200)}
.btn-secondary:hover{border-color:var(--navy)}
.btn-sm{padding:10px 18px;font-size:13.5px}
.btn-xs{padding:8px 15px;font-size:12.5px}
.acceso-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--s700);white-space:nowrap;transition:color .15s}
.acceso-link:hover{color:var(--navy)}
.acceso-link svg{width:14px;height:14px;stroke:currentColor}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--blue)}
.on-dark .btn-secondary{color:#fff;border-color:rgba(255,255,255,.25)}
.on-dark .btn-secondary:hover{border-color:#fff}

/* ---------- Decorative rings ---------- */
.ring{position:absolute;border-radius:50%;pointer-events:none;border:1.5px solid rgba(29,158,117,.14)}
.ring.blue{border-color:rgba(24,95,165,.12)}
.ring.float{animation:floatRing 18s ease-in-out infinite}
.ring.float-slow{animation:floatRing 26s ease-in-out infinite reverse}
@keyframes floatRing{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-18px,24px) scale(1.04)}
}

/* ============================================================
   NAV
   ============================================================ */
nav.top{
  position:sticky;top:0;z-index:60;background:rgba(250,250,248,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--s200);transition:height .25s, box-shadow .25s, background .25s;
}
nav.top .inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);transition:height .25s}
nav.top.scrolled{box-shadow:0 8px 30px -18px rgba(13,31,60,.35)}
nav.top.scrolled .inner{height:60px}
.brand-logo{display:flex;align-items:center;gap:10px}
.brand-logo svg{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.brand-logo:hover svg{transform:rotate(-8deg) scale(1.06)}
.brand-logo .w{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.04em;color:var(--navy)}
.brand-logo .sub{font-family:var(--font-mono);font-size:10px;color:var(--s500);letter-spacing:.1em;text-transform:uppercase;margin-left:10px;padding-left:10px;border-left:1px solid var(--s200)}
nav.top .menu{display:flex;gap:34px;font-size:14.5px;font-weight:500}
nav.top .menu a{color:var(--s700);position:relative;padding:4px 0;transition:color .15s}
nav.top .menu a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--teal);transition:width .25s}
nav.top .menu a:hover,nav.top .menu a.active{color:var(--navy)}
nav.top .menu a:hover::after,nav.top .menu a.active::after{width:100%}
nav.top .act{display:flex;align-items:center;gap:14px}
nav.top .phone{font-family:var(--font-mono);font-size:13px;color:var(--s700);white-space:nowrap}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;border:1px solid var(--s200);border-radius:10px;align-items:center;justify-content:center;background:#fff;cursor:pointer}
.burger span{width:18px;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s, opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.drawer{position:fixed;inset:var(--nav-h) 0 0 0;background:var(--navy);color:#fff;z-index:55;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;padding:40px 32px;display:flex;flex-direction:column;gap:8px}
.drawer.open{opacity:1;transform:translateY(0);pointer-events:auto}
.drawer a{font-family:var(--font-display);font-weight:600;font-size:28px;color:#fff;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer .d-foot{margin-top:auto;font-family:var(--font-mono);font-size:13px;color:var(--teal-l);letter-spacing:.06em}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .ring.float,.ring.float-slow{animation:none}
}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:clamp(72px,10vw,128px) 0}
.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,56px)}
.sec-head h2{font-size:clamp(34px,5vw,56px);font-weight:800;margin:18px 0 20px;line-height:1.02}
.sec-head h2 em{font-style:normal;color:var(--teal)}
.sec-head p{font-size:18px;color:var(--s700);max-width:620px}
em.t{font-style:normal;color:var(--teal)}

/* ---------- HERO (home) ---------- */
.hero{position:relative;padding:88px 0 120px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(44px,7vw,84px);font-weight:800;letter-spacing:-.04em;line-height:.94;margin:24px 0 28px}
.hero h1 em{font-style:normal;color:var(--teal);font-weight:500}
.hero p.lede{font-size:19px;color:var(--s700);max-width:540px;margin-bottom:36px}
.hero .actions{display:flex;gap:16px;align-items:center;margin-bottom:48px;flex-wrap:wrap}
.hero .signals{display:flex;gap:40px;padding-top:36px;border-top:1px solid var(--s200);flex-wrap:wrap}
.hero .signals .s{display:flex;flex-direction:column}
.hero .signals .n{font-family:var(--font-display);font-weight:800;font-size:40px;letter-spacing:-.035em;color:var(--navy);line-height:1}
.hero .signals .n em{font-style:normal;color:var(--teal);font-weight:500;font-size:22px;vertical-align:top;margin-left:3px}
.hero .signals .l{font-size:12px;color:var(--s500);margin-top:6px}

/* hero viz */
.viz{position:relative;aspect-ratio:1;max-width:520px;margin-left:auto;width:100%}
.viz .card{position:absolute;background:#fff;border:1px solid var(--s200);border-radius:14px;padding:20px;box-shadow:0 30px 60px -20px rgba(13,31,60,.18)}
.viz .main{inset:10% 10% 15% 0%;background:var(--navy);border-color:var(--navy);color:#fff;padding:32px;display:flex;flex-direction:column;justify-content:space-between}
.viz .main .tag{font-family:var(--font-mono);font-size:10px;color:var(--teal-l);letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.viz .main h3{color:#fff;font-size:28px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.viz .main .foot{padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.65);font-family:var(--font-mono);display:flex;justify-content:space-between}
.viz .main .foot em{font-style:normal;color:var(--teal-l)}
.viz .pill{right:-10px;top:8%;display:flex;align-items:center;gap:12px;border-radius:12px;animation:floaty 5s ease-in-out infinite}
.viz .pill .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(29,158,117,.2);animation:pulse 2.4s ease-in-out infinite}
.viz .pill .t{font-size:13px;font-weight:600;color:var(--navy)}
.viz .pill .s{font-size:11px;color:var(--s500);font-family:var(--font-mono)}
.viz .stamp{right:0;bottom:0;width:150px;height:150px;border-radius:50%;background:var(--teal);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;box-shadow:0 20px 40px -10px rgba(29,158,117,.4);animation:floaty 6s ease-in-out infinite .6s}
.viz .stamp .sk{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--teal-l);margin-bottom:4px}
.viz .stamp .sv{font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1}
.viz .stamp .sm{font-size:11px;margin-top:6px;opacity:.85}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(29,158,117,.2)}50%{box-shadow:0 0 0 7px rgba(29,158,117,.05)}}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{position:relative;background:var(--navy);color:#fff;padding:120px 0 88px;overflow:hidden}
.page-hero .kicker{color:var(--teal-l)}
.page-hero h1{color:#fff;font-size:clamp(40px,6vw,72px);font-weight:800;letter-spacing:-.035em;line-height:1;margin:20px 0 22px}
.page-hero h1 em{font-style:normal;color:var(--teal-l);font-weight:500}
.page-hero p{color:rgba(255,255,255,.78);font-size:19px;max-width:600px}
.page-hero .crumbs{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-l)}
.page-hero .crumbs a{color:rgba(255,255,255,.55)}
.page-hero .crumbs a:hover{color:#fff}

/* ---------- LOGOS STRIP ---------- */
.strip{border-top:1px solid var(--s200);border-bottom:1px solid var(--s200);background:#fff;overflow:hidden}
.strip .inner{display:flex;align-items:center;gap:48px;padding:22px 0;font-size:12px;color:var(--s500);font-family:var(--font-mono);letter-spacing:.08em}
.strip .t{text-transform:uppercase;white-space:nowrap;color:var(--s700);flex-shrink:0}
.strip .logos{display:flex;gap:48px;align-items:center;flex:1;justify-content:space-between;opacity:.8}
.strip .logos span{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--s700);letter-spacing:-.02em;white-space:nowrap}

/* ---------- SERVICES ---------- */
.services{background:#fff;border-top:1px solid var(--s200);border-bottom:1px solid var(--s200)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc{border:1px solid var(--s200);border-radius:14px;padding:36px;background:#fff;transition:transform .2s, border-color .2s, box-shadow .2s;position:relative;overflow:hidden}
.svc:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(13,31,60,.15)}
.svc .num{font-family:var(--font-mono);font-size:11px;color:var(--s500);letter-spacing:.1em;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center}
.svc .num .arrow{width:28px;height:28px;border-radius:50%;border:1px solid var(--s200);display:flex;align-items:center;justify-content:center;color:var(--s500);transition:all .2s}
.svc:hover .arrow{background:var(--teal);border-color:var(--teal);color:#fff;transform:rotate(-45deg)}
.svc .ic{width:44px;height:44px;margin-bottom:20px}
.svc h3{font-size:24px;font-weight:700;margin-bottom:10px;letter-spacing:-.02em}
.svc p{font-size:15px;color:var(--s700);margin-bottom:20px}
.svc ul{padding-top:20px;border-top:1px dashed var(--s200)}
.svc ul li{font-size:13.5px;color:var(--s700);padding:6px 0 6px 22px;position:relative}
.svc ul li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:1px;background:var(--teal)}
.svc.feat{background:var(--navy);border-color:var(--navy);color:#fff;grid-row:span 2;padding:48px}
.svc.feat .num{color:var(--teal-l)}
.svc.feat .num .arrow{border-color:rgba(255,255,255,.25);color:var(--teal-l)}
.svc.feat:hover .arrow{background:var(--teal);border-color:var(--teal);color:#fff}
.svc.feat h3{color:#fff;font-size:36px}
.svc.feat p{color:rgba(255,255,255,.8);font-size:16px}
.svc.feat ul{border-top-color:rgba(255,255,255,.15)}
.svc.feat ul li{color:rgba(255,255,255,.8)}
.svc.feat ul li::before{background:var(--teal-l)}

/* ---------- PROCESS ---------- */
.process{background:var(--bg);position:relative;overflow:hidden}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;z-index:1}
.step{padding:32px 24px 32px 0;border-right:1px solid var(--s200);position:relative}
.step:last-child{border-right:none}
.step .n{font-family:var(--font-mono);font-size:11px;color:var(--teal);letter-spacing:.14em;margin-bottom:24px;display:flex;align-items:center;gap:10px}
.step .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--teal)}
.step h4{font-size:20px;font-weight:700;margin-bottom:10px;letter-spacing:-.02em}
.step p{font-size:14.5px;color:var(--s700);padding-right:20px}
.step .dur{margin-top:20px;font-family:var(--font-mono);font-size:11px;color:var(--s500);padding:6px 10px;background:var(--s100);border-radius:6px;display:inline-block}

/* ---------- STATS BAND ---------- */
.stats{background:var(--navy);color:#fff;padding:100px 0;position:relative;overflow:hidden}
.stats .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1}
.stats h2{color:#fff;font-size:clamp(32px,4.5vw,52px);font-weight:800;margin:18px 0}
.stats h2 em{font-style:normal;color:var(--teal-l)}
.stats .lede{color:rgba(255,255,255,.75);font-size:17px;max-width:460px}
.stats .kicker{color:var(--teal-l)}
.stats .nums{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.15);border-left:1px solid rgba(255,255,255,.15)}
.stats .n{padding:32px;border-right:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.stats .n .v{font-family:var(--font-display);font-weight:800;font-size:clamp(44px,5vw,64px);letter-spacing:-.035em;line-height:1;color:#fff}
.stats .n .v em{font-style:normal;color:var(--teal-l);font-weight:500;font-size:32px;margin-left:4px}
.stats .n .l{font-size:13px;color:rgba(255,255,255,.7);margin-top:10px}

/* ---------- TESTIMONIAL ---------- */
.testim{background:#fff;border-top:1px solid var(--s200);border-bottom:1px solid var(--s200)}
.testim .duo{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.quote{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;line-height:1.2;color:var(--navy)}
.quote em{font-style:normal;color:var(--teal);font-weight:600}
.quote::before{content:"\201C";display:block;font-family:var(--font-display);font-weight:800;font-size:80px;line-height:.6;color:var(--teal);margin-bottom:16px}
.attr{margin-top:32px;padding-top:24px;border-top:1px solid var(--s200);display:flex;align-items:center;gap:16px}
.attr .av{width:56px;height:56px;border-radius:50%;background:var(--s200);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--navy)}
.attr .n{font-size:16px;font-weight:600;color:var(--navy)}
.attr .r{font-size:13px;color:var(--s500);margin-top:2px}
.logos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.lg-box{border:1px solid var(--s200);border-radius:12px;aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--s500);background:#fff;transition:all .2s}
.lg-box:hover{color:var(--navy);border-color:var(--navy);transform:translateY(-2px)}

/* ---------- FAQ ---------- */
.faq{background:var(--bg)}
.faq .grid{display:grid;grid-template-columns:1fr 1.4fr;gap:80px}
.faq details{border-bottom:1px solid var(--s200);padding:24px 0}
.faq details[open]{border-bottom-color:var(--navy)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--navy);letter-spacing:-.01em;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:32px;height:32px;border-radius:50%;border:1px solid var(--s200);display:flex;align-items:center;justify-content:center;color:var(--s500);flex-shrink:0;transition:all .25s;font-size:18px;line-height:0}
.faq details[open] summary .plus{background:var(--navy);border-color:var(--navy);color:#fff;transform:rotate(45deg)}
.faq details p{margin-top:14px;color:var(--s700);font-size:15px;max-width:640px;animation:fadeDown .35s ease}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- CTA ---------- */
.cta{background:var(--navy);color:#fff;padding:120px 0;position:relative;overflow:hidden}
.cta .inner{position:relative;z-index:1;text-align:center;max-width:820px;margin:0 auto}
.cta .kicker{color:var(--teal-l);justify-content:center}
.cta h2{color:#fff;font-size:clamp(40px,6vw,72px);font-weight:800;margin:20px 0 28px;letter-spacing:-.035em;line-height:.98}
.cta h2 em{font-style:normal;color:var(--teal-l);font-weight:500}
.cta p{color:rgba(255,255,255,.78);font-size:18px;max-width:560px;margin:0 auto 40px}
.cta .actions{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.cta .phone{margin-top:32px;font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.08em}
.cta .phone em{font-style:normal;color:var(--teal-l)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.info-card{border:1px solid var(--s200);border-radius:var(--r-card);padding:32px;background:#fff;margin-bottom:16px;transition:border-color .2s, transform .2s}
.info-card:hover{border-color:var(--navy);transform:translateY(-2px)}
.info-card .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.info-card .val{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--navy)}
.info-card .val a:hover{color:var(--teal)}
.info-card .sub{font-size:14px;color:var(--s500);margin-top:6px}
form.lead{background:#fff;border:1px solid var(--s200);border-radius:var(--r-card);padding:40px;box-shadow:var(--sh-form)}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--s700);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--s200);border-radius:var(--r-btn);
  font-family:var(--font-body);font-size:15px;color:var(--navy);background:var(--bg);transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(29,158,117,.12)}
.field textarea{resize:vertical;min-height:120px}
.form-note{font-size:12.5px;color:var(--s500);margin-top:14px}

/* ---------- VALUES / generic cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.feature{border:1px solid var(--s200);border-radius:var(--r-card);padding:32px;background:#fff;transition:transform .2s, border-color .2s, box-shadow .2s}
.feature:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:0 20px 40px -22px rgba(13,31,60,.15)}
.feature .ic{width:46px;height:46px;margin-bottom:18px}
.feature h3{font-size:21px;margin-bottom:10px;letter-spacing:-.02em}
.feature p{font-size:15px;color:var(--s700)}

.prose{max-width:760px}
.prose p{font-size:17px;color:var(--s700);margin-bottom:20px}
.prose h2{font-size:clamp(28px,4vw,40px);margin:48px 0 18px}
.prose h3{font-size:22px;margin:32px 0 12px}
.prose ul.bullets li{font-size:16px;color:var(--s700);padding:8px 0 8px 26px;position:relative}
.prose ul.bullets li::before{content:"";position:absolute;left:0;top:16px;width:14px;height:1.5px;background:var(--teal)}

/* ============================================================
   FOOTER
   ============================================================ */
/* ---------- FOTOGRAFÍA ---------- */
/* Banda de imagen a todo el ancho con overlay navy */
.photoband{position:relative;min-height:clamp(340px,46vw,520px);display:flex;align-items:center;overflow:hidden;background-size:cover;background-position:center}
.photoband::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,31,60,.92) 0%,rgba(13,31,60,.78) 45%,rgba(13,31,60,.38) 100%)}
.photoband .wrap{position:relative;z-index:1;color:#fff}
.photoband .kicker{color:var(--teal-l)}
.photoband h2{color:#fff;font-size:clamp(30px,4.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:16px 0 18px;max-width:680px}
.photoband h2 em{font-style:normal;color:var(--teal-l)}
.photoband p{color:rgba(255,255,255,.82);font-size:18px;max-width:520px;margin-bottom:28px}

/* Imagen enmarcada (empresa, etc.) */
.media-frame{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);border:1px solid var(--s200);position:relative}
.media-frame img{width:100%;height:100%;object-fit:cover;display:block}
.media-frame.tall{aspect-ratio:4/3}

/* Page-hero con foto de fondo */
.page-hero.photo{background-size:cover;background-position:center}
.page-hero.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,40,.94),rgba(8,20,40,.72))}
.page-hero.photo .wrap{position:relative;z-index:1}

/* ---------- ACREDITACIONES (logos oficiales) ---------- */
.acred{background:#fff;border-top:1px solid var(--s200);border-bottom:1px solid var(--s200);padding:72px 0}
.acred .sec-head{margin-bottom:40px}
.acred-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:40px}
.acred-logos img{height:54px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .25s, opacity .25s}
.acred-logos img:hover{filter:grayscale(0);opacity:1}
@media (max-width:640px){.acred-logos{gap:28px;justify-content:center}.acred-logos img{height:42px}}

footer.site{background:var(--navy-d);color:rgba(255,255,255,.65);padding:80px 0 32px}
footer.site .ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08)}
footer.site .brand .logo{display:flex;align-items:center;gap:12px;margin-bottom:20px}
footer.site .brand .w{font-family:var(--font-display);font-weight:800;font-size:24px;color:#fff;letter-spacing:-.04em}
footer.site .brand p{font-size:14px;max-width:320px;line-height:1.6}
footer.site h5{font-family:var(--font-mono);font-size:11px;color:var(--teal-l);letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
footer.site li{margin-bottom:12px;font-size:14px}
footer.site a:hover{color:#fff}
footer.site .fbottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;font-size:12px;font-family:var(--font-mono);letter-spacing:.06em;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:16px}
footer.site .legal{display:flex;gap:24px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  section{padding:80px 0}
  .hero{padding:48px 0 72px}
  .hero .grid,.stats .grid,.testim .duo,.faq .grid,.contact-grid{grid-template-columns:1fr;gap:48px}
  .viz{max-width:420px;margin:0 auto}
  .cards{grid-template-columns:1fr}
  .svc.feat{grid-row:auto}
  .steps{grid-template-columns:1fr 1fr}
  .step{border-right:none;border-bottom:1px solid var(--s200);padding:28px 0}
  .grid-3{grid-template-columns:1fr 1fr}
  nav.top .menu,nav.top .phone,nav.top .acceso-link{display:none}
  .burger{display:flex}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .stats .nums{grid-template-columns:1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero .signals{gap:24px}
  footer.site .ftop{grid-template-columns:1fr 1fr;gap:32px}
  form.lead{padding:28px}
}

/* ============================================================
   CAPA DE REFINAMIENTO (frontend-design + ui-ux-pro-max)
   Accesibilidad · motion pulido · detalle premium — sin tocar marca
   ============================================================ */

/* Tinte de selección y accent de formularios en color de marca */
:root{accent-color:var(--teal)}
::selection{background:var(--teal);color:#fff}

/* Focus visible accesible (CRÍTICO) — anillo teal en todo lo interactivo */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible{
  outline:2.5px solid var(--teal);
  outline-offset:3px;
  border-radius:6px;
}
.on-dark a:focus-visible,.on-dark .btn:focus-visible,
.page-hero a:focus-visible,footer.site a:focus-visible,
.drawer a:focus-visible{outline-color:var(--teal-l)}

/* Offset de anclas para que el nav sticky no tape los títulos */
[id]{scroll-margin-top:96px}

/* Cifras tabulares: el contador no “baila” de ancho al animar */
[data-count],.signals .n,.stats .n .v,.info-card .val{font-variant-numeric:tabular-nums}

/* Feedback de pulsación (scale sutil, no desplaza layout) */
.btn:active{transform:scale(.97)}
.svc:active,.feature:active,.lg-box:active,.info-card:active{transform:scale(.992)}

/* Bordes/divisores algo más definidos en cabeceras de sección */
.sec-head .kicker{margin-bottom:4px}

/* prefers-reduced-motion: silenciar también el flotado del hero */
@media (prefers-reduced-motion:reduce){
  .viz .pill,.viz .stamp,.viz .pill .dot{animation:none !important}
  *{scroll-behavior:auto !important}
  .btn:active,.svc:active,.feature:active{transform:none}
}