/* ===== Páginas de upsell / downsell — Código de la Prosperidad (ES) ===== */

:root{
  --rojo-aviso:  #e40000;
  --verde-cta:   #22c55e;
  --texto-cta:   #ffffff;
  --radio-cta:   32px;
  --pad-cta:     15px 22.5px;
  --fs-cta:      21px;
  --lh-cta:      31.5px;

  --bg-no:       #9b9999;
  --radio-no:    32px;
  --texto-no:    #ffffff;

  --ancho:       1140px;  /* contenedor exterior, como en el original */
  --ancho-video: 400px;   /* el original limita el video a 400px en escritorio */
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  background:#ffffff;
  color:#111111;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Barra de aviso ---------- */
.aviso{
  background:var(--rojo-aviso);
  min-height:53px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px 10px;
}
.aviso p{
  margin:0;
  color:#ffffff;
  font-size:16px;
  font-weight:500;
  line-height:24px;
  text-align:center;
  max-width:var(--ancho);
  width:100%;
}

/* ---------- Contenedor ---------- */
.envoltorio{
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---------- Video (VSL) ---------- */
.video{
  margin:16px 0 0;
  width:100%;
  max-width:var(--ancho-video);   /* en movil manda el ancho de pantalla */
}
.video-marco{
  width:100%;
  aspect-ratio:9 / 16;
  background:#0f0f0f;
  border-radius:4px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:20px;
  color:rgba(255,255,255,.5);
  font-size:14px;
  line-height:1.5;
}
.video vturb-smartplayer,
.video iframe,
.video video{ width:100%; display:block; }

/* ---------- Bloque de compra (aparece tras N segundos) ---------- */
.oculto{ display:none; }

.compra{
  width:100%;
  max-width:var(--ancho-video);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:22px 0 40px;
  text-align:center;
}

.boton-si{
  display:inline-block;
  background:var(--verde-cta);
  color:var(--texto-cta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--fs-cta);
  font-weight:700;
  line-height:var(--lh-cta);
  text-align:center;
  text-decoration:none;
  border-radius:var(--radio-cta);
  padding:var(--pad-cta);
  cursor:pointer;
  transition:transform .15s ease, filter .15s ease;
}
.boton-si:hover{ transform:scale(1.03); filter:brightness(1.05); }

.boton-no{
  display:inline-block;
  background:var(--bg-no);
  color:var(--texto-no);
  font-family:Roboto,-apple-system,sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:15px;
  text-align:center;
  text-decoration:none;
  border-radius:var(--radio-no);
  padding:12px 24px;
  cursor:pointer;
  transition:filter .15s ease;
}
.boton-no:hover{ filter:brightness(1.1); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}