/* 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{
  /* Paleta 2026: marrón y crema mandan, neón de acento */
  --negro:#3A2A24;        /* marrón base (superficie oscura) */
  --negro-2:#2E211C;      /* marrón profundo */
  --blanco:#F2EFE7;       /* crema (texto sobre marrón · superficie clara) */
  --amarillo:#F0FA00;     /* neón, solo acento */
  --gris:#C9BCB2;         /* crema apagada */
  --gris-2:#4A382F;       /* marrón claro para bloques */
  --linea:rgba(242,239,231,0.14);
  --crema:#F2EFE7;
  --marron:#3A2A24;
  --marron-rgb:58,42,36;
  --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; overflow-x:clip;}
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(58,42,36,0.80); backdrop-filter:blur(14px); border-bottom:1px solid var(--linea);}
/* logo del nav en neón: se pinta el amarillo y se usa el PNG como máscara,
   así el color es exacto y no depende de filtros aproximados */
#nav .logo{
  display:block; width:66px; height:20px; background:var(--amarillo);
  -webkit-mask:url('../logo.png') no-repeat center/contain;
  mask:url('../logo.png') no-repeat center/contain;
}
#nav .logo img{height:20px; width:auto; display:block; opacity:0;}
#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(58,42,36,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;}
}

/* ─── FONDO CONTINUO · marrón con degradados amarillos aleatorios ───
   Una sola capa para TODA la página: sin bordes de sección, sin cortes. */
body{position:relative;}
body::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle, rgba(240,250,0,0.20) 0%, rgba(240,250,0,0) 64%),
    radial-gradient(circle, rgba(240,250,0,0.13) 0%, rgba(240,250,0,0) 66%),
    radial-gradient(circle, rgba(240,250,0,0.16) 0%, rgba(240,250,0,0) 64%),
    radial-gradient(circle, rgba(240,250,0,0.10) 0%, rgba(240,250,0,0) 68%),
    radial-gradient(circle, rgba(240,250,0,0.17) 0%, rgba(240,250,0,0) 63%),
    radial-gradient(circle, rgba(240,250,0,0.11) 0%, rgba(240,250,0,0) 67%),
    radial-gradient(circle, rgba(240,250,0,0.15) 0%, rgba(240,250,0,0) 65%),
    radial-gradient(circle, rgba(240,250,0,0.09) 0%, rgba(240,250,0,0) 68%),
    radial-gradient(circle, rgba(240,250,0,0.14) 0%, rgba(240,250,0,0) 64%),
    radial-gradient(circle, rgba(240,250,0,0.12) 0%, rgba(240,250,0,0) 66%);
  background-size:
    90vw 90vw, 74vw 74vw, 104vw 104vw, 68vw 68vw, 96vw 96vw,
    80vw 80vw, 110vw 110vw, 72vw 72vw, 92vw 92vw, 84vw 84vw;
  background-position:
    88% 2%,  6% 9%,   72% 17%, 18% 25%, 94% 33%,
    2% 44%,  66% 54%, 10% 65%, 86% 76%, 24% 90%;
}
@media(max-width:720px){
  body::before{
    background-size:
      150vw 150vw, 130vw 130vw, 170vw 170vw, 120vw 120vw, 160vw 160vw,
      140vw 140vw, 175vw 175vw, 125vw 125vw, 155vw 155vw, 145vw 145vw;
  }
}

/* ─── 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.26) 0%,
    rgba(240,250,0,0.08) 4%,
    transparent 8%,
    transparent 13%,
    rgba(240,250,0,0.18) 17%,
    rgba(240,250,0,0.05) 22%,
    transparent 26%,
    rgba(240,250,0,0.15) 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.18) 50deg,
    rgba(240,250,0,0) 110deg,
    rgba(240,250,0,0.13) 190deg,
    rgba(240,250,0,0) 250deg,
    rgba(240,250,0,0.15) 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(58,42,36,0.55) 70%, rgba(58,42,36,0.92) 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:400; 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; font-style:italic;}
.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(242,239,231,0.07); 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(4,1fr); gap:clamp(20px,3vw,42px);}
.timeline-line{position:absolute; top:32px; left:12.5%; width:75%; 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.15);}
.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(58,42,36,0.86); 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:clamp(70px,10vh,110px); z-index:990;
  display:inline-flex; align-items:center; gap:11px;
  height:56px; padding:0 22px; width:170px; justify-content:center;
  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(46,33,28,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(242,239,231,.14);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:var(--marron);}
.cookie-btn--ghost{background:transparent;color:var(--blanco);border-color:rgba(242,239,231,.30);}
.cookie-btn:hover{transform:translateY(-1px);}
.cookie-btn--ghost:hover{background:rgba(242,239,231,.09);}
@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.08) 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(242,239,231,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:var(--marron); 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(46,33,28,0.55), rgba(46,33,28,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:var(--marron); 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(46,33,28,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.08); 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.08); 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;}

/* ═══════════════════════════════════════════════════════════
   CASO REAL · KIBO TRAVEL  (misma estética de la web · fondo marrón + degradado neón)
   ═══════════════════════════════════════════════════════════ */
#caso{overflow:hidden;}
#caso .caso-glow{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
#caso .caso-glow i{position:absolute; display:block; border-radius:50%;}
#caso .caso-glow i:nth-child(1){width:66vw; height:66vw; max-width:900px; max-height:900px; left:-16vw; top:-24vw;
  background:radial-gradient(circle,rgba(240,250,0,0.20) 0%,rgba(240,250,0,0) 62%);}
#caso .caso-glow i:nth-child(2){width:52vw; height:52vw; max-width:720px; max-height:720px; right:-14vw; bottom:-20vw;
  background:radial-gradient(circle,rgba(240,250,0,0.14) 0%,rgba(240,250,0,0) 64%);}
#caso .wrap{position:relative; z-index:1;}

.caso-top{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,64px); align-items:end; margin-bottom:44px;}
.caso-top h2{font-weight:700; font-size:clamp(32px,5.2vw,76px); line-height:1; letter-spacing:-0.025em;}
.caso-top h2 .y{color:var(--amarillo);}
.caso-top h2 .dot{color:var(--amarillo);}
.caso-top h2 .it{font-weight:400; font-style:italic;}
.caso-top p{color:var(--gris); font-size:15.5px; line-height:1.6;}
.caso-top p strong{color:var(--blanco); font-weight:500;}

.caso-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.caso-card{display:flex; flex-direction:column; gap:12px; border:1px solid var(--linea); border-radius:20px;
  padding:28px 24px 30px; background:var(--negro-2); transition:border-color .3s var(--ease), transform .3s var(--ease);}
.caso-card:hover{border-color:rgba(240,250,0,0.4); transform:translateY(-5px);}
.caso-card span{font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--amarillo);}
.caso-card p{font-size:14.5px; line-height:1.5; color:var(--gris);}

