/* ============================================================
   Vision Planeta
   Direccion visual: documental nocturno. Fondo profundo, tipografia
   editorial con serif de titulo, acento verde-agua. La miniatura manda:
   todo lo demas se aparta para que la pregunta y la imagen respiren.
   ============================================================ */

:root{
  --fondo:#070b12;
  --fondo-2:#0c1220;
  --superficie:#111a2b;
  --superficie-alta:#16223a;
  --borde:rgba(255,255,255,.08);
  --borde-fuerte:rgba(255,255,255,.16);
  --texto:#eaf0f8;
  --texto-2:#93a3ba;
  --texto-3:#63748e;
  --acento:#2dd4bf;
  --acento-2:#38bdf8;
  --rojo:#ef4444;

  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --ancho:1120px;
  --r:16px;
  --r-lg:22px;
  --sombra:0 20px 50px rgba(0,0,0,.45);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  font-family:var(--sans);
  color:var(--texto);
  background:
    radial-gradient(90% 55% at 50% -10%, #16304d 0%, transparent 60%),
    linear-gradient(180deg, var(--fondo-2) 0%, var(--fondo) 55%);
  background-attachment:fixed;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Grano sutil: le quita el plano digital al fondo */
.grano{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.04;
  background-image:radial-gradient(rgba(255,255,255,.35) .5px, transparent .5px);
  background-size:3px 3px;
}
main,.cabecera,.pie{position:relative;z-index:2}

/* ---------- Cabecera ---------- */
.cabecera{
  max-width:var(--ancho);margin:0 auto;
  padding:22px 22px 8px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.marca{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--serif);font-weight:800;font-size:1.12rem;letter-spacing:-.01em;
}
.marca-punto{
  width:11px;height:11px;border-radius:50%;
  background:linear-gradient(140deg,var(--acento),var(--acento-2));
  box-shadow:0 0 0 4px rgba(45,212,191,.14);
}
.btn-sub{
  font-size:.82rem;font-weight:700;
  padding:9px 17px;border-radius:999px;
  background:var(--rojo);color:#fff;
  transition:transform .18s var(--ease),filter .18s var(--ease);
}
.btn-sub:hover{transform:translateY(-1px);filter:brightness(1.1)}

/* ---------- Hero ---------- */
.hero{
  margin:0 auto;
  padding:56px 22px 40px;
  max-width:min(var(--ancho),780px);
}
.hero-kicker{
  font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acento);margin-bottom:18px;
}
.hero-titulo{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(2.4rem,7.5vw,4.4rem);
  line-height:1.02;letter-spacing:-.025em;
}
.hero-titulo em{
  font-style:italic;
  background:linear-gradient(90deg,var(--acento),var(--acento-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  margin-top:22px;max-width:52ch;
  color:var(--texto-2);font-size:clamp(1rem,2.2vw,1.12rem);
}

/* ---------- Destacado ---------- */
.destacado{max-width:var(--ancho);margin:0 auto;padding:0 22px}
.dest-card{
  display:grid;grid-template-columns:1.15fr 1fr;
  background:linear-gradient(140deg,var(--superficie),var(--superficie-alta));
  border:1px solid var(--borde);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sombra);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.dest-card:hover{transform:translateY(-3px);border-color:rgba(45,212,191,.4)}
.dest-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.dest-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.dest-card:hover .dest-img img{transform:scale(1.045)}
.dest-play,.tarjeta-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(8,12,20,.62);
  border:1.5px solid rgba(255,255,255,.35);color:#fff;
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.dest-play svg,.tarjeta-play svg{width:26px;height:26px;margin-left:3px}
.dest-card:hover .dest-play,.tarjeta:hover .tarjeta-play{
  background:var(--acento);border-color:var(--acento);color:#06231f;
  transform:translate(-50%,-50%) scale(1.08);
}
.dest-texto{padding:32px 34px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.etiqueta{
  align-self:flex-start;
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento);
  padding:5px 11px;border-radius:999px;
  background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.3);
}
.dest-texto h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.3rem,3vw,1.85rem);line-height:1.2;letter-spacing:-.015em;
}
.dest-cta{color:var(--acento);font-weight:700;font-size:.92rem}

