/* IMPERAX — Rescate E-commerce.
   Vertical nueva, mismo sistema visual. No redefine tipografía, color de marca
   ni componentes base: reutiliza styles.css y rescate.css y solo añade lo
   específico de esta landing. La urgencia se construye con jerarquía y copy,
   nunca con rojos de alerta. */

/* ===============================================================
   1. HERO
   =============================================================== */
.re-hero {
  padding: 150px 0 96px;
  border-bottom: 1px solid rgba(245, 245, 247, .08);
  position: relative;
  overflow: hidden;
}

.re-hero::before {
  /* Halo tenue, el mismo recurso del resto del sitio. */
  content: "";
  position: absolute;
  top: -340px;
  left: 50%;
  width: 1100px;
  height: 760px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(245, 245, 247, .06) 0%, rgba(245, 245, 247, 0) 70%);
  pointer-events: none;
}

.re-hero .wrap { position: relative; }

.re-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #86868b;
  border: 1px solid rgba(245, 245, 247, .16);
  border-radius: 999px;
  padding: 9px 18px;
  margin-bottom: 34px;
}

.re-eyebrow .punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6fbf97;
  flex: 0 0 auto;
}

/* Primero qué hacemos, después el gancho. Los dos son grandes; el orden y el
   peso hacen la jerarquía, no un salto de tamaño brusco. */
.re-hero h1 {
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  max-width: 19ch;
  margin: 0;
}

