/* =========================================================
   FULL Agencia Creativa — sitio de captación de clientes
   Paleta e identidad basadas en el material de marca
   ========================================================= */

:root{
  --green:#8CC63F;
  --green-600:#6FAF2C;
  --green-700:#4C8B2B;
  --green-900:#2F5A1B;
  --ink:#121311;
  --ink-800:#1C1E1A;
  --ink-700:#2A2D27;
  --cream:#F5F8EF;
  --mint:#E8F2D8;
  --mint-2:#DCEDC4;
  --white:#ffffff;
  --grey:#6B7166;
  --line:rgba(18,19,17,.12);

  --radius:22px;
  --radius-sm:14px;
  --shadow-sm:0 4px 18px rgba(18,19,17,.08);
  --shadow-md:0 18px 50px rgba(18,19,17,.16);
  --shadow-green:0 16px 40px rgba(111,175,44,.35);

  --font-display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Space Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;

  --wrap:1180px;
  --gutter:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6vw,4.3rem);font-weight:800}
h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.section{padding:clamp(64px,10vw,120px) 0;background:var(--white)}
.section--tight{padding:clamp(48px,7vw,80px) 0}
.bg-mint{background:var(--mint)}
.bg-cream{background:var(--cream)}
.bg-ink{background:var(--ink);color:var(--white)}
.bg-ink h2,.bg-ink h3{color:#fff}

/* El hero lleva un video con position:fixed detrás (z-index:0).
   Todo lo que sigue debe ir por encima y ser opaco. */
main > section:not(.hero),
.aliados,
.footer{position:relative;z-index:1}
.aliados{background:var(--white)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;color:var(--green-700);margin-bottom:1rem;
}
.bg-ink .eyebrow{color:var(--green)}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;display:inline-block}

.lead{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--grey);max-width:52ch}
.bg-ink .lead{color:rgba(255,255,255,.72)}

.hl{color:var(--green-700)}
.bg-ink .hl,.hero .hl,.ctaband .hl{color:var(--green)}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--green);--btn-fg:var(--ink);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:.98rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:2px solid var(--btn-bg);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-green)}
.btn:active{transform:translateY(-1px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--line)}
.bg-ink .btn--ghost,.hero .btn--ghost{--btn-fg:#fff;border-color:rgba(255,255,255,.28)}
.btn--ghost:hover{box-shadow:none;background:rgba(140,198,63,.12);border-color:var(--green)}
.btn--lg{padding:1.1rem 2.1rem;font-size:1.05rem}
.btn svg{width:18px;height:18px}

/* ---------- Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .3s ease,box-shadow .3s ease,padding .3s ease;
  padding:18px 0;
}
.header.is-scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);padding:10px 0}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:center}
.brand__logo{height:42px;width:auto;display:block}
.header.is-scrolled .brand__logo--white{display:none}
.header:not(.is-scrolled) .brand__logo--color{display:none}
@media (max-width:920px){.brand__logo{height:36px}}

.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{font-family:var(--font-display);font-weight:500;font-size:.95rem;position:relative;padding:.2rem 0}
.header:not(.is-scrolled) .nav a{color:rgba(255,255,255,.9)}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--green);transition:width .22s ease}
.nav a:hover::after{width:100%}
/* El CTA del nav es un botón: anular estilos de ".nav a" que lo deforman */
.nav a.nav__cta{margin-left:.6rem;padding:.62rem 1.35rem;font-weight:600}
.nav a.nav__cta::after{display:none}
.header .nav a.nav__cta,
.header:not(.is-scrolled) .nav a.nav__cta{color:var(--ink)}
.header .nav a.nav__cta:hover{color:var(--ink)}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:8px}
.nav-toggle span{display:block;height:2px;background:currentColor;margin:6px 0;transition:.25s;border-radius:2px}
.header:not(.is-scrolled) .nav-toggle{color:#fff}

@media (max-width:920px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,340px);
    flex-direction:column;align-items:flex-start;gap:1.4rem;
    background:var(--ink);padding:100px 32px 32px;
    transform:translateX(100%);transition:transform .3s ease;
  }
  .nav.is-open{transform:translateX(0)}
  .header:not(.is-scrolled) .nav a,.nav a{color:#fff;font-size:1.1rem}
  .nav a.nav__cta{margin:.4rem 0 0;align-self:flex-start}
  body.nav-open{overflow:hidden}
  .nav-toggle.is-active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle.is-active span:nth-child(2){opacity:0}
  .nav-toggle.is-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .nav-toggle.is-active{color:#fff;position:fixed;right:var(--gutter);z-index:101}
}

/* ---------- Hero (secuencia de fotogramas que sigue al mouse) ----------
   NO se oscurece el fondo. El contenido se reparte en la ESQUINA
   INFERIOR IZQUIERDA (columna estrecha, sobre la zona oscura de la
   cabina) para que nunca quede encima del marciano, que ocupa el
   centro/arriba del encuadre. */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:#080a07;color:#fff;overflow:hidden;
  padding:132px 0 clamp(64px,12vh,120px);
  isolation:isolate;
}
/* <canvas> de los fotogramas del héroe, a pantalla completa. El encuadre (cover +
   posición vertical del marciano) se calcula en JS con drawImage(). */
