/* ===== Tipografias autohospedadas (sin terceros) =====
   Inter — SIL Open Font License 1.1 (assets/fonts/LICENSE-Inter.txt)
   Clash Display — ITF Free Font License, autohospedada segun su seccion 01
   (assets/fonts/LICENSE-ClashDisplay.txt) */
@font-face{font-family:'Clash Display';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('../assets/fonts/clash-display-variable.woff2') format('woff2-variations');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/inter-700.woff2') format('woff2');}

/* ============================================================
   VÓRTEX v2 — Premium one-page · negro · azul · dorado
   ============================================================ */
:root{
  color-scheme:dark; /* evita que el modo oscuro de Samsung Internet/Chrome reprocese los degradados */
  --black:#050505; --black-2:#0A0A0F; --panel:#12121C; --panel-2:#1A1A2E;
  --blue:#0047FF; --blue-deep:#002299; --blue-shadow:#001166; --blue-glow:rgba(0,71,255,.45);
  --gold:#C9A84C; --gold-light:#F5D78E; --gold-dark:#8B6914;
  /* Dorado medio: solo para TEXTO pequeño sobre fondo oscuro (cumple contraste WCAG AA 4.5:1).
     --gold-dark se mantiene para gradientes y detalles decorativos. */
  --gold-mid:#A6873B;
  --gold-soft:rgba(201,168,76,.10); --gold-line:rgba(201,168,76,.22);
  --white:#F0F4FF; --grey:#9aa0b5; --grey-dim:#828a9e;
  --font-display:"Clash Display","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --maxw:1280px; --ease:cubic-bezier(.16,.84,.34,1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- ACCESIBILIDAD: FOCO DE TECLADO (WCAG 2.1 AA · 2.4.7) ----------
   :focus-visible se activa SOLO cuando se navega con el teclado (Tab), nunca
   al hacer clic con el mouse. Por eso no ensucia el diseño para quien usa
   puntero, y a la vez quien navega con teclado siempre ve dónde está. */
:focus-visible{ outline:3px solid var(--gold-light); outline-offset:4px; border-radius:6px; }
/* Sobre el botón dorado el contraste del dorado es bajo: ahí el foco va en blanco */
.btn-primary:focus-visible,.plan.featured .btn-primary:focus-visible{ outline-color:var(--white); }
/* Los puntitos laterales y los links del menú necesitan más aire alrededor */
.dots a:focus-visible{ outline-offset:6px; }
.nav-links a:focus-visible,.nav-logo:focus-visible{ outline-offset:8px; }

/* ---------- SALTAR AL CONTENIDO (WCAG 2.1 AA · 2.4.1) ----------
   Enlace invisible que aparece al presionar Tab una vez. Permite a quien navega
   con teclado o lector de pantalla saltarse el menú e ir directo al contenido. */
.skip-link{ position:fixed; top:-120px; left:16px; z-index:1000; background:var(--gold);
  color:var(--black); padding:13px 22px; border-radius:0 0 12px 12px; font-family:var(--font-body);
  font-weight:600; font-size:.9rem; text-decoration:none; transition:top .25s var(--ease); }
.skip-link:focus{ top:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--font-body); background:var(--black); color:var(--white); line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
@media (hover:hover) and (pointer:fine){ html.custom-cursor body{ cursor:none; } html.custom-cursor a,html.custom-cursor button,html.custom-cursor .clickable{ cursor:none; } }
::selection{ background:var(--gold); color:#000; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-.02em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); }

.gold{ color:var(--gold); }
.gold-grad{ background:linear-gradient(120deg,var(--gold-light),var(--gold) 55%,var(--gold-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow{ font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.8em; }
.eyebrow::before{ content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.section{ position:relative; padding:clamp(90px,12vh,160px) 0; }
.section-num{ font-family:var(--font-display); font-size:.85rem; letter-spacing:.3em; color:var(--gold-dark); }

/* Reveal */
.reveal{ opacity:0; transform:translateY(38px); }
.reveal.in{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease); }
/* Mask reveal */
.mask{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease); }
.mask.in{ clip-path:inset(0 0 0 0); }

/* ---------- UTILIDADES RESPONSIVE ----------
   .only-desktop se muestra sobre 768px; .only-mobile, bajo 768px.
   Usadas en los CTAs del hero: en móvil el primario es WhatsApp. */
@media (min-width:769px){ .only-mobile{ display:none!important; } }
@media (max-width:768px){ .only-desktop{ display:none!important; } }

/* ---------- CURSOR ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none;
  z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:screen; }
.cursor-dot{ width:6px; height:6px; background:#4d83ff; }
.cursor-ring{ width:34px; height:34px; border:1px solid var(--gold-line);
  transition:width .3s var(--ease),height .3s var(--ease),border-color .3s; }
.cursor-ring.hover{ width:56px; height:56px; border-color:var(--gold); }
@media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- PRELOADER ---------- */
#preloader{ position:fixed; inset:0; z-index:10000; background:var(--black); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:24px;
  transition:opacity .8s ease,visibility .8s; }
#preloader.done{ opacity:0; visibility:hidden; }
.pre-logo{ font-family:var(--font-display); font-size:clamp(2rem,6vw,3.4rem); font-weight:600;
  letter-spacing:.18em; color:var(--white); }
.pre-logo .o{ color:var(--gold); }
.pre-bar{ width:160px; height:2px; background:rgba(255,255,255,.08); overflow:hidden; border-radius:2px; }
.pre-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--gold)); animation:preload 1.6s var(--ease) forwards; }
@keyframes preload{ to{ width:100%; } }

/* ---------- NAV ---------- */
.nav{ position:fixed; top:0; left:0; width:100%; z-index:900; display:flex; align-items:center;
  justify-content:space-between; padding:20px clamp(20px,5vw,64px);
  transition:background .4s,backdrop-filter .4s,padding .4s,border-color .4s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(5,5,5,.8); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06); padding:14px clamp(20px,5vw,64px); }
.nav-logo{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; letter-spacing:.14em; }
.nav-logo .o{ color:var(--gold); }
.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{ font-size:.84rem; letter-spacing:.04em; color:var(--grey); transition:color .3s; position:relative; }
.nav-links a:hover{ color:var(--white); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold); transition:width .3s var(--ease); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ padding:10px 22px; border:1px solid var(--gold-line); border-radius:40px;
  color:var(--gold)!important; font-weight:500; transition:all .35s var(--ease); }
