/* ==========================================================================
   GoCorte – style1.css  (Noir + Ice Blue)
   Paleta: negro / gris / blanco; acentos celeste suaves solo en poquísimas cosas
   ========================================================================== */

/* ---------- Variables ---------- */
:root{
  /* base neutra */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f6f7f9;

  --text:#0e141b;           /* casi negro */
  --muted:#6b7280;          /* slate */
  --line:#e6e9ee;           /* borde suave */

  /* acento celeste suave (uso mínimo: CTA, focus, chips) */
  --accent:#6EA8FF;
  --accent-weak:rgba(110,168,255,.14);
  --ink-on-accent:#0b1220;

  --radius:16px;
  --shadow:0 14px 34px rgba(15,23,42,.06);

  /* secciones claras */
  --light-bg:#ffffff;
  --light-text:#0e141b;
  --light-muted:#67748b;
  --light-line:#e6e9ee;
}

/* ---------- Resets ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto;
  line-height:1.55;-webkit-font-smoothing:antialiased
}
a{color:#1f2937;text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1180px,92vw);margin:0 auto}
.section{padding:clamp(48px,7vw,96px) 0}
h2.section-title{font-size:clamp(1.4rem,3.4vw,2.2rem);margin:0 0 12px}
.sub{color:var(--muted);max-width:820px}

/* ========================================================================== */
/* NAV                                                                        */
/* ========================================================================== */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  backdrop-filter:saturate(140%) blur(10px);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.topbar.scrolled{
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 8px 24px rgba(2,6,23,.06);
}
.tb-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.14))}
.brand span{font-weight:800;letter-spacing:.3px}