.hero__video{
  position:fixed;inset:0;z-index:0;display:block;
  width:100%;height:100%;
  pointer-events:none;background:#080a07;
}
/* capa de estrellas (mismo efecto que la sección "Nosotros"), sobre el video */
.hero__stars{position:fixed;inset:0;z-index:0;pointer-events:none;display:block}
.hero > .wrap{position:relative;z-index:2;width:100%}
.hero__copy{max-width:33rem}
.hero h1{
  font-size:clamp(2.05rem,4.2vw,3.15rem);margin-bottom:1.05rem;
  text-shadow:0 2px 14px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.55);
}
.hero h1 .hl{color:var(--green)}
.hero__sub{
  font-size:clamp(1rem,1.5vw,1.16rem);color:rgba(255,255,255,.9);max-width:36ch;margin-bottom:1.8rem;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.9rem}
.hero__tags{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.72);text-shadow:0 1px 8px rgba(0,0,0,.65)}
.hero__tags li{display:flex;align-items:center;gap:.5rem}
.hero__tags li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.hero .eyebrow{text-shadow:0 1px 8px rgba(0,0,0,.65)}

/* Pistas de UI: a la DERECHA, para no chocar con el texto */
.hero__hint{
  position:absolute;right:24px;bottom:24px;z-index:3;
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.75);background:rgba(8,10,7,.35);backdrop-filter:blur(4px);
  padding:.42rem .9rem;border-radius:999px;
}
.hero__hint svg{width:14px;height:14px;color:var(--green)}
.hero__hint svg path:last-child{opacity:.5}

/* floating rounded-rect motif (se usa en la banda CTA) */
.blob{position:absolute;border-radius:26%;background:var(--green);opacity:.14;filter:blur(.3px);z-index:1;pointer-events:none}

