/* BEAI · site.css — sistema de diseño compartido (home + landings). Fuentes en ../ */

/* ═══════════════════════════════════════════════════════════
   BEAI · WEB · Modelo de Negocio 2.0
   Identidad BEAI sobre fondo negro · tipografía protagonista
   ═══════════════════════════════════════════════════════════ */

/* ─── FUENTES ─── */
@font-face { font-family:'PP Neue Montreal'; src:url('../PPNeueMontreal-Book.woff2') format('woff2'), url('../PPNeueMontreal-Book.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../PPNeueMontreal-Italic.woff2') format('woff2'), url('../PPNeueMontreal-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../PPNeueMontreal-Medium.woff2') format('woff2'), url('../PPNeueMontreal-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../PPNeueMontreal-Bold.woff2') format('woff2'), url('../PPNeueMontreal-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

/* ─── VARIABLES ─── */
:root{
  --negro:#000000;
  --negro-2:#0a0a0a;
  --blanco:#FFFFFF;
  --amarillo:#F0FA00;
  --gris:#b3b3b3;
  --gris-2:#1c1c1c;
  --linea:rgba(255,255,255,0.12);
  --font:'PP Neue Montreal','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

/* ─── RESET ─── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--negro); color:var(--blanco); font-family:var(--font);
  font-weight:400; line-height:1.5; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--amarillo); color:var(--negro);}

/* scrollbar */
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--negro);}
::-webkit-scrollbar-thumb{background:var(--gris-2); border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--amarillo);}

/* Cursor personalizado desactivado — se usa el del sistema */
.cursor-dot,.cursor-ring{display:none;}

/* ─── BARRA DE PROGRESO ─── */
.progress{position:fixed; top:0; left:0; height:3px; width:0%; background:var(--amarillo); z-index:1000;}

/* ─── NAV ─── */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px clamp(20px,5vw,60px); transition:padding .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
#nav.scrolled{padding:14px clamp(20px,5vw,60px); background:rgba(0,0,0,0.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--linea);}
#nav .logo img{height:20px; width:auto; display:block; filter:brightness(0) invert(1);}
#nav .menu{display:flex; gap:32px; align-items:center;}
#nav .menu a{font-size:13px; letter-spacing:0.04em; color:var(--blanco); transition:color .3s;}
#nav .menu a:hover{color:var(--amarillo);}
#nav .nav-cta{
  font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:500; white-space:nowrap;
  color:var(--negro); background:var(--amarillo); padding:11px 20px; border-radius:100px;
  transition:transform .3s var(--ease),box-shadow .3s;
}
#nav .nav-cta:hover{transform:translateY(-2px); box-shadow:0 8px 30px rgba(240,250,0,0.35);}
#nav .logo{flex-shrink:0;}
#nav .nav-right{display:flex; align-items:center; gap:14px; flex-shrink:0;}
#nav .nav-social{display:flex; align-items:center; gap:6px;}
.nav-soc{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid var(--linea); border-radius:100px; color:var(--blanco);
  transition:transform .3s var(--ease),border-color .3s,color .3s;
}
.nav-soc svg{width:18px; height:18px;}
.nav-soc:hover{border-color:var(--amarillo); color:var(--amarillo); transform:translateY(-2px);}
/* ─── HAMBURGUESA + MENÚ MÓVIL ─── */
.burger{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:42px; height:42px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.burger span{display:block; width:22px; height:2px; background:var(--blanco); border-radius:2px; transition:transform .3s var(--ease),opacity .25s var(--ease);}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

#mobile-menu{
  display:none; position:fixed; top:0; left:0; right:0; z-index:899;
  flex-direction:column; gap:2px;
  padding:92px clamp(20px,5vw,60px) 36px;
  background:rgba(0,0,0,0.97); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--linea);
  transform:translateY(-100%); transition:transform .42s var(--ease);
}
#mobile-menu.is-open{transform:translateY(0);}
#mobile-menu a{font-size:21px; font-weight:500; color:var(--blanco); padding:15px 2px; border-bottom:1px solid var(--linea);}
#mobile-menu a:hover{color:var(--amarillo);}
#mobile-menu .mm-cta{color:var(--amarillo); border-bottom:none;}
#mobile-menu .mm-social{display:flex; gap:10px; margin-top:22px; border:none;}
#mobile-menu .mm-social a{padding:0; border:none;}

@media(max-width:860px){
  #nav .menu{display:none;}
  .burger{display:flex;}
  #mobile-menu{display:flex;}
}
@media(max-width:540px){
  #nav{padding:14px 16px;}
  #nav.scrolled{padding:12px 16px;}
  #nav .logo img{height:18px;}
  #nav .nav-cta{padding:9px 13px; font-size:10.5px; letter-spacing:0.04em;}
  #nav .nav-right{gap:8px;}
  #nav .nav-social{display:none;}
}

/* ─── SECCIONES ─── */
section{position:relative; padding:clamp(90px,12vh,150px) clamp(20px,5vw,60px);}
.wrap{max-width:1280px; margin:0 auto; width:100%;}
.eyebrow{
  display:inline-flex; align-items:center; font-size:12px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--amarillo); font-weight:500; margin-bottom:28px;
}

