/* ============================================================
LOGUS v2 — Hero 3D, visor 360°, tilt cards, scroll reveal
No toca al index.html original. Solo cargado por index-v2.html.
============================================================ */
:root {
--orange: #ff6b00;
--orange-deep: #e55400;
--blue-deep: #020617;
--blue-mid: #0b1730;
--blue-soft: #155dfc;
--grey-50: #f8fafc;
--grey-100: #f1f5f9;
--grey-200: #e2e8f0;
--grey-500: #64748b;
--grey-900: #0f172a;
}
/* ---------- EXPLORÁ LOS SISTEMAS LOGUS — 3 tiles grandes (Milwaukee M12/M18/MX) ---------- */
.systems {
position: relative;
background: #04081f;
color: white;
padding: 5rem 0 4.5rem;
overflow: hidden;
}
.systems::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(800px 400px at 10% 0%, rgba(255,107,0,.12), transparent 60%),
radial-gradient(900px 500px at 90% 100%, rgba(21,93,252,.18), transparent 60%);
pointer-events: none;
}
.systems-wrap {
max-width: 1500px; margin: 0 auto; padding: 0 1.5rem;
position: relative; z-index: 1;
}
.systems-head { margin-bottom: 2.5rem; }
.systems-head .eyebrow {
display: inline-block;
padding: .4rem 1rem;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
color: white;
font-size: .72rem; font-weight: 1000;
letter-spacing: .22em; text-transform: uppercase;
border-radius: 999px;
margin-bottom: 1rem;
}
.systems-head h2 {
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 1000;
line-height: 1.05;
letter-spacing: -.015em;
text-transform: uppercase;
color: white;
}
.systems-head p {
color: rgba(255,255,255,.75);
margin-top: .9rem;
max-width: 38rem;
font-size: 1.02rem;
}
.systems-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
}
@media (min-width: 900px) {
.systems-grid { grid-template-columns: repeat(3, 1fr); }
}
.system-tile {
position: relative;
aspect-ratio: 4/5;
border-radius: 0;
overflow: hidden;
cursor: pointer;
background: #0a0e1a;
border: 1px solid rgba(255,255,255,.08);
transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
@media (min-width: 1200px) {
.system-tile { aspect-ratio: 4/5; }
}
.system-tile:hover {
transform: translateY(-4px);
border-color: rgba(255,107,0,.45);
}
.system-tile-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
filter: saturate(1.05);
transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease;
z-index: 0;
}
.system-tile:hover .system-tile-bg {
transform: scale(1.06);
filter: saturate(1.15) brightness(1.05);
}
.system-tile::before {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(2,6,23,.15) 0%, rgba(2,6,23,.55) 55%, rgba(2,6,23,.92) 100%);
z-index: 1;
transition: opacity .35s ease;
}
.system-tile:hover::before {
background:
linear-gradient(180deg, rgba(2,6,23,.05) 0%, rgba(2,6,23,.45) 50%, rgba(2,6,23,.92) 100%);
}
.system-tile-content {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 2rem;
z-index: 2;
}
.system-tile-eyebrow {
display: inline-block;
font-size: .7rem; font-weight: 1000;
letter-spacing: .2em; text-transform: uppercase;
color: #ff8a30;
margin-bottom: .8rem;
}
.system-tile-title {
font-size: clamp(1.6rem, 2.4vw, 2.4rem);
font-weight: 1000;
line-height: 1;
letter-spacing: -.02em;
text-transform: uppercase;
color: white;
text-shadow: 0 4px 18px rgba(0,0,0,.4);
}
.system-tile-tagline {
margin-top: .8rem;
color: rgba(255,255,255,.85);
font-size: .98rem;
line-height: 1.4;
max-width: 22rem;
}
.system-tile-cta {
display: inline-flex; align-items: center; gap: .5rem;
margin-top: 1.4rem;
font-size: .82rem; font-weight: 1000;
letter-spacing: .14em; text-transform: uppercase;
color: white;
padding-bottom: .35rem;
border-bottom: 2px solid rgba(255,107,0,.6);
width: max-content;
transition: gap .25s ease, border-color .25s ease;
}
.system-tile:hover .system-tile-cta {
gap: .85rem;
border-color: #ff6b00;
}
/* ---------- CATÁLOGO VIVO DARK (override Milwaukee) ---------- */
.live-catalog.dark {
background:
radial-gradient(800px 400px at 0% 0%, rgba(255,107,0,.10), transparent 55%),
radial-gradient(900px 500px at 100% 100%, rgba(21,93,252,.18), transparent 55%),
#04081f !important;
border-top: 1px solid rgba(255,255,255,.06) !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
color: white;
position: relative;
overflow: hidden;
}
.live-catalog.dark::before {
content: ""; position: absolute; inset: 0;
background-image: repeating-linear-gradient(
45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 32px
);
pointer-events: none;
z-index: 0;
}
.live-catalog.dark > .max-w-7xl { position: relative; z-index: 1; }
/* Head con eyebrow + título mayúsculas */
.live-catalog.dark .lc-eyebrow {
display: inline-block;
padding: .4rem 1rem;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
color: white;
font-size: .72rem; font-weight: 1000;
letter-spacing: .22em; text-transform: uppercase;
border-radius: 999px;
margin-bottom: 1rem;
}
.live-catalog.dark h2 {
font-size: clamp(2rem, 4vw, 3.2rem) !important;
font-weight: 1000 !important;
line-height: 1.05 !important;
letter-spacing: -.015em !important;
text-transform: uppercase !important;
color: white !important;
}
.live-catalog.dark .lc-sub {
color: rgba(255,255,255,.72) !important;
margin-top: .8rem !important;
max-width: 38rem;
}
.live-catalog.dark .lc-stats span {
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.12) !important;
color: rgba(255,255,255,.85) !important;
}
.live-catalog.dark .lc-stats span:first-child { color: #93c5fd !important; border-color: rgba(21,93,252,.4) !important; background: rgba(21,93,252,.10) !important; }
.live-catalog.dark .lc-stats span:nth-child(2) { color: #86efac !important; border-color: rgba(34,197,94,.4) !important; background: rgba(34,197,94,.10) !important; }
.live-catalog.dark .lc-stats span:nth-child(3) { color: #ff8a30 !important; border-color: rgba(255,107,0,.4) !important; background: rgba(255,107,0,.10) !important; }
.live-catalog.dark .lc-link {
color: white !important;
border-bottom: 2px solid rgba(255,107,0,.6);
padding-bottom: 2px;
font-weight: 1000;
letter-spacing: .12em;
text-transform: uppercase;
font-size: .8rem;
}
.live-catalog.dark .lc-link:hover { color: #ffb27a !important; border-color: #ffb27a !important; }
/* Filtros tabs estilo Milwaukee */
.live-catalog.dark .catalog-filter {
background: transparent !important;
border: 1px solid rgba(255,255,255,.18) !important;
color: rgba(255,255,255,.85) !important;
border-radius: 0 !important;
font-weight: 1000 !important;
letter-spacing: .08em;
text-transform: uppercase;
font-size: .76rem !important;
padding: .65rem 1rem !important;
box-shadow: none !important;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.live-catalog.dark .catalog-filter:hover {
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,107,0,.5) !important;
color: white !important;
}
.live-catalog.dark .catalog-filter.active {
background: #ff6b00 !important;
border-color: #ff6b00 !important;
color: white !important;
box-shadow: 0 8px 18px rgba(255,107,0,.35) !important;
}
/* Cards dark con halo */
.live-catalog.dark .catalog-card {
background: #0a0e1a !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 0 !important;
box-shadow: 0 12px 28px rgba(2,6,23,.5) !important;
}
.live-catalog.dark .catalog-card:hover {
transform: translateY(-4px);
border-color: rgba(255,107,0,.45) !important;
box-shadow: 0 24px 50px rgba(2,6,23,.65), 0 0 0 1px rgba(255,107,0,.15) !important;
}
.live-catalog.dark .catalog-card-media {
background:
radial-gradient(ellipse 75% 60% at 50% 35%, rgba(21,93,252,.22) 0%, transparent 65%),
linear-gradient(180deg, #14182a 0%, #0a0e1a 100%) !important;
position: relative;
}
.live-catalog.dark .catalog-card-media::before {
content: ""; position: absolute;
left: 18%; right: 18%; bottom: 8%; height: 12%;
background: radial-gradient(ellipse at center, rgba(0,0,0,.65) 0%, transparent 70%);
filter: blur(8px);
z-index: 0;
pointer-events: none;
}
.live-catalog.dark .catalog-card-media img {
position: relative; z-index: 1;
filter: drop-shadow(0 16px 22px rgba(0,0,0,.55)) drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
/* Body de la card: copia el estilo de los reels */
.live-catalog.dark .catalog-card .reel-cover-body {
background: #0a0e1a !important;
padding: 1rem 1.1rem 1.25rem !important;
}
.live-catalog.dark .catalog-card .reel-cover-category {
color: #ff8a30 !important;
font-size: .68rem !important;
letter-spacing: .22em !important;
font-weight: 1000 !important;
position: relative;
padding-left: 14px !important;
margin-bottom: .65rem !important;
}
.live-catalog.dark .catalog-card .reel-cover-category::before {
content: ""; position: absolute;
left: 0; top: 50%; transform: translateY(-50%);
width: 8px; height: 2px;
background: #ff6b00;
}
.live-catalog.dark .catalog-card .reel-cover-title {
color: #b8c2d4 !important;
font-size: .98rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
min-height: 2.6rem !important;
}
.live-catalog.dark .catalog-card .reel-cover-price-old {
color: rgba(255,255,255,.32) !important;
font-weight: 600 !important;
}
.live-catalog.dark .catalog-card .reel-cover-price {
color: #f5f0e6 !important;
font-size: 1.4rem !important;
font-weight: 900 !important;
text-shadow: 0 0 24px rgba(255,140,50,.18);
}
.live-catalog.dark .catalog-card .reel-cover-price::first-letter {
color: #ff8a30 !important;
}
.live-catalog.dark .catalog-card .reel-cover-installments {
color: rgba(147,197,253,.85) !important;
font-size: .76rem !important;
display: inline-flex !important;
align-items: center;
gap: .35rem;
}
.live-catalog.dark .catalog-card .reel-cover-installments::before {
content: "";
width: 4px; height: 4px;
border-radius: 999px;
background: #93c5fd;
flex-shrink: 0;
}
/* Stock chip */
.live-catalog.dark .catalog-stock {
background: rgba(34,197,94,.18) !important;
color: #86efac !important;
border: 1px solid rgba(34,197,94,.4);
}
.live-catalog.dark .catalog-stock.out {
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.5) !important;
border-color: rgba(255,255,255,.15);
}
.live-catalog.dark .reel-discount {
background: #ff3d00 !important;
color: white !important;
border: 1px solid rgba(255,255,255,.2);
box-shadow: 0 6px 14px rgba(255,61,0,.35);
font-weight: 1000 !important;
}
/* Empty state */
.live-catalog.dark .catalog-empty {
background: rgba(255,255,255,.04) !important;
border: 1px dashed rgba(255,255,255,.2) !important;
color: rgba(255,255,255,.7) !important;
}
/* ============================================================
MODAL DE PRODUCTO — Diseño profesional Milwaukee/Logus
Principios: dark plano, jerarquía limpia, 1 accent (naranja),
sin glows ni text-shadows exagerados.
============================================================ */
.reel-modal {
background: rgba(2,6,23,.92) !important;
backdrop-filter: blur(12px) !important;
padding: 1.5rem !important;
z-index: 200 !important;
}
body:has(.reel-modal.open) { overflow: hidden; }
.reel-modal-panel {
width: min(92rem, calc(100vw - 3rem)) !important;
height: min(54rem, calc(100vh - 3rem)) !important;
max-height: calc(100vh - 3rem) !important;
border-radius: 0 !important;
background: #04081f !important;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 40px 90px rgba(0,0,0,.6) !important;
position: relative;
overflow: hidden;
animation: modalIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalIn {
from { transform: translateY(12px) scale(.98); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
/* === HEADER del modal: limpio, sobrio === */
.reel-modal-panel > .flex.items-center {
background: #0a0e1a !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
padding: .9rem 4.5rem .9rem 1.5rem !important;
position: relative;
min-height: 4.5rem;
}
.reel-modal-panel [data-reel-kind] {
color: rgba(255,138,48,.9) !important;
font-size: .64rem !important;
letter-spacing: .2em !important;
font-weight: 800 !important;
text-transform: uppercase;
}
.reel-modal-panel #reel-modal-title {
color: white !important;
font-size: clamp(.96rem, 1.15vw, 1.18rem) !important;
font-weight: 800 !important;
letter-spacing: -.005em;
margin-top: .15rem;
line-height: 1.15;
white-space: normal;
overflow: visible;
text-overflow: clip;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-width: min(31vw, 21rem);
}
/* Chips comerciales en el header: sutiles, no compiten con el contenido */
.reel-modal-panel > .modal-product-header.flex.items-center {
position: relative;
display: grid !important;
grid-template-columns: minmax(260px, 1fr) minmax(300px, 500px) auto;
align-items: center;
gap: clamp(.75rem, 1.4vw, 1.1rem) !important;
min-height: 86px;
padding-right: 4.7rem !important;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(760px 180px at 50% 50%, rgba(61,178,207,.36), transparent 64%),
radial-gradient(520px 150px at 12% 0%, rgba(92,202,224,.26), transparent 62%),
radial-gradient(420px 140px at 90% 15%, rgba(0,78,112,.46), transparent 68%),
linear-gradient(135deg, #063348 0%, #0a6c86 48%, #06344b 100%) !important;
border-bottom: 1px solid rgba(95,215,240,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
inset 0 -1px 0 rgba(0,0,0,.28);
}
.reel-modal-panel > .modal-product-header.flex.items-center::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(120deg, transparent 0 28%, rgba(255,255,255,.08) 39%, transparent 50% 100%),
repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 8px),
repeating-radial-gradient(circle at 48% 48%, rgba(255,255,255,.055) 0 1px, transparent 1px 10px),
radial-gradient(circle at 54% 48%, rgba(255,255,255,.12), transparent 36%);
opacity: .72;
pointer-events: none;
z-index: -1;
}
.modal-brand-mark {
--brand-rx: 0deg;
--brand-ry: 0deg;
position: relative;
justify-self: center;
width: min(100%, 610px);
height: 78px;
transform:
perspective(720px)
rotateX(var(--brand-rx))
rotateY(var(--brand-ry));
display: grid;
place-items: center;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
pointer-events: auto;
transform-style: preserve-3d;
transition: transform .16s ease;
overflow: visible;
}
.modal-brand-mark::before,
.modal-brand-mark::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.modal-brand-mark::before {
display: none;
}
.modal-brand-mark::after {
inset: 2px 7%;
height: auto;
border-radius: 999px;
background:
radial-gradient(ellipse at center, rgba(255,107,0,.30), transparent 58%),
radial-gradient(ellipse at center, rgba(255,255,255,.16), transparent 48%);
filter: blur(18px);
transform: translateZ(-34px);
opacity: .72;
mix-blend-mode: screen;
}
.modal-brand-mark img {
position: relative;
z-index: 2;
width: 96%;
max-height: 68px;
object-fit: contain;
filter:
drop-shadow(0 8px 14px rgba(0,0,0,.50))
drop-shadow(0 0 18px rgba(255,255,255,.18))
drop-shadow(0 0 24px rgba(255,107,0,.36));
transform: translateZ(36px);
animation:
modalBrandBreath 3.8s ease-in-out infinite,
modalBrandPulse 5.6s ease-in-out infinite;
}
.modal-brand-orbit {
position: absolute;
inset: 6px 2%;
border: 0;
transform: translateZ(16px);
opacity: .55;
}
.modal-brand-orbit::before,
.modal-brand-orbit::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
border-radius: 999px;
background: #ff6b00;
box-shadow: 0 0 16px rgba(255,107,0,.95);
}
.modal-brand-orbit::before {
top: -3px;
left: 18%;
animation: modalBrandDotA 4.4s ease-in-out infinite;
}
.modal-brand-orbit::after {
right: 16%;
bottom: -3px;
animation: modalBrandDotB 4.4s ease-in-out infinite;
}
.modal-brand-mark:hover {
box-shadow: none !important;
}
@keyframes modalBrandBreath {
0%, 100% { transform: translateZ(36px) scale(1); opacity: .94; }
50% { transform: translateZ(50px) scale(1.06); opacity: 1; }
}
@keyframes modalBrandPulse {
0%, 68%, 100% {
filter:
drop-shadow(0 8px 14px rgba(0,0,0,.50))
drop-shadow(0 0 18px rgba(255,255,255,.18))
drop-shadow(0 0 24px rgba(255,107,0,.36));
}
76% {
filter:
drop-shadow(0 10px 18px rgba(0,0,0,.55))
drop-shadow(0 0 26px rgba(255,255,255,.38))
drop-shadow(0 0 44px rgba(255,107,0,.72));
}
}
@keyframes modalBrandSweep {
0%, 42% { transform: translateX(-125%); opacity: 0; }
55% { opacity: .8; }
72%, 100% { transform: translateX(125%); opacity: 0; }
}
@keyframes modalBrandDotA {
0%, 100% { left: 18%; opacity: .35; }
50% { left: 74%; opacity: 1; }
}
@keyframes modalBrandDotB {
0%, 100% { right: 16%; opacity: .45; }
50% { right: 70%; opacity: 1; }
}
.reel-modal-panel .modal-commerce {
display: flex; align-items: center; justify-content: flex-end; gap: .4rem;
flex-wrap: nowrap;
flex-shrink: 0;
position: relative;
z-index: 3;
}
.reel-modal-panel .modal-promo-chip {
background: transparent !important;
color: rgba(255,255,255,.7) !important;
border: 1px solid rgba(255,255,255,.15) !important;
font-size: .68rem !important;
font-weight: 700 !important;
letter-spacing: .04em;
padding: .3rem .55rem !important;
white-space: nowrap;
border-radius: 0 !important;
}
.reel-modal-panel .modal-whatsapp {
background: #16a34a !important;
color: white !important;
font-size: .72rem !important;
font-weight: 800 !important;
letter-spacing: .04em;
padding: .45rem .85rem !important;
display: inline-flex; align-items: center;
border-radius: 0 !important;
border: 1px solid #16a34a;
transition: background .2s ease;
}
.reel-modal-panel .modal-whatsapp:hover {
background: #15803d !important;
}
/* BOTÓN CLOSE — discreto, naranja al hover */
.reel-modal-panel [data-reel-close] {
position: absolute !important;
top: .85rem !important;
right: .85rem !important;
z-index: 100 !important;
width: 36px !important;
height: 36px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.85) !important;
border: 1px solid rgba(255,255,255,.15) !important;
font-size: 0 !important;
display: grid !important;
place-items: center;
backdrop-filter: blur(8px);
box-shadow: none !important;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
cursor: pointer;
}
.reel-modal-panel [data-reel-close]::before {
content: "";
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
display: block;
opacity: .85;
}
.reel-modal-panel [data-reel-close]:hover {
background: #ff6b00 !important;
border-color: #ff6b00 !important;
transform: rotate(90deg);
}
.reel-modal-panel [data-reel-close]:hover::before { opacity: 1; }
.reel-modal-panel [data-reel-close]:focus-visible {
outline: 2px solid rgba(255,107,0,.5);
outline-offset: 3px;
}
@media (max-width: 1180px) {
.reel-modal-panel .modal-product-header {
grid-template-columns: minmax(240px, 1fr) minmax(210px, 300px) auto;
gap: .7rem !important;
}
.reel-modal-panel #reel-modal-title {
max-width: min(34vw, 18rem);
}
.modal-brand-mark {
width: min(100%, 350px);
height: 58px;
}
.modal-brand-mark img {
max-height: 48px;
}
}
@media (max-width: 980px) {
.reel-modal-panel .modal-product-header {
grid-template-columns: 1fr auto;
grid-template-areas:
"title commerce"
"brand brand";
padding-right: 3.9rem !important;
row-gap: .45rem !important;
}
.reel-modal-panel .modal-product-header > .min-w-0 {
grid-area: title;
min-width: 0;
}
.reel-modal-panel #reel-modal-title {
max-width: 100%;
}
.modal-brand-mark {
grid-area: brand;
justify-self: start;
width: min(100%, 330px);
height: 48px;
}
.modal-brand-mark img {
max-height: 40px;
}
.reel-modal-panel .modal-commerce {
grid-area: commerce;
}
}
@media (max-width: 720px) {
.reel-modal-panel .modal-product-header {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"commerce";
padding-right: 3.6rem !important;
min-height: 94px;
}
.reel-modal-panel #reel-modal-title {
white-space: normal;
max-width: 100%;
-webkit-line-clamp: 3;
}
.reel-modal-panel .modal-commerce {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
.modal-brand-mark,
.reel-modal-panel .modal-promo-chip {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.modal-brand-mark,
.modal-brand-mark img,
.modal-brand-mark::before,
.modal-brand-orbit::before,
.modal-brand-orbit::after {
animation: none !important;
transition: none !important;
}
}
/* === PREVIEW PANEL ESTILO MERCADO LIBRE — aparece al costado del thumb === */
.reel-modal-panel .product-thumbs {
position: relative;
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
overflow-y: auto !important;
overflow-x: hidden !important;
height: 100% !important;
scrollbar-width: thin;
scrollbar-color: rgba(255,107,0,.6) rgba(15,23,42,.06);
}
.reel-modal-panel .product-thumbs::-webkit-scrollbar {
width: 7px;
}
.reel-modal-panel .product-thumbs::-webkit-scrollbar-track {
background: rgba(15,23,42,.04);
border-radius: 4px;
}
.reel-modal-panel .product-thumbs::-webkit-scrollbar-thumb {
background: rgba(255,107,0,.55);
border-radius: 4px;
}
.reel-modal-panel .product-thumbs::-webkit-scrollbar-thumb:hover {
background: rgba(255,107,0,.8);
}
.reel-modal-panel .product-thumb {
position: relative;
overflow: hidden;
isolation: isolate;
width: 100% !important;
flex-shrink: 0 !important;
}
.reel-modal-panel .product-thumb-more {
width: 100% !important;
flex-shrink: 0 !important;
}
.reel-modal-panel .product-thumb.is-previewing {
z-index: 200;
}
/* Quitar el recuadro naranja activo cuando NO hay hover ni preview */
.reel-modal-panel .product-thumb.active:not(:hover):not(.is-previewing) {
border-color: rgba(255,255,255,.08) !important;
box-shadow: none !important;
}
.reel-modal-panel .product-gallery-main {
border-color: rgba(255,255,255,.08) !important;
}
/* === Panel preview flotante === */
.thumb-preview {
position: fixed; /* coordenadas calculadas por JS */
pointer-events: none;
background: linear-gradient(180deg, #14182a 0%, #0a0e1a 100%);
border: 1px solid rgba(255,107,0,.45);
overflow: hidden;
opacity: 0;
/* z-index alto para que aparezca SOBRE el section-panel-overlay (z-index 9990)
y la galería completa, sin perder visibilidad en otros contextos */
z-index: 10001;
box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(255,107,0,.15);
will-change: width, height, top, left;
/* Animación de cierre suave: cuando JS pone width/height en 0, transiciona */
transition: opacity .18s ease, width .25s cubic-bezier(.4,0,.2,1), height .25s cubic-bezier(.4,0,.2,1), top .25s cubic-bezier(.4,0,.2,1), left .25s cubic-bezier(.4,0,.2,1);
}
.thumb-preview.is-active { opacity: 1; }
/* Mientras el panel está creciendo activamente, sin transición (el JS lo controla) */
.thumb-preview.is-active.is-growing {
transition: opacity .18s ease;
}
/* Imágenes del preview: dos capas para cross-fade entre cambios */
.thumb-preview img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: var(--pan-x, 50%) var(--pan-y, 50%);
transform: scale(var(--pan-zoom, 1));
transition: transform .12s ease-out, opacity .35s ease;
will-change: transform, opacity;
}
.thumb-preview img.is-fading {
opacity: 0;
}
/* Video element en el preview — mismas props de pan/zoom que las imgs */
.thumb-preview video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
transform-origin: var(--pan-x, 50%) var(--pan-y, 50%);
transform: scale(var(--pan-zoom, 1));
transition: transform .12s ease-out, opacity .35s ease;
display: none;
will-change: transform, opacity;
}
.thumb-preview.is-video video { display: block; }
.thumb-preview.is-video img { display: none; }
/* Cuando el panel está locked (foto o video), pointer-events: auto para captar clicks */
.thumb-preview.is-pan { pointer-events: auto; cursor: pointer; }
/* El cursor flotante "+" / "×" se ocultó por pedido del usuario — la acción sigue funcionando */
.thumb-preview-zoom-cursor { display: none !important; }
/* Video thumb intercalado en la columna principal (.product-thumbs).
Es un poco más alto que los thumbs de fotos (8.2rem) para respetar el aspect del video
y evitar las franjas grises laterales. */
.product-thumb.product-thumb-video {
position: relative;
overflow: hidden;
padding: 0;
flex: 0 0 11.5rem !important;
min-height: 11.5rem !important;
}
.product-thumb.product-thumb-video .video-thumb-wrap {
position: absolute;
inset: 0;
aspect-ratio: auto;
width: 100%;
height: 100%;
background: #000;
}
.product-thumb.product-thumb-video .video-thumb-poster,
.product-thumb.product-thumb-video .video-thumb-player {
width: 100% !important;
height: 100% !important;
object-fit: cover;
padding: 0 !important;
}
/* Cuando muestra video, el panel es clickeable (para disparar el expand cycle) */
.thumb-preview.is-video {
pointer-events: auto;
cursor: pointer;
}
/* Pantalla del video LIMPIA: ocultar todos los UI labels/tags/bars internos.
Las instrucciones se muestran en el hint externo (.thumb-preview-video-hint) */
.thumb-preview.is-video .thumb-preview-label,
.thumb-preview.is-video .thumb-preview-tag,
.thumb-preview.is-video .thumb-preview-bar,
.thumb-preview.is-video .thumb-preview-edge-right,
.thumb-preview.is-video .thumb-preview-edge-left {
display: none !important;
}
/* Hint externo: pill abajo del panel con la próxima acción */
.thumb-preview-video-hint {
position: fixed;
top: 0; left: 0;
transform: translate(-50%, 0);
padding: .55rem 1.1rem;
background: rgba(2,6,23,.92);
color: white;
border: 1px solid rgba(255,107,0,.55);
border-radius: 999px;
font-size: .82rem;
font-weight: 800;
letter-spacing: .04em;
pointer-events: none;
opacity: 0;
z-index: 10003;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: opacity .25s ease, left .25s cubic-bezier(.4,0,.2,1), top .25s cubic-bezier(.4,0,.2,1);
white-space: nowrap;
box-shadow: 0 8px 22px rgba(0,0,0,.55);
}
.thumb-preview-video-hint.is-visible { opacity: 1; }
.thumb-preview img.is-incoming {
animation: imgIncoming .4s ease forwards;
}
@keyframes imgIncoming {
from { opacity: 0; transform: scale(var(--pan-zoom, 1)) translateX(var(--inDir, 12px)); }
to { opacity: 1; transform: scale(var(--pan-zoom, 1)) translateX(0); }
}
/* Counter externo "Imagen 2 de 4" — fuera del box de imagen */
.thumb-preview-counter {
position: fixed;
top: 0; left: 0;
transform: translate(-50%, 18px);
background: rgba(2,6,23,.92);
color: white;
border: 1px solid rgba(255,107,0,.5);
padding: .55rem 1.1rem;
font-size: .82rem;
font-weight: 800;
letter-spacing: .06em;
display: inline-flex;
align-items: center;
gap: .6rem;
z-index: 10002;
pointer-events: none;
opacity: 0;
transition: opacity .25s ease, left .35s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1);
backdrop-filter: blur(8px);
box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.thumb-preview-counter.is-visible { opacity: 1; }
.thumb-preview-counter .arrow {
display: inline-block;
font-size: 1rem;
color: rgba(255,255,255,.5);
transition: color .2s ease, transform .2s ease;
}
.thumb-preview-counter.is-prev .arrow.up { color: #ff8a30; transform: translateY(-2px); }
.thumb-preview-counter.is-next .arrow.down { color: #ff8a30; transform: translateY(2px); }
.thumb-preview-counter .count {
font-weight: 1000;
letter-spacing: .04em;
}
.thumb-preview-counter .total {
color: rgba(255,255,255,.6);
font-weight: 700;
}
.thumb-preview-counter .num-current {
display: inline-block;
min-width: 1.2rem;
text-align: center;
color: #ffd29a;
transition: transform .25s ease;
}
.thumb-preview-counter.is-flashing .num-current {
animation: counterFlash .35s ease;
}
@keyframes counterFlash {
0% { transform: scale(1); color: #ffd29a; }
40% { transform: scale(1.4); color: #ff6b00; }
100% { transform: scale(1); color: #ffd29a; }
}
/* Barra naranja inferior dentro del panel — acompaña el crecimiento */
.thumb-preview-bar {
position: absolute;
bottom: .5rem; left: 1rem; right: 1rem;
height: 4px;
background: rgba(255,255,255,.15);
border-radius: 999px;
z-index: 5;
pointer-events: none;
box-shadow: 0 4px 10px rgba(0,0,0,.5);
overflow: hidden;
}
.thumb-preview-bar-fill {
height: 100%;
background: linear-gradient(90deg, #ffb27a, #ff8a30, #ff5a00);
border-radius: 999px;
width: var(--preview-progress, 0%);
box-shadow: 0 0 12px rgba(255,107,0,.6), inset 0 0 4px rgba(255,255,255,.3);
transition: width .1s linear;
}
/* Shimmer SOLO cuando está en pan locked (navegando), no en HOLD */
.thumb-preview.is-pan-locked .thumb-preview-bar-fill {
background: linear-gradient(90deg, #ffd29a, #ff8a30, #ffd29a, #ff8a30);
background-size: 300% 100%;
animation: panShimmer 1.6s linear infinite;
}
@keyframes panShimmer {
0% { background-position: 0% 0%; }
100% { background-position: 300% 0%; }
}
@keyframes labelFlash {
0% { transform: scale(1); background: rgba(2,6,23,.85); }
50% { transform: scale(1.15); background: #ff6b00; }
100% { transform: scale(1); background: rgba(2,6,23,.85); }
}
/* Label "1.0×" o "PAN" arriba derecha */
.thumb-preview-label {
position: absolute;
top: .6rem; right: 3.5rem; /* deja espacio para el botón close */
background: rgba(2,6,23,.85);
color: white;
border: 1px solid rgba(255,107,0,.45);
padding: .25rem .6rem;
font-size: .7rem;
font-weight: 800;
letter-spacing: .08em;
z-index: 5;
pointer-events: none;
}
/* === BORDES SEGUROS — barras finas en los lados, NUNCA encima de la imagen === */
/* La imagen ocupa todo el centro del panel sin obstrucción.
Estas marcas son tipo "safe area frame" en los bordes. */
/* === Strip de thumbs debajo del panel — selector horizontal de imágenes === */
.thumb-preview-strip {
position: fixed;
top: 0; left: 0;
transform: translate(-50%, 0);
display: flex;
gap: .5rem;
padding: .5rem .65rem;
background: rgba(2,6,23,.92);
border: 1px solid rgba(255,107,0,.4);
z-index: 10002;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease, left .35s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1);
backdrop-filter: blur(10px);
box-shadow: 0 14px 32px rgba(0,0,0,.55);
}
.thumb-preview-strip.is-visible {
opacity: 1;
pointer-events: auto;
}
.thumb-preview-strip-item {
width: 60px;
height: 60px;
background: rgba(255,255,255,.04);
border: 2px solid rgba(255,255,255,.08);
padding: 0;
cursor: pointer;
overflow: hidden;
transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.thumb-preview-strip-item img {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
.thumb-preview-strip-item:hover {
transform: translateY(-3px);
border-color: rgba(255,107,0,.5);
background: rgba(255,107,0,.08);
}
.thumb-preview-strip-item.is-active {
border-color: #ff6b00;
box-shadow: 0 6px 14px rgba(255,107,0,.35);
}
/* Borde derecho: zona de "→ activar pan" (visible en hold, sin pan locked) */
.thumb-preview-edge-right {
position: absolute;
top: 8%; bottom: 8%; right: 0;
width: 14px;
background: linear-gradient(90deg, transparent, rgba(255,107,0,.55));
border-right: 3px solid rgba(255,107,0,.6);
pointer-events: none;
opacity: 0;
transition: opacity .25s ease, width .2s ease;
z-index: 6;
}
.thumb-preview.is-pan:not(.is-pan-locked) .thumb-preview-edge-right {
opacity: 1;
animation: edgePulseRight 1.4s ease-in-out infinite;
}
.thumb-preview.is-pan-locked .thumb-preview-edge-right { opacity: 0; }
@keyframes edgePulseRight {
0%, 100% { width: 12px; box-shadow: -4px 0 12px rgba(255,107,0,.3); }
50% { width: 18px; box-shadow: -8px 0 18px rgba(255,107,0,.55); }
}
/* Borde izquierdo: zona de "← salir del pan" (visible solo cuando pan está locked) */
.thumb-preview-edge-left {
position: absolute;
top: 8%; bottom: 8%; left: 0;
width: 14px;
background: linear-gradient(270deg, transparent, rgba(255,107,0,.55));
border-left: 3px solid rgba(255,107,0,.6);
pointer-events: none;
opacity: 0;
transition: opacity .25s ease, width .2s ease;
z-index: 6;
}
.thumb-preview.is-pan-locked .thumb-preview-edge-left {
opacity: 1;
animation: edgePulseLeft 1.4s ease-in-out infinite;
}
@keyframes edgePulseLeft {
0%, 100% { width: 12px; box-shadow: 4px 0 12px rgba(255,107,0,.3); }
50% { width: 18px; box-shadow: 8px 0 18px rgba(255,107,0,.55); }
}
/* Tags pequeños "ACTIVAR PAN →" / "← SALIR" — fuera del área de la imagen */
.thumb-preview-tag {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: .58rem;
font-weight: 1000;
letter-spacing: .18em;
color: rgba(255,255,255,.85);
background: rgba(255,107,0,.85);
padding: .35rem .55rem;
white-space: nowrap;
writing-mode: vertical-rl;
text-orientation: mixed;
pointer-events: none;
opacity: 0;
z-index: 7;
transition: opacity .25s ease;
}
.thumb-preview-tag.right { right: 18px; }
.thumb-preview-tag.left { left: 18px; }
/* Ocultar los tags ACTIVAR PAN / SALIR — el flujo es 100% click-driven, los hints
van por el cursor flotante "+" / "×" + el label arriba. */
.thumb-preview .thumb-preview-tag { display: none !important; }
.thumb-preview-edge-right,
.thumb-preview-edge-left { display: none !important; }
/* Botón cerrar dentro del panel preview — visible solo en modo pan */
.thumb-preview-close {
position: absolute;
top: .55rem; right: .55rem;
width: 36px; height: 36px;
border-radius: 999px;
background: rgba(2,6,23,.85);
border: 1px solid rgba(255,107,0,.55);
color: white;
font-size: 0;
z-index: 10;
display: grid;
place-items: center;
cursor: pointer;
pointer-events: none; /* default: no clickeable */
opacity: 0;
transform: scale(.8);
transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), background .2s ease;
backdrop-filter: blur(8px);
}
.thumb-preview-close::before {
content: "";
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
.thumb-preview.is-pan .thumb-preview-close {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.thumb-preview-close:hover {
background: #ff6b00;
border-color: #ff6b00;
transform: scale(1.05) rotate(90deg);
}
/* Flecha "→" indicadora antes del zoom — sobre el thumb */
.product-thumb-arrow {
position: absolute;
right: .4rem; top: 50%;
transform: translateY(-50%);
width: 28px; height: 28px;
background: rgba(255,107,0,.92);
border: 1px solid rgba(255,255,255,.25);
border-radius: 999px;
display: grid; place-items: center;
color: white;
font-weight: 1000;
font-size: .9rem;
z-index: 6;
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
box-shadow: 0 4px 12px rgba(255,107,0,.5);
}
.reel-modal-panel .product-thumb:hover .product-thumb-arrow {
opacity: 1;
animation: thumbArrowPulse 1.1s ease-in-out infinite;
}
.reel-modal-panel .product-thumb.is-previewing .product-thumb-arrow {
opacity: 0;
}
@keyframes thumbArrowPulse {
0%, 100% { transform: translateY(-50%) translateX(0); }
50% { transform: translateY(-50%) translateX(5px); }
}
/* === ZOOM HOVER en imagen del producto (estilo Mercado Libre) === */
.reel-modal-panel .product-gallery-main {
position: relative;
overflow: hidden;
cursor: zoom-in;
}
.reel-modal-panel .product-gallery-main img {
transform: scale(var(--zoom, 1));
transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
transition: transform .15s ease-out;
will-change: transform;
}
/* Barra naranja indicadora de zoom — aparece al hover */
.zoom-bar {
position: absolute;
left: 1.2rem; right: 1.2rem; bottom: 1rem;
height: 4px;
background: rgba(255,255,255,.18);
border-radius: 999px;
opacity: 0;
transition: opacity .25s ease;
z-index: 5;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.product-gallery-main:hover .zoom-bar { opacity: 1; }
.zoom-bar-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
width: var(--zoom-pct, 0%);
background: linear-gradient(90deg, #ff8a30, #ff5a00);
border-radius: 999px;
transition: width .12s linear;
box-shadow: 0 0 12px rgba(255,107,0,.6);
}
.zoom-bar-thumb {
position: absolute;
top: 50%;
left: var(--zoom-pct, 0%);
width: 14px; height: 14px;
background: white;
border: 2px solid #ff6b00;
border-radius: 999px;
transform: translate(-50%, -50%);
box-shadow: 0 4px 10px rgba(0,0,0,.5);
transition: left .12s linear;
}
.zoom-bar-label {
position: absolute;
top: -28px; left: var(--zoom-pct, 0%);
transform: translateX(-50%);
background: rgba(2,6,23,.85);
color: white;
padding: .2rem .55rem;
border: 1px solid rgba(255,107,0,.5);
font-size: .68rem;
font-weight: 800;
letter-spacing: .04em;
white-space: nowrap;
border-radius: 0;
transition: left .12s linear;
}
/* === GRID del contenido === */
.reel-modal-panel > .grid {
background: transparent !important;
height: calc(100% - 4.5rem) !important;
}
/* Lado del video: dark plano sin radials ni patrones */
.reel-modal-panel > .grid > .bg-gray-950 {
background: #02050f !important;
padding: 1.25rem !important;
display: flex !important;
align-items: center;
justify-content: center;
}
.reel-modal-panel > .grid > .bg-gray-950::before { display: none; }
/* === RESET masivo: todos los wrappers internos del modal a dark === */
.reel-modal-panel .product-browser,
.reel-modal-panel .product-browser-top,
.reel-modal-panel .product-detail-scroll,
.reel-modal-panel .product-virtues,
.reel-modal-panel .product-story {
background: transparent !important;
color: white !important;
}
/* Galería principal: bg dark suave */
.reel-modal-panel .product-gallery-main {
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.08) !important;
box-shadow: none !important;
}
/* Thumbs verticales */
.reel-modal-panel .product-thumb {
background: rgba(255,255,255,.04) !important;
border: 2px solid rgba(255,255,255,.08) !important;
box-shadow: none !important;
}
.reel-modal-panel .product-thumb:hover {
border-color: rgba(255,107,0,.55) !important;
box-shadow: none !important;
}
/* Selección: un único borde más grueso, sin halo extra */
.reel-modal-panel .product-thumb.active {
border: 3px solid #ff6b00 !important;
box-shadow: none !important;
}
.reel-modal-panel .product-thumb-more {
background: rgba(255,107,0,.08) !important;
border: 2px dashed rgba(255,107,0,.45) !important;
color: white !important;
box-shadow: none !important;
}
.reel-modal-panel .product-thumb-more strong { color: white !important; }
.reel-modal-panel .product-thumb-more span { color: rgba(255,255,255,.55) !important; }
/* Highlights cards (4 chips de specs) */
.reel-modal-panel .product-highlight {
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.08) !important;
box-shadow: none !important;
}
.reel-modal-panel .product-highlight span {
background: rgba(21,93,252,.18) !important;
color: #93c5fd !important;
}
.reel-modal-panel .product-highlight strong { color: white !important; }
.reel-modal-panel .product-highlight small { color: rgba(255,255,255,.55) !important; }
/* Price card */
.reel-modal-panel .product-price-card {
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.08) !important;
box-shadow: none !important;
}
.reel-modal-panel .product-price-card [data-product-price] {
color: white !important;
font-weight: 800 !important;
font-size: 1.7rem !important;
}
.reel-modal-panel .product-price-card [data-product-price] + span {
color: #86efac !important;
}
/* Meta y rating */
.reel-modal-panel .ml-product-meta {
color: rgba(255,255,255,.55) !important;
}
.reel-modal-panel .ml-product-rating {
color: #fbbf24 !important;
}
.reel-modal-panel .ml-product-rating span {
color: rgba(255,255,255,.55) !important;
}
/* Virtue hero (si aparece dentro del modal) */
.reel-modal-panel .product-virtue-hero {
background: rgba(255,255,255,.03) !important;
color: white !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
/* Video: limpio, sombra discreta, sin tilt 3D */
.reel-modal-video {
aspect-ratio: 9/16 !important;
width: min(20rem, 100%) !important;
max-height: calc(100% - .5rem) !important;
border-radius: .5rem !important;
box-shadow: 0 16px 40px rgba(0,0,0,.5) !important;
cursor: pointer;
transition: transform .25s ease;
}
.reel-modal-video:hover { transform: scale(1.01); }
/* Lado de la ficha: dark plano */
.reel-modal-panel > .grid > .bg-white {
background: #04081f !important;
color: white !important;
border-left: 1px solid rgba(255,255,255,.06);
overflow-y: auto;
}
/* === FICHA DEL PRODUCTO === */
/* Pill categoría */
.reel-modal-panel .product-pill,
.reel-modal-panel [data-product-category] {
display: inline-block !important;
background: rgba(255,107,0,.12) !important;
color: #ff8a30 !important;
border: 1px solid rgba(255,107,0,.3) !important;
padding: .3rem .7rem !important;
font-size: .65rem !important;
font-weight: 800 !important;
letter-spacing: .14em !important;
text-transform: uppercase;
border-radius: 999px !important;
}
/* Meta "Nuevo | +100 vendidos" */
.reel-modal-panel .ml-product-meta {
color: rgba(255,255,255,.55) !important;
font-size: .8rem !important;
margin-top: .65rem;
}
/* Título producto: SIN tamaño exagerado, peso 800 */
.reel-modal-panel [data-product-name] {
font-size: 1.4rem !important;
font-weight: 800 !important;
line-height: 1.25 !important;
letter-spacing: -.005em !important;
color: white !important;
text-transform: none !important;
margin-top: .75rem !important;
text-shadow: none !important;
}
/* Rating */
.reel-modal-panel .ml-product-rating {
display: inline-block;
margin-top: .6rem !important;
color: #fbbf24 !important;
font-size: .85rem;
font-weight: 700;
}
.reel-modal-panel .ml-product-rating span {
color: rgba(255,255,255,.5);
font-weight: 600;
margin-left: .3rem;
}
/* Summary */
.reel-modal-panel [data-product-summary] {
color: rgba(255,255,255,.7) !important;
font-size: .92rem !important;
line-height: 1.55 !important;
margin-top: .65rem !important;
}
/* Card de precio principal */
.reel-modal-panel .product-price-card {
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.08) !important;
padding: 1rem 1.1rem !important;
border-radius: 0 !important;
margin-top: 1rem !important;
}
.reel-modal-panel [data-product-old-price] {
color: rgba(255,255,255,.4) !important;
text-decoration: line-through;
font-size: .85rem !important;
}
.reel-modal-panel [data-product-discount] {
background: rgba(239,68,68,.18) !important;
color: #fca5a5 !important;
border: 1px solid rgba(239,68,68,.4);
font-weight: 800 !important;
font-size: .68rem !important;
border-radius: 0 !important;
padding: .2rem .5rem !important;
letter-spacing: .04em;
}
.reel-modal-panel [data-product-price] {
display: block !important;
font-size: 1.7rem !important;
font-weight: 800 !important;
color: white !important;
letter-spacing: -.015em !important;
margin-top: .4rem !important;
line-height: 1.1 !important;
text-shadow: none !important;
}
.reel-modal-panel [data-product-price]::first-letter {
color: #ff8a30 !important;
margin-right: 1px;
}
/* Aside box "Consultar este producto" */
.reel-modal-panel .ml-action-box {
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 0 !important;
padding: 1.2rem !important;
color: white !important;
}
.reel-modal-panel .ml-action-box h5 {
color: rgba(255,255,255,.6) !important;
font-size: .7rem !important;
font-weight: 800 !important;
letter-spacing: .12em !important;
text-transform: uppercase;
margin-bottom: .8rem;
}
/* Aside: precio (sin glow exagerado) */
.reel-modal-panel [data-action-old-price] {
display: inline-block;
color: rgba(255,255,255,.4) !important;
text-decoration: line-through;
font-size: .82rem;
margin-right: .5rem;
}
.reel-modal-panel [data-action-price] {
display: inline-block !important;
font-size: 1.7rem !important;
font-weight: 800 !important;
color: white !important;
letter-spacing: -.015em !important;
line-height: 1.1 !important;
text-shadow: none !important;
}
.reel-modal-panel [data-action-price]::first-letter {
color: #ff8a30 !important;
margin-right: 1px;
}
.reel-modal-panel .ml-action-discount {
display: inline-block;
margin-left: .5rem;
background: rgba(239,68,68,.18);
color: #fca5a5;
border: 1px solid rgba(239,68,68,.4);
padding: .2rem .5rem;
font-size: .68rem;
font-weight: 800;
letter-spacing: .04em;
}
.reel-modal-panel .ml-action-installments {
color: #93c5fd !important;
font-size: .78rem !important;
font-weight: 700;
margin-top: .35rem;
}
/* Highlights (4 cards) */
.reel-modal-panel .product-highlights {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: .5rem;
margin: 1rem 0;
}
.reel-modal-panel .product-highlights > * {
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 0 !important;
padding: .65rem .8rem !important;
font-size: .8rem !important;
color: rgba(255,255,255,.85) !important;
transition: border-color .2s ease, background .2s ease;
}
.reel-modal-panel .product-highlights > *:hover {
border-color: rgba(255,107,0,.4) !important;
background: rgba(255,107,0,.06) !important;
}
/* Línea de envío */
.reel-modal-panel .ml-shipping-line {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,.08);
font-size: .82rem;
color: rgba(255,255,255,.6);
line-height: 1.45;
}
.reel-modal-panel .ml-shipping-line strong {
display: block;
color: white !important;
font-weight: 800;
margin-bottom: .25rem;
}
/* Stock + cantidad */
.reel-modal-panel .ml-stock-line {
color: #86efac !important;
font-weight: 800;
font-size: .85rem;
margin-top: .9rem;
}
.reel-modal-panel .ml-quantity-line {
color: rgba(255,255,255,.55);
font-size: .78rem;
margin-top: .25rem;
}
/* CTAs principales: claros, sin glow exagerado */
.reel-modal-panel .ml-primary-btn,
.reel-modal-panel [data-product-whatsapp] {
display: block !important;
text-align: center;
background: #16a34a !important;
color: white !important;
font-weight: 800 !important;
font-size: .9rem !important;
letter-spacing: .04em;
padding: .85rem 1.2rem !important;
border-radius: 0 !important;
border: 1px solid #16a34a;
margin-top: 1rem !important;
transition: background .2s ease;
}
.reel-modal-panel .ml-primary-btn:hover {
background: #15803d !important;
}
.reel-modal-panel .ml-secondary-btn,
.reel-modal-panel [data-product-open] {
display: block !important;
text-align: center;
background: transparent !important;
color: white !important;
font-weight: 800 !important;
font-size: .85rem !important;
letter-spacing: .04em;
padding: .75rem 1.2rem !important;
border-radius: 0 !important;
border: 1px solid rgba(255,255,255,.2) !important;
margin-top: .55rem !important;
transition: border-color .2s ease, background .2s ease;
}
.reel-modal-panel .ml-secondary-btn:hover {
border-color: #ff6b00 !important;
background: rgba(255,107,0,.08) !important;
}
/* Sub-bloques aside */
.reel-modal-panel .ml-seller-mini,
.reel-modal-panel .ml-protection-list {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,.06);
font-size: .78rem;
color: rgba(255,255,255,.55);
line-height: 1.5;
}
.reel-modal-panel .ml-seller-mini strong,
.reel-modal-panel .ml-protection-list strong {
display: block;
color: white !important;
font-weight: 800;
font-size: .82rem;
margin-bottom: .35rem;
letter-spacing: .02em;
}
.reel-modal-panel .ml-protection-list p {
margin: .15rem 0;
}
/* Galería de thumbs */
.reel-modal-panel [data-product-thumbs] {
display: flex !important;
gap: .4rem !important;
flex-wrap: wrap;
margin-top: .75rem;
}
.reel-modal-panel [data-product-thumbs] img {
cursor: pointer !important;
border-radius: 0 !important;
border: 2px solid rgba(255,255,255,.08) !important;
transition: border-color .2s ease;
}
.reel-modal-panel [data-product-thumbs] img:hover {
border-color: #ff6b00 !important;
}
/* Imagen principal: zoom-in cursor */
.reel-modal-panel [data-product-main-image],
.reel-modal-panel [data-image-player-img] {
cursor: zoom-in;
background: rgba(255,255,255,.02);
}
/* === LIGHTBOX para zoom de imágenes === */
.lightbox {
position: fixed; inset: 0;
background: rgba(0,0,0,.96);
backdrop-filter: blur(20px);
z-index: 300;
display: none;
align-items: center;
justify-content: center;
padding: 2rem;
animation: lightboxIn .25s ease;
cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 60px rgba(255,107,0,.15);
cursor: zoom-out;
}
.lightbox-close {
position: absolute;
top: 1rem; right: 1rem;
width: 48px; height: 48px;
border-radius: 999px;
background: #ff6b00;
color: white;
border: 2px solid rgba(255,255,255,.25);
display: grid; place-items: center;
cursor: pointer;
z-index: 1;
box-shadow: 0 8px 22px rgba(255,107,0,.45);
transition: transform .25s ease, background .2s ease;
}
.lightbox-close:hover {
background: #04081f;
border-color: #ff6b00;
transform: rotate(90deg) scale(1.08);
}
.lightbox-close svg { width: 22px; height: 22px; }
@keyframes lightboxIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Scrollbar custom del panel */
.reel-modal-panel > .grid > .bg-white::-webkit-scrollbar { width: 8px; }
.reel-modal-panel > .grid > .bg-white::-webkit-scrollbar-track { background: #04081f; }
.reel-modal-panel > .grid > .bg-white::-webkit-scrollbar-thumb { background: rgba(255,107,0,.3); border-radius: 0; }
.reel-modal-panel > .grid > .bg-white::-webkit-scrollbar-thumb:hover { background: #ff6b00; }
@media (max-width: 768px) {
.reel-modal { padding: 0 !important; }
.reel-modal-panel {
width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
}
}
/* ---------- ZONA DE CIERRE: Soporte + Contacto Milwaukee ---------- */
.closing-zone {
position: relative;
background: #04081f;
color: white;
padding: 6rem 0 5rem;
overflow: hidden;
isolation: isolate;
}
.closing-zone-bg {
position: absolute; inset: 0;
background-image: url("../hero-optimized/hero-cargador.webp");
background-size: cover;
background-position: center 30%;
opacity: .35;
filter: saturate(.9) blur(2px);
z-index: -2;
}
.closing-zone::before {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(4,8,31,.92) 0%, rgba(4,8,31,.85) 50%, rgba(4,8,31,.97) 100%),
radial-gradient(ellipse 60% 40% at 20% 10%, rgba(255,107,0,.18), transparent 65%),
radial-gradient(ellipse 60% 40% at 80% 90%, rgba(21,93,252,.22), transparent 65%);
z-index: -1;
pointer-events: none;
}
.closing-zone::after {
content: ""; position: absolute; inset: 0;
background-image: repeating-linear-gradient(
45deg, rgba(255,255,255,.020) 0 1px, transparent 1px 32px
);
pointer-events: none;
z-index: -1;
}
.closing-wrap {
max-width: 1500px; margin: 0 auto; padding: 0 1.5rem;
position: relative; z-index: 1;
}
/* Header centrado, cinemático */
.closing-head {
text-align: center;
max-width: 56rem;
margin: 0 auto 4rem;
}
.closing-head .eyebrow {
display: inline-block;
padding: .5rem 1.1rem;
background: rgba(255,107,0,.15);
border: 1px solid rgba(255,107,0,.4);
color: #ff8a30;
font-size: .72rem; font-weight: 1000;
letter-spacing: .26em; text-transform: uppercase;
border-radius: 999px;
margin-bottom: 1.4rem;
}
.closing-head h2 {
font-size: clamp(2.4rem, 5.5vw, 4.4rem);
font-weight: 1000;
line-height: 1;
letter-spacing: -.025em;
text-transform: uppercase;
color: white;
text-shadow: 0 6px 26px rgba(0,0,0,.45);
}
.closing-head h2 .accent {
display: block;
background: linear-gradient(120deg, #ffd29a 0%, #ff8a30 50%, #ff5a00 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
margin-top: .15em;
}
.closing-head p {
margin-top: 1.4rem;
color: rgba(255,255,255,.85);
font-size: 1.1rem;
line-height: 1.55;
max-width: 38rem;
margin-left: auto; margin-right: auto;
}
/* Stats badges grandes (igual que support hero original pero brighter) */
.closing-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
max-width: 800px;
margin: 2.5rem auto 4rem;
}
@media (min-width: 700px) { .closing-stats { grid-template-columns: repeat(4, 1fr); } }
.closing-stat {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
padding: 1.4rem 1rem;
text-align: center;
backdrop-filter: blur(8px);
transition: transform .25s ease, border-color .25s ease;
}
.closing-stat:hover {
transform: translateY(-3px);
border-color: rgba(255,107,0,.4);
}
.closing-stat strong {
display: block;
font-size: 2.2rem;
font-weight: 1000;
background: linear-gradient(120deg, #ffb27a, #ff6b00);
-webkit-background-clip: text; background-clip: text;
color: transparent;
line-height: 1;
}
.closing-stat span {
display: block;
font-size: .72rem;
font-weight: 800;
color: rgba(255,255,255,.75);
margin-top: .55rem;
letter-spacing: .14em;
text-transform: uppercase;
}
/* 4 tiles post-venta dentro del cierre (reusa estilo de post-sale) */
.closing-zone .post-sale-grid { margin-bottom: 4rem; }
.closing-zone .post-sale-tile { background: rgba(10,14,26,.85); }
.closing-zone .post-sale-tile:hover { background: rgba(20,24,42,.95); }
/* Contacto rápido (WhatsApp + Email + Centros) */
.closing-contact {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
max-width: 1100px;
margin: 0 auto;
}
@media (min-width: 900px) { .closing-contact { grid-template-columns: 1.3fr 1fr 1fr; } }
.contact-card {
position: relative;
padding: 2rem 1.8rem;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
display: flex; flex-direction: column;
transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.contact-card:hover {
transform: translateY(-3px);
border-color: rgba(255,107,0,.45);
background: rgba(255,255,255,.06);
}
.contact-card.primary {
background: linear-gradient(120deg, #16a34a 0%, #15803d 100%);
border-color: rgba(34,197,94,.6);
}
.contact-card.primary:hover {
background: linear-gradient(120deg, #15803d 0%, #166534 100%);
border-color: #16a34a;
}
.contact-card .label {
font-size: .72rem; font-weight: 1000;
letter-spacing: .2em; text-transform: uppercase;
color: rgba(255,255,255,.7);
margin-bottom: .8rem;
}
.contact-card.primary .label { color: rgba(255,255,255,.95); }
.contact-card .title {
font-size: 1.6rem; font-weight: 1000;
letter-spacing: -.015em;
color: white;
line-height: 1;
}
.contact-card .value {
font-size: 1.05rem; font-weight: 800;
color: rgba(255,255,255,.85);
margin-top: .85rem;
}
.contact-card.primary .value { color: white; }
.contact-card .note {
font-size: .82rem;
color: rgba(255,255,255,.6);
margin-top: .5rem;
}
.contact-card.primary .note { color: rgba(255,255,255,.85); }
/* ---------- POST-VENTA: ¿Ya compraste? (4 tiles Milwaukee-style) ---------- */
.post-sale {
position: relative;
background: #04081f;
color: white;
padding: 4.5rem 0 4rem;
overflow: hidden;
}
.post-sale::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(800px 400px at 0% 0%, rgba(21,93,252,.18), transparent 55%),
radial-gradient(700px 400px at 100% 100%, rgba(255,107,0,.12), transparent 55%);
pointer-events: none;
}
.post-sale-wrap {
max-width: 1500px; margin: 0 auto; padding: 0 1.5rem;
position: relative; z-index: 1;
}
.post-sale-head {
display: flex; align-items: end; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.post-sale-head .eyebrow {
display: inline-block;
padding: .4rem 1rem;
background: rgba(255,107,0,.15);
border: 1px solid rgba(255,107,0,.4);
color: #ff8a30;
font-size: .72rem; font-weight: 1000;
letter-spacing: .22em; text-transform: uppercase;
border-radius: 999px;
margin-bottom: 1rem;
}
.post-sale-head h2 {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 1000;
line-height: 1.05;
letter-spacing: -.015em;
text-transform: uppercase;
color: white;
}
.post-sale-head p {
color: rgba(255,255,255,.72);
margin-top: .8rem;
max-width: 36rem;
}
.post-sale-head .link {
display: inline-flex; align-items: center; gap: .4rem;
color: white;
border-bottom: 2px solid rgba(255,107,0,.6);
padding-bottom: 2px;
font-weight: 1000;
letter-spacing: .12em;
text-transform: uppercase;
font-size: .8rem;
}
.post-sale-head .link:hover { color: #ffb27a; border-color: #ffb27a; }
.post-sale-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (min-width: 900px) { .post-sale-grid { grid-template-columns: repeat(4, 1fr); } }
.post-sale-tile {
position: relative;
background: #0a0e1a;
border: 1px solid rgba(255,255,255,.08);
padding: 2rem 1.6rem 1.8rem;
transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background .25s ease;
display: flex; flex-direction: column;
min-height: 260px;
overflow: hidden;
}
.post-sale-tile::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0; width: 3px;
background: #ff6b00;
transform: scaleY(0);
transform-origin: top;
transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.post-sale-tile:hover {
transform: translateY(-4px);
border-color: rgba(255,107,0,.4);
background: #14182a;
}
.post-sale-tile:hover::before { transform: scaleY(1); }
.post-sale-icon {
width: 56px; height: 56px;
display: grid; place-items: center;
background: rgba(21,93,252,.15);
border: 1px solid rgba(21,93,252,.4);
color: #93c5fd;
margin-bottom: 1.4rem;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.post-sale-tile:hover .post-sale-icon {
background: #155dfc;
color: white;
border-color: #155dfc;
}
.post-sale-icon svg { width: 28px; height: 28px; }
.post-sale-title {
font-size: 1.15rem;
font-weight: 1000;
letter-spacing: .04em;
text-transform: uppercase;
color: white;
line-height: 1.2;
margin-bottom: .5rem;
}
.post-sale-sub {
color: rgba(255,255,255,.6);
font-size: .88rem;
line-height: 1.45;
margin-bottom: 1.1rem;
flex: 1;
}
.post-sale-cta {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .78rem; font-weight: 1000;
letter-spacing: .14em;
text-transform: uppercase;
color: #ff8a30;
transition: gap .25s ease, color .25s ease;
}
.post-sale-tile:hover .post-sale-cta {
gap: .8rem;
color: white;
}
/* ---------- BANNER PRODUCTO ESTRELLA (Milwaukee PACKOUT-style) ---------- */
.feature-banner {
position: relative;
height: 80vh;
min-height: 560px;
max-height: 760px;
background: #04081f;
color: white;
overflow: hidden;
}
.feature-banner-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center right;
z-index: 0;
transform: scale(1.04);
transition: transform 14s linear;
}
.feature-banner.in-view .feature-banner-bg {
transform: scale(1);
}
.feature-banner::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(2,6,23,.94) 0%, rgba(2,6,23,.78) 30%, rgba(2,6,23,.32) 55%, transparent 75%),
linear-gradient(180deg, rgba(2,6,23,.5) 0%, transparent 25%, transparent 70%, rgba(2,6,23,.6) 100%);
z-index: 1;
pointer-events: none;
}
.feature-banner-content {
position: relative; z-index: 2;
max-width: 1500px; margin: 0 auto;
padding: 0 1.5rem;
height: 100%;
display: flex; align-items: center;
}
.feature-banner-copy { max-width: 38rem; }
.feature-banner-tag {
display: inline-block;
padding: .5rem 1rem;
background: rgba(255,107,0,.92);
color: white;
font-size: .72rem; font-weight: 1000;
letter-spacing: .26em; text-transform: uppercase;
margin-bottom: 1.4rem;
backdrop-filter: blur(6px);
}
.feature-banner-copy h2 {
font-size: clamp(2.6rem, 7vw, 5.5rem);
font-weight: 1000;
line-height: .92;
letter-spacing: -.025em;
text-transform: uppercase;
text-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.feature-banner-copy h2 .accent {
display: block;
color: rgba(255,255,255,.78);
font-size: .55em;
font-weight: 900;
margin-top: .35em;
letter-spacing: .02em;
text-transform: none;
}
.feature-banner-copy .lead {
margin-top: 1.5rem;
font-size: 1.1rem;
color: rgba(255,255,255,.88);
line-height: 1.55;
max-width: 30rem;
}
.feature-banner-specs {
margin-top: 1.6rem;
display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem;
}
.feature-banner-spec strong {
display: block;
font-size: 1.6rem;
font-weight: 1000;
color: white;
line-height: 1;
}
.feature-banner-spec span {
display: block;
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #ff8a30;
margin-top: .35rem;
}
.feature-banner-cta {
display: inline-flex; align-items: center; gap: .65rem;
margin-top: 2rem;
padding: 1.05rem 1.9rem;
font-weight: 1000; font-size: .92rem;
letter-spacing: .12em;
text-transform: uppercase;
border: 2px solid white;
background: white; color: #04081f;
transition: all .25s ease;
}
.feature-banner-cta:hover {
background: #ff6b00; color: white; border-color: #ff6b00;
}
@media (max-width: 900px) {
.feature-banner { height: auto; min-height: 480px; padding: 4rem 0; }
.feature-banner-content { padding: 3rem 1.25rem; }
.feature-banner-copy h2 { font-size: 2.4rem; }
.feature-banner::after {
background:
linear-gradient(180deg, rgba(2,6,23,.7) 0%, rgba(2,6,23,.55) 50%, rgba(2,6,23,.85) 100%);
}
}
/* ---------- CATEGORÍAS MILWAUKEE — 12 tiles dark con flecha ---------- */
.cats-mw {
background: #04081f;
color: white;
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.cats-mw::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(700px 400px at 0% 0%, rgba(255,107,0,.10), transparent 55%),
radial-gradient(800px 500px at 100% 100%, rgba(21,93,252,.15), transparent 55%);
pointer-events: none;
}
.cats-mw-wrap {
max-width: 1500px; margin: 0 auto; padding: 0 1.5rem;
position: relative; z-index: 1;
}
.cats-mw-head {
display: flex; align-items: end; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.cats-mw-head .eyebrow {
display: inline-block;
padding: .4rem 1rem;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
color: white;
font-size: .72rem; font-weight: 1000;
letter-spacing: .22em; text-transform: uppercase;
border-radius: 999px;
margin-bottom: 1rem;
}
.cats-mw-head h2 {
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 1000;
line-height: 1.05;
letter-spacing: -.015em;
text-transform: uppercase;
color: white;
}
.cats-mw-head p {
color: rgba(255,255,255,.75);
margin-top: .8rem;
max-width: 36rem;
}
.cats-mw-head .link {
color: white;
border-bottom: 2px solid rgba(255,107,0,.6);
padding-bottom: 2px;
font-weight: 1000;
letter-spacing: .12em;
text-transform: uppercase;
font-size: .8rem;
}
.cats-mw-head .link:hover { color: #ffb27a; border-color: #ffb27a; }
.cats-mw-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .cats-mw-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cats-mw-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-tile {
position: relative;
background: #0a0e1a;
border: 1px solid rgba(255,255,255,.08);
aspect-ratio: 1/1;
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
cursor: pointer;
}
.cat-tile:hover {
transform: translateY(-4px);
border-color: #ff6b00;
}
.cat-tile-img {
flex: 1;
display: grid; place-items: center;
padding: 1.6rem 1.4rem .8rem;
background:
radial-gradient(ellipse 85% 60% at 50% 92%, rgba(0,0,0,.5) 0%, transparent 60%),
radial-gradient(ellipse 75% 70% at 50% 35%, rgba(21,93,252,.18) 0%, transparent 65%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0%, transparent 70%),
linear-gradient(180deg, #1a1f33 0%, #0d1124 100%);
position: relative;
overflow: hidden;
transition: background .35s ease;
}
.cat-tile-img::before {
content: ""; position: absolute;
left: 10%; right: 10%; bottom: 8%; height: 14%;
background: radial-gradient(ellipse at center, rgba(0,0,0,.65) 0%, transparent 70%);
filter: blur(8px);
z-index: 0;
pointer-events: none;
transition: transform .45s ease, opacity .35s ease;
}
.cat-tile-img img {
position: relative; z-index: 1;
width: 100%; height: 100%;
object-fit: contain;
transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease;
filter: drop-shadow(0 22px 28px rgba(0,0,0,.65)) drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.cat-tile:hover .cat-tile-img {
background:
radial-gradient(ellipse 85% 60% at 50% 92%, rgba(0,0,0,.55) 0%, transparent 60%),
radial-gradient(ellipse 75% 70% at 50% 35%, rgba(255,107,0,.20) 0%, transparent 65%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0%, transparent 70%),
linear-gradient(180deg, #1f2540 0%, #0d1124 100%);
}
.cat-tile:hover .cat-tile-img img {
transform: scale(1.1) translateY(-4%);
filter: drop-shadow(0 30px 38px rgba(255,107,0,.35)) drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
.cat-tile:hover .cat-tile-img::before {
transform: scale(1.15);
opacity: .85;
}
/* ----- Modo LIFESTYLE: bg full-bleed con imagen + overlay ----- */
.cat-tile.has-lifestyle {
aspect-ratio: 1/1.15;
}
.cat-tile-life {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
transform: scale(1.04);
transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease;
filter: saturate(1.05);
}
.cat-tile.has-lifestyle:hover .cat-tile-life {
transform: scale(1.1);
filter: saturate(1.15) brightness(1.05);
}
.cat-tile.has-lifestyle::before {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(2,6,23,.05) 0%, rgba(2,6,23,.30) 45%, rgba(2,6,23,.92) 100%);
z-index: 1;
transition: opacity .25s ease;
}
.cat-tile.has-lifestyle:hover::before {
background:
linear-gradient(180deg, rgba(2,6,23,.0) 0%, rgba(2,6,23,.20) 40%, rgba(2,6,23,.92) 100%);
}
/* En modo lifestyle, el footer flota encima del overlay */
.cat-tile.has-lifestyle .cat-tile-foot {
position: relative;
z-index: 2;
background: transparent;
border-top: none;
margin-top: auto;
padding: 1.1rem 1.2rem;
}
.cat-tile.has-lifestyle:hover .cat-tile-foot { background: transparent; }
.cat-tile.has-lifestyle .cat-tile-name {
font-size: .92rem;
text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.cat-tile.has-lifestyle .cat-tile-arrow {
background: rgba(255,107,0,.95);
color: white;
}
.cat-tile.has-lifestyle:hover .cat-tile-arrow {
background: white;
color: #04081f;
}
.cat-tile.has-lifestyle .cat-tile-count {
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.15);
color: rgba(255,255,255,.85);
backdrop-filter: blur(4px);
z-index: 3;
}
.cat-tile-foot {
display: flex; align-items: center; justify-content: space-between;
gap: .75rem;
padding: 1rem 1.1rem;
background: #04081f;
border-top: 1px solid rgba(255,255,255,.06);
transition: background .25s ease;
}
.cat-tile:hover .cat-tile-foot {
background: #155dfc;
}
.cat-tile-name {
font-size: .82rem;
font-weight: 1000;
letter-spacing: .12em;
text-transform: uppercase;
color: white;
line-height: 1.2;
}
.cat-tile-arrow {
width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: 999px;
background: rgba(255,107,0,.18);
color: #ff8a30;
flex-shrink: 0;
transition: background .25s ease, color .25s ease, transform .25s ease;
}
.cat-tile:hover .cat-tile-arrow {
background: white;
color: #155dfc;
transform: translateX(3px);
}
.cat-tile-count {
position: absolute; top: .8rem; right: .9rem;
font-size: .68rem; font-weight: 900;
letter-spacing: .1em;
color: rgba(255,255,255,.55);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
padding: .25rem .55rem;
border-radius: 999px;
z-index: 2;
}
/* ---------- REELS COVERS DARK (sobre featured-brand) ---------- */
.featured-brand .reel-card {
background: transparent;
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 40px rgba(2,6,23,.45);
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.featured-brand .reel-card:hover {
transform: translateY(-4px);
border-color: rgba(255,107,0,.5);
box-shadow: 0 28px 60px rgba(2,6,23,.6), 0 0 0 1px rgba(255,107,0,.18);
}
/* La carátula en sí: dark con halo azul/naranja */
.featured-brand .reel-cover {
background:
radial-gradient(ellipse 75% 60% at 50% 35%, rgba(21,93,252,.25) 0%, transparent 60%),
linear-gradient(180deg, #0d1228 0%, #06091a 60%, #04081f 100%) !important;
color: white !important;
}
.featured-brand .reel-card:hover .reel-cover {
background:
radial-gradient(ellipse 80% 65% at 50% 35%, rgba(255,107,0,.30) 0%, transparent 60%),
linear-gradient(180deg, #14182a 0%, #06091a 60%, #04081f 100%) !important;
}
/* Imagen producto con sombra dramática y sin caja */
.featured-brand .reel-cover-image {
border-bottom: 1px solid rgba(255,255,255,.06) !important;
position: relative;
}
.featured-brand .reel-cover-image::before {
content: ""; position: absolute;
left: 18%; right: 18%; bottom: 8%; height: 14%;
background: radial-gradient(ellipse at center, rgba(0,0,0,.7) 0%, transparent 70%);
filter: blur(10px);
z-index: 0;
pointer-events: none;
transition: transform .4s ease;
}
.featured-brand .reel-cover-image img {
position: relative; z-index: 1;
filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)) drop-shadow(0 4px 8px rgba(0,0,0,.4));
transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.featured-brand .reel-card:hover .reel-cover-image img {
transform: scale(1.06) translateY(-3%);
filter: drop-shadow(0 26px 32px rgba(255,107,0,.30)) drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
/* Body de la carátula: tipografía Milwaukee blanco/naranja */
.featured-brand .reel-cover-body {
background: transparent !important;
padding: 1.1rem 1rem 1.2rem !important;
}
.featured-brand .reel-cover-category {
color: #ff8a30 !important;
font-size: .68rem !important;
letter-spacing: .22em !important;
font-weight: 1000 !important;
text-transform: uppercase;
position: relative;
padding-left: 14px !important;
margin-bottom: .65rem !important;
}
.featured-brand .reel-cover-category::before {
content: ""; position: absolute;
left: 0; top: 50%; transform: translateY(-50%);
width: 8px; height: 2px;
background: #ff6b00;
}
.featured-brand .reel-cover-title {
color: #b8c2d4 !important;
font-size: .98rem !important;
font-weight: 700 !important;
letter-spacing: -.005em;
line-height: 1.4 !important;
min-height: 2.6rem !important;
font-feature-settings: "ss01" on, "cv11" on;
}
.featured-brand .reel-cover-price-old {
color: rgba(255,255,255,.32) !important;
font-size: .72rem !important;
font-weight: 600 !important;
letter-spacing: .02em;
}
.featured-brand .reel-cover-price {
color: #f5f0e6 !important;
font-size: 1.4rem !important;
font-weight: 900 !important;
letter-spacing: -.02em;
line-height: 1 !important;
text-shadow: 0 0 24px rgba(255,140,50,.18);
display: block !important;
}
.featured-brand .reel-cover-price::first-letter {
color: #ff8a30 !important;
margin-right: 1px;
font-weight: 1000;
}
.featured-brand .reel-cover-installments {
color: rgba(147,197,253,.85) !important;
font-weight: 700 !important;
font-size: .76rem !important;
letter-spacing: .015em;
margin-top: .4rem !important;
display: inline-flex !important;
align-items: center;
gap: .35rem;
}
.featured-brand .reel-cover-installments::before {
content: "";
width: 4px; height: 4px;
border-radius: 999px;
background: #93c5fd;
display: inline-block;
flex-shrink: 0;
}
/* Discount chip estilo Milwaukee (rojo alerta) */
.featured-brand .reel-discount {
background: #ff3d00 !important;
color: white !important;
border: 1px solid rgba(255,255,255,.2);
box-shadow: 0 6px 14px rgba(255,61,0,.35);
font-weight: 1000 !important;
}
/* Hint de play sobre el cover (visible en hover) */
.featured-brand .reel-card::after {
background: linear-gradient(180deg, rgba(2,6,23,.0) 30%, rgba(2,6,23,.85) 100%) !important;
}
.featured-brand .reel-chip {
background: rgba(0,0,0,.6) !important;
border: 1px solid rgba(255,255,255,.18);
color: white !important;
backdrop-filter: blur(8px);
font-weight: 1000 !important;
letter-spacing: .1em;
text-transform: uppercase;
font-size: .72rem !important;
}
.featured-brand .reel-card.preview-active .reel-chip {
background: #ff6b00 !important;
border-color: #ff6b00;
}
/* ---------- SECCION DESTACADOS con fondo nocturno jobsite + parallax JS ---------- */
.featured-brand {
position: relative;
padding: 5rem 0 4.5rem;
color: white;
overflow: hidden;
background: #04081f;
isolation: isolate;
}
.featured-brand-bg {
position: absolute;
left: -5%; right: -5%;
top: -15%; height: 130%;
background-image: url("../hero-optimized/hero-generador.webp");
background-size: cover;
background-position: center 40%;
z-index: -2;
will-change: transform;
filter: saturate(1.05) brightness(.85);
}
.featured-brand::before {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(4,8,31,.92) 0%, rgba(4,8,31,.55) 35%, rgba(4,8,31,.55) 65%, rgba(4,8,31,.95) 100%),
radial-gradient(ellipse 65% 45% at 18% 25%, rgba(255,107,0,.20), transparent 65%),
radial-gradient(ellipse 65% 45% at 82% 75%, rgba(21,93,252,.28), transparent 65%);
z-index: -1;
pointer-events: none;
}
.featured-brand::after {
content: "";
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
45deg, rgba(255,255,255,.022) 0 1px, transparent 1px 32px
);
pointer-events: none;
z-index: -1;
}
.featured-brand::after {
content: "";
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 30px
);
pointer-events: none;
z-index: 0;
}
.featured-brand > .max-w-7xl {
position: relative;
z-index: 2;
}
.featured-brand .featured-eyebrow {
display: inline-block;
padding: .45rem 1rem;
background: rgba(255,107,0,.85);
color: white;
font-size: .72rem; font-weight: 1000;
letter-spacing: .22em; text-transform: uppercase;
border-radius: 999px;
margin-bottom: 1rem;
backdrop-filter: blur(6px);
}
.featured-brand h2 {
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 1000;
line-height: 1.05;
color: white;
letter-spacing: -.015em;
text-shadow: 0 6px 26px rgba(0,0,0,.45);
}
.featured-brand .sub {
color: rgba(255,255,255,.85);
font-size: 1.05rem;
margin-top: .9rem;
max-width: 36rem;
}
.featured-brand .v2-link {
color: white;
border-bottom: 2px solid rgba(255,107,0,.7);
padding-bottom: 2px;
font-weight: 1000;
letter-spacing: .04em;
text-transform: uppercase;
font-size: .85rem;
}
.featured-brand .v2-link:hover { color: #ffb27a; border-color: #ffb27a; }
/* ---------- HEADER MILWAUKEE-STYLE — minimalista, 3 ítems centrales ---------- */
.header-mini {
background: #04081f;
color: rgba(255,255,255,.92);
font-size: .76rem;
font-weight: 700;
letter-spacing: .04em;
}
.header-mini-inner {
max-width: 1500px; margin: 0 auto;
padding: .5rem 1.5rem;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: .5rem 1rem;
}
.header-mini span:not(.dot) { color: rgba(255,255,255,.92); }
.header-mini .dot { color: rgba(21,93,252,.7); }
.header-mw {
position: sticky; top: 0; z-index: 100;
background: linear-gradient(90deg, #ff6b00 0%, #ff5a00 12%, #155dfc 65%, #0b3aa6 100%);
border-bottom: 1px solid rgba(0,0,0,.15);
box-shadow: 0 4px 12px rgba(0,0,0,.18);
transition: transform .4s cubic-bezier(.2,.8,.2,1);
will-change: transform;
}
.header-mw.is-hidden { transform: translateY(-100%); }
/* Cuando el header está oculto, también escondemos la banda "Dónde comprar" */
.header-mw.is-hidden + .header-where { transform: translateY(-100%); }
.header-where {
position: sticky; top: 0; z-index: 99;
transition: transform .4s cubic-bezier(.2,.8,.2,1);
will-change: transform;
}
.header-mw-inner {
max-width: 1500px; margin: 0 auto;
padding: 0 1.5rem;
height: 96px;
display: flex; align-items: center; justify-content: space-between;
gap: 2rem;
}
.header-logo img {
height: 60px; width: auto; display: block;
filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.4));
transition: opacity .2s ease;
}
.header-logo:hover img { opacity: .85; }
.header-nav {
display: flex; align-items: center; gap: 2.5rem;
}
.header-nav a {
font-size: .85rem; font-weight: 1000;
letter-spacing: .12em; text-transform: uppercase;
color: white;
position: relative;
padding: .35rem 0;
transition: color .2s ease;
text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.header-nav a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: white;
transform: scaleX(0); transform-origin: left;
transition: transform .25s ease;
}
.header-nav a:hover { color: rgba(255,255,255,.85); }
.header-nav a:hover::after { transform: scaleX(1); }
.header-actions {
display: flex; align-items: center; gap: 1rem;
}
.header-search {
background: none; border: none; cursor: pointer;
width: 40px; height: 40px;
display: grid; place-items: center;
color: white;
border-radius: 999px;
transition: background .2s ease;
}
.header-search:hover { background: rgba(255,255,255,.18); }
.header-account {
display: inline-flex; align-items: center; gap: .55rem;
font-size: .82rem; font-weight: 1000;
letter-spacing: .08em; text-transform: uppercase;
color: #0f172a; background: white;
padding: .65rem 1.2rem;
border-radius: 999px;
transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.header-account:hover { background: #f1f5f9; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.header-burger {
display: none;
background: none; border: none; cursor: pointer;
width: 40px; height: 40px;
align-items: center; justify-content: center;
color: white;
}
.header-burger:hover { background: rgba(255,255,255,.18); border-radius: 999px; }
/* Banda "Dónde comprar" estilo Milwaukee */
.header-where {
background: #0a0e1a;
color: white;
}
.header-where-inner {
max-width: 1500px; margin: 0 auto;
padding: .85rem 1.5rem;
text-align: center;
font-size: .78rem; font-weight: 1000;
letter-spacing: .14em; text-transform: uppercase;
}
.header-where a {
display: inline-flex; align-items: center; gap: .5rem;
color: white;
transition: color .2s ease;
}
.header-where a:hover { color: #93c5fd; }
@media (max-width: 1024px) {
.header-nav { display: none; }
.header-burger { display: grid; }
.header-account span { display: none; }
.header-account { padding: .6rem; aspect-ratio: 1; }
}
/* Mobile drawer (cuando se abre con burger) */
.header-mobile {
display: none;
background: white;
border-top: 1px solid rgba(15,23,42,.08);
padding: 1rem 1.5rem;
}
.header-mobile.is-open { display: block; }
.header-mobile a {
display: block;
padding: .85rem .25rem;
font-size: .9rem; font-weight: 1000;
letter-spacing: .1em; text-transform: uppercase;
color: #0f172a;
border-bottom: 1px solid rgba(15,23,42,.05);
}
.header-mobile a:last-child { border-bottom: none; }
.header-mobile a:hover { color: #155dfc; }
/* ---------- HERO MILWAUKEE-STYLE — imagen lifestyle full-bleed + texto overlay ---------- */
.hero3d {
position: relative;
height: 80vh;
min-height: 600px;
max-height: 820px;
background: #0a0e1a;
color: white;
overflow: hidden;
}
/* Cada slide es absolute full-bleed con la imagen como background-image */
.hero-mw-slides {
position: absolute; inset: 0; z-index: 1;
}
.hero-mw-slide {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity .9s ease, transform 7s linear;
transform: scale(1.05);
}
.hero-mw-slide.is-active {
opacity: 1;
transform: scale(1);
}
/* Overlay gradient izquierdo para que el texto se lea */
.hero-mw-slides::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(2,6,23,.85) 0%, rgba(2,6,23,.55) 35%, rgba(2,6,23,.10) 60%, transparent 100%),
linear-gradient(180deg, rgba(2,6,23,.25) 0%, transparent 30%, transparent 70%, rgba(2,6,23,.35) 100%);
z-index: 2;
pointer-events: none;
}
.hero-mw-stage {
position: relative; z-index: 3;
max-width: 1500px;
width: 100%;
margin: 0 auto;
padding: 0 1.5rem;
height: 100%;
display: flex; align-items: center;
}
.hero-mw-copy {
max-width: 38rem;
position: relative;
}
.hero-mw-copy .eyebrow {
display: inline-block;
padding: .45rem 1rem;
background: rgba(21, 93, 252, .8);
color: white;
font-size: .72rem; font-weight: 900;
letter-spacing: .2em; text-transform: uppercase;
border-radius: 999px;
backdrop-filter: blur(8px);
margin-bottom: 1.4rem;
animation: hero-fade .8s ease forwards;
}
.hero-mw-copy h1 {
font-size: clamp(2.4rem, 6vw, 4.8rem);
font-weight: 1000;
line-height: .94;
text-transform: uppercase;
letter-spacing: -.025em;
text-shadow: 0 8px 30px rgba(0,0,0,.5);
margin: 0;
animation: hero-fade .9s .15s ease both;
}
.hero-mw-copy h1 .accent {
display: block;
color: rgba(255,255,255,.85);
font-size: .55em;
font-weight: 900;
margin-top: .35em;
letter-spacing: .02em;
text-transform: none;
}
.hero-mw-copy .sub {
margin-top: 1.4rem;
font-size: 1.05rem;
color: rgba(255,255,255,.88);
line-height: 1.55;
max-width: 32rem;
animation: hero-fade 1s .3s ease both;
}
.hero-mw-copy .features {
display: flex; flex-wrap: wrap; gap: .6rem;
margin-top: 1.4rem;
animation: hero-fade 1s .4s ease both;
}
.hero-mw-copy .features span {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
padding: .4rem .85rem;
border-radius: 999px;
font-size: .82rem;
font-weight: 700;
backdrop-filter: blur(6px);
}
.hero-mw-copy .ctas {
display: flex; flex-wrap: wrap; gap: .75rem;
margin-top: 2rem;
animation: hero-fade 1.1s .55s ease both;
}
.hero-mw-cta {
display: inline-flex; align-items: center; gap: .5rem;
padding: 1rem 1.7rem;
font-weight: 900; font-size: .9rem;
letter-spacing: .04em;
text-transform: uppercase;
border: 2px solid white;
transition: all .25s ease;
}
.hero-mw-cta.primary {
background: white; color: #0a0e1a;
}
.hero-mw-cta.primary:hover { background: #155dfc; color: white; border-color: #155dfc; }
.hero-mw-cta.ghost {
background: transparent; color: white;
}
.hero-mw-cta.ghost:hover { background: white; color: #0a0e1a; }
@keyframes hero-fade {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Dots discretos al pie central (estilo Milwaukee) */
.hero-mw-dots {
position: absolute; left: 50%; bottom: 2rem;
transform: translateX(-50%);
display: flex; gap: .55rem;
z-index: 5;
}
.hero-mw-dot {
width: 36px; height: 3px;
background: rgba(255,255,255,.3);
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
transition: background .25s ease;
}
.hero-mw-dot:hover { background: rgba(255,255,255,.55); }
.hero-mw-dot.is-active { background: rgba(255,255,255,.5); }
.hero-mw-dot .fill {
position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
background: white;
}
.hero-mw-dot.is-active .fill {
animation: heroFill var(--hero-dur, 7s) linear forwards;
}
@keyframes heroFill { to { width: 100%; } }
/* Slide name pequeño bottom-right (1/4) */
.hero-mw-counter {
position: absolute; right: 2rem; bottom: 2rem;
z-index: 5;
color: rgba(255,255,255,.7);
font-size: .85rem;
font-weight: 800;
letter-spacing: .15em;
}
.hero-mw-counter .now { color: white; font-size: 1.2rem; }
/* Banda promo "12 cuotas" debajo del hero (la conservamos pero más sobria) */
.promo-band {
background: #0a0e1a;
color: white;
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.promo-band-inner { color: white; }
.promo-pill .num { background: #155dfc !important; color: white !important; }
@media (max-width: 900px) {
.hero3d { height: auto; min-height: 540px; max-height: none; }
.hero-mw-stage { padding: 4rem 1.25rem; }
.hero-mw-copy h1 { font-size: 2.4rem; }
.hero-mw-counter { display: none; }
.hero-mw-dots { bottom: 1.2rem; }
}
/* ---------- BANNER PROMO 12 cuotas ---------- */
.promo-band {
background: linear-gradient(120deg, #155dfc 0%, #0b3aa6 50%, #1d2d7a 100%);
color: white; position: relative; overflow: hidden;
}
.promo-band::before {
content: ""; position: absolute; inset: 0;
background: repeating-linear-gradient(45deg,
rgba(255,255,255,.04) 0 20px, transparent 20px 40px);
}
.promo-band-inner {
max-width: 1320px; margin: 0 auto; padding: 1.4rem 1.5rem;
display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between;
position: relative; z-index: 1;
}
.promo-pill {
display: inline-flex; align-items: center; gap: .8rem;
font-weight: 1000; font-size: 1.1rem;
}
.promo-pill .num {
background: white; color: #155dfc;
padding: .4rem .8rem; border-radius: .8rem;
font-size: 1.4rem; font-weight: 1000;
box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
/* ---------- VISOR 360° ---------- */
.viewer-360 {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
padding: 4rem 0;
}
.viewer-360-grid {
max-width: 1320px; margin: 0 auto; padding: 0 1.5rem;
display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
}
@media (min-width: 900px) {
.viewer-360-grid { grid-template-columns: 1.1fr 1fr; }
}
.viewer-360-stage {
position: relative;
background:
radial-gradient(circle at 50% 90%, rgba(0,0,0,.18), transparent 60%),
linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
border-radius: 1.5rem; overflow: hidden;
aspect-ratio: 4/3; min-height: 360px;
cursor: grab; user-select: none;
border: 1px solid #e2e8f0;
box-shadow: 0 30px 70px -20px rgba(15,23,42,.18);
}
.viewer-360-stage:active { cursor: grabbing; }
.viewer-360-stage img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: contain; padding: 2rem;
opacity: 0; transition: opacity .15s linear;
pointer-events: none;
}
.viewer-360-stage img.is-current { opacity: 1; }
.viewer-360-hint {
position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
background: rgba(2,6,23,.85); color: white;
padding: .55rem 1rem; border-radius: 999px;
font-size: .78rem; font-weight: 800; letter-spacing: .04em;
display: inline-flex; align-items: center; gap: .5rem;
pointer-events: none; transition: opacity .3s ease;
}
.viewer-360-stage.is-interacted .viewer-360-hint { opacity: 0; }
.viewer-360-spin {
position: absolute; top: 1rem; right: 1rem;
background: white; border-radius: 999px;
padding: .4rem .8rem; font-size: .72rem; font-weight: 900;
letter-spacing: .1em; text-transform: uppercase; color: var(--orange-deep);
box-shadow: 0 8px 18px rgba(15,23,42,.12);
display: inline-flex; align-items: center; gap: .4rem;
}
.viewer-360-spin .ico {
width: 14px; height: 14px;
border: 2px solid var(--orange); border-top-color: transparent;
border-radius: 999px; animation: spin360 1.6s linear infinite;
}
@keyframes spin360 { to { transform: rotate(360deg); } }
.viewer-360-meta .eyebrow {
color: var(--orange-deep); font-size: .75rem; font-weight: 1000;
letter-spacing: .18em; text-transform: uppercase; margin-bottom: .8rem;
display: block;
}
.viewer-360-meta h2 {
font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 1000;
color: var(--grey-900); line-height: 1.1; letter-spacing: -.01em;
}
.viewer-360-meta p { color: var(--grey-500); margin-top: 1rem; line-height: 1.6; max-width: 36rem; }
.viewer-360-feat {
margin-top: 1.4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem;
}
.viewer-360-feat li {
background: white; border: 1px solid var(--grey-200);
border-radius: .9rem; padding: .9rem 1rem;
font-size: .85rem; font-weight: 700; color: var(--grey-900);
display: flex; align-items: center; gap: .6rem;
}
.viewer-360-feat li::before {
content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--orange);
}
.viewer-360-cta {
margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .75rem;
}
/* ---------- TILT 3D CARDS (categorías + destacados) ---------- */
.tilt {
transform-style: preserve-3d;
transition: transform .3s cubic-bezier(.2,.8,.2,1);
will-change: transform;
}
.tilt-inner { transform: translateZ(40px); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.tilt:hover { box-shadow: 0 30px 60px -10px rgba(15,23,42,.25); }
/* ---------- DESTACADOS PREMIUM (top precios) ---------- */
.premium-grid {
display: grid; gap: 1.2rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.premium-card {
position: relative; background: white;
border-radius: 1.2rem; overflow: hidden;
border: 1px solid var(--grey-200);
transition: transform .3s ease, box-shadow .3s ease;
}
.premium-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -12px rgba(15,23,42,.18); }
.premium-card-media {
aspect-ratio: 4/3; position: relative; overflow: hidden;
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
display: grid; place-items: center;
}
.premium-card-media img {
max-width: 88%; max-height: 88%;
object-fit: contain;
transition: transform .5s ease;
}
.premium-card:hover .premium-card-media img { transform: scale(1.06) rotate(-1.5deg); }
.premium-card-rank {
position: absolute; top: .9rem; left: .9rem;
background: var(--blue-deep); color: white;
padding: .35rem .7rem; border-radius: .6rem;
font-size: .72rem; font-weight: 1000; letter-spacing: .1em;
}
.premium-card-rank.gold { background: linear-gradient(120deg, #fbbf24, #d97706); color: #1a0e00; }
.premium-card-cat {
position: absolute; top: .9rem; right: .9rem;
background: rgba(255,255,255,.92); color: var(--orange-deep);
padding: .3rem .65rem; border-radius: .6rem;
font-size: .68rem; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase;
}
.premium-card-body { padding: 1.2rem 1.2rem 1.4rem; }
.premium-card-name { font-weight: 900; color: var(--grey-900); line-height: 1.3; min-height: 2.6rem; }
.premium-card-price { margin-top: .9rem; font-size: 1.3rem; font-weight: 1000; color: var(--blue-deep); }
.premium-card-installments { color: var(--blue-soft); font-size: .8rem; font-weight: 800; margin-top: .2rem; }
.premium-card-tags {
margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .35rem;
font-size: .72rem; font-weight: 800;
}
.premium-card-tags span {
background: var(--grey-100); color: var(--grey-900);
padding: .25rem .55rem; border-radius: .5rem;
}
.premium-card-cta {
display: flex; gap: .5rem; margin-top: 1.1rem;
}
.premium-card-cta a {
flex: 1; padding: .65rem .8rem; text-align: center;
border-radius: .6rem; font-weight: 900; font-size: .82rem;
transition: background-color .2s ease;
}
.premium-card-cta .ver { background: var(--grey-900); color: white; }
.premium-card-cta .ver:hover { background: black; }
.premium-card-cta .wa { background: #16a34a; color: white; }
.premium-card-cta .wa:hover { background: #15803d; }
/* ---------- SECTION HEADER ---------- */
.v2-section-head {
display: flex; align-items: end; justify-content: space-between; gap: 1rem;
margin-bottom: 2rem; flex-wrap: wrap;
}
.v2-eyebrow {
color: var(--orange-deep); font-size: .72rem; font-weight: 1000;
letter-spacing: .22em; text-transform: uppercase; margin-bottom: .6rem; display: block;
}
.v2-h2 {
font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 1000;
color: var(--grey-900); letter-spacing: -.01em; line-height: 1.1;
}
.v2-link { color: var(--blue-soft); font-weight: 900; font-size: .9rem; }
.v2-link:hover { text-decoration: underline; }
/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
/* ---------- CATEGORY SHOWCASE V2 (con tilt) ---------- */
.cat3d-grid {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.cat3d-card {
position: relative; background: white;
border-radius: 1.1rem; overflow: hidden;
border: 1px solid var(--grey-200);
aspect-ratio: 1/1.05;
transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .3s ease;
transform-style: preserve-3d;
}
.cat3d-card:hover { border-color: rgba(255,107,0,.4); }
.cat3d-card .img-wrap {
position: absolute; inset: 0;
display: grid; place-items: center;
padding: 1.4rem;
transform: translateZ(30px);
transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.cat3d-card:hover .img-wrap { transform: translateZ(60px) scale(1.05); }
.cat3d-card img { width: 100%; height: 100%; object-fit: contain; }
.cat3d-card .label {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 1rem;
background: linear-gradient(180deg, transparent 0%, white 70%);
font-weight: 1000; color: var(--grey-900);
font-size: .98rem; transform: translateZ(50px);
}
/* ---------- AGRO premium hero (modificación visual) ---------- */
.v2-section { padding: 4.5rem 0; }
.v2-section.alt { background: var(--grey-50); }
.v2-wrap { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
.hero3d-visual { min-height: 320px; }
.hero3d-product img { max-height: 320px; }
.hero3d-controls { left: 1rem; right: 1rem; bottom: 1rem; }
}
/* Premium regenerative header effect */
.header-mw {
isolation: isolate;
overflow: hidden;
background:
linear-gradient(110deg, rgba(255,107,0,.98) 0%, rgba(198,78,48,.96) 25%, rgba(21,93,252,.98) 68%, rgba(8,44,132,.98) 100%);
border-bottom: 1px solid rgba(255,255,255,.16);
box-shadow: 0 18px 42px rgba(2,6,23,.26), inset 0 -1px 0 rgba(255,255,255,.14);
transform: translateY(0) perspective(900px) rotateX(0deg);
animation: header-materialize .8s cubic-bezier(.2,.8,.2,1) both;
transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease, backdrop-filter .35s ease;
}
.header-mw::before {
content: "";
position: absolute;
inset: -70% -22%;
z-index: -1;
background:
linear-gradient(115deg, transparent 30%, rgba(255,255,255,.24) 44%, transparent 58%),
radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 24%),
radial-gradient(circle at 78% 62%, rgba(65,137,230,.34), transparent 32%);
transform: translateX(-55%) skewX(-14deg);
animation: header-regenerate 7s ease-in-out infinite;
opacity: .7;
pointer-events: none;
}
.header-mw::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, rgba(255,107,0,.1), rgba(255,255,255,.72), rgba(21,93,252,.12));
box-shadow: 0 0 18px rgba(255,255,255,.32);
opacity: .86;
pointer-events: none;
}
.header-mw.is-compact {
background:
linear-gradient(110deg, rgba(255,107,0,.74) 0%, rgba(184,72,58,.72) 26%, rgba(21,93,252,.8) 68%, rgba(8,44,132,.76) 100%);
backdrop-filter: blur(18px) saturate(1.2);
box-shadow: 0 12px 34px rgba(2,6,23,.3), inset 0 1px 0 rgba(255,255,255,.16);
}
.header-mw.is-hidden {
transform: translateY(-108%) perspective(900px) rotateX(-10deg);
}
.header-mw.is-washing {
box-shadow: 0 20px 48px rgba(2,6,23,.34), inset 0 -1px 0 rgba(255,255,255,.22);
}
.header-mw.is-washing::before {
inset: -18% -34%;
z-index: 3;
background:
linear-gradient(102deg,
transparent 0 20%,
rgba(255,255,255,.18) 28%,
rgba(224,247,255,.92) 34%,
rgba(120,210,255,.62) 38%,
rgba(255,255,255,.24) 46%,
transparent 58%),
radial-gradient(ellipse at 40% 48%, rgba(255,255,255,.55), transparent 38%),
repeating-linear-gradient(100deg,
transparent 0 12px,
rgba(255,255,255,.12) 13px 15px,
transparent 16px 28px);
filter: blur(.35px) saturate(1.25);
mix-blend-mode: screen;
opacity: 0;
transform: translateX(-115%) skewX(-18deg);
animation: header-pressure-wash .43s cubic-bezier(.22,.78,.24,1) both;
}
.header-mw.is-washing::after {
height: 100%;
bottom: 0;
z-index: 2;
background:
radial-gradient(circle at 12% 50%, rgba(255,255,255,.48) 0 1px, transparent 2px),
radial-gradient(circle at 22% 42%, rgba(186,230,253,.38) 0 1px, transparent 2px),
linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
background-size: 22px 18px, 28px 22px, 100% 100%;
box-shadow: none;
opacity: 0;
animation: header-wash-mist .43s ease both;
}
.header-mw-inner {
transition: height .35s cubic-bezier(.2,.8,.2,1), padding .35s ease;
transform-style: preserve-3d;
}
.header-mw.is-compact .header-mw-inner { height: 72px; }
.header-logo img {
filter: brightness(0) invert(1) drop-shadow(0 10px 18px rgba(0,0,0,.34));
transform: translateZ(18px);
transition: opacity .2s ease, transform .35s cubic-bezier(.2,.8,.2,1), height .35s ease;
}
.header-mw.is-compact .header-logo img { height: 46px; }
.header-nav a {
transform: translateZ(12px);
transition: color .2s ease, transform .25s ease, text-shadow .25s ease;
}
.header-nav a:hover {
transform: translateY(-1px) translateZ(16px);
text-shadow: 0 10px 18px rgba(0,0,0,.24);
}
.header-account {
transform: translateZ(18px);
box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.8);
transition: background .2s ease, transform .2s ease, box-shadow .2s ease, padding .35s ease;
}
.header-account:hover {
transform: translateY(-1px) translateZ(18px);
box-shadow: 0 14px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.9);
}
.header-mw.is-compact .header-account { padding: .55rem 1rem; }
.header-where {
background: rgba(4,8,20,.96);
box-shadow: 0 12px 22px rgba(2,6,23,.22);
transition: transform .45s cubic-bezier(.2,.8,.2,1), background .35s ease, backdrop-filter .35s ease;
}
.header-mw.is-compact + .header-where {
background: rgba(4,8,20,.84);
backdrop-filter: blur(14px);
}
.header-where-inner { transition: padding .35s ease; }
.header-mw.is-compact + .header-where .header-where-inner { padding: .55rem 1.5rem; }
@keyframes header-materialize {
from {
opacity: 0;
transform: translateY(-24px) perspective(900px) rotateX(-16deg);
filter: blur(10px) saturate(.85);
}
to {
opacity: 1;
transform: translateY(0) perspective(900px) rotateX(0deg);
filter: blur(0) saturate(1);
}
}
@keyframes header-regenerate {
0%, 18% { transform: translateX(-55%) skewX(-14deg); opacity: .18; }
42% { opacity: .72; }
58%, 100% { transform: translateX(55%) skewX(-14deg); opacity: .18; }
}
@keyframes header-pressure-wash {
0% { opacity: 0; transform: translateX(-115%) skewX(-18deg); }
16% { opacity: .96; }
74% { opacity: .82; }
100% { opacity: 0; transform: translateX(112%) skewX(-18deg); }
}
@keyframes header-wash-mist {
0% { opacity: 0; transform: translateX(-10px); }
28% { opacity: .34; }
100% { opacity: 0; transform: translateX(18px); }
}
@media (prefers-reduced-motion: reduce) {
.header-mw,
.header-mw::before { animation: none; }
.header-mw,
.header-where,
.header-mw-inner,
.header-logo img { transition-duration: .01ms; }
}
/* Product modal thumbs: rounded active state, no hard square frame */
.reel-modal-panel .product-thumb,
.reel-modal-panel [data-product-thumbs] img {
border-radius: 1.1rem !important;
}
.reel-modal-panel .product-thumb.active {
border-color: transparent !important;
box-shadow:
inset 0 0 0 2px rgba(255,107,0,.72),
0 12px 28px rgba(255,107,0,.12) !important;
}
.reel-modal-panel .product-thumb:hover {
border-color: transparent !important;
box-shadow:
inset 0 0 0 2px rgba(255,107,0,.42),
0 10px 24px rgba(255,107,0,.08) !important;
}
/* ============================================================
MODO PRESENTACIÓN — 10 cards, video play, photo pan
============================================================ */
/* Botón "Ver presentación" en el header del modal */
.modal-presentation-btn {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .5rem .95rem;
font-size: .82rem;
font-weight: 800;
letter-spacing: .02em;
border-radius: 999px;
border: 1.5px solid rgba(255,107,0,.85);
background: linear-gradient(135deg, rgba(255,107,0,.12), rgba(255,107,0,.04));
color: #ff6b00;
cursor: pointer;
transition: transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.modal-presentation-btn:hover {
background: linear-gradient(135deg, #ff6b00, #ff8c1f);
color: white;
box-shadow: 0 8px 22px rgba(255,107,0,.4);
transform: translateY(-1px);
}
.modal-presentation-btn .presentation-btn-icon {
font-size: .68rem;
width: 18px; height: 18px;
border-radius: 999px;
background: currentColor;
color: white;
display: grid; place-items: center;
font-weight: 1000;
/* color truco: el ícono lo invertimos en hover */
}
.modal-presentation-btn:hover .presentation-btn-icon {
background: rgba(255,255,255,.95);
color: #ff6b00;
}
/* CTA de presentacion: naranja, vivo y sin icono */
.modal-presentation-btn {
position: relative;
justify-content: center;
min-width: 154px;
padding: .66rem 1.08rem !important;
font-size: .78rem !important;
font-weight: 1000 !important;
letter-spacing: .08em !important;
text-transform: uppercase;
border: 1px solid rgba(255,185,94,.9) !important;
background: linear-gradient(135deg, #ff6b00 0%, #ff8a1c 52%, #ff5a00 100%) !important;
color: white !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.12) inset,
0 10px 26px rgba(255,107,0,.28),
0 0 26px rgba(255,107,0,.22) !important;
overflow: hidden;
isolation: isolate;
transform-origin: center;
animation: presentationBtnBeat 2.25s ease-in-out infinite;
transition: transform .18s ease, box-shadow .25s ease, background .25s ease, filter .25s ease;
}
.modal-presentation-btn::before {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.48) 46%, transparent 58% 100%);
transform: translateX(-125%);
animation: presentationBtnSweep 3.4s ease-in-out infinite;
z-index: -1;
}
.modal-presentation-btn::after {
content: "";
position: absolute;
inset: -10px;
border-radius: inherit;
border: 1px solid rgba(255,138,28,.38);
opacity: .5;
animation: presentationBtnRing 2.25s ease-in-out infinite;
pointer-events: none;
}
.modal-presentation-btn:hover {
background: linear-gradient(135deg, #ff7a10, #ff9e2c 48%, #ff5a00) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.18) inset,
0 14px 34px rgba(255,107,0,.38),
0 0 38px rgba(255,107,0,.42) !important;
filter: saturate(1.08);
transform: translateY(-1px) scale(1.045);
}
.modal-presentation-btn .presentation-btn-icon {
display: none !important;
}
.modal-presentation-btn .presentation-btn-label {
position: relative;
z-index: 1;
white-space: nowrap;
color: transparent;
background:
linear-gradient(100deg, #7a3d00 0%, #ffbf37 16%, #fff7b0 22%, #d88a05 30%, #ffe27a 44%, #a95d00 58%, #fff2a6 64%, #f6a915 72%, #8a4700 100%);
background-size: 260% 100%;
-webkit-background-clip: text;
background-clip: text;
text-shadow:
0 1px 0 rgba(98,43,0,.32),
0 0 8px rgba(255,214,92,.32),
0 0 16px rgba(255,138,28,.24);
filter: drop-shadow(0 0 5px rgba(255,210,75,.30));
animation:
presentationGoldFlow 3.7s linear infinite,
presentationGoldBlink 5.3s steps(1, end) infinite;
}
@keyframes presentationBtnBeat {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 26px rgba(255,107,0,.28), 0 0 26px rgba(255,107,0,.22);
}
42% {
transform: scale(1.035);
box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 15px 34px rgba(255,107,0,.36), 0 0 42px rgba(255,107,0,.36);
}
56% { transform: scale(.985); }
}
@keyframes presentationBtnSweep {
0%, 50% { transform: translateX(-125%); opacity: 0; }
62% { opacity: .75; }
82%, 100% { transform: translateX(125%); opacity: 0; }
}
@keyframes presentationBtnRing {
0%, 100% { transform: scale(.98); opacity: .18; }
46% { transform: scale(1.14); opacity: .52; }
}
@keyframes presentationGoldFlow {
0% { background-position: 0% 50%; }
100% { background-position: 260% 50%; }
}
@keyframes presentationGoldBlink {
0%, 13%, 28%, 47%, 61%, 82%, 100% {
filter: drop-shadow(0 0 5px rgba(255,210,75,.30));
text-shadow:
0 1px 0 rgba(98,43,0,.32),
0 0 8px rgba(255,214,92,.32),
0 0 16px rgba(255,138,28,.24);
}
14%, 30%, 63%, 84% {
filter: drop-shadow(0 0 10px rgba(255,237,145,.72));
text-shadow:
0 1px 0 rgba(98,43,0,.35),
0 0 12px rgba(255,244,166,.82),
0 0 26px rgba(255,174,35,.58);
}
}
/* Sección que envuelve la grilla — vive dentro de .product-detail-scroll */
.presentation-cards {
margin-top: .25rem;
padding: 1.1rem 1.2rem 1.25rem;
border-radius: 1.1rem;
background: linear-gradient(180deg, #0e1426 0%, #060912 100%);
border: 1px solid rgba(255,107,0,.22);
position: relative;
isolation: isolate;
box-shadow: 0 12px 30px rgba(2,6,23,.18);
}
.presentation-cards::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background:
radial-gradient(60% 50% at 0% 0%, rgba(255,107,0,.08), transparent 70%),
radial-gradient(60% 50% at 100% 100%, rgba(96,165,250,.06), transparent 70%);
pointer-events: none;
z-index: 0;
}
.presentation-cards-head {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: .12rem;
margin-bottom: .85rem;
}
.presentation-cards-eyebrow {
font-size: .68rem;
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,107,0,.85);
}
.presentation-cards-title {
font-size: 1.15rem;
font-weight: 900;
color: white;
letter-spacing: -.01em;
line-height: 1.1;
}
.presentation-cards-hint {
display: block;
margin-top: .35rem;
font-size: .72rem;
color: rgba(255,255,255,.55);
line-height: 1.4;
}
.presentation-cards-hint em {
font-style: normal;
color: #ff9d54;
font-weight: 700;
}
/* Grilla 2 col × 5 filas (desktop) — más legible para columna media */
.presentation-cards-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(4.2rem, auto);
gap: .55rem;
}
/* ============================================================
SECCIONES DEL PRODUCTO — botones que abren panel overlay
============================================================ */
.product-sections {
margin-top: 1rem;
padding: 1.05rem 1.2rem 1.15rem;
border-radius: 1.1rem;
background: linear-gradient(180deg, #0e1426 0%, #060912 100%);
border: 1px solid rgba(255,107,0,.18);
position: relative;
isolation: isolate;
box-shadow: 0 12px 30px rgba(2,6,23,.18);
transition: opacity .35s ease;
}
.product-sections-head {
display: flex;
flex-direction: column;
gap: .12rem;
margin-bottom: .9rem;
}
.product-sections-eyebrow {
font-size: .68rem;
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,107,0,.85);
}
.product-sections-title {
font-size: 1.15rem;
font-weight: 900;
color: white;
line-height: 1.1;
}
.product-sections-hint {
display: block;
margin-top: .35rem;
font-size: .72rem;
color: rgba(255,255,255,.55);
line-height: 1.4;
}
.product-sections-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .55rem;
}
.product-section-btn {
display: grid;
grid-template-columns: 36px 1fr 18px;
align-items: center;
gap: .75rem;
padding: .85rem 1rem;
border-radius: .8rem;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.09);
cursor: pointer;
text-align: left;
font: inherit;
color: white;
transition: transform .18s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.product-section-btn:hover:not(:disabled) {
border-color: rgba(255,107,0,.5);
background: rgba(255,107,0,.08);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(255,107,0,.22);
}
.product-section-btn.is-disabled {
opacity: .35;
cursor: not-allowed;
}
.section-btn-icon {
font-size: 1.6rem;
line-height: 1;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: .55rem;
background: rgba(255,107,0,.1);
}
.section-btn-content {
min-width: 0;
display: flex;
flex-direction: column;
gap: .2rem;
}
.section-btn-title {
font-size: .9rem;
font-weight: 800;
color: #ff9d54;
line-height: 1.15;
letter-spacing: -.005em;
}
.section-btn-meta {
font-size: .72rem;
font-weight: 600;
color: rgba(255,255,255,.65);
line-height: 1.3;
}
.section-btn-arrow {
font-size: 1.1rem;
font-weight: 900;
color: #ff6b00;
text-align: right;
transition: transform .2s ease;
}
.product-section-btn:hover:not(:disabled) .section-btn-arrow {
transform: translateX(3px);
}
/* Durante presentación: ocultar la sección, no distrae */
.reel-modal.is-presenting .product-sections {
opacity: 0;
pointer-events: none;
}
/* ============================================================
SECTION PANEL OVERLAY — abre cada sección como lightbox
============================================================ */
.section-panel-overlay {
position: fixed;
inset: 0;
z-index: 9990;
background: rgba(2,6,23,.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 2rem 1.5rem;
opacity: 0;
transition: opacity .28s ease;
}
.section-panel-overlay.is-visible { opacity: 1; }
.section-panel {
width: min(720px, 96vw);
max-height: 88vh;
background: white;
border-radius: 1.1rem;
box-shadow: 0 30px 80px rgba(0,0,0,.6);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(20px) scale(.97);
opacity: 0;
transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
}
.section-panel-overlay.is-visible .section-panel {
transform: translateY(0) scale(1);
opacity: 1;
}
.section-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.2rem;
border-bottom: 1px solid rgba(0,0,0,.08);
background: linear-gradient(180deg, rgba(255,107,0,.05), rgba(255,107,0,0));
}
.section-panel-head-left {
display: flex;
align-items: center;
gap: .75rem;
min-width: 0;
}
.section-panel-icon {
font-size: 1.5rem;
line-height: 1;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: .55rem;
background: rgba(255,107,0,.12);
}
.section-panel-title {
font-size: 1.15rem;
font-weight: 900;
color: #0f172a;
letter-spacing: -.01em;
}
.section-panel-close {
width: 38px;
height: 38px;
border: 0;
background: rgba(15,23,42,.06);
color: #0f172a;
border-radius: 999px;
font-size: 1.4rem;
font-weight: 1000;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: background .18s ease, color .18s ease, transform .15s ease;
}
.section-panel-close:hover {
background: #ff6b00;
color: white;
transform: scale(1.06);
}
.section-panel-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 1.1rem 1.2rem 1.4rem;
scrollbar-width: thin;
scrollbar-color: rgba(255,107,0,.5) rgba(15,23,42,.04);
}
.section-panel-body::-webkit-scrollbar { width: 8px; }
.section-panel-body::-webkit-scrollbar-track {
background: rgba(15,23,42,.04);
border-radius: 4px;
}
.section-panel-body::-webkit-scrollbar-thumb {
background: rgba(255,107,0,.5);
border-radius: 4px;
}
.section-panel-body::-webkit-scrollbar-thumb:hover {
background: rgba(255,107,0,.75);
}
/* Galería completa — grid estilo Mercado Libre */
.gallery-panel-intro {
margin: 0 0 .9rem;
padding: .65rem .85rem;
background: rgba(255,107,0,.07);
border-left: 3px solid #ff6b00;
border-radius: 0 .55rem .55rem 0;
font-size: .82rem;
color: rgba(15,23,42,.72);
line-height: 1.45;
}
.extra-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: .55rem;
}
.extra-gallery-photo {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
padding: 0;
border: 1px solid rgba(0,0,0,.08);
border-radius: .65rem;
background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
cursor: zoom-in;
overflow: hidden;
transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.extra-gallery-photo img {
width: 100%;
height: 100%;
object-fit: contain;
padding: .35rem;
display: block;
transition: transform .25s ease;
}
.extra-gallery-photo:hover {
transform: translateY(-2px);
border-color: #ff6b00;
box-shadow: 0 10px 22px rgba(255,107,0,.25);
}
.extra-gallery-photo:hover img {
transform: scale(1.04);
}
/* === Section panel WIDE (galería completa, doble ancho) === */
.section-panel-overlay--wide {
padding: 1.5rem 1rem;
}
.section-panel--wide {
width: min(1440px, 96vw);
max-height: 92vh;
}
.section-panel--navy {
background: #04081f !important;
color: white;
}
.section-panel--navy .section-panel-head {
background: linear-gradient(180deg, rgba(255,107,0,.12), rgba(255,107,0,0));
border-bottom: 1px solid rgba(255,107,0,.18);
}
.section-panel--navy .section-panel-title {
color: white !important;
}
.section-panel--navy .section-panel-close {
background: rgba(255,255,255,.12) !important;
color: white !important;
}
.section-panel--navy .section-panel-close:hover {
background: #ff6b00 !important;
color: white !important;
}
.section-panel--navy .section-panel-body {
background: #04081f;
}
.section-panel--navy .gallery-panel-intro {
background: rgba(255,107,0,.1);
color: rgba(255,255,255,.78);
}
/* === FILTER BAR (Todos / Videos / Fotos) === */
.gallery-filter-bar {
display: flex;
gap: .55rem;
margin: 0 0 1.2rem;
flex-wrap: wrap;
}
.gallery-filter-pill {
padding: .55rem 1.15rem;
border: 1.5px solid rgba(255,107,0,.55);
background: transparent;
color: rgba(255,255,255,.85);
font: inherit;
font-size: .82rem;
font-weight: 800;
letter-spacing: .01em;
border-radius: 999px;
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
white-space: nowrap;
}
.gallery-filter-pill:hover {
background: rgba(255,107,0,.15);
color: white;
transform: translateY(-1px);
}
.gallery-filter-pill.is-active {
background: #ff6b00;
color: white;
border-color: #ff6b00;
box-shadow: 0 6px 16px rgba(255,107,0,.35);
}
/* === SECCIONES APILADAS === */
.gallery-section {
margin-bottom: 1.6rem;
animation: gallerySectionFade .2s ease;
}
.gallery-section:last-child { margin-bottom: 0; }
.gallery-section.is-hidden {
display: none;
}
@keyframes gallerySectionFade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.gallery-section-title {
margin: 0 0 .9rem;
font-size: .72rem;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
color: #ff9d54;
padding-bottom: .55rem;
border-bottom: 1px solid rgba(255,107,0,.18);
}
.gallery-section.is-only .gallery-section-title {
display: none;
}
/* === Single-column vertical: deja espacio a la derecha para que el ZPP se expanda === */
.gallery-videos-grid {
display: flex;
flex-direction: column;
gap: .85rem;
align-items: flex-start;
}
.gallery-videos-grid .extra-gallery-video {
width: 100%;
max-width: 280px;
margin: 0;
}
.gallery-videos-grid .video-thumb-wrap {
aspect-ratio: 4 / 5;
}
.gallery-photos-grid {
display: flex;
flex-direction: column;
gap: .55rem;
align-items: flex-start;
}
.gallery-photos-grid .extra-gallery-photo {
width: 100%;
max-width: 240px;
aspect-ratio: 1 / 1;
margin: 0;
}
.gallery-photos-grid .extra-gallery-photo img {
padding: .55rem;
}
/* === RESPONSIVE === */
@media (max-width: 700px) {
.gallery-videos-grid .extra-gallery-video { max-width: 100%; }
.gallery-photos-grid .extra-gallery-photo { max-width: 100%; }
.gallery-filter-bar { gap: .4rem; }
.gallery-filter-pill { padding: .45rem .9rem; font-size: .76rem; }
}
/* Photo thumbs en panel navy */
.section-panel--navy .extra-gallery-photo {
background: linear-gradient(180deg, #14182a 0%, #0a0e1a 100%);
border: 1px solid rgba(255,255,255,.08);
}
.section-panel--navy .extra-gallery-photo:hover {
border-color: #ff6b00;
box-shadow: 0 12px 26px rgba(255,107,0,.3);
}
/* Video thumb cards */
.extra-gallery-video {
display: flex;
flex-direction: column;
gap: .4rem;
padding: 0;
border: 1px solid rgba(255,255,255,.1);
border-radius: .75rem;
background: linear-gradient(180deg, #14182a 0%, #0a0e1a 100%);
cursor: pointer;
overflow: hidden;
text-align: left;
font: inherit;
color: white;
transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.extra-gallery-video:hover {
transform: translateY(-2px);
border-color: #ff6b00;
box-shadow: 0 14px 30px rgba(255,107,0,.32);
}
.video-thumb-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
display: grid;
place-items: center;
}
.video-thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease, opacity .25s ease;
}
.extra-gallery-video:hover .video-thumb-wrap img {
transform: scale(1.05);
opacity: .82;
}
.video-thumb-play {
position: absolute;
bottom: .55rem;
right: .55rem;
width: 32px;
height: 32px;
border-radius: 999px;
background: rgba(2,6,23,.7);
color: white;
font-size: .75rem;
display: grid;
place-items: center;
font-weight: 900;
border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: transform .2s ease, background .2s ease;
pointer-events: none;
}
.extra-gallery-video:hover .video-thumb-play {
background: #ff6b00;
border-color: #ff6b00;
transform: scale(1.08);
}
.video-thumb-caption {
padding: .7rem .85rem .85rem;
font-size: .85rem;
font-weight: 700;
line-height: 1.35;
color: rgba(255,255,255,.9);
/* truncate to 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* === In-place video player en thumb === */
.video-thumb-player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* cubre el thumb sin franjas grises laterales */
display: none;
background: #000;
}
/* Poster también object-fit cover para evitar franjas */
.video-thumb-poster {
width: 100%;
height: 100%;
object-fit: cover !important;
}
/* Poster visible solo en idle */
.extra-gallery-video[data-video-state="idle"] .video-thumb-player { display: none; }
.extra-gallery-video[data-video-state="idle"] .video-thumb-poster { display: block; }
/* En hover-preview: video visible, poster oculto */
.extra-gallery-video[data-video-state="hover-preview"] .video-thumb-player { display: block; }
.extra-gallery-video[data-video-state="hover-preview"] .video-thumb-poster { display: none; }
.extra-gallery-video[data-video-state="hover-preview"] .video-thumb-play { display: none; }
/* Marco visual cuando hover preview activo */
.extra-gallery-video[data-video-state="hover-preview"] {
border-color: #ff6b00 !important;
box-shadow: 0 14px 30px rgba(255,107,0,.32);
}
/* === Video expand panel: click → grow to right === */
.video-expand-panel {
position: fixed;
background: linear-gradient(180deg, #14182a 0%, #0a0e1a 100%);
border: 1px solid rgba(255,107,0,.5);
border-radius: 1rem;
overflow: hidden;
opacity: 0;
z-index: 10001;
box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(255,107,0,.18);
cursor: pointer;
transition:
opacity .28s ease,
width .35s cubic-bezier(.4,0,.2,1),
height .35s cubic-bezier(.4,0,.2,1),
top .35s cubic-bezier(.4,0,.2,1),
left .35s cubic-bezier(.4,0,.2,1);
}
.video-expand-panel.is-active { opacity: 1; }
.video-expand-panel video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
display: block;
}
.video-expand-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: .5rem .85rem;
background: linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.78));
color: rgba(255,255,255,.88);
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
text-align: center;
pointer-events: none;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: .35rem;
text-transform: uppercase;
transition: opacity .2s ease;
}
/* Video lightbox overlay (igual estilo que buyer-photo-overlay) */
.video-lightbox-overlay {
position: fixed;
inset: 0;
z-index: 9996;
background: rgba(2,6,23,.94);
display: grid;
place-items: center;
padding: 2rem;
opacity: 0;
transition: opacity .25s ease;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: zoom-out;
}
.video-lightbox-overlay.is-visible { opacity: 1; }
.video-lightbox-box {
position: relative;
width: min(90vw, 1200px);
max-height: 88vh;
display: flex;
flex-direction: column;
gap: .5rem;
cursor: default;
}
.video-lightbox-video {
width: 100%;
max-height: 80vh;
background: #000;
border-radius: .8rem;
box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.video-lightbox-close {
position: absolute;
top: -54px;
right: 0;
width: 44px; height: 44px;
border-radius: 999px;
border: 0;
background: rgba(255,255,255,.95);
color: #0f172a;
font-size: 1.6rem;
font-weight: 1000;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: background .18s ease, transform .15s ease;
z-index: 1;
}
.video-lightbox-close:hover {
background: #ff6b00;
color: white;
transform: scale(1.05);
}
.video-lightbox-caption {
text-align: center;
font-size: .9rem;
font-weight: 700;
color: rgba(255,255,255,.85);
letter-spacing: .01em;
}
/* responsive: en mobile a 1 columna */
@media (max-width: 600px) {
.product-sections-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
FICHA COMPLETA — Tabs con specs / reviews / faq / warranty (LEGACY)
============================================================ */
.product-fullsheet {
margin-top: 1rem;
border: 1px solid rgba(0,0,0,.08);
border-radius: 1rem;
background: white;
overflow: hidden;
transition: opacity .35s ease;
}
.fullsheet-tabs {
display: flex;
gap: 0;
background: rgba(15,23,42,.04);
border-bottom: 1px solid rgba(0,0,0,.08);
overflow-x: auto;
}
.fullsheet-tab {
flex: 1 1 auto;
padding: .85rem .9rem;
border: 0;
background: transparent;
font-size: .82rem;
font-weight: 800;
letter-spacing: .01em;
color: rgba(15,23,42,.6);
cursor: pointer;
position: relative;
transition: color .2s ease, background .2s ease;
white-space: nowrap;
}
.fullsheet-tab::after {
content: '';
position: absolute;
left: 14%; right: 14%; bottom: 0;
height: 3px;
background: transparent;
border-radius: 3px 3px 0 0;
transition: background .25s ease;
}
.fullsheet-tab:hover {
background: rgba(255,107,0,.06);
color: #ff6b00;
}
.fullsheet-tab.is-active {
color: #ff6b00;
background: white;
}
.fullsheet-tab.is-active::after {
background: #ff6b00;
}
.fullsheet-panels {
position: relative;
padding: 1.1rem 1.15rem 1.2rem;
}
.fullsheet-panel {
display: none;
animation: fullsheetFadeIn .25s ease;
}
.fullsheet-panel.is-active {
display: block;
}
@keyframes fullsheetFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.fullsheet-empty {
font-size: .82rem;
color: rgba(15,23,42,.55);
font-style: italic;
margin: 0;
}
/* --- Specs (panel 1) --- */
.specs-group { margin-bottom: 1.1rem; }
.specs-group:last-child { margin-bottom: 0; }
.specs-group-title {
font-size: .72rem;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
color: #ff6b00;
margin: 0 0 .55rem;
padding-bottom: .4rem;
border-bottom: 1px solid rgba(255,107,0,.18);
}
.specs-list {
display: grid;
grid-template-columns: minmax(8rem, 11rem) 1fr;
gap: .35rem .9rem;
margin: 0;
font-size: .82rem;
}
.specs-list dt {
font-weight: 700;
color: rgba(15,23,42,.65);
}
.specs-list dd {
margin: 0;
font-weight: 600;
color: #0f172a;
}
/* --- Reviews (panel 2) --- */
.reviews-summary {
display: flex;
align-items: baseline;
gap: .65rem;
padding-bottom: .85rem;
margin-bottom: .9rem;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.reviews-avg {
font-size: 2.4rem;
font-weight: 900;
color: #0f172a;
line-height: 1;
}
.reviews-stars {
font-size: 1rem;
color: #f59e0b;
letter-spacing: .04em;
}
.reviews-count {
font-size: .82rem;
color: rgba(15,23,42,.55);
font-weight: 600;
}
.reviews-list {
display: flex;
flex-direction: column;
gap: .85rem;
}
.review-card {
padding: .85rem 1rem;
border-radius: .7rem;
background: rgba(15,23,42,.03);
border: 1px solid rgba(0,0,0,.06);
}
.review-head {
display: flex;
align-items: baseline;
gap: .65rem;
flex-wrap: wrap;
margin-bottom: .35rem;
}
.review-who {
font-weight: 800;
color: #0f172a;
font-size: .88rem;
}
.review-rating {
color: #f59e0b;
font-size: .82rem;
letter-spacing: .03em;
}
.review-when {
font-size: .72rem;
color: rgba(15,23,42,.5);
font-weight: 600;
margin-left: auto;
}
.review-body {
margin: 0;
font-size: .85rem;
line-height: 1.5;
color: rgba(15,23,42,.78);
}
/* Resumen IA de Mercado Libre — bloque destacado en panel reviews */
.reviews-ai-summary {
position: relative;
padding: .85rem 1rem .9rem 3rem;
margin-bottom: 1rem;
border-radius: .8rem;
background: linear-gradient(135deg, rgba(255,107,0,.08), rgba(96,165,250,.06));
border: 1px solid rgba(255,107,0,.18);
}
.reviews-ai-summary::before {
content: '✨';
position: absolute;
left: .9rem; top: .9rem;
font-size: 1.1rem;
}
.reviews-ai-tag {
display: block;
font-size: .68rem;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
color: #ff6b00;
margin-bottom: .25rem;
}
.reviews-ai-text {
margin: 0;
font-size: .82rem;
line-height: 1.45;
color: rgba(15,23,42,.78);
font-style: italic;
}
/* Galería de fotos de compradores */
.buyer-photos {
margin-bottom: 1.1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.buyer-photos-title {
margin: 0 0 .65rem;
font-size: .82rem;
font-weight: 800;
color: rgba(15,23,42,.7);
letter-spacing: -.005em;
}
.buyer-photos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: .4rem;
}
.buyer-photo {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
padding: 0;
border: 1px solid rgba(0,0,0,.08);
border-radius: .5rem;
background: rgba(15,23,42,.03);
cursor: zoom-in;
overflow: hidden;
transition: transform .18s ease, border-color .18s ease, box-shadow .25s ease;
}
.buyer-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.buyer-photo:hover {
transform: translateY(-2px);
border-color: #ff6b00;
box-shadow: 0 8px 18px rgba(255,107,0,.25);
}
.buyer-photo-broken {
background: linear-gradient(135deg, rgba(15,23,42,.06), rgba(15,23,42,.12));
cursor: not-allowed;
opacity: .55;
}
.buyer-photo-broken::after {
content: "✕";
position: absolute; inset: 0;
display: grid; place-items: center;
font-size: 1.1rem; color: rgba(15,23,42,.4); font-weight: 800;
}
/* Lightbox de foto de comprador */
.buyer-photo-overlay {
position: fixed;
inset: 0;
background: rgba(2,6,23,.92);
z-index: 9995;
display: grid;
place-items: center;
padding: 2rem;
opacity: 0;
transition: opacity .25s ease;
cursor: zoom-out;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.buyer-photo-overlay.is-visible { opacity: 1; }
.buyer-photo-big {
max-width: 90vw;
max-height: 85vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: .8rem;
box-shadow: 0 30px 80px rgba(0,0,0,.7);
cursor: zoom-in;
will-change: transform;
}
.buyer-photo-close {
position: absolute;
top: 1.1rem; right: 1.2rem;
width: 44px; height: 44px;
border-radius: 999px;
border: 0;
background: rgba(255,255,255,.95);
color: #0f172a;
font-size: 1.6rem;
font-weight: 1000;
line-height: 1;
cursor: pointer;
display: grid; place-items: center;
transition: background .18s ease, transform .15s ease;
z-index: 1;
}
.buyer-photo-close:hover {
background: #ff6b00;
color: white;
transform: scale(1.05);
}
.buyer-photo-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px; height: 52px;
border-radius: 999px;
border: 0;
background: rgba(255,255,255,.92);
color: #0f172a;
font-size: 2rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: grid; place-items: center;
transition: background .18s ease, transform .15s ease;
}
.buyer-photo-nav.prev { left: 1.5rem; }
.buyer-photo-nav.next { right: 1.5rem; }
.buyer-photo-nav:hover {
background: #ff6b00;
color: white;
transform: translateY(-50%) scale(1.06);
}
.buyer-photo-count {
position: absolute;
bottom: 1.5rem; left: 50%;
transform: translateX(-50%);
padding: .45rem 1rem;
border-radius: 999px;
background: rgba(255,255,255,.95);
color: #0f172a;
font-size: .82rem;
font-weight: 800;
letter-spacing: .03em;
}
/* Badge "1.8x" tipo main panel */
.buyer-photo-zoom-badge {
position: absolute;
top: 1.5rem;
right: 5.5rem;
padding: .45rem .9rem;
border-radius: 999px;
background: rgba(2,6,23,.85);
color: white;
border: 1px solid rgba(255,107,0,.5);
font-size: .85rem;
font-weight: 900;
letter-spacing: .04em;
pointer-events: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: border-color .15s ease;
}
/* Pan bar (indicador horizontal de posición del mouse) */
.buyer-photo-pan-bar {
position: absolute;
bottom: 5rem;
left: 50%;
transform: translateX(-50%);
width: min(60vw, 700px);
height: 4px;
background: rgba(255,255,255,.18);
border-radius: 4px;
overflow: hidden;
pointer-events: none;
}
.buyer-photo-pan-fill {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, #ff6b00, #ffae5a);
border-radius: 4px;
transition: width .14s ease-out;
box-shadow: 0 0 12px rgba(255,107,0,.6);
}
/* --- FAQ (panel 3) --- */
.faq-item {
border-bottom: 1px solid rgba(0,0,0,.07);
padding: 0;
}
.faq-item:last-child { border-bottom: 0; }
.faq-question {
list-style: none;
cursor: pointer;
padding: .85rem .25rem;
font-size: .9rem;
font-weight: 800;
color: #0f172a;
display: flex;
align-items: center;
gap: .55rem;
user-select: none;
transition: color .2s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::before {
content: '+';
display: inline-grid;
place-items: center;
width: 22px; height: 22px;
border-radius: 999px;
background: rgba(255,107,0,.12);
color: #ff6b00;
font-weight: 1000;
font-size: 1rem;
flex: 0 0 auto;
transition: transform .25s ease, background .2s ease;
}
.faq-item[open] .faq-question { color: #ff6b00; }
.faq-item[open] .faq-question::before {
transform: rotate(45deg);
background: #ff6b00;
color: white;
}
.faq-question:hover { color: #ff6b00; }
.faq-answer {
margin: 0 0 .9rem 2rem;
font-size: .85rem;
line-height: 1.55;
color: rgba(15,23,42,.72);
}
/* --- Warranty (panel 4) --- */
.warranty-block { display: flex; flex-direction: column; gap: .9rem; }
.warranty-duration {
display: inline-block;
padding: .55rem 1rem;
border-radius: 999px;
background: linear-gradient(135deg, #ff6b00, #ff8c1f);
color: white;
font-size: .85rem;
font-weight: 900;
letter-spacing: .02em;
align-self: flex-start;
box-shadow: 0 6px 16px rgba(255,107,0,.3);
}
.warranty-section-title {
margin: 0;
font-size: .72rem;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(15,23,42,.6);
}
.warranty-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: .35rem;
}
.warranty-list li {
position: relative;
padding-left: 1.6rem;
font-size: .85rem;
line-height: 1.45;
color: rgba(15,23,42,.78);
}
.warranty-list li::before {
position: absolute;
left: 0; top: 1px;
font-weight: 1000;
width: 1.2rem;
display: inline-grid;
place-items: center;
}
.warranty-list.is-positive li::before {
content: '✓';
color: #16a34a;
}
.warranty-list.is-negative li::before {
content: '✗';
color: #dc2626;
}
.warranty-service {
margin: 0;
padding: .85rem 1rem;
background: rgba(255,107,0,.06);
border-left: 3px solid #ff6b00;
border-radius: 0 .55rem .55rem 0;
font-size: .85rem;
line-height: 1.5;
color: rgba(15,23,42,.78);
}
/* Durante presentación: ocultar la ficha completa, no distrae */
.reel-modal.is-presenting .product-fullsheet {
opacity: 0;
pointer-events: none;
}
/* Wrapper de descripciones extendidas (collapsable) */
.product-extra-details {
margin-top: .85rem;
border: 1px solid rgba(0,0,0,.08);
border-radius: .9rem;
background: white;
padding: 0;
overflow: hidden;
transition: opacity .35s ease;
}
.product-extra-details > summary {
list-style: none;
cursor: pointer;
padding: .85rem 1rem;
font-size: .82rem;
font-weight: 800;
color: #0f172a;
background: rgba(15,23,42,.04);
display: flex;
align-items: center;
gap: .55rem;
user-select: none;
transition: background .2s ease;
}
.product-extra-details > summary:hover {
background: rgba(255,107,0,.08);
color: #ff6b00;
}
.product-extra-details > summary::-webkit-details-marker { display: none; }
.product-extra-details > summary::before {
content: '+';
display: inline-grid;
place-items: center;
width: 20px; height: 20px;
border-radius: 999px;
background: rgba(255,107,0,.15);
color: #ff6b00;
font-weight: 1000;
font-size: .9rem;
transition: transform .25s ease;
}
.product-extra-details[open] > summary::before {
transform: rotate(45deg);
background: #ff6b00;
color: white;
}
.product-extra-details > .product-virtues,
.product-extra-details > .product-story {
padding: 0 1rem;
}
.product-extra-details > .product-story {
padding-bottom: 1rem;
}
/* Durante la presentación: ocultar el extra-details, no distrae */
.reel-modal.is-presenting .product-extra-details {
opacity: 0;
pointer-events: none;
}
/* Panel zoom usado durante la presentación (clon de .thumb-preview).
Sin transitions CSS: la timeline lo controla 100% con WAAPI. */
.thumb-preview.presentation-pan {
z-index: 260;
transition: none !important;
pointer-events: none;
}
.thumb-preview.presentation-pan img {
transition: none !important;
}
/* Card individual — base */
.presentation-card {
position: relative;
padding: .8rem .85rem .9rem;
border-radius: .8rem;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.09);
display: flex;
flex-direction: column;
gap: .3rem;
min-height: 4.6rem;
overflow: hidden;
transition: opacity .35s cubic-bezier(.4,0,.2,1),
filter .35s ease,
border-color .35s ease,
background .35s ease,
box-shadow .35s ease;
will-change: opacity, filter;
}
.presentation-card::before {
/* numeración tenue de fondo: 1..10 */
content: counter(presentationCard);
counter-increment: presentationCard;
position: absolute;
right: .55rem; top: .35rem;
font-size: .68rem;
font-weight: 900;
letter-spacing: .12em;
color: rgba(255,255,255,.16);
pointer-events: none;
}
.presentation-cards-grid {
counter-reset: presentationCard;
}
.presentation-card {
cursor: zoom-in;
}
.presentation-card:hover {
border-color: rgba(255,107,0,.5);
background: rgba(255,107,0,.08);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(255,107,0,.18);
}
.presentation-card-title {
font-size: 1.05rem;
font-weight: 900;
color: #ff8a3a;
line-height: 1.05;
letter-spacing: -.015em;
}
.presentation-card-body {
font-size: .76rem;
font-weight: 500;
color: rgba(255,255,255,.74);
line-height: 1.35;
}
/* Estado: caja vacía durante la presentación (queda fantasma) */
.presentation-card.is-vacated {
opacity: .15;
filter: blur(2px);
}
.presentation-card.is-filled {
opacity: 1;
filter: none;
border-color: rgba(255,107,0,.4);
background: rgba(255,107,0,.08);
box-shadow: 0 6px 18px rgba(255,107,0,.18);
}
/* Backdrop del lightbox cuando el usuario clickea una card */
.presentation-card-backdrop {
position: fixed;
inset: 0;
background: rgba(2,6,23,.72);
z-index: 9990;
opacity: 0;
transition: opacity .32s ease;
cursor: zoom-out;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.presentation-card-backdrop.is-visible { opacity: 1; }
/* La card flotante en lightbox: cursor zoom-out indica "click para cerrar" */
.presentation-card-fly.is-lightbox {
cursor: zoom-out;
pointer-events: auto;
}
/* Modo grid 2×5 centrado: cards grandes y legibles de un golpe de vista.
Cada card luce IDÉNTICA a una card grande de presentación (full color, full text).
El único diferenciador es el borde naranja en la "actual". */
.presentation-card-fly.is-grid {
min-width: 0;
max-width: none;
padding: 1.05rem 1.25rem;
text-align: left;
align-items: flex-start;
justify-content: center;
gap: .4rem;
background: linear-gradient(180deg, #14182a 0%, #0a0e1a 100%);
border: 1.5px solid rgba(255,255,255,.1);
box-shadow:
0 10px 24px rgba(0,0,0,.5),
0 1px 0 rgba(255,255,255,.05) inset;
transition: border-color .26s ease, box-shadow .26s ease;
}
.presentation-card-fly.is-grid .presentation-card-title {
font-size: 1.7rem;
line-height: 1.05;
color: #ff9d54;
text-shadow: none;
letter-spacing: -.01em;
}
.presentation-card-fly.is-grid .presentation-card-body {
font-size: .92rem;
line-height: 1.38;
max-width: none;
color: rgba(255,255,255,.85);
/* truncar a 3 líneas si la altura no alcanza */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* La card "actual" — único marcador visual: borde naranja + glow */
.presentation-card-fly.is-grid.is-current {
border: 2.5px solid #ff6b00;
box-shadow:
0 0 0 5px rgba(255,107,0,.2),
0 18px 38px rgba(0,0,0,.6),
0 0 50px rgba(255,107,0,.5);
}
.presentation-card-fly.is-grid.is-current .presentation-card-title {
text-shadow: 0 2px 12px rgba(255,107,0,.55);
color: #ff6b00;
}
/* Karaoke: cada palabra es un span animable */
.presentation-card-fly .kw {
display: inline-block;
transform-origin: center center;
will-change: transform, color, text-shadow;
}
/* Clon que vuela al centro durante la presentación */
.presentation-card-fly {
position: fixed;
z-index: 9999;
pointer-events: none;
padding: 1.4rem 1.6rem 1.5rem;
border-radius: 1rem;
background: linear-gradient(180deg, #14182a 0%, #0a0e1a 100%);
border: 2px solid #ff6b00;
box-shadow:
0 0 0 8px rgba(255,107,0,.18),
0 24px 60px rgba(0,0,0,.55),
0 0 80px rgba(255,107,0,.35);
display: flex;
flex-direction: column;
gap: .55rem;
text-align: center;
align-items: center;
justify-content: center;
min-width: 280px;
max-width: 380px;
transform-origin: center center;
}
.presentation-card-fly .presentation-card-title {
font-size: 2.4rem;
line-height: 1;
text-shadow: 0 4px 18px rgba(255,107,0,.55);
}
.presentation-card-fly .presentation-card-body {
font-size: 1rem;
color: rgba(255,255,255,.92);
line-height: 1.4;
max-width: 32ch;
}
/* Modal en modo presentación */
.reel-modal.is-presenting .reel-modal-panel {
/* deja el modal pero atenúa lo que no participa */
}
.reel-modal.is-presenting [data-reel-close],
.reel-modal.is-presenting .modal-promo-chip,
.reel-modal.is-presenting .modal-whatsapp,
.reel-modal.is-presenting .modal-presentation-btn {
opacity: .25;
pointer-events: none;
transition: opacity .4s ease;
}
/* Overlay oscuro suave durante la presentación */
.presentation-overlay {
position: fixed;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.78));
z-index: 240;
pointer-events: auto;
opacity: 0;
transition: opacity .45s ease;
}
.presentation-overlay.is-visible { opacity: 1; }
/* Barra de progreso superior */
.presentation-progress {
position: fixed;
top: 0; left: 0;
height: 4px;
width: 0%;
background: linear-gradient(90deg, #ff6b00, #ffae5a);
z-index: 280;
box-shadow: 0 0 12px rgba(255,107,0,.6);
transition: width .15s linear;
}
/* Botón "Salir presentación" */
.presentation-exit {
position: fixed;
top: 18px;
right: 18px;
z-index: 281;
padding: .55rem .9rem .55rem .8rem;
border-radius: 999px;
background: rgba(2,6,23,.85);
color: white;
border: 1px solid rgba(255,255,255,.18);
font-size: .78rem;
font-weight: 800;
letter-spacing: .04em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .35rem;
backdrop-filter: blur(8px);
transition: background .2s ease, transform .15s ease;
}
.presentation-exit:hover {
background: rgba(255,107,0,.92);
transform: translateY(-1px);
}
.presentation-exit::before {
content: '×';
font-size: 1.05rem;
line-height: 1;
}
/* Etiqueta "Modo presentación" */
.presentation-badge {
position: fixed;
top: 18px;
left: 18px;
z-index: 281;
padding: .45rem .85rem;
border-radius: 999px;
background: rgba(255,107,0,.95);
color: white;
font-size: .72rem;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
box-shadow: 0 6px 18px rgba(255,107,0,.45);
display: inline-flex;
align-items: center;
gap: .35rem;
}
.presentation-badge::before {
content: '';
width: 8px; height: 8px;
border-radius: 999px;
background: white;
box-shadow: 0 0 10px white;
animation: presBadgePulse 1s ease-in-out infinite;
}
@keyframes presBadgePulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .55; transform: scale(.85); }
}
/* Reduced motion: solo opacity, nada de scale/blur */
@media (prefers-reduced-motion: reduce) {
.presentation-card,
.presentation-card-fly { transition: opacity .35s ease; }
.presentation-card.is-vacated { filter: none; }
.presentation-card-fly { transform: none !important; }
.presentation-badge::before { animation: none; }
}
/* Responsive mobile: la grilla colapsa a 1 columna */
@media (max-width: 600px) {
.presentation-cards-grid {
grid-template-columns: 1fr;
}
}