/* marquesina de piezas reales publicadas */
.caso-marquee{position:relative; z-index:1; margin-top:clamp(38px,5vw,62px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.caso-track{display:flex; gap:16px; width:max-content; animation:casoSlide 46s linear infinite;}
.caso-marquee:hover .caso-track{animation-play-state:paused;}
.caso-track figure{width:clamp(172px,19vw,244px); flex:0 0 auto; margin:0;}
.caso-track img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:16px;
  border:1px solid var(--linea); transition:transform .5s var(--ease), border-color .3s;}
.caso-track figure:hover img{transform:translateY(-6px); border-color:rgba(240,250,0,0.45);}
@keyframes casoSlide{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){ .caso-track{animation:none; overflow-x:auto; width:100%;} }

.caso-pie{position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;
  margin-top:26px; font-size:13px; color:var(--gris);}
.caso-pie a:not(.btn){color:var(--amarillo); border-bottom:1px solid rgba(240,250,0,0.35); padding-bottom:1px;}
.caso-pie a:not(.btn):hover{border-color:var(--amarillo);}
.caso-pie .btn{margin-left:auto;}

@media(max-width:1024px){ .caso-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:900px){ .caso-top{grid-template-columns:1fr; align-items:start; gap:20px;} }
@media(max-width:560px){ .caso-grid{grid-template-columns:1fr;} }

/* ═══════════════════════════════════════════════════════════
   BANDA DE CONTENIDO PROPIO (posts reales de BEAI)
   ═══════════════════════════════════════════════════════════ */
#contenido-propio{overflow:hidden; padding-top:clamp(60px,8vh,90px);}
#contenido-propio .caso-glow i:nth-child(1){left:auto; right:-18vw; top:-26vw;}
#contenido-propio .caso-glow i:nth-child(2){right:auto; left:-16vw; bottom:-22vw;}
.cp-top{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,64px); align-items:end; margin-bottom:38px;}
.cp-top h2{font-weight:700; font-size:clamp(30px,4.6vw,64px); line-height:1.02; letter-spacing:-0.025em;}
.cp-top h2 .y{color:var(--amarillo);}
.cp-top p{color:var(--gris); font-size:15.5px; line-height:1.6;}
.cp-top p strong{color:var(--blanco); font-weight:500;}
.caso-track--rev{animation-direction:reverse; animation-duration:52s;}
@media(max-width:900px){ .cp-top{grid-template-columns:1fr; align-items:start; gap:18px;} }

/* ═══════════════════════════════════════════════════════════
   POPUP NEWSLETTER (entrada · cerrable)
   ═══════════════════════════════════════════════════════════ */
.nl-pop{position:fixed; inset:0; z-index:9998; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(20,14,11,0.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.nl-pop.is-on{display:flex;}
.nl-card{position:relative; width:100%; max-width:520px; max-height:92vh; overflow-y:auto; background:var(--negro-2); border:1px solid var(--linea);
  border-radius:24px; padding:clamp(28px,4vw,44px); overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5); animation:nlIn .45s var(--ease);}
@keyframes nlIn{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;}}
.nl-card::before{content:''; position:absolute; width:420px; height:420px; right:-160px; top:-190px; pointer-events:none;
  background:radial-gradient(circle,rgba(240,250,0,0.20) 0%,rgba(240,250,0,0) 62%);}
.nl-card>*{position:relative;}
.nl-close{position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:100px; border:1px solid var(--linea);
  background:transparent; color:var(--blanco); font-size:17px; line-height:1; cursor:pointer; z-index:2;
  transition:border-color .3s, color .3s, transform .3s var(--ease);}
.nl-close:hover{border-color:var(--amarillo); color:var(--amarillo); transform:rotate(90deg);}
.nl-card .eyebrow{margin-bottom:16px;}
.nl-card h3{font-size:clamp(25px,3.4vw,36px); font-weight:700; line-height:1.03; letter-spacing:-0.025em; margin-bottom:14px;}
.nl-card h3 .y{color:var(--amarillo);}
.nl-card .nl-text{color:var(--gris); font-size:15px; line-height:1.55; margin-bottom:22px;}
.nl-list{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:9px;}
.nl-list li{display:block; position:relative; padding-left:23px; font-size:14.5px; line-height:1.45; color:var(--gris);}
.nl-list li::before{content:'→'; position:absolute; left:0; top:0; color:var(--amarillo);}
.nl-form{display:grid; gap:14px;}
.nl-form input[type=email]{width:100%; background:rgba(242,239,231,0.05); border:1px solid var(--linea); border-radius:100px;
  padding:16px 22px; color:var(--blanco); font-family:inherit; font-size:15px; transition:border-color .3s;}
.nl-form input[type=email]::placeholder{color:rgba(242,239,231,0.4);}
.nl-form input[type=email]:focus{outline:none; border-color:var(--amarillo);}
.nl-form button{background:var(--amarillo); color:var(--marron); border:none; border-radius:100px; padding:16px 26px;
  font-family:inherit; font-size:14.5px; font-weight:500; letter-spacing:0.02em; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s;}
.nl-form button:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(240,250,0,0.28);}
.nl-form button:disabled{opacity:.6; cursor:default; transform:none; box-shadow:none;}
.nl-consent{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; line-height:1.45; color:var(--gris);}
.nl-consent input{margin-top:2px; accent-color:#F0FA00; width:16px; height:16px; flex:0 0 auto;}
.nl-consent a{color:var(--amarillo); border-bottom:1px solid rgba(240,250,0,0.35);}
.nl-error{display:none; font-size:13px; color:#ff8a8a;}
.nl-error.is-on{display:block;}
.nl-later{display:block; margin-top:16px; background:none; border:none; color:var(--gris); font-family:inherit;
  font-size:13px; text-decoration:underline; cursor:pointer;}
.nl-later:hover{color:var(--blanco);}
.nl-ok{display:none;}
.nl-ok.is-on{display:block;}
.nl-ok h3{margin-bottom:12px;}
@media(max-width:540px){
  .nl-pop{padding:16px;}
  .nl-card{border-radius:20px; padding:26px 20px 22px;}
}

/* ═══════════════════════════════════════════════════════════
   OBJECIONES
   ═══════════════════════════════════════════════════════════ */
#objeciones{overflow:hidden;}
#objeciones .caso-glow i:nth-child(1){left:auto; right:-20vw; top:-28vw;}
#objeciones .caso-glow i:nth-child(2){right:auto; left:-14vw; bottom:-24vw;}
.obj-list{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px;}
.obj{border:1px solid var(--linea); border-radius:20px; padding:28px 26px 30px; background:var(--negro-2);
  transition:border-color .3s var(--ease), transform .3s var(--ease);}
.obj:hover{border-color:rgba(240,250,0,0.4); transform:translateY(-4px);}
.obj h3{font-size:clamp(17px,1.9vw,21px); font-weight:500; letter-spacing:-0.015em; margin-bottom:10px; color:var(--amarillo);}
.obj p{font-size:14.5px; line-height:1.55; color:var(--gris);}
.obj-list .obj:last-child:nth-child(odd){grid-column:1 / -1;}
@media(max-width:760px){ .obj-list{grid-template-columns:1fr;} }
.nl-list li strong{color:var(--blanco); font-weight:500;}
.nl-fine{margin-top:14px; font-size:12px; line-height:1.45; color:rgba(242,239,231,0.45);}

/* ─── Sin cortes: las capas locales de luz quedan desactivadas ─── */
.hero .aurora-bg, .hero .glow, .hero .aurora-vignette, .caso-glow{display:none !important;}
section{background:transparent;}

@media(max-width:540px){ .wa-fab{bottom:76px; right:16px; height:52px; padding:0 18px; font-size:14px;} }

/* ═══════════════════════════════════════════════════════════
   HERO · ECLIPSE (dos discos marrón con el borde en neón · luz difusa)
   ═══════════════════════════════════════════════════════════ */
.hero--eclipse{
  background:transparent;
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding-top:clamp(120px,15vh,168px);
  padding-bottom:clamp(110px,18vh,210px);   /* la luz queda por debajo de los botones */
  overflow:visible; isolation:isolate;
}
.hero-center{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center;}
/* velo suave detrás del texto para que la tipografía quede limpia sobre la luz */
.hero-center::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:150%; height:150%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(46,33,28,.42) 0%, rgba(46,33,28,.22) 46%, rgba(46,33,28,0) 72%);
}