.scroll-cue{
  position:absolute;right:26px;bottom:70px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.scroll-cue .mouse{width:22px;height:34px;border:2px solid rgba(255,255,255,.4);border-radius:12px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;background:var(--green);border-radius:2px;transform:translateX(-50%);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

/* Entrada fluida: el contenido sube de abajo hacia arriba (escalonado) */
@keyframes heroRise{
  from{opacity:0;transform:translate3d(0,32px,0);filter:blur(6px)}
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}
@keyframes heroDrop{
  from{opacity:0;transform:translate3d(0,-24px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.hero-rise{animation:heroRise 1s cubic-bezier(.22,1,.36,1) backwards;animation-delay:var(--d,0s)}
/* El encabezado y el logo entran de arriba hacia abajo, sincronizados.
   'backwards' (no 'both') evita que quede un transform residual en .header
   que rompería el posicionamiento fixed del menú móvil. */
.header{animation:heroDrop .85s cubic-bezier(.22,1,.36,1) backwards}

@media (max-width:920px){
  .scroll-cue,.hero__hint{display:none}
  /* En móvil el video y el texto van APILADOS (nunca se solapan):
     video arriba, texto debajo sobre el fondo sólido. Sin oscurecer nada. */
  .hero{
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:0 0 56px;
  }
  .hero__video{position:static;inset:auto;height:44svh}
  .hero > .wrap{padding-top:30px}
  .hero__copy{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-rise,.header{animation:none;opacity:1;transform:none;filter:none}
}

/* ---------- Aliados strip ---------- */
.aliados{padding:38px 0;border-bottom:1px solid var(--line)}
.aliados__label{font-family:var(--font-mono);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);text-align:center;margin-bottom:1.3rem}
.aliados__list{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1rem}
.chip{
  font-family:var(--font-display);font-weight:600;font-size:.9rem;
  padding:.5rem 1.1rem;border-radius:999px;background:var(--mint);color:var(--green-900);
  border:1px solid var(--mint-2);
}

/* ---------- Section head ---------- */
.shead{max-width:60ch;margin-bottom:clamp(36px,6vw,64px)}
.shead h2 .hl{color:var(--green-700)}
.bg-ink .shead h2 .hl{color:var(--green)}

/* ---------- Nosotros ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.about__media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__text p{color:var(--grey)}
.about__text strong{color:var(--ink)}
.stats{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;margin-top:1.8rem}
.stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.9rem;color:var(--green-700);line-height:1}
.stat span{font-size:.9rem;color:var(--grey)}
@media (max-width:820px){.about{grid-template-columns:1fr}}

/* ---------- Nosotros · variante "espacio" (canvas de partículas + PNG en esquina) ---------- */
.about-space{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 100% at 18% 0%,#12281c 0%,#0a1310 42%,#060a0d 100%);
  min-height:clamp(600px,78vh,800px);
  display:flex;align-items:center;
}
.space-canvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
.about-space > .wrap{position:relative;z-index:2;width:100%}
.about-space__png{
  position:absolute;left:0;bottom:0;z-index:1;
  width:clamp(320px,38vw,580px);height:auto;pointer-events:none;user-select:none;
  /* flotación en reposo (transform) + parallax con el mouse (translate, vía JS) */
  translate:0 0;
  animation:aboutFloat 9s ease-in-out infinite alternate;
  will-change:transform,translate;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.5));
}
@keyframes aboutFloat{
  from{transform:translate3d(0,0,0) rotate(-0.7deg)}
  to{transform:translate3d(6px,-20px,0) rotate(0.9deg)}
}
.about--space{
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  align-items:start;
  gap:clamp(32px,5vw,64px);
}
.about--space .about__text{max-width:460px}
.about-space .eyebrow{color:var(--green)}
.about-space h2{color:#fff}
.about-space .hl{color:var(--green)}
.about-space .about__text p{color:rgba(255,255,255,.8)}
.about-space .about__text strong{color:#fff}

/* Tierra flotando en el espacio (arriba a la derecha, detrás del contenido) */
.about-space__earth{
  position:absolute;right:0;top:-2%;z-index:1;
  width:clamp(190px,20vw,330px);height:auto;pointer-events:none;user-select:none;
  translate:0 0;
  animation:earthFloat 16s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 40px rgba(90,150,220,.35)) drop-shadow(0 0 90px rgba(140,198,63,.12));
  will-change:transform,translate;
}
@keyframes earthFloat{
  from{transform:translate3d(0,0,0) rotate(-3deg)}
  to{transform:translate3d(-12px,22px,0) rotate(3deg)}
}

/* HUD — panel de indicadores animado */
.hud{
  position:relative;z-index:3;width:100%;max-width:340px;justify-self:start;
  padding:1.5rem 1.6rem 1.4rem;border-radius:20px;
  background:linear-gradient(180deg,rgba(12,23,18,.9),rgba(7,13,11,.82));
  border:1px solid rgba(140,198,63,.24);
  box-shadow:0 26px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.hud::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(80% 60% at 18% 0%,rgba(140,198,63,.2),transparent 70%);
}
.hud__tag{
  margin:0 0 .6rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:.55rem;
}
.hud__tag::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:hudPing 2.4s ease-out infinite;
}
@keyframes hudPing{
  0%{box-shadow:0 0 0 0 rgba(140,198,63,.55)}
  100%{box-shadow:0 0 0 13px rgba(140,198,63,0)}
}
.hud__stat{position:relative;padding:.85rem 0;border-top:1px solid rgba(255,255,255,.08)}
.hud__stat:first-of-type{border-top:0;padding-top:.3rem}
.hud__num{
  display:block;font-family:var(--font-display);font-weight:800;font-size:2.05rem;
  line-height:1;color:var(--green);font-variant-numeric:tabular-nums;
}
.hud__label{display:block;margin-top:.32rem;font-size:.8rem;color:rgba(255,255,255,.66)}

/* ecualizador ("+70") */
.hud__eq{position:absolute;right:0;top:44%;transform:translateY(-50%);display:flex;align-items:flex-end;gap:3px;height:34px}
.hud__eq i{width:4px;height:16%;background:linear-gradient(var(--green),rgba(140,198,63,.3));border-radius:2px}
.hud.is-live .hud__eq i{animation:hudEq 1.15s ease-in-out infinite}
.hud__eq i:nth-child(2){animation-delay:.09s}
.hud__eq i:nth-child(3){animation-delay:.18s}
.hud__eq i:nth-child(4){animation-delay:.27s}
.hud__eq i:nth-child(5){animation-delay:.36s}
.hud__eq i:nth-child(6){animation-delay:.45s}
.hud__eq i:nth-child(7){animation-delay:.54s}
.hud__eq i:nth-child(8){animation-delay:.63s}
@keyframes hudEq{0%,100%{height:14%}50%{height:96%}}

/* puntos ("5 servicios") */
.hud__dots{position:absolute;right:0;top:44%;transform:translateY(-50%);display:flex;gap:6px}
.hud__dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14);transition:background .35s ease,box-shadow .35s ease}
.hud.is-live .hud__dots i{background:var(--green);box-shadow:0 0 10px rgba(140,198,63,.6)}
.hud.is-live .hud__dots i:nth-child(1){transition-delay:.1s}
.hud.is-live .hud__dots i:nth-child(2){transition-delay:.22s}
.hud.is-live .hud__dots i:nth-child(3){transition-delay:.34s}
.hud.is-live .hud__dots i:nth-child(4){transition-delay:.46s}
.hud.is-live .hud__dots i:nth-child(5){transition-delay:.58s}

/* anillo ("100%") */
.hud__stat--ring{display:flex;align-items:center;gap:1rem}
.hud__ring{width:82px;height:82px;flex:none;transform:rotate(-90deg)}
.hud__ring-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:9}
.hud__ring-fill{
  fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;
  transition:stroke-dashoffset 1.7s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 0 6px rgba(140,198,63,.55));
}
.hud.is-live .hud__ring-fill{stroke-dashoffset:0}
.hud__ring-mid{display:block}
.hud__ring-mid .hud__num{font-size:1.6rem}

