/* =========================================================================
   PÁGINA DE VENTAS · «Domina tu Atención»
   =========================================================================
   Se carga DESPUÉS de styles.css y solo añade los bloques que la landing no
   tiene: la caja de oferta, el stack de lo que se recibe, el sello de
   garantía, las viñetas de contenido y la comparativa de los dos caminos.

   Todo lo demás (paleta, botones, secciones, testimonios, FAQ, capa visual y
   revelado por scroll) se hereda de styles.css. Eso es lo que garantiza que
   las dos páginas se vean del mismo proyecto sin duplicar una sola regla.

   Nota sobre la paleta: se mantiene la del libro (azul #003E5A muestreado de
   la cubierta) en lugar del #0A2540 del brief. Cambiarla rompería la
   coherencia con la portada y con la landing, que es justo lo que se pedía
   conservar.
   ========================================================================= */

/* --------------------------------------------------------------- hero venta */
.hero--venta{text-align:left}

/* =========================================================================
   TITULAR DEL HERO · UN SOLO BLOQUE
   =========================================================================
   ANTES el titular se leía en dos piezas: la primera mitad a 3,1rem (49,6 px)
   y la segunda, dentro del <em>, a .72em de eso (35,7 px) y en bloque aparte.
   Se unifica todo al tamaño de la segunda, 36 px, que es el que ya funcionaba.

   OJO CON EL ALCANCE, esto es lo importante: `.titular` y `.titular em` viven
   en styles.css y los COMPARTEN index.html y venta.html. Tocarlos allí habría
   cambiado también el titular de la landing, que no se ha pedido. Por eso todo
   cuelga de `.hero--venta`, que solo existe en la página de ventas.

   Sobre el tono: no había realmente dos colores. El <h1> resuelve a var(--azul)
   (#0A2540 con la paleta prémium) y el <em> llevaba ese mismo var(--azul). La
   sensación de «tono más claro» la producía el tamaño menor con el mismo peso:
   menos superficie de tinta por letra se percibe como más flojo. Se fija de
   todos modos #0F172A, que es lo pedido y da 18,3:1 sobre blanco.
   ========================================================================= */
.hero--venta .titular{
  /* 2.25rem = 36 px arriba. A 960 px de ventana la fórmula ya da 36 px, así
     que el titular es estable en todo el escritorio y solo baja en tablet y
     móvil, hasta 26,4 px, que es el mínimo legible para un H1 a este peso. */
  font-size:clamp(1.65rem,1.1rem + 2vw,2.25rem);
  color:#0F172A;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
}
/* El <em> se NEUTRALIZA, no se borra del HTML.
   Quitar la etiqueta habría eliminado también el énfasis semántico, que los
   lectores de pantalla sí usan aunque no se vea. Así que se deja en el marcado
   y se le anula todo lo visual: hereda tamaño y color, y pasa a `inline` para
   que el titular fluya como un texto continuo. Con `display:block` la segunda
   mitad empezaba en renglón propio, que es justo la ruptura que había que
   eliminar. El margin se pone a 0 porque en un elemento inline los márgenes
   verticales no se aplican y dejarlo solo despista al leer el CSS. */
.hero--venta .titular em{
  display:inline;
  font-size:inherit;
  color:inherit;
  font-weight:inherit;
  font-style:normal;
  letter-spacing:inherit;
  margin:0;
}
/* Cápsula del pre-titular.
   ANTES era un fondo rojo al 8 % con borde rojo y texto en rojo oscuro. Sobre
   un fondo claro eso reproduce el patrón visual de un `alert-danger` de
   Bootstrap, así que el ojo lo leía como «algo va mal» en lugar de como una
   etiqueta de audiencia. El texto no avisa de nada: dice a quién va dirigido.

   AHORA es una tarjeta blanca elevada. El hero de esta página va de #FFFFFF a
   #F8FAFC, así que la cápsula blanca se sostiene por la sombra y el filete, no
   por el color: en la parte alta del degradado el fondo coincide con el de la
   cápsula y lo único que la dibuja es el borde de 1 px. Es el efecto buscado,
   pero por eso la sombra NO se puede quitar: sin ella la cápsula desaparece. */
