/*
* Hero de apertura: el personaje ocupa la página entera.
*
* No hay columna de texto ni tarjetas: la imagen es el hero, y encima va una
* sola frase. Todo lo demás del recorrido empieza en el panel siguiente.
*
* El personaje reacciona al cursor —lo mira, se inclina, se le eriza el pelo—
* pero eso es textura, no contenido: si el JS no corre, queda una imagen a
* pantalla completa con su frase, que es exactamente lo que tiene que decir.
*/
#agobio {
padding: 0;
overflow: hidden;
}
/* El panel viene con una rejilla interna del recorrido; acá no hace falta. */
#agobio .panel-inner { display: none; }
.agobio-escena {
position: absolute;
inset: 0;
overflow: hidden;
/* El fondo continúa el del clip. Los bordes del render van de #4B59C2 abajo
a #5263CB arriba, así que este degradado empalma sin costura visible y
permite mostrar el cuadro entero sin recortarlo. */
background: linear-gradient(#5566cd 0%, #5263cb 42%, #4d5cc6 72%, #4a57c0 100%);
}
.agobio-pose {
position: absolute;
top: 0;
/* La barra de navegación vive fija abajo y le cortaba las manos, por eso
la caja termina antes de ella. */
/*
* La imagen sobresale de la caja por los cuatro lados, con margen de sobra.
* No es un capricho: el giro, el ladeo, el desplazamiento y el bamboleo la
* mueven, y sin este colchón asoma su borde recortado contra el fondo — se
* ve el recuadro de la imagen, que es justo lo que no debe verse.
*
* Las cuentas, con los valores actuales:
* · desplazamiento lateral ............... ±38px
* · giro de 17° en perspectiva ........... ~45px de retroceso por lado
* · ladeo de 1.4° sobre 1200px de ancho .. ~15px de vuelo en las esquinas
* · bamboleo ............................. ±9px
*
* Con 120px a los lados y 70px arriba y abajo sobra para todo junto. Abajo
* además queda tapado por la barra de navegación.
*/
width: calc(100% + 240px);
left: -120px;
right: -120px;
top: -70px;
bottom: calc(var(--barra, 78px) - 70px);
height: calc(100% - var(--barra, 78px) + 140px);
/*
* `cover`, no `contain`.
*
* Con `contain`, en una ventana más ancha que la proporción del render la
* imagen se pinta más angosta que el elemento y sus bordes reales quedan
* ADENTRO — donde el difuminado, que vive en el borde del elemento, no los
* alcanza. Resultado: se ve el recuadro de la imagen en pantallas anchas
* aunque en una 4:3 no aparezca nada.
*
* Con `cover` la imagen llena el elemento siempre: no hay bordes internos
* que puedan asomar, en ninguna proporción de ventana.
*/
object-fit: cover;
object-position: center bottom;
opacity: 0;
/*
* Los bordes de la imagen se desvanecen en el fondo.
*
* Para alejar al personaje hay que achicar la imagen, y ahí aparece su
* borde recto contra el fondo de la escena — el recuadro que no debe verse.
* Igualar el degradado al render no alcanza: nunca coincide del todo.
*
* Como esos bordes son fondo plano, basta con difuminarlos: no hay borde
* que ver porque no hay borde. Abajo NO se desvanece, ahí está el cuerpo
* y además lo tapa la barra.
*/
mask-image:
linear-gradient(to right, transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%),
linear-gradient(to bottom, transparent 0, #000 130px, #000 100%);
-webkit-mask-image:
linear-gradient(to right, transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%),
linear-gradient(to bottom, transparent 0, #000 130px, #000 100%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
/* La opacidad la maneja el JS cuadro a cuadro (mezcla entre poses vecinas),
así que acá no va ninguna transición: se pisarían. */
/*
* Lo que hace que esto se sienta movimiento y no un pase de diapositivas.
*
* Las poses son nueve: discretas. Entre una y la siguiente, fundir por
* opacidad se lee como una disolvencia, no como un giro — la cabeza no pasa
* por los ángulos intermedios, simplemente una imagen se desvanece sobre la
* otra. (Probé generar los intermedios con flujo óptico y salió peor:
* narices dobles y lentes fantasma.)
*
* La solución es que la imagen misma se transforme de forma continua: gira
* en perspectiva, se corre y se inclina siguiendo al cursor. Así, aunque la
* pose todavía no haya cambiado, el personaje ya se está moviendo.
*/
/*
* `--lejania` aleja al personaje; `--altura` lo sube.
*
* Subirlo hace dos cosas a la vez: lo coloca más arriba en la pantalla y
* destapa esa misma cantidad de cuerpo, que antes se comía la barra de
* navegación. Con -18px quedan ~13px de imagen todavía metidos debajo de la
* barra — margen suficiente para que el bamboleo no llegue a destapar el
* corte inferior del render.
*/
transform:
perspective(1400px)
translateX(var(--arrastre, 0px))
translateY(calc(var(--altura, -18px) + var(--bamboleo, 0px)))
rotateY(var(--giro, 0deg))
rotate(var(--inclinacion, 0deg))
scale(var(--lejania, .82));
transform-origin: 48% 78%; /* el eje pasa por la cabeza, no por el centro */
backface-visibility: hidden;
/* `will-change` lo pone el JS solo en la pose visible. Ponerlo acá promovía
las nueve capas a la vez y eso arrastraba el rendimiento. */
}
/* ── La frase ───────────────────────────────────────────────────────────── */
.agobio-frase {
position: absolute;
/* Arriba, en la franja vacía sobre el personaje. Centrada en el medio
quedaba partiéndole el pelo por la mitad. */
top: clamp(80px, 11vh, 132px);
left: 50%;
transform: translateX(-50%);
margin: 0;
text-align: center;
/* Un solo renglón siempre. El tamaño se ata al ancho de la ventana para que
nunca se parta ni se salga: a 5.2vw, la frase completa ocupa ~80% del
ancho disponible. */
white-space: nowrap;
font-size: min(5.2vw, 3.8rem);
line-height: 1.05;
letter-spacing: -.045em;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 30px rgba(30, 20, 90, .28);
z-index: 2;
}
/* Sin poses cargadas la escena no se ve rota: se explica. */
.agobio-escena[data-sin-arte] .agobio-faltan { display: grid; }
.agobio-faltan {
display: none;
position: absolute;
inset: auto 0 40px;
place-items: center;
gap: 6px;
padding: 0 24px;
text-align: center;
color: rgba(247,246,255,.8);
font-size: .78rem;
line-height: 1.7;
z-index: 2;
}
.agobio-faltan code {
font-size: .72rem;
color: #fff;
background: rgba(255,255,255,.16);
padding: 3px 7px;
border-radius: 6px;
}
/* Quien pide menos movimiento no recibe ninguno: el hero sigue leyéndose. */
@media (prefers-reduced-motion: reduce) {
.agobio-pose { transition: none; }
}
/* ── Lo que le pasa por la cabeza ───────────────────────────────────────── */
/*
* Van en HTML y no dentro del clip: así el texto se cambia sin volver a
* generar el video, y se leen nítidos en cualquier pantalla.
*
* Flotan en el espacio vacío alrededor de la cabeza. Cada uno entra con su
* propio retraso para que aparezcan de a poco, como se le van acumulando.
*/
.agobio-pensamientos {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
list-style: none;
pointer-events: none;
z-index: 3;
}
.pensamiento {
position: absolute;
top: var(--y);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
border-radius: 14px;
background: rgba(255,255,255,.97);
color: #16181f;
font-size: clamp(.63rem, 1.02vw, .76rem);
font-weight: 700;
letter-spacing: -.012em;
white-space: nowrap;
box-shadow: 0 14px 34px rgba(18, 14, 70, .32);
opacity: 0;
/* Cada uno con su propia inclinación: es lo que rompe la sensación de
lista sin romper la simetría, porque la del espejo va invertida. */
animation:
pensamiento-entra .55s cubic-bezier(.2,.9,.3,1.25) var(--retraso, 0s) forwards,
pensamiento-flota 6s ease-in-out calc(var(--retraso, 0s) + .55s) infinite;
}
/*
* Espejo, no columna.
*
* Cada uno se ancla por su borde EXTERNO —la izquierda por la izquierda, la
* derecha por la derecha— a la misma distancia. Así la posición de cada uno
* tiene su reflejo exacto del otro lado sin importar cuánto mida el texto:
* se ve repartido y desordenado, pero el conjunto queda equilibrado.
*
* Alinearlos en dos columnas rectas los hacía leer como una lista.
*/
.p-izq { left: var(--x); border-bottom-right-radius: 4px; }
.p-der { right: var(--x); border-bottom-left-radius: 4px; }
.pensamiento i {
width: 17px;
height: 17px;
flex: none;
border-radius: 5px;
display: grid;
place-items: center;
font-size: .62rem;
font-style: normal;
color: #fff;
}
/* Las dudas no son notificaciones de nadie: son de él. Por eso van sin icono
y en cursiva. */
.p-duda {
background: rgba(255,255,255,.9);
font-style: italic;
font-weight: 600;
}
.p-whatsapp i { background: #25d366; }
.p-instagram i { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.p-llamada i { background: #2979ff; }
.p-resena i { background: #f5c842; color: #3a2d00; }
.p-carrito i { background: #8b5cf6; }
@keyframes pensamiento-entra {
from { opacity: 0; transform: translateY(calc(-50% + 14px)) rotate(0deg) scale(.9); }
to { opacity: 1; transform: translateY(-50%) rotate(var(--rot, 0deg)) scale(1); }
}
@keyframes pensamiento-flota {
0%, 100% { translate: 0 0; }
50% { translate: 0 -9px; }
}
/* En pantallas chicas sobran: taparían al personaje entero. Quedan las tres
primeras, que ya cuentan la idea. */
/*
* Teléfono.
*
* Acá el personaje no se veía: el colchón de 120px por lado, pensado para que
* el giro no destapara el borde, en una pantalla de 375px se comía la escena
* entera y lo empujaba fuera de cuadro. Como en el teléfono no hay cursor, no
* hay giro ni desplazamiento, así que ese colchón no hace falta.
*/
@media (max-width: 860px) {
.agobio-pose {
/*
* En vertical el personaje ocupaba toda la pantalla y se veía encima del
* lente: con `cover` en una caja de 375x758 la imagen se amplía al doble
* del ancho. Acotarla a una banda baja lo deja a un tamaño razonable y
* libera la mitad de arriba para la frase y los pensamientos.
*/
width: calc(100% + 40px);
left: -20px;
right: -20px;
top: auto;
bottom: calc(var(--barra, 78px) - 24px);
height: 54vh;
transform: none;
/* También arriba: al acotar la imagen a una banda baja, su borde superior
quedaba como una línea recta cruzando la pantalla. */
mask-image:
linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%),
linear-gradient(to bottom, transparent 0, #000 90px, #000 100%);
-webkit-mask-image:
linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%),
linear-gradient(to bottom, transparent 0, #000 90px, #000 100%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
}
/* En una sola línea la frase quedaba en 19px: ilegible. Acá sí se parte. */
.agobio-frase {
white-space: normal;
width: min(88vw, 15ch);
font-size: clamp(1.6rem, 8.4vw, 2.6rem);
top: clamp(72px, 11vh, 110px);
}
.pensamiento { padding: 7px 11px; }
.p-izq { left: 3%; }
.p-der { right: 3%; }
/*
* En el teléfono quedan los cuatro primeros: dos por lado.
*
* Antes decía `.p-izq:nth-of-type(n+3), .p-der:nth-of-type(n+3)`, y
* `nth-of-type` cuenta TODOS los , no los de cada clase. Como los de la
* derecha eran los 5 al 8, todos caían en "del tercero en adelante" y
* se ocultaban los cuatro: en el teléfono solo se veía la columna izquierda.
* Ahora la lista va intercalada y se cuenta por posición, que es lo que
* `nth-child` sí hace bien.
*/
.pensamiento:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pensamiento { animation: pensamiento-entra .01s linear var(--retraso, 0s) forwards; }
}