/* ===== Variables de marca ===== */
:root{
  --incandescence: #FFBA1F;
  --cetacean: #070D2D;
  --paper: #F6F7FB;
  --muted: #9AA3B2;
  --radius: 16px;
  --shadow-soft: 0 8px 24px rgba(7,13,45,.25);
  --font-sans: "Segoe UI", "Aptos", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --incandescence-2: #ffd777;
  --header-height: 84px;
  --surface-base: #070D2D;
  --surface-deep: #050817;
  --surface-mid: #09123A;
  --section-border: rgba(255,255,255,.07);
  --section-bg: transparent;
  --section-bg-alt: transparent;
  --section-accent: none;
}

/* ===== Reset + base ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{
  scroll-padding-top:calc(var(--header-height) + 18px);
  background:#050817;
}
body{
  margin:0; font-family:var(--font-sans); color:#fff;
  background:
    linear-gradient(180deg, #070D2D 0%, #050817 34rem, #060A24 78rem, #070D2D 100%);
  background-color:#050817;
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:100% 100%;
  padding-top:var(--header-height);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
[hidden]{display:none !important}
a{color:inherit; text-decoration:none}
.container{width:100%; max-width:1120px; margin-inline:auto; padding-inline:24px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1.1rem; border-radius:999px; font-weight:700; letter-spacing:0; text-align:center; transition:transform .15s ease, box-shadow .15s ease, background .2s ease}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,
a:focus-visible,
button:focus-visible{outline:2px solid var(--incandescence); outline-offset:3px}
.btn-primary{background:linear-gradient(135deg, var(--incandescence), #ffd777); color:#0B0B0B; box-shadow:0 6px 20px rgba(255,186,31,.35)}
.btn-primary:hover{box-shadow:0 10px 28px rgba(255,186,31,.5)}
.btn-secondary{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#E9EEFF}
.btn-outline{background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff}
.chip{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .75rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-size:.85rem; color:#DDE3F1}
.pill{border:1px solid rgba(255,255,255,.12); padding:.25rem .6rem; border-radius:999px}
.muted{color:#C9D2E6}
.icon{width:22px; height:22px}
.spacer-12{height:12px}
.spacer-16{height:16px}
.accent{color:var(--incandescence)}

/* ===== Header ===== */
/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width:100%;
  z-index: 60;
  backdrop-filter: saturate(160%) blur(12px);
  background: rgba(7, 13, 45, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px; /* un poco m�s alto */
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo-only {
  height: 40px;                /* altura fija */
  width: auto;                 /* ancho autom�tico (mantiene proporci�n) */
  object-fit: contain;         /* evita deformaci�n */
  border-radius: 8px;
  background: transparent;     /* quitamos el fondo oscuro */
  border: none;                /* sin borde */
  box-shadow: none;            /* sin sombra */
  transition: transform 0.2s ease;
  display: block;
}
.brand-logo-only {
  filter: drop-shadow(0 0 6px rgba(255,186,31,0.4));
}

.brand-logo-only:hover {
  transform: scale(1.05);
}

.nav-links {
  display: flex;
  gap: 22px;
  font-weight: 500;
}

.nav-links a {
  opacity: 0.9;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.nav-links a:hover {
  opacity: 1;
  color: var(--incandescence);
}

.nav-cta {
  display: flex;
  gap: 10px;
}



.nav-mobile-cta {
  display: none;
}

.nav-mobile-cta .btn {
  width: 100%;
  justify-content: center;
}
/* ===== Hero ===== */
.hero{position:relative; isolation:isolate; padding:88px 0 56px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-30% -10% auto; height:70%; background:radial-gradient(900px 380px at 10% -10%, rgba(255,186,31,.25), rgba(255,255,255,0) 50%), radial-gradient(800px 380px at 110% 0%, rgba(99,110,255,.16), rgba(255,255,255,0) 55%); z-index:-1}
.hero-animated{position:relative; background:linear-gradient(180deg, rgba(7,13,45,.98), rgba(7,13,45,.9)); padding-bottom:86px}
.hero-animated .container{position:relative; z-index:2}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:-140px -200px -200px -200px;
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(ellipse at bottom, rgba(32,52,110,.35) 0%, rgba(32,52,110,0) 65%);
  opacity:.75;
  pointer-events:none;
}
.hero-animated::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(7,13,45,0), rgba(7,13,45,.92) 70%, rgba(7,13,45,1));
  z-index:1;
  pointer-events:none;
}
.hero-glow{position:absolute; width:380px; height:380px; border-radius:50%; filter:blur(120px); opacity:.75; mix-blend-mode:screen}
.hero-glow-left{left:-120px; top:-80px; background:rgba(255,200,74,.5)}
.hero-glow-right{right:-140px; bottom:-60px; background:rgba(88,120,255,.24)}
.hero-stars{position:absolute; inset:-10% -10%;}
.hero-stars span{
  position:absolute;
  display:block;
  --size:14px;
  --driftX: 6px;
  --driftY: -10px;
  width:var(--size);
  height:var(--size);
  background:radial-gradient(circle at 30% 30%, rgba(255,244,210,.95), rgba(255,187,60,.9));
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 72%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter:drop-shadow(0 0 14px rgba(255,200,74,.45));
  opacity:.72;
  transform-origin:center;
  animation:starDrift var(--float,7.5s) ease-in-out infinite, starBlink var(--twinkle,5.6s) ease-in-out infinite;
  will-change:transform, filter;
}
.hero-stars span:nth-child(1){top:12%; left:16%; --size:18px; --float:9s; --driftX:4px; --driftY:-14px}
.hero-stars span:nth-child(2){top:22%; left:40%; --size:12px; --twinkle:6.4s; animation-delay:.4s; --driftX:-6px; --driftY:-9px}
.hero-stars span:nth-child(3){top:14%; right:20%; --size:17px; animation-delay:1s; --driftX:3px; --driftY:-11px}
.hero-stars span:nth-child(4){top:38%; right:10%; --size:13px; animation-delay:1.6s; --driftX:-4px; --driftY:-7px}
.hero-stars span:nth-child(5){top:52%; left:26%; --size:11px; animation-delay:2.1s; --driftX:5px; --driftY:-6px}
.hero-stars span:nth-child(6){top:64%; left:10%; --size:22px; --float:8.5s; animation-delay:2.7s; --driftX:-3px; --driftY:-12px}
.hero-stars span:nth-child(7){bottom:20%; left:48%; --size:12px; animation-delay:3.2s; --driftX:6px; --driftY:-8px}
.hero-stars span:nth-child(8){bottom:30%; right:36%; --size:15px; --float:7.8s; animation-delay:3.7s; --driftX:-5px; --driftY:-10px}
.hero-stars span:nth-child(9){bottom:34%; right:14%; --size:10px; animation-delay:4.3s; --driftX:4px; --driftY:-5px}
.hero-stars span:nth-child(10){top:24%; left:62%; --size:9px; animation-delay:4.9s; --driftX:-7px; --driftY:-6px}
.hero-stars span:nth-child(11){bottom:14%; left:22%; --size:17px; animation-delay:5.3s; --driftX:5px; --driftY:-13px}
.hero-stars span:nth-child(12){bottom:10%; right:10%; --size:12px; animation-delay:5.9s; --driftX:-4px; --driftY:-9px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:center; position:relative; z-index:2}
.hero-copy{position:relative}
.hero-chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.chip-light{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#F8FBFF}
.eyebrow{margin-bottom:0}
.title{font-size:clamp(2rem, 4vw, 3.25rem); line-height:1.05; font-weight:900; letter-spacing:0; max-width:100%; overflow-wrap:break-word}
.subtitle{margin-top:12px; color:#D1D7E6; font-size:clamp(1rem, 1.6vw, 1.1rem)}
.cta-row{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.btn-lg{padding:.95rem 1.35rem; font-size:1.05rem; min-height:48px}
.cta-microcopy{margin-top:12px; font-size:.9rem}
.hero-kpis{
  margin-top:22px;
  max-width:650px;
  padding:10px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.11);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  box-shadow:0 18px 45px rgba(2,4,18,.28);
}
.hero-kpis > span:not(.hero-kpis-sep){
  display:grid;
  gap:5px;
  min-width:0;
  padding:12px 13px;
  border-radius:16px;
  background:rgba(5,8,25,.44);
  border:1px solid rgba(255,255,255,.075);
}
.hero-kpis strong{font-size:.94rem; line-height:1.2}
.hero-kpis-label{font-size:.82rem; line-height:1.4; color:#D7DEEF; min-width:0}
.hero-kpis-sep{display:none}
.hero-visual{position:relative; display:flex; justify-content:flex-end; align-items:center; padding:0 0 20px}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:10% 8% -6% 18%;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-radius:36px;
  filter:blur(70px);
  opacity:.75;
  z-index:0;
}
.hero-banner{position:relative; width:100%; max-width:520px; display:flex; justify-content:center}
.hero-banner-frame{
  position:relative;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.14);
  padding:16px;
  background:linear-gradient(155deg, rgba(255,255,255,.08), rgba(9,14,37,.65));
  box-shadow:0 18px 50px rgba(4,6,18,.5);
  overflow:hidden;
}
.hero-banner-frame img{
  width:100%;
  border-radius:26px;
  display:block;
  object-fit:cover;
}
.hero-system{
  position:relative;
  width:100%;
  max-width:520px;
  border-radius:30px;
  padding:20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035)),
    rgba(7,12,36,.86);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 28px 70px rgba(1,3,14,.52), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.hero-system::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(135deg, rgba(255,186,31,.2), rgba(73,104,255,.12), rgba(255,255,255,0));
  opacity:.7;
  pointer-events:none;
}
.hero-system > *{position:relative; z-index:1}
.hero-system__brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.hero-system__brand img{
  width:138px;
  height:auto;
  filter:drop-shadow(0 0 8px rgba(255,186,31,.35));
}
.hero-system__brand span{
  color:#F9D78A;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.review-card{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:18px;
  border-radius:22px;
  background:#F7F9FF;
  color:#111827;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.review-card__label{
  display:block;
  color:#5D6678;
  font-size:.8rem;
  font-weight:800;
  margin-bottom:7px;
}
.review-card strong{
  display:block;
  max-width:260px;
  font-size:1.25rem;
  line-height:1.12;
}
.review-card__rating{
  flex:0 0 auto;
  border-radius:14px;
  padding:8px 10px;
  background:linear-gradient(135deg, var(--incandescence), #ffd777);
  color:#111421;
  font-weight:900;
  white-space:nowrap;
}
.flow-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:10px;
  align-items:center;
  margin:18px 0;
}
.flow-tile{
  min-width:0;
  padding:16px 10px;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  text-align:center;
}
.flow-tile span,
.flow-tile small{
  display:block;
}
.flow-tile span{
  color:#fff;
  font-size:1.05rem;
  font-weight:900;
}
.flow-tile small{
  margin-top:3px;
  color:#BFC8DF;
  font-size:.76rem;
}
.flow-tile--qr{
  background:linear-gradient(145deg, rgba(255,186,31,.22), rgba(255,255,255,.055));
}
.flow-tile--message{
  background:linear-gradient(145deg, rgba(93,255,186,.16), rgba(255,255,255,.055));
}
.flow-arrow{
  color:#F9D78A;
  font-weight:900;
}
.message-preview{
  padding:16px;
  border-radius:22px;
  background:rgba(2,5,20,.55);
  border:1px solid rgba(255,255,255,.1);
}
.message-preview__bubble{
  max-width:340px;
  padding:13px 15px;
  border-radius:16px 16px 16px 4px;
  background:rgba(255,255,255,.1);
  color:#F4F7FF;
  font-size:.93rem;
  line-height:1.45;
}
.message-preview__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.message-preview__meta span{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  padding:6px 10px;
  color:#C7CEE3;
  font-size:.75rem;
}
.hero-system__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
}
.hero-system__footer strong,
.hero-system__footer span{
  display:block;
}
.hero-system__footer span{
  margin-top:4px;
  color:#BFC8DF;
  font-size:.84rem;
}
.hero-system__footer a{
  flex:0 0 auto;
  border-radius:999px;
  padding:10px 14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-weight:800;
  font-size:.88rem;
}
@media (prefers-reduced-motion: reduce){
  .hero-stars span,
  .hero-card,
  .pin .marker,
  .pin .pulse{
    animation:none !important;
    transition:none !important;
  }
}