.nav-cta:hover{ background:var(--gold); color:#000!important; border-color:var(--gold); }
.nav-cta::after{ display:none; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:10px; margin:-10px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.burger span{ width:26px; height:2px; background:var(--white); transition:.3s; }
@media (max-width:1240px){
  /* Sin backdrop-filter (pesado en móvil y provoca "saltos"); el fondo casi opaco basta.
     Cerrado queda oculto (visibility) para que no se pinte ni reciba toques. */
  .nav-links{ position:fixed; inset:0; background:#050507; backdrop-filter:none; -webkit-backdrop-filter:none;
    flex-direction:column; justify-content:center; gap:26px; transform:translateX(100%);
    visibility:hidden; will-change:transform; overflow-y:auto; -webkit-overflow-scrolling:touch;
    transition:transform .32s var(--ease), visibility 0s linear .32s; }
  .nav-links.open{ transform:none; visibility:visible; transition:transform .32s var(--ease), visibility 0s; }
  .nav-links a::after{ display:none; }
  .nav-links a{ font-size:1.1rem; }
  .burger{ display:flex; z-index:901; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
.dots{ position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:880; display:flex; flex-direction:column; gap:13px; }
.dots a{ width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.25); transition:.3s; }
.dots a.active{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 12px var(--gold); }
@media (max-width:1100px){ .dots{ display:none; } }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-flex; align-items:center; gap:.7em; padding:16px 34px; border-radius:46px;
  font-weight:600; font-size:.92rem; letter-spacing:.02em; transition:transform .4s var(--ease),box-shadow .4s,border-color .4s,color .4s,background .4s;
  border:1px solid transparent; position:relative; }
.btn-primary{ background:linear-gradient(120deg,var(--gold-light),var(--gold) 60%,var(--gold-dark));
  color:#1a1300; box-shadow:0 10px 40px -8px rgba(201,168,76,.5); }
.btn-primary:hover{ box-shadow:0 18px 50px -8px rgba(201,168,76,.65); }
.btn-ghost{ border-color:rgba(255,255,255,.22); color:var(--white); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn svg{ width:16px; height:16px; }
.magnetic{ will-change:transform; }

/* ---------- PHOTO BANDS (duotono Ñuble) ---------- */
.photoband{ position:relative; isolation:isolate; overflow:hidden; }
.photoband .bg-img{ position:absolute; inset:-7%; z-index:0; background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.08) brightness(.6); transform:scale(1.06);
  animation:kenburns 26s ease-in-out infinite alternate; }
.photoband .bg-img.loaded{ animation:kenburns 26s ease-in-out infinite alternate, fadeImg 1.4s ease forwards; }
@keyframes fadeImg{ from{opacity:.0} to{opacity:1} }
.photoband .duo-blue{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(125deg,#001166,#0047FF 60%,#0a1a55); mix-blend-mode:color; opacity:.6; }
.photoband .duo-gold{ position:absolute; inset:0; z-index:2;
  background:radial-gradient(ellipse 60% 50% at 70% 20%, rgba(245,215,142,.55), transparent 70%); mix-blend-mode:overlay; }
.photoband .legib{ position:absolute; inset:0; z-index:3;
  background:linear-gradient(180deg, rgba(5,5,5,.78), rgba(5,5,7,.45) 38%, rgba(5,5,5,.9)); }
.photoband > .container,.photoband > .pb-content{ position:relative; z-index:4; }
@keyframes kenburns{ from{ transform:scale(1.06) translate(0,0); } to{ transform:scale(1.16) translate(-1.5%,-1.5%); } }
@media (prefers-reduced-motion:reduce){ .photoband .bg-img{ animation:none!important; } }
/* Equipos de gama baja (html.lowfx, detectado en js/ui.js): sin animación Ken Burns */
html.lowfx .photoband .bg-img{ animation:none!important; transform:scale(1.06); opacity:1; }

/* ---------- HERO ---------- */
#hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,34,153,.35), transparent 70%),
    radial-gradient(circle at 50% 50%, var(--black-2), var(--black) 70%); }
#vortex-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.hero-vignette{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, transparent 30%, rgba(5,5,5,.55) 80%, var(--black) 100%); }
.hero-content{ position:relative; z-index:3; padding:0 24px; max-width:1000px; }
.hero-logo{ font-family:var(--font-display); font-weight:600; font-size:clamp(3.4rem,11vw,9rem);
  letter-spacing:.06em; line-height:1; margin-bottom:.12em; text-shadow:0 2px 60px rgba(0,71,255,.4); }
.hero-logo .o{ background:linear-gradient(160deg,var(--gold-light),var(--gold) 50%,var(--gold-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 40px rgba(201,168,76,.5); }
.hero-sub{ font-family:var(--font-body); font-weight:500; font-size:clamp(.7rem,1.6vw,.92rem);
  letter-spacing:.42em; text-transform:uppercase; color:var(--grey); margin-bottom:1.4em; }
.hero-tag{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.4rem,3.6vw,2.6rem);
  line-height:1.18; color:var(--white); max-width:20ch; margin:0 auto .7em; letter-spacing:-.01em; }
.hero-tag em{ font-style:normal; }
.hero-human{ color:var(--grey); font-size:clamp(.95rem,1.6vw,1.1rem); max-width:46ch; margin:0 auto 2em; }
.hero-cta{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.scroll-hint{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.66rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--grey-dim); }
.scroll-hint .mouse{ width:22px; height:34px; border:1px solid rgba(255,255,255,.25); border-radius:14px; position:relative; }
.scroll-hint .mouse::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; background:var(--gold); border-radius:2px; transform:translateX(-50%); animation:scrollWheel 1.8s infinite; }
@keyframes scrollWheel{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

/* ---------- TRUST STRIP + COUNTERS ---------- */
#trust{ border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,var(--black),var(--black-2)); padding:54px 0; }
.trust-label{ text-align:center; font-size:.74rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-bottom:38px; }
.counters{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px 64px; text-align:center; max-width:560px; margin:0 auto; }
.counter .num{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1;
  background:linear-gradient(160deg,var(--white),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.counter .lab{ color:var(--grey); font-size:.86rem; margin-top:10px; letter-spacing:.02em; }
@media (max-width:760px){ .counters{ grid-template-columns:repeat(2,1fr); gap:34px 16px; } }

/* ---------- MANIFIESTO ---------- */
#porque{ text-align:center; background:var(--black-2); }
.manifesto-quote{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.8rem,5.5vw,4.2rem);
  line-height:1.12; letter-spacing:-.02em; max-width:16ch; margin:0 auto; }
.manifesto-quote .line{ display:block; }
.manifesto-quote .hl{ background:linear-gradient(120deg,var(--gold-light),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.manifesto-sub{ max-width:62ch; margin:2.4em auto 0; color:var(--grey); font-size:clamp(1rem,2vw,1.18rem); line-height:1.75; }

/* ---------- SECTION HEAD ---------- */
.sec-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(50px,7vw,86px); max-width:780px; }
.sec-title{ font-size:clamp(2rem,5vw,3.6rem); font-weight:600; }
.sec-lead{ color:var(--grey); font-size:clamp(1rem,1.8vw,1.18rem); line-height:1.7; max-width:60ch; }

/* ---------- PROBLEMA ---------- */
#problema{ background:var(--black); }
.empathy{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.3rem,2.8vw,1.9rem);
  line-height:1.3; color:var(--white); max-width:24ch; margin-bottom:54px; }
.fallas{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.falla{ position:relative; padding:42px 34px; border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.07); /* backdrop-filter eliminado: costo GPU alto, aporte visual casi nulo */
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s; overflow:hidden; }
.falla::before{ content:""; position:absolute; inset:0; border-radius:20px; padding:1px;
  background:linear-gradient(160deg,var(--gold-line),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; transition:opacity .5s; }
.falla:hover{ transform:translateY(-8px); border-color:rgba(0,71,255,.4); box-shadow:0 30px 60px -25px var(--blue-glow); }
.falla:hover::before{ opacity:1; }
.falla-ico{ width:58px; height:58px; margin-bottom:26px; color:var(--gold); display:flex; align-items:center;
  justify-content:center; border:1px solid var(--gold-line); border-radius:14px; background:var(--gold-soft); }
.falla-ico svg{ width:28px; height:28px; }
.falla h3{ font-size:1.4rem; margin-bottom:12px; }
.falla p{ color:var(--grey); font-size:.96rem; line-height:1.7; }
.falla .tag{ display:inline-block; margin-top:18px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-mid); }
.falla-foot{ margin-top:54px; padding-top:34px; border-top:1px solid rgba(255,255,255,.07);
  color:var(--grey); max-width:74ch; font-size:1.02rem; line-height:1.8; }

/* ---------- SOLUCIONES A TU MEDIDA ---------- */
#soluciones{ background:linear-gradient(180deg,var(--black),var(--black-2)); }
.sol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
/* Si queda una sola tarjeta en la ultima fila, va centrada y no pegada a la izquierda */
.sol-grid > .sol:nth-child(7):last-child{ grid-column:2; }
.sol{ position:relative; padding:38px 32px; border-radius:20px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg,var(--panel),var(--black-2)); transition:transform .5s var(--ease),border-color .5s,box-shadow .5s; overflow:hidden; }
.sol:hover{ transform:translateY(-8px); border-color:var(--gold-line); box-shadow:0 30px 70px -30px rgba(201,168,76,.35); }
.sol-ico{ width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,rgba(0,71,255,.18),rgba(201,168,76,.12)); border:1px solid var(--gold-line);
  color:var(--gold-light); margin-bottom:22px; transition:transform .5s var(--ease); }
.sol:hover .sol-ico{ transform:translateY(-5px) rotate(-4deg); }
.sol-ico svg{ width:26px; height:26px; }
.sol h3{ font-size:1.28rem; margin-bottom:10px; }
.sol p{ color:var(--grey); font-size:.93rem; line-height:1.6; margin-bottom:14px; }
.sol .who{ font-size:.8rem; color:var(--gold-mid); letter-spacing:.04em; font-style:italic; }
.sol-flow{ margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.flow-step{ position:relative; padding:28px 24px; border-radius:16px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.07); }
.flow-step .fn{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold); margin-bottom:10px; }
.flow-step h4{ font-size:1.05rem; margin-bottom:8px; }
.flow-step p{ color:var(--grey); font-size:.85rem; line-height:1.5; }
.flow-step::after{ content:"→"; position:absolute; right:-16px; top:50%; transform:translateY(-50%); color:var(--gold-dark); font-size:1.1rem; }
.flow-step:last-child::after{ display:none; }
/* Franja "Todo integrado, en un solo equipo" (fusión de la antigua sección Servicios) */
.sol-team{ margin-top:64px; padding-top:44px; border-top:1px solid rgba(255,255,255,.07); }
.sol-team p{ color:var(--grey); max-width:62ch; margin:18px 0 22px; line-height:1.7; }
.sol-team p strong{ color:var(--white); }
.sol-team-pills{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:900px){ .sol-grid{ grid-template-columns:1fr; } .sol-flow{ grid-template-columns:repeat(2,1fr); } .flow-step:nth-child(2)::after{ display:none; } }
@media (max-width:560px){ .sol-flow{ grid-template-columns:1fr; } .flow-step::after{ display:none; } }

/* ---------- IA ---------- */
#ia{ background:var(--black); overflow:hidden; }
.ia-wrap{ display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; }
.ia-canvas-wrap{ position:relative; aspect-ratio:1/1; max-width:560px; margin:0 auto; width:100%; }
#agents-canvas{ width:100%; height:100%; }
.ia-copy h2{ font-size:clamp(1.9rem,4vw,3rem); margin-bottom:22px; }
.ia-copy .big{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,3vw,2rem); line-height:1.25; margin-bottom:26px; }
.ia-copy p{ color:var(--grey); line-height:1.8; margin-bottom:18px; max-width:52ch; }
.ia-points{ list-style:none; margin-top:30px; display:flex; flex-direction:column; gap:16px; }
.ia-points li{ display:flex; gap:14px; align-items:flex-start; }
.ia-points .k{ color:var(--gold); font-weight:600; font-family:var(--font-display); min-width:110px; }
.ia-points .v{ color:var(--grey); font-size:.95rem; }
@media (max-width:880px){ .ia-wrap{ grid-template-columns:1fr; gap:40px; } }

/* ---------- CINEMATIC BAND ---------- */

/* ---------- ÑUBLE ---------- */
#nuble{ position:relative; }
.nuble-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.nuble-map{ position:relative; aspect-ratio:4/5; max-width:480px; margin:0 auto; width:100%; }
#nuble-canvas{ width:100%; height:100%; }
.nuble-copy h2{ font-size:clamp(1.9rem,4vw,3rem); margin-bottom:10px; }
.nuble-copy .quote{ font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--gold); margin:18px 0 26px; line-height:1.25; }
.nuble-copy p{ color:var(--grey); line-height:1.8; margin-bottom:24px; max-width:54ch; }
.nuble-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{ padding:9px 18px; border-radius:30px; border:1px solid rgba(255,255,255,.12); font-size:.82rem; color:var(--grey); transition:.4s; background:rgba(5,5,7,.55); }
.pill:hover{ border-color:var(--gold); color:var(--gold); }
@media (max-width:880px){ .nuble-wrap{ grid-template-columns:1fr; gap:40px; } }

/* ---------- CASOS ---------- */
#casos{ background:linear-gradient(180deg,var(--black-2),var(--black)); }
.cases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.case{ perspective:1400px; min-height:320px; }
.case-inner{ position:relative; width:100%; height:100%; min-height:320px; transition:transform .8s var(--ease); transform-style:preserve-3d; }
.case.flip .case-inner{ transform:rotateY(180deg); }
/* El giro por hover SOLO en dispositivos con mouse; en táctil manda el clic (.flip),
   así el segundo toque siempre devuelve la ficha a su posición normal. */
@media (hover:hover){ .case:hover .case-inner{ transform:rotateY(180deg); } }
.case-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:18px; padding:32px 28px;
  display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.case-front{ background:linear-gradient(160deg,var(--panel),var(--black-2)); }
.case-back{ background:linear-gradient(160deg,var(--blue-shadow),var(--black-2)); transform:rotateY(180deg); border-color:var(--gold-line); }
.case-cli{ font-family:var(--font-display); color:var(--gold); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px; }
.case-front h3{ font-size:1.18rem; line-height:1.3; margin-bottom:14px; }
.case-front p{ color:var(--grey); font-size:.92rem; line-height:1.6; }
.case-back h4{ color:var(--gold-light); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; }
.case-back p{ color:var(--white); font-size:.95rem; line-height:1.65; }
.case-flag{ margin-top:auto; font-size:.72rem; color:var(--grey-dim); letter-spacing:.06em; }

/* ---------- CERCANÍA ---------- */
#cercania{ background:var(--black-2); }
.cerc-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.cerc-photo{ position:relative; aspect-ratio:4/5; border-radius:22px; overflow:hidden; isolation:isolate; border:1px solid var(--gold-line); }
.cerc-photo .bg-img{ position:absolute; inset:-7%; background-size:cover; background-position:center; filter:grayscale(.5) contrast(1.05) brightness(.8); transform:scale(1.05); }
.cerc-photo .duo-blue{ position:absolute; inset:0; background:linear-gradient(160deg,var(--blue-shadow),transparent); mix-blend-mode:color; opacity:.5; z-index:1; }
.cerc-photo .legib{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(5,5,7,.7)); z-index:2; }
.cerc-photo .badge{ position:absolute; left:22px; bottom:22px; z-index:3; }
.cerc-photo .badge b{ font-family:var(--font-display); display:block; color:var(--white); font-size:1.05rem; }
.cerc-photo .badge span{ color:var(--gold); font-size:.8rem; }
.cerc-copy h2{ font-size:clamp(1.9rem,4vw,3rem); margin-bottom:24px; }
.cerc-copy p{ color:var(--grey); line-height:1.85; margin-bottom:20px; max-width:56ch; font-size:1.04rem; }
.cerc-copy p strong{ color:var(--white); }
.cerc-sign{ font-family:var(--font-display); color:var(--gold); margin-top:6px; font-size:1.05rem; }
.cerc-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; }
.wa-inline{ display:inline-flex; align-items:center; gap:.6em; padding:15px 28px; border-radius:46px;
  border:1px solid rgba(37,211,102,.4); color:#bff3d0; background:rgba(37,211,102,.08); font-weight:600; font-size:.92rem; transition:.4s var(--ease); }
.wa-inline:hover{ background:rgba(37,211,102,.18); border-color:#25D366; }
.wa-inline svg{ width:18px; height:18px; }
.cerc-duo-panel{ position:relative; aspect-ratio:4/5; border-radius:22px; border:1px solid var(--gold-line);
  background:linear-gradient(160deg,var(--panel),var(--black-2)); display:flex; align-items:center; justify-content:center; padding:30px; }
.cerc-duo{ display:flex; gap:34px; justify-content:center; align-items:flex-start; }
.cerc-avatar{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; max-width:150px; }
.cerc-avatar-ring{ width:118px; height:118px; border-radius:50%; overflow:hidden; border:2px solid var(--gold);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.65); background:var(--black-2); flex-shrink:0; }
.cerc-avatar-ring img{ width:100%; height:100%; object-fit:cover; display:block; }
.cerc-avatar-name{ font-family:var(--font-display); display:block; color:var(--white); font-size:1rem; line-height:1.3; }
.cerc-avatar-role{ color:var(--gold); font-size:.78rem; line-height:1.4; }
@media (max-width:880px){ .cerc-wrap{ grid-template-columns:1fr; gap:36px; } .cerc-duo-panel{ max-width:380px; margin:0 auto; aspect-ratio:auto; padding:38px 24px; } }
@media (max-width:600px){ .cerc-duo{ flex-direction:column; gap:26px; } }

/* ---------- PLANES ---------- */
#planes{ background:var(--black); }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:center; }
.plan{ position:relative; padding:44px 36px; border-radius:22px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(170deg,var(--panel),var(--black-2)); transition:transform .5s var(--ease),box-shadow .5s; }
.plan:hover{ transform:translateY(-6px); }
.plan.featured{ border-color:var(--gold); transform:scale(1.06);
  box-shadow:0 30px 80px -30px rgba(201,168,76,.5),inset 0 0 0 1px rgba(201,168,76,.2);
  background:linear-gradient(170deg,rgba(201,168,76,.08),var(--black-2)); }
.plan.featured:hover{ transform:scale(1.06) translateY(-6px); }
.plan-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(120deg,var(--gold-light),var(--gold-dark)); color:#1a1300; font-size:.68rem;
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:6px 18px; border-radius:30px; }
.plan-name{ font-family:var(--font-display); font-size:1.3rem; margin-bottom:6px; }
.plan-for{ color:var(--grey-dim); font-size:.84rem; margin-bottom:24px; min-height:40px; }
.plan-price{ font-family:var(--font-display); font-size:2.2rem; font-weight:600; margin-bottom:4px; }
.plan-price .uf{ color:var(--gold); }
.plan-price small{ font-family:var(--font-body); font-size:.82rem; color:var(--grey); font-weight:400; }
.plan-list{ list-style:none; margin:26px 0 30px; display:flex; flex-direction:column; gap:13px; }
.plan-list li{ display:flex; gap:11px; align-items:flex-start; color:var(--grey); font-size:.9rem; line-height:1.5; }
.plan-list svg{ width:17px; height:17px; color:var(--gold); flex-shrink:0; margin-top:2px; }
.plan .btn{ width:100%; justify-content:center; }
.plan-note{ text-align:center; color:var(--grey-dim); font-size:.82rem; margin-top:40px; max-width:60ch; margin-left:auto; margin-right:auto; }