.re-hero .dim { color: #86868b; }

.re-subtitular {
  margin: 18px 0 0;
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 500;
  color: #f5f5f7;
}

.re-lead {
  margin-top: 24px;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  line-height: 1.6;
  color: #c9c9ce;
  max-width: 64ch;
}

.re-sintomas {
  list-style: none;
  padding: 0;
  margin: 38px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.re-sintomas li {
  font-size: .95rem;
  color: #c9c9ce;
  border: 1px solid rgba(245, 245, 247, .14);
  border-radius: 999px;
  padding: 9px 17px;
}

/* Precio en el primer pantallazo. Es una ficha de producto, no una tabla de
   tarifas: una cifra, un nombre y la condición que la hace creíble. */
.re-oferta {
  margin-top: 38px;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 26px;
  border: 1px solid rgba(245, 245, 247, .22);
  border-radius: 16px;
  background: rgba(245, 245, 247, .045);
}

.re-oferta-precio {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.re-oferta-nombre {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #86868b;
}

.re-oferta-cifra {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}

.re-oferta-nota {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: #c9c9ce;
}

.re-cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.re-cta .btn { min-height: 56px; font-size: 1.02rem; }

.re-micro {
  margin-top: 22px;
  font-size: .93rem;
  line-height: 1.6;
  color: #86868b;
  max-width: 58ch;
}

/* ---------------------------------------------------------------
   Cabecera reducida de la landing.
   --------------------------------------------------------------- */
.re-nav { gap: 26px; }

.re-nav .re-volver {
  font-size: .92rem;
  color: #86868b;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.re-nav .re-volver:hover { color: #f5f5f7; }

/* ===============================================================
   1.b FRANJA DE CONFIANZA
   =============================================================== */
.re-franja {
  border-bottom: 1px solid rgba(245, 245, 247, .08);
  background: rgba(245, 245, 247, .025);
}

.re-franja ul {
  list-style: none;
  margin: 0;
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 34px;
}

.re-franja li {
  font-size: .95rem;
  color: #c9c9ce;
  display: flex;
  align-items: baseline;
  gap: 11px;
}

.re-franja li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #6fbf97;
  transform: translateY(-3px);
}

/* ===============================================================
   2. EL COSTE DE ESPERAR
   =============================================================== */
.re-coste { padding: 110px 0; }

.re-coste h2,
.re-pasos h2,
.re-confianza h2,
.re-formulario h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}

.re-coste .dim,
.re-pasos .dim,
.re-confianza .dim,
.re-final .dim { color: #86868b; }

.re-parrafo {
  margin-top: 22px;
  font-size: 1.06rem;
  line-height: 1.68;
  color: #c9c9ce;
  max-width: 68ch;
}

.re-tarjetas {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.re-tarjeta {
  border: 1px solid rgba(245, 245, 247, .12);
  border-radius: 18px;
  background: rgba(245, 245, 247, .025);
  padding: 34px 30px;
}

.re-tarjeta h3 {
  font-size: .84rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}

.re-tarjeta p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #c9c9ce;
  margin: 0;
}

/* ===============================================================
   3. PLATAFORMAS
   =============================================================== */
.re-plataformas {
  padding: 66px 0;
  border-top: 1px solid rgba(245, 245, 247, .08);
  border-bottom: 1px solid rgba(245, 245, 247, .08);
}

.re-rotulo {
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #86868b;
  margin-bottom: 22px;
}

.re-marcas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 56px;
  align-items: baseline;
}

.re-marcas li {
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: #f5f5f7;
}

/* ===============================================================
   4. CÓMO FUNCIONA
   =============================================================== */
.re-pasos { padding: 110px 0; }

.re-lista-pasos {
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.re-lista-pasos li {
  border-top: 1px solid rgba(245, 245, 247, .22);
  padding-top: 22px;
}

.re-n {
  display: block;
  font-size: .82rem;
  letter-spacing: .18em;
  color: #86868b;
  margin-bottom: 18px;
}

.re-lista-pasos h3 {
  font-size: 1.16rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 12px;
}

.re-lista-pasos p {
  font-size: .98rem;
  line-height: 1.6;
  color: #86868b;
  margin: 0;
}

/* ===============================================================
   5. PRECIO
   =============================================================== */
.re-precio { padding: 40px 0 110px; }

.re-caja-precio {
  border: 1px solid rgba(245, 245, 247, .2);
  border-radius: 24px;
  background: rgba(245, 245, 247, .04);
  overflow: hidden;
  max-width: 900px;
}

.re-precio-cab {
  padding: 46px 46px 38px;
  border-bottom: 1px solid rgba(245, 245, 247, .12);
}

.re-precio-cab h2 {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  letter-spacing: -.02em;
  margin: 0;
}

.re-cifra {
  font-size: clamp(3.6rem, 9vw, 5.6rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  margin: 20px 0 16px;
}

.re-precio-sub {
  font-size: 1.02rem;
  line-height: 1.55;
  color: #c9c9ce;
  margin: 0;
  max-width: 52ch;
}

.re-precio-cuerpo { padding: 38px 46px 46px; }

.re-incluye {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 13px 40px;
}

.re-incluye li {
  font-size: 1rem;
  line-height: 1.5;
  color: #c9c9ce;
  display: flex;
  gap: 13px;
  align-items: baseline;
}

.re-incluye li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f5f5f7;
  transform: translateY(-3px);
}

/* La condición del precio se lee, no se esconde. */
.re-aclaracion {
  border-left: 2px solid rgba(245, 245, 247, .3);
  padding: 16px 0 16px 22px;
  margin: 0 0 32px;
  font-size: .96rem;
  line-height: 1.65;
  color: #c9c9ce;
  max-width: 70ch;
}

.re-precio-cuerpo .btn { min-height: 54px; }

/* ===============================================================
   6. CONFIANZA
   =============================================================== */
.re-confianza {
  padding: 110px 0;
  border-top: 1px solid rgba(245, 245, 247, .08);
}

.re-puntos {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 34px 44px;
}

.re-punto h3 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 12px;
}

.re-punto p {
  font-size: .98rem;
  line-height: 1.62;
  color: #86868b;
  margin: 0;
}

/* ===============================================================
   7. FORMULARIO
   =============================================================== */
.re-formulario {
  padding: 110px 0;
  border-top: 1px solid rgba(245, 245, 247, .08);
}

.re-form {
  margin-top: 50px;
  max-width: 820px;
}

.re-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  margin-bottom: 8px;
}

.re-form .campo-form { margin-bottom: 22px; }

.re-form .opcional {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #86868b;
  margin-left: 8px;
}

.re-etiqueta-grupo {
  display: block;
  font-size: .9rem;
  color: #c9c9ce;
  margin-bottom: 14px;
}

.re-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Opciones rápidas: pulsar una etiqueta grande es más rápido que
   desplegar un selector, sobre todo con prisa y desde el móvil. */
.re-opcion {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid rgba(245, 245, 247, .16);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.re-opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.re-opcion span {
  font-size: .98rem;
  color: #c9c9ce;
}

.re-opcion:hover { border-color: rgba(245, 245, 247, .34); }

.re-opcion:has(input:checked) {
  border-color: #f5f5f7;
  background: rgba(245, 245, 247, .1);
}

.re-opcion:has(input:checked) span { color: #f5f5f7; }

.re-opcion:has(input:focus-visible) {
  outline: 2px solid #f5f5f7;
  outline-offset: 3px;
}

.re-form .campo-error.general { margin-top: 16px; }

/* Una vez que se han mostrado errores, la línea de mensaje reserva su alto
   aunque quede vacía. Sin esto, corregir un campo hace desaparecer su aviso,
   el contenido salta hacia arriba y el clic siguiente puede caer en el sitio
   equivocado: exactamente el momento en que menos se puede fallar.
   rescate.css oculta los mensajes vacíos, así que hay que reactivarlos. */
.re-form[data-validado="si"] .campo-error,
.re-form[data-validado="si"] .campo-error:empty {
  display: block;
  min-height: 1.3em;
}

#re-enviar {
  min-height: 56px;
  font-size: 1.02rem;
}

#re-enviar[disabled] { opacity: .55; cursor: progress; }

.re-confirmacion {
  margin-top: 50px;
  max-width: 820px;
  padding: 46px;
  border: 1px solid rgba(245, 245, 247, .2);
  border-radius: 22px;
  background: rgba(245, 245, 247, .04);
}

.re-confirmacion h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 12px 0 20px;
}

.re-confirmacion p {
  font-size: 1.02rem;
  line-height: 1.68;
  color: #c9c9ce;
  margin-bottom: 14px;
  max-width: 62ch;
}

.re-confirmacion b {
  color: #f5f5f7;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.re-confirmacion .btn { margin-top: 16px; }

/* ===============================================================
   8. CTA FINAL
   =============================================================== */
.re-final {
  padding: 120px 0 140px;
  border-top: 1px solid rgba(245, 245, 247, .08);
  text-align: center;
}

.re-final h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  max-width: 22ch;
  margin: 0 auto;
}

.re-final p {
  margin: 24px auto 38px;
  font-size: 1.06rem;
  line-height: 1.6;
  color: #86868b;
  max-width: 54ch;
}

.re-final .btn { min-height: 56px; font-size: 1.02rem; }

/* ===============================================================
   9. CTA FIJO EN MÓVIL
   =============================================================== */
.re-sticky { display: none; }

@media (max-width: 860px) {
  .re-sticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(245, 245, 247, .12);
    transform: translateY(105%);
    transition: transform .28s ease;
  }

  .re-sticky[data-visible="si"] { transform: translateY(0); }

  .re-sticky .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  /* Que la barra no tape el final de la página ni el pie. */
  body { padding-bottom: 84px; }
}