/* onda inferior */
.hud__wave{display:block;width:100%;height:40px;margin-top:1rem;overflow:visible}
.hud__wave-line{
  fill:none;stroke:var(--green);stroke-width:2;opacity:.9;
  stroke-dasharray:640;stroke-dashoffset:640;
  filter:drop-shadow(0 0 6px rgba(140,198,63,.5));
}
.hud.is-live .hud__wave-line{animation:hudDraw 1.8s ease forwards,hudWave 6s ease-in-out 1.8s infinite}
@keyframes hudDraw{to{stroke-dashoffset:0}}
@keyframes hudWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

@media (max-width:960px){
  .about-space{display:block;min-height:0}
  .about--space{grid-template-columns:1fr;gap:1.6rem}
  .about--space .about__text{max-width:none;order:1}
  .hud{max-width:none;order:2;justify-self:stretch}
  .about-space__earth{position:relative;right:auto;top:auto;width:clamp(120px,26vw,170px);margin:0 0 -.5rem auto}
  .about-space__png{
    position:relative;left:auto;bottom:auto;transform:none;display:block;
    width:min(520px,92%);margin:1.6rem auto 0;
    -webkit-mask-image:none;mask-image:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .space-canvas{opacity:.7}
  .about-space__png,.about-space__earth{animation:none}
  .hud.is-live .hud__eq i,.hud.is-live .hud__wave-line{animation:none}
  .hud__eq i{height:60%}
  .hud__wave-line{stroke-dashoffset:0}
}

/* ---------- Campo de estrellas en secciones oscuras (Propuesta, Proceso, Contacto) ---------- */
.stars-host{position:relative;overflow:hidden;isolation:isolate}
.stars-host > .wrap{position:relative;z-index:2}
.section-stars{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}
@media (prefers-reduced-motion:reduce){.section-stars{opacity:.6}}

/* ---------- Equipo · carrete flotante de "tripulación" ---------- */
.team-marquee{
  position:relative;overflow:hidden;padding:26px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.team-track{
  display:flex;gap:22px;width:max-content;
  animation:teamScroll 48s linear infinite;
}
.team-marquee:hover .team-track,
.team-marquee:focus-within .team-track{animation-play-state:paused}
@keyframes teamScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.team-card{
  position:relative;text-align:center;overflow:hidden;
  flex:0 0 clamp(228px,24vw,264px);
  background:linear-gradient(180deg,#ffffff,#fbfdf6);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:2.4rem 1.3rem 1.8rem;
  animation:teamFloat 5s ease-in-out infinite alternate;
  will-change:transform;
}
.team-card:nth-child(2n){animation-duration:6.2s;animation-delay:-1.6s}
.team-card:nth-child(3n){animation-duration:5.6s;animation-delay:-3.1s}
.team-card:nth-child(4n){animation-duration:6.8s;animation-delay:-2.2s}
@keyframes teamFloat{from{transform:translateY(6px)}to{transform:translateY(-8px)}}
.team-card::before{                       /* filo verde superior */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:.65;
}
.team-card::after{                        /* índice de tripulación */
  content:attr(data-idx);position:absolute;top:1.05rem;right:1.15rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  color:var(--green-700);opacity:.45;
}
.team-card__photo{
  width:150px;height:150px;margin:0 auto 1.15rem;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 32%,#1b2a1d,#0b0e0a);
  border:3px solid #fff;
  box-shadow:0 0 0 1px var(--line),0 0 0 6px rgba(140,198,63,.14),0 16px 34px rgba(18,19,17,.16);
}
.team-card__photo img{width:100%;height:100%;object-fit:cover;display:block}
.team-card b{
  font-family:var(--font-display);font-weight:800;font-size:1.08rem;
  display:block;margin-bottom:.55rem;letter-spacing:-.01em;
}
.team-card span{
  display:inline-block;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--green-700);background:var(--mint);
  padding:.34rem .72rem;border-radius:999px;
}
.team-card--mascot{background:linear-gradient(180deg,#f5faeb,#eef7dc);border-color:var(--mint-2)}
.team-card--mascot::after{content:"★";opacity:.7}
.team-card--mascot .team-card__photo{
  box-shadow:0 0 0 1px var(--green),0 0 0 6px rgba(140,198,63,.3),0 16px 34px rgba(111,175,44,.24);
}
.team-card--mascot span{background:var(--green);color:var(--ink)}
@media (max-width:560px){
  .team-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .team-card{flex-basis:210px}
  .team-card__photo{width:132px;height:132px}
}
@media (prefers-reduced-motion:reduce){
  .team-marquee{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .team-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:20px}
  .team-card{animation:none;flex-basis:clamp(220px,30%,260px)}
}

/* ---------- Servicios ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.7rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.svc__media{
  margin:-2rem -1.7rem 0;aspect-ratio:16/7;overflow:hidden;background:var(--ink-800);
}
.svc__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.svc--clickable:hover .svc__media img{transform:scale(1.05)}
.svc__ico{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:var(--mint);color:var(--green-700);margin-bottom:1.1rem;
}
.svc__media + .svc__ico{
  margin-top:-38px;position:relative;z-index:1;
  border:3px solid var(--white);box-shadow:0 8px 22px rgba(18,19,17,.14);
}
.svc__ico svg{width:26px;height:26px}
.svc h3{margin-bottom:.5rem}
.svc p{font-size:.95rem;color:var(--grey);margin:0}

.svc--clickable{cursor:pointer}
.svc--clickable:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.svc__more{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;padding-top:1.1rem;
  font-family:var(--font-mono);font-weight:700;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-700);
}
.svc__more svg{width:13px;height:13px;transition:transform .2s ease}
.svc--clickable:hover .svc__more svg,
.svc--clickable:focus-visible .svc__more svg{transform:translateX(3px)}

@media (max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}

/* ---------- Modal de detalle de servicio ---------- */
.svc-modal{
  position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,10,7,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s ease;
}
.svc-modal.is-open{opacity:1}
.svc-modal[hidden]{display:none}
.svc-modal__panel{
  position:relative;background:var(--white);border-radius:var(--radius);
  width:100%;max-width:540px;max-height:86vh;overflow:auto;
  padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow-md);
  transform:translateY(14px) scale(.97);transition:transform .24s cubic-bezier(.22,1,.36,1);
}
.svc-modal.is-open .svc-modal__panel{transform:none}
.svc-modal__close{
  position:absolute;top:12px;right:14px;width:40px;height:40px;border:0;border-radius:50%;
  background:transparent;color:var(--grey);font-size:1.6rem;line-height:1;cursor:pointer;
}
.svc-modal__close:hover{background:var(--mint);color:var(--ink)}
.svc-modal__img{
  display:block;width:100%;aspect-ratio:16/7;object-fit:cover;
  border-radius:var(--radius-sm);margin-bottom:1.1rem;background:var(--ink-800);
}
.svc-modal__ico{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:var(--mint);color:var(--green-700);margin-bottom:1rem;
}
.svc-modal__ico svg{width:28px;height:28px}
.svc-modal h3{font-size:1.5rem;margin-bottom:.7rem}
.svc-modal__body p{color:var(--grey);margin:0 0 1.1rem}
.svc-modal__body h4{font-family:var(--font-display);font-weight:700;font-size:.95rem;margin:0 0 .6rem}
.svc-modal__body ul{list-style:none;display:grid;gap:.55rem;margin:0 0 1.7rem;padding:0}
.svc-modal__body li{position:relative;padding-left:1.5rem;font-size:.95rem;color:var(--grey)}
.svc-modal__body li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green-700);font-weight:800}
.svc-modal__cta{width:100%;justify-content:center}
@media (prefers-reduced-motion:reduce){
  .svc-modal,.svc-modal__panel{transition:none}
}

/* ---------- Propuesta de valor ---------- */
.value{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.value__list{display:grid;gap:1rem}
.value__item{display:flex;gap:1rem;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);padding:1.1rem 1.2rem}
.value__item svg{width:22px;height:22px;color:var(--green);flex:none;margin-top:2px}
.value__item b{font-family:var(--font-display);display:block;margin-bottom:.15rem}
.value__item span{color:rgba(255,255,255,.66);font-size:.92rem}
@media (max-width:820px){.value{grid-template-columns:1fr}}

/* ---------- Para quién ---------- */
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:2.5rem}
.aud{border-radius:var(--radius);padding:1.9rem 1.6rem;background:var(--white);border:1px solid var(--line)}
.aud b{font-family:var(--font-display);font-size:1.08rem;display:block;margin-bottom:.4rem}
.aud p{font-size:.93rem;color:var(--grey);margin:0}
.aud__tag{font-size:1.6rem}
@media (max-width:820px){.aud-grid{grid-template-columns:1fr}}

