/* ===================================================
   PIEL EDITORIAL · hoja compartida por todas las páginas
   Se carga después del CSS de cada página y gana la cascada:
   fondo casi negro, Inter en los titulares, botones rectos,
   sin brillos ni esquinas redondeadas, y el mega menú.
=================================================== */
:root{
  --bg:#050608;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.5);
  --border:rgba(255,255,255,.12);
  --pink-glow:rgba(212,20,90,0);
  --font-head:'Inter',sans-serif;
  --font-serif:Georgia,'Iowan Old Style','Palatino Linotype','Times New Roman',serif;
}
body{background:var(--bg);}
#bg-canvas{opacity:.5;}
#canvas-dim{background:#050608;}
#canvas-overlay{
  background:
    linear-gradient(180deg,transparent 0%,rgba(5,6,8,.3) 12%,rgba(5,6,8,.6) 100%),
    radial-gradient(ellipse 105% 80% at 50% 72%,transparent 18%,rgba(5,6,8,.7) 100%);
}
#progress-bar{background:var(--pink);box-shadow:none;}
#loading{background:var(--bg);}

/* ---- Tipografía: todo lo que iba en Syne pasa a Inter ---- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;letter-spacing:-.04em;}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.02;}
#mobile-menu a,
.art-body h2,
.art-cta .box h3,
.art-head h1,
.benefit-num,
.blog-hero h1,
.bot-head .t,
.bot-q,
.bot-result h3,
.build h4,
.c-cta h2,
.c-hero h1,
.c-sec h2,
.cap h3,
.channel h3,
.chatmock .who,
.ct-direct .tx b,
.ct-hero h1,
.ct-why h3,
.dropdown .dd-t,
.feat h4,
.fit h2,
.fit-item .q::before,
.founder-body h3,
.founder-card h3,
.fs-card .body h2,
.hstep h4,
.i-cta h2,
.i-hero h1,
.i-sec h2,
.icp-q,
.ifaq summary,
.incl-item h4,
.load-brand,
.nova-mini-head h3,
.nova-pillar-title,
.nova-tool-name,
.page-hero h1,
.pcard h3,
.pri h4,
.privacy-card h2,
.privacy-card h3,
.prob-punch,
.proc-num,
.reason h3,
.rgpd-item h4,
.route-lbl,
.rsc-item h4,
.s-cta h2,
.s-hero h1,
.service-pill h4,
.sov-num,
.sov-step h3,
.stat-num,
.sv-cta h2,
.sv-hero h1,
.sv-sec h2,
.svc-eng h4,
.sw-cta h2,
.sw-hero h1,
.sw-sec h2,
.threat h3,
.type h3,
.us-cta h2,
.us-section h2,
.us-stat .n,
.val h4,
.value-item h4,
.vs-col h3,
.w-cta h2,
.w-hero h1,
.w-sec h2,
.way h3,
.wproc .st h4,
h1,h2,h3{font-family:var(--font-head);font-weight:600;}

/* ---- Botones rectos ---- */
.btn-primary{
  padding:14px 24px;background:var(--pink);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:0;
  border:1px solid var(--pink);border-radius:0;min-height:48px;
  transition:background .2s,border-color .2s;
}
.btn-primary:hover{background:#b8104d;border-color:#b8104d;opacity:1;transform:none;}
.btn-secondary{
  padding:14px 24px;background:transparent;color:#fff;
  font-size:14px;font-weight:500;letter-spacing:0;
  border:1px solid rgba(255,255,255,.35);border-radius:0;min-height:48px;
  transition:border-color .2s,background .2s;
}
.btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff;transform:none;}
.nav-cta{padding:9px 18px;border-radius:0;}
.arrow-sq{display:inline-grid;place-items:center;flex-shrink:0;width:22px;height:22px;background:var(--pink);color:#fff;}
.arrow-sq svg{width:12px;height:12px;display:block;}
.link-sq{display:inline-flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-size:15px;font-weight:500;color:#fff;transition:gap .2s;}
.link-sq:hover{gap:14px;}

/* ---- Esquinas rectas y sin brillos ---- */
body :where([class*="card"],[class*="btn"],[class*="badge"],[class*="tag"],[class*="step"],[class*="item"],[class*="form"],[class*="faq"],[class*="visual"],[class*="pill"],[class*="box"],input,textarea,select,button),
.dropdown,.dropdown a,.nav-links a,.lang-btn,.mob-cta,.hf-form,#scroll-hint{border-radius:0!important;}
body :where([class*="card"],[class*="item"],[class*="step"]):hover{box-shadow:none!important;border-color:rgba(255,255,255,.4)!important;}
.svc-card::before{display:none;}
.nav-exp-dot{border-radius:50%!important;}

/* ---- Mega menú: panel a todo el ancho con servicios, sectores y Expedienta ---- */
.nav-links li.has-drop{position:static;}
.dropdown.mega{
  position:absolute;top:100%;left:0;right:0;
  transform:translateY(8px);
  min-width:0;width:100%;
  padding:34px clamp(14px,4vw,56px) 38px;
  display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:clamp(24px,4vw,56px);
  background:#0a0b0f;
  border:0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.nav-links li.has-drop:hover .dropdown.mega,
.nav-links li.has-drop:focus-within .dropdown.mega{transform:translateY(0);}
/* Los enlaces de la barra llevan white-space:nowrap; dentro del panel los textos deben partir,
   o la columna de Expedienta se sale por la derecha y queda cortada */
.dropdown.mega{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr);}
.dropdown.mega a,.dropdown.mega a *,.dropdown.mini a,.dropdown.mini a *{white-space:normal;}
.dropdown.mega .link-sq{white-space:nowrap;}
.mega-col{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mega-col a{min-width:0;}
.mega-h{
  font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pink);
  margin-bottom:10px;padding:0 13px;
}
.mega .dd-t{font-family:var(--font-head);font-size:15px;font-weight:600;letter-spacing:-.01em;}
.mega .dd-d{font-size:12.5px;}
.mega .dd-all{margin-top:8px;}
.dropdown a.mega-feat{
  display:flex;flex-direction:column;gap:10px;align-self:stretch;
  padding:24px;background:#6e0a33;color:#fff;
  transition:background .2s;
}
.dropdown a.mega-feat:hover{background:#55072a;}
.mega-feat .mf-k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.mega-feat strong{font-family:var(--font-head);font-size:clamp(1.4rem,2vw,1.9rem);font-weight:600;letter-spacing:-.03em;line-height:1;}
.mega-feat .mf-p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.85);}
.mega-feat .link-sq{margin-top:auto;font-size:14px;}
@media(max-width:1100px){
  .dropdown.mega{grid-template-columns:1fr 1fr;}
  .dropdown a.mega-feat{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 18px;}
  .mega-feat .mf-p{flex:1 1 260px;}
  .mega-feat .link-sq{margin-top:0;}
}

/* ===================================================
   BASE ACCENTURE · tokens fluidos, easing maestra y cabecera
   Breakpoints 600 / 1024 / 1441 / 1920; entre 1441 y 1920 las medidas
   escalan con el ancho y a partir de 1920 se congelan (contenido a 1920 máx).
=================================================== */
:root{
  --ease:cubic-bezier(.85,0,0,1);
  --ease-2:cubic-bezier(.5,0,.35,1);
  --dur:550ms;
  --nav-h:56px;
  --max:1920px;
  --gutter:16px;
  --space-sm:16px;--space-md:32px;--space-lg:48px;--space-xl:96px;--space-xxl:160px;
  --fs-label:.75rem;--fs-body:1rem;--fs-card:1.25rem;--fs-h3:1.75rem;--fs-h2:2.5rem;--fs-serif:1.375rem;
}
@media(min-width:600px){:root{--gutter:32px;--fs-serif:1.75rem;}}
@media(min-width:1024px){:root{--gutter:80px;--nav-h:72px;--fs-label:.875rem;--fs-h2:3rem;--fs-serif:2rem;}}
@media(min-width:1441px){:root{
  --gutter:calc(5rem + 5.56715vw - 80.22269px);
  --fs-label:calc(.875rem + .97425vw - 14.03897px);
  --fs-body:calc(1rem + 1.11343vw - 16.04454px);
  --fs-card:calc(1.25rem + 1.39179vw - 20.05567px);
  --fs-h3:calc(1.75rem + 1.9485vw - 28.07794px);
  --fs-h2:calc(3rem + 3.34029vw - 48.13361px);
  --fs-serif:calc(2rem + 2.22686vw - 32.08907px);
}}
@media(min-width:1920px){:root{
  --gutter:6.6667rem;--fs-label:1.1667rem;--fs-body:1.3333rem;--fs-card:1.6667rem;--fs-h3:2.3333rem;--fs-h2:4rem;--fs-serif:2.6667rem;
}}
html{background:#000;}
body{background:#000;font-size:var(--fs-body);}
h2{font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.02em;}
section{padding-left:var(--gutter);padding-right:var(--gutter);}
.section-inner{max-width:calc(var(--max) - var(--gutter)*2);}
.feat-kicker{font-size:var(--fs-label);}
.feat h3{font-size:var(--fs-card);}
.serif-lead{font-size:var(--fs-serif);}
/* un solo movimiento para todo: 550 ms con la curva (.85,0,0,1) */
.btn-primary,.btn-secondary,.link-sq,.arrow-sq,.nav-links a,.dropdown a,.feat,.feat img,.feat::after,.feat p,.feat-more,.case-btn,.case-slide,.exp-demo,.trust-card,.mob-cta,.brand-home{
  transition-timing-function:var(--ease);transition-duration:var(--dur);
}
/* sin cerebro 3D, sin pantalla de carga, sin pista de scroll */
#bg-canvas,#canvas-overlay,#canvas-dim,#loading,#scroll-hint{display:none!important;}
/* cabecera: negra, opaca, fija; se esconde al bajar y vuelve al subir */
nav#navbar{
  height:var(--nav-h);background:#000;
  backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;
  padding:0 var(--gutter);
  transition:transform var(--dur) var(--ease);
}
body.nav-up nav#navbar{transform:translateY(-100%);}
body.nav-hidden nav#navbar{background:#000;backdrop-filter:none;-webkit-backdrop-filter:none;}
body.nav-hidden .nav-logo,.nav-logo{opacity:1;transform:none;pointer-events:auto;}
/* el archivo logo-icon.png es la marca completa (1093×332), no un icono: alto fijo y ancho libre */
.nav-logo{display:flex;align-items:center;width:auto;height:auto;}
.nav-logo img{height:26px;width:auto;max-width:none;}
@media(min-width:1024px){.nav-logo img{height:30px;}}
.dropdown.mega{
  left:50%;right:auto;width:100%;max-width:var(--max);
  transform:translate(-50%,8px);
  padding:34px var(--gutter) 38px;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.nav-links li.has-drop:hover .dropdown.mega,
.nav-links li.has-drop:focus-within .dropdown.mega{transform:translate(-50%,0);}
/* enlaces para saltar (accesibilidad): solo se ven al tabular */
.skip{position:fixed;left:var(--gutter);top:-100px;z-index:10000;background:#fff;color:#000;padding:12px 18px;font:600 14px/1 'Inter',sans-serif;}
.skip:focus{top:12px;outline:2px solid var(--pink);}
/* movimiento reducido: todo instantáneo */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  body.nav-up nav#navbar{transform:none;}
}

/* ===================================================
   PIE A PANTALLA COMPLETA · como el de Accenture
   Ocupa al menos una pantalla desde 600 px: logo grande arriba, listas
   de enlaces en medio y la línea legal abajo. La franja FSE+ va después.
=================================================== */
body footer{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-xl);
  min-height:100svh;max-width:var(--max);margin:0 auto;
  padding:calc(var(--space-xl) + var(--nav-h)) var(--gutter) var(--space-md);
  border-top:0;background:#000;
}
@media(max-width:599px){body footer{min-height:0;padding-top:var(--space-xl);gap:var(--space-lg);}}
body .footer-top{display:grid;grid-template-columns:1fr;gap:var(--space-lg) var(--space-md);margin:0;}
@media(min-width:600px){body .footer-top{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){body .footer-top{grid-template-columns:1.6fr repeat(4,1fr);}}
body .footer-brand{grid-column:1/-1;}
@media(min-width:1024px){body .footer-brand{grid-column:auto;}}
body .footer-brand-logo{height:clamp(64px,9vw,150px);width:auto;margin-bottom:var(--space-md);filter:brightness(0) invert(1);}
body .footer-brand p{font-size:var(--fs-body);font-weight:400;color:rgba(255,255,255,.7);max-width:28ch;line-height:1.5;}
body .footer-col h5{font-family:'Inter',sans-serif;font-size:var(--fs-label);font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:#a2a2a0;margin-bottom:var(--space-sm);}
body .footer-col ul{gap:.6rem;}
body .footer-col a{font-size:var(--fs-body);font-weight:400;color:#fff;transition:color var(--dur) var(--ease);}
body .footer-col a:hover{color:#a2a2a0;}
body .footer-bottom{border-top:1px solid rgba(255,255,255,.2);padding-top:var(--space-sm);gap:var(--space-sm) var(--space-md);}
body .footer-bottom p,body .footer-legal a{font-size:.875rem;font-weight:400;color:rgba(255,255,255,.7);}
body .footer-legal{gap:var(--space-md);}
body .footer-legal a:hover{color:#fff;}

/* ===================================================
   TRANSICIÓN ENTRE PÁGINAS · la nueva entra desde la derecha
   View Transitions del navegador (sin librería), 1,25 s con la curva
   (.77,0,.18,1) de la transición "absorb" de Accenture.
=================================================== */
@view-transition{navigation:auto;}
@keyframes vt-entra{from{transform:translateX(100vw);}to{transform:none;}}
::view-transition-old(root){animation:none;}
::view-transition-new(root){animation:vt-entra 1.25s cubic-bezier(.77,0,.18,1) both;}
@media(prefers-reduced-motion:reduce){::view-transition-new(root){animation:none;}}

/* ===================================================
   BARRA NUEVA · cuatro entradas, idioma con globo y "Hablemos" como enlace
=================================================== */
nav#navbar{justify-content:flex-start;gap:clamp(16px,3vw,48px);}
.nav-links{gap:4px;margin-left:clamp(8px,2vw,32px);}
.nav-links > li > a{font-size:15px;font-weight:500;letter-spacing:0;color:#fff;padding:8px 12px;}
.nav-links > li > a:hover{color:#a2a2a0;}
.nav-links .caret{opacity:1;}
.nav-right{display:flex;align-items:center;gap:clamp(12px,2vw,28px);margin-left:auto;}
.nav-talk{font-size:15px;}
.lang-menu{position:relative;}
.lang-main{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:#fff;cursor:pointer;font:500 14px/1 'Inter',sans-serif;padding:8px 6px;}
.lang-main .globe{width:18px;height:18px;}
.lang-main .caret{width:10px;height:10px;transition:transform var(--dur) var(--ease);}
.lang-menu.open .lang-main .caret{transform:rotate(180deg);}
.lang-list{
  position:absolute;top:calc(100% + 8px);right:0;min-width:160px;padding:6px;
  background:#0a0b0f;border:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.lang-menu.open .lang-list,.lang-menu:focus-within .lang-list{opacity:1;visibility:visible;transform:none;}
.lang-list .lang-btn{text-align:left;font:500 14px/1 'Inter',sans-serif;letter-spacing:0;color:rgba(255,255,255,.75);padding:10px 12px;background:none;border:0;cursor:pointer;}
.lang-list .lang-btn:hover{color:#fff;background:rgba(255,255,255,.06);}
.lang-list .lang-btn.active{color:#fff;background:rgba(212,20,90,.18);}
.dropdown{background:#0a0b0f;border-color:rgba(255,255,255,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);}
.nav-links li.has-drop.has-mini{position:relative;}
.dropdown.mini{min-width:280px;padding:8px;}
@media(max-width:768px){
  .nav-right{margin-left:auto;margin-right:8px;}
  .nav-talk{display:none;}
}
