/*
Theme Name: Vantrea Systems
Theme URI: https://vantreasystems.com
Author: Vantrea Systems
Author URI: https://vantreasystems.com
Description: Tema a medida para Vantrea Systems — automatización y agentes de IA para inmobiliarias. Diseño premium, animado y optimizado para conversión.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vantrea
*/

/* ==========================================================================
   0. TOKENS
   ========================================================================== */
:root{
  /* color */
  --ink:        #060a17;   /* fondo más profundo (footer, transiciones) */
  --navy:       #0B132B;   /* fondo principal de marca */
  --navy-2:     #101a38;   /* paneles / secciones alternas */
  --navy-3:     #16213f;   /* tarjetas */
  --steel:      #E0E1DD;   /* texto claro / fondos claros */
  --steel-dim:  #9aa3b8;   /* texto secundario sobre fondo oscuro */
  --steel-line: rgba(224,225,221,.12);
  --steel-line-strong: rgba(224,225,221,.22);
  --white:      #ffffff;
  --node:       #c7cbd6;   /* gris nodo (del isotipo) */

  /* tipografía */
  --f-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ritmo */
  --container: 1180px;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;

  /* easing */
  --ease-enter: cubic-bezier(.22,1,.36,1);
  --ease-move:  cubic-bezier(.25,1,.5,1);
}

/* ==========================================================================
   1. RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  background:var(--navy);
  color:var(--steel);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }
input,textarea{ font:inherit; }
::selection{ background:var(--steel); color:var(--navy); }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; color:var(--white); line-height:1.1; }

:focus-visible{ outline:2px solid var(--steel); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
@media (max-width:640px){ .container{ padding-inline:20px; } }

.section{ position:relative; padding:120px 0; }
.section--tight{ padding:88px 0; }
@media (max-width:900px){ .section{ padding:88px 0; } .section--tight{ padding:64px 0; } }

.section-alt{ background:var(--navy-2); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel-dim);
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--steel); box-shadow:0 0 0 4px var(--steel-line);
}

.section-head{ max-width:640px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(28px,4vw,42px); margin-bottom:18px; }
.section-head p{ color:var(--steel-dim); font-size:18px; max-width:56ch; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ==========================================================================
   2. REVEAL / SCROLL MOTION
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-enter), transform .8s var(--ease-enter); will-change:transform,opacity; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-enter), transform .7s var(--ease-enter); }
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.14s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.20s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.26s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.32s; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay:.38s; }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay:.44s; }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:999px; font-weight:600; font-size:15px;
  transition:transform .35s var(--ease-move), box-shadow .35s var(--ease-move), background-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--steel); color:var(--navy); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -12px rgba(224,225,221,.45); }
.btn-primary:active{ transform:translateY(0) scale(.98); }
.btn-ghost{ border:1px solid var(--steel-line-strong); color:var(--white); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:var(--steel); transform:translateY(-2px); }
.btn svg{ width:16px; height:16px; transition:transform .35s var(--ease-move); }
.btn:hover svg{ transform:translate(3px,-3px); }
.btn-block{ width:100%; }

/* ==========================================================================
   4. HEADER / NAV
   ========================================================================== */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  padding:18px 0;
  transition:background-color .4s ease, border-color .4s ease, padding .4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(11,19,43,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--steel-line);
  padding:12px 0;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:600; font-size:17px; color:var(--white); }
.brand img{ height:30px; width:auto; }
.brand small{ display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; color:var(--steel-dim); font-weight:400; margin-top:1px; }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ position:relative; font-size:14.5px; color:var(--steel-dim); font-weight:500; transition:color .25s ease; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--white); transition:right .3s var(--ease-move); }
.nav-links a:hover{ color:var(--white); }
.nav-links a:hover::after{ right:0; }

