/* ============================================================
   Previews LCC — root landing
   Extiende la identidad visual de latamconnect.com.mx
   Paleta tomada del traje de Astro: navy espacial + cyan + naranja
   ============================================================ */

:root{
  --navy-950:#05080f;
  --navy-900:#0a1120;
  --navy-800:#0f1a30;
  --navy-700:#16233d;
  --cyan:#2fd9ee;
  --cyan-soft:rgba(47,217,238,.16);
  --orange:#ff8a3d;
  --orange-soft:rgba(255,138,61,.18);
  --white:#f4f7fb;
  --muted:#9aa8bd;
  --muted-dim:#6b7690;
  --card-bg:rgba(255,255,255,.03);
  --card-border:rgba(255,255,255,.08);
  --radius:18px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 600px at 82% -8%, rgba(47,217,238,.10), transparent 60%),
    radial-gradient(900px 500px at 8% 8%, rgba(255,138,61,.08), transparent 55%),
    var(--navy-950);
  color:var(--white);
  overflow-x:hidden;
}

/* subtle starfield */
.stars{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 55%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 82%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 95% 85%, rgba(255,255,255,.3), transparent 60%);
  opacity:.6;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;position:relative;z-index:1;}

/* ---------- nav ---------- */
header.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(10px);
  background:rgba(5,8,15,.72);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.02em;font-size:18px;color:var(--white);text-decoration:none;}
.brand .dot{color:var(--orange);}
.brand small{
  font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--cyan);
  text-transform:uppercase;border-left:1px solid rgba(255,255,255,.18);
  padding-left:9px;margin-left:2px;
}
.nav-link{
  color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600;
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);
  transition:.2s;
}
.nav-link:hover{color:var(--white);border-color:rgba(47,217,238,.5);background:rgba(47,217,238,.06);}

/* ---------- hero ---------- */
.hero{
  padding:74px 0 60px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan); background:var(--cyan-soft); border:1px solid rgba(47,217,238,.3);
  padding:7px 14px;border-radius:999px;margin-bottom:20px;
}
.eyebrow .ping{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(255,138,61,.6);animation:ping 1.8s ease-out infinite;}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,138,61,.55);}70%{box-shadow:0 0 0 8px rgba(255,138,61,0);}100%{box-shadow:0 0 0 0 rgba(255,138,61,0);}}

h1{
  font-size:clamp(30px,4.2vw,46px);
  line-height:1.12; margin:0 0 18px; font-weight:800; letter-spacing:-.01em;
}
h1 .accent{color:var(--cyan);}
.hero p.lead{
  color:var(--muted); font-size:16.5px; line-height:1.65; max-width:520px; margin:0 0 28px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.btn-ghost{
  color:var(--white); text-decoration:none; font-weight:700; font-size:14px;
  padding:13px 24px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  transition:.2s;
}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}
.hero-note{font-size:12.5px;color:var(--muted-dim);}

.hero-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px;}
.hero-glow{
  position:absolute;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle, rgba(47,217,238,.22), rgba(255,138,61,.10) 55%, transparent 72%);
  filter:blur(6px);
}
.hero-art img{
  position:relative;width:min(360px,80%);height:auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));
  animation:float 5s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0px);}50%{transform:translateY(-14px);}}

.badge-chip{
  position:absolute;display:flex;align-items:center;gap:8px;
  background:rgba(10,17,32,.85);border:1px solid var(--card-border);
  padding:9px 13px;border-radius:12px;font-size:12px;font-weight:700;color:var(--white);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
  animation:float 6s ease-in-out infinite;
}
.badge-chip.one{top:6%;left:0%;animation-delay:.3s;}
.badge-chip.two{bottom:12%;right:-2%;animation-delay:1.1s;}
.badge-chip .dot-c{width:7px;height:7px;border-radius:50%;background:var(--cyan);}
.badge-chip .dot-o{width:7px;height:7px;border-radius:50%;background:var(--orange);}

/* ---------- section heading ---------- */
.section-head{max-width:640px;margin:0 0 40px;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(24px,3vw,32px);margin:0 0 12px;font-weight:800;}
.section-head p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;}

section.formats{padding:40px 0 90px;}

/* ---------- format cards ---------- */
.grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid{grid-template-columns:1fr;}}

.card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:22px 20px 24px; display:flex;flex-direction:column;gap:16px;
  transition:.25s; position:relative; overflow:hidden;
}
.card:hover{border-color:rgba(47,217,238,.4); transform:translateY(-3px); background:rgba(255,255,255,.045);}
.card .stage{
  height:168px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.card h3{margin:0;font-size:16.5px;font-weight:800;}
.card p{margin:0;color:var(--muted);font-size:13.3px;line-height:1.55;}
.card .tag{
  align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);background:var(--orange-soft);padding:4px 9px;border-radius:999px;
}

