/* ===== PALETA CLARA ===== */
:root{
  --bg:#f7f9fc; --bg-alt:#f1f5fb; --card:#ffffff; --text:#111827; --muted:#64748b; --line:#e5e7eb;
  --primary:#1f3a8a; --primary-600:#162d6c; --accent:#28573a; --tint:#eef2ff;

  /* Alturas clave */
  --ticker-h:44px;
  --logo-h:100px;
  --logo-h-sm:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-600)}
a:focus-visible{outline:3px solid #dbeafe; outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

/* ===== TICKER ===== */
.ticker{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);background:#fff}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .ticker{backdrop-filter:saturate(1.1) blur(8px);
    background:linear-gradient(90deg,#ffffff 0%,#f8fafc 50%,#ffffff 100%)}
}
.ticker-inner{display:flex;align-items:center;gap:10px;min-height:var(--ticker-h);overflow:hidden}
.tick{white-space:nowrap;display:flex;gap:32px;animation:slide 22s linear infinite}
.pill{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border-radius:999px;font-weight:700;letter-spacing:.2px;
  background:#fff;border:1px solid var(--line);color:#0f172a; box-shadow:0 2px 6px rgba(0,0,0,.04)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== TOPBAR ===== */
.topbar{position:sticky;top:var(--ticker-h);z-index:50;border-bottom:1px solid var(--line);background:#fff; overflow-x:clip;}
.topbar-inner{display:flex;align-items:center;gap:18px;min-height:calc(var(--logo-h) + 24px); overflow-x:clip;}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{height:var(--logo-h);width:auto;object-fit:contain}
.brand-name{font-family:"Plus Jakarta Sans", Inter, sans-serif;font-weight:900;letter-spacing:.2px}
.nav{display:flex;gap:22px;margin-left:24px}
.nav a{font-weight:700;color:#334155}
.nav a:hover{color:var(--primary)}
.contact-links{margin-left:auto;display:flex;align-items:center;gap:14px}
.btn-mini{padding:9px 12px;border-radius:10px;font-size:14px}

/* === HAMBURGUESA base === */
.hamburger{
  display:none;  /* visible en móvil */
  width:44px; height:44px;
  padding:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  line-height:0;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.hamburger:focus-visible{outline:3px solid #dbeafe; outline-offset:2px}

/* === Variante sólida (cuadrado azul + 3 rayas blancas) === */
.hamburger--solid{
  background:#0b1665; /* azul más profundo tipo referencia */
  border:none;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.hamburger--solid:hover{filter:brightness(1.05)}
.hamburger--solid:active{filter:brightness(0.98)}

.hamburger--solid span{
  position:absolute; left:10px; right:10px;
  height:2px; background:#ffffff; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.hamburger--solid span:nth-child(1){ top:14px; }
.hamburger--solid span:nth-child(2){ top:21px; }
.hamburger--solid span:nth-child(3){ top:28px; }

/* Estado abierto -> X centrada */
.hamburger--solid[aria-expanded="true"]{ background:#162d6c; }
.hamburger--solid[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.hamburger--solid[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger--solid[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* Menú móvil (off-canvas) */
.mobile-menu{
  position:fixed; inset:0 auto 0 0; width:78%; max-width:360px; transform:translateX(-100%);
  background:#fff; border-right:1px solid var(--line); z-index:100; padding:16px;
  transition:transform .24s ease; overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu-nav{ display:flex; flex-direction:column; gap:12px; }
.mobile-menu-nav a{ padding:12px 10px; border-radius:10px; font-weight:800; color:#111827; }
.mobile-menu-nav a:hover{ background:#f8fafc; }
.mobile-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.42); z-index:90; }

/* ===== HERO ===== */
.hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 300px at 10% -20%, rgba(31,58,138,.06), transparent 60%),
    radial-gradient(800px 280px at 90% -15%, rgba(199,165,114,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 70%, #f8fafc 100%);
}
.hero-inner{
  display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:flex-start;
  min-height:640px;padding:64px 0 76px;
}
.eyebrow{font-weight:800;color:var(--primary);letter-spacing:.2px}

.title{
  font-family:"Plus Jakarta Sans", Inter, sans-serif;
  font-weight:900; line-height:1.05; margin:10px 0 10px;
  font-size:clamp(36px,5.8vw,60px);
  background:linear-gradient(180deg,#0f172a 0%, #334155 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.title span{
  color:#0f172a; -webkit-text-fill-color:#0f172a; background:none;
  background-image: linear-gradient(transparent 85%, color-mix(in srgb, var(--accent) 35%, transparent) 0);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .04em; border-radius: 4px; text-decoration:none;
}
.subtitle{font-size:18px;color:#334155;max-width:62ch;margin-top:10px}

/* Chips de confianza */
.trust-row{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 14px}
.trust-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;
  background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px rgba(0,0,0,.04);font-weight:700;color:#0f172a}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}

/* CTA + botón */
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;letter-spacing:.2px;
  border-radius:12px;padding:12px 16px;border:1px solid transparent;cursor:pointer;
  transition:background .18s ease, box-shadow .18s ease, transform .06s ease}
.btn:focus-visible{outline:3px solid #dbeafe; outline-offset:2px}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);
  box-shadow:0 6px 14px rgba(31,58,138,.16)}
.btn-primary:hover{background:var(--primary-600);
  box-shadow:0 12px 26px rgba(31,58,138,.22);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 10px rgba(31,58,138,.18)}
.btn-ghost{background:#ffffff;color:#111827;border-color:var(--line)}
.btn-ghost:hover{background:#f9fafb}
.btn-full{width:100%}

/* Card / Form */
.card{
  background: var(--card, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
}
.form-title{margin:0 0 4px}
.small{font-size:13px}
.muted{color:var(--muted)}
.field{margin:12px 0}
.form label{display:block;font-weight:700;margin-bottom:6px}
input[type="text"],input[type="email"],input[type="tel"],input[type="file"],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid #dbeafe;border-color:#dbeafe}
.help{color:var(--muted);font-size:12px;margin-top:6px}
.r{color:#b45309;font-weight:800}

/* Banda / confianza */
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .wrap{padding:18px 22px}
.band-list{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap;color:#374151;font-weight:700}
.band-list li{display:flex;align-items:center;gap:8px;background:#ffffff;border:1px solid var(--line);
  padding:10px 12px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.03)}

/* Grid & Secciones */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.section{padding:72px 0}
.section-alt{background:var(--bg-alt)}

.stepcard{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff}
.stepnum{width:34px;height:34px;border-radius:9px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;border:2px solid #fff;
  box-shadow:0 8px 18px rgba(31,58,138,.18)}

.case{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;position:relative;overflow:hidden}
.case::before{content:"";position:absolute;inset:auto -60% -60% auto;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(199,165,114,.25), transparent 60%)}
.beforeafter{font-weight:800;font-size:18px}
.case-note{font-weight:700;color:#1f2937;margin:0 0 6px}

.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
summary{cursor:pointer;font-weight:800;color:#1f2937}

/* Listas */
.list{margin:0;padding-left:0;list-style:none;display:grid;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;transform:translateY(1px);margin-right:8px}

/* Sticky CTA */
.sticky-cta{position:sticky;bottom:0;z-index:25;background:rgba(255,255,255,.95);
  border-top:1px solid var(--line);padding:14px 16px;display:flex;justify-content:center}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .sticky-cta{backdrop-filter:saturate(1.1) blur(8px)}
}

/* Footer */
footer .foot{padding:34px 22px;color:#374151}

/* Toast & Cookies */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:50;background:#111827;color:#fff;
  padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .3s}
.toast.show{opacity:1}
.cookie{position:fixed;right:16px;bottom:16px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px;z-index:40;display:none;max-width:320px;box-shadow:0 10px 20px rgba(0,0,0,.06)}
.cookie .row{display:flex;gap:8px;margin-top:10px}
.cookie .decline{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px}
.cookie .accept{border:1px solid transparent;background:var(--primary);color:#fff;border-radius:8px;padding:8px 10px}

/* FAB WhatsApp */
.wa-fab{position:fixed;right:16px;bottom:86px;z-index:26;display:inline-flex;align-items:center;padding:12px 16px;border-radius:999px;
  background:#25D366;color:#032d12;font-weight:800;border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 20px rgba(0,0,0,.12)}
.wa-fab:hover{filter:brightness(1.05)}
.wa-fab.wa-fab--icon{
  width:56px; height:56px; padding:0; border-radius:999px;
  display:flex; align-items:center; justify-content:center; color:#ffffff;
  background:#25D366;
}
.wa-fab.wa-fab--icon svg{ width:26px; height:26px; display:block; fill:currentColor; }

/* Texto solo para lectores de pantalla */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

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

/* ===== Responsive ===== */
@media (max-width:980px){
  .nav{display:none}
  .hamburger{display:inline-flex; align-items:center; justify-content:center; margin-left:6px;}
  .topbar{top:var(--ticker-h)}
  .brand .logo{height:var(--logo-h-sm)}
  .topbar-inner{
    min-height:calc(var(--logo-h-sm) + 20px);
    justify-content:space-between;
  }
  .hero-inner{grid-template-columns:1fr;min-height:unset;padding:40px 0 48px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .wa-fab{bottom:80px}
  .contact-links a.btn-mini{display:none}
  .contact-links .muted{display:none} /* oculta email para que no empuje el botón */
}

@media (max-width:480px){
  .wrap { padding-left: 20px; padding-right: 20px; }
  .hero .hero-copy { padding-left: 6px; padding-right: 6px; }
  .hero .eyebrow { font-size: 14px; }
  .hero .subtitle { font-size: 15px; line-height: 1.35; }
  .trust-row { gap:10px; margin-top:10px; padding-left:2px; padding-right:2px; }
  .trust-badge { padding:8px 10px; font-size:13px; }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .tick{animation:none}
  .reveal{transition:none}
}

/* Botón móvil touch */
.btn { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.btn-primary,
.btn-primary:visited,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; }
.btn-primary:active { transform:none !important; box-shadow:0 4px 10px rgba(31,58,138,.18); }
.btn-primary.touch-pressed { transform:translateY(0); box-shadow:0 6px 16px rgba(31,58,138,.22); }