/* ==========================================================================
   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; }
}