SIN esta clase, la regla no puede alcanzarlo
ni por accidente, que es una barrera más firme que el `:not()`.
========================================================================= */
.hero:not(.hero--venta) .titular{
font-size:clamp(2rem,3.5vw,2.75rem);
font-weight:800;
line-height:1.22;
text-wrap:balance;
}
.hero:not(.hero--venta) .titular .hero-highlight{
/* Todo unificado con la primera mitad MENOS el color. */
display:inline;
font-size:inherit;
font-weight:inherit;
font-style:normal;
letter-spacing:inherit;
margin:0;
color:var(--azul);
}
.subtitular{
font-size:clamp(1.05rem,1rem + .4vw,1.2rem);
color:var(--gris);max-width:56ch;margin:0 0 1.8rem;
}
/* --------------------------------------------------------------- formulario */
.formulario{
background:var(--blanco);border:1px solid var(--gris-claro);
border-radius:var(--radio-g);padding:clamp(1.2rem,3.4vw,1.9rem);
box-shadow:var(--sombra-f);border-top:5px solid var(--rojo);
}
.campo{margin-bottom:1rem}
.campo label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.4rem}
.campo input[type=text],.campo input[type=email]{
width:100%;font:inherit;padding:.9rem 1rem;
border:2px solid var(--gris-claro);border-radius:12px;background:#fff;color:var(--tinta);
transition:border-color .16s ease;
}
.campo input::placeholder{color:#93A1A9}
.campo input:focus{border-color:var(--azul);outline:none}
.campo input[aria-invalid=true]{border-color:var(--error)}
/* Microtexto legal bajo el CTA: sustituye a la casilla obligatoria.
Medido de verdad con las fuentes que sirve system-ui (_tools/_medir_microtexto):
el texto completo a 12 px ocupa 428 px en Segoe UI, 446 en Arial y 449 en
Calibri. El hueco dentro del formulario en escritorio ancho es de 427,5 px,
o sea que se quedaba a medio píxel de entrar en una línea. Por eso:
· font-size 12px y centrado, como se pidió.
· fuera el límite de 44ch, que era lo que lo partía en tres líneas.
· margin-inline negativo de .9rem: el párrafo se come parte del relleno del
formulario y gana 28,8 px, con lo que llega a 456 px de hueco y el texto
cabe en UNA línea con las tres fuentes. Sigue habiendo 16 px hasta el canto
de la tarjeta, así que no queda pegado al borde.
· por debajo de ~1180 px de ventana la columna se estrecha y ya no cabe en
una línea a ningún tamaño legible; ahí text-wrap:balance lo reparte en dos
líneas parejas en vez de dejar una huérfana.
· white-space:nowrap en el enlace: «política de privacidad» (113 px) NUNCA se
parte por la mitad. Ese era el corte que se veía sucio.
Contraste: gris de marca sobre blanco = 5,9:1, por encima del 4,5:1 de AA. */
.microcopy--legal{
font-size:12px;line-height:1.5;color:var(--gris);
margin:.7rem 0 0;margin-inline:-.9rem;
text-align:center;text-wrap:balance;
}
.microcopy--legal a{
color:var(--azul);text-underline-offset:2px;
white-space:nowrap;
}
.microcopy--antes-cta{margin:.2rem 0 1rem;text-align:center}
/* Destello al llegar desde otro botón: confirma visualmente el salto. */
@keyframes destello-formulario{
0%{box-shadow:0 0 0 0 rgba(237,28,36,.42)}
40%{box-shadow:0 0 0 8px rgba(237,28,36,.16)}
100%{box-shadow:0 0 0 0 rgba(237,28,36,0)}
}
.formulario--destaca{animation:destello-formulario 1.5s ease-out}
@media (prefers-reduced-motion:reduce){
.formulario--destaca{animation:none;outline:3px solid var(--rojo);outline-offset:4px}
}
/* Conservado por si algún día se recupera la casilla (modo 'esp' con ESP). */
.campo--consentimiento{
display:grid;grid-template-columns:auto 1fr;gap:.6rem .7rem;align-items:start;
margin:1.1rem 0 1.4rem;
}
.campo--consentimiento input{width:1.2rem;height:1.2rem;margin-top:.22rem;accent-color:var(--azul)}
.campo--consentimiento label{font-weight:400;font-size:.9rem;color:var(--gris);margin:0}
.campo--consentimiento .error{grid-column:1 / -1}
.error{display:block;color:var(--error);font-size:.84rem;font-weight:600;margin-top:.35rem}
.error:empty{display:none}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.microcopy{font-size:.88rem;color:var(--gris);margin:.9rem 0 0}
.microcopy--centrado{text-align:center;margin-top:1rem}
/* Los tres sellos de confianza bajo el botón del formulario.
Ya eran flex con `flex-wrap`; lo que faltaba era el centrado. Se añade porque
el párrafo que va justo encima (`.microcopy--legal`) está centrado, así que
con los sellos alineados a la izquierda el pie del formulario se leía como dos
bloques con ejes distintos.
`align-items:center` no cambia nada hoy: los tres sellos comparten cuerpo y
relleno, así que miden lo mismo de alto. Se deja porque en cuanto uno lleve un
icono o un relleno distinto, sin esto se estirarían a la altura del más alto.
Las medidas van en rem y no en px (8 px y 12 px de la petición son .5rem y
.75rem con la raíz por defecto de 16 px). Mismo resultado, pero acompañan al
tamaño de letra si el usuario lo sube en su navegador, que es como está
construido el resto de esta hoja.
El `margin` se declara completo, no solo `margin-top`: el reinicio global lleva
`p{margin:0 0 1rem}` y `.sellos` es un , así que con solo el top volverían
a aparecer 16 px por debajo. */
.sellos{
display:flex;flex-wrap:wrap;
justify-content:center;align-items:center;
text-align:center;
gap:.5rem;margin:.75rem 0 0;
}
.sello{
font-size:.76rem;font-weight:700;color:var(--azul-osc);
background:var(--azul-claro);border-radius:999px;padding:.3rem .7rem;
}
.formulario__respuesta{
margin:1rem 0 0;padding:.9rem 1rem;border-radius:12px;font-weight:600;
background:var(--azul-claro);color:var(--azul-osc);
}
/* ------------------------------------------------------------- hero visual */
.hero__visual{position:relative;display:flex;justify-content:center}
/* EL MISMO FALLO QUE YA SE CORRIGIÓ EN `.contenido__visual`, aquí seguía vivo.
La marca `.mockup` está en el ![]()
, pero el ítem flex es el que lo
envuelve. Con `align-items:center` (que es lo que centra en horizontal cuando
el flex va en columna) el navegador tiene que deducir el ancho del
por su contenido, y ahí el `width:min(100%,400px)` del ![]()
entra en una
referencia circular: el porcentaje se mide sobre un padre cuyo ancho depende
del hijo. Cada motor la resuelve a su manera, y el que decide estirar el
a todo el ancho deja la imagen pegada a su izquierda. Ese es el
desplazamiento lateral del libro en tablet vertical.
Con el fijado a todo el ancho y el ![]()
centrado con márgenes
automáticos no queda nada que interpretar: sale igual en todos los motores.
No va dentro de una media query a propósito: así el centrado es determinista a
CUALQUIER ancho, no solo en el tramo que estemos mirando hoy. En escritorio el
resultado visible no cambia: antes el se ajustaba al contenido y lo
centraba `justify-content`; ahora ocupa el ancho y centra el ![]()
. La imagen
acaba en el mismo sitio y con los mismos 400 px de tope. */
.hero__visual > picture{display:block;width:100%}
.mockup{
display:block;margin-inline:auto;
width:min(100%,400px);
filter:drop-shadow(0 28px 40px rgba(1,38,57,.24));
}
.tarjeta-autor{
position:absolute;right:clamp(0px,2vw,10px);bottom:-10px;
display:flex;align-items:center;gap:.7rem;margin:0;
/* Sin backdrop-filter: con el fondo al 96 % solo se ve un 4 % de lo que hay
detrás, así que el desenfoque no se percibe y sí se paga en GPU. */
background:rgba(255,255,255,.96);
border:1px solid var(--gris-claro);border-radius:999px;
padding:.45rem 1rem .45rem .45rem;box-shadow:var(--sombra);
}
.tarjeta-autor img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.tarjeta-autor figcaption{display:flex;flex-direction:column;line-height:1.25}
.tarjeta-autor strong{font-size:.9rem}
.tarjeta-autor span{font-size:.74rem;color:var(--gris)}
/* =========================================================================
LA PASTILLA DEL AUTOR EN PANTALLA ESTRECHA
=========================================================================
EL FALLO QUE HABÍA: la regla anterior era
@media (max-width:640px){.tarjeta-autor{position:static;margin:1.2rem auto 0}}
y no funcionaba, pero no por los márgenes. `.hero__visual` es un flex EN FILA
(display:flex, sin flex-direction, así que row). Mientras la pastilla está en
`position:absolute` queda fuera del flujo y no participa en esa fila. Al
pasarla a `position:static` se convierte en el SEGUNDO ítem del flex y se
coloca AL LADO del libro, comprimida en la columna estrecha que sobra. Ese era
el «se pone en una columna lateral junto al libro».
La corrección de verdad es girar el flex a columna. Con eso la pastilla cae
debajo del libro, y el `margin:12px auto 0` sí la centra, porque los márgenes
automáticos centran un ítem flex en el eje transversal.
POR QUÉ 960 px Y NO LOS 768 DEL BRIEF: la rejilla del hero pasa a UNA columna
en 960 px (ver .hero__rejilla). Entre 768 y 959 px `.hero__visual` ya ocupa
todo el ancho mientras el libro sigue centrado a 400 px, así que una pastilla
en `position:absolute` con `right:10px` quedaría flotando en el hueco vacío a
la derecha del libro, despegada. Cortando a la altura de los 960 px las dos
cosas cambian a la vez y no queda ninguna franja rota.
Y POR QUÉ 959.98 Y NO 960: la rejilla del hero abre a dos columnas con
`min-width:960px`. Si este bloque fuese `max-width:960px`, a 960 px EXACTOS se
cumplirían las dos condiciones y se aplicarían los dos bloques a la vez: la
maqueta sería de dos columnas mientras la pastilla se pasaba a `position:static`
y caía debajo del libro en vez de superponerse. Una franja rota de un píxel.
El decimal, y no 959 a secas, porque con zoom del navegador o en pantallas con
escalado fraccionario la ventana puede medir 959,5 px: con 959 ahí no entraría
ninguno de los dos bloques y volvería justo el fallo que esto corrige.
========================================================================= */
@media (max-width:959.98px){
.hero__visual{flex-direction:column;align-items:center}
.tarjeta-autor{
position:static;
width:auto;
max-width:90%;
margin:12px auto 0;
}
}
/* ----------------------------------------------------------------- secciones */
.seccion{padding:clamp(2.8rem,7vw,5rem) 0}
.seccion--dolor{background:var(--blanco)}
.seccion--contenido{background:var(--hueso)}
.seccion--autor{background:var(--blanco)}
.seccion--prueba{background:linear-gradient(180deg,var(--azul) 0%,var(--azul-osc) 100%);color:#fff}
.seccion--faq{background:var(--hueso)}
.titulo-seccion{font-size:clamp(1.55rem,1.2rem + 1.5vw,2.25rem);font-weight:800;margin:0 0 1.6rem}
.titulo-seccion--centrado{text-align:center;margin-inline:auto;max-width:26ch}
.etiqueta{
font-weight:800;letter-spacing:.1em;text-transform:uppercase;
font-size:.76rem;color:var(--oro-osc);margin:0 0 .7rem;
}
.rejilla-2{display:grid;gap:clamp(2rem,5vw,3.4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){
.rejilla-2{grid-template-columns:1.05fr .95fr}
.rejilla-2--invertida > :first-child{order:2}
}
/* ------------------------------------------------------------------ dolores */
.dolores{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
@media (min-width:860px){.dolores{grid-template-columns:repeat(3,1fr)}}
.dolor{
background:var(--hueso);border:1px solid var(--gris-claro);
border-radius:var(--radio);padding:1.5rem 1.4rem;border-top:4px solid var(--oro);
}
.dolor__num{
display:inline-block;font-weight:800;font-size:.9rem;color:var(--rojo);
letter-spacing:.08em;margin-bottom:.5rem;
}
.dolor h3{font-size:1.1rem;margin:0 0 .55rem}
.dolor p{margin:0;color:var(--gris);font-size:.98rem}
.frase-puente{
margin:2.2rem auto 0;max-width:60ch;text-align:center;
font-size:clamp(1.05rem,1rem + .45vw,1.26rem);
}
/* ------------------------------------------------------------ fascinaciones */
.fascinaciones{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1rem}
.fascinaciones li{position:relative;padding-left:2.4rem;color:var(--gris)}
.fascinaciones li::before{
content:"";position:absolute;left:0;top:.28em;
width:1.5rem;height:1.5rem;border-radius:50%;
background:var(--azul-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003E5A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center/.85rem no-repeat;
}
.fascinaciones strong{color:var(--tinta)}
.contenido__visual{display:grid;gap:1.2rem;justify-items:center}
/* EL A ANCHO COMPLETO Y LA IMAGEN CENTRADA CON MÁRGENES AUTOMÁTICOS.
Por qué, que es lo que hacía que la portada saliera descentrada: el elemento
de la rejilla es el , no el ![]()
. Con `justify-items:center` el
navegador tiene que decidir el ancho del por su contenido, y ahí el
`width:min(100%,310px)` del ![]()
de dentro entra en una referencia circular
(el porcentaje se mide sobre un padre cuyo ancho depende del hijo). Cada motor
la resuelve a su manera: si alguno estira el a todo el ancho, la
imagen queda pegada a su izquierda y parece descentrada.
Fijando `width:100%` en el y centrando el ![]()
con márgenes
automáticos ya no hay nada que interpretar: sale igual en todos. */
.contenido__visual > picture{display:block;width:100%}
.contenido__visual img{
display:block;margin-inline:auto;
width:min(100%,310px);max-width:100%;
border-radius:6px;
box-shadow:var(--sombra-f);border:1px solid var(--gris-claro);
}
.ficha-tecnica{
list-style:none;margin:0;padding:1.1rem 1.3rem;width:min(100%,340px);
background:var(--blanco);border:1px solid var(--gris-claro);border-radius:var(--radio);
font-size:.92rem;
}
.ficha-tecnica li{display:flex;justify-content:space-between;gap:1rem;padding:.32rem 0}
.ficha-tecnica li + li{border-top:1px dashed var(--gris-claro)}
/* EL BOTÓN AZUL DE ESTA SECCIÓN, CENTRADO EN MÓVIL.
Mismo motivo que en la barra fija: `.boton` es `display:inline-flex`, o sea de
nivel inline, así que en un contenedor de bloque se coloca a la izquierda. En
escritorio da igual porque va en su columna de texto, pero en móvil, con la
portada y la ficha centradas debajo, quedaba descolgado a un lado.
Se selecciona por hermano adyacente (`.fascinaciones + .boton`) en vez de por
la clase del contenedor: así apunta exactamente a ese botón y a ninguno más,
sin depender de cómo se llame el div que los envuelve. */
@media (max-width:768px){
.fascinaciones + .boton{
display:flex;
width:100%;max-width:320px;
margin:16px auto 0;
}
}
/* MISMO ANCHO PARA PORTADA Y FICHA EN MÓVIL.
Estaban las dos centradas, pero con topes distintos: 310 px la portada y 340
la ficha. Centradas y de anchos distintos se leen como dos bloques que no
comparten eje, sobre todo en una ventana de 375 px, donde la ficha llega a
tocar los márgenes y la portada se queda 15 px por dentro a cada lado.
Igualando el tope a 340 px los dos bordes coinciden y la columna se lee como
una sola pieza. En escritorio se dejan como estaban: ahí la portada más
estrecha que la ficha es intencionado, da jerarquía. */
@media (max-width:768px){
.contenido__visual img{width:min(100%,340px)}
}
/* -------------------------------------------------------------------- autor */
.autor__foto img{width:min(100%,420px);margin-inline:auto;border-radius:var(--radio-g)}
.seccion--autor p{color:var(--gris);max-width:58ch}
.visto-en{
display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--gris-claro);
font-size:.86rem;
}
.visto-en span{font-weight:700;color:var(--tinta)}
.visto-en em{font-style:normal;color:var(--gris);letter-spacing:.02em}
/* ------------------------------------------------------------- testimonios */
.testimonios{list-style:none;margin:0 0 2.6rem;padding:0;display:grid;gap:1.2rem}
@media (min-width:860px){.testimonios{grid-template-columns:repeat(3,1fr)}}
.testimonio{
/* La tarjeta se aclara un punto para despegarse del fondo marino sin robarle
contraste al texto blanco que va encima. */
background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
border-radius:var(--radio);padding:1.5rem 1.4rem;
border-top:4px solid var(--oro-claro);
}
.testimonio blockquote{margin:0 0 1rem}
/* Contraste alto: blanco puro sobre el azul marino de la sección da 11,4:1,
muy por encima del 4,5:1 de la WCAG AA. Peso 400 e interlineado 1,6 para que
se lea sin esfuerzo en móvil y con el brillo bajo. */
.testimonio blockquote p{
margin:0;font-size:1.02rem;line-height:1.6;
color:#FFFFFF;font-weight:400;
text-wrap:pretty;
}
.testimonio__firma{
margin:0;font-size:.86rem;font-weight:800;color:var(--oro-claro);
letter-spacing:.06em;text-transform:uppercase;
}
.garantia{
display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
background:var(--blanco);color:var(--tinta);
border-radius:var(--radio-g);padding:clamp(1.3rem,3.4vw,1.9rem);
max-width:760px;margin-inline:auto;box-shadow:var(--sombra-f);
}
.garantia__icono{width:2.6rem;height:2.6rem;color:var(--azul)}
.garantia h3{font-size:1.1rem;margin:0 0 .45rem}
.garantia p{margin:0;color:var(--gris);font-size:.96rem}
/* ---------------------------------------------------------------------- faq */
.faq{display:grid;gap:.7rem;margin-bottom:clamp(2.4rem,6vw,3.6rem)}
.faq details{
background:var(--blanco);border:1px solid var(--gris-claro);
border-radius:var(--radio);overflow:hidden;
}
.faq summary{
cursor:pointer;font-weight:700;padding:1.05rem 3rem 1.05rem 1.3rem;
position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";position:absolute;right:1.25rem;top:50%;
width:.7rem;height:.7rem;margin-top:-.42rem;
border-right:2.5px solid var(--rojo);border-bottom:2.5px solid var(--rojo);
transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin:0;padding:0 1.3rem 1.25rem;color:var(--gris)}
/* ------------------------------------------------------------------- cierre */
/* El cierre tiene sección propia con BLANCO PURO detrás. Es imprescindible:
la silueta lleva canal alfa y su contorno tiene píxeles blancos; sobre el
hueso de la FAQ (#F5F7F8) se notarían como manchas claras. */
.seccion--cierre{background:var(--blanco)}
.cierre{text-align:center;display:grid;justify-items:center;gap:.4rem}
/* La figura ya viene recortada con transparencia real (autor-cierre-recorte),
así que aquí no hay NADA: ni tarjeta, ni borde, ni sombra, ni border-radius,
ni máscara. La silueta se apoya directamente en el blanco de la sección.
El archivo lo prepara _tools/figura_cierre.py desde «Sin Fondo Landing
page.png», que ya venía con canal alfa limpio (7 px de blanco plano en todo
el contorno). Se recorta al sujeto y se desvanece el 16 % final, porque la
foto corta el torso y a corte limpio la figura quedaría amputada.
700 px de ancho: un 12,9 % más que los 620 px que tenía antes. Con el archivo
a 1270 px de ancho eso da 1,81x de densidad, de sobra en pantallas normales y
correcto en retina. No se amplía el original: ampliar no añade detalle.
El margen inferior negativo recupera el aire que deja el desvanecido. */
.cierre__figura{display:block;width:min(100%,700px);margin:0 auto -1.8rem}
.cierre__figura img{
display:block;width:100%;height:auto;margin:0;
background:none;border:0;border-radius:0;box-shadow:none;
}
.cierre__titulo{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);margin:0 0 .7rem}
.cierre__texto{max-width:52ch;color:var(--gris);margin:0 0 1.6rem}
/* ---------------------------------------------------------------------- pie */
/* FALLO DE CONTRASTE QUE HABÍA AQUÍ, y por qué afectaba a todas las páginas:
el pie va sobre var(--azul-osc) = #012639, pero los enlaces no tenían color
propio, así que cogían el `a{color:var(--azul)}` del principio de esta hoja.
En la página de ventas eso resolvía a #0A2540 sobre #012639: 1,01:1, o sea
invisible. En la landing, #003E5A sobre #012639: 1,37:1, igual de ilegible.
Solo se veían los enlaces que llevaban `.pie__enlaces`, y el pie de venta.html
usa a pelo.
Se corrige en styles.css y no en venta.css a propósito: el pie es el mismo
componente en las cinco páginas y el fallo estaba en las cinco. Arreglarlo
solo para la de ventas habría dejado la landing y las legales rotas. */
/* Los 6rem de abajo son el hueco que reserva el pie para que la barra fija no
tape nada. NO se añade `padding-bottom` al : ya está reservado aquí, y
sumar los dos dejaría casi 200 px de vacío al final de la página.
Se le añade el `env()` por la barra de gestos del iPhone, igual que a la barra. */
.pie{
background:var(--azul-osc);color:#94A3B8;font-size:.88rem;
padding:2.6rem 0 calc(6rem + env(safe-area-inset-bottom,0px));
}
.pie__marca{font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 .9rem}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin-bottom:1rem}
.pie__enlaces a{color:inherit}
.pie__legal{margin:0;max-width:70ch;line-height:1.6}
/* Los enlaces del pie, en cualquiera de sus variantes. #94A3B8 sobre #012639
da 6,18:1, por encima del 4,5:1 que pide WCAG AA.
El subrayado NO es decorativo: al ir los enlaces del mismo color que el texto
que los rodea, el color deja de distinguirlos y hace falta otra señal (WCAG
1.4.1). Se deja explícito para que no se pierda si alguien toca la regla. */
/* ZONA PULSABLE. `display:inline-block` con relleno vertical: sin esto el
enlace medía 19 px de alto y WCAG 2.2 (criterio 2.5.8, nivel AA) pide 24 x 24
px como mínimo para cualquier cosa que se toque con el dedo. Con 4 px arriba y
abajo pasa a unos 27 px. En un pie con cuatro enlaces seguidos separados por
puntos, esto es la diferencia entre acertar y pulsar el de al lado. */
.pie a{
color:#94A3B8;text-decoration:underline;text-underline-offset:2px;
display:inline-block;padding-block:4px;
}
.pie a:hover,
.pie a:focus-visible{color:#FFFFFF}
@media (min-width:700px){.pie{padding-bottom:2.6rem}}
/* --------------------------------------------------------- barra fija móvil */
/* EL BUG QUE HABÍA AQUÍ: esta regla NO declaraba `display:flex`, pero
`.barra-movil--venta` (en venta.css) le pone `flex-direction:column`, `gap` y
`align-items:stretch`. Sin flex en el padre, esas tres declaraciones no hacen
NADA. Y el botón es `display:inline-flex`, o sea de nivel inline, así que se
colocaba a la izquierda de la barra dejando todo el hueco a la derecha: eso
era el «no está centrado / se corta por la derecha».
`box-sizing:border-box` no se repite porque ya está en el reinicio global
(`*,*::before,*::after` al principio de esta hoja). */
.barra-movil{
position:fixed;left:0;right:0;bottom:0;z-index:50;
display:flex;justify-content:center;align-items:center;
padding:10px 16px;
/* En iPhone con barra de gestos, los 0,7rem de abajo quedan DEBAJO del
indicador y el botón se pega al borde. `env(safe-area-inset-bottom)` añade
lo que el sistema reserve; en pantallas sin muesca vale 0 y no cambia nada. */
padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
/* Sin backdrop-filter. Aquí importaba más: es una barra FIJA, así que el
desenfoque se recalculaba en cada fotograma de scroll en móvil, que es
justo el dispositivo donde menos margen hay. Y con el fondo al 96 % no
se notaba. Quitarlo es rendimiento gratis. */
background:rgba(255,255,255,.96);
border-top:1px solid var(--gris-claro);
}
/* El botón ocupa el ancho disponible hasta 380 px y se centra. Con `width:100%`
deja de depender del largo del texto, así que el botón mide lo mismo en la
landing («Descargar el capítulo gratis») y en la página de ventas («Quiero el
libro completo»), que antes salían de dos anchos distintos. */
.barra-movil .boton{width:100%;max-width:360px;margin:0 auto}
/* `[hidden]` tiene que ganar al `display:flex` de arriba, y con la misma
especificidad gana el que va después. Por eso este orden importa. */
.barra-movil[hidden]{display:none}
@media (min-width:700px){.barra-movil{display:none!important}}
/* ------------------------------------------------------- página de gracias */
.seccion--gracias{
background:
radial-gradient(900px 520px at 50% -12%,rgba(0,62,90,.14),transparent 62%),
linear-gradient(180deg,var(--blanco) 0%,var(--hueso) 100%);
min-height:74vh;display:flex;align-items:center;
}
.gracias{text-align:center}
.gracias .marca{margin-bottom:1.6rem}
.gracias__tic{
display:inline-flex;align-items:center;justify-content:center;
width:4.4rem;height:4.4rem;margin:0 auto 1.4rem;
border-radius:50%;background:var(--azul-claro);color:var(--azul);
}
.gracias__tic svg{width:2.2rem;height:2.2rem}
.gracias__texto{max-width:52ch;margin:0 auto 1.8rem;color:var(--gris);font-size:1.06rem}
.gracias__accion{display:flex;justify-content:center;margin:0 0 2rem}
.gracias__pasos{
list-style:none;margin:0 auto 1.4rem;padding:1.2rem 1.4rem;
max-width:44ch;text-align:left;
background:var(--blanco);border:1px solid var(--gris-claro);border-radius:var(--radio);
font-size:.95rem;color:var(--gris);
}
.gracias__pasos li + li{margin-top:.6rem}
.gracias__pasos strong{color:var(--rojo);margin-right:.3rem}
.gracias__volver{margin-top:1.6rem;font-size:.9rem}
/* =========================================================================
CAPA VISUAL · «de la dispersión al foco»
=========================================================================
Todo lo de aquí abajo es acabado: luz ambiental, costuras entre secciones,
profundidad en dos alturas, microinteracciones y revelado por scroll.
Va al final del archivo a propósito, en un solo bloque, para que se pueda
revisar o quitar de una pieza sin tocar nada de la maqueta.
TRES REGLAS QUE NO SE ROMPEN:
1. Solo se anima con `transform` y `opacity`, que son las dos propiedades
que el compositor resuelve sin repintar. La única excepción es un
`filter:blur()` de entrada, y está acotado a escritorio con puntero fino.
2. El hero NO se anima. El h1 es el elemento LCP y el formulario es el
objetivo de la página: retrasar su pintado cuesta métricas y registros.
3. Ningún estado invisible vive en el CSS a secas. Todo cuelga de
`.js-motion`, una clase que el JavaScript solo añade cuando puede animar
con garantías. Sin JS o con movimiento reducido, el contenido se ve
siempre. Un efecto que esconde el copy es un error de conversión.
========================================================================= */
/* ------------------------------------------------------------ luz ambiental */
/* Dos focos difusos sobre el fondo del hero, en un pseudoelemento para no
tocar el `background` que ya estaba funcionando. */
.hero{
background:
radial-gradient(1100px 620px at 80% -10%,var(--luz-azul),transparent 62%),
linear-gradient(180deg,var(--crema) 0%,var(--hueso) 100%);
isolation:isolate;
/* ====================================================================
ESTO ES LO QUE HACÍA QUE LA BARRA FIJA SE VIERA CORTADA POR LA DERECHA
====================================================================
Dentro del hero hay dos cosas que sobresalen de su contenedor:
· `.hero__visual::before` con `inset:-10% -14% -6%`, el halo del libro,
que se sale un 14 % por cada lado a propósito para difuminarse.
· `.microcopy--legal` con `margin-inline:-.9rem`, el aviso legal bajo el
botón, 14,4 px más ancho por cada lado.
Nada los recortaba. En móvil, donde el visual ocupa casi todo el ancho, ese
14 % son unos 45 px asomando fuera de la pantalla, y eso hace que la PÁGINA
ENTERA se pueda desplazar en horizontal.
Y ahí está la trampa: la barra de abajo es `position:fixed`, o sea que se
ancla a la ventana y NO se mueve al desplazar. Así que al deslizar de lado
el contenido se va y la barra se queda: parece que está cortada o
descentrada cuando en realidad lo que sobra es la página.
`overflow-x:clip` y no `hidden`: `hidden` convierte el elemento en
contenedor de desplazamiento, lo que rompe cualquier `position:sticky` de
dentro y activa el anclaje de desplazamiento. `clip` solo recorta. Donde no
esté soportado (Firefox anterior a 81, Safari a 16) simplemente no recorta,
igual que hasta ahora, así que no hay regresión. */
overflow-x:clip;
}
.hero::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(620px 420px at 12% 18%,var(--luz-oro),transparent 70%),
radial-gradient(520px 360px at 92% 72%,var(--luz-rojo),transparent 68%);
}
.hero > *{position:relative;z-index:1}
/* Respiración de 24 s. Tan lenta que no se ve moverse, solo se nota que la
página está viva. Es `transform` sobre un pseudoelemento: coste nulo. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
.hero::before{animation:respirar 24s ease-in-out infinite alternate}
@keyframes respirar{
from{transform:translate3d(0,0,0) scale(1)}
to{transform:translate3d(-1.5%,1%,0) scale(1.06)}
}
}
/* Halo detrás del libro: le da peso y lo separa del fondo sin sombra dura.
OJO con los selectores: `.hero__visual` contiene también `.tarjeta-autor`,
que está en `position:absolute`. Un `> *{position:relative}` le rompería la
colocación, así que se toca solo el y a la tarjeta se le da capa. */
.hero__visual::before{
content:"";position:absolute;z-index:0;pointer-events:none;
inset:-10% -14% -6%;
background:radial-gradient(closest-side at 50% 46%,
rgba(0,62,90,.17),rgba(0,62,90,.06) 56%,transparent 74%);
}
.hero__visual > picture{position:relative;z-index:1}
.tarjeta-autor{z-index:2}
/* --------------------------------------------------- costuras entre secciones */
/* Antes, cada cambio de sección dejaba un canto recto y el ojo veía una banda.
Un desvanecido de 90 px borra la costura y la página se lee como una sola
superficie. Es el cambio que más eleva la percepción de calidad y el que
menos se nota como «efecto».
Cada desvanecido va del color de la sección ANTERIOR:
dolor (blanco) -> contenido (hueso) : arriba de contenido, desde blanco
contenido (hueso)-> autor (blanco) : arriba de autor, desde hueso
faq (hueso) -> cierre (blanco) : abajo de faq, hacia blanco
Los dos cantos que dan a la sección marina se dejan a propósito: ahí el
corte limpio es lo correcto.
El cierre no se toca: detrás de la silueta recortada tiene que haber blanco
puro, o su contorno claro empezaría a notarse. */
.seccion--contenido,.seccion--autor,.seccion--faq{position:relative;isolation:isolate}
.seccion--contenido::before,
.seccion--autor::before,
.seccion--faq::after{
content:"";position:absolute;left:0;right:0;height:90px;z-index:0;
pointer-events:none;
}
.seccion--contenido::before{top:0;background:linear-gradient(180deg,var(--blanco),transparent)}
.seccion--autor::before{top:0;background:linear-gradient(180deg,var(--hueso),transparent)}
.seccion--faq::after{bottom:0;background:linear-gradient(0deg,var(--blanco),transparent)}
.seccion--contenido > *,.seccion--autor > *,.seccion--faq > *{position:relative;z-index:1}
/* ------------------------------------------------ profundidad en dos alturas */
/* Lo apoyado lleva sombra corta; lo que flota conserva la larga.
Los testimonios se quedan fuera: van sobre el azul marino y una sombra
azul oscura sobre fondo azul oscuro no se ve. */
.dolor,.faq details,.ficha-tecnica{box-shadow:var(--sombra-cerca)}
/* ------------------------------------------------------- CTA: barrido de luz */
/* Reflejo diagonal al pasar el cursor. `transform` puro y solo con ratón.
El brillo se queda en .22 de alfa: cruza por encima del texto y a más
opacidad le comería contraste al blanco sobre rojo. */
.boton{position:relative;overflow:hidden;isolation:isolate}
.boton::after{
content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;
background:linear-gradient(105deg,
transparent 34%,rgba(255,255,255,.22) 50%,transparent 66%);
transform:translate3d(-120%,0,0);
opacity:0;
}
@media (hover:hover) and (pointer:fine){
.boton--principal:hover::after,
.boton--principal:focus-visible::after{
opacity:1;
transform:translate3d(120%,0,0);
transition:transform .8s var(--curva),opacity .18s linear;
}
.boton--principal:hover{box-shadow:0 16px 32px -12px rgba(237,28,36,.55)}
}
/* ------------------------------------------------------ latido del antititular */
/* Cuatro líneas, en la primera pantalla, y es el detalle que más «producto
cuidado» transmite de toda la página. */
@media (prefers-reduced-motion:no-preference){
.antititular__punto{animation:latir 3.4s ease-in-out infinite}
@keyframes latir{
0%,100%{transform:scale(1);opacity:1}
50%{transform:scale(.82);opacity:.65}
}
}
/* ---------------------------------------------------- revelado por scroll */
/* El estado invisible SOLO existe bajo `.js-motion`. Ver la regla 3 de arriba:
esto es lo que garantiza que nadie se quede sin leer la página. */
[data-revelar]{--retardo:0ms}
.js-motion [data-revelar]{
opacity:0;
transform:translate3d(0,16px,0);
}
.js-motion [data-revelar].esta-dentro{
opacity:1;
transform:translate3d(0,0,0);
transition:
opacity .5s var(--curva) var(--retardo),
transform .6s var(--curva) var(--retardo);
}
/* El desenfoque de entrada va solo donde sale gratis. `filter:blur()` NO es
una propiedad de compositor: es rasterizado por fotograma, y en un Android
de gama media animarlo sobre bloques de texto tira fotogramas. Fuera de
escritorio con ratón, el revelado sigue igual pero sin blur. */
@media (min-width:900px) and (pointer:fine){
.js-motion [data-revelar~="foco"]{filter:blur(5px)}
.js-motion [data-revelar~="foco"].esta-dentro{
filter:blur(0);
transition:
opacity .45s var(--curva) var(--retardo),
transform .6s var(--curva) var(--retardo),
filter .6s var(--curva) var(--retardo);
}
}
/* -------------------------------------------- foco selectivo en los dolores */
/* La tarjeta que pasa por el centro de la pantalla gana altura y luz, y las
otras dos se quedan un paso atrás. El ojo solo puede atender a un dolor a
la vez: es el tema del libro aplicado a la maqueta.
DOS DECISIONES IMPORTANTES:
· No se toca la opacidad del texto. Atenuar body copy al 45 % hunde su
contraste por debajo de AA, así que el foco se hace con elevación y luz,
no apagando letra.
· La clase `.enfoque-listo` la pone el JS cuando el revelado ya ha
terminado. Si el revelado y esta animación coincidieran, la animación
ganaría la cascada y anularía el revelado a medias.
Mejora progresiva pura: donde no haya `animation-timeline`, las tarjetas se
ven como siempre y no falta nada. Hoy va en Chromium y Safari; Firefox aún
no lo implementa. */
.dolor{position:relative}
.dolor::after{
content:"";position:absolute;inset:-1px;z-index:-1;
border-radius:inherit;pointer-events:none;
box-shadow:0 16px 36px -16px rgba(1,38,57,.34);
opacity:0;
}
@supports (animation-timeline:view()){
@media (min-width:860px) and (prefers-reduced-motion:no-preference){
.dolor.enfoque-listo{
animation:foco-alto linear both;
animation-timeline:view(block);
animation-range:cover 15% cover 85%;
}
.dolor.enfoque-listo::after{
animation:foco-luz linear both;
animation-timeline:view(block);
animation-range:cover 15% cover 85%;
}
@keyframes foco-alto{
0%{transform:scale(.988)}
45%,55%{transform:scale(1)}
100%{transform:scale(.988)}
}
@keyframes foco-luz{
0%{opacity:0}
45%,55%{opacity:1}
100%{opacity:0}
}
}
}
/* --------------------------------------------- calor de la barra fija móvil */
/* En vez de una barra de progreso de lectura (que grita «esto es largo» justo
donde quieres que el visitante se registre), el progreso de scroll se usa
para que el CTA gane presencia a medida que el visitante se calienta.
Los 699 px son los mismos a los que la barra desaparece más abajo. */
@supports (animation-timeline:scroll()){
@media (max-width:699px) and (prefers-reduced-motion:no-preference){
.barra-movil{
animation:calor linear both;
animation-timeline:scroll(root block);
animation-range:25% 85%;
}
@keyframes calor{
from{box-shadow:0 -6px 18px -14px rgba(1,38,57,.30)}
to{box-shadow:0 -10px 30px -12px rgba(237,28,36,.42)}
}
}
}
/* ------------------------------------------------------ volumen del libro */
/* La perspectiva se aplica dentro del propio `transform` desde el JS, así que
aquí NO se pone la propiedad `perspective`: se sumarían las dos y el giro
saldría exagerado. Solo hace falta la transición del regreso, y quitarla
mientras el ratón está encima para que el libro siga al cursor sin retardo.
El mockup arranca sin `transform`, así que no crea capa antes de pintarse:
el LCP no se toca. */
.mockup{transition:transform .4s var(--curva)}
.hero__visual.tilt-activo .mockup{transition:none}
/* Enlace al libro completo en el pie de la landing. Discreto a propósito. */
.pie__extra{margin:.2rem 0 .9rem;font-size:.9rem}
.pie__extra a{color:#fff;text-underline-offset:2px}
/* =========================================================================
TABLET · espaciado y simetría
=========================================================================
POR QUÉ EMPIEZA EN 769 Y NO EN 768. Ya existe un bloque `@media
(max-width:768px)` con el centrado del botón azul y el tope de 340 px de la
portada. Las media queries NO añaden especificidad, así que a 768 px exactos
se aplicarían los dos bloques y ganaría el que va después en el archivo,
o sea este: en un iPad en vertical (768 px justos) el botón azul perdería el
centrado que se ajustó para móvil. Cortando en 769 los dos rangos quedan
separados y el iPad en vertical sigue con el tratamiento de móvil, que es el
correcto porque ahí la maqueta todavía es de UNA columna.
POR QUÉ EL RANGO SE PARTE EN 899. `.rejilla-2` pasa a dos columnas en
`min-width:900px`. Dentro del rango de tablet hay por tanto dos maquetaciones
muy distintas:
· 769-899 px → UNA columna. El botón azul queda justo encima de la portada
y la foto del autor justo encima de su texto. Aquí los retoques verticales
significan algo.
· 900-1024 px → DOS columnas. Botón y portada van uno al lado del otro, así
que un margen inferior en el botón no los separa: solo mete hueco muerto
al final de la columna de texto y, como la rejilla lleva
`align-items:center`, además desplaza todo el bloque hacia arriba.
Por eso los dos ajustes verticales se limitan a 769-899.
========================================================================= */
@media (min-width:769px) and (max-width:899px){
/* 1. HOLGURA ENTRE EL BOTÓN AZUL Y LA PORTADA.
Se selecciona por hermano adyacente, igual que en el bloque de móvil, para
apuntar a ese botón exacto sin depender del div que lo envuelve.
AVISO DE MEDIDA: la separación real no son 36 px. La rejilla ya aporta su
`gap` de clamp(2rem,5vw,3.4rem), que en este tramo vale entre 38 y 45 px.
Sumando el margen quedan entre 74 y 81 px de aire. Si se ve excesivo, lo que
hay que tocar es este 36, no el gap (el gap lo comparten todas las
rejillas de dos columnas de la página). */
.fascinaciones + .boton{margin-bottom:36px}
/* 2. EL TEXTO DEL AUTOR, COMO COLUMNA DE LECTURA CENTRADA.
El problema real en este tramo: la foto está centrada (tope de 420 px con
márgenes automáticos), pero debajo el h2 y la etiqueta ocupan el ancho entero
del contenedor (entre 705 y 835 px) mientras los párrafos están topados a
58ch (unos 493 px) y pegados a la izquierda. Resultado: un titular que llega
al borde derecho y un cuerpo de texto que se queda 200-340 px por dentro.
Esa es la asimetría.
Se limita el BLOQUE entero, no los párrafos: así el titular y el cuerpo
comparten los dos cantos y el conjunto queda centrado bajo la foto.
POR QUÉ 58ch Y NO LOS 720 px DEL BRIEF: los párrafos ya están topados a 58ch
por `.seccion--autor p`. Si el envoltorio midiera 720 px, los párrafos
seguirían midiendo 493 y volverían a quedar pegados a la izquierda DENTRO
del envoltorio: la asimetría se movería de sitio en vez de desaparecer.
Igualando el envoltorio a la misma medida, todo cuadra al píxel. */
.autor__texto{max-width:58ch;margin-inline:auto}
}
/* 3. LA FAQ, A MEDIDA DE LECTURA.
Este sí va en todo el rango de tablet: la FAQ es una sola columna a cualquier
ancho, así que no depende del corte de 900 px.
De dónde viene la mejora: la FAQ vive en `.contenedor--estrecho`, topado a
820 px. Descontando el borde y el relleno de 1,3rem de `.faq details p`, el
texto de las respuestas llega a unos 776 px, que al cuerpo de esta página
(16,9-17,2 px) son unos 90 caracteres por línea. La horquilla cómoda de
lectura está entre 45 y 75. Con el tope de 720 px baja a unos 79: no es
perfecto, pero va en la dirección correcta.
`margin-inline:auto` no pisa el `margin-bottom` de `.faq`, son longhands
distintos, así que el aire de debajo se mantiene.
Por debajo de unos 784 px de ventana este tope no hace nada, porque ahí manda
el ancho de la ventana menos el relleno del contenedor. No molesta. */
@media (min-width:769px) and (max-width:1024px){
.faq{max-width:720px;margin-inline:auto}
}