.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background:var(--white); transition:transform .3s var(--ease-move), opacity .3s ease; }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:0; top:0; padding-top:100px;
    flex-direction:column; align-items:flex-start; gap:6px;
    background:var(--navy); padding-inline:28px;
    transform:translateX(100%); transition:transform .45s var(--ease-move);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:22px; padding:14px 0; width:100%; border-bottom:1px solid var(--steel-line); }
  .nav-toggle{ display:flex; z-index:110; }
  body.menu-open{ overflow:hidden; }
  .nav-actions .btn-ghost{ display:none; }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero{
  position:relative; padding:190px 0 120px;
  background:
    radial-gradient(60% 55% at 82% 8%, rgba(224,225,221,.10), transparent 60%),
    radial-gradient(45% 45% at 10% 100%, rgba(224,225,221,.06), transparent 60%),
    var(--navy);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--steel-line) 1px, transparent 1px), linear-gradient(90deg, var(--steel-line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(60% 50% at 50% 30%, #000 30%, transparent 75%);
          mask-image:radial-gradient(60% 50% at 50% 30%, #000 30%, transparent 75%);
}
.hero .container{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media (max-width:980px){ .hero .container{ grid-template-columns:1fr; } .hero{ padding-top:150px; } }

.hero-copy h1{ font-size:clamp(36px,5.2vw,64px); margin-bottom:22px; }
.hero-copy h1 em{ font-style:normal; color:var(--steel-dim); }
.hero-copy p.lead{ font-size:19px; color:var(--steel-dim); max-width:52ch; margin-bottom:38px; }
.hero-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
.hero-note{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--steel-dim); }
.hero-note .dot{ width:7px; height:7px; border-radius:50%; background:#7CF29C; box-shadow:0 0 0 4px rgba(124,242,156,.15); flex:none; animation:pulse-dot 2.2s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

.hero-stats{ display:flex; gap:36px; margin-top:44px; padding-top:32px; border-top:1px solid var(--steel-line); }
.hero-stats .stat b{ display:block; font-family:var(--f-display); font-size:28px; color:var(--white); }
.hero-stats .stat span{ font-size:13px; color:var(--steel-dim); }

.hero-graphic{ position:relative; aspect-ratio:1/1; max-width:520px; margin-inline:auto; }
.hero-graphic svg{ width:100%; height:100%; overflow:visible; }
.hero-graphic .plot-line{ stroke-dasharray:600; stroke-dashoffset:600; animation:draw-line 2.4s var(--ease-enter) .3s forwards; }
@keyframes draw-line{ to{ stroke-dashoffset:0; } }
.hero-graphic .node{ opacity:0; transform-box:fill-box; transform-origin:center; animation:pop-node .5s var(--ease-enter) forwards; }
.hero-graphic .node.n1{ animation-delay:.9s; }
.hero-graphic .node.n2{ animation-delay:1.15s; }
.hero-graphic .node.n3{ animation-delay:1.4s; }
.hero-graphic .node.n4{ animation-delay:1.65s; }
@keyframes pop-node{ from{ opacity:0; transform:scale(0); } to{ opacity:1; transform:scale(1); } }
.hero-graphic .pulse{ animation:orbit 16s linear infinite; }
@keyframes orbit{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.hero-graphic .glow{ animation:float-glow 7s ease-in-out infinite; }
@keyframes float-glow{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.hero-badge{
  position:absolute; display:flex; align-items:center; gap:10px;
  background:rgba(11,19,43,.9); border:1px solid var(--steel-line-strong);
  padding:10px 16px; border-radius:999px; font-size:13px; font-weight:500; color:var(--white);
  backdrop-filter:blur(10px); box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  animation:float-badge 6s ease-in-out infinite;
}
.hero-badge svg{ width:15px; height:15px; }
.hero-badge--a{ top:6%; right:0%; animation-delay:.2s; }
.hero-badge--b{ bottom:10%; left:-4%; animation-delay:1.4s; }
@keyframes float-badge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* ==========================================================================
   6. PROBLEMA
   ========================================================================== */
.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--steel-line); border:1px solid var(--steel-line); border-radius:var(--radius-m); overflow:hidden; }
.problem-card{ background:var(--navy); padding:36px 32px; transition:background-color .4s ease; }
.problem-card:hover{ background:var(--navy-2); }
.problem-card .num{ font-family:var(--f-mono); font-size:13px; color:var(--steel-dim); margin-bottom:22px; display:block; }
.problem-card h3{ font-size:19px; margin-bottom:12px; }
.problem-card p{ color:var(--steel-dim); font-size:15px; }
@media (max-width:820px){ .problem-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   7. SOLUCIÓN
   ========================================================================== */
.solution{ display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:center; }
@media (max-width:980px){ .solution{ grid-template-columns:1fr; gap:48px; } }
.solution-visual{ position:relative; border:1px solid var(--steel-line); border-radius:var(--radius-l); padding:28px; background:linear-gradient(160deg, var(--navy-3), var(--navy-2)); }
.solution-visual .chat{ display:flex; flex-direction:column; gap:12px; }
.bubble{ max-width:82%; padding:12px 16px; border-radius:14px; font-size:14px; opacity:0; transform:translateY(10px); animation:bubble-in .5s var(--ease-enter) forwards; }
.bubble.bot{ align-self:flex-start; background:var(--navy); border:1px solid var(--steel-line-strong); border-bottom-left-radius:4px; animation-delay:.2s; }
.bubble.user{ align-self:flex-end; background:var(--steel); color:var(--navy); border-bottom-right-radius:4px; font-weight:500; animation-delay:.7s; }
.bubble.bot.b2{ animation-delay:1.3s; }
.bubble.typing{ display:flex; gap:4px; align-items:center; padding:14px 16px; animation-delay:1.3s; }
.bubble.typing span{ width:6px; height:6px; border-radius:50%; background:var(--steel-dim); animation:typing-dot 1.1s infinite ease-in-out; }
.bubble.typing span:nth-child(2){ animation-delay:.15s; } .bubble.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typing-dot{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
@keyframes bubble-in{ to{ opacity:1; transform:translateY(0); } }
.solution-visual .tag{ position:absolute; top:-14px; left:28px; background:var(--steel); color:var(--navy); font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; padding:6px 14px; border-radius:999px; font-weight:600; }

.solution-copy h2{ font-size:clamp(28px,4vw,40px); margin-bottom:20px; }
.solution-copy > p{ color:var(--steel-dim); font-size:17px; margin-bottom:32px; max-width:52ch; }
.check-list{ display:flex; flex-direction:column; gap:20px; }
.check-list li{ display:flex; gap:14px; align-items:flex-start; }
.check-list .ico{ flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--steel-line-strong); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.check-list .ico svg{ width:13px; height:13px; }
.check-list b{ color:var(--white); display:block; font-size:15.5px; margin-bottom:2px; }
.check-list span{ color:var(--steel-dim); font-size:14.5px; }

/* ==========================================================================
   8. SERVICIOS
   ========================================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:980px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{
  position:relative; padding:32px 26px; border-radius:var(--radius-m);
  border:1px solid var(--steel-line); background:var(--navy-2);
  transition:transform .4s var(--ease-move), border-color .4s ease, background-color .4s ease;
  overflow:hidden;
}
.service-card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(220px 120px at 20% 0%, rgba(224,225,221,.10), transparent 70%);
}
.service-card:hover{ transform:translateY(-6px); border-color:var(--steel-line-strong); background:var(--navy-3); }
.service-card:hover::before{ opacity:1; }
.service-card .ico{ width:46px; height:46px; border-radius:12px; background:rgba(224,225,221,.08); display:flex; align-items:center; justify-content:center; margin-bottom:22px; transition:transform .4s var(--ease-move), background-color .4s ease; }
.service-card:hover .ico{ transform:scale(1.08) rotate(-4deg); background:var(--steel); }
.service-card:hover .ico svg{ stroke:var(--navy); }
.service-card .ico svg{ width:22px; height:22px; stroke:var(--white); transition:stroke .3s ease; }
.service-card h3{ font-size:17px; margin-bottom:10px; }
.service-card p{ font-size:14px; color:var(--steel-dim); }

/* ==========================================================================
   9. CÓMO FUNCIONA
   ========================================================================== */
.steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
@media (max-width:980px){ .steps{ grid-template-columns:1fr; gap:0; } }
.steps::before{
  content:""; position:absolute; top:23px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--steel-line-strong) 8%, var(--steel-line-strong) 92%, transparent);
}
@media (max-width:980px){ .steps::before{ display:none; } }
.step{ position:relative; }
@media (max-width:980px){ .step{ display:flex; gap:20px; padding:26px 0; border-bottom:1px solid var(--steel-line); } .step:last-child{ border-bottom:none; } }
.step .step-num{
  width:46px; height:46px; border-radius:50%; background:var(--navy); border:1px solid var(--steel-line-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:14px; color:var(--white);
  margin-bottom:26px; position:relative; z-index:1; flex:none; transition:border-color .3s ease, background-color .3s ease;
}
.step:hover .step-num{ background:var(--steel); color:var(--navy); border-color:var(--steel); }
.step h3{ font-size:17px; margin-bottom:10px; }
.step p{ font-size:14px; color:var(--steel-dim); }

/* ==========================================================================
   10. BENEFICIOS
   ========================================================================== */
.benefits{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:980px){ .benefits{ grid-template-columns:1fr; gap:44px; } }
.benefit-list{ display:flex; flex-direction:column; }
.benefit-item{ display:flex; gap:20px; padding:24px 0; border-bottom:1px solid var(--steel-line); }
.benefit-item:first-child{ padding-top:0; }
.benefit-item .ico{ flex:none; width:40px; height:40px; border-radius:10px; background:rgba(224,225,221,.08); display:flex; align-items:center; justify-content:center; }
.benefit-item .ico svg{ width:19px; height:19px; }
.benefit-item h3{ font-size:16.5px; margin-bottom:6px; }
.benefit-item p{ font-size:14.5px; color:var(--steel-dim); }

.stat-panel{ border:1px solid var(--steel-line); border-radius:var(--radius-l); padding:44px 36px; background:linear-gradient(160deg, var(--navy-3), var(--navy-2)); display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.stat-panel .stat b{ display:block; font-family:var(--f-display); font-size:clamp(30px,4vw,44px); color:var(--white); }
.stat-panel .stat span{ font-size:13.5px; color:var(--steel-dim); }
.stat-panel .stat{ padding-bottom:24px; border-bottom:1px solid var(--steel-line); }
.stat-panel .stat:nth-last-child(-n+2){ border-bottom:none; padding-bottom:0; }

/* ==========================================================================
   11. CASOS DE USO
   ========================================================================== */
.usecase-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.usecase-tab{ padding:10px 20px; border-radius:999px; border:1px solid var(--steel-line-strong); font-size:14px; color:var(--steel-dim); transition:all .3s ease; }
.usecase-tab:hover{ color:var(--white); border-color:var(--steel); }
.usecase-tab.is-active{ background:var(--steel); color:var(--navy); border-color:var(--steel); font-weight:600; }
.usecase-panels{ position:relative; }
.usecase-panel{ display:none; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.usecase-panel.is-active{ display:grid; animation:fade-up .5s var(--ease-enter); }
@keyframes fade-up{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
@media (max-width:900px){ .usecase-panel.is-active{ grid-template-columns:1fr; gap:32px; } }
.usecase-panel h3{ font-size:26px; margin-bottom:16px; }
.usecase-panel p{ color:var(--steel-dim); font-size:15.5px; margin-bottom:24px; }
.usecase-metric{ display:inline-flex; flex-direction:column; padding:18px 22px; border:1px solid var(--steel-line-strong); border-radius:var(--radius-m); }
.usecase-metric b{ font-family:var(--f-display); font-size:26px; color:var(--white); }
.usecase-metric span{ font-size:12.5px; color:var(--steel-dim); }
.usecase-visual{ border:1px solid var(--steel-line); border-radius:var(--radius-l); padding:30px; background:var(--navy-2); min-height:220px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.uv-row{ display:flex; align-items:center; gap:12px; font-size:14px; opacity:0; transform:translateX(-10px); animation:row-in .5s var(--ease-enter) forwards; }
.usecase-panel.is-active .uv-row:nth-child(1){ animation-delay:.05s; }
.usecase-panel.is-active .uv-row:nth-child(2){ animation-delay:.15s; }
.usecase-panel.is-active .uv-row:nth-child(3){ animation-delay:.25s; }
@keyframes row-in{ to{ opacity:1; transform:translateX(0); } }
.uv-row .dot{ width:8px; height:8px; border-radius:50%; background:#7CF29C; flex:none; }
.uv-row span{ color:var(--steel-dim); }
.uv-row b{ color:var(--white); font-weight:500; }

/* ==========================================================================
   12. TESTIMONIOS
   ========================================================================== */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{ border:1px dashed var(--steel-line-strong); border-radius:var(--radius-m); padding:32px; display:flex; flex-direction:column; gap:20px; min-height:220px; justify-content:space-between; background:var(--navy-2); }
.testi-card .quote-mark{ font-family:var(--f-display); font-size:34px; color:var(--steel-line-strong); line-height:1; }
.testi-card .placeholder{ font-size:14px; color:var(--steel-dim); }
.testi-card .who{ display:flex; align-items:center; gap:12px; }
.testi-card .avatar{ width:38px; height:38px; border-radius:50%; background:var(--steel-line); border:1px solid var(--steel-line-strong); }
.testi-card .who b{ display:block; font-size:14px; color:var(--white); }
.testi-card .who span{ font-size:12.5px; color:var(--steel-dim); }

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.faq-list{ max-width:800px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--steel-line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 4px; text-align:left; font-family:var(--f-display); font-size:17px; color:var(--white); font-weight:500; }
.faq-q .plus{ flex:none; width:22px; height:22px; position:relative; }
.faq-q .plus::before, .faq-q .plus::after{ content:""; position:absolute; background:var(--steel); top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .35s var(--ease-move); }
.faq-q .plus::before{ width:14px; height:1.5px; }
.faq-q .plus::after{ width:1.5px; height:14px; }
.faq-item.is-open .plus::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease-move); }
.faq-a p{ padding:0 4px 26px; color:var(--steel-dim); font-size:15px; max-width:70ch; }

/* ==========================================================================
   14. CTA FINAL
   ========================================================================== */
.cta-final{
  position:relative; border-radius:var(--radius-l); overflow:hidden;
  padding:80px 48px; text-align:center;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(224,225,221,.14), transparent 65%),
    linear-gradient(160deg, var(--navy-3), var(--ink));
  border:1px solid var(--steel-line-strong);
}
.cta-final h2{ font-size:clamp(28px,4.4vw,44px); margin-bottom:18px; }
.cta-final p{ color:var(--steel-dim); font-size:17px; max-width:52ch; margin-inline:auto 32px; margin-bottom:36px; }
.cta-final .hero-cta{ justify-content:center; margin-bottom:0; }
.cta-final::after{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,225,221,.10), transparent 70%);
  top:-120px; right:-80px; animation:float-glow 9s ease-in-out infinite;
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.site-footer{ padding:72px 0 32px; border-top:1px solid var(--steel-line); background:var(--ink); }
.footer-top{ display:grid; grid-template-columns:1.3fr .8fr .8fr .8fr; gap:48px; padding-bottom:56px; }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; row-gap:36px; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ color:var(--steel-dim); font-size:14px; max-width:34ch; margin-bottom:22px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--steel-line-strong); display:flex; align-items:center; justify-content:center; transition:all .3s ease; }
.footer-social a:hover{ background:var(--steel); color:var(--navy); transform:translateY(-3px); }
.footer-social svg{ width:15px; height:15px; }
.footer-col h4{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-dim); margin-bottom:18px; font-weight:500; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14.5px; color:var(--steel-dim); transition:color .25s ease; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ padding-top:28px; border-top:1px solid var(--steel-line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--steel-dim); }

/* ==========================================================================
   16. INTRO LOADER (cortina de entrada)
   ========================================================================== */
html.no-intro #intro-loader{ display:none !important; }
#intro-loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition:transform .8s var(--ease-move), visibility .8s;
}
#intro-loader.is-done{ transform:translateY(-100%); }
.intro-loader-inner{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.intro-loader-inner img{ width:56px; height:56px; opacity:0; transform:scale(.72); animation:loader-pop .7s var(--ease-enter) .1s forwards; }
.intro-loader-inner .bar{ width:120px; height:2px; background:var(--steel-line); border-radius:2px; overflow:hidden; }
.intro-loader-inner .bar::after{ content:""; display:block; height:100%; width:0%; background:var(--steel); animation:loader-bar 1s var(--ease-enter) .25s forwards; }
@keyframes loader-pop{ to{ opacity:1; transform:scale(1); } }
@keyframes loader-bar{ to{ width:100%; } }

/* ==========================================================================
   17. HERO — animación de titular por líneas + ambiente + trazo animado
   ========================================================================== */
.hero-copy h1 .line{ display:block; overflow:hidden; }
.hero-copy h1 .line span{
  display:block; transform:translateY(112%); opacity:0;
  animation:line-up .85s var(--ease-enter) forwards;
}
.hero-copy h1 .line:nth-child(1) span{ animation-delay:1.0s; }
.hero-copy h1 .line:nth-child(2) span{ animation-delay:1.14s; }
.hero-copy h1 .line:nth-child(3) span{ animation-delay:1.28s; }
@keyframes line-up{ to{ transform:translateY(0); opacity:1; } }

.hero-copy .hero-cta{ opacity:0; animation:fade-rise .8s var(--ease-enter) 1.55s forwards; }
.hero-copy .hero-note{ opacity:0; animation:fade-rise .8s var(--ease-enter) 1.68s forwards; }
.hero-copy .hero-stats{ opacity:0; animation:fade-rise .8s var(--ease-enter) 1.8s forwards; }
@keyframes fade-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.hero::after{
  content:""; position:absolute; width:640px; height:640px; border-radius:50%;
  right:-220px; top:-260px; pointer-events:none;
  background:radial-gradient(circle, rgba(224,225,221,.14), transparent 68%);
  animation:ambient-drift 12s ease-in-out infinite;
}
@keyframes ambient-drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-30px,30px) scale(1.12); }
}

