/* ============================================================
   KODEUZ · ÍNDICE DE INDUSTRIAS — menú por sector
   Base neutra + acento ámbar Kodeuz · Manrope/DM Sans
   ============================================================ */
:root{
  --ink:#101218;--ink2:#171a22;--bone:#f2f1ec;--soft:#cfd0d6;--mist:#8b8d98;--faint:#63656f;
  --line:rgba(242,241,236,.12);--line2:rgba(242,241,236,.07);
  --accent:#d8a24a;--accent2:#e7b866;--accent-tint:rgba(216,162,74,.14);
  --sans:'DM Sans',system-ui,sans-serif;--disp:'Manrope',system-ui,sans-serif;
  --pad:clamp(24px,7vw,120px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2{font-family:var(--disp);margin:0;letter-spacing:-.02em}
p{margin:0}a{color:inherit;text-decoration:none}

/* ---- Nav ---- */
.nav{height:84px;display:flex;align-items:center;gap:24px;padding:0 var(--pad);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:11px;font:800 17px var(--disp);letter-spacing:.02em;color:var(--bone)}
.brand span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:16px;color:#0d0f14;background:linear-gradient(135deg,var(--accent2),var(--accent))}
.nav-cta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:600 13px var(--sans);padding:11px 20px;border:1px solid var(--line);border-radius:100px;color:var(--bone)}
.nav-cta span{color:var(--accent)}
.nav-cta:hover{border-color:var(--accent);background:var(--accent-tint)}

/* ---- Intro ---- */
.lead{padding:clamp(64px,9vw,110px) var(--pad) clamp(36px,5vw,56px)}
.lead .eyebrow{font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.lead h1{margin:18px 0 16px;font-weight:800;font-size:clamp(34px,5vw,60px);line-height:1.04;max-width:20ch}
.lead p{color:var(--mist);font-size:clamp(16px,1.4vw,19px);max-width:60ch}

/* ---- Grid de industrias ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 var(--pad) clamp(60px,8vw,110px)}
.industry{position:relative;overflow:hidden;border-radius:18px;min-height:270px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;border:1px solid var(--line);isolation:isolate;transition:transform .3s ease,box-shadow .3s ease}
.industry:before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--photo);background-size:cover;background-position:center;filter:saturate(.82);transition:transform .6s ease,filter .6s ease}
.industry:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,12,16,.2),rgba(10,12,16,.9))}
.industry:hover{transform:translateY(-4px);box-shadow:0 22px 46px -22px rgba(0,0,0,.7)}
.industry:hover:before{transform:scale(1.06);filter:saturate(1)}
.industry .top{display:flex;align-items:baseline;gap:12px;padding-right:48px}
.industry .top span{font:700 12px/1 var(--disp);color:var(--accent2)}
.industry .top b{font:700 22px/1.18 var(--disp);letter-spacing:0;text-transform:none;color:#fff}
.industry h2{font:600 17px/1.3 var(--disp);letter-spacing:0;max-width:none}
.industry small{display:block;margin-top:9px;font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.industry i{position:absolute;top:22px;right:22px;font-style:normal;width:34px;height:34px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;transition:.25s}
.industry:hover i{background:var(--accent);border-color:var(--accent);color:#0d0f14}

/* ---- Closing ---- */
.closing{border-top:1px solid var(--line);padding:clamp(70px,9vw,120px) var(--pad);text-align:center}
.closing p{font:800 clamp(24px,3.2vw,40px)/1.1 var(--disp);letter-spacing:-.02em;max-width:22ch;margin:0 auto 28px}
.closing a{display:inline-flex;align-items:center;gap:10px;font:600 14px var(--sans);background:var(--bone);color:var(--ink);padding:15px 26px;border-radius:100px;transition:.25s}
.closing a span{color:var(--accent);transition:transform .25s}
.closing a:hover{background:var(--accent2)}
.closing a:hover span{transform:translateX(3px);color:#0d0f14}

/* ---- Footer ---- */
footer{border-top:1px solid var(--line);padding:44px var(--pad);display:flex;align-items:center;gap:20px;flex-wrap:wrap;color:var(--mist);font-size:13px}
footer small{margin-left:auto;color:var(--faint);font-size:12px}

/* ---- Responsive ---- */
@media(max-width:960px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid{grid-template-columns:1fr}.industry{min-height:240px;padding:24px}.industry .top b{font-size:20px}.industry h2{font-size:16.5px}}

.brand img{display:block;width:126px;height:auto}

/* volver al inicio */
.nav-home{margin-left:22px;font:600 14px var(--sans);color:var(--soft)}
.nav-home:hover{color:var(--bone)}