/* ---------- FAQ ----------
   NOTA 19-08-2026: estos estilos están listos pero AÚN NO HAY sección FAQ en
   index.html. No hacen nada hasta que se agregue el markup. No borrar. */
#faq{ background:linear-gradient(180deg,var(--black),var(--black-2)); }
.faq-list{ display:flex; flex-direction:column; gap:14px; max-width:820px; margin:0 auto; }
.faq-item{ border:1px solid rgba(255,255,255,.08); border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  padding:6px 28px; transition:border-color .4s,background .4s; }
.faq-item:hover{ border-color:var(--gold-line); }
.faq-item[open]{ border-color:var(--gold-line); background:linear-gradient(160deg,rgba(201,168,76,.06),rgba(255,255,255,.01)); }
.faq-item summary{ list-style:none; cursor:pointer; padding:22px 0; display:flex; align-items:center;
  justify-content:space-between; gap:20px; font-family:var(--font-display); font-weight:500;
  font-size:1.05rem; color:var(--white); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:""; }
.faq-item summary:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; border-radius:8px; }
.faq-ic{ position:relative; width:20px; height:20px; flex-shrink:0; }
.faq-ic::before,.faq-ic::after{ content:""; position:absolute; background:var(--gold); border-radius:2px; transition:transform .35s var(--ease),opacity .35s var(--ease); }
.faq-ic::before{ left:0; top:9px; width:20px; height:2px; }
.faq-ic::after{ left:9px; top:0; width:2px; height:20px; }
.faq-item[open] .faq-ic::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ padding:0 0 24px; color:var(--grey); font-size:.96rem; line-height:1.7; max-width:66ch; }
.faq-a a{ color:var(--gold); text-decoration:underline; }
@media (max-width:600px){ .faq-item{ padding:4px 20px; } .faq-item summary{ font-size:.98rem; gap:14px; } }