.hero-graphic .travel-dot{
  offset-path:path('M60 300 L140 260 L185 300 L230 190 L270 220 L340 90');
  offset-rotate:0deg;
  animation:travel-dot 3.2s linear 2.6s infinite;
  filter:drop-shadow(0 0 6px rgba(224,225,221,.9)) drop-shadow(0 0 16px rgba(224,225,221,.5));
}
@keyframes travel-dot{
  0%{ offset-distance:0%; opacity:0; }
  6%{ opacity:1; }
  92%{ opacity:1; }
  100%{ offset-distance:100%; opacity:0; }
}

/* ==========================================================================
   18. AFINADO RESPONSIVE ADICIONAL
   ========================================================================== */
@media (max-width:980px){
  .hero-badge{ font-size:12px; padding:9px 14px; }
}
@media (max-width:640px){
  .section{ padding:72px 0; }
  .hero{ padding-top:136px; padding-bottom:72px; }
  .hero-copy h1{ font-size:clamp(30px,8vw,40px); }
  .hero-copy p.lead{ font-size:16.5px; }
  .hero-stats{ gap:22px; flex-wrap:wrap; row-gap:18px; }
  .hero-stats .stat b{ font-size:23px; }
  .hero-graphic{ max-width:340px; margin-top:12px; }
  .hero-badge{ font-size:11px; padding:7px 12px; gap:7px; }
  .hero-badge svg{ width:13px; height:13px; }
  .hero-badge--a{ top:0; right:0; }
  .hero-badge--b{ bottom:2%; left:-2%; }
  .hero::after{ width:420px; height:420px; right:-160px; top:-160px; }

  .section-head{ margin-bottom:40px; }
  .section-head h2{ font-size:clamp(24px,7vw,32px); }
  .section-head p{ font-size:16px; }

  .problem-card{ padding:28px 24px; }
  .solution-copy h2{ font-size:clamp(24px,7vw,30px); }
  .solution-visual{ padding:22px; }
  .services-grid{ gap:14px; }
  .service-card{ padding:26px 22px; }

  .stat-panel{ grid-template-columns:1fr 1fr; gap:24px; padding:32px 24px; }
  .stat-panel .stat b{ font-size:28px; }
  .stat-panel .stat{ padding-bottom:16px; }

  .usecase-tabs{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; margin-bottom:28px; -webkit-overflow-scrolling:touch; }
  .usecase-tabs::-webkit-scrollbar{ display:none; }
  .usecase-tab{ flex:none; }
  .usecase-panel h3{ font-size:21px; }

  .cta-final{ padding:52px 26px; border-radius:var(--radius-m); }
  .faq-q{ font-size:15.5px; padding:20px 2px; gap:14px; }
}
@media (max-width:420px){
  .hero-stats{ gap:16px; }
  .stat-panel{ grid-template-columns:1fr; }
  .stat-panel .stat{ border-bottom:1px solid var(--steel-line); padding-bottom:16px; }
  .stat-panel .stat:last-child{ border-bottom:none; padding-bottom:0; }
  .hero-badge--b{ display:none; }
}