.pretitular{
  /* CENTRADO DEL PUNTO: `flex-start` y no `center`, a propósito.
     Con una sola línea las dos dan el mismo resultado. La diferencia aparece
     cuando el texto se parte en móvil: con `center` el punto se centra respecto
     al BLOQUE y aterriza en el hueco entre las dos líneas, flotando; con
     `flex-start` más medio renglón de margen queda alineado con la primera
     línea, que es donde se espera una viñeta. Correcto en los dos casos. */
  display:inline-flex;align-items:flex-start;gap:8px;
  background:#FFFFFF;border:1px solid #E2E8F0;
  /* Dos capas: la de 3 px define el canto y la de 12 px separa la cápsula del
     fondo. Con una sola, sobre el blanco del hero la cápsula quedaba plana. */
  box-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 12px rgba(15,23,42,.04);
  color:#0F172A;border-radius:9999px;
  padding:6px 16px;margin:0 0 18px;
  /* line-height:1 aprieta la cápsula a la altura del texto, que es lo que la
     hace parecer una pastilla y no una caja. Solo vale con una línea: por
     debajo de 480 px, donde la frase se parte, se devuelve a 1,45 o los dos
     renglones se pegarían sin aire. */
  font-size:13.5px;font-weight:700;line-height:1;letter-spacing:-.01em;

  /* ANCHO: la cápsula se ciñe al texto sin necesidad de tope artificial.
     La frase se acortó a 55 caracteres, que a 13,5 px semibold ocupan unos
     371 px; con relleno, punto, hueco y borde la cápsula mide unos 420 px. La
     columna de texto del hero tiene 573 px en la pantalla más ancha
     (contenedor 1180 - 64 de relleno - 54,4 de hueco de rejilla, por 1.08fr de
     2fr), así que `fit-content` da UNA línea sola, sin forzar nada.

     Se han quitado dos cosas que estaban aquí para la frase larga anterior:
       · `max-width:min(46ch,100%)`, que topaba la caja en unos 322 px y ahora
         partiría en dos líneas un texto que cabe de sobra en una.
       · `text-wrap:balance`, que solo tiene sentido reparando dos líneas.

     `max-width:100%` se queda como red de seguridad: en un móvil estrecho la
     cápsula no puede sobresalir del contenedor. */
  width:fit-content;
  max-width:100%;
}
/* Una línea continua garantizada en escritorio.
   El punto de ruptura es 1024 px y no los 768 px del brief, y esto importa: la
   rejilla del hero pasa a DOS columnas en 960 px, y ahí la columna de texto se
   queda en unos 458 px. A 1024 px son ya 491 px contra los 420 px que mide la
   cápsula, margen suficiente para absorber la variación de anchura de la fuente
   real. Con el corte en 768 px, en la franja de 960 a 1023 px el `nowrap`
   podría desbordar justo al entrar el diseño a dos columnas.
   Por debajo de 1024 px NO se pone `nowrap`: si no cabe, es mejor que parta en
   dos líneas que provocar barra de desplazamiento horizontal en toda la web. */
@media (min-width:1024px){
  .pretitular{white-space:nowrap}
}
.pretitular::before{
  content:"";
  /* `flex:0 0 auto` es la forma corta de flex-grow:0 + flex-shrink:0 +
     flex-basis:auto, así que ya cumple el flex-shrink:0 que hacía falta. Sin
     él, el punto se comprime hasta desaparecer cuando el texto ocupa todo el
     ancho disponible. Se deja en versión corta para no repetir la propiedad. */
  flex:0 0 auto;
  width:7px;height:7px;border-radius:50%;
  background:#DC2626;
  /* Media línea menos medio punto, para clavarlo en el centro óptico de la
     primera línea. Con line-height:1: 13,5 / 2 = 6,75 px, menos 3,5 px de
     radio = 3,25 px, que son .24em. En em y no en px para que siga al cuerpo.
     Al pasar el interlineado de 1,45 a 1 este valor CAMBIA: si se vuelve a
     tocar el line-height hay que recalcularlo o el punto se descuadra. */
  margin-top:.24em;
}
/* Solo en móviles estrechos la cápsula se parte en dos líneas, y ahí un radio
   de 9999 px la convertiría en un óvalo. Se baja a un radio fijo, que a esa
   altura de caja se lee como tarjeta y no como globo.
   El corte baja de 560 a 480 px porque con la frase corta la cápsula mide unos
   420 px y a 560 px de ventana hay 515 px de sitio: ahí todavía entra en una
   línea, y un radio de 14 px sobre una sola línea se vería como un rectángulo
   redondeado en vez de como la píldora que toca.
   La alineación del punto no se toca: la regla base ya lo lleva a la primera
   línea, así que vale para una línea y para dos. */
@media (max-width:480px){
  .pretitular{
    border-radius:14px;
    padding:8px 14px;
    /* Aquí sí hay dos renglones, así que vuelve el interlineado normal: con
       line-height:1 las dos líneas se tocarían. */
    line-height:1.45;
  }
  /* Y con el interlineado de vuelta a 1,45, el punto necesita otra vez los
     .47em de antes: (13,5 x 1,45) / 2 - 3,5 = 6,3 px. */
  .pretitular::before{margin-top:.47em}
}

