/* =========================================================
   css/venta.css  —  rilatosolutions.com
   Hoja SOLO para las páginas de venta largas (landing pages):
       /redirect-manager-offer.php
       /es/redirect-manager-offer.php
   ---------------------------------------------------------
   Se carga con un <link> dentro de la propia página, así que
   inc/header.php NO se toca. style-src 'self' de la CSP la
   deja pasar sin hashes.

   Colores: el naranja de Ubuntu (#E95420) con la berenjena
   (#2C001E / #5E2750 / #772953) de fondo en la portada y en
   el cierre. Todo lo demás usa las variables de rilato.css,
   así que el modo oscuro sigue funcionando solo.

   Todo va dentro de .venta para no pisar nada del resto del
   sitio.
   ========================================================= */

:root{
  --ub-naranja:      #E95420;
  --ub-naranja-osc:  #C34113;   /* texto naranja pequeño: contraste AA sobre blanco */
  --ub-naranja-hund: #A6360E;   /* sombra del botón */
  --ub-berenjena:    #2C001E;
  --ub-berenjena-2:  #5E2750;
  --ub-berenjena-3:  #772953;
  --ub-gris-calido:  #AEA79F;
}

/* ---------- Página a una columna: sin barra lateral ---------- */
.container.venta-ancho{ grid-template-columns:1fr; }
.venta{ padding:0; overflow:hidden; scroll-behavior:smooth; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

.venta section{ padding:34px 34px; }
.venta section + section{ border-top:1px solid var(--borde-suave); }
.venta .estrecho{ max-width:760px; margin:0 auto; }

.venta h2{
  font-size:27px;
  line-height:1.2;
  border-bottom:0;
  padding-bottom:0;
  margin:0 0 14px;
  text-align:center;
}
.venta h3{ font-size:18px; margin:0 0 6px; }
.venta p{ font-size:16.5px; line-height:1.6; }

/* Etiqueta pequeña encima de cada titulo */
.venta .ceja{
  display:block;
  text-align:center;
  font-family: var(--fuente-titulo);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color: var(--ub-naranja-osc);
  margin-bottom:8px;
}

/* ---------------------------------------------------------
   BOTONES
   Blanco sobre #E95420 solo cumple AA con letra GRANDE y en
   negrita (>= 18.66px), por eso el botón va a 19px.
--------------------------------------------------------- */
.venta .cta{
  display:inline-block;
  font-family: var(--fuente-titulo);
  font-size:19px;
  font-weight:700;
  letter-spacing:.3px;
  color:#fff !important;
  background: var(--ub-naranja);
  border-radius:6px;
  padding:16px 34px;
  text-decoration:none;
  box-shadow:0 3px 0 var(--ub-naranja-hund);
  transition:transform .12s ease, background .12s ease;
}
.venta .cta:hover{ background: var(--ub-naranja-osc); transform:translateY(-1px); color:#fff !important; }
.venta .cta:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.venta .cta-sec{
  display:inline-block;
  margin-left:14px;
  font-weight:700;
  color:#fff !important;
  text-decoration:underline;
  text-underline-offset:3px;
}
.venta .cta-fila{ margin-top:22px; }
.venta .cta-nota{ font-size:13.5px; margin-top:12px; opacity:.85; }

/* ---------------------------------------------------------
   1. PORTADA (hero)
--------------------------------------------------------- */
.venta .hero{
  background:
    radial-gradient(ellipse at 85% 0%, rgba(233,84,32,.35), transparent 55%),
    linear-gradient(135deg, var(--ub-berenjena) 0%, var(--ub-berenjena-2) 60%, var(--ub-berenjena-3) 100%);
  color:#fff;
  text-align:center;
  padding:52px 34px 46px;
}
.venta .hero .ceja{ color:#FFB38F; }
.venta .hero h1{
  color:#fff;
  font-size:40px;
  line-height:1.12;
  max-width:820px;
  margin:0 auto 16px;
}
.venta .hero h1 em{ font-style:normal; color:#FF8A5B; }
.venta .hero .sub{
  font-size:19px;
  line-height:1.55;
  max-width:720px;
  margin:0 auto;
  color:#F3E8EE;
}
.venta .hero-puntos{
  list-style:none;
  margin:24px auto 0 !important;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 22px;
  font-size:14.5px;
  color:#F3E8EE;
}
.venta .hero-puntos li{ margin:0; }
.venta .hero-puntos li::before{ content:"\2713"; color:#FF8A5B; font-weight:700; margin-right:7px; }

/* ---------------------------------------------------------
   2. EL PROBLEMA
--------------------------------------------------------- */
.venta .dolores{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
  margin:22px 0 8px;
}
.venta .dolor{
  border:1px solid var(--borde);
  border-left:4px solid var(--ub-naranja);
  border-radius:5px;
  padding:14px 16px;
  background: var(--caja);
}
.venta .dolor h3{ font-size:16.5px; }
.venta .dolor p{ font-size:15px; margin:0; color: var(--tinta); }

.venta .golpe{
  text-align:center;
  font-family: var(--fuente-titulo);
  font-size:22px;
  font-weight:700;
  line-height:1.3;
  margin:26px auto 0;
  max-width:680px;
}
.venta .golpe span{ color: var(--ub-naranja-osc); }

/* ---------------------------------------------------------
   3. LA SOLUCIÓN
--------------------------------------------------------- */
.venta .solucion{ background: var(--caja); }
.venta .pasos{
  list-style:none;
  counter-reset:paso;
  margin:24px 0 0 !important;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:16px;
}
.venta .pasos li{
  counter-increment:paso;
  position:relative;
  background: var(--papel);
  border:1px solid var(--borde);
  border-radius:6px;
  padding:44px 16px 16px;
  margin:0;
  font-size:15px;
}
.venta .pasos li::before{
  content:counter(paso);
  position:absolute; top:12px; left:16px;
  width:26px; height:26px; border-radius:50%;
  background: var(--ub-naranja); color:#fff;
  font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.venta .pasos strong{ display:block; font-size:16px; margin-bottom:4px; }

/* ---------------------------------------------------------
   4. CARACTERÍSTICAS Y BENEFICIOS
--------------------------------------------------------- */
.venta .fb{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--borde);
  border-radius:6px;
  overflow:hidden;
  margin-top:22px;
}
.venta .fb > div{ padding:14px 16px; border-top:1px solid var(--borde-suave); }
.venta .fb > div:nth-child(-n+2){ border-top:0; }
.venta .fb .cab{
  font-family: var(--fuente-titulo);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  background: var(--ub-berenjena);
  color:#fff;
}
.venta .fb .cab.b{ background: var(--ub-naranja-osc); }
.venta .fb .f{ background: var(--caja); font-size:15px; }
.venta .fb .f strong{ display:block; font-size:15.5px; margin-bottom:2px; }
.venta .fb .b-txt{ font-size:15px; border-left:1px solid var(--borde-suave); }
.venta .fb .b-txt::before{ content:"\2192  "; color: var(--ub-naranja-osc); font-weight:700; }

/* ---------------------------------------------------------
   5. PRUEBA SOCIAL
--------------------------------------------------------- */
.venta .opiniones{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-top:22px;
}
.venta .opinion{
  margin:0;
  border:1px solid var(--borde);
  border-radius:6px;
  padding:18px;
  background: var(--caja);
}
.venta .opinion blockquote{ margin:0 0 10px; font-size:15.5px; line-height:1.55; }
.venta .opinion blockquote::before{
  content:"\201C"; display:block; font-size:44px; line-height:.7;
  color: var(--ub-naranja); font-family:Georgia, serif;
}
.venta .opinion figcaption{ font-size:13.5px; color: var(--apagado); }
.venta .opinion figcaption strong{ color: var(--tinta); }

.venta .cifras{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:14px;
  margin:22px 0 6px;
  text-align:center;
}
.venta .cifra{
  border:1px solid var(--borde);
  border-radius:6px;
  padding:16px 10px;
  background: var(--caja);
}
.venta .cifra b{
  display:block;
  font-family: var(--fuente-titulo);
  font-size:34px;
  line-height:1;
  color: var(--ub-naranja-osc);
  margin-bottom:6px;
}
.venta .cifra span{ font-size:13.5px; color: var(--apagado); }

/* ---------------------------------------------------------
   6. OFERTA Y PRECIO
--------------------------------------------------------- */
.venta .oferta{ background: var(--caja); }
.venta .pila{
  max-width:640px;
  margin:22px auto 0;
  border:2px solid var(--ub-naranja);
  border-radius:8px;
  background: var(--papel);
  overflow:hidden;
}
.venta .pila h3{
  margin:0;
  background: var(--ub-naranja);
  color:#fff;
  text-align:center;
  padding:12px;
  font-size:17px;
  letter-spacing:.5px;
}
.venta .pila ul{ list-style:none; margin:0 !important; padding:6px 20px; }
.venta .pila li{
  display:flex; gap:10px;
  padding:10px 0;
  margin:0;
  border-bottom:1px dashed var(--borde);
  font-size:15px;
}
.venta .pila li:last-child{ border-bottom:0; }
.venta .pila li::before{ content:"\2714"; color: var(--ub-naranja); font-weight:700; flex:0 0 auto; }
.venta .pila li strong{ display:block; }

.venta .comparar{
  max-width:640px;
  margin:18px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  text-align:center;
  font-size:14.5px;
}
.venta .comparar > div{ border:1px solid var(--borde); border-radius:6px; padding:12px; background: var(--papel); }
.venta .comparar .no{ color: var(--apagado); }
.venta .comparar .si{ border-color: var(--ub-naranja); }
.venta .comparar b{ display:block; font-family: var(--fuente-titulo); font-size:16px; margin-bottom:4px; color: var(--tinta); }

/* La caja de compra de siempre (inc/comprar.php), en naranja */
.venta .oferta .comprar{
  max-width:640px;
  margin:22px auto 0;
  background: var(--papel);
  border:1px solid var(--borde);
}
.venta .oferta .comprar .boton{
  background: var(--ub-naranja);
  box-shadow:0 3px 0 var(--ub-naranja-hund);
  font-size:19px;
  text-transform:none;
}
.venta .oferta .comprar .boton:hover{ background: var(--ub-naranja-osc); }

.venta .garantia{
  max-width:640px;
  margin:20px auto 0;
  display:flex;
  gap:14px;
  align-items:flex-start;
  border:1px solid var(--borde);
  border-radius:6px;
  padding:14px 16px;
  background: var(--papel);
  font-size:14.5px;
}
.venta .garantia .sello{
  flex:0 0 68px; width:68px; height:68px; border-radius:50%;
  background: var(--ub-berenjena-2); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--fuente-titulo); font-weight:700; font-size:11px; letter-spacing:.3px; line-height:1.1;
  text-align:center;
}
.venta .garantia p{ margin:0; font-size:14.5px; }

/* ---------------------------------------------------------
   7. PREGUNTAS FRECUENTES  (<details>, sin JavaScript)
--------------------------------------------------------- */
.venta .faq{ max-width:760px; margin:20px auto 0; }
.venta .faq details{
  border:1px solid var(--borde);
  border-radius:6px;
  margin-bottom:10px;
  background: var(--papel);
}
.venta .faq summary{
  cursor:pointer;
  list-style:none;
  padding:14px 44px 14px 16px;
  font-family: var(--fuente-titulo);
  font-weight:700;
  font-size:16.5px;
  position:relative;
}
.venta .faq summary::-webkit-details-marker{ display:none; }
.venta .faq summary::after{
  content:"+";
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:24px; color: var(--ub-naranja); font-weight:700;
}
.venta .faq details[open] summary::after{ content:"\2212"; }
.venta .faq details[open] summary{ border-bottom:1px solid var(--borde-suave); }
.venta .faq .resp{ padding:12px 16px 4px; }
.venta .faq .resp p{ font-size:15.5px; }

/* ---------------------------------------------------------
   8. CIERRE
--------------------------------------------------------- */
.venta .cierre{
  background: linear-gradient(135deg, var(--ub-berenjena) 0%, var(--ub-berenjena-2) 100%);
  color:#fff;
  text-align:center;
  padding:48px 34px;
}
.venta .cierre h2{ color:#fff; font-size:31px; }
.venta .cierre p{ color:#F3E8EE; max-width:680px; margin-left:auto; margin-right:auto; }
.venta .cierre .ceja{ color:#FFB38F; }
.venta .cierre .ps{ font-size:14.5px; margin-top:22px; opacity:.9; }

/* Enlace a la ficha técnica */
.venta .tecnica{ text-align:center; font-size:14.5px; }

/* ---------------------------------------------------------
   MODO OSCURO: los colores de marca se quedan; solo se
   ajustan los textos naranjas pequeños para que se lean.
--------------------------------------------------------- */
.dark-mode .venta .ceja,
.dark-mode .venta .golpe span,
.dark-mode .venta .cifra b,
.dark-mode .venta .fb .b-txt::before{ color:#FF8A5B; }
.dark-mode .venta .hero .ceja,
.dark-mode .venta .cierre .ceja{ color:#FFB38F; }
.dark-mode .venta .cta-sec{ color:#fff !important; }

/* ---------------------------------------------------------
   PANTALLAS PEQUEÑAS
--------------------------------------------------------- */
@media only screen and (max-width: 720px){
  .venta section{ padding:26px 16px; }
  .venta .hero{ padding:36px 16px 32px; }
  .venta .hero h1{ font-size:29px; }
  .venta .hero .sub{ font-size:16.5px; }
  .venta h2{ font-size:23px; }
  .venta .cierre h2{ font-size:25px; }
  .venta .cta{ display:block; padding:15px 18px; }
  .venta .cta-sec{ display:inline-block; margin:14px 0 0; }

  /* Tabla característica / beneficio: una sola columna,
     cada beneficio justo debajo de su característica */
  .venta .fb{ grid-template-columns:1fr; }
  .venta .fb .cab.b{ display:none; }
  .venta .fb .cab:first-child::after{ content:" \2192  what it means for you"; }
  .venta .fb .b-txt{ border-left:0; border-top:0; padding-top:0; background: var(--caja); }
  .venta .fb > div:nth-child(-n+2){ border-top:0; }
  .venta .fb .f{ border-top:1px solid var(--borde); }

  .venta .comparar{ grid-template-columns:1fr; }
  .venta .garantia{ flex-direction:column; align-items:center; text-align:center; }
}
/* La etiqueta del encabezado apilado, en español */
@media only screen and (max-width: 720px){
  html[lang="es"] .venta .fb .cab:first-child::after{ content:" \2192  lo que ganas tú"; }
}