/* ============================================================
   KODEUZ — Dirección de IA sobre Odoo · v2 (warm-dark editorial)
   Fuentes: Manrope (display) + DM Sans (texto)
   ============================================================ */
:root{
  --ink:#171915;--ink2:#1e201b;--ink3:#262823;--panel:#211f1b;
  --bone:#f3f1ea;--soft:#d7d4c9;--mist:#9d9a8f;--faint:#75736a;
  --line:rgba(243,241,234,.12);--line2:rgba(243,241,234,.07);
  --accent:#d8a24a;--accent2:#e7b866;--accent-tint:rgba(216,162,74,.12);
  --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,h3{font-family:var(--disp);margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---- Section label (kicker) ---- */
.section-label{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px}

/* ---- Buttons ---- */
.button{display:inline-flex;align-items:center;gap:12px;font:600 14px var(--sans);padding:15px 26px;border-radius:100px;transition:.25s ease}
.button span{transition:transform .25s ease}
.button:hover span{transform:translateX(3px)}
.button-primary{background:var(--bone);color:var(--ink)}
.button-primary:hover{background:var(--accent2);box-shadow:0 12px 34px -12px rgba(216,162,74,.6)}
.button-link{color:var(--soft)}
.button-link:hover{color:var(--bone)}
.button-link span{color:var(--accent)}

/* ---- Nav ---- */
.nav{position:absolute;top:0;left:0;width:100%;z-index:30;height:84px;display:flex;align-items:center;gap:40px;padding:0 var(--pad)}
.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:var(--ink);background:linear-gradient(135deg,var(--accent2),var(--accent))}
.nav nav{display:flex;gap:32px;margin-left:auto}
.nav nav a{font-size:14px;color:var(--soft)}
.nav nav a:hover{color:var(--bone)}
.nav-cta{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)}
.menu{display:none}

/* ---- Hero ---- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--pad) clamp(40px,6vw,72px);overflow:hidden}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;background:linear-gradient(135deg,#2a2721,#171915)}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(23,25,21,.55) 0%,rgba(23,25,21,.35) 32%,rgba(23,25,21,.82) 78%,var(--ink) 100%),linear-gradient(90deg,rgba(23,25,21,.7),transparent 62%)}
.hero-content{position:relative;z-index:2;max-width:760px}
.partner{display:inline-flex;align-items:center;gap:10px;font:600 12px var(--sans);letter-spacing:.04em;color:var(--soft);padding:9px 16px;border:1px solid var(--line);border-radius:100px;background:rgba(23,25,21,.4);backdrop-filter:blur(6px);margin-bottom:26px}
.partner span{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.hero h1{font-weight:800;font-size:clamp(40px,6vw,82px);line-height:1.02;max-width:14ch}
.hero-lead{margin-top:24px;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--soft);max-width:600px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.hero-proof{position:relative;z-index:2;align-self:flex-end;margin-top:52px;max-width:420px;padding:24px 26px;border:1px solid var(--line);border-radius:16px;background:rgba(30,32,27,.6);backdrop-filter:blur(10px)}
.hero-proof p{font:600 11px var(--sans);letter-spacing:.2em;color:var(--accent);text-transform:uppercase}
.hero-proof strong{display:block;margin:12px 0 14px;font:700 20px/1.35 var(--disp);letter-spacing:-.01em}
.hero-proof span{font-size:13px;color:var(--mist)}

/* ---- Statement ---- */
.statement{padding:clamp(90px,12vw,160px) var(--pad);text-align:center;border-bottom:1px solid var(--line2)}
.statement h2{margin:22px auto 26px;font-weight:800;font-size:clamp(34px,5vw,64px);line-height:1.05;max-width:16ch}
.statement h2 span{color:var(--mist)}
.statement>p{margin:0 auto;max-width:640px;font-size:clamp(16px,1.4vw,19px);color:var(--soft)}

/* ---- Section head (shared) ---- */
.section-head{display:grid;grid-template-columns:1.5fr 1fr;gap:8vw;align-items:end;margin-bottom:56px}
.section-head h2{margin-top:18px;font-weight:800;font-size:clamp(30px,4vw,52px);line-height:1.06}
.section-head>p{color:var(--mist);font-size:16px;max-width:38ch}