/* píldora con las dos líneas y los puntos */
.pill{display:inline-flex; align-items:center; gap:14px; margin-bottom:clamp(22px,3vh,34px);}
.pill span{
  display:inline-block; padding:9px 4px; border:none; background:none;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--blanco);
  white-space:nowrap;
}
.pill i{position:relative; display:block; width:clamp(34px,7vw,88px); height:1px; background:linear-gradient(to right, rgba(242,239,231,0), rgba(242,239,231,.42));}
.pill i:last-child{background:linear-gradient(to left, rgba(242,239,231,0), rgba(242,239,231,.42));}
.pill i::after{content:''; position:absolute; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--amarillo);}
.pill i:first-child::after{right:-1px;}
.pill i:last-child::after{left:-1px;}

.hero--eclipse h1{
  font-weight:700; font-size:clamp(40px,7vw,108px); line-height:.97; letter-spacing:-0.035em;
  margin-bottom:clamp(18px,2.6vh,28px); text-wrap:balance;
}
.hero--eclipse h1 .yellow{color:var(--amarillo);}
.hero--eclipse .sub{
  max-width:min(96ch,100%); margin:0 auto clamp(28px,4vh,42px);
  font-size:clamp(15px,1.6vw,19px); line-height:1.42; letter-spacing:normal; color:var(--blanco);
}
.hero--eclipse .sub span{display:block;}
.hero--eclipse .sub span + span{margin-top:0;}
.hero--eclipse .hero-actions{justify-content:center;}

@media(max-width:540px){
  .pill i{display:none;}
  .pill span{font-size:10.5px; letter-spacing:.13em; padding:8px 15px; white-space:normal; text-align:center;}
}

/* ═══════════════════════════════════════════════════════════
   LUZ DEL HERO · neón BEAI puro, todo degradado
   Sin discos ni bordes: tres elipses de degradado superpuestas. El amarillo
   es el `#F0FA00` de marca a plena saturación en el centro y muere en el marrón.
   Uso: <div class="arco" aria-hidden="true"><i></i><i></i><i></i></div>
   ═══════════════════════════════════════════════════════════ */
.arco{
  position:absolute; inset:auto 0 -420px 0; height:1000px; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 99%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 99%);
}
.arco i{position:absolute; left:50%; transform:translateX(-50%); display:block; border-radius:50%;}
/* halo amplio */
.arco i:nth-child(1){
  width:calc(100% + 240px); height:1150px; bottom:-45px;
  background:radial-gradient(ellipse 128% 50% at 50% 50%,
    rgba(240,250,0,.30) 0%,
    rgba(240,250,0,.20) 34%,
    rgba(240,250,0,.10) 58%,
    rgba(240,250,0,.03) 80%,
    rgba(240,250,0,0) 100%);
  filter:blur(40px);
}
/* cuerpo de la luz, neón a plena saturación */
.arco i:nth-child(2){
  width:calc(100% + 240px); height:700px; bottom:180px;
  background:radial-gradient(ellipse 86% 50% at 50% 50%,
    rgba(240,250,0,.72) 0%,
    rgba(240,250,0,.52) 26%,
    rgba(240,250,0,.28) 50%,
    rgba(240,250,0,.10) 72%,
    rgba(240,250,0,0) 100%);
  filter:blur(60px);
}
/* corazón incandescente */
.arco i:nth-child(3){
  width:calc(100% + 240px); height:300px; bottom:380px;
  background:radial-gradient(ellipse 56% 50% at 50% 50%,
    rgba(255,254,232,.55) 0%,
    rgba(248,252,120,.40) 26%,
    rgba(240,250,0,.20) 52%,
    rgba(240,250,0,0) 84%);
  filter:blur(70px);
}

/* En el hero la franja se ve ENTERA al entrar: los dos arcos y el centro,
   igual que la que hay debajo del statement. El contenido sube para dejarle sitio. */
.hero--eclipse{padding-bottom:clamp(300px,44vh,460px);}
@media(max-width:900px){
  .hero--eclipse{padding-bottom:clamp(230px,34vh,330px);}
}

/* el statement lleva su propio arco debajo */
#problema{padding-top:clamp(150px,18vh,220px); padding-bottom:clamp(70px,9vh,110px); overflow:visible;}
#problema .wrap{position:relative; z-index:2;}
/* la sección siguiente arranca cuando la luz ya pasó */
#servicios{padding-top:clamp(50px,7vh,90px);}
@media(max-width:900px){
  #servicios{padding-top:clamp(40px,6vh,70px);}
  #problema{padding-bottom:clamp(56px,8vh,90px);}
}

/* TikTok: el glifo es más estrecho que los demás, se compensa el tamaño */
.nav-soc[aria-label="TikTok"] svg{width:15.5px; height:15.5px;}
/* El botón de WhatsApp se alinea con el margen de página, o sea a la misma
   altura de borde derecho que los iconos sociales del nav. */
.wa-fab{right:clamp(20px,5vw,60px);}
@media(max-width:540px){ .wa-fab{right:16px;} }
/* el lead del statement, una frase por línea */
.statement .lead span{display:block;}
.statement .lead{max-width:min(90ch,100%); line-height:1.45;}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  BLOQUE APROBADO Y BLOQUEADO · Aina 29/07/2026                   ║
   ║  "Tienes buen servicio. / Los clientes no llegan." + su párrafo. ║
   ║  Centrado en el medio. NO MODIFICAR sin que Aina lo pida.        ║
   ╚══════════════════════════════════════════════════════════════════╝ */
#problema{text-align:center;}
#problema .wrap{display:flex; flex-direction:column; align-items:center;}
#problema h2{margin-left:auto; margin-right:auto;}
#problema .lead{margin-left:auto; margin-right:auto; text-align:center;}

/* ═══════════════════════════════════════════════════════════
   QUÉ HACEMOS · drilldown igual que la referencia (21st.dev),
   solo con los colores y la tipografía de BEAI.
   Lista centrada, sin líneas ni números · clic → cabecera con flecha
   de vuelta y la descripción entrando escalonada · miga de pan abajo.
   ═══════════════════════════════════════════════════════════ */
