/* ==========================================================================
   ERPlyte — erplyte.css
   Hoja de estilos centralizada para index.html (ES) y en/index.html (EN)
   ========================================================================== */

:root{
  --ink:        #161616;
  --ink-soft:   #565656;
  --ink-faint:  #8A8A8A;
  --line:       #E2E2E2;
  --line-soft:  #F0F0F0;
  --paper:      #FFFFFF;
  --paper-2:    #F5F5F4;
  --accent:     #16457E;
  --accent-lo:  #E8EEF6;

  --shell:      1312px;
  --gutter:     32px;
  --nav-h:      56px;

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-text); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
img,svg{ max-width:100%; }

.shell{ max-width:var(--shell); margin:0 auto; padding:0 var(--gutter); }
.band{ padding:112px 0; }
.band.band--tight{ padding:24px 0; }
.band--grey{ background:var(--paper-2); }
.band--rule{ border-top:1px solid var(--line); }

h1,h2,h3,h4{
  font-family:var(--f-display); font-weight:300;
  letter-spacing:-0.02em; margin:0;
}
.h-display{ font-size:clamp(34px,4.4vw,58px); line-height:1.08; }
.h-section{ font-size:clamp(30px,3.6vw,46px); line-height:1.1; }
.h-item{
  font-family:var(--f-display); font-size:21px; font-weight:500;
  line-height:1.25; letter-spacing:-0.01em; margin:0 0 10px;
}
.lede{
  font-size:clamp(18px,1.5vw,21px); line-height:1.5; color:var(--ink-soft);
  max-width:46ch; font-weight:400;
}
p{ margin:0 0 18px; max-width:62ch; }
p:last-child{ margin-bottom:0; }
.muted{ color:var(--ink-soft); }
.small{ font-size:15px; line-height:1.5; }

.label{
  font-family:var(--f-text); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 14px;
}