/* ---------- Paquetes ---------- */
.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pk{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:2rem 1.8rem;position:relative;
}
.pk--feature{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:var(--shadow-md)}
.pk--feature .pk__desc,.pk--feature li{color:rgba(255,255,255,.75)}
.pk__badge{position:absolute;top:-13px;left:1.8rem;background:var(--green);color:var(--ink);font-family:var(--font-mono);font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .8rem;border-radius:999px}
.pk__name{font-family:var(--font-display);font-weight:800;font-size:1.4rem;margin-bottom:.2rem}
.pk__for{font-size:.85rem;color:var(--green-700);font-family:var(--font-display);font-weight:600;margin-bottom:1rem}
.pk--feature .pk__for{color:var(--green)}
.pk__price{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.9rem 0 1rem;margin-bottom:1.2rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pk__price b{font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1;color:var(--ink)}
.pk__price span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.pk--feature .pk__price{border-color:rgba(255,255,255,.16)}
.pk--feature .pk__price b{color:#fff}
.pk--feature .pk__price span{color:rgba(255,255,255,.6)}
.pk__desc{font-size:.92rem;color:var(--grey);margin-bottom:1.2rem}
.pk ul{display:grid;gap:.6rem;margin-bottom:1.6rem}
.pk li{display:flex;gap:.6rem;font-size:.92rem;color:var(--grey)}
.pk li svg{width:17px;height:17px;color:var(--green-600);flex:none;margin-top:4px}
.pk--feature li svg{color:var(--green)}
.pk .btn{margin-top:auto;width:100%;justify-content:center}
.pk--feature .btn{--btn-bg:var(--green)}
.pk__note{text-align:center;font-size:.9rem;color:var(--grey);margin-top:1.8rem}
.pk__note b{color:var(--ink)}
@media (max-width:900px){.pk-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* ---------- Proceso ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{position:relative;padding-top:1.4rem;border-top:2px solid rgba(255,255,255,.16)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--font-mono);font-weight:700;font-size:1rem;color:var(--green);letter-spacing:.05em;
  position:absolute;top:-.85rem;background:var(--ink);padding-right:.6rem;
}
.step__ico{
  display:block;font-size:1.7rem;line-height:1;margin:.15rem 0 .6rem;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));
}
.step h3{font-size:1.05rem;margin-bottom:.4rem}
.step p{font-size:.9rem;color:rgba(255,255,255,.62);margin:0}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Portafolio ---------- */
.pf-filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.pf-filter{
  font-family:var(--font-display);font-weight:600;font-size:.88rem;
  padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;
  transition:.2s;
}
.pf-filter.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pf-item{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;
  aspect-ratio:16/10;background:var(--mint);border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease;
}
.pf-item:hover,.pf-item:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-md);outline:none}
.pf-item:focus-visible{box-shadow:0 0 0 3px var(--green),var(--shadow-md)}
.pf-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.pf-item:hover img{transform:scale(1.05)}
.pf-item__count{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  background:rgba(8,10,7,.72);backdrop-filter:blur(4px);color:#fff;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;
  padding:.28rem .6rem;border-radius:999px;
}
.pf-item figcaption{
  position:absolute;inset:auto 0 0 0;padding:2rem 1rem .95rem;
  background:linear-gradient(transparent,rgba(8,10,7,.9));color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;line-height:1.3;
}
.pf-item small{display:block;margin-top:.25rem;font-weight:500;font-size:.76rem;color:var(--green);text-transform:uppercase;letter-spacing:.07em}
.pf-item.is-hidden,.pf-item.pf-clamped{display:none}
.pf-more{display:flex;justify-content:center;margin-top:2.2rem}
.pf-more[hidden]{display:none}

