/* ============================================================
   Novamedia · hoja de estilos única
   Paleta, tipografía y layout del sitio. Sin dependencias externas.
   ============================================================ */

/* ---------- Tipografías auto-hospedadas (subset latin) ---------- */
@font-face{
  font-family:'Space Grotesk';
  src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  font-weight:300 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  --red:#B71C2C; --red-deep:#8E1421; --red-soft:#F4DCE0;
  --ink:#1A1A1F; --graph:#3D3D45; --ash:#696D73;
  --line:#E5E0D8; --paper:#F4EFE8; --bone:#FAF7F2; --white:#fff;
  --display:'Space Grotesk', sans-serif;
  --body:'DM Sans', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --maxw:clamp(1120px, 92vw, 1800px);
  color-scheme:light;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%;}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:3px;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:2;}

/* salto al contenido para lectores de pantalla y teclado */
.skip{position:fixed; top:8px; left:8px; z-index:80; transform:translateY(-160%); background:var(--ink); color:var(--bone); font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; padding:10px 16px; border-radius:6px; transition:transform .2s;}
.skip:focus{transform:none;}

.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--ash); text-transform:uppercase;}
.red-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--red); text-transform:uppercase;}
h1{font-family:var(--display); font-weight:500; letter-spacing:-0.025em; line-height:1.02; font-size:clamp(42px,7vw,84px);}
h1 span{display:block;}
h2{font-family:var(--display); font-weight:500; letter-spacing:-0.02em; line-height:1.08; font-size:clamp(30px,4vw,46px); margin-top:10px; text-wrap:balance;}
h3{font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-0.005em;}
.lead{font-size:18px; color:var(--graph); max-width:58ch;}
.lead.sm{font-size:16px;}
p{color:var(--graph);}
.rule{height:2px; background:var(--ink); width:48px; margin:20px 0;}

/* ---------- Orb (el núcleo que viaja) ---------- */
#orb{position:fixed; left:0; top:0; z-index:1; pointer-events:none; will-change:transform, opacity;}
#orb svg{display:block; width:100%; height:100%; overflow:visible;}
#orb-outer,#orb-mid{transform-box:fill-box; transform-origin:center;}
#orb-outer{animation:orb-ring-clockwise 20s linear infinite;}
#orb-mid{animation:orb-ring-counterclockwise 14s linear infinite;}
@keyframes orb-ring-clockwise{to{transform:rotate(360deg);}}
@keyframes orb-ring-counterclockwise{to{transform:rotate(-360deg);}}

/* ---------- Progress bar ---------- */
#progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--red); z-index:60;}

/* ---------- Header ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:50; background:color-mix(in srgb, var(--bone) 90%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transition:transform .35s ease;}
header.hide{transform:translateY(-100%);}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px; max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.brand{display:flex; align-items:center; gap:1px; font-family:var(--display); font-weight:500; font-size:24px; letter-spacing:-0.045em; color:var(--ink);}
.brand svg{transform:translateY(1px);}
.menu{display:flex; align-items:center; gap:28px;}
.menu a{font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--graph); transition:color .15s;}
.menu a:hover{color:var(--red);}
.menu a.active{color:var(--ink);}
.cta{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; background:var(--ink); color:var(--bone) !important; padding:10px 18px; border-radius:6px; transition:background .15s;}
.cta:hover{background:var(--red);}
.burger{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.burger span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;}

/* ---------- Submenú "Soluciones" ---------- */
.has-sub{position:relative;}
.has-sub > a{display:flex; align-items:center; gap:5px;}
.has-sub > a::after{content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s;}
.has-sub.open > a::after{transform:rotate(225deg) translateY(2px);}
.sub{list-style:none; display:none; flex-direction:column;}
.has-sub.open .sub{display:flex;}
@media (min-width:901px){
  /* padding-bottom + margin-bottom negativo: el hueco visual entre el enlace
     y el submenú sigue ahí, pero ahora es parte del área con :hover activo,
     así que el cursor no lo "pierde" al bajar hacia el submenú. El margen
     negativo cancela el padding para que no mueva nada en la barra de nav. */
  .has-sub{padding-bottom:14px; margin-bottom:-14px;}
  .sub{position:absolute; top:100%; left:-16px; background:var(--white); border:1px solid var(--line); border-radius:10px; padding:8px; min-width:248px; box-shadow:0 18px 40px rgba(26,26,31,.12); gap:2px;}
  .sub a{display:block; padding:10px 12px; border-radius:6px; font-family:var(--body); font-size:14px; text-transform:none; letter-spacing:0; color:var(--ink);}
  .sub a:hover{background:var(--paper); color:var(--red);}
  .has-sub:hover .sub, .has-sub:focus-within .sub{display:flex;}
}
@media (max-width:900px){
  .sub{padding-left:16px; gap:10px; margin-top:14px;}
}

