/* ARCEM Partners — hoja de estilos principal
   Sistema visual del Brand Guideline oficial (Socialogic, 2026): Inter como
   única familia tipográfica; paleta Deep Green / Green / Light Grey / White /
   Dark Grey. Tokens en brand/tokens.css (mismos valores, duplicados aquí para
   que el sitio funcione sin build step). Noka queda reservado al logotipo;
   el lockup HTML del header/footer usa Inter en mayúsculas espaciadas. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
:root{
  --cal:#FFFFFF; --surface:#FFFFFF; --sunken:#F0F0F0;
  --ink:#4C4C4C; --soft:#6B6B6B; --faint:#707070;
  --line:#D9D9D9; --hair:#E6E6E6;
  --green-bright:#379570; --green:#297054; --green-mid:#2F7F5F; --green-lt:#379570;
  --stone:#1D2D2A;
  --brand-dark:#1D2D2A; --brand-dark-2:#243632;
  --on-dark:#F1F1F1; --on-dark-soft:#B9C2BD; --on-dark-line:#2A3B31;
  --focus:#379570;
  --mark-left:#1D2D2A; --mark-right:#379570;
  --hero-bg:#F0F0F0; --hero-ink:#1D2D2A; --hero-em:#379570; --hero-soft:#4C4C4C;
  --hero-label:#297054; --hero-line:#D4D4D4;
  --wm-ink:#1D2D2A; --wm-sub:#379570;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --cal:#14201C; --surface:#1A2521; --sunken:#101915;
  --ink:#E8E9E6; --soft:#A8AEAA; --faint:#848C87;
  --line:#28332E; --hair:#202B26;
  --green-bright:#379570; --green:#3FAB81; --green-mid:#4CBD91; --green-lt:#4CBD91;
  --stone:#F0F0F0;
  --focus:#3FAB81;
  --mark-left:#F0F0F0; --wm-ink:#F0F0F0;
  --hero-bg:#1D2D2A; --hero-ink:#FFFFFF; --hero-em:#3FAB81; --hero-soft:#C6D3CB;
  --hero-label:#B9C2BD; --hero-line:#2A3B31;
}}
:root[data-theme="dark"]{
  --cal:#14201C; --surface:#1A2521; --sunken:#101915;
  --ink:#E8E9E6; --soft:#A8AEAA; --faint:#848C87;
  --line:#28332E; --hair:#202B26;
  --green-bright:#379570; --green:#3FAB81; --green-mid:#4CBD91; --green-lt:#4CBD91;
  --stone:#F0F0F0;
  --focus:#3FAB81;
  --mark-left:#F0F0F0; --wm-ink:#F0F0F0;
  --hero-bg:#1D2D2A; --hero-ink:#FFFFFF; --hero-em:#3FAB81; --hero-soft:#C6D3CB;
  --hero-label:#B9C2BD; --hero-line:#2A3B31;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--cal); color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1160px; margin:0 auto; padding-inline:24px}
.mono{font-family:Inter,"Helvetica Neue",Arial,sans-serif; font-weight:600}
.disp{font-family:Inter,"Helvetica Neue",Arial,sans-serif}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--cal) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--hair);
}
.bar{display:flex; align-items:center; gap:18px; padding-block:14px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand svg{width:30px; height:30px; flex:0 0 auto}
.brand svg path:first-child{fill:var(--mark-left)}
.brand svg path:last-child{fill:var(--mark-right)}
.brand .wm{font-family:Inter,sans-serif; font-weight:700; font-size:16px; letter-spacing:.26em; text-indent:.26em; color:var(--wm-ink); line-height:1}
.brand .sub{font-family:Inter,sans-serif; font-weight:600; font-size:8.5px; letter-spacing:.38em; text-indent:.38em; color:var(--wm-sub); line-height:1; margin-top:4px}
.nav{margin-left:auto; display:flex; align-items:center; gap:22px}
.nav a.link{font-family:Inter,sans-serif; font-weight:500; font-size:13.5px; letter-spacing:.03em; color:var(--soft); text-decoration:none; padding-block:6px}
.nav a.link:hover{color:var(--ink)}
.lang{display:flex; border:1px solid var(--line); overflow:hidden}
.lang button{
  font-family:Inter,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.1em;
  padding:6px 10px; border:0; background:transparent; color:var(--faint); cursor:pointer; min-height:30px;
}
.lang button[aria-pressed="true"]{background:var(--green); color:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lang button[aria-pressed="true"]{color:#0D1310}}
:root[data-theme="dark"] .lang button[aria-pressed="true"]{color:#0D1310}

/* botón de tema — main.js lo inyecta junto a ES/EN. Luna en claro (pasa a oscuro), sol en oscuro */
.theme-toggle{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid var(--line); background:transparent; color:var(--soft); cursor:pointer; flex:0 0 auto}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .i-sun{display:inline} :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}}
:root[data-theme="dark"] .theme-toggle .i-sun{display:inline}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (max-width:879px){.nav{gap:10px}}
@media (max-width:359px){.wrap{padding-inline:16px} .bar{gap:10px} .nav{gap:6px}}
.btn{
  font-family:Inter,sans-serif; font-size:13.5px; font-weight:600; letter-spacing:.04em;
  background:var(--green); color:#FFFFFF; text-decoration:none;
  padding:11px 20px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--green); cursor:pointer; transition:background .18s ease;
}
.btn:hover{background:var(--green-mid); border-color:var(--green-mid)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#0D1310}}
:root[data-theme="dark"] .btn{color:#0D1310}
.btn-ghost{background:transparent; color:var(--on-dark); border:1px solid rgba(237,240,236,.34)}
.btn-ghost:hover{background:rgba(237,240,236,.09); border-color:rgba(237,240,236,.55)}
.nav .btn{display:none}
@media (min-width:880px){.nav .btn{display:inline-flex}}
.nav a.link{display:none}
@media (min-width:880px){.nav a.link{display:inline}}

/* menú móvil — main.js inyecta .nav-toggle y .nav-panel */
.nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; margin-right:-10px; border:0; background:transparent; color:var(--ink); cursor:pointer}
.nav-toggle svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:inline}
.nav-panel{border-top:1px solid var(--hair); background:var(--cal)}
.nav-panel .wrap{display:flex; flex-direction:column; padding-block:6px 22px}
.nav-panel a.link{font-family:Inter,sans-serif; font-weight:500; font-size:16px; letter-spacing:.01em; color:var(--ink); text-decoration:none; padding-block:14px; border-bottom:1px solid var(--hair)}
.nav-panel a.link:hover{color:var(--green)}
.nav-panel .btn{align-self:flex-start; margin-top:18px}
@media (min-width:880px){.nav-toggle,.nav-panel{display:none!important}}