/* En móvil todo el hero tiene que caber en una pantalla: si el precio o el
   botón quedan por debajo del pliegue, quien llega con prisa no los ve. Las
   medidas de abajo están ajustadas para entrar en 844 px de alto. */
@media (max-width: 640px) {
  .re-hero { padding: 96px 0 56px; }

  .re-eyebrow {
    margin-bottom: 22px;
    padding: 7px 15px;
    font-size: .7rem;
  }

  .re-hero h1 {
    font-size: 2.05rem;
    line-height: 1.08;
    max-width: none;
  }

  .re-subtitular {
    margin-top: 12px;
    font-size: 1.3rem;
  }

  .re-lead {
    margin-top: 16px;
    font-size: .96rem;
    line-height: 1.5;
  }

  /* Los síntomas dejan de ser fichas y pasan a una sola línea corrida: se
     siguen leyendo de un vistazo y liberan unos 70 px para que el precio y el
     botón entren en pantalla. */
  .re-sintomas {
    display: block;
    margin-top: 18px;
    font-size: .88rem;
    line-height: 1.6;
    color: #c9c9ce;
  }

  .re-sintomas li {
    display: inline;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: inherit;
  }

  .re-sintomas li + li::before {
    content: " · ";
    color: #86868b;
  }

  .re-hero h1 { font-size: 1.95rem; }

  .re-hero { padding-top: 88px; }

  .re-oferta {
    display: flex;
    width: 100%;
    margin-top: 22px;
    padding: 16px 20px;
    gap: 7px;
  }

  .re-oferta-nota { font-size: .84rem; }

  .re-cta { margin-top: 20px; }

  .re-micro { margin-top: 14px; font-size: .86rem; }

  .re-coste, .re-pasos, .re-confianza, .re-formulario { padding: 78px 0; }
  .re-precio { padding: 30px 0 78px; }
  .re-final { padding: 84px 0 100px; }
  .re-precio-cab { padding: 34px 26px 30px; }
  .re-precio-cuerpo { padding: 30px 26px 34px; }
  .re-confirmacion { padding: 30px 26px; }
  .re-cta .btn, .re-final .btn, .re-precio-cuerpo .btn { width: 100%; justify-content: center; }
  .re-tarjeta { padding: 28px 24px; }
}

/* Solo una de las dos versiones del texto de entrada se muestra a la vez. */
.re-lead-corta { display: none; }

/* Pantallas muy pequeñas (iPhone SE y similares). Aquí el objetivo es que el
   precio y el botón sigan entrando en el primer pantallazo sin encoger la
   tipografía hasta perder el aire de la marca. */
@media (max-width: 380px) {
  .re-hero { padding-top: 80px; }

  .re-hero h1 { font-size: 1.75rem; }

  .re-subtitular { font-size: 1.14rem; margin-top: 10px; }

  .re-lead-larga { display: none; }
  .re-lead-corta { display: block; }

  .re-lead { margin-top: 14px; font-size: .92rem; }

  .re-sintomas { margin-top: 14px; font-size: .84rem; }

  /* El bloque de precio se compacta a dos líneas. */
  .re-oferta {
    margin-top: 18px;
    padding: 13px 17px;
    gap: 5px;
  }

  .re-oferta-precio { gap: 11px; }
  .re-oferta-cifra { font-size: 1.7rem; }
  .re-oferta-nombre { font-size: .7rem; }
  .re-oferta-nota { font-size: .78rem; line-height: 1.4; }

  .re-cta { margin-top: 16px; }
  .re-cta .btn { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .re-sticky { transition: none; }
  .re-opcion { transition: none; }
}