/* ==========================================================================
   DC Blue — propuesta 2027 · v2 (lenguaje gráfico tipo KBI)
   ========================================================================== */
@font-face{font-family:'Novatica';src:url('../fonts/novatica_medium.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Novatica';src:url('../fonts/novatica_bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --marino:#102a4f;      /* azul marino de titulares y bloques */
  --marino-2:#0b1f3d;
  --azul:#0049dd;
  --cielo:#48b4ff;       /* acento */
  --gris:#5b6a84;
  --crema:#eef3fa;       /* fondo alterno */
  --linea:#e2e9f3;
  --radio:26px;
  --ancho:min(94vw,1900px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Novatica',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#33425c;background:#fff;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:700;line-height:1.1;color:var(--marino);letter-spacing:-.6px}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 26px}
section{padding:104px 0}
section.crema{background:var(--crema)}
section.osc{background:var(--marino);color:#fff}

/* etiqueta con guion, estilo KBI */
.lab{display:inline-flex;align-items:center;gap:12px;font-size:13.5px;font-weight:700;color:var(--azul);margin-bottom:18px}
.lab:before{content:"";width:26px;height:2px;background:var(--cielo);display:block}
.osc .lab,.hero .lab{color:var(--cielo)}
h2.sec{font-size:clamp(32px,4.2vw,50px);margin-bottom:18px;max-width:17ch}
.osc h2.sec,.hero h2.sec{color:#fff}
.bajada{font-size:17px;color:var(--gris);max-width:620px}
.osc .bajada{color:rgba(255,255,255,.76)}
.head-2{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end;margin-bottom:52px}
.head-2 .bajada{margin-bottom:6px}

/* botones */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:40px;padding:13px 26px;font-size:14.5px;font-weight:700;transition:.25s;border:1.5px solid transparent}
.btn svg{width:13px;height:13px}
.btn-p{background:var(--cielo);color:#06244d}
.btn-p:hover{background:#79caff;transform:translateY(-2px)}
.btn-m{background:var(--marino);color:#fff}
.btn-m:hover{background:var(--azul);transform:translateY(-2px)}
.btn-o{border-color:rgba(255,255,255,.45);color:#fff}
.btn-o:hover{background:rgba(255,255,255,.12)}
.btn-l{border-color:var(--linea);color:var(--marino);background:#fff}
.btn-l:hover{border-color:var(--cielo);color:var(--azul)}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--azul)}
.lnk:after{content:"→"}
.lnk:hover{gap:12px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{border:1px solid var(--linea);background:#fff;border-radius:40px;padding:9px 18px;font-size:14px;color:var(--marino);transition:.2s}
.chip:hover{border-color:var(--cielo);color:var(--azul)}

/* ---------- navegación ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:.3s}
.nav-in{display:flex;align-items:center;gap:26px;padding:20px 0}
.nav .logo{display:flex;align-items:center}
.nav .logo img{height:34px;width:auto;display:block}
.nav .logo .l-oscuro{display:none}
.nav.solid .logo .l-claro{display:none}
.nav.solid .logo .l-oscuro{display:block}
.nav.solid{background:#fff;box-shadow:0 6px 30px rgba(16,42,79,.09)}
.menu{display:flex;align-items:center;gap:4px;margin-left:auto;list-style:none}
.menu>li{position:relative}
.menu>li>a{display:flex;align-items:center;gap:7px;padding:10px 15px;font-size:15px;font-weight:700;color:rgba(255,255,255,.92);border-radius:30px}
.nav.solid .menu>li>a{color:var(--marino)}
.menu>li>a:hover{color:#fff;background:rgba(255,255,255,.14)}
.nav.solid .menu>li>a:hover{color:var(--azul);background:var(--crema)}
.menu .ca{width:9px;height:9px;opacity:.75}
.sub{position:absolute;top:100%;left:0;min-width:300px;background:#fff;border-radius:20px;box-shadow:0 26px 60px rgba(16,42,79,.2);padding:12px;list-style:none;opacity:0;visibility:hidden;transform:translateY(14px);transition:.22s}
.menu>li:hover .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:block;padding:11px 16px;border-radius:14px;font-size:14.5px;font-weight:700;color:var(--marino)}
.sub a span{display:block;font-size:12.5px;font-weight:400;color:#8b99b3;margin-top:2px}
.sub a:hover{background:var(--crema);color:var(--azul)}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.32);background:none;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger i{display:block;width:18px;height:2px;background:#fff}
.nav.solid .burger{border-color:var(--linea)}.nav.solid .burger i{background:var(--marino)}

/* cinta de servicios bajo el hero (estilo KBI) */
.cinta{background:var(--marino);overflow:hidden;padding:15px 0}
.cinta-in{display:flex;gap:40px;align-items:center;animation:corre 38s linear infinite;width:max-content}
.cinta span{color:#fff;font-size:14.5px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:40px}
.cinta span:after{content:"";width:7px;height:7px;border-radius:50%;background:var(--cielo);display:block}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- hero ---------- */
.hero{--u:clamp(13px,min(1.25vw,2.25vh),26px);position:relative;color:#fff;padding:calc(var(--u)*5) 0 calc(var(--u)*3.2);min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#0b1f3d url('../img/hero.jpg') center/cover no-repeat}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(9,24,48,.96) 0%,rgba(13,36,72,.92) 46%,rgba(10,52,140,.82) 100%)}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(760px 460px at 80% 16%,rgba(72,180,255,.22),transparent 64%)}
.hero.corto{--u:clamp(14px,1.05vw,20px);min-height:0;padding:calc(var(--u)*7.4) 0 calc(var(--u)*3.8);display:block}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:calc(var(--u)*2.7);align-items:center}
.hero h1{font-size:calc(var(--u)*2.42);color:#fff;margin-bottom:calc(var(--u)*.95);letter-spacing:-.022em;line-height:1.08}
.hero h1 em{font-style:normal;color:var(--cielo)}
.hero p.lead{font-size:calc(var(--u)*.95);color:rgba(255,255,255,.82);max-width:calc(var(--u)*30);margin-bottom:calc(var(--u)*1.45);line-height:1.55}
.hero-btns{display:flex;gap:calc(var(--u)*.72);flex-wrap:wrap}
/* composición de pantallas superpuestas */
.comp{position:relative;padding-bottom:40px}
.comp .s1,.comp .s2{border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(2,12,33,.45);border:1px solid rgba(255,255,255,.14)}
.comp .s1{width:86%}
.comp .s2{width:58%;position:absolute;right:0;bottom:0}
.comp .tag{position:absolute;left:0;bottom:calc(var(--u)*1.9);background:var(--cielo);color:#06244d;border-radius:calc(var(--u)*.8);padding:calc(var(--u)*.66) calc(var(--u)*.86);max-width:calc(var(--u)*12.4);font-weight:700;font-size:calc(var(--u)*.72);line-height:1.35;box-shadow:0 18px 40px rgba(2,12,33,.35)}

/* ---------- bloque imagen + texto ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.duo.inv .duo-txt{order:2}
.duo-img{position:relative}
.duo-img img{border-radius:var(--radio)}
.duo-img .flot{position:absolute;right:-28px;bottom:-34px;width:56%;border-radius:20px;border:6px solid #fff;box-shadow:0 24px 50px rgba(16,42,79,.18)}
.duo-img .nota{position:absolute;left:-10px;bottom:-26px;background:var(--cielo);color:#06244d;border-radius:18px;padding:16px 20px;max-width:240px;font-weight:700;font-size:15px;line-height:1.35}

/* ---------- tarjetas con imagen (estilo KBI) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(16,42,79,.06);transition:.3s}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(16,42,79,.14)}
.card .shot{aspect-ratio:16/10;overflow:hidden;background:var(--crema)}
.card .shot img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:.5s}
.card:hover .shot img{transform:scale(1.05)}
.card .in{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.card .et{font-size:12.5px;font-weight:700;color:var(--azul);margin-bottom:8px}
.card h3{font-size:21px;margin-bottom:10px}
.card p{font-size:14.8px;color:var(--gris)}
.card ul{list-style:none;margin:16px 0 0}
.card ul li{position:relative;padding-left:24px;font-size:14px;color:var(--gris);margin-bottom:8px}
.card ul li:before{content:"";position:absolute;left:0;top:6px;width:12px;height:7px;border-left:2px solid var(--cielo);border-bottom:2px solid var(--cielo);transform:rotate(-45deg)}
.card .pie{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:4px}
.card .uf{font-size:13px;font-weight:700;color:var(--azul);background:#eaf2ff;border-radius:30px;padding:5px 14px}
/* tarjeta simple con ícono */
.card.ico-card .in{padding-top:30px}
.ico{width:52px;height:52px;border-radius:15px;background:#eaf2ff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ico svg{width:27px;height:27px;stroke:var(--azul);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- acordeón (Built to remove friction) ---------- */
.acc{display:flex;flex-direction:column;gap:14px}
.acc details{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:0;overflow:hidden;transition:.25s}
.acc details[open]{background:var(--marino);border-color:var(--marino)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-size:17px;font-weight:700;color:var(--marino)}
.acc summary::-webkit-details-marker{display:none}
.acc details[open] summary{color:#fff;padding-bottom:10px}
.acc .mas{width:28px;height:28px;border-radius:50%;background:var(--crema);color:var(--marino);display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 28px}
.acc details[open] .mas{background:var(--cielo);color:#06244d}
.acc p{padding:0 24px 22px;color:rgba(255,255,255,.78);font-size:15px}
.osc .acc details{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.osc .acc summary{color:#fff}
.osc .acc .mas{background:rgba(255,255,255,.14);color:#fff}
.osc .acc details[open]{background:var(--azul);border-color:var(--azul)}

/* ---------- bloque dividido con pasos (estilo private label) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radio);overflow:hidden;background:var(--marino);color:#fff}
.split-img{background-size:cover;background-position:center;min-height:430px}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-txt{padding:54px 50px}
.split-txt h2{color:#fff;font-size:clamp(26px,3vw,38px);margin-bottom:14px}
.split-txt p{color:rgba(255,255,255,.78);margin-bottom:26px;font-size:16px}
.pasos{list-style:none}
.pasos li{display:flex;align-items:flex-start;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.pasos li:last-child{border-bottom:0}
.pasos .n{width:32px;height:32px;border-radius:50%;background:rgba(72,180,255,.2);color:var(--cielo);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex:0 0 32px}
.pasos b{display:block;font-size:15.5px;color:#fff}
.pasos span{font-size:14px;color:rgba(255,255,255,.7)}

/* ---------- cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cifra{border-left:3px solid var(--cielo);padding-left:22px}
.cifra b{display:block;font-size:46px;line-height:1;color:var(--marino);letter-spacing:-2px}
.osc .cifra b{color:#fff}
.cifra span{font-size:14.5px;color:var(--gris)}
.osc .cifra span{color:rgba(255,255,255,.72)}

/* ---------- integración ---------- */
.integra{background:var(--azul);color:#fff;border-radius:var(--radio);padding:54px 52px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.integra h3{color:#fff;font-size:30px;margin-bottom:14px}
.integra p{color:rgba(255,255,255,.88);font-size:16px}
.integra ul{list-style:none}
.integra li{position:relative;padding-left:30px;margin-bottom:13px;font-size:15.5px}
.integra li:before{content:"";position:absolute;left:0;top:6px;width:13px;height:8px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* ---------- presencia ---------- */
.pres{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:center}
.pres-list{list-style:none;margin-top:28px}
.pres-list li{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-bottom:1px solid var(--linea)}
.pres-list li:first-child{border-top:1px solid var(--linea)}
.pres-pais{display:flex;align-items:center;gap:14px;font-size:19px;font-weight:700;color:var(--marino)}
.pres-pais i{width:11px;height:11px;border-radius:50%;background:var(--azul);box-shadow:0 0 0 5px #dbeafe;display:block}
.pres-anio{font-size:13px;color:var(--azul);background:#eaf2ff;border-radius:30px;padding:5px 14px;font-weight:700}
.pres-anio.hq{background:var(--azul);color:#fff}
.mapa{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px;text-align:center}
.mapa svg{width:100%;max-width:450px;height:auto;margin:0 auto}
.mapa .m-land path{fill:#dde7f5;stroke:#fff;stroke-width:.8}
.mapa .m-on{fill:var(--azul);stroke:#fff;stroke-width:.8}
.mapa .m-dot{fill:var(--cielo);stroke:#fff;stroke-width:2.5}
.mapa .m-pulse{fill:var(--cielo);opacity:.5;transform-box:fill-box;transform-origin:center;animation:mp 2.4s ease-out infinite}
@keyframes mp{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.4);opacity:0}}

/* ---------- cta ---------- */
.cta-final{background:linear-gradient(140deg,#102a4f,#0a3f9e);border-radius:var(--radio);padding:72px 50px;text-align:center;color:#fff}
.cta-final h2{color:#fff;font-size:clamp(28px,3.6vw,44px);margin:0 auto 14px;max-width:18ch}
.cta-final p{color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 30px;font-size:17px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{background:var(--marino-2);color:rgba(255,255,255,.72);padding:72px 0 28px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
footer h4{color:#fff;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:18px}
footer a{display:block;font-size:14.5px;padding:6px 0;color:rgba(255,255,255,.72)}
footer a:hover{color:var(--cielo)}
.f-logo img{height:38px;width:auto;margin-bottom:18px;display:block}
.f-bajada{font-size:14.5px;max-width:340px;margin-bottom:20px}
.f-cont{font-size:15.5px;color:#fff}
.f-cont a{display:inline;color:#fff}
.f-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px;font-size:13px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .hero-grid,.duo,.pres,.integra,.split{grid-template-columns:1fr}
  .duo.inv .duo-txt{order:0}
  .duo-img .flot{position:static;width:100%;margin-top:16px;border:0}
  .duo-img .nota{position:static;margin-top:16px;max-width:none}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
  .split-img{min-height:260px}
}
@media (max-width:860px){
  .hero{min-height:0}
  .menu{display:none}
  .burger{display:flex}
  section{padding:70px 0}
  .hero{padding:132px 0 70px}
  .comp{display:none}
  .cards{grid-template-columns:1fr}
  .integra,.cta-final,.split-txt{padding:36px 26px}
  .f-grid{grid-template-columns:1fr}
  .head-2{grid-template-columns:1fr;gap:18px}
}
.movil{position:fixed;inset:0;z-index:95;background:var(--marino-2);padding:26px 24px;overflow-y:auto;transform:translateX(100%);transition:.3s}
.movil.on{transform:translateX(0)}
.movil .x{position:absolute;right:20px;top:20px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;font-size:20px}
.movil h5{color:var(--cielo);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin:26px 0 8px}
.movil a{display:block;color:#fff;font-size:17px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}

/* verticales de negocio */
.cards.c2{grid-template-columns:repeat(2,1fr);gap:28px}
.card.vert .in{padding:34px 32px 32px}
.card.vert h3{font-size:22px;letter-spacing:-.4px;margin-bottom:10px}
.card.vert p{margin-bottom:20px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{font-size:12.5px;font-weight:600;color:var(--marino);background:#eaf2ff;border:1px solid #d7e5fb;border-radius:100px;padding:6px 13px;letter-spacing:.1px}
@media (max-width:860px){ .cards.c2{grid-template-columns:1fr} }

/* la portada escala con el alto y el ancho de la pantalla */
.hero .lab{font-size:calc(var(--u)*.76);margin-bottom:calc(var(--u)*.95);gap:calc(var(--u)*.6)}
.hero .lab:before{width:calc(var(--u)*1.35)}
.hero .btn{font-size:calc(var(--u)*.84);padding:calc(var(--u)*.68) calc(var(--u)*1.42);gap:calc(var(--u)*.52)}
.hero .btn svg{width:calc(var(--u)*.52);height:calc(var(--u)*.52)}
.hero.corto .lab{margin-bottom:calc(var(--u)*.9)}
@media (max-width:860px){ .hero{--u:clamp(15px,4.6vw,20px)} .hero.corto{--u:16px} }

/* pantallas grandes: la barra y los bloques acompañan la escala */
@media (min-width:1700px){
  .nav .logo img{height:40px}
  .menu>li>a{font-size:16.5px;padding:11px 17px}
  .nav .btn{font-size:15.5px;padding:14px 29px}
  section{padding:120px 0}
  .bajada{font-size:17.8px;max-width:660px}
}