/* ============================================================
   CAMALEÓN° — Agencia de Publicidad 360
   Paleta: Negro · Blanco hueso · Verde
   ============================================================ */

:root{
  --black:   #0A0B0A;
  --black-2: #111311;
  --bone:    #ECE7D8;   /* blanco hueso */
  --bone-dim:#9A968B;
  --green:   #2BE872;   /* verde vibrante */
  --green-2: #1BA653;
  --acid:    #C6FF3D;   /* acento neón */
  --ease:    cubic-bezier(.16,1,.3,1);
  --radius:  18px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--bone);
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-size:18px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.loading{ overflow:hidden; height:100vh; }

::selection{ background:var(--green); color:var(--black); }

a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:'Syne', sans-serif; font-weight:800; line-height:.98; letter-spacing:-.02em; }

.green, .green-text{ color:var(--green); }
.green-text{ font-style:italic; }

/* ---------- Grano de película ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-4%)} 75%{transform:translate(-2%,3%)} 100%{transform:translate(3%,-1%)}
}

/* ---------- Cursor personalizado ---------- */
.cursor{
  position:fixed; top:0; left:0; width:42px; height:42px; border:1px solid var(--green);
  border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s, opacity .3s;
  mix-blend-mode:difference;
}
.cursor-dot{
  position:fixed; top:0; left:0; width:5px; height:5px; background:var(--green);
  border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
}
.cursor.is-hover{ width:74px; height:74px; background:var(--green); border-color:transparent; }
@media (hover:none){ .cursor,.cursor-dot{ display:none; } }

/* ---------- Preloader ---------- */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--black);
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:6vw; transition:transform 1s var(--ease);
}
.loader.done{ transform:translateY(-100%); }
.loader__inner{ width:100%; display:flex; align-items:flex-end; justify-content:space-between; border-top:1px solid #ffffff20; padding-top:24px; }
.loader__word{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2rem,9vw,7rem); letter-spacing:-.03em; }
.loader__count{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2rem,9vw,7rem); color:var(--green); }

/* ---------- Barra de progreso ---------- */
.progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--green); z-index:9000; box-shadow:0 0 14px var(--green); }

/* ---------- Navegación ---------- */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 6vw; mix-blend-mode:difference;
  transition:transform .5s var(--ease);
}
.nav.hidden{ transform:translateY(-120%); }
.nav__logo{ font-family:'Syne',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-.02em; }
.nav__logo .dot{ color:var(--green); }
.nav__links{ display:flex; align-items:center; gap:38px; font-size:.95rem; font-weight:500; }
.nav__links a{ position:relative; }
.nav__links a[data-link]::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--green);
  transition:width .35s var(--ease);
}
.nav__links a[data-link]:hover::after{ width:100%; }
.nav__cta{
  border:1px solid currentColor; padding:10px 22px; border-radius:40px; font-weight:600;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.nav__cta:hover{ background:var(--green); color:var(--black); border-color:var(--green); }
.nav__burger{ display:none; background:none; border:0; flex-direction:column; gap:6px; cursor:pointer; }
.nav__burger span{ width:28px; height:2px; background:var(--bone); display:block; }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:0 6vw; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; filter:blur(80px); opacity:.55; }
.blob{ position:absolute; border-radius:50%; }
.blob--1{ width:46vw; height:46vw; background:radial-gradient(circle,var(--green-2),transparent 70%); top:-10%; right:-8%; animation:float1 14s var(--ease) infinite; }
.blob--2{ width:38vw; height:38vw; background:radial-gradient(circle,#0c5a30,transparent 70%); bottom:-15%; left:-5%; animation:float2 18s var(--ease) infinite; }
@keyframes float1{ 50%{ transform:translate(-6%,8%) scale(1.15); } }
@keyframes float2{ 50%{ transform:translate(8%,-6%) scale(.9); } }

.hero__content{ position:relative; z-index:2; }
.hero__eyebrow{ font-size:1rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:26px; }
.hero__title{ font-size:clamp(2.6rem,11vw,9.5rem); text-transform:uppercase; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .word{ display:inline-block; transform:translateY(110%); }
.hero.in .hero__title .word{ animation:wordUp 1s var(--ease) forwards; }
.hero.in .line:nth-child(1) .word{ animation-delay:.1s; }
.hero.in .line:nth-child(2) .word{ animation-delay:.22s; }
.hero.in .line:nth-child(3) .word{ animation-delay:.34s; }
@keyframes wordUp{ to{ transform:translateY(0); } }

.hero__foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:30px; margin-top:46px; }
.hero__desc{ max-width:420px; color:var(--bone-dim); font-size:1.05rem; }
.hero__scroll{ position:absolute; bottom:34px; left:6vw; display:flex; align-items:center; gap:14px; z-index:2; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); }
.hero__line{ width:60px; height:1px; background:var(--bone-dim); position:relative; overflow:hidden; }
.hero__line::after{ content:''; position:absolute; inset:0; width:40%; background:var(--green); animation:scrollLine 2s var(--ease) infinite; }
@keyframes scrollLine{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(250%);} }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px; padding:18px 34px; border-radius:50px;
  background:var(--green); color:var(--black); font-weight:600; font-size:1rem;
  transition:transform .4s var(--ease), background .3s; will-change:transform;
}
.btn svg{ transition:transform .4s var(--ease); }
.btn:hover{ background:var(--acid); }
.btn:hover svg{ transform:translateX(5px); }
.btn--big{ font-size:1.05rem; }

