/* ==================== VARIABLES ==================== */
:root{
  color-scheme:dark;
  --bg:#0A0A0A;
  --bg2:#141414;
  --accent:#F9BD16;            /* ámbar corporativo del logo */
  --ink:#0A0A0A;
  --text:#FFFFFF;
  --text2:#CFCFCF;
  --line:rgba(255,255,255,.12);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Archivo',-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --scribble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C40 3, 70 12, 105 7 S170 4, 197 8' fill='none' stroke='%23F9BD16' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --strike:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C50 6, 90 15, 130 9 S180 7, 198 11' fill='none' stroke='%23F9BD16' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
/* FONDO BLINDADO: html + body con !important. Algunos visores
   (Quick Look de iOS, previews) ignoran el fondo del body;
   la capa fija .bg-shield de abajo lo garantiza siempre. */
html{scroll-behavior:smooth;background:#0A0A0A !important}
body{
  background:#0A0A0A !important;
  color:#FFFFFF !important;
  font-family:var(--font);font-weight:500;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.bg-shield{position:fixed;inset:0;background:#0A0A0A;z-index:-100;pointer-events:none}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--ink)}

/* ==================== UTILIDADES ==================== */
.wrap{width:min(1200px,92%);margin:0 auto}
section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
/* margen para que la barra fija no tape el título al saltar desde el menú */
section[id]{scroll-margin-top:90px}
.h2{
  font-size:clamp(2.4rem,6vw,4.4rem);
  font-weight:900;letter-spacing:-.045em;line-height:1;
  color:var(--text);margin-bottom:1.3rem;
}
.lead{color:var(--text2);font-size:clamp(1rem,1.4vw,1.15rem);max-width:600px}

/* Resaltado ámbar sólido, siempre legible */
.mark{
  display:inline-block;background-color:var(--accent);
  color:var(--ink);padding:.05em .3em .1em;
  transform:rotate(-1.5deg);
  clip-path:polygon(1% 12%,4% 2%,97% 6%,100% 30%,98% 88%,94% 100%,3% 95%,0% 70%);
}
.sub{
  display:inline-block;
  background:var(--scribble) bottom/100% .16em no-repeat;
  padding-bottom:.14em;
}
.tach{display:inline-block;position:relative;white-space:nowrap;color:var(--text)}
.tach::after{
  content:"";position:absolute;left:-3%;right:-3%;top:40%;height:.32em;
  background:var(--strike) center/100% 100% no-repeat;
  transform:rotate(-1.5deg);
}
.stamp{
  position:absolute;
  font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.28em;color:var(--accent);
  border:2px solid var(--accent);padding:.5em 1.1em;
  transform:rotate(-7deg);opacity:.9;pointer-events:none;user-select:none;
}

.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.on{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important}
}

.btn{
  display:inline-block;padding:1rem 2rem;
  font-weight:800;font-size:.95rem;
  cursor:pointer;border:2px solid var(--accent);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s;
}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 rgba(249,189,22,.35)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost:hover{background:var(--accent);color:var(--ink);transform:translate(-4px,-4px);box-shadow:6px 6px 0 rgba(255,255,255,.18)}

.arrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:800;font-size:1rem;color:var(--text);
  background:var(--scribble) bottom/100% .14em no-repeat;
  padding-bottom:.22em;
  transition:color .25s;
}
.arrow::after{content:"→";color:var(--accent);transition:transform .25s var(--ease)}
.arrow:hover{color:var(--accent)}
.arrow:hover::after{transform:translateX(6px)}

/* ==================== NAV ==================== */
nav{position:fixed;inset:0 0 auto 0;z-index:100;padding:1rem 0;transition:.4s;background:#0A0A0A}
nav.scrolled{
  background:#0A0A0A;
  border-bottom:1px solid var(--line);padding:.7rem 0;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.logo-img{height:44px;width:auto}
nav.scrolled .logo-img{height:36px}
.nav-links{display:flex;gap:1.8rem;align-items:center;list-style:none}
.nav-links a{
  font-size:.9rem;font-weight:700;color:var(--text2);
  background:var(--scribble) bottom/0% .14em no-repeat;
  padding-bottom:.28em;
  transition:color .25s,background-size .35s var(--ease);
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text);background-size:100% .14em}
.nav-cta{padding:.55rem 1.2rem;font-size:.85rem;background-image:none;color:var(--ink)}
.nav-cta:hover{background-image:none;color:var(--ink)}
/* En móvil: los dos enlaces de texto se ocultan y queda solo el botón,
   porque la web es de una sola página y el scroll ya hace de menú. */
@media (max-width:640px){
  .nav-links{gap:0}
  .nav-links li:not(:last-child){display:none}
}

/* ==================== HERO ==================== */
.hero{min-height:100svh;display:flex;align-items:center;padding:8rem 0 5rem;overflow:hidden;background:#0A0A0A}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video{width:100%;height:100%;object-fit:cover;opacity:.3}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%,transparent,rgba(10,10,10,.8)),
    linear-gradient(to bottom,rgba(10,10,10,.55),rgba(10,10,10,.15) 40%,#0A0A0A);
}
.hero .wrap,.hero .stamp{position:relative;z-index:1}
.hero h1{
  font-size:clamp(3rem,10vw,7.2rem);
  font-weight:900;letter-spacing:-.05em;line-height:.98;
  color:var(--text);max-width:13ch;
  opacity:0;transform:translateY(40px);
  animation:heroIn 1s var(--ease) .2s forwards;
}
.hero p{
  margin:1.7rem 0 2.6rem;max-width:540px;color:var(--text2);
  font-size:clamp(1rem,1.5vw,1.18rem);
  opacity:0;transform:translateY(40px);
  animation:heroIn 1s var(--ease) .45s forwards;
}
.hero p b{color:var(--text);font-weight:800}
.hero-btns{
  display:flex;gap:1rem;flex-wrap:wrap;
  opacity:0;transform:translateY(40px);
  animation:heroIn 1s var(--ease) .7s forwards;
}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero .stamp{top:20%;right:6%;opacity:0;animation:heroIn 1s var(--ease) 1.1s forwards}

/* ==================== TICKER ==================== */
.ticker{
  border-block:2px solid var(--accent);overflow:hidden;
  background:var(--accent);white-space:nowrap;
  transform:rotate(-1.2deg) scale(1.03);margin:2rem 0 -1rem;
  position:relative;z-index:2;
}
.ticker-track{display:inline-flex;padding:.75rem 0;animation:marquee 24s linear infinite}
.ticker span{font-weight:900;font-size:1rem;padding:0 1.3rem;color:var(--ink)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ==================== MANIFIESTO (credo numerado) ==================== */
.manif{background:#0A0A0A}
.credo{margin-top:2.5rem;border-top:1px solid var(--line)}
.credo li{
  list-style:none;
  display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:baseline;
  padding:1.5rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease);
}
.credo li:hover{padding-left:.8rem}
.credo em{
  font-style:normal;font-family:var(--mono);font-size:.75rem;font-weight:700;
  letter-spacing:.2em;color:var(--accent);
}
.credo p{
  font-size:clamp(1.3rem,3vw,2.1rem);
  font-weight:900;letter-spacing:-.03em;line-height:1.1;color:var(--text);
}
.credo p span{color:var(--text2);font-weight:700}

/* ==================== SERVICIOS (4 bloques) ==================== */
.services{background:var(--bg2)}
.serv-block{
  padding:clamp(2.4rem,4.5vw,3.4rem) 0;
  border-top:1px solid var(--line);
  transition:padding-left .3s var(--ease);
}
.serv-block:hover{padding-left:.8rem}
.serv-block:last-of-type{border-bottom:1px solid var(--line)}
.serv-num{
  font-family:var(--mono);font-size:.78rem;font-weight:700;
  letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:.9rem;
}
.serv-txt h3{
  font-size:clamp(1.7rem,3.4vw,2.7rem);
  font-weight:900;letter-spacing:-.04em;line-height:1.02;
  color:var(--text);margin-bottom:.9rem;
}
.serv-txt p{color:var(--text2);max-width:460px;margin-bottom:1.4rem}
.serv-tags{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;
}
.serv-tags span{
  font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;color:var(--text2);
  border:1px solid var(--line);padding:.35em .8em;
}

/* ==================== MODOS ==================== */
.modos{background:#0A0A0A}
.modos-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:3rem}
.modo{
  background:var(--bg2);border:1px solid var(--line);
  padding:2.6rem 2.2rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.modo:hover{
  transform:translate(-5px,-5px);border-color:var(--accent);
  box-shadow:7px 7px 0 rgba(249,189,22,.25);
}
.modo em{
  font-style:normal;font-family:var(--mono);font-size:.75rem;font-weight:700;
  letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:1rem;
}
.modo h3{
  font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:900;letter-spacing:-.035em;line-height:1.05;
  color:var(--text);margin-bottom:.9rem;
}
.modo p{color:var(--text2);margin-bottom:1.5rem}
@media (max-width:820px){.modos-grid{grid-template-columns:1fr}}

/* ==================== PROYECTOS ==================== */
.projs{background:var(--bg2)}
.projs .stamp{top:5.5rem;right:5%;transform:rotate(6deg)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
.proj{
  overflow:hidden;background:#0A0A0A;border:1px solid var(--line);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.proj:hover{
  transform:translate(-5px,-5px);border-color:var(--accent);
  box-shadow:7px 7px 0 rgba(249,189,22,.25);
}
.proj-body{padding:2rem 1.6rem 2.2rem}
.proj-cat{
  font-family:var(--mono);font-size:.64rem;font-weight:700;
  letter-spacing:.22em;color:var(--accent);
}
.proj-body h3{font-size:1.2rem;font-weight:900;letter-spacing:-.03em;color:var(--text);margin:.45rem 0 .3rem}
.proj-body p{color:var(--text2);font-size:.85rem}
@media (max-width:900px){.proj-grid{grid-template-columns:1fr}}

/* ==================== MÉTRICAS ==================== */
.metrics{background:#0A0A0A;border-block:1px solid var(--line);padding:3.5rem 0}
.met-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;text-align:center}
.met b{
  font-size:clamp(2.2rem,5vw,3.8rem);font-weight:900;
  letter-spacing:-.04em;display:block;color:var(--text);
}
.met b .plus,.met b .suffix{color:var(--accent)}
.met span{
  color:var(--text2);font-size:.72rem;display:block;margin-top:.3rem;
  font-family:var(--mono);font-weight:700;letter-spacing:.16em;
}
@media (max-width:820px){.met-grid{grid-template-columns:repeat(2,1fr)}}

/* ==================== CTA + CONTACTO ==================== */
.cta{
  text-align:center;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 80% at 50% 130%,rgba(249,189,22,.15),transparent),
    var(--bg2);
}
.cta h2{
  font-size:clamp(2.4rem,6.5vw,5rem);
  font-weight:900;letter-spacing:-.05em;line-height:1;
  color:var(--text);max-width:16ch;margin:0 auto 1.3rem;
}
.cta p{color:var(--text2);margin-bottom:2.4rem;font-size:1.02rem}
.cta .stamp{bottom:3rem;left:8%;transform:rotate(-9deg)}

.contact{background:#0A0A0A}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3.5rem;margin-top:2.6rem}
.contact-info p{color:var(--text2);margin-bottom:1.8rem;max-width:400px}
.wa{
  display:inline-flex;align-items:center;gap:.7rem;
  font-weight:800;font-size:.95rem;color:var(--text);
  border:2px solid rgba(255,255,255,.3);padding:.85rem 1.6rem;
  transition:border-color .3s,transform .25s var(--ease),box-shadow .25s var(--ease);
}
.wa:hover{
  border-color:#25D366;transform:translate(-4px,-4px);
  box-shadow:6px 6px 0 rgba(37,211,102,.25);
}
.wa svg{width:20px;height:20px;fill:#25D366}
.mail-directo{margin-top:1.2rem;font-size:.9rem;color:var(--text2)}
.mail-directo a{
  color:var(--text);font-weight:700;
  background:var(--scribble) bottom/100% .12em no-repeat;padding-bottom:.16em;
  transition:color .25s;
}
.mail-directo a:hover{color:var(--accent)}
form{display:flex;flex-direction:column;gap:1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{
  font-family:var(--mono);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;color:var(--text2);
}
.field input,.field textarea{
  background:var(--bg2);border:1px solid var(--line);
  padding:.9rem 1rem;color:var(--text);
  font-family:var(--font);font-size:.95rem;
  transition:border-color .3s,box-shadow .3s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(207,207,207,.5)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:4px 4px 0 rgba(249,189,22,.2);
}
.field textarea{min-height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-msg{font-size:.85rem;color:var(--accent);min-height:1.2em}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:2.6rem}
  .form-row{grid-template-columns:1fr}
}

/* ==================== FOOTER ==================== */
footer{background:#0A0A0A;border-top:1px solid var(--line);padding:3rem 0 2.2rem}
.foot-grid{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.foot-logo{height:48px;width:auto}
.foot-tag{
  font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.32em;color:var(--accent);margin-top:.6rem;
}
.foot-links{display:flex;gap:1.8rem;list-style:none;flex-wrap:wrap}
.foot-links a{
  font-size:.86rem;font-weight:700;color:var(--text2);
  transition:color .25s;
}
.foot-links a:hover{color:var(--accent)}
.foot-legal{
  margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid var(--line);
  font-size:.7rem;color:rgba(207,207,207,.55);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);
}