/* ========== Base ========== */
/* 🔶 Cambié la paleta: azul → dorados */
:root{
  --bg: #0b1220;
  --surface: #0f172a;
  --text: #e6eaf5;
  --muted: #9aa3b2;
  --line: rgba(255,255,255,.08);
  --card: rgba(255,255,255,.06);
  --glass: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  /* Dorados */
  --brand: #d4af37;       /* gold */
  --brand-2: #f0c419;     /* goldenrod */
  --brand-3: #ffcc4d;     /* amber */
  --grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-3) 100%);

  /* Tintes dorados semitransparentes para fondos/bordes */
  --gold-weak: rgba(212,175,55,.12);
  --gold-mid:  rgba(212,175,55,.25);
  --gold-soft1: rgba(212,175,55,.10);
  --gold-soft2: rgba(255,204,77,.10);

  --radius: 18px;
  --radius-sm: 12px;
  --container: 1200px;
}

* { box-sizing: border-box }
html, body { height: 100% }
body{
  margin:0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  /* Glow de fondo ajustado a dorados */
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,215,0,.12), transparent 60%),
    radial-gradient(1000px 800px at 90% 10%, rgba(255,196,0,.10), transparent 60%),
    var(--bg);
  line-height: 1.6;
}

/* Containers & helpers */
.container{ width:100%; max-width: var(--container); margin-inline:auto; padding-inline: 24px }
.section{ padding: 64px 0 }
.section-head{ margin-bottom: 20px }
.title{ font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 6px }
.muted{ color: var(--muted); margin:0 }
.hidden{ position:absolute; width:0; height:0; overflow:hidden; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .8rem 1.1rem; border-radius: 999px; border:1px solid var(--line);
  color: var(--text); text-decoration: none; font-weight: 700; letter-spacing:.2px;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: none;
}
.btn:hover{ transform: translateY(-1px) }
.btn-primary{
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(212,175,55,.28); /* dorado */
}
.btn-ghost{ background: rgba(255,255,255,.06) }

/* Header */
.header{
  position: sticky; top:0; z-index:100;
  backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(11,18,32,.8), transparent);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; height:72px;
}
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none }
.brand-mark{
  display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background: var(--grad); color:white; font-weight:800;
}
.brand-name{ font-weight:800; letter-spacing:.3px }

.menu{ display:flex; align-items:center; gap: 20px }
.menu-link{
  color:var(--text); opacity:.9; text-decoration:none; font-weight:600; padding:.4rem .2rem;
}
.menu-link.active{ color:#fff }
.burger{ display:none; background:none; border:0; cursor:pointer }
.burger span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:.2s }

/* Mobile nav */
@media (max-width: 900px){
  .burger{ display:block }
  .menu{
    position: fixed; inset: 72px 0 auto 0; background:#0b1220f2; backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
    flex-direction: column; gap: 16px; padding: 16px 24px;
    transform: translateY(-120%); transition: transform .25s ease;
  }
  .menu.open{ transform: translateY(0%) }
}

/* Hero */
.hero{ position:relative; padding: 70px 0 36px; overflow: clip }
.hero-stripe{
  position:absolute; inset:0 0 auto 0; height: 220px; background: var(--grad); opacity:.18; filter:saturate(120%);
}
.display{ font-size: clamp(1.9rem, 6vw, 3rem); margin:.2rem 0 .6rem; line-height:1.15 }
.grad{ background: var(--grad); -webkit-background-clip: text; background-clip:text; color:transparent }
.lead{ color: var(--muted); max-width: 760px; margin:0 }
.hero-cta{ display:flex; gap:10px; margin-top: 18px }

.badges{ display:flex; gap:8px; flex-wrap:wrap }
.badge{
  border:1px solid var(--gold-mid);
  background: var(--gold-weak);
  color:#ffefc1; padding:.35rem .6rem; border-radius:999px; font-weight:700; font-size:.85rem;
}