/* ---- Entry (dos puertas) ---- */
.entry{padding:clamp(80px,10vw,130px) var(--pad)}
.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.entry-option{padding:clamp(30px,3.5vw,46px);border:1px solid var(--line);border-radius:20px;background:var(--ink2);position:relative;overflow:hidden;transition:.3s}
.entry-option:hover{transform:translateY(-4px);border-color:rgba(243,241,234,.22)}
.entry-option.accent{background:linear-gradient(160deg,rgba(216,162,74,.1),var(--ink2) 55%);border-color:rgba(216,162,74,.32)}
.option-number{font:700 13px var(--disp);color:var(--accent)}
.option-tag{margin:20px 0 14px;font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.entry-option h3{font-weight:700;font-size:clamp(22px,2.4vw,29px);line-height:1.15}
.entry-option>p{margin:16px 0 26px;color:var(--soft);font-size:15.5px;line-height:1.6}
.entry-option>a{display:inline-flex;align-items:center;gap:9px;font:600 14px var(--sans);color:var(--bone)}
.entry-option>a span{color:var(--accent);transition:transform .25s}
.entry-option:hover>a span{transform:translateX(4px)}

/* ---- Construction (vertical insignia) ---- */
.construction{padding:clamp(80px,10vw,130px) var(--pad);background:var(--ink2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.construction-intro{max-width:760px}
.construction-intro h2{margin:20px 0 18px;font-weight:800;font-size:clamp(30px,4.4vw,58px);line-height:1.04}
.construction-intro>p{color:var(--soft);font-size:clamp(16px,1.4vw,19px);max-width:60ch}
.metric-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:44px 0}
.metric-strip div{background:var(--ink2);padding:26px 28px}
.metric-strip span{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.metric-strip strong{display:block;margin-top:12px;font:700 21px var(--disp);letter-spacing:-.01em}
.construction-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.capability{position:relative;overflow:hidden;border-radius:16px;min-height:240px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;border:1px solid var(--line);isolation:isolate;transition:transform .3s ease,box-shadow .3s ease}
.capability: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}
.capability:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,12,10,.15),rgba(10,12,10,.9))}
.capability:hover{transform:translateY(-4px);box-shadow:0 22px 46px -22px rgba(0,0,0,.7)}
.capability:hover:before{transform:scale(1.06);filter:saturate(1)}
.capability span{position:absolute;top:24px;left:26px;font:600 11px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--accent2)}
.capability h3{margin:0 0 8px;font-weight:800;font-size:clamp(19px,1.5vw,22px);line-height:1.14;letter-spacing:-.02em;max-width:16ch}
.capability p{color:rgba(255,255,255,.74);font-size:13px;letter-spacing:.02em}
.capability 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}
.capability:hover i{background:var(--accent);border-color:var(--accent);color:#0d0f0a}

/* ---- System (3 capas) ---- */
.system{padding:clamp(80px,10vw,130px) var(--pad)}
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.layer{padding:clamp(28px,3vw,40px);border:1px solid var(--line);border-radius:20px;background:var(--ink2);display:flex;flex-direction:column;min-height:280px}
.layer span{font:600 11px var(--sans);letter-spacing:.16em;color:var(--mist)}
.layer h3{margin:22px 0 14px;font-weight:800;font-size:clamp(26px,3vw,38px)}
.layer p{color:var(--soft);font-size:15px;line-height:1.6}
.layer b{margin-top:auto;padding-top:22px;font:600 13px var(--sans);color:var(--accent);letter-spacing:.02em}
.layer-dark{background:linear-gradient(165deg,#2c2921,var(--ink) 70%);border-color:rgba(216,162,74,.3)}
.layer-dark span,.layer-dark b{color:var(--accent2)}

/* ---- Method ---- */
.method{padding:clamp(80px,10vw,130px) var(--pad);background:var(--ink2);border-top:1px solid var(--line2);display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}
.method-copy h2{margin:20px 0 20px;font-weight:800;font-size:clamp(28px,3.4vw,46px);line-height:1.08}
.method-copy>p{color:var(--soft);font-size:17px;margin-bottom:34px;max-width:44ch}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li span{font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-top:3px}
.steps li strong{font:700 20px var(--disp);grid-column:2}
.steps li p{grid-column:2;margin-top:6px;color:var(--mist);font-size:14.5px}

/* ---- Closing ---- */
.closing{padding:clamp(100px,13vw,170px) var(--pad);text-align:center;position:relative;overflow:hidden}
.closing:before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:var(--accent);filter:blur(190px);opacity:.1;left:50%;top:50%;transform:translate(-50%,-50%)}
.closing>*{position:relative}
.closing h2{margin:22px auto 22px;font-weight:800;font-size:clamp(34px,5vw,66px);line-height:1.04;max-width:16ch}
.closing>p{margin:0 auto 40px;color:var(--soft);max-width:52ch;font-size:17px}

/* ---- Footer ---- */
footer{padding:56px var(--pad);border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:20px 40px;align-items:center}
footer p{color:var(--mist);font-size:14px;justify-self:end;text-align:right}
footer small{grid-column:1/-1;color:var(--faint);font-size:12px;border-top:1px solid var(--line2);padding-top:24px}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* ---- Responsive ---- */
@media(max-width:1000px){
  .nav nav{display:none}
  .section-head{grid-template-columns:1fr;gap:20px}
  .entry-grid{grid-template-columns:1fr}
  .metric-strip{grid-template-columns:1fr}
  .construction-grid{grid-template-columns:1fr 1fr}
  .layers{grid-template-columns:1fr}
  .method{grid-template-columns:1fr;gap:44px}
}
@media(max-width:720px){
  .nav{height:70px}
  .nav-cta{display:none}
  .menu{display:grid;place-items:center;gap:5px;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:transparent;cursor:pointer}
  .menu span{display:block;width:17px;height:1.5px;background:var(--bone)}
  .nav.open{position:fixed;height:auto;flex-direction:column;align-items:flex-start;padding-top:22px;padding-bottom:24px;background:var(--ink2);border-bottom:1px solid var(--line)}
  .nav.open nav{display:flex;flex-direction:column;gap:0;width:100%;margin:14px 0 0;order:3}
  .nav.open nav a{padding:14px 0;border-top:1px solid var(--line);width:100%}
  .hero-proof{max-width:100%}
  .construction-grid{grid-template-columns:1fr}
  .steps li{grid-template-columns:1fr}
  .steps li strong,.steps li p{grid-column:1}
  footer{grid-template-columns:1fr}
  footer p{justify-self:start;text-align:left}
}

/* ===== HOME — hero de marca (sin foto de industria) ===== */
.hero-brand{background:radial-gradient(78% 100% at 82% 4%,rgba(216,162,74,.16),transparent 56%),radial-gradient(70% 90% at 10% 98%,rgba(120,92,238,.14),transparent 60%),linear-gradient(180deg,#1c1a17 0%,#100f0d 100%)}
.hero-brand .hero-grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(to bottom,black,transparent 85%);mask-image:linear-gradient(to bottom,black,transparent 85%);pointer-events:none}
.hero-brand .hero-shade{background:linear-gradient(180deg,transparent 62%,rgba(19,18,16,.85) 92%,#100f0d 100%)}

/* ===== HOME v14: Odoo x Kodeuz IA ===== */
.brand{min-width:126px}
.brand img{width:126px;height:auto}
.hero-brand{
  height:min(88svh,900px);
  min-height:680px;
  padding:112px var(--pad) 72px;
  justify-content:center;
  background:#090b18;
}
.hero-brand .hero-media{object-position:center;background:#090b18}
.hero-brand .hero-shade{background:rgba(5,7,18,.26)}
.hero-brand .hero-content{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-brand h1{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.hero-kicker{
  margin-bottom:46px;
  font:600 13px/1 var(--sans);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#ffb35c;
}
.hero-lockup{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:42px;
}
.hero-lockup .odoo-logo{width:260px;height:auto}
.lockup-x{font:400 52px/1 var(--disp);color:#c8c6d5}
.kodeuz-ai{display:flex;align-items:flex-end;gap:12px}
.kodeuz-ai img{width:470px;height:auto}
.kodeuz-ai b{margin-bottom:13px;font:700 22px/1 var(--disp);letter-spacing:.04em;color:#806cff}
.hero-promise{
  margin-top:48px;
  font:600 42px/1.15 var(--disp);
  color:#f7f6fb;
}
.hero-brand .hero-lead{
  max-width:760px;
  margin-top:20px;
  font-size:17px;
  line-height:1.55;
  color:#b9b7c8;
}
.hero-brand .hero-actions{justify-content:center;margin-top:32px}
.hero-brand .button-primary{background:#f7f6fb;color:#0b0d1a}
.hero-brand .button-primary:hover{background:#ffb35c}
.hero-partner{
  position:absolute;
  z-index:2;
  left:var(--pad);
  bottom:28px;
  font:600 11px/1 var(--sans);
  letter-spacing:.08em;
  color:#8f8c9f;
}

@media(max-width:1000px){
  .hero-lockup{gap:28px}
  .hero-lockup .odoo-logo{width:210px}
  .kodeuz-ai img{width:370px}
  .kodeuz-ai b{margin-bottom:9px;font-size:18px}
  .hero-promise{font-size:36px}
}

@media(max-width:720px){
  .brand{min-width:112px}
  .brand img{width:112px}
  .hero-brand{
    height:auto;
    min-height:calc(100svh - 38px);
    padding:106px 24px 66px;
  }
  .hero-brand .hero-content{width:calc(100vw - 48px);max-width:calc(100vw - 48px)}
  .hero-brand .hero-media{object-fit:cover;object-position:center}
  .hero-kicker{margin-bottom:32px;font-size:10px;letter-spacing:.18em}
  .hero-lockup{flex-direction:column;gap:16px}
  .hero-lockup .odoo-logo{width:150px}
  .lockup-x{font-size:30px}
  .kodeuz-ai{gap:7px}
  .kodeuz-ai img{width:250px}
  .kodeuz-ai b{margin-bottom:6px;font-size:14px}
  .hero-promise{margin-top:32px;font-size:30px;max-width:12ch}
  .hero-brand .hero-lead{width:100%;font-size:15px;max-width:100%}
  .hero-brand .hero-actions{width:100%;margin-top:26px;justify-content:center;flex-direction:column;align-items:center}
  .hero-brand .button{padding:13px 18px}
  .hero-partner{left:24px;right:24px;bottom:22px;text-align:center;font-size:9px}
}

/* ===== HOME v16: bandas azul / carbon Kodeuz ===== */
:root{
  --section-blue:#081725;
  --section-blue-panel:#0d2130;
  --section-green:#171915;
  --section-green-panel:#20231e;
}
body{background:var(--section-blue)}
.hero-brand{background:var(--section-blue)}
.hero-brand .hero-shade{background:rgba(3,13,27,.28)}
.statement{background:var(--section-green);border-color:rgba(243,241,234,.08)}
.entry{background:var(--section-blue)}
.entry-option{background:var(--section-blue-panel);border-color:rgba(141,188,216,.14)}
.entry-option.accent{background:var(--section-blue-panel);border-color:rgba(255,179,92,.32)}
.construction{background:var(--section-green);border-color:rgba(243,241,234,.08)}
.construction .metric-strip{background:rgba(243,241,234,.1);border-color:rgba(243,241,234,.1)}
.construction .metric-strip div{background:var(--section-green-panel)}
.system{background:var(--section-blue)}
.system .layer{background:var(--section-blue-panel);border-color:rgba(141,188,216,.14)}
.system .layer-dark{background:#14271f;border-color:rgba(255,179,92,.3)}
.method{background:var(--section-green);border-color:rgba(243,241,234,.08)}
.closing{background:var(--section-blue)}
footer{background:var(--section-green);border-color:rgba(243,241,234,.08)}

/* ===== HOME v17: jerarquia clara en industrias ===== */
.capability{min-height:270px;padding:28px}
.capability span{
  top:26px;
  left:28px;
  right:72px;
  font:700 20px/1.2 var(--disp);
  letter-spacing:0;
  text-transform:none;
  color:#fff;
}
.capability h3{
  margin:0 0 9px;
  max-width:none;
  font:600 16.5px/1.3 var(--disp);
  letter-spacing:0;
  color:#f3f1ea;
}
.capability p{font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.7)}
.capability i{top:24px;right:24px}

@media(max-width:720px){
  .capability{min-height:250px;padding:24px}
  .capability span{top:23px;left:24px;right:66px;font-size:21px}
  .capability h3{font-size:16.5px}
  .capability i{top:20px;right:20px}
}

/* ===== HOME v18: pelicula Odoo x Kodeuz ===== */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.hero-film{
  position:relative;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  width:100%;
  height:min(96svh,1050px);
  min-height:640px;
  padding-top:90px;
  overflow:hidden;
  background:#070816;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-film-media{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#070816;
}
.hero-film::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 1px rgba(255,255,255,.04),inset 0 -70px 80px -80px rgba(0,0,0,.9);
}
.hero-film-partner{
  position:absolute;
  z-index:2;
  left:var(--pad);
  bottom:24px;
  margin:0;
  font:600 11px/1 var(--sans);
  letter-spacing:.08em;
  color:rgba(255,255,255,.64);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.video-sound{
  position:absolute;
  z-index:4;
  right:var(--pad);
  bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:7px 14px 7px 8px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(7,8,22,.78);
  color:#fff;
  font:700 12px/1 var(--sans);
  letter-spacing:0;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.video-sound:hover{
  transform:translateY(-1px);
  border-color:rgba(255,179,92,.72);
  background:rgba(14,15,34,.92);
}
.video-sound:focus-visible{outline:2px solid #ffb35c;outline-offset:3px}
.video-sound-icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,179,92,.14);
  color:#ffb35c;
  font:700 17px/1 var(--sans);
}
.video-sound.is-audible .video-sound-icon{background:#ffb35c;color:#090b18}

@media(max-width:720px){
  .hero-film{
    display:block;
    height:auto;
    min-height:0;
    padding-top:70px;
  }
  .hero-film-media{
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:contain;
  }
  .hero-film::after{top:70px;bottom:50px}
  .hero-film-partner{
    position:relative;
    left:auto;
    bottom:auto;
    padding:18px 20px 20px;
    text-align:center;
    font-size:9px;
  }
  .video-sound{
    right:16px;
    bottom:auto;
    top:calc(70px + 56.25vw - 52px);
    min-height:38px;
    padding:5px 12px 5px 6px;
  }
  .video-sound-icon{width:26px;height:26px}
}

@media(prefers-reduced-motion:reduce){
  .hero-film-media{animation:none}
}