/* ------------------------------------------------------------ caja de oferta */
.oferta{
  background:var(--blanco);border:1px solid var(--gris-claro);
  border-top:5px solid var(--rojo);border-radius:var(--radio-g);
  padding:clamp(1.2rem,3.4vw,1.9rem);box-shadow:var(--sombra-f);
  display:grid;gap:.9rem;text-align:center;
}
.oferta__precio{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.oferta__cifra{
  font-size:clamp(2.4rem,1.8rem + 2.4vw,3.4rem);font-weight:800;
  line-height:1;letter-spacing:-.02em;color:var(--azul-osc);
}
.oferta__cifra small{font-size:.42em;font-weight:700;margin-left:.15em}
/* Nada de precio tachado que nunca se cobró: en España, anunciar una
   reducción sobre un precio que no se ha aplicado antes durante 30 días es
   práctica prohibida (RD 1/2007, art. 20). Se usa «precio de lanzamiento»
   con la subida anunciada de verdad. */
.oferta__nota{font-size:.9rem;color:var(--gris);margin:0}
.oferta__nota strong{color:var(--tinta)}
/* `.oferta__sellos` se ha eliminado del HTML: repetía «entrega al instante» y
   «30 días de garantía», que ya estaban en el microtexto y en la fila de sellos.
   La regla se borra en lugar de dejarla muerta para que la hoja no acumule
   estilos sin dueño. Lo mismo con `.oferta__compatible` y `.pagos__nota`. */

/* Microtexto único del pie de la tarjeta. Sustituye a los tres párrafos que
   había. Se queda en una sola línea en escritorio y en dos en móvil. */
.micro-text{
  margin:0;font-size:.78rem;line-height:1.5;
  color:var(--gris);text-wrap:balance;
}
/* Mismo motivo que en el pie: inline-block con relleno para que la zona
   pulsable llegue a los 24 px que pide WCAG 2.2. Aquí importa especialmente
   porque el enlace («30 días de garantía») va rodeado de texto normal y en
   móvil el dedo tapa las dos cosas. */
.micro-text a{
  color:inherit;text-decoration:underline;text-underline-offset:2px;
  display:inline-block;padding-block:4px;
}
.micro-text a:hover{color:var(--rojo-osc)}

/* ------------------------------------------------------------ stack de valor */
.stack{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.8rem}
.stack li{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  background:var(--blanco);border:1px solid var(--gris-claro);
  border-radius:var(--radio);padding:1.1rem 1.2rem;
  box-shadow:var(--sombra-cerca);
}
.stack__marca{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--azul-claro);color:var(--azul);
}
.stack__marca svg{width:18px;height:18px}
.stack strong{display:block;margin-bottom:.15rem}
.stack p{margin:0;color:var(--gris);font-size:.95rem}

/* ------------------------------------------- viñetas de contenido (capítulos) */
.temario{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.55rem}
.temario li{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  font-size:1rem;
}
.temario svg{
  width:19px;height:19px;margin-top:.28rem;flex:0 0 auto;color:var(--rojo);
}
.temario b{font-weight:700}
.temario__capitulo{
  display:block;font-size:.74rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--oro-osc);margin-bottom:.1rem;
}

/* ------------------------------------------------------------------ garantía */
.blindaje{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;
  background:var(--blanco);color:var(--tinta);
  border:1px solid var(--gris-claro);border-top:5px solid var(--oro);
  border-radius:var(--radio-g);padding:clamp(1.3rem,3.4vw,2rem);
  max-width:760px;margin-inline:auto;box-shadow:var(--sombra-f);
}
.blindaje__sello{
  width:64px;height:64px;flex:0 0 auto;color:var(--oro-osc);
}
.blindaje h2{font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem);margin:0 0 .5rem}
.blindaje p{margin:0 0 .7rem;color:var(--gris)}
.blindaje p:last-child{margin-bottom:0}
@media (max-width:560px){
  .blindaje{grid-template-columns:1fr}
  .blindaje__sello{width:52px;height:52px}
}

/* --------------------------------------------------- los dos caminos (cierre) */
.caminos{
  display:grid;gap:1rem;margin:0 auto 1.8rem;max-width:820px;
  grid-template-columns:1fr;text-align:left;
}
@media (min-width:760px){.caminos{grid-template-columns:1fr 1fr}}
.camino{
  border-radius:var(--radio);padding:1.3rem 1.4rem;
  border:1px solid var(--gris-claro);background:var(--hueso);
}
.camino--seguir{opacity:.92}
.camino--decidir{
  background:var(--blanco);border-top:4px solid var(--rojo);
  box-shadow:var(--sombra-cerca);
}
.camino h3{font-size:1.05rem;margin:0 0 .6rem}
.camino ul{margin:0;padding-left:1.1rem;color:var(--gris);font-size:.96rem}
.camino li{margin-bottom:.35rem}
.camino li:last-child{margin-bottom:0}