/* ─── HERO ─── */
.hero{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:140px; overflow:hidden;}
.hero .glow{position:absolute; width:60vw; height:60vw; max-width:780px; max-height:780px; right:-12vw; top:-8vw;
  background:radial-gradient(circle,rgba(240,250,0,0.16) 0%,rgba(240,250,0,0) 62%); pointer-events:none;
  animation:heroGlow 26s ease-in-out infinite; will-change:transform;}
@keyframes heroGlow{
  0%   {transform:translate(0,0) scale(1);}
  25%  {transform:translate(-20vw,16vh) scale(1.12);}
  50%  {transform:translate(-6vw,30vh) scale(1.05);}
  75%  {transform:translate(-24vw,8vh) scale(1.1);}
  100% {transform:translate(0,0) scale(1);}
}
/* Aurora background del hero (capas suaves en amarillo BEAI) */
.hero .aurora-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.hero .aurora-bg::before{
  content:''; position:absolute; inset:-30%;
  background:repeating-linear-gradient(115deg,
    rgba(240,250,0,0.32) 0%,
    rgba(240,250,0,0.10) 4%,
    transparent 8%,
    transparent 13%,
    rgba(240,250,0,0.22) 17%,
    rgba(240,250,0,0.05) 22%,
    transparent 26%,
    rgba(240,250,0,0.18) 30%);
  background-size:280% 100%;
  filter:blur(70px);
  mix-blend-mode:screen;
  animation:auroraDrift 24s linear infinite;
}
.hero .aurora-bg::after{
  content:''; position:absolute; inset:-20%;
  background:conic-gradient(from 0deg at 55% 70%,
    rgba(240,250,0,0) 0deg,
    rgba(240,250,0,0.22) 50deg,
    rgba(240,250,0,0) 110deg,
    rgba(240,250,0,0.15) 190deg,
    rgba(240,250,0,0) 250deg,
    rgba(240,250,0,0.18) 310deg,
    rgba(240,250,0,0) 360deg);
  filter:blur(55px);
  mix-blend-mode:screen;
  animation:auroraSpin 40s linear infinite;
  will-change:transform;
}
.hero .aurora-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 50% 45%, transparent 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.9) 100%);
}
.hero > .wrap{position:relative; z-index:1;}
@keyframes auroraDrift{
  from {background-position:0% 50%;}
  to   {background-position:260% 50%;}
}
@keyframes auroraSpin{
  from {transform:rotate(0deg);}
  to   {transform:rotate(360deg);}
}
@media (prefers-reduced-motion:reduce){
  .hero .aurora-bg::before,.hero .aurora-bg::after{animation:none;}
}
.hero h1{
  font-weight:700; font-size:clamp(48px,10.5vw,168px); line-height:0.92; letter-spacing:-0.03em; margin-bottom:34px;
}
.hero h1 .it{font-weight:400;}
.hero h1 .yellow{color:var(--amarillo);}
.hero h1 .dot{color:var(--amarillo);}
.hero h1 .outline{color:transparent; -webkit-text-stroke:1.5px var(--blanco);}
.hero .sub{max-width:620px; font-size:clamp(15px,1.5vw,19px); color:var(--blanco); margin-bottom:44px; line-height:1.55;}
.hero .sub b{color:var(--blanco); font-weight:500;}
.hero-actions{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:12px; font-size:14px; letter-spacing:0.04em; font-weight:500;
  padding:16px 30px; border-radius:100px; transition:all .35s var(--ease); border:1px solid var(--amarillo);
}
.btn-primary{background:var(--amarillo); color:var(--negro);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 12px 40px rgba(240,250,0,0.35);}
.btn-ghost{background:transparent; color:var(--blanco); border-color:var(--linea);}
.btn-ghost:hover{border-color:var(--amarillo); color:var(--amarillo);}
.btn .arrow{transition:transform .35s var(--ease);}
.btn:hover .arrow{transform:translateX(5px);}

/* ─── PROBLEMA (statement grande) ─── */
.statement h2{font-weight:700; font-size:clamp(34px,6vw,92px); line-height:1.02; letter-spacing:-0.025em;}
.statement h2 .g{color:var(--gris);}
.statement h2 .y{color:var(--amarillo);}
.statement h2 .it{font-weight:400;}
.statement .lead{max-width:640px; margin-top:38px; font-size:clamp(15px,1.6vw,19px); color:var(--blanco); line-height:1.6;}
.statement .lead b{color:var(--blanco); font-weight:500;}

/* ─── SERVICIOS (lista) ─── */
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:18px;}
.sec-head h2{font-weight:700; font-size:clamp(32px,5.2vw,76px); line-height:1; letter-spacing:-0.025em;}
.sec-head h2 .dot{color:var(--amarillo);}
.sec-head p{max-width:360px; color:var(--blanco); font-size:15px;}