.scroll-indicator{
  display:flex;
  justify-content:center;
  margin-top:-30px;
  margin-bottom:-22px;
  position:relative;
  z-index:4;
}
.scroll-indicator-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:.5rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:#E2E9FF;
  font-size:.85rem;
  background:rgba(5,8,23,.74);
  box-shadow:0 14px 32px rgba(1,3,14,.3);
  transition:transform .2s ease, color .2s ease, border-color .2s ease;
}
.scroll-indicator-link svg{width:14px; height:22px; opacity:.75}
.scroll-indicator-link:hover{
  transform:translateY(4px);
  color:#fff;
  border-color:rgba(255,255,255,.3);
}

.hero-copy,
.hero-visual,
.hero-grid > *{
  min-width:0;
}


@keyframes starDrift{
  0%{transform:translate3d(0,0,0); opacity:.45;}
  35%{transform:translate3d(calc(var(--driftX)*0.6), calc(var(--driftY)*0.6), 0); opacity:.95;}
  70%{transform:translate3d(calc(var(--driftX)*-0.3), calc(var(--driftY)*0.8), 0); opacity:.35;}
  100%{transform:translate3d(0,0,0); opacity:.45;}
}

@keyframes starBlink{
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,255,255,.25));}
  45%{filter:drop-shadow(0 0 20px rgba(255,255,255,.6));}
  75%{filter:drop-shadow(0 0 4px rgba(255,255,255,.12));}
}

@keyframes heroFloat{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-10px,0); }
}

/* Si querías un vaivén con tilt para la tarjeta: */
@keyframes cardTilt{
  0%,100%{ transform: translate3d(0,0,0) rotateX(0) rotateY(0); }
  50%{ transform: translate3d(0,-8px,0) rotateX(1.5deg) rotateY(-1.5deg); }
}

/* Si querías un brillo del marco: */
@keyframes frameGlow{
  0%,100%{
    box-shadow: 0 18px 50px rgba(4,6,18,.5);
    border-color: rgba(255,255,255,.14);
  }
  50%{
    box-shadow: 0 20px 65px rgba(255,217,94,.35);
    border-color: rgba(255,217,94,.4);
  }
}

.hero-internal{padding-top:60px}
.hero-internal .subtitle{max-width:540px}

.system-showcase{
  padding:78px 0 66px;
  background:
    radial-gradient(820px 520px at 12% 10%, rgba(255,186,31,.11), rgba(255,255,255,0) 60%),
    radial-gradient(760px 460px at 92% 10%, rgba(73,104,255,.12), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(5,8,25,1), rgba(7,13,45,1));
}

.system-showcase__grid{
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(420px, .9fr);
  gap:44px;
  align-items:center;
}

.system-showcase__copy{
  min-width:0;
}

.system-showcase__copy h2{
  margin:12px 0 14px;
  font-size:clamp(2rem, 3vw, 2.7rem);
  line-height:1.08;
}

.system-showcase__copy p{
  max-width:620px;
  line-height:1.62;
}

.system-points{
  list-style:none;
  display:grid;
  gap:10px;
  margin:22px 0 24px;
  padding:0;
}

.system-points li{
  position:relative;
  padding-left:28px;
  color:#D9DFEE;
  line-height:1.48;
}

.system-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--incandescence);
  box-shadow:0 0 16px rgba(255,186,31,.44);
}

.products-section{
  position:relative;
  padding:76px 0 58px;
  background:
    radial-gradient(720px 420px at 8% 0%, rgba(255,186,31,.12), rgba(255,255,255,0) 58%),
    radial-gradient(760px 440px at 100% 30%, rgba(73,104,255,.12), rgba(255,255,255,0) 56%),
    var(--cetacean);
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:26px;
}
.product-grid--launch{grid-template-columns:minmax(0, 1fr);max-width:760px;margin-inline:auto}

.product-card{
  min-width:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow:0 18px 38px rgba(2,4,18,.38);
}

.product-visual,
.catalog-visual{
  position:relative;
  min-height:154px;
  display:grid;
  place-items:center;
  margin:-4px 0 18px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.09);
  overflow:hidden;
}

.product-visual::before,
.catalog-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,215,119,.12), rgba(86,111,255,.08) 42%, rgba(255,255,255,0) 70%);
  opacity:.72;
  pointer-events:none;
}

.catalog-visual{
  min-height:128px;
  margin:4px 0 4px;
}

.hero-card--physical{
  min-height:480px;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 45%,rgba(255,186,31,.12),transparent 55%),#080f34;
}

.hero-card__stand{
  display:block;
  width:min(78%,360px);
  height:auto;
  border-radius:5px;
  box-shadow:0 28px 58px rgba(0,0,0,.42);
}

.catalog-stand-real{
  position:relative;
  z-index:1;
  display:block;
  width:88px;
  height:auto;
  border-radius:3px;
  box-shadow:0 16px 30px rgba(0,0,0,.38);
}

.mock-stand,
.mock-card-device,
.mock-package,
.mock-plate,
.mock-pack-stack,
.mock-custom-grid{
  position:relative;
  z-index:1;
}

.mock-stand{
  width:112px;
  height:132px;
  transform:perspective(520px) rotateX(9deg) rotateY(-10deg);
  border-radius:18px 18px 12px 12px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.96), rgba(218,226,246,.92));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 24px 42px rgba(0,0,0,.35);
}

.mock-stand::after{
  content:"";
  position:absolute;
  left:17px;
  right:17px;
  bottom:-18px;
  height:22px;
  border-radius:0 0 18px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(165,178,211,.92));
  transform:skewX(-10deg);
}

.mock-brand-mark{
  position:absolute;
  left:12px;
  top:12px;
  width:30px;
  height:30px;
}