/* Acciones topbar */
.tb-actions{display:flex;align-items:center;gap:10px}
.btn,.link-btn{
  display:inline-flex;align-items:center;gap:10px;border-radius:12px;
  padding:10px 14px;border:1px solid var(--line);
  background:#fff;color:var(--text);font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease
}
.btn:hover,.link-btn:hover{transform:translateY(-1px)}
.btn:focus-visible,.link-btn:focus-visible{outline:3px solid var(--accent-weak);outline-offset:2px}
.link-btn{background:#fff}

/* Estado sobre hero (no scrolled) – botones y texto claros */
.topbar:not(.scrolled) .brand span,
.topbar:not(.scrolled) .link-btn{ color:#fff; }
.topbar:not(.scrolled) .btn,
.topbar:not(.scrolled) .link-btn{
  background:transparent; border-color:rgba(255,255,255,.28); color:#fff;
}

/* CTA principal (celeste suave, único punto de color fuerte) */
.btn-accent{
  border:0;background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(110,168,255,.25)
}
.btn-accent:hover{filter:brightness(1.03);transform:translateY(-1px)}

/* Burger + Drawer */
.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#0b1220}
@media (max-width:900px){ .btn-accent{display:none} .burger{display:grid;place-items:center} }

.drawer{
  position:fixed;inset:0 0 0 auto;width:min(320px,86vw);
  background:#fff;border-left:1px solid var(--line);
  transform:translateX(100%);transition:.3s ease;z-index:70
}
.drawer.open{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--line)}
.drawer a{display:block;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.25s;z-index:65}
.overlay.show{opacity:1;visibility:visible}

/* ========================================================================== */
/* HERO                                                                       */
/* ========================================================================== */
.hero{
  position:relative;min-height:88svh;display:grid;place-items:center;text-align:center;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(10,13,18,.52) 0%, rgba(10,13,18,.88) 100%),
    url('/imglvl1/hero.jpg') center/cover no-repeat;
}
.hero::before{
  content:"";position:absolute;inset:0;background:
   radial-gradient(800px 400px at 80% 10%, rgba(110,168,255,.10), transparent 60%),
   radial-gradient(900px 500px at 10% 90%, rgba(110,168,255,.08), transparent 60%);
}
.hero-inner{position:relative;z-index:1;display:grid;gap:16px}
.hero h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1.1;margin:0;color:#fff;letter-spacing:.2px;animation:fadeUp .6s ease both}
.hero p{color:#fff;opacity:.92;margin:0 auto;max-width:820px;animation:fadeUp .7s ease both}

/* Buscador (pill blanco) */
.search{
  display:flex;align-items:center;gap:10px;padding:10px;margin:14px auto 0;
  background:#fff;border-radius:999px;width:min(860px,92vw);
  box-shadow:0 22px 44px rgba(2,6,23,.20);animation:pop .5s ease .05s both
}
.search .s-ico{
  width:42px;height:42px;border-radius:999px;display:grid;place-items:center;
  background:#eef2f7;color:#0b1220;border:0;outline:0;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease
}
.search input{flex:1;border:0;outline:0;font-size:1.05rem;padding:12px 6px;color:#0b1220;background:transparent}
.search input::placeholder{ color:#6b7280 }
.search .submit{
  border:0;border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer;
  background:var(--accent);color:#fff
}
.search:focus-within{ box-shadow:0 24px 60px rgba(2,6,23,.24), 0 0 0 6px var(--accent-weak); transform:translateY(-1px) }

/* Categorías bajo hero */
.cat-row{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;color:#fff;opacity:.96;margin-top:18px}
.cat-row a{color:#fff;text-decoration:none;border-bottom:1px dashed transparent}
.cat-row a:hover{border-color:#fff}

/* Halo animado sutil */
.hero::after{
  content:""; position:absolute; inset:-20%; background:
   radial-gradient(600px 280px at 10% -10%, rgba(110,168,255,.10), transparent 55%),
   radial-gradient(700px 320px at 120% 110%, rgba(110,168,255,.08), transparent 55%);
  animation: heroPulse 8s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes heroPulse { 0%{transform:translateY(0)} 100%{transform:translateY(10px)} }

/* ========================================================================== */
/* FEATURES & CARDS                                                           */
/* ========================================================================== */
.feature-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;box-shadow:var(--shadow);color:var(--text)}
.card h3{margin:.2rem 0 .4rem}
.card p{margin:0;color:var(--muted)}
.center{text-align:center}

/* efecto pro (brillo MUY sutil, sin color invasivo) */
.pro-cards .card{position:relative; isolation:isolate; overflow:hidden;}
.pro-cards .card::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: conic-gradient(from 230deg at 50% 50%, rgba(110,168,255,.10), transparent 45%);
  filter:blur(18px); opacity:0; transition:opacity .25s ease; z-index:-1;
}
.pro-cards .card:hover::after{ opacity:.9 }
.pro-cards .card:hover{ transform:translateY(-2px); box-shadow:0 20px 48px rgba(2,6,23,.10) }

/* ========================================================================== */
/* PRICING                                                                    */
/* ========================================================================== */
.section.light{background:var(--light-bg);color:var(--light-text)}
.section.light .section-title{color:var(--light-text)}
.section.light .sub{color:var(--light-muted)}
.section.light .card{background:#fff;border:1px solid var(--light-line);color:var(--light-text)}
.section.light .price{color:#0b1220}
.switch{
  display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);
  border-radius:999px;padding:6px;background:#fff
}
.switch button{
  border:0;background:transparent;color:var(--muted);padding:10px 14px;border-radius:999px;font-weight:700;cursor:pointer
}
.switch button.active{background:var(--accent);color:#fff}
.pricing{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:18px}
.price{font-size:1.8rem;font-weight:800}
.cta-bottom{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ========================================================================== */
/* FAQ                                                                        */
/* ========================================================================== */
.accordion{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:12px;background:#fff}
.ac{border-bottom:1px solid var(--line);background:#fff}
.ac:last-child{border-bottom:0}
.ac h4{margin:0}
.ac-btn{
  width:100%;text-align:left;padding:18px;border:0;background:transparent;
  color:var(--text);font-weight:700;display:flex;justify-content:space-between;align-items:center;cursor:pointer
}
.ac-panel{display:none;padding:0 18px 18px;color:var(--muted)}
.ac.open .ac-panel{display:block}
.chev{transition:transform .2s}
.ac.open .chev{transform:rotate(180deg)}

/* ========================================================================== */
/* TRUST BAR / KPIs / STEPS / SLIDER                                          */
/* ========================================================================== */
.trust-inner{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; align-items:center }
.trust-item{ display:flex; align-items:center; gap:10px; font-weight:700; color:#0b1220 }
.ti{ width:26px; height:26px; display:inline-block; border-radius:6px; box-shadow:0 2px 10px rgba(2,6,23,.08) }
.ti-whatsapp{ background:#d1d5db }  /* gris, sin colores fuertes */
.ti-mercado{ background:#d1d5db }
.ti-stats{ background:#d1d5db }
.ti-shield{ background:#d1d5db }

.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px }
.kpi{ text-align:center; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px }
.kpi .num{ font-size:2rem; font-weight:800 }
.kpi .lbl{ color:var(--muted) }

.steps .steps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:12px }
.steps .step{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; transition:transform .18s, box-shadow .18s }
.steps .step:hover{ transform:translateY(-3px); box-shadow:0 18px 46px -18px rgba(2,6,23,.18) }
.steps .bubble{ width:40px; height:40px; border-radius:999px; display:grid; place-items:center; font-weight:800; background:#111827; color:#fff; margin-bottom:6px }

.slider{ position:relative; overflow:hidden }
.slider .slides{ display:flex; transition:transform .35s ease }
.slider .slide{ min-width:100% }
.slider blockquote{ margin:0 0 8px 0; font-size:1.05rem; color:#0b1220 }
.slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  border:1px solid var(--line); background:#fff; color:#0b1220;
  width:40px; height:40px; border-radius:999px; cursor:pointer; box-shadow:0 6px 20px rgba(2,6,23,.08)
}
.slider .nav:hover{ transform:translateY(-50%) scale(1.06) }
.slider .prev{ left:8px } .slider .next{ right:8px }

/* ========================================================================== */
/* FOOTER                                                                     */
/* ========================================================================== */
.footer{padding-top:24px;background:#fff}
.footer-inner{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding-top:14px;color:var(--muted)
}

/* ========================================================================== */
/* WhatsApp                                                                   */
/* ========================================================================== */
.whatsapp{
  position:fixed;right:16px;bottom:18px;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;z-index:80;
  box-shadow:0 10px 24px rgba(2,6,23,.12);animation:float 3s ease-in-out infinite
}
.whatsapp img{width:30px;height:30px}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-5px)}100%{transform:translateY(0)}}

/* ========================================================================== */
/* MODAL LOGIN                                                                */
/* ========================================================================== */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.2s;z-index:90}
.modal-backdrop.show{opacity:1;visibility:visible}
.modal{
  position:fixed;inset:0;display:grid;place-items:center;z-index:91;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transition:opacity .2s ease, transform .2s ease
}
.modal.show{opacity:1;visibility:visible;transform:none}
.modal .card{
  width:min(520px,92vw);background:#fff;border:1px solid #eef2f7;border-radius:22px;
  box-shadow:0 30px 80px rgba(2,6,23,.18);color:#0d1722;padding:22px 18px
}
.modal .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.modal .close{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:#1f2a37}

/* Brandmark centrado (usa <div class="brandmark"><img ...></div>) */
.modal .brandmark{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; margin:4px auto 10px auto;
  background:#0f172a; box-shadow:0 10px 30px rgba(2,6,23,.15);
}
.modal .brandmark img{ width:34px; height:34px; object-fit:contain; }

.modal h3{font-size:1.6rem;margin:4px 0 6px;color:#0b1220}
.modal .desc{color:#64748b;margin:0 0 12px}
.modal .email{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.modal .label-email{font-weight:700;color:#0b1220}
.modal input[type="email"]{
  width:100%;padding:14px;border-radius:12px;border:1px solid #e4e9f2;background:#fff;color:#0b1220;font-size:1rem
}
.modal .cont-btn{
  width:100%;margin-top:10px;padding:14px;border-radius:12px;border:0;cursor:pointer;font-weight:800;
  background:#e7edf6;color:#93a4b7;transition:filter .2s ease, transform .15s ease
}
.modal .cont-btn.ready{background:var(--accent);color:#fff}
.modal .cont-btn.ready:hover{filter:brightness(1.03);transform:translateY(-1px)}
.modal .divider{display:grid;place-items:center;margin:10px 0;color:#9aa7b7}
.modal .social{display:grid;gap:10px}
.modal .social .sbtn{
  width:100%;display:flex;align-items:center;gap:10px;justify-content:center;
  border:1px solid #e4e9f2;background:#fff;padding:12px;border-radius:12px;font-weight:700;color:#0b1220;text-decoration:none
}
.modal .roles{display:flex;gap:6px;margin-top:10px}
.modal .roles .rbtn{
  flex:1;border:1px solid #e4e9f2;background:#fff;border-radius:12px;padding:10px;font-weight:700;cursor:pointer;color:#0b1220;
  transition:transform .12s ease, background .2s ease
}
.modal .roles .rbtn:hover{transform:translateY(-1px)}
/* activo sobrio (sin colores): negro cálido */
.modal .roles .rbtn.active{background:#111827;color:#fff;border-color:#111827}

/* ========================================================================== */
/* Sales mode (toggle del héroe de ventas)                                    */
/* ========================================================================== */
.hero-sales .mode-switch{
  display:inline-flex; gap:8px; background:rgba(255,255,255,.08);
  padding:6px; border-radius:999px; border:1px solid rgba(255,255,255,.28); margin:0 auto 10px auto;
  box-shadow:0 10px 30px rgba(0,0,0,.18)
}
.mode-btn{
  border:0; background:transparent; color:#eaf2ff; font-weight:700; padding:10px 16px; border-radius:999px; cursor:pointer;
  transition:transform .14s ease
}
.mode-btn:active{ transform:scale(.98) }
.mode-btn.active{ background:#0f172a; color:#fff }

/* Botón secundario claro */
.btn-light{ background:#fff; color:#0b1220; border:1px solid #e5ebf2 }
.btn-light:hover{ filter:brightness(1.02); transform:translateY(-1px) }

.hero-sales .cta-hero{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px }
.hero-sales .badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; color:#94a3b8 }
.hero-sales .badges span{ border:1px dashed #d7dee8; padding:6px 10px; border-radius:999px }

/* ========================================================================== */
/* Reveal on scroll                                                           */
/* ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
  .reveal.show{opacity:1;transform:none}
}

/* ========================================================================== */
/* Responsive                                                                 */
/* ========================================================================== */
@media (max-width:900px){
  .container{width:min(1000px,92vw)}
  .hero{min-height:86svh}
}
@media (max-width:720px){
  .hero h1{font-size:clamp(1.8rem,7vw,2.4rem)}
  .hero p{padding:0 6px}
}
@media (max-width:600px){
  .tb-row{padding:8px 0}
  .hero{min-height:82svh}
  .cat-row{gap:14px;font-size:.96rem}
  .search .submit{ display:none } /* en mobile solo la lupa envía */
  .kpi .num{ font-size:1.7rem }
}



/* =========================
   KPIs + FEATURES — PRO UI
   (neutro gris/blanco + acentos celestes MUY sutiles)
   ========================= */

/* Paleta de acento suave (si ya tenés --brand-a, lo reuso) */
:root{
  --accent: var(--brand-a, #3b82f6);
  --accent-08: rgba(59,130,246,.08);
  --accent-12: rgba(59,130,246,.12);
  --accent-18: rgba(59,130,246,.18);
  --ink:#0b1220;
  --muted-2:#8a96a8;
}

/* ---- KPIs ---- */
.kpis { position: relative; }
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:22px;
}

/* Tile con borde “reactivo” y glow ultra sutil */
.kpi{
  position:relative;
  border-radius:18px;
  padding:22px 18px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    radial-gradient(140% 160% at 100% 0%, var(--accent-08), transparent 60%) border-box;
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(2,6,23,.06);
  transform:translateY(0);
  transition:
    transform .28s cubic-bezier(.2,.7,.3,1),
    box-shadow .28s ease,
    border-color .28s ease,
    background .35s ease;
  isolation:isolate;
}
.kpi::after{
  /* sheen animado en el borde */
  content:"";
  position:absolute; inset:-1px; border-radius:inherit;
  background:conic-gradient(from 220deg at 50% 50%,
    var(--accent-12), transparent 30%, transparent 70%, var(--accent-12));
  z-index:-1; filter:blur(14px); opacity:0; transition:opacity .25s ease;
}
.kpi:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 60px rgba(2,6,23,.10);
  border-color:rgba(2,6,23,.06);
  background:
    linear-gradient(#fff,#fff) padding-box,
    radial-gradient(140% 180% at 100% 0%, var(--accent-12), transparent 60%) border-box;
}
.kpi:hover::after{ opacity:.85; }

.kpi .num{
  font-size:clamp(1.6rem,3.2vw,2.25rem);
  font-weight:800; letter-spacing:.2px;
  background:linear-gradient(180deg,#111827,#0b1220);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 12px 24px rgba(2,6,23,.06);
  margin-bottom:4px;
}
.kpi .lbl{ color:var(--muted-2); font-weight:600 }

/* Animación de entrada más vistosa que .reveal genérica */
@media (prefers-reduced-motion:no-preference){
  .kpi{ opacity:0; transform:translateY(10px); }
  .reveal.show .kpi{ 
    animation:kpiIn .6s cubic-bezier(.2,.7,.3,1) both;
  }
  .reveal.show .kpi:nth-child(2){ animation-delay:.06s }
  .reveal.show .kpi:nth-child(3){ animation-delay:.12s }
  .reveal.show .kpi:nth-child(4){ animation-delay:.18s }
  @keyframes kpiIn{ to{ opacity:1; transform:translateY(0)} }
}

/* ---- FEATURES (cards) ---- */
.feature-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  align-items:stretch;
}

.feature-grid .card{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:18px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    radial-gradient(140% 160% at 0% 0%, var(--accent-08), transparent 60%) border-box;
  border:1px solid var(--light-line);
  box-shadow:0 12px 28px rgba(2,6,23,.06);
  transition:
    transform .28s cubic-bezier(.2,.7,.3,1),
    box-shadow .28s ease,
    background .35s ease,
    border-color .28s ease;
}

/* Borde “active” con brillo que recorre el contorno */
.feature-grid .card::before{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:
    linear-gradient(120deg,
    transparent 15%, var(--accent-18) 30%, transparent 55%) 0 0/200% 100% no-repeat;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .2s ease;
}
.feature-grid .card:hover::before{
  opacity:1; animation:borderSheen 1.6s ease forwards;
}
@keyframes borderSheen{ to{ background-position:200% 0 } }

/* Elevación + tilt mínimo + spotlight */
.feature-grid .card:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 24px 64px rgba(2,6,23,.12);
  border-color:rgba(2,6,23,.06);
}
.feature-grid .card::after{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(260px 160px at 20% 10%, var(--accent-08), transparent 60%);
  opacity:0; transition:opacity .35s ease;
}
.feature-grid .card:hover::after{ opacity:1; }

/* Títulos y texto */
.feature-grid .card h3{ margin:.2rem 0 .45rem; color:var(--ink); font-weight:800 }
.feature-grid .card p{ margin:0; color:var(--muted-2) }

/* Animación stagger al aparecer */
@media (prefers-reduced-motion:no-preference){
  .feature-grid .card{ opacity:0; transform:translateY(12px); }
  .reveal.show .feature-grid .card{
    animation:fCardIn .55s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .reveal.show .feature-grid .card:nth-child(2){ animation-delay:.06s }
  .reveal.show .feature-grid .card:nth-child(3){ animation-delay:.12s }
  .reveal.show .feature-grid .card:nth-child(4){ animation-delay:.18s }
  @keyframes fCardIn{ to{opacity:1; transform:translateY(0)} }
}

/* ---- Micro-badge en el título (opcional si usás emojis) ---- */
.feature-grid .card h3::before{
  content:"";
  display:inline-block; width:10px; height:10px; margin-right:8px;
  border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-12);
  vertical-align:middle; transform:translateY(-1px);
  animation: ping 2.4s infinite cubic-bezier(.2,.7,.3,1);
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 var(--accent-12) }
  70%{ box-shadow:0 0 0 10px transparent }
  100%{ box-shadow:0 0 0 0 transparent }
}

/* ---- Responsive afinado ---- */
@media (max-width:720px){
  .kpi{ padding:18px }
  .kpi .num{ font-size:clamp(1.4rem,6vw,2rem) }
  .feature-grid{ gap:16px }
  .feature-grid .card{ border-radius:16px }
}


/* ==========================================================================
   PRO UPGRADE — KPIs + FEATURES (sin cambiar HTML)
   Paleta neutra + celestes MUY suaves
   ========================================================================== */

/* ---------- Títulos de sección con subrayado suave ---------- */
.section .section-title{
  letter-spacing:.2px
}
.section .section-title::after{
  content:""; display:block; width:96px; height:3px; margin-top:10px;
  border-radius:99px;
  background:linear-gradient(90deg,#eef4ff 0,#bfd7ff 50%,#eef4ff 100%);
  opacity:.8
}

/* ========================================================================== */
/* KPIs – Glass cards + sweep shine + animación de entrada escalonada         */
/* ========================================================================== */
.kpi-grid{ gap:22px; margin-top:12px }

.kpi{
  position:relative; isolation:isolate;
  background:#fff;
  border:1px solid #e9eef5;
  border-radius:16px;
  padding:20px 18px;
  box-shadow:0 10px 28px rgba(2,6,23,.06);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),
             box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}

/* halos celestes muy sutiles en hover */
.kpi::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:
    radial-gradient(120% 80% at 10% -10%, rgba(147,197,253,.12), transparent 45%),
    radial-gradient(100% 60% at 120% 120%, rgba(191,215,255,.10), transparent 55%);
  opacity:0; transition:opacity .3s ease; z-index:-1;
}

/* brillo diagonal al pasar el mouse */
.kpi::after{
  content:""; position:absolute; top:-60%; left:-40%;
  width:40%; height:220%; transform:rotate(25deg);
  background:linear-gradient(120deg,transparent 0,rgba(255,255,255,.65) 50%,transparent 100%);
  opacity:0; pointer-events:none;
}

.kpi:hover{
  transform:translateY(-6px);
  border-color:#e1eaf6;
  box-shadow:0 22px 56px rgba(2,6,23,.12);
}
.kpi:hover::before{ opacity:1 }
.kpi:hover::after{ animation:kpiSweep 1.15s ease }

@keyframes kpiSweep{
  0%{opacity:0; transform:translateX(0) rotate(25deg)}
  10%{opacity:.55}
  100%{opacity:0; transform:translateX(380%) rotate(25deg)}
}

/* tipografía y jerarquía */
.kpi .num{
  font-size:2.2rem; font-weight:800; line-height:1;
  letter-spacing:.2px; color:#0b1220;
  text-shadow:0 1px 0 #fff;
}
.kpi .lbl{ color:#6b7280; margin-top:6px }

/* entrada escalonada cuando .reveal gana .show */
.reveal.show .kpi{ animation:kpiPop .45s cubic-bezier(.2,.8,.2,1) both }
.reveal.show .kpi:nth-child(2){ animation-delay:.06s }
.reveal.show .kpi:nth-child(3){ animation-delay:.12s }
.reveal.show .kpi:nth-child(4){ animation-delay:.18s }

@keyframes kpiPop{
  0%{ transform:translateY(12px) scale(.98); opacity:0 }
  100%{ transform:none; opacity:1 }
}

/* ========================================================================== */
/* FEATURES – Tarjetas con borde reactivo, halo y elevación                   */
/* ========================================================================== */
.feature-grid{ gap:20px; margin-top:24px }

/* base */
.pro-cards .card{
  position:relative; isolation:isolate; overflow:hidden;
  background:#fff; color:#0b1220;
  border:1px solid #e9eef5; border-radius:18px;
  padding:22px 18px;
  box-shadow:0 12px 30px rgba(2,6,23,.06);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),
             box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}

/* capa de halo tenue (celeste muy leve) */
.pro-cards .card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:
    radial-gradient(120% 85% at 0% 0%, rgba(191,215,255,.16), transparent 40%),
    radial-gradient(110% 70% at 100% 100%, rgba(147,197,253,.12), transparent 55%);
  opacity:0; transition:opacity .28s ease; z-index:-1;
}

/* borde superior reactivo */
.pro-cards .card::after{
  content:""; position:absolute; left:10px; right:10px; top:8px; height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#bfd7ff,transparent);
  opacity:.0; transition:opacity .25s ease;
}

.pro-cards .card h3{
  margin:.2rem 0 .45rem;
  font-size:1.04rem; font-weight:800; letter-spacing:.2px;
  display:flex; align-items:center; gap:10px;
}
.pro-cards .card h3::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:#93c5fd; box-shadow:0 0 0 6px rgba(147,197,253,.14);
}

/* interacción */
.feature-grid:hover .card{ filter:saturate(.96) }
.pro-cards .card:hover{
  transform:translateY(-8px);
  border-color:#dfe8f6;
  box-shadow:0 26px 64px rgba(2,6,23,.12);
}
.pro-cards .card:hover::before{ opacity:1 }
.pro-cards .card:hover::after{ opacity:.9 }

/* entrada escalonada de las tarjetas */
.reveal.show .pro-cards .card{ animation:cardRise .45s cubic-bezier(.2,.8,.2,1) both }
.reveal.show .pro-cards .card:nth-child(2){ animation-delay:.06s }
.reveal.show .pro-cards .card:nth-child(3){ animation-delay:.12s }
.reveal.show .pro-cards .card:nth-child(4){ animation-delay:.18s }

@keyframes cardRise{
  0%{ transform:translateY(14px); opacity:0 }
  100%{ transform:none; opacity:1 }
}

/* foco accesible y micro-feedback */
.pro-cards .card:focus-within{
  outline:3px solid rgba(147,197,253,.35); outline-offset:2px
}
.pro-cards .card p{ color:#6b7280 }

/* ========================================================================== */
/* Mobile tweaks                                                              */
/* ========================================================================== */
@media (max-width:720px){
  .kpi .num{ font-size:1.9rem }
  .pro-cards .card h3{ font-size:1rem }
}

/* Respeto a usuarios sin animaciones */
@media (prefers-reduced-motion:reduce){
  .kpi,.pro-cards .card{ transition:none }
  .reveal.show .kpi,.reveal.show .pro-cards .card{ animation:none }
}



/* ===================== TESTIMONIOS PRO ===================== */
.slider{ 
  --h:auto;
  position:relative;
  overflow:visible;                  /* deja respirar el shadow */
  padding-inline:48px;               /* espacio para flechas */
  min-height:var(--h);
}
@media (max-width:768px){ .slider{ padding-inline:10px } }

.slider .slides{
  display:flex; align-items:stretch;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

.slider .slide{ 
  min-width:100%; 
  display:flex;                      /* para centrar la card */
}
.slider .slide.card{
  width:min(920px,100%);
  margin:0 auto;
  padding:22px 24px;
  border-radius:18px;
  border:1px solid #e9eef5;
  box-shadow:0 14px 34px rgba(2,6,23,.08);
}

/* texto */
.slider blockquote{
  margin:0 0 10px; 
  font-size:clamp(1rem,2.2vw,1.22rem);
  line-height:1.6; color:var(--text);
}
.slider figcaption{ color:var(--muted) }

/* animaciones de entrada/salida */
.slider .slide.is-entering{ animation:slIn .45s cubic-bezier(.2,.8,.2,1) both }
.slider .slide.is-leaving{  animation:slOut .35s ease both }
@keyframes slIn{ 0%{opacity:0; transform:translateY(6px)} 100%{opacity:1; transform:none} }
@keyframes slOut{ 0%{opacity:1} 100%{opacity:0} }

/* flechas */
.slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2; width:42px; height:42px; border-radius:999px;
  border:1px solid #e9eef5; background:#fff; color:#0b1220;
  box-shadow:0 10px 28px rgba(2,6,23,.08);
}
.slider .nav:hover{ transform:translateY(-50%) scale(1.06) }
.slider .prev{ left:0 } 
.slider .next{ right:0 }

/* línea base sutil */
.slider::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px;
  height:2px; background:#eef2f7; border-radius:99px; opacity:.7;
}

/* dots (auto) */
.slider .dots{ display:flex; gap:6px; justify-content:center; margin-top:12px }
.slider .dot{
  width:8px; height:8px; border-radius:999px; border:0; background:#dbe5f4; cursor:pointer
}
.slider .dot.active{ background:#93c5fd }
@media (prefers-reduced-motion:reduce){
  .slider .slides, .slider .nav{ transition:none }
  .slider .slide.is-entering, .slider .slide.is-leaving{ animation:none }
}

/* ===== Fix visibilidad de testimonios en móvil (flechas fuera de la card) ===== */
@media (max-width: 640px){
  /* deja espacio lateral suficiente para las flechas */
  .slider{ 
    padding-inline: 42px !important;   /* antes tenía 10px; así no pisan el texto */
  }

  /* card un pelín más compacta */
  .slider .slide.card{
    padding: 18px 16px;
    border-radius: 16px;
  }

  /* flechas más pequeñas y con fondo casi blanco */
  .slider .nav{
    width: 34px; height: 34px;
    top: 50%;
    background: rgba(255,255,255,.98);
    border: 1px solid #edf2f7;
    box-shadow: 0 8px 18px rgba(2,6,23,.10);
    transform: translateY(-50%);      /* centra verticalmente */
  }
  .slider .prev{ left: 4px }          /* fuera de la card */
  .slider .next{ right: 4px }

  /* tip extra: si querés aún más “fuera”, empujalas un poco con translateX */
  /* .slider .prev{ transform: translate(-30%,-50%); }
     .slider .next{ transform: translate(30%,-50%); } */

  /* puntos un poco más abajo para que no choquen con la card */
  .slider .dots{ margin-top: 14px }
}

/* ===== Testimonios: autor debajo, alineado a la izquierda ===== */
.slider .slide{
  display:flex;                 /* texto arriba, autor abajo */
  flex-direction:column;
}
.slider blockquote{
  margin:0;                     /* quita margen por defecto */
  line-height:1.55;
}
.slider figcaption{
  display:block;
  align-self:flex-start;        /* fuerza izquierda */
  margin:10px 0 0 0;            /* lo “baja” un toque */
  font-weight:600;
  font-size:.95rem;
  color:var(--muted);
}

/* Móvil: más aire y flechas fuera de la card */
@media (max-width:640px){
  .slider{ padding-inline:42px !important; }  /* espacio para flechas */
  .slider .slide.card{ padding:18px 16px 20px; border-radius:16px; }
  .slider figcaption{ margin-top:8px; font-size:.92rem; }
  .slider .nav{
    width:34px; height:34px; top:50%;
    background:rgba(255,255,255,.98);
    border:1px solid #edf2f7;
    box-shadow:0 8px 18px rgba(2,6,23,.10);
    transform:translateY(-50%);
  }
  .slider .prev{ left:4px }
  .slider .next{ right:4px }
  .slider .dots{ margin-top:14px; }
}




/* ===== Kill scroll lateral en toda la página ===== */
html, body{
  width:100%;
  max-width:100%;
  overflow-x: clip !important;   /* más robusto que hidden */
}

/* Si algún bloque grande intenta pintarse fuera, recortalo sin afectar layout */
.hero, .section, .slider{
  overflow-x: clip;
  contain: paint;                 /* no altera medidas, evita “sangrados” por sombras/transform */
}

/* Contenedor sin cálculos con vw para evitar desbordes por la barra de scroll */
.container{
  width:100% !important;
  max-width:1180px;
  margin-inline:auto;
}

/* Slider: asegura que el track no genere ancho de documento durante el drag */
.slider .slides{ contain: content; }

/* === FIX: restaurar slider de testimonios === */
/* Quitamos containment que rompe la pintura/altura del slide */
.slider,
.slider .slides{
  contain: unset !important;
}

/* Mantengo el anti-scroll lateral, pero solo recorto en X del slider */
html, body{ overflow-x: hidden; }
.slider{ overflow-x: hidden; }   /* no más scroll lateral por el slider */





.topbar{ margin-bottom:0 !important; }
.hero.hero-sales{ padding-top:72px; } /* coincide con la altura de la topbar fija */



.hero .hero-inner{ max-width: 1100px; }
.hero h1{ font-size: clamp(28px, 4vw, 56px); }
.hero p{  font-size: clamp(15px, 1.6vw, 20px); opacity:.92; }


.hero.hero-sales{
  background: radial-gradient(1200px 600px at 50% -100px, rgba(255,255,255,.06), transparent),
              linear-gradient(180deg, #0f1420 0%, #0c1117 60%, #0c1117 100%);
  color:#fff;
}


#testimonials .nav{ opacity:1; }
#testimonials .dot{ width:8px; height:8px; }


.trust-inner .ti{ font-size:20px; margin-right:8px; vertical-align:-2px; opacity:.9; }
.trust-item{ display:flex; align-items:center; gap:8px; }

#testimonials{ overflow:hidden; }
#testimonials .slides{ display:flex; will-change:transform; }
#testimonials .slide{ flex:0 0 100%; height:auto; }
#testimonials .slides::-webkit-scrollbar{ display:none; }

#roi .input{ width:100%; padding:.8rem .9rem; border:1px solid rgba(15,23,42,.14); border-radius:12px; }
.price-pill{ padding:.8rem 1rem; border-radius:12px; background:#0c1117; color:#fff; font-weight:700; }





/* ====== FIX CTA HERO + NAV EN MÓVIL ====== */

/* Asegura que el bloque de CTAs del hero nunca se oculte en móviles */
.hero-sales .cta-hero{
  display:flex !important;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  position:relative;
  z-index:2;                 /* por si hay overlays del hero */
}
.hero-sales .cta-hero .btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.9rem 1.1rem;
  border-radius:14px;
  font-weight:700;
  text-align:center;
}

/* En pantallas chicas, que ambos botones sean fáciles de tocar */
@media (max-width: 600px){
  .hero-sales{ padding-top: clamp(80px, 14vh, 120px); padding-bottom:28px; }
  .hero-sales .cta-hero .btn{ width:100%; } /* apila: “Probar gratis 10 días” y “Ingresar al panel” */
}

/* Si el hero usa overlays con ::after, que no bloqueen clics */
.hero-sales::after{ pointer-events:none; }

/* ====== NAV: mostrar “Incluí tu negocio” también en móvil ====== */
.topbar .tb-actions{ display:flex; gap:10px; align-items:center; }
.topbar .tb-actions .btn-accent{
  display:inline-flex !important;       /* evitar display:none en breakpoints viejos */
  align-items:center;
  padding:.5rem .8rem;
  font-size:.95rem;
  line-height:1;
}

/* Para hacer lugar en teléfonos: oculto el link de “Iniciar sesión / Registrarse”
   (igual lo tenés adentro del modal y en el drawer) */
@media (max-width: 600px){
  .topbar .tb-actions .link-btn{ display:none !important; }
}

/* ====== HAMBURGUESA: sin borde y con 3 barras negras ====== */
.burger{
  border:0 !important;
  background:transparent !important;
  width:36px; height:28px;
  position:relative;
  font-size:0;              /* oculta el carácter ☰ si lo hubiera */
  cursor:pointer;
}
.burger::before{
  content:"";
  position:absolute;
  left:4px; right:4px; top:6px;
  height:2px; background:#111; border-radius:2px;
  /* Las otras dos barras con box-shadow */
  box-shadow: 0 8px 0 #111, 0 16px 0 #111;
}
/* estado activo/opcional al abrir */
.burger:active::before{ opacity:.8; transform:scaleX(.98); }

/* Si tu topbar es oscura, asegurá contraste de las barras */
.topbar.scrolled .burger::before{ background:#111; box-shadow:0 8px 0 #111, 0 16px 0 #111; }

/* ===== NAV: priorizar "Iniciar sesión" y quitar hamburguesa ===== */
.topbar .tb-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.topbar .tb-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* Mostrar SIEMPRE el link "Iniciar sesión / Registrarse" también en móvil */
.topbar .tb-actions .link-btn{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  padding:.5rem .8rem; line-height:1; font-weight:600;
  border-radius:12px;
}

/* Mantener "Incluí tu negocio" visible y compacto en móvil */
.topbar .tb-actions .btn-accent{
  display:inline-flex !important; align-items:center; justify-content:center;
  padding:.5rem .8rem; font-size:.95rem; line-height:1; border-radius:12px;
}

/* OCULTAR hamburguesa en todos los breakpoints */
.burger{ display:none !important; }

/* ===== HERO CTA en móvil: elegantes, no gigantes ===== */
.hero-sales .cta-hero{
  display:flex !important;
  flex-wrap:wrap; justify-content:center; align-items:center; gap:12px;
  /* Máximo ancho de bloque para que no se vean enormes */
  max-width: clamp(280px, 88vw, 420px);
  margin-inline:auto; margin-top:18px;
}
.hero-sales .cta-hero .btn{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:100%;
  min-height:44px;
  padding: clamp(10px, 2.6vw, 14px) clamp(14px, 3.6vw, 18px);
  border-radius:12px;
  font-weight:700;
  font-size: clamp(14px, 3.7vw, 16px);
  letter-spacing:.2px;
}

/* En teléfonos medianos (430–600px), dos columnas prolijas */
@media (min-width:430px) and (max-width:600px){
  .hero-sales .cta-hero{
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    max-width: clamp(360px, 92vw, 520px);
  }
  .hero-sales .cta-hero .btn{ width:100%; }
}

/* En ≥ 601px, dejar que respiren como en desktop */
@media (min-width:601px){
  .hero-sales .cta-hero{ max-width:none; }
  .hero-sales .cta-hero .btn{ width:auto; }
}

/* Evitar que overlays del hero bloqueen los clics a los CTA */
.hero-sales::after{ pointer-events:none; }

/* Ajustes de densidad en móvil para el topbar */
@media (max-width:600px){
  .topbar .brand img{ height:22px; }
  .topbar .tb-actions .link-btn,
  .topbar .tb-actions .btn-accent{ font-size:.95rem; padding:.48rem .72rem; }
}


/* ===== Modal Login: inputs + links consistentes ===== */
#loginModal .email{ margin-top:8px; }

/* Labels */
#loginModal .email label{
  display:block;
  margin:8px 0 6px;
  font-size:12px;
  font-weight:600;
  color:#475569; /* slate-600 */
}

/* Campos (mismo look iOS del modal) */
#loginModal .email input[type="email"],
#loginModal .email input[type="password"]{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:#0f172a;
  padding:.9rem .9rem;
  border-radius:14px !important;
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
#loginModal .email input::placeholder{ color:#94a3b8; }
#loginModal .email input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 6px var(--ring);
}

/* Botón principal */
#loginModal .email .cont-btn{
  width:100%;
  margin-top:12px;
  padding:.9rem;
  border:0;
  border-radius:14px !important;
  font-weight:700;
}
#loginModal .email .cont-btn[disabled]{
  opacity:.55; box-shadow:none; cursor:not-allowed;
}

/* Zona de enlaces secundarios (registro + recuperar) */
#loginModal .email .alt-auth{ 
  margin-top:12px !important; 
  text-align:center; 
}
#loginModal .email .sub-links{
  margin-top:6px;
  text-align:center;
}

/* Estilo de links del modal */
#loginModal .email .link-inline{
  background:transparent; border:0; padding:0;
  color:var(--brand);
  text-decoration:underline; text-underline-offset:2px;
  font-weight:600; cursor:pointer;
}
#loginModal .email .link-inline.subtle{
  color:#64748b;           /* gris suave */
  font-weight:500;
}
#loginModal .email .link-inline.subtle:hover{ color:var(--brand); }
#loginModal .email .link-inline:focus-visible{
  outline:none; border-radius:8px;
  box-shadow:0 0 0 4px var(--ring);
}

/* Compacto y legible en móvil */
@media (max-width:480px){
  #loginModal .card{ margin:0 10px; }
  #loginModal .email label{ font-size:12px; }
  #loginModal .email .link-inline{ font-size:14px; }
}


/* ===== FIX CTA NAV MOBILE: "Inicia sesión" + "Incluí tu negocio" lado a lado ===== */
.topbar .tb-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:nowrap; min-width:0;
}
.topbar .brand{ display:flex; align-items:center; gap:8px; min-width:0; }
.topbar .brand img{ width:28px; height:28px; display:block; }

/* Contenedor de acciones: no permitir wrap */
.topbar .tb-actions{
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px; flex:0 0 auto; white-space:nowrap;
}
.topbar .tb-actions > *{ flex:0 0 auto; }

/* Botón “Inicia sesión” compacto */
.topbar .link-btn{
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.14);
  padding:.48rem .66rem; border-radius:12px; line-height:1; font-weight:600;
}

/* Botón “Incluí tu negocio” compacto */
.topbar .btn.btn-accent{
  padding:.48rem .66rem; line-height:1; border-radius:12px; font-weight:700;
  white-space:nowrap;
}

/* Burger siempre al borde derecho */
.topbar .burger{ margin-left:6px; background:transparent; border:0; color:#fff; font-size:20px; }

/* Compresión progresiva en pantallas chicas */
@media (max-width: 480px){
  .topbar .tb-actions{ gap:6px; }
  .topbar .link-btn,
  .topbar .btn.btn-accent{ font-size:13px; padding:.44rem .58rem; }
  /* Ocultá el texto “GoCorte” para ganar ancho (dejamos solo el ícono) */
  .topbar .brand span{ display:none; }
}
@media (max-width: 360px){
  .topbar .link-btn,
  .topbar .btn.btn-accent{ font-size:12px; padding:.40rem .50rem; letter-spacing:.1px; }
}



/* ===== NAV — Mostrar "GoCorte" en mobile y mantener CTAs en línea ===== */
.topbar .tb-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; min-width:0;
}
.topbar .brand{
  display:flex; align-items:center; gap:8px;
  flex:1 1 auto; min-width:0;            /* deja que el texto se adapte sin empujar */
}
.topbar .brand img{ width:22px; height:22px; display:block; }

/* Rehabilita el texto de marca en mobile */
.topbar .brand span{
  display:inline-block !important;        /* pisa el display:none anterior */
  font-weight:800;
  font-size:clamp(14px,3.8vw,18px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Acciones: nunca hacer wrap y no crecer */
.topbar .tb-actions{
  display:flex; align-items:center; justify-content:flex-end;
  gap:6px; flex-shrink:0; white-space:nowrap;
}

.topbar .link-btn,
.topbar .btn.btn-accent{
  padding:.42rem .56rem; font-size:13px; line-height:1;
  border-radius:12px; font-weight:700;
}
.topbar .burger{ margin-left:6px; font-size:20px; }

/* Ultra angosto (ej: 360px) – comprimimos aún más sin romper */
@media (max-width:380px){
  .topbar .brand img{ width:20px; height:20px; }
  .topbar .brand span{ max-width:88px; }  /* evita empujar los botones */
  .topbar .link-btn,
  .topbar .btn.btn-accent{ font-size:12px; padding:.38rem .50rem; }
}



/* ===== Topbar en modo blanco (al hacer scroll) ===== */
.topbar.scrolled{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Marca e iconos en oscuro */
.topbar.scrolled .brand span{ color:#0c1117; }
.topbar.scrolled .burger{ color:#0c1117; }

/* “Inicia sesión” → negro + borde fino negro */
.topbar.scrolled .link-btn{
  color:#0c1117 !important;
  background:transparent !important;
  border:1px solid rgba(0,0,0,.18) !important;
  box-shadow:none !important;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.topbar.scrolled .link-btn:hover{
  background:rgba(0,0,0,.05);
}

/* “Incluí tu negocio” se mantiene azul (legible sobre fondo blanco) */
.topbar.scrolled .btn.btn-accent{
  color:#fff;
  /* si tu btn-accent es outline en algún breakpoint, fuerzo sólido */
  background:#4f80ff;
  border-color:#4f80ff;
}

/* Móviles muy angostos: evita que se apilen */
@media (max-width:380px){
  .topbar.scrolled .brand span{ max-width:88px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar.scrolled .link-btn,
  .topbar.scrolled .btn.btn-accent{ font-size:12px; padding:.38rem .50rem; }
}















/* ================================
   GoCorte Showcase (mockup real)
   Safe: todo prefijo gc-
================================ */
.gc-showcase .sub{ max-width: 860px; margin-left:auto; margin-right:auto; }

.gc-showcase-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 18px;
}

.gc-showcase-copy{
  display:grid;
  gap: 12px;
}

.gc-pill{
  display:inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(79,128,255,.12);
  border: 1px solid rgba(79,128,255,.22);
}

.gc-h3{
  margin: 0;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.15;
}
.gc-p{ margin:0; opacity:.92; max-width: 54ch; }

.gc-list{
  margin: 6px 0 0;
  padding-left: 18px;
  display:grid;
  gap: 6px;
  opacity: .92;
}
.gc-list strong{ font-weight: 800; }

.gc-cta-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Tabs SIEMPRE legibles (no pasa lo de “solo leo el activo”) */
.gc-tabs{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-start;
  padding: 10px 0;
}
.gc-tab{
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.86);
  font-weight: 900;
  letter-spacing: .2px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.gc-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(79,128,255,.35);
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
}
.gc-tab.is-active{
  background: linear-gradient(135deg, rgba(79,128,255,.95), rgba(0,194,255,.92));
  color: #0b0d12;
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(79,128,255,.20);
}

/* Mockup: GRANDE en PC, perfecto en mobile */
.gc-phone{
  position: relative;
  display:grid;
  justify-items:center;
  gap: 10px;
}

/* Marco: usa aspect-ratio real del PNG (1365/2048) */
.gc-phone__frame{
  position: relative;
  width: clamp(320px, 34vw, 520px); /* ✅ más grande en PC */
  aspect-ratio: 1365 / 2048;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.35));
  transform: translateZ(0);
}

.gc-phone__mock{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  user-select:none;
  pointer-events:none;
  z-index: 3;
}

/* ✅ Encaje de pantalla calculado desde tu mockup.png real */
.gc-phone__screen{
  position:absolute;
  left: 21.9%;
  top: 7.8%;
  width: 56.3%;
  height: 84.1%;
  border-radius: clamp(18px, 2.2vw, 34px);
  overflow:hidden;
  background: #0b0d12;
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 18px 50px rgba(0,0,0,.20);
}

.gc-phone__screen img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: opacity .22s ease;
  transform: translateZ(0);
}

/* Brillo premium */
.gc-phone__shine{
  position:absolute;
  left: 12%;
  top: 10%;
  width: 36%;
  height: 68%;
  border-radius: 48px;
  background: linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  transform: rotate(-12deg);
  opacity: .18;
  pointer-events:none;
  z-index: 4;
}

/* Badge flotante */
.gc-badge{
  position: absolute;
  right: -10px;
  top: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(10,12,18,.88);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
  color: rgba(255,255,255,.95);
  display: grid;
  gap: 2px;
  min-width: 190px;
  backdrop-filter: blur(10px);
  z-index: 10;
}
.gc-badge__dot{
  width: 10px; height: 10px; border-radius: 99px;
  background: #25d366;
  box-shadow: 0 0 0 6px rgba(37,211,102,.18);
  display:inline-block;
  margin-bottom: 2px;
}
.gc-badge__sub{ font-size: 12px; opacity: .78; }

/* En desktop, el set mobile de tabs no hace falta */
.gc-tabs--mobile{ display:none; }

/* Responsive */
@media (max-width: 992px){
  .gc-showcase-grid{ grid-template-columns: 1fr; }
  .gc-tabs{ justify-content:center; }
  .gc-showcase-copy{ text-align:center; justify-items:center; }
  .gc-p{ max-width: 62ch; }

  /* En mobile: mostramos tabs debajo del mockup también */
  .gc-tabs--mobile{ display:flex; justify-content:center; }
  .gc-showcase-copy .gc-tabs{ display:none; }

  .gc-badge{
    position: static;
    width: min(520px, 92vw);
    margin-top: 4px;
  }
  .gc-phone__frame{ width: min(520px, 92vw); } /* ✅ grande en celu */
}



.gc-phone__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  border-radius: inherit;
}
/* ✅ Ajuste fino: estirar un poquito arriba y abajo la pantalla del mockup */
#capturas .gc-phone__screen{
  top: 7.4% !important;     /* antes 7.8% (sube un poquito) */
  height: 84.9% !important; /* antes 84.1% (crece hacia abajo) */
}
/* 1) tu ajuste del recorte (afecta a las 3 vistas) */
#capturas .gc-phone__screen{
  top: 7.4% !important;
  height: 84.9% !important;
}

/* 2) FIX: forzar que VIDEO e IMAGEN llenen el recorte (evita bandas negras) */
#capturas .gc-phone__screen .gc-phone__media{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* =========================================================
   GoCorte LANDING — PRO PATCH (pegalo al FINAL)
   - Secciones con color azul suave (sin payaso)
   - Showcase premium oscuro
   - CTA con shimmer
   - Plan Premium destacado
   - Menos aire vacío
========================================================= */

:root{
  --brandA: #4f80ff;
  --brandB: #00c2ff;
  --ink: #0c1117;
  --tint: #f2f7ff;
  --tint2:#eef5ff;
  --softLine: rgba(15,23,42,.10);
}

/* Ritmo: menos “vacío” sin romper layout */
.section{ padding: clamp(42px, 6vw, 84px) 0; }
.trust.section{ padding: 22px 0 !important; }

/* Subrayado centrado cuando el título está centrado */
.section-title.center::after{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* -------------------------
   TRUST BAR (iconos reales + bloque con personalidad)
-------------------------- */
.trust.section.light{
  background:
    radial-gradient(900px 200px at 50% 0%, rgba(79,128,255,.10), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.trust-inner{
  gap: 10px !important;
}
.trust-item{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.trust-item .ti{
  width:auto !important;
  height:auto !important;
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  font-size: 20px !important;
  color: rgba(79,128,255,.95) !important;
  opacity: .95;
}

/* En móvil, que no se “aplane” feo: grid cómodo */
@media (max-width: 640px){
  .trust-inner{
    grid-template-columns: 1fr 1fr !important;
  }
}

/* -------------------------
   KPIs: sección con tinte azul + textura pro
-------------------------- */
.kpis{
  position:relative;
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(79,128,255,.12), transparent 60%),
    radial-gradient(900px 420px at 88% 90%, rgba(0,194,255,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--tint) 55%, #ffffff 100%) !important;
  overflow:hidden;
}
.kpis::after{
  content:"";
  position:absolute; inset:-2px;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(79,128,255,.10) 1px, transparent 0);
  background-size: 22px 22px;
  opacity:.35;
  pointer-events:none;
  mask-image: radial-gradient(60% 55% at 50% 45%, #000 40%, transparent 70%);
}
.kpi{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.07) !important;
  backdrop-filter: blur(8px);
}
.kpi:hover{
  box-shadow: 0 26px 64px rgba(2,6,23,.12) !important;
}

/* -------------------------
   FEATURES: separador suave arriba para “cortar” el blanco
-------------------------- */
.section:not(.kpis):not(.trust):not(.hero):not(.footer){
  position:relative;
}
.section:not(.kpis):not(.trust):not(.hero):not(.footer)::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.08), transparent);
}

/* -------------------------
   SHOWCASE: bloque premium (oscuro + azul) SIN tocar HTML
   Tu sección tiene id="capturas" y clase gc-showcase
-------------------------- */
#capturas.gc-showcase{
  background:
    radial-gradient(1100px 560px at 50% -120px, rgba(79,128,255,.28), transparent 60%),
    radial-gradient(900px 520px at 10% 90%, rgba(0,194,255,.16), transparent 60%),
    linear-gradient(180deg, #0c1117 0%, #0b1220 100%) !important;
  color:#fff !important;
  overflow:hidden;
}
#capturas .section-title,
#capturas .sub{
  color: rgba(255,255,255,.92) !important;
}
#capturas .gc-tab{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.86) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
}
#capturas .gc-tab:hover{
  border-color: rgba(79,128,255,.35) !important;
}
#capturas .gc-tab.is-active{
  background: linear-gradient(135deg, rgba(79,128,255,1), rgba(0,194,255,1)) !important;
  color:#0b0d12 !important;
}
#capturas .gc-badge{
  background: rgba(12,17,23,.86) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* -------------------------
   STEPS: otro bloque tintado (para alternar)
-------------------------- */
.steps.section.light{
  background:
    radial-gradient(900px 420px at 90% 0%, rgba(79,128,255,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--tint2) 60%, #ffffff 100%) !important;
}
.steps .bubble{
  background: linear-gradient(135deg, var(--ink), #111827) !important;
}

/* -------------------------
   PRICING: destacar Premium (3ra card) como “Más elegido”
   SIN tocar HTML (nth-child)
-------------------------- */
.pricing > article:nth-child(3){
  position:relative;
  border-color: rgba(79,128,255,.38) !important;
  box-shadow: 0 26px 70px rgba(79,128,255,.14) !important;
  transform: translateY(-6px);
}
.pricing > article:nth-child(3)::before{
  content:"Más elegido";
  position:absolute;
  top:14px; right:14px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  background: rgba(79,128,255,.12);
  border: 1px solid rgba(79,128,255,.30);
  color: #0b1220;
}

/* -------------------------
   CTA principal (btn-accent): gradiente + shimmer premium
-------------------------- */
.btn-accent{
  background: linear-gradient(135deg, var(--brandA), var(--brandB)) !important;
  box-shadow: 0 16px 38px rgba(79,128,255,.22) !important;
  position:relative;
  overflow:hidden;
}
.btn-accent::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width:40%;
  height:220%;
  transform: rotate(18deg);
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.38), transparent);
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .btn-accent::after{
    animation: gcShine 4.8s ease-in-out infinite;
  }
}
@keyframes gcShine{
  0%, 62%{ opacity:0; transform: translateX(0) rotate(18deg); }
  68%{ opacity:.55; }
  78%{ opacity:0; transform: translateX(380%) rotate(18deg); }
  100%{ opacity:0; transform: translateX(380%) rotate(18deg); }
}

/* CTA secundario en hero: un poquito más “premium” */
.hero-sales .cta-hero .btn:not(.btn-accent){
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
}
.hero-sales .cta-hero .btn:not(.btn-accent):hover{
  background: rgba(255,255,255,.10) !important;
}

/* -------------------------
   Botón “Ingresar al panel” (btn-light) consistente
-------------------------- */
.btn-light{
  border-radius: 14px !important;
  box-shadow: 0 12px 28px rgba(2,6,23,.10);
}

/* -------------------------
   Micro-animación suave de fondo (no payaso)
-------------------------- */
@media (prefers-reduced-motion:no-preference){
  #capturas.gc-showcase::after{
    content:"";
    position:absolute;
    inset:-30%;
    background:
      radial-gradient(700px 360px at 20% 30%, rgba(79,128,255,.18), transparent 60%),
      radial-gradient(700px 360px at 80% 70%, rgba(0,194,255,.12), transparent 60%);
    animation: gcFloat 10s ease-in-out infinite alternate;
    pointer-events:none;
  }
  @keyframes gcFloat{
    from{ transform: translateY(0px); }
    to{ transform: translateY(16px); }
  }
}



/* =========================================================
   GC SHOWCASE FX (solo #capturas) — levitación + recuadros + grid
   Safe: no toca otras secciones
========================================================= */

#capturas.gc-showcase{ position:relative; isolation:isolate; }

/* Gridlines + glow suave como landing */
#capturas.gc-showcase::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(79,128,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,128,255,.06) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity:.55;
  pointer-events:none;
  z-index:0;
  /* se desvanece hacia bordes */
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 35%, transparent 78%);
}

