/* Bylogic — sitio web 2026
   Branding Book V.2026.3 · Sistema de diseño Bylogic */

/* ---------- Fuentes (alojadas en el propio servidor) ---------- */
@font-face{font-family:"Sora";src:url("../fonts/sora.woff2") format("woff2");font-weight:300 600;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono.woff2") format("woff2");font-weight:400 500;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --navy:#093359;--cian:#04B2D9;--turquesa:#0DD9C4;--amarillo:#FFD400;--naranja:#F27619;--nocturno:#0B2239;
  --fondo:#FFFFFF;--fondo-suave:#F7F9FA;--linea:#DCE4EA;--linea-oscura:#2A4A6B;
  --texto:#093359;--texto-suave:#4E6378;--texto-suave-oscuro:#B4C3D2;
  --f-titular:"Sora","Segoe UI",system-ui,sans-serif;
  --f-texto:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --ancho:1200px;--gutter:24px;
  --sec:clamp(64px,9vw,96px);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--f-texto);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
a:hover{color:var(--cian)}
:focus-visible{outline:3px solid var(--cian);outline-offset:3px;border-radius:2px}
h1,h2,h3,p,ol,ul{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:12px 18px;border-radius:4px;font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:#fff}

.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.pb-sec{padding-bottom:var(--sec)}
.suave{background:var(--fondo-suave)}
.navy{background:var(--navy);color:#fff}
.bordes{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}

/* ---------- Tipografía ---------- */
.etq{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;color:var(--navy)}
.navy .etq,.oscuro .etq{color:var(--cian)}
h1{font-family:var(--f-titular);font-weight:600;font-size:clamp(36px,5.2vw,56px);line-height:1.06;letter-spacing:-.025em}
h2{font-family:var(--f-titular);font-weight:600;font-size:clamp(28px,3.6vw,38px);line-height:1.15;letter-spacing:-.015em}
h3{font-family:var(--f-titular);font-weight:600;line-height:1.25}
.bajada{font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:var(--texto-suave)}
.parrafo{color:var(--texto-suave);max-width:65ch}
.navy .parrafo,.navy .bajada{color:var(--texto-suave-oscuro)}
.amarillo{color:var(--amarillo)}

.cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 48px;margin-bottom:48px}
.cabeza>div{display:flex;flex-direction:column;gap:16px;max-width:640px}
.cabeza>.parrafo{max-width:440px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 24px;border-radius:4px;font-family:var(--f-texto);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s}
.btn-principal{background:var(--turquesa);color:var(--navy)}
.btn-principal:hover{background:#3FE3D2;color:var(--navy)}
.btn-borde{border:1px solid var(--navy);color:var(--navy)}
.btn-borde:hover{background:var(--navy);color:#fff}
.enlace{font-weight:600;font-size:15px}
.navy .enlace{color:var(--turquesa)}
.navy .enlace:hover{color:#fff}

/* ---------- Chip (rombo de esquinas suaves) ---------- */
.chip{display:block;transform:rotate(45deg);border-radius:min(calc(10% + 20px),28%)}
.chip-xs{width:14px;height:14px;margin:3px;border-radius:4px;flex:none}
.chip-s{width:20px;height:20px;margin:4px;border-radius:6px;flex:none}
.c-navy{background:var(--navy)}.c-cian{background:var(--cian)}.c-turq{background:var(--turquesa)}.c-nar{background:var(--naranja)}.c-amar{background:var(--amarillo)}

/* ---------- Cabecera ---------- */
.cab{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--linea)}
.cab .wrap{height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cab .marca img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:8px 0}
.nav .nav-cta{background:var(--navy);color:#fff;padding:15px 20px;border-radius:4px}
.nav .nav-cta:hover{background:var(--cian);color:var(--navy)}
.menu-btn{display:none;width:48px;height:48px;align-items:center;justify-content:center;background:none;border:1px solid var(--linea);border-radius:4px;color:var(--navy);cursor:pointer}
@media (max-width:900px){
  .cab .wrap{height:64px}
  .cab .marca img{height:32px}
  .menu-btn{display:inline-flex}
  .nav{position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--linea);padding:8px var(--gutter) 20px;display:none}
  .nav.abierto{display:flex}
  .nav a{padding:16px 0;border-bottom:1px solid var(--linea);font-size:13px}
  .nav .nav-cta{margin-top:16px;text-align:center;border-bottom:0}
}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:48px;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.hero-txt{display:flex;flex-direction:column;gap:24px;max-width:600px}
.hero-txt .bajada{max-width:540px}
.acciones{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.hero-arte{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;justify-self:end}
.hero-arte .chip{position:absolute}
.hero-foto{left:10%;top:18%;width:64%;height:64%;overflow:hidden;background:#E2E5E8}
.hero-foto picture{position:absolute;left:-21%;top:-21%;width:142%;height:142%;transform:rotate(-45deg)}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;mix-blend-mode:multiply}
.hero-arte .h-navy{left:78.5%;top:14.5%;width:11%;height:11%}
.hero-arte .h-cian{left:77.5%;top:61.5%;width:17%;height:17%}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:0;padding-top:40px;padding-bottom:24px}
  .hero-arte{max-width:380px;justify-self:center;margin-top:-16px;margin-bottom:-24px}
}

/* ---------- Propósito ---------- */
.proposito{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.4fr) minmax(0,1.3fr);gap:48px;align-items:start}
.proposito .lado{display:flex;flex-direction:column;gap:16px}
.barra{width:64px;height:4px;background:var(--cian)}
.cita{font-family:var(--f-titular);font-weight:300;font-size:clamp(24px,3vw,34px);line-height:1.3;letter-spacing:-.01em;max-width:760px}
.cita strong{font-weight:600}
.proposito .parrafo{margin-top:24px;font-size:17px}
.cifra{display:flex;align-items:center;gap:20px;margin-top:32px;padding:20px 24px;background:#fff;border-top:4px solid var(--turquesa);max-width:520px}
.cifra-num{font-family:var(--f-titular);font-weight:300;font-size:52px;line-height:1;color:var(--navy);flex:none}
.cifra p{font-size:15px;line-height:1.5;color:var(--texto-suave)}
.proposito-foto{margin:0;align-self:center;background:#fff;border-radius:24px;overflow:hidden;aspect-ratio:1/1}
.proposito-foto img{width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){.proposito{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.proposito-foto{grid-column:2;max-width:360px}}
@media (max-width:800px){.proposito{grid-template-columns:1fr;gap:24px}.proposito-foto{grid-column:auto;max-width:320px}}

/* ---------- Líneas de negocio ---------- */
.lineas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.linea{display:flex;flex-direction:column;gap:14px;padding:32px;background:var(--fondo-suave);border-top:4px solid var(--navy)}
.linea .etq{color:var(--texto-suave)}
.linea h3{font-size:26px}
.linea p{color:var(--texto-suave)}
.linea.l2{border-top-color:var(--cian)}
.linea.l3{border-top-color:var(--turquesa);background:var(--navy);color:#fff}
.linea.l3 .etq{color:var(--cian)}
.linea.l3 h3{color:#fff}
.linea.l3 p{color:var(--texto-suave-oscuro)}
@media (max-width:960px){.lineas{grid-template-columns:1fr}}

/* ---------- A quién atendemos ---------- */
.clientes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
.clientes .intro{display:flex;flex-direction:column;gap:16px}
.clientes .intro h2{font-size:clamp(26px,3vw,30px);line-height:1.2}
.perfiles{list-style:none;padding:0;border-bottom:1px solid var(--linea)}
.perfil{display:grid;grid-template-columns:220px minmax(0,1fr);gap:8px 32px;padding:24px 0;border-top:1px solid var(--linea)}
.perfil .nom{display:flex;align-items:center;gap:12px}
.perfil h3{font-family:var(--f-texto);font-size:18px}
.perfil p{font-size:15px;color:var(--texto-suave)}
@media (max-width:860px){.clientes{grid-template-columns:1fr;gap:32px}.perfil{grid-template-columns:1fr}}

/* ---------- Pilares ---------- */
.pilares{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.pilar{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--linea-oscura);padding-top:24px}
.num{font-family:var(--f-titular);font-weight:300;font-size:44px;line-height:1;color:var(--turquesa)}
.pilar h3{font-size:20px;color:#fff;margin-top:8px}
.pilar p:last-child{font-size:15px;color:var(--texto-suave-oscuro)}
@media (max-width:1000px){.pilares{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pilares{grid-template-columns:1fr}}

/* ---------- Proceso ---------- */
.proceso{position:relative;list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.proceso::before{content:"";position:absolute;left:14px;right:14px;top:13px;height:2px;background:var(--cian)}
.paso{position:relative;display:flex;flex-direction:column;gap:12px}
.paso .etq{margin-top:8px}
.paso h3{font-family:var(--f-texto);font-size:18px}
.paso p{font-size:15px;color:var(--texto-suave)}
@media (max-width:960px){
  .proceso{grid-template-columns:1fr;gap:28px;padding-left:40px}
  .proceso::before{left:13px;right:auto;top:14px;bottom:14px;width:2px;height:auto}
  .paso .chip-s{position:absolute;left:-40px;top:0}
  .paso .etq{margin-top:2px}
}

/* ---------- Casos ---------- */
.casos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.caso{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);border-radius:8px;overflow:hidden}
.caso-foto{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--linea)}
.caso-cuerpo{display:flex;flex-direction:column;gap:14px;padding:28px;flex:1}
.caso-logos{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-top:4px}
.caso-logos img{width:auto;height:44px;max-width:150px;object-fit:contain}
.caso .marca-caso{display:flex;align-items:center;gap:12px}
.caso h3{font-size:21px}
.caso p{font-size:15px;color:var(--texto-suave)}
.caso .dato{margin-top:auto;padding-top:16px;border-top:1px solid var(--linea);font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;color:var(--navy)}
@media (max-width:960px){.casos{grid-template-columns:1fr}}
.eventos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.evento{display:flex;flex-direction:column;gap:14px}
.evento img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px;background:var(--linea);margin-bottom:8px}
.evento p:last-child{color:var(--texto-suave);max-width:52ch}
@media (max-width:760px){.eventos{grid-template-columns:1fr}}
.logos-socios{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.logos-socios li{background:#fff;border:1px solid var(--linea);border-radius:12px;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:14px}
.logos-socios img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:1000px){.logos-socios{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:700px){.logos-socios{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.logos-socios{grid-template-columns:repeat(2,minmax(0,1fr))}}
.alianza{margin-top:24px;background:var(--navy);border-radius:12px;padding:24px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.alianza .etq{color:var(--amarillo)}
.alianza-nom{font-family:var(--f-titular);font-weight:600;font-size:24px;color:#fff}
.alianza-nom span{font-weight:300;color:var(--texto-suave-oscuro)}
.alianza-nom span{white-space:nowrap}
.alianza .btn-claro{margin-left:auto}
.btn-claro{border:1px solid #fff;color:#fff;gap:8px}
.btn-claro:hover{background:#fff;color:var(--navy)}
@media (max-width:640px){.alianza .btn-claro{margin-left:0}}
@media (max-width:520px){.alianza{padding:20px 24px}.alianza-nom{font-size:20px}}
.ecosistema{display:flex;flex-direction:column;gap:20px;margin-top:40px;padding-top:24px;border-top:1px solid var(--linea)}
.aliados{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px 44px;font-family:var(--f-titular);font-size:20px;font-weight:600;color:var(--texto-suave)}

/* ---------- Filosofía ---------- */
.filosofia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.principio{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--linea-oscura);padding-top:20px}
.principio h3{display:flex;align-items:baseline;gap:12px;font-size:19px;color:#fff}
.principio h3 span{font-size:30px;font-weight:300;color:var(--turquesa)}
.principio p{font-size:15px;color:var(--texto-suave-oscuro)}
@media (max-width:960px){.filosofia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.filosofia{grid-template-columns:1fr}}
.credenciales{margin-top:56px;padding:28px 32px;border:1px solid var(--linea-oscura);border-radius:12px;display:flex;flex-direction:column;gap:20px}
.credenciales ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.credenciales li{display:flex;flex-direction:column;gap:4px}
.credenciales strong{font-family:var(--f-titular);font-weight:600;font-size:18px;color:#fff}
.credenciales span{font-size:14px;line-height:1.5;color:var(--texto-suave-oscuro)}
@media (max-width:900px){.credenciales ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.credenciales ul{grid-template-columns:1fr}}

/* ---------- Contacto ---------- */
.cierre{position:relative;overflow:hidden;background:var(--nocturno);color:#fff;border-radius:8px;padding:clamp(40px,6vw,72px) clamp(24px,5vw,56px);display:flex;flex-direction:column;gap:20px}
.cierre>*{position:relative}
.cierre h2{font-size:clamp(32px,4.4vw,44px);line-height:1.1;letter-spacing:-.02em;max-width:620px}
.cierre .bajada{color:var(--texto-suave-oscuro);max-width:560px}
.deco{position:absolute!important;pointer-events:none}
.deco.d1{right:60px;top:-90px;width:240px;height:240px;border:3px solid var(--cian)}
.deco.d2{right:220px;top:90px;width:150px;height:150px;border:3px solid var(--cian)}
.deco.n1{right:52px;top:76px;width:14px;height:14px;border-radius:4px;background:var(--amarillo)}
.deco.n2{right:315px;top:228px;width:14px;height:14px;border-radius:4px;background:var(--turquesa)}
@media (max-width:760px){.deco.d2,.deco.n2{display:none}.deco.d1{right:-150px;top:-150px}.deco.n1{right:24px;top:24px}}
.datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px;padding-top:28px;border-top:1px solid var(--linea-oscura)}
.datos div{display:flex;flex-direction:column;gap:6px}
.datos a,.datos span{color:#fff;font-weight:600;text-decoration:none}
.datos a:hover{color:var(--turquesa)}
@media (max-width:760px){.datos{grid-template-columns:1fr}}
.redes{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.redes a{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1px solid var(--linea-oscura);border-radius:4px;color:#fff;font-size:14px;font-weight:600;text-decoration:none}
.redes a:hover{border-color:var(--turquesa);color:var(--turquesa)}

/* ---------- Pie ---------- */
.pie{background:var(--navy);color:var(--texto-suave-oscuro)}
.pie .wrap{padding-top:64px;padding-bottom:32px;display:flex;flex-direction:column;gap:48px}
.pie-sup{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.pie-marca{display:flex;flex-direction:column;gap:16px;max-width:320px}
.pie-marca img{height:36px;width:auto;align-self:flex-start}
.eslogan{font-family:var(--f-titular);font-weight:600;font-size:16px;color:var(--amarillo)}
.pie-nav{display:flex;flex-wrap:wrap;gap:48px}
.pie-nav div{display:flex;flex-direction:column;gap:12px}
.pie-nav .etq{color:var(--cian)}
.pie-nav a,.pie-nav span{font-size:15px;color:#fff;text-decoration:none}
.pie-nav a:hover{color:var(--turquesa)}
.pie-inf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--linea-oscura);padding-top:24px;font-size:14px}
.pie-inf .web{font-family:var(--f-mono);font-size:13px;color:var(--cian)}

/* ---------- Página 404 ---------- */
.p404{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:96px 0}