/* tarjeta social media: la pieza gráfica del cliente como miniatura (mismo tamaño que las demás) */
.pf-item--social{background:#12130f}
.pf-item__count--ig::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--green);margin-right:.42rem;vertical-align:middle;
}

@media (max-width:900px){.pf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pf-grid{grid-template-columns:1fr}}

/* modal de detalle de proyecto */
.pf-modal{
  position:fixed;inset:0;z-index:210;display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 20px;overflow-y:auto;background:rgba(8,10,7,.9);
  opacity:0;transition:opacity .25s ease;
}
.pf-modal.is-open{opacity:1}
.pf-modal[hidden]{display:none}
.pf-modal__panel{
  position:relative;width:min(920px,100%);background:var(--white);color:var(--ink);
  border-radius:var(--radius);padding:2.4rem clamp(1.2rem,4vw,2.6rem) 2.6rem;
  box-shadow:var(--shadow-md);transform:translateY(14px) scale(.98);transition:transform .28s ease;
}
.pf-modal.is-open .pf-modal__panel{transform:none}
.pf-modal__close{
  position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);color:var(--ink);
  font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s;
}
.pf-modal__close:hover{background:var(--mint)}
.pf-modal__cat{
  display:inline-block;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--green-700);background:var(--mint);
  padding:.3rem .7rem;border-radius:999px;margin-bottom:.9rem;
}
.pf-modal h3{font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.2;margin:0 0 .4rem}
.pf-modal__client{font-family:var(--font-display);font-weight:600;color:var(--green-700);margin:0 0 .9rem}
.pf-modal__desc{color:var(--grey);margin:0 0 1.8rem;max-width:60ch}
.pf-modal__gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:1.8rem}
.pf-modal__gallery.is-single{grid-template-columns:1fr}
.pf-shot{
  padding:0;border:0;border-radius:var(--radius-sm);overflow:hidden;cursor:zoom-in;
  background:var(--mint);aspect-ratio:4/3;
}
.pf-shot img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.pf-shot:hover img{transform:scale(1.05)}
.pf-video{
  grid-column:1 / -1;position:relative;aspect-ratio:16/9;
  border-radius:var(--radius-sm);overflow:hidden;background:#000;
}
.pf-video__frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.pf-video__play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#000;display:block}
.pf-video__play img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .25s ease}
.pf-video__play:hover img,.pf-video__play:focus-visible img{opacity:.62}
.pf-video__btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;box-shadow:0 10px 34px rgba(0,0,0,.45);transition:transform .2s ease;
}
.pf-video__play:hover .pf-video__btn{transform:translate(-50%,-50%) scale(1.08)}
.pf-video__btn::after{
  content:"";border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent var(--ink);margin-left:5px;
}
.pf-video__ext{
  position:absolute;right:10px;bottom:10px;z-index:2;
  font-family:var(--font-display);font-weight:600;font-size:.75rem;
  color:#fff;background:rgba(8,10,7,.72);backdrop-filter:blur(4px);
  padding:.35rem .7rem;border-radius:999px;text-decoration:none;
}
.pf-video__ext:hover{background:var(--green);color:var(--ink)}