/* Asegurar que el contenido quede arriba del fondo */
#capturas .container{ position:relative; z-index:1; }

/* Recuadros premium detrás del teléfono (sin tocar HTML) */
#capturas .gc-phone{ position:relative; }
#capturas .gc-phone::before,
#capturas .gc-phone::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(520px, 92vw);
  aspect-ratio: 1365 / 2048; /* acompaña tu frame */
  border-radius: 44px;
  pointer-events:none;
  z-index:0;
}
#capturas .gc-phone::before{
  transform: translate(-52%,-48%) rotate(-6deg);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 32px 90px rgba(0,0,0,.35);
  opacity:.95;
}
#capturas .gc-phone::after{
  transform: translate(-48%,-52%) rotate(5deg);
  background: linear-gradient(180deg, rgba(79,128,255,.10), rgba(0,194,255,.05));
  border: 1px solid rgba(79,128,255,.22);
  box-shadow: 0 0 80px rgba(79,128,255,.10);
  opacity:.9;
}

/* El frame por arriba de los recuadros */
#capturas .gc-phone__frame{ position:relative; z-index:1; }

/* -------- Levitación (CSS vars + animación) -------- */
@property --gc-fy { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --gc-fr { syntax: "<angle>";  inherits: true; initial-value: 0deg; }

#capturas .gc-phone__frame{
  --gc-px: 0px;  /* parallax X (JS) */
  --gc-py: 0px;  /* parallax Y (JS) */
  --gc-rot: 0deg;/* parallax rot (JS) */
  --gc-fy: 0px;  /* float Y (CSS) */
  --gc-fr: 0deg; /* float rot (CSS) */
  transform:
    translate3d(var(--gc-px), calc(var(--gc-py) + var(--gc-fy)), 0)
    rotate(calc(var(--gc-rot) + var(--gc-fr)));
  will-change: transform;
  transform-origin: 50% 60%;
}

