; esto en el hijo) */
@media (prefers-reduced-motion: no-preference) {
.vit-card.is-center .vit-hit { animation: vitFloat 5s ease-in-out infinite alternate; }
@keyframes vitFloat { from { translate: 0 0; } to { translate: 0 -8px; } }
}
.vit-card.vit-pulse .vit-hit { animation: vitPulse 0.3s ease; }
@keyframes vitPulse { 50% { scale: 1.05; } }
/* ── Nombre colosal (el frasco lo interrumpe: ring z2 > info) ── */
.vit-info {
position: absolute; left: 0; right: 0;
bottom: clamp(6rem, 11vh, 8.5rem); bottom: clamp(6rem, 11svh, 8.5rem);
z-index: 1;
display: flex; flex-direction: column; align-items: center;
gap: 0.5rem;
pointer-events: none;
text-align: center;
}
.vit-name {
position: relative;
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.2rem, 10vw, 8.2rem);
line-height: 0.9;
letter-spacing: 0.02em;
text-transform: uppercase;
transform: skewX(-6deg); /* Bebas no tiene itálica */
color: #F2EFE6;
white-space: nowrap;
}
.vit-name--long { font-size: clamp(2.4rem, 6.6vw, 5.4rem); }
.vit-name span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
.vit-name span { animation: vitLetraIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes vitLetraIn {
from { opacity: 0; transform: translateY(72%) rotate(4deg); }
}
.vit-name-ghost { position: absolute; inset: auto; animation: vitNameOut 0.24s ease both; }
/* sin blur: re-rasterizaba el Bebas gigante varias veces por segundo al
girar la rueda; opacity+translate ya venden la salida en 0.24s */
@keyframes vitNameOut {
to { opacity: 0; transform: skewX(-6deg) translateY(-46%); }
}
}
.vit-name-ghost { pointer-events: none; }
.vit-meta {
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
.vit-meta b { font-weight: 800; transition: color 0.5s ease; }
/* CTA trapecio: un podio bajo el frasco */
.vit-cta {
pointer-events: auto;
display: inline-block;
margin-top: 0.6rem;
padding: 0.85rem 3.2rem 0.95rem;
clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
font-family: 'Montserrat', sans-serif;
font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
white-space: nowrap;
color: #FFFFFF;
background: linear-gradient(to bottom,
color-mix(in srgb, var(--vit-acc) 14%, rgba(255,255,255,0.07)),
rgba(8,10,12,0.78));
border: 0;
cursor: pointer;
transition: background 0.5s ease, filter 0.35s ease, translate 0.3s ease;
}
.vit-cta:hover {
translate: 0 -2px;
filter: drop-shadow(0 6px 20px color-mix(in srgb, var(--vit-acc) 45%, transparent));
}
.vit-cta:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 4px; }
/* ── Flechas a los costados del bote (como la referencia) ── */
.vit-side {
position: absolute;
top: 42%;
translate: 0 -50%;
z-index: 3;
width: 46px; height: 46px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0;
color: rgba(255,255,255,0.55);
cursor: pointer;
transition: color 0.25s ease, translate 0.25s ease, opacity 0.4s ease;
}
.vit-side-prev { left: calc(50% - clamp(95px, 11vw, 150px) - 78px); }
.vit-side-next { right: calc(50% - clamp(95px, 11vw, 150px) - 78px); }
.vit-side:hover { color: #FFFFFF; }
.vit-side-prev:hover { translate: -3px -50%; }
.vit-side-next:hover { translate: 3px -50%; }
.vit-side:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 3px; border-radius: 8px; }
/* ── Marcos de datos: contador, hint, link al catálogo ── */
.vit-counter {
position: absolute; top: clamp(6.2rem, 12vh, 7.5rem); top: clamp(6.2rem, 12svh, 7.5rem); right: clamp(1.5rem, 5vw, 4rem);
z-index: 3;
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;
font-size: 0.72rem; letter-spacing: 0.14em;
color: rgba(255,255,255,0.55);
}
.vit-counter #vit-idx { color: #FFFFFF; }
/* el carrusel snap móvil (lo inyecta initVitrina); en desktop manda el arco */
.vit-rail { display: none; }
.vit-all {
position: absolute; right: clamp(1.5rem, 5vw, 4rem); bottom: 1rem;
z-index: 3;
display: inline-flex; align-items: center; gap: 0.45em;
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;
font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.25s ease;
}
.vit-all:hover { color: #FFFFFF; }
.vit-all svg { transition: transform 0.3s ease; }
.vit-all:hover svg { transform: translateX(3px); }
.vit-all:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 4px; }
/* ── Vista de detalle: el acercamiento (estilo referencia) ──
El arco se desvanece y el producto crece inclinado a la derecha;
nombre colosal + info a la izquierda. Ligero: solo opacity y
transform, ninguna capa nueva permanente. ── */
.vit-detail {
position: absolute; inset: 0;
z-index: 4;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.vitrina-section.is-detail .vit-detail {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.45s ease;
}
/* al entrar al detalle, el escenario del arco cede sin desaparecer del DOM */
.vitrina-section.is-detail .vit-stage,
.vitrina-section.is-detail .vit-info,
.vitrina-section.is-detail .vit-side,
.vitrina-section.is-detail .vit-counter { opacity: 0; pointer-events: none; }
.vit-stage, .vit-info, .vit-side, .vit-counter { transition: opacity 0.4s ease; }
.vd-close {
position: absolute; top: clamp(5.8rem, 11vh, 7rem); top: clamp(5.8rem, 11svh, 7rem); right: clamp(1.5rem, 5vw, 4rem);
/* encima del panel .qv (va después en el DOM) y de las flechas (z5):
con z auto el panel lo cubría y NINGÚN tap llegaba al botón */
z-index: 7;
width: 46px; height: 46px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
color: rgba(255,255,255,0.8);
cursor: pointer;
transition: border-color 0.25s ease, color 0.25s ease, rotate 0.3s ease;
}
.vd-close:hover { border-color: rgba(255,255,255,0.6); color: #fff; rotate: 90deg; }
.vd-close:focus-visible { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 3px; }
/* Centro: el producto, protagonista */
.vd-media {
position: absolute;
left: 50%; top: 50%;
translate: -50% -50%;
width: clamp(270px, 27vw, 400px);
}
.vd-media img {
display: block; width: 100%; height: auto;
border-radius: 12px;
rotate: 6deg;
scale: 0.6;
opacity: 0;
filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
transition: scale 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, opacity 0.4s ease 0.08s;
}
.vitrina-section.is-detail .vd-media img { scale: 1; opacity: 1; }
/* Izquierda: título + descripción (entra desde la izquierda) */
.vd-panel {
position: absolute;
left: clamp(1.5rem, 5vw, 5rem); top: 50%;
translate: 0 -50%;
width: min(380px, 26vw);
display: flex; flex-direction: column; align-items: flex-start;
gap: 1.1rem;
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.5s ease 0.2s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.vitrina-section.is-detail .vd-panel { opacity: 1; transform: none; }
.vd-name {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.6rem, 5.2vw, 4.8rem);
line-height: 0.9; letter-spacing: 0.02em; text-transform: uppercase;
transform: skewX(-6deg);
color: #F2EFE6;
}
.vd-desc {
font-family: 'Inter', sans-serif;
font-size: 0.96rem; line-height: 1.65;
color: rgba(255,255,255,0.85);
max-width: 42ch;
}
/* Derecha: íconos de beneficios + compra (entra desde la derecha) */
.vd-side {
position: absolute;
right: clamp(1.5rem, 5vw, 5rem); top: 50%;
translate: 0 -50%;
width: min(300px, 23vw);
display: flex; flex-direction: column; align-items: flex-start;
gap: 1.6rem;
opacity: 0;
transform: translateX(20px);
transition: opacity 0.5s ease 0.28s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.28s;
}
.vitrina-section.is-detail .vd-side { opacity: 1; transform: none; }
.vd-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.vd-benefits li { display: flex; align-items: center; gap: 0.85rem; }
.vdb-ico {
flex-shrink: 0;
width: 46px; height: 46px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid color-mix(in srgb, var(--vit-acc) 55%, rgba(255,255,255,0.18));
background: color-mix(in srgb, var(--vit-acc) 8%, transparent);
}
.vd-benefits li span {
font-family: 'Montserrat', sans-serif;
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
line-height: 1.4;
color: rgba(255,255,255,0.82);
}
.vd-buy {
display: flex; flex-direction: column; align-items: flex-start;
gap: 0.9rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(255,255,255,0.12);
align-self: stretch;
}
.vd-meta {
font-family: 'Montserrat', sans-serif;
font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(255,255,255,0.9);
}
.vd-meta b { transition: color 0.5s ease; }
.vd-more {
background: none; border: 0; padding: 0.4rem 0.2rem;
font-family: 'Montserrat', sans-serif;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.65);
text-decoration: underline; text-underline-offset: 5px;
cursor: pointer;
transition: color 0.25s ease;
}
.vd-more:hover { color: #FFFFFF; }
.vd-more:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 3px; }
/* ── Responsive ── */
@media (max-width: 820px) {
.vit-card { width: clamp(175px, 54vw, 240px); top: 40%; }
.vit-ambient { height: 64vh; height: 64svh; }
.vit-counter { top: 5.4rem; right: 1.25rem; font-size: 0.62rem; }
.vit-name { white-space: normal; font-size: clamp(2.6rem, 13vw, 3.8rem); }
.vit-name--long { font-size: clamp(1.9rem, 9.5vw, 2.8rem); }
.vit-info { bottom: clamp(6.4rem, 13vh, 8rem); bottom: clamp(6.4rem, 13svh, 8rem); padding: 0 1rem; }
.vit-side { display: none; } /* el gesto manda */
.vit-all { right: 50%; translate: 50% 0; }
/* detalle en COLUMNA con scroll propio: producto → título+desc → íconos+compra */
.vd-close { top: 5.2rem; right: 1.25rem; width: 42px; height: 42px; }
.vit-detail {
display: flex; flex-direction: column; align-items: center;
padding: 5.6rem 1.4rem 2.4rem;
gap: 1.2rem;
overflow-y: auto;
}
.vd-media, .vd-panel, .vd-side {
position: static; translate: none; transform: none; width: 100%;
}
/* producto primero, luego título+desc, luego íconos+compra */
.vd-media { width: clamp(150px, 42vw, 200px); order: 0; }
.vd-panel { order: 1; }
.vd-side { order: 2; }
.vd-panel { align-items: center; text-align: center; gap: 0.7rem; }
.vd-name { font-size: clamp(2rem, 10vw, 2.9rem); }
.vd-desc {
font-size: 0.86rem; line-height: 1.55; max-width: none;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vd-side { gap: 1rem; }
.vd-benefits { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.7rem; width: 100%; }
.vd-benefits li { flex-direction: column; text-align: center; gap: 0.4rem; width: 29%; }
.vdb-ico { width: 42px; height: 42px; }
/* conserva el 0.68rem base: 0.56rem (~9px) era ilegible en móvil */
.vd-benefits li span { letter-spacing: 0.06em; }
.vd-buy { align-items: center; }
}
/* Pantallas CORTAS (landscape de celular, ventanas bajas): el ritmo
vertical de la vitrina asumía alto de sobra y a <620px el título, el
CTA y el link al catálogo se encimaban con el frasco y su reflejo.
Aquí todo escala con el ALTO (vh) en vez del ancho. Va DESPUÉS del
bloque ≤820px a propósito: en un teléfono acostado ganan estas. */
@media (max-height: 620px) {
.vit-card { width: clamp(130px, min(20vw, 34vh), 220px); top: 39%; }
.vit-ambient { height: 92vh; height: 92svh; }
.vit-info { bottom: clamp(1.8rem, 6vh, 3.4rem); bottom: clamp(1.8rem, 6svh, 3.4rem); gap: 0.35rem; }
.vit-name { font-size: clamp(2.2rem, 9vh, 4.4rem); }
.vit-name--long { font-size: clamp(1.7rem, 6.8vh, 3.4rem); }
.vit-cta { margin-top: 0.25rem; padding: 0.65rem 2.3rem 0.75rem; }
.vit-head { top: 4.4rem; }
.vit-counter { top: 4.6rem; }
.vit-side { top: 39%; }
.vit-all { bottom: max(0.9rem, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
.vitrina-section { transition: none; }
.vit-ambient { transition: opacity 0.2s ease; }
.vit-detail, .vd-media img, .vd-panel,
.vit-stage, .vit-info, .vit-side, .vit-counter { transition: none; }
}
/* ============================================================
RUTINAS — LA RUEDA. OptionWheel (port vanilla de React Bits,
js/option-wheel.js) con los 4 MOMENTOS a la izquierda; a la derecha
las rutinas de ese momento como tarjetas con abanico de productos.
Reusa --vit-acc, el CTA .vit-cta y la vista de detalle .vd-* de la
vitrina. Sustituyó al mapa 3D (js/citymap.js queda sin uso).
============================================================ */
.rueda-section {
--vit-acc: var(--endurance);
position: relative;
min-height: 100vh; min-height: 100svh;
display: flex; flex-direction: column;
gap: clamp(1.4rem, 4vh, 2.6rem); gap: clamp(1.4rem, 4svh, 2.6rem);
padding: clamp(5rem, 9vh, 6.5rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 5vh, 3.5rem); padding: clamp(5rem, 9svh, 6.5rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 5svh, 3.5rem);
background: radial-gradient(ellipse 90% 70% at 50% 18%, #0B0D10 0%, #060607 74%);
/* SIN overflow aquí: `clip`/`hidden` recortarían el overlay fijo del
detalle. La rueda ya se recorta sola (.ow tiene overflow: hidden). */
transition: --vit-acc 0.5s ease;
}
/* la luz de la sección vira con el momento activo */
.rueda-section::before {
content: '';
position: absolute; inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(ellipse 60% 55% at 22% 55%,
color-mix(in srgb, var(--vit-acc) 12%, transparent), transparent 70%);
transition: background 0.6s ease;
}
/* OJO: el detalle se excluye a propósito — necesita su `position: absolute`
de .vit-detail para cubrir la sección; si esta regla lo alcanza, cae al
final del flujo con altura 0 (se veía muy abajo). */
.rueda-section > *:not(.cd-detail) { position: relative; z-index: 1; }
.rd-eyebrow {
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;
font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.rd-title {
margin-top: 0.6rem;
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.4rem, 5.5vw, 4.4rem);
line-height: 0.92; letter-spacing: 0.015em; text-transform: uppercase;
color: #F2EFE6;
}
.rd-title strong { font-weight: 400; color: var(--vit-acc); transition: color 0.5s ease; }
.rd-grid {
flex: 1;
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
gap: clamp(1.5rem, 5vw, 4rem);
align-items: center;
}
/* ── La rueda ── */
.rd-wheel-wrap { position: relative; height: 100%; min-height: clamp(300px, 44vh, 440px); min-height: clamp(300px, 44svh, 440px); }
.rd-wheel { width: 100%; height: 100%; }
/* ── OptionWheel (port vanilla) ──
Cada opción va centrada en absoluto y el rAF la coloca sobre la curva
con transform/opacity/filter. --ow-p va 0→1 al llegar al centro, y el
color-mix la lleva hacia SU acento (--ow-active-color por ítem). */
.ow {
--ow-text-color: rgba(242,239,230,0.34);
--ow-active-color: #FFFFFF;
--ow-font-size: 3rem;
--ow-inset: 46px;
position: relative;
width: 100%; height: 100%;
overflow: hidden;
cursor: grab;
user-select: none;
touch-action: pan-y; /* el dedo sigue scrolleando la página */
outline: none;
}
.ow--dragging { cursor: grabbing; }
.ow:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 6px; border-radius: 6px; }
.ow__item {
position: absolute;
top: 50%; left: var(--ow-inset);
white-space: nowrap;
font-family: 'Bebas Neue', sans-serif;
font-size: var(--ow-font-size);
line-height: 1; letter-spacing: 0.02em; text-transform: uppercase;
transform-origin: left center;
cursor: pointer;
will-change: transform, opacity, filter;
color: color-mix(in srgb, var(--ow-active-color) calc(var(--ow-p, 0) * 100%), var(--ow-text-color));
}
.ow--right .ow__item {
left: auto; right: var(--ow-inset);
transform-origin: right center;
}
/* el seleccionado además respira su halo */
.ow__item--selected {
text-shadow: 0 0 34px color-mix(in srgb, var(--ow-active-color) 45%, transparent);
}
/* ── Iconos de la rueda de categorías ──
Van DENTRO del ítem, así heredan su color-mix (viran al acento del
momento al centrarse) y su transform/blur/fade de la curva. */
.ow__item { display: inline-flex; align-items: center; gap: 0.4em; }
.ow__ico {
display: inline-flex;
flex-shrink: 0;
/* proporcional a la tipografía: crece y encoge con la rueda */
width: 0.62em; height: 0.62em;
opacity: 0.75;
transition: opacity 0.3s ease;
}
.ow__ico svg { width: 100%; height: 100%; }
.ow__item--selected .ow__ico {
opacity: 1;
filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ow-active-color) 55%, transparent));
}
/* ── Las rutinas del momento ── */
.rd-panel { display: flex; flex-direction: column; gap: 0.9rem; }
.rd-count {
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;
font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--vit-acc);
transition: color 0.5s ease;
}
.rd-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.rd-card { opacity: 0; transform: translateY(18px); }
.rd-cards.is-in .rd-card {
animation: rdCardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: var(--d, 0s);
}
@keyframes rdCardIn { to { opacity: 1; transform: none; } }
.rd-card-btn {
width: 100%; text-align: left; cursor: pointer;
display: grid; grid-template-columns: clamp(120px, 15vw, 168px) 1fr;
align-items: center; gap: clamp(0.9rem, 2vw, 1.6rem);
padding: 1rem 1.2rem 1.1rem;
border-radius: 16px;
background: rgba(14,16,22,0.6);
border: 1px solid rgba(255,255,255,0.09);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s ease;
}
.rd-card-btn:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--card-acc) 55%, transparent);
box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 0 34px color-mix(in srgb, var(--card-acc) 15%, transparent);
}
.rd-card-btn:active { transform: translateY(-4px) scale(0.985); }
.rd-card-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 3px; }
/* el abanico dentro de la tarjeta: los renders como mano de cartas */
.rd-fan { display: flex; align-items: center; justify-content: center; }
.rd-fan img {
width: 38%; margin-left: -11%;
height: auto; border-radius: 6px;
filter: drop-shadow(0 14px 24px rgba(0,0,0,0.55));
}
.rd-fan img:first-child { margin-left: 0; }
.rd-fan[data-n="1"] img { width: 62%; }
.rd-fan[data-n="2"] img { width: 50%; margin-left: -8%; }
.rd-fan[data-n="2"] img:first-child { margin-left: 0; }
.rd-fan[data-n="3"] img { width: 44%; margin-left: -10%; }
.rd-fan[data-n="3"] img:first-child { margin-left: 0; }
.rd-card-body { display: flex; flex-direction: column; gap: 0.3rem; }
.rd-card-name {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.5rem, 2.3vw, 2rem);
line-height: 0.98; letter-spacing: 0.02em; text-transform: uppercase;
color: #F2EFE6;
}
.rd-card-sub {
font-family: 'Inter', sans-serif; font-size: 0.85rem;
color: rgba(255,255,255,0.6);
}
.rd-card-meta {
margin-top: 0.15rem;
font-family: 'Montserrat', sans-serif;
font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255,255,255,0.75);
}
.rd-card-meta b { color: var(--card-acc); font-weight: 800; }
.rd-card-meta s { color: rgba(255,255,255,0.32); font-weight: 500; }
.rd-card-cta { margin-top: 0.6rem; align-self: flex-start; pointer-events: none; }
.cd-all {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 0.45em;
margin-top: 0.3rem;
/* target táctil: el texto mide ~17px de alto */
min-height: 44px;
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;
font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.25s ease;
}
.cd-all:hover { color: #FFFFFF; }
.cd-all svg { transition: transform 0.3s ease; }
.cd-all:hover svg { transform: translateX(3px); }
.cd-all:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 4px; }
/* ── DETALLE DE RUTINA: clona la vista de la vitrina. Hereda .vit-detail
y los hijos vd-*; aquí solo la activación con scope de la sección,
el fondo ambiental y el abanico multi-producto. ── */
/* OVERLAY anclado al VIEWPORT (no a la sección): con `absolute` el detalle
se centraba sobre la sección y, según el scroll, aparecía muy abajo.
`fixed` lo deja siempre centrado en pantalla, como una caja de luz.
z-index 60 para pasar por encima del nav (30). */
.cd-detail {
position: fixed; inset: 0; z-index: 60;
background: rgba(6,7,9,0.94);
}
.cd-detail::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 55% 60% at 50% 52%,
color-mix(in srgb, var(--vit-acc) 15%, transparent), transparent 72%);
transition: background 0.5s ease;
}
.rueda-section.is-detail .cd-detail {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.45s ease;
}
/* el overlay ya tapa la sección: no hace falta desvanecer el contenido
(así al cerrar reaparece al instante, sin doble fundido) */
/* entrada de los hijos vd-* (mismas reglas que la vitrina, scope rueda) */
.rueda-section.is-detail .vd-media img { scale: 1; opacity: 1; }
.rueda-section.is-detail .vd-panel { opacity: 1; transform: none; }
.rueda-section.is-detail .vd-side { opacity: 1; transform: none; }
/* el ABANICO del detalle: 2-4 productos en grande */
.cd-fan { width: clamp(360px, 42vw, 640px); display: flex; align-items: center; justify-content: center; }
.cd-fan img { width: 38%; margin-left: -11%; }
.cd-fan img:first-child { margin-left: 0; }
.cd-fan[data-n="2"] img { width: 47%; margin-left: -7%; }
.cd-fan[data-n="2"] img:first-child { margin-left: 0; }
.cd-fan[data-n="3"] img { width: 42%; margin-left: -10%; }
.cd-fan[data-n="3"] img:first-child { margin-left: 0; }
/* la lista lleva mini-fotos del pack en el círculo del ícono */
.cd-detail .vdb-ico { overflow: hidden; padding: 0; }
.cd-detail .vdb-ico img { width: 100%; height: 100%; object-fit: cover; }
.cdd-mom {
display: block; margin-top: 2px;
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;
font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
font-style: normal;
color: color-mix(in srgb, var(--vit-acc) 78%, #fff 22%);
}
/* ── Responsive: la rueda se acuesta arriba y las tarjetas debajo ── */
@media (max-width: 900px) {
.rd-grid { grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
.rd-wheel-wrap { min-height: clamp(230px, 32vh, 300px); min-height: clamp(230px, 32svh, 300px); }
.ow { --ow-inset: 8px; }
.rd-card-btn { grid-template-columns: 104px 1fr; padding: 0.85rem 1rem 0.95rem; }
.rd-card-name { font-size: 1.35rem; }
.rd-card-sub { font-size: 0.78rem; }
.cd-fan { width: clamp(240px, 78vw, 340px); }
}
@media (prefers-reduced-motion: reduce) {
.rueda-section, .rueda-section::before { transition: none; }
.rd-cards.is-in .rd-card { animation-duration: 0.01s; animation-delay: 0s; }
.rd-card-btn { transition: none; }
}
/* Offset para anclas con el nav flotante */
#catalogo, #rutinas, #filosofia, #ambassadors, #faq, #categorias, #wellness-rutinas, #performance-rutinas { scroll-margin-top: 120px; }
@media (min-width: 768px) {
/* Split interactivo: la card activa se expande, la otra cede y se atenúa */
}
/* Performance card: floating neon lines decoration */
/* Card decorative big letter (capa de profundidad opuesta) */
/* Glare que sigue al cursor */
/* Capas de profundidad internas (se mueven con el cursor a distinta velocidad) */
/* el CTA siempre abajo → botones alineados entre las dos tarjetas */
/* Títulos metalizados (sheen tipo metal con degradado claro→oscuro→claro) */
/* Performance sub-lines indicators */
/* ============================================================
SECTION HEADERS
============================================================ */
.section-label {
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.section-label::before {
content: '';
display: block;
width: 24px;
height: 2px;
background: currentColor;
flex-shrink: 0;
}
.section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: 0.95;
letter-spacing: 0.04em;
}
.section-desc {
font-size: 1rem;
line-height: 1.7;
max-width: 540px;
}
/* Dark section headers */
.label-on-dark { color: rgba(255,255,255,0.6); } /* 0.4 daba 3.75:1 */
.title-on-dark { color: #FFFFFF; }
.desc-on-dark { color: rgba(255,255,255,0.55); }
/* Light section headers */
.label-on-light { color: rgba(26,26,26,0.64); } /* 0.4 daba 2.48:1 */
.title-on-light { color: #1A1A1A; }
.desc-on-light { color: rgba(26,26,26,0.6); }
/* Dividers */
.divider { height: 1px; }
.divider-endurance { background: linear-gradient(90deg, transparent, var(--endurance), transparent); }
.divider-strength { background: linear-gradient(90deg, transparent, var(--strength), transparent); }
/* ============================================================
FILTER TABS
============================================================ */
.filter-tabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.filter-tab {
padding: 0.5rem 1.25rem;
border-radius: 100px;
font-family: 'Montserrat', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease;
border: 1px solid;
}
/* Light filter tabs */
.tab-light-inactive {
background: transparent;
color: rgba(26,26,26,0.45);
border-color: rgba(26,26,26,0.12);
}
.tab-light-inactive:hover {
color: rgba(26,26,26,0.8);
border-color: rgba(26,26,26,0.25);
}
/* Dark filter tabs */
.tab-dark-inactive {
background: transparent;
color: rgba(255,255,255,0.35);
border-color: rgba(255,255,255,0.1);
}
.tab-dark-inactive:hover {
color: rgba(255,255,255,0.7);
border-color: rgba(255,255,255,0.2);
}
/* ============================================================
PRODUCT CARDS
============================================================ */
.products-grid {
display: grid;
/* Antes: auto-fill minmax(280px,1fr) → forzaba 1 COLUMNA bajo 640px,
y con fichas de 596px de alto eso daba 62 fichas = 39.000px de
scroll (61 pantallas). En móvil van 2 columnas. */
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
@media (min-width: 640px) {
.products-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
/* Ajustes de la ficha a 2-up en móvil: imagen más baja y cuerpo más
compacto para que quepan dos por fila sin apretujarse. Scopeado a
.products-grid → NO toca el carrusel de destacados del home. */
@media (max-width: 639px) {
.products-grid .product-img { height: auto; padding: 0; }
.products-grid .product-body { padding: 0.85rem 0.85rem 1rem; }
.products-grid .product-name { font-size: 0.82rem; }
.products-grid .product-tagline { font-size: 0.72rem; margin-bottom: 0.6rem; }
.products-grid .product-price { font-size: 0.95rem; }
.products-grid .product-badge { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
}
@media (min-width: 1024px) {
.products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
.products-grid { grid-template-columns: repeat(4, 1fr); }
}
.product-card {
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: transform var(--t-base) ease, box-shadow var(--t-base) ease, border-color var(--t-base) ease;
display: flex;
flex-direction: column;
}
/* Wellness card */
.card-wellness {
background: #FFFFFF;
border: 1px solid var(--w-border);
}
.card-wellness:hover {
box-shadow: 0 26px 60px rgba(123,94,167,0.18), 0 10px 24px rgba(0,0,0,0.08);
transform: translateY(-7px);
border-color: rgba(200,180,216,0.55);
}
/* Endurance card */
.card-endurance {
background: var(--p-card);
border: 1px solid var(--p-border);
}
.card-endurance:hover {
border-color: rgba(14, 165, 233, 0.5);
box-shadow: 0 22px 50px rgba(0,0,0,0.5), 0 0 48px var(--endurance-glow);
transform: translateY(-7px);
}
/* Strength card */
.card-strength {
background: var(--p-card);
border: 1px solid var(--p-border);
}
.card-strength:hover {
border-color: rgba(57, 255, 20, 0.45);
box-shadow: 0 22px 50px rgba(0,0,0,0.5), 0 0 48px var(--strength-glow);
transform: translateY(-7px);
}
/* Product image area */
/* SLOT de imagen de producto: fijo y uniforme en TODAS las cards
(el contenedor manda; la imagen se adapta dentro, sin recorte ni deformación) */
.product-img {
/* El cuadro ES la foto: misma proporción que los renders (1024×1536),
sin alto fijo ni padding — nada de fondo asomando alrededor. */
aspect-ratio: 2 / 3;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.img-wellness {
background: linear-gradient(135deg, #F4EFF8 0%, #ECF5F1 100%);
}
.img-endurance {
background: linear-gradient(135deg, #080C14 0%, #0A1020 100%);
}
.img-strength {
background: linear-gradient(135deg, #080A08 0%, #091409 100%);
}
/* Foto de producto: llena el cuadro a ras. Como el cuadro comparte la
proporción 2:3 de los renders, cover no recorta nada — se ve íntegra. */
.product-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Product image SVG icons */
/* Product badge */
.product-badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
padding: 0.25rem 0.625rem;
border-radius: 100px;
font-family: 'Montserrat', sans-serif;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.badge-default { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
/* Product card body */
.product-body {
padding: 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
}
.product-line-tag {
font-family: 'Montserrat', sans-serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.product-name {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.9rem;
line-height: 1.35;
margin-bottom: 0.25rem;
}
.name-dark { color: #1A1A1A; }
.name-light { color: #FFFFFF; }
.product-tagline {
font-size: 0.8rem;
margin-bottom: 1rem;
flex: 1;
}
/* Toda esta familia de metadatos caía por debajo de 4.5:1. Las alfas
suben lo justo para pasar AA sin romper la jerarquía frente al
nombre y el precio, que son los que deben mandar en la ficha. */
.tagline-dark { color: rgba(26,26,26,0.65); }
.tagline-light { color: rgba(255,255,255,0.62); }
.product-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.product-price {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 1.1rem;
}
.price-dark { color: #1A1A1A; }
.price-light { color: #FFFFFF; }
.price-original {
font-size: 0.75rem;
text-decoration: line-through;
margin-left: 0.4rem;
font-weight: 400;
}
.orig-dark { color: rgba(26,26,26,0.6); }
.orig-light { color: rgba(255,255,255,0.6); }
.product-weight {
font-size: 0.7rem;
font-weight: 500;
}
.weight-dark { color: rgba(26,26,26,0.62); }
.weight-light { color: rgba(255,255,255,0.62); }
.btn-add-to-cart {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease, opacity var(--t-fast) ease;
flex-shrink: 0;
cursor: pointer;
border: none;
}
/* Stars rating */
.product-rating {
display: flex;
align-items: center;
gap: 0.25rem;
margin-bottom: 0.75rem;
}
/* Las estrellas salen en fichas claras Y oscuras con una sola regla, y
ningún ámbar único pasa AA en ambos fondos: sobre blanco hace falta
uno oscuro (#F59E0B daba 2.15:1) y sobre #141414 uno claro. Van por
variante, igual que .rating-dark / .rating-light de al lado. */
/* El color base NO se deja sin definir: si por lo que sea faltara la
clase de variante, sin color heredaría el del contenedor y daría
1.06:1 sobre ficha oscura, o sea invisible. Así degrada al ámbar
original en vez de desaparecer. */
.stars { color: #F59E0B; font-size: 0.75rem; }
.stars-dark { color: #B45309; } /* ficha clara → 5.3:1 */
.stars-light { color: #F59E0B; } /* ficha oscura → 8.9:1 */
.rating-num {
font-size: 0.7rem;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
}
.rating-dark { color: rgba(26,26,26,0.65); }
.rating-light { color: rgba(255,255,255,0.62); }
/* ============================================================
FEATURED CAROUSEL (Netflix-style horizontal)
============================================================ */
.carousel {
position: relative;
}
.carousel-track {
display: flex;
gap: 1.25rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 0.5rem 0.25rem 1.25rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* Modo auto-deslizado: sin snap ni smooth para que el marquee fluya parejo */
.carousel-track.is-auto { scroll-snap-type: none; scroll-behavior: auto; }
.carousel-track.is-auto > .product-card { scroll-snap-align: none; }
/* Card widths -> ~1.1 mobile, 2 small tablet, 3 tablet, 4 desktop */
.carousel-track > .product-card {
flex: 0 0 84%;
scroll-snap-align: start;
}
@media (min-width: 560px) { .carousel-track > .product-card { flex: 0 0 46%; } }
@media (min-width: 900px) { .carousel-track > .product-card { flex: 0 0 calc((100% - 2.5rem) / 3); } }
@media (min-width: 1200px) { .carousel-track > .product-card { flex: 0 0 calc((100% - 3.75rem) / 4); } }
/* Envase protagonista en destacados: mismo slot uniforme */
.carousel-track > .product-card .product-img { height: auto; padding: 0; }
.carousel-track > .product-card .product-body { padding: 1.5rem 1.5rem 1.6rem; }
.carousel-track > .product-card { border-radius: 18px; }
.carousel-arrow {
position: absolute;
top: 42%;
transform: translateY(-50%);
z-index: 5;
width: 46px;
height: 46px;
border-radius: 50%;
background: #1A1A1A;
color: #fff;
border: 1px solid rgba(255,255,255,0.12);
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 10px 28px rgba(0,0,0,0.28);
transition: background var(--t-fast) ease, transform var(--t-fast) ease, opacity var(--t-fast) ease;
}
.carousel-arrow:hover { background: #000; transform: translateY(-50%) scale(1.07); }
.carousel-prev { left: -14px; }
.carousel-next { right: -14px; }
@media (min-width: 768px) { .carousel-arrow { display: flex; } }
/* ============================================================
FILOSOFÍA (brand manifesto) — premium
============================================================ */
/* ESPACIO ESTRELLADO en toda la sección: dos capas de estrellas SVG
(mosaicos de tamaños distintos para que no se lea la repetición)
sobre los lavados de color y una base más profunda — el mismo
cielo del globo, ahora de borde a borde. Las estrellas del canvas
se quitaron (initMente) para no duplicar densidad en su recuadro. */
.filo-section {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='1050'%3E%3Ccircle cx='139' cy='72' r='1.3' fill='%23CFE8D4' opacity='0.38'/%3E%3Ccircle cx='486' cy='225' r='1.2' fill='%23CFE8D4' opacity='0.54'/%3E%3Ccircle cx='1239' cy='9' r='1.3' fill='%23CFE8D4' opacity='0.35'/%3E%3Ccircle cx='129' cy='1035' r='1.4' fill='%23CFE8D4' opacity='0.42'/%3E%3Ccircle cx='1112' cy='58' r='1.2' fill='%23CFE8D4' opacity='0.46'/%3E%3Ccircle cx='1478' cy='224' r='1.4' fill='%23CFE8D4' opacity='0.36'/%3E%3Ccircle cx='286' cy='822' r='1.0' fill='%23CFE8D4' opacity='0.48'/%3E%3Ccircle cx='557' cy='534' r='1.5' fill='%23CFE8D4' opacity='0.49'/%3E%3Ccircle cx='1342' cy='959' r='1.3' fill='%23CFE8D4' opacity='0.50'/%3E%3Ccircle cx='1063' cy='228' r='1.1' fill='%23CFE8D4' opacity='0.43'/%3E%3Ccircle cx='1343' cy='999' r='1.4' fill='%23CFE8D4' opacity='0.46'/%3E%3Ccircle cx='477' cy='953' r='1.0' fill='%23CFE8D4' opacity='0.40'/%3E%3Ccircle cx='1203' cy='169' r='1.3' fill='%23CFE8D4' opacity='0.52'/%3E%3Ccircle cx='1163' cy='5' r='1.2' fill='%23CFE8D4' opacity='0.43'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='850'%3E%3Ccircle cx='13' cy='53' r='1.0' fill='%23CFE8D4' opacity='0.18'/%3E%3Ccircle cx='574' cy='345' r='0.7' fill='%23CFE8D4' opacity='0.11'/%3E%3Ccircle cx='609' cy='620' r='0.6' fill='%23CFE8D4' opacity='0.10'/%3E%3Ccircle cx='840' cy='441' r='0.6' fill='%23CFE8D4' opacity='0.13'/%3E%3Ccircle cx='323' cy='455' r='0.6' fill='%23CFE8D4' opacity='0.22'/%3E%3Ccircle cx='272' cy='746' r='0.6' fill='%23CFE8D4' opacity='0.10'/%3E%3Ccircle cx='170' cy='247' r='0.8' fill='%23CFE8D4' opacity='0.19'/%3E%3Ccircle cx='82' cy='776' r='0.8' fill='%23CFE8D4' opacity='0.17'/%3E%3Ccircle cx='748' cy='821' r='0.8' fill='%23CFE8D4' opacity='0.21'/%3E%3Ccircle cx='910' cy='34' r='0.6' fill='%23CFE8D4' opacity='0.13'/%3E%3Ccircle cx='468' cy='17' r='0.5' fill='%23CFE8D4' opacity='0.19'/%3E%3Ccircle cx='406' cy='363' r='0.7' fill='%23CFE8D4' opacity='0.21'/%3E%3Ccircle cx='774' cy='585' r='0.7' fill='%23CFE8D4' opacity='0.13'/%3E%3Ccircle cx='153' cy='113' r='1.0' fill='%23CFE8D4' opacity='0.13'/%3E%3Ccircle cx='209' cy='537' r='0.7' fill='%23CFE8D4' opacity='0.09'/%3E%3Ccircle cx='753' cy='783' r='0.8' fill='%23CFE8D4' opacity='0.20'/%3E%3Ccircle cx='721' cy='782' r='0.6' fill='%23CFE8D4' opacity='0.15'/%3E%3Ccircle cx='714' cy='757' r='1.0' fill='%23CFE8D4' opacity='0.20'/%3E%3Ccircle cx='654' cy='819' r='1.0' fill='%23CFE8D4' opacity='0.16'/%3E%3Ccircle cx='900' cy='5' r='0.8' fill='%23CFE8D4' opacity='0.13'/%3E%3Ccircle cx='797' cy='467' r='0.9' fill='%23CFE8D4' opacity='0.22'/%3E%3Ccircle cx='613' cy='700' r='0.7' fill='%23CFE8D4' opacity='0.17'/%3E%3Ccircle cx='812' cy='469' r='0.7' fill='%23CFE8D4' opacity='0.11'/%3E%3Ccircle cx='10' cy='20' r='1.0' fill='%23CFE8D4' opacity='0.20'/%3E%3Ccircle cx='694' cy='12' r='0.8' fill='%23CFE8D4' opacity='0.16'/%3E%3Ccircle cx='789' cy='846' r='0.6' fill='%23CFE8D4' opacity='0.22'/%3E%3Ccircle cx='715' cy='684' r='0.8' fill='%23CFE8D4' opacity='0.20'/%3E%3Ccircle cx='153' cy='845' r='0.8' fill='%23CFE8D4' opacity='0.16'/%3E%3Ccircle cx='177' cy='337' r='0.6' fill='%23CFE8D4' opacity='0.19'/%3E%3Ccircle cx='948' cy='626' r='0.8' fill='%23CFE8D4' opacity='0.22'/%3E%3Ccircle cx='670' cy='626' r='1.0' fill='%23CFE8D4' opacity='0.15'/%3E%3Ccircle cx='253' cy='496' r='0.9' fill='%23CFE8D4' opacity='0.20'/%3E%3Ccircle cx='209' cy='472' r='0.7' fill='%23CFE8D4' opacity='0.15'/%3E%3Ccircle cx='198' cy='213' r='0.7' fill='%23CFE8D4' opacity='0.15'/%3E%3Ccircle cx='188' cy='3' r='0.6' fill='%23CFE8D4' opacity='0.08'/%3E%3Ccircle cx='118' cy='745' r='1.0' fill='%23CFE8D4' opacity='0.09'/%3E%3Ccircle cx='192' cy='344' r='0.7' fill='%23CFE8D4' opacity='0.18'/%3E%3Ccircle cx='405' cy='306' r='0.9' fill='%23CFE8D4' opacity='0.18'/%3E%3Ccircle cx='880' cy='450' r='0.9' fill='%23CFE8D4' opacity='0.14'/%3E%3Ccircle cx='619' cy='249' r='0.8' fill='%23CFE8D4' opacity='0.19'/%3E%3Ccircle cx='88' cy='214' r='0.9' fill='%23CFE8D4' opacity='0.20'/%3E%3Ccircle cx='852' cy='365' r='0.7' fill='%23CFE8D4' opacity='0.21'/%3E%3Ccircle cx='276' cy='307' r='0.7' fill='%23CFE8D4' opacity='0.20'/%3E%3Ccircle cx='444' cy='828' r='0.8' fill='%23CFE8D4' opacity='0.14'/%3E%3C/svg%3E"),
radial-gradient(ellipse 70% 50% at 12% 8%, rgba(14,165,233,0.09) 0%, transparent 55%),
radial-gradient(ellipse 65% 55% at 88% 92%, rgba(57,255,20,0.08) 0%, transparent 55%),
linear-gradient(180deg, #070707 0%, #040604 50%, #070707 100%);
position: relative;
/* clip, NO hidden: overflow:hidden rompe el position:sticky del 1% */
overflow: clip;
}
.filo-watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(16rem, 42vw, 40rem);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.04);
user-select: none;
pointer-events: none;
z-index: 0;
}
/* ══ IDENTIDAD · MENTALIDAD 1% ══════════════════════════════
Título + manifiesto en columna de lectura cómoda (58ch, 1.75);
al lado EL MAPA: México dibujado con puntos (canvas, estilo
panel de administración) — cientos apagados y TÚ encendido en
verde Strength, el acento de la casa. El punto deambula solo
(initMente); el cursor te lo da. Sin neón, sin marquesina. */
.filo-section {
min-height: 100vh; min-height: 100svh;
display: flex;
flex-direction: column;
padding: clamp(5rem, 9vh, 6.5rem) 0 clamp(2rem, 5vh, 3.5rem); padding: clamp(5rem, 9svh, 6.5rem) 0 clamp(2rem, 5svh, 3.5rem);
}
.filo-section > .container { margin-block: auto; }
.mente-grid {
position: relative; z-index: 1;
display: grid;
/* el mapa ES el protagonista visual: se lleva la columna grande */
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(2.5rem, 5vw, 4.5rem);
align-items: center;
}
/* — Columna de lectura — */
.mente-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3rem, 6.5vw, 5.5rem);
line-height: 0.94; letter-spacing: 0.01em; text-transform: uppercase;
color: #F2EFE6;
}
.mente-title .mt-uno { color: var(--strength); display: inline-block; }
/* B: el «1%» late al ritmo del ping del radar del mapa (2.2s).
initMente le pone la clase y el delay negativo para clavar la fase. */
.mente-title .mt-uno.late { animation: unoLate 2.2s var(--ease-firma) infinite; }
@keyframes unoLate {
0% { transform: scale(1); text-shadow: 0 0 0 rgba(57,255,20,0); }
7% { transform: scale(1.04); text-shadow: 0 2px 18px rgba(57,255,20,0.35); }
22% { transform: scale(1); text-shadow: 0 0 0 rgba(57,255,20,0); }
100% { transform: scale(1); }
}
.mente-parrafos {
margin-top: clamp(1.4rem, 3vh, 2rem); margin-top: clamp(1.4rem, 3svh, 2rem);
display: flex; flex-direction: column;
gap: 1.15rem;
max-width: 58ch;
}
.mente-parrafos p {
font-family: 'Inter', sans-serif;
font-size: clamp(0.95rem, 1.05vw, 1.05rem);
line-height: 1.75;
color: rgba(255,255,255,0.72);
}
.mente-parrafos b { color: #FFFFFF; font-weight: 600; }
/* A: las frases clave dibujan su subrayado verde al entrar en vista,
escalonadas después del fade de su párrafo */
.mente-texto.reveal .mente-parrafos b {
background-image: linear-gradient(var(--strength), var(--strength));
background-repeat: no-repeat;
background-size: 0% 2px;
background-position: 0 97%;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background-size 0.7s var(--ease-firma);
}
.mente-texto.reveal.visible .mente-parrafos p:nth-child(1) b { background-size: 100% 2px; transition-delay: 0.70s; }
.mente-texto.reveal.visible .mente-parrafos p:nth-child(2) b { background-size: 100% 2px; transition-delay: 0.90s; }
.mente-texto.reveal.visible .mente-parrafos p:nth-child(3) b { background-size: 100% 2px; transition-delay: 1.10s; }
.mente-texto.reveal.visible .mente-parrafos p:nth-child(4) b { background-size: 100% 2px; transition-delay: 1.30s; }
/* entrada por bloques sobre el sistema .reveal existente */
.mente-texto.reveal .mente-title,
.mente-texto.reveal .mente-parrafos p {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.55s ease, transform 0.75s var(--ease-firma);
}
.mente-texto.reveal.visible .mente-title,
.mente-texto.reveal.visible .mente-parrafos p { opacity: 1; transform: none; }
.mente-texto.reveal.visible .mente-parrafos p:nth-child(1) { transition-delay: 0.12s; }
.mente-texto.reveal.visible .mente-parrafos p:nth-child(2) { transition-delay: 0.22s; }
.mente-texto.reveal.visible .mente-parrafos p:nth-child(3) { transition-delay: 0.32s; }
.mente-texto.reveal.visible .mente-parrafos p:nth-child(4) { transition-delay: 0.42s; }
/* — EL GLOBO: un planeta dibujado con puntos sobre canvas — los
continentes en gris apagado girando despacio y la X de la marca
al frente en puntos brillantes, con limbo verde. Sin etiquetas
ni interacción: puro ambiente. — */
.mundo {
position: relative;
justify-self: center;
width: 100%;
/* cuadrado; capado a la altura de la pantalla para que la
sección siga cabiendo en 100svh */
max-width: min(580px, 64vh);
}
/* halo atmosférico FUERA del canvas: al vivir en CSS puede desbordar
la caja y fundirse con el cielo sin recortarse. ⚠️ closest-side es
OBLIGATORIO: garantiza alpha 0 en la orilla más cercana de la caja
(con farthest-corner el gradiente aún tenía brillo al llegar al
borde derecho/inferior y el rectángulo se marcaba como cuadro). */
.mundo::before {
content: '';
position: absolute;
inset: -30%;
background: radial-gradient(circle closest-side at 63% 53%, rgba(57,255,20,0.05) 0%, rgba(57,255,20,0.028) 45%, rgba(57,255,20,0.012) 72%, transparent 94%);
pointer-events: none;
}
.mundo-canvas {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
}
@media (max-width: 820px) {
.mente-grid { grid-template-columns: 1fr; gap: 2.4rem; }
.mundo { max-width: min(440px, 92vw); }
}
@media (prefers-reduced-motion: reduce) {
.mente-texto.reveal .mente-title,
.mente-texto.reveal .mente-parrafos p { opacity: 1; transform: none; transition: none; }
.mente-texto.reveal .mente-parrafos b { background-size: 100% 2px; transition: none; }
.mente-title .mt-uno.late { animation: none; }
}
.filo-pulse {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 52% 46% at 32% 46%, rgba(14,165,233,0.13) 0%, transparent 60%),
radial-gradient(ellipse 52% 46% at 68% 54%, rgba(57,255,20,0.10) 0%, transparent 60%);
animation: mfLatido 4s ease-out infinite;
}
@keyframes mfLatido {
0% { opacity: 0.32; transform: scale(1); }
8% { opacity: 0.70; transform: scale(1.03); }
16% { opacity: 0.38; transform: scale(1.004); }
24% { opacity: 0.58; transform: scale(1.02); }
38% { opacity: 0.32; transform: scale(1); }
100% { opacity: 0.32; transform: scale(1); }
}
.ident {
position: relative; z-index: 2;
max-width: 940px;
margin: 0 auto;
padding: clamp(1.8rem, 4.2vh, 3.2rem) clamp(1.4rem, 3.5vw, 3rem);
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.09);
background: linear-gradient(165deg, rgba(22,28,22,0.9) 0%, rgba(11,15,21,0.93) 100%);
box-shadow: 0 40px 100px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
text-align: center;
}
.ident::before {
content: ''; position: absolute; top: -1px; left: 16%; right: 16%; height: 2px;
background: linear-gradient(90deg, transparent, var(--endurance) 30%, var(--strength) 70%, transparent);
opacity: 0.7;
}
.id-eyebrow {
font-family: 'Montserrat', sans-serif;
font-size: 0.62rem; font-weight: 700;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--endurance);
margin: 0 0 clamp(0.8rem, 2vh, 1.4rem);
}
/* la frase: escala con el alto de la pantalla para no desbordar */
.id-punch {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.9rem, min(5.4vw, 6.4vh), 3.9rem);
line-height: 0.97;
color: #fff;
margin: 0 0 clamp(1.4rem, 3.4vh, 2.4rem);
padding-bottom: clamp(1.2rem, 3vh, 2rem);
border-bottom: 1px solid rgba(255,255,255,0.1);
text-shadow: 0 0 70px rgba(14,165,233,0.22), 0 0 110px rgba(57,255,20,0.16);
}
.id-punch em {
font-style: normal;
/* de azul a verde: las dos líneas de la marca en una sola frase */
background: linear-gradient(100deg, var(--endurance) 12%, #7CE85C 52%, var(--strength) 88%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
/* respaldo si el navegador no recorta el degradado al texto */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.id-punch em { background: none; color: var(--strength); }
}
/* los dos párrafos, lado a lado */
.id-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 3.5vw, 2.8rem);
text-align: left;
}
.id-p {
font-family: 'Montserrat', sans-serif;
font-size: clamp(0.84rem, min(1.15vw, 1.75vh), 1rem);
font-weight: 400;
line-height: 1.8;
color: rgba(255,255,255,0.72);
margin: 0;
text-wrap: pretty;
}
.id-p b { font-weight: 700; color: #fff; }
/* cierre: la última línea del texto, no un botón */
.id-cta {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.3rem, min(2.6vw, 3.4vh), 2rem);
letter-spacing: 0.04em;
color: var(--strength);
margin: clamp(1.4rem, 3.4vh, 2.4rem) 0 0;
padding-top: clamp(1.1rem, 2.6vh, 1.8rem);
border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 780px) {
/* apilados, el texto necesita ir más apretado para caber en una pantalla */
.id-cols { grid-template-columns: 1fr; gap: 0.85rem; }
.id-p { font-size: clamp(0.8rem, 1.45vh, 0.92rem); line-height: 1.6; }
.ident { max-width: 560px; }
.id-punch {
font-size: clamp(1.6rem, min(6.6vw, 5vh), 2.4rem);
margin-bottom: clamp(0.9rem, 2.2vh, 1.4rem);
padding-bottom: clamp(0.8rem, 2vh, 1.2rem);
}
.id-eyebrow { margin-bottom: clamp(0.5rem, 1.4vh, 0.9rem); }
.id-cta { margin-top: clamp(1rem, 2.4vh, 1.6rem); }
}
@media (max-width: 560px) {
.ident { border-radius: 18px; padding: clamp(1.1rem, 2.6vh, 1.6rem) 1.2rem; }
.id-punch br { display: initial; }
}
/* Pantallas muy bajas y angostas (iPhone SE y similares): aquí el texto
no cabe sin volverse ilegible. Preferimos que la sección crezca y se
pueda desplazar antes que reducir la letra por debajo de lo legible. */
@media (max-height: 680px) and (max-width: 780px) {
.filo-section { min-height: 0; padding: 3rem 0; }
}
@media (prefers-reduced-motion: reduce) { .filo-pulse { animation: none; opacity: 0.4; } }
.filo-inner {
position: relative;
z-index: 1;
max-width: 880px;
margin: 0 auto;
text-align: center;
}
/* Card que envuelve el manifiesto para dar profundidad */
.filo-card {
position: relative;
background: linear-gradient(165deg, rgba(20,26,20,0.85) 0%, rgba(10,14,20,0.9) 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 28px;
padding: clamp(2rem, 5vw, 4rem);
box-shadow:
0 40px 100px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.05);
overflow: hidden;
}
.filo-card::before {
content: '';
position: absolute;
top: -1px; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--endurance), var(--strength), transparent);
opacity: 0.7;
}
.filo-lead {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: clamp(1.3rem, 3.2vw, 1.9rem);
line-height: 1.35;
color: #FFFFFF;
margin: 0 auto 1rem;
max-width: 660px;
}
.filo-text {
font-size: 1rem;
line-height: 1.8;
color: rgba(255,255,255,0.58);
max-width: 620px;
margin: 0 auto;
}
.filo-pillars, .filo-tags {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
justify-content: center;
}
.filo-pillar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.25rem;
border-radius: 100px;
font-family: 'Montserrat', sans-serif;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #FFFFFF;
background: linear-gradient(135deg, rgba(14,165,233,0.16), rgba(57,255,20,0.1));
border: 1px solid rgba(14,165,233,0.3);
}
.filo-pillar::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: var(--endurance);
box-shadow: 0 0 8px var(--endurance);
}
/* Panel del bloque 1% con borde de acento */
.filo-onepct {
display: flex;
flex-direction: column;
gap: 0.55rem;
max-width: 560px;
margin: 0 auto;
text-align: left;
padding: 1.5rem 1.75rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-left: 3px solid var(--strength);
border-radius: 14px;
}
.filo-onepct span {
font-family: 'Montserrat', sans-serif;
font-size: 0.95rem;
color: rgba(255,255,255,0.62);
line-height: 1.55;
}
.filo-onepct span strong { color: var(--strength); font-weight: 800; }
/* Frase de marca fuerte (NO cursiva, condensada, impacto) */
.filo-quote-block {
position: relative;
padding: clamp(1.75rem, 4vw, 2.75rem);
border-radius: 20px;
background: linear-gradient(135deg, rgba(14,165,233,0.1) 0%, rgba(8,8,8,0.4) 50%, rgba(57,255,20,0.08) 100%);
border: 1px solid rgba(255,255,255,0.1);
}
.filo-quote {
font-family: 'Bebas Neue', sans-serif;
font-style: normal;
font-size: clamp(2.1rem, 6vw, 3.9rem);
line-height: 1.02;
letter-spacing: 0.02em;
color: #FFFFFF;
text-transform: none;
margin: 0 auto;
max-width: 760px;
}
.filo-quote-accent {
color: var(--strength);
text-shadow: 0 0 32px rgba(57,255,20,0.4);
}
.filo-subtext {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 0.95rem;
color: rgba(255,255,255,0.55);
margin-top: 1.1rem;
}
.filo-tag {
padding: 0.5rem 1.1rem;
border-radius: 100px;
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--strength);
background: rgba(57,255,20,0.08);
border: 1px solid rgba(57,255,20,0.25);
}
/* Layout compacto a 2 columnas */
.filo-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: left;
}
@media (min-width: 860px) {
.filo-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem; align-items: stretch; }
}
.filo-col {
display: flex;
flex-direction: column;
gap: 1rem;
}
.filo-grid .filo-lead { font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin: 0; max-width: none; }
.filo-grid .filo-text { margin: 0; max-width: none; font-size: 0.95rem; line-height: 1.7; }
.filo-grid .filo-onepct { margin: 0; gap: 0.4rem; padding: 1.25rem 1.4rem; }
.filo-grid .filo-onepct span { font-size: 0.9rem; line-height: 1.45; }
.filo-grid .filo-pillars { justify-content: flex-start; }
/* ============================================================
CATEGORY LOBBY (Wellness store entrance)
============================================================ */
.cat-lobby {
background: linear-gradient(180deg, #FFFFFF 0%, var(--white) 100%);
}
/* ── Botón "Ver categorías" (vuelve al lobby desde la lista) ── */
.coll-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.btn-up-cats {
display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
padding: 0.65rem 1.1rem; border-radius: 999px;
color: #1A1A1A; background: #FFFFFF; border: 1px solid var(--w-border, rgba(0,0,0,0.12));
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btn-up-cats:hover, .btn-up-cats:focus-visible { background: #1A1A1A; color: #fff; transform: translateY(-2px); }
.btn-up-cats.on-dark { color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.btn-up-cats.on-dark:hover, .btn-up-cats.on-dark:focus-visible { background: #fff; color: #0A0A0A; }
/* en móvil: solo una flecha en círculo, esquina inferior izquierda */
@media (max-width: 767px) {
.btn-up-cats {
position: fixed; left: 1.1rem; transform: none;
/* safe-area: fuera de la franja del gesto de iOS */
bottom: max(1.1rem, env(safe-area-inset-bottom));
width: 48px; height: 48px; padding: 0; gap: 0; border-radius: 50%;
justify-content: center;
/* 28: encima del contenido pero debajo del nav (30), del menú móvil (31)
y de la búsqueda (35) — antes con 45 flotaba sobre los overlays */
z-index: 28; opacity: 0; pointer-events: none;
background: rgba(20,20,20,0.92); color: #fff; border-color: rgba(255,255,255,0.2);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 6px 22px rgba(0,0,0,0.3);
transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease;
}
.btn-up-cats .up-cats-txt { display: none; } /* solo la flecha */
.btn-up-cats svg { width: 20px; height: 20px; }
.btn-up-cats.visible { opacity: 1; pointer-events: auto; }
.btn-up-cats:hover, .btn-up-cats:focus-visible,
.btn-up-cats.on-dark:hover, .btn-up-cats.on-dark:focus-visible {
background: #fff; color: #0A0A0A; transform: translateY(-2px);
}
}
.cat-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
/* ── Móvil: categorías como carrusel tipo Netflix ─────────── */
@media (max-width: 599px) {
.cat-grid {
display: flex; gap: 0.9rem;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* sangrado a los bordes de la pantalla, como Netflix */
margin-left: -1.5rem; margin-right: -1.5rem;
padding: 0.25rem 1.5rem 1.1rem;
}
.cat-grid::-webkit-scrollbar { display: none; }
.cat-grid > * {
flex: 0 0 78%; max-width: 300px;
scroll-snap-align: start;
}
body[data-page="wellness"] .cat-grid { gap: 0.9rem; }
body[data-page="wellness"] .cat-card { padding: 1.4rem; }
body[data-page="wellness"] .cat-icon { width: 56px; height: 56px; border-radius: 16px; }
/* pista de scroll sutil bajo el carrusel */
.cat-rail { position: relative; }
.cat-rail::after {
content: ''; position: absolute; right: 0; top: 0; bottom: 1.1rem; width: 44px;
background: linear-gradient(90deg, transparent, var(--rail-fade, var(--white)));
pointer-events: none; opacity: 0.9;
}
body[data-page="performance"] .cat-rail::after { --rail-fade: #0A0A0A; }
}
@media (min-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
/* ≥600 el lobby es grid estático (no carrusel): el glow .edge-light de
border-glow sobresale de la última columna y metía 2-6px de scroll
lateral a la página entera (wellness/performance). Recorte solo en X. */
@media (min-width: 600px) { .cat-grid { overflow-x: clip; } }
/* Wellness: categorías en 4 columnas — ícono arriba, título e info abajo (sin "Explorar") */
body[data-page="wellness"] .cat-lobby .container { max-width: 1500px; padding-left: 1.5rem; padding-right: 1.5rem; }
body[data-page="wellness"] .cat-grid { gap: 1.5rem; }
@media (min-width: 600px) { body[data-page="wellness"] .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { body[data-page="wellness"] .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { body[data-page="wellness"] .cat-grid { grid-template-columns: repeat(4, 1fr); } }
/* Rutinas: lobby de 5 categorías (mismo sistema, tema oscuro).
La card activa filtra el grid de rutinas; se marca con su acento. */
@media (min-width: 900px) { body[data-page="rutinas"] .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { body[data-page="rutinas"] .cat-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 599px) { body[data-page="rutinas"] .cat-rail::after { --rail-fade: #0A0A0A; } }
.cat-card.is-active {
border-color: var(--cat-accent);
box-shadow: inset 0 0 0 1.5px var(--cat-accent),
0 8px 26px color-mix(in srgb, var(--cat-accent) 22%, transparent);
}
.rutina-card3.rt-hidden { display: none; }
body[data-page="wellness"] .cat-card { padding: 1.9rem; border-radius: 20px; }
body[data-page="wellness"] .cat-card-top { flex-direction: column; align-items: flex-start; gap: 1.05rem; margin-bottom: 0; flex: none; }
body[data-page="wellness"] .cat-icon { width: 72px; height: 72px; border-radius: 20px; }
body[data-page="wellness"] .cat-title { font-size: 1.18rem; margin-bottom: 0.4rem; }
body[data-page="wellness"] .cat-desc { font-size: 0.88rem; line-height: 1.55; }
.cat-card {
display: flex;
flex-direction: column;
text-align: left;
background: #FFFFFF;
border: 1px solid var(--w-border);
border-radius: 20px;
padding: 1.75rem;
cursor: pointer;
font-family: inherit;
transition: transform var(--t-base) cubic-bezier(0.25,0.46,0.45,0.94),
box-shadow var(--t-base) ease,
border-color var(--t-base) ease;
}
.cat-card:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--cat-accent, #7B5EA7) 55%, transparent);
box-shadow: 0 24px 56px -22px color-mix(in srgb, var(--cat-accent, #7B5EA7) 45%, transparent);
}
.cat-card-top {
display: flex;
align-items: flex-start;
gap: 1.1rem;
margin-bottom: 1.5rem;
flex: 1;
}
.cat-icon {
width: 64px;
height: 64px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform var(--t-base) ease;
}
.cat-card:hover .cat-icon { transform: scale(1.06); }
.cat-info { padding-top: 0.15rem; }
.cat-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.05rem;
line-height: 1.25;
color: #1A1A1A;
margin-bottom: 0.4rem;
}
.cat-desc {
font-size: 0.82rem;
color: rgba(26,26,26,0.55);
line-height: 1.5;
}
.cat-explore {
display: inline-flex;
align-items: center;
gap: 0.5rem;
width: fit-content;
padding: 0.55rem 1.15rem;
border-radius: 100px;
font-family: 'Montserrat', sans-serif;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: gap var(--t-fast) ease;
}
.cat-card:hover .cat-explore { gap: 0.85rem; }
/* Dark variant (Performance lobby) */
.cat-card-dark {
background: var(--p-card);
border: 1px solid var(--p-border);
}
.cat-card-dark .cat-title { color: #FFFFFF; }
.cat-card-dark .cat-desc { color: rgba(255,255,255,0.45); }
.cat-card-dark:hover {
border-color: rgba(255,255,255,0.18);
box-shadow: 0 18px 50px rgba(0,0,0,0.4);
}
/* ============================================================
RUTINAS / BUNDLES
============================================================ */
/* Negro (antes crema): la sección se sentía plana y las cards no
resaltaban. Sobre negro las tarjetas claras saltan y las oscuras se
definen con su borde — igual que en la página rutinas.html standalone,
que ya usa fondo oscuro. Gradiente sutil para dar profundidad. */
.rutinas-section {
background: linear-gradient(180deg, #0D0D10 0%, var(--black) 60%);
}
/* ============================================================
RUTINAS — sistema unificado de cards premium (.rutina-card3)
Área visual grande (rotación de productos) + info jerarquizada.
Colorimetría por línea via --rt-acc / --rt-deep / clases rt-dark|rt-light
============================================================ */
.rutinas-grid-home,
.rutinas-grid-full {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
align-items: stretch;
}
@media (min-width: 720px) { .rutinas-grid-home, .rutinas-grid-full { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .rutinas-grid-home, .rutinas-grid-full { grid-template-columns: repeat(3, 1fr); } }
.rutina-card3 {
--rt-acc: #B98FD8;
--rt-deep: #7C5CC0;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border-radius: 22px;
overflow: hidden;
text-align: left;
font-family: inherit;
cursor: pointer;
background: #0d0d10;
border: 1px solid rgba(255,255,255,0.08);
scroll-margin-top: 120px;
transition: transform var(--t-base) cubic-bezier(0.25,0.46,0.45,0.94),
box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}
.rutina-card3:hover { transform: translateY(-8px); }
.rutina-card3:focus-visible { outline: 2px solid var(--rt-deep); outline-offset: 3px; }
/* halo de color por línea (controlado, no gamer) */
.rutina-card3.rt-dark:hover {
box-shadow: 0 26px 60px rgba(0,0,0,0.5),
0 18px 50px -14px color-mix(in srgb, var(--rt-acc) 50%, transparent);
border-color: color-mix(in srgb, var(--rt-acc) 35%, transparent);
}
.rutina-card3.rt-light { background: #ffffff; border-color: rgba(20,18,30,0.08); }
.rutina-card3.rt-light:hover {
box-shadow: 0 26px 60px rgba(20,18,30,0.13),
0 18px 50px -16px color-mix(in srgb, var(--rt-acc) 60%, transparent);
border-color: color-mix(in srgb, var(--rt-acc) 42%, transparent);
}
/* ---- Área visual grande (rotación 1×1) ---- */
.rt-visual {
position: relative;
height: 390px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
@media (min-width: 720px) { .rt-visual { height: 390px; } }
.rt-halo { position: absolute; inset: 0; pointer-events: none; }
.rt-stack { position: relative; width: 100%; height: 100%; }
.rt-slide {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
padding: 0.7rem; /* casi sin margen: el frasco protagoniza, centrado y grande */
opacity: 0; transform: scale(0.955) translateY(8px);
transition: opacity 0.7s ease, transform 0.7s ease;
pointer-events: none;
}
.rt-slide.is-active { opacity: 1; transform: none; }
/* imagen de la rutina: mismo sistema que producto → ~295×387, vertical, contain */
.rt-img {
width: auto;
height: 100%;
max-width: 295px;
max-height: 387px;
object-fit: contain;
object-position: center;
display: block;
}
/* indicadores */
.rt-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.rt-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--rt-deep) 30%, transparent); transition: background-color var(--t-base) ease, width var(--t-base) ease; cursor: pointer; }
/* zona de toque ampliada sin cambiar el visual (el dot mide 7px) */
.rt-dot::before, .rm-dot::before { content: ''; position: absolute; inset: -12px -6px; }
.rt-dot.is-active { background: var(--rt-deep); width: 20px; border-radius: 100px; }
.rt-dark .rt-dot { background: rgba(255,255,255,0.22); }
.rt-dark .rt-dot.is-active { background: var(--rt-acc); }
/* badge "Más popular" */
.rt-badge {
position: absolute; top: 16px; left: 16px; z-index: 4;
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.42rem 0.8rem; border-radius: 100px;
font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
background: color-mix(in srgb, var(--rt-acc) 20%, #ffffff); color: var(--rt-deep);
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.rt-dark .rt-badge { background: color-mix(in srgb, var(--rt-acc) 24%, #0a0a0a); color: var(--rt-acc); box-shadow: 0 0 18px color-mix(in srgb, var(--rt-acc) 35%, transparent); }
.rt-badge svg { width: 12px; height: 12px; }
/* ---- Cuerpo / jerarquía ---- */
.rt-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.rt-cat {
font-family: 'Montserrat', sans-serif; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--rt-deep); margin-bottom: 0.55rem;
}
.rt-dark .rt-cat { color: var(--rt-acc); }
.rt-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; line-height: 0.98; letter-spacing: 0.02em; color: #141019; margin-bottom: 0.4rem; }
.rt-dark .rt-title { color: #fff; }
.rt-phrase { font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--rt-deep); margin-bottom: 0.7rem; }
.rt-dark .rt-phrase { color: var(--rt-acc); }
.rt-desc { font-family: 'Inter', sans-serif; font-size: 0.82rem; line-height: 1.6; color: #52505c; margin-bottom: 1.1rem; }
.rt-dark .rt-desc { color: rgba(255,255,255,0.58); }
.rt-list { list-style: none; display: flex; flex-direction: column; margin-bottom: 1.1rem; }
.rt-li { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; border-top: 1px solid rgba(20,18,30,0.07); }
.rt-li:first-child { border-top: none; }
.rt-dark .rt-li { border-top-color: rgba(255,255,255,0.07); }
.rt-num {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 800;
color: var(--rt-deep); background: color-mix(in srgb, var(--rt-acc) 16%, transparent);
}
.rt-dark .rt-num { color: var(--rt-acc); }
.rt-li-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rt-li-name { font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 700; color: #1d1b26; }
.rt-dark .rt-li-name { color: #fff; }
.rt-li-sub { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #64626E; line-height: 1.35; } /* #7a7886 daba 4.08:1 */
.rt-dark .rt-li-sub { color: rgba(255,255,255,0.62); } /* 0.42 daba 4.08:1 en card oscura */
.rt-li-price { flex-shrink: 0; font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 700; color: #3a3844; }
.rt-dark .rt-li-price { color: rgba(255,255,255,0.6); }
/* ---- Footer: precio + ahorro + CTA full-width ---- */
.rt-foot {
margin: 0 -1.5rem -1.5rem; margin-top: auto;
padding: 1.25rem;
display: flex; flex-direction: column; gap: 1rem;
background: color-mix(in srgb, var(--rt-acc) 9%, transparent);
}
.rt-dark .rt-foot { background: rgba(255,255,255,0.035); }
.rt-pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.7rem; }
.rt-final { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.7rem; line-height: 1; color: #141019; }
.rt-dark .rt-final { color: #fff; }
.rt-price-row { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.rt-orig { font-family: 'Montserrat', sans-serif; font-size: 0.8rem; text-decoration: line-through; color: #6A6874; } /* #9a98a4 daba 2.84:1 */
.rt-dark .rt-orig { color: rgba(255,255,255,0.55); } /* 0.35 daba 3.17:1 */
.rt-save { font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 800; color: var(--rt-deep); }
.rt-dark .rt-save { color: var(--rt-acc); }
.rt-cta {
display: flex; align-items: center; justify-content: center; gap: 0.55rem;
width: 100%; padding: 0.95rem 1.5rem;
font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
background: var(--rt-cta-bg); color: var(--rt-cta-tx);
clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
transition: filter var(--t-fast) ease;
}
.rutina-card3:hover .rt-cta { filter: brightness(1.06); }
.rt-cta svg { transition: transform var(--t-fast) ease; }
.rutina-card3:hover .rt-cta svg { transform: translateX(3px); }
@media (max-width: 520px) {
.rt-visual { height: 360px; }
.rt-title { font-size: 1.75rem; }
.rt-body { padding: 1.25rem; }
.rt-foot { margin: 0 -1.25rem -1.25rem; margin-top: auto; }
}
@media (prefers-reduced-motion: reduce) {
.rt-slide { transition: opacity 0.25s ease; transform: none; }
}
/* (CSS antiguo de .rutina-card-full reemplazado por el sistema .rutina-card3 de arriba,
que ahora se usa en TODOS los renders de rutina: home, rutinas, wellness y performance.) */
/* Scrollable filter row (categories) */
.filter-scroll {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.5rem;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
/* Había 2.269px de categorías escondidas a la derecha SIN ninguna
señal: barra invisible en móvil, sin snap. El degradado de máscara
desvanece el borde derecho para avisar "hay más", y el snap hace
que las pestañas se alineen al deslizar. */
scroll-snap-type: x proximity;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
/* al llegar al final quitamos el desvanecido para que la última pestaña
no quede semitransparente cuando ya no hay nada más que revelar */
.filter-scroll.at-end {
-webkit-mask-image: none;
mask-image: none;
}
.filter-scroll::-webkit-scrollbar { height: 4px; }
.filter-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
.filter-scroll .filter-tab { flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; }
/* ── Flechas para deslizar las categorías en PC ──────────── */
.fs-wrap { position: relative; }
.fs-arrow {
position: absolute; top: calc(50% - 0.25rem); transform: translateY(-50%);
z-index: 6; display: none; align-items: center; justify-content: center;
/* 44px: en tablet táctil (768-1024px) 38px quedaba bajo el mínimo */
width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
background: #FFFFFF; color: #1A1A1A;
border: 1px solid var(--w-border, rgba(0,0,0,0.12));
box-shadow: 0 4px 16px rgba(0,0,0,0.14);
transition: opacity 0.25s ease, background 0.25s ease, transform 0.2s ease;
}
.fs-arrow svg { width: 17px; height: 17px; }
.fs-arrow.prev { left: -6px; }
.fs-arrow.next { right: -6px; }
.fs-arrow:hover { background: #1A1A1A; color: #fff; }
.fs-arrow[disabled] { opacity: 0; pointer-events: none; }
/* variante para las secciones de fondo oscuro (Performance) */
body[data-page="performance"] .fs-arrow,
.fs-arrow.on-dark {
background: rgba(28,28,28,0.94); color: #fff; border-color: rgba(255,255,255,0.18);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body[data-page="performance"] .fs-arrow:hover, .fs-arrow.on-dark:hover { background: #fff; color: #0A0A0A; }
/* solo en PC: en móvil se desliza con el dedo */
@media (min-width: 768px) {
.fs-arrow { display: flex; }
/* deja aire a los lados para que las flechas no tapen las pestañas */
.fs-wrap .filter-scroll { padding-left: 2.4rem; padding-right: 2.4rem; scroll-padding-left: 2.4rem; }
.fs-wrap .filter-scroll::-webkit-scrollbar { height: 0; }
.fs-wrap .filter-scroll { scrollbar-width: none; }
}
/* ============================================================
AMBASSADORS
============================================================ */
.ambassadors-section {
background: var(--p-bg);
overflow: hidden;
}
/* Cabecera editorial: título Bebas grande anclado arriba-izquierda,
descripción debajo — nada centrado, nada a dos columnas */
.amb-head { margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.amb-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3rem, 6.5vw, 5.5rem);
line-height: 0.94;
letter-spacing: 0.01em;
text-transform: uppercase;
color: #F2EFE6;
}
.amb-sub {
margin-top: 1rem;
max-width: 44ch;
font-size: clamp(0.95rem, 1.05vw, 1.05rem);
line-height: 1.7;
color: rgba(255,255,255,0.66);
}
.ambassadors-grid {
display: grid;
/* 1 columna en móvil: la ProfileCard no baja de ~260px (handle sin wrap),
así que a 2 columnas la 2ª se salía de pantalla. minmax(0,1fr) evita
que el contenido empuje la columna más allá del ancho disponible. */
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
}
@media (min-width: 620px) {
.ambassadors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* escalón suave a 2 columnas */
.ambassadors-grid .pc:nth-child(even) { margin-top: 2.25rem; }
}
@media (min-width: 940px) {
.ambassadors-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* SKYLINE: cada carta a su altura — margin-top y no transform,
para no pelear con la entrada .reveal */
.ambassadors-grid .pc:nth-child(1) { margin-top: 0; }
.ambassadors-grid .pc:nth-child(2) { margin-top: 3.25rem; }
.ambassadors-grid .pc:nth-child(3) { margin-top: 1.5rem; }
.ambassadors-grid .pc:nth-child(4) { margin-top: 4.75rem; }
}
.ambassador-img-placeholder {
width: 100%;
height: 200px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
/* ============================================================
PROFILE CARD (embajadores) — tilt 3D + brillo holográfico + glow
El acento por embajador (--pc-acc) da el color; el JS (initProfileCards)
fija --pc-rx/--pc-ry (inclinación) y --pc-px/--pc-py (posición del brillo).
============================================================ */
.pc { position: relative; perspective: 1000px; }
.pc-behind {
position: absolute; inset: -12% -8%;
border-radius: 28px;
background: radial-gradient(58% 55% at 50% 32%, var(--pc-glow), transparent 70%);
filter: blur(30px);
opacity: 0.45;
transition: opacity var(--t-base) ease;
pointer-events: none; z-index: 0;
}
.pc:hover .pc-behind, .pc:focus-within .pc-behind { opacity: 0.9; }
.pc-tilt {
position: relative; z-index: 1;
border-radius: 22px;
transform: rotateX(var(--pc-rx, 0deg)) rotateY(var(--pc-ry, 0deg));
transition: transform 0.28s cubic-bezier(0.22,0.61,0.36,1);
will-change: transform;
}
.pc-inner {
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 2rem 1.5rem 1.4rem;
min-height: 430px;
display: flex; flex-direction: column; align-items: center;
background: linear-gradient(160deg, color-mix(in srgb, var(--pc-acc) 14%, #0d0d12) 0%, #0a0a0e 62%);
border: 1px solid color-mix(in srgb, var(--pc-acc) 30%, rgba(255,255,255,0.08));
box-shadow: 0 22px 55px -22px rgba(0,0,0,0.75);
}
/* brillo holográfico que sigue el puntero */
.pc-shine {
position: absolute; inset: 0; pointer-events: none;
border-radius: inherit;
background:
radial-gradient(circle at var(--pc-px,50%) var(--pc-py,50%),
color-mix(in srgb, var(--pc-acc) 42%, transparent), transparent 46%),
repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 5px, transparent 5px 13px);
mix-blend-mode: screen;
opacity: 0.5; transition: opacity var(--t-base) ease;
}
.pc:hover .pc-shine { opacity: 0.9; }
/* destello (glare) que sigue el puntero */
.pc-glare {
position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
background: radial-gradient(circle at var(--pc-px,50%) var(--pc-py,50%), rgba(255,255,255,0.22), transparent 34%);
opacity: 0; transition: opacity var(--t-base) ease;
}
.pc:hover .pc-glare { opacity: 1; }
.pc-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.pc-avatar {
width: 94px; height: 94px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; letter-spacing: 0.05em;
color: var(--pc-acc);
background: color-mix(in srgb, var(--pc-acc) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--pc-acc) 48%, transparent);
box-shadow: 0 0 32px color-mix(in srgb, var(--pc-acc) 32%, transparent),
inset 0 0 22px color-mix(in srgb, var(--pc-acc) 12%, transparent);
margin: 0.5rem 0 1.05rem;
}
.pc-name { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 0.2rem; }
.pc-title { font-family: 'Montserrat', sans-serif; font-size: 0.76rem; font-weight: 600; color: rgba(255,255,255,0.6); }
/* la cita real del atleta (vivía sin usarse en data.js): la prueba
social dentro de la carta, no decoración alrededor */
.pc-quote {
margin-top: 1rem;
font-size: 0.82rem;
font-style: italic;
line-height: 1.6;
color: rgba(255,255,255,0.66);
text-align: center;
max-width: 26ch;
}
/* barra de usuario (glassy) al pie */
.pc-user {
position: relative; z-index: 2;
display: flex; align-items: center; gap: 0.6rem; width: 100%;
margin-top: 1.1rem; padding: 0.45rem 0.45rem 0.45rem 0.85rem;
border-radius: 100px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc-acc); box-shadow: 0 0 8px var(--pc-acc); flex-shrink: 0; }
.pc-user-txt { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.pc-handle { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pc-status { font-family: 'Montserrat', sans-serif; font-size: 0.66rem; color: rgba(255,255,255,0.55); }
.pc-contact {
flex-shrink: 0; min-height: 36px; padding: 0 0.95rem; border-radius: 100px;
border: none; cursor: pointer;
font-family: 'Montserrat', sans-serif; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
color: #060606; background: var(--pc-acc);
transition: filter var(--t-fast) ease, transform var(--t-fast) ease;
}
.pc-contact:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
.pc-tilt { transition: none; }
}
/* ============================================================
QUALITY / TRUST SECTION
============================================================ */
@media (min-width: 768px) {
}
/* ============================================================
MANIFESTO / BRAND STATEMENT
============================================================ */
/* ============================================================
CTA BANNER
============================================================ */
.cta-banner {
background: linear-gradient(135deg, #0E0E0E 0%, #141414 50%, #0E0E0E 100%);
padding: 5rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 300px;
background: radial-gradient(ellipse, rgba(14, 165, 233, 0.06), transparent 70%);
pointer-events: none;
}
.cta-banner-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 6vw, 5rem);
/* 0.98: era el único display heading heredando el 1.6 del body — a 2
líneas en móvil metía el doble de aire que cualquier título hermano */
line-height: 0.98;
letter-spacing: 0.06em;
color: #fff;
margin-bottom: 1rem;
}
.cta-banner-sub {
font-size: 1rem;
color: rgba(255,255,255,0.5);
margin-bottom: 2.5rem;
}
/* ============================================================
NEWSLETTER
============================================================ */
/* ============================================================
FOOTER
============================================================ */
footer {
background: #060606;
border-top: 1px solid rgba(255,255,255,0.05);
padding: 4rem 1.5rem 2rem;
}
.footer-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
margin-bottom: 3rem;
}
@media (min-width: 640px) {
.footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 1024px) {
.footer-grid { grid-template-columns: 2.5fr 1fr 1fr 1fr; }
}
.footer-brand-logo {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
letter-spacing: 0.12em;
color: #fff;
margin-bottom: 1rem;
}
.footer-brand-desc {
font-size: 0.8rem;
color: rgba(255,255,255,0.6); /* 0.3 daba 2.54:1 */
line-height: 1.7;
max-width: 260px;
margin-bottom: 1.5rem;
}
.footer-social {
display: flex;
gap: 0.75rem;
}
.social-btn {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.4);
transition: all var(--t-fast) ease;
cursor: pointer;
}
.social-btn:hover {
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.8);
}
.footer-col-title {
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-bottom: 1.25rem;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-links a {
font-size: 0.825rem;
color: rgba(255,255,255,0.62); /* 0.35 daba 3.08:1 */
transition: color var(--t-fast) ease;
}
.footer-links a:hover { color: rgba(255,255,255,0.75); }
.footer-bottom {
max-width: 1280px;
margin: 0 auto;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.05);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
/* 0.2 sobre #060606 daba 1.72:1 — prácticamente ilegible.
0.55 llega a 6.2:1 sin cambiar la jerarquía visual del pie. */
.footer-legal {
font-size: 0.72rem;
color: rgba(255,255,255,0.55);
}
.footer-mexico {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
color: rgba(255,255,255,0.55);
}
/* ============================================================
CART SIDEBAR
============================================================ */
.cart-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
z-index: calc(var(--z-modal) - 1);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-slow) ease;
backdrop-filter: blur(4px);
}
.cart-overlay.open {
opacity: 1;
pointer-events: all;
}
.cart-sidebar {
position: fixed;
top: 0;
right: -440px;
width: 440px;
max-width: 100vw;
height: 100%;
background: #0D0D0D;
border-left: 1px solid rgba(255,255,255,0.07);
z-index: var(--z-modal);
transition: right var(--t-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
flex-direction: column;
overflow: hidden;
}
.cart-sidebar.open { right: 0; }
.cart-header {
padding: 1.5rem 1.75rem;
border-bottom: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.cart-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.8);
}
.cart-close {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.5);
cursor: pointer;
transition: all var(--t-fast) ease;
}
.cart-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cart-items {
flex: 1;
overflow-y: auto;
padding: 1.25rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.cart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 1rem;
color: rgba(255,255,255,0.3);
}
.cart-empty svg { width: 48px; height: 48px; opacity: 0.3; }
.cart-empty-text {
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cart-item {
display: flex;
gap: 1rem;
padding: 1rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
position: relative;
}
.cart-item-img {
width: 60px;
height: 60px;
border-radius: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.cart-item-info {
flex: 1;
min-width: 0;
}
.cart-item-name {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 0.8rem;
color: rgba(255,255,255,0.85);
margin-bottom: 0.2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cart-item-variant {
font-size: 0.75rem;
color: rgba(255,255,255,0.62); /* 0.35 daba 3.17:1 sobre el panel del carrito */
margin-bottom: 0.6rem;
}
.cart-item-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.qty-btn {
width: 26px;
height: 26px;
border-radius: 6px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.7);
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--t-fast) ease;
font-weight: 600;
}
.qty-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.qty-num {
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
font-weight: 700;
color: rgba(255,255,255,0.8);
min-width: 20px;
text-align: center;
}
.cart-item-price {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.875rem;
color: rgba(255,255,255,0.85);
margin-left: auto;
align-self: center;
}
.cart-item-remove {
position: absolute;
top: 0.75rem;
right: 0.75rem;
color: rgba(255,255,255,0.55); /* 0.2 daba 1.72:1 y era casi invisible */
cursor: pointer;
font-size: 0.75rem;
transition: color var(--t-fast) ease;
background: none;
border: none;
padding: 2px;
}
.cart-item-remove:hover { color: var(--danger); }
.cart-footer {
padding: 1.5rem 1.75rem;
/* iPhone con home indicator: que "Finalizar compra" no quede pegado a la
franja del gesto (activo con viewport-fit=cover en el meta) */
padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
border-top: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.cart-subtotal {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.cart-subtotal-label {
font-size: 0.8rem;
color: rgba(255,255,255,0.4);
}
.cart-subtotal-amount {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 1.25rem;
color: #fff;
}
.cart-subtotal-note {
font-size: 0.7rem;
color: rgba(255,255,255,0.25);
margin-bottom: 1.25rem;
}
.btn-checkout {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, var(--endurance), var(--endurance-dim));
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 12px;
border: none;
cursor: pointer;
transition: background var(--t-base) ease, color var(--t-base) ease, box-shadow var(--t-base) ease, transform var(--t-base) ease;
}
.btn-checkout:hover {
box-shadow: 0 0 30px var(--endurance-glow-strong);
transform: translateY(-1px);
}
/* ============================================================
TOAST
============================================================ */
.toast {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%) translateY(80px);
background: #1A1A1A;
border: 1px solid rgba(255,255,255,0.1);
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: 100px;
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
font-weight: 600;
z-index: var(--z-toast);
transition: transform var(--t-base) cubic-bezier(0.34, 1.56, 0.64, 1);
/* Sin tope de ancho, "Skin Hydration Complex agregado al carrito"
medía 354px con nowrap y, centrado en 320px, se cortaba 17px por
cada lado. Con el tope, los nombres largos envuelven. */
max-width: calc(100vw - 2rem);
white-space: normal;
text-align: center;
display: flex;
align-items: center;
gap: 0.5rem;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast-dot {
width: 8px;
height: 8px;
border-radius: 50%;
/* endurance: el toast es global (aparece también en Wellness y tienda);
el verde Strength era acento de otra sección */
background: var(--endurance);
box-shadow: 0 0 8px var(--endurance-glow);
}
/* ============================================================
WELLNESS PAGE SPECIFIC
============================================================ */
.wellness-hero {
min-height: 100vh;
min-height: 100vh; min-height: 100svh;
scroll-snap-align: start;
background: linear-gradient(150deg, var(--white) 0%, #EFE5FA 30%, #E4F0EB 65%, #F5EAE4 100%);
display: flex;
align-items: center;
padding-top: 7rem;
padding-bottom: 5rem;
position: relative;
overflow: hidden;
}
/* Fondo iridescente (WebGL) en lugar de la foto */
.hero-iridescence {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: auto;
overflow: hidden;
}
.hero-iridescence canvas { display: block; width: 100%; height: 100%; }
/* Scrim claro a la izquierda para que el texto respire y se lea */
.wellness-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(248,247,245,0.92) 0%, rgba(248,247,245,0.68) 44%, rgba(248,247,245,0.12) 100%);
z-index: 1;
pointer-events: none;
}
/* width:100% — el hero es display:flex, así que .container (margin:auto)
se encogía al ancho del título y el bloque quedaba centrado por
accidente; el scrim de la izquierda está pintado para texto anclado
a la izquierda. */
.wellness-hero .container { position: relative; z-index: 2; width: 100%; }
.wellness-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 7vw, 6rem);
line-height: 1.05;
color: #1A1A1A;
}
.wellness-hero-desc {
font-size: 1rem;
color: rgba(26,26,26,0.6);
max-width: 480px;
line-height: 1.7;
margin: 1.5rem 0 2.5rem;
}
/* Wellness pillars */
/* ============================================================
PERFORMANCE PAGE SPECIFIC
============================================================ */
.performance-hero {
min-height: 100vh;
min-height: 100vh; min-height: 100svh;
scroll-snap-align: start;
background: var(--p-bg);
display: flex;
align-items: center;
padding-top: 8rem;
padding-bottom: 5rem;
position: relative;
overflow: hidden;
}
/* Fondo Hyperspeed (WebGL/Three.js) detrás del contenido */
.performance-hero #hyperspeed {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.performance-hero #hyperspeed canvas { display: block; width: 100%; height: 100%; }
/* Scrim para legibilidad del texto (sin foto, sobre el Hyperspeed) */
.performance-hero::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(90deg, rgba(6,7,9,0.8) 0%, rgba(6,7,9,0.42) 48%, rgba(6,7,9,0.05) 100%),
linear-gradient(to top, rgba(6,7,9,0.78) 0%, transparent 36%);
}
.performance-hero-eyebrow {
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-bottom: 1rem;
}
.performance-hero-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(4rem, 10vw, 8rem);
line-height: 0.9;
letter-spacing: 0.04em;
color: #fff;
}
/* "1%": el anclaje de color del hero → degradado azul (Endurance) → verde (Strength) + glow */
.performance-hero-title .ph-grad {
background: linear-gradient(100deg, var(--endurance) 0%, var(--endurance-bright) 45%, var(--strength) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 32px var(--bridge-glow));
}
/* ── Efecto del título del hero: entrada LETRA POR LETRA ("ignición") +
glow neón continuo que respira entre azul (Endurance) y verde (Strength). */
.performance-hero-title { animation: ph-neon 4s ease-in-out infinite; }
.ph-letter {
display: inline-block;
opacity: 0;
transform: translateY(0.5em) scale(0.96);
will-change: transform, opacity;
}
.ph-fx .ph-letter {
animation: ph-letter-in 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
animation-delay: calc(var(--i, 0) * 0.045s);
}
@keyframes ph-letter-in {
0% { opacity: 0; transform: translateY(0.5em) scale(0.96); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ph-neon {
0%, 100% { text-shadow: 0 0 14px rgba(14,165,233,0.40), 0 0 34px rgba(14,165,233,0.18); }
50% { text-shadow: 0 0 18px rgba(57,255,20,0.48), 0 0 44px rgba(57,255,20,0.22); }
}
@media (prefers-reduced-motion: reduce) {
.performance-hero-title { animation: none; }
.ph-letter { opacity: 1; transform: none; animation: none; }
}
/* Línea de apoyo: acompaña a "SÉ PARTE DEL 1%" sin competir */
.ph-support {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: clamp(1rem, 2.1vw, 1.45rem);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--endurance);
margin: 1.3rem 0 2.6rem;
animation: hue-swap 2.2s step-end infinite;
}
/* ── Palabra rotativa (port vanilla de React Bits "RotatingText") ──
"CADA" fijo + segunda palabra que rota con stagger por carácter. */
.rt { display: inline-flex; vertical-align: baseline; }
.rt-word { display: inline-flex; }
.rt-char {
display: inline-block;
transform: translateY(0.55em);
opacity: 0;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
will-change: transform, opacity;
}
.rt-char.in { transform: translateY(0); opacity: 1; }
.rt-char.out { transform: translateY(-0.6em); opacity: 0; }
.rt-sr {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* impacto: "Cada" y la palabra rotativa se intercambian azul/verde EN BLOQUE
y sincronizadas — fase opuesta: cuando una es azul, la otra es verde */
/* La animación va en .rt (elemento ESTABLE, no se reconstruye al rotar) y los
chars heredan el color → siempre sincronizado y opuesto a "Cada". */
.ph-support .rt {
font-weight: 800;
animation: hue-swap 2.2s step-end infinite;
animation-delay: -1.1s; /* media fase → color contrario al de "Cada" */
}
/* step-end = corte seco: mantiene el color y salta instantáneo (sin cruce/teal) */
@keyframes hue-swap {
0% { color: var(--endurance); text-shadow: 0 0 14px rgba(14,165,233,0.5); } /* AZUL (0–50%) */
50% { color: var(--strength); text-shadow: 0 0 14px rgba(57,255,20,0.5); } /* VERDE (50–100%) */
}
@media (prefers-reduced-motion: reduce) {
.ph-support { animation: none; color: var(--endurance); }
.ph-support .rt { animation: none; color: var(--strength); }
}
/* Sub-line toggle tabs */
.subline-tabs {
display: flex;
gap: 0;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 4px;
width: fit-content;
margin-bottom: 3rem;
}
.subline-tab {
padding: 0.6rem 1.5rem;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all var(--t-base) ease;
border: none;
background: transparent;
color: rgba(255,255,255,0.4);
}
.subline-tab.active-endurance {
background: var(--endurance);
color: #000;
box-shadow: 0 0 20px var(--endurance-glow);
}
.subline-tab.active-strength {
background: var(--strength);
color: #000;
box-shadow: 0 0 20px var(--strength-glow);
}
/* Neon stat numbers */
.neon-stat {
font-family: 'Bebas Neue', sans-serif;
font-size: 3.5rem;
line-height: 1;
letter-spacing: 0.04em;
}
.neon-endurance { color: var(--endurance); text-shadow: 0 0 20px var(--endurance-glow-strong); }
.neon-strength { color: var(--strength); text-shadow: 0 0 20px var(--strength-glow-strong); }
.neon-divider-endurance {
width: 3px;
height: 40px;
background: var(--endurance);
box-shadow: 0 0 12px var(--endurance-glow);
border-radius: 2px;
}
.neon-divider-strength {
width: 3px;
height: 40px;
background: var(--strength);
box-shadow: 0 0 12px var(--strength-glow);
border-radius: 2px;
}
/* ============================================================
PRODUCT DETAIL PAGE
============================================================ */
/* Estas cinco reglas estuvieron muertas mucho tiempo (comentario de la
cabecera mal cerrado), así que producto.html se renderizaba solo con los
estilos en línea del HTML: el precio salía a 16px, tamaño de párrafo. */
.product-detail-img {
border-radius: 20px;
overflow: hidden;
aspect-ratio: 4/5;
display: flex;
align-items: center;
justify-content: center;
}
.product-detail-title {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
/* piso 2.1rem: a 320-430px el h1 (28px) quedaba más chico que el h2
"También te puede interesar" (32px) — jerarquía invertida */
font-size: clamp(2.1rem, 3vw, 2.5rem);
line-height: 1.15;
margin-bottom: 0.5rem;
}
.product-detail-tagline {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1.125rem;
margin-bottom: 1.5rem;
}
.product-detail-price {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 2.25rem;
margin-bottom: 0.25rem;
}
.product-detail-desc {
font-size: 0.9rem;
line-height: 1.75;
max-width: 480px;
}
/* Ingredient list */
.ingredient-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.625rem 0;
border-bottom: 1px solid;
font-size: 0.85rem;
}
/* Benefits pills */
.benefits-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.benefit-pill {
padding: 0.4rem 0.875rem;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
}
/* ============================================================
STORE PAGE
============================================================ */
.store-hero {
background: var(--p-bg);
padding-top: 8rem;
padding-bottom: 4rem;
}
/* ============================================================
ANIMATIONS & TRANSITIONS
============================================================ */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
/* Intersection observer reveal (animación, no transición → no choca con hover) */
.reveal { opacity: 0; }
.reveal.visible {
opacity: 1;
animation: revUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Sin blur: con los staggers de grids eran hasta 13 re-rasterizaciones
simultáneas de tarjetas grandes — el costo de pintura más repetido del
sitio en móvil. opacity+transform van por el compositor. */
@keyframes revUp {
from { opacity: 0; transform: translateY(34px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Micro-interacciones premium ──────────────────────────── */
/* Brillo que recorre los botones al hover. Va por transform (no `left`,
que recalcula layout) y entra por el lado por el que llegó el cursor:
el JS marca data-enter="left|right" en mouseenter. */
.btn { position: relative; overflow: hidden; }
.btn::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 55%; height: 100%;
background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%);
transform: translateX(-240%) skewX(-18deg);
transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
pointer-events: none;
z-index: 1;
}
.btn:hover::after { transform: translateX(420%) skewX(-18deg); }
.btn[data-enter="right"]::after { transform: translateX(420%) skewX(-18deg); }
.btn[data-enter="right"]:hover::after { transform: translateX(-240%) skewX(-18deg); }
.btn > * { position: relative; z-index: 2; }
/* Feedback físico de presión: el botón "cede" bajo el dedo/cursor */
.btn:active { transform: scale(0.97); transition-duration: 90ms; }
/* Zoom sutil SOLO en rutinas. En las cards de producto se quitó: con la
foto a ras del cuadro, escalarla se veía raro (pedido del cliente). */
.rt-img { transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.rutina-card3:hover .rt-img { transform: scale(1.05); }
/* La etiqueta (BESTSELLER, NUEVO...) acompaña el zoom. El z-index es
obligatorio: la foto transformada crea un stacking context y, por venir
después en el DOM, se pintaba ENCIMA de la etiqueta durante el hover. */
.product-badge {
z-index: 2;
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover .product-badge {
transform: translateY(-3px) scale(1.08);
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
/* Mismo realce para el "Más popular" de las rutinas (ya tenía z-index) */
.rt-badge { transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.rutina-card3:hover .rt-badge { transform: translateY(-3px) scale(1.06); }
/* Barra de progreso de scroll (arriba del todo) */
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 3px; width: 0;
z-index: 9999;
background: linear-gradient(90deg, var(--endurance), var(--endurance-bright), var(--strength));
box-shadow: 0 0 10px rgba(14,165,233,0.5);
pointer-events: none;
}
/* En Wellness la barra vestía cian+verde de Performance: plata → dorado,
la familia de la página */
body[data-page="wellness"] .scroll-progress {
background: linear-gradient(90deg, var(--w-lavender), #B8942E);
box-shadow: 0 0 10px rgba(184,148,46,0.4);
transition: width 0.12s linear;
}
/* ── Transición de página: barras horizontales (scaleX) ──── */
.page-wipe {
position: fixed;
inset: 0;
z-index: 100000;
pointer-events: none; /* solo visual, nunca atrapa clics */
background: #0a0a0a; /* cubre desde el primer pixel (sin flash) */
}
.page-wipe.ready { background: transparent; } /* las barras toman el control */
.wipe-bar {
position: absolute;
left: 0;
width: 100%;
background: #0a0a0a;
transform: scaleX(1); /* cubriendo */
transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.page-wipe.revealed .wipe-bar { transform: scaleX(0); } /* se encogen → revelan */
/* ── INTRO DE MARCA: primera entrada de la sesión. El logo aparece
sobre la cortina (las barras son el telón) y al salir, la página se
revela con el barrido de siempre. Lo orquesta initPageWipe. ── */
.wipe-logo {
position: absolute; left: 50%; top: 50%;
width: min(64vw, 380px); height: auto;
transform: translate(-50%, -50%) translateY(16px) scale(0.96);
opacity: 0;
z-index: 2;
pointer-events: none;
}
.page-wipe.intro .wipe-logo {
animation: wipeLogoIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards;
}
@keyframes wipeLogoIn {
to { opacity: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 0 30px rgba(14,165,233,0.30)); }
}
.page-wipe.intro-out .wipe-logo {
animation: wipeLogoOut 0.4s ease forwards;
}
@keyframes wipeLogoOut {
from { opacity: 1; transform: translate(-50%, -50%); }
to { opacity: 0; transform: translate(-50%, -50%) translateY(-14px); filter: blur(5px); }
}
@media (prefers-reduced-motion: reduce) {
.page-wipe { display: none !important; }
}
/* ============================================================
HERO PREMIUM FX (home)
============================================================ */
/* Letras del hero: entran una a una con giro y desenfoque */
.hl {
display: inline-block;
opacity: 0;
animation: heroLetter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
will-change: transform, opacity;
}
@keyframes heroLetter {
from { opacity: 0; transform: translateY(0.55em) rotate(5deg) scale(0.92); filter: blur(5px); }
to { opacity: 1; transform: none; filter: none; }
}
/* ── Depth layers (parallax con cursor) + tilt + magnéticos ── */
.hero { perspective: 1200px; }
.hero [data-depth] {
transition: translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: translate;
}
/* el video se escala un pelín más para que el parallax no deje bordes */
.hero-video[data-depth] { scale: 1.05; }
.tilt { transition: rotate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: rotate; }
.magnetic { transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: translate; }
/* Ken Burns: zoom lentísimo del video del hero (más impacto) */
.hero-video { animation: heroKenBurns 26s ease-in-out infinite alternate; transform-origin: center; }
@keyframes heroKenBurns {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
/* ============================================================
HERO V2 — cortina de salida, luz ambiental y texto vivo
============================================================ */
/* La cortina: el hero queda clavado al viewport y el resto de la
página sube POR ENCIMA al scrollear. sticky crea su propio stacking
context; las secciones hermanas pasan a z:1 para taparlo. El fondo
blanco de respaldo evita que el video se asome tras una sección
sin background propio (products-section hereda el blanco del body). */
body[data-page="home"] .hero { position: sticky; top: 0; z-index: 0; }
body[data-page="home"] .hero ~ section,
body[data-page="home"] .hero ~ footer {
position: relative;
z-index: 1;
}
/* Respaldo con especificidad CERO (:where): si una sección no declara
fondo propio, recibe el blanco del body; cualquier regla real la pisa. */
:where(body[data-page="home"] .hero ~ section, body[data-page="home"] .hero ~ footer) {
background-color: var(--white);
}
/* Velo que oscurece el hero conforme la cortina lo va tapando */
body[data-page="home"] .hero::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: #000;
opacity: 0;
pointer-events: none;
}
/* Coreografía ligada al scroll (solo navegadores con scroll timeline;
en el resto la cortina funciona igual, sin el zoom-out del contenido) */
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
body[data-page="home"] .hero-content {
animation: hero-content-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
heroExit linear both;
animation-timeline: auto, scroll(root block);
animation-range: normal, 0px 88vh;
}
body[data-page="home"] .hero::after {
animation: heroShade linear both;
animation-timeline: scroll(root block);
animation-range: 0px 92vh;
}
}
}
/* sin blur: ligado al scroll re-rasterizaba TODO el hero en cada frame del
primer viewport; a opacity<0.3 el blur era imperceptible */
@keyframes heroExit {
to { opacity: 0; transform: translateY(-7vh) scale(0.9); }
}
@keyframes heroShade {
to { opacity: 0.8; }
}
/* "cambia todo." se subraya solo cuando las letras terminan de aterrizar.
inline-block: si no cabe, salta de línea COMPLETO (un inline partido en
dos líneas dejaba el subrayado absoluto anclado a medio fragmento). */
.hero-phrase strong { position: relative; display: inline-block; }
.hero-phrase strong::after {
content: '';
position: absolute;
left: 1%; right: 1%;
bottom: -0.02em; /* Bebas casi no tiene descendentes: subrayado a ras */
/* Ahora que la palabra va en crema, el subrayado es el ÚNICO verde del
hero: más fino y sin resplandor, para que acentúe sin gritar. */
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--strength) 14%, var(--strength) 86%, transparent);
transform: scaleX(0);
transform-origin: left center;
animation: underlineDraw 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}
@keyframes underlineDraw { to { transform: scaleX(1); } }
/* El watermark 1X deriva lentísimo (compone con el parallax, que usa
la propiedad `translate`, no `transform`) */
.hero-watermark { animation: wmDriftHome 34s ease-in-out infinite alternate; }
@keyframes wmDriftHome { to { transform: translateY(-24px) rotate(0.5deg); } }
/* La flecha del botón principal empuja hacia su destino en hover */
@media (hover: hover) and (pointer: fine) {
.hero-desc .btn svg { transition: transform 0.3s ease; }
.hero-desc .btn:hover svg { transform: translateX(4px); }
}
/* ── Line cards (Elige tu línea): flotan en reposo + tilt 3D al hover ── */
@keyframes cardFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
/* ============================================================
IDENTIDAD (Filosofía) — animaciones premium
============================================================ */
/* Watermark "1%": respiración lenta */
.filo-watermark { animation: wmBreathe 11s ease-in-out infinite alternate; }
@keyframes wmBreathe {
from { transform: translate(-50%, -50%) scale(1); -webkit-text-stroke-color: rgba(255,255,255,0.035); }
to { transform: translate(-50%, -52%) scale(1.04); -webkit-text-stroke-color: rgba(255,255,255,0.07); }
}
/* Las líneas "El 1% que..." entran en cascada al revelarse la card */
.filo-card .filo-onepct span {
opacity: 0;
transform: translateX(-18px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.filo-card.visible .filo-onepct span { opacity: 1; transform: none; }
.filo-card.visible .filo-onepct span:nth-child(1) { transition-delay: 0.25s; }
.filo-card.visible .filo-onepct span:nth-child(2) { transition-delay: 0.40s; }
.filo-card.visible .filo-onepct span:nth-child(3) { transition-delay: 0.55s; }
.filo-card.visible .filo-onepct span:nth-child(4) { transition-delay: 0.70s; }
.filo-card.visible .filo-onepct span:nth-child(5) { transition-delay: 0.85s; }
.filo-card.visible .filo-onepct span:nth-child(6) { transition-delay: 1.00s; }
/* Pills y tags: pop en cascada */
.filo-card .filo-pillar, .filo-card .filo-tag {
opacity: 0;
transform: translateY(12px) scale(0.94);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.filo-card.visible .filo-pillar, .filo-card.visible .filo-tag { opacity: 1; transform: none; }
.filo-card.visible .filo-pillar:nth-child(1), .filo-card.visible .filo-tag:nth-child(1) { transition-delay: 0.30s; }
.filo-card.visible .filo-pillar:nth-child(2), .filo-card.visible .filo-tag:nth-child(2) { transition-delay: 0.42s; }
.filo-card.visible .filo-pillar:nth-child(3), .filo-card.visible .filo-tag:nth-child(3) { transition-delay: 0.54s; }
/* Línea superior de la card: barrido de color continuo */
.filo-card::before {
background: linear-gradient(90deg, transparent, var(--endurance), var(--strength), transparent);
background-size: 220% 100%;
animation: filoSweep 5.5s linear infinite;
}
@keyframes filoSweep {
from { background-position: 200% 0; }
to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.hl { animation: none; opacity: 1; }
.hero-video { animation: none; }
.wellness-hero::before, .performance-hero::before { animation: none; }
.filo-watermark { animation: none; }
.hero-phrase strong::after { animation: none; transform: scaleX(1); }
.hero-watermark { animation: none; }
.lines-section::before, .lines-section::after { animation: none; }
.filo-card .filo-onepct span, .filo-card .filo-pillar, .filo-card .filo-tag { opacity: 1; transform: none; transition: none; }
.filo-card::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.btn::after { display: none; }
.scroll-progress { display: none; }
.rutina-card3:hover .rt-img,
.product-card:hover .product-badge,
.rutina-card3:hover .rt-badge { transform: none; }
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
/* sin esto los delays seguían vivos (p.ej. visibility 0s linear 0.45s
del cierre de la vitrina) y los estados tardaban en aplicarse */
transition-delay: 0s !important;
animation-delay: 0s !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ============================================================
RESPONSIVE UTILITIES
============================================================ */
@media (max-width: 640px) {
.section-py { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}
@media (min-width: 641px) {
}
/* ============================================================
===== REFINAMIENTO v3: halos, cards, buscador, modales =====
============================================================ */
/* ---- Product card: imagen protagonista + halo de color ---- */
/* (el alto del cuadro lo da aspect-ratio 2/3 en la regla base) */
.product-card { transition: transform var(--t-base) ease, box-shadow var(--t-base) ease, border-color var(--t-base) ease; }
/* Halo de color en reposo (sutil) y en hover (notorio) */
.card-wellness { box-shadow: 0 10px 30px rgba(123,94,167,0.10); }
.card-endurance { box-shadow: 0 10px 30px rgba(14,165,233,0.10); }
.card-strength { box-shadow: 0 10px 30px rgba(57,255,20,0.08); }
.card-wellness:hover { box-shadow: 0 26px 60px rgba(123,94,167,0.30); transform: translateY(-7px); border-color: rgba(200,180,216,0.55); }
.card-endurance:hover { box-shadow: 0 26px 60px rgba(14,165,233,0.34); transform: translateY(-7px); border-color: rgba(14,165,233,0.55); }
.card-strength:hover { box-shadow: 0 26px 60px rgba(57,255,20,0.26); transform: translateY(-7px); border-color: rgba(57,255,20,0.5); }
/* ---- Línea card halo ---- */
/* ---- Búsqueda en header ---- */
.search-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
opacity: 0; pointer-events: none; transition: opacity var(--t-slow) ease; z-index: calc(var(--z-nav) + 5);
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-panel {
position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-nav) + 6);
background: linear-gradient(180deg, rgba(10,10,12,0.98), rgba(8,8,10,0.98));
border-bottom: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
transform: translateY(-110%); transition: transform var(--t-slow) cubic-bezier(0.25,0.46,0.45,0.94);
}
.search-panel.open { transform: translateY(0); }
.search-inner { max-width: 760px; margin: 0 auto; padding: 1.5rem; }
.search-bar {
display: flex; align-items: center; gap: 0.75rem;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px; padding: 0.9rem 1.1rem;
}
/* La barra mide 63px pero el input solo 20: tocar fuera de esa franja
no enfocaba. El padding vertical le da toda la altura de la barra. */
.search-bar input {
flex: 1; background: transparent; border: none; color: #fff;
padding: 0.7rem 0;
font-family: 'Montserrat', sans-serif; font-size: 1.05rem;
}
.search-bar input::placeholder { color: rgba(255,255,255,0.5); }
#search-clear { background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.6); width: 44px; height: 44px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#search-clear:hover { background: rgba(255,255,255,0.12); color: #fff; }
.search-results { margin-top: 1rem; max-height: 60vh; max-height: 60vh; max-height: 60dvh; overflow-y: auto; }
.search-hint { font-family: 'Montserrat', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0.5rem 0.25rem 0.75rem; }
.search-empty { color: rgba(255,255,255,0.4); padding: 1.5rem 0.5rem; text-align: center; font-size: 0.9rem; }
.search-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.75rem; border-radius: 12px; transition: background var(--t-fast) ease; }
.search-row:hover { background: rgba(255,255,255,0.05); }
.search-row-ico { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.search-row-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.search-row-name { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.875rem; color: #fff; }
.search-row-cat { font-size: 0.7rem; font-weight: 600; }
.search-row-price { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.85rem; color: rgba(255,255,255,0.7); }
/* ---- Overlays / modales genéricos ---- */
.modal-overlay {
position: fixed; inset: 0; z-index: var(--z-modal);
background: rgba(0,0,0,0.72); backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center; padding: 1.5rem;
opacity: 0; pointer-events: none; transition: opacity var(--t-slow) ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-card {
position: relative; width: 100%; background: #0D0E10;
border: 1px solid rgba(255,255,255,0.09); border-radius: 22px;
box-shadow: 0 40px 120px rgba(0,0,0,0.6); overflow: hidden;
/* dvh: con 92vh iOS usa el viewport GRANDE (812) aunque solo se vean
~690, así que el modal terminaba ~89px por debajo de lo visible.
El resto de la hoja ya usaba svh/dvh; este selector se quedó fuera. */
max-height: 92vh; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
transform: translateY(16px) scale(0.98); transition: transform var(--t-slow) cubic-bezier(0.16,1,0.3,1);
}
.modal-overlay.open .modal-card { transform: translateY(0) scale(1); }
.modal-close {
/* sticky + float, no absolute: .modal-card es el contenedor de scroll,
así que con absolute la ✕ se iba con el contenido. Medido en el modal
de producto (1103px de contenido en 633 visibles), al bajar 470px
quedaba en top:-425. El margin-bottom negativo evita que empuje. */
position: sticky; top: 1rem; float: right; z-index: 3;
margin: 1rem 1rem -54px 0;
width: 44px; height: 44px; border-radius: 10px;
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background var(--t-fast) ease;
}
.modal-close:hover { background: rgba(255,255,255,0.18); }
/* ---- Modal de producto ---- */
.product-modal { max-width: 920px; }
.pm-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { .pm-grid { grid-template-columns: 1fr 1fr; } }
.pm-visual { position: relative; min-height: 280px; display: flex; align-items: center; justify-content: center; padding: 2.5rem; }
.pm-badge { position: absolute; top: 1.25rem; left: 1.25rem; padding: 0.3rem 0.8rem; border-radius: 100px; font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.pm-icon { width: 180px; height: 180px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.pm-img { max-width: 100%; max-height: 240px; object-fit: contain; object-position: center; display: block; }
.pm-info { padding: 2.5rem; }
.pm-cat { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.5rem; }
.pm-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.6rem; color: #fff; line-height: 1.15; margin-bottom: 0.5rem; }
.pm-rating { display: flex; gap: 0.4rem; align-items: center; font-size: 0.8rem; color: rgba(255,255,255,0.45); font-family: 'Montserrat', sans-serif; margin-bottom: 1rem; }
.pm-desc { font-size: 0.9rem; line-height: 1.7; color: rgba(255,255,255,0.6); margin-bottom: 1.25rem; }
.pm-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.pm-tag { padding: 0.4rem 0.85rem; border-radius: 100px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 600; }
.pm-block { margin-bottom: 1rem; }
.pm-block-t { font-family: 'Montserrat', sans-serif; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); display: block; margin-bottom: 0.3rem; }
.pm-block p { font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.6; }
.pm-buy { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); }
.pm-price { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.6rem; color: #fff; margin-bottom: 1rem; }
.pm-weight { font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.4); }
.pm-actions { display: flex; gap: 0.75rem; align-items: stretch; flex-wrap: wrap; }
.pm-add { flex: 1; min-width: 180px; border: none; cursor: pointer; }
.pm-full-link { display: inline-block; margin-top: 1rem; font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.5); }
.pm-full-link:hover { color: #fff; }
/* ---- Modal de rutina (2 columnas, estilo modal de producto) ---- */
.rutina-modal { max-width: 940px; }
.rm-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { .rm-grid { grid-template-columns: 1fr 1fr; } }
.rm-visual { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 2.5rem; overflow: hidden; }
.rm-visual .rm-glow { top: -30%; right: -20%; width: 300px; height: 300px; }
.rm-visual-badge { position: absolute; top: 1.25rem; left: 1.25rem; z-index: 2; padding: 0.3rem 0.8rem; border-radius: 100px; font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.rm-visual-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s ease; /* = 150ms del swap JS: antes el contenido nuevo aparecia a mitad del fundido */ }
.rm-prod-icon { width: 190px; height: 190px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rm-prod-img { max-width: 70%; max-height: 230px; object-fit: contain; }
.rm-dots { position: absolute; bottom: 1.1rem; left: 0; right: 0; display: flex; gap: 0.45rem; justify-content: center; z-index: 2; }
.rm-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; transition: background-color var(--t-fast) ease, width var(--t-fast) ease; }
.rm-dot.on { background: var(--rm-acc, #fff); width: 22px; border-radius: 5px; }
.rm-info { padding: 2.25rem; display: flex; flex-direction: column; }
.rm-cat { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.5rem; }
.rm-name { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; letter-spacing: 0.04em; line-height: 1; color: #fff; }
.rm-objective { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem; color: rgba(255,255,255,0.7); margin: 0.4rem 0 0.75rem; }
.rm-selector-label { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.6rem; }
.rm-selector { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.rm-chip { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.7rem; border-radius: 100px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease; }
.rm-chip:hover { background: rgba(255,255,255,0.1); color: #fff; }
.rm-chip-n { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 800; background: rgba(255,255,255,0.1); }
.rm-chip.active { color: var(--rm-acc); border-color: var(--rm-acc); background: color-mix(in srgb, var(--rm-acc) 14%, transparent); }
.rm-chip.active .rm-chip-n { background: var(--rm-acc); color: #000; }
.rm-active { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid var(--rm-acc, var(--endurance)); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; transition: opacity 0.15s ease; min-height: 92px; }
.rm-active-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.95rem; color: #fff; }
.rm-active-fn { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 0.15rem 0 0.6rem; }
.rm-active-price { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.95rem; color: #fff; margin-top: 0.6rem; }
.rm-active-price span { font-weight: 500; font-size: 0.7rem; color: rgba(255,255,255,0.4); }
.rm-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rm-buy { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rm-buy .rm-pricing { margin-bottom: 0; }
.rm-buy .rm-add { width: auto; flex: 1; min-width: 200px; }
@media (max-width: 560px) { .rm-info, .rm-visual { padding: 1.5rem; } .rm-visual { min-height: 240px; } .rm-prod-icon { width: 150px; height: 150px; } }
.rm-glow { position: absolute; top: -40%; right: -10%; width: 280px; height: 280px; pointer-events: none; }
.rm-desc { font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 1.25rem; }
.rm-pricing { margin-bottom: 1.25rem; }
.rm-final { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.6rem; color: #fff; }
.rm-orig { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; margin-top: 0.15rem; }
.rm-add { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.95rem; border: none; border-radius: 12px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: filter var(--t-fast) ease, transform var(--t-fast) ease; }
.rm-add:hover { filter: brightness(1.08); transform: translateY(-2px); }
/* ---- Checkout ---- */
.checkout-modal { max-width: 1040px; }
.co-head { padding: 2rem 2.25rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.co-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--endurance); margin-bottom: 0.4rem; }
.co-title { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; letter-spacing: 0.04em; color: #fff; }
.co-step { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); padding: 0.3rem 0.7rem; border-radius: 100px; background: rgba(255,255,255,0.05); }
.co-step.active { color: #000; background: var(--endurance); }
.co-step.done { color: var(--strength); background: rgba(57,255,20,0.1); }
.co-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 2.25rem 2.25rem; }
@media (min-width: 820px) { .co-grid { grid-template-columns: 1.4fr 1fr; } }
.co-section-t { font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.9rem; }
.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.co-fields label { display: flex; flex-direction: column; font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.4); gap: 0.3rem; }
.co-fields label.co-full { grid-column: 1 / -1; }
/* 1rem = 16px es OBLIGATORIO: Safari iOS hace zoom automático en
cualquier input por debajo de 16px y no vuelve al nivel original.
Con 0.875rem (14px) los 11 campos del checkout disparaban ese zoom.
El padding sube para llegar a los 44px de alto táctil. */
.co-fields input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; padding: 0.8rem 0.9rem; color: #fff; font-size: 1rem; font-family: 'Inter', sans-serif; text-transform: none; letter-spacing: 0; transition: border-color var(--t-fast) ease; }
/* Sin outline:none: la regla global :focus:not(:focus-visible) ya silencia
el anillo de mouse; así el foco de teclado conserva el suyo. */
.co-fields input:focus { border-color: var(--endurance); }
.co-summary { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 1.5rem; align-self: start; }
.co-items { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.co-item { display: flex; gap: 0.6rem; align-items: center; font-size: 0.82rem; }
.co-item-q { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--endurance); }
.co-item-name { flex: 1; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-item-price { font-family: 'Montserrat', sans-serif; font-weight: 600; color: rgba(255,255,255,0.6); }
.co-sum-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 0.5rem; font-family: 'Montserrat', sans-serif; }
.co-sum-row.total { font-weight: 900; font-size: 1.25rem; color: #fff; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 0.4rem; }
.co-pay { width: 100%; margin-top: 1.25rem; padding: 1rem; border: none; border-radius: 12px; background: linear-gradient(135deg, #0369A1, #04558F); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: box-shadow var(--t-base) ease, transform var(--t-base) ease; }
.co-pay:hover { box-shadow: 0 0 30px var(--endurance-glow-strong); transform: translateY(-1px); }
.co-secure { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.9rem; font-size: 0.72rem; color: rgba(255,255,255,0.35); }
/* ---- Carrito: barra de envío + resumen + item ---- */
.ship-bar { margin-bottom: 1.25rem; }
.ship-bar-label { display: flex; align-items: center; gap: 0.5rem; font-family: 'Montserrat', sans-serif; font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-bottom: 0.5rem; }
.ship-bar-track { height: 6px; border-radius: 100px; background: rgba(255,255,255,0.08); overflow: hidden; }
/* scaleX en vez de width: anima en el compositor y sobrevive al innerHTML
del render (cart.js repone el valor previo y luego escribe el nuevo).
Antes la barra de envío gratis saltaba en seco al agregar producto. */
.ship-bar-fill { height: 100%; width: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--endurance), var(--endurance-dim)); transform: scaleX(var(--ship-p, 0)); transform-origin: left center; transition: transform var(--t-slow) var(--ease-firma); }
.ship-bar-fill.full { background: linear-gradient(90deg, var(--strength), var(--strength-dim)); }
/* ── Microinteracciones del carrito (solo transform/opacity/color) ── */
/* badge: pulso al agregar */
@keyframes cartBump { 30% { transform: scale(1.28); } }
.cart-count.bump { animation: cartBump 0.25s var(--ease-firma); }
/* total: destello de color al cambiar de valor */
@keyframes totalTick { 0% { color: var(--endurance); } }
.cart-sum-row.total.tick { animation: totalTick 0.6s ease; }
.cart-summary { display: flex; flex-direction: column; margin-bottom: 1rem; }
.cart-sum-row { display: flex; justify-content: space-between; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; color: rgba(255,255,255,0.55); margin-bottom: 0.45rem; }
.cart-sum-row.total { font-weight: 900; font-size: 1.3rem; color: #fff; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 0.3rem; }
.cart-item-cat { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.2rem; }
.qty-control-mini { display: flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 2px; }
.qty-control-mini .qty-btn { width: 24px; height: 24px; background: transparent; border: none; }
.cart-item-controls { justify-content: space-between; }
.btn-checkout { border-radius: 12px; }
/* ---- Embajadores halo hover ---- */
/* ---- FAQ + descuento ---- */
.faq-section { background: linear-gradient(180deg, var(--white) 0%, #FFFFFF 100%); }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; } }
.faq-item { border-bottom: 1px solid var(--w-border); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 1.25rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; color: #1A1A1A; }
.faq-q svg { flex-shrink: 0; transition: transform var(--t-base) ease; color: rgba(26,26,26,0.5); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
/* grid-rows en vez de max-height fijo: la transición recorre la altura
REAL (el tope de 240px distorsionaba el easing y recortaba respuestas
largas en móvil), y el contenido funde al abrir. El JS no cambia. */
.faq-a { display: grid; grid-template-rows: 0fr; overflow: hidden; padding-bottom: 0; transition: grid-template-rows var(--t-slow) var(--ease-firma, ease), padding-bottom var(--t-slow) var(--ease-firma, ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; padding-bottom: 1.25rem; }
/* el respiro vive en el contenedor: un padding en el no puede
comprimirse y dejaba 20px visibles con el acordeón cerrado */
.faq-a p { min-height: 0; padding: 0; font-size: 0.9rem; line-height: 1.7; color: rgba(26,26,26,0.6); opacity: 0; transition: opacity 0.25s ease; }
.faq-item.open .faq-a p { opacity: 1; transition-delay: 0.08s; }
.discount-card { background: linear-gradient(160deg, #0E0E10 0%, #14110A 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 2.75rem 2.25rem; position: relative; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.15); }
.discount-card::before { content: ''; position: absolute; top: -30%; right: -20%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(57,255,20,0.14), transparent 70%); pointer-events: none; }
.discount-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--strength); margin-bottom: 0.75rem; position: relative; }
.discount-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; letter-spacing: 0.02em; color: #fff; margin-bottom: 0.9rem; position: relative; }
.discount-desc { font-size: 0.9rem; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 1.5rem; position: relative; }
/* aviso bajo el formulario del 10% (p. ej. "ya tienes cuenta") */
.discount-note {
margin-top: 0.75rem;
font-size: 0.8rem;
line-height: 1.5;
color: rgba(255,255,255,0.72);
min-height: 1em;
}
.discount-form { display: flex; gap: 0.6rem; flex-wrap: wrap; position: relative; }
/* 1rem por lo mismo que el checkout: 0.9rem = 14.4px disparaba el zoom de iOS */
.discount-form input { flex: 1; min-width: 180px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 0.85rem 1.1rem; color: #fff; font-size: 1rem; }
.discount-form input::placeholder { color: rgba(255,255,255,0.35); }
.discount-form button { padding: 0.85rem 1.5rem; min-height: 44px; border: none; border-radius: 10px; background: var(--strength); color: #000; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: filter var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.discount-form button:hover { filter: brightness(1.05); box-shadow: 0 0 24px var(--strength-glow-strong); }
/* ---- Identidad: un poco más compacta ---- */
.filo-section { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.filo-card { padding: clamp(1.75rem, 4vw, 3rem) !important; }
@media (max-width: 560px) {
.pm-info, .co-grid, .co-head { padding-left: 1.25rem; padding-right: 1.25rem; }
.co-fields { grid-template-columns: 1fr; }
}
/* ---- Logo de marca (imagen con fallback texto) ---- */
/* Logo PLATEADO/cromo (PNG transparente, recortado): se ve tal cual sobre
fondos oscuros; en el nav claro (Wellness) se oscurece para contrastar. */
.brand-logo-img { display: block; width: auto; object-fit: contain; filter: none; }
/* El tope responsive vive AQUÍ y no en la media query del header:
esta regla va más abajo en la hoja y, a igual especificidad, ganaba
ella. Con 200px fijos el logo medía 166px a 320px de ancho y se
encimaba con la lupa, empujando la hamburguesa fuera de pantalla. */
/* 34vw era el valor que tenía esta regla mientras estuvo muerta (comentario
roto más arriba en la hoja), así que nunca se probó de verdad: al revivir
daba 122px de logo a 360px de ancho, y con los 4 controles (194px) el
logo se montaba 22px encima de la lupa. 26vw deja el hueco justo.
Por encima de 600px manda la regla de abajo (200px), así que esto solo
afecta al móvil. */
.brand-logo-header { max-height: 30px; max-width: min(200px, 26vw); }
@media (min-width: 601px) { .brand-logo-header { max-width: 200px; } }
/* ── Header de escritorio: sin rampa de saltos ──
Antes había dos juegos de valores (compacto 1140–1459, holgado ≥1460)
y el segundo NO cabía: contenido ~1206px + 128 de gaps/padding contra
una barra de 1280 → el carrito salía del cristal en todo ≥1460. Ahora
gap/padding/tipo/controles escalan con clamp() de forma continua en las
reglas base del NAVBAR, y el logo se queda fijo en sus 166px (30px de
alto) porque ya hay holgura para él. Aquí solo queda el tope de ancho
móvil del logo. */
/* Nav claro (Wellness): el logo de marca es la X AZUL. Antes esto era
brightness(0), que lo aplastaba a negro sólido — servía para el logo
plateado, pero mata el azul. Ahora solo se oscurece y contrasta lo
justo para que el plateado de las letras lea sobre el vidrio claro,
conservando el color de la X. */
.nav-inner.light .brand-logo-header { filter: brightness(0.62) contrast(1.35) saturate(1.15); }
.brand-logo-footer { max-height: 28px; max-width: 190px; }
/* Footer claro de wellness: el logo plateado se oscurece para leerse
sobre el fondo claro (igual que el logo del header en wellness). */
body[data-page="wellness"] .brand-logo-footer { filter: brightness(0.62) contrast(1.35) saturate(1.15); }
/* ---- Checkout: stepper de líneas (sin óvalos) ---- */
.co-stepper { display: flex; gap: 0.6rem; margin-top: 1rem; }
.co-stepper .co-step {
flex: 1; background: transparent; padding: 0; border-radius: 0;
display: flex; flex-direction: column; align-items: stretch;
}
.co-step-bar { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); transition: background var(--t-base) ease; }
.co-stepper .co-step.done .co-step-bar { background: var(--endurance); }
.co-stepper .co-step.active .co-step-bar { background: linear-gradient(90deg, var(--endurance), var(--endurance-dim)); box-shadow: 0 0 12px rgba(14,165,233,0.5); }
.co-step-label { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-top: 0.45rem; } /* era 9.6px y 3.18:1 */
.co-stepper .co-step.done .co-step-label, .co-stepper .co-step.active .co-step-label { color: rgba(255,255,255,0.85); }
/* ---- Halo más intenso en card Wellness del home ("Elige tu línea") ---- */
/* ---- Bundle en carrito y checkout ---- */
.cart-bundle { background: rgba(255,255,255,0.04); }
.cart-bundle-includes { font-size: 0.68rem; color: rgba(255,255,255,0.4); line-height: 1.4; margin-bottom: 0.25rem; }
.cart-bundle-save { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 700; color: var(--strength); margin-bottom: 0.6rem; }
.co-item-bundle .co-item-name { display: flex; flex-direction: column; }
.co-item-inc { font-size: 0.66rem; color: rgba(255,255,255,0.4); font-weight: 400; margin-top: 0.15rem; line-height: 1.3; white-space: normal; }
.co-item-bundle .co-item-q { align-self: flex-start; }
/* ============================================================
PULIDO MÓVIL — teléfonos (≤760px y ≤400px)
Objetivo: heroes de alto natural (nada se recorta ni se
encima), sin desbordes horizontales, áreas táctiles ≥44px.
Solo reglas max-width → NO afecta escritorio.
============================================================ */
@media (max-width: 760px) {
/* ── HOME hero: la organización editorial pasa a FLUJO vertical
(zonas absolutas se encimarían en pantallas chicas) ── */
.hero {
height: auto;
min-height: 100vh; min-height: 100svh;
padding: 6rem 1.5rem 2.5rem; /* 1.5rem: mismo margen lateral que .container — antes el borde saltaba 24→20→24px entre secciones */
align-items: center;
}
.hero-content {
position: relative;
inset: auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
}
.hero-left { position: static; max-width: 100%; }
.hero-phrase { font-size: clamp(2.7rem, 12.5vw, 3.6rem); }
.hero-desc { position: static; width: 100%; max-width: 380px; gap: 0.95rem; }
.hero-desc p { font-size: 0.92rem; }
/* En móvil .hero-content pasa a position:relative, así que la barra
(absolute, bottom:0) se anclaba a ÉL y caía encima del botón. Aquí
entra al flujo como último bloque: las redes quedan siempre debajo
del CTA, nunca sobre él. */
.hero-strip {
position: static;
width: 100%;
margin-top: 0.4rem;
flex-wrap: wrap;
justify-content: center;
row-gap: 0.6rem;
padding: 0.85rem 0 0;
font-size: 0.62rem;
}
.hst-info { display: none; } /* en móvil: solo redes */
/* ── WELLNESS / PERFORMANCE hero: menos padding-top (respiran) ──
!important vence al style inline padding-top:9.5rem de wellness. */
.wellness-hero { padding-top: 6rem !important; padding-bottom: 3.25rem !important; }
.performance-hero { padding-top: 6rem; padding-bottom: 3.25rem; }
/* ── Ritmo unificado bajo el header fijo (66px + 12px): antes cada página
llegaba distinto (88/96/128/140px) y tienda/producto/cuenta gastaban un
tercio del viewport de un teléfono en aire. ── */
.store-hero { padding-top: 6.5rem; }
body[data-page="rutinas"] .rutinas-hero { padding-top: 6.5rem; }
/* main.: la base (140px/90px) vive más abajo en la hoja y empataba especificidad */
main.account-page { padding: 7rem 24px 3.5rem; }
/* Stats neón (Performance): 3.5rem se desbordaban en 3 columnas.
Reducimos el número y quitamos los divisores para que "100%" quepa. */
.performance-hero .neon-stat { font-size: 2rem; }
.performance-hero .neon-divider-endurance,
.performance-hero .neon-divider-strength { display: none; }
/* Botones: permitir que el texto largo envuelva (evita botones de
436px que se salían de la pantalla y creaban scroll horizontal). */
.btn { white-space: normal; text-align: center; }
.btn-lg { padding: 1rem 1.4rem; font-size: 0.75rem; }
/* ── Áreas táctiles mínimas (accesibilidad) ── */
/* 44×44 mínimo táctil: con solo padding 9px quedaba en 40×34 */
.nav-hamburger { padding: 9px; min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
.btn { min-height: 44px; }
.cart-close, .btn-cart { min-height: 44px; min-width: 44px; }
/* La clase real de los −/+ del carrito es .qty-control-mini .qty-btn:
el selector de abajo NUNCA coincidía con ella y se quedaban en
24×24px, el 45% del mínimo. En producto.html sí eran 44 porque
están definidos inline en esa página. */
.qty-control button,
.qty-control-mini .qty-btn { min-width: 44px; min-height: 44px; }
/* .subline-tab (performance) no estaba cubierto y medía 34px de alto.
.filter-tab estaba en 40, todavía por debajo del mínimo. */
.filter-tab, .subline-tab { min-height: 44px; display: inline-flex; align-items: center; }
/* Es la acción de conversión y se repite 41 veces en wellness */
.btn-add-to-cart { width: 44px; height: 44px; }
/* Única forma de quitar un producto del carrito: medía 18×21px */
.cart-item-remove { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.social-btn { width: 44px; height: 44px; }
.footer-links a { display: inline-block; padding: 0.4rem 0; }
/* Enlaces de texto chicos: el padding crece el área táctil y el margen
negativo la compensa — cero desplazamiento visual. */
.nav-logo { padding: 0.5rem 0.6rem; margin: -0.5rem -0.6rem; }
.hst-social a { padding: 0.55rem 0.35rem; margin: -0.55rem -0.35rem; }
.vit-all, .qv-more { padding: 0.6rem 0.5rem; margin: -0.6rem -0.5rem; }
/* base: margin-top 12px → 12-8=4 conserva la posición visual */
.auth-link { padding: 8px; margin: 4px -8px -8px; }
/* ── Suelo tipográfico de 12px ──
26 selectores caían por debajo (los peores en 9.6px) y casi todos
van en mayúsculas con letter-spacing 0.15em, que en pantalla chica
agrava la lectura en vez de aliviarla. */
.section-label, .discount-eyebrow, .co-fields label, .co-step-label,
.ls-eyebrow, .rt-badge, .rt-cat,
.product-badge, .product-line-tag, .pm-cat, .pm-badge,
.product-weight, .rating-num, .price-original,
.mm-eyebrow, .mm-desc, .rt-li-sub, .filo-pillar, .filo-tag,
.footer-col-title, .cart-count { font-size: 0.75rem; }
/* El glow decorativo de las tarjetas (border-glow .edge-light) se
extiende 30px más allá del borde; en móvil no hay hover, así que
lo recortamos para que no genere scroll lateral. */
/* .cat-grid queda fuera: en móvil es un carrusel con scroll lateral propio. */
.products-grid { overflow-x: clip; }
/* Evita cualquier desborde horizontal residual sin romper el
scroll-snap vertical (clip no crea contenedor de scroll).
OJO: body con `hidden` aquí lo volvía scroll container (html ya no
propaga al tener clip) y eso mataba el sticky de la cortina del
hero; `clip` recorta igual sin crear contenedor. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
}
/* ── Teléfonos angostos (≤400px) ── */
@media (max-width: 400px) {
.performance-hero-title { font-size: clamp(3.2rem, 14vw, 5rem); }
/* CTA del home a ancho completo (más fácil de tocar) */
.hero-desc .btn { width: 100%; justify-content: center; }
/* Filtros y chips no se apelmazan */
.filter-scroll { gap: 0.5rem; }
}
/* ── HOME y RUTINAS: rutinas como RECTÁNGULOS horizontales ────
Foto a la izquierda, info a la derecha, una card por fila (antes eran
3 columnas verticales foto-arriba). Scoped a home (grid-home) y a
rutinas.html (grid-full) — mismo formato en ambas, a pedido del
cliente. Wellness y performance conservan la card vertical. Vive al
FINAL de la hoja para ganar la cascada a
.rutina-card3 { flex-direction: column } y .rt-visual { height:390px }. */
@media (min-width: 860px) {
:is(body[data-page="home"] .rutinas-grid-home, body[data-page="rutinas"] .rutinas-grid-full) {
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 1120px;
margin-inline: auto;
}
:is(body[data-page="home"] .rutinas-grid-home, body[data-page="rutinas"] .rutinas-grid-full) .rutina-card3 {
display: grid;
/* La foto define su PROPIO ancho (auto): el panel toma la proporción de
la imagen, así queda "solo la foto" sin márgenes de gradiente. La info
ocupa el resto (1fr) y se centra en vertical. */
grid-template-columns: auto 1fr;
align-items: center;
}
:is(body[data-page="home"] .rutinas-grid-home, body[data-page="rutinas"] .rutinas-grid-full) .rt-visual {
/* El panel ES la foto: misma proporción que fem-balance.webp (1024×1536).
Con esto, la imagen llena el panel borde a borde sin recorte ni márgenes. */
width: clamp(260px, 28vw, 360px);
aspect-ratio: 1024 / 1536;
height: auto;
min-height: 0;
border-radius: 18px;
overflow: hidden;
}
:is(body[data-page="home"] .rutinas-grid-home, body[data-page="rutinas"] .rutinas-grid-full) .rt-slide { padding: 0; }
:is(body[data-page="home"] .rutinas-grid-home, body[data-page="rutinas"] .rutinas-grid-full) .rt-img {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover; /* panel = proporción de la imagen → cover no recorta */
object-position: center;
}
:is(body[data-page="home"] .rutinas-grid-home, body[data-page="rutinas"] .rutinas-grid-full) .rt-body { padding: 1.75rem 2rem; align-self: center; }
}
/* ── Auth modal ─────────────────────────────────────────── */
#auth-overlay { z-index: 60; } /* por encima del cart-sidebar (50) */
.auth-modal { max-width: 400px; padding: 34px 30px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; color: var(--p-muted, #999); }
/* 1rem: bajo 16px Safari iOS hace zoom al enfocar y no regresa (misma regla
que ya obligan el checkout y el form de descuento) */
.auth-form input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 11px 13px; color: #fff; font-size: 1rem; }
/* endurance: el modal de auth es global; el verde queda solo para el
arcade de cuenta.html, que es temática propia */
.auth-perk { margin-top: 8px; font-size: 0.82rem; color: var(--endurance); }
/* en gracias.html el fondo es claro: el verde neón daba 1.27:1 (invisible) */
body[data-page="gracias"] .auth-perk { color: #0A6B0A; font-weight: 600; }
/* Los h1/p de los tres estados salían en Inter 2em del navegador (única
página fuera del sistema tipográfico) y los párrafos corrían a ~108
caracteres por línea. Bebas + medida acotada, como el resto del sitio. */
body[data-page="gracias"] main h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.4rem, 6vw, 3.4rem);
line-height: 0.95;
letter-spacing: 0.04em;
color: #141414;
margin-bottom: 0.9rem;
}
body[data-page="gracias"] main p { max-width: 560px; margin: 0 auto 1.4rem; color: rgba(20,20,20,0.72); }
/* .co-pay estaba calibrado para panel oscuro (texto #E6F5FF sobre vidrio):
sobre la crema de gracias era ilegible. Sólido con tinta oscura AA. */
body[data-page="gracias"] .co-pay { background: var(--endurance); color: #04283A; }
.auth-sub { margin-top: 6px; font-size: 0.85rem; opacity: 0.7; }
.auth-error { color: var(--danger); font-size: 0.8rem; }
/* min-height 44px: el texto mide 15px y era el target táctil más chico del
sitio (aparece también dentro del carrito). El margen compensa el alto. */
.auth-link { background: none; border: none; color: var(--endurance); cursor: pointer; font-size: 0.8rem; padding: 0 4px; margin: 0 -4px; display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px 0; }
.auth-alt { margin-top: 14px; font-size: 0.8rem; opacity: 0.85; }
.auth-code { letter-spacing: 0.5em; text-align: center; font-size: 1.3rem !important; }
[data-open-auth].logged svg { stroke: var(--endurance); }
/* ── Mi Cuenta · modo ARCADE ────────────────────────────── */
.account-page { max-width: 920px; margin: 0 auto; padding: 140px 24px 90px; }
.arc-crt {
position: relative; overflow: hidden;
font-family: 'Press Start 2P', monospace;
background: #050805; border: 2px solid #123312; border-radius: 14px;
padding: 40px 34px;
}
/* scanlines + viñeta CRT */
.arc-crt::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
background: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 2px, transparent 2px 4px);
}
.arc-crt::after {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
background: radial-gradient(110% 100% at 50% 50%, transparent 60%, rgba(0,0,0,0.55) 100%);
}
.arc-crt > * { position: relative; z-index: 3; }
.arc-row1 { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 10px; color: var(--strength); margin-bottom: 28px; }
.arc-hi { color: #F5D90A; }
.arc-player { font-size: 20px; font-weight: 400; color: #fff; text-shadow: 3px 3px 0 #0A4D0A; margin-bottom: 8px; text-transform: uppercase; overflow-wrap: anywhere; }
.arc-sub { font-size: 8px; color: #8A8F8A; line-height: 1.9; margin-bottom: 26px; }
.arc-xpbar { border: 3px solid #1E5C1E; padding: 4px; background: #041004; margin-bottom: 8px; }
.arc-xpfill {
height: 22px; background: linear-gradient(180deg, #7CFF6B 0%, var(--strength) 45%, #1DB954 100%);
box-shadow: 0 0 14px rgba(57,255,20,0.8); position: relative; transition: width 0.8s steps(10);
}
.arc-xpfill::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,0.18) 10px 12px); }
.arc-xplabel { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 8px; color: #8A8F8A; margin-bottom: 30px; }
.arc-blink { animation: arcblink 1.1s steps(1) infinite; color: var(--strength); }
@keyframes arcblink { 50% { opacity: 0; } }
.arc-bonus { border: 2px dashed #F5D90A; color: #F5D90A; font-size: 9px; line-height: 2.1; padding: 14px 16px; margin-bottom: 30px; text-align: center; text-transform: uppercase; }
.arc-score-t { font-size: 11px; color: var(--strength); margin-bottom: 14px; font-weight: 400; }
.arc-table caption { text-align: left; padding-bottom: 8px; }
.arc-table { width: 100%; border-collapse: collapse; font-size: 8px; }
.arc-table td, .arc-table th { text-align: left; padding: 10px 6px; border-bottom: 1px dotted #1E5C1E; color: #EDEDED; }
.arc-table th { color: #8A8F8A; font-weight: 400; }
.arc-table td.ok { color: var(--strength); }
.arc-table td.pend { color: #F5D90A; }
.arc-table td.cancel { color: #E05A5A; }
.arc-empty { font-size: 9px; color: #8A8F8A; line-height: 2.1; text-align: center; padding: 18px 0; }
/* ── Formulario "MIS DATOS" (arcade) ─────────────────────── */
.arc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 6px; }
.arc-form label { display: flex; flex-direction: column; gap: 7px; font-size: 8px; color: #8A8F8A; letter-spacing: 0.08em; }
.arc-form input {
background: rgba(255,255,255,0.05); border: 2px solid #1E5C1E; border-radius: 0;
padding: 11px 12px; color: #fff; font-family: 'Inter', sans-serif; font-size: 1rem;
}
.arc-form input:focus { border-color: var(--strength); box-shadow: 0 0 10px rgba(57,255,20,0.25); }
.arc-form-full { grid-column: 1 / -1; }
.arc-form-hint { font-size: 8px; color: #9AA39A; letter-spacing: 0.08em; }
.arc-form .arc-btn { margin-top: 4px; animation: none; }
.arc-form .arc-btn.saved { border-color: #F5D90A; color: #F5D90A; }
@media (max-width: 540px) { .arc-form { grid-template-columns: 1fr; } }
.arc-coin { display: block; margin-top: 26px; text-align: center; font-size: 9px; color: var(--strength); text-decoration: none; padding: 8px 0; }
.arc-exit { display: block; margin: 14px auto 0; background: none; border: none; font-family: inherit; font-size: 8px; color: #8A8F8A; cursor: pointer; letter-spacing: 0.1em; padding: 10px 16px; min-height: 44px; }
.arc-exit:hover, .arc-exit:focus-visible { color: #E05A5A; }
.arc-guest { text-align: center; padding: 60px 30px; }
.arc-guest .arc-player { margin-bottom: 18px; }
.arc-btn {
display: inline-block; margin-top: 24px; background: none; cursor: pointer;
border: 3px solid var(--strength); color: var(--strength);
font-family: inherit; font-size: 10px; padding: 16px 22px;
}
.arc-btn:hover, .arc-btn:focus-visible { background: rgba(57,255,20,0.1); animation: none; }
@media (max-width: 540px) {
.arc-crt { padding: 26px 16px; }
.arc-player { font-size: 15px; }
.arc-table th:first-child, .arc-table td:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .arc-blink { animation: none; } }
/* ── EL NIVEL: mundo 2D pixelado (grande y jugable) ──────── */
.arc-world {
position: relative; height: 320px; margin: 6px 0 30px; overflow: hidden;
border: 3px solid #1E5C1E; background: linear-gradient(180deg, #020604 0%, #041207 62%, #06180A 100%);
image-rendering: pixelated; cursor: pointer; user-select: none; touch-action: manipulation;
}
/* estrellas (box-shadow dots) */
.arc-stars { position: absolute; top: 14px; left: 18px; width: 3px; height: 3px; background: #CFEFC6; opacity: 0.8;
box-shadow: 60px 8px #CFEFC6, 130px 22px #7C9E76, 210px 4px #CFEFC6, 290px 18px #7C9E76,
370px 10px #CFEFC6, 450px 26px #7C9E76, 520px 6px #CFEFC6, 600px 16px #7C9E76, 660px 30px #CFEFC6; }
/* nubes pixeladas */
.arc-cloud { position: absolute; width: 46px; height: 12px; background: #10301A; }
.arc-cloud::before { content: ''; position: absolute; left: 10px; top: -8px; width: 24px; height: 8px; background: #10301A; }
.arc-cloud.c1 { top: 34px; left: 12%; animation: arcdrift 26s linear infinite; }
.arc-cloud.c2 { top: 58px; left: 62%; animation: arcdrift 34s linear infinite reverse; }
@keyframes arcdrift { 50% { transform: translateX(30px); } }
/* colinas del fondo */
.arc-hills { position: absolute; bottom: 48px; left: 0; right: 0; height: 64px;
background:
linear-gradient(45deg, transparent 49%, #0A2410 50%) 0 100% / 90px 46px no-repeat,
linear-gradient(-45deg, transparent 49%, #0A2410 50%) 45px 100% / 90px 46px no-repeat,
linear-gradient(45deg, transparent 49%, #081C0C 50%) 55% 100% / 120px 40px no-repeat,
linear-gradient(-45deg, transparent 49%, #081C0C 50%) calc(55% + 60px) 100% / 120px 40px no-repeat; }
/* suelo: pasto neón + tierra en tiles */
.arc-ground { position: absolute; bottom: 0; left: 0; right: 0; height: 48px;
background:
repeating-linear-gradient(90deg, var(--strength) 0 20px, #2ACC0F 20px 23px) top / 100% 8px no-repeat,
repeating-linear-gradient(90deg, #123312 0 20px, #0D260D 20px 23px);
box-shadow: 0 -4px 14px rgba(57,255,20,0.25); }
/* letrero de salida */
.arc-sign { position: absolute; bottom: 48px; left: 3%; width: 46px; text-align: center; }
.arc-sign span { display: block; background: #123312; color: #C9CFC9; font-size: 9px; padding: 5px 3px; border: 1px solid #1E5C1E; }
.arc-sign::after { content: ''; display: block; width: 6px; height: 14px; background: #1E5C1E; margin: 0 auto; }
/* monedas */
.arc-coin-px { position: absolute; bottom: 104px; width: 16px; height: 16px; background: #F5D90A;
border: 3px solid #B89A00; box-sizing: border-box; animation: arccoin 1.6s steps(2) infinite; }
.arc-coin-px::after { content: ''; position: absolute; inset: 3px 4px; background: #FFF3A0; width: 3px; }
@keyframes arccoin { 50% { transform: scaleX(0.4); } }
.arc-coin-px.got { animation: none; opacity: 0; transition: opacity 0.3s; }
/* bandera de meta + cofre */
.arc-flagpole { position: absolute; bottom: 48px; right: 5%; width: 54px; height: 170px; }
.arc-pole { position: absolute; right: 22px; bottom: 0; width: 6px; height: 170px; background: #CFEFC6; }
.arc-pennant { position: absolute; right: 28px; top: 2px; width: 0; height: 0;
border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 36px solid var(--strength);
filter: drop-shadow(0 0 6px rgba(57,255,20,0.7)); animation: arcflag 1.2s steps(2) infinite; }
@keyframes arcflag { 50% { transform: scaleY(0.85); } }
.arc-flag-label { position: absolute; right: -8px; top: 62px; font-size: 9px; color: #F5D90A; white-space: nowrap; }
.arc-chest { position: absolute; right: 34px; bottom: 0; width: 30px; height: 22px; background: #B8860B;
border: 3px solid #7A5A00; box-sizing: border-box; }
.arc-chest::after { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px; background: #7A5A00; }
.arc-chest span { position: absolute; top: -22px; left: 7px; color: #F5D90A; font-size: 13px; animation: arcblink 0.9s steps(1) infinite; }
/* el héroe */
.arc-hero { position: absolute; bottom: 46px; left: 4%; width: 56px; height: 80px; will-change: left, transform; transform-origin: 50% 100%; }
.arc-hero svg { width: 100%; height: 100%; display: none; }
/* sprite según el mundo: yoga / gym rat / runner */
.arc-world.w-garden .hero-yoga { display: block; }
.arc-world.w-gym .hero-gym { display: block; }
.arc-world.w-track .hero-run { display: block; }
/* respaldo si aún no hay tema asignado */
.arc-world:not(.w-garden):not(.w-gym):not(.w-track) .hero-yoga { display: block; }
.arc-hero .fB { visibility: hidden; }
.arc-hero.step .fA { visibility: hidden; }
.arc-hero.step .fB { visibility: visible; }
/* polvo al caminar */
.arc-hero.walking::after, .arc-hero.running::after { content: ''; position: absolute; left: -9px; bottom: 3px; width: 7px; height: 7px;
background: #7C9E76; opacity: 0.7; animation: arcdust 0.3s steps(2) infinite; }
@keyframes arcdust { 50% { transform: translate(-5px, -4px); opacity: 0.2; } }
/* festejo al llegar con regalo: saltito */
.arc-hero.victory { animation: archop 0.6s steps(3) infinite; }
@keyframes archop { 33% { transform: translateY(-14px); } 66% { transform: translateY(-6px); } }
/* ── MODO JUEGO (runner estilo dino) ─────────────────────── */
/* placa oscura fija: el amarillo sobre el jardín claro era ilegible (1.07:1) */
.arc-play-hint { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
width: max-content; max-width: 92%; text-align: center;
font-size: 9px; color: #F5D90A; z-index: 5; pointer-events: none;
background: rgba(0,0,0,0.72); padding: 8px 12px; text-shadow: none; }
.arc-world.playing .arc-play-hint { display: none; }
.arc-game-score { position: absolute; top: 12px; right: 14px; font-size: 11px; color: #F5D90A;
z-index: 5; display: none; background: rgba(0,0,0,0.72); padding: 5px 8px; text-shadow: none; }
.arc-world.playing .arc-game-score { display: block; }
/* en juego se despeja el nivel: solo héroe, obstáculos y marcas */
.arc-world.playing .arc-coins, .arc-world.playing .arc-flagpole,
.arc-world.playing .arc-sign, .arc-world.playing .arc-deco { display: none; }
/* obstáculos por mundo */
.arc-obs { position: absolute; bottom: 48px; }
.w-garden .arc-obs { width: 34px; height: 30px; background: #8F8778;
box-shadow: inset -5px -5px 0 #7E766A, inset 5px 5px 0 #A39B8A; }
.w-garden .arc-obs.tall { width: 28px; height: 50px; }
.w-gym .arc-obs { width: 30px; height: 44px; background: #2A2A33; border: 3px solid #3A3A44; box-sizing: border-box; }
.w-gym .arc-obs::after { content: ''; position: absolute; left: 0; right: 0; top: 45%; height: 7px; background: #5A5A66; }
.w-gym .arc-obs.tall { height: 58px; }
.w-track .arc-obs { width: 44px; height: 38px;
background:
linear-gradient(#F5F9FF, #F5F9FF) top / 100% 6px no-repeat,
linear-gradient(#C9CFDB, #C9CFDB) 5px 0 / 5px 100% no-repeat,
linear-gradient(#C9CFDB, #C9CFDB) calc(100% - 5px) 0 / 5px 100% no-repeat; }
.w-track .arc-obs.tall { height: 50px; }
/* obstáculos VOLADORES: se pasan agachándose (↓) o con salto muy preciso */
.arc-obs.fly { bottom: 60px !important; width: 34px; height: 24px; animation: arcfly 0.4s steps(2) infinite; }
@keyframes arcfly { 50% { transform: translateY(-5px); } }
.w-garden .arc-obs.fly { background: #F2A5BE; box-shadow: inset -5px 0 0 #E58BA8, inset 5px 0 0 #F8C4D2; border: 0; }
.w-gym .arc-obs.fly { background: #2A2A33; border: 3px solid #3A3A44; box-sizing: border-box; }
.w-gym .arc-obs.fly::after { content: ''; position: absolute; left: 8px; right: 8px; top: -8px; height: 6px;
background: none; border: 3px solid #5A5A66; border-bottom: 0; }
.w-track .arc-obs.fly { background: #26314F; box-shadow: -8px -5px 0 0 #26314F, 8px -5px 0 0 #26314F; border: 0; }
/* marcas del piso que corren (sensación de velocidad) */
.arc-mark { position: absolute; bottom: 28px; width: 9px; height: 4px; background: rgba(255,255,255,0.28); }
.w-garden .arc-mark { background: rgba(138,107,74,0.45); }
/* monedas del juego: altas (saltando) o bajas (al paso) */
.arc-gcoin { position: absolute; bottom: 150px; width: 18px; height: 18px; background: #F5D90A;
border: 3px solid #B89A00; box-sizing: border-box; z-index: 2; animation: arccoin 0.5s steps(2) infinite; }
.arc-gcoin::after { content: ''; position: absolute; inset: 3px 4px; background: #FFF3A0; width: 3px; }
.arc-gcoin.low { bottom: 66px; }
/* botón de sonido */
.arc-mute { position: absolute; top: 10px; left: 12px; z-index: 7; cursor: pointer;
background: rgba(0,0,0,0.35); border: 2px solid #1E5C1E; color: var(--strength);
font-family: inherit; font-size: 8px; padding: 6px 9px; line-height: 1; }
/* Foco visible en toda la cabina: el reset global quita el outline del
navegador, así que aquí se restituye con contraste real (14.2:1). */
.arc-crt a:focus-visible,
.arc-crt button:focus-visible,
.arc-crt input:focus-visible,
.arc-world:focus-visible {
outline: 3px solid #F5D90A;
outline-offset: 3px;
}
/* dentro del mundo claro el amarillo se pierde */
.arc-world.w-garden button:focus-visible { outline-color: #1A1A1A; }
.arc-mute:hover, .arc-mute:focus-visible { border-color: var(--strength); }
.w-garden .arc-mute { background: rgba(255,255,255,0.4); border-color: #5C4630; color: #5C4630; }
.w-garden .arc-mute:hover, .w-garden .arc-mute:focus-visible { border-color: #5C4630; }
/* pantalla de GAME OVER */
.arc-gameover { position: absolute; inset: 0; z-index: 6; display: none;
flex-direction: column; align-items: center; justify-content: center; gap: 14px;
background: rgba(0,0,0,0.80); text-align: center; }
.arc-gameover.show { display: flex; }
.arc-gameover p { font-size: 15px; color: #fff; text-shadow: 2px 2px 0 #B00; }
.arc-gameover .go-score { font-size: 10px; color: #F5D90A; line-height: 2; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); }
.arc-gameover .go-top { font-size: 8px; color: #C9EFC0; line-height: 2.1; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); min-height: 10px; }
.arc-play-hint .hint-keys { font-size: 8px; color: #C9CFC9; display: inline-block; margin-top: 6px; }
.arc-gameover .go-retry { font-size: 9px; color: var(--strength); }
.arc-gameover .go-exit { background: none; border: 2px solid #8A8F8A; color: #C9C9C9;
font-family: inherit; font-size: 8px; padding: 9px 14px; cursor: pointer; }
.arc-gameover .go-exit:hover, .arc-gameover .go-exit:focus-visible { border-color: #E05A5A; color: #E05A5A; }
/* ── Ajustes del juego en móvil ──────────────────────────── */
@media (max-width: 540px) {
/* voladores más arriba: agachado (33px de alto) pasa por debajo */
.arc-obs.fly { bottom: 74px !important; width: 28px; height: 20px; }
/* monedas del juego a alturas alcanzables con el salto móvil */
.arc-gcoin { bottom: 112px; width: 14px; height: 14px; }
.arc-gcoin.low { bottom: 52px; }
/* obstáculos de piso proporcionales al héroe chico */
.w-garden .arc-obs:not(.fly) { width: 28px; height: 26px; }
.w-garden .arc-obs.tall { width: 24px; height: 40px; }
.w-gym .arc-obs:not(.fly) { width: 26px; height: 36px; }
.w-gym .arc-obs.tall { height: 46px; }
.w-track .arc-obs:not(.fly) { width: 36px; height: 30px; }
.w-track .arc-obs.tall { height: 40px; }
/* mute con área táctil digna */
.arc-mute { padding: 10px 12px; font-size: 8px; min-height: 44px; }
/* game over compacto */
.arc-gameover p { font-size: 12px; }
.arc-gameover .go-score { font-size: 8px; }
}
/* decoración por mundo (posiciones base) */
.arc-deco { position: absolute; bottom: 48px; }
.arc-deco.d1 { left: 34%; }
.arc-deco.d2 { left: 63%; }
/* ── MUNDO 1 · JARDIN ZEN ── */
.arc-world.w-garden { background: linear-gradient(180deg, #F2EBD8 0%, #EADFC2 55%, #E0D2AE 100%); }
/* sol de amanecer */
.w-garden::before { content: ''; position: absolute; top: 16px; right: 16%; width: 32px; height: 32px;
border-radius: 50%; background: #F2B8C6; box-shadow: 0 0 26px 6px rgba(242,184,198,0.7); }
/* pétalos de cerezo cayendo (en vez de estrellas) */
.w-garden .arc-stars { background: #F2A5BE; opacity: 0.9; width: 4px; height: 4px;
box-shadow: 60px 8px #F2A5BE, 130px 22px #E58BA8, 210px 4px #F2A5BE, 290px 18px #E58BA8,
370px 10px #F2A5BE, 450px 26px #E58BA8, 520px 6px #F2A5BE, 600px 16px #E58BA8, 660px 30px #F2A5BE;
animation: zenpetal 6s steps(8) infinite; }
@keyframes zenpetal { 50% { transform: translate(-8px, 22px); opacity: 0.5; } }
/* neblina suave (en vez de nubes) */
.w-garden .arc-cloud { width: 74px; height: 7px; background: rgba(255,255,255,0.65); }
.w-garden .arc-cloud::before { left: 16px; top: -5px; width: 38px; height: 5px; background: rgba(255,255,255,0.65); }
/* monte pálido + bambú */
.w-garden .arc-hills {
background:
linear-gradient(45deg, transparent 49%, #D4C6A2 50%) 12% 100% / 180px 64px no-repeat,
linear-gradient(-45deg, transparent 49%, #D4C6A2 50%) calc(12% + 90px) 100% / 180px 64px no-repeat,
repeating-linear-gradient(90deg, #5F8A6A 0 7px, transparent 7px 36px) 78% 100% / 150px 58px no-repeat,
repeating-linear-gradient(0deg, transparent 0 16px, #4A7156 16px 19px) 78% 100% / 150px 58px no-repeat; }
/* arena rastrillada */
.w-garden .arc-ground {
background:
linear-gradient(#C9BC98, #C9BC98) top / 100% 4px no-repeat,
repeating-linear-gradient(0deg, #EAE0C4 0 7px, #DCCFA9 7px 10px);
box-shadow: 0 -4px 14px rgba(201,188,152,0.5); }
/* farol de piedra */
.w-garden .arc-deco.d1 { width: 28px; height: 38px; background: none; }
.w-garden .arc-deco.d1::before { content: ''; position: absolute; bottom: 0; left: 10px; width: 8px; height: 17px; background: #9A9284;
box-shadow: -10px 17px 0 0 #9A9284, 0 17px 0 0 #B0A896, 10px 17px 0 0 #9A9284; }
.w-garden .arc-deco.d1::after { content: ''; position: absolute; top: 0; left: 3px; width: 22px; height: 8px; background: #7E766A;
box-shadow: 3px 8px 0 0 #F5D90A, 3px 8px 14px 3px rgba(245,217,10,0.5); }
/* piedras zen apiladas */
.w-garden .arc-deco.d2 { width: 36px; height: 28px; background: none; }
.w-garden .arc-deco.d2::before { content: ''; position: absolute; bottom: 0; left: 0; width: 36px; height: 11px; background: #8F8778;
box-shadow: 4px -10px 0 0 #A39B8A, 10px -18px 0 -2px #B5AD9C; }
/* letrero, bandera y textos en tonos del jardín */
.w-garden .arc-sign span { background: #6B4E33; border-color: #5C4630; color: #F2EBD8; }
.w-garden .arc-sign::after { background: #5C4630; }
.w-garden .arc-pennant { border-right-color: #F2A5BE; filter: drop-shadow(0 0 6px rgba(242,165,190,0.8)); }
.w-garden .arc-pole { background: #8A6B4A; }
.w-garden .arc-flag-label { color: #5C4630; }
.w-garden .arc-coin-px { border-color: #A38800; }
/* ── MUNDO 2 · GYM ── */
.arc-world.w-gym { background: linear-gradient(180deg, #08080C 0%, #0E0E14 65%, #12121A 100%); }
.w-gym .arc-stars { opacity: 0; }
/* lámparas colgantes en vez de nubes */
.w-gym .arc-cloud { width: 26px; height: 8px; background: #F5D90A; animation: none;
box-shadow: 0 16px 30px 6px rgba(245,217,10,0.28); }
.w-gym .arc-cloud::before { left: 11px; top: -22px; width: 4px; height: 22px; background: #26262E; }
.w-gym .arc-cloud.c1 { top: 26px; } .w-gym .arc-cloud.c2 { top: 26px; }
/* rack de pesas al fondo */
.w-gym .arc-hills {
background:
linear-gradient(#1B1B24, #1B1B24) 8% calc(100% - 30px) / 64% 7px no-repeat,
repeating-linear-gradient(90deg, #1B1B24 0 9px, transparent 9px 120px) 8% 100% / 64% 100% no-repeat,
linear-gradient(#15151C, #15151C) 82% 100% / 84px 36px no-repeat; }
.w-gym .arc-ground {
background:
repeating-linear-gradient(90deg, var(--strength) 0 20px, #2ACC0F 20px 23px) top / 100% 6px no-repeat,
repeating-linear-gradient(90deg, #1C1C24 0 20px, #16161C 20px 23px);
box-shadow: 0 -4px 14px rgba(57,255,20,0.15); }
/* mancuerna en el piso */
.w-gym .arc-deco { width: 58px; height: 9px; background: #9AA0A6; bottom: 50px; }
.w-gym .arc-deco::before, .w-gym .arc-deco::after { content: ''; position: absolute; top: -9px; width: 13px; height: 26px; background: #2A2A33; border: 2px solid #3A3A44; }
.w-gym .arc-deco::before { left: -6px; } .w-gym .arc-deco::after { right: -6px; }
/* ── MUNDO 3 · MARATÓN (pista de atletismo) ── */
.arc-world.w-track { background: linear-gradient(180deg, #03060E 0%, #0A1226 55%, #101A33 100%); }
/* gradas del estadio */
.w-track .arc-hills {
background:
repeating-linear-gradient(0deg, #141E38 0 9px, #0E1730 9px 18px) 0 100% / 100% 58px no-repeat; }
/* reflectores del estadio */
.w-track .arc-cloud { width: 7px; height: 36px; background: #26314F; animation: none; }
.w-track .arc-cloud::before { left: -11px; top: -10px; width: 29px; height: 10px; background: #F5F9FF;
box-shadow: 0 0 22px 5px rgba(245,249,255,0.5); }
.w-track .arc-cloud.c1 { top: 20px; } .w-track .arc-cloud.c2 { top: 20px; }
/* pista de tartán con carriles */
.w-track .arc-ground {
background:
repeating-linear-gradient(90deg, #F5F9FF 0 22px, transparent 22px 46px) top 13px left 0 / 100% 4px no-repeat,
linear-gradient(#C24E2A, #C24E2A) top / 100% 3px no-repeat,
repeating-linear-gradient(90deg, #B0451F 0 20px, #9C3C1C 20px 23px);
box-shadow: 0 -4px 14px rgba(194,78,42,0.35); }
/* vallas */
.w-track .arc-deco { width: 42px; height: 30px;
background:
linear-gradient(#F5F9FF, #F5F9FF) top / 100% 6px no-repeat,
linear-gradient(#C9CFDB, #C9CFDB) 4px 0 / 4px 100% no-repeat,
linear-gradient(#C9CFDB, #C9CFDB) calc(100% - 4px) 0 / 4px 100% no-repeat; }
/* META estilo maratón: bandera a cuadros + cinta */
.w-track .arc-pennant { border: none; width: 36px; height: 24px; right: 28px;
background: repeating-conic-gradient(#F5F9FF 0% 25%, #111 25% 50%) 0 0 / 12px 12px; animation: none; }
.w-track .arc-flag-label { color: #F5F9FF; }
.w-track .arc-flagpole::after { content: ''; position: absolute; right: 26px; bottom: 36px; width: 92px; height: 4px;
background: repeating-linear-gradient(90deg, #F5F9FF 0 8px, #E05A5A 8px 16px); } /* cinta de meta */
@media (max-width: 540px) {
.arc-world { height: 230px; }
.arc-ground { height: 38px; }
.arc-hills, .arc-sign, .arc-flagpole, .arc-deco { bottom: 38px; }
.arc-hero { width: 42px; height: 60px; bottom: 36px; }
.arc-coin-px { width: 12px; height: 12px; border-width: 2px; bottom: 82px; }
.arc-flagpole { height: 130px; } .arc-pole { height: 130px; }
.arc-obs { bottom: 38px; }
.w-gym .arc-deco { bottom: 40px; }
.arc-stars { box-shadow: 60px 8px #CFEFC6, 130px 22px #7C9E76, 210px 4px #CFEFC6, 290px 18px #7C9E76; }
.arc-deco.d2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.arc-cloud, .arc-coin-px, .arc-pennant, .arc-hero.victory,
.arc-hero.walking::after, .arc-hero.running::after,
.arc-chest span, /* estrella del regalo */
.w-garden .arc-stars, /* pétalos de cerezo */
.arc-gcoin, /* monedas del juego */
.arc-obs.fly /* obstáculos voladores */
{ animation: none; }
}
/* ── Barra lealtad en carrito ───────────────────────────── */
.cart-loyalty { margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: rgba(57,255,20,0.05); border: 1px solid rgba(57,255,20,0.25); font-size: 0.78rem; }
.cart-loyalty.guest { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.cart-loyalty .auth-link { margin-top: 0; font-size: inherit; }
/* barra estilo arcade: segmentos pixelados, sin redondeo */
.cart-loyalty-bar { margin-top: 7px; height: 9px; border: 1px solid rgba(57,255,20,0.4); padding: 1px; background: #041004; overflow: hidden; }
.cart-loyalty-bar div {
height: 100%; background: linear-gradient(180deg, #7CFF6B, var(--strength) 55%, #1DB954);
box-shadow: 0 0 8px rgba(57,255,20,0.6); transition: width 0.5s steps(8);
background-size: auto, 8px 100%;
-webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
}
/* ── Checkout: lealtad y regalos ─────────────────────────── */
.co-guest-note { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); font-size: 0.78rem; margin-bottom: 12px; }
.co-guest-note .auth-link { margin-top: 0; font-size: inherit; }
.co-gift { padding: 10px 12px; border-radius: 10px; background: rgba(57,255,20,0.06); border: 1px solid rgba(57,255,20,0.3); font-size: 0.82rem; margin-bottom: 12px; }
.co-gift select { margin-left: 8px; background: #111; color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 4px 8px; }
/* ============================================================================
CRISTAL — sistema unificado de botones
----------------------------------------------------------------------------
Todo control del sitio habla el idioma del óvalo del header: cápsula de
999px, filo de luz arriba, sombra de grosor abajo, material que refracta.
Dos densidades, no una:
· SECUNDARIO → vidrio translúcido (el material completo).
· PRIMARIO → vidrio TEÑIDO: el color de marca vive en el relleno y el
canto es el mismo. Se mantiene opaco porque un CTA translúcido sobre
vídeo pierde la jerarquía que sostiene la conversión — lo que hace que
una pieza pertenezca a este material es el canto, no la transparencia.
Va al final de la hoja a propósito: gana la cascada sin tocar las reglas
originales, así que revertir todo esto es borrar este bloque.
============================================================================ */
/* ── 1 · SECUNDARIOS: el material completo ───────────────────────────────── */
.btn-ghost,
.btn-cart,
.qty-btn,
.cart-close,
.modal-close,
#search-clear,
.social-btn,
.subline-tab,
.filter-tab,
.rm-chip,
.arc-exit {
border: none;
border-radius: var(--r-btn);
background: var(--glass-fill);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-edge);
color: rgba(242,239,230,0.88);
transition: background var(--t-base) ease,
box-shadow var(--t-base) ease,
color var(--t-base) ease,
transform var(--t-fast) ease-out;
}
.btn-ghost:hover,
.btn-cart:hover,
.qty-btn:hover,
.cart-close:hover,
.modal-close:hover,
#search-clear:hover,
.social-btn:hover,
.subline-tab:hover,
.filter-tab:hover,
.rm-chip:hover,
.arc-exit:hover {
background: var(--glass-fill-hi);
box-shadow: var(--glass-edge-hi);
color: #fff;
}
/* Respuesta en el pointer-down, no al soltar */
.btn-ghost:active,
.btn-cart:active,
.qty-btn:active,
.cart-close:active,
.modal-close:active,
#search-clear:active,
.social-btn:active,
.subline-tab:active,
.filter-tab:active,
.rm-chip:active,
.arc-exit:active { transform: scale(0.96); }
/* Los iconos cuadrados del nav pasan a círculo dentro del óvalo */
.btn-cart { width: 44px; height: 44px; }
.qty-btn { width: 28px; height: 28px; }
/* Pestaña activa: vidrio más denso; el acento vive en el texto, no en el fondo */
.filter-tab.active,
.subline-tab.active,
.subline-tab.active-endurance,
.subline-tab.active-strength {
background: var(--glass-fill-hi);
box-shadow: var(--glass-edge-hi);
color: #fff;
}
/* ── 2 · PRIMARIOS: vidrio teñido, opaco ─────────────────────────────────── */
.btn,
.btn-lg { border-radius: var(--r-btn); }
.btn-white {
background: linear-gradient(180deg, #FFFFFF 0%, #ECEAE4 100%);
box-shadow: var(--edge-solid-light);
color: var(--black);
}
.btn-white:hover {
background: linear-gradient(180deg, #FFFFFF 0%, #E2E0D9 100%);
box-shadow: var(--edge-solid-light), 0 10px 28px -12px rgba(0,0,0,0.7);
}
.btn-dark {
background: linear-gradient(180deg, #232326 0%, #131315 100%);
box-shadow: var(--edge-solid-deep);
color: #FFFFFF;
}
.btn-dark:hover { background: linear-gradient(180deg, #2E2E33 0%, #1B1B1E 100%); }
/* Los botones de línea NO son caramelos de color. Con el relleno saturado
parecían plástico y rompían la identidad: el sitio es negro con acentos
de neón, no bloques de color. Aquí el acento vive en el TEXTO, en el
canto y en un halo tenue; el cuerpo es el mismo vidrio oscuro que todo
lo demás. Al pasar el cursor sube el tinte, sin llegar nunca a sólido. */
.btn-endurance,
.btn-strength {
background-image: var(--glass-fill);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
.btn-endurance {
background-color: rgba(14,165,233,0.14);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.34),
inset 0 -1px 0 0 rgba(0,0,0,0.30),
inset 0 0 0 1px rgba(14,165,233,0.55);
color: #7DD3FC;
}
.btn-endurance:hover {
background-color: rgba(14,165,233,0.28);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.5),
inset 0 -1px 0 0 rgba(0,0,0,0.34),
inset 0 0 0 1px rgba(14,165,233,0.85),
0 10px 30px -14px var(--endurance-glow-strong);
color: #BAE6FD;
}
.btn-strength {
background-color: rgba(57,255,20,0.12);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.34),
inset 0 -1px 0 0 rgba(0,0,0,0.30),
inset 0 0 0 1px rgba(57,255,20,0.5);
color: #A8FF8F;
}
.btn-strength:hover {
background-color: rgba(57,255,20,0.24);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.5),
inset 0 -1px 0 0 rgba(0,0,0,0.34),
inset 0 0 0 1px rgba(57,255,20,0.8),
0 10px 30px -14px var(--strength-glow-strong);
color: #D3FFC7;
}
.btn-nav-cta,
.mm-cta,
.btn-checkout,
.co-pay,
.rm-add,
.pm-add,
.btn-add-to-cart,
.discount-form button,
.arc-btn,
.ls-cta,
.rt-cta,
.id-cta,
.vit-cta,
.rd-card-cta {
border: none;
border-radius: var(--r-btn);
/* Los dos trapecios del sitio (.vit-cta, .rt-cta) pierden el chaflán:
una cápsula recortada en diagonal deja de ser una cápsula. */
-webkit-clip-path: none;
clip-path: none;
transition: background var(--t-base) ease,
box-shadow var(--t-base) ease,
transform var(--t-fast) ease-out;
}
.btn-nav-cta:active,
.mm-cta:active,
.btn-checkout:active,
.co-pay:active,
.rm-add:active,
.pm-add:active,
.btn-add-to-cart:active,
.discount-form button:active,
.arc-btn:active,
.ls-cta:active,
.rt-cta:active { transform: scale(0.97); }
/* CTA claros sobre fondo oscuro */
.btn-nav-cta,
.mm-cta {
background: linear-gradient(180deg, #FFFFFF 0%, #E9E7E1 100%);
box-shadow: var(--edge-solid-light);
color: #08090B;
}
.btn-nav-cta:hover,
.mm-cta:hover {
background: linear-gradient(180deg, #FFFFFF 0%, #DEDCD5 100%);
box-shadow: var(--edge-solid-light), 0 10px 26px -12px rgba(0,0,0,0.65);
}
/* El "Comprar" del menú móvil venía gris casi negro sobre fondo negro:
invisible. Hereda el CTA crema.
El selector lleva `.mobile-menu` delante a propósito: la regla original
es `.mobile-menu .mm-cta` (0,2,0) y le ganaba a un `.mm-cta` suelto. */
.mobile-menu .mm-cta,
.mobile-menu .mm-cta.btn-dark {
border-radius: var(--r-btn);
background: linear-gradient(180deg, #FFFFFF 0%, #E9E7E1 100%);
box-shadow: var(--edge-solid-light);
color: #08090B;
}
/* CTA del embudo (carrito → checkout). Mismo material, más denso: sigue
mandando dentro de un panel oscuro sin volverse un bloque de color. */
.btn-checkout,
.co-pay {
background-image: var(--glass-fill);
background-color: rgba(14,165,233,0.30);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.42),
inset 0 -1px 0 0 rgba(0,0,0,0.32),
inset 0 0 0 1px rgba(14,165,233,0.7);
color: #E6F5FF;
}
.btn-checkout:hover,
.co-pay:hover {
background-color: rgba(14,165,233,0.46);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.55),
inset 0 -1px 0 0 rgba(0,0,0,0.36),
inset 0 0 0 1px rgba(14,165,233,0.95),
0 12px 32px -14px var(--endurance-glow-strong);
color: #FFFFFF;
}
/* CTA del form de descuento: conserva su vidrio verde original */
.discount-form button {
background-image: var(--glass-fill);
background-color: rgba(57,255,20,0.20);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.38),
inset 0 -1px 0 0 rgba(0,0,0,0.30),
inset 0 0 0 1px rgba(57,255,20,0.6);
color: #D3FFC7;
}
/* CTA de los modales (producto/rutina): SÓLIDOS por decisión del cliente
("prefiero colores sólidos", v362). El acento viaja en --acc y la tinta
en --acc-tx (bestInk, contraste WCAG real) — antes iban por style inline
que pisaba la cascada y sobre acentos oscuros la tinta era #000. */
.rm-add,
.pm-add {
background: var(--acc, var(--strength));
color: var(--acc-tx, #04110A);
}
.rm-add:hover,
.pm-add:hover {
background: color-mix(in srgb, var(--acc, var(--strength)) 86%, #FFFFFF);
color: var(--acc-tx, #04110A);
box-shadow: 0 12px 32px -14px color-mix(in srgb, var(--acc, var(--strength)) 60%, transparent);
}
.discount-form button:hover {
background-color: rgba(57,255,20,0.34);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.5),
inset 0 -1px 0 0 rgba(0,0,0,0.34),
inset 0 0 0 1px rgba(57,255,20,0.9),
0 12px 32px -14px var(--strength-glow-strong);
color: #EDFFE7;
}
/* El "+" de cada ficha: vidrio teñido con el acento de SU línea de producto
(--acc lo escribe js/app.js al renderizar la tarjeta). Así el color sigue
informando a qué línea pertenece, pero el material es el mismo del sitio. */
.btn-add-to-cart {
border: none;
border-radius: var(--r-btn);
/* El tinte va en background-COLOR: color-mix() produce un color, y un
color no es válido como capa de background-image (la capa se caía a
`none` y el botón quedaba sin tinte). */
background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 100%);
background-color: color-mix(in srgb, var(--acc, var(--strength)) 22%, transparent);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-edge);
color: var(--acc-tx, var(--acc, var(--strength)));
transition: background var(--t-base) ease,
box-shadow var(--t-base) ease,
color var(--t-base) ease,
transform var(--t-fast) ease-out;
}
.btn-add-to-cart:hover {
background-image: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 100%);
background-color: color-mix(in srgb, var(--acc, var(--strength)) 68%, transparent);
box-shadow: var(--glass-edge-hi);
color: #04110A;
}
/* Sobre las fichas claras de Wellness el mismo material va al revés */
.card-wellness .btn-add-to-cart {
background-image: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%);
background-color: color-mix(in srgb, var(--acc, #C8B4D8) 18%, transparent);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.95),
inset 0 0 0 1px color-mix(in srgb, var(--acc, #C8B4D8) 45%, transparent);
}
.card-wellness .btn-add-to-cart:hover {
background-image: none;
background-color: color-mix(in srgb, var(--acc, #C8B4D8) 85%, transparent);
color: #1A1A1A;
}
/* Los CTA de las puertas y las rutinas: vidrio real, no medio vidrio */
.ls-cta,
.door-p .ls-cta,
.rt-cta,
.id-cta,
.arc-btn,
.rd-card-cta,
.vit-cta {
background: var(--glass-fill);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-edge);
color: #fff;
}
.ls-cta:hover,
.door-p .ls-cta:hover,
.rt-cta:hover,
.id-cta:hover,
.arc-btn:hover,
.rd-card-cta:hover,
.vit-cta:hover {
background: var(--glass-fill-hi);
box-shadow: var(--glass-edge-hi);
}
/* `gap` es layout: animarlo reflowea la píldora entera en cada hover */
.ls-cta {
transition: background var(--t-base) ease,
box-shadow var(--t-base) ease,
transform var(--t-fast) ease-out;
}
/* (antes cambiaba gap en hover: relayout sin transición) */
.ls-cta svg { transition: transform var(--t-base) var(--ease-firma); }
.ls-cta:hover svg { transform: translateX(4px); }
/* ── 3 · VIDRIO CLARO (Wellness) ─────────────────────────────────────────── */
/* Sobre fondo claro el vidrio blanco desaparece: sube el tinte, el filo se
vuelve blanco puro y el grosor pasa a sombra violácea de la familia. */
.nav-inner.light { --focus-ring: rgba(20,16,40,0.9); }
/* `:not(.cat-card-dark)` es obligatorio: la MISMA clase .cat-card se usa en
Wellness (fondo claro) y en Performance/Rutinas (fondo negro, con el
modificador .cat-card-dark). Sin esta exclusión, este bloque —que va al
final y gana la cascada— pintaba de blanco las tarjetas oscuras. */
.nav-inner.light .btn-cart,
.cat-card:not(.cat-card-dark),
.fs-arrow:not(.on-dark),
.btn-up-cats,
.tab-light-inactive {
background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.62) 100%);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: none;
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.95),
inset 0 -1px 0 0 rgba(20,16,40,0.10),
inset 0 0 0 1px rgba(20,16,40,0.09);
color: #1A1A1A;
transition: background var(--t-base) ease,
box-shadow var(--t-base) ease,
transform var(--t-fast) ease-out;
}
.nav-inner.light .btn-cart:hover,
.cat-card:not(.cat-card-dark):hover,
.fs-arrow:not(.on-dark):hover,
.btn-up-cats:hover,
.tab-light-inactive:hover {
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 100%);
box-shadow:
inset 0 1px 0 0 #FFFFFF,
inset 0 -1px 0 0 rgba(20,16,40,0.14),
inset 0 0 0 1px rgba(20,16,40,0.14),
0 10px 26px -14px rgba(20,16,40,0.34);
color: #111;
}
/* Las tarjetas de categoría son tarjetas, no controles: conservan su radio */
.cat-card { border-radius: var(--r-card); }
.fs-arrow,
.btn-up-cats { border-radius: var(--r-btn); }
/* Contraste: 2.84:1 no pasa. Tinta al 72% sobre crema da 6.9:1 */
.tab-light-inactive { color: rgba(26,26,26,0.72); }
/* En oscuro, 0.35 de blanco daba 3.4:1 a 12px en negrita */
.tab-dark-inactive,
.subline-tab { color: rgba(255,255,255,0.68); }
/* ── 4 · CAMPOS: la única familia que seguía siendo rectangular ──────────── */
.co-fields input,
.co-fields select,
.discount-form input,
.auth-form input,
#search-input {
border-radius: var(--r-field);
border: none;
background: rgba(255,255,255,0.07);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.16),
inset 0 0 0 1px rgba(255,255,255,0.12);
transition: box-shadow var(--t-base) ease, background var(--t-base) ease;
}
.co-fields input:focus,
.co-fields select:focus,
.discount-form input:focus,
.auth-form input:focus,
#search-input:focus {
background: rgba(255,255,255,0.10);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2),
inset 0 0 0 1px var(--endurance);
}
/* ── 5 · CONTRASTES de texto tenue (todos fallaban el 4.5:1) ─────────────── */
.cart-subtotal-note { color: rgba(255,255,255,0.62); }
.co-fields label { color: rgba(255,255,255,0.72); }
.co-secure { color: rgba(255,255,255,0.62); }
.performance-hero-eyebrow { color: rgba(255,255,255,0.72); }
.discount-form input::placeholder { color: rgba(255,255,255,0.58); }
.rd-card-meta s { color: rgba(255,255,255,0.62); }
/* ── 6 · MOVIMIENTO: lo que animaba layout o pintado ─────────────────────── */
/* El carrito animaba `right` (layout, 400ms de reflow en cada apertura) */
.cart-sidebar {
right: 0;
transform: translateX(100%);
transition: transform var(--t-slow) var(--ease-firma);
will-change: transform;
}
.cart-sidebar.open { transform: translateX(0); }
/* La barra de progreso animaba `width` en cada scroll */
.scroll-progress {
width: 100%;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.12s linear;
will-change: transform;
}
/* El subrayado del nav animaba `width` */
.nav-links a::after {
width: 100%;
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--t-base) var(--ease-firma);
}
.nav-links a:hover::after { width: 100%; transform: scaleX(1); }
/* El título de Performance latía con text-shadow (repintado) 6 veces/seg */
.performance-hero-title { animation: none; }
/* ── 7 · EL MENÚ MÓVIL entra y sale ──────────────────────────────────────── */
/* Era el único overlay que se teletransportaba: el carrito y la búsqueda ya
animaban. El retardo en `visibility` es lo que hace visible la SALIDA. */
.mobile-menu {
display: flex;
visibility: hidden;
opacity: 0;
transform: scale(0.97);
transform-origin: 100% 0;
transition: opacity var(--t-base) ease,
transform var(--t-base) var(--ease-firma),
visibility 0s linear var(--t-base);
}
.mobile-menu.open {
visibility: visible;
opacity: 1;
transform: scale(1);
transition: opacity var(--t-base) ease,
transform var(--t-base) var(--ease-firma),
visibility 0s;
}
/* Sin esto queda un `position: fixed; inset: 0` vivo en escritorio.
`.mobile-menu.open` va incluido: con solo (0,1,0) perdía contra
`.mobile-menu.open { display:flex }` y una tablet rotada con el menú
abierto quedaba atrapada tras el overlay sin hamburguesa para cerrarlo. */
@media (min-width: 1140px) {
.mobile-menu, .mobile-menu.open { display: none; }
}
/* ── 8 · GRACIAS: el dato de lealtad ya no empuja el botón ───────────────── */
/* Llegaba por red después de pintar y ganaba una línea justo cuando el
usuario iba a pulsar "Ver mi pedido". 1.6em = el line-height heredado. */
#gr-loyalty {
min-height: 1.6em;
opacity: 0;
transform: translateY(6px);
transition: opacity var(--t-slow) var(--ease-firma),
transform var(--t-slow) var(--ease-firma);
}
#gr-loyalty.is-in { opacity: 1; transform: none; }
/* La pantalla de compra confirmada estaba totalmente plana. Es el momento
más raro y emocional del sitio: aquí sí vive el presupuesto de deleite. */
@keyframes grIn { from { opacity: 0; transform: translateY(16px); } }
#gr-success > * { animation: grIn var(--t-slow) var(--ease-firma) backwards; }
#gr-success > *:nth-child(1) { animation-delay: 0.45s; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
#gr-success > *:nth-child(2) { animation-delay: 0.52s; }
#gr-success > *:nth-child(4) { animation-delay: 0.59s; }
/* El renglón del dinero no se anima: lo controla su propia transición */
#gr-success > #gr-loyalty { animation: none; }
/* ── 9 · ACCESIBILIDAD DEL MATERIAL ──────────────────────────────────────── */
/* Sin transparencia: opaco, conservando el canto que sostiene la forma */
@media (prefers-reduced-transparency: reduce) {
:root {
--glass-fill: linear-gradient(180deg, #1E1E22, #141418);
--glass-fill-hi: linear-gradient(180deg, #2A2A30, #1E1E24);
--glass-blur: none;
}
.nav-inner.light .btn-cart,
.cat-card,
.fs-arrow,
.btn-up-cats,
.tab-light-inactive { background: #FFFFFF; }
}
/* Más contraste: canto definido en vez de insinuado */
@media (prefers-contrast: more) {
.btn-ghost, .btn-cart, .qty-btn, .cart-close, .modal-close,
.social-btn, .filter-tab, .subline-tab, .ls-cta, .rt-cta {
background: #0D0E12;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}
}
/* Movimiento reducido: suave, no cero. La regla global lo aplastaba todo a
0.01ms, incluidos los fundidos de color que ayudan a comprender. */
@media (prefers-reduced-motion: reduce) {
.mobile-menu {
transform: none;
transition: opacity var(--t-base) ease, visibility 0s linear var(--t-base);
}
.mobile-menu.open { transform: none; }
#gr-success > * { animation: none; opacity: 1; transform: none; }
#gr-loyalty { transition: opacity var(--t-base) ease; transform: none; }
#gr-loyalty.is-in { transform: none; }
}
/* Es una TARJETA que resulta ser (fila ancha con imagen + texto):
con 999px se vería absurda. Radio de tarjeta y el canto del sistema. */
.rd-card-btn {
border: none;
border-radius: var(--r-card);
background: var(--glass-fill);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-edge);
}
.rd-card-btn:hover {
background: var(--glass-fill-hi);
box-shadow: var(--glass-edge-hi);
}
/* ── Header claro (Wellness): el vidrio blanco se comió el contenido ──────
Al subir la luminosidad del material, los textos que estaban calibrados
para el fondo anterior quedaron lavados: el logo casi fantasma y los
enlaces en gris claro sobre blanco. Se recalibra el contenido, no el
material. */
.nav-inner.light .nav-links a { color: rgba(20,18,28,0.82); }
.nav-inner.light .nav-links a:hover { color: #0C0A14; }
.nav-inner.light .nav-logo { color: #14121C; }
/* El logo es plateado sobre vidrio claro: sin bajarle mucho el brillo se
pierde. Antes brightness(0.62) — demasiado tímido para este fondo. */
.nav-inner.light .brand-logo-header { filter: brightness(0.34) contrast(1.5) saturate(1.25); }
/* Los iconos de trazo fino desaparecen sobre blanco a stroke-width 1.8 */
.nav-inner.light .btn-cart { color: #14121C; }
.nav-inner.light .btn-cart svg { stroke-width: 2.1; }
/* El badge del carrito en azul de línea sobre el nav crema cantaba más que
el propio CTA. Tinta profunda del mismo azul: pertenece y no grita. */
.nav-inner.light .cart-count {
background: #0B4A6F;
color: #EAF6FF;
box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
}
/* Las tarjetas de categoría en oscuro quedaron como losas planas (#141414)
mientras sus hermanas claras eran vidrio. Mismo material, lado oscuro. */
.cat-card.cat-card-dark {
border: none;
border-radius: var(--r-card);
background-image: var(--glass-fill);
background-color: rgba(14,16,22,0.55);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-edge);
}
.cat-card.cat-card-dark:hover {
background-color: rgba(18,21,28,0.7);
/* recupera la señal de color por categoría que sí tiene el lobby claro */
box-shadow: var(--glass-edge-hi),
0 18px 50px -18px color-mix(in srgb, var(--cat-accent, var(--endurance)) 35%, transparent);
}
/* 0.45 sobre el vidrio oscuro se queda en el limite del 4.5:1 */
.cat-card-dark .cat-desc { color: rgba(255,255,255,0.62); }
/* ============================================================================
VITRINA — encabezado, iluminación y fondo de producto
============================================================================ */
/* ── Encabezado arriba a la izquierda, en el eje del contador «01 / 08» ──── */
.vit-head {
position: absolute;
left: clamp(1.25rem, 5vw, 4rem);
top: clamp(5.5rem, 12vh, 8rem); top: clamp(5.5rem, 12svh, 8rem);
z-index: 3;
pointer-events: none;
}
.vit-eyebrow {
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(242,239,230,0.5);
margin-bottom: 0.55rem;
}
.vit-title {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: clamp(0.82rem, 0.5vw + 0.7rem, 1rem);
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(242,239,230,0.94);
display: flex;
align-items: center;
gap: 0.85rem;
}
/* Filo de luz corto: el mismo recurso del canto de vidrio, tumbado */
.vit-title::before {
content: '';
width: clamp(28px, 3vw, 46px);
height: 1px;
background: linear-gradient(90deg, var(--vit-acc, var(--strength)), transparent);
flex: none;
}
/* El contador se alinea con el encabezado en la misma banda vertical */
.vit-counter {
top: clamp(5.5rem, 12vh, 8rem); top: clamp(5.5rem, 12svh, 8rem);
right: clamp(1.25rem, 5vw, 4rem);
}
/* ── Iluminación: el problema no era la falta de luz, era el exceso ───────
El resplandor de acento entraba al 22% y el charco al 45%: sobre un
producto claro eso lava la foto y tiñe de verde toda la escena. Se baja
el tinte y se sube la caída, para que la luz MODELE en vez de inundar. */
.vit-ambient {
background:
radial-gradient(ellipse 38% 42% at 50% 34%,
color-mix(in srgb, var(--vit-acc) 13%, rgba(255,255,255,0.045)), transparent 66%),
radial-gradient(ellipse 54% 26% at 50% 88%,
color-mix(in srgb, var(--vit-acc) 7%, transparent), transparent 72%);
}
/* Viñeta: hunde las esquinas para que el centro sea el único foco.
Va sobre el fondo y por debajo del escenario (z1, como el ambiente). */
.vitrina-section::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(ellipse 62% 58% at 50% 42%, transparent 42%, rgba(0,0,0,0.55) 100%);
}
/* El charco de acento bajo el frasco: más tenue y más difuso, para que lea
como luz rebotada en el piso y no como un neón encendido debajo. */
.vit-glow {
left: 4%; right: 4%;
bottom: -30px;
height: 54px;
background: radial-gradient(ellipse,
color-mix(in srgb, var(--acc) 26%, transparent) 0%,
color-mix(in srgb, var(--acc) 10%, transparent) 45%,
transparent 72%);
filter: blur(6px);
}
/* La penumbra de las tarjetas laterales era negro plano sobre una foto
clara: daba un gris lechoso, no sombra. Con un azul de sombra y un
degradado que carga hacia fuera, las laterales se HUNDEN en la escena. */
.vit-shade {
background:
linear-gradient(180deg, rgba(3,5,10,0.55) 0%, rgba(3,5,10,0.9) 100%),
#03050A;
}
/* ── Fondo de producto: gris claro en vez de blanco puro ─────────────────
Las fotos vienen con fondo blanco y contra el negro de la escena cantan
como un recorte. `multiply` con un gris claro baja SOLO lo que ya era
blanco: el frasco conserva su color y el fondo se asienta. */
.vit-hit { isolation: isolate; }
.vit-hit::after {
content: '';
position: absolute;
inset: 0;
border-radius: 10px;
background: #E6E6EA;
mix-blend-mode: multiply;
pointer-events: none;
}
/* El reflejo del piso recibe el mismo trato para no delatar el truco */
.vit-reflect { filter: blur(3px) saturate(0.8) brightness(0.9); }
/* La tarjeta central se apoya en un canto suave en vez de flotar recortada */
.vit-card.is-center .vit-hit img {
box-shadow:
0 1px 0 0 rgba(255,255,255,0.5) inset,
0 24px 60px -24px rgba(0,0,0,0.9);
}
@media (max-width: 760px) {
.vit-head { top: clamp(4.5rem, 10vh, 6.5rem); top: clamp(4.5rem, 10svh, 6.5rem); }
.vit-counter { top: clamp(4.5rem, 10vh, 6.5rem); top: clamp(4.5rem, 10svh, 6.5rem); }
.vit-title { font-size: 0.78rem; letter-spacing: 0.16em; }
.vit-title::before { width: 20px; }
}
@media (prefers-reduced-transparency: reduce) {
.vitrina-section::after { background: none; }
}
/* ============================================================================
VITRINA — corrección: rótulo al sistema del sitio + LUZ AL ALZA
============================================================================ */
/* El rótulo usa el token que el sitio ya emplea para rotular secciones
(.section-label: Montserrat 0.7rem / 700 / 0.25em). Estaba en 16px/800,
más grande y más pesado que cualquier otro rótulo de la página.
No se sube a .section-title (Bebas 72px) a propósito: en esta sección el
display ya es el NOMBRE del producto, y dos Bebas colosales en la misma
pantalla se pelean. */
.vit-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(242,239,230,0.82);
}
.vit-title::before { width: clamp(22px, 2.4vw, 34px); }
/* ── LUZ: por encima del punto de partida ────────────────────────────────
Referencia: el original tenía el resplandor al 22% y el charco al 45%.
Aquí van 34% y 62%, con un tercer foco cenital que modela el frasco por
arriba — eso es lo que hacía falta para que la escena se vea iluminada
y no solo teñida. */
.vit-ambient {
height: 86vh; height: 86svh;
background:
/* foco cenital estrecho: la «lámpara» que modela el frasco */
radial-gradient(ellipse 20% 30% at 50% 12%,
rgba(255,255,255,0.16), transparent 70%),
/* halo principal, teñido con el acento del producto */
radial-gradient(ellipse 44% 48% at 50% 34%,
color-mix(in srgb, var(--vit-acc) 34%, rgba(255,255,255,0.1)), transparent 70%),
/* rebote del piso */
radial-gradient(ellipse 62% 32% at 50% 88%,
color-mix(in srgb, var(--vit-acc) 18%, transparent), transparent 74%);
}
/* Charco de acento bajo el frasco: más presente que en el original */
.vit-glow {
left: 2%; right: 2%;
bottom: -32px;
height: 60px;
background: radial-gradient(ellipse,
color-mix(in srgb, var(--acc) 62%, transparent) 0%,
color-mix(in srgb, var(--acc) 26%, transparent) 42%,
transparent 72%);
filter: blur(7px);
}
/* La viñeta se queda, pero solo para cerrar las esquinas: al 0.55 se comía
la luz que acabamos de subir. */
.vitrina-section::after {
background: radial-gradient(ellipse 74% 68% at 50% 42%, transparent 55%, rgba(0,0,0,0.34) 100%);
}
/* Con más luz en la escena, el velo gris puede aflojar: el fondo sigue
siendo gris claro, pero el frasco recupera brillo. */
.vit-hit::after { background: #EFEFF2; }
/* Halo propio de la tarjeta central: el borde del producto se separa del
fondo con luz, no con una línea. */
.vit-card.is-center .vit-hit img {
box-shadow:
0 1px 0 0 rgba(255,255,255,0.65) inset,
0 0 0 1px rgba(255,255,255,0.10),
0 30px 70px -26px rgba(0,0,0,0.9),
0 0 90px -20px color-mix(in srgb, var(--acc, var(--strength)) 45%, transparent);
}
/* Las laterales dejan de ser losas grises: menos velo, para que se lean
como el mismo producto alejándose en la penumbra. */
.vit-shade {
background:
linear-gradient(180deg, rgba(3,5,10,0.42) 0%, rgba(3,5,10,0.82) 100%),
#03050A;
}
/* ============================================================================
VITRINA — la luz, continua
----------------------------------------------------------------------------
El hueco negro bajo el frasco tenía tres causas sumándose:
1. El halo se apagaba al 70% de su radio y el rebote del suelo no
empezaba hasta el 88% de la altura: entre ambos quedaba una banda sin
luz, justo donde se apoya el producto.
2. .vit-ambient arrancaba en top:8% con 86svh de alto, así que su campo
ni siquiera llegaba al fondo de la sección.
3. La viñeta estaba centrada al 42% de altura, o sea que empezaba a
oscurecer precisamente en esa banda.
Se resuelve con UN campo de luz continuo, no con focos sueltos.
============================================================================ */
.vit-ambient {
top: 0;
height: 100%;
background:
/* 1 · cenital estrecho: modela la tapa del frasco */
radial-gradient(ellipse 18% 26% at 50% 10%,
rgba(255,255,255,0.17), transparent 72%),
/* 2 · halo principal: más alto y con caída larga, para que llegue
hasta el piso sin cortarse */
radial-gradient(ellipse 46% 62% at 50% 42%,
color-mix(in srgb, var(--vit-acc) 34%, rgba(255,255,255,0.1)) 0%,
color-mix(in srgb, var(--vit-acc) 14%, transparent) 58%,
transparent 88%),
/* 3 · costura: la capa que rellena lo que antes era el hueco. Ancha,
muy tenue y solapada con las dos vecinas a propósito. */
radial-gradient(ellipse 70% 40% at 50% 66%,
color-mix(in srgb, var(--vit-acc) 16%, transparent) 0%,
color-mix(in srgb, var(--vit-acc) 7%, transparent) 55%,
transparent 85%),
/* 4 · rebote del piso: sube del 88% al 82% para engancharse con la 3 */
radial-gradient(ellipse 76% 30% at 50% 82%,
color-mix(in srgb, var(--vit-acc) 15%, transparent), transparent 78%);
}
/* La viñeta baja su centro y afloja: antes mordía justo la banda del
apoyo. Ahora solo cierra las cuatro esquinas. */
.vitrina-section::after {
background:
radial-gradient(ellipse 86% 82% at 50% 52%, transparent 62%, rgba(0,0,0,0.30) 100%);
}
/* El charco de cada tarjeta se funde con el campo en vez de recortarse
contra él: más bajo, más ancho y con el doble de desenfoque. */
.vit-glow {
left: -6%; right: -6%;
bottom: -40px;
height: 76px;
background: radial-gradient(ellipse,
color-mix(in srgb, var(--acc) 55%, transparent) 0%,
color-mix(in srgb, var(--acc) 22%, transparent) 40%,
transparent 76%);
filter: blur(14px);
}
/* El fondo de la sección era un radial que se cerraba en #050506 al 72%:
ese negro también contribuía al corte. Caída más larga y más suave. */
.vitrina-section {
background:
radial-gradient(ellipse 100% 86% at 50% 34%, #0D0E14 0%, #08090C 58%, #050506 100%);
}
/* ============================================================================
VITRINA — modelo de luz definitivo
----------------------------------------------------------------------------
Se renderizó el campo fuera del navegador para poder verlo, y salieron dos
errores que ninguna medición numérica había delatado:
1. Las capas eran elipses de 70-76% de ancho: repartían el acento por toda
la banda horizontal y dejaban los costados con un verde turbio. Una luz
real detrás de un producto es COMPACTA. Ahora el halo mide 29% de ancho
y los costados quedan negros.
2. `.vit-glow` se pintaba en las CINCO tarjetas, así que había cinco
charcos de color — dos de ellos justo en los costados. Ahora solo lo
lleva la central.
El pico del halo va al 30% de su radio, no al centro: el centro lo tapa el
propio frasco, así que la luz se ve donde de verdad asoma — rodeando la
silueta. Verificado también con el azul de Endurance.
============================================================================ */
/* El campo cubre exactamente la sección: así los % del gradiente son los
mismos que se validaron en el render. */
.vit-ambient {
left: 0;
translate: none;
width: 100%;
top: 0;
height: 100%;
background:
/* cenital: luz que CAE sobre el frasco, solapada con el halo para que
no se lea como un foco flotando aparte */
radial-gradient(ellipse 20% 24% at 50% 20%,
rgba(255,255,255,0.20) 0%,
rgba(255,255,255,0.07) 55%,
transparent 100%),
/* halo: pico al 30% del radio (donde asoma por el borde del frasco) y
cola larga hasta el 100%, para que la elipse no se recorte.
⚠️ El radio HORIZONTAL va en PX, no en %: con 29% el anillo del
pico escalaba con el viewport y en monitores anchos (1920) se
salía por los costados del frasco — se veía una DONA (captura
del cliente 18-ago). 300px ≈ el 29% del ancho donde se validó,
y el pico queda en ~90px: siempre detrás del frasco. */
radial-gradient(ellipse 300px 52% at 50% 42%,
color-mix(in srgb, var(--vit-acc) 30%, transparent) 0%,
color-mix(in srgb, var(--vit-acc) 50%, rgba(255,255,255,0.2)) 30%,
color-mix(in srgb, var(--vit-acc) 30%, transparent) 55%,
color-mix(in srgb, var(--vit-acc) 12%, transparent) 80%,
transparent 100%),
/* rebote del piso, contenido bajo el producto */
radial-gradient(ellipse 25% 11% at 50% 69%,
color-mix(in srgb, var(--vit-acc) 40%, transparent) 0%,
color-mix(in srgb, var(--vit-acc) 16%, transparent) 50%,
transparent 100%);
}
/* Viñeta: cierra las esquinas sin morder la zona del producto */
.vitrina-section::after {
background: radial-gradient(ellipse 75% 79% at 50% 46%,
transparent 53%, rgba(0,0,0,0.45) 100%);
}
/* El charco por tarjeta. Su OPACIDAD la escribe js/app.js en cada frame
(línea ~1359), así que aquí solo va la geometría y el color: una regla
`opacity` en CSS no ganaría nunca al estilo inline. La corrección de que
solo brille el central está en ese JS, no aquí. */
.vit-glow {
left: -2%; right: -2%;
bottom: -34px;
height: 62px;
background: radial-gradient(ellipse,
color-mix(in srgb, var(--acc) 42%, transparent) 0%,
color-mix(in srgb, var(--acc) 16%, transparent) 45%,
transparent 74%);
filter: blur(10px);
}
/* El halo del producto central se ciñe a su silueta: sin el resplandor de
90px que se derramaba hacia las vecinas. */
.vit-card.is-center .vit-hit img {
box-shadow:
0 1px 0 0 rgba(255,255,255,0.65) inset,
0 0 0 1px rgba(255,255,255,0.10),
0 26px 60px -26px rgba(0,0,0,0.92),
0 0 46px -14px color-mix(in srgb, var(--acc, var(--strength)) 40%, transparent);
}
@media (prefers-reduced-transparency: reduce) {
.vitrina-section::after { background: none; }
}
/* ============================================================================
RUTINAS — ficha con desglose (propuesta A)
----------------------------------------------------------------------------
La ficha medía 926px de ancho y el contenido terminaba en el 44%: 515px
muertos a la derecha del botón, con la foto reducida a 94px. Ahora el ancho
se reparte en cuatro columnas con trabajo: foto · identidad · qué incluye ·
compra. El hueco pasa a ser la información que faltaba.
============================================================================ */
.rd-card-btn {
grid-template-columns:
clamp(104px, 11vw, 148px) /* foto */
minmax(0, 1.05fr) /* nombre + claim */
minmax(0, 1fr) /* incluye */
auto; /* compra */
gap: clamp(0.9rem, 1.8vw, 1.9rem);
padding: 1.05rem 1.3rem;
text-align: left;
align-items: center;
}
/* ── Identidad ───────────────────────────────────────────────────────────── */
.rd-card-name { line-height: 1.1; }
.rd-card-sub { margin-top: 0.25rem; }
/* ── Columna «Incluye»: lo que antes era vacío ───────────────────────────── */
.rd-card-incl {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
/* filo de vidrio como separador, no una línea sólida */
padding-left: clamp(0.9rem, 1.6vw, 1.6rem);
border-left: 1px solid rgba(255,255,255,0.09);
}
.rd-incl-label {
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(242,239,230,0.42);
}
.rd-incl-list {
display: flex;
flex-direction: column;
gap: 0.18rem;
min-width: 0;
}
.rd-incl-item {
font-size: 0.76rem;
line-height: 1.45;
color: rgba(242,239,230,0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rd-incl-mas { color: rgba(242,239,230,0.45); }
/* ── Columna de compra ───────────────────────────────────────────────────── */
.rd-card-buy {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.15rem;
flex: none;
}
.rd-price-was {
font-size: 0.68rem;
color: rgba(255,255,255,0.42);
text-decoration: line-through;
}
.rd-price-now {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: clamp(1.05rem, 1.1vw, 1.25rem);
color: #F2EFE6;
line-height: 1.15;
letter-spacing: 0.01em;
}
/* El ahorro son ~$300 por rutina y hoy se comunicaban con un tachado gris
de 10px. Es un argumento de venta, no un pie de página. */
.rd-save {
font-family: ui-monospace, 'SF Mono', Consolas, monospace;
font-size: 0.6rem;
letter-spacing: 0.06em;
color: #8BF08B;
background: rgba(57,255,20,0.11);
box-shadow: inset 0 0 0 1px rgba(57,255,20,0.28);
border-radius: 999px;
padding: 0.18rem 0.55rem;
margin-top: 0.1rem;
white-space: nowrap;
}
/* El CTA era el elemento con menos contraste de la sección siendo el que
más lo necesita: fondo transparente sobre tarjeta oscura. Ahora sólido. */
.rd-card-btn .rd-card-cta {
margin-top: 0.55rem;
padding: 0.5rem 1.15rem;
font-size: 0.66rem;
letter-spacing: 0.14em;
background-image: linear-gradient(180deg, #FFFFFF 0%, #E9E7E1 100%);
background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: var(--edge-solid-light);
color: #0B0C0F;
white-space: nowrap;
}
.rd-card-btn:hover .rd-card-cta {
background-image: linear-gradient(180deg, #FFFFFF 0%, #DEDCD5 100%);
box-shadow: var(--edge-solid-light), 0 8px 22px -10px rgba(0,0,0,0.7);
}
/* ── Rampa: a partir de aquí «Incluye» no cabe sin apretar el nombre ─────── */
@media (max-width: 1280px) {
.rd-card-btn { grid-template-columns: clamp(96px, 12vw, 130px) minmax(0, 1fr) auto; }
.rd-card-incl { display: none; }
}
@media (max-width: 760px) {
.rd-card-btn {
grid-template-columns: 84px minmax(0, 1fr);
row-gap: 0.85rem;
}
.rd-card-buy {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.rd-card-btn .rd-card-cta { margin-top: 0; margin-left: auto; }
}
/* 29px de alto no es un objetivo tactil: el minimo son 44 */
@media (max-width: 760px) {
.rd-card-btn .rd-card-cta {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0 1.25rem;
}
}
/* ============================================================================
HERO — el 1% en azul→verde + frase de marca rotativa
============================================================================ */
/* El «1%» toma los dos colores de línea: azul de Endurance → verde de
Strength. Es el mismo recurso que ya usa el hero de Performance
(.ph-grad), así que la marca habla igual en las dos páginas. */
.hero-1p {
background: linear-gradient(100deg, var(--endurance) 0%, var(--endurance-bright) 42%, var(--strength) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 34px rgba(20,190,160,0.45));
}
/* Con el 1% ya en color, el subrayado verde bajo «todo.» sobraba: dos
acentos en un titular de tres líneas se pelean. */
.hero-phrase strong::after { display: none; }
/* ── La frase rotativa ───────────────────────────────────────────────────── */
.hero-claim {
margin-top: clamp(0.9rem, 1.6vh, 1.4rem);
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: clamp(0.86rem, 0.45vw + 0.76rem, 1.06rem);
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(242,239,230,0.9);
text-shadow: 0 1px 14px rgba(0,0,0,0.6);
/* Alto fijo: las frases miden distinto y sin esto el bloque salta en
cada rotación, empujando lo que tiene debajo. */
min-height: 1.5em;
display: flex;
align-items: center;
}
/* filo de luz corto delante, del azul al verde: ancla la frase al titular */
.hero-claim::before {
content: '';
width: clamp(24px, 2.4vw, 40px);
height: 2px;
margin-right: 0.85rem;
flex: none;
border-radius: 2px;
background: linear-gradient(90deg, var(--endurance), var(--strength));
}
.hero-claim .rt {
display: inline-flex;
flex-wrap: wrap;
white-space: nowrap;
}
@media (max-width: 760px) {
.hero-claim {
font-size: 0.78rem;
letter-spacing: 0.1em;
min-height: 2.6em; /* en móvil alguna frase cae a dos líneas */
align-items: flex-start;
}
.hero-claim::before { margin-top: 0.55em; }
.hero-claim .rt { white-space: normal; }
}
/* ============================================================================
HERO — corrección del «1%» invisible
----------------------------------------------------------------------------
Dos cosas lo borraban a la vez:
1. `filter: drop-shadow()` sobre el MISMO elemento que lleva
`background-clip: text` crea un contexto de composición nuevo y el
recorte del degradado al glifo deja de pintarse.
2. `.hero-phrase` declara `text-shadow: 0 2px 30px rgba(0,0,0,.45)` y se
hereda: con el relleno en transparente, lo único que quedaba era esa
sombra negra sobre fondo oscuro. Invisible sobre invisible.
La técnica correcta es separar las capas: el hijo recorta el degradado,
el padre aplica el resplandor sobre el resultado ya pintado.
============================================================================ */
.hero-1p-wrap {
display: inline-block;
filter: drop-shadow(0 0 28px rgba(20,190,160,0.45));
}
.hero-1p {
display: inline-block; /* un inline puro puede quedarse sin caja de fondo */
background-image: linear-gradient(100deg, var(--endurance) 0%, var(--endurance-bright) 42%, var(--strength) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
text-shadow: none; /* la sombra heredada tapaba el relleno */
filter: none; /* el drop-shadow vive en el wrapper */
}
/* Respaldo: si el navegador no soporta el recorte al texto, el 1% se pinta
en cian sólido en vez de desaparecer. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.hero-1p {
background-image: none;
color: var(--endurance-bright);
-webkit-text-fill-color: var(--endurance-bright);
}
}
/* ============================================================================
HERO — a la retícula del sitio
----------------------------------------------------------------------------
El navbar y todas las secciones viven en una caja de 1280px centrada. El
hero no: se pegaba a 64px de los bordes del viewport. A 1796px eso dejaba
al titular empezando 194px a la IZQUIERDA del navbar y 989px de hueco
hasta el bloque derecho. Se ancla al mismo carril: por debajo de 1280px
no cambia nada, por encima deja de separarse.
============================================================================ */
.hero-left { left: max(clamp(1.5rem, 5vw, 4rem), calc(50vw - 640px)); }
.hero-desc { right: max(clamp(1.5rem, 5vw, 4rem), calc(50vw - 640px)); }
.hero-strip { padding-left: max(clamp(1.5rem, 5vw, 4rem), calc(50vw - 640px));
padding-right: max(clamp(1.5rem, 5vw, 4rem), calc(50vw - 640px)); }
/* El titular arrancaba al 48% de la altura: la mitad de arriba, vacía. Sube
sin invadir el vídeo, que sigue siendo el protagonista. */
.hero-left { bottom: clamp(7rem, 17vh, 11rem); }
.hero-desc { bottom: clamp(7rem, 17vh, 11rem); }
/* En pantallas anchas el titular topaba en 6.2rem y se quedaba pequeño
frente al lienzo. Ahora crece con la caja, sin pasarse. */
@media (min-width: 1440px) {
.hero-phrase { font-size: clamp(6.2rem, 5.2vw, 7.6rem); }
}
/* 5.2vw no superaba el tope anterior (99.2px), asi que el titular no crecia
en pantallas anchas. Con la caja de 1280px hay sitio de sobra. */
@media (min-width: 1440px) {
.hero-phrase { font-size: clamp(6.2rem, 6.6vw, 8.4rem); }
}
/* ============================================================================
HERO — el «1%» en azul y verde, SIN background-clip
----------------------------------------------------------------------------
Tercer intento y último: el recorte del degradado al texto seguía sin
pintarse porque el `filter` del contenedor padre también rompe el clip,
igual que lo hacía en el propio span. En vez de seguir peleando con esa
técnica —que además falla distinto en cada navegador— se pinta con dos
colores sólidos: el «1» en azul de Endurance, el «%» en verde de Strength.
Es literalmente lo pedido (el uno en verde y azul) y no puede fallar:
no hay recorte, no hay relleno transparente, no hay filtro de por medio.
============================================================================ */
.hero-1p {
/* se neutraliza todo lo que venía del intento anterior */
display: inline;
background: none;
background-image: none;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: currentColor;
filter: none;
}
.h1p-num {
color: var(--endurance-bright); /* cian de Endurance */
-webkit-text-fill-color: var(--endurance-bright);
text-shadow: 0 0 26px rgba(34,211,238,0.45);
}
.h1p-pct {
color: var(--strength); /* verde de Strength */
-webkit-text-fill-color: var(--strength);
text-shadow: 0 0 26px rgba(57,255,20,0.4);
/* el símbolo pesa ópticamente más que la cifra a este tamaño */
font-size: 0.82em;
margin-left: 0.02em;
}
/* ============================================================================
HERO — el titular en un solo renglón
----------------------------------------------------------------------------
Medido en el navegador: «El 1% lo cambia todo.» en Bebas ocupa 7,458 px de
ancho por cada px de cuerpo. El espacio libre entre el borde del carril y
el bloque derecho va de 812 px (a 1280) a 940 px (a 1920), así que el tope
se fija en 7,6rem: 121,6 × 7,458 = 907 px, por debajo del hueco más
estrecho de ese rango. Por eso no se parte ni se come la descripción.
Por debajo de 1280 px NO se fuerza una línea: el cuerpo tendría que bajar
tanto que el titular dejaría de ser titular. Ahí fluye en dos o tres
líneas, que es lo que hacía antes con los que ya existía en el marcado— toma el verde de Strength. Así la
frase cierra en el mismo acento con que abre, sin degradado sobre el texto
(el énfasis lo llevan el color de marca y el peso, no un lavado).
============================================================================ */
/* revertir la rotativa */
.hero-claim .rt {
background-image: none;
color: rgba(242,239,230,0.9);
-webkit-text-fill-color: rgba(242,239,230,0.9);
}
/* el cierre del titular, en verde Strength */
.hero-phrase strong {
color: var(--strength);
-webkit-text-fill-color: var(--strength);
text-shadow: 0 0 30px rgba(57,255,20,0.35);
}
/* «TODO.» vuelve a crema: dos acentos verdes en la misma línea (el % y el
cierre) competían entre sí. El titular se queda con un solo punto de
color, el 1%. */
.hero-phrase strong {
color: #F2EFE6;
-webkit-text-fill-color: #F2EFE6;
text-shadow: none;
}
/* ============================================================================
HERO — color en todo el titular + la frase de abajo con presencia
----------------------------------------------------------------------------
El titular recorre el espectro de marca de izquierda a derecha: «EL» en
crema (entrada neutra), el 1% ya en cian→verde, y «LO CAMBIA TODO.» cierra
en cian claro. Es el mismo puente Endurance→Strength, pero repartido en
toda la línea en vez de concentrado en dos glifos.
La frase rotativa sube de rango: más cuerpo, más peso y el degradado
cian→verde, para que sostenga la mirada después del titular en vez de
pasar como pie de foto.
============================================================================ */
/* «LO CAMBIA TODO.» — el texto que rodea al 1% */
.hero-phrase { color: #CFF3FF; }
.hero-phrase strong {
color: #A8FF8F;
-webkit-text-fill-color: #A8FF8F;
text-shadow: 0 0 34px rgba(57,255,20,0.3);
}
/* La frase de abajo: de secundaria a réplica con voz propia */
.hero-claim {
font-size: clamp(1rem, 0.6vw + 0.86rem, 1.32rem);
font-weight: 800;
letter-spacing: 0.16em;
}
.hero-claim .rt {
background-image: linear-gradient(90deg, var(--endurance-bright) 0%, #7CE97C 52%, var(--strength) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.hero-claim .rt { background-image: none; color: #7CE97C; -webkit-text-fill-color: #7CE97C; }
}
/* ============================================================================
HERO — la frase de abajo, en color sólido
----------------------------------------------------------------------------
El degradado recortado al texto NO funciona aquí: el rotador parte la
frase en un por carácter, y esos hijos heredan el relleno
transparente del padre pero no su degradado — resultado, letras
invisibles. Tercer intento de background-clip en este proyecto que se
rompe por lo mismo. Color sólido, glow para que resalte, y punto.
============================================================================ */
.hero-claim .rt,
.hero-claim .rt-word,
.hero-claim .rt-char {
background-image: none !important;
color: #A8FF8F !important;
-webkit-text-fill-color: #A8FF8F !important;
}
.hero-claim {
text-shadow: 0 0 26px rgba(57,255,20,0.42);
}
/* ============================================================================
HERO — solo colores de identidad
----------------------------------------------------------------------------
Fuera los pasteles inventados (#CFF3FF, #A8FF8F, var(--endurance-bright)): eran derivados
que no existen en la paleta. Aquí solo los tokens de marca:
--endurance var(--endurance) (azul Endurance)
--strength var(--strength) (verde Strength)
crema #F2EFE6 (texto base)
El titular en crema con el 1% partido en los dos colores de línea, y la
frase de abajo en verde Strength. Tres valores, todos de la marca.
============================================================================ */
.hero-phrase { color: #F2EFE6; }
.hero-phrase strong {
color: #F2EFE6;
-webkit-text-fill-color: #F2EFE6;
text-shadow: none;
}
.h1p-num {
color: var(--endurance);
-webkit-text-fill-color: var(--endurance);
text-shadow: 0 0 30px var(--endurance-glow-strong);
}
.h1p-pct {
color: var(--strength);
-webkit-text-fill-color: var(--strength);
text-shadow: 0 0 30px var(--strength-glow-strong);
}
.hero-claim .rt,
.hero-claim .rt-word,
.hero-claim .rt-char {
color: var(--strength) !important;
-webkit-text-fill-color: var(--strength) !important;
}
.hero-claim { text-shadow: 0 0 24px var(--strength-glow); }
/* ============================================================================
HERO — el 1% con degradado de marca
----------------------------------------------------------------------------
El recorte del degradado al texto exige un elemento SIN hijos y SIN filter:
las tres veces que falló antes fue por eso (filter en el span, filter en el
wrapper, e hijos heredando el relleno transparente sin el degradado). Aquí
el «1%» vuelve a ser un span de texto plano, así que el clip funciona.
Verde Strength arriba → azul Endurance abajo: las dos líneas en un gesto.
El glow va en text-shadow del PADRE (el titular), no aquí: sobre relleno
transparente la sombra propia se dibujaría como un fantasma del glifo.
============================================================================ */
.hero-1p {
display: inline-block;
background-image: linear-gradient(180deg, #5BFF3D 0%, var(--strength) 38%, #12C9A8 72%, var(--endurance) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
text-shadow: none;
filter: none;
}
/* Respaldo: si el navegador no recorta al texto, verde sólido — nunca invisible */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.hero-1p { background-image: none; color: var(--strength); -webkit-text-fill-color: var(--strength); }
}
/* ============================================================================
HERO — la frase rota de color con cada cambio
----------------------------------------------------------------------------
js/rotating-text.js escribe data-tono (0,1,2) en cada rotación; aquí se
traduce a los tres colores de línea de la marca:
0 · azul --endurance (Endurance)
1 · verde --strength (Strength)
2 · lila --w-lavender (Wellness)
Ciclo de 3 sobre 5 frases, así que el color no se ata a una frase concreta.
El tono viaja por variable, así que el halo lo sigue solo.
============================================================================ */
.hero-claim .rt { --tono: var(--strength); }
.hero-claim .rt[data-tono="0"] { --tono: var(--endurance); }
.hero-claim .rt[data-tono="1"] { --tono: var(--strength); }
.hero-claim .rt[data-tono="2"] { --tono: var(--w-lavender); }
.hero-claim .rt,
.hero-claim .rt-word,
.hero-claim .rt-char {
color: var(--tono) !important;
-webkit-text-fill-color: var(--tono) !important;
transition: color 0.45s ease, opacity 0.4s ease;
}
.hero-claim {
text-shadow: 0 0 26px color-mix(in srgb, var(--tono, var(--strength)) 42%, transparent);
transition: text-shadow 0.45s ease;
}
/* ============================================================================
HERO — frase rotativa: fundido limpio, sin brinco
----------------------------------------------------------------------------
Un solo elemento de texto (ya no un span por carácter). Se apaga, se
cambia texto y tono con el texto invisible, y se enciende: el color nunca
salta sobre algo visible. Sin transform: nada se desplaza.
============================================================================ */
.hc-line {
--tono: var(--strength);
display: inline-block;
opacity: 1;
transition: opacity 0.3s ease;
color: var(--tono);
-webkit-text-fill-color: var(--tono);
}
.hc-line.is-out { opacity: 0; }
.hc-line[data-tono="0"] { --tono: var(--endurance); }
.hc-line[data-tono="1"] { --tono: var(--strength); }
.hc-line[data-tono="2"] { --tono: var(--w-lavender); }
/* El halo acompaña al tono; también se apaga con el fundido, así que no
parpadea por su cuenta. */
.hero-claim {
text-shadow: none;
}
.hc-line {
text-shadow: 0 0 26px color-mix(in srgb, var(--tono) 40%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.hc-line { transition: none; }
}
/* ============================================================================
HERO — el titular con degradado en movimiento continuo
----------------------------------------------------------------------------
El titular vuelve a ser texto plano (sin span ni strong): el recorte del
degradado al texto no llega a los hijos, y con hijos las letras salen
invisibles. Ya nos costó tres intentos aprenderlo.
La banda mide 250% del ancho y se desplaza en bucle, así que el azul
Endurance y el verde Strength cruzan la frase de derecha a izquierda sin
parar. Las paradas crema en los extremos hacen que el color se lea como
una LUZ que recorre el texto, no como un titular teñido.
`background-position` no es compositable, pero aquí el área es un solo
renglón de texto y el ciclo dura 9s: coste bajo y constante. `will-change`
lo promueve a su propia capa para que no repinte a sus vecinos.
============================================================================ */
.hero-phrase--una {
background-image: linear-gradient(100deg,
#F2EFE6 0%,
#F2EFE6 22%,
var(--endurance) 34%,
var(--endurance-bright) 42%,
var(--strength) 52%,
#F2EFE6 64%,
#F2EFE6 100%);
background-size: 250% 100%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
/* con relleno transparente, la sombra heredada se dibujaría como un
fantasma del glifo */
text-shadow: none;
animation: heroSheen 9s linear infinite;
/* ⚠️ SIN will-change: promover un elemento con background-clip:text a su
propia capa ROMPE el recorte en Safari/iOS y el titular sale
transparente (capturas del cliente 18-ago). El repintado de un
renglón de texto por frame es barato; la capa no. */
}
@keyframes heroSheen {
from { background-position: 160% 0; }
to { background-position: -60% 0; }
}
/* Respaldo: sin recorte al texto, crema sólido — nunca invisible */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.hero-phrase--una {
background-image: none;
color: #F2EFE6;
-webkit-text-fill-color: #F2EFE6;
animation: none;
}
}
/* Movimiento reducido: el degradado se queda quieto, con el acento puesto
sobre el 1% en vez de recorrer. */
@media (prefers-reduced-motion: reduce) {
.hero-phrase--una {
animation: none;
background-position: 42% 0;
}
}
/* ============================================================================
CORRECCIÓN — el recorrido se salía del rango y borraba el titular
----------------------------------------------------------------------------
Con `background-size: 250%`, los porcentajes de background-position van de
0% (banda pegada al borde izquierdo) a 100% (pegada al derecho); en ese
rango la banda SIEMPRE cubre el elemento. Yo animaba de 160% a -60%: fuera
de rango la banda deja de solapar el texto y, sin fondo que recortar, las
letras salen transparentes. De ahí que solo se viera «DO.».
Rango correcto + repeat como cinturón de seguridad.
============================================================================ */
.hero-phrase--una {
background-repeat: repeat;
animation: heroSheenFix 9s linear infinite;
}
@keyframes heroSheenFix {
from { background-position: 100% 0; }
to { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-phrase--una { animation: none; background-position: 50% 0; }
}
/* ════ CUARTA LECCIÓN de este sheen: en iOS, animar background-position
sobre background-clip:text es poco fiable aunque no haya capa propia
(WebKit puede no repintar o dejar el glifo sin fondo → invisible).
En iOS la banda se queda QUIETA en la posición de acento — el mismo
estado aprobado de reduced-motion. El titular JAMÁS puede depender de
que una animación funcione para ser visible. ════ */
@supports (-webkit-touch-callout: none) {
.hero-phrase--una { animation: none; background-position: 50% 0; }
}
/* ============================================================================
ELIGE TU LÍNEA — dos bandas apiladas, contenido en zigzag
----------------------------------------------------------------------------
Antes: dos mitades verticales de 50% de ancho. Problemas de esa forma:
· «Elige tu línea» se repetía en los dos lados siendo una sola instrucción
· el sello «Dos mundos, una marca» caía en la costura y no se leía
· las dos mitades pesaban igual: presentaban, no ayudaban a decidir
Ahora: dos bandas horizontales a todo el ancho, apiladas — la geometría que
la versión móvil ya usaba y estaba probada. El contenido alterna de lado
(Wellness a la izquierda, Performance a la derecha), así que el ojo baja en
zigzag en vez de comparar dos columnas gemelas. Las puertas entran desde
lados opuestos, que refuerza ese vaivén.
============================================================================ */
@media (min-width: 821px) {
/* Bandas horizontales: mismo esqueleto que ya usaba el móvil */
.door { width: 100%; height: 50%; }
.door-w { left: 0; top: 0; }
.door-p { left: 0; top: 50%; }
/* ── El zigzag ───────────────────────────────────────────────────────── */
.ls-content {
left: max(clamp(1.5rem, 6.5vw, 7.5rem), calc(50vw - 640px));
right: auto;
align-items: flex-start;
text-align: left;
max-width: 46%;
}
.door-p .ls-content {
left: auto;
right: max(clamp(1.5rem, 6.5vw, 7.5rem), calc(50vw - 640px));
align-items: flex-end;
text-align: right;
}
/* El velo cae hacia el lado donde vive el texto, para que la foto respire
por el contrario: es lo que hace legible cada banda sin tapar la imagen. */
.door-w .ls-veil {
background: linear-gradient(90deg, rgba(248,246,251,0.86) 0%, rgba(248,246,251,0.42) 42%, transparent 76%);
}
.door-p .ls-veil {
background: linear-gradient(270deg, rgba(5,8,7,0.88) 0%, rgba(5,8,7,0.46) 42%, transparent 76%);
}
/* La costura pasa de vertical a horizontal: ahora las bandas se encuentran
en el medio de la altura, no del ancho. */
.ls-seam {
top: 50%; bottom: auto;
left: 0; right: 0;
width: auto; height: 2px;
translate: 0 -50%;
background: linear-gradient(to right,
rgba(201,169,240,0), rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.9) 70%, rgba(91,255,138,0));
}
/* El sello ya no compite con ningún texto: los dos bloques están en los
extremos opuestos y el centro queda libre. */
.ls-union {
left: 50%;
translate: -50% -50%;
}
/* La banda es la mitad de alta que antes: el titular baja de escala para
no comerse su propia caja. */
.ls-title { font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 0.96; }
}
/* Bajo 821px se mantiene la pila que ya existía, pero heredando el zigzag
sería ilegible en una columna estrecha: ahí ambos van a la izquierda. */
@media (max-width: 820px) {
.door-p .ls-content { align-items: flex-start; text-align: left; }
}
/* El sello vive justo sobre la costura, mitad en el fondo claro y mitad en
el oscuro: sin una superficie propia no hay color de texto que funcione en
los dos. Cápsula oscura, que es lo que lo hace legible en ambos lados. */
@media (min-width: 821px) {
.ls-union {
background: rgba(8,9,11,0.72);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(255,255,255,0.1);
border-radius: 999px;
padding: 0.5rem 1.4rem;
color: rgba(242,239,230,0.92);
}
}
/* ============================================================================
ELIGE TU LÍNEA — banda partida, sin pantalla completa (propuesta H)
----------------------------------------------------------------------------
Se retira el mecanismo de cortina: la sección medía 240vh con `.doors`
clavado en sticky, así que secuestraba dos pantallas y media de scroll para
una decisión de un clic. Ahora es una sección normal que pasa al hacer
scroll, conservando lo que sí funcionaba: el corte a sangre de lado a lado,
el contraste claro/oscuro y el zigzag (Wellness a la izquierda, Performance
a la derecha).
Se mantienen intactos el marcado y los enlaces: solo cambia la geometría.
============================================================================ */
/* La sección deja de ser un riel de 240vh */
body[data-page="home"] .lines-section {
height: auto;
padding: 0;
background: transparent;
scroll-margin-top: 96px;
}
/* El escenario deja de clavarse: banda de altura contenida, a sangre */
body[data-page="home"] .doors,
.doors {
position: relative;
top: auto;
height: clamp(300px, 38vh, 380px);
min-height: 0;
overflow: hidden;
}
/* Vuelven a ser dos mitades verticales, ahora dentro de la banda */
.door { width: 50%; height: 100%; }
.door-w { left: 0; top: 0; }
.door-p { left: 50%; top: 0; }
/* Sin cortina: las puertas ya no entran deslizándose desde fuera. Se anula
la animación de scroll-timeline para que no queden desplazadas. */
body[data-page="home"] .door-w,
body[data-page="home"] .door-p {
animation: none !important;
transform: none !important;
}
/* ── El zigzag dentro de cada mitad ──────────────────────────────────────── */
.ls-content {
position: absolute;
left: clamp(1.25rem, 4vw, 3rem);
right: auto;
top: 50%;
translate: 0 -50%;
align-items: flex-start;
text-align: left;
max-width: 84%;
gap: 0.6rem;
}
.door-p .ls-content {
left: auto;
right: clamp(1.25rem, 4vw, 3rem);
align-items: flex-end;
text-align: right;
}
/* Escala para una banda de ~340px: el titular ya no dispone de media pantalla */
.ls-title { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 0.98; }
.ls-eyebrow { font-size: 0.62rem; letter-spacing: 0.24em; }
.ls-sub { font-size: 0.82rem; }
.ls-cta { padding: 0.7rem 1.4rem; font-size: 0.68rem; }
/* El velo cae hacia el lado del texto; la foto respira por el contrario */
.door-w .ls-veil {
background: linear-gradient(90deg, rgba(248,246,251,0.9) 0%, rgba(248,246,251,0.45) 48%, transparent 82%);
}
.door-p .ls-veil {
background: linear-gradient(270deg, rgba(5,8,7,0.9) 0%, rgba(5,8,7,0.48) 48%, transparent 82%);
}
/* La costura vuelve a ser vertical: las mitades se encuentran en el centro
del ancho. Se queda quieta (ya no hay animación que la encienda). */
.ls-seam {
top: 0; bottom: 0;
left: 50%; right: auto;
width: 2px; height: auto;
translate: -50% 0;
opacity: 1 !important;
background: linear-gradient(to bottom,
rgba(201,169,240,0), rgba(255,255,255,0.85) 28%, rgba(255,255,255,0.85) 72%, rgba(91,255,138,0));
}
/* El sello se sube al borde superior de la costura: en el centro tapaba el
encuentro de los dos titulares. */
.ls-union {
top: 18px;
left: 50%;
translate: -50% 0;
opacity: 1 !important;
background: rgba(8,9,11,0.74);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.26), inset 0 0 0 1px rgba(255,255,255,0.1);
border-radius: 999px;
padding: 0.42rem 1.1rem;
color: rgba(242,239,230,0.9);
font-size: 0.58rem;
}
/* ── Móvil: las dos mitades se apilan y el zigzag se apaga ───────────────── */
@media (max-width: 820px) {
.doors { height: auto; }
.door { position: relative; width: 100%; height: clamp(210px, 34vh, 260px); left: auto; top: auto; }
.door-p { left: auto; top: auto; }
.door-p .ls-content { left: clamp(1.25rem, 4vw, 3rem); right: auto; align-items: flex-start; text-align: left; }
.ls-seam { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 2px; translate: 0 -50%;
background: linear-gradient(to right, rgba(201,169,240,0), rgba(255,255,255,0.85) 28%, rgba(255,255,255,0.85) 72%, rgba(91,255,138,0)); }
.ls-union { top: 50%; translate: -50% -50%; }
.door-w .ls-veil { background: linear-gradient(180deg, rgba(248,246,251,0.86), rgba(248,246,251,0.4) 55%, transparent 88%); }
.door-p .ls-veil { background: linear-gradient(180deg, rgba(5,8,7,0.86), rgba(5,8,7,0.42) 55%, transparent 88%); }
}
/* La sección era transparente a propósito: con la cortina, el hueco entre
las puertas dejaba ver el hero clavado detrás. Sin cortina, esa
transparencia deja la banda flotando sobre el vídeo. Fondo propio y aire
arriba y abajo — la banda sigue a sangre en horizontal. */
body[data-page="home"] .lines-section {
background:
radial-gradient(ellipse 60% 45% at 18% 20%, rgba(123,94,167,0.14) 0%, transparent 55%),
radial-gradient(ellipse 55% 50% at 85% 80%, rgba(14,165,233,0.12) 0%, transparent 55%),
linear-gradient(180deg, #060606 0%, #0A0A0C 50%, #060606 100%);
padding: clamp(3.5rem, 7vh, 6rem) 0;
}
/* ============================================================================
ELIGE TU LÍNEA — se retira el mínimo de pantalla completa
----------------------------------------------------------------------------
Medido: la sección ocupaba 720px de alto para una banda de 300 → 364px de
hueco muerto debajo. La causa era `.home-block { min-height: 100svh }`, que
pertenece al sistema de secciones a pantalla completa del que esta sección
acaba de salir. Al quitar el mínimo, la sección mide lo que mide su
contenido: banda + aire.
También se retira el `scroll-snap-align`, que anclaba el scroll a un bloque
que ya no ocupa una pantalla y hacía saltar la página.
============================================================================ */
body[data-page="home"] .lines-section.home-block {
min-height: 0;
height: auto;
display: block;
scroll-snap-align: none;
}
/* ============================================================================
ELIGE TU LÍNEA — módulo a pantalla completa, líneas contenidas
----------------------------------------------------------------------------
La sección vuelve a ocupar una pantalla, pero las dos líneas dejan de ser
dos paredes a sangre: ahora son dos piezas dentro del carril de 1280px, con
encabezado arriba y aire alrededor. El módulo llena la pantalla; el
contenido respira dentro de él.
============================================================================ */
body[data-page="home"] .lines-section.home-block {
min-height: 100vh; min-height: 100svh;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1.6rem, 3.4vh, 2.8rem);
padding: clamp(5rem, 10vh, 7rem) clamp(1.5rem, 5vw, 4rem);
scroll-snap-align: start;
}
/* ── Encabezado del módulo ───────────────────────────────────────────────── */
.lines-head {
width: 100%;
max-width: 1280px;
text-align: center;
}
.lines-title {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: clamp(2.2rem, 4.4vw, 3.6rem);
line-height: 1;
letter-spacing: 0.015em;
text-transform: uppercase;
color: #F2EFE6;
}
.lines-sub {
margin-top: 0.5rem;
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
font-size: 0.68rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: rgba(242,239,230,0.5);
}
/* ── Las dos líneas: piezas contenidas, no paredes ───────────────────────── */
body[data-page="home"] .doors,
.doors {
position: relative;
top: auto;
width: 100%;
max-width: 1280px;
height: clamp(300px, 44vh, 420px);
min-height: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(0.9rem, 1.6vw, 1.5rem);
overflow: visible;
}
.door {
position: relative;
left: auto; top: auto;
width: auto; height: 100%;
border-radius: 22px;
overflow: hidden;
transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease;
}
.door-w, .door-p { left: auto; top: auto; }
/* Sin cortina: se anula la animación de scroll que las traía desde fuera */
body[data-page="home"] .door-w,
body[data-page="home"] .door-p {
animation: none !important;
transform: none !important;
}
@media (hover: hover) and (pointer: fine) {
.door:hover { transform: translateY(-6px) !important; }
.door-w:hover { box-shadow: 0 26px 60px -30px rgba(200,180,216,0.7); }
.door-p:hover { box-shadow: 0 26px 60px -30px rgba(57,255,20,0.5); }
}
/* Contenido de cada pieza, abajo a la izquierda de SU tarjeta */
.ls-content {
position: absolute;
left: clamp(1.25rem, 2.6vw, 2.2rem);
right: clamp(1.25rem, 2.6vw, 2.2rem);
top: auto;
bottom: clamp(1.25rem, 2.6vw, 2.2rem);
translate: none;
align-items: flex-start;
text-align: left;
max-width: none;
gap: 0.55rem;
}
.door-p .ls-content { left: clamp(1.25rem, 2.6vw, 2.2rem); right: clamp(1.25rem, 2.6vw, 2.2rem); align-items: flex-start; text-align: left; }
.ls-title { font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 0.98; }
.ls-eyebrow { font-size: 0.6rem; letter-spacing: 0.24em; }
/* única línea de apoyo tras la poda de pills/contador: medio punto más */
.ls-sub { font-size: 0.86rem; max-width: 34ch; }
.ls-cta { padding: 0.7rem 1.35rem; font-size: 0.66rem; }
/* El velo sube desde el pie de cada tarjeta: es donde vive el texto */
.door-w .ls-veil { background: linear-gradient(0deg, rgba(248,246,251,0.94) 0%, rgba(248,246,251,0.5) 42%, transparent 78%); }
.door-p .ls-veil { background: linear-gradient(0deg, rgba(5,8,7,0.94) 0%, rgba(5,8,7,0.52) 42%, transparent 78%); }
/* Con dos piezas separadas por un hueco no hay costura que encender, y el
sello ya vive en el encabezado del módulo. */
.ls-seam, .ls-union { display: none !important; }
/* ── Móvil: las dos piezas se apilan ─────────────────────────────────────── */
@media (max-width: 820px) {
body[data-page="home"] .doors,
.doors {
grid-template-columns: 1fr;
height: auto;
}
.door { height: clamp(200px, 30vh, 250px); }
body[data-page="home"] .lines-section.home-block { min-height: 0; padding: 4rem 1.25rem; }
}
/* ============================================================================
ELIGE TU LÍNEA — realce y nada más
----------------------------------------------------------------------------
Un solo gesto: la línea señalada se ADELANTA y BRILLA. La otra se queda
exactamente como está — no se atenúa, no se encoge, no compite. Sin capas
superpuestas ni efectos encadenados: es la respuesta al «solo varía así».
`scale` en vez de `translateY`: subir es un salto, crecer es acercarse.
El z-index sube para que el crecimiento pase por encima de la vecina y no
quede recortado contra ella.
============================================================================ */
.door {
transform: none;
z-index: 1;
transition:
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s ease,
filter 0.3s ease; /* 0.42s quedaba fuera del rango premium para hover de cards */
}
@media (hover: hover) and (pointer: fine) {
.door:hover,
.door:focus-visible {
transform: scale(1.035) !important;
z-index: 2;
filter: brightness(1.09) saturate(1.06);
}
/* El halo toma el color de su propia línea: es el brillo, no un borde */
.door-w:hover,
.door-w:focus-visible {
box-shadow:
0 30px 70px -34px rgba(0,0,0,0.9),
0 0 60px -12px rgba(200,180,216,0.55);
}
.door-p:hover,
.door-p:focus-visible {
box-shadow:
0 30px 70px -34px rgba(0,0,0,0.9),
0 0 60px -12px rgba(57,255,20,0.45);
}
}
/* Sin movimiento: solo el brillo, que es lo que informa */
@media (prefers-reduced-motion: reduce) {
.door { transition: filter 0.3s ease, box-shadow 0.3s ease; }
.door:hover, .door:focus-visible { transform: none !important; }
}
/* La regla que anula la cortina —`body[data-page="home"] .door-p { transform:
none !important }`— tiene más especificidad (0,2,1) que `.door:hover`
(0,2,0), así que ganaba y el scale nunca llegaba a aplicarse. Misma
especificidad + posterior en la hoja = gana el hover. */
@media (hover: hover) and (pointer: fine) {
body[data-page="home"] .door:hover,
body[data-page="home"] .door:focus-visible {
transform: scale(1.035) !important;
}
}
@media (prefers-reduced-motion: reduce) {
body[data-page="home"] .door:hover,
body[data-page="home"] .door:focus-visible { transform: none !important; }
}
/* ============================================================================
ELIGE TU LÍNEA — gris de fondo, color por línea y tarjetas con contenido
============================================================================ */
/* ── 1 · El fondo deja de ser negro ──────────────────────────────────────────
Era casi #060606 con dos manchas de color al 12%: leía como un agujero
entre dos secciones. Un grafito real separa la sección del negro del hero
y del negro de la vitrina, y de paso las tarjetas ganan borde por contraste
en vez de necesitar una línea. */
body[data-page="home"] .lines-section.home-block {
background:
radial-gradient(ellipse 55% 50% at 16% 18%, rgba(200,180,216,0.16) 0%, transparent 58%),
radial-gradient(ellipse 55% 55% at 86% 82%, rgba(14,165,233,0.14) 0%, transparent 58%),
linear-gradient(180deg, #14151A 0%, #1B1D23 48%, #14151A 100%);
}
/* ── 2 · Los botones, vidrio del color de su línea ───────────────────────── */
.ls-cta {
border: none;
border-radius: 999px;
-webkit-backdrop-filter: blur(20px) saturate(190%);
backdrop-filter: blur(20px) saturate(190%);
background-image: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 100%);
/* translate en la lista: el lift -2px del hover de la puerta saltaba en
seco porque esta redefinición (la ganadora) lo había dejado fuera */
transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, translate 0.2s ease;
}
/* Wellness: lila, su color de línea */
.door-w .ls-cta {
background-color: rgba(200,180,216,0.30);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.7),
inset 0 -1px 0 0 rgba(60,40,80,0.18),
inset 0 0 0 1px rgba(150,110,190,0.55);
color: #2E2140;
}
.door-w:hover .ls-cta {
background-color: rgba(200,180,216,0.55);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.85),
inset 0 0 0 1px rgba(150,110,190,0.85),
0 10px 26px -12px rgba(150,110,190,0.7);
}
/* Performance: azul Endurance a verde Strength, los dos a la vez */
.door-p .ls-cta {
background-color: rgba(14,165,233,0.26);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.4),
inset 0 -1px 0 0 rgba(0,0,0,0.3),
inset 0 0 0 1px rgba(57,255,20,0.6);
color: #E9FFE2;
}
.door-p:hover .ls-cta {
background-color: rgba(14,165,233,0.44);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.55),
inset 0 0 0 1px rgba(57,255,20,0.95),
0 10px 28px -12px rgba(57,255,20,0.6);
color: #FFFFFF;
}
/* ── 3 · Contenido: la tarjeta tenía tres líneas y mucho aire ────────────── */
.ls-sub {
font-size: 0.82rem;
line-height: 1.55;
max-width: 30ch;
}
.door-w .ls-sub { color: rgba(42,35,51,0.78); }
.door-p .ls-sub { color: rgba(234,246,255,0.72); }
/* Los atributos pasan de ser una lista con puntos a piezas propias */
.ls-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ls-tag {
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 999px;
padding: 0.3rem 0.65rem;
white-space: nowrap;
}
.door-w .ls-tag {
color: #4A3A5E;
background: rgba(255,255,255,0.55);
box-shadow: inset 0 0 0 1px rgba(90,60,120,0.24);
}
.door-p .ls-tag {
color: rgba(234,246,255,0.85);
background: rgba(255,255,255,0.08);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
/* El dato: cuántas categorías hay detrás de cada línea */
.ls-meta {
font-family: ui-monospace, 'SF Mono', Consolas, monospace;
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.door-w .ls-meta { color: rgba(42,35,51,0.5); }
.door-p .ls-meta { color: rgba(234,246,255,0.45); }
/* Con cinco elementos, la tarjeta necesita más alto y menos hueco entre líneas */
body[data-page="home"] .doors,
.doors { height: clamp(360px, 50vh, 460px); }
.ls-content { gap: 0.5rem; }
.ls-cta { margin-top: 0.35rem; }
/* El velo sube un punto: ahora hay más texto que sostener */
.door-w .ls-veil { background: linear-gradient(0deg, rgba(248,246,251,0.96) 0%, rgba(248,246,251,0.62) 52%, transparent 88%); }
.door-p .ls-veil { background: linear-gradient(0deg, rgba(5,8,7,0.96) 0%, rgba(5,8,7,0.62) 52%, transparent 88%); }
@media (max-width: 820px) {
.ls-sub { max-width: none; font-size: 0.84rem; }
.door { height: auto; min-height: clamp(260px, 40vh, 320px); }
}
/* ============================================================================
RESPONSIVE MÓVIL — composición propia (no desktop encogido)
----------------------------------------------------------------------------
Brief del cliente (7-ago): móvil diseñado para móvil manteniendo diseño,
colores y tipografías. Medido a 390/430/768/1440 con el arnés de iframes.
Este bloque vive al FINAL de la hoja a propósito: es la palabra final del
responsive y gana por orden de cascada a los ajustes históricos de arriba.
============================================================================ */
/* ── VITRINA desktop: el frasco ya no tapa nombre/datos ──────────────────────
Medido a 1440×900: tarjeta central 162→612, nombre 594→712 (18px pisados) y
el reflejo (44% de 450px) cubría TODO el bloque de texto. La tarjeta sube
(39%), el nombre baja de techo (8.2rem→6.6rem) y el bloque de info sube un
poco: producto protagonista, título y datos con aire propio. */
.vit-card { top: 39%; }
.vit-side { top: 39%; }
.vit-name { font-size: clamp(3rem, 8.5vw, 6.6rem); }
.vit-name--long { font-size: clamp(2.2rem, 5.5vw, 4.2rem); }
.vit-info { bottom: clamp(4.5rem, 8.5vh, 7rem); bottom: clamp(4.5rem, 8.5svh, 7rem); z-index: 3; }
/* z3 > escenario (z2): ni el frasco ni su reflejo pisan título/precio.
Con la tarjeta a 39% y el nombre con techo de 6.6rem ya no se cruzan
en vertical, así que el frasco sigue siendo el protagonista visual. */
/* El rail de momentos (inyectado por initRueda) solo existe en móvil:
en escritorio la rueda sigue siendo la navegación. */
.rd-tabs { display: none; }
@media (max-width: 820px) {
/* ── 1. HERO: voz arriba, acción al pulgar, video en la banda media ───────
Dos grupos y una respiración: el titular + réplica abren arriba (bajo el
header) y TODO el bloque de decisión (párrafo + CTA + redes) se asienta
al fondo, donde vive el pulgar. El aire sobrante queda en UNA banda
media limpia por la que respira el video — no en huecos sueltos.
Apilado extendido a 761–820px (el layout absoluto de escritorio
apretaba el titular a 52vw en tablets chicas). */
.hero {
display: flex;
height: auto;
min-height: 100vh; min-height: 100svh;
align-items: stretch;
padding: 6.2rem 1.5rem 1.4rem;
/* home indicator de iOS: con viewport-fit=cover la página corre bajo
la franja del gesto y el CTA quedaba tapado */
padding-bottom: max(1.4rem, calc(env(safe-area-inset-bottom) + 0.5rem));
}
.hero-content {
position: relative;
inset: auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
/* 9.6rem (antes 7.6): el cálculo llenaba EXACTO hasta el borde del
overflow:hidden — cualquier desviación real (transform de entrada a
medias, text-boosting de iOS, barra de Safari) recortaba "Explorar
tienda" y las redes. 2rem de holgura garantizada; la banda media
absorbe la diferencia. */
min-height: calc(100vh - 9.6rem); min-height: calc(100svh - 9.6rem);
}
.hero-left { position: static; max-width: 100%; }
/* 48.75px/46.3 ocupaba 2 renglones gritados; 41px con línea 1.03 conserva
jerarquía sin comerse el viewport. balance evita el corte feo. */
.hero-phrase { font-size: clamp(2.4rem, 10.5vw, 3.2rem); line-height: 1.03; text-wrap: balance; }
/* min-height de 2 renglones: el rotador cambia de frase cada 2.6s y las
largas envuelven a 2 líneas — sin reserva, el bloque de abajo brincaba. */
.hero-claim { font-size: 0.95rem; margin-top: 0.85rem; min-height: 2.9em; }
/* la banda media (video) absorbe TODO el sobrante aquí */
.hero-desc {
position: static;
width: 100%;
max-width: 400px;
gap: 0.9rem;
margin-top: auto;
padding-top: 2.2rem; /* piso de respiración si el alto aprieta */
}
.hero-desc p { font-size: 0.92rem; line-height: 1.55; text-wrap: pretty; }
.hero-strip {
position: static;
width: 100%;
margin-top: 1.15rem; /* pegadas al bloque de decisión, no flotando */
flex-wrap: wrap;
justify-content: center;
row-gap: 0.6rem;
padding: 0.85rem 0 0;
font-size: 0.62rem;
}
.hst-info { display: none; }
/* a 320-360px las 4 piezas no caben en una línea: que envuelvan en vez
de recortarse por ambos bordes (overflow-x: clip las escondía) */
.hst-social { flex-wrap: wrap; justify-content: center; row-gap: 0.5rem; }
/* ── 2. ELIGE TU LÍNEA: las dos puertas completas y equivalentes ──────────
BUG medido: el bloque final de escritorio fijaba .doors a 50vh (422px)
a TODA resolución; apiladas (320px c/u + gap) las hijas medían 655px y
Performance quedaba desbordada fuera de la sección. El contenedor vuelve
a auto y ambas puertas comparten el mismo alto contenido. */
body[data-page="home"] .doors,
.doors { height: auto; }
.door { height: auto; min-height: clamp(230px, 32vh, 290px); }
body[data-page="home"] .lines-section.home-block { min-height: 0; padding: 3.6rem 1.5rem 4rem; }
/* ── 3. VITRINA móvil: CARRUSEL SNAP tipo app (pedido del cliente 13-ago:
"más como app"). El arco de física, su ficha flotante y el contador
quedan en desktop; en móvil los 8 destacados son tarjetas deslizables
con snap nativo, con la identidad del escenario (placa oscura + glow
del acento). Tap en una tarjeta = abrir SU ficha rápida. */
/* Pantalla completa (pedido del cliente): título arriba, carrusel
centrado en el aire restante, "ver catálogo" al pie. */
.vitrina-section {
min-height: 100vh; min-height: 100svh;
height: auto;
display: flex;
flex-direction: column;
padding-top: 5.4rem;
padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 0.75rem));
}
.vitrina-section .vit-head { position: static; pointer-events: auto; margin: 0 0 0.4rem; max-width: 100%; }
.vitrina-section.is-detail { min-height: 100vh; min-height: 100svh; }
/* Al abrir la ficha, el CARRUSEL de atrás se apaga — el espejo móvil de
la regla de escritorio (~1550) que apaga stage/info/counter. Sin esto
las tarjetas sangraban a través de la ficha (frascos y textos dobles,
captura del cliente 18-ago). visibility además saca los botones del
carrusel del orden de foco mientras la ficha está abierta. */
.vitrina-section.is-detail .vit-rail,
.vitrina-section.is-detail .vit-all {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.vitrina-section .vit-stage,
.vitrina-section .vit-info,
.vitrina-section .vit-counter { display: none; }
/* Sin lámpara en móvil: el halo está diseñado para que el FRASCO le
tape el centro (pico al 30% del radio) y aquí el escenario es
display:none — quedaba la dona desnuda flotando sobre el carrusel
(captura del cliente 18-ago). Las tarjetas traen su propio glow. */
.vit-ambient { display: none; }
.vit-rail {
display: grid;
grid-auto-flow: column;
/* tarjeta protagonista: en pantalla completa 250px se veía tímida */
grid-auto-columns: min(70vw, 290px);
gap: 0.85rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* sangra al borde: el peek de la siguiente tarjeta invita al swipe */
padding: 0.4rem 1.5rem 1rem;
/* margin-block auto: centra el carrusel en el aire de la pantalla
completa, entre el título y el link del catálogo */
margin: auto -1.5rem;
position: relative; z-index: 2;
}
.vit-rail::-webkit-scrollbar { display: none; }
.vit-slide {
scroll-snap-align: center;
display: flex; flex-direction: column; align-items: flex-start; gap: 0.18rem;
padding: 1rem 1rem 1.05rem;
border-radius: 20px;
background:
radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--acc, var(--endurance)) 13%, transparent) 0%, transparent 62%),
#101014;
border: 1px solid rgba(255,255,255,0.08);
color: #fff; text-align: left; cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.vit-slide:active { transform: scale(0.97); }
.vit-slide img {
width: 76%; aspect-ratio: 3 / 4; object-fit: contain; align-self: center;
margin-bottom: 0.45rem;
/* funde el fondo blanco del render con la placa (mismo bloom del arco) */
-webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 46%, #000 60%, transparent 100%);
mask-image: radial-gradient(ellipse 80% 90% at 50% 46%, #000 60%, transparent 100%);
}
.vit-slide-cat {
font-family: 'Montserrat', sans-serif; font-size: 0.6rem; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--acc, var(--endurance));
}
.vit-slide-name {
font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; letter-spacing: 0.03em; line-height: 1;
white-space: normal;
}
.vit-slide-price {
font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 700;
color: rgba(255,255,255,0.85); margin-top: 0.25rem;
}
/* "Ver catálogo completo" pasa al flujo, después del carrusel */
.vit-all { position: static; translate: 0 0; margin: 0.6rem auto 0; width: fit-content; display: flex; }
/* ── 4. RUTINAS / ELIGE TU MOMENTO: los momentos van en RAIL lateral ──────
La rueda vertical consumía ~285px de pantalla antes de la primera
rutina. En móvil se oculta y su lugar lo toma .rd-tabs (inyectado por
initRueda): pastillas horizontales con scroll lateral, icono + acento
de cada momento, targets de 44px. La sección deja de estirarse a
100svh: la primera tarjeta de rutina entra de inmediato. */
/* La sección vuelve a medir UNA pantalla (pedido del cliente) y los
momentos son una LISTA VERTICAL con la voz de la rueda de escritorio:
Bebas grande + icono del momento, apagados salvo el activo, que
enciende con SU acento — el mismo acomodo de PC adaptado al alto
del teléfono. */
.rueda-section {
min-height: 100vh; min-height: 100svh;
padding-top: 4.6rem;
padding-bottom: 2.6rem;
gap: 1.1rem;
}
.rd-wheel-wrap { display: none; }
.rd-tabs {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
padding: 0;
margin: 0;
}
.rd-tab {
display: flex; align-items: center; gap: 0.65em;
width: 100%;
min-height: 48px;
padding: 0.1rem 0.25rem;
background: none;
border: 0;
border-radius: 10px;
color: rgba(255,255,255,0.32);
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.55rem, 6.4vw, 1.9rem);
letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400;
white-space: nowrap;
cursor: pointer;
transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
}
.rd-tab svg { flex: 0 0 auto; width: 21px; height: 21px; }
.rd-tab.is-act {
color: var(--m-acc);
text-shadow: 0 0 26px color-mix(in srgb, var(--m-acc) 50%, transparent);
transform: translateX(4px);
}
.rd-tab:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
/* ── 5. ESPACIADO GENERAL: carril lateral único de 1.5rem ─────────────────
El hero usaba 1.25rem y "Elige tu línea" 1.25rem contra 1.5rem del resto
de secciones: todo al mismo carril. (Los ajustes puntuales van arriba,
en cada sección.) */
}
/* ============================================================================
FICHA RÁPIDA DE DESTACADOS (.qv) — reconstrucción completa (8-ago)
----------------------------------------------------------------------------
Tres zonas editoriales sobre el escenario oscuro de la vitrina:
identidad | producto | compra. El contenedor .vit-detail conserva su
mecánica de apertura (is-detail); el interior es nuevo. El detalle de
RUTINAS (cd-detail) usa las clases .vd-* viejas y NO se toca.
============================================================================ */
.qv {
position: absolute; inset: 0;
overflow-y: auto; /* escritorios cortos: la ficha scrollea, nunca se corta */
display: grid;
grid-template-columns: minmax(190px, 0.75fr) minmax(250px, 30vw) minmax(330px, 1.2fr);
gap: clamp(1.4rem, 3vw, 3.2rem);
align-items: center;
max-width: 1380px;
margin: 0 auto;
padding: clamp(4.8rem, 10vh, 6.2rem) clamp(3.4rem, 6vw, 5rem) clamp(2.4rem, 6vh, 3.6rem);
padding: clamp(4.8rem, 10svh, 6.2rem) clamp(3.4rem, 6vw, 5rem) clamp(2.4rem, 6svh, 3.6rem);
}
/* entrada escalonada: producto primero, identidad, compra */
.qv > * { opacity: 0; transform: translateY(14px); }
.qv.qv-in > * { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.qv.qv-in .qv-media { transition-delay: 0.05s; }
.qv.qv-in .qv-id { transition-delay: 0.14s; }
.qv.qv-in .qv-buy { transition-delay: 0.22s; }
@media (prefers-reduced-motion: reduce) {
.qv > * { opacity: 1; transform: none; transition: none; }
}
/* ── IZQUIERDA · identidad ── */
.qv-id { min-width: 0; }
.qv-name {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 4.4vw, 4.4rem);
line-height: 0.92;
letter-spacing: 0.02em;
text-transform: uppercase;
transform: skewX(-6deg);
color: #F2EFE6;
}
/* filo de luz del acento: la identidad declara su categoría de un vistazo;
vive dentro del nombre y hereda su skewX (recurso de .vit-title::before) */
.qv-name::before {
content: '';
display: block;
width: clamp(36px, 4vw, 54px);
height: 1px;
margin-bottom: 1rem;
background: linear-gradient(90deg, var(--vit-acc), transparent);
}
.qv-cat {
margin-top: 0.7rem;
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
/* la palabra de línea toma el acento por variable (cross-fade 0.5s);
sin bold: Consolas uppercase micro en negrita empasta */
.qv-cat b { font-weight: 400; color: var(--vit-acc); transition: color 0.5s ease; }
/* deck editorial: contraste por TAMAÑO contra la descripción, no grasa */
.qv-tag {
margin-top: 1.15rem;
font-family: 'Montserrat', sans-serif;
font-size: 1.18rem; font-weight: 500;
line-height: 1.35; letter-spacing: 0.004em;
color: rgba(255,255,255,0.95);
max-width: 26ch;
text-wrap: balance;
}
/* información adicional: acordeón de filos finos */
.qv-extra { margin-top: 1.5rem; max-width: 420px; }
.qv-acc { border-top: 1px solid rgba(255,255,255,0.1); }
.qv-acc:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.qv-acc summary {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: 40px; padding: 0.55rem 0;
cursor: pointer; list-style: none;
font-family: 'Montserrat', sans-serif;
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.62);
transition: color 0.15s ease;
}
.qv-acc summary::-webkit-details-marker { display: none; }
.qv-acc summary:hover, .qv-acc[open] summary { color: #FFFFFF; }
.qv-acc summary svg { flex: 0 0 auto; transition: rotate 0.25s ease, color 0.25s ease; color: rgba(255,255,255,0.4); }
.qv-acc[open] summary svg { rotate: 180deg; color: var(--vit-acc); }
.qv-acc summary:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
.qv-acc-body { padding: 0.15rem 0 1rem; font-size: 0.82rem; line-height: 1.55; color: rgba(255,255,255,0.66); }
/* el cuerpo entra con un fundido corto (el chevron ya rotaba, el contenido
hacía pop); el cierre queda instantáneo, lo esperado en */
@keyframes qvAccIn { from { opacity: 0; transform: translateY(-4px); } }
.qv-acc[open] .qv-acc-body { animation: qvAccIn 0.22s ease both; }
.qv-x-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.qv-x-lista li { display: flex; align-items: center; gap: 0.55rem; }
.qv-x-lista svg { flex: 0 0 auto; color: var(--vit-acc); }
.qv-x-ing { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.qv-x-serv { margin: 0 0 0.5rem; font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); }
.qv-x-nut { list-style: none; margin: 0; padding: 0; }
.qv-x-nut li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-top: 1px solid rgba(255,255,255,0.07); }
.qv-x-nut b { font-weight: 600; color: rgba(255,255,255,0.85); }
/* ── CENTRO · producto ── */
.qv-media { position: relative; margin: 0; min-width: 0; }
/* luz ambiental de la categoría, muy contenida */
.qv-media::before {
content: '';
position: absolute; inset: -12% -18%;
background: radial-gradient(ellipse 52% 46% at 50% 44%, rgba(255,255,255,0.06), transparent 70%);
/* 24% = la misma dosis que .vit-ambient del escenario: continuidad, no glow nuevo */
background: radial-gradient(ellipse 54% 48% at 50% 44%, color-mix(in srgb, var(--vit-acc) 24%, rgba(255,255,255,0.04)), transparent 70%);
pointer-events: none;
}
/* La máscara funde el fondo integrado del render con el escenario: el
blanco se disuelve como bloom de luz — sin tarjeta blanca artificial y
sin tocar la etiqueta. Un render transparente pasa igual de limpio. */
.qv-media img {
position: relative;
display: block; width: 100%; height: auto;
max-height: min(58vh, 560px);
object-fit: contain;
rotate: -2.2deg;
-webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 47%, #000 55%, transparent 92%);
mask-image: radial-gradient(ellipse 62% 56% at 50% 47%, #000 55%, transparent 92%);
}
/* flechas del cambio de producto dentro de la ficha */
/* mismo vocabulario de icon-button que la X de cerrar: círculo fino;
el fondo hace de scrim en móvil, donde se montan sobre el render */
.qv-nav {
position: absolute; top: 50%;
translate: 0 -50%;
z-index: 5;
width: 46px; height: 46px;
display: inline-flex; align-items: center; justify-content: center;
background: #0E0F12;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 50%;
color: rgba(255,255,255,0.6);
cursor: pointer;
transition: color 0.25s ease, border-color 0.25s ease, translate 0.25s ease;
}
.qv-nav--prev { left: clamp(0.4rem, 1.4vw, 1.4rem); }
.qv-nav--next { right: clamp(0.4rem, 1.4vw, 1.4rem); }
.qv-nav:hover { color: #FFFFFF; border-color: rgba(255,255,255,0.55); }
.qv-nav--prev:hover { translate: -3px -50%; }
.qv-nav--next:hover { translate: 3px -50%; }
.qv-nav:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 3px; border-radius: 8px; }
/* ── DERECHA · compra ── */
.qv-buy { min-width: 0; max-width: 400px; justify-self: end; width: 100%; }
.qv-specs { margin: 1.1rem 0 0; }
.qv-specs > div {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding: 0.42rem 0;
border-top: 1px solid rgba(255,255,255,0.08);
}
.qv-specs dt {
font-family: ui-monospace, 'SF Mono', Consolas, monospace;
font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.qv-specs dd { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.85); text-align: right; }
/* El precio es el protagonista de la columna (es un e-commerce):
Bebas grande en blanco puro; el ahorro es un chip sólido del acento. */
.qv-price { margin-top: 1.05rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.qv-price-now {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.7rem; line-height: 1;
color: #FFFFFF; letter-spacing: 0.02em;
}
.qv-price-antes { display: inline-flex; align-items: center; gap: 0.55rem; }
.qv-price-antes s { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 0.8rem; color: rgba(255,255,255,0.45); }
.qv-price-antes b {
font-family: 'Montserrat', sans-serif;
font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
color: #04160E;
background: var(--vit-acc);
border-radius: 999px;
padding: 0.3em 0.8em;
transition: background 0.5s ease;
}
.qv-flavors { margin-top: 0.9rem; }
.qv-fl-label {
display: block; margin-bottom: 0.45rem;
font-family: ui-monospace, 'SF Mono', Consolas, monospace;
font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.qv-fl-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.qv-fl {
min-height: 34px; padding: 0 0.8rem;
border-radius: 999px;
background: transparent;
border: 1px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.65);
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem; font-weight: 600;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.qv-fl:hover { color: #FFFFFF; border-color: rgba(255,255,255,0.32); }
/* activo: SÓLIDO — mini versión del CTA (acento pleno + tinta oscura) */
.qv-fl.is-act {
color: #04160E;
border-color: var(--vit-acc);
background: var(--vit-acc);
font-weight: 700;
}
.qv-fl:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
/* wrap: si la columna aprieta, el CTA baja a fila completa en vez de
desbordarse de la píldora (bug visto en captura del cliente) */
.qv-actions { margin-top: 1.1rem; display: flex; align-items: stretch; gap: 0.6rem; flex-wrap: wrap; }
/* Stepper: píldora SÓLIDA gris oscuro — control de apoyo, plano,
no compite con el CTA de color pleno. */
.qv-qty {
flex: 0 0 auto;
display: inline-flex; align-items: center;
min-height: 48px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-btn);
overflow: hidden;
background: #17181C;
box-shadow: none;
}
.qv-qbtn {
width: 38px; min-height: 0; align-self: stretch;
display: inline-flex; align-items: center; justify-content: center;
background: none; border: 0;
color: rgba(255,255,255,0.75);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease;
}
.qv-qbtn svg { transition: transform 0.12s ease; }
.qv-qbtn:hover:not(:disabled) { color: #FFFFFF; background: rgba(255,255,255,0.07); }
.qv-qbtn:active:not(:disabled) svg { transform: scale(0.85); }
.qv-qbtn:disabled { opacity: 0.3; cursor: default; }
.qv-qbtn:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: -4px; border-radius: var(--r-btn); }
/* la cantidad es un DATO: monospace de 3 celdas con filos finos */
.qv-qnum {
min-width: 30px; align-self: stretch;
display: inline-flex; align-items: center; justify-content: center;
border-inline: 1px solid rgba(255,255,255,0.09);
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
font-size: 0.9rem; font-weight: 500;
font-variant-numeric: tabular-nums;
color: #FFFFFF;
}
/* CTA principal: BLANCO SÓLIDO (decisión del cliente) — la misma receta
del "Comprar" del header (btn-nav-cta): máximo contraste, es la pieza
de conversión. nowrap + padding contenido: nunca se parte en dos líneas. */
.qv-add {
flex: 1 1 150px; justify-content: center;
min-height: 50px;
min-width: 0;
padding: 0 0.85rem;
font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em;
white-space: nowrap;
background: linear-gradient(135deg, #FFFFFF 0%, #ECECEC 100%);
color: var(--black);
box-shadow: none;
transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), filter 0.2s ease, box-shadow 0.2s ease;
}
.qv-add:hover {
transform: translateY(-2px);
filter: brightness(1.04);
box-shadow: 0 0 24px rgba(255,255,255,0.3);
}
.qv-add:active { transform: scale(0.97); }
/* misma voz que su gemelo .vit-all: mono, sin subrayado, flecha */
.qv-more {
margin-top: 0.85rem;
display: inline-flex; align-items: center; gap: 0.45em;
background: none; border: 0; padding: 0.4rem 0;
font-family: ui-monospace, 'SF Mono', Consolas, monospace;
font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.7);
text-decoration: none;
cursor: pointer;
transition: color 0.2s ease;
}
.qv-more:hover { color: #FFFFFF; }
.qv-more svg { transition: transform 0.25s ease; }
.qv-more:hover svg { transform: translateX(3px); }
.qv-more:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 3px; }
.qv-trust {
margin-top: 1rem; padding-top: 0.8rem;
border-top: 1px solid rgba(255,255,255,0.08);
font-family: ui-monospace, 'SF Mono', Consolas, monospace;
font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
line-height: 1.7;
color: rgba(255,255,255,0.52);
}
/* ── Tablet (821–1120): mismas tres zonas, más apretadas ── */
@media (max-width: 1120px) and (min-width: 821px) {
.qv { grid-template-columns: minmax(230px, 1fr) minmax(210px, 26vw) minmax(250px, 1fr); gap: 1.4rem; }
.qv-name { font-size: clamp(2.1rem, 3.6vw, 3rem); }
}
/* ── Móvil: composición propia (no el desktop apilado) ─────────────────
Producto → nombre+categoría → descripción → beneficios → precio →
cantidad+carrito → info adicional → ficha completa. display:contents
deshace las columnas y el orden lo dicta cada pieza. ── */
@media (max-width: 820px) {
.qv {
display: flex; flex-direction: column;
align-items: stretch;
overflow-y: auto;
gap: 0;
padding: 4.6rem 1.5rem 2.2rem;
}
.qv-id, .qv-buy { display: contents; }
.qv > * { transform: none; } /* el stagger de columnas no aplica al flujo */
.qv.qv-in > * { transition-delay: 0s; }
.qv-media { order: 1; width: min(52vw, 230px); margin: 0 auto; }
.qv-media img { max-height: 34vh; }
.qv-name { order: 2; margin-top: 1rem; text-align: center; font-size: clamp(2.1rem, 9vw, 2.8rem); }
.qv-name::before { margin: 0 auto 0.8rem; background: linear-gradient(90deg, transparent, var(--vit-acc), transparent); }
.qv-cat { order: 3; margin-top: 0.45rem; text-align: center; }
.qv-tag { font-size: 0.96rem; max-width: none; }
.qv-price { order: 9; margin-top: 1rem; justify-content: center; }
.qv-flavors { order: 10; margin-top: 0.8rem; }
.qv-fl-row { justify-content: center; }
.qv-fl-label { text-align: center; }
/* cantidad arriba centrada, CTA a TODO el ancho: en 390px la fila única
recortaba "AGREGAR AL CARRITO" */
/* cantidad + carrito en el mismo renglón (pedido 12-ago); a 320px la
red de wrap baja el CTA a fila completa en vez de recortarlo */
.qv-actions { order: 11; margin-top: 1rem; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; }
.qv-buy { padding: 1.15rem 1.15rem 1.05rem; }
.qv-add { flex: 1 1 150px; font-size: 0.66rem; letter-spacing: 0.03em; padding: 0 0.6rem; }
.qv-add svg { display: none; } /* el texto manda en anchos chicos */
.qv-extra { order: 12; margin: 1.4rem 0 0; max-width: none; }
.qv-more { order: 13; margin: 1rem auto 0; }
.qv-trust { order: 14; margin-top: 0.9rem; text-align: center; }
/* En móvil NO se cambia de producto dentro de la ficha (pedido del
cliente: "estás viendo uno"): fuera las flechas; se navega cerrando
y eligiendo otro destacado. En desktop siguen. */
.qv-nav { display: none; }
}
/* ── VITRINA en landscape bajo (teléfono ACOSTADO ≤820×≤620): la altura
por contenido del bloque móvil asume retrato; aquí vuelve la composición
compacta a pantalla completa del bloque max-height:620. El orientation
es clave: sin él, un SE vertical (320×568) caía aquí y el CTA pisaba
el link del catálogo. ── */
@media (max-width: 820px) and (max-height: 620px) and (orientation: landscape) {
.vitrina-section { height: auto; min-height: 100vh; min-height: 100svh; }
.vit-card { top: 39%; }
.vit-info { top: auto; bottom: clamp(1.8rem, 6vh, 3.4rem); }
/* el link del catálogo vuelve a la esquina (como desktop): centrado
abajo competía verticalmente con el CTA en 360px de alto */
.vit-all { right: clamp(1.5rem, 5vw, 4rem); translate: 0 0; bottom: max(0.9rem, env(safe-area-inset-bottom)); }
}
/* ── VITRINA en pantallas ANGOSTAS (≤360): a 320 el título pisaba el
contador ("…DESTACADOS" sobre "01/08") y "VER CATÁLOGO COMPLETO"
rompía en dos líneas con la flecha suelta. Tipografía un punto más
compacta y el link en una sola línea. ── */
@media (max-width: 360px) {
.vit-head { max-width: calc(100% - 6.5rem); }
.vit-title { font-size: 0.62rem; letter-spacing: 0.18em; }
.vit-all { font-size: 0.6rem; letter-spacing: 0.12em; white-space: nowrap; }
}
/* ============================================================================
HERO PERFORMANCE — CTAs de línea sólidos + frase de atleta (A+R2, 12-ago)
----------------------------------------------------------------------------
Elegido de propuestas/hero-performance.html: bloques sólidos (azul/verde
plenos con tinta oscura — el lenguaje sólido que el cliente fijó para todo
el sitio) y bajo cada botón UNA frase que retrata al atleta de la línea.
Sustituyó a la fila de stats 21/100%/0.
============================================================================ */
.ph-cta-fila {
display: flex;
gap: clamp(1rem, 3vw, 2.2rem);
flex-wrap: wrap;
margin-bottom: 1rem;
}
.ph-cta { max-width: 265px; }
.ph-cta .ph-solid { width: 100%; }
.ph-solid {
gap: 0.55rem;
white-space: nowrap;
transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.25s ease;
}
.ph-solid svg { flex: 0 0 auto; transition: transform 0.25s ease; }
.ph-solid:hover { transform: translateY(-2px); }
.ph-solid:hover svg { transform: translateX(3px); }
.ph-solid-e { background: var(--endurance); color: #03222F; box-shadow: none; }
.ph-solid-e:hover { filter: brightness(1.08); box-shadow: 0 12px 30px -12px var(--endurance-glow-strong); }
.ph-solid-s { background: var(--strength); color: #062808; box-shadow: none; }
.ph-solid-s:hover { filter: brightness(1.06); box-shadow: 0 12px 30px -12px var(--strength-glow-strong); }
.ph-cta-sub {
margin-top: 0.65rem;
font-family: 'Montserrat', sans-serif;
font-size: 0.74rem; font-weight: 600;
line-height: 1.55;
color: rgba(255,255,255,0.6);
}
@media (max-width: 760px) {
.ph-cta-fila { gap: 1.3rem; }
.ph-cta { max-width: none; width: 100%; }
.ph-solid { white-space: normal; }
.ph-cta-sub { margin-top: 0.5rem; }
}
/* ============================================================================
FICHA RÁPIDA · P1 "PANEL BLANCO DE COMPRA" + ACORDEÓN DEL LOBBY (12-ago)
----------------------------------------------------------------------------
Elegido de propuestas/ficha-contenedores.html con ajustes del cliente:
CTA del ACENTO del producto (no negro) y las 4 secciones del acordeón de
producto.html (Información / Nutrimental / Modo de uso / Consejos) en la
columna de identidad. Este bloque va al final: gana la cascada sobre las
reglas .qv anteriores.
============================================================================ */
/* ── La placa oscura: la info contenida SIN romper el clima (el blanco
se sintió inconsistente — decisión del cliente 12-ago). Tintas base. ── */
.qv-buy {
background: #121318;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
padding: 1.4rem 1.4rem 1.25rem;
}
.qv-specs { margin-top: 0.9rem; }
.qv-specs > div:first-child { border-top: 0; padding-top: 0; }
/* el CTA toma el ACENTO por JS (como detail-add-btn del lobby); aquí solo
la geometría y el gesto */
.qv-add {
background: none;
box-shadow: none;
filter: none;
}
.qv-add:hover {
transform: translateY(-2px);
filter: brightness(1.07);
box-shadow: 0 10px 26px -12px rgba(0,0,0,0.4);
}
/* ── El acordeón del lobby, en la columna oscura de identidad ── */
.qv-extra { margin-top: 1.4rem; max-width: 460px; border-top: 1px solid rgba(255,255,255,0.1); }
.qv-acc { border-top: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.qv-acc:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.qv-x-desc { margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.72); }
/* tabla nutrimental (versión qv oscura, espejo de .nutri-table del lobby) */
.qv-nutri-meta { font-size: 0.72rem; color: rgba(255,255,255,0.55); font-family: 'Montserrat', sans-serif; margin-bottom: 0.7rem; line-height: 1.6; }
.qv-nutri-meta strong { color: rgba(255,255,255,0.85); font-weight: 700; }
.qv-nutri { width: 100%; border-collapse: collapse; font-family: 'Montserrat', sans-serif; font-size: 0.74rem; margin-bottom: 1rem; }
.qv-nutri th {
text-align: right; padding: 0.45rem 0.4rem;
font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(255,255,255,0.55);
border-bottom: 1.5px solid rgba(255,255,255,0.14);
}
.qv-nutri th:first-child { text-align: left; }
.qv-nutri td { padding: 0.4rem 0.4rem; text-align: right; color: rgba(255,255,255,0.72); border-bottom: 1px solid rgba(255,255,255,0.07); }
.qv-nutri td:first-child { text-align: left; font-weight: 600; }
.qv-nutri-sub td:first-child { padding-left: 1.1rem; font-weight: 400; color: rgba(255,255,255,0.55); }
.qv-x-ing-label { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 0.5rem; }
.qv-ing-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 0.82rem; color: rgba(255,255,255,0.7); }
.qv-ing-row b { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; }
/* modo de uso: los 3 pasos en placas finas */
.qv-uso { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.75rem 0.85rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; }
.qv-uso + .qv-uso { margin-top: 0.6rem; }
.qv-uso-n { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; background: rgba(255,255,255,0.06); display: inline-flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.7rem; color: rgba(255,255,255,0.45); }
.qv-uso b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.76rem; color: rgba(255,255,255,0.85); margin-bottom: 0.2rem; }
.qv-uso p { margin: 0; font-size: 0.74rem; color: rgba(255,255,255,0.5); line-height: 1.55; }
.qv-tips { display: flex; flex-direction: column; gap: 0.7rem; }
.qv-tips p { margin: 0; font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.65; }
.qv-tips a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
/* la columna de identidad scrollea si el acordeón crece (tabla abierta) */
@media (min-width: 821px) {
.qv-id { max-height: calc(100vh - 12rem); max-height: calc(100svh - 12rem); overflow-y: auto; overflow-x: clip; scrollbar-width: thin; padding-right: 0.4rem; padding-inline-start: 0.5rem; }
}
/* ── móvil: nuevo orden con panel blanco entero como pieza ── */
@media (max-width: 820px) {
.qv-buy { display: block; order: 7; width: 100%; max-width: none; margin-top: 1.2rem; }
.qv.qv-in .qv-buy { transition-delay: 0s; } /* el panel entra con el flujo, sin stagger */
.qv-specs { display: block; } /* la Presentación vive aquí en móvil */
.qv-more { display: flex; width: fit-content; margin-inline: auto; }
.qv-extra { order: 8; margin: 1.4rem 0 0; max-width: none; }
.qv-acc summary { min-height: 44px; }
/* el stepper conserva su spec compacta de 38px (la píldora ya mide 48px
de alto): agrandarlo rompía el renglón único de compra del cliente */
}
/* tablet vuelve a mostrar el acordeón: la descripción vive ahí desde P1 */
@media (max-width: 1120px) and (min-width: 821px) {
.qv-extra { display: block; }
}
/* izquierda SOLO el nombre en desktop: la categoría vive en specs;
en móvil sí se muestra bajo el nombre */
@media (min-width: 821px) { .qv-cat { display: none; } }
/* columnas angostas (tablet): el texto del CTA manda; el icono cede */
@media (max-width: 1120px) and (min-width: 821px) {
.qv-add svg { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════════
PESTAÑAS DE CATÁLOGO: SÓLIDOS (13-ago, P1 del audit del lobby)
----------------------------------------------------------------------------
Decisión documentada del cliente (ficha rápida): "sólidos, nada de vidrio
en CONTROLES". El sistema de vidrio había pisado el estado activo de
.subline-tab: .active-endurance/.active-strength quedaban en vidrio neutro
sin acento (código muerto desde entonces). Este bloque, al final:
· inactivos = neutro SÓLIDO (receta del stepper de la ficha .qv)
· activos = acento SÓLIDO con la MISMA tinta que los ph-solid del hero
(una sola familia de botón en la página)
· sin backdrop-filter en estas pestañas: sobre fondo opaco solo cuesta GPU
El vidrio sigue vivo donde sí es material (nav, carrito, modales). ═══════ */
.subline-tabs {
background: #101114;
border: 1px solid rgba(255,255,255,0.08);
/* pildora tambien el wrapper: radio exterior concentrico con las
pestañas de 999px (12px cuadraba con el vidrio invisible, no ya) */
border-radius: var(--r-btn);
}
.subline-tab,
.filter-tab.tab-dark-inactive {
background: #17181C;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
color: rgba(255,255,255,0.68);
}
/* hover = el overlay del stepper (blanco 0.07 sobre #17181C) */
.subline-tab:hover,
.filter-tab.tab-dark-inactive:hover {
background: #212227;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
color: #fff;
}
/* el activo del filtro lo pinta applyTabState inline (acento sólido);
aquí solo se le quita el blur que pagaba sin verse */
#perf-subfilter .filter-tab {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.subline-tab.active-endurance {
background: var(--endurance);
color: #03222F;
box-shadow: 0 0 20px var(--endurance-glow);
}
.subline-tab.active-strength {
background: var(--strength);
color: #062808;
box-shadow: 0 0 20px var(--strength-glow);
}
/* hover sobre el activo: se queda en su acento con la respuesta de la
familia ph-solid (brightness). El halo en reposo es DELIBERADO: marca
el estado activo, no decoracion. */
.subline-tab.active-endurance:hover { background: var(--endurance); color: #03222F; filter: brightness(1.07); }
.subline-tab.active-strength:hover { background: var(--strength); color: #062808; filter: brightness(1.06); }
/* alto contraste: este bloque va DESPUES de la media query de ~6070 y la
pisaba — se restaura aqui el canto fuerte para quien lo pide */
@media (prefers-contrast: more) {
.subline-tab,
.filter-tab.tab-dark-inactive,
.subline-tab:hover,
.filter-tab.tab-dark-inactive:hover {
background: #0D0E12;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}
}
/* ============================================================================
R3 DEL LOOP QA (13-ago) — espaciado, tipografía y performance visual
----------------------------------------------------------------------------
10 fixes del workflow de lentes (espaciado/tipografía/perf) consolidados
por el director. Cada uno trae su verificación en el comentario.
============================================================================ */
/* ── Ritmo vertical móvil en Wellness/Performance (pisa el padding inline 5rem → 3.5rem del home) ── */
/* al FINAL de style.css — necesita !important porque compite contra style="padding:5rem 0" inline.
Verificado: wellness.html 341/375/391/447 y performance.html 202/246/262/325/368 llevan padding inline;
el hero de Wellness (padding-top:7.5rem inline) queda excluido; el de Performance no tiene inline y no se toca.
El selector también alcanza el cat-lobby (padding-top:5.5rem inline) y corrige su asimetría 88/56 → 56/56. */
@media (max-width: 760px) {
body[data-page="wellness"] section[style*="padding"]:not(.wellness-hero),
body[data-page="performance"] section[style*="padding"] {
padding-top: 3.5rem !important;
padding-bottom: 3.5rem !important;
}
/* .cta-banner (rutinas) toma su 5rem de la regla de la línea 3467, no inline: sin !important */
.cta-banner { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}
/* ── Heroes de línea: 70svh en móvil en vez de 100svh vacíos ── */
/* al FINAL de style.css — gana por cascada a .wellness-hero/.performance-hero (líneas 3915/3971, min-height:100svh).
Verificado: no existe scroll-snap-type vertical en la hoja (solo carruseles en x), el scroll-snap-align del hero es inerte. */
@media (max-width: 760px) {
.wellness-hero,
.performance-hero {
min-height: 70vh;
min-height: 70svh;
}
}
/* ── Footer alineado al carril del contenido (desktop) + safe-area iOS en el cierre ── */
/* al FINAL de style.css — pisa footer { padding: 4rem 1.5rem 2rem } (línea 3511) y .footer-grid { max-width:1280px } (línea 3517).
1184px = 1280 − 2×3rem: replica la geometría de .container a partir de 1024px. */
@media (min-width: 1024px) {
footer { padding-left: 3rem; padding-right: 3rem; }
.footer-grid { max-width: 1184px; }
}
/* viewport-fit=cover: el copyright no queda bajo la barra del home indicator */
footer {
padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem));
}
/* ── .co-title (checkout y modal auth): line-height display, tamaño fluido y balance ── */
/* al FINAL de style.css — la regla base (línea 4778) no declara line-height y hereda el 1.6 del body,
el mismo bug ya corregido en .cta-banner-title (comentario línea 3490). Misma especificidad, gana por orden. */
.co-title {
font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.2rem);
line-height: 1.05;
text-wrap: balance;
}
/* ── .pm-name en Bebas: jerarquía nombre/precio en el modal de producto ── */
/* al FINAL de style.css — pisa la regla de la línea 4714 (Montserrat 800 1.6rem, idéntico a .pm-price 1.6rem).
Restaura el patrón de la casa: nombres de producto en display Bebas (.rm-name, .vit-name, .qv-name).
El margin-bottom y color de la regla base se conservan. */
.pm-name {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2rem, 1.5rem + 1.6vw, 2.4rem);
letter-spacing: 0.04em;
line-height: 1;
}
/* ── Measure de lectura en las respuestas del FAQ ── */
/* al FINAL de style.css — .faq-a p (línea 4851) corre a ~87 caracteres por línea a ≥900px;
el resto del sitio sí acota (section-desc 540px, mente 58ch, amb-sub 44ch). */
.faq-a p { max-width: 65ch; }
/* ── Apagar el hero sticky de home cuando la cortina ya lo tapó (scroll-timeline) ── */
/* al FINAL de style.css — verificado: body[data-page="home"] .hero (línea 4437) no tiene animation propia
(solo .hero-content y ::after la llevan), así que no hay conflicto. Guardado por @supports; en navegadores
sin scroll-timeline no cambia nada. visibility interpola discreto: visible hasta 111vh (la cortina cubre
desde ~100vh), luego hidden → el video Ken Burns deja de componerse y el sheen del titular deja de repintar. */
@supports (animation-timeline: scroll()) {
body[data-page="home"] .hero {
animation: heroSleep linear both;
animation-timeline: scroll(root block);
animation-range: 110vh 111vh;
}
}
@keyframes heroSleep { to { visibility: hidden; } }
/* ── Header fijo: blur 28px → 14px en móvil (mitad de coste GPU por frame en todas las páginas) ── */
/* al FINAL de style.css — pisa por orden el blur(28px) saturate(190%) de las líneas 273-274.
Verificado: .nav-inner.menu-open (línea 650) ya pone backdrop-filter:none con mayor especificidad y sigue ganando;
.nav-inner.light no redefine backdrop-filter. En una barra de 66-72px el material se ve idéntico. */
@media (max-width: 820px) {
.nav-inner {
-webkit-backdrop-filter: blur(14px) saturate(170%);
backdrop-filter: blur(14px) saturate(170%);
}
}
/* ── --glass-blur a 10px en móvil (todos los controles de vidrio a la vez), preservando reduced-transparency ── */
/* al FINAL de style.css — la variable resuelve en ~14 grupos (.btn-ghost, .btn-cart, .qty-btn, .filter-tab,
.rd-card-btn, .cat-card-dark…). IMPORTANTE: se re-afirma el none de accesibilidad DESPUÉS, porque la regla
móvil al final de la hoja pisaría por orden el --glass-blur:none de prefers-reduced-transparency (línea 6060). */
@media (max-width: 820px) {
:root { --glass-blur: blur(10px) saturate(160%); }
}
@media (prefers-reduced-transparency: reduce) {
:root { --glass-blur: none; }
}
/* ── Watermark "1%": respiración por opacity (compositor) en vez de repintar el trazo ── */
/* al FINAL de style.css — la redefinición de @keyframes wmBreathe gana a la de las líneas 4526-4529
(animar -webkit-text-stroke-color repinta un glifo de 40rem cada frame). El longhand de color pisa el
shorthand -webkit-text-stroke de la línea 2438. Trazo fijo 0.07 × opacity 0.5→1 = mismo latido 0.035→0.07.
Con prefers-reduced-motion (línea 4571, animation:none) queda estático a 0.035 efectivo, equivalente al 0.04 original. */
.filo-watermark { -webkit-text-stroke-color: rgba(255,255,255,0.07); opacity: 0.5; }
@keyframes wmBreathe {
from { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
to { transform: translate(-50%, -52%) scale(1.04); opacity: 1; }
}
/* Las tarjetas de categoría del lado oscuro también SÓLIDAS ("estos
también", 13-ago): la placa aprobada de la ficha .qv (#121318 +
borde fino) en lugar del vidrio. El hover conserva la señal de
color por categoría (sombra del acento) sobre placa, sin blur. */
.cat-card.cat-card-dark {
background: #121318;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
border: 1px solid rgba(255,255,255,0.10);
}
.cat-card.cat-card-dark:hover {
background: #16171D;
border-color: color-mix(in srgb, var(--cat-accent, var(--endurance)) 45%, rgba(255,255,255,0.10));
box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--cat-accent, var(--endurance)) 40%, transparent);
}