/* feed de Instagram embebido */
.pf-ig{
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  background:#fff;max-width:540px;margin-inline:auto;width:100%;
}
.pf-ig__frame{display:block;width:100%;height:640px;border:0}
.pf-ig__open{justify-self:center;margin-top:1.1rem}
@media (max-width:560px){.pf-ig__frame{height:560px}}
.pf-item__count--video::before{content:"\25B6";margin-right:.32rem;font-size:.62rem;color:var(--green)}
.pf-modal__cta{justify-content:center}
@media (max-width:640px){.pf-modal__gallery{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .pf-modal,.pf-modal__panel,.pf-item,.pf-item img,.pf-shot img{transition:none}
}

/* lightbox */
.lb{position:fixed;inset:0;z-index:320;display:none;align-items:center;justify-content:center;background:rgba(8,10,7,.95);padding:24px}
.lb.is-open{display:flex}
.lb img{max-width:min(1100px,92vw);max-height:82vh;border-radius:12px;box-shadow:var(--shadow-md)}
.lb__cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#fff;font-family:var(--font-display);font-size:.95rem}
.lb__btn{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.4rem;cursor:pointer;display:grid;place-items:center;transition:.2s}
.lb__btn:hover{background:var(--green);color:var(--ink)}
.lb__prev{left:18px;top:50%;transform:translateY(-50%)}
.lb__next{right:18px;top:50%;transform:translateY(-50%)}
.lb__close{right:18px;top:18px}

/* ---------- CTA band ---------- */
.ctaband{position:relative;overflow:hidden;text-align:center}
.ctaband h2{margin-bottom:1rem}
.ctaband p{margin-bottom:2rem}
.ctaband .blob{opacity:.12}

/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,60px)}
.contact__aside p{color:rgba(255,255,255,.7)}
.contact__links{display:grid;gap:.9rem;margin-top:1.6rem}
.contact__links a{display:flex;align-items:center;gap:.8rem;font-family:var(--font-display);font-weight:500}
.contact__links svg{width:20px;height:20px;color:var(--green);flex:none}
.form{display:grid;gap:1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.35rem}
.field label{font-family:var(--font-display);font-size:.82rem;font-weight:500;color:rgba(255,255,255,.8)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:.95rem;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;
  padding:.8rem .9rem;transition:border-color .2s ease;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green)}
.field select option{color:#111}
.form .btn{justify-content:center;margin-top:.4rem;width:100%}
.form__hint{font-size:.82rem;color:rgba(255,255,255,.5);text-align:center;margin:0}
@media (max-width:820px){.contact{grid-template-columns:1fr}.form .row{grid-template-columns:1fr}}

/* Orvi de cuerpo entero en la esquina inferior izquierda del contacto.
   Se ancla al borde inferior de la sección y baja media figura, de modo que
   el footer (opaco y posterior en el DOM) le tapa la mitad inferior. */
#contacto{overflow:visible;padding-bottom:clamp(96px,12vw,150px)}  /* deja que Orvi sobresalga bajo el footer */
.contact__orvi{
  position:absolute;z-index:1;       /* sobre las estrellas, detrás del texto/form (.wrap = z-index 2) */
  left:clamp(40px,10vw,190px);
  bottom:clamp(-150px,-10vw,-72px);  /* las piernas quedan por debajo del footer */
  width:clamp(210px,28vw,360px);height:auto;
  pointer-events:none;user-select:none;
  filter:drop-shadow(0 26px 48px rgba(0,0,0,.55));
}
@media (max-width:820px){
  #contacto{padding-bottom:clamp(210px,52vw,270px)}
  .contact__orvi{left:clamp(16px,10vw,64px);bottom:clamp(-104px,-17vw,-52px);width:clamp(180px,44vw,270px)}
}

/* ---------- Footer ---------- */
.footer{background:#0a0c08;color:rgba(255,255,255,.7);padding:52px 0 26px}
.footer__top{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:1.6rem}

/* Fila 1: logo + eslogan + redes, a todo lo ancho */
.footer__brand{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.4rem}
.footer__brand img{height:42px;margin:0}
.footer__brand p{flex:1 1 320px;max-width:52ch;font-size:.9rem;margin:0}
.footer__soc{display:flex;gap:.7rem;margin-left:auto}
.footer__soc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:.2s}
.footer__soc a:hover{background:var(--green);color:var(--ink)}
.footer__soc svg{width:18px;height:18px}

/* Fila 2: navegación repartida a lo ancho (sin hueco muerto) */
.footer nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.6rem;
  padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--font-display);font-size:.9rem;
}
.footer nav a{color:rgba(255,255,255,.72);transition:color .18s ease}
.footer nav a:hover,.footer nav a:focus-visible{color:var(--green)}

.footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.3rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:.6rem 1.2rem;font-size:.82rem;color:rgba(255,255,255,.45)}