.mock-brand-mark img,
.mock-card-device img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.mock-qr{
  position:absolute;
  right:12px;
  bottom:18px;
  width:42px;
  height:42px;
  border-radius:7px;
  background:
    linear-gradient(90deg, #111421 10px, transparent 10px 16px, #111421 16px 23px, transparent 23px),
    linear-gradient(#111421 8px, transparent 8px 15px, #111421 15px 22px, transparent 22px),
    #fff;
  box-shadow:0 0 0 5px #fff, 0 12px 18px rgba(0,0,0,.15);
}

.mock-qr::before,
.mock-qr::after{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  border:3px solid #111421;
  background:#fff;
}

.mock-qr::before{
  left:4px;
  top:4px;
}

.mock-qr::after{
  right:4px;
  top:4px;
}

.mock-qr--small{
  width:32px;
  height:32px;
  right:14px;
  bottom:12px;
  border-radius:6px;
  box-shadow:0 0 0 4px #fff, 0 10px 16px rgba(0,0,0,.16);
}

.mock-qr--small::before,
.mock-qr--small::after{
  width:9px;
  height:9px;
  border-width:2px;
}

.mock-qr--tiny{
  width:24px;
  height:24px;
  right:9px;
  bottom:9px;
  border-radius:5px;
  box-shadow:0 0 0 3px #fff, 0 8px 12px rgba(0,0,0,.14);
}

.mock-qr--tiny::before,
.mock-qr--tiny::after{
  width:7px;
  height:7px;
  border-width:2px;
}

.mock-nfc{
  position:absolute;
  left:13px;
  bottom:20px;
  color:#101427;
  font-size:.72rem;
  font-weight:900;
}

.mock-nfc::after{
  content:"";
  display:block;
  width:34px;
  height:18px;
  margin-top:3px;
  border:2px solid rgba(255,186,31,.9);
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:rotate(35deg);
}

.mock-shadow{
  position:absolute;
  z-index:0;
  bottom:20px;
  width:126px;
  height:24px;
  border-radius:50%;
  background:rgba(0,0,0,.32);
  filter:blur(8px);
}

.mock-card-device{
  width:162px;
  height:98px;
  border-radius:18px;
  padding:16px;
  background:linear-gradient(145deg, #071042, #0B2C8C);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 22px 40px rgba(0,0,0,.34);
  transform:rotate(-7deg);
}

.mock-card-device img{
  width:28px;
  height:28px;
  display:inline-block;
  vertical-align:middle;
}

.mock-card-device span{
  display:inline-block;
  margin-left:7px;
  color:#fff;
  font-weight:900;
  vertical-align:middle;
}

.mock-phone-tap{
  position:absolute;
  z-index:2;
  right:24px;
  bottom:18px;
  width:42px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  color:#F9D78A;
  font-size:.7rem;
  font-weight:900;
  text-transform:uppercase;
}

.mock-package{
  width:142px;
  height:102px;
  border-radius:12px;
  background:
    linear-gradient(135deg, rgba(255,215,119,.26), rgba(255,255,255,.08)),
    #A66A3F;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 38px rgba(0,0,0,.3);
  transform:perspective(420px) rotateX(8deg) rotateY(12deg);
}

.mock-package::before{
  content:"";
  position:absolute;
  inset:0 45%;
  background:rgba(255,255,255,.16);
}

.mock-tag-label{
  position:absolute;
  right:16px;
  top:20px;
  width:62px;
  height:62px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 12px 20px rgba(0,0,0,.18);
}

.mock-tag-label span{
  position:absolute;
  left:9px;
  top:8px;
  color:#111421;
  font-size:.66rem;
  font-weight:900;
  text-transform:uppercase;
}

.mock-table{
  position:absolute;
  z-index:0;
  bottom:26px;
  width:176px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,215,119,.14), rgba(255,255,255,.08));
}

.mock-plate{
  width:136px;
  height:82px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(220,228,248,.92));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 22px 34px rgba(0,0,0,.3);
  transform:perspective(420px) rotateX(14deg);
}

.mock-plate span{
  position:absolute;
  left:14px;
  top:14px;
  color:#101427;
  font-size:.72rem;
  font-weight:900;
}

.mock-pack-stack{
  width:150px;
  height:94px;
}

.mock-pack-stack span{
  position:absolute;
  width:92px;
  height:58px;
  border-radius:14px;
  background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(213,224,246,.9));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 14px 24px rgba(0,0,0,.22);
}

.mock-pack-stack span:nth-child(1){
  left:2px;
  top:28px;
  transform:rotate(-9deg);
}

.mock-pack-stack span:nth-child(2){
  left:30px;
  top:14px;
  background:linear-gradient(145deg, #071042, #0B2C8C);
}

.mock-pack-stack span:nth-child(3){
  right:2px;
  top:30px;
  transform:rotate(8deg);
}

.mock-pack-stack span:nth-child(4){
  left:58px;
  top:43px;
  width:70px;
  height:44px;
  background:linear-gradient(145deg, rgba(255,215,119,.96), rgba(255,255,255,.78));
}

.mock-custom-grid{
  display:grid;
  grid-template-columns:repeat(2, 58px);
  gap:10px;
}

.mock-custom-grid span{
  height:42px;
  border-radius:13px;
  background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
}

.mock-custom-grid span:nth-child(2){
  background:linear-gradient(145deg, #071042, #0B2C8C);
}

.mock-custom-grid span:nth-child(3){
  background:linear-gradient(145deg, rgba(255,215,119,.85), rgba(255,255,255,.35));
}

.product-card--featured{
  border-color:rgba(255,186,31,.34);
  background:
    linear-gradient(180deg, rgba(255,186,31,.14), rgba(255,255,255,.035)),
    rgba(7,12,36,.76);
}

.product-card__icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg, rgba(255,186,31,.95), rgba(255,215,119,.85));
  color:#101427;
  font-weight:900;
  margin-bottom:16px;
  box-shadow:0 10px 24px rgba(255,186,31,.24);
}

.product-card h3{
  margin:0 0 8px;
  font-size:1.05rem;
}

.product-card p{
  margin:0;
  color:#D4DAE9;
  line-height:1.55;
}

.product-card__meta{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-top:16px;
  border-radius:999px;
  padding:7px 10px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.1);
  color:#F9D78A;
  font-size:.78rem;
  font-weight:800;
  line-height:1.25;
}

.plans-section{
  padding:82px 0 76px;
  background:
    radial-gradient(920px 520px at 12% 8%, rgba(255,186,31,.12), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(7,13,45,1), rgba(5,8,25,1));
}

.plan-decision{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin:28px 0 18px;
}

.plan-decision span{
  min-width:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.045);
  color:#DCE3F6;
  line-height:1.45;
  font-size:.92rem;
}

.offer-banner{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:18px;
  align-items:center;
  margin:24px 0 18px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,215,119,.28);
  background:
    linear-gradient(135deg, rgba(255,186,31,.15), rgba(255,255,255,.045)),
    rgba(7,12,36,.78);
  box-shadow:0 18px 42px rgba(2,4,18,.32);
}

.offer-banner__badge{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-bottom:8px;
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,186,31,.16);
  border:1px solid rgba(255,186,31,.28);
  color:#F9D78A;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.offer-banner strong,
.offer-banner p{
  display:block;
}

.offer-banner strong{
  font-size:1.12rem;
}

.offer-banner p{
  margin:6px 0 0;
  color:#D8E0F2;
  line-height:1.5;
}

.offer-countdown{
  display:flex;
  gap:8px;
}

.offer-countdown span{
  min-width:70px;
  display:grid;
  place-items:center;
  gap:2px;
  border-radius:14px;
  padding:10px;
  background:rgba(5,8,23,.62);
  border:1px solid rgba(255,255,255,.1);
}

.offer-countdown strong{
  color:#fff;
  font-size:1.2rem;
}

.offer-countdown small{
  color:#AEB8D0;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
}

.pricing--sales{
  margin-top:0;
  align-items:stretch;
}

.plan-card{
  padding:26px;
  gap:16px;
  min-height:100%;
}

.plan-card .badge{
  position:static;
  align-self:flex-start;
  width:max-content;
}

.plan-card.highlight{
  background:
    linear-gradient(180deg, rgba(255,186,31,.12), rgba(255,255,255,.035)),
    rgba(7,12,36,.82);
}

.price-card .badge.badge-dark{
  background:rgba(255,255,255,.12);
  color:#F4F7FF;
  border:1px solid rgba(255,255,255,.16);
}

.plan-card__kicker{
  color:#F9D78A;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.plan-card h3{
  margin:0;
  font-size:1.45rem;
}

.plan-card__best{
  margin:0;
  color:#C9D2E6;
  line-height:1.55;
}

.plan-card__price,
.price-card__price{
  display:grid;
  gap:4px;
  margin:-2px 0 2px;
}

.plan-card__price strong,
.price-card__price strong{
  color:#fff;
  font-size:clamp(1.45rem, 2.4vw, 2rem);
  line-height:1;
}

.plan-card__price span,
.price-card__price span{
  color:#F9D78A;
  font-size:.82rem;
  font-weight:800;
}

.plan-card__outcome{
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;
  padding:14px 15px;
  background:rgba(3,6,22,.46);
}

.plan-card__outcome span,
.plan-card__outcome strong{
  display:block;
}

.plan-card__outcome span{
  color:#9FA9C3;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:5px;
}

.plan-card__outcome strong{
  color:#fff;
  line-height:1.35;
}

.plan-card__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:auto;
}

.plan-card__meta span{
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  color:#C7CEE3;
  font-size:.78rem;
}

.plan-card .btn{
  width:100%;
  margin-top:2px;
}

.plans-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:22px;
  padding:20px 22px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
}

.plans-footer strong,
.plans-footer span{
  display:block;
}

.plans-footer span{
  margin-top:5px;
  color:#C7CEE3;
  line-height:1.45;
}

.price-note{
  display:block;
  margin-top:auto;
  color:#F9D78A;
  font-size:.88rem;
  line-height:1.45;
}

.software-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:22px;
}

.software-card{
  min-width:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:18px;
  background:rgba(255,255,255,.04);
}

.software-card span{
  display:inline-flex;
  border-radius:999px;
  padding:5px 9px;
  background:rgba(255,186,31,.11);
  border:1px solid rgba(255,186,31,.2);
  color:#F9D78A;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.software-card h3{
  margin:12px 0 8px;
  font-size:1.12rem;
}

.software-card__price{
  display:block;
  margin:-2px 0 8px;
  color:#F7F9FF;
  font-size:.96rem;
}

.software-card p{
  margin:0;
  color:#C7CEE3;
  line-height:1.5;
  font-size:.92rem;
}