/* Sectores */
.sector-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px;}
.sector-card{display:flex; flex-direction:column; gap:12px; border:1px solid var(--linea); border-radius:20px; padding:32px 28px; background:var(--negro-2); color:var(--blanco); text-decoration:none; transition:border-color .3s var(--ease), transform .3s var(--ease);}
a.sector-card:hover{border-color:rgba(240,250,0,0.4); transform:translateY(-5px);}
.sector-card h3{font-size:clamp(20px,2.4vw,27px); font-weight:500; letter-spacing:-0.02em;}
.sector-card p{font-size:14px; color:var(--blanco); line-height:1.55;}
.sector-eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--amarillo);}
.sector-arrow{margin-top:8px; font-size:14px; font-weight:500; color:var(--amarillo);}
.sector-card--soon{opacity:0.5;}
.sector-card--soon .sector-eyebrow{color:var(--gris);}
@media(max-width:820px){.sector-grid{grid-template-columns:1fr;}}

/* Por qué BEAI — comparación No / Sí */
.why-compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px;}
.why-col{border:1px solid var(--linea); border-radius:20px; padding:32px 30px; background:var(--negro-2);}
.why-col__label{display:inline-block; font-size:12px; text-transform:uppercase; letter-spacing:0.12em; font-weight:500; margin-bottom:22px;}
.why-col--no .why-col__label{color:var(--gris);}
.why-col--yes{border-color:rgba(240,250,0,0.35);}
.why-col--yes .why-col__label{color:var(--amarillo);}
.why-col ul{list-style:none; display:flex; flex-direction:column; gap:16px;}
.why-col li{position:relative; padding-left:34px; font-size:clamp(15px,1.5vw,17px); line-height:1.45; color:var(--gris);}
.why-col--yes li{color:var(--blanco);}
.why-col li::before{position:absolute; left:0; top:1px; width:21px; height:21px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1;}
.why-col--no li::before{content:"\2715"; background:rgba(255,255,255,0.06); color:var(--gris);}
.why-col--yes li::before{content:"\2713"; background:var(--amarillo); color:var(--negro);}
@media(max-width:760px){.why-compare{grid-template-columns:1fr;}}

/* Por qué BEAI — lista numerada */
.why-list{display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,5vw,72px) 44px; margin-top:44px;}
.why-item{display:flex; gap:18px; align-items:flex-start;}
.why-num{font-size:clamp(28px,3vw,40px); font-weight:700; letter-spacing:-0.02em; color:var(--amarillo); line-height:1; flex-shrink:0; min-width:52px;}
.why-item p{font-size:clamp(15px,1.6vw,18px); line-height:1.55; color:var(--blanco); margin:0;}
.why-item p b{color:var(--blanco); font-weight:500;}
@media(max-width:700px){.why-list{grid-template-columns:1fr; gap:24px;}}
.svc-list{border-top:1px solid var(--linea);}
.svc{
  display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:30px;
  padding:34px 12px; border-bottom:1px solid var(--linea); position:relative; overflow:hidden;
  transition:padding .45s var(--ease);
}
.svc::before{content:''; position:absolute; inset:0; background:var(--amarillo); transform:translateY(101%); transition:transform .5s var(--ease); z-index:0;}
.svc:hover::before{transform:translateY(0);}
.svc>*{position:relative; z-index:1; transition:color .4s var(--ease);}
.svc:hover{padding-left:30px;}
.svc .num{font-size:14px; color:var(--amarillo); font-weight:500;}
.svc .ttl{font-size:clamp(24px,3.4vw,46px); font-weight:700; letter-spacing:-0.02em;}
.svc .ttl em{font-style:normal; font-weight:400; color:var(--gris);}
.svc .desc{font-size:14.5px; color:var(--blanco); max-width:340px; justify-self:end; text-align:right;}
.svc:hover .num,.svc:hover .ttl,.svc:hover .ttl em,.svc:hover .desc{color:var(--negro);}
@media(max-width:820px){
  .svc{grid-template-columns:48px 1fr; gap:14px;}
  .svc .desc{display:none;}
}