/* ---------- Rejilla ---------- */
.rejilla-seccion{max-width:var(--ancho);margin:0 auto;padding:64px 22px 0}
.seccion-titulo{
  font-size:.76rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:22px;
}
.rejilla{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
}
.tarjeta{
  background:var(--superficie);
  border:1px solid var(--borde);border-radius:var(--r);
  overflow:hidden;
  transition:transform .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease);
}
.tarjeta:hover{transform:translateY(-4px);border-color:var(--borde-fuerte);background:var(--superficie-alta)}
.tarjeta-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.tarjeta-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.tarjeta:hover .tarjeta-img img{transform:scale(1.06)}
.tarjeta-play{width:46px;height:46px}
.tarjeta-play svg{width:19px;height:19px}
.tarjeta h3{
  padding:16px 17px 19px;
  font-family:var(--serif);font-weight:600;
  font-size:1rem;line-height:1.32;letter-spacing:-.01em;
}
.vacio{color:var(--texto-3);padding:30px 0}

/* ---------- Aviso por correo ---------- */
.aviso{max-width:var(--ancho);margin:0 auto;padding:76px 22px 0}
.aviso-caja{
  background:linear-gradient(140deg,rgba(45,212,191,.10),rgba(56,189,248,.06));
  border:1px solid rgba(45,212,191,.24);
  border-radius:var(--r-lg);
  padding:40px 34px;text-align:center;
}
.aviso-caja h2{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(1.5rem,4vw,2.05rem);letter-spacing:-.02em;
}
.aviso-caja > p{margin-top:10px;color:var(--texto-2);font-size:.98rem}
#formAviso{
  margin:26px auto 0;max-width:440px;
  display:flex;gap:10px;flex-wrap:wrap;
}
#formAviso input[type=email]{
  flex:1 1 210px;min-width:0;
  padding:14px 17px;font-size:1rem;font-family:inherit;
  color:var(--texto);
  background:rgba(4,8,14,.55);
  border:1px solid var(--borde-fuerte);border-radius:12px;
  transition:border-color .2s var(--ease);
}
#formAviso input[type=email]::placeholder{color:var(--texto-3)}
#formAviso input[type=email]:focus{outline:none;border-color:var(--acento)}
#formAviso button{
  padding:14px 26px;font-size:1rem;font-weight:700;font-family:inherit;
  color:#06231f;cursor:pointer;
  background:linear-gradient(140deg,var(--acento),var(--acento-2));
  border:0;border-radius:12px;
  transition:transform .18s var(--ease),filter .18s var(--ease);
}
#formAviso button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.07)}
#formAviso button:disabled{opacity:.55;cursor:not-allowed}
.trampa{position:absolute !important;left:-9999px !important;opacity:0 !important;height:0 !important;width:0 !important}
.aviso-estado{margin-top:14px;font-size:.92rem;min-height:1.2em}
.aviso-estado.bien{color:var(--acento)}
.aviso-estado.mal{color:#fca5a5}

/* ---------- Redes ---------- */
.redes{max-width:var(--ancho);margin:0 auto;padding:70px 22px 0}
.redes-fila{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.red{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 14px;
  background:var(--superficie);
  border:1px solid var(--borde);border-radius:var(--r);
  font-weight:600;font-size:.94rem;
  transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease),color .22s var(--ease);
}
.red svg{width:21px;height:21px;flex-shrink:0}
.red:hover{transform:translateY(-3px);background:var(--superficie-alta)}
.red-yt:hover{border-color:rgba(239,68,68,.55);color:#fca5a5}
.red-tk:hover{border-color:rgba(255,255,255,.5)}
.red-ig:hover{border-color:rgba(232,121,198,.55);color:#f0abd5}
.red-fb:hover{border-color:rgba(59,130,246,.55);color:#93c5fd}

/* ---------- Pie ---------- */
.pie{
  max-width:var(--ancho);margin:0 auto;
  padding:80px 22px 46px;
  color:var(--texto-3);font-size:.85rem;text-align:center;
}

/* ---------- Movil: la mayoria llega de TikTok e Instagram ---------- */
@media (max-width:760px){
  .dest-card{grid-template-columns:1fr}
  .dest-texto{padding:24px 22px 28px}
  .hero{padding:40px 22px 32px}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .tarjeta h3{padding:13px 13px 16px;font-size:.92rem}
  .aviso-caja{padding:32px 22px}
  #formAviso{flex-direction:column}
  #formAviso button{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}