/* =========================================================
   WEBFIX — estilos
   Inspirado en la estructura de jingjinghan.com
   Negro + acento verde neón. Blinker / Sulphur Point / Manrope
========================================================= */

:root{
  --bg:#000000;
  --bg-2:#0a0a0b;
  --card:#0d0d10;
  --card-2:#101014;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.55);
  --muted-2:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.08);
  --accent:#8CFF2E;
  --accent-dim:rgba(140,255,46,.14);

  --font-display:"Blinker", system-ui, sans-serif;
  --font-label:"Sulphur Point", system-ui, sans-serif;
  --font-body:"Manrope", system-ui, sans-serif;

  --pad:clamp(20px, 5vw, 90px);
  --maxw:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
}

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

html{ scrollbar-width:none; }
html::-webkit-scrollbar{ display:none; }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Lenis */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
em{ font-style:normal; color:var(--accent); }
::selection{ background:var(--accent); color:#000; }
/* texto sólo para lectores de pantalla / SEO (oculto visualmente) */
.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; }

/* ============ CURSOR ============ */
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
  a,button{ cursor:none; }
}
.cursor, .cursor-ring{
  position:fixed; top:0; left:0; z-index:9999;
  border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor{ width:8px; height:8px; background:#fff; transition:width .25s var(--ease), height .25s var(--ease); }
.cursor-ring{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.6);
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s, opacity .3s;
}
body.cursor-hover .cursor{ width:0; height:0; }
body.cursor-hover .cursor-ring{ width:64px; height:64px; border-color:var(--accent); }
body.cursor-label .cursor-ring{
  width:88px; height:88px; background:var(--accent); border-color:var(--accent);
  mix-blend-mode:normal;
}
.cursor-ring::after{
  content:attr(data-label);
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-label); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:#000; opacity:0; transition:opacity .2s;
}
body.cursor-label .cursor-ring::after{ opacity:1; }
@media (hover:none){ .cursor, .cursor-ring{ display:none; } }

/* ============ CANVAS BG ============ */
.bg-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85;
}

/* ============ PRELOADER ============ */
.preloader{
  position:fixed; inset:0; z-index:10000; background:#000;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad); transition:transform 1s var(--ease);
}
.preloader.is-done{ transform:translateY(-100%); }
.preloader__inner{
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom:1px solid var(--line); padding-bottom:24px;
}
.preloader__brand{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,5vw,64px); letter-spacing:-.02em;
}
.preloader__logo{ height:clamp(110px,21vw,280px); width:auto; display:block; }
.preloader__count{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(48px,12vw,140px); line-height:.8; color:var(--accent);
}
.preloader__bar{ height:2px; background:var(--line-2); margin-top:24px; overflow:hidden; }
.preloader__bar span{ display:block; height:100%; width:0; background:var(--accent); transition:width .2s linear; }

/* ============ HEADER (barra flotante tipo píldora que colapsa al scroll) ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; justify-content:center; padding:16px var(--pad) 0;
}
.nav-pill{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:100%; max-width:1180px;
  padding:10px 12px 10px 22px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.32); backdrop-filter:blur(14px);
  border-radius:100px;
  transition:max-width .6s var(--ease), background .4s, padding .5s var(--ease), box-shadow .4s;
}
/* al hacer scroll la píldora se encoge y sólo deja marca + botón Menú */
.site-header.is-collapsed .nav-pill{
  max-width:340px; background:rgba(0,0,0,.55); box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo{ height:clamp(36px,4vw,46px); width:auto; display:block; }
.brand__dot{
  width:10px; height:10px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 14px var(--accent); animation:navDot 1.6s ease-in-out infinite;
}
@keyframes navDot{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.55); opacity:.5; } }
.brand__name{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.02em; }

/* enlaces del centro: se pliegan al colapsar */
.main-nav{
  display:flex; gap:32px; overflow:hidden; max-width:640px;
  transition:opacity .35s var(--ease), max-width .55s var(--ease), margin .5s var(--ease);
}
.site-header.is-collapsed .main-nav{ opacity:0; max-width:0; margin-left:-20px; pointer-events:none; }

.nav-right{ display:flex; align-items:center; gap:12px; }