.btn{
  display:inline-block; font-family:var(--f-text); font-size:16px; font-weight:500;
  padding:15px 28px; border:1px solid var(--ink); background:var(--ink);
  color:#fff; cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.btn:hover{ background:#000; border-color:#000; text-decoration:none; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }

.link-more{
  font-size:15px; font-weight:500; display:inline-block; margin-top:auto;
  border-bottom:1px solid transparent;
}
.link-more:hover{ text-decoration:none; border-bottom-color:var(--accent); }

.nav{ position:sticky; top:0; z-index:50; background:var(--ink); height:var(--nav-h); color:#fff; }
.nav__in{
  max-width:var(--shell); margin:0 auto; padding:0 var(--gutter);
  height:100%; display:flex; align-items:center; gap:40px;
}
.brand{
  font-family:var(--f-display); font-size:20px; font-weight:600;
  letter-spacing:-0.02em; color:#fff; white-space:nowrap;
}
.brand:hover{ text-decoration:none; }
.brand span{ font-weight:300; color:#B9B9B9; }
.nav__menu{ display:flex; gap:28px; list-style:none; margin:0; padding:0; font-size:15px; }
.nav__menu a{
  color:#E4E4E4; display:block; line-height:var(--nav-h);
  border-bottom:2px solid transparent;
}
.nav__menu a:hover{ color:#fff; text-decoration:none; border-bottom-color:#fff; }
.nav__right{ margin-left:auto; display:flex; align-items:center; gap:16px; font-size:14px; color:#B9B9B9; }
.lang{ display:flex; align-items:center; gap:8px; }
.lang a{ color:#B9B9B9; display:inline-flex; align-items:center; gap:6px; }
.lang a[aria-current="true"]{ color:#fff; font-weight:600; }
.lang svg{ display:block; flex:none; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.15); }
.lang i{ width:1px; height:13px; background:#4A4A4A; display:inline-block; }
.nav__burger{
  display:none; margin-left:auto; background:none; border:0; color:#fff;
  font-size:22px; line-height:1; padding:8px; cursor:pointer;
}

.hero{ padding:40px 0 8px; }
.hero h1{ margin-bottom:20px; }
.hero .lede{ margin-bottom:0; }
.hero__figure{ margin:28px 0 0; }

.block{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:48px; }
.block__head .h-section{ position:sticky; top:calc(var(--nav-h) + 40px); }
.cols-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.cols-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
.col p{ max-width:none; }

.svc{
  border-top:1px solid var(--line); padding:36px 0;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px;
}
.svc:last-child{ border-bottom:1px solid var(--line); }
.svc h3{ font-size:25px; font-weight:400; letter-spacing:-0.015em; }

.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px; }
.tags li{ font-size:13.5px; color:var(--ink-soft); border:1px solid var(--line); padding:5px 11px; background:var(--paper); }

.checks{ list-style:none; margin:0; padding:0; }
.checks li{ position:relative; padding-left:20px; margin-bottom:9px; font-size:16px; color:var(--ink-soft); }
.checks li::before{ content:""; position:absolute; left:0; top:11px; width:8px; height:1px; background:var(--ink-faint); }

.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.cards--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.card{ background:var(--paper); padding:34px 30px 30px; display:flex; flex-direction:column; min-height:100%; }
.card__kicker{ font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px; }
.card p{ font-size:15.5px; color:var(--ink-soft); max-width:none; }
.card__body{ flex:1 1 auto; }

.card__logo-wrap{ height:76px; display:flex; align-items:center; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.card__logo{ display:block; max-height:100%; max-width:240px; width:auto; height:auto; }

.stage{ font-size:12.5px; color:var(--ink-faint); border:1px solid var(--line); padding:3px 9px; display:inline-block; margin-bottom:14px; }

.work{ background:var(--paper); padding:32px 28px 28px; display:flex; flex-direction:column; }
.work__client{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin:0 0 16px; }
.work h3{ font-size:20px; font-weight:400; line-height:1.3; margin:0 0 14px; }
.work p{ font-size:15px; color:var(--ink-soft); max-width:none; }

.apex{ background:var(--ink); color:#F2F2F2; }
.apex .label{ color:#8F8F8F; }
.apex h2{ color:#fff; }
.apex p{ color:#C9C9C9; }
.apex .stat__n{ font-family:var(--f-display); font-size:40px; font-weight:300; color:#fff; line-height:1; margin-bottom:10px; letter-spacing:-0.02em; }
.apex .stat__l{ font-size:14.5px; color:#9E9E9E; }
.apex .btn--ghost{ border-color:#5A5A5A; color:#fff; }
.apex .btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.apex .frame{ border:1px solid #3A3A3A; padding:28px; margin-top:12px; }

.facts{ list-style:none; margin:0; padding:0; }
.facts li{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:20px; padding:15px 0; border-top:1px solid var(--line); font-size:15.5px; }
.facts li:last-child{ border-bottom:1px solid var(--line); }
.facts .k{ color:var(--ink-faint); }
.facts .v{ color:var(--ink); }

.form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.field{ display:flex; flex-direction:column; }
.field--wide{ grid-column:1 / -1; }
.field label{ font-size:14px; font-weight:500; color:var(--ink); margin-bottom:7px; }
.field .req{ color:var(--accent); }
.field input,.field select,.field textarea{
  font-family:var(--f-text); font-size:16px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-bottom:1px solid var(--ink-soft); padding:13px 14px; width:100%;
}
.field textarea{ resize:vertical; min-height:132px; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); outline-offset:1px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-aside .facts li{ grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); }

.foot{ background:var(--ink); color:#9E9E9E; padding:72px 0 40px; font-size:15px; }
.foot__grid{ display:grid; grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)); gap:40px; }
.foot h4{ font-family:var(--f-text); font-size:14px; font-weight:600; color:#fff; margin:0 0 16px; letter-spacing:0; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:11px; }
.foot a{ color:#9E9E9E; }
.foot a:hover{ color:#fff; }
.foot .brand{ display:inline-block; margin-bottom:16px; }
.foot__note{ color:#6E6E6E; font-size:14px; max-width:34ch; }
.foot__bar{ margin-top:56px; padding-top:24px; border-top:1px solid #333; display:flex; flex-wrap:wrap; gap:10px 28px; font-size:13.5px; color:#6E6E6E; }
.foot__bar a{ color:#6E6E6E; }

/* --- bloque "sobre el nombre" --- */
.namebox{
  background:var(--accent-lo); border:1px solid var(--line);
  padding:28px 30px; margin-top:24px; max-width:62ch;
}
.namebox p{ max-width:none; font-size:15.5px; color:var(--ink-soft); }
.namebox p:first-child{ color:var(--ink); font-weight:500; margin-bottom:10px; }

@media (max-width:1080px){
  .cards,.cards--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .block{ grid-template-columns:1fr; gap:32px; }
  .block__head .h-section{ position:static; }
  .hero h1{ max-width:none; }
}
@media (max-width:840px){
  :root{ --gutter:20px; }
  .band{ padding:72px 0; }
  .nav__menu,.nav__right{ display:none; }
  .nav__burger{ display:block; }

  /* Menú móvil desplegable */
  .nav.nav--open{ height:auto; }
  .nav.nav--open .nav__in{
    flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:0;
  }
  .nav.nav--open .nav__menu,
  .nav.nav--open .nav__right{ display:flex; }
  .nav.nav--open .nav__menu{
    flex-direction:column; width:100%; gap:0; order:3;
  }
  .nav.nav--open .nav__menu a{
    line-height:44px; border-bottom:1px solid #333;
  }
  .nav.nav--open .nav__right{
    order:2; width:100%; justify-content:flex-end;
    padding:6px 0 10px; margin-left:0;
    border-bottom:1px solid #333;
  }

  .cols-3,.cols-2,.svc,.form,.foot__grid{ grid-template-columns:1fr; gap:28px; }
  .cards,.cards--4{ grid-template-columns:1fr; }
  .hero{ padding:32px 0 16px; }
  .facts li{ grid-template-columns:1fr; gap:4px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}