/* ==========================================================================
   19. FORMULARIO DE DEMO
   ========================================================================== */
.demo-form{ max-width:560px; margin-inline:auto; text-align:left; margin-top:8px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-field{ margin-bottom:16px; display:flex; flex-direction:column; gap:7px; }
.form-field label{ font-size:13px; color:var(--steel-dim); font-weight:500; }
.form-field input, .form-field textarea{
  background:rgba(255,255,255,.04); border:1px solid var(--steel-line-strong); border-radius:var(--radius-s);
  padding:13px 15px; color:var(--white); font-size:15px; font-family:var(--f-body);
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.form-field textarea{ resize:vertical; min-height:96px; }
.form-field input::placeholder, .form-field textarea::placeholder{ color:var(--steel-dim); opacity:.7; }
.form-field input:focus, .form-field textarea:focus{
  outline:none; border-color:var(--steel); background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(224,225,221,.12);
}
.form-field input:invalid:not(:placeholder-shown){ border-color:#e08787; }
.form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-consent{ font-size:12.5px; color:var(--steel-dim); margin-bottom:20px; }
.form-consent a{ color:var(--steel); text-decoration:underline; text-underline-offset:2px; }
.form-actions{ margin-bottom:14px; }
.demo-form .btn-primary[disabled]{ opacity:.6; pointer-events:none; }
.demo-form .btn .spinner{
  width:15px; height:15px; border-radius:50%; border:2px solid rgba(11,19,43,.25); border-top-color:var(--navy);
  animation:spin .7s linear infinite; display:none;
}
.demo-form .btn.is-loading .spinner{ display:inline-block; }
.demo-form .btn.is-loading .btn-label{ opacity:.7; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.form-message{ font-size:14px; padding:2px; min-height:1.4em; transition:opacity .3s ease; }
.form-message.is-success{ color:#8fe3ac; }
.form-message.is-error{ color:#e6a3a3; }
.form-alt{ text-align:center; font-size:13.5px; color:var(--steel-dim); margin-top:8px; }
.form-alt a{ color:var(--white); text-decoration:underline; text-underline-offset:2px; }

/* ==========================================================================
   20. FOOTER — enlaces legales
   ========================================================================== */
.footer-legal{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-legal a{ font-size:13px; color:var(--steel-dim); transition:color .25s ease; }
.footer-legal a:hover{ color:var(--white); }

/* ==========================================================================
   21. AVISO DE COOKIES
   ========================================================================== */
#cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:500;
  max-width:640px; margin-inline:auto;
  background:rgba(16,26,56,.96); border:1px solid var(--steel-line-strong); border-radius:var(--radius-m);
  padding:20px 22px; backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  transform:translateY(140%); opacity:0; transition:transform .5s var(--ease-move), opacity .5s ease;
  pointer-events:none;
}
#cookie-banner.is-visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
.cookie-banner-inner p{ font-size:13.5px; color:var(--steel-dim); margin-bottom:16px; line-height:1.55; }
.cookie-banner-inner a{ color:var(--white); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner-actions{ display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; }
.cookie-banner-actions .btn{ padding:10px 20px; font-size:13.5px; }
@media (max-width:480px){
  #cookie-banner{ left:12px; right:12px; bottom:12px; padding:18px; }
  .cookie-banner-actions{ justify-content:stretch; }
  .cookie-banner-actions .btn{ flex:1; }
}

/* ==========================================================================
   16b. UTIL
   ========================================================================== */
.text-center{ text-align:center; }
.mono{ font-family:var(--f-mono); }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--steel); color:var(--navy); padding:12px 18px; z-index:1000; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }