/* ───────────────────────────────────────────────────────────
   MotoCom · legal-pro.css
   Realce visual para páginas legales internas: hero con
   mockup de teléfono, orbes ámbar animados, scroll-reveal,
   tarjetas premium y CTA con screenshot full-bleed.
   Carga DESPUÉS de legal.css.
   ─────────────────────────────────────────────────────────── */

/* Oculta H1 viejo que vivía dentro de .legal-wrap > .container
   (lo replicamos en el hero). El JS añade .lp-mounted al body
   sólo cuando la mejora se montó con éxito. */
body.lp-mounted .legal-wrap > .container > h1:first-of-type,
body.lp-mounted .legal-wrap > .container > h1:first-of-type + p.subtitle,
body.lp-mounted .legal-wrap > .container > h1:first-of-type + .subtitle{
  display:none !important;
}

/* ── HERO ─────────────────────────────────────────────────── */
.lp-hero{
  position:relative;
  background:var(--soft, #f8f6f0);
  overflow:hidden;
  padding:64px 24px 72px;
  border-bottom:1px solid var(--line, #e5e2da);
  isolation:isolate;
}
.lp-hero::before,
.lp-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  z-index:0;
  filter:blur(8px);
  animation:lp-pulse 9s ease-in-out infinite;
  will-change:transform,opacity;
}
.lp-hero::before{
  top:-30%; right:-8%;
  width:560px; height:560px;
  background:radial-gradient(circle,rgba(245,158,11,.28) 0%,rgba(245,158,11,.10) 45%,transparent 70%);
}
.lp-hero::after{
  bottom:-40%; left:-12%;
  width:460px; height:460px;
  background:radial-gradient(circle,rgba(251,146,60,.22) 0%,rgba(251,146,60,.08) 45%,transparent 70%);
  animation-delay:-4.5s;
}
@keyframes lp-pulse{
  0%,100%{transform:scale(1) translate(0,0);opacity:.85}
  50%{transform:scale(1.08) translate(2%,-2%);opacity:1}
}

.lp-hero-w{
  position:relative;z-index:2;
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;
  align-items:center;
}
@media (max-width:900px){
  .lp-hero{padding:48px 18px 56px}
  .lp-hero-w{grid-template-columns:1fr;gap:32px;text-align:center}
}

/* Texto del hero */
.lp-hero-text{animation:lp-rise .7s ease-out .05s both}
.lp-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:7px 16px;
  font-size:.74rem;font-weight:800;color:var(--yd, #d97706);
  letter-spacing:.07em;text-transform:uppercase;
  margin-bottom:22px;
  box-shadow:0 2px 14px rgba(0,0,0,.06);
}
.lp-pill i{color:var(--y, #f59e0b)}
.lp-hero h1.lp-h{
  font-size:clamp(2rem,4.6vw,3.2rem);font-weight:900;
  letter-spacing:-.028em;color:var(--ink, #111);line-height:1.06;
  margin-bottom:18px;
}
.lp-hero h1.lp-h em{font-style:italic;color:var(--yd);font-weight:900}
.lp-hero p.lp-lead{
  font-size:clamp(.98rem,1.3vw,1.1rem);
  color:#444;line-height:1.62;max-width:560px;
  margin-bottom:24px;
}
@media (max-width:900px){.lp-hero p.lp-lead{margin-left:auto;margin-right:auto}}
.lp-meta{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:8px;
}
@media (max-width:900px){.lp-meta{justify-content:center}}
.lp-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border:1.5px solid var(--line);
  border-radius:999px;background:#fff;
  font-size:.72rem;font-weight:800;color:#444;
  letter-spacing:.06em;
}
.lp-tag i{color:var(--y);font-size:.78rem}

/* Mockup de teléfono */
.lp-phone{
  position:relative;justify-self:center;
  width:min(260px,62vw);aspect-ratio:9/19.5;
  border-radius:38px;
  background:#0b0f17;
  padding:11px;
  box-shadow:
    0 28px 70px -20px rgba(17,17,17,.45),
    0 12px 28px -12px rgba(245,158,11,.22),
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(0,0,0,.4);
  animation:lp-float 6s ease-in-out infinite, lp-rise .9s ease-out .15s both;
  transform-origin:center;
}
.lp-phone::before{ /* notch */
  content:"";position:absolute;top:13px;left:50%;
  transform:translateX(-50%);
  width:38%;height:24px;border-radius:14px;background:#000;
  z-index:3;
}
.lp-phone img{
  width:100%;height:100%;object-fit:cover;object-position:center center;
  border-radius:28px;display:block;
  background:#0b0f17;
}
.lp-phone-glow{
  position:absolute;inset:-30px;border-radius:60px;z-index:-1;
  background:radial-gradient(circle at 50% 50%,rgba(245,158,11,.22),transparent 60%);
  filter:blur(20px);
  animation:lp-pulse 7s ease-in-out infinite;
}
@keyframes lp-float{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-12px) rotate(.5deg)}
}
@keyframes lp-rise{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── TARJETAS / SECCIONES (scroll-reveal) ───────────────── */
body.lp-mounted .legal-wrap{padding-top:42px}
body.lp-mounted .legal-wrap > .container > h2{
  position:relative;
  font-size:clamp(1.25rem,2.2vw,1.55rem);
  font-weight:900;letter-spacing:-.018em;color:var(--ink);
  margin:34px 0 14px;padding-left:18px;line-height:1.25;
}
body.lp-mounted .legal-wrap > .container > h2::before{
  content:"";position:absolute;left:0;top:.32em;
  width:5px;height:1em;border-radius:3px;
  background:linear-gradient(180deg,var(--y),var(--yd));
}

/* Reveal */
.lp-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease-out,transform .65s ease-out}
.lp-reveal.lp-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .lp-reveal{opacity:1;transform:none;transition:none}
  .lp-hero::before,.lp-hero::after,.lp-phone,.lp-phone-glow{animation:none}
}

/* ── BLOQUES "spotlight" con screenshot opaco de fondo ── */
.lp-spot{
  position:relative;overflow:hidden;border-radius:18px;
  margin:32px 0;padding:42px 32px;color:#fff;
  isolation:isolate;
  background:#0b0f17;
  box-shadow:0 18px 50px -20px rgba(17,17,17,.4);
}
.lp-spot::before{ /* screenshot opaco */
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--lp-bg);
  background-size:cover;background-position:center;
  opacity:.32;filter:saturate(.9) blur(1px);
  transform:scale(1.05);
  transition:transform .8s ease-out;
}
.lp-spot:hover::before{transform:scale(1.10)}
.lp-spot::after{ /* gradiente de marca */
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(11,15,23,.92) 0%,rgba(11,15,23,.65) 45%,rgba(245,158,11,.35) 100%);
}
.lp-spot > *{position:relative;z-index:2}
.lp-spot h3{
  font-size:1.45rem;font-weight:900;letter-spacing:-.02em;
  color:#fff;margin-bottom:10px;
}
.lp-spot h3 em{color:var(--y);font-style:italic}
.lp-spot p{color:rgba(255,255,255,.86);max-width:620px;line-height:1.6;font-size:.98rem}
.lp-spot .lp-spot-cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;padding:11px 22px;
  background:var(--y);color:var(--ink);font-weight:800;
  border-radius:10px;font-size:.9rem;
  box-shadow:0 6px 22px rgba(245,158,11,.35);
  transition:transform .15s,background .15s;
}
.lp-spot .lp-spot-cta:hover{background:#fff;color:var(--ink);transform:translateY(-2px);text-decoration:none}

/* ── Footer-CTA full-bleed ─────────────────────────────── */
.lp-cta{
  position:relative;overflow:hidden;
  margin:40px 0 0;padding:64px 28px;
  color:#fff;text-align:center;isolation:isolate;
  background:#0b0f17;
}
.lp-cta::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--lp-bg);
  background-size:cover;background-position:center;
  opacity:.28;filter:saturate(.85);
  transform:scale(1.06);
  animation:lp-bg-pan 18s ease-in-out infinite alternate;
}
.lp-cta::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at 30% 30%,rgba(245,158,11,.22),transparent 55%),linear-gradient(180deg,rgba(11,15,23,.78),rgba(11,15,23,.92));
}
.lp-cta > *{position:relative;z-index:2}
.lp-cta h3{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:900;letter-spacing:-.02em;margin-bottom:10px}
.lp-cta h3 em{color:var(--y);font-style:italic}
.lp-cta p{color:rgba(255,255,255,.78);max-width:560px;margin:0 auto 22px;line-height:1.6}
.lp-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lp-cta-btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;
  font-weight:800;font-size:.92rem;transition:transform .15s,background .15s,color .15s;
}
.lp-cta-btn.is-primary{background:var(--y);color:var(--ink);box-shadow:0 8px 26px rgba(245,158,11,.4)}
.lp-cta-btn.is-primary:hover{background:#fff;transform:translateY(-2px);text-decoration:none;color:var(--ink)}
.lp-cta-btn.is-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.18)}
.lp-cta-btn.is-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px);text-decoration:none;color:#fff}
@keyframes lp-bg-pan{
  from{transform:scale(1.06) translate(0,0)}
  to{transform:scale(1.12) translate(-2%,-1%)}
}

/* ── Pequeños retoques sobre prose existente ──────────── */
body.lp-mounted .legal-wrap > .container > .footer{
  margin-top:28px;padding:18px 22px;
  background:var(--soft);border:1px solid var(--line);border-radius:12px;
  text-align:center;color:var(--muted);font-size:.82rem;
}
body.lp-mounted .legal-wrap > .container > .footer p{margin:0;color:var(--muted)}

@media (max-width:600px){
  .lp-hero{padding:40px 16px 48px}
  .lp-spot{padding:30px 22px;margin:24px 0}
  .lp-cta{padding:48px 20px}
  .lp-phone{width:min(240px,68vw)}
}