/* ─── PROCESO (timeline horizontal con línea) ─── */
.timeline{position:relative; margin-top:70px; display:grid; grid-template-columns:repeat(5,1fr); gap:24px;}
.timeline-line{position:absolute; top:32px; left:8%; width:84%; height:1px; background:var(--linea); z-index:0;}
.timeline-line::after{
  content:''; position:absolute; left:0; top:-1px; height:3px; width:0;
  background:var(--amarillo); box-shadow:0 0 16px rgba(240,250,0,0.45);
  transition:width 2s var(--ease) .2s;
}
.timeline.in .timeline-line::after{width:100%;}
.timeline-step{position:relative; z-index:1; padding:60px 6px 0; opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.timeline.in .timeline-step{opacity:1; transform:none;}
.timeline.in .timeline-step:nth-child(3){transition-delay:100ms;}
.timeline.in .timeline-step:nth-child(4){transition-delay:400ms;}
.timeline.in .timeline-step:nth-child(5){transition-delay:700ms;}
.timeline.in .timeline-step:nth-child(6){transition-delay:1000ms;}
.timeline.in .timeline-step:nth-child(7){transition-delay:1300ms;}
.tnode{position:absolute; top:32px; left:50%; transform:translate(-50%,-50%) scale(.5);
  width:16px; height:16px; border-radius:50%; background:var(--negro); border:1.5px solid var(--linea);
  transition:transform .5s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  z-index:2;
}
.timeline.in .timeline-step .tnode{
  transform:translate(-50%,-50%) scale(1); background:var(--amarillo); border-color:var(--amarillo);
  box-shadow:0 0 0 5px rgba(240,250,0,0.12);
}
.timeline.in .timeline-step:nth-child(3) .tnode{transition-delay:250ms;}
.timeline.in .timeline-step:nth-child(4) .tnode{transition-delay:550ms;}
.timeline.in .timeline-step:nth-child(5) .tnode{transition-delay:850ms;}
.timeline.in .timeline-step:nth-child(6) .tnode{transition-delay:1150ms;}
.timeline.in .timeline-step:nth-child(7) .tnode{transition-delay:1450ms;}
.tnum{font-size:12px; color:var(--amarillo); font-weight:500; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:10px;}
.tttl{font-size:20px; font-weight:700; letter-spacing:-0.01em; margin-bottom:8px;}
.tdesc{font-size:13.5px; color:var(--blanco); line-height:1.55;}
@media(max-width:980px){
  .timeline{grid-template-columns:1fr; gap:0;}
  .timeline-line{left:24px; right:auto; top:0; width:1px; height:100%;}
  .timeline-line::after{left:-1px; top:0; height:0; width:3px; transition:height 2s var(--ease) .2s;}
  .timeline.in .timeline-line::after{height:100%; width:3px;}
  .timeline-step{padding:0 0 36px 56px;}
  .tnode{top:6px; left:24px; transform:translate(-50%,0) scale(.5);}
  .timeline.in .timeline-step .tnode{transform:translate(-50%,0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .timeline-step,.tnode,.timeline-line::after{transition:none !important; opacity:1 !important; transform:none !important; width:100% !important;}
  .timeline-step .tnode{transform:translate(-50%,-50%) scale(1) !important;}
}

/* ─── POR QUÉ BEAI (comparativa) ─── */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linea); border:1px solid var(--linea); margin-top:50px;}
.compare .col{background:var(--negro); padding:38px clamp(22px,3vw,40px);}
.compare .col.beai{background:var(--negro-2);}
.compare .col h3{font-size:13px; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:26px; font-weight:500;}
.compare .col.others h3{color:var(--gris);}
.compare .col.beai h3{color:var(--amarillo);}
.compare .row{padding:16px 0; border-top:1px solid var(--linea); font-size:15.5px; display:flex; gap:12px; align-items:flex-start;}
.compare .others .row{color:var(--gris);}
.compare .others .row::before{content:'—'; color:var(--gris);}
.compare .beai .row::before{content:'→'; color:var(--amarillo); font-weight:700;}
@media(max-width:760px){.compare{grid-template-columns:1fr;}}

/* ─── POR QUÉ BEAI (solo BEAI) ─── */
.whygrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); margin-top:50px;}
.whyrow{
  background:var(--negro); padding:32px clamp(20px,2.4vw,32px) 32px 66px;
  font-size:15.5px; line-height:1.55; position:relative; overflow:hidden;
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), background .4s var(--ease);
}
.whygrid.in .whyrow{opacity:1; transform:none;}
.whygrid.in .whyrow:nth-child(1){transition-delay:0ms;}
.whygrid.in .whyrow:nth-child(2),.whygrid.in .whyrow:nth-child(4){transition-delay:90ms;}
.whygrid.in .whyrow:nth-child(3),.whygrid.in .whyrow:nth-child(5){transition-delay:180ms;}
.whygrid.in .whyrow:nth-child(6){transition-delay:270ms;}
.why-arrow{
  position:absolute; left:clamp(20px,2.4vw,32px); top:36px;
  width:30px; height:14px; stroke:var(--amarillo); stroke-width:1.8;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:48; stroke-dashoffset:48;
  transition:stroke-dashoffset .9s var(--ease), transform .35s var(--ease);
}
.whygrid.in .whyrow:nth-child(1) .why-arrow{transition-delay:300ms,0s;}
.whygrid.in .whyrow:nth-child(2) .why-arrow,.whygrid.in .whyrow:nth-child(4) .why-arrow{transition-delay:390ms,0s;}
.whygrid.in .whyrow:nth-child(3) .why-arrow,.whygrid.in .whyrow:nth-child(5) .why-arrow{transition-delay:480ms,0s;}
.whygrid.in .whyrow:nth-child(6) .why-arrow{transition-delay:570ms,0s;}
.whygrid.in .whyrow .why-arrow{stroke-dashoffset:0;}
.whyrow::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 -2px 60px rgba(240,250,0,0);
  transition:box-shadow .4s var(--ease);
}
.whyrow:hover{background:var(--negro-2);}
.whyrow:hover::after{box-shadow:inset 0 -2px 60px rgba(240,250,0,0.18);}
.whyrow:hover .why-arrow{transform:translateX(4px);}
@media(max-width:1000px){.whygrid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.whygrid{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){
  .whyrow,.why-arrow{transition:none !important; opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important;}
}

/* ─── BOTONES SOCIALES ─── */
.social-btns{display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:48px;}
.sbtn{display:inline-flex; align-items:center; gap:10px; font-size:14px; letter-spacing:0.04em; font-weight:500; padding:14px 26px; border-radius:100px; border:1px solid var(--linea); color:var(--blanco); transition:transform .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);}
.sbtn svg{width:18px; height:18px; fill:currentColor;}
.sbtn:hover{border-color:var(--amarillo); color:var(--amarillo); transform:translateY(-3px);}