/* ---------- hero: Light Grey en tema claro, Deep Green en oscuro ---------- */
.hero{background:var(--hero-bg); color:var(--hero-ink); position:relative; overflow:hidden; border-bottom:6px solid var(--green-bright)}
.hero-in{
  display:grid; grid-template-columns:1fr; gap:44px;
  padding-block:66px 72px; position:relative;
}
@media (min-width:920px){
  .hero-in{grid-template-columns:1.16fr 1px .84fr; gap:0; align-items:center; padding-block:92px 96px}
  .hero-seam{background:var(--hero-line); align-self:stretch}
  .hero-copy{padding-right:64px}
  .hero-mark{padding-left:64px}
}
.hero-seam{display:none}
@media (min-width:920px){.hero-seam{display:block}}
.eyebrow{
  font-family:Inter,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--hero-label); margin:0 0 26px;
}
h1{
  font-family:Inter,sans-serif; font-weight:600; margin:0;
  font-size:clamp(35px,5.6vw,60px); line-height:1.06; letter-spacing:-.022em;
  text-wrap:balance; color:var(--hero-ink);
}
h1 em{font-style:normal; color:var(--hero-em)}
.hero-copy p.lede{
  margin:26px 0 0; max-width:47ch; font-size:18px; line-height:1.6; color:var(--hero-soft);
}
.hero .btn.btn-ghost{color:var(--hero-ink); border-color:color-mix(in srgb,var(--hero-ink) 35%,transparent)}
.hero .btn.btn-ghost:hover{background:color-mix(in srgb,var(--hero-ink) 7%,transparent); border-color:color-mix(in srgb,var(--hero-ink) 60%,transparent)}
/* isotipo 3D: el HTML trae la sombra suave para el hero claro; en oscuro se usa la fuerte */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-mark feDropShadow{flood-color:#000000; flood-opacity:.5}}
:root[data-theme="dark"] .hero-mark feDropShadow{flood-color:#000000; flood-opacity:.5}
.hero-mark path:first-child{fill:var(--mark-left)}
.hero-mark path:last-child{fill:var(--mark-right)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.hero-mark{display:flex; justify-content:center}
.hero-mark svg{width:min(270px,62vw); height:auto; overflow:visible}
.hero-foot{
  border-top:1px solid var(--hero-line); padding-block:18px;
  display:flex; flex-wrap:wrap; gap:10px 34px;
}
.hero-foot span{font-family:Inter,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--hero-label)}

/* ---------- secciones ---------- */
section{border-bottom:1px solid var(--hair)}
.sec{padding-block:72px}
.sec-head{display:flex; flex-direction:column; gap:14px; margin-bottom:46px; max-width:62ch}
.kicker{font-family:Inter,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
h2{font-family:Inter,sans-serif; font-weight:600; margin:0; font-size:clamp(27px,3.7vw,40px); line-height:1.15; letter-spacing:-.018em; text-wrap:balance}
.sec-head p{margin:0; color:var(--soft); font-size:17.5px; max-width:58ch}

/* prácticas — la junta partiendo la página */
.split{display:grid; grid-template-columns:1fr; gap:48px}
@media (min-width:900px){.split{grid-template-columns:1fr 1px 1fr; gap:0}
  .split .seam{background:var(--line); align-self:stretch}
  .split .prac:first-child{padding-right:56px}
  .split .prac:last-child{padding-left:56px}
}
.split .seam{display:none}
@media (min-width:900px){.split .seam{display:block}}
.prac{display:flex; flex-direction:column; gap:18px}
.prac-tag{display:flex; align-items:center; gap:11px}
.prac-tag svg{width:22px; height:22px; flex:0 0 auto}
.prac-tag span{font-family:Inter,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.prac-photo{display:block; width:168px; height:168px; object-fit:cover; border:1px solid var(--line); background:var(--sunken)}
.prac-name{white-space:nowrap}
.prac-cred{font-size:.62em; font-weight:500; letter-spacing:.04em; color:var(--soft); white-space:nowrap}
.prac h3{font-family:Inter,sans-serif; font-weight:600; margin:0; font-size:26px; line-height:1.2; letter-spacing:-.012em; color:var(--ink)}
.prac p{margin:0; color:var(--soft); font-size:16.5px; max-width:46ch}
.prac ul{margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0}
.prac li{
  font-size:15.5px; color:var(--ink); padding-block:11px;
  border-top:1px solid var(--hair); display:flex; gap:14px; align-items:baseline;
}
.prac li:last-child{border-bottom:1px solid var(--hair)}
.prac li b{font-family:Inter,sans-serif; font-weight:600; font-size:10px; letter-spacing:.1em; color:var(--faint); flex:0 0 auto; width:22px}
.prac a.more{
  font-family:Inter,sans-serif; font-weight:600; font-size:14px; letter-spacing:.03em; color:var(--green);
  text-decoration:none; border-bottom:1px solid currentColor; align-self:flex-start; padding-bottom:2px; margin-top:6px;
}
.prac a.more:hover{color:var(--ink)}

/* proceso */
.steps{display:grid; grid-template-columns:1fr; gap:0}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0}}
.step{padding:30px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px}
@media (min-width:820px){
  .step{padding:30px 34px 30px 0; border-top:1px solid var(--ink)}
  .step + .step{padding-left:34px; border-left:1px solid var(--hair)}
}
/* proceso (5-step variant, index.html "How we work" only) */
@media (min-width:640px){.steps.steps-5{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px}}
@media (min-width:640px) and (max-width:999px){
  .steps-5 .step{padding:30px 0; border-top:1px solid var(--line)}
  .steps-5 .step + .step{padding-left:0; border-left:none}
}
@media (min-width:1000px){
  .steps.steps-5{grid-template-columns:repeat(5,minmax(0,1fr)); gap:0}
  .steps-5 .step{padding:30px 24px 30px 0; border-top:1px solid var(--ink)}
  .steps-5 .step + .step{padding-left:24px; border-left:1px solid var(--hair)}
}
.step .n{font-family:Inter,sans-serif; font-weight:600; font-size:11px; letter-spacing:.14em; color:var(--green)}
.step h3{font-family:Inter,sans-serif; font-weight:600; margin:0; font-size:21px; line-height:1.25; color:var(--ink)}
.step p{margin:0; color:var(--soft); font-size:16px}

/* prueba */
.proof{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:820px){.proof{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:359px){.proof{grid-template-columns:1fr}}
.proof div{background:var(--surface); padding:26px 22px; display:flex; flex-direction:column; gap:8px}
.proof .fig{font-family:Inter,sans-serif; font-size:31px; font-weight:700; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums}
.proof .lab{font-family:Inter,sans-serif; font-weight:600; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); line-height:1.6}
/* proof (5-item variant, firma.html/about.html "valores" only — avoids an empty grid cell) */
.proof-5{grid-template-columns:1fr}
@media (min-width:640px){.proof-5{grid-template-columns:repeat(2,minmax(0,1fr))} .proof-5 div:last-child{grid-column:1/-1}}
@media (min-width:1000px){.proof-5{grid-template-columns:repeat(5,minmax(0,1fr))} .proof-5 div:last-child{grid-column:auto}}

/* productos — categoría + lista de coberturas */
.prod-block{display:grid; grid-template-columns:1fr; gap:16px; padding-block:36px; border-top:1px solid var(--line)}
.prod-block:first-child{border-top:0; padding-top:0}
@media (min-width:820px){.prod-block{grid-template-columns:260px 1fr; gap:48px; padding-block:44px}}
.prod-block h3{font-family:Inter,sans-serif; font-weight:600; font-size:24px; line-height:1.25; color:var(--ink); margin:0}
.prod-block .prod-note{margin:10px 0 0; color:var(--soft); font-size:14.5px; max-width:38ch}
.prod-list{display:grid; grid-template-columns:1fr; gap:0; margin:0; padding:0; list-style:none; border-bottom:1px solid var(--hair)}
@media (min-width:600px){.prod-list{grid-template-columns:1fr 1fr; column-gap:32px}}
.prod-list li{font-size:16px; color:var(--ink); padding-block:11px; border-top:1px solid var(--hair)}

/* contacto — el fondo Light Grey exige grises más oscuros para llegar a AA (4.77 / 5.56) */
.contact{background:var(--sunken); --soft:#5C5C5C; --faint:#666666}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .contact{--soft:#A8AEAA; --faint:#848C87}}
:root[data-theme="dark"] .contact{--soft:#A8AEAA; --faint:#848C87}
.contact-grid{display:grid; grid-template-columns:1fr; gap:44px}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1fr; gap:64px}}
form{display:flex; flex-direction:column; gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-family:Inter,sans-serif; font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.field input,.field select,.field textarea{
  font-family:Inter,"Helvetica Neue",Arial,sans-serif; font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); padding:12px 14px; min-height:46px; width:100%;
}
.field textarea{min-height:96px; resize:vertical; line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green)}
.hint{font-size:13.5px; color:var(--faint); margin:0}
.reach{display:flex; flex-direction:column; gap:22px}
.reach .row{display:flex; flex-direction:column; gap:5px; padding-block:16px; border-top:1px solid var(--line)}
.reach .row:last-child{border-bottom:1px solid var(--line)}
.reach .rl{font-family:Inter,sans-serif; font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.reach .rv{font-size:17px; color:var(--ink)}
.reach .rv a{color:var(--green); text-decoration:none; border-bottom:1px solid currentColor}
.reach .rv a:hover{color:var(--ink)}
.ph{color:var(--faint); font-family:Inter,sans-serif; font-size:14px}

/* mapa (contacto) */
.map-frame{border:1px solid var(--line); overflow:hidden; margin-top:36px}
.map-frame iframe{display:block; width:100%; height:380px; border:0}
.map-link{font-family:Inter,sans-serif; font-weight:600; font-size:14px; letter-spacing:.03em; color:var(--green); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; display:inline-block; margin-top:14px}
.map-link:hover{color:var(--ink)}

/* footer */
footer{background:var(--brand-dark); color:var(--on-dark); --mark-left:#F0F0F0}
.foot-in{padding-block:46px; display:flex; flex-direction:column; gap:30px}
.foot-top{display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start}
.foot-top .brand .wm{color:#F0F0F0}
.foot-top .brand .sub{color:#379570}
.foot-tag{margin-left:auto; font-family:Inter,sans-serif; font-weight:500; font-size:15px; letter-spacing:.04em; color:var(--on-dark-soft)}
.foot-bot{border-top:1px solid var(--on-dark-line); padding-top:22px; display:flex; flex-wrap:wrap; gap:8px 28px}
.foot-bot p{margin:0; font-family:Inter,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.08em; color:var(--on-dark-soft)}

/* ---------- portada temporal "Coming soon" (index.html mientras el sitio vive en /preview/) ---------- */
.soon{min-height:100vh; min-height:100svh; display:flex; flex-direction:column}
.soon main{flex:1; display:flex}
.soon .hero{flex:1; display:flex; flex-direction:column; justify-content:center; border-bottom:6px solid var(--green-bright)}
.soon .hero > .wrap{width:100%}
.soon .hero-in{flex:1; align-content:center}
.soon-reach{display:grid; grid-template-columns:1fr; gap:18px 40px; margin:38px 0 0; padding-top:26px; border-top:1px solid var(--hero-line); max-width:560px}
@media (min-width:600px){.soon-reach{grid-template-columns:auto 1fr}}
.soon-reach div{display:flex; flex-direction:column; gap:6px}
.soon-reach dt{font-family:Inter,sans-serif; font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--hero-label)}
.soon-reach dd{margin:0; font-size:16.5px; line-height:1.5; color:var(--hero-ink)}
.soon-reach a{color:var(--hero-ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--hero-ink) 40%,transparent)}
.soon-reach a:hover{border-bottom-color:currentColor}
.soon-reach .wide{grid-column:1/-1}