@media (min-width:900px){
  .footer nav{justify-content:space-between}
  .footer__bottom{justify-content:space-between;text-align:left}
}
@media (max-width:560px){
  .footer__brand{justify-content:center;text-align:center}
  .footer__brand p{flex-basis:100%}
  .footer__soc{margin-left:0;justify-content:center;width:100%}
}
.footer__legal{
  color:rgba(255,255,255,.78);text-decoration:none;
  font-family:var(--font-display);font-weight:500;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.36rem .95rem;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.footer__legal:hover,.footer__legal:focus-visible{background:var(--green);color:var(--ink);border-color:var(--green);outline:none}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-cue .mouse::after{animation:none}
}

/* ---------- Splash de carga ---------- */
html.is-loading{overflow:hidden}
.splash{
  position:fixed;inset:0;z-index:9999;background:#080a07;
  display:grid;place-items:center;overflow:hidden;
  transition:opacity .55s ease,visibility .55s ease;
  /* red de seguridad si el JS falla: se oculta solo a los 7 s */
  animation:splashSafety .01s linear 7s forwards;
}
.splash.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
@keyframes splashSafety{to{opacity:0;visibility:hidden;pointer-events:none}}
.splash::before{
  content:"";position:absolute;width:min(560px,92vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(140,198,63,.16),transparent 66%);filter:blur(24px);
  animation:splashPulse 2.6s ease-in-out infinite;
}
.splash__inner{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  padding:24px;text-align:center;animation:splashIn .6s cubic-bezier(.22,1,.36,1) both;
}
.splash__logo{width:min(240px,58vw);height:auto;display:block}
.splash__bar{width:min(220px,64vw);height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.splash__bar i{
  display:block;height:100%;width:8%;background:var(--green);border-radius:3px;
  animation:splashProg 1.9s cubic-bezier(.35,0,.15,1) forwards;
}
.splash.is-done .splash__bar i{width:100%;transition:width .3s ease}
.splash__txt{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0;
}
@keyframes splashProg{0%{width:8%}65%{width:74%}100%{width:90%}}
@keyframes splashIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes splashPulse{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){
  .splash__inner,.splash__bar i,.splash::before{animation:none}
  .splash__bar i{width:72%}
}

/* ================= Música de fondo + control flotante ================= */
.music{
  position:fixed;left:18px;bottom:18px;z-index:150;
  display:flex;align-items:flex-start;flex-direction:column;gap:10px;
}
.music[hidden]{display:none}
.music__fab{
  position:relative;
  width:52px;height:52px;border-radius:50%;flex:none;cursor:pointer;
  border:1px solid rgba(140,198,63,.5);background:rgba(12,15,11,.82);
  backdrop-filter:blur(8px);color:var(--green);
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.music__fab:hover{transform:translateY(-2px);border-color:var(--green)}
.music.is-pending .music__fab::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
  animation:musicPending 1.9s ease-out infinite;
}
@keyframes musicPending{
  0%{box-shadow:0 0 0 0 rgba(140,198,63,.5)}
  100%{box-shadow:0 0 0 15px rgba(140,198,63,0)}
}
.music__fab:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.music__x{width:20px;height:20px;color:#fff;display:none}
.music.is-open .music__fab{background:var(--green);border-color:var(--green);color:var(--ink)}
.music.is-open .music__x{display:block}
.music.is-open .music__bars{display:none}

/* barras tipo ecualizador */
.music__bars{display:flex;align-items:flex-end;gap:2.5px;height:18px}
.music__bars i{
  width:3px;height:40%;background:currentColor;border-radius:2px;
  animation:musicEq .9s ease-in-out infinite;
}
.music__bars i:nth-child(2){animation-delay:.15s;height:75%}
.music__bars i:nth-child(3){animation-delay:.3s;height:55%}
.music__bars i:nth-child(4){animation-delay:.45s;height:85%}
@keyframes musicEq{0%,100%{height:30%}50%{height:100%}}
.music.is-muted .music__bars i,
.music.is-paused .music__bars i{animation-play-state:paused;height:35%}

/* ventanita de control */
.music__panel{
  width:210px;padding:14px 14px 12px;border-radius:14px;
  background:rgba(12,15,11,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 44px rgba(0,0,0,.4);
  color:#fff;transform-origin:bottom left;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.music.is-open .music__panel{opacity:1;visibility:visible;transform:none}
.music__title{
  margin:0 0 10px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.65);
}
.music__title span{color:var(--green)}
.music__vol{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;
  background:rgba(255,255,255,.2);outline:none;cursor:pointer;
}
.music__vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--green);border:2px solid #0c0f0b;cursor:pointer;
}
.music__vol::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid #0c0f0b;cursor:pointer;
}
.music__mute{
  margin-top:12px;width:100%;padding:.5rem;border-radius:9px;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:.82rem;
  border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;transition:.18s;
}
.music__mute:hover{background:rgba(255,255,255,.08)}
.music.is-muted .music__mute{background:var(--green);border-color:var(--green);color:var(--ink)}

@media (max-width:560px){
  .music{left:12px;bottom:12px}
  .music__fab{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .music__bars i{animation:none}
  .music.is-pending .music__fab::after{animation:none}
  .music__fab,.music__panel{transition:none}
}