/* ─── MODALIDADES ─── */
.mods{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:50px;}
.mod{border:1px solid var(--linea); padding:clamp(28px,3vw,46px); border-radius:6px; transition:border-color .4s var(--ease),transform .4s var(--ease); position:relative; overflow:hidden;}
.mod:hover{border-color:var(--amarillo); transform:translateY(-4px);}
.mod .mlabel{font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--amarillo); font-weight:500;}
.mod h3{font-size:clamp(28px,3.4vw,44px); font-weight:700; letter-spacing:-0.02em; margin:14px 0 18px;}
.mod p{color:var(--blanco); font-size:15px; margin-bottom:24px; max-width:420px;}
.mod ul{list-style:none;}
.mod li{font-size:14.5px; padding:11px 0 11px 26px; border-top:1px solid var(--linea); position:relative;}
.mod li::before{content:'✦'; position:absolute; left:0; color:var(--amarillo); font-size:12px; top:13px;}
@media(max-width:760px){.mods{grid-template-columns:1fr;}}

/* ─── GARANTÍA ─── */
.garantia{text-align:center;}
.garantia .qmark{font-size:clamp(30px,4.6vw,64px); font-weight:700; line-height:1.08; letter-spacing:-0.02em; max-width:1000px; margin:0 auto;}
.garantia .qmark .y{color:var(--amarillo);}
.garantia .qmark .it{font-weight:400;}

/* ─── FAQ ─── */
.faq-header{max-width:760px; margin:0 auto; text-align:center;}
.faq-list{max-width:760px; margin:50px auto 0;}
.faq-item{position:relative; transition:background .35s var(--ease);}
.faq-item + .faq-item::before{
  content:''; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:var(--linea); transition:opacity .25s;
}
.faq-item.open + .faq-item::before, .faq-item.open::before{opacity:0;}
.faq-item.open{background:rgba(240,250,0,0.04); border-radius:14px;}
.faq-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:18px;
  background:none; border:none; cursor:pointer;
  padding:22px 28px;
  font-family:var(--font); color:var(--blanco);
  font-size:clamp(16px,1.4vw,18px); font-weight:500; letter-spacing:-0.005em;
  text-align:left; line-height:1.35;
  transition:color .3s;
}
.faq-trigger:hover{color:var(--amarillo);}
.faq-chevron{
  width:18px; height:18px; color:var(--gris); flex-shrink:0;
  transition:transform .3s var(--ease), color .3s;
}
.faq-item.open .faq-chevron{transform:rotate(180deg); color:var(--amarillo);}
.faq-content{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-content-inner{padding:0 28px 24px; font-size:15.5px; color:var(--blanco); line-height:1.65;}
.faq-content-inner strong{color:var(--blanco); font-weight:500;}
.faq-footer{text-align:center; margin-top:28px; font-size:15px; color:var(--gris);}
.faq-footer a{color:var(--amarillo); text-decoration:underline; text-underline-offset:3px; font-weight:500; transition:opacity .3s;}
.faq-footer a:hover{opacity:0.8;}
@media (prefers-reduced-motion:reduce){
  .faq-content,.faq-chevron,.faq-item{transition:none !important;}
}

/* ─── CTA / CONTACTO ─── */
.cta{position:relative; overflow:hidden; text-align:center; padding-bottom:clamp(70px,9vh,120px);}
.cta h2{font-size:clamp(44px,11vw,180px); font-weight:700; line-height:0.9; letter-spacing:-0.035em;}
.cta h2 .it{font-weight:400;}
.cta h2 .dot{color:var(--amarillo);}
.cta .mail{display:inline-block; margin-top:40px; font-size:clamp(20px,3vw,40px); font-weight:500; border-bottom:2px solid var(--amarillo); padding-bottom:6px; transition:color .3s,letter-spacing .4s var(--ease);}
.cta .mail:hover{color:var(--amarillo); letter-spacing:0.01em;}
.cta .contact-row{display:flex; justify-content:center; gap:40px; flex-wrap:wrap; margin-top:46px; color:var(--gris); font-size:14px; letter-spacing:0.06em; text-transform:uppercase;}
.cta .contact-row a:hover{color:var(--amarillo);}

.cta .wrap{position:relative; padding-bottom:64px;}
.cta-glow{
  position:absolute; inset:80px 0 0 0; border-radius:16px; pointer-events:none; z-index:0;
  box-shadow:
    inset 0 -16px 128px 0 rgba(240,250,0,0.55),
    inset 0 -16px 32px 0 rgba(240,250,0,0.55);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 8rem);
  mask-image:linear-gradient(to bottom, transparent, #000 8rem);
  opacity:0;
}
.cta .wrap > *:not(.cta-glow){position:relative; z-index:1;}
@keyframes ctaFadeUp{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes ctaScaleIn{
  from{opacity:0; transform:scale(0.95);}
  to{opacity:1; transform:scale(1);}
}
.cta .cta-anim{opacity:0;}
.cta.in .cta-anim{animation:ctaFadeUp .6s ease-out both;}
.cta.in .cta-anim.d1{animation-delay:100ms;}
.cta.in .cta-anim.d2{animation-delay:200ms;}
.cta.in .cta-anim.d3{animation-delay:300ms;}
.cta.in .cta-anim.d4{animation-delay:400ms;}
.cta.in .cta-anim.d5{animation-delay:500ms;}
.cta.in .cta-glow{animation:ctaScaleIn .7s ease-out 700ms both;}
@media (prefers-reduced-motion:reduce){
  .cta .cta-anim,.cta .cta-glow{opacity:1 !important; transform:none !important; animation:none !important;}
}

/* ─── FOOTER ─── */
footer{border-top:1px solid var(--linea); padding:40px clamp(20px,5vw,60px) 32px; display:flex; flex-direction:column; gap:28px;}
footer img{height:26px; width:auto; align-self:flex-start; display:block; margin-bottom:14px; filter:brightness(0) invert(1);}
.footer-brand{display:flex; flex-direction:column;}
footer .fmeta{font-size:12px; color:var(--gris); letter-spacing:0.06em; text-transform:uppercase; line-height:1.6;}
footer .fmeta .y{color:var(--amarillo);}
.footer-social{display:flex; gap:8px; margin-top:18px;}
.footer-nav{
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center;
  gap:14px 28px;
  padding-top:24px; border-top:1px solid var(--linea);
}
.footer-nav a{font-size:13.5px; color:var(--gris); transition:color .3s; position:relative;}
.footer-nav a:hover{color:var(--amarillo);}
.footer-nav a + a::before{
  content:''; position:absolute; left:-15px; top:50%; width:3px; height:3px;
  background:var(--linea); border-radius:50%; transform:translateY(-50%);
}
@media(max-width:600px){
  .footer-top{flex-direction:column;}
  .footer-nav{gap:12px 20px;}
  .footer-nav a + a::before{left:-12px;}
}

/* ─── ANIMACIÓN REVEAL ─── */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease);}
.js .reveal{opacity:0; transform:translateY(38px);}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;} .reveal.d5{transition-delay:.4s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none;} .glow{animation:none;}}