@media (prefers-reduced-motion: no-preference){
  #capturas .gc-phone__frame{
    animation: gcPhoneFloat 7.5s ease-in-out infinite;
  }
  @keyframes gcPhoneFloat{
    0%,100%{ --gc-fy: 0px;   --gc-fr: 0deg; }
    38%   { --gc-fy: -14px; --gc-fr: .45deg; }
    70%   { --gc-fy: -8px;  --gc-fr: -.35deg; }
  }
}

/* Badge flotante con micro-movimiento */
#capturas .gc-badge{
  --gc-bx: 0px;
  --gc-by: 0px;
  transform: translate3d(var(--gc-bx), var(--gc-by), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference){
  #capturas .gc-badge{
    animation: gcBadgeFloat 6.5s ease-in-out infinite;
  }
  @keyframes gcBadgeFloat{
    0%,100%{ transform: translate3d(var(--gc-bx), var(--gc-by), 0); }
    50%    { transform: translate3d(var(--gc-bx), calc(var(--gc-by) - 6px), 0); }
  }
}

/* Shine que recorre el mockup (más “premium”) */
@media (prefers-reduced-motion: no-preference){
  #capturas .gc-phone__shine{
    opacity:.22 !important;
    animation: gcShineSweep 5.2s ease-in-out infinite;
  }
  @keyframes gcShineSweep{
    0%,60% { transform: rotate(-12deg) translateX(-10px); opacity:.16; }
    75%    { transform: rotate(-12deg) translateX(26px);  opacity:.28; }
    100%   { transform: rotate(-12deg) translateX(26px);  opacity:.16; }
  }
}