/* botón "Menú" oculto arriba, aparece al colapsar */
.nav-menu-btn{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:var(--font-label); font-size:15px; color:#000;
  background:var(--accent); border:0; border-radius:100px;
  max-width:0; padding:9px 0; opacity:0; overflow:hidden; pointer-events:none;
  transition:max-width .5s var(--ease), padding .5s var(--ease), opacity .35s var(--ease), transform .3s var(--ease);
}
.nav-menu-btn__dot{ width:7px; height:7px; border-radius:50%; background:#000; }
.site-header.is-collapsed .nav-menu-btn{ max-width:160px; padding:9px 18px; opacity:1; pointer-events:auto; }
.nav-menu-btn:hover{ transform:scale(1.05); }

.main-nav a{
  font-family:var(--font-label); font-size:15px; letter-spacing:.03em; color:var(--muted);
  position:relative; transition:color .3s;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--accent); transition:width .3s var(--ease);
}
.main-nav a:hover{ color:var(--fg); }
.main-nav a:hover::after{ width:100%; }
.header-cta{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--font-label); font-size:15px; padding:9px 18px; max-width:200px;
  border:1px solid var(--line); border-radius:100px; overflow:hidden;
  transition:max-width .5s var(--ease), padding .5s var(--ease), opacity .3s var(--ease), background .3s, border-color .3s, color .3s;
}
.header-cta:hover{ background:var(--accent); color:#000; border-color:var(--accent); }
.site-header.is-collapsed .header-cta{ opacity:0; max-width:0; padding:9px 0; border-color:transparent; margin-left:-12px; pointer-events:none; }
.header-cta__arrow{ transition:transform .3s var(--ease); }
.header-cta:hover .header-cta__arrow{ transform:translate(2px,-2px); }

.menu-toggle{
  display:none; flex-direction:column; gap:6px; background:none; border:0; padding:6px;
}
.menu-toggle span{ width:26px; height:2px; background:var(--fg); transition:.3s var(--ease); }
body.menu-open .menu-toggle span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:800; background:#000;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:var(--pad); transform:translateY(-100%); transition:transform .6s var(--ease);
}
body.menu-open .mobile-menu{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-display); font-weight:600; font-size:clamp(34px,9vw,64px); letter-spacing:-.02em; }
.mobile-menu a:active{ color:var(--accent); }
.mobile-menu__foot{ display:flex; gap:24px; margin-top:40px; font-family:var(--font-label); color:var(--muted); }

/* ============ SHARED ============ */
.eyebrow, .section-eyebrow, .cta__eyebrow{
  font-family:var(--font-label); font-size:14px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
}
.section-title{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(38px,7vw,90px); line-height:.98; letter-spacing:-.02em; margin-top:12px;
}
.section-lead{ max-width:640px; margin-top:22px; color:var(--muted); font-size:clamp(16px,2vw,20px); }

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

/* line mask for big titles */
.line{ display:block; overflow:hidden; }
.line__inner{ display:block; transform:translateY(110%); transition:transform 1s var(--ease); }
.is-in .line__inner, .hero.is-in .line__inner{ transform:none; }

/* ============ HERO ============ */
.hero{
  position:relative; z-index:1; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px var(--pad) 60px;
}
.hero__inner{ max-width:var(--maxw); margin:0 auto; width:100%; position:relative; }
/* glow detrás del título */
.hero__inner::before{
  content:""; position:absolute; left:-6%; top:24%; width:60%; height:60%;
  background:radial-gradient(closest-side, rgba(140,255,46,.16), transparent 72%);
  filter:blur(20px); pointer-events:none; z-index:-1;
}
.hero__title{
  --sy:0px; --ss:1; --so:1; --mx:0px; --my:0px;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(44px, 12vw, 170px); line-height:.9; letter-spacing:-.02em; margin:18px 0 34px;
  transform:translate(var(--mx), calc(var(--sy) + var(--my))) scale(var(--ss));
  opacity:var(--so); transform-origin:left center; will-change:transform, opacity;
}
/* máquina de escribir */
.hero-type{ display:inline; }
.hero-caret{
  display:inline-block; width:.06em; min-width:3px; height:.82em;
  margin-left:.06em; background:var(--accent); vertical-align:-0.06em;
  animation:caretBlink 1s steps(1) infinite; box-shadow:0 0 16px var(--accent);
}
.hero__title.typed .hero-caret{ animation-duration:1.15s; opacity:.7; }
@keyframes caretBlink{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }

/* rastro de imágenes que sigue al cursor */
.trail-img{
  position:fixed; z-index:6; width:clamp(190px,20vw,300px); aspect-ratio:16/10;
  object-fit:cover; object-position:top; border-radius:12px; pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.55); opacity:0;
  transition:transform .55s var(--ease), opacity .55s var(--ease);
  will-change:transform, opacity; box-shadow:0 24px 70px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.08);
}
.trail-img.is-in{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1); }
.trail-img.is-out{ opacity:0; transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1.08); }
.hero__sub{
  max-width:620px; font-size:clamp(18px,2.4vw,26px); line-height:1.45; color:rgba(255,255,255,.82);
}
.hero__scroll{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-label); font-size:12px; letter-spacing:.25em; color:var(--muted);
}
.hero__scroll-line{ width:1px; height:46px; background:linear-gradient(var(--accent), transparent); animation:scrollLine 2s var(--ease) infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ============ MARQUEE ============ */
.marquee-wrap{ position:relative; z-index:1; border-top:1px solid #000; border-bottom:1px solid #000; padding:26px 0; background:#fff; }
.marquee{ overflow:hidden; white-space:nowrap; }
.marquee--rev{ margin-top:14px; }
.marquee__track{ display:inline-flex; align-items:center; gap:28px; animation:marquee 32s linear infinite; }
.marquee--rev .marquee__track{ animation-direction:reverse; animation-duration:38s; }
.marquee__track span{ font-family:var(--font-display); font-weight:600; font-size:clamp(26px,4vw,52px); letter-spacing:-.01em; color:#000; }
.marquee__track .star{ color:var(--accent); font-size:.6em; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============ INTRO / AUDIENCE ============ */
/* sección a todo el ancho con el vídeo de fondo ocupándola por completo */
.intro{ position:relative; z-index:1; padding:clamp(90px,14vw,180px) var(--pad); overflow:hidden; }
/* vídeo de fondo (colores reales, sin oscurecer) */
.intro__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.intro__head, .intro__body{ position:relative; z-index:2; max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.intro__head{ margin-bottom:54px; text-shadow:0 2px 22px rgba(0,0,0,.5); }
/* dos columnas: tipos (izquierda, vertical) + hoja (derecha) */
.intro__body{ display:grid; grid-template-columns:minmax(190px,auto) 1fr; gap:clamp(28px,5vw,72px); align-items:start; }
.audience{ display:flex; flex-direction:column; align-items:stretch; gap:12px; position:sticky; top:120px; }
.audience__btn{ text-align:left; }
.audience__btn{
  font-family:var(--font-label); font-size:15px; letter-spacing:.02em;
  padding:10px 20px; border-radius:100px; border:1px solid rgba(255,255,255,.16);
  background:rgba(8,8,10,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:rgba(255,255,255,.9); text-shadow:0 1px 10px rgba(0,0,0,.45); transition:.3s var(--ease);
}
.audience__btn:hover{ color:var(--fg); border-color:rgba(255,255,255,.45); background:rgba(20,20,24,.85); }
.audience__btn.is-active{ background:var(--accent); color:#000; border-color:var(--accent); }
/* Intro dentro de una "hoja" (tarjeta tipo documento) con efecto
   linterna (spotlight): dos capas del mismo texto. La base va atenuada
   y la capa "glow" (brillante) se recorta a un círculo que sigue al
   cursor, iluminando las letras de debajo. */
.intro__sheet{
  position:relative; max-width:1000px;
  padding:clamp(26px,3.5vw,52px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(8,8,10,.82), rgba(8,8,10,.72));
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 40px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.intro__sheet-top{
  display:flex; align-items:center; gap:10px;
  margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line-2);
}
.intro__sheet-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.intro__sheet-name{ font-family:var(--font-label); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.intro__reveal-inner{ position:relative; }
/* la hoja entra deslizándose de derecha a izquierda al hacer scroll */
.intro__sheet.reveal{ opacity:0; transform:translateX(90px); }
.intro__sheet.reveal.is-in{ opacity:1; transform:none; }

.intro__text{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(24px,3.6vw,46px); line-height:1.25; letter-spacing:-.01em; margin:0;
  transition:opacity .35s var(--ease);
}
.intro__text.is-fading{ opacity:0; }
.intro__text--glow{ display:none; }

@media (hover:hover) and (pointer:fine){
  .intro__text--base{ color:rgba(255,255,255,.72); }
  .intro__text--glow{
    display:block; position:absolute; inset:0; pointer-events:none;
    color:#fff; opacity:0; transition:opacity .35s var(--ease);
    text-shadow:0 0 24px rgba(140,255,46,.45);
    -webkit-mask-image:radial-gradient(circle 150px at var(--mx,-300px) var(--my,-300px), #000 0%, #000 52%, transparent 100%);
    mask-image:radial-gradient(circle 150px at var(--mx,-300px) var(--my,-300px), #000 0%, #000 52%, transparent 100%);
  }
  .intro__sheet:hover .intro__text--glow{ opacity:1; }
}

/* ============ FEATURED / CARDS ============ */
.featured{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(80px,12vw,160px); }
.featured__head{ margin-bottom:56px; }
/* --- carrusel de proyectos --- */
.carousel{ position:relative; }
.carousel__stage{
  position:relative; border-radius:24px; overflow:hidden;
  aspect-ratio:16/9; background:#0d0d10;
}
.cslide{
  position:absolute; inset:0; display:grid; place-items:center;
  background:var(--bg); padding:clamp(14px,2.5vw,34px);
  opacity:0; visibility:hidden; transform:translateX(45px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.cslide.is-active{ opacity:1; visibility:visible; transform:none; }

/* vídeo a sangre completa (llena toda la tarjeta, sin borde de color) */
.cslide__cover{ position:absolute; inset:0; overflow:hidden; }
.cslide__coverv{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06); transition:transform .8s var(--ease);
}
.cslide.is-active .cslide__coverv{ transform:scale(1); }

/* mockup de navegador */
.browser{
  width:min(94%, 1120px); border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 40px 90px rgba(0,0,0,.4); transform:scale(.9);
  transition:transform .8s var(--ease);
}
.cslide.is-active .browser{ transform:scale(1); }
.browser__bar{ height:40px; background:#e7e7ea; display:flex; align-items:center; gap:12px; padding:0 14px; }
.browser__dots{ display:flex; gap:6px; }
.browser__dots i{ width:11px; height:11px; border-radius:50%; }
.browser__dots i:nth-child(1){ background:#ff5f57; }
.browser__dots i:nth-child(2){ background:#febc2e; }
.browser__dots i:nth-child(3){ background:#28c840; }
.browser__url{ flex:1; text-align:center; max-width:62%; margin:0 auto; font-family:var(--font-label); font-size:12px; color:#83838a; background:#fff; border-radius:6px; padding:5px 12px; }
.browser__screen{ padding:clamp(22px,3.4vw,46px); background:#fff; color:#15151a; }
/* navegador de vídeo (Chambo): el vídeo se muestra COMPLETO (sin recorte) y
   la pantalla adopta su altura natural, adaptando el mockup a la forma del vídeo. */
.browser--video{ width:min(90%, 1060px); }
.browser__screen--video{ padding:0; background:#000; line-height:0; }
.browser__video{ width:100%; height:auto; display:block; }
/* mockup de móvil (para vídeos verticales) */
.phone{
  height:min(90%, 560px); aspect-ratio:720/1499;
  border-radius:34px; overflow:hidden; background:#000;
  border:7px solid #16161c;
  box-shadow:0 40px 90px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
  transform:scale(.9); transition:transform .8s var(--ease);
}
.cslide.is-active .phone{ transform:scale(1); }
.phone__video{ width:100%; height:100%; object-fit:cover; display:block; }
.mini__eyebrow{ font-family:var(--font-label); font-size:clamp(11px,1.2vw,14px); letter-spacing:.14em; text-transform:uppercase; color:var(--ac); }
.mini__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,3vw,42px); line-height:1.02; letter-spacing:-.02em; margin:12px 0 18px; color:#141418; max-width:16ch; }
.mini__btns{ display:flex; flex-wrap:wrap; gap:10px; }
.mini__btn{ font-family:var(--font-label); font-size:clamp(12px,1.3vw,15px); padding:9px 18px; border-radius:100px; border:1px solid #d8d8dd; color:#141418; }
.mini__btn--fill{ background:var(--ac); color:#fff; border-color:var(--ac); }
.mini__cards{ display:flex; gap:10px; margin-top:22px; }
.mini__cards span{ flex:1; height:clamp(44px,7vw,74px); border-radius:10px; background:#f0f0f4; }

/* etiqueta superpuesta abajo-izquierda */
.cslide__label{
  position:absolute; left:0; bottom:0; z-index:3; max-width:min(560px, 84%);
  padding:clamp(24px,3vw,46px);
  background:linear-gradient(to top right, rgba(0,0,0,.66), rgba(0,0,0,.3) 55%, transparent);
  color:#fff;
}
.cslide__count{ font-family:var(--font-label); font-size:13px; letter-spacing:.1em; color:rgba(255,255,255,.75); }
.cslide__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(24px,3vw,40px); letter-spacing:-.01em; margin:8px 0 8px; }
.cslide__desc{ color:rgba(255,255,255,.82); font-size:clamp(14px,1.5vw,17px); max-width:460px; }
.cslide__link{ display:inline-block; margin-top:14px; font-family:var(--font-label); font-size:15px; color:var(--accent); }
.cslide__link:hover{ text-decoration:underline; }
.cslide__tag{ display:inline-block; margin-top:14px; font-family:var(--font-label); font-size:13px; letter-spacing:.05em; padding:5px 12px; border:1px solid rgba(255,255,255,.35); border-radius:100px; color:rgba(255,255,255,.85); }

/* flechas anterior / siguiente */
.carousel__arrow{
  position:absolute; top:50%; z-index:5;
  width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.4); backdrop-filter:blur(8px); color:#fff;
  font-size:26px; line-height:1; display:grid; place-items:center;
  transform:translateY(-50%);
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.carousel__arrow:hover{ background:var(--accent); color:#000; border-color:var(--accent); transform:translateY(-50%) scale(1.08); }
.carousel__arrow--prev{ left:clamp(10px,2vw,26px); }
.carousel__arrow--next{ right:clamp(10px,2vw,26px); }

/* miniaturas seleccionables */
.carousel__thumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:30px; }
.cthumb{ font-family:var(--font-label); font-size:clamp(15px,1.7vw,20px); color:var(--muted); background:none; border:0; padding:6px 2px; position:relative; transition:color .3s; }
.cthumb:hover{ color:var(--fg); }
.cthumb.is-active{ color:var(--fg); }
.cthumb.is-active::after{ content:""; position:absolute; left:2px; right:2px; bottom:0; height:2px; background:var(--accent); }
.cthumb-sep{ color:var(--muted-2); }

@media (max-width:700px){
  .carousel__stage{ aspect-ratio:3/4; }
  .browser{ width:90%; }
  .cslide__label{ max-width:100%; }
  .carousel__arrow{ width:46px; height:46px; font-size:22px; }
  /* en móvil los mockups suben un poco (más margen abajo desplaza el contenido centrado hacia arriba) */
  .cslide{ padding-bottom:24%; }
  /* el vídeo panorámico (Chambo) en móvil: a todo el ancho para que se vea grande */
  .cslide--video{ padding:8px 8px 24%; }
  .browser--video{ width:100%; }
}

/* ============ WEB DESIGN (lista con hover-reveal de imagen) ============ */
.webdesign{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:clamp(60px,9vw,120px) var(--pad); }
.webdesign__head{ display:flex; flex-direction:column; gap:20px; margin-bottom:44px; }
.webdesign__top{ display:flex; align-items:baseline; gap:16px; }
.webdesign__idx{ font-family:var(--font-label); color:var(--muted-2); font-size:15px; }
.webdesign .section-lead{ max-width:560px; }

.wdlist{ list-style:none; border-top:1px solid var(--line-2); }
.wdrow{ border-bottom:1px solid var(--line-2); }
.wdrow a{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:clamp(16px,2.4vw,32px) 0; color:#3d3d3d;
  transition:color .4s var(--ease), padding .4s var(--ease);
}
.wdrow__name{ font-family:var(--font-display); font-weight:400; font-size:clamp(24px,4.8vw,60px); letter-spacing:-.02em; line-height:1; }
.wdrow__right{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.wdrow__meta{ font-family:var(--font-label); font-size:clamp(12px,1.3vw,15px); letter-spacing:.06em; color:var(--muted-2); white-space:nowrap; transition:color .4s var(--ease); }
.wdrow__arrow{
  font-size:clamp(20px,2.4vw,32px); line-height:1; color:#3d3d3d;
  transition:color .4s var(--ease), transform .4s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .wdrow a:hover{ color:#fff; padding-left:clamp(10px,1.5vw,26px); }
  .wdrow a:hover .wdrow__meta{ color:var(--accent); }
  .wdrow a:hover .wdrow__arrow{ color:var(--accent); transform:translate(5px,-5px); }
}
@media (hover:none){ .wdrow__arrow{ color:var(--muted); } }
@media (hover:none){
  .wdrow a{ color:#fff; }
  .wdrow__meta{ color:var(--muted); }
}

.wdpreview{
  position:fixed; top:0; left:0; z-index:6; width:clamp(220px,24vw,340px); aspect-ratio:4/3;
  border-radius:14px; overflow:hidden; pointer-events:none; opacity:0;
  box-shadow:0 30px 80px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.1);
  transition:opacity .3s var(--ease); will-change:transform, opacity;
}
.wdpreview.is-visible{ opacity:1; }
.wdpreview.is-wide{ aspect-ratio:1500/684; width:clamp(240px,30vw,420px); }
.wdpreview.is-wide img{ object-fit:contain; }
.wdpreview img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (hover:none){ .wdpreview{ display:none; } }

/* ============ SCROLL HORIZONTAL FIJADO (PIN) ============ */
/* Por defecto (móvil / sin JS): scroll horizontal normal. */
.pin__head{ max-width:var(--maxw); margin:0 auto 40px; padding:0 var(--pad); }
.pin__viewport{ overflow-x:auto; scrollbar-width:none; }
.pin__viewport::-webkit-scrollbar{ display:none; }
.pin__track{ display:flex; gap:22px; padding:0 var(--pad); width:max-content; }
.playground .playground__hint{ margin-top:22px; }

/* Cuando el JS activa el pin (escritorio): la sección se hace alta,
   el contenido se queda fijo (sticky) y las tarjetas se desplazan a la
   izquierda según el scroll. Al terminar, la página sigue bajando normal. */
.pin.pin-ready{ position:relative; }
.pin.pin-ready .pin__sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.pin.pin-ready .pin__head{ margin-bottom:34px; }
.pin.pin-ready .pin__viewport{ overflow:visible; }
.pin.pin-ready .pin__track{ will-change:transform; }

/* ============ HORIZONTAL SCROLL ============ */
.playground, .why{ position:relative; z-index:1; padding:clamp(70px,10vw,140px) 0; }
.playground__head, .why__head{ max-width:var(--maxw); margin:0 auto 48px; padding:0 var(--pad); }
.playground__hint{ display:inline-block; margin-top:22px; font-family:var(--font-label); font-size:14px; letter-spacing:.1em; color:var(--accent); }
.hscroll{ overflow-x:auto; scrollbar-width:none; padding:0 var(--pad); }
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll__track{ display:flex; gap:22px; width:max-content; }
.tile{
  flex:0 0 clamp(280px,34vw,420px); border:1px solid var(--line-2); border-radius:20px;
  padding:clamp(28px,3vw,44px); min-height:300px; background:linear-gradient(160deg, var(--card-2), var(--bg));
  display:flex; flex-direction:column; transition:border-color .4s, transform .4s var(--ease);
}
.tile:hover{ border-color:var(--accent); transform:translateY(-6px); }
.tile__num{ font-family:var(--font-display); font-weight:300; font-size:52px; color:var(--accent); line-height:1; }
.tile h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.4vw,30px); margin:auto 0 12px; letter-spacing:-.01em; }
.tile p{ color:var(--muted); }

.reason{
  flex:0 0 clamp(300px,40vw,460px); border-left:1px solid var(--line);
  padding:8px clamp(24px,3vw,44px) 8px clamp(24px,3vw,40px); min-height:220px;
  display:flex; flex-direction:column; justify-content:center;
}
.reason h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3vw,42px); letter-spacing:-.01em; }
.reason p{ margin-top:16px; color:var(--muted); font-size:clamp(16px,1.6vw,19px); max-width:400px; }

/* ============ PRICING ============ */
.pricing{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vw,140px) var(--pad); }
.pricing__head{ margin-bottom:60px; }
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.plan{
  position:relative; border:1px solid var(--line-2); border-radius:20px; padding:32px 28px 34px;
  background:var(--card); display:flex; flex-direction:column; transition:.4s var(--ease); min-height:340px;
}
.plan:hover{ border-color:var(--line); transform:translateY(-6px); }
.plan--feat{ border-color:var(--accent); background:linear-gradient(180deg, rgba(140,255,46,.06), transparent 60%); }
.plan__idx{ font-family:var(--font-label); font-size:13px; color:var(--muted-2); }
.plan__badge{ position:absolute; top:20px; right:20px; font-family:var(--font-label); font-size:12px; letter-spacing:.05em; background:var(--accent); color:#000; padding:5px 11px; border-radius:100px; }
.plan__name{ font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.2vw,28px); margin-top:18px; }
.plan__price{ font-family:var(--font-display); font-weight:300; font-size:clamp(44px,6vw,68px); line-height:1; margin:14px 0 18px; color:var(--accent); }
.plan__price span{ font-size:20px; color:var(--muted); }
.plan__price .plan__num{ font-size:inherit; color:inherit; font-weight:inherit; letter-spacing:inherit; }
.plan__desc{ color:var(--muted); font-size:15px; }
.plan__feat{ list-style:none; margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:9px; }
.plan__feat li{ position:relative; padding-left:20px; font-size:14px; color:rgba(255,255,255,.75); font-family:var(--font-label); letter-spacing:.01em; }
.plan__feat li::before{ content:"→"; position:absolute; left:0; color:var(--accent); }

.extras{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:34px; padding-top:28px; border-top:1px solid var(--line-2); }
.extras__label{ font-family:var(--font-label); color:var(--muted-2); letter-spacing:.05em; }
.extras__item{ font-family:var(--font-label); color:var(--muted); font-size:16px; }
.extras__item b{ color:var(--fg); }

/* ============ FAQ (acordeón, optimizado SEO) ============ */
.faq{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vw,140px) var(--pad); }
.faq__head{ margin-bottom:50px; }
.faq__list{ border-top:1px solid var(--line-2); }
.faq__item{ border-bottom:1px solid var(--line-2); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:none; border:0; text-align:left; cursor:pointer;
  padding:clamp(20px,2.6vw,32px) 0; color:var(--fg);
  font-family:var(--font-display); font-weight:400; font-size:clamp(19px,2.4vw,30px);
  letter-spacing:-.01em; transition:color .3s;
}
.faq__q:hover{ color:var(--accent); }
.faq__icon{ position:relative; flex:0 0 22px; width:22px; height:22px; }
.faq__icon::before, .faq__icon::after{
  content:""; position:absolute; top:50%; left:50%; width:15px; height:2px;
  background:var(--accent); transform:translate(-50%,-50%); transition:transform .35s var(--ease);
}
.faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item.is-open .faq__icon::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq__a{ overflow:hidden; max-height:0; transition:max-height .45s var(--ease); }
.faq__a p{
  color:var(--muted); font-size:clamp(15px,1.7vw,18px); line-height:1.6;
  max-width:820px; padding:0 40px 26px 0;
}
.faq__a strong{ color:var(--fg); font-weight:600; }
.faq__item.is-open .faq__q{ color:var(--accent); }
@media (prefers-reduced-motion:reduce){ .faq__a{ transition:none; } }

/* ============ CTA ============ */
.cta{ position:relative; z-index:1; padding:clamp(90px,14vw,190px) var(--pad); text-align:center; overflow:hidden; }
.cta__inner{ max-width:var(--maxw); margin:0 auto; }
.cta__title{ font-family:var(--font-display); font-weight:300; font-size:clamp(56px,15vw,220px); line-height:.86; letter-spacing:-.03em; margin:18px 0 30px; }
.cta__promise{ font-size:clamp(20px,2.6vw,30px); max-width:760px; margin:0 auto 44px; color:rgba(255,255,255,.85); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-label); font-size:17px; padding:16px 30px; border-radius:100px; transition:.3s var(--ease); }
.btn--accent{ background:var(--accent); color:#000; }
.btn--accent:hover{ transform:translateY(-3px); box-shadow:0 12px 40px rgba(140,255,46,.3); }
.btn--ghost{ border:1px solid var(--line); color:var(--fg); }
.btn--ghost:hover{ border-color:var(--fg); background:rgba(255,255,255,.05); }

/* ============ FOOTER ============ */
.site-footer{ position:relative; z-index:1; border-top:1px solid var(--line-2); padding:clamp(60px,8vw,100px) var(--pad) 40px; background:#000; }
.footer__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.6fr; gap:40px; }
.footer__logo{ font-family:var(--font-display); font-weight:700; font-size:32px; letter-spacing:.02em; }
.footer__brand p{ margin-top:14px; color:var(--muted); max-width:280px; }
.footer__label{ font-family:var(--font-label); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); display:block; margin-bottom:18px; }
.footer__col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer__col a{ color:var(--muted); transition:color .3s; }
.footer__col a:hover{ color:var(--accent); }
.footer__email{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2vw,26px); color:var(--fg) !important; display:inline-block; }
.footer__email:hover{ color:var(--accent) !important; }
.footer__status{ display:flex; align-items:center; gap:8px; margin-top:18px; font-size:14px; color:var(--muted); }
.footer__status .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.footer__bottom{ max-width:var(--maxw); margin:60px auto 0; padding-top:26px; border-top:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--font-label); font-size:14px; color:var(--muted-2); }
.back-top{ transition:color .3s; }
.back-top:hover{ color:var(--accent); }

/* ============ BOTÓN FLOTANTE WHATSAPP ============ */
.wa-float{
  position:fixed; right:clamp(16px,3vw,34px); bottom:clamp(16px,3vw,34px); z-index:700;
  width:60px; height:60px; border-radius:50%; background:#25D366;
  display:grid; place-items:center; box-shadow:0 12px 30px rgba(37,211,102,.42);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float svg{ width:34px; height:34px; fill:#fff; position:relative; z-index:1; }
.wa-float:hover{ transform:scale(1.08); box-shadow:0 16px 42px rgba(37,211,102,.6); }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:waPulse 2.2s ease-out infinite; pointer-events:none;
}
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }
@media (max-width:560px){ .wa-float{ width:54px; height:54px; } .wa-float svg{ width:30px; height:30px; } }
@media (prefers-reduced-motion:reduce){ .wa-float::after{ animation:none; opacity:0; } }

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .main-nav, .header-cta, .nav-menu-btn{ display:none; }
  .menu-toggle{ display:flex; }
  .site-header.is-collapsed .nav-pill{ max-width:100%; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand, .footer__say{ grid-column:1 / -1; }
  .intro__body{ grid-template-columns:1fr; }
  .audience{ flex-direction:row; flex-wrap:wrap; position:static; }
  .audience__btn{ text-align:center; }
}
@media (max-width:560px){
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .hero__scroll{ display:none; }
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .line__inner{ transform:none; }
  .hero-caret{ animation:none !important; opacity:.7; }
  .trail-img{ display:none !important; }
  .hero__title{ opacity:1 !important; transform:none !important; }
}

/* ============ COOKIES ============ */
.footer__bottom-right{ display:flex; align-items:center; gap:18px; }
.cookie-reopen{ background:none; border:0; padding:0; font-family:var(--font-label); font-size:14px; color:var(--muted-2); transition:color .3s; }
.cookie-reopen:hover{ color:var(--accent); }

/* banner inferior */
.cookie{
  position:fixed; left:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,26px); z-index:950;
  width:min(440px, calc(100vw - 28px));
  display:flex; flex-direction:column; gap:16px;
  padding:22px 22px 20px;
  background:rgba(10,10,12,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  opacity:0; transform:translateY(20px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.cookie.is-in{ opacity:1; transform:none; }
.cookie__text{ font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.82); }
.cookie__emoji{ margin-right:4px; }
.cookie__link{ background:none; border:0; padding:0; color:var(--accent); font:inherit; text-decoration:underline; cursor:pointer; }
.cookie__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.cookie__btn{
  flex:1; min-width:96px; font-family:var(--font-label); font-size:14px;
  padding:10px 14px; border-radius:100px; border:1px solid var(--line);
  background:transparent; color:var(--fg); transition:.3s var(--ease);
}
.cookie__btn:hover{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); }
.cookie__btn--accent{ background:var(--accent); color:#000; border-color:var(--accent); }
.cookie__btn--accent:hover{ background:var(--accent); filter:brightness(1.08); }

/* panel de configuración */
.cookie-modal{ position:fixed; inset:0; z-index:960; display:grid; place-items:center; padding:20px; }
.cookie-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s var(--ease); }
.cookie-modal.is-in .cookie-modal__backdrop{ opacity:1; }
.cookie-modal__card{
  position:relative; width:min(520px, 100%);
  background:#0c0c10; border:1px solid var(--line); border-radius:22px;
  padding:clamp(24px,4vw,38px); box-shadow:0 40px 100px rgba(0,0,0,.6);
  transform:translateY(24px) scale(.98); opacity:0; transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.cookie-modal.is-in .cookie-modal__card{ transform:none; opacity:1; }
.cookie-modal__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(22px,3vw,30px); letter-spacing:-.01em; }
.cookie-modal__desc{ margin-top:10px; color:var(--muted); font-size:15px; }
.cookie-opt{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 0; border-top:1px solid var(--line-2); margin-top:18px;
}
.cookie-opt:first-of-type{ margin-top:22px; }
.cookie-opt__info b{ font-family:var(--font-display); font-weight:600; font-size:16px; }
.cookie-opt__info small{ display:block; margin-top:3px; color:var(--muted-2); font-size:13px; max-width:340px; }
.cookie-opt input[type="checkbox"]{ width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.cookie-opt input[disabled]{ cursor:not-allowed; opacity:.6; }
.cookie-modal__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.cookie-modal__actions .cookie__btn{ flex:1; min-width:160px; padding:13px 18px; font-size:15px; }

@media (max-width:560px){
  .footer__bottom-right{ gap:14px; }
  .cookie{ left:14px; right:14px; width:auto; }
}

/* ============ NOMBRE DE MARCA (WebCreate) ============ */
.n-web{ color:var(--accent); }     /* "Web" en verde neón */
.n-create{ color:#fff; }           /* "Create" en blanco */

/* FIX: respetar el atributo hidden (si no, el panel invisible bloquea los clics) */
.cookie[hidden], .cookie-modal[hidden]{ display:none; }

/* ============ BOTÓN "Me interesa" en tarjetas de precio ============ */
.plan__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:22px; padding:13px 18px; border-radius:100px;
  font-family:var(--font-label); font-size:15px; letter-spacing:.02em;
  border:1px solid var(--line); color:var(--fg); text-align:center;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.plan__cta:hover{ background:var(--accent); color:#000; border-color:var(--accent); transform:translateY(-2px); }
.plan__cta span{ transition:transform .3s var(--ease); }
.plan__cta:hover span{ transform:translate(3px,-3px); }
/* el plan "Más popular" ya lleva el botón en verde */
.plan--feat .plan__cta{ background:var(--accent); color:#000; border-color:var(--accent); }
.plan--feat .plan__cta:hover{ filter:brightness(1.08); }