/* ---------- CIERRE ---------- */
#cierre{ position:relative; text-align:center; overflow:hidden; min-height:90vh; display:flex; align-items:center; }
#cierre-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.3; z-index:4; pointer-events:none; }
.cierre-content{ position:relative; z-index:5; width:100%; }
.cierre-content h2{ font-size:clamp(2.4rem,7vw,5.6rem); line-height:1.05; margin-bottom:28px; }
.cierre-content .lead{ color:var(--grey); max-width:54ch; margin:0 auto 44px; font-size:clamp(1rem,2vw,1.18rem); line-height:1.7; }
.contact-form{ max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:16px; text-align:left; }
.field input,.field textarea{ width:100%; padding:16px 20px; background:rgba(255,255,255,.04); color:var(--white);
  border:1px solid rgba(255,255,255,.12); border-radius:12px; font-family:var(--font-body); font-size:.95rem; transition:border-color .3s,background .3s; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--gold); background:rgba(201,168,76,.05); }
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--grey-dim); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-ok{ display:none; color:var(--gold); text-align:center; padding:20px; font-family:var(--font-display); }
.form-consent{ display:flex; gap:10px; align-items:flex-start; text-align:left; }
.form-consent input[type="checkbox"]{ margin-top:3px; width:16px; height:16px; flex-shrink:0; accent-color:var(--gold); cursor:pointer; }
.form-consent label{ color:var(--grey); font-size:.8rem; line-height:1.5; }
.form-consent a{ color:var(--gold); text-decoration:underline; }
.form-trust{ display:flex; align-items:center; justify-content:center; gap:.5em; color:var(--grey); font-size:.8rem; margin-top:4px; }
.form-trust svg{ width:14px; height:14px; color:var(--gold); flex-shrink:0; }
.form-or{ text-align:center; color:var(--grey-dim); font-size:.82rem; margin-top:18px; }
.form-or a{ color:#bff3d0; }
@media (max-width:560px){ .row2{ grid-template-columns:1fr; } }

/* ---------- FOOTER ---------- */
.footer{ background:var(--black); border-top:1px solid rgba(255,255,255,.07); padding:60px 0 40px; }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; }
.foot-logo{ font-family:var(--font-display); font-size:1.6rem; font-weight:600; letter-spacing:.12em; margin-bottom:10px; }
.foot-logo .o{ color:var(--gold); }
.foot-tag{ color:var(--grey); font-size:.9rem; max-width:32ch; }
.foot-meta{ text-align:right; color:var(--grey-dim); font-size:.82rem; line-height:1.9; }
.foot-bottom{ margin-top:46px; padding-top:24px; border-top:1px solid rgba(255,255,255,.05); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--grey-dim); font-size:.76rem; }
.foot-conf{ color:var(--gold-mid); letter-spacing:.1em; }
@media (max-width:600px){ .foot-meta{ text-align:left; } .footer-grid{ flex-direction:column; } }

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{ position:fixed; right:24px; bottom:24px; z-index:950; display:flex; align-items:center; gap:0;
  height:60px; padding:0; border-radius:40px; overflow:hidden; background:linear-gradient(135deg,rgba(10,10,15,.96),rgba(18,18,28,.96));
  border:1px solid var(--gold-line); box-shadow:0 14px 40px -10px rgba(0,0,0,.6); transition:.45s var(--ease); }