/* Ticker */
.ticker{ border-block: 1px solid var(--line); background: rgba(255,255,255,.03) }
.marquee{ overflow:hidden; white-space:nowrap }
.track{ display:inline-block; padding: 10px 0; animation: scroll 24s linear infinite }
.track span{
  display:inline-flex; align-items:center; gap:.5rem; margin-right: 28px; opacity:.95
}
.track span::before{
  content:"✱"; display:inline-block; opacity:.8; background: var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes scroll { from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

/* Cards grid */
.cards{
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 1200px){ .cards{ grid-template-columns: repeat(4, 1fr) } }
@media (max-width: 900px){ .cards{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px){ .cards{ grid-template-columns: 1fr } }

.card-glass{
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-glass:hover{ transform: translateY(-3px); box-shadow: 0 16px 50px rgba(0,0,0,.45) }
.card-glass h3{ margin: 12px 0 6px; font-size: 1.05rem }
.card-glass p{ margin: 0 0 10px; color: var(--text); opacity:.92 }
.link{ color:#fff2c2; text-decoration:none; font-weight:700 }
.link i{ margin-left:.3rem; transition: transform .2s ease }
.link:hover i{ transform: translateX(3px) }

/* Icon holder ahora en dorado */
.icon-circle{
  width: 52px; height:52px; border-radius: 14px; display:grid; place-items:center;
  background: var(--gold-weak);
  border: 1px solid var(--gold-mid);
}

/* Timeline */
.timeline{ position:relative; margin-top: 18px }
.timeline .line{
  position:absolute; left: calc(50% - 1px); top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, var(--gold-soft1), var(--gold-soft2));
}
.step{
  position:relative; display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin: 0 0 22px;
}
.step .num{
  grid-column: 6 / span 2;
  justify-self: center; align-self:center;
  width: 44px; height:44px; border-radius: 12px; display:grid; place-items:center; font-weight:800;
  background:#0f172a; border:1px solid var(--line); box-shadow: var(--shadow);
}
.step .bubble{
  grid-column: 7 / span 5;
  background: var(--glass); border:1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.step:nth-child(even) .bubble{ grid-column: 1 / span 5 }
.step h4{ margin:.1rem 0 .35rem; font-size:1.05rem }
.step p{ margin:0; color: var(--text); opacity:.92 }

@media (max-width: 900px){
  .timeline .line{ left: 22px }
  .step{ grid-template-columns: 1fr; padding-left: 62px }
  .step .num{ position:absolute; left: 0 }
  .step .bubble{ grid-column: auto }
}

/* Stats */
.card-soft{
  /* Antes era azul/violeta; ahora uso dos tintes dorados suaves */
  background: linear-gradient(135deg, var(--gold-soft1), var(--gold-soft2));
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px }
@media (max-width: 700px){ .stats{ grid-template-columns: 1fr } }
.stat h3{ margin:0; font-size: 1.6rem; background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.stat p{ margin:.25rem 0 0; color: var(--muted) }

/* Pricing */
.pricing{ grid-template-columns: 2fr 1.1fr; gap:18px }
.grid{ display:grid }
@media (max-width: 900px){ .pricing{ grid-template-columns: 1fr } }
.pills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 10px }
.pill{
  border:1px solid var(--gold-mid);
  background: var(--gold-weak);
  color:#ffefc1; padding:.35rem .6rem; border-radius:999px; font-weight:700; font-size:.85rem;
}
.price-row{ display:flex; align-items:end; gap:10px; margin: 6px 0 6px }
.price{ font-size: 2rem; font-weight: 800 }
.cols{ columns: 2; gap: 18px; padding-left: 16px }
.cols li{ margin: .25rem 0 }
.badge-row{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 14px }

/* FAQ */
.faq{ display:grid; gap: 10px }
.faq-item{
  background: var(--glass); border:1px solid var(--line); border-radius: var(--radius); padding: 0 18px;
  box-shadow: var(--shadow);
}
.faq-item summary{
  list-style: none; cursor:pointer; padding: 16px 0; font-weight: 700; position: relative;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{
  content:"›"; position:absolute; right:0; top:50%; transform: translateY(-50%) rotate(90deg);
  opacity:.7; transition: transform .2s;
}
.faq-item[open] summary::after{ transform: translateY(-50%) rotate(-90deg) }
.faq-body{ color: var(--muted); padding: 0 0 16px }

/* Footer */
.footer{
  border-top:1px solid var(--line); padding: 18px 0; background: rgba(255,255,255,.03);
}
.footer-row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.footer-row p{ margin:0; color: var(--muted) }

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

/* ========== Icon classes (using <symbol>) ========== */
i[class^="i-"], i[class*=" i-"]{
  display:inline-block; width: 18px; height:18px;
  background: var(--grad); -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; vertical-align: -3px
}

.i-check{ -webkit-mask: url(#ico-check); mask: url(#ico-check) }
.i-bolt{ -webkit-mask: url(#ico-bolt); mask: url(#ico-bolt) }
.i-arrow{ -webkit-mask: url(#ico-arrow); mask: url(#ico-arrow) }
.i-id{ -webkit-mask: url(#ico-id); mask: url(#ico-id) }
.i-search{ -webkit-mask: url(#ico-search); mask: url(#ico-search) }
.i-key{ -webkit-mask: url(#ico-key); mask: url(#ico-key) }
.i-image{ -webkit-mask: url(#ico-image); mask: url(#ico-image) }
.i-ads{ -webkit-mask: url(#ico-ads); mask: url(#ico-ads) }
.i-sheet{ -webkit-mask: url(#ico-sheet); mask: url(#ico-sheet) }
.i-factory{ -webkit-mask: url(#ico-factory); mask: url(#ico-factory) }
.i-truck{ -webkit-mask: url(#ico-truck); mask: url(#ico-truck) }
.i-shield{ -webkit-mask: url(#ico-shield); mask: url(#ico-shield) }
.i-heart{ -webkit-mask: url(#ico-heart); mask: url(#ico-heart) }
.i-infinite{ -webkit-mask: url(#ico-infinite); mask: url(#ico-infinite) }
.i-user-shield{ -webkit-mask: url(#ico-user-shield); mask: url(#ico-user-shield) }
.i-headset{ -webkit-mask: url(#ico-headset); mask: url(#ico-headset) }

/* Fallback */
@supports not ((mask: url(#ico-check))) {
  i[class^="i-"], i[class*=" i-"]{ background: #fff }
}

/* ===== Media (videos + imágenes) ===== */
/* Grid 12 cols: 2 videos (6+6) y 3 imágenes grandes (4+4+4) */
.media-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px,2vw,24px);
  align-items:start;
}

.media-card{
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.media-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
  border-color: var(--gold-mid);
}

/* Span por tipo */
.media-card.video{ grid-column: span 6; }
.media-card.image{ grid-column: span 4; }

/* Mantener 16:9 en videos, 3:2 en imágenes (más alto = se ve más grande) */
.media-card .ratio{
  position: relative;
  width: 100%;
  background: #0a0a0a;
}
.media-card.video .ratio{ aspect-ratio: 16 / 9; }
.media-card.image .ratio{ aspect-ratio: 3 / 2; } /* más alto que 16:9 para destacar */

.media-card video,
.media-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover; /* mantiene encuadre clean */
}

.media-card figcaption{
  padding:16px 18px 18px;
}
.media-card h4{
  margin:0 0 4px;
  font-size: clamp(16px, 1.2vw, 18px);
}
.media-card .muted{
  font-size: .95rem;
  opacity:.9;
}

/* Responsive: en tablets, imágenes pasan a 6 (2 por fila); en mobile, full width */
@media (max-width: 1100px){
  .media-card.video{ grid-column: span 12; }
  .media-card.image{ grid-column: span 6; }
}
@media (max-width: 640px){
  .media-card.image{ grid-column: span 12; }
}


/* ===== Media (videos + imágenes click → lightbox) ===== */
.media-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px,2vw,24px);
  align-items:start;
}

.media-card{
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.media-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
  border-color: var(--gold-mid);
}

.media-card.video{ grid-column: span 6; }
.media-card.image{ grid-column: span 4; }

.media-card .ratio{
  position: relative;
  width: 100%;
  background: #0a0a0a;
}
.media-card.video .ratio{ aspect-ratio: 16 / 9; }
.media-card.image .ratio{ aspect-ratio: 3 / 2; }

.media-card img,
.media-card video{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
}

.media-card figcaption{ padding:16px 18px 18px; }
.media-card h4{ margin:0 0 4px; font-size: clamp(16px, 1.2vw, 18px); }
.media-card .muted{ font-size:.95rem; opacity:.9; }

/* Botón trigger para imágenes (ocupa todo el ancho, sin estilos nativos) */
.media-card .lightbox-trigger{
  appearance:none; border:0; padding:0; margin:0; background:transparent; display:block; width:100%;
  cursor: zoom-in;
}

/* Lightbox overlay */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  display: none;
  place-items: center;
  z-index: 9999;
  padding: clamp(8px, 4vw, 32px);
}
.lightbox.open{ display: grid; }
.lightbox__inner{ max-width: min(1200px, 92vw); max-height: 86vh; }
.lightbox__img{
  width:100%; height:auto; display:block; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  border:1px solid var(--gold-mid);
}
.lightbox__close{
  position:absolute; top:12px; right:12px;
  background: var(--gold-weak); border:1px solid var(--gold-mid);
  color:#ffefc1; border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:700;
}
.lightbox__close:hover{ background: rgba(212,175,55,.18); }

/* Responsive */
@media (max-width: 1100px){
  .media-card.video{ grid-column: span 12; }
  .media-card.image{ grid-column: span 6; }
}
@media (max-width: 640px){
  .media-card.image{ grid-column: span 12; }
}