/* ---------- Marquesina ---------- */
.marquee{ overflow:hidden; border-top:1px solid #ffffff14; border-bottom:1px solid #ffffff14; padding:24px 0; background:var(--black-2); }
.marquee__track{ display:flex; align-items:center; gap:34px; white-space:nowrap; width:max-content; animation:marquee 26s linear infinite; }
.marquee__track span{ font-family:'Syne',sans-serif; font-weight:700; font-size:clamp(1.6rem,4vw,3rem); text-transform:uppercase; }
.marquee__track .sep{ color:var(--green); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Secciones genéricas ---------- */
section{ padding:clamp(80px,12vw,170px) 6vw; }
.tag{ display:inline-block; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green); margin-bottom:22px; }
.section-head{ margin-bottom:70px; }
.section-title{ font-size:clamp(2rem,6.5vw,5rem); }

/* ---------- Servicios ---------- */
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#ffffff12; border:1px solid #ffffff12; border-radius:var(--radius); overflow:hidden; }
.service{ background:var(--black); padding:42px 34px; min-height:330px; display:flex; flex-direction:column; position:relative; transition:background .5s var(--ease); overflow:hidden; }
.service::before{ content:''; position:absolute; inset:0; background:linear-gradient(160deg,var(--green-2),transparent 60%); opacity:0; transition:opacity .5s var(--ease); }
.service:hover{ background:var(--black-2); }
.service:hover::before{ opacity:.18; }
.service__top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; position:relative; z-index:1; }
.service h3{ font-size:1.55rem; max-width:75%; }
.service__num{ font-family:'Syne',sans-serif; font-weight:700; color:var(--green); font-size:1.1rem; }
.service p{ color:var(--bone-dim); font-size:1rem; position:relative; z-index:1; flex:1; }
.service ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; position:relative; z-index:1; }
.service ul li{ font-size:.78rem; padding:6px 14px; border:1px solid #ffffff24; border-radius:30px; color:var(--bone); }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; border-top:1px solid #ffffff14; }
.stat{ text-align:center; }
.stat__num, .stat__plus{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(3rem,7vw,5.5rem); color:var(--bone); line-height:1; }
.stat__plus{ color:var(--green); }
.stat p{ color:var(--bone-dim); font-size:.95rem; margin-top:10px; }

/* ---------- Trabajo ---------- */
.work__list{ border-top:1px solid #ffffff20; }
.work__item{ position:relative; display:grid; grid-template-columns:60px 1fr auto 40px; align-items:center; gap:24px; padding:38px 10px; border-bottom:1px solid #ffffff20; transition:padding .45s var(--ease), color .45s; overflow:hidden; }
.work__item::before{ content:''; position:absolute; inset:0; background:var(--green); transform:translateY(101%); transition:transform .5s var(--ease); z-index:0; }
.work__item > *{ position:relative; z-index:1; transition:color .45s var(--ease); }
.work__item:hover{ padding-left:34px; padding-right:34px; }
.work__item:hover::before{ transform:translateY(0); }
.work__item:hover > *{ color:var(--black); }
.work__index{ font-family:'Syne',sans-serif; color:var(--green); font-weight:700; }
.work__item:hover .work__index{ color:var(--black); }
.work__name{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.6rem,4vw,3.2rem); text-transform:uppercase; }
.work__cat{ color:var(--bone-dim); font-size:.95rem; text-align:right; }
.work__arrow{ justify-self:end; }

/* ---------- Manifiesto ---------- */
.manifesto{ text-align:center; }
.manifesto__text{ font-size:clamp(2rem,6.5vw,5.4rem); text-transform:uppercase; max-width:14ch; margin:0 auto; line-height:1.05; }
.reveal-word{ display:inline-block; opacity:.12; transition:opacity .5s var(--ease); }
.reveal-word.lit{ opacity:1; }

/* ---------- Contacto ---------- */
.contact{ text-align:center; background:radial-gradient(circle at 50% 120%, #0c4a2a 0%, var(--black) 55%); }
.contact__title{ font-size:clamp(2.6rem,9vw,7rem); text-transform:uppercase; margin-bottom:46px; }
.contact__mail{ display:inline-block; font-family:'Syne',sans-serif; font-weight:700; font-size:clamp(1.1rem,3.4vw,2.4rem); border-bottom:2px solid var(--green); padding-bottom:8px; transition:color .3s, transform .4s var(--ease); }
.contact__mail:hover{ color:var(--green); }
.contact__socials{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:54px; }
.contact__socials a{ position:relative; font-weight:500; color:var(--bone-dim); transition:color .3s; }
.contact__socials a:hover{ color:var(--green); }

/* ---------- Footer ---------- */
.footer{ padding:0 6vw 40px; }
.footer__big{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(4rem,22vw,20rem); line-height:.85; letter-spacing:-.03em; text-align:center; color:var(--black-2); -webkit-text-stroke:1px #ffffff22; padding:30px 0; }
.footer__row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:24px; border-top:1px solid #ffffff18; color:var(--bone-dim); font-size:.9rem; }
.footer__row a:hover{ color:var(--green); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .services__grid{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:1fr 1fr; gap:50px 30px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .services__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .work__item{ grid-template-columns:40px 1fr; }
  .work__cat,.work__arrow{ display:none; }
  .hero__foot{ flex-direction:column; align-items:flex-start; }
}