.wa-float .ic{ width:60px; height:60px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#25D366; position:relative; }
.wa-float .ic svg{ width:28px; height:28px; }
.wa-float .ic::after{ content:""; position:absolute; inset:12px; border-radius:50%; border:2px solid rgba(37,211,102,.5); animation:waPulse 2.4s var(--ease) infinite; }
@keyframes waPulse{ 0%{ transform:scale(.7); opacity:.8; } 100%{ transform:scale(1.5); opacity:0; } }
.wa-float .tx{ max-width:0; white-space:nowrap; overflow:hidden; transition:max-width .5s var(--ease),padding .5s var(--ease); padding:0; }
.wa-float .tx b{ display:block; font-family:var(--font-display); color:var(--white); font-size:.86rem; }
.wa-float .tx span{ color:var(--gold); font-size:.72rem; }
.wa-float:hover{ border-color:var(--gold); }
.wa-float:hover .tx{ max-width:220px; padding-right:24px; }
@media (max-width:600px){ .wa-float .tx{ display:none; } .wa-float{ right:18px; bottom:18px; } }

/* ---------- RESPONSIVE GRIDS ---------- */
@media (max-width:900px){
  .fallas{ grid-template-columns:1fr; }
  .sol-grid{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .plan.featured{ transform:none; }
  .plan.featured:hover{ transform:translateY(-6px); }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition-duration:.01ms!important; } html{ scroll-behavior:auto; } }


/* ============================================================
   AJUSTES 24-08-2026 — hero premium, compactación, carrusel,
   casos compactos, sello IA/datos, Instagram, barra de progreso.
   Bloque nuevo: sobrescribe reglas anteriores por cascada.
   ============================================================ */

/* --- COMPACTACIÓN (T4): menos aire vertical --- */
.section{ padding:clamp(58px,7.5vh,112px) 0; }
.sec-head{ margin-bottom:clamp(30px,4vw,56px); }
#trust{ padding:44px 0; }
.sol-flow{ margin-top:48px; }
.sol-team{ margin-top:48px; padding-top:36px; }
.falla-foot{ margin-top:44px; }

/* --- BARRA DE PROGRESO DE SCROLL (T9) --- */
#scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:1001;
  background:linear-gradient(90deg,var(--blue),var(--gold)); box-shadow:0 0 12px rgba(201,168,76,.5);
  transition:width .12s linear; pointer-events:none; }