.drill{
  position:relative; margin-top:clamp(30px,4vw,56px);
  min-height:clamp(330px,44vh,470px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.drill-list{
  list-style:none; margin:0 auto; padding:0; display:flex; flex-direction:column; gap:clamp(6px,1vw,12px);
  transition:opacity .34s var(--ease), transform .38s var(--ease);
}
.drill.is-open .drill-list{opacity:0; transform:translateY(-10px); pointer-events:none;}
.drill-open{
  display:block; background:none; border:0; padding:2px 0; cursor:pointer; text-align:left;
  font-family:inherit; color:var(--blanco);
  font-size:clamp(22px,3vw,40px); font-weight:500; letter-spacing:-0.028em; line-height:1.12;
  transition:color .28s var(--ease), transform .28s var(--ease);
}
.drill-open:hover{color:var(--amarillo); transform:translateX(6px);}
.drill-open:focus-visible{outline:2px solid var(--amarillo); outline-offset:5px; border-radius:4px;}

.drill-panel{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; width:max-content; max-width:100%; margin:0 auto;
  pointer-events:none;
}
.drill.is-open .drill-panel{pointer-events:auto;}
.drill-back{
  position:relative; display:inline-flex; align-items:baseline; gap:16px; margin-left:-42px;
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit; text-align:left;
  opacity:0; transform:translateY(10px);
  transition:opacity .34s var(--ease) .06s, transform .34s var(--ease) .06s, color .28s var(--ease);
  color:rgba(242,239,231,.55);
}
.drill.is-open .drill-back{opacity:1; transform:none;}
.drill-back:hover{color:var(--amarillo);}
.drill-back__ico{font-size:clamp(17px,1.9vw,24px); color:var(--amarillo); line-height:1; transition:transform .3s var(--ease);}
.drill-back:hover .drill-back__ico{transform:translateX(-5px);}
.drill-back__ttl{font-size:clamp(22px,3vw,40px); font-weight:500; letter-spacing:-0.028em; line-height:1.12;}
.drill-panel__desc{
  margin-top:clamp(16px,2vw,26px); max-width:56ch;
  font-size:clamp(15px,1.6vw,19px); line-height:1.6; color:var(--blanco);
  opacity:0; transform:translateY(12px);
  transition:opacity .36s var(--ease) .16s, transform .36s var(--ease) .16s;
}
.drill.is-open .drill-panel__desc{opacity:1; transform:none;}

.drill-crumb{
  margin-top:clamp(24px,3.4vw,40px); font-size:12.5px; letter-spacing:.1em;
  color:rgba(242,239,231,.34); text-align:center;
}
.drill-crumb__b{color:rgba(242,239,231,.7);}

@media(max-width:640px){
  .drill{min-height:0; align-items:stretch;}
  .drill-list{align-items:flex-start;}
  .drill-panel{position:static; width:auto; margin:0; display:none;}
  .drill.is-open .drill-panel{display:flex;}
  .drill.is-open .drill-list{display:none;}
  .drill-back{margin-left:0;}
  .drill-back, .drill-panel__desc{opacity:1; transform:none;}
}

/* ═══════════════════════════════════════════════════════════
   SECCIÓN CLARA · crema con degradado neón (estilo carrusel BEAI)
   Se funde con el marrón por arriba y por abajo, sin cortes.
   ═══════════════════════════════════════════════════════════ */
.section--light{
  background:var(--crema); color:var(--marron); overflow:hidden; isolation:isolate;
  padding-top:clamp(150px,18vh,220px); padding-bottom:clamp(120px,15vh,180px);
}
/* degradado neón difuso en la esquina inferior izquierda, como en el carrusel */
.section--light::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:-24%; bottom:-30%; width:120%; height:110%;
  background:radial-gradient(ellipse 46% 46% at 30% 70%,
    rgba(240,250,0,.34) 0%,
    rgba(240,250,0,.20) 32%,
    rgba(240,250,0,.08) 58%,
    rgba(240,250,0,0) 82%);
}
/* fundidos con el marrón de la página, arriba y abajo */
.section--light::after{
  content:''; position:absolute; left:0; right:0; top:0; height:clamp(90px,12vh,150px);
  z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, var(--negro) 0%, rgba(58,42,36,.55) 42%, rgba(242,239,231,0) 100%);
}
.section--light > .wrap{position:relative; z-index:3;}
.light-fade-bottom{
  position:absolute; left:0; right:0; bottom:0; height:clamp(90px,12vh,150px); z-index:2; pointer-events:none;
  background:linear-gradient(to top, var(--negro) 0%, rgba(58,42,36,.55) 42%, rgba(242,239,231,0) 100%);
}

.sec-head--light h2{
  font-weight:700; font-size:clamp(34px,5.6vw,80px); line-height:1.02; letter-spacing:-0.035em;
  text-transform:lowercase; color:var(--marron);
}
.sec-head--light h2 em{font-style:italic; font-weight:400;}

/* lista de capas */
.capas{list-style:none; margin:clamp(34px,5vw,64px) 0 0; padding:0; border-top:1px solid rgba(58,42,36,.22);}
.capa{
  position:relative; display:grid; grid-template-columns:clamp(56px,7vw,104px) 1fr; gap:clamp(14px,2vw,30px);
  padding:clamp(26px,3.4vw,44px) clamp(6px,1vw,14px);
  border-bottom:1px solid rgba(58,42,36,.22);
  transition:padding-left .42s var(--ease), background-color .42s var(--ease);
}
/* efecto al pasar por encima: la fila se ilumina y se desplaza */
.capa::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(90deg, rgba(240,250,0,.30) 0%, rgba(240,250,0,.10) 46%, rgba(240,250,0,0) 92%);
  transition:opacity .42s var(--ease);
}
.capa:hover::before{opacity:1;}
.capa:hover{padding-left:clamp(16px,2.4vw,34px);}
.capa__num{
  font-style:italic; font-size:clamp(17px,2vw,26px); color:rgba(58,42,36,.5); line-height:1.2; padding-top:.35em;
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.capa:hover .capa__num{color:var(--marron); transform:translateX(4px);}
.capa__ttl{
  font-weight:700; font-size:clamp(21px,2.9vw,38px); line-height:1.06; letter-spacing:-0.03em;
  color:var(--marron); margin-bottom:.35em;
}
.capa__desc{
  font-style:italic; font-size:clamp(14.5px,1.5vw,18px); line-height:1.5; color:rgba(58,42,36,.66);
  max-width:64ch;
}
.capa:hover .capa__desc{color:rgba(58,42,36,.82);}

@media(max-width:560px){
  .capa{grid-template-columns:38px 1fr; gap:12px; padding:22px 2px;}
  .capa__num{font-size:15px;}
}

/* titulares reales pero invisibles: mantienen la estructura para Google
   sin mostrarse en pantalla (contenido descriptivo, nunca relleno) */
.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;
}
/* fases más juntas */
.timeline{max-width:1060px; gap:clamp(12px,1.6vw,26px);}
.timeline-line{left:11%; width:78%;}
/* acento en cursiva de los titulares de sección */
.sec-head h2 em{font-style:italic; font-weight:400; color:var(--gris);}
.sec-head{margin-bottom:clamp(20px,3vw,34px);}
#proceso .sec-head{margin-bottom:0;}
#proceso .timeline{margin-top:clamp(46px,6vw,80px);}