.trust-section{
  padding:74px 0;
  background:
    linear-gradient(180deg, rgba(5,8,25,1), rgba(7,13,45,1)),
    var(--cetacean);
}

.trust-grid{
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  gap:28px;
  align-items:center;
}

.trust-copy h2{
  margin:10px 0 12px;
  font-size:clamp(2rem, 3vw, 2.7rem);
  line-height:1.15;
}

.trust-proof-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
}

.trust-proof-row span{
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:#E7ECFF;
  font-size:.84rem;
  font-weight:800;
}

.evidence-board{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:14px;
}

.evidence-card{
  position:relative;
  min-width:0;
  min-height:190px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03)),
    rgba(7,12,36,.76);
  box-shadow:0 20px 46px rgba(1,3,14,.42);
  overflow:hidden;
}

.evidence-card--video{
  grid-row:span 2;
  min-height:394px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    radial-gradient(360px 260px at 40% 30%, rgba(255,186,31,.24), rgba(255,255,255,0) 58%),
    linear-gradient(145deg, rgba(15,24,64,.92), rgba(4,7,24,.9));
}

.evidence-card__type{
  position:relative;
  z-index:1;
  display:inline-flex;
  width:max-content;
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  color:#F9D78A;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.evidence-card__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#111421;
  font-size:1.45rem;
  font-weight:900;
}

.evidence-card__play::before{
  content:"";
  position:absolute;
  width:84px;
  height:84px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--incandescence), #ffd777);
  box-shadow:0 20px 44px rgba(255,186,31,.32);
  z-index:-1;
}

.evidence-card h3{
  position:relative;
  z-index:1;
  margin:0 0 8px;
  font-size:1.2rem;
}

.evidence-card p{
  position:relative;
  z-index:1;
  margin:0;
  color:#C7CEE3;
  line-height:1.55;
}

.trust-list{
  display:grid;
  gap:12px;
}

.trust-list div{
  position:relative;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:18px 18px 18px 52px;
  background:rgba(255,255,255,.045);
}

.trust-list div::before{
  content:"";
  position:absolute;
  left:20px;
  top:23px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--incandescence);
  box-shadow:0 0 18px rgba(255,186,31,.42);
}

.trust-list strong,
.trust-list span{
  display:block;
}

.trust-list span{
  margin-top:5px;
  color:#C7CEE3;
  line-height:1.5;
}

.sticky-cta{
  display:none;
}

/* ===== Sections ===== */
section{padding:64px 0}
.section-title{font-size:1.8rem; margin:0 0 22px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-soft)}
.card h3{margin:0 0 8px}
.card p{margin:0; color:#D4DAE9}
.optional{display:block}

/* ===== Paquetes ===== */
.pricing{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.pricing-full{grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); margin-top:24px}
.price-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:12px; position:relative}
.price-card .badge{position:absolute; top:14px; right:14px; background:var(--incandescence); color:#0B0B0B; padding:.25rem .6rem; border-radius:999px; font-weight:800; font-size:.8rem}
.price-card .features{color:#D4DAE9; display:grid; gap:8px; padding-left:18px; margin:0 0 10px}
.price-card.highlight{outline:2px solid rgba(255,186,31,.45); box-shadow:0 10px 28px rgba(255,186,31,.15)}
.packages-actions{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.packages-actions .btn{min-width:220px; justify-content:center}

/* ===== Testimonios ===== */
#testimonios{padding:72px 0}
.hero-card{
  background:linear-gradient(165deg, rgba(255,255,255,.08), rgba(7,13,45,.85));
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  padding:28px;
  box-shadow:0 18px 44px rgba(5,10,30,.45);
  position:relative;
  overflow:hidden;
}
.hero-card::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
  opacity:.5;
}
.hero-card > *{position:relative; z-index:1}
.opiniones-mapa-shell{
  margin-top:48px;
  padding:28px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(7,13,45,.85));
  box-shadow:0 12px 40px rgba(4,8,24,.4);
}
.opiniones-mapa-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.opiniones-mapa-head h2{margin:8px 0 6px; font-size:1.65rem}
.opiniones-map-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,340px);
  gap:24px;
  align-items:flex-start;
}
.opiniones-mapa{
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.opiniones-sidebar{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.opiniones-carousel{
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:transform .55s ease;
}
.opiniones-note{
  background:rgba(7,10,33,.9);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:18px 20px;
  box-shadow:0 18px 38px rgba(4,6,20,.55);
}
.opiniones-note p{
  margin:12px 0;
  color:#EAF0FF;
  line-height:1.5;
}
.opiniones-note small{
  color:#9AA7C6;
  font-size:.92rem;
}
.note-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:#F6F8FF;
}
.note-stars{color:var(--incandescence); font-size:.95rem}
.opiniones-disclaimer{
  margin-top:18px;
  font-size:.85rem;
}
.opiniones-mapa-kpis{
  display:flex;
  gap:14px;
  justify-content:center;
  width:100%;
  max-width:360px;
  margin-inline:auto;
}
.opiniones-mapa-kpis span{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:rgba(7,11,30,.85);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px 16px;
  min-width:140px;
  box-shadow:0 10px 24px rgba(4,6,20,.45);
}
.opiniones-mapa-kpis strong{
  font-size:1.2rem;
}
.opiniones-mapa-kpis small{
  font-size:.78rem;
  color:#9AA7C6;
}
.opiniones-carousel-window{
  overflow:hidden;
  position:relative;
  height:auto;
}
.opiniones-ctas{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}
.opiniones-ctas .btn{
  flex:1;
  justify-content:center;
  min-width:140px;
}
/* Contenedor del mapa */
 .mapa-wrap {
   position: relative;
   aspect-ratio: 1 / 1;
   max-height: clamp(320px, 42vw, 520px);
   border-radius: 26px;
   overflow: hidden;
   isolation: isolate;
   border: 1px solid rgba(255,255,255,.08);
   background:
     radial-gradient(1100px 620px at 10% -10%, rgba(255,186,31,.12), transparent 60%),
     radial-gradient(900px 620px at 95% 110%, rgba(111,128,255,.18), transparent 55%),
     #060b26;
   box-shadow: 0 18px 40px rgba(5,10,30,.55);
   width: 100%;
   max-width: 520px;
   margin-inline: auto;
 }


/* Imagen del mapa */
.mapa-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;               /* No recorta nada */
  object-position: center;           /* Centrado */
  transform: none;                   /* Sin desplazamientos */
  filter: drop-shadow(0 28px 48px rgba(0,0,0,.45)) saturate(.95);
  z-index: 0;
}

.pins{
  position:absolute;
  inset:0;
  z-index:2;
}
.pin{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-88%);
  width:24px;
  height:24px;
  background:none;
  border:0;
  cursor:pointer;
}
.pin:focus-visible{outline:2px solid var(--incandescence); outline-offset:4px}
.pin .marker{
  position:absolute;
  inset:0;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:radial-gradient(circle at 28% 35%, #f8fbff 0%, #c0e0ff 38%, #7fb7ff 70%, #4a77ff 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.15) inset;
  animation:opinionesFloat 3.2s ease-in-out infinite;
}
.pin .marker::after{
  content:"★";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transform:rotate(45deg);
  font-size:12px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.pin .pulse{
  position:absolute;
  left:50%;
  top:100%;
  width:10px;
  height:10px;
  transform:translate(-50%,-35%);
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(145,196,255,.6);
  animation:opinionesPulse 2.4s infinite;
}
.pin:hover .marker{animation:opinionesPop .35s ease}
.map-tooltip{
  position:absolute;
  --tooltip-x: 0px;
  --tooltip-y: 0px;
  top:var(--tooltip-y);
  left:var(--tooltip-x);
  width:min(360px,80vw);
  border-radius:18px;
  padding:16px 18px;
  background:rgba(8,12,32,.92);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  box-shadow:0 20px 40px rgba(2,3,12,.6);
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, calc(-100% - 12px)) scale(.96);
  transition:opacity .25s ease, transform .25s ease;
  z-index:3;
}
.map-tooltip.show{
  opacity:1;
  transform:translate(-50%, calc(-100% - 12px)) scale(1);
}
.map-tooltip .tooltip-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:6px;
}
.map-tooltip .ciudad{font-weight:800; letter-spacing:.25px}
.map-tooltip .rating{color:#ffd778; font-variant-numeric:tabular-nums}
.map-tooltip .texto{margin:.2rem 0 .35rem; line-height:1.5}
.map-tooltip .cliente{color:#9aa3b2; font-size:.9rem}
.map-tooltip .flecha{
  position:absolute;
  width:14px;
  height:14px;
  background:inherit;
  border:inherit;
  border-left:none;
  border-top:none;
  transform:rotate(45deg);
  bottom:-7px;
  left:calc(50% - 7px);
}
@keyframes opinionesPulse{
  0%{box-shadow:0 0 0 0 rgba(255,186,31,.6)}
  70%{box-shadow:0 0 0 26px rgba(255,186,31,0)}
  100%{box-shadow:0 0 0 0 rgba(255,186,31,0)}
}
@keyframes opinionesFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -4px}
}
@keyframes opinionesPop{
  0%{scale:1}
  50%{scale:1.1}
  100%{scale:1}
}