/* --- Story Ads mock: vertical phone with progress bars + crossfade copy --- */
.mock-story{width:78px;height:150px;border-radius:14px;background:linear-gradient(160deg,#122140,#0a1428);
  border:2px solid rgba(255,255,255,.14); position:relative; box-shadow:0 10px 20px rgba(0,0,0,.4);}
.mock-story .bars{position:absolute;top:7px;left:7px;right:7px;display:flex;gap:3px;}
.mock-story .bars span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden;position:relative;}
.mock-story .bars span::after{content:"";position:absolute;inset:0;background:var(--cyan);transform:scaleX(0);transform-origin:left;animation:storybar 4.5s linear infinite;}
.mock-story .bars span:nth-child(2)::after{animation-delay:1.5s;}
.mock-story .bars span:nth-child(3)::after{animation-delay:3s;}
@keyframes storybar{0%{transform:scaleX(0);}33%{transform:scaleX(1);}100%{transform:scaleX(1);}}
.mock-story .copy{
  position:absolute; inset:26px 8px 20px; display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:9.5px;font-weight:800;color:#fff;line-height:1.3;
}
.mock-story .copy span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:storyfade 4.5s ease infinite;}
.mock-story .copy span:nth-child(2){animation-delay:1.5s;}
.mock-story .copy span:nth-child(3){animation-delay:3s;}
@keyframes storyfade{0%,5%{opacity:0;}10%,28%{opacity:1;}33%,100%{opacity:0;}}
.mock-story .cta{
  position:absolute;bottom:8px;left:8px;right:8px;text-align:center;
  font-size:7.5px;font-weight:800;letter-spacing:.04em;color:#0a1428;
  background:var(--cyan);border-radius:999px;padding:4px 0;
}

/* --- Train mock: scrolling wagons --- */
.mock-train{width:100%;height:100%;position:relative;overflow:hidden;}
.mock-train .track{position:absolute;left:0;right:0;top:50%;margin-top:17px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 8px, transparent 8px 16px);}
.mock-train .cars{display:flex;gap:10px;position:absolute;left:0;top:50%;margin-top:-17px;animation:trainmove 6s linear infinite;}
.mock-train .car{
  width:46px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:#08101f;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.mock-train .car:nth-child(1){background:var(--cyan);}
.mock-train .car:nth-child(2){background:#e9edf3;}
.mock-train .car:nth-child(3){background:var(--orange);}
.mock-train .car:nth-child(4){background:var(--cyan);}
.mock-train .car:nth-child(5){background:#e9edf3;}
@keyframes trainmove{0%{transform:translateX(220px);}100%{transform:translateX(-260px);}}

/* --- Cube mock: rotating 3D cube --- */
.mock-cube{perspective:600px;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.cube{width:64px;height:64px;position:relative;transform-style:preserve-3d;animation:spin 7s linear infinite;}
.cube .face{
  position:absolute;width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#08101f;border:1px solid rgba(255,255,255,.25);
}
.cube .f1{background:var(--cyan);transform:translateZ(32px);}
.cube .f2{background:var(--orange);transform:rotateY(90deg) translateZ(32px);}
.cube .f3{background:#e9edf3;transform:rotateY(180deg) translateZ(32px);}
.cube .f4{background:var(--cyan);transform:rotateY(-90deg) translateZ(32px);}
.cube .f5{background:var(--orange);transform:rotateX(90deg) translateZ(32px);}
.cube .f6{background:#e9edf3;transform:rotateX(-90deg) translateZ(32px);}
@keyframes spin{
  0%{transform:rotateX(-18deg) rotateY(0deg);}
  100%{transform:rotateX(-18deg) rotateY(360deg);}
}

/* --- CTV mock: television with play + live badge --- */
.mock-ctv{display:flex;flex-direction:column;align-items:center;gap:6px;}
.tv{
  width:132px;height:84px;border-radius:8px;background:linear-gradient(160deg,#122140,#0a1428);
  border:2px solid rgba(255,255,255,.14);position:relative;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 20px rgba(0,0,0,.4);
}
.tv .live{
  position:absolute;top:6px;left:7px;display:flex;align-items:center;gap:4px;
  font-size:7px;font-weight:800;letter-spacing:.05em;color:#ff5d5d;
}
.tv .live i{width:5px;height:5px;border-radius:50%;background:#ff5d5d;animation:blink 1.4s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.tv .play{
  width:30px;height:30px;border-radius:50%;background:rgba(47,217,238,.18);border:1.5px solid var(--cyan);
  display:flex;align-items:center;justify-content:center;animation:pulse 2s ease-in-out infinite;
}
.tv .play::after{content:"";border-left:9px solid var(--cyan);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,217,238,.35);}50%{box-shadow:0 0 0 8px rgba(47,217,238,0);}}
.tv-stand{width:36px;height:7px;background:rgba(255,255,255,.14);border-radius:0 0 4px 4px;}
.tv-base{width:64px;height:4px;background:rgba(255,255,255,.08);border-radius:3px;}

/* ---------- footer ---------- */
footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:30px 0 40px;
}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
footer p{margin:0;color:var(--muted-dim);font-size:12.5px;}
footer a{color:var(--muted);text-decoration:none;font-weight:700;}
footer a:hover{color:var(--cyan);}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:44px;}
  .hero-art{order:-1;min-height:280px;}
  .badge-chip{display:none;}
}