/* ── Fases: los puntos se alinean con el texto de su columna y van más juntas ── */
@media(min-width:981px){
  .timeline{--tl-gap:20px; max-width:1000px; gap:var(--tl-gap); grid-template-columns:repeat(4,1fr);}
  /* el punto deja de ir centrado: se coloca sobre el inicio del texto */
  .timeline-step{padding:60px 0 0;}
  .tnode{left:8px; transform:translate(-50%,-50%) scale(.5);}
  .timeline.in .timeline-step .tnode{transform:translate(-50%,-50%) scale(1);}
  /* la línea va del primer punto al último, sin sobresalir */
  .timeline-line{left:8px; width:calc(75% + (var(--tl-gap) * .75)); right:auto;}
}

/* ── El lema del stack, presente en varios puntos ── */
.hero--eclipse .sub .sub-lema{
  margin-top:.55em; color:var(--amarillo); font-weight:500;
}
.stack-lema{
  margin-top:clamp(34px,4.4vw,60px); display:flex; flex-direction:column; gap:.5em;
  max-width:78ch;
}
.stack-lema span:first-child{
  font-size:clamp(19px,2.5vw,34px); font-weight:400; letter-spacing:-0.02em; line-height:1.18; color:var(--blanco);
}
.stack-lema span:first-child b{font-weight:700; color:var(--amarillo);}
.stack-lema span + span{font-size:clamp(14.5px,1.5vw,18px); line-height:1.6; color:var(--gris);}
footer .fmeta .y{color:var(--amarillo);}
/* el titular de los 8 frentes respira un poco más */
#servicios .sec-head{padding-top:30px;}
/* el lema, justo bajo el titular de la sección */
.stack-lema{margin-top:0; margin-bottom:clamp(10px,1.6vw,22px); display:block; max-width:none;}
.stack-lema b{font-weight:700; color:var(--amarillo);}
.stack-lema{
  font-size:clamp(16px,2vw,26px); font-weight:400; line-height:1.25; letter-spacing:-0.015em;
  color:var(--blanco); margin-top:clamp(12px,1.6vw,20px);
}
/* el lema de la sección, idéntico al de la portada */
.stack-lema{
  font-size:clamp(15px,1.6vw,19px); font-weight:500; line-height:1.42; letter-spacing:normal;
  color:var(--amarillo); margin-top:clamp(14px,1.8vw,22px);
}
.stack-lema b{font-weight:500; color:inherit;}

/* ── "Para quién" integrado al final de Servicios ── */
.para-quien{
  margin-top:clamp(34px,4.6vw,64px); padding-top:clamp(30px,4vw,50px);
  border-top:1px solid var(--linea);
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,3vw,54px); align-items:start;
}
.para-quien h3{
  font-size:clamp(24px,3.4vw,46px); font-weight:700; line-height:1.05; letter-spacing:-0.03em; color:var(--blanco);
}
.para-quien h3 em{font-style:italic; font-weight:400; color:var(--gris);}
.para-quien p{font-size:clamp(14.5px,1.55vw,18px); line-height:1.6; color:var(--gris); max-width:56ch;}
@media(max-width:820px){ .para-quien{grid-template-columns:1fr; gap:16px;} }
#modalidades .sec-head h2 em{color:var(--amarillo);}
.mlabel{font-style:italic; font-size:clamp(16px,2vw,24px); letter-spacing:normal; text-transform:none; color:rgba(242,239,231,.5);}
#modalidades .sec-head p{max-width:none; text-wrap:pretty;}
@media(min-width:981px){ #modalidades .sec-head{align-items:flex-end;} #modalidades .sec-head p{text-align:right;} }
/* la garantía, en cursiva y al tamaño de los titulares de sección */
.garantia .qmark{font-style:italic; font-weight:400; font-size:clamp(32px,5.2vw,76px); line-height:1.06;}
.garantia .qmark b, .garantia .qmark .y, .garantia .qmark .it{font-style:italic; font-weight:400;}
.garantia .qmark{font-size:clamp(19px,2.4vw,34px);}
.garantia .qmark{
  max-width:42ch; margin:0 auto; text-align:center;
  text-wrap:balance; hyphens:none; line-height:1.25;
}

/* PRUEBA A · cambio de tipografía: cursiva, más grande y sin tracking */
.btn--tipo{font-style:italic; font-size:16.5px; letter-spacing:0; padding:17px 34px;}
/* PRUEBA B · cambio de forma: rectángulo de esquinas mínimas */
.btn--forma{border-radius:4px; padding:18px 32px; letter-spacing:.06em; text-transform:uppercase; font-size:12.5px;}

/* ── Todos los botones en cursiva, sin mayúsculas forzadas (Aina 29/07/2026) ── */
.btn, .wa-fab, .lm-btn, .cookie-btn, .nl-form button, #nav .nav-cta{
  font-style:italic; letter-spacing:0; text-transform:none;
}
.btn{font-size:16.5px; padding:17px 34px; border-radius:100px;}
#nav .nav-cta{font-size:14.5px; padding:12px 22px;}
.wa-fab{font-size:16px;}