/* --------------------------------------------------------- vía de escape 10 % */
/* Discreta a propósito: es la salida del 10 %, no una alternativa en igualdad
   de condiciones. Va en la FAQ y en el cierre, nunca junto al CTA principal. */
.escape{
  font-size:.9rem;color:var(--gris);text-align:center;
  max-width:56ch;margin:1.2rem auto 0;
}
.escape a{color:var(--azul)}

/* ------------------------------------------------- barra fija con precio */
.barra-movil--venta{flex-direction:column;gap:.35rem;align-items:stretch}
.barra-movil__precio{
  font-size:.78rem;color:var(--gris);text-align:center;margin:0;
}

/* ------------------------------- paso siguiente en la página de gracias */
/* Separado con aire y con fondo propio para que se lea como «otra cosa» y no
   compita visualmente con el botón de descarga, que es la promesa cumplida. */
.siguiente-paso{
  margin:2.6rem auto 1.6rem;padding:clamp(1.2rem,3.4vw,1.8rem);
  max-width:600px;text-align:center;
  background:var(--blanco);border:1px solid var(--gris-claro);
  border-top:4px solid var(--azul);border-radius:var(--radio-g);
  box-shadow:var(--sombra-cerca);
}
.siguiente-paso .etiqueta{margin-bottom:.5rem}
.siguiente-paso__titulo{
  font-size:clamp(1.1rem,1rem + .7vw,1.35rem);margin:0 0 .7rem;
}
.siguiente-paso p{color:var(--gris);margin:0 0 1rem}
.siguiente-paso .boton{width:auto;min-width:min(100%,300px)}

/* =========================================================================
   PALETA PRÉMIUM · SOLO EN LA PÁGINA DE VENTAS
   =========================================================================
   Todo cuelga de `body.pagina-venta`, así que la landing y las páginas legales
   siguen exactamente igual. Se redefinen las variables de styles.css en lugar
   de reescribir reglas: cambiando cinco variables cambian de golpe botones,
   enlaces, bordes, sellos e iconos, sin duplicar una sola declaración.

   DOS EXCEPCIONES TÉCNICAS, y conviene saber por qué:

   1. La sección de cierre se queda en BLANCO PURO. La silueta recortada del
      autor tiene 7 px de blanco plano en su contorno (medido); sobre un
      off-white de #F8FAFC ese contorno empezaría a notarse como un halo. Es la
      única sección clara que no lleva el fondo nuevo.

   2. La cubierta del mockup sigue siendo azul marino #003E5A, porque es el
      color real del libro impreso. Por eso el azul de la página se mueve a
      #0A2540, que es más profundo y armoniza con ella, en vez de pelearse.
   ========================================================================= */
.pagina-venta{
  --fondo:#F8FAFC;          /* off-white cálido de fondo general */
  --tinta:#0F172A;          /* carbón profundo para cuerpo de texto */
  --azul:#0A2540;           /* azul marino oscuro para títulos y acentos */
  --azul-osc:#071A2E;
  --rojo:#E11D48;           /* rojo de conversión */
  --rojo-osc:#BE123C;
  --gris:#475569;           /* gris de apoyo, más frío para acompañar al carbón */
  --gris-claro:#E2E8F0;     /* bordes sutiles */
  --sombra-cerca:0 4px 14px -8px rgba(15,23,42,.16);
  --sombra:0 14px 34px -18px rgba(15,23,42,.22);
  --sombra-f:0 22px 54px -24px rgba(15,23,42,.26);

  background:var(--fondo);
  color:var(--tinta);
}
.pagina-venta h1,
.pagina-venta h2,
.pagina-venta h3{color:var(--azul)}

/* =========================================================================
   ENCABEZADOS SOBRE FONDO OSCURO · FALLO DE CONTRASTE CORREGIDO
   =========================================================================
   La regla de arriba pinta TODOS los encabezados de la página en var(--azul),
   que con la paleta prémium es #0A2540. La sección de testimonios tiene un
   degradado de #0A2540 a #012639 y declara `color:#fff` en el contenedor.

   El problema: `color:#fff` en la sección se HEREDA, y una declaración que
   apunta directamente al elemento (aunque tenga menos especificidad) siempre
   gana a un valor heredado. Así que el <h2> salía en #0A2540 sobre un fondo que
   empieza justo en #0A2540: contraste 1:1, texto invisible.

   Se corrige apuntando también al elemento, con más especificidad
   (.pagina-venta .seccion--prueba h2 son 2 clases + 1 etiqueta, contra 1 clase
   + 1 etiqueta de la regla general). Sin !important: no hace falta.

   Blanco puro sobre este degradado da 15,5:1 en el extremo claro y 15,7:1 en el
   oscuro. Se incluye h3 para que un subtítulo futuro en esta sección no repita
   el mismo fallo.
   ========================================================================= */