/* ---------- Hero ---------- */
.hero{background:var(--bone); border-bottom:1px solid var(--line); min-height:100svh; display:flex; align-items:center; position:relative;}
.hero-inner{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; width:100%; padding-block:110px 90px;}
.hero .tagline{font-family:var(--mono); font-size:12px; letter-spacing:0.22em; color:var(--red); text-transform:uppercase; margin-bottom:22px;}
.hero p.lead{margin-top:26px;}
.hero-actions{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.btn{font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; padding:14px 24px; border-radius:6px; display:inline-block; transition:all .15s;}
.btn-dark{background:var(--ink); color:var(--bone);}
.btn-dark:hover{background:var(--red);}
.btn-ghost{border:1px solid var(--ink); color:var(--ink);}
.btn-ghost:hover{border-color:var(--red); color:var(--red);}
.btn-sm{padding:10px 16px; font-size:11px; margin-top:16px;}
.card-accent .btn-ghost{border-color:var(--bone); color:var(--bone);}
.card-accent .btn-ghost:hover{border-color:var(--red-soft); color:var(--red-soft);}
/* entrada */
.rise{opacity:0; transform:translateY(28px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;}
.rise.d1{animation-delay:.08s;} .rise.d2{animation-delay:.18s;} .rise.d3{animation-delay:.3s;} .rise.d4{animation-delay:.42s;}
@keyframes rise{to{opacity:1; transform:none;}}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:9.5px; letter-spacing:0.22em; color:var(--ash); text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2;}
.scroll-cue::after{content:""; width:1px; height:34px; background:linear-gradient(var(--ash), transparent); animation:drip 1.8s ease-in-out infinite;}
@keyframes drip{0%{transform:scaleY(0); transform-origin:top;} 55%{transform:scaleY(1); transform-origin:top;} 56%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;}}

/* ---------- Hero de página interna (más corto que el de Inicio) ---------- */
.hero.page{min-height:auto; padding-block:150px 90px;}
.hero.page .hero-inner{grid-template-columns:1fr; padding-block:0; gap:0; max-width:78ch;}
.hero.page h1{font-size:clamp(36px,5.2vw,58px);}
body[data-orb-hero-position="title-right"] .hero.page h1 > span{display:inline-block;}
.crumb{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--ash); text-transform:uppercase; margin-bottom:18px;}
.crumb a{color:var(--ash); transition:color .15s;}
.crumb a:hover{color:var(--red);}

/* ---------- Stats ---------- */
.stats{background:var(--ink); color:var(--bone); position:relative; overflow:hidden;}
/* padding-block y no padding: el atajo borraría los 24px laterales de .wrap
   y las estadísticas quedarían desalineadas del resto de la página */
