/* ============================================================
MUSE — Hoja de estilos propia, sobre el theme Lima
Archivo: static/css/muse-theme.css
Reescrita el 2026-08-19 para el port sobre Lima.
QUÉ ES ESTO
Solo los componentes que son NUESTROS y que Lima no resuelve.
Todo lo que era override del theme anterior (Morelia) se
descartó: 1.116 de las 1.937 líneas originales.
Lima ya trae de fábrica, y por eso ya no está acá:
· miniaturas verticales de la galería
· columna de filtros con drawer mobile
· columnas de grilla separadas desktop/mobile
· franja de confianza (banner services)
· barra de anuncios, header, menú lateral
REGLA DE ORO DEL PORT
Los colores y la tipografía de marca se cargan desde el ADMIN
de Lima (Colores de tu marca, Tipo de letra), NO se hardcodean
acá. Los tokens de abajo son para nuestros componentes propios.
Si algo se puede configurar desde el admin, va al admin.
ORDEN
1. Tokens de marca
2. Hero + buscador de modelo
3. Widget flotante de WhatsApp
4. Carrusel de reseñas
5. Popup raspadita
6. Precio en transferencia
7. Desplegable de modelo
8. Filtro de modelo destacado en el listado
9. Barra de categorías bajo el encabezado
10. Banda de prueba social del inicio
11. Fila de categorías en círculos
12. Grupos de filtro colapsables
13. Botón de compra a ancho completo
14. Completá tu compra (complementarios)
15. Franja de características del producto
16. Comunidad MUSE (mosaico video + fotos)
17. Reseñas en la ficha de producto
18. Unite a MUSE (mosaico + llamada)
19. Preguntas frecuentes
20. Mosaico de categorías del inicio
21. Barra de avisos en movimiento
22. Producto + foto de uso
============================================================ */
/* ---------- 1. Tokens de marca ---------- */
/* Paleta confirmada con cliente 2026-06-28 (feedback PDF, punto 10):
- Base: Negro / Blanco / Crema (ya usados por la marca)
- Acento: Pink #F2C0CB (el que ya usan en su web)
Mantenemos charcoal (casi-negro cálido) y crema en lugar de negro/blanco
puros porque la sensación editorial del rediseño depende de esos matices. */
:root{
--muse-white:#FFFFFF;
--muse-crema:#F8EBD9; /* crema confirmado por cliente — más saturado, más vibe */
--muse-crema-2:#EFE9DF;
--muse-crema-soft:#F5F1EA; /* el crema anterior — disponible por si en algún componente queda mejor más apagado */
--muse-black:#000000;
--muse-charcoal:#2B2A28; /* casi-negro cálido — uso principal */
--muse-ink:#232323;
--muse-pink:#F2C0CB; /* rosita confirmado por cliente */
--muse-pink-deep:#C97A91;
--muse-brown-deep:#1C1208; /* marrón secundario que pasó el cliente (2026-08-08).
Contraste 18.4:1 sobre blanco — MÁS oscuro que el charcoal
del texto principal. Sirve como color de texto o de fondo,
pero NO como acento: no se distingue del cuerpo de texto.
Se conserva por si se necesita en tipografía o bloques. */
--muse-brown:#8A4B27; /* versión clara del mismo marrón, para acentos (IT3-E).
Mismo matiz cálido (hue ~22°, rojizo — no mostaza),
subido en luminosidad hasta 6.7:1 sobre blanco:
cumple accesibilidad AA de sobra y a la vez queda
2.1:1 contra el charcoal, así que SÍ se lee como
un color distinto y destaca. */
--muse-blue:#A9C5D6;
--muse-coral:#D88A6A;
--muse-sand:#D8C3A5;
--muse-line:#E2DCD1;
--muse-muted:#6B6A66;
--muse-wa:#25D366;
--muse-radius:14px;
--muse-serif:'Fraunces',Georgia,serif;
--muse-sans:'Inter',-apple-system,'Segoe UI',sans-serif;
}
/* Las fuentes NO se cargan desde acá ni desde el layout: Lima trae
Fraunces e Inter en su lista de tipografías y las inyecta la propia
plataforma. Se eligen en Diseño → Personalizar → Tipo de letra
(títulos: Fraunces · textos: Inter).
Los dos tokens de abajo existen para que nuestros componentes puedan
pedir explícitamente la serif o la sans cuando lo necesitan. Si el
cliente cambia las fuentes en el admin, lo que cambia es el resto del
theme; estos dos siguen apuntando a Fraunces/Inter a propósito. */
/* ---------- 5. Hero + buscador de modelo ---------- */
.muse-hero{
padding:52px 30px 40px;text-align:center;
background:radial-gradient(120% 90% at 50% -10%, #fbf7f0 0%, var(--muse-crema) 60%);
}
.muse-hero .kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muse-pink-deep);margin-bottom:16px;}
.muse-hero h1{font-size:46px;line-height:1.06;max-width:680px;margin:0 auto;}
.muse-hero h1 em{font-style:italic;color:var(--muse-pink-deep);}
.muse-hero .sub{margin:18px auto 0;max-width:480px;color:var(--muse-muted);font-size:15.5px;line-height:1.6;}
/* IT2 refino (2026-07-14): finder con paleta invertida por pedido del cliente.
Caja en charcoal (negro cálido), select en blanco puro para contraste,
botón en crema con texto charcoal. La pregunta arriba pasa a blanco/crema
claro por el fondo negro. */
.muse-finder{
margin:30px auto 0;max-width:560px;background:var(--muse-charcoal);border:1px solid var(--muse-charcoal);
border-radius:16px;padding:22px;box-shadow:0 12px 34px rgba(43,42,40,.16);
}
/* .ftop ahora renderiza la pregunta "¿Qué modelo de iPhone tenés?" (FB-6):
más peso y tamaño para funcionar como headline del bloque del finder.
IT2 refino: color claro sobre fondo charcoal. */
.muse-finder .ftop{display:flex;align-items:center;gap:9px;justify-content:center;font-weight:600;color:#f3ede3;font-size:15px;margin-bottom:14px;letter-spacing:-.005em;}
.muse-finder .row{display:flex;gap:10px;}
.muse-finder select{flex:1;appearance:none;background:#fff;border:1px solid #fff;border-radius:10px;padding:13px 14px;font-size:14.5px;color:var(--muse-charcoal);font-family:inherit;}
.muse-finder .go{background:var(--muse-crema);color:var(--muse-charcoal);border:none;border-radius:10px;padding:13px 22px;font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;transition:background .15s ease, color .15s ease;}
.muse-finder .go:hover{background:var(--muse-pink);color:var(--muse-charcoal);}
.muse-finder .helper{margin-top:13px;font-size:13px;color:#c7c0b4;text-align:center;}
.muse-finder .helper a{color:var(--muse-pink);font-weight:600;border-bottom:1px solid rgba(242,192,203,.4);}
/* ---------- 5b. Hero split — banner arriba, contenido debajo (IT2-3 · 2026-07-09) ----------
Variante que se activa cuando hay imágenes en el carrusel. Antes el texto
iba superpuesto sobre el banner; ahora el cliente pidió que el texto quede
DEBAJO del banner. Estructura:
- .muse-hero-banner: el slider como banner independiente arriba,
altura clamp, sin scrim (ya no hay texto encima que "leer")
- .muse-hero-content: título + finder debajo, en flujo normal, con
padding vertical, sobre fondo blanco del theme (que a su vez se
apoya visualmente en las cards de destacados). */
.muse-hero--split{
padding:0;
background:transparent;
}
/* MUSE: el header del Base NO debe superponer el banner.
Neutralizamos los modos absolute/transparent que el Base activa cuando
settings.head_transparent + slider están prendidos. El header siempre
consume su espacio en el flow normal. */
.head-main.head-absolute,
.head-main.head-transparent-absolute,
.head-main.head-transparent{
position:relative !important;
background-color:var(--muse-charcoal) !important;
}
/* IT2-3 refino definitivo (2026-07-30): "imagen siempre completa".
PROBLEMA 1 — recorte en pantallas anchas.
Teníamos aspect-ratio + max-height juntos. El max-height rompe el
aspect-ratio: el contenedor queda más panorámico que la imagen y
object-fit:cover recorta arriba y abajo, comiéndose el texto que las
imágenes del cliente traen impreso ("3 Cuotas S/I", "20% OFF transf.").
Decisión 2026-07-30: banner FULL-BLEED sin tope de ancho ni de alto.
El ancho manda (100% del viewport) y la altura se calcula sola desde el
aspect-ratio. Sin bordes laterales, sin recortes. La contra asumida es
que en monitores anchos el banner es alto (en 2560px ≈ 970px), pero el
cliente prefiere eso antes que las bandas blancas a los costados.
NOTA para futuro: el aspect-ratio de abajo es FIJO. Si el cliente cambia
las proporciones de las imágenes del carrusel, hay que actualizar esos
dos números o volverán a aparecer bandas (por el object-fit:contain).
PROBLEMA 2 — banner vacío en móvil.
El hero mete los DOS sliders del Base (desktop y móvil) dentro del mismo
contenedor, pero tienen estructura distinta: el desktop lleva un wrapper
.js-home-main-slider-container que el móvil no tiene. Con el aspect-ratio
en el padre compartido, la cadena de alturas se resolvía para desktop y
colapsaba para móvil.
Solución: el aspect-ratio va en CADA slider (.js-home-*-slider-visibility),
no en el padre. El padre queda con altura automática y se adapta al que
esté visible en ese breakpoint.
PROBLEMA 3 — el del slide con link.
Cuando un slide tiene link configurado en admin, el Base envuelve la imagen
en un que es inline por default → su altura colapsa. Va en la cadena
de height:100% con display:block.
Proporciones: las que recomienda el admin de Tiendanube en Carrusel de
imágenes → 1580×600 desktop, 820×1460 celulares. */
.muse-hero-banner{
position:relative;
overflow:hidden;
width:100%;
background:var(--muse-white);
}
/* La IMAGEN define la altura del banner — no hay aspect-ratio fijo ni
height:100% en ningún eslabón de la cadena.
La imagen se escala al 100% del ancho disponible y su altura sale sola
(height:auto). El contenedor mide exactamente lo que mide la imagen:
- Cero bandas: no puede sobrar espacio, porque no hay una altura impuesta.
- Cero recortes: no hay un contenedor con otra proporción que la recorte.
- Auto-adaptativo: si el cliente cambia el tamaño de las imágenes del
carrusel, el banner se ajusta solo, sin tocar una línea de CSS.
Esto reemplaza el enfoque anterior de aspect-ratio fijo, que dejaba una
franja blanca cuando la proporción del CSS no coincidía exactamente con la
de las imágenes cargadas (el admin recomienda 1580×500, teníamos 1580×600). */
/* CAUSA RAÍZ del espacio sobrante debajo del banner (encontrada 2026-08-02):
el Base define en style-critical.tpl → .section-slider { height: 100vh; }
Los dos sliders del carrusel llevan esa clase, así que el contenedor medía
el alto COMPLETO del viewport sin importar el ancho. La imagen ocupaba solo
su parte proporcional y el resto quedaba vacío — y como 100vh no depende
del ancho, al angostar la ventana el sobrante se agrandaba.
Anulamos esa altura en todos los eslabones para que manden las imágenes.
(El Base también pone height:100% en .nube-slider-home y .slider-slide,
pensados para colgar de ese 100vh.) */
.muse-hero-banner .section-slider,
.muse-hero-banner .js-home-main-slider-container,
.muse-hero-banner .nube-slider-home,
.muse-hero-banner .swiper-wrapper,
.muse-hero-banner .swiper-slide,
.muse-hero-banner .slide-container,
.muse-hero-banner .slider-slide{
height:auto !important;
}
.muse-hero-banner .slide-container > a,
.muse-hero-banner .swiper-slide > a{
display:block !important;
width:100%;
height:auto !important;
}
/* La imagen define la altura real del banner. */
.muse-hero-banner .slider-image{
width:100% !important;
height:auto !important;
object-fit:contain;
display:block;
}
/* Los slides miden su propio contenido en vez de estirarse. */
.muse-hero-banner .swiper-wrapper{
align-items:flex-start;
}
/* FB-2 (2026-07-25): antes se ocultaba TODO el .swiper-text — eso incluía
el botón SHOP NOW nativo del Base que el cliente pidió. Ahora ocultamos
solo el título y la descripción del slide (el cliente los tiene quemados
en la imagen) y mostramos el .swiper-btn estilizado como pill MUSE.
Para que aparezca el botón por slide, el cliente configura en admin:
Diseño → Personalizar → Carrusel de imágenes → editar slide →
completar "Botón" (ej. SHOP NOW) y "Link". Sin ambos, no aparece. */
.muse-hero-banner .swiper-title,
.muse-hero-banner .swiper-description,
.muse-hero-banner .swiper-button-prev,
.muse-hero-banner .swiper-button-next{display:none;}
/* Paginación anclada sobre la imagen, fuera del flujo, para que no sume
altura al banner. */
.muse-hero-banner .swiper-pagination{
position:absolute;
bottom:14px;
left:0;
right:0;
z-index:2;
}
/* Botón SHOP NOW dentro del slider del hero, con look MUSE (pill charcoal
con hover crema, tipografía Inter mayúscula). Se posiciona centrado
abajo del banner. */
.muse-hero-banner .swiper-text{
position:absolute;
left:0;
right:0;
bottom:32px;
z-index:3;
display:flex;
justify-content:center;
pointer-events:none;
}
.muse-hero-banner .swiper-btn,
.muse-hero-banner .btn.swiper-btn{
display:inline-block !important;
pointer-events:auto;
background:var(--muse-charcoal) !important;
color:#fff !important;
border:1px solid var(--muse-charcoal) !important;
border-radius:999px !important;
padding:12px 28px !important;
font-family:var(--muse-sans) !important;
font-size:12.5px !important;
font-weight:600 !important;
letter-spacing:.14em !important;
text-transform:uppercase !important;
text-decoration:none !important;
transition:background .15s ease, color .15s ease, transform .15s ease !important;
box-shadow:0 6px 18px rgba(20,18,16,.22) !important;
margin:0 !important;
}
.muse-hero-banner .swiper-btn:hover,
.muse-hero-banner .btn.swiper-btn:hover{
background:var(--muse-crema) !important;
color:var(--muse-charcoal) !important;
border-color:var(--muse-crema) !important;
transform:translateY(-1px) !important;
}
/* Breakpoint del banner alineado a Bootstrap `md` (768px), que es el que usa
el Base para alternar entre slider desktop (d-none d-md-block) y slider
móvil (d-md-none). Si usáramos 760px como el resto del theme, quedaría una
franja de 761-767px mostrando el slider móvil con proporción de desktop.
El aspect-ratio móvil ya está en .js-home-mobile-slider-visibility. El
banner es full-bleed también acá, así que no lleva max-width. */
@media(max-width:767px){
.muse-hero-banner .swiper-text{bottom:20px;}
.muse-hero-banner .swiper-btn,
.muse-hero-banner .btn.swiper-btn{
padding:10px 22px !important;
font-size:11.5px !important;
letter-spacing:.12em !important;
}
}
/* Contenido MUSE (texto + finder) debajo del banner. En flujo normal,
sin superposición. Fondo transparente para heredar el blanco del body. */
.muse-hero--split .muse-hero-content{
padding:44px 20px 40px;
text-align:center;
background:transparent;
}
.muse-hero--split .kicker{color:var(--muse-pink-deep);}
.muse-hero--split h1{color:var(--muse-charcoal);text-shadow:none;}
.muse-hero--split h1 em{color:var(--muse-pink-deep);}
.muse-hero--split .sub{color:var(--muse-muted);}
/* ---------- 15. Hero MUSE — clases con guion (sin colisiones con Bootstrap) ----------
Equivalentes a las reglas de la sección 5/6, pero con nombres explícitos
para evitar pisar/heredar de las clases .row y .go de Bootstrap.
Usadas por snipplets/muse/hero.tpl. */
/* IT2 refino (2026-07-14): versiones con guiones (usadas por hero.tpl actual).
Selector en blanco puro + botón en crema con hover a rosa MUSE. */
.muse-finder-form{margin-top:14px;}
.muse-finder-row{display:flex;gap:10px;}
.muse-finder-row select,
.muse-finder-select{
flex:1;appearance:none;background:#fff;border:1px solid #fff;
border-radius:10px;padding:13px 14px;font-size:14.5px;color:var(--muse-charcoal);font-family:inherit;
}
.muse-finder-go{
background:var(--muse-crema);color:var(--muse-charcoal);border:none;border-radius:10px;
padding:13px 22px;font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;
transition:background .15s ease, color .15s ease;
}
.muse-finder-go:hover{background:var(--muse-pink);color:var(--muse-charcoal);}
@media(max-width:760px){
.muse-finder-row{flex-direction:column;}
}
/* ---------- Widget de WhatsApp — DESCARTADO en el port a Lima (2026-08-19) ----------
Lima ya trae su propio botón flotante (snipplets/whatsapp-chat.tpl, clase
.btn-whatsapp con .js-btn-fixed-bottom). Nuestras reglas usaban !important
sobre position/right/bottom y le hubieran peleado al JS de Lima que le
maneja la posición para no taparse con otros elementos fijos.
Se configura desde el admin con el número de la tienda. Un componente menos
que mantener. */
/* ---------- 26. Carrusel de reseñas estilo Fragola (IT2-6 · 2026-07-25) ----------
Renderizado por snipplets/muse/reviews.tpl. Carrusel horizontal con
scroll-snap CSS puro (sin JS). Cards con estrellas doradas arriba,
quote de la reseña, y footer con avatar + nombre. Editable por
settings del theme. */
.muse-reviews{
padding:56px 0 44px;
background:transparent;
}
.muse-reviews-title{
font-family:var(--muse-serif);
font-weight:500;
font-size:26px;
color:var(--muse-charcoal);
letter-spacing:-.005em;
text-align:center;
margin:0 0 32px;
}
.muse-reviews-list{
display:flex;
gap:20px;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding:8px 20px 24px;
margin:0 -20px;
list-style:none;
scrollbar-width:thin;
scrollbar-color:var(--muse-line) transparent;
-webkit-overflow-scrolling:touch;
}
.muse-reviews-list::-webkit-scrollbar{height:6px;}
.muse-reviews-list::-webkit-scrollbar-track{background:transparent;}
.muse-reviews-list::-webkit-scrollbar-thumb{background:var(--muse-line);border-radius:3px;}
.muse-reviews-card{
flex:0 0 auto;
width:320px;
scroll-snap-align:start;
background:var(--muse-crema);
border:1px solid var(--muse-line);
border-radius:16px;
padding:22px 22px 18px;
display:flex;
flex-direction:column;
gap:14px;
transition:transform .18s ease, box-shadow .18s ease;
}
.muse-reviews-card:hover{
transform:translateY(-3px);
box-shadow:0 12px 26px rgba(43,42,40,.08);
}
.muse-reviews-stars{
color:#d4a842;
font-size:16px;
letter-spacing:.08em;
line-height:1;
}
.muse-reviews-text{
font-family:var(--muse-sans);
font-size:14.5px;
line-height:1.55;
color:var(--muse-charcoal);
margin:0;
min-height:88px;
}
.muse-reviews-author{
display:flex;
align-items:center;
gap:12px;
padding-top:14px;
border-top:1px solid var(--muse-line);
}
/* Foto de la clienta en la reseña (2026-08-19).
Mismo tamaño y forma que el avatar de inicial, para que una fila con
fotos y otra sin fotos no se vean desalineadas. object-fit:cover
recorta al centro: las fotos que suban no van a venir todas cuadradas
y sin esto se deformarían. */
.muse-reviews-photo{
width:36px;
height:36px;
border-radius:50%;
object-fit:cover;
flex:0 0 36px;
background:var(--muse-crema-2);
display:inline-block;
}
.muse-reviews-avatar{
width:36px;
height:36px;
border-radius:50%;
background:var(--muse-pink);
color:var(--muse-charcoal);
display:inline-flex;
align-items:center;
justify-content:center;
font-family:var(--muse-serif);
font-weight:500;
font-size:16px;
flex:0 0 auto;
}
.muse-reviews-name{
font-family:var(--muse-sans);
font-size:13.5px;
font-weight:600;
color:var(--muse-charcoal);
letter-spacing:.01em;
}
@media(max-width:760px){
.muse-reviews{padding:36px 0 28px;}
.muse-reviews-title{font-size:22px;margin-bottom:22px;}
.muse-reviews-card{
width:88vw;
max-width:320px;
padding:18px 18px 14px;
}
.muse-reviews-text{font-size:14px;min-height:80px;}
}
/* ---------- 25. Popup rascadita 5% OFF (FB-1 · 2026-07-09) ----------
Renderizado por snipplets/muse/scratch-popup.tpl. Modal centrado con
backdrop semi-transparente, área rascable con canvas. El JS del snippet
maneja el trigger a 30s, la lógica del canvas y la persistencia con
localStorage. Acá solo estilos. */
.muse-scratch-popup{
position:fixed;
inset:0;
z-index:2000;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}
.muse-scratch-popup[hidden]{display:none;}
.muse-scratch-backdrop{
position:absolute;
inset:0;
background:rgba(20,18,16,.58);
backdrop-filter:blur(4px);
animation:muse-scratch-fade-in .25s ease;
}
.muse-scratch-modal{
position:relative;
background:#fff;
border-radius:20px;
padding:36px 30px 28px;
max-width:420px;
width:100%;
box-shadow:0 30px 80px rgba(20,18,16,.35);
text-align:center;
animation:muse-scratch-pop-in .35s cubic-bezier(.2,.9,.35,1.1);
}
@keyframes muse-scratch-fade-in{
from{opacity:0;}
to{opacity:1;}
}
@keyframes muse-scratch-pop-in{
0%{opacity:0;transform:scale(.85) translateY(20px);}
100%{opacity:1;transform:scale(1) translateY(0);}
}
.muse-scratch-close{
position:absolute;
top:14px;
right:14px;
width:32px;
height:32px;
border-radius:50%;
border:none;
background:var(--muse-crema);
color:var(--muse-charcoal);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:background .15s ease;
}
.muse-scratch-close:hover{background:var(--muse-crema-2);}
.muse-scratch-close svg{width:14px;height:14px;fill:currentColor;}
.muse-scratch-kicker{
font-family:var(--muse-sans);
font-size:11px;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--muse-pink-deep);
margin:0 0 10px;
}
.muse-scratch-title{
font-family:var(--muse-serif);
font-weight:500;
font-size:32px;
color:var(--muse-charcoal);
letter-spacing:-.01em;
margin:0 0 10px;
line-height:1.1;
}
.muse-scratch-title em{
font-style:italic;
color:var(--muse-pink-deep);
}
.muse-scratch-subtitle{
font-family:var(--muse-sans);
font-size:13.5px;
color:var(--muse-muted);
line-height:1.5;
margin:0 0 22px;
}
.muse-scratch-card{
position:relative;
width:320px;
height:140px;
margin:0 auto 20px;
border-radius:14px;
overflow:hidden;
background:var(--muse-crema);
box-shadow:inset 0 0 0 1px var(--muse-line);
}
.muse-scratch-reward{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:12px;
text-align:center;
}
.muse-scratch-reward-label{
font-size:10.5px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--muse-muted);
margin-bottom:4px;
}
.muse-scratch-reward-value{
font-family:var(--muse-serif);
font-weight:600;
font-size:38px;
color:var(--muse-pink-deep);
line-height:1;
margin-bottom:6px;
}
.muse-scratch-reward-code{
font-family:var(--muse-sans);
font-size:12px;
color:var(--muse-charcoal);
letter-spacing:.04em;
}
.muse-scratch-reward-code b{
background:var(--muse-charcoal);
color:#fff;
padding:3px 10px;
border-radius:6px;
font-weight:600;
letter-spacing:.08em;
margin-left:4px;
}
.muse-scratch-canvas{
position:absolute;
inset:0;
cursor:crosshair;
touch-action:none;
transition:opacity .4s ease;
}
.muse-scratch-canvas.is-revealed{
opacity:0;
pointer-events:none;
}
.muse-scratch-cta{
display:inline-block;
background:var(--muse-charcoal);
color:#fff !important;
padding:14px 28px;
border-radius:12px;
font-family:var(--muse-sans);
font-weight:600;
font-size:14px;
letter-spacing:.03em;
text-decoration:none;
transition:background .15s ease, transform .15s ease;
animation:muse-scratch-pop-in .4s ease;
}
.muse-scratch-cta:hover{
background:#000;
transform:translateY(-1px);
text-decoration:none;
}
.muse-scratch-cta[hidden]{display:none;}
.muse-scratch-legal{
margin:14px 0 0;
font-size:11px;
color:var(--muse-muted);
line-height:1.4;
}
@media(max-width:480px){
.muse-scratch-modal{padding:28px 20px 22px;border-radius:16px;}
.muse-scratch-title{font-size:26px;}
.muse-scratch-card{width:100%;max-width:300px;height:130px;}
.muse-scratch-reward-value{font-size:32px;}
}
/* ---- 28.3 Precio en transferencia --------------------------- */
/* La referencia lo pide "más chico, en rosa, aunque seria del
color marron secundario de la marca".
El cliente pasó #1C1208 como marrón secundario, pero con ese
valor este renglón no cumple su función: es MÁS oscuro que el
texto principal (18.4:1 contra 14.3:1 sobre blanco), así que se
lee como texto común y el descuento deja de saltar a la vista.
En Fragola esa línea va en rosa justamente porque es el gancho.
Solución: se conserva el matiz del marrón del cliente (hue ~22°,
cálido y rojizo — deliberadamente lejos del mostaza) y se sube
la luminosidad hasta #8A4B27.
Resultado medido:
· 6.7:1 sobre blanco → accesibilidad AA cumplida de sobra
· 5.7:1 sobre crema → también funciona sobre el fondo cálido
· 2.1:1 contra charcoal → se distingue del texto: destaca
El original queda disponible como --muse-brown-deep. */
/* El COLOR aplica en los dos lugares donde aparece el precio en
transferencia: la card del listado y el panel de compra de la ficha.
Así los dos coinciden y ninguno queda con el acento de Lima. */
.muse-item-transfer-price{
color: var(--muse-brown) !important;
font-weight: 600;
line-height: 1.3;
}
/* El TAMAÑO, en cambio, solo en el listado. La referencia pide ese
renglón "más chico" en la card, pero en la ficha Lima lo muestra
grande y ahí tiene que seguir siendo protagonista — es el gancho del
descuento. Si dejáramos el .82em global, lo achicaríamos donde más
importa. */
.js-item-product .muse-item-transfer-price{
font-size: .82em;
}
/* ---- 28.7 Desplegable de modelo propio (IT3-A2 · 2026-08-19) ----
Acompaña a snipplets/muse/custom-select.tpl. Estilo tomado de la
referencia de Fragola que pasó MuseCases, con la paleta MUSE.
IMPORTANTE: el