/* ------------------------------------------ tarjetas de testimonio · glass */
/* Acotado a .pagina-venta porque `.testimonio` lo comparte la landing, que
   conserva sus tarjetas actuales (fondo al 9 % y filete dorado de 4 px arriba).

   El `border` de una línea sustituye a ese filete dorado: al ser shorthand
   incluye el lado superior, y con dos clases gana al `border-top` de la regla
   base. Es intencionado, el aire de cristal pide un canto uniforme.

   Contraste comprobado del texto #E2E8F0 sobre la tarjeta (blanco al 4 % encima
   del degradado marino): 11,3:1 en el extremo claro y 11,6:1 en el oscuro. La
   firma en #FCD34D da 10,0:1. Los dos muy por encima del 4,5:1 de WCAG AA. */
/* La rejilla: hueco de 24 px y ancho máximo de 1080 px.
   Las tres columnas NO se declaran aquí: siguen dentro del @media de 860 px que
   ya trae styles.css. Ponerlas sin condición, como venía en el brief, daría tres
   columnas de unos 100 px en un móvil, con una palabra por línea. */
.pagina-venta .testimonios{gap:24px;max-width:1080px;margin-inline:auto}

/* La tarjeta. Flex en columna con space-between para que las tres queden a la
   misma altura y la firma se pegue abajo aunque las citas midan distinto: es lo
   que quita el efecto de tarjetas descuadradas en la fila de tres. */
/* SIN backdrop-filter, y no es capricho: ya se quitó de `.tarjeta-autor` y de
   `.barra-movil` por esto mismo. `backdrop-filter:blur()` difumina lo que hay
   DETRÁS del elemento, y detrás de estas tarjetas solo hay un degradado liso
   sin detalle. Difuminar un degradado liso devuelve el mismo degradado liso:
   efecto visible cero. A cambio, el navegador tiene que promover cada tarjeta a
   su propia capa de composición y pasar un blur en cada repintado, tres veces
   en esta sección. Además crea un bloque contenedor que puede recortar sombras.
   Lo que despega la tarjeta aquí es el borde ámbar y la sombra, no el blur. */
/* POR QUÉ ESTAS TARJETAS SE VEÍAN MÁS OSCURAS QUE LAS DE LA LANDING.
   La causa no estaba en la tarjeta, estaba en el fondo de la sección. En la
   landing el degradado de `.seccion--prueba` arranca en var(--azul) = #003E5A;
   en la página de ventas la paleta prémium redefine var(--azul) a #0A2540, que
   es bastante más oscuro. Con el MISMO blanco translúcido encima, el resultado
   aquí salía apagado. Por eso subir la opacidad del 6 al 8 % apenas se notaba:
   se estaba corrigiendo el síntoma sobre una base distinta.

   Se pasa a color SÓLIDO para que la tarjeta no dependa del degradado que tenga
   debajo, y así las tres se ven iguales entre sí y iguales a las de la landing.

   #224D62 es la media de las tarjetas reales de la landing, que van de #215770
   arriba a #224253 abajo (blanco al 13 % sobre su degradado). Luminancia 0,065,
   la misma que allí. Se descartó el #0E3D59 del brief porque su luminancia es
   0,042, más oscura todavía que el punto más oscuro de la landing.

   Contra el fondo de la sección la tarjeta despega ahora a 1,70:1, frente al
   1,25:1 que daba el blanco al 8 %. */
.pagina-venta .testimonio{
  background:#224D62;
  border:1px solid rgba(245,158,11,.6);
  border-radius:14px;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  text-align:left;
}
/* El margen lo lleva el párrafo (18 px), no el blockquote ni la firma: con los
   tres puestos a la vez los huecos se sumaban y quedaban 32 px de aire. */
.pagina-venta .testimonio blockquote{margin:0}
.pagina-venta .testimonio blockquote p{
  color:#FFFFFF;
  font-size:14.5px;
  line-height:1.6;
  font-weight:400;
  margin-bottom:20px;
}
.pagina-venta .testimonio__firma{
  color:#FBBF24;
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:0;
}

.pagina-venta .seccion--prueba h2,
.pagina-venta .seccion--prueba h3{
  color:#FFFFFF;
  font-weight:800;
  /* 2rem = 32 px arriba, dentro de la horquilla pedida de 28 a 32 px. Baja
     hasta 24 px en móvil. Solo afecta a esta sección: los encabezados de las
     demás conservan su tamaño. */
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);
}

/* Contraste comprobado: blanco sobre #E11D48 da 4,70:1, por encima del 4,5:1
   que pide la WCAG AA incluso para texto normal. */

/* ---------------------------------------------------------------- secciones */
/* Todas las secciones claras comparten el mismo off-white, así que las tarjetas
   blancas destacan sobre él. Es el efecto que se buscaba: contenedores en
   blanco puro flotando sobre un fondo que descansa la vista. */