/* ── Caso Kibo · implantación y fijo mensual ── */
.caso-dos{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:clamp(30px,4vw,52px);}
.caso-bloque{border:1px solid var(--linea); border-radius:20px; padding:28px 26px 30px; background:var(--negro-2);}
.caso-bloque__label{display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amarillo); margin-bottom:18px;}
.caso-bloque ul{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.caso-bloque li{position:relative; padding-left:20px; font-size:14.5px; line-height:1.5; color:var(--gris);}
.caso-bloque li::before{content:'·'; position:absolute; left:4px; color:var(--amarillo); font-weight:700;}
.caso-bloque li b{color:var(--blanco); font-weight:500;}
@media(max-width:820px){ .caso-dos{grid-template-columns:1fr;} }

/* el menú tiene un enlace más: se aprieta un poco para que no se parta */
@media(min-width:861px){
  #nav .menu{gap:22px;}
  #nav .menu a{font-size:12.5px; white-space:nowrap;}
}

/* ═══════════════════════════════════════════════════════════
   Fuera el rótulo pequeño en mayúsculas neón (muy de plantilla).
   Pasa a cursiva en caja baja, como el resto de acentos de BEAI.
   ═══════════════════════════════════════════════════════════ */
.eyebrow{
  font-style:italic; text-transform:none; letter-spacing:0;
  font-size:clamp(15px,1.6vw,19px); font-weight:400; color:var(--gris);
  margin-bottom:clamp(14px,1.8vw,22px);
}
.caso-bloque__label{font-style:italic; text-transform:none; letter-spacing:0; font-size:15px; color:var(--amarillo);}

/* ═══════════════════════════════════════════════════════════
   CONTENIDO CON IA · sección neón
   ═══════════════════════════════════════════════════════════ */
.ia{
  background:var(--amarillo); color:var(--marron); overflow:hidden; isolation:isolate;
  padding-top:clamp(120px,15vh,190px); padding-bottom:clamp(120px,15vh,190px);
}
/* fundidos para que el neón no entre de golpe */
.ia-fade{position:absolute; left:0; right:0; height:clamp(90px,13vh,170px); z-index:2; pointer-events:none;}
.ia-fade--top{top:0; background:linear-gradient(to bottom, var(--negro) 0%, rgba(58,42,36,.45) 38%, rgba(240,250,0,0) 100%);}
.ia-fade--bottom{bottom:0; background:linear-gradient(to top, var(--negro) 0%, rgba(58,42,36,.45) 38%, rgba(240,250,0,0) 100%);}
.ia > .wrap{position:relative; z-index:3;}

.ia h2{
  font-weight:700; font-size:clamp(32px,5.4vw,80px); line-height:1.02; letter-spacing:-0.035em; color:var(--marron);
}
.ia h2 em{font-style:italic; font-weight:400; color:rgba(58,42,36,.62);}
.ia-intro{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(18px,3vw,54px);
  margin-top:clamp(22px,3vw,36px); max-width:1050px;
}
.ia-intro p{font-size:clamp(15px,1.6vw,19px); line-height:1.55; color:rgba(58,42,36,.78);}
.ia-intro p b{color:var(--marron); font-weight:500;}

/* piezas: composición asimétrica, marco marrón, número grande en cursiva */
.ia-piezas{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3.4vw,56px); margin-top:clamp(44px,6vw,86px); align-items:start;}
.ia-pieza{position:relative; margin:0;}
.ia-pieza--baja{margin-top:clamp(28px,5vw,90px);}
.ia-pieza__num{
  position:absolute; top:-.42em; left:-.06em; z-index:2;
  font-style:italic; font-weight:700; font-size:clamp(52px,8vw,120px); line-height:1;
  color:var(--amarillo); -webkit-text-stroke:2px var(--marron); paint-order:stroke fill;
}
.ia-pieza__video{
  position:relative; border:1.5px solid var(--marron); border-radius:22px; overflow:hidden;
  background:var(--marron); box-shadow:14px 14px 0 0 rgba(58,42,36,.16);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ia-pieza:hover .ia-pieza__video{transform:translate(-4px,-4px); box-shadow:20px 20px 0 0 rgba(58,42,36,.24);}
.ia-pieza video{display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover;}
.ia-pieza figcaption{padding-top:clamp(16px,2vw,24px);}
.ia-pieza h3{font-size:clamp(19px,2.4vw,32px); font-weight:700; letter-spacing:-0.025em; line-height:1.1; margin-bottom:.4em; color:var(--marron);}
.ia-pieza figcaption p{font-size:clamp(14px,1.45vw,17px); line-height:1.55; color:rgba(58,42,36,.72);}
.ia-pieza figcaption p b{color:var(--marron); font-weight:500;}

/* botón sobre neón: invertido */
.btn-ia{
  display:inline-flex; align-items:center; gap:12px; margin-top:clamp(38px,5vw,70px);
  background:var(--marron); color:var(--amarillo); border:1px solid var(--marron); border-radius:100px;
  font-style:italic; font-size:16.5px; font-weight:500; padding:17px 34px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-ia:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(58,42,36,.28);}
@media(max-width:820px){
  .ia-intro{grid-template-columns:1fr; gap:14px;}
  .ia-piezas{grid-template-columns:1fr; gap:44px;}
  .ia-pieza--baja{margin-top:0;}
}

/* el ID pesa más que la clase: se fija el color del texto sobre neón */
#contenido-ia .ia-intro p{color:rgba(58,42,36,.80);}
#contenido-ia .ia-intro p b{color:var(--marron); font-weight:500;}
#contenido-ia .ia-pieza figcaption p{color:rgba(58,42,36,.74);}
#contenido-ia .ia-pieza figcaption p b{color:var(--marron); font-weight:500;}

/* ── Kibo · antes y después ── */

@media(max-width:820px){ .antes-despues{grid-template-columns:1fr; gap:18px;} }

/* ── Comparador antes / después ── */
.cmp{position:relative; aspect-ratio:1/1; width:100%; overflow:hidden; border-radius:20px;
  border:1px solid var(--linea); background:var(--crema); cursor:ew-resize; touch-action:pan-y; user-select:none;}
.cmp__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none;}
.cmp__top{position:absolute; inset:0; clip-path:inset(0 50% 0 0); will-change:clip-path;}
.cmp__label{position:absolute; top:16px; z-index:3; padding:7px 14px; border-radius:100px;
  font-style:italic; font-size:13px; color:var(--marron);
  background:rgba(242,239,231,.72); border:1px solid rgba(58,42,36,.18);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:opacity .3s var(--ease);}
.cmp__label--a{left:16px;} .cmp__label--b{right:16px;}
.cmp__rule{position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; z-index:4;
  background:var(--amarillo); box-shadow:0 0 16px rgba(240,250,0,.55); pointer-events:none; will-change:left;}