/* ─── ACCESIBILIDAD: FOCO VISIBLE + SKIP LINK ─── */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amarillo); outline-offset:3px; border-radius:4px;
}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:1100; background:var(--amarillo); color:var(--negro);
  padding:10px 18px; border-radius:100px; font-size:13px; font-weight:500; transition:top .25s var(--ease);
}
.skip-link:focus{top:16px;}

/* ─── MODAL / WIZARD DIAGNÓSTICO ─── */
.modal-overlay{
  position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(0,0,0,0.78); backdrop-filter:blur(8px);
}
.modal-overlay.is-open{display:flex;}
.modal{
  position:relative; width:100%; max-width:560px; background:var(--negro-2); border:1px solid var(--linea);
  border-radius:14px; padding:clamp(28px,4vw,48px); max-height:90vh; overflow-y:auto;
}
.modal__close{
  position:absolute; top:14px; right:16px; background:none; border:none; color:var(--gris);
  font-size:13px; letter-spacing:0.04em; cursor:pointer; transition:color .3s; font-family:var(--font);
}
.modal__close:hover{color:var(--amarillo);}
.wizard__step{display:none;}
.wizard__step.is-active{display:block; animation:wizFade .4s var(--ease);}
@keyframes wizFade{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}
.wizard__eyebrow{display:inline-block; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--amarillo); font-weight:500; margin-bottom:16px;}
.wizard__title{font-size:clamp(22px,3vw,30px); font-weight:700; letter-spacing:-0.02em; line-height:1.12; margin-bottom:14px;}
.wizard__body{color:var(--gris); font-size:15px; line-height:1.6; margin-bottom:26px;}
.wizard__progress{margin-bottom:24px;}
.wizard__progress-label{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gris);}
.wizard__progress-track{height:3px; background:var(--gris-2); border-radius:100px; margin-top:10px; overflow:hidden;}
.wizard__progress-fill{height:100%; width:calc(var(--p)*100%); background:var(--amarillo); border-radius:100px; transition:width .4s var(--ease);}
.wizard__question{display:block; font-size:18px; font-weight:500; margin-bottom:16px;}
.wizard__optional{color:var(--gris); font-weight:400; font-size:14px;}
.wizard__input,.wizard__textarea{
  width:100%; background:var(--negro); border:1px solid var(--linea); color:var(--blanco);
  font-family:var(--font); font-size:16px; padding:15px 16px; border-radius:8px; transition:border-color .3s;
}
.wizard__input::placeholder,.wizard__textarea::placeholder{color:var(--gris);}
.wizard__input:focus,.wizard__textarea:focus{border-color:var(--amarillo); outline:none;}
.wizard__input.is-error,.wizard__textarea.is-error{border-color:#ff6b6b;}
.wizard__error{font-size:13px; color:#ff8a8a; margin-top:8px; display:none;}
.wizard__error.is-visible{display:block;}
.wizard__hint{font-size:13px; color:var(--gris); margin-top:8px;}
.wizard__nav,.wizard__cta{display:flex; align-items:center; gap:16px; margin-top:26px; flex-wrap:wrap;}
.wizard__back{background:none; border:none; color:var(--gris); font-family:var(--font); font-size:14px; cursor:pointer; transition:color .3s;}
.wizard__back:hover{color:var(--blanco);}
.wizard__note{font-size:13px; color:var(--gris);}
.wizard .btn{cursor:pointer; font-family:var(--font);}
.consent{display:flex; gap:10px; align-items:flex-start; margin-top:22px; font-size:13.5px; color:var(--gris); line-height:1.5; cursor:pointer;}
.consent input{margin-top:3px; accent-color:var(--amarillo); width:16px; height:16px; flex-shrink:0;}
.consent input.is-error{outline:2px solid #ff6b6b; outline-offset:2px;}
.consent a{color:var(--amarillo); text-decoration:underline; text-underline-offset:2px;}

.wa-fab{
  position:fixed; right:24px; bottom:24px; z-index:990;
  display:inline-flex; align-items:center; gap:11px;
  height:56px; padding:0 22px;
  background:var(--amarillo); color:var(--negro);
  border-radius:100px; text-decoration:none;
  font-family:var(--font); font-weight:500; font-size:15px; line-height:1;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  will-change:transform;
}
.wa-fab__icon{width:25px; height:25px; flex-shrink:0; display:block;}
.wa-fab:hover{transform:translateY(-3px); box-shadow:0 18px 44px rgba(240,250,0,.28),0 12px 34px rgba(0,0,0,.5);}
.wa-fab:focus-visible{outline:3px solid var(--blanco); outline-offset:3px;}
.wa-fab::before{content:''; position:absolute; inset:0; border-radius:100px; background:var(--amarillo); z-index:-1; animation:waPulse 2.8s var(--ease) infinite;}
@keyframes waPulse{0%{transform:scale(1); opacity:.45;} 70%,100%{transform:scale(1.5); opacity:0;}}
@media(max-width:560px){
  .wa-fab{padding:0; width:56px; justify-content:center; right:16px; bottom:16px;}
  .wa-fab__label{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .wa-fab, .wa-fab:hover{transition:none; transform:none;}
  .wa-fab::before{animation:none;}
}

.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:580px;margin:0 auto;background:rgba(16,16,16,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px 20px;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;justify-content:space-between;box-shadow:0 18px 50px rgba(0,0,0,.5);}
.cookie-banner[hidden]{display:none;}
.cookie-banner__txt{margin:0;font-size:13px;line-height:1.55;color:var(--gris);flex:1 1 280px;}
.cookie-banner__txt a{color:var(--amarillo);text-decoration:underline;text-underline-offset:2px;}
.cookie-banner__btns{display:flex;gap:10px;flex-shrink:0;}
.cookie-btn{font:inherit;font-size:13px;font-weight:500;padding:10px 20px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,background .2s ease;}
.cookie-btn--solid{background:var(--amarillo);color:#111;}
.cookie-btn--ghost{background:transparent;color:var(--blanco);border-color:rgba(255,255,255,.28);}
.cookie-btn:hover{transform:translateY(-1px);}
.cookie-btn--ghost:hover{background:rgba(255,255,255,.08);}
@media(max-width:520px){.cookie-banner{flex-direction:column;align-items:stretch;}.cookie-banner__btns{justify-content:flex-end;}}

/* ─── LEAD MAGNET · banda checklist (home) ─── */
.lm-band{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(32px,5vw,72px); align-items:center;
  background:var(--negro-2); border:1px solid var(--linea); border-radius:28px;
  padding:clamp(34px,5vw,64px); position:relative; overflow:hidden;
}
.lm-band::before{
  content:''; position:absolute; right:-8%; top:-40%; width:55%; height:180%;
  background:radial-gradient(circle, rgba(240,250,0,0.10) 0%, rgba(240,250,0,0) 65%); pointer-events:none;
}
.lm-band__copy{position:relative; z-index:1;}
.lm-band__title{font-weight:700; font-size:clamp(28px,3.6vw,52px); line-height:1.03; letter-spacing:-0.025em; margin-bottom:22px;}
.lm-band__title .y{color:var(--amarillo);}
.lm-band__lead{max-width:460px; font-size:clamp(15px,1.5vw,18px); color:var(--gris); line-height:1.6; margin-bottom:34px;}
.lm-band__lead b{color:var(--blanco); font-weight:500;}
.lm-band__preview{position:relative; z-index:1;}
.lm-pcard{
  background:var(--negro); border:1px solid var(--linea); border-radius:20px; padding:26px 24px;
  transform:rotate(1.6deg); transition:transform .5s var(--ease); box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.lm-band:hover .lm-pcard{transform:rotate(0deg) translateY(-4px);}
.lm-pcard__tag{display:inline-block; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--amarillo); font-weight:600; margin-bottom:18px;}
.lm-pcard__list{list-style:none; display:grid; gap:14px; padding:0; margin:0;}
.lm-pcard__list li{display:flex; gap:12px; align-items:baseline; font-size:14.5px; line-height:1.4; color:rgba(255,255,255,0.86);}
.lm-pcard__list li span{color:var(--amarillo); font-weight:700; font-size:13px; flex-shrink:0;}
.lm-pcard__more{margin-top:18px; padding-top:16px; border-top:1px solid var(--linea); font-size:13px; color:var(--gris);}
@media (max-width:820px){
  .lm-band{grid-template-columns:1fr; gap:34px;}
  .lm-pcard{transform:rotate(0deg);}
}
@media (prefers-reduced-motion:reduce){
  .lm-pcard{transform:none;}
  .lm-band:hover .lm-pcard{transform:translateY(-4px);}
}

/* ═══════ TRABAJOS REALES · vídeo inmobiliario ═══════ */
#trabajos .sec-head{flex-direction:column; align-items:flex-start; gap:16px;}
#trabajos .sec-head p{max-width:620px; color:var(--gris); font-size:clamp(15px,1.6vw,18px); line-height:1.6;}
.work-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,300px));
  gap:clamp(18px,3vw,34px);
  justify-content:center;
  margin-top:clamp(34px,5vw,56px);
}
.work-card{margin:0;}
.work-media{
  position:relative;
  aspect-ratio:9 / 16;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--linea);
  background:var(--negro-2);
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.work-video{width:100%; height:100%; object-fit:cover; display:block;}
.work-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
  color:#111; background:var(--amarillo);
  padding:5px 11px; border-radius:999px;
}
.work-play{
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center;
  border:0; padding:0; cursor:pointer;
  background:linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0) 55%);
  transition:opacity .35s var(--ease);
}
.work-play__btn{
  width:66px; height:66px; border-radius:50%;
  background:var(--amarillo);
  display:grid; place-items:center;
  box-shadow:0 8px 30px rgba(0,0,0,0.45);
  transition:transform .2s var(--ease);
}
.work-play svg{width:26px; height:26px; fill:#111; margin-left:3px;}
.work-play:hover .work-play__btn{transform:scale(1.09);}
.work-play:focus-visible{outline:2px solid var(--amarillo); outline-offset:4px;}
.work-play.is-hidden{opacity:0; pointer-events:none;}
.work-cap{margin-top:14px; font-size:13.5px; color:var(--gris); letter-spacing:0.01em;}

@media (max-width:600px){
  .work-grid{grid-template-columns:minmax(0,320px);}
}
@media (prefers-reduced-motion:reduce){
  .work-play, .work-play__btn{transition:none;}
}


/* ═══════ NAV · desplegable Sectores ═══════ */
.nav-drop{position:relative;}
.nav-drop__trigger{display:inline-flex; align-items:center; gap:5px; padding:0; background:none; border:0; cursor:pointer; font:inherit; font-size:13px; letter-spacing:0.04em; color:var(--blanco); transition:color .3s;}
.nav-drop__trigger svg{width:11px; height:11px; transition:transform .3s var(--ease);}
.nav-drop:hover .nav-drop__trigger, .nav-drop:focus-within .nav-drop__trigger{color:var(--amarillo);}
.nav-drop:hover .nav-drop__trigger svg, .nav-drop:focus-within .nav-drop__trigger svg{transform:rotate(180deg);}
.nav-drop__menu{position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px); display:flex; flex-direction:column; min-width:224px; margin-top:14px; padding:8px; background:rgba(10,10,10,0.97); backdrop-filter:blur(14px); border:1px solid var(--linea); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,0.5); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;}
.nav-drop__menu::before{content:''; position:absolute; top:-14px; left:0; right:0; height:14px;}
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);}
#nav .nav-drop__menu a{font-size:14px; color:var(--blanco); padding:11px 14px; border-radius:10px; white-space:nowrap; transition:background .2s, color .2s;}
#nav .nav-drop__menu a:hover{background:rgba(240,250,0,0.10); color:var(--amarillo);}
#mobile-menu .mm-label{font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--amarillo); padding:20px 2px 4px; border-bottom:none;}

#nav .nav-drop__menu a.nav-drop__more{margin-top:6px; border-top:1px solid var(--linea); border-radius:0 0 10px 10px; color:var(--amarillo); font-size:13px;}
#nav .nav-drop__menu a.nav-drop__more:hover{background:rgba(240,250,0,0.10); color:var(--amarillo);}
#mobile-menu .mm-more{font-size:16px; color:var(--amarillo);}

#nav .nav-drop__eyebrow{display:block; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gris); padding:6px 14px 10px;}
