/* ═══════════════════════════════════════════════════════════════
   CSS específico de Landing Pages (landing-page.html)
   Se carga después de css/style.css.
   ═══════════════════════════════════════════════════════════════ */

/* Hero landing (variante split: copy + mockup) */
.lp-hero { padding-bottom: 3.5rem; }
.lp-hero .hl-price { color: var(--ink); }
.hero-corp-split { position: relative; z-index: 1; }
.hero-corp-title--left, .hero-corp-sub--left { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
.hero-corp-actions--left { justify-content: flex-start; }
.lp-hero .gads-hero-price { text-align: left; margin-left: 0; }

/* Hero: navegador con una mini-landing animada (rubros rotativos) */
.lp-demo { position: relative; }
.lp-mock {
  background: #0f1724;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: .9rem;
  box-shadow: 0 28px 60px rgba(11,18,32,.28);
}
.lp-mock-bar { display:flex; align-items:center; gap:.4rem; padding:.2rem .3rem .7rem; }
.lp-mock-bar > i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.lp-mock-url { margin-left:.6rem; flex:1; display:flex; align-items:center; gap:.4rem; background:#1c2740; color:#9aa6bd; font-size:.7rem; padding:.25rem .7rem; border-radius:8px; }
.lp-mock-url .bi { font-size:.6rem; color:#6f7d96; }

.lp-screen {
  --site-accent: #0E9F8E;
  --site-soft: color-mix(in srgb, var(--site-accent) 12%, #fff);
  --site-deep: color-mix(in srgb, var(--site-accent) 72%, #000);
  position: relative; height: 420px; overflow: hidden;
  background: #fff; border-radius: 10px; color: #111827;
  container-type: inline-size;
}
.lp-site-nav {
  position: absolute; inset: 0 0 auto 0; z-index: 2; height: 40px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  background: rgba(255,255,255,.95); border-bottom: 1px solid #eef0f4;
}
.lp-site-logo { display:flex; align-items:center; gap:6px; font-weight:800; font-size:.74rem; letter-spacing:-.01em; }
.lp-site-logo .bi { width:20px; height:20px; border-radius:6px; background:var(--site-accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.66rem; }
.lp-site-call { display:inline-flex; align-items:center; gap:5px; font-size:.62rem; font-weight:700; color:var(--site-deep); border:1px solid color-mix(in srgb, var(--site-accent) 40%, #fff); border-radius:999px; padding:4px 10px; }
.lp-site-viewport { position: absolute; inset: 40px 0 0 0; overflow: hidden; }
.lp-site { position: relative; transition: transform 1.15s cubic-bezier(.65,0,.35,1); }
.lp-screen.is-instant .lp-site { transition: none; }
.lp-site-nav, .lp-site-viewport, .lp-site-wa { transition: opacity .35s ease; }
.lp-screen.is-fading .lp-site-nav,
.lp-screen.is-fading .lp-site-viewport,
.lp-screen.is-fading .lp-site-wa { opacity: 0; }

/* mini-sitio: hero */
.lp-s-hero { display:grid; gap:14px; padding:18px 16px 20px; background:linear-gradient(180deg, var(--site-soft), #fff); }
.lp-s-eyebrow { display:inline-block; font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--site-deep); background:#fff; border:1px solid color-mix(in srgb, var(--site-accent) 30%, #fff); border-radius:999px; padding:3px 8px; margin-bottom:8px; }
.lp-s-title { font-size:1.18rem; font-weight:800; line-height:1.12; letter-spacing:-.02em; margin:0 0 6px; }
.lp-s-sub { font-size:.66rem; line-height:1.45; color:#5c6675; margin:0 0 12px; }
.lp-s-ctas { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.lp-s-btn { display:inline-flex; align-items:center; gap:5px; font-size:.64rem; font-weight:700; border-radius:8px; padding:7px 11px; white-space:nowrap; }
.lp-s-btn--wa { background:#1DA851; color:#fff; box-shadow:0 6px 14px rgba(29,168,81,.28); }
.lp-s-btn--call { background:#fff; border:1px solid #dfe3ea; }
.lp-s-stars { font-size:.6rem; color:#F2B400; letter-spacing:1px; }
.lp-s-stars small { color:#5c6675; letter-spacing:0; margin-left:3px; font-size:.56rem; }
.lp-s-visual { position:relative; aspect-ratio:2.4/1; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.4rem; background:linear-gradient(135deg, var(--site-accent), var(--site-deep)); }
.lp-s-visual::before { content:""; position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.12); top:-30%; right:-18%; }
.lp-s-visual-chip { position:absolute; left:8px; bottom:8px; display:flex; align-items:center; gap:4px; background:#fff; color:#111827; font-size:.56rem; font-weight:700; border-radius:7px; padding:4px 7px; }
.lp-s-visual-chip .bi { color:var(--site-accent); font-size:.62rem; }
@container (min-width: 440px) {
  .lp-s-hero { grid-template-columns: 1.4fr 1fr; align-items:center; padding:24px 20px 26px; }
  .lp-s-title { font-size:1.3rem; }
  .lp-s-visual { aspect-ratio: 1; font-size:3rem; }
}

/* mini-sitio: beneficios + testimonio */
.lp-s-benefits { padding:18px 16px; }
.lp-s-h { font-size:.86rem; font-weight:800; letter-spacing:-.01em; margin:0 0 10px; }
.lp-s-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.lp-s-card { border:1px solid #eceff3; border-radius:10px; padding:10px 8px; font-size:.6rem; font-weight:600; line-height:1.3; color:#1f2937; }
.lp-s-card .bi { display:flex; width:22px; height:22px; border-radius:7px; align-items:center; justify-content:center; margin-bottom:6px; font-size:.72rem; background:var(--site-soft); color:var(--site-deep); }
.lp-s-quote { display:flex; align-items:center; gap:10px; background:#f6f7f9; border-radius:10px; padding:10px 12px; }
.lp-s-avatar { width:28px; height:28px; border-radius:50%; flex-shrink:0; background:color-mix(in srgb, var(--site-accent) 35%, #fff); }
.lp-s-quote p { margin:0; font-size:.6rem; line-height:1.4; font-style:italic; color:#374151; }

/* mini-sitio: formulario de contacto */
.lp-s-form { margin:2px 16px 18px; padding:14px; border:1px solid #e6e9ef; border-radius:12px; box-shadow:0 10px 24px rgba(17,24,39,.08); }
.lp-s-fields { display:grid; gap:8px; margin-bottom:10px; }
.lp-s-field { display:flex; flex-direction:column; gap:3px; }
.lp-s-label { font-size:.56rem; font-weight:700; color:#5c6675; }
.lp-s-input { display:flex; align-items:center; height:28px; padding:0 9px; border:1px solid #dfe3ea; border-radius:7px; background:#fff; font-size:.66rem; transition:border-color .2s ease, box-shadow .2s ease; }
.lp-s-input.is-active { border-color:var(--site-accent); box-shadow:0 0 0 3px var(--site-soft); }
.lp-s-input.is-active::after { content:""; width:1px; height:13px; margin-left:1px; background:#111827; animation:lpCaret 1s steps(1) infinite; }
.lp-s-submit { display:flex; align-items:center; justify-content:center; gap:5px; height:32px; border-radius:8px; background:var(--site-accent); color:#fff; font-size:.68rem; font-weight:700; transition:transform .15s ease, background-color .25s ease; }
.lp-s-submit.is-pressed { transform:scale(.96); }
.lp-s-submit.is-sent { background:#16A34A; }
.lp-s-submit-ok, .lp-s-submit.is-sent .lp-s-submit-txt { display:none; }
.lp-s-submit.is-sent .lp-s-submit-ok { display:inline-flex; align-items:center; gap:4px; }
.lp-s-legal { display:flex; align-items:center; justify-content:center; gap:4px; margin:7px 0 0; font-size:.54rem; color:#7a8494; }
.lp-s-legal .bi { color:#1DA851; }
@container (min-width: 440px) { .lp-s-fields { grid-template-columns:1fr 1fr; } }
.lp-s-foot { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#111827; color:rgba(255,255,255,.6); font-size:.56rem; }
.lp-s-foot span:last-child { display:flex; gap:8px; font-size:.7rem; }

/* capas sobre el mini-sitio: WhatsApp flotante, cursor, notificación */
.lp-site-wa { position:absolute; right:12px; bottom:12px; z-index:3; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#25D366; color:#fff; font-size:1rem; box-shadow:0 8px 18px rgba(37,211,102,.35); }
.lp-site-wa::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:lpPulse 2.2s ease-out infinite; }
.lp-cursor { position:absolute; left:0; top:0; z-index:5; width:18px; height:22px; opacity:0; pointer-events:none; transition:transform .85s cubic-bezier(.45,0,.25,1), opacity .25s ease; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.lp-cursor.is-visible { opacity:1; }
.lp-cursor svg { display:block; transform-origin:2px 2px; transition:transform .12s ease; }
.lp-cursor.is-click svg { transform:scale(.8); }
.lp-cursor::before { content:""; position:absolute; left:-9px; top:-9px; width:22px; height:22px; border-radius:50%; background:rgba(17,24,39,.18); opacity:0; transform:scale(.3); }
.lp-cursor.is-click::before { animation:lpRipple .45s ease-out; }
.lp-toast { position:absolute; top:50px; right:12px; z-index:4; display:flex; align-items:center; gap:8px; padding:8px 12px 8px 8px; background:#fff; border:1px solid #e6e9ef; border-radius:12px; box-shadow:0 14px 30px rgba(17,24,39,.18); opacity:0; transform:translateY(-8px) scale(.97); transition:opacity .3s ease, transform .4s cubic-bezier(.2,.9,.3,1.2); }
.lp-toast.is-visible { opacity:1; transform:none; }
.lp-toast-icon { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:#16A34A; color:#fff; font-size:.75rem; }
.lp-toast b { display:block; font-size:.68rem; color:#111827; }
.lp-toast small { font-size:.58rem; color:#6b7280; }

/* burbuja de resultado, encima del navegador */
.lp-badge-float {
  position:absolute; left:-30px; bottom:-28px; z-index:3;
  display:flex; align-items:center; gap:.8rem;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:.85rem 1.2rem .85rem .85rem;
  box-shadow:0 20px 44px rgba(11,18,32,.2);
  animation: lpBob 5s ease-in-out infinite;
}
.lp-badge-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; border-radius:12px; background:rgba(22,163,74,.12); color:#16A34A; font-size:1.2rem; }
.lp-badge-txt { font-size:.95rem; font-weight:500; line-height:1.15; color:var(--ink); }
.lp-badge-txt b { font-family:var(--font-display); font-size:1.75rem; font-weight:600; letter-spacing:-.01em; }
.lp-badge-txt small { display:block; margin-top:.2rem; font-size:.78rem; color:var(--muted); }

@keyframes lpCaret { 50% { opacity:0; } }
@keyframes lpPulse { from { transform:scale(1); opacity:.7; } to { transform:scale(1.7); opacity:0; } }
@keyframes lpRipple { from { opacity:1; transform:scale(.3); } to { opacity:0; transform:scale(1.6); } }
@keyframes lpBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@media (max-width: 991px) { .lp-badge-float { left:12px; } }
@media (max-width: 575px) {
  .lp-mock { padding:.6rem; border-radius:14px; }
  .lp-screen { height:360px; }
  .lp-badge-float { left:8px; bottom:-30px; padding:.65rem .95rem .65rem .65rem; }
  .lp-badge-txt b { font-size:1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-badge-float, .lp-site-wa::after { animation:none; }
}

/* Diagrama A/B Testing */
.ab-section { padding: 4.5rem 0; background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab-section .text-muted { color: var(--muted) !important; }
.ab-diagram { max-width: 920px; margin: 2.5rem auto 0; }
.ab-card {
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:1.1rem 1.2rem; text-align:left; box-shadow: var(--shadow-sm);
}
.ab-base {
  max-width: 360px; margin:0 auto; text-align:center;
  background:#fff; border:1px solid rgba(242,180,0,.4);
}
.ab-eyebrow { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-dark, #B8860B); font-weight:800; margin-bottom:.25rem; }
.ab-title-sm { font-weight:800; font-size:1.02rem; margin:0; color: var(--ink); }
.ab-card p { margin:.2rem 0 0; font-size:.84rem; color:var(--muted); }
.ab-stem { width:2px; height:34px; background:linear-gradient(rgba(242,180,0,.7),rgba(242,180,0,.15)); margin:.4rem auto; }
.ab-split { display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap; }
.ab-variant { flex:1 1 240px; max-width:340px; position:relative; }
.ab-variant .ab-tag { display:inline-block; font-size:.7rem; font-weight:800; padding:.2rem .6rem; border-radius:20px; margin-bottom:.5rem; }
.ab-variant.a .ab-tag { background:rgba(59,130,246,.12); color:#2563EB; }
.ab-variant.b .ab-tag { background:rgba(242,180,0,.18); color:#8A6200; }
.ab-obj { font-size:.78rem; color:var(--ink-3); display:flex; align-items:center; gap:.4rem; margin-top:.55rem; }
.ab-obj i { color:var(--muted); }
.ab-metrics { display:flex; gap:.6rem; margin-top:.7rem; }
.ab-metric { flex:1; background:var(--paper); border: 1px solid var(--line); border-radius:10px; padding:.5rem; text-align:center; }
.ab-metric .v { font-weight:800; font-size:1.05rem; color: var(--ink); }
.ab-metric .l { font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.ab-variant.win { border-color: #16A34A; box-shadow: 0 0 0 1px #16A34A, 0 14px 36px rgba(22,163,74,.16); }
.ab-win-flag { position:absolute; top:-12px; right:14px; background:#16A34A; color:#fff; font-size:.68rem; font-weight:800; padding:.2rem .6rem; border-radius:20px; box-shadow:0 6px 16px rgba(22,163,74,.3); }
.ab-metric.up .v { color:#15803D; }
.ab-merge { width:2px; height:30px; background:var(--line); margin:.6rem auto .4rem; }
.ab-result {
  max-width:640px; margin:0 auto; text-align:center;
  background: linear-gradient(135deg, rgba(22,163,74,.1), rgba(242,180,0,.12));
  border:1px solid rgba(22,163,74,.35); border-radius:16px; padding:1.2rem 1.4rem;
}
.ab-result h4 { font-weight:800; margin:0 0 .3rem; color: var(--ink); }
.ab-result p { margin:0; color:var(--ink-3); font-size:.92rem; }
.ab-kpis { display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-top:.9rem; }
.ab-kpi { text-align:center; }
.ab-kpi .n { font-size:1.5rem; font-weight:900; color:var(--ink); line-height:1; }
.ab-kpi .t { font-size:.72rem; color:var(--muted); }

/* Aviso pauta no incluida */
.lp-notice {
  background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:1.3rem 1.5rem; box-shadow:var(--shadow-sm);
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
}
.lp-notice .ni {
  font-size:1.1rem; color:var(--ink-2); background: var(--brand); flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.lp-notice .nt { flex:1; min-width:240px; }
.lp-notice .nt b { color: var(--ink); }