.pagina-venta .seccion--dolor,
.pagina-venta .seccion--contenido,
.pagina-venta .seccion--autor,
.pagina-venta .seccion--faq{background:var(--fondo)}
.pagina-venta .seccion--cierre{background:#FFFFFF}   /* la silueta lo necesita */

/* Al quedar todas las secciones claras del mismo color, las costuras
   desvanecidas de styles.css ya no tienen nada que disimular. Se apagan las dos
   que sobran y se conserva la del paso a la sección de cierre, que sí es un
   cambio real de color (off-white -> blanco puro). */
.pagina-venta .seccion--contenido::before,
.pagina-venta .seccion--autor::before{display:none}

.pagina-venta .hero{
  background:
    radial-gradient(1100px 620px at 80% -10%,rgba(10,37,64,.10),transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,var(--fondo) 100%);
}
.pagina-venta .hero::before{
  background:
    radial-gradient(620px 420px at 12% 18%,rgba(179,152,61,.09),transparent 70%),
    radial-gradient(520px 360px at 92% 72%,rgba(225,29,72,.06),transparent 68%);
}

/* ------------------------------------------------------------------ botones */
/* Gradiente sutil y sombra reactiva: la sombra se abre al pasar el cursor, que
   es lo que da la sensación de que el botón se levanta. */
.pagina-venta .boton--principal{
  background:linear-gradient(180deg,#EF4463 0%,var(--rojo) 55%,var(--rojo-osc) 100%);
  box-shadow:0 10px 26px -12px rgba(225,29,72,.58);
}
.pagina-venta .boton--principal:hover{
  background:linear-gradient(180deg,var(--rojo) 0%,var(--rojo-osc) 100%);
  box-shadow:0 18px 38px -14px rgba(225,29,72,.52);
}
.pagina-venta .boton--secundario{
  background:linear-gradient(180deg,#123253 0%,var(--azul) 60%,var(--azul-osc) 100%);
  box-shadow:0 10px 24px -12px rgba(10,37,64,.55);
}
/* El pre-titular NO se retiñe aquí a propósito.
   Antes este bloque le ponía fondo y borde rojos de la paleta prémium, que era
   la mitad del problema: aunque la regla base cambiase, esta la devolvía al
   aspecto de alerta por tener más especificidad. La cápsula gris de arriba ya
   encaja con esta paleta (#F1F5F9 y #E2E8F0 son exactamente los grises de la
   familia Slate que usa el resto de la página), así que no hace falta ajuste.
   Si algún día se quiere volver a un badge de color, hay que cambiarlo en la
   regla base y no reintroducir un override aquí. */

/* ------------------------------------------------- pie de la página de ventas */
/* Una línea centrada, a 12,5 px. Acotado a .pagina-venta: la landing y las tres
   legales mantienen su pie en dos bloques a 14 px, que ahí no molesta porque no
   compiten con un botón de compra.
   El color (#94A3B8, 6,1:1 sobre el marino) y el subrayado se heredan de la
   regla de styles.css, así que aquí solo se toca tamaño y disposición. */
.pagina-venta .pie{font-size:12.5px;text-align:center}
/* MÁS HUECO ABAJO QUE EN LA LANDING, y esto sí hacía falta medirlo.
   La barra fija de la landing lleva solo el botón: 0,7rem x2 de relleno + 54 px
   de botón + 1 px de filete = unos 78 px, y el pie reserva 96. De sobra.
   La de esta página lleva ADEMÁS la línea del precio, en columna: 22,4 + 18,7 +
   5,6 de hueco + 54 + 1 = unos 102 px. Contra 96 px de reserva se quedaba 6 px
   corto y la barra tapaba el final del pie. Con 8rem quedan 26 px de aire. */
@media (max-width:699px){
  .pagina-venta .pie{
    padding-bottom:calc(8rem + env(safe-area-inset-bottom,0px));
  }
}
/* Interlineado 2.1 y no 1.9: los enlaces llevan 4 px de relleno arriba y abajo
   para cumplir el mínimo de 24 px de zona pulsable, y con 1.9 la caja del enlace
   sobresalía de su renglón y se solapaba con la línea de al lado. */
.pagina-venta .pie__linea{margin:0;line-height:2.1}
/* El separador se aparta un poco a los dos lados para que no se pegue al texto,
   y va con aria-hidden en el HTML: es una barra decorativa, no información. */
.pagina-venta .pie__sep{margin:0 .35rem;opacity:.55}

/* --------------------------------------------------------- ancho de lectura */
/* 700 px de caja con el cuerpo actual dan entre 62 y 74 caracteres por línea,
   que es la horquilla en la que el ojo no se pierde al volver al margen. Sin
   esto, en un monitor ancho las líneas del bloque narrativo se iban a más de
   100 caracteres. */
.texto-lectura{max-width:700px;margin-inline:auto}
.texto-lectura > p{margin-bottom:1.15rem}
.texto-lectura > p:last-child{margin-bottom:0}
/* En el bloque del autor va dentro de una rejilla de dos columnas, así que
   no se centra: solo limita el ancho. */
.texto-lectura--suelto{margin-inline:0}

/* ----------------------------------------- los 14 capítulos, aire en móvil */
/* En pantalla estrecha los diez puntos se leían como un bloque compacto. Se
   sustituye el hueco entre elementos por relleno propio y un filete de
   separación: cada capítulo queda como una ficha con su aire. */
@media (max-width:640px){
  .temario{gap:0}
  .temario li{
    padding:1.05rem 0;
    border-bottom:1px solid var(--gris-claro);
    gap:.65rem;
  }
  .temario li:first-child{padding-top:0}
  .temario li:last-child{border-bottom:0;padding-bottom:0}
  .temario__capitulo{margin-bottom:.25rem}
}

/* ------------------------------------------------- encuadre del autor */
/* Foto circular limpia, sin caja alrededor. La «caja con borde gris» que se
   veía antes no era un contenedor: era la propia imagen, que llevaba un
   border de 1 px y esquinas de 22 px. Al hacerla redonda y quitarle el borde
   desaparece sola, pero se anulan igualmente fondo, borde y relleno del
   contenedor padre para que no pueda reaparecer si algo los hereda. */
.pagina-venta .autor__foto,
.pagina-venta .autor__foto picture{
  background:none;border:0;padding:0;box-shadow:none;
}
.pagina-venta .autor__foto img{
  width:260px;height:260px;
  max-width:100%;
  object-fit:cover;
  border-radius:9999px;
  border:0;
  background:none;
  padding:0;
  /* Sombra de elevación suave: eleva sin dibujar un canto. */
  box-shadow:0 10px 25px -5px rgba(0,0,0,.08);
  margin-inline:auto;
}
/* Red de seguridad para pantallas muy estrechas (menos de 360 px): con
   width y height fijos la foto se aplastaría y dejaría de ser un círculo.
   Aquí se pasa a proporción para que siga siendo redonda siempre. */
@media (max-width:359px){
  .pagina-venta .autor__foto img{
    width:min(260px,74vw);height:auto;aspect-ratio:1/1;
  }
}
/* En escritorio la rejilla ya centra en vertical (align-items:center en
   .rejilla-2), así que solo hay que dejar la foto centrada en su columna. */

/* La vía de escape dentro de la FAQ: mismo texto discreto, sin centrar. */
.escape--faq{margin:0 0 1rem;text-align:left;max-width:none}

/* =========================================================================
   CENTRADO DE LOS BOTONES DE COMPRA
   =========================================================================
   EL BUG, y por qué pasaba: `.oferta` es un grid. Sus hijos se estiran a todo
   el ancho por defecto (justify-items: stretch), pero `.boton--grande` lleva
   `max-width:460px`. Cuando la tarjeta es más ancha que 460 px, el navegador
   recorta la caja a 460 px y la deja pegada al INICIO de la columna, no
   centrada. De ahí el margen asimétrico a la derecha respecto al precio y al
   texto de garantía, que sí van centrados por `text-align:center`.

   Ojo: en el cierre NO pasaba, porque `.cierre` ya lleva
   `justify-items:center`. Se aplica igual a las tres ubicaciones para que el
   comportamiento sea el mismo en todas y no vuelva a divergir.
   ========================================================================= */
.oferta{justify-items:center}
.oferta > *{width:100%}

/* --------------------------------------- altura de la tarjeta del hero */
/* Se recorta el relleno vertical y el hueco entre filas SOLO en el hero, que es
   donde la tarjeta compite con el libro en 3D. La caja de oferta intermedia
   conserva su aire porque allí no hay nada al lado con lo que descuadrar.

   Lo honesto sobre esto: la base de la tarjeta NO se puede clavar a la base de
   la portada con un valor de padding. Son dos columnas de una rejilla con
   contenidos independientes, y la altura de la de texto depende del titular,
   del subtitular y del ancho de la ventana, que cambian en cada tamaño de
   pantalla. Lo que de verdad ha acortado la tarjeta es haber quitado los cuatro
   bloques de texto repetido; esto solo afina el resto. Si quieres alineación
   exacta habría que igualar las alturas por rejilla, y eso obliga a recortar el
   mockup o a estirar la tarjeta con espacio vacío: las dos cosas se ven peor
   que la diferencia que queda ahora. */
.hero--venta .oferta{
  padding-block:clamp(.9rem,2.2vw,1.25rem);
  gap:.7rem;
}
.oferta .boton,
.cierre .boton{
  justify-self:center;
  margin-inline:auto;
  box-sizing:border-box;   /* el padding lateral entra en el ancho */
}

/* ------------------------------------------------------ sellos de confianza */
/* Los cuatro sellos en UNA fila. Con los textos actuales suman unos 74
   caracteres más los cuatro pictogramas, así que a .7rem entran en una línea
   dentro de la tarjeta del hero en escritorio.
   `flex-wrap:wrap` se mantiene a propósito: forzar `nowrap` no metería los
   cuatro en una línea de 320 px, provocaría desbordamiento horizontal. Cuando
   no caben, el bloque de abajo los ordena en dos columnas limpias. */
.pagos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.3rem .85rem;margin:.1rem 0 0;padding:.55rem 0 0;
  list-style:none;width:100%;
  border-top:1px solid var(--gris-claro);
}
.pagos li{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.7rem;font-weight:600;letter-spacing:.01em;
  color:var(--gris);
  opacity:.8;transition:opacity .2s ease;
}
.pagos li:hover{opacity:1}
/* Los pictogramas van en un span con aria-hidden, no como texto suelto: si no,
   el lector de pantalla los locuta («candado cerrado», «alto voltaje») antes de
   cada etiqueta y la fila se vuelve ilegible al oído.
   line-height:1 evita que el emoji, que tiene una caja alta, estire el renglón
   y descuadre la fila respecto al filete superior. */
.pagos__icono{
  flex:0 0 auto;font-size:.86rem;line-height:1;
  font-style:normal;
}
/* Debajo de 520 px los cuatro sellos no caben en una línea legible. En vez de
   dejarlos romper de cualquier manera (que deja uno solo colgando en la
   segunda fila), se ordenan en dos columnas alineadas a la izquierda. */
@media (max-width:520px){
  .pagos{
    display:grid;grid-template-columns:1fr 1fr;
    gap:.4rem .7rem;justify-items:start;
  }
  /* .75rem = 12 px. Antes bajaba a .68rem (10,9 px), que en la mano no se lee.
     12 px es el suelo razonable para texto de apoyo en móvil. */
  .pagos li{font-size:.75rem}
}
/* Por debajo de 400 px, una sola columna. A 12 px el sello más largo
   («Tarjeta / Apple Pay / Google Pay») mide unos 198 px y no cabe en las dos
   columnas de ~140 px que quedan: se partiría en dos líneas cada uno y la fila
   crecería a ocho renglones. En una columna entra cada sello en su línea. */
@media (max-width:400px){
  .pagos{grid-template-columns:1fr;gap:.45rem}
}

/* --------------------------------------------- página de descarga del libro */
.descarga-doble{
  display:grid;gap:.8rem;margin:0 auto 1.4rem;max-width:440px;
}
.descarga-doble .boton{width:100%;box-sizing:border-box}
.descarga-doble__formato{
  display:block;font-size:.78rem;font-weight:600;opacity:.85;margin-top:.15rem;
}
/* El <strong> del botón no debe cantar más que el resto: dentro de un botón ya
   todo va en peso 800, así que se neutraliza para que no engorde de más. */
.descarga-doble .boton strong{font-weight:inherit}

/* Textos de apoyo de la página de descarga.
   El cuerpo va en .9rem, que son 14,4 px: dentro de la horquilla pedida de 14 a
   14,5 px, pero en rem en vez de px para que crezca si el lector tiene el tamaño
   de letra del navegador aumentado. En un bloque de texto seguido eso sí importa.

   Color #475569 en vez del var(--gris) que había: sobre el fondo de esta sección
   (que acaba en #F6F7F8) da 6,97:1 frente a los 5,48:1 de antes. */
.support-text,
.guarantee-text{
  max-width:580px;margin:0 auto 16px;
  font-size:.9rem;line-height:1.6;color:#475569;
}
/* Enlace en #0369A1 y NO en el #0284C7 del brief: ese, sobre este fondo, da
   3,82:1 y se queda por debajo del 4,5:1 que exige WCAG AA para texto normal.
   #0369A1 es el paso siguiente de la misma familia y sube a 5,45:1, con el mismo
   aspecto a la vista. El subrayado se mantiene porque el color no debe ser la
   única señal de que algo es un enlace. */
.support-text a{
  color:#0369A1;text-decoration:underline;text-underline-offset:2px;
}
.support-text a:hover,
.support-text a:focus-visible{color:#075985}
.guarantee-text strong{color:var(--tinta)}

/* Aire vertical de la página de entrega. Acotado a .pagina-venta para no tocar
   gracias.html, que usa la misma clase de sección pero no compite con un pie
   oscuro tan cerca. Más abajo que arriba a propósito: los 80 px de base separan
   el último texto del pie marino, que si no parece pegado. */
.pagina-venta .seccion--gracias{padding:60px 0 80px}