.site-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.header-inner { height:76px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.desktop-nav { display:flex; gap:28px; font-size:14px; color:var(--muted); font-weight:650; }
.desktop-nav a:hover { color:var(--green); }
.header-actions { display:flex; gap:8px; align-items:center; }
.nav-toggle { display:none; width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:17px; line-height:1; flex-shrink:0; }
.desktop-nav .theme-toggle { display:none; }

.hero { padding:82px 0 70px; overflow:hidden; background:radial-gradient(circle at 75% 15%,color-mix(in srgb,var(--green) 14%,transparent),transparent 32%); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.eyebrow { color:var(--green); font-weight:850; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.hero h1 { font-size:clamp(42px,5vw,70px); line-height:1.02; letter-spacing:-.045em; margin:18px 0; }
.hero h1 span { color:var(--green); }
.hero-copy > p { font-size:19px; line-height:1.65; color:var(--muted); max-width:650px; }
.hero-actions { display:flex; gap:10px; margin:30px 0 22px; }
.big { padding:14px 20px; border-radius:14px; }
.trust-line { display:flex; flex-wrap:wrap; gap:18px; font-size:13px; color:var(--muted); }
.trust-line span::first-letter { color:var(--green); }

/* Official wordmark (replaces the old text-only .logo-mark span on this
   page specifically) - height-constrained, width:auto so the real PNG's
   aspect ratio (666x140) never distorts. */
.logo-full { height:28px; width:auto; display:block; }
.logo-full-sm { height:18px; }

.hero-app { padding:20px; transform:rotate(1deg); }
.mock-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--line); }
.mock-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; }
.mock-metrics div { padding:15px; border-radius:14px; background:var(--surface-2); }
.mock-metrics small { display:block; color:var(--muted); }
.mock-metrics strong { display:block; margin-top:7px; font-size:26px; }
.mock-payment { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.mock-payment:last-child { border:0; }
.mock-payment small { display:block; margin-top:4px; color:var(--muted); }
.state-icon { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:900; }
.accepted-bg{background:var(--green-soft);color:var(--green)} .review-bg{background:var(--yellow-soft);color:var(--yellow)} .rejected-bg{background:var(--red-soft);color:var(--red)} .received-bg{background:var(--blue-soft);color:var(--blue)}

/* Bancos y canales soportados - two explicit, honest groups (Gmail vs
   Android) rather than one flat logo strip, so a bank is never implied
   to work the same way through both channels when it doesn't. */
.channel-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px; }
.channel-card { padding:26px; box-shadow:none; }
.channel-icon { width:46px;height:46px;border-radius:14px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:20px; }
.channel-card h3 { margin:18px 0 8px; }
/* Responsive overflow fix (2026-10-12, Phase 2B Issue A): the real
   source of the page-level overflow previously misattributed to the
   header - "READ_SMS/RECEIVE_SMS/SEND_SMS" has no space for the browser
   to wrap at (overflow-wrap:normal doesn't treat "/" as a break
   opportunity), so it overflows this paragraph's box by 51px. That
   spills partially up through the ancestor chain (overflow:visible at
   every level) to a 12px page-level scrollWidth excess at 320px - the
   header itself was always clean. */
.channel-card p { color:var(--muted); line-height:1.65; overflow-wrap:break-word; word-break:break-word; }
.bank-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.bank-chip {
  display:inline-flex; align-items:center; padding:8px 13px; border-radius:11px;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:13px; font-weight:750; color:var(--text);
}
code { background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.92em; }

