/* Datnova — sitio corporativo. Solo layout responsive y utilidades; el color y la tipografía vienen de los tokens del sistema. */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
#root{min-height:100vh}
.dn-container{width:100%}
.grid{display:grid;gap:24px;min-width:0}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.split-wide{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:center}
.sec{padding:96px 0;position:relative}
.sec-tight{padding:64px 0;position:relative}
.hero{padding:112px 0 96px;position:relative;overflow:hidden}
.stack{display:grid;gap:16px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.num{font-family:var(--font-body);font-weight:700;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;line-height:1}
.ph{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;border:1px dashed var(--dn-warning);color:#8A5A12;background:var(--dn-warning-soft);overflow-wrap:anywhere}
.ph-dark{border-color:rgba(232,162,61,.55);color:#F0C077;background:rgba(232,162,61,.12)}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-toggle{display:none}
.gapdiag{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;background:#fff}
.gapmid{display:grid;justify-items:center;align-content:center;gap:10px;padding:28px 24px;background:var(--dn-gris-claro);border-left:1px solid var(--border-subtle);border-right:1px solid var(--border-subtle);min-width:196px}
.chev{width:0;height:0;border-left:13px solid var(--dn-esmeralda);border-top:9px solid transparent;border-bottom:9px solid transparent}
.chev-sm{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.tl-step{padding:28px 32px 28px 44px;position:relative;border-left:1px solid var(--border-inverse)}
.tl-step:first-child{padding-left:0;border-left:0}
.faq-q{width:100%;display:flex;gap:16px;align-items:center;justify-content:space-between;background:transparent;border:0;padding:22px 0;cursor:pointer;text-align:left;font-family:var(--font-heading);font-size:19px;font-weight:600;color:var(--text-heading);letter-spacing:-.01em}
.role-quote{font-size:15px;line-height:1.55;color:var(--text-muted)}
.svc-diagram{display:grid;gap:10px}
.diagram-col{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.diagram-col>div{min-width:640px}
.photo-ph{position:relative;border-radius:12px;overflow:hidden;background:var(--dn-azul-noche);display:grid;place-content:center;aspect-ratio:4/5}
.diag-split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.footer-grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer-grid{grid-template-columns:minmax(0,1fr)}}
.pill{border:1px solid var(--border-subtle);background:#fff;border-radius:999px;padding:9px 16px;min-height:40px;cursor:pointer;font-family:var(--font-body);font-size:14px;color:var(--text-body);display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.pill:hover{background:var(--surface-muted)}
.pill-dark{background:transparent;border-color:var(--border-inverse);color:#fff}
.pill-dark:hover{background:rgba(255,255,255,.08)}
@media (max-width:1150px){
  .c5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1100px){
  .c5,.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split-wide{gap:40px}
}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:inline-flex}
}
/* El componente Logo fija el ancho inline, así que la variante compacta
   necesita !important para ganarle. Evita que choque con el botón de menú. */
@media (max-width:560px){.site-logo{width:200px !important}}
@media (max-width:380px){.site-logo{width:168px !important}}
@media (max-width:820px){
  .split,.split-wide,.c2,.c3,.c4,.c5{grid-template-columns:minmax(0,1fr)}
  .sec{padding:64px 0}
  .sec-tight{padding:48px 0}
  .hero{padding:72px 0 64px}
  h1{font-size:40px}
  h2{font-size:28px}
  h3{font-size:20px}
  .gapdiag{grid-template-columns:1fr}
  .gapmid{border-left:0;border-right:0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
  .timeline{grid-template-columns:1fr}
  .tl-step{border-left:0;border-top:1px solid var(--border-inverse);padding:24px 0}
  .tl-step:first-child{border-top:0;padding-top:0}
}
@media (max-width:420px){
  h1{font-size:34px}
  .dn-container{padding:0 20px}
}