/* --- HERO PREMIUM: brillo (sheen) + entrada + glow azul --- */
.hero-logo{ position:relative;
  background:linear-gradient(100deg,#F0F4FF 32%,#ffffff 46%,#dbe6ff 54%,#F0F4FF 68%);
  background-size:230% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:heroSheen 7.5s ease-in-out infinite, heroRise 1.3s var(--ease) .25s both; }
.hero-logo::before{ content:""; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:118%; height:150%; z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,71,255,.38), transparent 68%);
  filter:blur(38px); animation:heroBreath 6.5s ease-in-out infinite; }
.hero-logo .o{ -webkit-background-clip:text; background-clip:text; }
.hero-sub{ animation:heroRise 1.1s var(--ease) .45s both; }
.hero-tag{ animation:heroRise 1.1s var(--ease) .6s both; }
.hero-human{ animation:heroRise 1.1s var(--ease) .75s both; }
.hero-cta{ animation:heroRise 1.1s var(--ease) .9s both; }
@keyframes heroSheen{ 0%{ background-position:125% 0; } 100%{ background-position:-25% 0; } }
@keyframes heroBreath{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.09); } }
@keyframes heroRise{ from{ opacity:0; transform:translateY(26px); filter:blur(6px); } to{ opacity:1; transform:none; filter:blur(0); } }

/* --- CASOS: fichas compactas (caben más) --- */
.cases{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.case, .case-inner{ min-height:248px; }
.case-face{ padding:24px 22px; border-radius:16px; }
.case-cli{ font-size:.72rem; margin-bottom:12px; }
.case-front h3{ font-size:1.02rem; margin-bottom:10px; }
.case-front p{ font-size:.86rem; }
.case-back p{ font-size:.9rem; line-height:1.55; }
.case-back h4{ margin-bottom:10px; }

/* --- CARRUSEL MÓVIL (T1): Soluciones y Casos se deslizan de lado --- */
@media (max-width:760px){
  .sol-grid, .cases{ display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    grid-template-columns:none; scroll-snap-type:x mandatory; gap:14px;
    /* Aire arriba y a los lados: al tocar, la tarjeta sube 8px y su borde dorado
       superior ya no queda cortado por el recorte vertical del carrusel. */
    padding:16px 4px 18px; -webkit-overflow-scrolling:touch; }
  .sol-grid::-webkit-scrollbar, .cases::-webkit-scrollbar{ height:4px; }
  .sol-grid::-webkit-scrollbar-thumb, .cases::-webkit-scrollbar-thumb{ background:var(--gold-line); border-radius:4px; }
  .sol, .case{ scroll-snap-align:start; flex:0 0 84%; }
  .case, .case-inner{ min-height:264px; }
}

/* --- SELLO IA RESPONSABLE + PROTECCIÓN DE DATOS (en #ia) --- */
.ia-seal{ display:flex; gap:16px; align-items:flex-start; margin-top:34px; padding:22px 24px;
  border-radius:16px; border:1px solid var(--gold-line);
  background:linear-gradient(160deg,rgba(201,168,76,.07),rgba(0,71,255,.04)); }
.ia-seal svg{ width:26px; height:26px; color:var(--gold-light); flex-shrink:0; margin-top:2px; }
.ia-seal p{ color:var(--grey); font-size:.92rem; line-height:1.65; margin:0; max-width:62ch; }
.ia-seal strong{ color:var(--white); }

/* --- INSTAGRAM (footer + cercanía) --- */
.ig-link{ display:inline-flex; align-items:center; gap:.55em; color:var(--gold); font-weight:500;
  font-size:.9rem; transition:color .3s,transform .3s var(--ease),border-color .3s,background .3s; }
.ig-link:hover{ color:var(--gold-light); transform:translateY(-1px); }
.ig-link svg{ width:20px; height:20px; }
.cerc-cta .ig-link{ padding:15px 26px; border-radius:46px; border:1px solid var(--gold-line); background:rgba(201,168,76,.06); }
.cerc-cta .ig-link:hover{ border-color:var(--gold); background:rgba(201,168,76,.12); }
.foot-social{ display:flex; gap:16px; margin-top:12px; justify-content:flex-end; }
@media (max-width:600px){ .foot-social{ justify-content:flex-start; } }

/* --- ÑUBLE SLIM: banda compacta centrada --- */
.nuble-slim{ max-width:760px; margin:0 auto; text-align:center; }
.nuble-slim .quote{ font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--gold); margin:14px 0 20px; line-height:1.25; }
.nuble-slim p:not(.quote){ color:var(--grey); line-height:1.8; max-width:58ch; margin:0 auto; }
.nuble-purpose{ margin-left:auto; margin-right:auto; text-align:left; }