/* ===== CTA + Form ===== */
.cta-final{display:block}
.cta-panel{background:linear-gradient(140deg, rgba(255,186,31,.12), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:24px; box-shadow:var(--shadow-soft)}
.configurator{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:flex-start}
.config-form label{display:block; font-size:.95rem; color:#D4DAE9; margin-bottom:16px}
.config-form select,
.config-form input{width:100%; margin-top:6px}
.config-summary{display:flex; flex-direction:column; gap:14px}
.summary-line{display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:8px}
.summary-line strong{font-size:1rem}
.summary-highlight{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:6px}
.summary-highlight strong{font-size:1.3rem; color:var(--incandescence)}
.input,.textarea, select{
  width:100%; padding:.8rem 1rem; margin-top:.35rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff
}
select option{
  color:#0B0B0B;
  background:#fff;
}
select option:checked{
  background:var(--incandescence);
  color:#070D2D;
}

/* ===== Footer ===== */
footer{padding:30px 0; border-top:1px solid rgba(255,255,255,.08); color:#C9D2E6}
.footer-grid{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center}
.footer-links{display:flex; gap:16px; flex-wrap:wrap}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{justify-content:center; padding-bottom:0}
  .hero-card{max-width:420px; margin-inline:auto}
  .hero-chips{gap:8px}
  .hero-kpis{grid-template-columns:1fr; border-radius:18px}
  .system-showcase__grid{grid-template-columns:1fr; gap:30px}
  .hero-system{max-width:620px; margin-inline:auto}
  .product-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .plan-decision{grid-template-columns:1fr}
  .software-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .plans-footer{flex-direction:column; align-items:flex-start}
  .plans-footer .packages-actions{width:100%}
  .trust-grid{grid-template-columns:1fr}
  .evidence-board{grid-template-columns:1fr}
  .evidence-card--video{grid-row:auto; min-height:280px}
  .opiniones-mapa-shell{padding:20px}
  .opiniones-mapa-head{flex-direction:column; align-items:flex-start}
  .opiniones-map-grid{grid-template-columns:1fr}
  .opiniones-sidebar{margin-top:18px}
  .metrics{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .configurator{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .container{padding-inline:20px}
  .title{font-size:2.25rem; line-height:1.08}
  .subtitle{font-size:1rem; line-height:1.55}
  .system-showcase{padding:58px 0}
  .system-showcase__copy h2{font-size:1.75rem}
  .hero-system{padding:16px; border-radius:24px}
  .hero-system__brand{align-items:flex-start; flex-direction:column; gap:8px}
  .review-card{flex-direction:column; border-radius:18px}
  .review-card strong{font-size:1.12rem}
  .flow-grid{grid-template-columns:1fr; gap:8px}
  .flow-arrow{display:none}
  .flow-tile{display:flex; justify-content:space-between; align-items:center; padding:12px 14px}
  .flow-tile small{margin-top:0}
  .message-preview__bubble{max-width:none}
  .hero-system__footer{align-items:flex-start; flex-direction:column}
  .hero-system__footer a{width:100%; text-align:center}
  .product-grid,
  .software-grid{grid-template-columns:1fr}
  .product-card,
  .trust-list div{border-radius:14px}
  .products-section,
  .plans-section,
  .trust-section{padding:58px 0}
  .plan-card{padding:22px}
  .plan-card h3{font-size:1.28rem}
  .plan-decision{margin-top:22px}
  .plans-footer{padding:18px}
  .plans-footer .packages-actions{flex-direction:column}
  .plans-footer .packages-actions .btn{width:100%; min-width:0}
  .trust-copy h2{font-size:1.7rem}
  .trust-proof-row{gap:8px}
  .trust-proof-row span{width:100%; text-align:center}
  .offer-banner{grid-template-columns:1fr; border-radius:16px; padding:16px}
  .offer-countdown{width:100%; justify-content:space-between}
  .offer-countdown span{min-width:0; width:100%}
  .evidence-card{min-height:auto; border-radius:16px; padding:18px}
  .evidence-card--video{min-height:250px}
  .evidence-card__play::before{width:70px; height:70px}
  .case-flow{grid-template-columns:1fr}
  .case-flow span{text-align:left}
  .opiniones-mapa-shell{padding:16px}
  .opiniones-map-grid{gap:14px}
  .opiniones-mapa{
    width:100%;
    max-width:250px;
    justify-self:center;
    padding-left:0;
  }
  .opiniones-sidebar{width:100%}
  .mapa-wrap{
    aspect-ratio:1/1;
    max-height:clamp(220px, 70vw, 320px);
    width:100%;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .mapa-wrap::before,
  .mapa-wrap::after{display:none}
  .opiniones-note{
    padding:12px 14px;
    border-radius:18px;
  }
  .opiniones-note p{
    font-size:.9rem;
  }
  .note-head{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .opiniones-mapa-kpis{
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .opiniones-mapa-kpis span{
    width:100%;
    min-width:0;
    padding:10px 12px;
  }
  .opiniones-ctas{
    flex-direction:column;
    gap:10px;
  }
  .opiniones-ctas .btn{
    min-width:0;
    width:100%;
  }
  .map-tooltip{
    width:min(300px,85vw);
    padding:12px 14px;
  }
  .map-tooltip .texto{font-size:.92rem}
}

@media (min-width: 981px){
  .opiniones-mapa{
    padding-left:clamp(20px,4vw,60px);
  }
}
.nav-toggle{display:none}

@media (max-width: 768px){
  body{padding-bottom:88px}
  .nav{gap:10px}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:8px; border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06); color:#fff; font-size:20px; cursor:pointer;
  }
  .nav-links{
    position: absolute; right:24px; top:64px; 
    background:rgba(7,13,45,.95); border:1px solid rgba(255,255,255,.12);
    border-radius:12px; padding:10px; display:none; flex-direction:column; gap:10px;
    width: min(80vw, 260px); box-shadow: 0 12px 30px rgba(0,0,0,.35);
  }
  .nav-links.open{ display:flex }
  .nav-cta{ display:none }           /* escondemos el CTA grande en m�vil */
  .nav-mobile-cta{
    display:flex;
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:10px;
    margin-top:10px;
  }
  .brand-logo-only{ height: 32px }   /* logo un poco m�s peque�o */
  .hero-kpis{width:100%}
  .hero-kpis-sep{display:none}
  .cta-row{flex-direction:column}
  .btn.btn-lg{width:100%; justify-content:center}
  .btn.btn-primary.btn-lg{box-shadow:0 0 20px rgba(255,217,94,.35)}
  .btn-ghost{width:100%; justify-content:center}
  .hero.hero-animated .hero-grid{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding-top:24px;
  }
  .hero-visual{
    justify-content:center;
    padding-bottom:0;
  }
  .hero-system{width:100%}
  .sticky-cta{
    position:fixed;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:70;
    display:grid;
    grid-template-columns:.78fr 1fr;
    gap:10px;
    padding:8px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    background:rgba(5,8,25,.92);
    box-shadow:0 18px 38px rgba(0,0,0,.45);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .sticky-cta__link{
    display:flex;
    min-height:44px;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:linear-gradient(135deg, var(--incandescence), #ffd777);
    color:#111421;
    font-weight:900;
    text-align:center;
  }
  .sticky-cta__link--ghost{
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
  }
}
/* ===== Metodología (sección) ===== */
.method{position:relative;padding:64px 0 48px}
.method__head{display:grid;gap:10px;margin-bottom:22px}
.method__eyebrow{display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);border-radius:999px;padding:6px 12px;color:#DCE3F6;font-size:.9rem}
.method__title{font-size:clamp(1.8rem,3.6vw,2.4rem);line-height:1.1;font-weight:900;margin:0}
.method__lead{color:#FFD777;max-width:760px;margin:.5rem 0 0;font-weight:700;font-size:.98rem;text-transform:uppercase;letter-spacing:.8px}

/* Rail animado */
.method__rail{position:relative;margin:26px 0 8px;height:4px;border-radius:999px;background:linear-gradient(90deg, rgba(255,217,94,.35), rgba(255,255,255,.08), rgba(255,217,94,.35));overflow:hidden}
.method__rail-fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--incandescence),#ffd777,var(--incandescence));background-size:200% 100%;animation:glowMove 4s linear infinite;box-shadow:0 0 20px rgba(255,186,31,.45);transition:width .6s ease}
@keyframes glowMove{0%{background-position:0 0}100%{background-position:200% 0}}

/* Cards (pillars) */
.pill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.pill{position:relative;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border-radius:18px;padding:20px;text-align:center;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.pill:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(255,186,31,.16);border-color:rgba(255,255,255,.26)}
.pill__icon{width:48px;height:48px;display:grid;place-items:center;margin:0 auto 12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-size:1.4rem;filter:drop-shadow(0 0 6px rgba(255,186,31,.28))}
.pill h3{margin:0 0 6px;font-size:1.1rem;color:#fff}
.pill p{margin:0;color:#D4DAE9;font-size:.95rem}

/* Halo difuminado que recorre el contorno (SVG) */
.pill .halo{position:absolute;inset:-6px;pointer-events:none;z-index:0}
.pill .halo svg{width:100%;height:100%;display:block}
.pill .halo rect{
  fill:transparent;stroke:rgba(255,186,31,.72);stroke-width:8px;rx:24;ry:24;
  stroke-linejoin:round;stroke-linecap:round;
  filter:blur(10px) saturate(130%);
  stroke-dasharray:120 1280; /* segmento de luz más corto */
  stroke-dashoffset:0;opacity:0
}
@keyframes orbit{0%{opacity:0;stroke-dashoffset:0}10%{opacity:.85}90%{opacity:.85}100%{opacity:0;stroke-dashoffset:-1400}}
.pill.glow .halo rect{animation:orbit 4.8s linear 1 forwards}

/* KPIs */
.kpi-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.kpi{border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border-radius:18px;padding:18px;display:flex;align-items:center;gap:12px;transition:transform .3s ease, box-shadow .3s ease}
.kpi__dot{width:12px;height:12px;border-radius:50%;background:var(--incandescence);box-shadow:0 0 12px rgba(255,186,31,.6)}
.kpi__value{font-size:1.6rem;font-weight:900;letter-spacing:.3px}
.kpi__label{color:#D4DAE9}

/* Pulso simultáneo para KPIs al terminar ciclo */
@keyframes kpiPulse{0%{ transform:scale(1); box-shadow:0 0 0 rgba(255,186,31,0) }40%{ transform:scale(1.012); box-shadow:0 0 16px rgba(255,186,31,.18) }100%{ transform:scale(1); box-shadow:0 0 0 rgba(255,186,31,0) }}
.kpi.pulse{animation:kpiPulse .9s ease-out 1}

/* Reveal */
.reveal{opacity:.15;transform:translateY(10px);transition:.5s ease}
.reveal.in,
.reveal.visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media (max-width: 980px){
  .pill-grid,.kpi-wrap{grid-template-columns:1fr}
  .pill .halo rect{stroke:rgba(255,186,31,.65);filter:blur(8px) saturate(120%);stroke-dasharray:100 1300}
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .pill.glow .halo rect{animation: none; opacity:.35}
  .kpi.pulse{animation: none}
  .method__rail-fill{animation: none}
  .cf-section::after{animation: none}
}
/* ============================
   SECCIÓN: CÓMO FUNCIONA
   ============================ */
.cf-section{
  position:static;
  padding:90px 0;
  background:var(--cetacean);
}
.cf-section::before,
.cf-section::after{
  content:none;
}
.cf-wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}
.cf-head{text-align:center;margin-bottom:40px;}
.cf-head h2{
  margin:0;
  font-size:clamp(2rem,3.4vw,2.7rem);
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:none !important;
  filter:none;
  display:block;
}
.cf-head p{margin:12px auto 0;max-width:720px;color:#C8D2F0;font-size:1rem;}
.cf-stepper{
  position:relative;
  display:grid;
  gap:24px;
  padding:36px;
  border-radius:32px;
  background:linear-gradient(145deg,rgba(13,18,48,.92),rgba(6,9,26,.94));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 36px 90px rgba(1,3,12,.65);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  overflow:hidden;
  z-index:0;
}
.cf-stepper::before,
.cf-stepper::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
}
.cf-stepper::before{
  border:1px solid rgba(255,255,255,.18);
  mix-blend-mode:screen;
  opacity:.75;
}
.cf-stepper::after{
  inset:8px;
  border-radius:26px;
  border:1px solid rgba(255,214,150,.28);
  filter:blur(12px);
  opacity:.45;
  z-index:-2;
}
.cf-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.cf-tab{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#E7ECFF;
  text-align:left;
  transition:border .2s ease, transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
  backdrop-filter:blur(6px);
}
.cf-tab::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.08);
  opacity:0;
  transition:opacity .25s ease;
}
.cf-tab:hover::after,
.cf-tab[aria-selected="true"]::after{opacity:1;}
.cf-tab h3{margin:0;font-size:1.05rem;color:#fff;}
.cf-tab p{margin:0;font-size:.85rem;color:#C2CCE6;}
.cf-tab:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.25);box-shadow:0 8px 20px rgba(5,7,26,.35);}
.cf-tab[aria-selected="true"]{
  border-color:rgba(255,186,31,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  box-shadow:0 16px 36px rgba(5,7,26,.45), 0 0 24px rgba(255,186,31,.18);
}
.cf-tab:focus-visible{outline:2px solid var(--incandescence);outline-offset:2px;}
.cf-tab-kicker{
  font-size:.7rem;
  letter-spacing:.28em;
  font-weight:800;
  color:rgba(249,215,138,.9);
  text-transform:uppercase;
  display:inline-flex;
  gap:6px;
  align-items:center;
  opacity:.85;
}
.cf-tab-kicker::before{
  content:"";
  width:16px;
  height:1px;
  background:rgba(249,215,138,.8);
  opacity:.7;
}
.cf-panels{
  position:relative;
  min-height:360px;
  height:auto;
  transition:height .6s ease;
  will-change:height;
}
.cf-panel{
  position:absolute;
  width:100%;
  top:0;
  left:0;
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);
  padding:32px;
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .95s cubic-bezier(.19,1,.22,1), transform .95s cubic-bezier(.19,1,.22,1);
  box-shadow:0 26px 65px rgba(4,6,22,.55), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  z-index:0;
  pointer-events:none;
  will-change:opacity, transform;
}
.cf-panel::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  border:1px solid rgba(255,186,31,.18);
  box-shadow:0 0 24px rgba(255,186,31,.22);
  opacity:.4;
  z-index:-1;
}
.cf-panel::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:inherit;
  border:1px solid rgba(255,186,31,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.cf-panel[aria-hidden="false"]{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  z-index:2;
}
.cf-panel[aria-hidden="false"]::after{opacity:.45;}
.cf-panel h4{margin:0 0 10px;font-size:clamp(1.15rem,2vw,1.35rem);color:#fff;}
.cf-panel p{color:#D6DCF3;margin:0 0 14px;line-height:1.6;}
.cf-benefits{list-style:none;margin:10px 0 14px;padding:0;}
.cf-benefits li{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px;color:#D9DFEE;}
.cf-benefits li::before{
  content:"\2022";
  color:var(--incandescence);
  font-size:1.15rem;
  line-height:1;
  margin-top:1px;
}
.cf-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.cf-chips span{font-size:.8rem;color:#ADB6C7;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:6px 12px;border-radius:999px;}
.cf-cta{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;}
.cf-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:12px 22px;font-weight:800;font-size:.95rem;text-decoration:none;background:var(--incandescence);color:#1B2247;box-shadow:0 12px 24px rgba(255,186,31,.28);transition:box-shadow .2s ease, transform .2s ease;}
.cf-btn--ghost{background:transparent;color:#E5EAFF;border:1px solid rgba(255,255,255,.28);box-shadow:none;}
.cf-btn--soon{cursor:not-allowed;gap:8px;opacity:.85;}
.cf-btn--soon .cf-soon-badge{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:2px 8px;color:#F9D78A;}
.cf-btn:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(255,186,31,.35);}
.cf-btn--ghost:hover{border-color:rgba(255,255,255,.45);}

.cf-footer-bar{
  margin-top:44px;
  padding:26px 32px;
  border-radius:32px;
  background:linear-gradient(120deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 28px 70px rgba(2,4,14,.65);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  overflow:hidden;
}
.cf-footer-bar::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:26px;
  border:1px solid rgba(255,186,31,.32);
  opacity:.55;
  pointer-events:none;
}
.cf-footer-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:520px;
}
.cf-footer-copy strong{font-size:1.15rem;letter-spacing:.3px;}
.cf-footer-copy span{color:#C7CEE3;font-size:.95rem;}
.cf-footer-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.cf-footer-actions .cf-btn{min-width:200px;text-align:center;}

@media (max-width: 900px){
  .cf-stepper{padding:28px;}
  .cf-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cf-footer-bar{flex-direction:column;align-items:flex-start;}
  .cf-footer-actions{width:100%;}
  .cf-footer-actions .cf-btn{flex:1;}
}
@media (max-width: 720px){
  .cf-section{padding:72px 0;}
  .cf-stepper{padding:22px;border-radius:26px;}
  .cf-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cf-footer-bar{padding:20px;}
  .cf-panels{min-height:auto;}
}
@media (max-width: 560px){
  .cf-tabs{grid-template-columns:1fr;}
  .cf-panel{padding:24px;}
  .cf-footer-actions{flex-direction:column;}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes cfHalo{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.45;}
  50%{transform:translate3d(-25px,-12px,0) scale(1.12);opacity:.75;}
  100%{transform:translate3d(0,0,0) scale(1);opacity:.45;}
}

/* ===== Página detalle Cómo funciona ===== */
.cf-detail-main{background:var(--cetacean);color:#fff;}
.cf-detail-hero{padding:140px 0 80px;background:radial-gradient(900px 520px at 10% -120px,rgba(255,186,31,.16),rgba(0,0,0,0)), radial-gradient(820px 540px at 90% -60px,rgba(86,111,255,.12),rgba(0,0,0,0));}
.cf-detail-hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;align-items:center;}
.cf-detail-hero__copy h1{font-size:clamp(2.2rem,4vw,3rem);margin:16px 0 18px;line-height:1.1;}
.cf-detail-hero__copy p{max-width:540px;}
.cf-detail-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px;}
.cf-detail-hero__stats{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:18px;}
.cf-detail-hero__stats li{border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:14px 18px;min-width:140px;background:rgba(5,7,28,.4);}
.cf-detail-hero__stats span{display:block;font-size:1.4rem;font-weight:800;}
.cf-detail-hero__stats small{color:#C7CEE3;}
.cf-detail-hero__card{position:relative;}
.cf-detail-hero__card-inner{border-radius:28px;padding:28px;background:rgba(7,11,34,.85);border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px rgba(3,4,18,.65);backdrop-filter:blur(18px);}
.cf-detail-hero__card-inner ul{list-style:none;padding:0;margin:18px 0;}
.cf-detail-hero__card-inner li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.95rem;}
.cf-detail-hero__card-inner li:last-child{border-bottom:0;}
.cf-detail-hero__progress{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:14px 0;}
.cf-detail-hero__progress span{display:block;height:100%;background:linear-gradient(90deg,var(--incandescence),#ffd777);}
.cf-detail-hero__note{color:#C7CEE3;font-size:.9rem;margin:0;}

.section-head{text-align:center;margin-bottom:32px;}
.section-head h2{margin:6px 0;font-size:clamp(2rem,3vw,2.6rem);}

.cf-detail-steps{padding:60px 0;}
.cf-detail-steps__timeline{list-style:none;margin:0;padding:0;display:grid;gap:24px;}
.cf-detail-steps__timeline li{border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:0 18px 40px rgba(4,6,22,.45);}
.cf-detail-steps__badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#F9D78A;margin-bottom:8px;}
.cf-detail-steps__timeline h3{margin:0 0 6px;}
.cf-detail-steps__timeline p{margin:0 0 12px;color:#C7CEE3;}
.cf-detail-steps__meta{font-size:.85rem;color:#9EA8C6;}

.cf-detail-modules{padding:40px 0 20px;}
.cf-detail-modules__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.cf-detail-modules__grid article{border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:20px;background:rgba(255,255,255,.03);box-shadow:0 18px 40px rgba(2,4,18,.4);}
.cf-detail-modules__grid h3{margin-top:0;}
.cf-detail-modules__grid ul{margin:10px 0 0;padding-left:18px;color:#C7CEE3;}

.cf-detail-faq{padding:60px 0;}
.cf-detail-faq__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.cf-detail-faq__grid article{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px;background:rgba(8,10,32,.65);}
.cf-detail-faq__grid h3{margin-top:0;}

.cf-detail-cta{padding:40px 0 80px;}
.cf-detail-cta__box{border:1px solid rgba(255,255,255,.16);border-radius:32px;padding:28px;background:linear-gradient(120deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:0 24px 60px rgba(1,2,12,.65);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}
.cf-detail-cta__actions{display:flex;gap:12px;flex-wrap:wrap;}

.site-footer{padding:32px 0;background:#050714;text-align:center;}
.site-footer p{margin:0 0 8px;}
.site-footer__links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.site-footer__links a{color:#C8CFE6;font-size:.9rem;}

@media (max-width:700px){
  .cf-detail-hero{padding-top:120px;}
  .cf-detail-hero__grid{grid-template-columns:1fr;}
  .cf-detail-hero__card-inner li{flex-direction:column;gap:4px;}
}

/* ===== Página de contacto ===== */
.contact-main{background:var(--cetacean);color:#fff;}
.contact-hero{padding:130px 0 80px;background:radial-gradient(820px 520px at 12% -80px,rgba(255,186,31,.18),rgba(0,0,0,0)),radial-gradient(820px 520px at 88% -120px,rgba(92,124,255,.12),rgba(0,0,0,0));}
.contact-hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:36px;align-items:center;}
.contact-hero__copy h1{margin:18px 0;font-size:clamp(2.3rem,4vw,3.1rem);line-height:1.1;}
.contact-hero__badges{display:flex;flex-wrap:wrap;gap:10px;}
.contact-hero__badges span{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 12px;font-size:.9rem;color:#F5F7FF;background:rgba(255,255,255,.08);}
.contact-hero__panel{border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:26px;background:rgba(6,8,28,.8);box-shadow:0 30px 60px rgba(3,4,18,.6);backdrop-filter:blur(18px);}
.contact-hero__panel h2{margin:0 0 12px;font-size:1.3rem;}
.contact-hero__panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.contact-hero__panel li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px;}
.contact-hero__panel li:last-child{border-bottom:0;}
.contact-hero__panel span{font-size:.9rem;color:#C8CEE4;}
.contact-hero__panel a{font-weight:700;color:var(--incandescence);}
.contact-hero__panel .small{font-size:.85rem;}

.contact-options{padding:40px 0;}
.contact-options__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.contact-card{border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:20px;background:rgba(255,255,255,.03);box-shadow:0 20px 45px rgba(2,3,14,.45);}
.contact-card h3{margin-top:0;}
.contact-card ul{margin:10px 0 0;padding-left:18px;color:#C7CEE3;}

.contact-form-section{padding:40px 0 80px;}
.contact-form__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;align-items:start;}
.contact-form{display:grid;gap:16px;}
.contact-form label{display:flex;flex-direction:column;font-size:.9rem;gap:6px;}
.contact-form input,.contact-form select,.contact-form textarea{border-radius:16px;border:1px solid rgba(255,255,255,.18);background:rgba(4,6,22,.85);color:#fff;padding:12px 14px;font-family:var(--font-sans);}
.contact-form textarea{resize:vertical;}
.contact-form .honeypot{position:absolute;left:-10000px;opacity:0;height:0;width:1px;}
.contact-form__checkbox{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;}
.contact-form__checkbox input{width:auto;margin-top:4px;}
.contact-form__checkbox a{color:var(--incandescence);}
.contact-form__context{display:flex;flex-direction:column;gap:4px;margin:0;padding:13px 15px;border:1px solid rgba(255,216,74,.34);border-radius:14px;background:rgba(255,216,74,.08);}
.contact-form__context[hidden]{display:none;}
.contact-form__context span{color:#c7cee3;font-size:.78rem;}
.contact-form__context strong{color:#fff;}
.contact-form__note{margin:6px 0 0;font-size:.9rem;}
.contact-form__note.success{color:#8feecc;}
.contact-form__note.error{color:#ff9b9b;}

@media (max-width:640px){
  .contact-hero{padding-top:120px;}
}

/* ===== Relanzamiento comercial ===== */
.section-copy{
  max-width:720px;
  margin:0 0 18px;
}

.case-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.case-card{
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.case-card .features{
  margin:2px 0 0;
}

.case-card__tag{
  width:max-content;
  max-width:100%;
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,186,31,.12);
  border:1px solid rgba(255,186,31,.22);
  color:#F9D78A;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.case-flow{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin:4px 0 2px;
}

.case-flow span{
  min-width:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:9px 10px;
  background:rgba(255,255,255,.045);
  color:#E7ECFF;
  font-size:.78rem;
  line-height:1.25;
  text-align:center;
}

.case-card__measure{
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:12px;
  color:#F9D78A;
  font-size:.88rem;
  line-height:1.45;
}

.config-note{
  margin:14px 0 0;
  line-height:1.5;
}

.legal-main{
  background:var(--cetacean);
  color:#fff;
  min-height:100vh;
  padding-bottom:72px;
}

.legal-hero{
  padding:140px 0 36px;
  background:
    radial-gradient(860px 520px at 12% -120px, rgba(255,186,31,.16), rgba(0,0,0,0)),
    radial-gradient(760px 520px at 88% -120px, rgba(86,111,255,.12), rgba(0,0,0,0));
}

.legal-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 18px 40px rgba(4,6,22,.4);
}

.legal-card h2{
  margin:24px 0 10px;
}

.legal-card h2:first-child{
  margin-top:0;
}

.legal-card p{
  color:#D8E0F2;
  line-height:1.6;
}

.thankyou-main{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(920px 560px at 10% -80px, rgba(255,186,31,.16), rgba(0,0,0,0)),
    radial-gradient(820px 520px at 90% -120px, rgba(86,111,255,.12), rgba(0,0,0,0)),
    var(--cetacean);
  color:#fff;
  padding:120px 24px 60px;
}

.thankyou-box{
  max-width:760px;
  text-align:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  padding:36px 32px;
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:0 28px 70px rgba(3,5,18,.55);
}

.thankyou-box h1{
  margin:12px 0;
  font-size:clamp(2rem, 3.4vw, 2.8rem);
}

.lead-intent,
.thankyou-summary{
  display:grid;
  gap:5px;
  width:100%;
  max-width:420px;
  margin-top:22px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
}

.lead-intent span,
.thankyou-summary span{
  color:#9FA9C3;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.lead-intent strong,
.thankyou-summary strong{
  color:#fff;
  font-size:1.05rem;
}

.thankyou-summary{
  margin:20px auto 0;
  text-align:center;
}

.thankyou-next{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
  text-align:left;
}

.thankyou-next li{
  min-width:0;
  display:grid;
  gap:7px;
}

.thankyou-next li > span{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--incandescence), #ffd777);
  color:#101427;
  font-weight:900;
}

.thankyou-next strong,
.thankyou-next small{
  display:block;
}

.thankyou-next small{
  color:#C7CEE3;
  line-height:1.45;
}

.thankyou-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:22px;
}

.site-footer__links{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.contact-card ul{
  margin:12px 0 0;
  padding-left:18px;
  color:#C7CEE3;
}

.contact-card li,
.case-card li{
  margin-bottom:8px;
}

.contact-form button[disabled]{
  opacity:.7;
  cursor:not-allowed;
}

/* ===== Cohesion visual landing ===== */
.hero-animated{
  background:
    radial-gradient(820px 520px at 8% 0%, rgba(255,186,31,.1), rgba(255,255,255,0) 60%),
    radial-gradient(820px 520px at 92% 10%, rgba(73,104,255,.09), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(7,13,45,.98) 0%, rgba(7,13,45,.94) 68%, rgba(5,8,23,.96) 100%);
}

.hero-animated::after{
  background:linear-gradient(180deg, rgba(7,13,45,0), rgba(6,10,32,.68) 62%, rgba(5,8,23,1));
}

.system-showcase,
.products-section,
.method,
.cf-section,
.plans-section,
.trust-section,
#casos,
.cta-final{
  position:relative;
  border-top:0;
  background:transparent;
}

.system-showcase{
  margin-top:-1px;
  padding-top:96px;
  background:
    linear-gradient(180deg, rgba(5,8,23,1) 0%, rgba(5,8,23,.9) 22%, rgba(5,8,23,0) 56%);
}

.method,
.cf-section,
.trust-section,
.cta-final{
  background:transparent;
}

.products-section,
.plans-section,
#casos{
  background:transparent;
}

.product-card--featured,
.plan-card.highlight{
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)),
    rgba(7,12,36,.82);
}

.price-card.highlight{
  outline:1px solid rgba(255,215,119,.34);
  box-shadow:0 18px 42px rgba(2,4,18,.42);
}

.evidence-card--video,
.mapa-wrap{
  background:
    linear-gradient(145deg, rgba(15,24,64,.92), rgba(4,7,24,.9));
}

.cta-panel{
  background:
    linear-gradient(140deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}

.cta-final{
  display:block;
  padding:72px 0 64px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.cta-final .cta-panel{
  width:min(100% - 48px, 1120px);
  margin-inline:auto;
}

.site-footer{
  background:#050714;
  border-top:1px solid rgba(255,255,255,.08);
}

@media (max-width: 980px){
  .case-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 700px){
  .cta-final .cta-panel{
    width:min(100% - 40px, 1120px);
  }

  .thankyou-box{
    padding:28px 22px;
  }

  .thankyou-next{
    grid-template-columns:1fr;
  }

  .legal-hero{
    padding-top:120px;
  }

  .legal-card{
    padding:22px;
  }
}

/* ===== Iteración UX premium: movimiento útil y mejora progresiva ===== */
.reveal{opacity:1;transform:none}

@view-transition{
  navigation:auto;
}

::view-transition-old(root){animation:page-out .14s ease both}
::view-transition-new(root){animation:page-in .22s ease both}

@keyframes page-out{
  to{opacity:.88}
}

@keyframes page-in{
  from{opacity:.82;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

/* Entrada escalonada del hero sin bloquear el primer render. */
.motion-ready .hero-animated .hero-copy > *,
.motion-ready .hero-internal .hero-grid > div:first-child > *,
.motion-ready .cf-detail-hero__copy > *,
.motion-ready .contact-hero__copy > *{
  opacity:0;
  animation:hero-enter .44s cubic-bezier(.22,1,.36,1) forwards;
}

.motion-ready .hero-animated .hero-copy > :nth-child(1),
.motion-ready .hero-internal .hero-grid > div:first-child > :nth-child(1),
.motion-ready .cf-detail-hero__copy > :nth-child(1),
.motion-ready .contact-hero__copy > :nth-child(1){animation-delay:.02s}
.motion-ready .hero-animated .hero-copy > :nth-child(2),
.motion-ready .hero-internal .hero-grid > div:first-child > :nth-child(2),
.motion-ready .cf-detail-hero__copy > :nth-child(2),
.motion-ready .contact-hero__copy > :nth-child(2){animation-delay:.06s}
.motion-ready .hero-animated .hero-copy > :nth-child(3),
.motion-ready .hero-internal .hero-grid > div:first-child > :nth-child(3),
.motion-ready .cf-detail-hero__copy > :nth-child(3),
.motion-ready .contact-hero__copy > :nth-child(3){animation-delay:.1s}
.motion-ready .hero-animated .hero-copy > :nth-child(4),
.motion-ready .hero-internal .hero-grid > div:first-child > :nth-child(4),
.motion-ready .cf-detail-hero__copy > :nth-child(4),
.motion-ready .contact-hero__copy > :nth-child(4){animation-delay:.14s}
.motion-ready .hero-animated .hero-copy > :nth-child(n+5),
.motion-ready .cf-detail-hero__copy > :nth-child(n+5),
.motion-ready .contact-hero__copy > :nth-child(n+5){animation-delay:.17s}

.motion-ready .hero-visual,
.motion-ready .hero-internal .hero-card,
.motion-ready .cf-detail-hero__card,
.motion-ready .contact-hero__panel{
  opacity:0;
  animation:hero-visual-enter .56s .12s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes hero-enter{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}

@keyframes hero-visual-enter{
  from{opacity:0;transform:translate3d(16px,10px,0) scale(.985)}
  to{opacity:1;transform:none}
}

/* Reveal inspirado en Fade/Animated Content, con variantes suaves. */
.motion-ready .reveal{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:
    opacity .66s cubic-bezier(.22,1,.36,1),
    transform .66s cubic-bezier(.22,1,.36,1),
    border-color .22s ease,
    box-shadow .22s ease;
  transition-delay:var(--reveal-delay, 0ms);
}

.motion-ready .reveal[data-reveal="left"]{transform:translate3d(-18px,8px,0)}
.motion-ready .reveal[data-reveal="right"]{transform:translate3d(18px,8px,0)}
.motion-ready .reveal[data-reveal="scale"]{transform:translate3d(0,12px,0) scale(.985)}
.motion-ready .reveal.in,
.motion-ready .reveal.visible{opacity:1;transform:none}
.motion-ready .reveal.reveal-complete{transition-delay:0ms}

/* Spotlight Card ligero: solo se activa con ratón o trackpad. */
.spotlight-card{
  --spotlight-x:50%;
  --spotlight-y:50%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.spotlight-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(280px circle at var(--spotlight-x) var(--spotlight-y), rgba(255,215,119,.11), transparent 64%);
  opacity:0;
  transition:opacity .22s ease;
}

.spotlight-card > *{position:relative;z-index:1}

@media (hover:hover) and (pointer:fine){
  .spotlight-card:hover{
    border-color:rgba(255,215,119,.28);
    box-shadow:0 22px 48px rgba(1,3,14,.46);
  }
  .spotlight-card:hover::before{opacity:1}
}

/* Botones, enlaces y navegación con estados consistentes. */
.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:46px;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,background .2s ease,border-color .2s ease;
}

.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);
  transform:translateX(-125%);
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}

@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn:hover::before{transform:translateX(125%)}
  .btn-primary:hover{box-shadow:0 12px 30px rgba(255,186,31,.42)}
  .btn-secondary:hover,.btn-outline:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.12)}
}

.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--incandescence);
  outline-offset:3px;
}

.nav-links a{
  position:relative;
  padding-block:8px;
}

.nav-links > a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:2px;
  border-radius:999px;
  background:var(--incandescence);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}

.nav-links > a:hover::after,
.nav-links > a:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* Menos ruido decorativo en el hero: mantiene la identidad sin parecer una demo. */
.hero-glow{opacity:.48;filter:blur(135px)}
.hero-stars span{
  opacity:.42;
  animation:starDrift 12s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(255,200,74,.3));
}
.hero-stars span:nth-child(n+8){display:none}
.hero-banner-frame{transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .3s ease}
@media (hover:hover) and (pointer:fine){
  .hero-banner-frame:hover{transform:translateY(-4px);border-color:rgba(255,215,119,.3);box-shadow:0 28px 64px rgba(1,3,14,.58)}
}

/* Menú de tablet/móvil con transición, bloqueo de scroll y área táctil cómoda. */
@media (max-width:900px){
  body.nav-open{overflow:hidden}
  .nav{padding-block:14px}
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    transition:transform .2s ease,background .2s ease,border-color .2s ease;
  }
  .nav-toggle[aria-expanded="true"]{transform:rotate(90deg);background:rgba(255,186,31,.13);border-color:rgba(255,186,31,.35)}
  .nav-links{
    position:absolute;
    left:16px;
    right:16px;
    top:calc(100% + 8px);
    width:auto;
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:12px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    background:rgba(5,8,25,.97);
    box-shadow:0 24px 64px rgba(0,0,0,.52);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(0,-8px,0) scale(.99);
    transform-origin:top right;
    transition:opacity .2s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s;
  }
  .nav-links.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition-delay:0s;
  }
  .nav-links > a{padding:11px 12px;border-radius:10px}
  .nav-links > a:hover,.nav-links > a:focus-visible{background:rgba(255,255,255,.065)}
  .nav-links > a::after{display:none}
  .nav-cta{display:none}
  .nav-mobile-cta{display:flex}
}

.sticky-cta{
  transition:opacity .22s ease,transform .26s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;
}

.sticky-cta.is-hidden,
body.nav-open .sticky-cta{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(calc(100% + 28px));
  transition-delay:0s,0s,.26s;
}

@media (max-width:640px){
  .container{padding-inline:18px}
  .hero{padding-top:64px}
  .hero.hero-animated .hero-grid{padding-top:10px}
  .hero-stars span:nth-child(n+5){display:none}
  .hero-kpis{gap:8px;padding:8px}
  .product-card,.price-card,.case-card,.contact-card{border-radius:18px}
  .footer-grid{grid-template-columns:1fr;align-items:start}
  .footer-links{justify-content:flex-start;min-width:0}
  .footer-links a{max-width:100%;overflow-wrap:anywhere}
}

@media (max-width:360px){
  :root{--header-height:72px}
  .container{padding-inline:16px}
  .title{font-size:1.92rem}
  .hero-chips{gap:6px}
  .chip{font-size:.78rem;padding:.35rem .6rem}
  .hero-kpis > span:not(.hero-kpis-sep){padding:11px}
  .sticky-cta{left:10px;right:10px;bottom:10px}
  .sticky-cta__link{font-size:.88rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .motion-ready .hero-animated .hero-copy > *,
  .motion-ready .hero-internal .hero-grid > div:first-child > *,
  .motion-ready .cf-detail-hero__copy > *,
  .motion-ready .contact-hero__copy > *,
  .motion-ready .hero-visual,
  .motion-ready .hero-internal .hero-card,
  .motion-ready .cf-detail-hero__card,
  .motion-ready .contact-hero__panel,
  .motion-ready .reveal{
    opacity:1 !important;
    transform:none !important;
  }
  .spotlight-card::before{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}