/* =============================================================================
   STYLE.CSS — Global / shared styles
   Reset, tipografía, botones, topbar, header/nav, footer, scroll UI y
   responsive compartido. Los tokens viven en tokens.css, que debe cargarse
   antes que esta hoja.
   ========================================================================== */

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--graphite);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%; height:auto;} /* height:auto es imprescindible al declarar width/height en el HTML:
   sin él, max-width:100% deforma la imagen en pantallas estrechas. */
a{color:inherit; text-decoration:none;}
button,select,input,textarea{font-family:inherit;}
button,a,.navlinks a,#backTop{touch-action:manipulation;}
.mono{font-family:'IBM Plex Mono',monospace;}
.display{font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:0.01em;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:600;
}

/* ---------- buttons (shared component) ---------- */
.btn{
  display:inline-block; padding:13px 24px; font-size:13.5px; font-weight:600;
  letter-spacing:0.02em; border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-primary{background:var(--orange); color:var(--white);}
.btn-primary:hover{background:#c94714;}
.btn-ghost{border-color:#5C4E96; color:var(--white);}
.btn-ghost:hover{border-color:var(--white);}
.btn:active{transform:scale(0.97);}

/* ---------- topbar ---------- */
.topbar{
  background:var(--ink);
  color:#C6BFE6;
  font-size:11px;
  letter-spacing:0.06em;
}
.topbar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:7px; padding-bottom:7px;
  flex-wrap:wrap; gap:6px;
}
.topbar span{opacity:0.85;}
.topbar a{color:#E7E3F5;}
/* utility: replaces a former inline style="display:flex;align-items:center;gap:16px" */
.topbar-group{display:flex; align-items:center; gap:16px;}

/* ---------- nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
nav.main{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.logo{
  display:flex; align-items:center; gap:12px; line-height:1;
}
.logo img{height:44px; width:auto; display:block;}
.logo .sub{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px; letter-spacing:0.16em; color:var(--steel); line-height:1.6;
  border-left:1px solid var(--line); padding-left:12px;
}
.navlinks{display:flex; gap:30px; align-items:center;}
.navlinks a{
  font-size:13.5px; font-weight:600; color:var(--graphite);
  position:relative; padding:4px 0;
  transition:color .18s ease;
}
.navlinks a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--orange); transition:width .2s ease;
}
.navlinks a:hover::after{width:100%;}
.navlinks a.active{color:var(--orange);}
.navlinks a.active::after{width:100%; background:var(--orange);}
/* Se conserva la especificidad original (.navcta, no .navlinks a.navcta): así
   `padding` y `font-size` los sigue ganando `.navlinks a`, que es exactamente
   lo que se renderizaba antes. Solo el color sube de especificidad, que era lo
   único para lo que estaba puesto el !important. */

/* ==========================================================
    DROPDOWN Y ACCIONES LADO DERECHO (ESCRITORIO)
   ========================================================== */
.nav-dropdown { position: relative; display: inline-block; }
.nav-submenu {
  position: absolute; top: 100%; left: 0; background: var(--white);
  min-width: 180px; box-shadow: 0 10px 25px rgba(16,10,40,0.1);
  border: 1px solid var(--line); border-radius: 4px; display: flex;
  flex-direction: column; opacity: 0; visibility: hidden;
  transform: translateY(12px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100; padding: 8px 0;
}
.nav-dropdown:hover .nav-submenu { opacity: 1; visibility: visible; transform: translateY(4px); }
.nav-submenu a {
  padding: 10px 20px !important; font-size: 13.5px; font-weight: 500;
  color: var(--graphite) !important; display: block; transition: background 0.2s, color 0.2s;
}
.nav-submenu a::after { display: none; }
.nav-submenu a:hover { background: var(--paper); color: var(--orange) !important; }

.nav-right-actions { display: flex; align-items: center; gap: 20px; }
.logo-extra { display: flex; align-items: center; }
.logo-extra img { height: 32px; width: auto; display: block; }
/* ========================================================== */


.navcta{
  background:var(--ink);
  padding:10px 18px; font-size:13px; font-weight:600;
  border-radius:2px;
}
.navcta:hover{background:var(--orange);}
.navlinks a.navcta,
.navlinks a.navcta.active{color:var(--white);}
.burger{display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px;}
.burger span{width:22px; height:2px; background:var(--ink); display:block;}

/* ---------- section shell (shared across all pages) ---------- */
section{padding:76px 0; scroll-margin-top:96px;}
.sec-head{
  display:flex; gap:18px; align-items:baseline; margin-bottom:40px;
  border-bottom:1px solid var(--line); padding-bottom:18px;
}
.sec-head .idx{
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--steel); font-weight:600;
}
.sec-head h2{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,34px); color:var(--ink); letter-spacing:0.01em;
}
/* utility: replaces former inline style="background:var(--paper-2)" on alternating sections */
.alt-bg{background:var(--paper-2);}

/* ---------- footer ----------
   Movido a css/block.css — fuente única compartida con
   henkel.html y actega.html. No redefinir aquí. */

/* ---------- scroll progress bar ---------- */
#scrollbar{position:fixed; top:0; left:0; height:3px; width:0%; background:var(--orange); z-index:200; transition:width .08s linear;}

/* ---------- back to top ---------- */
#backTop{
  position:fixed; right:22px; bottom:22px; width:52px; height:52px; border-radius:50%;
  background:var(--ink); border:2px solid #5C4E96; color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.06em;
  cursor:pointer; opacity:0; pointer-events:none; transform:translateY(12px) rotate(-7deg);
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
  z-index:90;
}
#backTop.show{opacity:1; pointer-events:auto; transform:translateY(0) rotate(-7deg);}
#backTop:hover{background:var(--orange); border-color:var(--orange);}

/* ---------- mobile menu backdrop ---------- */
.nav-backdrop{
  position:fixed; inset:0; background:rgba(16,10,40,0.35);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:39;
}
.nav-backdrop.show{opacity:1; pointer-events:auto;}

/* =======================================================================
   RESPONSIVE — shared chrome (nav, topbar, footer, section shell)
   ======================================================================= */

@media (max-width:1024px){
  .wrap{padding:0 22px;}
}

@media (max-width:860px){
  .navlinks{
    position:fixed; top:64px; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:flex-start; padding:20px 28px
      calc(20px + env(safe-area-inset-bottom)) 28px;
    gap:6px; border-bottom:1px solid var(--line);
    transform:translateY(-130%); transition:transform .25s ease; z-index:40;
    max-height:calc(100vh - 64px); overflow-y:auto;
  }
  .navlinks.open{transform:translateY(0);}

/* ==========================================================
      DROPDOWN Y ACCIONES LADO DERECHO (MÓVIL)
     ========================================================== */
  .nav-dropdown { width: 100%; }
  .nav-drop-btn svg { transition: transform 0.3s ease; }
  .nav-submenu {
    position: static; box-shadow: none; border: none; background: transparent;
    opacity: 1; visibility: visible; transform: none; padding: 4px 0 4px 16px;
    display: none; 
  }
  .nav-dropdown.active .nav-submenu { display: flex; }
  .nav-dropdown.active .nav-drop-btn svg { transform: rotate(180deg); }
  .logo-extra img { height: 26px; }
  /* ========================================================== */

  .navlinks a{padding:12px 4px; width:100%; font-size:15px;}
  .navlinks a.navcta{padding:13px 18px; text-align:center; margin-top:6px;}
  .burger{display:flex; padding:10px;}
  .topbar .wrap{font-size:10px;}
}



@media (max-width:680px){
  section{padding:56px 0;}
  .sec-head{margin-bottom:28px; flex-wrap:wrap; gap:8px;}
}

@media (max-width:400px){
  .wrap{padding:0 18px;}
  .logo .sub{display:none;}
  .topbar .wrap{gap:4px;}
  .topbar span:first-child{display:none;} /* full legal name hidden on tiny screens, still in <title> */
}

/* ---- Respect reduced-motion preference: calmer, battery-friendlier ---- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important; scroll-behavior:auto!important;}
}

/* ---- Fixed elements respect device safe areas (notch / home bar) ---- */
#scrollbar{top:env(safe-area-inset-top);}
#backTop{
  right:calc(22px + env(safe-area-inset-right));
  bottom:calc(22px + env(safe-area-inset-bottom));
}