/* --- CHIPS DE CLASIFICACIÓN (formulario) --- */
.chip-field{ display:flex; flex-direction:column; gap:6px; }
.chip-label{ color:var(--grey); font-size:.82rem; letter-spacing:.02em; }
.chip-label em{ color:var(--grey-dim); font-style:normal; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:6px; }
.chip{ cursor:pointer; display:inline-flex; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{ display:inline-block; padding:9px 15px; border-radius:30px; border:1px solid rgba(255,255,255,.14);
  font-size:.8rem; color:var(--grey); background:rgba(255,255,255,.02); transition:border-color .3s,color .3s,background .3s,transform .3s var(--ease); white-space:nowrap; }
.chip:hover span{ border-color:var(--gold-line); color:var(--white); transform:translateY(-1px); }
.chip input:checked + span{ border-color:var(--gold); color:#1a1300; font-weight:600;
  background:linear-gradient(120deg,var(--gold-light),var(--gold) 65%,var(--gold-dark)); }
.chip input:focus-visible + span{ outline:2px solid var(--gold-light); outline-offset:3px; }

/* --- SHIMMER en el logo del footer (simple, a tono con el hero) --- */
.foot-logo{
  background:linear-gradient(100deg,#F0F4FF 38%,#ffffff 50%,#dbe6ff 58%,#F0F4FF 72%);
  background-size:230% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:heroSheen 9s ease-in-out infinite; }
.foot-logo .o{
  background:linear-gradient(160deg,var(--gold-light),var(--gold) 55%,var(--gold-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* --- LOGO DE MARCA (nav): emblema de vórtice giratorio + palabra con relieve y brillo ---
   Nivel "Medio": relieve dimensional pero premium. El emblema gira constante. */
.nav-logo{ display:inline-flex; align-items:center; gap:.5em;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.45)); }
.nav-logo .logo-mark{ width:1.26em; height:1.26em; flex:0 0 auto; display:inline-flex;
  filter:drop-shadow(0 0 7px rgba(201,168,76,.55));
  animation:markSpin 12s linear infinite; transform-origin:50% 50%; }
.nav-logo .logo-mark svg{ width:100%; height:100%; display:block; }
.nav-logo .logo-word{ font-weight:700; letter-spacing:.13em;
  background:linear-gradient(100deg,#dfe6f7 20%,#ffffff 46%,#ffffff 52%,#c4d0ee 60%,#eef2ff 80%);
  background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 #aeb6d0) drop-shadow(0 2px 0 #7f88a8) drop-shadow(0 3px 0 #545c7c) drop-shadow(0 4px 3px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(0,71,255,.30));
  animation:heroSheen 5.5s ease-in-out infinite; }
.nav-logo .logo-word .o{ background:linear-gradient(160deg,var(--gold-light),var(--gold) 52%,var(--gold-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes markSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .nav-logo .logo-mark{ animation:none; } }

/* --- FLOTANTE DE INSTAGRAM (sobre el de WhatsApp) --- */
.ig-float{ position:fixed; right:24px; bottom:96px; z-index:950; width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(10,10,15,.96),rgba(18,18,28,.96)); border:1px solid var(--gold-line);
  box-shadow:0 14px 40px -10px rgba(0,0,0,.6); transition:transform .4s var(--ease),border-color .4s,box-shadow .4s; }
.ig-float svg{ width:30px; height:30px; }
.ig-float:hover{ border-color:var(--gold); transform:translateY(-3px) scale(1.05); box-shadow:0 18px 46px -10px rgba(188,24,136,.5); }
@media (max-width:600px){ .ig-float{ right:18px; bottom:86px; width:54px; height:54px; } .ig-float svg{ width:27px; height:27px; } }


/* ============================================================
   AUDITORÍA RESPONSIVE 24-08-2026 — breakpoints 360→2560, fluido.
   Complementa el sistema de clamp() que ya escala el rango medio
   (360–1440). Aquí solo se afinan los DOS extremos: pantallas muy
   anchas (para que el contenido no quede perdido) y móvil (para
   objetivos táctiles cómodos). No toca paleta ni tipografía.
   ============================================================ */

/* --- PANTALLAS ANCHAS: el contenedor crece por pasos ---
   Hasta 1600px se mantiene en 1280px (medida de lectura óptima).
   Sobre 1600px y 2000px crece; los párrafos siguen acotados por sus
   propios max-width en "ch", así que las líneas no se alargan de más.
   El resultado: en 1920/2560 el contenido llena mejor la pantalla
   sin estirarse ni perder legibilidad. */
@media (min-width:1600px){ :root{ --maxw:1440px; } }
@media (min-width:2000px){ :root{ --maxw:1600px; } }
/* En 4K el bloque del hero respira un poco más (sin agrandar la letra) */
@media (min-width:2000px){ .hero-content{ max-width:1120px; } }

/* --- MÓVIL: objetivos táctiles ≈44px (WCAG 2.1 · 2.5.5 Target Size) ---
   Los chips del formulario pasan de ~40px a ~44px de alto para que
   sean fáciles de tocar con el pulgar. */
@media (max-width:600px){
  .chip span{ padding:12px 16px; }
  .chips{ gap:10px; }
}

/* --- 2026-09-02: menú con todas las secciones + destaque Códigos QR --- */
.nav-links a.nav-qr{ color:var(--gold); font-weight:600; }
.nav-links a.nav-qr::before{ content:"\25A3"; margin-right:6px; font-size:.9em; }
.nav-links a.nav-qr:hover{ color:var(--white); }
.nav-links a{ white-space:nowrap; }
@media (min-width:1241px) and (max-width:1500px){ .nav-links{ gap:16px; } .nav-links a{ font-size:.76rem; letter-spacing:.01em; } .nav-cta{ padding:8px 14px; } }
@media (min-width:1501px){ .nav-links{ gap:24px; } }
/* las anclas no quedan tapadas por el menú fijo */
section[id]{ scroll-margin-top:72px; }

/* ---------- Tanda 1 · 2026-09-03 ---------- */
/* #1 Flotantes en móvil: Instagram fuera (está en Quiénes somos y en el pie); WhatsApp se esconde mientras el hero está en pantalla (ya tiene su botón) */
@media (max-width:768px){
  .ig-float{ display:none; }
  body.hero-on .wa-float{ opacity:0; pointer-events:none; transform:translateY(20px); }
  .wa-float{ transition:opacity .35s var(--ease), transform .35s var(--ease); }
  .hero-cta{ padding-bottom:8px; }
}
/* #2 El QR de la sección no se puede escanear desde el propio celular: en móvil solo el botón */
@media (max-width:768px){ .vx-tool .vx-visual{ display:none !important; } .vx-tool .vx-card{ grid-template-columns:1fr; } }
/* #6 Oferta pagada dentro del bloque QR3D */
.vx-paid{ display:flex; align-items:center; gap:14px; margin-top:22px; padding:14px 18px; border:1px solid rgba(201,168,76,.35);
  border-left:3px solid var(--gold); border-radius:14px; background:rgba(201,168,76,.07); color:var(--grey);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.vx-paid:hover{ border-color:var(--gold); background:rgba(201,168,76,.12); transform:translateY(-2px); }
.vx-paid-ico{ font-size:1.6rem; line-height:1; flex:none; }
.vx-paid-txt{ display:flex; flex-direction:column; gap:3px; font-size:.86rem; line-height:1.45; }
.vx-paid-txt b{ color:var(--white); font-family:var(--font-display); font-weight:600; font-size:.95rem; }
.vx-paid-arrow{ margin-left:auto; color:var(--gold); font-size:1.2rem; flex:none; }
/* #7 El logotipo deja de ser H1 pero conserva su estilo (p.hero-logo) */
p.hero-logo{ margin:0; }
h1.hero-tag{ margin:0 auto .6em; text-align:center; }
/* Menú móvil abierto: el nav no puede llevar backdrop-filter (convierte a los hijos "fixed" en relativos a él
   y el panel se desplaza/transparenta al hacer scroll); además se bloquea el scroll del fondo */
.nav.menu-open{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:transparent !important; border-bottom-color:transparent !important; transition:none !important; }
body.nav-open{ overflow:hidden; touch-action:none; }

/* ---------- Tanda 2 · 2026-09-04 · 12 → 8 secciones ---------- */
.anchor-alias{ position:absolute; top:0; left:0; width:0; height:0; scroll-margin-top:72px; }        /* anclas antiguas (#manifiesto, #problema) */
.section[id]{ scroll-margin-top:72px; }
#ia,#faq,#nuble{ scroll-margin-top:90px; }
/* Por qué VÓRTEX: cita + las tres fallas */
.porque-problema{ text-align:left; margin-top:clamp(64px,9vw,120px); padding-top:clamp(40px,6vw,72px); border-top:1px solid rgba(255,255,255,.06); }
.porque-problema .sec-head{ margin-bottom:clamp(30px,4vw,48px); }
.porque-problema h3.sec-title{ font-size:clamp(1.7rem,4vw,2.8rem); }
/* Quiénes somos: bloque de inteligencia bajo el equipo */
.ia-sub{ margin-top:clamp(64px,9vw,120px); padding-top:clamp(40px,6vw,72px); border-top:1px solid rgba(255,255,255,.06); overflow:hidden; }
.ia-sub .ia-title{ font-size:clamp(1.7rem,3.6vw,2.6rem); margin-bottom:22px; }
/* Cómo trabajamos: preguntas frecuentes al pie */
.faq-sub{ margin-top:clamp(56px,8vw,100px); }
.faq-sub h3{ text-align:center; font-size:clamp(1.5rem,3.2vw,2.2rem); margin-bottom:clamp(26px,4vw,40px); }
/* Hablemos: introducción Ñuble sobre el formulario */
#cierre{ min-height:0; padding-top:clamp(80px,11vh,140px); }
.cierre-nuble{ margin:0 auto clamp(56px,8vw,96px); padding-bottom:clamp(40px,6vw,72px); border-bottom:1px solid rgba(255,255,255,.08); max-width:760px; }
.cierre-nuble .nuble-purpose{ margin-top:32px; }

/* ============================================================
   TANDA 2b — Contacto: correo clicable + Instagram de marca
   ============================================================ */

/* Enlace de correo: mismo lenguaje visual que .ig-link */
.mail-link{ display:inline-flex; align-items:center; gap:.55em; color:var(--gold); font-weight:500;
  font-size:.9rem; transition:color .3s,transform .3s var(--ease),border-color .3s,background .3s; }
.mail-link:hover{ color:var(--gold-light); transform:translateY(-1px); }
.mail-link svg{ width:20px; height:20px; flex-shrink:0; }

/* Pie: Instagram y correo apilados y alineados con el resto del bloque */
.foot-social{ flex-direction:column; align-items:flex-end; gap:10px; margin-top:16px; }
.foot-social .ig-link,
.foot-social .mail-link{ font-size:.86rem; letter-spacing:.01em; }
.foot-social .ig-link span,
.foot-social .mail-link span{ line-height:1.2; }

/* El icono de Instagram lleva el degradado de la marca; el texto queda en dorado */
.ig-brand svg{ width:21px; height:21px; }
.ig-brand:hover svg{ filter:drop-shadow(0 0 7px rgba(220,39,67,.45)); transition:filter .35s var(--ease); }

@media (max-width:600px){
  .foot-social{ align-items:flex-start; }
}

/* Bajo el formulario: el correo como segunda via directa.
   Especificidad .form-or .form-or-mail para ganarle a .form-or a (verde WhatsApp). */
.form-or{ line-height:1.9; }
.form-or .form-or-sep{ opacity:.4; margin:0 6px; }
.form-or .form-or-mail{ color:var(--gold); }
.form-or .form-or-mail:hover{ color:var(--gold-light); text-decoration:underline; }
/* Cada via en su propia linea en todos los tamanos: el contenedor del
   formulario es angosto y en una sola linea el separador quedaba colgando. */
.form-or #waForm,
.form-or .form-or-mail{ display:block; margin-top:7px; }
.form-or .form-or-sep{ display:none; }

/* Trampa antispam: fuera de la vista sin usar display:none
   (algunos bots ignoran los campos ocultos con display:none). */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Mensaje cuando el envio NO llego: tiene que verse distinto del de exito. */
.form-ok.form-err{color:#ffd9d9;border-color:rgba(255,90,90,.5);background:rgba(255,60,60,.08)}
.form-ok.form-err a{color:#ffb4b4;text-decoration:underline}

/* CTA intermedio (fin de #soluciones y #casos): discreto, no compite con el
   boton principal del cierre; una linea de texto y un boton de contorno. */
.cta-mid{margin:54px auto 0;max-width:620px;display:flex;flex-direction:column;align-items:center;
  gap:14px;text-align:center;padding-top:34px;border-top:1px solid rgba(201,168,76,.16)}
.cta-mid-txt{color:var(--grey);font-size:.95rem;margin:0;line-height:1.6}
.cta-mid-btn{display:inline-flex;align-items:center;gap:.5em;padding:12px 24px;border-radius:44px;
  border:1px solid var(--gold-line);background:rgba(201,168,76,.06);color:var(--gold);
  font-size:.9rem;font-weight:500;letter-spacing:.01em;
  transition:border-color .3s,background .3s,transform .3s var(--ease),color .3s}
.cta-mid-btn svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.cta-mid-btn:hover{border-color:var(--gold);background:rgba(201,168,76,.13);color:var(--gold-light);transform:translateY(-2px)}
.cta-mid-btn:hover svg{transform:translateX(3px)}
@media (hover:none){ .cta-mid-btn:hover{transform:none} }
@media (prefers-reduced-motion:reduce){ .cta-mid-btn,.cta-mid-btn svg{transition:none} .cta-mid-btn:hover{transform:none} }