k:root{
  --bg:#e1e2dd; --fg:#798ba5; --muted:#ccb2b2; --brand:#00d1ff; --card:#ff0000;
}

/* Reset básico */
*{ box-sizing:border-box }
body{
  margin:0;
  font-family: Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
  color:var(--fg);
  background:linear-gradient(180deg,#3361b6e8, #2d427aef 30%, #04ebfc);
}
a{ color:var(--fg); text-decoration:none }

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 24px;
  background:rgb(255, 255, 255);
  backdrop-filter: blur(8px);
  border-bottom:1px solid #0077ff;
}
.nav .brand{ font-weight:800; letter-spacing:.5px }
.nav a{ margin-left:16px; color:var(--muted) }

/* BOTONES */
.btn{
  padding:10px 16px; border-radius:12px; border:1px solid #000000;
}
.btn.primary{
  background:var(--brand); color:#ff0000; border-color:#faf7f7; font-weight:100;
}
.btn.ghost{ background:transparent }
.btn.small{ padding:8px 12px; border-radius:10px }
.btn.disabled{ opacity:.5; pointer-events:none }

/* HERO (sección principal con video de fondo) */
.hero{
  position: relative;
  overflow: hidden;
  padding: 80px 0 48px;
  color: var(--fg);
  min-height: 72vh; /* se ve amplio sin forzar 100vh en móviles con barras */
  display: block;
}

/* Video de fondo */
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-1;
  opacity:.35;          /* sube/baja para contraste del texto */
  filter:saturate(1.05);
}

/* Layout 2 columnas */
.hero-grid{
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display:grid; grid-template-columns: 1.15fr 1fr; gap: 40px;
  align-items:center;
}

.hero-left h1{
  font-size: 56px; line-height: 1.05; margin: 0 0 12px;
}
.hero-left h1 span{ color:#030303 }
.hero-left .sub{ color: var(--muted); max-width: 56ch }

/* CTA con redes al lado */
.cta{
  margin-top:20px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.social-cta{
  display:flex; align-items:center; gap:10px;
}
.social-cta .icon{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #000000; border-radius:10px;
  background:#f0f2f5;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.social-cta .icon img{
  width:22px; height:22px; display:block;
  filter: drop-shadow(0 1px 1px rgb(255, 255, 255));
}
.social-cta .icon:hover{
  transform: translateY(-1px);
  background:#ffffff;
  border-color:#ffffff;
}

/* Tarjeta del lado derecho (logo) */
.hero-card{
  background:#00000000;                 /* ligera transparencia encima del video */
  border:1px solid #ffffff00;
  border-radius:24px;
  min-height:340px;
  display:flex; align-items:center; justify-content:flex-end; /* logo a la derecha */
  padding:24px 32px;
  box-shadow:0 10px 60px rgba(0, 0, 0, 0), inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.hero-logo{ max-width:360px; height:auto }

/* Tarjeta demo (si usas .hero-media con imagen) */
.hero-media{
  display:flex; align-items:center; justify-content:center;
  height:360px; border-radius:24px;
  background:#0b1220;
  box-shadow:0 10px 60px rgba(255, 252, 252, 0.438), inset 0 0 0 1px #1b2740;
}
.hero-media img.hero-logo{ max-width:280px; height:auto }

/* GRID de features */
.grid{
  max-width:1200px; margin:24px auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.card{
  background:var(--card); border:1px solid #050505e0;
  border-radius:20px; padding:18px; min-height:120px;
}

/* APPS */
.apps{ max-width:900px; margin:48px auto; padding:0 24px; text-align:center }
.apps h2{ font-size:32px; margin-bottom:8px }
.apps p{ color:var(--muted) }
.badges{ margin-top:16px; display:flex; gap:8px; justify-content:center }

/* FOOTER */
.footer{
  border-top:1px solid #000000; background:#ffffff;
  padding:32px 24px; text-align:center; color:var(--muted);
}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; gap:28px }
  .hero-card{ justify-content:center }
  .hero-left h1{ font-size:42px }
}

@media (max-width: 920px){
  .grid{ grid-template-columns:1fr 1fr }
}

@media (max-width: 560px){
  .grid{ grid-template-columns:1fr }
  .hero-left h1{ font-size:34px }
  .social-cta .icon{ width:34px; height:34px }
  .social-cta .icon img{ width:20px; height:20px }
}

/* === Restore / Boost de colores vivos === */

/* Título bien blanco y fuerte */
.hero-left h1{
  color:#ffffff;                 /* texto principal blanco */
  text-shadow:0 2px 18px rgba(245, 243, 243, 0.295);
}

/* Palabras destacadas con degradado turquesa (como antes, pero más vivo) */
.hero-left h1 span{
  background:linear-gradient(90deg,#00d1ff 0%, #11e1ff 45%, #5df1ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Párrafo bajo el título con mejor contraste sobre el video */
.hero-left .sub{
  color:#cfe3ff;                 /* más claro que --muted */
  text-shadow:0 1px 12px rgba(255, 255, 255, 0.445);
}

/* Botón WhatsApp turquesa brillante */
.btn.primary{
  background:#2dcf0cbb;
  color:#000000;
  border-color:transparent;
  box-shadow:0 6px 24px rgba(253, 253, 253, 0.329);
}
.btn.primary:hover{
  filter:saturate(1.1) brightness(1.02);
  transform:translateY(-1px);
}

/* Iconitos de redes con más contraste */
.social-cta .icon{
  background:#00000000;
  border-color:#00000000;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.social-cta .icon:hover{
  background:#00000000;
  border-color:#00000000;
}

/* Video un poco menos opaco para que los colores resalten más */
.hero-video{
  opacity:.65;                   /* si lo quieres más oscuro, vuelve a .35 */
}
/* ===== WhatsApp Card ===== */
.wa-card{
  padding:48px 24px;
  background: linear-gradient(180deg,#0d2434 0%, #0b1220 100%);
  border-top: 1px solid #102036;
  border-bottom: 1px solid #102036;
}

.wa-container{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: center;
}

.wa-left h3{
  font-size: 28px;
  margin: 0 0 8px;
}

.wa-number a{
  color: var(--fg);
  font-weight: 700;
}

.wa-tip{
  color: var(--muted);
  margin: 8px 0 20px;
}

/* Galería: QR + 2 imágenes */
.wa-gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.wa-gallery figure{
  margin: 0;
  background: #0f192b;
  border: 1px solid #1c2741;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 6px 30px rgba(255, 255, 255, 0.418);
  display:flex;
  flex-direction: column;
  align-items:center;
}

.wa-gallery img{
  width: 100%;
  aspect-ratio: 1 / 1;      /* cuadrados perfectos */
  object-fit: cover;         /* recorte elegante */
  border-radius: 12px;
}

/* Mantener el QR nítido */
.wa-gallery .qr img{
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.wa-gallery figcaption{
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 1000px){
  .wa-container{
    grid-template-columns: 1fr;
  }
  .wa-gallery{
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    justify-items: center;
  }
}

@media (max-width: 600px){
  .wa-gallery{
    grid-template-columns: repeat(2, 1fr);
  }
}