/* Mobile: menos movimiento para que no “maree” */
@media (max-width: 640px){
  #capturas .gc-phone::before,
  #capturas .gc-phone::after{ opacity:.75; }
  #capturas .gc-phone__frame{ animation-duration: 8.5s; }
}

/* ============================
   Gyro button (solo iOS)
============================ */
#gcGyroBtn{
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  z-index:20;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  padding:10px 12px;
  border-radius: 999px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
  cursor:pointer;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 46px rgba(0,0,0,.35);
  transition: transform .14s ease, background .18s ease, border-color .18s ease, opacity .2s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
#gcGyroBtn:hover{ transform:translateX(-50%) translateY(-1px); border-color: rgba(79,128,255,.35); }
#gcGyroBtn:active{ transform:translateX(-50%) translateY(0); }
#gcGyroBtn.is-on{
  background: linear-gradient(135deg, rgba(79,128,255,.95), rgba(0,194,255,.90));
  color:#0b0d12;
  border-color: transparent;
}
#gcGyroBtn.is-hide{ opacity:0; pointer-events:none; }

@media (max-width:640px){
  #gcGyroBtn{ bottom:-14px; font-size:12.5px; padding:9px 11px; }
}
/* ===========================
   3D Tilt real (solo #capturas)
   =========================== */
#capturas .gc-phone{
  perspective: 900px;                 /* 🔥 sensación 3D */
  perspective-origin: 50% 45%;
}

#capturas .gc-phone__frame{
  transform-style: preserve-3d;
  backface-visibility: hidden;

  /* vars nuevas para tilt 3D */
  --gc-rx: 0deg;   /* rotateX */
  --gc-ry: 0deg;   /* rotateY */

  /* IMPORTANTE: reemplaza el transform actual del frame por este */
  transform:
    translate3d(var(--gc-px), calc(var(--gc-py) + var(--gc-fy)), 0)
    rotateX(var(--gc-rx))
    rotateY(var(--gc-ry))
    rotateZ(calc(var(--gc-rot) + var(--gc-fr)));
}

/* Capas con “profundidad” (sutil, no payaso) */
#capturas .gc-phone__screen{ transform: translateZ(14px); }
#capturas .gc-phone__mock  { transform: translateZ(22px); }
#capturas .gc-phone__shine { transform: translateZ(28px) rotate(-12deg); }
#capturas .gc-badge        { transform: translateZ(30px); }