.cmp__handle{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:auto;
  width:46px; height:46px; display:grid; place-items:center; border-radius:50%; cursor:ew-resize;
  background:var(--marron); border:2px solid var(--amarillo); color:var(--amarillo);
  box-shadow:0 0 0 6px rgba(240,250,0,.16), 0 0 26px rgba(240,250,0,.35);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.cmp__handle:hover{transform:translate(-50%,-50%) scale(1.06);}
.cmp__handle:focus-visible{outline:2px solid var(--amarillo); outline-offset:4px;}
.cmp__handle svg{width:18px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

.cmp__handle{padding:0;}

/* comparador más contenido y en formato apaisado */
.cmp{aspect-ratio:16/10;}

.cmp__label{top:12px; font-size:12px; padding:6px 12px;}
.cmp__label--a{left:12px;} .cmp__label--b{right:12px;}
.cmp__handle{width:40px; height:40px;}
#caso .caso-top h2{font-weight:700; font-size:clamp(32px,5.2vw,76px); line-height:1.02; letter-spacing:-0.03em;}
#caso .caso-top h2 em{font-style:italic; font-weight:400; color:var(--gris);}
#caso .caso-top h2{text-wrap:balance; font-size:clamp(30px,4.4vw,62px);}

.caso-aviso{margin-top:clamp(28px,3.6vw,48px); font-size:clamp(16px,1.9vw,24px); line-height:1.45;
  color:var(--gris); max-width:62ch;}
.caso-aviso b{color:var(--blanco); font-weight:500;}
.caso-aviso b:last-of-type{color:var(--amarillo); font-weight:700;}
/* la pista va fuera del marco, debajo de la imagen */

@media(max-width:820px){ .antes-despues{grid-template-columns:1fr; grid-template-areas:"img" "pista" "txt";} }
/* el aviso del x6, centrado y en cursiva amarilla */
.caso-aviso{
  margin-left:auto; margin-right:auto; max-width:46ch; text-align:center;
  font-style:italic; color:var(--amarillo); text-wrap:balance;
}
.caso-aviso b{color:var(--amarillo); font-weight:500; font-style:italic;}
.caso-aviso b:last-of-type{font-weight:700;}
#caso .caso-top h2 em{color:var(--amarillo);}
/* el comparador ocupa el alto del bloque de texto; la pista va encima */

/* sin pista y más pegado al aviso amarillo */

.caso-aviso{margin-bottom:0;}

/* ── Comparadores de perfil y feed ── */

@media(max-width:560px){ .cmp-grid{grid-template-columns:1fr; max-width:340px;} }

/* ── Mockups: móvil y navegador ── */
.mock-tel{position:relative; padding:9px; border-radius:34px; background:linear-gradient(160deg,#4a382f,#241a15 60%);
  box-shadow:0 0 0 1px rgba(242,239,231,.14), 0 22px 50px rgba(0,0,0,.45); }
.mock-tel .cmp{border-radius:26px; border:none;}
.mock-tel__isla{position:absolute; z-index:6; top:17px; left:50%; transform:translateX(-50%);
  width:74px; height:20px; border-radius:100px; background:#150f0c;}
.mock-tel .cmp__label{top:44px;}

.mock-nav{border-radius:16px; overflow:hidden; border:1px solid var(--linea); background:var(--negro-2);
  box-shadow:0 22px 50px rgba(0,0,0,.4);}
.mock-nav__barra{display:flex; align-items:center; gap:7px; padding:11px 14px; background:#2a1e19;
  border-bottom:1px solid var(--linea);}
.mock-nav__barra i{width:10px; height:10px; border-radius:50%; background:rgba(242,239,231,.22);}
.mock-nav__barra span{margin-left:12px; font-size:11.5px; color:rgba(242,239,231,.45);
  background:rgba(242,239,231,.06); padding:4px 12px; border-radius:100px;}
.mock-nav .cmp{border-radius:0; border:none;}

/* las capturas se ven enteras: el marco toma la proporción de la imagen */

/* más pequeñas: es una prueba visual, no el protagonista */

.mock-tel{padding:7px; border-radius:26px;}
.mock-tel .cmp{border-radius:20px;}
.mock-tel__isla{top:13px; width:56px; height:15px;}
.mock-tel .cmp__label{top:34px; font-size:11px; padding:5px 10px;}
.mock-tel .cmp__handle, .mock-nav .cmp__handle{width:32px; height:32px;}
.mock-tel .cmp__handle svg, .mock-nav .cmp__handle svg{width:14px; height:11px;}
.mock-nav__barra{padding:8px 11px;}
.mock-nav__barra i{width:8px; height:8px;}
.mock-nav__barra span{font-size:10.5px; padding:3px 10px;}

/* antes / después fijos, fuera del marco */
.cmp-cab{display:flex; justify-content:space-between; margin-bottom:9px; padding:0 4px;
  font-style:italic; font-size:12.5px; color:var(--gris);}
.cmp-cab span:last-child{color:var(--amarillo);}
.cmp-cab--logo{grid-area:pista; max-width:460px; margin-bottom:10px;}

/* Instagram a la izquierda, Facebook apilado a su derecha */

@media(max-width:560px){ .cmp-grid{grid-template-columns:1fr; max-width:340px;} }
/* el logo, dos marcos enfrentados en vez de comparador */

/* ═══════════ Kibo · rejilla visual del antes y después ═══════════ */

.kv{margin:0; display:flex; flex-direction:column;}

@media(max-width:520px){ .kibo-visual{grid-template-columns:1fr; max-width:340px;} }
/* rejilla final: dos Facebook a la izquierda, dos Instagram a la derecha */

/* apilado: logo · dos móviles pequeños · dos ordenadores */

/* todo centrado */


/* ═══════════ Kibo · antes y después (bloque único y final) ═══════════ */
.kibo-visual{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px; max-width:560px; margin:clamp(26px,3.4vw,44px) auto 0;
}
.kv{margin:0; min-width:0;}
.kv-logo{grid-column:1 / -1;}
.kv-fb, .kv-fb2{grid-column:1 / -1;}
.kv-ig1{grid-column:1;}
.kv-ig2{grid-column:2;}
.kv-web1, .kv-web2{grid-column:1 / -1;}
.logo-par{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.logo-marco{border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--linea);}
.logo-marco img{display:block; width:100%; height:auto;}
.cmp--alto{aspect-ratio:540/1056; width:100%;}
.cmp--pc{aspect-ratio:1000/536; width:100%;}
.cmp--alto .cmp__img, .cmp--pc .cmp__img{object-fit:fill;}
@media(max-width:560px){
  .kibo-visual{grid-template-columns:1fr; max-width:320px;}
  .kv-ig1,.kv-ig2{grid-column:1;}
}
.caso-track figure{width:clamp(130px,13vw,170px);}
/* corte limpio en vez de degradado, y vídeos más pequeños */
.ia-fade{display:none;}
.ia-piezas{max-width:640px; gap:clamp(16px,2.2vw,30px);}
.ia-pieza__num{font-size:clamp(38px,5vw,72px);}
.ia-pieza h3{font-size:clamp(17px,2vw,24px);}
.ia-pieza figcaption p{font-size:clamp(13px,1.3vw,15px);}
.ia-pieza__video{box-shadow:none;}
.ia-pieza:hover .ia-pieza__video{transform:translateY(-4px); box-shadow:none;}
.ia-piezas{align-items:start;}
.ia-intro{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1080px;}
@media(max-width:860px){ .ia-intro{grid-template-columns:1fr;} }
.ia-intro{grid-template-columns:1fr; max-width:70ch; gap:14px;}
.btn-ia{margin:clamp(20px,2.6vw,32px) 0 0;}
.ia-piezas{margin-top:clamp(30px,4vw,52px);}
/* los dos vídeos, exactamente del mismo tamaño */
.ia-piezas{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;}
.ia-pieza__video{aspect-ratio:9/16; width:100%;}
.ia-pieza video{width:100%; height:100%; aspect-ratio:auto; object-fit:cover;}
/* la sección de IA pasa a tarjeta neón tipo popup sobre el marrón */
.ia{background:transparent; padding-top:clamp(60px,8vh,110px); padding-bottom:clamp(60px,8vh,110px);}
.ia > .wrap{background:var(--amarillo); border-radius:28px; padding:clamp(30px,4.4vw,64px);
  box-shadow:0 30px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(58,42,36,.18); max-width:1080px;}
.ia-intro, .ia-piezas{max-width:none;}
.ia-piezas{max-width:600px;}
.ia-piezas{margin-left:auto; margin-right:auto; justify-items:center;}
.faq-header{text-align:center;}
.faq-header h2{font-weight:700; font-size:clamp(30px,4.6vw,66px); line-height:1.02; letter-spacing:-0.03em;}
.faq-header h2 em{font-style:italic; font-weight:400; color:var(--gris);}
/* vídeos quietos, trazo más grueso y más aire entre ellos */
.ia-pieza__video{border-width:3px; transition:none;}
.ia-pieza:hover .ia-pieza__video{transform:none; box-shadow:none;}
.ia-piezas{gap:clamp(26px,3.4vw,52px);}
/* todos los titulares de sección, al mismo tamaño */
.statement h2,
.sec-head h2,
#caso .caso-top h2,
.ia h2,
.faq-header h2,
.cta h2{font-size:clamp(30px,4.6vw,66px); line-height:1.03; letter-spacing:-0.03em;}
.ia-pieza__video{border-width:5px;}
/* a pantalla completa se respeta el 9:16, sin recortar ni estirar */
.ia-pieza video:fullscreen,
.ia-pieza video:-webkit-full-screen{object-fit:contain; width:100%; height:100%; background:#000;}
/* el statement, más grande que el resto */
.statement h2{font-size:clamp(38px,6.4vw,96px); line-height:1.0;}
#problema{padding-top:clamp(90px,11vh,140px);}

/* ═══════════ CTA final ═══════════ */
.cta{overflow:hidden; text-align:left;}
.cta-caja{
  position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(26px,4vw,64px); align-items:center;
  border:1px solid var(--linea); border-radius:28px; background:rgba(46,33,28,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:clamp(30px,4.2vw,60px); max-width:1080px; margin:0 auto;
}
.cta-txt h2{margin-bottom:16px;}
.cta-txt h2 em{font-style:italic; font-weight:400; color:var(--amarillo);}
.cta-txt p{font-size:clamp(14.5px,1.55vw,18px); line-height:1.6; color:var(--gris); max-width:52ch; margin-bottom:clamp(20px,2.6vw,30px);}
.cta-canales{list-style:none; margin:0; padding:0; border-top:1px solid var(--linea);}
.cta-canales li{border-bottom:1px solid var(--linea);}
.cta-canales a{
  display:grid; grid-template-columns:1fr auto 22px; align-items:center; gap:14px;
  padding:16px 4px; transition:padding-left .35s var(--ease), color .3s var(--ease);
}
.cta-canales span{font-style:italic; font-size:13.5px; color:var(--gris); transition:color .3s;}
.cta-canales b{font-weight:500; font-size:clamp(14px,1.5vw,17px); color:var(--blanco); transition:color .3s;}
.cta-canales i{justify-self:end; font-style:normal; color:rgba(242,239,231,.35); transition:transform .35s var(--ease), color .3s;}
.cta-canales a:hover{padding-left:14px;}
.cta-canales a:hover b, .cta-canales a:hover span{color:var(--amarillo);}
.cta-canales a:hover i{transform:translateX(5px); color:var(--amarillo);}
@media(max-width:860px){ .cta-caja{grid-template-columns:1fr; gap:22px;} }
/* aviso de calidad de los vídeos */
.ia-nota{margin-top:clamp(24px,3vw,38px); max-width:640px; margin-left:auto; margin-right:auto; text-align:center;}
.ia-nota p{font-size:clamp(13.5px,1.4vw,16px); line-height:1.55; color:rgba(58,42,36,.72);}
.ia-nota p b{color:var(--marron); font-weight:500;}
.ia-nota__btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:16px;}
.ia-nota .btn-ia{margin:0; font-size:14.5px; padding:13px 24px;}
.btn-ia--ghost{background:transparent; color:var(--marron); border:1.5px solid var(--marron);}
.btn-ia--ghost:hover{background:rgba(58,42,36,.08); box-shadow:none;}
/* páginas interiores: portada corta */
.pag-hero{position:relative; overflow:hidden; padding-top:clamp(140px,18vh,210px); padding-bottom:clamp(70px,10vh,120px);}
.pag-hero > .wrap{position:relative; z-index:2;}
.miga{font-size:13px; color:var(--gris); margin-bottom:clamp(18px,2.4vw,28px);}
.miga a{border-bottom:1px solid rgba(242,239,231,.25);}
.miga a:hover{color:var(--amarillo); border-color:var(--amarillo);}
.miga b{color:var(--blanco); font-weight:400;}
.pag-hero h1{font-weight:700; font-size:clamp(34px,5.6vw,80px); line-height:1.02; letter-spacing:-0.035em;}
.pag-hero h1 em{font-style:italic; font-weight:400; color:var(--amarillo);}
.pag-lead{margin-top:clamp(18px,2.4vw,28px); max-width:62ch; font-size:clamp(15px,1.6vw,19px); line-height:1.6; color:var(--gris);}
.pag-lead b{color:var(--blanco); font-weight:500;}
.pag-btns{display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(24px,3vw,36px);}
.pag-lema{margin-top:clamp(20px,2.6vw,30px); font-size:clamp(15px,1.6vw,19px); font-weight:500; color:var(--amarillo);}
.es-aqui{color:var(--amarillo) !important;}
.nav-drop{position:relative;}
.nav-drop__btn{display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:12.5px; letter-spacing:.04em; color:var(--blanco); transition:color .3s;}
.nav-drop__btn svg{width:10px; height:7px; transition:transform .3s var(--ease);}
.nav-drop:hover .nav-drop__btn, .nav-drop:focus-within .nav-drop__btn{color:var(--amarillo);}
.nav-drop:hover .nav-drop__btn svg{transform:rotate(180deg);}
.nav-drop__menu{opacity:0; visibility:hidden; pointer-events:none;}
.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-drop__menu a{font-size:13px; padding:9px 12px; border-radius:10px; color:var(--blanco); white-space:nowrap; transition:background .25s, color .25s;}
.nav-drop__menu a:hover{background:rgba(240,250,0,.1); color:var(--amarillo);}
.nav-drop__sep{display:block; margin:8px 12px 4px; font-style:italic; font-size:11.5px; color:rgba(242,239,231,.4);}
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:clamp(26px,3.4vw,44px);}
.galeria img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:10px;
  border:1px solid var(--linea); transition:transform .4s var(--ease), border-color .3s;}
.galeria img:hover{transform:translateY(-4px); border-color:rgba(240,250,0,.45);}
.ia-piezas--uno{grid-template-columns:minmax(0,320px); justify-content:center;}
.miga--hero{margin-bottom:clamp(14px,2vw,22px);}
#para-quien-ia{padding-top:clamp(20px,3vh,40px);}
#proceso-ia{padding-bottom:clamp(30px,4vh,50px);}
/* portada corta para páginas sin mucho contenido (blog) */
.hero--corto{min-height:0 !important; padding-top:clamp(130px,17vh,190px) !important; padding-bottom:clamp(50px,7vh,90px) !important;}
.hero--corto .arco{inset:auto 0 -180px 0; height:520px;}
.hero--corto .arco i:nth-child(1){bottom:-520px;}
.hero--corto .arco i:nth-child(2){top:calc(100% - 60px);}
.hero--corto .arco i:nth-child(3){bottom:150px;}
.blog-vacio{min-height:100svh; display:flex; align-items:center;}
.blog-vacio h1{font-weight:700; font-size:clamp(32px,5.2vw,74px); line-height:1.02; letter-spacing:-0.035em;}
.blog-vacio h1 em{font-style:italic; font-weight:400; color:var(--gris);}

/* Enlace a la otra línea de negocio (BEAI Real Estate) */
#nav .nav-re{opacity:.65;letter-spacing:.06em}
#nav .nav-re:hover{opacity:1}