.stats-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-block:64px;}
.stat .n{font-family:var(--display); font-weight:500; font-size:clamp(34px,4vw,52px); letter-spacing:-0.02em; line-height:1; color:var(--bone); font-variant-numeric:tabular-nums;}
.stat .n em{color:var(--red-soft); font-style:normal;}
.stat .l{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; color:#8C8C95; text-transform:uppercase; margin-top:10px;}

/* ---------- Secciones ---------- */
section{padding:110px 0; position:relative;}
.sec-head{max-width:640px; margin-bottom:52px;}
.sec-head.flush{margin-bottom:0;}
.sec-head.tight{margin-bottom:36px;}
.sec-head.wide{max-width:70ch;}
.sec-head.gap-lg{margin-top:80px;}
.sec-head .hero-actions{margin-top:32px;}
.map-embed{border-radius:10px; overflow:hidden; border:1px solid var(--line);}
.map-embed iframe{border:0; display:block;}

/* Reveal al hacer scroll */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
.grid > .reveal:nth-child(2){transition-delay:.08s;}
.grid > .reveal:nth-child(3){transition-delay:.16s;}
.grid > .reveal:nth-child(4){transition-delay:.08s;}
.grid > .reveal:nth-child(5){transition-delay:.16s;}
.grid > .reveal:nth-child(6){transition-delay:.24s;}
.sol-rows > .reveal:nth-child(2){transition-delay:.08s;}
.sol-rows > .reveal:nth-child(3){transition-delay:.16s;}

/* ---------- Servicios ---------- */
.grid{display:grid; gap:16px;}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
.card.list-block{margin-top:20px;}
.card.card-accent{background:var(--ink); color:var(--bone); border-color:var(--ink);}
.card.card-accent .num{color:var(--red-soft);}
.card.card-accent h3{color:var(--bone);}
.card.card-accent p{color:#B5B5BC;}
.card{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:28px; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(26,26,31,.08); border-color:#d8d2c8;}
.card.card-img{padding:0; overflow:hidden;}
.card-media{aspect-ratio:3/2; overflow:hidden; background:var(--paper);}
.card-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.card-img:hover .card-media img{transform:scale(1.04);}
.card-body{padding:24px 28px 28px;}
.card .num{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; color:var(--red);}
.card h3{margin-top:14px;}
.card p{font-size:14px; margin-top:10px;}
.card ul{margin-top:12px; list-style:none;}
.card li{font-size:13.5px; color:var(--graph); padding:7px 0 7px 20px; border-top:1px solid var(--line); position:relative;}
.card li::before{content:""; position:absolute; left:2px; top:14px; width:8px; height:8px; border:2px solid var(--red); border-radius:50%;}

/* ---------- Mapa de pilares (Inicio) ---------- */
.pilares-map-section{overflow:clip;}
.pilar-map{min-height:min(650px,57vw); margin-top:42px; position:relative; isolation:isolate;}
.pilar-map__links{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1;}
.pilar-map__links path{fill:none; stroke:#A6A5A2; stroke-width:1.65; vector-effect:non-scaling-stroke; opacity:.94; transition:stroke .35s ease,stroke-width .35s ease,opacity .35s ease,filter .35s ease;}
.pilar-map__links path.connection.active{stroke:var(--red); stroke-width:2.25; stroke-dasharray:2000; stroke-dashoffset:2000; opacity:1; filter:drop-shadow(0 0 4px rgb(183 28 44 / .28)); animation:pilar-link-draw .58s cubic-bezier(.2,.7,.2,1) forwards;}
.pilar-map__links .branch{stroke:#9C9B99; stroke-dasharray:8 7; stroke-width:1.55;}
.pilar-map__links circle{fill:var(--paper); stroke:#797976; stroke-width:2; transition:fill .35s ease,stroke .35s ease,transform .35s ease;}
.pilar-map__links circle.active{fill:var(--red); stroke:var(--red); transform:scale(1.15);}
.pilar-map__links .junction{fill:#B6B4B0; stroke:#B6B4B0; stroke-width:1;}
.pilar-map__links .terminal{fill:var(--paper); stroke:var(--ink); stroke-width:2.7;}
.pilar-map__links .terminal.active{animation:pilar-endpoint-arrive .58s cubic-bezier(.2,.7,.2,1) forwards; transform-origin:center;}
@keyframes pilar-link-draw{to{stroke-dashoffset:0;}}
@keyframes pilar-endpoint-arrive{0%,58%{opacity:0; transform:scale(.2);}100%{opacity:1; transform:scale(1.15);}}
.pilar-map__core{width:clamp(165px,18vw,230px); aspect-ratio:1; position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; padding:0; border:0; background:transparent; color:var(--ink); cursor:pointer;}
.pilar-map__core::before,.pilar-map__core::after{content:""; position:absolute; inset:0; border:2px dashed var(--ink); border-radius:50%;}
.pilar-map__core::before{transform:rotate(-25deg); animation:pilar-orbit 22s linear infinite;}
.pilar-map__core::after{inset:15%; transform:rotate(38deg); animation:pilar-orbit-reverse 16s linear infinite;}
.pilar-map__core-dot{width:29%; aspect-ratio:1; border-radius:50%; background:var(--red); box-shadow:0 9px 20px rgb(183 28 44 / .22); position:relative; z-index:1; transition:transform .3s ease,background .3s ease,box-shadow .3s ease;}
.pilar-map__core-label{position:absolute; bottom:-33px; white-space:nowrap; font-family:var(--mono); font-size:10px; line-height:1.2; letter-spacing:.14em; text-transform:uppercase; color:var(--ash);}
.pilar-map__core:hover::before,.pilar-map__core:hover::after,.pilar-map__core:focus-visible::before,.pilar-map__core:focus-visible::after,.pilar-map__core[aria-pressed="true"]::before,.pilar-map__core[aria-pressed="true"]::after{border-color:var(--red);}
.pilar-map__core:hover .pilar-map__core-dot,.pilar-map__core:focus-visible .pilar-map__core-dot,.pilar-map__core[aria-pressed="true"] .pilar-map__core-dot{transform:scale(1.14); background:var(--red-deep); box-shadow:0 11px 24px rgb(183 28 44 / .32);}
@keyframes pilar-orbit{to{transform:rotate(335deg);}}
@keyframes pilar-orbit-reverse{to{transform:rotate(-322deg);}}
.pilar-node{position:absolute; z-index:2; display:flex; align-items:center; gap:14px; width:min(300px,27vw); padding:0; border:0; background:transparent; text-align:left; color:var(--ink); cursor:pointer;}
.pilar-node::before{content:""; width:15px; height:15px; flex:none; border:2px solid var(--ink); border-radius:50%; background:var(--paper); transition:.25s ease;}
.pilar-node__body{transition:transform .25s ease;}
.pilar-node__number,.pilar-detail__index,.pilar-map__helper{font-family:var(--mono); font-size:10px; line-height:1.2; letter-spacing:.15em; text-transform:uppercase;}
.pilar-node__number{color:var(--red); margin:0 0 7px; display:block;}
.pilar-node__name{font-family:var(--display); font-size:clamp(18px,2vw,25px); font-weight:500; line-height:1.08; letter-spacing:-.025em; display:block;}
.pilar-node__hint{font-family:var(--mono); font-size:11px; line-height:1.4; letter-spacing:.04em; color:var(--ash); display:block; margin-top:7px; opacity:0; transform:translateY(-3px); transition:.25s ease;}
.pilar-node:hover .pilar-node__body,.pilar-node[aria-pressed="true"] .pilar-node__body{transform:translateX(5px);}
.pilar-node:hover::before,.pilar-node[aria-pressed="true"]::before{border-color:var(--red); background:var(--red); box-shadow:0 0 0 5px var(--red-soft);}
.pilar-node:hover .pilar-node__hint,.pilar-node[aria-pressed="true"] .pilar-node__hint{opacity:1; transform:none;}
.pilar-node--ai{left:4%; top:10%;}
.pilar-node--infra{right:2%; top:10%; text-align:right; justify-content:flex-end;}
.pilar-node--end{left:8%; bottom:10%;}
.pilar-node--support{right:2%; bottom:10%; text-align:right; justify-content:flex-end;}
.pilar-detail{min-height:240px; margin:-20px 0 0; padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--bone); display:grid; grid-template-columns:310px minmax(0,1fr); align-items:stretch; gap:32px; box-shadow:0 16px 40px rgb(26 26 31 / .04); position:relative; z-index:2;}
.pilar-detail__media{height:202px; margin:0; overflow:hidden; position:relative; border-radius:7px; background:var(--bone); isolation:isolate;}
.pilar-detail__media::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to right,var(--bone),transparent 14%,transparent 86%,var(--bone)),linear-gradient(to bottom,var(--bone),transparent 12%,transparent 88%,var(--bone));}
.pilar-detail__media img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.025); transition:transform .55s cubic-bezier(.2,.7,.2,1);}
.pilar-detail:hover .pilar-detail__media img{transform:scale(1.06);}
.pilar-detail__copy{min-width:0; display:grid; grid-template-columns:minmax(210px,.65fr) minmax(280px,1.5fr); grid-template-rows:1fr auto; column-gap:34px;}
.pilar-detail__index{color:var(--red); margin:0 0 6px;}
.pilar-detail h3{font-family:var(--display); font-size:clamp(24px,2.3vw,32px); font-weight:500; line-height:1.08; letter-spacing:-.025em; margin:0;}
.pilar-detail p{margin:0; color:var(--graph);}
.pilar-detail__copy > [data-pilar-text]{grid-column:2; grid-row:1 / span 2; align-self:center; max-width:58ch;}
.pilar-detail__action{grid-column:1; align-self:end; justify-self:start; padding:12px 17px; border:1px solid var(--ink); border-radius:6px; color:var(--ink); white-space:nowrap; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; transition:.2s ease;}
.pilar-detail__action:hover{border-color:var(--red); color:var(--red);}
.pilar-detail[data-mode="idle"] .pilar-detail__media{display:none;}
.pilar-detail[data-mode="idle"]{min-height:156px; padding:24px 28px; grid-template-columns:1fr; background:var(--ink); border-color:var(--ink);}
.pilar-detail[data-mode="idle"] h3,.pilar-detail[data-mode="idle"] p{color:var(--bone);}
.pilar-detail[data-mode="idle"] .pilar-detail__action{color:var(--bone); border-color:#ffffff66;}
.pilar-map__helper{margin:18px 0 0; color:var(--ash); text-align:right;}

/* ---------- Detalle de solución (texto + ilustración) ---------- */
/* La ilustración no lleva marco ni tarjeta: el PNG ya trae los bordes
   difuminados a transparente y un fondo que empata con --paper, así
   que "flota" directo sobre la página en vez de leerse como una foto
   pegada encima. */
.sol-detail{display:grid; grid-template-columns:minmax(0,660px) 1fr; gap:32px; align-items:center;}
.sol-detail .sec-head{margin-bottom:0;}
.sol-detail .sec-head h2{font-size:clamp(34px, 4.6vw, 52px);}
.sol-detail .sec-head .lead{font-size:20px;}
.sol-media img{width:100%; height:auto; display:block;}
.sol-detail + .grid{margin-top:64px;}
@media (max-width:900px){
  .sol-detail{grid-template-columns:1fr; gap:12px;}
  .sol-media{max-width:400px; margin:0 auto;}
}

/* ---------- Soluciones (filas, página hub) ---------- */
.sol-rows{margin-top:8px; display:flex; flex-direction:column; gap:16px;}
.sol-row{display:flex; align-items:center; justify-content:space-between; gap:40px; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:36px 40px; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;}
.sol-row:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(26,26,31,.08); border-color:#d8d2c8;}
.sol-row-text{max-width:640px;}
.sol-row-text h3{font-size:24px; margin-top:8px;}
.sol-row-text p{font-size:15px; margin-top:10px;}
.sol-row .btn{flex:none;}

/* ---------- Soporte ---------- */
.support{background:var(--bone); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.card-dark{background:var(--ink); color:var(--bone); border-radius:10px; padding:34px; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;}
.card-dark:hover{transform:translateY(-6px); box-shadow:0 22px 48px rgba(26,26,31,.22);}
.card-dark h3{color:var(--bone); font-size:22px; font-weight:500; letter-spacing:-0.015em; margin-top:12px;}
.card-dark .k{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; color:#8C8C95; text-transform:uppercase;}
.card-dark p{color:#B5B5BC; font-size:14px; margin-top:12px;}
.card-dark ul{margin-top:16px; list-style:none;}
.card-dark li{font-size:13.5px; color:#B5B5BC; padding:8px 0 8px 20px; border-top:1px solid #ffffff1a; position:relative;}
.card-dark li::before{content:""; position:absolute; left:2px; top:15px; width:8px; height:8px; border:2px solid var(--red-soft); border-radius:50%;}
.card-dark .chips{margin-top:18px;}
.chip{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; border:1px solid #ffffff2e; color:#D8D8DD; border-radius:99px; padding:5px 12px; margin:4px 6px 0 0;}

/* ---------- Nosotros ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.about-grid > div > p{margin-bottom:14px;}
.mv{display:flex; flex-direction:column; gap:16px;}
.mv .card{padding:24px 26px;}
.mv .card p{font-size:17px; font-weight:500; line-height:1.55; margin-top:10px;}
.mv .card ul{margin-top:8px;}
.timeline{margin-top:28px; list-style:none;}
.tl-item{display:grid; grid-template-columns:72px 1fr; gap:18px; padding:12px 0; border-top:1px solid var(--line); font-size:14px; color:var(--graph);}
.tl-item .y{font-family:var(--mono); font-size:12px; color:var(--red); letter-spacing:0.06em;}

/* ---------- Alianzas ---------- */
.partners{background:var(--bone); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:80px 0;}
.partners.flush-top{border-top:none; padding-top:0;}
.marquee{overflow:hidden; margin-top:40px; position:relative; z-index:2; -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:14px; width:max-content; list-style:none; animation:scrollx 28s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scrollx{to{transform:translateX(-50%);}}
.plogo{font-family:var(--display); font-weight:500; font-size:16px; letter-spacing:-0.01em; color:var(--graph); background:var(--white); border:1px solid var(--line); border-radius:10px; padding:18px 32px; white-space:nowrap; display:flex; align-items:center; gap:12px;}
.plogo i{width:8px; height:8px; border:2px solid var(--red); border-radius:50%; display:inline-block; flex:none;}

/* ---------- Alianzas agrupadas por pilar ---------- */
.partner-groups{margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.pgroup{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:26px;}
.pgroup h3{font-size:15px;}
.pgroup .brands{margin-top:16px; display:flex; flex-wrap:wrap; gap:8px;}
.pgroup .brands .chip{color:var(--graph); border-color:var(--line);}
.pgroup .none{margin-top:16px; font-size:13.5px; color:var(--ash); font-style:italic;}
.partners-note{margin-top:24px; font-size:13px; color:var(--ash); max-width:64ch;}

/* ---------- Cita ---------- */
.quote{background:var(--red); color:var(--bone); padding:110px 0; position:relative; overflow:hidden;}
.quote blockquote{font-family:var(--display); font-weight:500; font-size:clamp(24px,3.4vw,38px); letter-spacing:-0.015em; line-height:1.22; max-width:24ch;}
.quote .src{font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:#ffffffe6; margin-top:24px; text-transform:uppercase;}

/* ---------- Contacto ---------- */
.contact .grid{margin-top:8px;}
.office{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:28px; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;}
.office:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(26,26,31,.08);}
.office .city{font-family:var(--display); font-weight:600; font-size:19px; color:var(--ink);}
.office .mono{font-family:var(--mono); font-size:12.5px; color:var(--graph); line-height:1.9; margin-top:12px; font-style:normal;}
.office .mono a:hover{color:var(--red);}
.badge{display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ash); border:1px solid var(--line); border-radius:99px; padding:4px 10px; margin-bottom:14px;}
.office-dark{background:var(--ink); border-color:var(--ink); color:var(--bone);}
.office-dark .badge{border-color:#ffffff2e; color:#8C8C95;}
.office-dark .city{color:var(--bone);}
.office-dark .mono{color:#B5B5BC;}
.office-dark .mono a:hover{color:var(--red-soft);}

/* ---------- Formulario de contacto ---------- */
.form{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:32px; display:grid; gap:18px;}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ash);}
.field input,.field textarea{font-family:var(--body); font-size:15px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:12px 14px; resize:vertical;}
.field input:focus,.field textarea:focus{outline:2px solid var(--red); outline-offset:1px; border-color:var(--red);}
.form-hint{font-size:12.5px; color:var(--ash); margin-top:-4px;}
.form button{justify-self:start;}

/* ---------- Bloque "en revisión" (Clientes) ---------- */
.pending{background:var(--white); border:1px dashed #d8d2c8; border-radius:10px; padding:36px; text-align:center; max-width:56ch; margin:0 auto;}
.pending .badge{margin-bottom:16px;}
.pending .lead{margin:0 auto; max-width:48ch;}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:#B5B5BC; padding:120px 0 32px; position:relative; overflow:hidden;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
.foot-brand{display:flex; align-items:center; gap:1px; font-family:var(--display); font-weight:500; font-size:22px; letter-spacing:-0.045em; color:var(--bone);}
.foot-tag{font-family:var(--mono); font-size:9.5px; letter-spacing:0.2em; color:#8C8C95; text-transform:uppercase; margin-top:10px;}
.foot-copy{color:#8C8C95; font-size:13px; margin-top:16px; max-width:36ch;}
footer h2{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; color:#8C8C95; text-transform:uppercase; margin:0 0 14px; font-weight:500;}
footer li{list-style:none; padding:5px 0; font-size:13.5px;}
footer ul.mono{font-family:var(--mono); font-size:12px;}
footer a:hover{color:var(--bone);}
.foot-base{margin-top:44px; padding-top:20px; border-top:1px solid #ffffff1a; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:#7A7A82; text-transform:uppercase;}

/* ---------- Página 404 ---------- */
.nf{min-height:100svh; display:flex; align-items:center; background:var(--bone);}
.nf-inner{padding-block:120px;}
.nf .code{font-family:var(--mono); font-size:11px; letter-spacing:0.2em; color:var(--red); text-transform:uppercase;}
.nf h1{margin-top:14px; font-size:clamp(38px,6vw,68px);}
.nf .lead{margin-top:22px;}
.nf .hero-actions{margin-top:32px;}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .rise,.reveal{opacity:1 !important; transform:none !important; animation:none !important; transition:none !important;}
  .marquee-track{animation:none;}
  .scroll-cue::after{animation:none;}
  #orb-outer,#orb-mid{animation:none;}
  .pilar-map__core::before,.pilar-map__core::after{animation:none;}
  .card:hover,.card-dark:hover,.office:hover{transform:none;}
}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr; padding-block:130px 90px; gap:40px;}
  .stats-inner{grid-template-columns:repeat(2,1fr);}
  .g3,.g2,.about-grid,.foot-grid{grid-template-columns:1fr;}
  .g4{grid-template-columns:repeat(2,1fr);}
  .pilar-map{min-height:710px; margin-top:38px;}
  .pilar-map__links{display:none;}
  .pilar-node{width:min(252px,calc(100% - 24px)); gap:11px;}
  .pilar-node__hint{display:none;}
  .pilar-node__name{font-size:19px;}
  .pilar-node--ai{left:2px; top:1%;}
  .pilar-node--infra{right:0; top:22%;}
  .pilar-node--end{left:2px; bottom:18%;}
  .pilar-node--support{right:0; bottom:0;}
  .pilar-detail,.pilar-detail[data-mode="idle"]{margin-top:22px; grid-template-columns:1fr; gap:13px; padding:22px;}
  .pilar-detail__media{height:190px; order:-1;}
  .pilar-detail__copy{grid-template-columns:1fr; grid-template-rows:auto; gap:14px;}
  .pilar-detail__copy > [data-pilar-text]{grid-column:auto; grid-row:auto;}
  .pilar-detail__action{grid-column:auto;}
  .pilar-map__helper{display:none;}
  .partner-groups{grid-template-columns:1fr;}
  .form .row{grid-template-columns:1fr;}
  .menu{display:none; position:absolute; top:66px; left:0; right:0; background:var(--bone); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; padding:18px 24px; gap:18px; max-height:calc(100svh - 66px); overflow-y:auto;}
  .menu.open{display:flex;}
  .burger{display:block;}
}
@media (max-width:520px){
  section{padding:84px 0;}
  .card,.office{padding:24px;}
  .card-dark{padding:26px;}
  .g4{grid-template-columns:1fr;}
  .hero.page{padding-block:130px 70px;}
}
@media (max-width:700px){
  .sol-row{flex-direction:column; align-items:flex-start; gap:18px; padding:28px 24px;}
}