/* =======================
   PALETA Y FUNDAMENTOS
   ======================= */
:root{
  --bg:#0b0b0b;
  --bg-2:#101010;
  --card:#141414;
  --ink:#ffffff;
  --ink-dim:#cfcfcf;
  --line:#2a2a2a;
  --gold:#D4AF37;
  --gold-dark:#B8870B;
  --shadow:0 18px 40px rgba(0,0,0,.55);
  --r:18px; --r-lg:26px; --w:1180px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*{ box-sizing:border-box; margin:0; padding:0; border:0; }
html,body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5,h6{
  font-family: "Playfair Display", serif;
  margin: 0.5em 0;
  font-weight: 800;
  letter-spacing: -0.5px;
}
p,li,small,button,input,label,a{ font-family: 'Inter', system-ui; }
.container{ width: min(var(--w), 92vw); margin-inline: auto; padding: 0 16px; }
.section{ padding: clamp(44px, 6vw, 96px) 0; position: relative; content-visibility:auto; contain-intrinsic-size: 1px 600px; }
.grid{ display: grid; gap: 22px; }
.badge{
  display:inline-block; padding:.35rem .7rem;
  border: 1px solid var(--line); border-radius:999px;
  color: var(--ink-dim); font-size:.85rem; font-weight:600;
  background: rgba(255,255,255,0.03); backdrop-filter: blur(4px);
}
.badge-gold{ background:linear-gradient(135deg, rgba(212,175,55,.15), transparent); border-color:var(--gold); color:var(--gold); }
.muted{ color:var(--ink-dim); }
.accent{ color:var(--gold); }

/* =======================
   DETALLE VISUAL PREMIUM
   ======================= */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1200px 480px at 90% -10%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(900px 420px at 10% 120%, rgba(184,135,11,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px);
  mix-blend-mode: screen;
}

/* =======================
   NAV & CABECERA
   ======================= */
/* Móvil: header NO sticky (para que no siga al hacer scroll) */
header{
  background:rgba(11,11,11,.85);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:var(--transition);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:.85rem; }
.brand .logo{ width:42px; height:42px; border-radius:12px; overflow:hidden; border:2px solid var(--gold);
  box-shadow:0 0 20px rgba(212, 175, 55, .3); transition:var(--transition); }
.brand .logo:hover{ transform:scale(1.05); box-shadow:0 0 30px rgba(212, 175, 55, .4); }
.brand strong{ font-weight:800; font-size:1.05rem; letter-spacing:.2px; background:linear-gradient(to right, var(--ink), var(--ink-dim)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* Desktop: header sticky */
@media(min-width:940px){
  header{ position:sticky; top:0; z-index:50; }
  .nav{ padding:16px 0; }
}

/* Menú desktop */
#menu{ display:flex; align-items:center; gap:24px; }
#menu a{ opacity:.85; font-weight:600; font-size:.95rem; position:relative; padding:4px 0; transition:var(--transition); }
#menu a:after{ content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--gold); transition:var(--transition); }
#menu a:hover{ opacity:1; }
#menu a:hover:after{ width:100%; }

/* CTA desktop visible >=940px */
.cta{ display:none; }
@media(min-width:940px){ .cta{ display:inline-flex; } }

/* Botón hamburguesa (móvil) */
.nav-toggle{
  display:none; background:transparent; border:1px solid var(--line); color:var(--ink);
  width:40px; height:40px; border-radius:10px; align-items:center; justify-content:center; gap:0;
}
.nav-toggle .icon-close{ display:none; }
@media(max-width:940px){
  .nav-toggle{ display:inline-flex; }

  /* Menú móvil como panel */
  #menu{
    position: fixed; inset: 12px 12px auto 12px; z-index: 70; /* más alto que CTA/fab */
    background: rgba(15,15,15,.96); border:1px solid rgba(255,255,255,.08);
    border-radius:14px; box-shadow:0 22px 60px rgba(0,0,0,.65);
    display:none; flex-direction:column; gap:10px; padding:12px;
    backdrop-filter: blur(12px);
  }
  #menu.open{ display:flex; }
  #menu a{ padding:10px 12px; border-radius:10px; border:1px solid transparent; }
  #menu a:hover{ border-color: rgba(212,175,55,.30); background:linear-gradient(180deg,#191919,#121212); }
  body.no-scroll{ overflow:hidden; }
}

/* Mostrar/ocultar iconos en toggle */
@media(max-width:940px){
  #menu.open ~ .cta{ display:none; }
  .nav-toggle[aria-expanded="true"] .icon-menu{ display:none; }
  .nav-toggle[aria-expanded="true"] .icon-close{ display:block; }
  .nav-toggle[aria-expanded="false"] .icon-menu{ display:block; }
  .nav-toggle[aria-expanded="false"] .icon-close{ display:none; }
}

/* =======================
   BOTONES
   ======================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.1rem; border-radius:999px; font-weight:700;
  transform: translateZ(0); transition:var(--transition); box-shadow:var(--shadow);
  font-size:.95rem; min-width:160px; border:none; cursor:pointer;
  will-change: transform, filter;
}
.btn-gold{ background:linear-gradient(135deg, var(--gold), var(--gold-dark)); color:#0b0b0b; position:relative; overflow:hidden; }
.btn-gold::before{
  content:""; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition:var(--transition);
}
.btn-gold:hover::before{ left:100%; }
.btn-dark{ background:#1b1b1b; color:var(--ink); border:1px solid var(--line); }
.btn-ghost{ background:transparent; border:1px solid var(--gold); color:var(--gold); }
.btn:hover{ transform:translateY(-3px); filter:saturate(1.08); box-shadow:0 22px 50px rgba(0,0,0,.6); }
.btn:active{ transform:translateY(-1px); }

/* =======================
   HERO
   ======================= */
.hero{ position:relative; overflow:hidden; border-radius:0 0 var(--r-lg) var(--r-lg); background:var(--bg-2); margin-bottom:24px; }
.hero .wrap{ display:grid; gap:24px; grid-template-columns:1.05fr .95fr; align-items:center; padding:clamp(18px,3.6vw,40px) 0; }
.hero h1{ font-size:clamp(2rem, 3.2vw + 1rem, 3.6rem); line-height:1.08; background:linear-gradient(to right, var(--ink), var(--ink-dim)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero .lead{ color:var(--ink-dim); font-size:clamp(.98rem, 1.05vw + .6rem, 1.15rem); max-width:620px; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.hero picture{ border-radius:22px; overflow:hidden; filter:drop-shadow(0 24px 46px rgba(0,0,0,.72)); position:relative; transform:perspective(1000px) rotateY(-2deg); transition:var(--transition); will-change:transform; }
.hero picture:hover{ transform:perspective(1000px) rotateY(0deg) scale(1.02); }
.hero picture::after{ content:""; position:absolute; inset:0; background:linear-gradient(45deg, rgba(212,175,55,.05), transparent 70%); pointer-events:none; }
@media(max-width:980px){ .hero .wrap{ grid-template-columns:1fr; } .hero .img{ order:-1; } }
.hero::after{ content:""; position:absolute; inset:auto -10% 0 -10%; height:40%; background:linear-gradient(180deg, transparent, rgba(212,175,55,.11)); pointer-events:none; }

/* Rotador */
.promo-rotator{
  margin:12px 0 6px;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.45rem .85rem; border-radius:999px;
  border:1px solid rgba(212,175,55,.45);
  background: linear-gradient(180deg, rgba(212,175,55,.10), rgba(212,175,55,.05));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.35);
}
.promo-dot{ width:8px; height:8px; border-radius:999px; background:var(--gold); box-shadow:0 0 10px rgba(212,175,55,.65); }
.promo-text{ font-weight:700; letter-spacing:.2px; color:var(--gold); opacity:0; transform: translateY(6px) scale(.98); transition: opacity .32s ease, transform .32s ease; }
.promo-text.in{ opacity:1; transform:none; }
.promo-text.out{ opacity:0; transform: translateY(-6px) scale(.98); }
@media (prefers-reduced-motion: reduce){ .promo-text{ transition:none; } }

/* =======================
   ICONOS DE VALOR
   ======================= */
.values{ grid-template-columns: repeat(3, 1fr); }
.value{
  background: linear-gradient(180deg, #171717, #101010);
  border: 1px solid var(--line); border-radius: var(--r); padding: 24px 20px;
  position: relative; overflow: hidden; transition: var(--transition);
  backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.08);
}
.value::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(45deg, transparent, rgba(212,175,55,.03), transparent);
  opacity:0; transition:var(--transition);
}
.value:hover::before{ opacity:1; }
.value img{ width:40px; height:40px; filter: drop-shadow(0 0 14px rgba(212,175,55,.35)); margin-bottom:14px; transition:var(--transition); }
.value:hover img{ transform:scale(1.1); }
.value h3{ margin:.35rem 0; font-size:1.15rem; }
.value:hover{ transform: translateY(-6px); border-color: rgba(212,175,55,.30); }
@media(max-width:960px){ .values{ grid-template-columns:1fr; } }

/* =======================
   STORY + PIPELINE
   ======================= */
.story .grid{ grid-template-columns: 1.2fr .8fr; }
.story .panel{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 20px; position: relative; z-index: 1; backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.08); transition: var(--transition);
}
.story .panel:hover{ transform: translateY(-4px); border-color: rgba(212,175,55,0.3); }
.story .scene{
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
  background: #0f0f0f; position: relative; transition: var(--transition);
}
.story .scene::before{
  content:""; display:block; aspect-ratio: 4/3;
  background:
    radial-gradient(600px 260px at 85% 15%, rgba(212,175,55,.12), transparent 60%),
    url("assets/tijeras.png") right 12%/220px no-repeat,
    url("assets/reloj.png") left 10%/200px no-repeat;
  filter:saturate(1.05); transition:var(--transition);
}
.story .scene:hover::before{ filter:saturate(1.15) brightness(1.05); }
@media(max-width:960px){ .story .grid{ grid-template-columns:1fr; } }

.pipeline{ margin-top:16px; display:grid; gap:14px; }
.step{ display:grid; gap:6px; padding:16px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,#141414,#0f0f0f); }
.step strong{ display:inline-flex; align-items:center; gap:.6rem; }
.step strong b{ width:28px; height:28px; display:inline-grid; place-items:center; border-radius:50%; background:var(--gold); color:#0b0b0b; font-size:.95rem; box-shadow:0 8px 20px rgba(212,175,55,.35); }

/* =======================
   MÉTRICAS
   ======================= */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:12px; }
.stat{ text-align:center; padding:20px 16px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#141414,#0f0f0f); }
.num{ font-size:2rem; font-weight:800; color:var(--gold); text-shadow:0 0 16px rgba(212,175,55,.25); }
@media(max-width:980px){ .metrics{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .metrics{ grid-template-columns:1fr;} }

/* =======================
   ROI CALC
   ======================= */
#roi{ background:
  radial-gradient(900px 380px at 12% 20%, rgba(212,175,55,.10), transparent 60%),
  radial-gradient(900px 380px at 88% 10%, rgba(184,135,11,.09), transparent 60%), var(--bg);
}
.calc{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; }
.card{ border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#141414,#101010); padding:22px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px; }
label{ font-weight:600; font-size:.95rem; }
input[type="number"]{
  width:100%; padding:.8rem .9rem; border-radius:12px; border:1px solid #2b2b2b; background:#0f0f0f; color:var(--ink); outline:none;
}
.input-help{ font-size:.85rem; color:var(--ink-dim); }
.result{ font-size:1.2rem; margin-top:10px; }
.badge-note{ font-size:.75rem; opacity:.85; }

@media(max-width:960px){
  .calc{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* =======================
   COMPARATIVA
   ======================= */
.compare{ margin-top:18px; }
.compare table{ width:100%; border-collapse:collapse; }
.compare th,.compare td{ padding:14px 16px; border-bottom:1px solid var(--line); }
.compare th{ text-align:left; color:var(--gold); background:#0f0f0f; }

/* =======================
   GALERÍA
   ======================= */
#galeria .grid{ grid-template-columns:repeat(4,1fr); }
.gallery-item{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#0f0f0f; }
.gallery-item img{ filter:saturate(1.05); transition:transform .3s ease; }
.gallery-item:hover img{ transform:scale(1.04); }
@media(max-width:980px){ #galeria .grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ #galeria .grid{ grid-template-columns:1fr;} }

/* =======================
   PRECIOS (grid responsive)
   ======================= */
#precios .pricing{ grid-template-columns:repeat(3,1fr); }
@media(max-width:1000px){ #precios .pricing{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ #precios .pricing{ grid-template-columns:1fr; } }

/* =======================
   FAQ / FOOTER
   ======================= */
details{ border:1px solid var(--line); border-radius:12px; background:#0f0f0f; padding:14px 16px; transition:var(--transition); }
details summary{ cursor:pointer; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:12px; transition:var(--transition); }
details summary::after{ content:'+'; font-size:1.2rem; transition:var(--transition); color:var(--gold); }
details[open] summary::after{ content:'−'; }
details[open]{ border-color:var(--gold); background:rgba(212,175,55,.03); }
details + details{ margin-top:10px; }
footer{ padding:40px 0 88px; border-top:1px solid var(--line); color:#bdbdbd; background:rgba(10,10,10,.8); backdrop-filter: blur(8px); }
.foot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-links a{ opacity:.85; transition:var(--transition); }
.footer-links a:hover{ opacity:1; color:var(--gold); }

/* =======================
   EFECTOS JS + FIJOS
   ======================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
.magnet{ transition: transform .1s ease-out; }
.sticky-cta{
  position:fixed; inset:auto 12px 12px 12px; display:flex; justify-content:center; gap:12px;
  background:rgba(17,17,17,.88); border:1px solid rgba(212,175,55,.35); border-radius:16px; padding:10px; z-index:60;
  box-shadow:0 20px 50px rgba(0,0,0,.6); transform:translateY(120%); transition:transform .4s ease;
  backdrop-filter: blur(10px);
}
.sticky-cta.show{ transform:translateY(0); }
.fab-wa{
  position:fixed; right:14px; bottom:86px; width:58px; height:58px; display:grid; place-items:center;
  background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; border-radius:50%; box-shadow:0 12px 30px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.2); z-index:61;
}

@media (prefers-reduced-motion: reduce){
  .btn, .reveal, .value, .sticky-cta { transition:none; }
  .hero::after{ display:none; }
}

/* =======================
   ANIMACIONES EXTRA
   ======================= */
@keyframes float{ 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }
.float{ animation: float 6s ease-in-out infinite; }

/* =======================
   COOKIE BANNER (AEPD)
   ======================= */
.cookie-open-link{
  position: fixed; right: 14px; bottom: 14px; z-index: 1030;
  font-size: .9rem; opacity:.8; border-bottom:1px dashed var(--ink-dim);
}
.cookie-open-link:hover{ opacity:1; color: var(--gold); }

.cookie-banner{ position: fixed; inset: auto 12px 12px 12px; z-index: 1029; display:none; }
.cookie-banner.show{ display:block; }
.cookie-content{
  max-width: 860px; margin: 0 auto; padding: 18px;
  background: rgba(17,17,17,.94);
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
}
.cookie-content h3{ margin: 0 0 6px; font-size: 1.15rem; }
.cookie-content p{ margin: 0 0 10px; color: var(--ink-dim); }

.cookie-details summary{
  cursor:pointer; font-weight:700; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding: 8px 0;
}
.cookie-details{ margin: 6px 0 10px; }

.cookie-switch{
  display:flex; align-items:center; gap:10px; margin-top: 6px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#0f0f0f;
}
.cookie-switch input[type="checkbox"]{ width:18px; height:18px; }

.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.cookie-btn{
  padding:.8rem 1rem; border-radius:999px; font-weight:700; cursor:pointer;
  border:1px solid var(--line); background:#1b1b1b; color:var(--ink);
  transition: var(--transition);
}
.cookie-btn:hover{ transform: translateY(-2px); }
.cookie-accept{
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color:#0b0b0b; border:none;
}
.cookie-reject{
  border:1px solid var(--gold); color: var(--gold); background: transparent;
}

@media (max-width: 640px){
  .cookie-content{ padding:16px; }
  .cookie-actions{ flex-direction:column; }
}