.section { padding:90px 0; }
.alt { background:var(--surface-2); }
.section-title { max-width:720px; margin-bottom:36px; }
.section-title h2 { font-size:clamp(32px,4vw,48px); letter-spacing:-.03em; margin:10px 0; }
.section-title p { color:var(--muted); }
.section-title.centered { max-width:720px; margin-left:auto; margin-right:auto; text-align:center; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.steps article { padding:22px; }
.steps b { color:var(--green); font-size:13px; }
.steps h3 { margin:28px 0 8px; }
.steps p,.feature p { color:var(--muted); line-height:1.6; }
.steps-caveat { margin-top:22px; font-size:13px; }

.problema-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.problema-grid h2 { font-size:38px; letter-spacing:-.03em; margin:10px 0 16px; }
.problema-grid p { color:var(--muted); line-height:1.75; margin-bottom:14px; }
.problema-card { padding:8px; display:grid; gap:2px; }
.problema-row { display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:center; padding:18px; }
.problema-row small { display:block; color:var(--muted); margin-top:3px; }

.feature-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.feature { padding:24px; box-shadow:none; }
.feature > span { width:46px;height:46px;border-radius:14px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:20px; }
.feature h3 { margin:24px 0 7px; }

.trial-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 30px; margin-bottom:26px; background:linear-gradient(130deg,var(--green-soft),var(--surface)); box-shadow:none; }
.trial-banner h3 { margin:8px 0 6px; font-size:22px; }
.trial-banner p { max-width:560px; }

.billing-toggle { display:flex; gap:6px; width:fit-content; margin:0 auto 30px; padding:5px; background:var(--surface-2); border-radius:99px; border:1px solid var(--line); }
.toggle-option { border:0; background:transparent; color:var(--muted); font-weight:750; font-size:14px; padding:9px 18px; border-radius:99px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.toggle-option.active { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.save-badge { background:var(--green); color:white; font-size:10px; font-weight:800; padding:3px 7px; border-radius:99px; letter-spacing:.02em; }

/* Responsive overflow fix (2026-10-12, E-2): bare `1fr` implies
   minmax(auto,1fr), so a grid track can't shrink below its content's
   min-content width. Between the 900px breakpoint (where this already
   becomes minmax(0,1fr)) and ~1100px, the 4-column row has no safety
   margin and the Enterprise card's min-content forces the whole row -
   and the page - past the viewport. Matches the minmax(0,1fr) pattern
   already used for this same grid at the narrower breakpoints below. */
.pricing { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch; }
.price-card { padding:26px; position:relative; box-shadow:none; display:flex; flex-direction:column; }
.price-card.featured { border:2px solid var(--green); transform:translateY(-8px); box-shadow:var(--shadow); }
.popular { position:absolute;right:16px;top:16px;background:var(--green);color:white;padding:6px 9px;border-radius:99px;font-size:11px;font-weight:800; }
.plan-label { color:var(--green);font-size:11px;font-weight:900;letter-spacing:.08em; }
.price-card h3 { font-size:24px;margin:10px 0 0; }
.price { font-size:32px;font-weight:900;letter-spacing:-.04em;margin:18px 0 2px; min-height:40px; }
.enterprise-card .price { font-size:22px; }
.price small { font-size:13px;font-weight:650;color:var(--muted); }
.price-annual-note { font-size:12px; margin-bottom:6px; }
.price-card ul { padding:0;list-style:none;display:grid;gap:11px;margin:18px 0 12px;flex:1; }
.price-card li::before { content:"✓"; color:var(--green);font-weight:900;margin-right:9px; }
.overage-note { font-size:12px; margin-bottom:16px; }
/* Responsive overflow fix (2026-10-12, E-2 follow-up): fixing the
   grid-blowout above shrinks each card at in-between widths (e.g.
   1024px), and the shared .btn rule's white-space:nowrap then clips
   "Empezar con prueba gratis" inside its own button - a regression this
   fix introduced, not pre-existing (at the old blown-out width the cards
   had room to spare). Letting the label wrap, like .price-card .btn's
   own width:100% already does, costs nothing at wider widths where it
   already fits on one line. */
.price-card .btn { width:100%; white-space:normal; text-align:center; line-height:1.2; }
.pricing-note { text-align:center;color:var(--muted);margin-top:28px;font-size:13px;max-width:720px;margin-left:auto;margin-right:auto; }

.compare { display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center; }
.compare h2 { font-size:42px;letter-spacing:-.03em;margin:10px 0 14px; }
.compare p { color:var(--muted);line-height:1.7; }
.compare-card { padding:22px; }
.compare-card div { display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line); }
.compare-card div span { color:var(--muted); }
.compare-card strong { display:block;background:var(--green-soft);color:var(--green);padding:16px;border-radius:13px;margin-top:16px; }

.faq { max-width:850px; }
details { border-bottom:1px solid var(--line);padding:18px 0; }
summary { cursor:pointer;font-weight:800;font-size:17px; }
details p { color:var(--muted);line-height:1.7; }

.cta { padding:20px 0 90px; }
.cta .card { padding:34px; display:flex;align-items:center;justify-content:space-between;background:linear-gradient(130deg,var(--green-soft),var(--surface)); }
.cta h2 { font-size:34px;max-width:720px;margin:8px 0 0; }
footer { border-top:1px solid var(--line);padding:48px 0 32px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; margin-bottom:28px; }
.footer-grid p { margin-top:10px; }
.footer-links { display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer-links strong { color:var(--text); font-size:13px; letter-spacing:.03em; margin-bottom:2px; }
.footer-links a { color:var(--muted); }
.footer-links a:hover { color:var(--green); }

@media(max-width:900px){
  .desktop-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    flex-direction:column; gap:0; padding:6px 20px 14px; z-index:19;
  }
  .desktop-nav.nav-open{display:flex}
  .desktop-nav a{padding:13px 2px; border-bottom:1px solid var(--line); color:var(--text); font-weight:700;}
  .desktop-nav a:last-child{border-bottom:0}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  /* minmax(0,1fr), not bare 1fr - a bare 1fr track still respects its
     children's min-content width, so any child with a wide unbreakable
     row (the mockup card's flex rows, badges, etc.) silently stretches
     the whole column - and with it the page - past the viewport instead
     of wrapping/shrinking. This was a real bug found by visually
     inspecting 320px, not caught by a scrollWidth check alone: .hero was
     clipping the stretched h1 text via overflow:hidden, so it never
     produced a page-level scrollbar even though real text was cut off. */
  .hero-grid,.compare,.problema-grid{grid-template-columns:minmax(0,1fr)}
  .hero{padding-top:50px}
  .hero-app{transform:none}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-grid,.pricing{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-card.featured{transform:none}
  .channel-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:650px){
  .container{width:min(100% - 24px,1180px)}
  .header-inner{height:68px}
  .logo-full{height:22px}
  /* Theme toggle drops out of the cramped mobile header row entirely (not
     one of the two actions required to stay pinned) and moves into the nav
     dropdown instead, where there's room to spare. */
  .header-actions > .theme-toggle{display:none}
  .desktop-nav .theme-toggle{display:flex; width:36px; height:36px; border-radius:9px; font-size:15px; margin:10px 2px 4px;}
  .header-actions{gap:6px}
  .header-actions .btn{padding:10px 10px; font-size:12.5px; border-radius:9px; white-space:nowrap;}
  .nav-toggle{width:38px; height:38px; font-size:15px; border-radius:9px;}
  .desktop-nav.nav-open{top:68px}
  .hero h1{font-size:36px}
  .hero-actions{flex-direction:column}
  .steps,.feature-grid,.pricing{grid-template-columns:minmax(0,1fr)}
  .mock-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mock-metrics strong{font-size:20px}
  .cta .card{display:block}
  .cta .btn{margin-top:20px;width:100%}
  .trial-banner{flex-direction:column;align-items:flex-start;text-align:left}
  .trial-banner .btn{width:100%}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media(max-width:430px){
  /* Below ~430px there isn't room for the full-height wordmark alongside
     the hamburger and both mandatory CTAs without cramming any of them -
     shrink it further rather than hide it (the logo stays the real
     wordmark everywhere, never dropped to a placeholder mark). */
  .site-header .logo-full{height:18px}
  .header-actions .btn{padding:10px 9px; font-size:12px}
}
@media(max-width:350px){
  /* Responsive overflow fix (2026-10-12, E-3): below ~360px, the two
     mandatory CTAs ("Iniciar sesion" / "Prueba gratis") plus the hamburger
     can't all fit on one nowrap line without pushing the header past the
     viewport. Neither button has an equivalent elsewhere (the nav dropdown
     only holds section links + the theme toggle), so both stay - letting
     their own label wrap to two lines, the same way long content elsewhere
     already wraps instead of forcing a nowrap overflow. */
  .header-actions{gap:4px}
  .header-actions .btn{white-space:normal; text-align:center; line-height:1.15; padding:8px 5px; min-width:0}
}