/* ═══════════════════════════════════════════════════════════════════════
YouPlanFit · portada
═══════════════════════════════════════════════════════════════════════
Hoja propia, no la de la aplicación. La portada tiene un solo trabajo
—llevar al diagnóstico y dejar claro qué añade PRO— y heredar los estilos
del producto la llenaría de componentes que aquí no pintan nada.
Reglas de la dirección editorial:
· Una idea por pantalla. Si una sección necesita dos, son dos secciones.
· El color de marca es acento, nunca superficie grande.
· El mismo tono en dos valores: turquesa profundo sobre claro, turquesa
claro sobre tinta. Así el acento sobrevive en las dos mitades de la
página.
· Paleta neutra fría: pizarra y turquesa, el color de la propia marca. No
hay marrones: se probó una versión terrosa y tiraba a café. Tampoco negro
puro —la tinta es una pizarra con verde dentro— ni verde lima.
═══════════════════════════════════════════════════════════════════════ */
:root{
--papel:#F4F6F6;
--papel-2:#E4EAEA;
--tinta:#1D2A2C;
--tinta-2:#28393B;
--rosa:#77D6CB;
--lila:#93A9AB;
/* Turquesa profundo. Se bajó desde #0E7A72, que era más vivo pero se
quedaba en 4,27:1 sobre --papel-2 y no cumplía. Aquí da 5,62 y 5,01. */
--fucsia:#0C6E67;
--humo:#566264;
--humo-claro:#9CA9AB;
--linea:rgba(29,42,44,.16);
--linea-clara:rgba(255,255,255,.15);
--display:'Archivo','Arial Black',system-ui,sans-serif;
--body:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
--mono:'Space Mono',ui-monospace,Consolas,monospace;
--serif:Georgia,'Times New Roman','Noto Serif',serif;
--max:1180px;
--r:22px;
--r-sm:14px;
/* 96 y no 84: con 84 la píldora «Planificación personalizada» quedaba a
170 px del borde y el logotipo terminaba en 62; ochenta píxeles entre
una marca y la otra no es separación, es un accidente esperando. */
--nav-h:96px;
}
*{box-sizing:border-box}
/* Sin animación: el desplazamiento animado se lee como «la página se
me va hacia abajo» en vez de como haber llegado a otro sitio. El
scroll-padding se queda para que la barra fija no tape el destino. */
html{scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
margin:0;background:var(--papel);color:var(--tinta);
font-family:var(--body);font-size:17px;line-height:1.62;
-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
/* ══ EL ATRIBUTO hidden GANA SIEMPRE ═════════════════════════════════
El navegador oculta [hidden] con un display:none de baja prioridad, así
que CUALQUIER regla nuestra que ponga display —y .btn pone
inline-flex— lo anula sin avisar. El elemento se queda en pantalla
aunque el JavaScript crea haberlo escondido, y no hay error en ninguna
consola.
Aquí se veía en la tabla de precios: «Comprar PRO» y «Aún no
disponible» salían LOS DOS, uno debajo del otro, diciendo cosas
contrarias sobre lo mismo. pintarBoton() los había ocultado a los dos
—comprobado: hidden = true en ambos— y el CSS los seguía enseñando.
Esta misma línea se puso en styles.css hace unas horas por el mismo
motivo y no se trajo aquí. Las dos hojas son dos mitades del mismo
sitio: lo que se arregla en una hay que arreglarlo en la otra. */
[hidden]{display:none !important}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap--estrecho{max-width:780px}
/* ── Ritmo: secciones alternando papel y tinta a sangre completa ── */
.s{padding:clamp(72px,11vw,132px) 0}
.s--tinta{background:var(--tinta);color:var(--papel)}
.s--tinta .s__sub,.s--tinta p{color:#C2CDCE}
.s--papel2{background:var(--papel-2)}
/* ── Capítulo numerado: lo que da la sensación de recorrido ── */
.s__cap{
font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--fucsia);margin:0 0 18px;display:block;
}
.s--tinta .s__cap{color:var(--rosa)}
/* ── Titular en dos tonos: sans rotunda + itálica serif de acento.
Es el gesto que sostiene toda la página. ── */
.t{
font-family:var(--display);font-stretch:118%;font-weight:900;
font-size:clamp(2.1rem,6vw,4.1rem);line-height:.98;letter-spacing:-.025em;
margin:0 0 20px;text-wrap:balance;
/* Red de seguridad: a este cuerpo, una palabra larga o un
mal puesto
empujan el texto fuera de su columna. Que parta antes que desbordar. */
overflow-wrap:break-word;
}
.t i{
font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:normal;
letter-spacing:-.01em;color:var(--fucsia);
}
/* El hero es oscuro aunque no lleve .s--tinta: la arcilla profunda se hunde
contra la foto, así que ahí manda el tono claro igual que en las secciones
de tinta. */
/* .creadora también: tiene fondo de tinta pero NO lleva la clase .s--tinta
—pinta el fondo por su cuenta—, así que esta regla no la alcanzaba y su
itálica se quedaba en --fucsia, que es la variante para fondo CLARO.
Verde oscuro sobre verde oscuro: 2,42:1, ni la mitad de lo exigible. Con
--rosa son 8,64:1.
La lección, porque volverá a pasar: una sección que se pinta el fondo
oscura a mano queda fuera de todas las reglas de .s--tinta. */
.s--tinta .t i,.hero .t i,.creadora .t i{color:var(--rosa)}
.s__sub{margin:0;font-size:clamp(1rem,1.6vw,1.12rem);color:var(--humo);max-width:56ch;line-height:1.55}
/* ── Navegación ── */
.nav{
/* Flota sobre el hero en vez de empujarlo: la foto ocupa la pantalla
desde y=0 y el menú vive encima, como en la referencia. El fondo lo
pone la propia foto, que arriba ya es oscura. */
position:absolute;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
display:flex;align-items:center;background:transparent;color:var(--papel);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
/* nowrap: sin esto «Cómo funciona» y «El programa» partían en dos líneas,
cada entrada medía 54 px de alto y el menú entero se salía de una barra de
84: por eso el logotipo acababa montado sobre la píldora del hero.
El menú aparece a partir de 1024 px, no de 880: entre esos dos anchos las
seis entradas caben, pero pegadas unas a otras y sin aire. */
.nav__menu{display:none;gap:20px;margin-left:auto;margin-right:10px;flex-wrap:nowrap}
@media (min-width:1024px){ .nav__menu{display:flex} }
@media (min-width:1240px){ .nav__menu{gap:26px} }
.nav__menu a{
font-size:.86rem;font-weight:500;text-decoration:none;color:#CBD6D7;
padding:4px 0;transition:color .16s;white-space:nowrap;
}
.nav__menu a:hover{color:var(--rosa)}
/* «Entrar». Va sin fondo, al lado del botón sólido de «Crear mi plan»: son
dos acciones para dos personas distintas —quien vuelve y quien llega— y
dos botones macizos seguidos harían dudar de cuál es cuál.
No se esconde por debajo de 880px como el menú: el menú es un índice y se
puede prescindir de él en el móvil, pero entrar a tu cuenta no. */
.nav__entrar{
font-size:.88rem;font-weight:600;text-decoration:none;color:var(--papel);
padding:8px 0;white-space:nowrap;transition:color .16s;
}
.nav__entrar:hover{color:var(--rosa)}
/* ── El selector de idioma ──
Discreto y en mono, como el resto de etiquetas cortas del sitio. Enseña el
idioma AL QUE se va —«EN» estando en castellano—, que es lo que la gente
busca cuando quiere cambiar; poner el idioma actual obliga a deducir qué
pasa al pulsarlo. */
.nav__idioma{
font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.08em;
text-decoration:none;color:var(--humo-claro,#9CA9AB);
padding:5px 9px;border:1px solid var(--linea-clara);border-radius:999px;
white-space:nowrap;transition:color .16s,border-color .16s;
}
.nav__idioma:hover,.nav__idioma:focus-visible{color:var(--rosa);border-color:var(--rosa)}
.nav__idioma:focus-visible{outline:2px solid var(--rosa);outline-offset:2px}
/* Con PRO el propio nombre lleva el color de marca. Es la única señal de
que la cuenta tiene el plan completo sin abrir nada. */
.nav__entrar--pro{color:var(--rosa)}
/* ── Marca ──
Una sola pieza: el logo completo como imagen. Antes convivían un
monograma dibujado con tres y un logotipo de texto; con la marca
nueva no queda nada de aquello y las reglas sobraban. */
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
/* width:auto, igual que .logo__img. Sin esto hereda el width:100% que le
deja la regla general de ![]()
y, con la altura fijada, se estira hasta
ocupar la fila entera: en móvil empujaba «Entrar» a una fila propia y el
botón a una tercera. Se veía como un símbolo pequeño porque la altura sí
estaba fijada; lo que ocupaba era el hueco invisible a su derecha. */
.logo__simbolo{display:none;width:auto}
/* ── Botones ── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;text-decoration:none;cursor:pointer;
padding:17px 30px;border-radius:999px;border:1.5px solid transparent;
background:var(--tinta);color:var(--papel);
transition:transform .16s,background .16s,color .16s,border-color .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn--claro{background:var(--rosa);color:var(--tinta)}
.btn--linea{background:transparent;border-color:currentColor}
.btn--sm{padding:12px 20px;font-size:.7rem;white-space:nowrap}
/* En 375 px "Crear mi plan" partía en dos líneas y desbordaba la barra. */
@media (max-width:420px){ .btn--sm{padding:11px 14px;font-size:.64rem;letter-spacing:.06em} }
/* ── La barra en móvil ───────────────────────────────────────────────────
Con el menú ya oculto por debajo de 1024, en la barra quedan tres piezas:
logo, «Entrar» y el botón grande. En 375px no caben las tres —el botón se
salía de la pantalla por la derecha, cortado a media palabra— porque
.wrap reparte el espacio con justify-content:space-between y nadie cede.
El logo cede: pasa a ser solo el símbolo, recortando el logotipo con una
ventana de ancho fijo. Sigue siendo la marca y sigue llevando a la
portada, pero deja de ocupar 200px que hacen falta para la acción. */
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
/* ══════════ HERO ══════════ */
.hero{
/* El contenido se apoya abajo, pero NO con align-items:flex-end.
Con esa regla, si el contenido es más alto que la pantalla el sobrante
se va HACIA ARRIBA y se mete debajo de la barra: medido a 1440x620, el
.wrap arrancaba en top:-293px y la píldora «Planificación
personalizada» acababa encima del logotipo. Pasa en cualquier portátil
con la ventana baja, que son muchos, y «safe flex-end» no lo arregló.
La forma que no se rompe es una columna con margin-top:auto en el
contenido: los márgenes automáticos empujan hacia abajo cuando sobra
sitio y se resuelven a cero cuando falta, así que el desbordamiento va
hacia abajo, que es donde hay scroll. */
position:relative;min-height:100svh;
display:flex;flex-direction:column;
padding-top:var(--nav-h);
background:var(--tinta);color:var(--papel);overflow:hidden;
}
.hero > .wrap{margin-top:auto}
.hero__foto{position:absolute;inset:0}
/* es un contenedor inline y no hereda el tamaño del padre: sin
esto la imagen de dentro no llena el hero. */
.hero__foto picture{display:block;width:100%;height:100%}
.hero__foto img{
/* La escena entera —mujer, trineo y las luces de la derecha—, no un
recorte sobre ella: el plano ancho es el que pidió el cliente. El velo
oscurece la mitad izquierda, que en la foto original ya es pared vacía,
así que el texto no tapa nada. */
width:100%;height:100%;/* Anclada a la derecha: cuando la pantalla es más cuadrada que la
foto, el recorte cae entero en la pared vacía de la izquierda y
las luces verdes del borde derecho no se pierden nunca. */
object-fit:cover;object-position:right center;
animation:respira 16s ease-in-out infinite alternate;
}
@keyframes respira{from{transform:scale(1.01)}to{transform:scale(1.07)}}
/* En vertical la ventana visible es ~un cuarto de la foto: anclada a la
derecha enseñaría el trineo sin la protagonista. Aquí manda ella (está
en el 62 % del ancho); las luces vuelven en cuanto la pantalla se ancha. */
@media (max-width:640px){ .hero__foto img{object-position:66% center} }
@media (prefers-reduced-motion:reduce){.hero__foto img{animation:none}}
/* CASI SIN VELO: la foto se ve entera, que es el requisito. En pantalla
16:9 el velo vertical de la referencia enterraba en negro el trineo, el
cuerpo y el suelo — la mitad inferior de la imagen desaparecía. La foto
ya trae su pared oscura: el texto blanco lee sobre ella sin ayuda. Solo
quedan un apoyo tenue en la franja del texto y un fundido fino en el
borde inferior para empalmar con la marquesina. */
.hero__velo{position:absolute;inset:0;background:
linear-gradient(90deg,rgba(20,18,15,.5) 0%,rgba(20,18,15,.2) 34%,rgba(20,18,15,0) 52%),
linear-gradient(180deg,rgba(20,18,15,0) 84%,rgba(20,18,15,.55) 100%)}
.hero .wrap{position:relative;padding-top:54px;padding-bottom:56px}
/* La caja vive en la pared vacía de la foto (su mitad izquierda): más
ancha se montaría sobre ella, que es lo que pasaba con 760px a 1440. */
.hero__caja{max-width:min(620px,46vw)}
@media (max-width:900px){ .hero__caja{max-width:none} }
/* La insignia del eslogan. Es la firma de la marca, no una etiqueta de
sección: se lee antes que el titular y tiene que sostener el peso. Sin
versalitas ni tracking de etiqueta —a ese tamaño el interletrado ancho
la parte y la vuelve ilegible— y sin mayúsculas forzadas, que en un
eslogan de cuatro palabras con puntos se leen como un grito. */
.marca{
display:inline-flex;align-items:center;gap:11px;margin-bottom:24px;
font-family:var(--body);font-weight:600;
font-size:clamp(.92rem,1.5vw,1.06rem);letter-spacing:.005em;line-height:1.3;
border:1px solid var(--linea-clara);border-radius:999px;
padding:11px 20px;color:var(--rosa);
}
.marca::before{content:'';flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--rosa)}
/* Por debajo de 430px el eslogan no cabe en una línea dentro de la píldora.
Antes que partirlo en dos —que deja la segunda línea colgando bajo el
punto— se quita la cápsula y se deja como firma suelta: ocupa una sola
línea y se sigue leyendo como lo que es. */
@media (max-width:430px){
.marca{
border:0;padding:0;gap:8px;
font-size:.9rem;margin-bottom:18px;
}
}
.hero .t{font-size:clamp(2.4rem,6.4vw,4.2rem);margin-bottom:22px}
.hero__sub{margin:0 0 32px;font-size:clamp(1rem,1.7vw,1.18rem);color:#CBD6D7;max-width:52ch}
.hero__acciones{display:flex;gap:13px;flex-wrap:wrap}
/* Trío de métricas: prueba en tres cifras, sin párrafos */
.cifras{display:flex;gap:clamp(26px,5vw,64px);flex-wrap:wrap;margin-top:44px;
padding-top:28px;border-top:1px solid var(--linea-clara)}
.cifra b{display:block;font-family:var(--display);font-stretch:118%;font-weight:900;
font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.02em}
.cifra span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--humo-claro)}
/* ══════════ Marquesina ══════════ */
.marquesina{background:var(--tinta);color:var(--papel);
border-top:1px solid var(--linea-clara);border-bottom:1px solid var(--linea-clara);
overflow:hidden;padding:16px 0}
.marquesina ul{display:flex;gap:38px;margin:0;padding:0;list-style:none;width:max-content;
animation:corre 34s linear infinite}
.marquesina li{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--humo-claro);white-space:nowrap}
.marquesina li::after{content:'✦';margin-left:38px;color:var(--rosa)}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquesina ul{animation:none}}
/* ══════════ Rejillas ══════════ */
.cab{margin-bottom:clamp(38px,6vw,64px);max-width:800px}
/* ══════════ Tarjetas de programa ══════════
La foto ocupa la tarjeta entera y el texto se apoya encima, sobre un velo
que sube desde abajo. Es un enlace: además de describir el segmento, entra
en la aplicación con ese perfil ya elegido. */
.programas{display:grid;gap:18px}
@media (min-width:900px){.programas{grid-template-columns:repeat(3,1fr)}}
.prog{
position:relative;display:flex;flex-direction:column;justify-content:flex-end;
padding:26px 24px;overflow:hidden;
border-radius:var(--r);text-decoration:none;color:var(--papel);
background:var(--tinta-2);isolation:isolate;
transition:transform .18s;
/* Casi cuadrada a cualquier ancho: la foto doble solo aísla a una
persona (recortes 25 % / 79 %) si la caja no es apaisada. No se usa
aspect-ratio porque con overflow:hidden gana al contenido y recorta el
texto en móvil; un suelo proporcional al ancho consigue la misma forma
y deja crecer la tarjeta cuando el texto lo necesita. */
width:100%;
/* 118vw y no menos: por debajo, en móvil la insignia superior
(absoluta) aterrizaba sobre la primera línea del cuerpo. */
min-height:min(118vw,580px);
}
.prog:hover{transform:translateY(-4px)}
.prog:focus-visible{outline:2.5px solid var(--rosa);outline-offset:4px}
.prog__foto{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.prog:hover .prog__foto{transform:scale(1.05)}
/* Dos paradas y no una: con un degradado lineal simple, el texto largo de la
tercera tarjeta se salía de la zona oscura y perdía contraste. */
.prog__velo{
position:absolute;inset:0;z-index:-1;
background:linear-gradient(to top,
rgba(20,18,15,.97) 0%, rgba(20,18,15,.93) 34%,
rgba(20,18,15,.74) 55%, rgba(20,18,15,.32) 78%,
rgba(20,18,15,.26) 100%);
}
.prog__insignia{
position:absolute;top:22px;left:22px;display:flex;align-items:center;gap:11px;
background:rgba(20,18,15,.78);backdrop-filter:blur(8px);
border:1px solid var(--linea-clara);border-radius:14px;padding:9px 14px 9px 10px;
font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
line-height:1.35;
}
.prog__insignia svg{width:26px;height:26px;flex:0 0 auto;color:var(--rosa);
background:rgba(244,203,221,.12);border-radius:9px;padding:4px}
.prog__cuerpo{display:flex;flex-direction:column;gap:11px}
.prog__meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.prog__meta b{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;font-weight:400;color:#CBD6D7}
.prog__meta i{font-family:var(--mono);font-style:normal;font-size:.66rem;color:var(--rosa)}
.prog h3{
margin:0;font-family:var(--display);font-stretch:112%;font-weight:900;
font-size:clamp(1.45rem,2.4vw,1.85rem);line-height:1.03;letter-spacing:-.025em;
}
.prog p{margin:0;font-size:.92rem;line-height:1.45;color:#C2CDCE}
.prog__tags{display:flex;gap:7px;flex-wrap:wrap}
.prog__tags em{
font-style:normal;font-size:.74rem;padding:5px 11px;border-radius:999px;
border:1px solid var(--linea-clara);background:rgba(20,18,15,.5);color:#CBD6D7;
}
.prog__cta{
margin-top:5px;display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:15px 20px;border-radius:999px;border:1px solid var(--linea-clara);
background:rgba(20,18,15,.55);
font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;transition:background .16s,border-color .16s,color .16s;
}
.prog__cta::after{content:'↗'}
.prog:hover .prog__cta{background:var(--rosa);border-color:var(--rosa);color:var(--tinta)}
.s__pie{
margin:22px 0 0;font-size:.86rem;line-height:1.5;color:var(--humo);max-width:64ch;
}
.s--tinta .s__pie{color:#9CA9AB}
/* ══════════ Lista numerada con hairlines ══════════ */
.filas{list-style:none;margin:0;padding:0}
.filas li{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;
padding:20px 0;border-top:1px solid var(--linea)}
.filas li:last-child{border-bottom:1px solid var(--linea)}
.s--tinta .filas li{border-color:var(--linea-clara)}
.filas b{font-family:var(--mono);font-size:.72rem;color:var(--fucsia);letter-spacing:.1em}
.s--tinta .filas b{color:var(--rosa)}
.filas span{font-size:1.05rem;font-weight:500}
/* ══════════ Precio ══════════ */
.precios{display:grid;gap:18px;align-items:start}
@media (min-width:860px){.precios{grid-template-columns:1fr 1.08fr}}
.pc{border:1.5px solid var(--linea);border-radius:var(--r);padding:32px 28px;background:var(--papel)}
.pc--pro{background:var(--tinta);color:var(--papel);border-color:var(--tinta);position:relative}
.pc__sello{position:absolute;top:-11px;left:28px;background:var(--rosa);color:var(--tinta);
font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
padding:5px 13px;border-radius:999px}
.pc h3{margin:0 0 6px;font-family:var(--display);font-stretch:112%;font-weight:900;
font-size:1.5rem;letter-spacing:-.02em}
.pc__precio{margin:0 0 4px;display:flex;align-items:baseline;gap:8px}
.pc__precio b{font-family:var(--display);font-stretch:118%;font-weight:900;font-size:3rem;
line-height:1;letter-spacing:-.03em}
.pc__precio span{font-family:var(--mono);font-size:.72rem;color:var(--humo)}
.pc--pro .pc__precio span{color:var(--humo-claro)}
.pc__sub{margin:0 0 22px;font-size:.88rem;color:var(--humo)}
.pc--pro .pc__sub{color:var(--humo-claro)}
.pc ul{list-style:none;margin:0 0 26px;padding:22px 0 0;border-top:1px solid var(--linea);
display:grid;gap:12px}
.pc--pro ul{border-color:var(--linea-clara)}
/* Viñeta absoluta y no en rejilla: varias de estas líneas llevan dentro,
y con grid cada etiqueta se convertía en una columna y partía la frase. */
.pc li{position:relative;padding-left:19px;font-size:.95rem;line-height:1.45}
.pc li::before{content:'';position:absolute;left:0;top:9px;
width:7px;height:7px;border-radius:50%;background:var(--fucsia)}
.pc--pro li::before{background:var(--rosa)}
.pc .btn{width:100%}
/* Deshabilitado con color propio: bajar la opacidad sobre tinta ensucia el
rosa y deja un botón que parece roto, no pendiente. */
.pc--pro .btn[disabled]{opacity:1;background:transparent;color:var(--humo-claro);
border-color:var(--linea-clara)}
.pc__nota{margin:14px 0 0;font-size:.82rem;line-height:1.45;color:var(--humo)}
.pc--pro .pc__nota{color:var(--humo-claro)}
/* ══════════ Cierre y pie ══════════ */
.cierre{text-align:center}
.cierre .t{margin-inline:auto;max-width:16ch}
.cierre .s__sub{margin-inline:auto;text-align:center}
/* ── Contacto ──
Formulario y nada más: ni WhatsApp ni redes. Una sola vía es una sola
decisión para quien escribe, y además deja el mensaje por escrito, que en
una reclamación de cobro protege a las dos partes.
Columna estrecha (620) aunque la sección sea ancha: un campo de texto de
1.100 px se lee mal y parece un formulario de trámite. */
.contacto__form{
display:grid;gap:18px;margin-top:34px;max-width:620px;
padding:30px 32px;
background:#FFF;border:1px solid var(--linea);border-radius:var(--r);
}
.contacto__form textarea{
background:var(--papel);border:1.5px solid transparent;border-radius:var(--r-sm);
padding:13px 15px;width:100%;resize:vertical;min-height:120px;line-height:1.5;
transition:border-color .16s,background .16s,box-shadow .16s;
}
.contacto__form textarea:hover{background:var(--papel-2)}
.contacto__form textarea:focus{
outline:none;background:#FFF;border-color:var(--fucsia);
box-shadow:0 0 0 4px rgba(12,110,103,.16);
}
/* Los campos del sitio usan --dato para el foco, pero --dato NO está
definida en esta hoja: la regla se descartaba y el foco no se veía.
--fucsia sí existe aquí y da 5,62:1 sobre el papel. */
.contacto__form .field input:focus{
border-color:var(--fucsia);box-shadow:0 0 0 4px rgba(12,110,103,.16);
}
.contacto__form textarea.err{border-color:#B4472F;background:#FBEDEA}
.contacto__form .btn{justify-self:start}
/* La trampa para robots. Fuera de la pantalla y no display:none: hay
rellenadores automáticos que ignoran lo que está oculto del todo, y este
campo solo sirve si lo encuentran. aria-hidden y tabindex -1 lo sacan del
camino de quien navega con teclado o lector. */
.contacto__trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* min-height para que el aviso no empuje el botón al aparecer. */
.contacto__aviso{margin:0;font-size:.88rem;min-height:1.3em;color:var(--humo)}
.contacto__aviso--mal{color:#B4472F}
.contacto__aviso--bien{color:#0C6E67;font-weight:700}
.pie{background:var(--tinta);color:var(--humo-claro);padding:52px 0 40px;font-size:.85rem}
.pie .wrap{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.pie a{color:var(--papel);text-decoration:none;border-bottom:1px solid var(--linea-clara)}
/* ══════════ Móvil ══════════ */
@media (max-width:620px){
.hero__acciones .btn{flex:1 1 100%}
.hero__foto img{object-position:64% 18%}
.cifras{gap:22px}
.cifra{flex:1 1 40%}
}
/* ══════════════════════════════════════════════════════════════════════
Secciones del modelo completo
══════════════════════════════════════════════════════════════════════ */
/* ── Dos columnas: argumento a un lado, objeto al otro ── */
.dos{display:grid;gap:clamp(34px,5vw,64px);align-items:center}
@media (min-width:940px){ .dos{grid-template-columns:1fr 1.05fr} }
/* ── Lista numerada con filetes ── */
.filas--dos{margin-top:30px}
@media (min-width:620px){
.filas--dos{display:grid;grid-template-columns:1fr 1fr;column-gap:26px}
.filas--dos li:nth-child(2){border-top:1px solid var(--linea)}
}
/* ── Maqueta de la semana ──
Enseña la estructura como si fuera un objeto del producto. A propósito no
lleva minutos: la sesión media dura hoy 95 min y ese número juega en contra
hasta que se decida qué hacer con la duración. */
.maqueta{
margin:0;background:var(--tinta);color:var(--papel);border-radius:var(--r);
padding:22px;box-shadow:0 30px 60px rgba(20,18,15,.22);
}
.maqueta__cab{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding-bottom:16px;border-bottom:1px solid var(--linea-clara);
font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.maqueta__cab span{color:var(--humo-claro)}
.maqueta__cab b{color:var(--rosa)}
.sesion{
display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
padding:14px 0;border-bottom:1px solid var(--linea-clara);
}
.sesion__foto{width:74px;height:52px;border-radius:9px;overflow:hidden;flex:0 0 auto;background:var(--tinta-2)}
.sesion__foto img{width:100%;height:100%;object-fit:cover}
.sesion__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sesion__txt small{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
text-transform:uppercase;color:var(--humo-claro)}
.sesion__txt b{font-size:1.02rem;line-height:1.2}
.sesion em{font-family:var(--mono);font-style:normal;font-size:.7rem;color:var(--rosa);white-space:nowrap}
.maqueta__pie{padding-top:16px}
.barra{display:block;height:5px;border-radius:99px;background:var(--linea-clara);overflow:hidden}
.barra i{display:block;height:100%;background:var(--rosa)}
.maqueta__pieTxt{display:flex;justify-content:space-between;gap:12px;margin-top:10px;
font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.maqueta__pieTxt span{color:var(--humo-claro)}
.maqueta__pieTxt b{color:var(--rosa)}
/* ── Franja de transparencia ── */
.franja{background:var(--tinta-2);color:var(--humo-claro);padding:30px 0;
border-top:1px solid var(--linea-clara)}
.franja .wrap{display:grid;gap:8px}
@media (min-width:820px){ .franja .wrap{grid-template-columns:220px 1fr;gap:26px} }
.franja b{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--rosa)}
.franja p{margin:0;font-size:.86rem;line-height:1.55;max-width:78ch}
/* ══════════ Tarjeta viva del hero ══════════
Réplica del liveCard de la referencia (335 px, abajo a la derecha,
flotando 9 px cada 5 s y con el punto latiendo) con una diferencia de
fondo: ningún dato es de atrezo. Las 8 señales, el objetivo, los tres
días y las dos propiedades salen del producto real. */
/* ⚠ Estaba pensada para FLOTAR SOBRE LA FOTO del hero: fondo oscuro
translúcido, texto claro y líneas blancas al 15 %. Cuando bajó a esta
sección —que es papel— el resultado fue una tarjeta gris sucia con el
texto lavado y las separaciones invisibles: los tres bloques quedaban
sueltos, sin nada que los cosiera.
Aquí se rehace para fondo claro. Y se cose: una sola superficie blanca,
una sola familia de líneas, y la cabecera en tinta como techo de la
tarjeta, de modo que el número, los días y las propiedades se lean como
partes de la MISMA ficha y no como tres cajas apiladas. */
.viva{
position:absolute;right:26px;bottom:90px;z-index:3;width:335px;max-width:calc(100vw - 48px);
background:#FFF;border:1px solid var(--linea);border-radius:20px;
padding:0;overflow:hidden;
box-shadow:0 18px 44px rgba(29,42,44,.10), 0 2px 8px rgba(29,42,44,.05);
}
/* La cabecera es el techo de la ficha: barra de tinta de lado a lado, no un
texto con una raya debajo. Es lo que la convierte en una sola pieza. */
.viva__cab{
display:flex;justify-content:space-between;align-items:center;gap:12px;
font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
background:var(--tinta);color:var(--papel);padding:12px 18px;
}
.viva__cab span{display:inline-flex;align-items:center;gap:7px;color:#C2CDCE}
.viva__cab i{width:6px;height:6px;border-radius:50%;background:var(--rosa);
animation:late 1.8s ease-in-out infinite}
@keyframes late{0%,100%{opacity:1}50%{opacity:.42}}
.viva__cab b{color:var(--rosa)}
.viva__dato{display:flex;justify-content:space-between;align-items:center;gap:14px;
padding:16px 18px;border-bottom:1px solid var(--linea)}
.viva__dato small{display:block;font-family:var(--mono);font-size:.58rem;
letter-spacing:.13em;text-transform:uppercase;color:var(--humo)}
/* El número manda en la tarjeta, como el «92 %» de la referencia — pero el
dato es de los que el motor calcula de verdad: las señales del diagnóstico
que se han podido aplicar. Un porcentaje de ajuste inventado quedaría
igual de bien y no significaría nada. */
.viva__dato strong{display:block;font-family:var(--display);font-stretch:118%;
font-weight:900;font-size:2.9rem;line-height:.92;letter-spacing:-.04em;
margin-top:2px;color:var(--tinta)}
.viva__dato strong em{font-style:normal;font-size:.95rem;color:var(--fucsia);
letter-spacing:0;margin-left:1px}
.viva__dato > span{display:grid;grid-template-columns:auto auto;gap:2px 9px;align-items:center;text-align:left}
.viva__dato > span svg{width:22px;height:22px;grid-row:1/3;color:var(--fucsia)}
.viva__dato > span b{font-size:.78rem;line-height:1.1;color:var(--tinta)}
.viva__dato > span small{letter-spacing:.08em}
.viva__dias{display:grid;gap:0;padding:6px 18px 12px}
/* Cada día es una fila con su propia línea, como un extracto: así los tres
se leen como una lista y no como tres frases sueltas. */
.viva__dias span{display:grid;grid-template-columns:34px 1fr auto;gap:10px;
align-items:baseline;padding:9px 0;border-bottom:1px solid var(--linea)}
.viva__dias span:last-child{border-bottom:0}
.viva__dias b{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--fucsia)}
.viva__dias em{font-style:normal;font-size:.85rem;font-weight:500;color:var(--tinta)}
.viva__dias small{font-family:var(--mono);font-size:.6rem;color:var(--humo)}
/* El pie, sobre papel gris, cierra la ficha por abajo igual que la cabecera
la cierra por arriba. Sin él las dos propiedades quedaban flotando. */
.viva__chips{display:flex;gap:8px;flex-wrap:wrap;
padding:12px 18px;background:var(--papel);border-top:1px solid var(--linea)}
.viva__chips span{
font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
border:1px solid var(--linea);border-radius:999px;padding:5px 11px;color:var(--humo);
background:#FFF;
}
/* En pantallas cortas taparía el titular: fuera. El contenido que enseña ya
está entero en la sección 03. */
/* El tope por altura ya no hace falta: fuera del hero, la tarjeta no
compite con nada por el alto de la pantalla. */
@media (prefers-reduced-motion:reduce){ .viva,.viva__cab i{animation:none} }
/* ═══════════ HERO: una sola maqueta, la foto a sangre ═══════════
Aquí convivían tres capas de reglas contradictorias escritas en momentos
distintos —una superponía el texto, otra apilaba la foto encima del texto
sin condición, y una tercera volvía a superponer solo a partir de 900px—.
El resultado era que por debajo de 900 ganaba la apilada y la portada se
partía en dos bloques. Se sustituyen por esta única maqueta.
El modelo es el de la referencia: la foto ocupa el hero entero y el texto
vive sobre ella, en el espacio negativo de la izquierda (que en este
archivo ya es pared vacía). El velo solo tiene que hacer legible el texto,
no oscurecer la escena.
⚠ Esto revierte una decisión anterior anotada en la hoja («el cliente
quiere la imagen entera y sin nada encima, en todos los anchos»). Se
cambia a petición expresa; conviene confirmarlo con quien la pidió. */
/* En móvil la barra es sólida desde el principio: la foto apilada es baja y
una barra flotante se la comería. Opaca y sin desenfoque, por lo mismo que
la clara: al 88 % cambiaba de aspecto según la sección que pasara por
detrás. */
.nav{position:sticky;background:#1D2A2C}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__foto{position:absolute;inset:0;aspect-ratio:auto}
/* Portada2 es panorámica (1920x1080) y ya viene compuesta con la mitad
izquierda vacía: ahí va el texto sin tapar nada. El recorte se ancla a la
derecha para no perderla a ella cuando la pantalla se estrecha. */
.hero__foto img{object-position:78% center}
.hero__velo{display:block;background:
linear-gradient(90deg,rgba(29,42,44,.82) 0%,rgba(29,42,44,.52) 38%,rgba(29,42,44,.06) 62%),
linear-gradient(180deg,rgba(29,42,44,.45) 0%,rgba(29,42,44,0) 30%,rgba(29,42,44,.75) 100%)}
.hero .wrap{display:block;position:relative;padding-top:86px;padding-bottom:64px}
.hero__caja{max-width:min(620px,46vw)}
/* La tarjeta viva flota sobre el borde derecho, como en la referencia. Solo
cabe cuando hay ancho de sobra: por debajo se retira en vez de encogerse
hasta ser ilegible. */
/* La tarjeta de «semana generada» sale del hero.
Flotaba sobre la esquina derecha de la foto, y con la portada nueva ahí
está la protagonista: la tarjeta la tapaba. Mover la foto no es opción
—está compuesta así— y encoger la tarjeta la deja ilegible.
Así que baja a la sección de «cómo funciona», que es donde de verdad
pinta algo: allí se explica el recorrido y la tarjeta es el ejemplo de lo
que sale al final. En el hero era decoración; ahí es argumento. */
.viva{display:none}
@media (min-width:900px){
.viva{
display:block;position:static;width:min(380px,100%);margin:0;
justify-self:end;align-self:center;
}
}
/* Móvil: la foto sigue siendo el fondo, pero la protagonista está en el 66 %
del ancho, así que el recorte se ancla ahí y el texto baja al tercio
inferior, donde el velo ya es opaco. */
@media (max-width:899px){
.hero{min-height:88svh}
.hero__caja{max-width:none}
.hero .wrap{padding-top:104px;padding-bottom:48px}
/* va aquí y no en la regla de 640 de más arriba: esta hoja fija después
object-position:right, que por orden de cascada la anulaba. */
/* «Centrar y basta» no bastaba. El hero móvil crece con el contenido del
texto —no con el alto de la pantalla—, así que casi siempre acaba más
alto de lo que la foto necesita: sobra recorte a los LADOS, no arriba
ni abajo. Centrado en horizontal partía ese sobrante a partes iguales,
y la mitad derecha se llevaba el moño por delante.
Anclado al 97 % del ancho y al 14 % del alto por DOS motivos, y los dos
hay que respetarlos si se vuelve a tocar:
· la cabeza entra completa por arriba;
· el titular cae sobre la chaqueta negra y el fondo del gimnasio, no
sobre el top blanco. Con el anclaje anterior (84 % 20 %) las tres
líneas blancas del h1 aterrizaban justo encima del top, y ahí
blanco sobre blanco no se lee.
Ojo: la ventana visible en móvil es ~la mitad del ancho de la foto, así
que este porcentaje NO es un ajuste fino, mueve el encuadre entero. */
.hero__foto img{object-position:97% 14%}
/* El titular arranca sobre el 40 % del alto, justo donde la foto tiene
pelo y cara. El velo tiene que estar ya cerrado ahí, no al 72 %. */
.hero__velo{background:
linear-gradient(180deg,rgba(29,42,44,.5) 0%,rgba(29,42,44,.22) 20%,rgba(29,42,44,.74) 42%,rgba(29,42,44,.92) 68%,rgba(29,42,44,.97) 100%)}
}
/* ═══════════ Tarjetas de programas: fotos vivas y a tamaño completo ═══════
Las fotos respiran en continuo como el hero —no solo al pasar el ratón—,
con la animación desfasada para que las tres no latan a la vez. Y la
sección rompe el ancho editorial (1180) hasta 1520: con tres columnas las
tarjetas pasan de ~370 a ~480 px y la foto de retrato se ve casi entera
(caja 0,83 frente a foto 0,80). El hover conserva su empujón. */
#programas .wrap{max-width:1520px}
.prog__foto{animation:progRespira 14s ease-in-out infinite alternate}
.prog:nth-child(2) .prog__foto{animation-delay:-4.6s}
.prog:nth-child(3) .prog__foto{animation-delay:-9.3s}
@keyframes progRespira{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.prog:hover .prog__foto{animation-play-state:paused;transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.prog__foto{animation:none}}
/* ═══════════ El hero ocupa TODA la parte de arriba ═══════════
La foto llena la primera pantalla completa (100svh) desde y=0, y la barra
flota transparente encima — el fondo se lo da la propia foto, que arriba
es techo oscuro. La barra sólida solo sobrevive en móvil, donde la foto
apilada es baja y una barra flotante se la comería. En pantallas más
anchas que 16:9 el recorte vertical se reparte centrado; el rostro entra
con margen hasta proporciones ~2.1, más allá de cualquier monitor normal. */
@media (min-width:900px){
/* fixed y no absolute. Con absolute la barra se iba con el hero: pulsabas
«Método», bajabas, y para volver a «Entrar» o a «Crear mi plan» había
que subir toda la página a mano. La acción principal desaparecía en
cuanto empezabas a leer, que es justo cuando hace falta.
Se queda transparente sobre la foto —que arriba ya es oscura— y se
vuelve sólida en cuanto se baja, con .nav--solida. */
.nav{position:fixed;top:0;left:0;right:0;background:transparent;
-webkit-backdrop-filter:none;backdrop-filter:none}
.hero{height:100svh}
}
/* ═══════════ Filtro de la foto del hero ═══════════
Revelado suave que favorece la piel: un punto más de luz, calidez sutil
(sepia bajo) y color apenas más vivo. Valores contenidos a propósito —
más allá de esto la imagen empieza a verse procesada y las luces verdes
viran de tono. */
.hero__foto img{
filter:brightness(1.06) contrast(1.02) saturate(1.07) sepia(.045);
}
/* ═══════════ Filete bajo la barra de navegación ═══════════
Una línea de separación bajo Experiencia · Programas · Gratis · Método ·
Premium. Usa la hairline clara del propio sistema (--linea-clara): sobre
la foto se lee como un trazo fino elegante, y en la barra sólida de móvil
separa la navegación del contenido. */
.nav{border-bottom:1px solid var(--linea-clara)}
/* ═══════════ Más movimiento ═══════════
Sube un grado la vida de la página: la respiración del hero y de las
tarjetas gana amplitud y ritmo, y la tarjeta de la semana flota más alto.
(La última definición de un @keyframes es la que vale: estas pisan a las
anteriores sin tocarlas.) Siguen respetando prefers-reduced-motion. */
@keyframes respira{from{transform:scale(1.02)}to{transform:scale(1.10)}}
.hero__foto img{animation-duration:12s}
@keyframes progRespira{from{transform:scale(1.03)}to{transform:scale(1.12)}}
.prog__foto{animation-duration:11s}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* ═══════════ Banner de consentimiento ═══════════
La lógica es la de track.js, compartida con la aplicación; aquí solo se
viste con los tokens editoriales, acotado a #consent para no tocar nada
más. El botón de aceptar va en rosa (el acento sobre tinta) y el de solo
esenciales como línea fantasma. */
#consent{position:fixed;left:0;right:0;bottom:0;z-index:90;
background:rgba(20,18,15,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border-top:1px solid var(--linea-clara);color:var(--papel);padding:14px 22px;
display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
#consent .consent__txt{margin:0;font-size:.85rem;line-height:1.5;max-width:62ch;color:#C2CDCE}
#consent .consent__btns{display:flex;gap:9px;flex-wrap:wrap}
#consent .btn{padding:11px 20px;font-size:.7rem;background:var(--rosa);color:var(--tinta);border-color:var(--rosa)}
#consent .btn--ghost{background:transparent;border-color:var(--linea-clara);color:var(--papel)}
/* El panel de categorías, plegado hasta que se pulsa «Configurar». Ocupa
una fila entera de la barra —el banner es flex con wrap— porque si se
cuela entre el texto y los botones queda en una columna estrecha y los
interruptores dejan de leerse. */
#consent .consent__panel{
flex-basis:100%;order:1;width:100%;max-width:62ch;margin:0 auto;
display:flex;flex-direction:column;gap:12px;
padding:15px 17px;border-radius:12px;
background:rgba(255,255,255,.05);border:1px solid var(--linea-clara);
}
#consent .consent__cat{
display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
font-size:.78rem;line-height:1.5;color:#C2CDCE;cursor:pointer;
}
#consent .consent__cat b{display:block;color:var(--papel);font-size:.83rem;margin-bottom:2px}
#consent .consent__cat input{
width:17px;height:17px;margin:2px 0 0;accent-color:var(--rosa);cursor:pointer;
}
/* Las necesarias van marcadas y bloqueadas; se dibujan apagadas para que
se vea de un golpe que ahí no hay ninguna decisión pendiente. */
#consent .consent__cat--fija{opacity:.6;cursor:default}
#consent .consent__cat--fija input{cursor:not-allowed}
#consent .consent__panel .btn{align-self:flex-start}
/* «Configurar» no decide nada, así que no compite con los dos botones. */
#consent .consent__mas{
background:none;border:0;padding:0 6px;
color:var(--papel);font:inherit;font-size:.78rem;
text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
#consent .consent__mas:hover{color:#fff}
@media (max-width:680px){
#consent .consent__panel{padding:13px;max-height:44vh;overflow-y:auto}
#consent .consent__mas{flex-basis:100%;text-align:left;padding:4px 0}
}
/* ═══════════════════════════════════════════════════════════════════════
ESTRUCTURA v6 · componentes nuevos
═══════════════════════════════════════════════════════════════════════
La portada pasa de ocho secciones a cinco. Se retiran el método de ocho
señales y el test de muñeca —detalle técnico que no decide una compra— y
el recuento de ejercicios del generador. Lo que queda es el recorrido:
cómo funciona → para quién → qué recibes → qué compras → cuánto cuesta.
═══════════════════════════════════════════════════════════════════════ */
/* ── Señal de scroll ─────────────────────────────────────────────────── */
.baja{
position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;
display:flex;align-items:center;gap:11px;
font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--humo-claro);white-space:nowrap;
}
.baja i{width:1px;height:26px;background:linear-gradient(var(--rosa),transparent);
animation:baja 1.7s ease-in-out infinite}
@keyframes baja{
0%{transform:scaleY(.2);transform-origin:top}
50%{transform:scaleY(1);transform-origin:top}
100%{transform:scaleY(.2);transform-origin:bottom}
}
/* Con la tarjeta viva delante y poco alto, la señal estorba más que ayuda. */
@media (max-height:760px),(max-width:620px){ .baja{display:none} }
@media (prefers-reduced-motion:reduce){ .baja i{animation:none} }
/* ── 01 · Tres objetos, no tres párrafos ─────────────────────────────── */
.viaje{display:grid;gap:18px;margin-top:60px}
@media (min-width:860px){ .viaje{grid-template-columns:repeat(3,1fr)} }
.vj{border:1px solid var(--linea);border-radius:var(--r);background:#FAFCFC;
padding:14px 14px 28px;transition:transform .3s,box-shadow .3s}
.vj:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(29,42,44,.10)}
.vj__obj{height:250px;display:grid;place-items:center;margin-bottom:24px;
border-radius:var(--r-sm);overflow:hidden;position:relative}
.vj__obj--perfil,.vj__obj--medida{
background:radial-gradient(circle at 50% 45%,#3A332A,var(--tinta) 66%)}
.vj__obj--plan{background:linear-gradient(150deg,#D5E6E3,#9CC9C2)}
.vj__n{margin-left:14px;font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--fucsia)}
.vj h3{margin:11px 14px 7px;font-family:var(--display);font-stretch:112%;font-weight:900;
font-size:1.5rem;letter-spacing:-.03em}
.vj p{margin:0 14px;font-size:.9rem;line-height:1.55;color:var(--humo)}
/* Objeto 1: el perfil y sus etiquetas orbitando */
.orbe{position:relative;display:grid;place-items:center;width:88px;height:88px;
border-radius:50%;background:var(--rosa);color:var(--tinta);
box-shadow:0 0 0 22px rgba(119,214,203,.08),0 0 0 52px rgba(119,214,203,.04)}
.orbe>svg{width:38px;height:38px}
.orbe__et{position:absolute;width:max-content;padding:8px 11px;border-radius:9px;
border:1px solid var(--linea-clara);background:#26383A;color:var(--papel);
font-family:var(--mono);font-style:normal;font-size:.56rem;letter-spacing:.1em;
text-transform:uppercase;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.orbe__et--1{left:-88px;top:-30px}
.orbe__et--2{right:-74px;top:20px}
.orbe__et--3{left:-64px;bottom:-46px}
/* Objeto 2: el instrumento de medida */
.instrumento{display:block;width:210px;padding:20px;border-radius:18px;
border:1px solid var(--linea-clara);background:rgba(255,255,255,.05);
color:var(--papel);box-shadow:0 22px 50px rgba(0,0,0,.28)}
.instrumento>svg{width:24px;height:24px;color:var(--rosa)}
.instrumento>b{display:inline-block;margin:0 5px 0 32px;
font-family:var(--display);font-stretch:112%;font-size:2.5rem;letter-spacing:-.03em}
.instrumento>small{color:var(--rosa);font-family:var(--mono);font-size:.7rem}
.instrumento__barra{display:block;height:6px;margin:17px 0 10px;border-radius:99px;
background:rgba(255,255,255,.14);overflow:hidden}
.instrumento__barra em{display:block;width:72%;height:100%;background:var(--rosa)}
.instrumento__pie{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--humo-claro)}
/* Objeto 3: la ficha del plan, ligeramente girada.
Las medidas están ajustadas para que la ficha entera quepa en los 250px
de .vj__obj: con padding 20 y renglones de 22 se iba a 267 y la caja,
que recorta, se la comía por arriba y por abajo. */
.ficha{display:block;width:216px;padding:17px;border-radius:16px;background:#fff;
color:var(--tinta);box-shadow:0 24px 55px rgba(35,42,28,.22);transform:rotate(-3deg)}
.ficha__cab{display:flex;align-items:center;gap:8px;font-family:var(--mono);
font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--humo)}
.ficha__cab svg{width:15px;height:15px;color:var(--ciruela)}
.ficha>b{display:block;margin:11px 0;font-family:var(--display);font-stretch:112%;
font-weight:900;font-size:1.15rem;letter-spacing:-.03em}
.ficha>i{display:block;height:17px;margin:5px 0;border-radius:6px;
background:#EDEFE8;overflow:hidden}
.ficha>i em{display:block;height:100%;background:var(--rosa)}
.ficha>small{display:block;margin-top:10px;font-family:var(--mono);
font-size:.58rem;color:var(--ciruela)}
/* ── 03 · El único bloque de color a sangre ──────────────────────────── */
.s--acento{background:var(--rosa);color:var(--tinta)}
.s--acento .s__cap{color:#0A5B55}
.s--acento .t i{color:#0A5B55}
.s--acento .s__sub{color:#5C503F}
.s--acento .filas{border-color:rgba(29,42,44,.22)}
.s--acento .filas li{border-color:rgba(29,42,44,.16)}
.s--acento .filas b{color:#0A5B55}
.btn--tinta{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
/* ── 04 · Las doce semanas como línea de tiempo ──────────────────────── */
.linea{display:grid;gap:16px;margin:56px 0 0;padding:0;list-style:none;
counter-reset:bloque}
@media (min-width:900px){ .linea{grid-template-columns:repeat(3,1fr)} }
.lb{position:relative;display:flex;flex-direction:column;gap:9px;
padding:26px 22px;border:1px solid var(--linea-clara);border-radius:var(--r-sm);
background:linear-gradient(150deg,var(--tinta-2),var(--tinta))}
.lb--libre{background:var(--rosa);color:var(--tinta);border-color:var(--rosa)}
/* La barra superior es el hilo de la línea de tiempo: llena en el bloque
incluido, tenue en los dos que hay que comprar. */
.lb::before{content:'';position:absolute;left:22px;right:22px;top:0;height:3px;
border-radius:0 0 3px 3px;background:rgba(255,255,255,.16)}
.lb--libre::before{background:var(--tinta)}
.lb__et{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--rosa)}
.lb--libre .lb__et{color:#0A5B55}
.lb h3{margin:0;font-family:var(--display);font-stretch:112%;font-weight:900;
font-size:1.8rem;letter-spacing:-.035em}
.lb__rango{font-family:var(--mono);font-size:.72rem;color:var(--humo-claro)}
/* Sobre la arcilla, --humo se queda en 3.7:1. Este pardo da 5.2:1. */
.lb--libre .lb__rango{color:#3D4B4C}
.lb p{margin:0;font-size:.92rem;line-height:1.5;color:#AFBBBC}
.lb--libre p{color:#3D4B4C}
.lb__sem{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:16px;
border-top:1px solid var(--linea-clara)}
.lb--libre .lb__sem{border-color:rgba(29,42,44,.18)}
.lb__sem i{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;
border:1px solid var(--linea-clara);font-family:var(--mono);font-style:normal;
font-size:.66rem;color:var(--humo-claro)}
.lb--libre .lb__sem i{border-color:rgba(29,42,44,.22);color:var(--humo)}
.lb__sem i.on{background:var(--tinta);color:var(--rosa);border-color:var(--tinta)}
/* ── Cierre con resplandor ───────────────────────────────────────────── */
.cierre{position:relative;overflow:hidden}
.cierre::before{content:'';position:absolute;z-index:0;left:50%;bottom:-260px;
width:min(680px,120vw);height:380px;transform:translateX(-50%);border-radius:50%;
background:var(--fucsia);filter:blur(130px);opacity:.20;pointer-events:none}
.cierre .wrap{position:relative;z-index:1}
/* ── 04 · Las ocho señales ───────────────────────────────────────────────
Rejilla de filetes en vez de lista: las ocho caben en un golpe de vista y
cada una lleva pegada la consecuencia, que es lo que las hace creíbles. */
.dos--metodo{align-items:start}
.senales{list-style:none;margin:0;padding:0;display:grid;gap:1px;
background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-sm);
overflow:hidden}
@media (min-width:620px){ .senales{grid-template-columns:1fr 1fr} }
.senales li{display:grid;grid-template-columns:34px 1fr;gap:12px;
align-items:start;padding:20px 18px;background:var(--papel-2)}
.senales b{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
color:var(--fucsia);padding-top:3px}
.senales span{display:block;font-size:.84rem;line-height:1.45;color:var(--humo)}
.senales strong{display:block;margin-bottom:3px;font-family:var(--display);
font-stretch:112%;font-weight:900;font-size:1.05rem;letter-spacing:-.02em;
color:var(--tinta)}
/* ── 05 · La medición: foto con panel encima ─────────────────────────────
El tratamiento viene de la referencia; el texto que lo acompaña es el del
sitio, que no promete un somatotipo. */
.mide{position:relative;margin:0;border-radius:var(--r);overflow:hidden;
border:1px solid var(--linea-clara);min-height:420px;display:flex}
.mide img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.mide::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(0deg,rgba(29,42,44,.88) 0%,rgba(29,42,44,.12) 55%)}
.mide__panel{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;
padding:18px;border:1px solid var(--linea-clara);border-radius:var(--r-sm);
background:rgba(24,20,16,.68);backdrop-filter:blur(14px)}
.mide__panel>span{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--humo-claro)}
.mide__panel>b{display:block;margin:6px 0 14px;font-family:var(--display);
font-stretch:112%;font-weight:900;font-size:1.4rem;letter-spacing:-.03em;
color:var(--papel)}
.mide__barra{display:flex;align-items:center;gap:10px}
.mide__barra i{width:58%;height:4px;border-radius:99px;
background:linear-gradient(90deg,var(--rosa) 0 70%,rgba(255,255,255,.18) 70%)}
.mide__barra em{font-style:normal;font-family:var(--mono);font-size:.58rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--humo-claro)}
.mide__chip{position:absolute;z-index:2;right:18px;top:18px;min-width:112px;
padding:13px 15px;border-radius:var(--r-sm);background:var(--rosa);color:var(--tinta);
box-shadow:0 16px 40px rgba(0,0,0,.28)}
.mide__chip>span{display:block;font-family:var(--mono);font-size:.56rem;
letter-spacing:.14em;text-transform:uppercase;color:#0A5B55}
.mide__chip>b{display:block;margin-top:3px;font-family:var(--display);
font-stretch:112%;font-weight:900;font-size:1.5rem;letter-spacing:-.03em}
.mide__chip small{font-size:.7rem}
/* ── 06 · La línea de tiempo, ahora sobre crema ──────────────────────────
La sección pasó a papel-2 para no dejar dos bloques de tinta seguidos
(muñeca y programa), así que los bloques necesitan su variante clara. */
.s--papel2 .lb{background:#FAFCFC;border-color:var(--linea);color:var(--tinta)}
.s--papel2 .lb::before{background:rgba(29,42,44,.14)}
.s--papel2 .lb__et{color:var(--fucsia)}
.s--papel2 .lb__rango{color:var(--humo)}
.s--papel2 .lb p{color:var(--humo)}
.s--papel2 .lb__sem{border-color:var(--linea)}
.s--papel2 .lb__sem i{border-color:rgba(29,42,44,.22);color:var(--humo)}
.s--papel2 .lb--libre{background:var(--rosa);border-color:var(--rosa)}
.s--papel2 .lb--libre::before{background:var(--tinta)}
.s--papel2 .lb--libre .lb__et{color:#0A5B55}
/* Especificidad: .s--papel2 .lb p (0,2,1) ganaba a .lb--libre p (0,1,1) y
devolvía el texto a --humo, que sobre arcilla se queda en 3.7:1. */
.s--papel2 .lb--libre p,.s--papel2 .lb--libre .lb__rango{color:#3D4B4C}
.s--papel2 .lb--libre .lb__sem i.on{background:var(--tinta);color:var(--rosa);
border-color:var(--tinta)}
/* Aviso: lo que la medición NO dice. Va en la misma sección para que no se
pueda leer la promesa sin leer el límite. */
.aviso{
margin:26px 0 0;padding:16px 18px;border-left:3px solid var(--rosa);
background:rgba(119,214,203,.08);font-size:.88rem;line-height:1.5;color:#C2CDCE;
}
.s:not(.s--tinta) .aviso{background:rgba(12,110,103,.06);
border-left-color:var(--fucsia);color:var(--humo)}
/* ── Páginas de perfil ───────────────────────────────────────────────────
Tres páginas reales —mujeres, hombres, adultos— en vez de tres anclas
dentro de la aplicación. Comparten esta hoja porque comparten el lenguaje;
lo único propio es una barra opaca (no hay foto a pantalla completa detrás
en todas) y un hero más bajo, porque aquí ya no hay que convencer de nada:
quien llega ya eligió. */
/* Barra clara. Un slab oscuro sobre una página clara corta la pantalla en
dos y pesa más que el contenido; una barra del color del papel se apoya en
él y deja que mande la foto. El logo, que es blanco, se invierte. */
/* position:fixed, no sticky: sticky solo pega mientras el elemento esté en
su sitio del flujo, y esta barra vive sobre un hero a pantalla completa.
Con !important porque la regla de arriba (min-width:900px) es igual de
específica y va después en la hoja. */
.nav--solida{
position:fixed !important;top:0;left:0;right:0;
/* OPACA, sin alfa y sin blur. Estaba al 92 % con desenfoque detrás, y eso
hace que la barra cambie de aspecto según por encima de qué sección
pase: sobre las claras se ve blanca y sobre las oscuras —«Para quién»,
«El test de la muñeca», el cierre— se lava y parece medio transparente.
Una barra que acompaña toda la página tiene que verse siempre igual;
si cambia con el fondo, se lee como un fallo de la página.
Y el desenfoque tampoco era gratis: backdrop-filter obliga al navegador
a recomponer lo que hay detrás en cada píxel de scroll, y aquí no
aporta nada porque el fondo ya no deja pasar nada. */
background:#F4F6F6;
-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
border-bottom:1px solid var(--linea);color:var(--tinta);
box-shadow:0 1px 12px rgba(29,42,44,.06);
}
/* El logo claro no se ve sobre papel: se sirve el de tinta. */
.nav--solida .logo__img{content:url('../img/logo-ypf-tinta.webp')}
/* Literales y no var(): estas cuatro reglas invierten el color de la barra
cuando pasa de la foto al papel, y si una sola falla el menú se queda en
gris claro sobre fondo claro — ilegible justo en la barra que ahora
acompaña toda la página. Son los mismos valores que --humo, --fucsia y
--tinta; escribirlos aquí los pone a salvo de cualquier problema de
resolución de variables. */
.nav--solida .nav__menu a{color:#566264}
.nav--solida .nav__menu a:hover{color:#0C6E67}
.nav--solida .nav__entrar{color:#1D2A2C}
.nav--solida .nav__entrar:hover,
.nav--solida .nav__entrar--pro{color:#0C6E67}
.nav--solida .logo__lema{color:#0C6E67}
/* Sin filtro: el logo nuevo es bicolor y sobre claro se sirve el archivo
logo-ypf-tinta.webp, que ya trae el logotipo en tinta. */
.nav--solida .btn--claro{background:#0C6E67;color:#fff;border-color:#0C6E67}
.hero--perfil{min-height:72svh}
.hero--perfil .wrap{padding-top:120px;padding-bottom:56px}
.hero--perfil .t{max-width:14ch}
@media (max-width:899px){
.hero--perfil{min-height:64svh}
.hero--perfil .wrap{padding-top:150px}
}
/* En estas páginas el cierre va sobre tinta y centrado. */
.s--tinta.cierre .s__sub{color:#C2CDCE}
/* ── La captura del producto en la sección 01 ────────────────────────────
Se había retirado al rehacer la sección con objetos dibujados. Vuelve:
los objetos explican el recorrido en abstracto, pero solo la captura
enseña el producto real. Van juntas — captura arriba, tarjetas debajo. */
.lienzo{
margin:0 auto clamp(30px,5vw,52px);max-width:860px;
border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
background:var(--papel-2);box-shadow:0 24px 60px rgba(29,42,44,.10);
}
/* El archivo es una captura vertical de 1003x1568. A ancho completo levanta
un muro de metro y medio y es la mitad de la sensacion de «pagina
larguisima». Se encuadra como captura de producto y se ancla arriba, que
es donde la pantalla tiene la informacion. */
.lienzo img{width:100%;height:auto;display:block;
aspect-ratio:3/2;object-fit:cover;object-position:center top}
@media (max-width:620px){ .lienzo img{aspect-ratio:4/3} }
/* Con la captura delante, las tarjetas ya no necesitan tanto aire encima. */
.viaje{margin-top:0}
/* ── Las dos fotos del test de muñeca ────────────────────────────────────
La cinta y el test de dedos son los dos métodos que el motor combina;
enseñar solo uno contaba media historia. */
.mide__par{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:100%;height:100%}
.mide__par img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
/* El panel inferior se apoya sobre las dos, así que el velo tiene que
cubrir el ancho completo y no solo una. */
@media (max-width:520px){
.mide__par{grid-template-columns:1fr}
.mide__par img:last-child{display:none}
}
/* ── Logo ────────────────────────────────────────────────────────────────
Sustituye al monograma que se dibujaba con tres . El archivo es blanco
Es bicolor —el símbolo de las alas en cian de marca, el logotipo en
blanco— y viene en dos archivos: logo-ypf.webp para fondos oscuros y
logo-ypf-tinta.webp para fondos claros. Dos archivos y no un filtro CSS:
cualquier hue-rotate que oscureciera el logotipo se llevaría por delante
el cian del símbolo.
Se fija el alto y el ancho va solo; width/height en el HTML reservan el
hueco para que la cabecera no salte al cargar. */
.logo__img{
/* 40px, no 26. A 26 el logo pesaba lo mismo que cualquiera de las seis
entradas del menú y se perdía entre ellas: en una barra, lo que no es
claramente mayor que el resto deja de leerse como marca. */
height:40px;width:auto;display:block;
}
@media (max-width:1240px){ .logo__img{height:36px} }
@media (max-width:900px){ .logo__img{height:34px} }
@media (max-width:520px){ .logo__img{height:28px} }
/* ── La barra en móvil ───────────────────────────────────────────────────
Con el menú ya oculto por debajo de 1024, quedan tres piezas: logo,
«Entrar» y el botón grande. En 375px no caben las tres —el botón se salía
de la pantalla, cortado a media palabra— porque .wrap las reparte con
space-between y ninguna cede.
Cede el logo: pasa al símbolo suelto. Es un archivo aparte y no un
recorte del logo completo, porque recortar con overflow cortaba el
logotipo a media letra.
Va AQUÍ y no junto al resto de reglas de la barra, doscientas líneas más
arriba: la regla base .logo__img{display:block} está justo encima, y a
igual especificidad gana la última. Puesta antes, no se aplicaba. */
@media (max-width:560px){
.nav .wrap{gap:12px}
/* No cede ninguno de los dos: la barra pasa a DOS FILAS.
Antes se quitaba el botón —«el hero repite la misma acción cuatro dedos
más abajo»—, y era falso como razonamiento: en el móvil la barra se
queda arriba mientras la página baja, así que lo único que acompaña a
la persona durante todo el recorrido era «Entrar», que es la acción de
quien YA es cliente. La que se está vendiendo desaparecía.
Y en una fila no caben: con 375 px de ancho el bloque de marca ocupa
255 —lo manda el eslogan, que son 37 caracteres— y quedan 72 para
«Entrar» y para el botón. Así que marca y «Entrar» arriba, y el botón
abajo a lo ancho, que además es donde el pulgar llega mejor. */
.nav{height:auto;min-height:var(--nav-h);padding:12px 0}
.nav .wrap{flex-wrap:wrap;row-gap:10px}
/* flex:0 1 —no 1 1—: con `1 1` el bloque de marca crecía hasta ocupar la
fila entera y empujaba «Entrar» a una tercera fila. Que no crezca deja
los dos en la primera, que es lo que se buscaba. */
.nav .logo{flex:0 1 auto;min-width:0}
.nav__entrar{order:2;flex:0 0 auto}
.nav .btn--claro{
display:inline-flex;order:3;flex:1 0 100%;justify-content:center;
}
/* La barra ha crecido y flota sobre la foto: sin esto el titular del hero
se le mete debajo. */
.hero .wrap{padding-top:158px}
.logo__img{display:block;height:26px}
.logo__simbolo{display:none}
.logo__lema{display:block;font-size:.5rem;letter-spacing:.1em}
.nav__entrar{font-size:.84rem}
}
/* Por debajo de 380px ni el logotipo entero cabe con «Entrar» al lado: ahí
sí baja al símbolo, pero el eslogan se queda. */
@media (max-width:379px){
.logo__img{display:none}
/* order:-1 porque en el HTML el símbolo va DESPUÉS del eslogan —está
escrito para el caso normal, donde el que se ve es el logotipo—. Sin
esto, al esconder el logotipo la barra queda con el eslogan arriba y la
mariposa debajo: la marca del revés. */
.logo__simbolo{display:block;height:28px;order:-1}
}
/* La marca manda: se queda a la izquierda y el menú se aparta. */
.logo{flex:0 0 auto;margin-right:auto}
/* Firma de la autora en el pie. Ver el mismo bloque en styles.css. */
.firma__nombre{
display:inline-flex;align-items:center;gap:7px;
font-size:.86rem;font-weight:700;color:var(--fucsia);text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .16s;
}
.firma__nombre:hover{border-bottom-color:currentColor}
.pie .firma__nombre{color:var(--humo)}
.pie .firma__nombre:hover{color:var(--fucsia)}
/* ── La creadora ─────────────────────────────────────────────────────────
Va entre el método y el test de muñeca. Quien acaba de leer por qué el
plan decide lo que decide se pregunta justo después quién lo hizo.
Sobre tinta y con la foto a la izquierda, al revés que el bloque de
arriba: el cambio de lado y de fondo es lo que avisa de que se ha
cambiado de asunto sin necesidad de decirlo. */
/* ══════════════════════════════════════════════════════════════════════
NUESTRA HISTORIA
══════════════════════════════════════════════════════════════════════
Sección editorial: quién hizo esto y por qué, y de ahí al diagnóstico.
Antes eran cuatro párrafos, un lema repetido, el logotipo otra vez y una
tarjeta grande de Instagram — leído entero, un folleto. Ahora hay una
idea, una cita y una acción.
El resplandor turquesa detrás de la foto es lo único que rompe el plano
del fondo. Va muy bajo a propósito: a más opacidad deja de ser
profundidad y pasa a ser neón. */
.creadora{
position:relative;background:var(--tinta);color:var(--papel);overflow:hidden;
}
.creadora::before{
content:'';position:absolute;z-index:0;pointer-events:none;
left:-6%;top:12%;width:min(560px,58%);aspect-ratio:1;
background:radial-gradient(circle,rgba(119,214,203,.16),transparent 68%);
filter:blur(30px);
}
.creadora__caja{position:relative;z-index:1;display:grid;gap:26px}
/* En escritorio la foto salta a su propia columna y ocupa el alto de la
etiqueta, el titular y el cuerpo. Con áreas y no con columnas sueltas
porque el orden del DOM es el de MÓVIL —etiqueta, titular, foto, texto,
Instagram— y aquí hay que recolocarlo sin tocarlo. */
@media (min-width:920px){
.creadora__caja{
grid-template-columns:minmax(260px,.82fr) 1.18fr;
grid-template-areas:
"foto cap"
"foto titulo"
"foto cuerpo"
"ig cuerpo";
column-gap:clamp(48px,6vw,84px);
row-gap:0;
align-content:center;
}
.creadora__cap{grid-area:cap}
.creadora__tit{grid-area:titulo}
.creadora__foto{grid-area:foto;align-self:start}
.creadora__cuerpo{grid-area:cuerpo}
.creadora__ig{grid-area:ig;justify-self:start;margin-top:18px}
}
.creadora__cap{margin:0 0 14px;color:var(--rosa)}
/* Ancho acotado: sin el max-width el titular se estira hasta el borde de la
columna y parte «no existía.» en un renglón suelto. */
.creadora__tit{
margin:0 0 22px;font-size:clamp(1.75rem,3vw,2.6rem);
max-width:19ch;text-wrap:balance;
}
/* La itálica editorial SOLO en la segunda frase, que es la que gira. En
bloque propio para que el corte de línea caiga entre las dos frases y no
dentro de una. */
.creadora__tit i{
display:block;margin-top:4px;
font-family:var(--serif);font-style:italic;font-weight:400;
letter-spacing:-.01em;color:var(--rosa);
}
/* ── La foto ──────────────────────────────────────────────────────────
Sin el degradado de antes, que llegaba al 46 % del alto y le comía medio
cuerpo: la cartela es ahora una pastilla con su propio fondo y no
necesita oscurecer la foto para leerse. */
.creadora__foto{
position:relative;margin:0;border-radius:var(--r);overflow:hidden;
aspect-ratio:3/4;max-width:380px;justify-self:center;width:100%;
}
.creadora__foto::before{
content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
border-radius:inherit;border:1px solid var(--linea-clara);
}
/* `center 18%`: el encuadre de esta foto tiene la cara en el tercio
superior, y centrada se le cortaba la frente. */
.creadora__foto img{
width:100%;height:100%;object-fit:cover;object-position:center 18%;
}
.creadora__cartela{
position:absolute;left:14px;right:14px;bottom:14px;z-index:3;
display:grid;gap:1px;padding:11px 15px;border-radius:14px;
background:rgba(20,29,31,.62);backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.14);
}
.creadora__cartela b{font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.creadora__cartela span{
font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--rosa);
}
/* #C2CDCE subía a #CFD9DA: sobre el fondo de tinta el anterior se quedaba
justo en el límite de AA para texto pequeño. */
.creadora__parrafo{
margin:0 0 15px;font-size:1rem;line-height:1.68;color:#CFD9DA;max-width:54ch;
}
.creadora__parrafo:last-of-type{margin-bottom:0}
/* ── La cita ──────────────────────────────────────────────────────────
Un punto más clara que la sección y con un filete turquesa a la
izquierda: se distingue del cuerpo sin necesidad de sombra, que sobre
fondo oscuro solo ensucia. */
.creadora__cita{
position:relative;margin:26px 0 0;padding:20px 22px 18px 24px;
border-radius:var(--r-sm,14px);
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.09);
max-width:54ch;
}
.creadora__cita::before{
content:'';position:absolute;left:0;top:16px;bottom:16px;width:3px;
border-radius:0 3px 3px 0;background:var(--rosa);
}
.creadora__cita blockquote{
margin:0;font-family:var(--serif);font-style:italic;
font-size:clamp(1.06rem,1.7vw,1.24rem);line-height:1.45;color:var(--papel);
}
.creadora__cita figcaption{
display:grid;gap:1px;margin-top:13px;
}
.creadora__cita figcaption b{font-size:.9rem;font-weight:700}
.creadora__cita figcaption span{
font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
text-transform:uppercase;color:#9CA9AB;
}
.creadora__acciones{
display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px;
}
.creadora__como{
color:var(--rosa);text-decoration:none;font-weight:600;font-size:.94rem;
border-bottom:1px solid transparent;transition:border-color .16s;
}
.creadora__como:hover{border-bottom-color:var(--rosa)}
.creadora__como:focus-visible{outline:2.5px solid var(--rosa);outline-offset:3px;border-radius:3px}
/* Discreto: un enlace, no una tarjeta. La de antes tenía el peso de un
botón y competía con el CTA de crear el plan. */
.creadora__ig{
display:inline-flex;align-items:center;gap:9px;margin-top:22px;
color:#9CA9AB;text-decoration:none;font-size:.86rem;
transition:color .16s;
}
.creadora__ig b{font-weight:600}
.creadora__ig svg{flex:0 0 auto}
.creadora__ig-flecha{transition:transform .16s}
.creadora__ig:hover{color:var(--rosa)}
.creadora__ig:hover .creadora__ig-flecha{transform:translateX(3px)}
.creadora__ig:focus-visible{outline:2.5px solid var(--rosa);outline-offset:3px;border-radius:4px}
/* ── Entrada escalonada ───────────────────────────────────────────────
Sin JavaScript ni librería: la página no tiene sistema de revelado al
hacer scroll y no se va a montar uno para una sección. Animación de CSS
al cargar, como la del hero (`respira`) y la de las tarjetas del plan. */
@keyframes creadoraEntra{
from{opacity:0;transform:translateY(14px)}
to{opacity:1;transform:none}
}
.creadora__cap,.creadora__tit,.creadora__foto,.creadora__cuerpo,.creadora__ig{
animation:creadoraEntra .58s cubic-bezier(.22,.7,.3,1) backwards;
}
.creadora__cap{animation-delay:.02s}
.creadora__tit{animation-delay:.10s}
.creadora__foto{animation-delay:.06s}
.creadora__cuerpo{animation-delay:.18s}
.creadora__ig{animation-delay:.26s}
@media (prefers-reduced-motion:reduce){
.creadora__cap,.creadora__tit,.creadora__foto,.creadora__cuerpo,.creadora__ig{
animation:none
}
.creadora__ig:hover .creadora__ig-flecha{transform:none}
}
@media (max-width:919px){
/* El botón a todo el ancho, y el enlace de «cómo funciona» debajo
centrado con él: en columna, un botón a medio ancho parece cortado. */
.creadora__acciones .btn{width:100%;justify-content:center}
.creadora__acciones{gap:12px}
.creadora__como{width:100%}
}
/* ── Selector de ciclo (mensual / anual) en la portada ───────────────────
Mismo componente que en la aplicación, con los tokens de esta hoja. Dos
pestañas dentro de una cápsula: la forma dice que son alternativas de lo
mismo y que solo una puede estar activa. Lo dibuja pro.js. */
.ciclo{
display:inline-flex;gap:4px;margin:0 0 16px;padding:4px;
background:rgba(255,255,255,.08);border:1px solid var(--linea-clara);border-radius:999px;
}
.ciclo__op{
display:grid;justify-items:center;gap:1px;
font:inherit;font-size:.82rem;font-weight:700;line-height:1.15;
padding:8px 16px;border:0;border-radius:999px;cursor:pointer;
background:transparent;color:#C2CDCE;
transition:background .16s,color .16s;
}
.ciclo__op small{font-size:.66rem;font-weight:600;opacity:.9}
.ciclo__op:hover{color:var(--papel)}
.ciclo__op.on{background:var(--rosa);color:var(--tinta)}
.ciclo__op.on small{color:var(--fucsia);opacity:1}
.ciclo__op:focus-visible{outline:2.5px solid var(--rosa);outline-offset:2px}
/* ── Diálogo de sesión ────────────────────────────────────────────────────
Las MISMAS reglas que en styles.css, a propósito duplicadas: la portada y
la aplicación no comparten hoja, y el diálogo tiene que verse igual en las
dos. Vive aquí desde que «Entrar» abre la sesión en esta misma página en
vez de mandar a /app.html a escribir una contraseña. */
#sesionCaja{
position:fixed;inset:0;z-index:200;display:grid;place-items:center;
padding:20px;background:rgba(29,42,44,.62);backdrop-filter:blur(6px);
}
#sesionCaja .sesion__panel{
position:relative;width:min(420px,100%);
background:var(--papel);border-radius:var(--r);padding:32px 30px;
box-shadow:0 30px 80px rgba(0,0,0,.35);
}
#sesionCaja .sesion__cerrar{
position:absolute;top:12px;right:14px;border:0;background:transparent;
font-size:1.5rem;line-height:1;cursor:pointer;color:var(--humo);
}
#sesionCaja .sesion__cerrar:hover{color:var(--tinta)}
#sesionCaja .sesion__panel h2{margin:6px 0 10px;font-size:1.5rem}
#sesionCaja .sesion__lead{margin:0 0 18px;font-size:.94rem;color:var(--humo)}
#sesionCaja .sesion__aviso{margin:10px 0 0;font-size:.85rem;color:#B4472F;min-height:1.2em}
#sesionCaja .sesion__plan{
margin:0 0 20px;padding:14px 16px;border-radius:12px;
background:var(--papel-2);font-size:.9rem;line-height:1.5;
}
#sesionCaja .sesion__plan em{font-style:normal;color:var(--humo)}
#sesionCaja .sesion__acciones{display:flex;gap:10px;flex-wrap:wrap}
#sesionCaja .sesion__acciones .btn{flex:1 1 auto}
#sesionCaja .sesion__salir{
display:block;margin:18px auto 0;border:0;background:transparent;
font:inherit;font-size:.82rem;color:var(--humo);cursor:pointer;
text-decoration:underline;text-underline-offset:3px;
}
#sesionCaja .sesion__salir:hover{color:var(--tinta)}
/* ── Datos y privacidad, dentro de «Tu cuenta» ──
Plegado a propósito: quien abre el diálogo suele venir a cerrar sesión, y
cuatro párrafos legales por delante del botón lo convertirían en un muro.
Abierto, se lee como lo que es —información, no una pantalla de ajustes
con interruptores que no existen. */
#sesionCaja .sesion__datos{
margin-top:18px;padding-top:16px;border-top:1px solid var(--linea-clara);
font-size:.8rem;line-height:1.6;color:var(--humo);text-align:left;
}
#sesionCaja .sesion__datos summary{
cursor:pointer;font-weight:600;color:var(--tinta);
list-style:none;padding:2px 0;
}
#sesionCaja .sesion__datos summary::-webkit-details-marker{display:none}
#sesionCaja .sesion__datos summary::after{content:' +';font-weight:400;opacity:.6}
#sesionCaja .sesion__datos[open] summary::after{content:' –'}
#sesionCaja .sesion__datos p{margin:12px 0 0}
#sesionCaja .sesion__datos a{color:var(--rosa)}
#sesionCaja .sesion__datos-nota{font-size:.74rem;opacity:.82}
/* «He olvidado mi contraseña». Va con el ID por delante como el resto del
diálogo: en esta hoja `.sesion` es OTRA cosa —las filas de la semana de
muestra— y sin el ID estas reglas se le aplicarían también.
Existe aquí porque styles.css no se carga en la portada: la clase estaba
definida solo allí y el botón habría salido como un botón gris del
navegador en medio del panel. --fucsia sobre --papel da 5,62:1. */
#sesionCaja .sesion__olvido{margin:14px 0 0;text-align:center;font-size:.86rem}
#sesionCaja .enlace{
background:none;border:0;padding:0;font:inherit;color:var(--fucsia);
font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
#sesionCaja .enlace:hover{color:var(--tinta)}
#sesionCaja .enlace:focus-visible{outline:2.5px solid var(--fucsia);outline-offset:3px;border-radius:3px}
/* ── Métodos de pago ─────────────────────────────────────────────────────
Mismo componente que en la aplicación, con los tokens de esta hoja. Van
sobre la tarjeta oscura de PRO, así que el trazo es la hairline clara. */
.pagos-otros{display:grid;gap:9px;margin-top:14px}
.pagos-otros:empty{display:none}
.pago{
display:flex;align-items:center;gap:13px;text-align:left;
padding:13px 16px;text-decoration:none;
border:1.5px solid rgba(20,32,34,.14);border-radius:var(--r-sm);
color:#1D2A2C;background:#FFF;
transition:border-color .16s,box-shadow .16s,transform .16s;
}
a.pago:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.pago__marca{
display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
border-radius:10px;background:#E8EDEE;color:#5A6B6D;
}
.pago__txt{display:grid;gap:1px;min-width:0}
.pago__txt b{font-size:.9rem;font-weight:700;line-height:1.25;color:#1D2A2C}
.pago__txt small{font-size:.76rem;color:#5A6B6D;line-height:1.35}
/* El de tarjeta es el único con acceso inmediato: va marcado con el naranja
de Hotmart, no con un fondo translúcido. */
.pago--principal{border-color:#F04E23;box-shadow:0 0 0 1px #F04E23}
.pago--principal .pago__marca{background:#F04E23;color:#FFF}
a.pago--principal:hover{box-shadow:0 8px 20px rgba(240,78,35,.34)}
.pago--wa .pago__marca{background:#25D366;color:#FFF}
a.pago--wa:hover{box-shadow:0 8px 20px rgba(37,211,102,.30)}
/* PayPal todavía no está. Se enseña igualmente —el hueco explica que
existirá— pero sin parecer pulsable. Se apaga SOLO el texto y el cuadro,
no el bloque entero con opacity: bajarle la opacidad sobre la tarjeta
negra lo volvía un rectángulo gris ilegible. */
.pago--pronto{cursor:default;background:#F4F6F6;border-style:dashed}
.pago--pronto .pago__marca{background:#DDE3E4;color:#6E7C7D}
/* #4A5758 y #5F6D6E, no un gris más claro: sobre #F4F6F6 dan 6,9:1 y 5,0:1.
El gris que pedía el ojo —#8B9899— se queda en 2,75:1 y no pasa AA. */
.pago--pronto .pago__txt b{color:#4A5758}
.pago--pronto .pago__txt small{font-style:italic;color:#5F6D6E}
/* Con enlace, PayPal recupera su azul. */
a.pago--pp .pago__marca{background:#003087;color:#FFF}
a.pago--pp:hover{box-shadow:0 8px 20px rgba(0,48,135,.30)}
/* ── El eslogan bajo el logo ─────────────────────────────────────────────
Es donde vive en el propio archivo de la marca. Estaba en una píldora
sobre el titular del hero, separado de la marca a la que pertenece: se
leía como un mensaje más de la página en vez de como parte del logo.
El logo pasa de fila a columna para poder llevarlo debajo. */
.logo--lema{flex-direction:column;align-items:flex-start;gap:5px}
.logo__lema{
font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;
text-transform:uppercase;color:var(--rosa);line-height:1;white-space:nowrap;
}
/* El eslogan se queda también en móvil: es la mitad de la marca y en un
teléfono, donde no hay menú ni titulares largos, es lo único que dice qué
promete esta página. Se encoge, no desaparece. */
.nav--solida .logo__lema{color:#0C6E67}
/* La cabecera de «cómo funciona» comparte fila con la tarjeta de ejemplo:
el texto explica el recorrido y la tarjeta enseña dónde acaba. */
.cab--conviva{display:grid;gap:34px;align-items:center}
@media (min-width:900px){
.cab--conviva{grid-template-columns:1fr auto;gap:clamp(40px,5vw,72px)}
}
/* Los campos y botones heredan tipografía y color en vez de quedarse con el
Arial negro que pone el navegador por defecto. Esta hoja no lo tenía
porque hasta ahora la portada no tenía ni un formulario. */
button,input,select,textarea{font:inherit;color:inherit}
/* ── Campos de formulario ────────────────────────────────────────────────
Solo los usa el diálogo de sesión, que vive aquí desde que «Entrar» abre
la cuenta en esta misma página. Se copiaron las reglas del diálogo pero no
éstas, y los campos salían con el estilo por defecto del navegador: 22 px
de alto, sin borde redondeado y sin relleno. El diálogo parecía a medio
hacer.
Los tokens vienen traducidos: esta hoja llama --papel/--papel-2/--tinta a
lo que la otra llama --bruma/--nube/--noche. Copiarlos sin traducir dejaba
los campos con fondo transparente, porque esas variables no existen aquí
y el navegador se salta la declaración entera. */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:.69rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--humo)}
.field input,.field select{
background:var(--papel);border:1.5px solid transparent;border-radius:var(--r-sm);
padding:13px 15px;width:100%;transition:border-color .16s,background .16s,box-shadow .16s;
}
.field input:hover,.field select:hover{background:var(--papel-2)}
.field input:focus,.field select:focus{
outline:none;background:#FFF;border-color:var(--dato);box-shadow:0 0 0 4px rgba(10,110,133,.16);
}
.field input.err,.field select.err{border-color:#B4472F;background:#FBEDEA}
.field small{color:var(--humo);font-size:.77rem;line-height:1.45}