hijo dentro de .carousel-item,
nunca directamente sobre .carousel-item. Bootstrap controla el
display/transform de .carousel-item para animar las slides; si le
pisamos "display: flex" ahí, la navegación manual deja de funcionar
(el carrusel "se vuelve" siempre a la primera slide). */
.promo-slide {
background: linear-gradient(120deg, var(--mp-surface) 0%, var(--mp-surface-alt) 100%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 320px;
display: flex;
align-items: center;
position: relative;
}
/* Con imagen propia: en vez de un fondo con "cover" (que siempre recorta
algo para llenar un recuadro fijo), se muestra un
![]()
real a ancho
completo con alto automático. Así el recuadro toma exactamente la forma
de CADA imagen (generada por IA, subida a mano, panorámica, cuadrada,
lo que sea) y se ve completa, sin recortar nada. */
.promo-slide.has-image {
background: none;
min-height: 0;
/* flex-start (no "stretch"): así el
![]()
nunca se estira para llenar un
alto ajeno, siempre queda con su alto natural según su propio ancho. */
align-items: flex-start;
}
.promo-slide-img {
display: block;
width: 100%;
height: auto;
}
.promo-carousel .promo-slide {
min-height: 200px;
}
/* Con imagen, ni siquiera este mínimo: el alto lo pone el
![]()
. Tiene que
ir después de la regla de arriba (misma especificidad) para ganarle. */
.promo-carousel .promo-slide.has-image {
min-height: 0;
}
.promo-slide.has-image::before {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 60%;
background: linear-gradient(to top, rgba(18, 20, 28, 0.75), rgba(18, 20, 28, 0));
pointer-events: none;
}
.promo-slide-content {
max-width: 640px;
position: relative;
z-index: 1;
}
/* Siempre está dentro de un slide con imagen: se ancla abajo del todo con
position:absolute, ya que el
![]()
es el que ahora define la altura real
del recuadro (ver .promo-slide-img más arriba). */
.promo-slide-cta {
position: absolute;
inset: auto 0 0 0;
z-index: 1;
}
.promo-slide-cta h2 {
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.promo-carousel .carousel-indicators [data-bs-target] {
background-color: var(--mp-accent);
}
/* Flechas discretas: circulito translúcido, casi invisible en reposo, que
se nota más recién al pasar el mouse o enfocarlo (antes eran círculos
azules sólidos a opacidad completa, tapaban bastante la imagen). */
.promo-carousel .carousel-control-prev,
.promo-carousel .carousel-control-next {
width: 2.75rem;
opacity: 0.4;
transition: opacity 0.2s ease-in-out;
}
.promo-carousel .carousel-control-prev:hover,
.promo-carousel .carousel-control-next:hover,
.promo-carousel .carousel-control-prev:focus,
.promo-carousel .carousel-control-next:focus {
opacity: 0.85;
}
.promo-carousel .carousel-control-prev-icon,
.promo-carousel .carousel-control-next-icon {
background-color: rgba(18, 20, 28, 0.55);
border-radius: 50%;
padding: 1.1rem;
background-size: 40%;
}
/* Tarjetas del carrusel de promociones: fondo degradé (o una foto de fondo
opcional, subida a mano, con "cover") con la foto REAL del producto
vinculado al lado del texto, en vez de pedirle a la IA que dibuje el
producto dentro de una escena completa (nunca queda igual al producto
real). La altura es FIJA (no "min-height" ni el alto natural de una
imagen): así el carrusel no cambia de tamaño solo al pasar de slide. */
.promo-card {
background: linear-gradient(120deg, var(--mp-surface) 0%, var(--mp-surface-alt) 100%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 360px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
@media (max-width: 767.98px) {
.promo-card {
height: 300px;
}
}
/* Con foto propia: "contain" en vez de "cover", para que la imagen se vea
SIEMPRE completa (nunca recortada), sea cual sea su proporción real. El
recuadro sigue teniendo una proporción fija (no salta de tamaño entre
slides); si la imagen no calza exacto, queda un margen del color de
fondo arriba/abajo o a los costados, en vez de perder texto o cortar la
foto. Ver la ayuda en Promotions/Create y Edit para la medida recomendada. */
.promo-card.has-bg {
background-image: var(--promo-bg-desktop, none);
background-size: contain;
background-color: #12141c;
align-items: flex-end;
height: auto;
aspect-ratio: 24 / 5;
}
/* El carrusel de promociones de la home ahora es vertical (a diferencia del
banner de Servicio Técnico, que sigue siendo horizontal), así que acá se
pisa la proporción general de .promo-card.has-bg solo dentro del carrusel. */
.promo-carousel .promo-card.has-bg {
aspect-ratio: 3 / 4;
}
/* Con pocas categorías, el panel de al lado no necesita mucha altura: se
limita el ancho máximo del carrusel para que no quede desproporcionadamente
largo comparado con el panel de categorías. */
.promo-carousel {
max-width: 460px;
margin: 0 auto;
}
@media (max-width: 767.98px) {
.promo-card.has-bg {
background-image: var(--promo-bg-mobile, var(--promo-bg-desktop, none));
}
}
.promo-card-row {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
position: relative;
z-index: 1;
}
@media (min-width: 768px) {
.promo-card-row {
flex-direction: row;
}
}
.promo-card-content {
max-width: 480px;
text-align: center;
}
@media (min-width: 768px) {
.promo-card-content {
text-align: left;
}
}
.promo-card-content h2 {
font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
margin: 0;
}
.promo-card-content p {
color: var(--mp-text-secondary);
}
.promo-card-product {
flex: 0 0 auto;
max-width: 60%;
max-height: 220px;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 16px 24px rgba(18, 20, 28, 0.2));
}
@media (min-width: 768px) {
.promo-card-product {
max-width: 38%;
max-height: 260px;
}
}
/* ---- Banner de Servicio Técnico / promoción con imagen propia del admin ---- */
/* La imagen ya trae todo el texto/promo incluido: no se dibuja ningún botón
encima, la imagen entera (o cada mitad, si está "dividida en dos") es
directamente un link invisible. Un tinte muy suave al pasar el mouse es
la única señal de que se puede clickear. */
.promo-card-link-overlay {
position: absolute;
inset: 0;
z-index: 1;
display: block;
transition: background-color 0.15s ease-in-out;
}
.promo-card-link-overlay:hover,
.promo-card-link-overlay:focus-visible {
background-color: rgba(255, 255, 255, 0.08);
}
.promo-card-link-overlay.split-left {
right: 50%;
}
.promo-card-link-overlay.split-right {
left: 50%;
}
/* El carrusel de la home es vertical: "dividida en dos" tiene que partir la
imagen arriba/abajo, no en mitades izquierda/derecha (eso solo tiene
sentido en el banner de Servicio Técnico, que sigue siendo horizontal). */
.promo-carousel .promo-card-link-overlay.split-left {
right: 0;
bottom: 50%;
}
.promo-carousel .promo-card-link-overlay.split-right {
left: 0;
top: 50%;
}
/* Cinta con el texto de la promo (BadgeText), para que el admin pueda sumar
algo como "OFERTA" u "OFERTA ÚNICA" sobre su propia imagen sin tener que
editarla — igual que un cartel de "oferta" pegado sobre una vidriera. */
.promo-card-ribbon {
position: absolute;
top: 1rem;
left: -0.5rem;
z-index: 2;
background-color: var(--mp-danger, #dc3545);
color: #ffffff;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.4rem 1rem;
border-radius: 0 0.375rem 0.375rem 0;
box-shadow: 0 0.35rem 0.75rem rgba(18, 20, 28, 0.3);
pointer-events: none;
}
.banner-edit-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 2;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 0.25rem 0.75rem rgba(18, 20, 28, 0.2);
}
.banner-edit-btn:hover {
background-color: #ffffff;
}
.price-strike {
text-decoration: line-through;
color: var(--mp-text-secondary);
font-weight: 400;
font-size: 0.85em;
}
.price-tag {
color: var(--mp-price);
font-weight: 800;
}
/* ==== HOME: bandas de sección ==== */
/* La home alterna bandas claras y oscuras a todo el ancho. El fondo oscuro no
es decoración: hace que la foto del producto y el precio resalten, que era
justo lo que faltaba cuando la página "se veía apagada". */
.section-plain,
.section-surface,
.section-ink {
padding: 4rem 0;
}
.section-surface {
background-color: var(--mp-surface);
}
.section-ink {
background-color: var(--mp-ink);
}
@media (max-width: 767.98px) {
.section-plain,
.section-surface,
.section-ink {
padding: 2.75rem 0;
}
}
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.section-title {
font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
font-weight: 800;
letter-spacing: -0.03em;
margin: 0;
}
.section-sub {
color: var(--mp-text-secondary);
margin: 0.4rem 0 0 0;
}
.section-eyebrow {
display: inline-block;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--mp-accent);
}
.section-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--mp-accent);
text-decoration: none;
white-space: nowrap;
}
.section-link:hover {
color: var(--mp-accent-hover);
}
/* Sobre banda oscura, títulos y links cambian de color */
.section-ink .section-title {
color: #ffffff;
}
.section-ink .section-sub {
color: var(--mp-ink-text);
}
.section-ink .section-link {
color: rgba(255, 255, 255, 0.72);
}
.section-ink .section-link:hover {
color: #ffffff;
}
.pill-hot {
display: inline-flex;
align-items: center;
height: 1.75rem;
padding: 0 0.8rem;
border-radius: 999px;
background-color: rgba(232, 64, 44, 0.16);
border: 1px solid rgba(232, 64, 44, 0.32);
color: var(--mp-hot-light);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
}
/* ==== HOME: hero ==== */
.hero-band {
position: relative;
overflow: hidden;
background-color: var(--mp-ink);
padding: 4.5rem 0;
}
@media (max-width: 991.98px) {
.hero-band {
padding: 3rem 0;
}
}
.hero-band-glow {
position: absolute;
top: -14rem;
right: -9rem;
width: 47rem;
height: 47rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(10, 94, 255, 0.30) 0%, rgba(10, 94, 255, 0.06) 45%, rgba(10, 94, 255, 0) 70%);
pointer-events: none;
}
.hero-copy {
display: flex;
flex-direction: column;
gap: 1.5rem;
max-width: 38rem;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.55rem;
align-self: flex-start;
height: 2.125rem;
padding: 0 0.95rem;
border-radius: 999px;
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.13);
color: rgba(255, 255, 255, 0.80);
font-size: 0.8125rem;
font-weight: 600;
}
.hero-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background-color: #4ade80;
flex-shrink: 0;
}
.hero-title {
font-size: clamp(34px, 1.2rem + 3.4vw, 62px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: #ffffff;
margin: 0;
text-wrap: pretty;
}
.hero-title-accent {
color: var(--mp-accent-light);
}
.hero-lead {
font-size: 1.0625rem;
line-height: 1.62;
color: var(--mp-ink-text);
margin: 0;
max-width: 33rem;
text-wrap: pretty;
}
/* El visual del hero (la oferta destacada) con la chapita montada encima */
.hero-visual-wrap {
position: relative;
max-width: 26rem;
margin: 0 auto;
}
/* Tarjeta de la oferta destacada del hero */
.offer-spotlight {
display: flex;
flex-direction: column;
gap: 1.375rem;
padding: 1.875rem;
border-radius: 1.875rem;
background: linear-gradient(160deg, #171d2c 0%, #0f1320 100%);
border: 1px solid rgba(255, 255, 255, 0.09);
text-decoration: none;
transition: transform 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.offer-spotlight:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.22);
}
.offer-spotlight-media {
position: relative;
border-radius: 1.25rem;
overflow: hidden;
background: radial-gradient(circle at 50% 45%, rgba(10, 94, 255, 0.24) 0%, rgba(10, 94, 255, 0.02) 62%);
}
.offer-spotlight-img {
height: 17rem;
overflow: hidden;
}
.offer-spotlight-img.product-image-placeholder {
color: rgba(255, 255, 255, 0.35);
}
.offer-spotlight-flag {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 1;
}
.offer-spotlight-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.offer-spotlight-kicker {
font-size: 0.8125rem;
font-weight: 600;
color: var(--mp-ink-text-soft);
}
.offer-spotlight-name {
font-size: 1.1875rem;
font-weight: 600;
color: #ffffff;
line-height: 1.3;
}
.offer-spotlight-prices {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.7rem;
margin-top: 0.15rem;
}
.offer-spotlight-old {
font-size: 1rem;
color: var(--mp-ink-text-soft);
text-decoration: line-through;
}
.offer-spotlight-price {
font-family: 'Manrope', 'Inter', system-ui, sans-serif;
font-size: 2.0625rem;
font-weight: 800;
letter-spacing: -0.03em;
color: #ffffff;
line-height: 1.1;
}
.offer-spotlight-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.35rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--mp-accent-light);
}
/* Carrusel de destacados del hero: flechas y puntitos por fuera de la tarjeta
para no tapar la foto ni el precio. */
.hero-carousel .carousel-item {
padding-bottom: 2.25rem;
}
.hero-carousel-control {
width: 2.75rem;
opacity: 0.55;
}
.hero-carousel-control:hover,
.hero-carousel-control:focus {
opacity: 1;
}
.hero-carousel-dots {
margin-bottom: 0;
bottom: 0;
}
.hero-carousel-dots [data-bs-target] {
width: 8px;
height: 8px;
border-radius: 999px;
border: 0;
background-color: rgba(255, 255, 255, 0.35);
opacity: 1;
margin: 0 4px;
}
.hero-carousel-dots .active {
background-color: #ffffff;
width: 22px;
}
/* Banda propia del carrusel de promociones del admin */
.promo-band {
padding-top: 2.5rem;
padding-bottom: 0;
}
.hero-badge {
position: absolute;
left: 0;
bottom: -1.25rem;
transform: translateX(-1.5rem);
display: flex;
align-items: center;
gap: 0.7rem;
height: 3.5rem;
padding: 0 1.25rem;
border-radius: 1rem;
background-color: #ffffff;
color: var(--mp-accent);
box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
z-index: 2;
}
.hero-badge svg {
flex-shrink: 0;
}
.hero-badge-title {
display: block;
font-size: 0.875rem;
font-weight: 700;
color: var(--mp-text);
white-space: nowrap;
}
.hero-badge-sub {
display: block;
font-size: 0.75rem;
color: var(--mp-text-secondary);
white-space: nowrap;
}
/* En pantallas chicas la chapita se centra debajo de la tarjeta en vez de
colgar de un costado, donde se saldría de la pantalla. */
@media (max-width: 991.98px) {
.hero-badge {
left: 50%;
transform: translateX(-50%);
}
}
.hero-checks {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.4rem;
margin: 0.25rem 0 0 0;
padding: 0;
}
.hero-checks li {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.55);
}
.hero-checks svg {
flex-shrink: 0;
}
/* Botones grandes tipo pastilla, para hero y CTA */
.btn-hero {
display: inline-flex;
align-items: center;
gap: 0.6rem;
height: 3.5rem;
min-height: 52px;
padding: 0 1.75rem;
border-radius: 999px;
font-size: 1rem;
font-weight: 600;
}
.btn-primary.btn-hero {
font-weight: 700;
box-shadow: 0 0.625rem 1.875rem rgba(10, 94, 255, 0.35);
}
.btn-hero-ghost {
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.20);
}
.btn-hero-ghost:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.32);
}
.btn-ink {
background-color: var(--mp-text);
color: #ffffff;
}
.btn-ink:hover {
background-color: #000000;
color: #ffffff;
}
.btn-cta-white {
background-color: #ffffff;
color: var(--mp-text);
font-weight: 700;
box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.16);
}
.btn-cta-white:hover {
background-color: #ffffff;
color: var(--mp-accent);
}
/* ==== HOME: franja de confianza ==== */
.trust-strip {
background-color: #ffffff;
border-bottom: 1px solid var(--mp-border);
padding: 1.75rem 0;
}
.trust-strip-item {
display: flex;
align-items: center;
gap: 0.9rem;
}
.trust-strip-icon {
width: 2.75rem;
height: 2.75rem;
border-radius: 0.8rem;
background-color: var(--mp-surface-alt);
color: var(--mp-accent);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.trust-strip-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--mp-text);
}
.trust-strip-sub {
font-size: 0.8125rem;
color: var(--mp-text-secondary);
margin-top: 0.15rem;
}
/* ==== HOME: servicio técnico (diseño por defecto, sin imagen del admin) ==== */
.tecnico-visual {
position: relative;
height: 21rem;
border-radius: 1.75rem;
background: linear-gradient(155deg, var(--mp-surface-alt) 0%, var(--mp-surface) 100%);
border: 1px solid var(--mp-border);
display: flex;
align-items: center;
justify-content: center;
}
.tecnico-visual-device {
color: var(--mp-text);
opacity: 0.5;
}
.tecnico-visual-badge {
position: absolute;
right: 2.125rem;
bottom: 2.125rem;
width: 5.75rem;
height: 5.75rem;
border-radius: 1.625rem;
background-color: var(--mp-accent);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0.875rem 2.125rem rgba(10, 94, 255, 0.30);
}
.feature-checks {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 0;
padding: 0;
}
.feature-checks li {
display: flex;
align-items: center;
gap: 0.7rem;
font-size: 1rem;
color: var(--mp-text);
}
.feature-checks svg {
color: var(--mp-accent);
flex-shrink: 0;
}
/* ==== HOME: visitanos ==== */
.store-facts {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.95rem;
margin: 0;
padding: 0;
}
.store-facts li {
display: flex;
align-items: flex-start;
gap: 0.8rem;
font-size: 1rem;
color: var(--mp-text);
line-height: 1.45;
}
.store-facts svg {
color: var(--mp-text-secondary);
flex-shrink: 0;
margin-top: 0.1rem;
}
/* ==== HOME: CTA final ==== */
.cta-band {
position: relative;
overflow: hidden;
background-color: var(--mp-accent);
padding: 3.5rem 0;
}
.cta-band-glow {
position: absolute;
top: -11rem;
right: 4rem;
width: 27rem;
height: 27rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.07);
pointer-events: none;
}
.cta-band-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.cta-band-title {
font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
font-weight: 800;
letter-spacing: -0.03em;
color: #ffffff;
margin: 0;
}
.cta-band-sub {
font-size: 1.0625rem;
color: rgba(255, 255, 255, 0.82);
margin: 0.5rem 0 0 0;
}
/* ---- Grilla de categorías (home) ---- */
.category-icon-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
color: var(--mp-text);
text-decoration: none;
}
.category-icon-link:hover {
color: var(--mp-accent);
}
/* Círculo con el dibujo de la categoría. Antes mostraba la foto del último
producto, pero las fotos cargadas hoy son de relleno y la fila quedaba
despareja: un ícono de línea es más limpio y no depende del catálogo. */
.category-icon-circle {
width: 72px;
height: 72px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid var(--mp-border);
color: var(--mp-text);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.category-icon-circle svg {
width: 28px;
height: 28px;
}
@media (min-width: 992px) {
.category-icon-circle {
width: 92px;
height: 92px;
}
.category-icon-circle svg {
width: 36px;
height: 36px;
}
}
.category-icon-link:hover .category-icon-circle {
transform: translateY(-3px);
border-color: var(--mp-accent);
color: var(--mp-accent);
}
.category-icon-label {
line-height: 1.15;
font-size: 0.8125rem;
font-weight: 600;
text-align: center;
}
@media (min-width: 992px) {
.category-icon-label {
font-size: 0.875rem;
}
}
/* ---- Información de envío (detalle de producto) ---- */
.shipping-info {
background-color: var(--mp-surface);
border: 1px solid var(--mp-border);
}
/* ==== Encabezado de página interna (catálogo, carrito, canje, etc.) ==== */
.page-head {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.page-head-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.25rem;
flex-wrap: wrap;
}
.page-title {
font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
font-weight: 800;
letter-spacing: -0.03em;
margin: 0;
}
.page-sub {
color: var(--mp-text-secondary);
margin: 0.4rem 0 0 0;
}
.page-eyebrow {
display: inline-block;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--mp-accent);
}
/* Migas de pan */
.crumbs {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0;
padding: 0;
font-size: 0.8125rem;
color: var(--mp-text-secondary);
}
.crumbs li + li::before {
content: "/";
margin-right: 0.5rem;
color: #b9c0cf;
}
.crumbs a {
color: var(--mp-text-secondary);
text-decoration: none;
}
.crumbs a:hover {
color: var(--mp-accent);
}
.crumbs li[aria-current] {
color: var(--mp-text);
font-weight: 600;
}
/* Barra con "Filtros" (celular) y el selector de orden */
.catalog-toolbar {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 0.25rem;
}
.catalog-toolbar .sort-form {
margin-left: auto;
}
.catalog-filters-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
height: 2.75rem;
min-height: 44px;
border-radius: 0.75rem;
border-color: var(--mp-border);
color: var(--mp-text);
font-weight: 600;
font-size: 0.875rem;
}
.catalog-filters-count {
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.35rem;
border-radius: 999px;
background-color: var(--mp-accent);
color: #ffffff;
font-size: 0.6875rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* En celular, Filtros y Orden se reparten el ancho mitad y mitad */
@media (max-width: 991.98px) {
.catalog-filters-btn,
.catalog-toolbar .sort-form {
flex: 1 1 0;
margin-left: 0;
justify-content: center;
}
.catalog-toolbar .sort-form {
padding-left: 0.75rem;
}
}
/* Selector de orden del catálogo */
.sort-form {
display: flex;
align-items: center;
gap: 0.6rem;
height: 2.75rem;
padding: 0 0.5rem 0 1rem;
background-color: #ffffff;
border: 1px solid var(--mp-border);
border-radius: 0.75rem;
}
.sort-form-label {
font-size: 0.875rem;
color: var(--mp-text-secondary);
white-space: nowrap;
margin: 0;
}
.sort-form .form-select {
border: 0;
padding: 0 1.6rem 0 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--mp-text);
background-color: transparent;
width: auto;
}
.sort-form .form-select:focus {
box-shadow: none;
}
/* Chips de filtro activo */
.filter-chips {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.filter-chips-label {
font-size: 0.8125rem;
color: var(--mp-text-secondary);
}
.chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
height: 1.875rem;
padding: 0 0.8rem;
border-radius: 999px;
background-color: var(--mp-accent-soft);
color: var(--mp-accent);
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
}
.chip:hover {
background-color: #d8e5ff;
color: var(--mp-accent-hover);
}
.chip-hot {
background-color: rgba(232, 64, 44, 0.10);
color: var(--mp-hot);
}
.chip-hot:hover {
background-color: rgba(232, 64, 44, 0.18);
color: var(--mp-hot);
}
.filters-clear {
font-size: 0.8125rem;
font-weight: 600;
color: var(--mp-accent);
text-decoration: none;
}
/* Paginación */
.pager {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 2.5rem;
}
.pager-btn {
min-width: 44px;
height: 44px;
padding: 0 0.5rem;
border-radius: 0.7rem;
border: 1px solid var(--mp-border);
background-color: #ffffff;
color: var(--mp-text);
font-size: 0.875rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.pager-btn:hover {
border-color: var(--mp-accent);
color: var(--mp-accent);
}
.pager-btn.active {
background-color: var(--mp-accent);
border-color: var(--mp-accent);
color: #ffffff;
font-weight: 700;
}
.pager-btn.disabled {
color: #b9c0cf;
background-color: var(--mp-surface);
}
/* Estado vacío (búsqueda sin resultados, carrito vacío) */
.empty-state {
background-color: #ffffff;
border: 1px solid var(--mp-border);
border-radius: 1.25rem;
padding: 3.5rem 2rem;
text-align: center;
}
.empty-state-icon {
width: 4rem;
height: 4rem;
border-radius: 999px;
background-color: var(--mp-surface-alt);
color: var(--mp-text-secondary);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem auto;
}
/* Botonera de administración debajo de cada tarjeta del catálogo */
.admin-card-actions {
display: flex;
gap: 0.4rem;
}
/* ==== Grilla del catálogo: alto libre ==== */
/* En el resto del sitio las tarjetas van todas del mismo alto (quedan
prolijas en filas de 4). Acá no: la foto se muestra ENTERA, con la
proporción que tenga, así no hay que preparar cada imagen a una medida
exacta. Como consecuencia cada tarjeta mide distinto, y por eso las
columnas se alinean arriba en lugar de estirarse. */
.catalog-grid {
align-items: flex-start;
}
.catalog-grid .product-card {
height: auto;
}
.catalog-grid .product-image {
height: auto;
}
.catalog-grid .product-image-img {
width: 100%;
height: auto;
/* Tope de seguridad: una foto muy alta (una captura vertical, por ejemplo)
no puede estirar la tarjeta sin límite; ahí sí se ajusta para entrar
completa, sin recortarse. */
max-height: 22rem;
object-fit: contain;
}
/* Sin foto el hueco no tiene alto propio, así que se le da uno mínimo para
que la tarjeta no quede aplastada. */
.catalog-grid .product-image-placeholder {
min-height: 11rem;
}
/* ==== Detalle de producto ==== */
.detail-gallery {
position: relative;
}
.detail-gallery-main {
height: 30rem;
border-radius: 1.5rem;
border: 1px solid var(--mp-border);
background: linear-gradient(170deg, #f7f9fc 0%, var(--mp-surface-alt) 100%);
overflow: hidden;
}
@media (max-width: 767.98px) {
.detail-gallery-main {
height: 20rem;
}
}
.detail-gallery-main .detail-gallery-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.detail-gallery-flags {
position: absolute;
top: 1.125rem;
left: 1.125rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
}
/* Tira de miniaturas debajo de la foto grande */
.detail-thumbs {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.875rem;
}
.detail-thumb {
width: 5.5rem;
height: 5.5rem;
padding: 0;
border-radius: 0.875rem;
border: 2px solid var(--mp-border);
background: linear-gradient(170deg, #f7f9fc 0%, var(--mp-surface-alt) 100%);
overflow: hidden;
cursor: pointer;
transition: border-color 0.15s ease-in-out;
}
.detail-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.detail-thumb:hover {
border-color: var(--mp-text-secondary);
}
.detail-thumb.is-active {
border-color: var(--mp-accent);
}
.flag-soft {
background-color: var(--mp-accent-soft);
color: var(--mp-accent);
}
.detail-info {
display: flex;
flex-direction: column;
gap: 1.35rem;
}
.detail-kicker {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: var(--mp-text-secondary);
margin-bottom: 0.5rem;
}
.detail-title {
font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.14;
margin: 0;
}
.detail-price-block {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.detail-price-old {
font-size: 1rem;
color: var(--mp-text-secondary);
text-decoration: line-through;
}
.detail-price {
font-family: 'Manrope', 'Inter', system-ui, sans-serif;
font-size: clamp(2rem, 1.5rem + 1.8vw, 2.625rem);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--mp-price);
line-height: 1.1;
}
.stock-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
align-self: flex-start;
height: 2.125rem;
padding: 0 0.9rem;
border-radius: 999px;
background-color: #ecfdf3;
border: 1px solid #c9f0da;
color: #15803d;
font-size: 0.8125rem;
font-weight: 600;
}
.stock-pill .stock-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background-color: #16a34a;
}
.stock-pill-out {
background-color: var(--mp-surface-alt);
border-color: var(--mp-border);
color: var(--mp-text-secondary);
}
.stock-pill-out .stock-dot {
background-color: #9aa1b1;
}
/* Ficha técnica */
.spec-list {
margin: 0;
display: flex;
flex-direction: column;
}
.spec-list > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.8rem 0;
border-bottom: 1px solid var(--mp-surface-alt);
}
.spec-list dt {
font-weight: 400;
color: var(--mp-text-secondary);
margin: 0;
}
.spec-list dd {
font-weight: 600;
color: var(--mp-text);
margin: 0;
text-align: right;
}
.detail-section-label {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--mp-text-secondary);
margin-bottom: 0.5rem;
}
.detail-description p {
line-height: 1.65;
}
.detail-buy-row {
display: flex;
align-items: stretch;
gap: 0.75rem;
}
.qty-stepper-inline .form-control {
width: 5rem;
height: 3.5rem;
min-height: 52px;
border-radius: 999px;
text-align: center;
font-weight: 700;
font-size: 1rem;
}
.btn-outline-ghost {
border: 1px solid var(--mp-border);
color: var(--mp-text);
background-color: #ffffff;
}
.btn-outline-ghost:hover {
border-color: var(--mp-accent);
color: var(--mp-text);
background-color: var(--mp-surface);
}
/* Caja de envío / garantía / canje */
.assurance-box {
background-color: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: 1.125rem;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.95rem;
}
.assurance-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.assurance-item > svg {
color: var(--mp-accent);
flex-shrink: 0;
margin-top: 0.1rem;
}
.assurance-title {
display: block;
font-size: 0.875rem;
font-weight: 700;
color: var(--mp-text);
}
.assurance-sub {
display: block;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--mp-text-secondary);
margin-top: 0.1rem;
}
/* ---- Catálogo / tarjetas de producto ---- */
.search-bar {
background-color: #ffffff;
border: 1px solid var(--mp-border);
border-radius: 0.75rem;
}
/* ---- Filtros del catálogo (columna izquierda) ---- */
/* Panel de filtros. Abajo de 992px Bootstrap lo convierte en panel deslizable
(offcanvas-lg) y arriba de eso lo vuelve estático. En ese modo estático
Bootstrap le fuerza fondo transparente con !important, así que la tarjeta
blanca se dibuja sobre el contenido interno, no sobre el panel. */
@media (min-width: 992px) {
/* El selector lleva las dos clases del panel a propósito: Bootstrap declara
".offcanvas-lg .offcanvas-body { background: transparent !important }" al
pasar a modo estático, y para ganarle hay que igualar o superar esa
especificidad, no alcanza con !important solo. */
.filters-sidebar.offcanvas-lg .filters-sidebar-body {
background-color: #ffffff !important;
border: 1px solid var(--mp-border);
border-radius: 1rem;
padding: 1.5rem;
position: sticky;
top: 5.5rem;
flex-direction: column;
}
}
@media (max-width: 991.98px) {
/* El cuerpo del panel scrollea si los filtros no entran en la pantalla. */
.filters-sidebar-body {
overflow-y: auto;
}
}
/* ==== Tarjeta de producto ==== */
/* Una sola tarjeta para toda la tienda. Dentro de una banda oscura
(.on-dark) se repinta sola: así no hay dos plantillas que mantener. */
.product-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: 1.25rem;
background-color: #ffffff;
border: 1px solid var(--mp-border);
overflow: hidden;
transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.product-card:hover {
transform: translateY(-4px);
border-color: var(--mp-accent);
box-shadow: 0 0.75rem 1.5rem rgba(10, 94, 255, 0.15);
}
.product-card-media {
position: relative;
display: block;
background: linear-gradient(170deg, #f7f9fc 0%, var(--mp-surface-alt) 100%);
}
/* Chips de estado (oferta, últimas unidades, sin stock) sobre la foto */
.product-card-flags {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
.flag {
display: inline-flex;
align-items: center;
height: 1.625rem;
padding: 0 0.65rem;
border-radius: 0.5rem;
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
}
.flag-hot {
background-color: var(--mp-hot);
color: #ffffff;
}
.flag-warn {
background-color: #fff4e0;
color: #9a5b00;
}
.flag-muted {
background-color: var(--mp-text);
color: #ffffff;
}
.flag-battery {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 1;
background-color: rgba(255, 255, 255, 0.92);
color: var(--mp-text);
border: 1px solid var(--mp-border);
}
.product-card-body {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1.1rem;
flex-grow: 1;
}
.product-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--mp-text-secondary);
min-height: 1.1rem;
}
.product-card-meta span:not(:last-child)::after {
content: "·";
margin-left: 0.4rem;
}
.product-card-title {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
color: var(--mp-text);
text-decoration: none;
}
.product-card-title:hover {
color: var(--mp-accent);
}
.product-card-price {
display: flex;
flex-direction: column;
gap: 0.1rem;
margin-top: auto;
}
.product-card-price-old {
font-size: 0.8125rem;
color: var(--mp-text-secondary);
text-decoration: line-through;
}
.product-card-price-now {
font-family: 'Manrope', 'Inter', system-ui, sans-serif;
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--mp-price);
}
.product-card-action {
margin-top: 0.25rem;
}
/* min-height en px, no en rem: abajo de 768px la raíz baja a 14px y un
2.75rem quedaría en 38px, por debajo del mínimo cómodo para el dedo. */
.btn-card {
width: 100%;
height: 2.75rem;
min-height: 44px;
border-radius: 0.75rem;
background-color: var(--mp-accent);
border: 1px solid var(--mp-accent);
color: #ffffff;
font-size: 0.875rem;
font-weight: 600;
}
.btn-card:hover {
background-color: var(--mp-accent-hover);
border-color: var(--mp-accent-hover);
color: #ffffff;
}
.btn-card:disabled {
background-color: var(--mp-surface-alt);
border-color: var(--mp-border);
color: var(--mp-text-secondary);
opacity: 1;
}
/* --- La misma tarjeta, dentro de una banda oscura --- */
.on-dark .product-card {
background-color: var(--mp-ink-surface);
border-color: var(--mp-ink-border);
}
.on-dark .product-card:hover {
border-color: rgba(255, 255, 255, 0.28);
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35);
}
.on-dark .product-card-media {
background: radial-gradient(circle at 50% 45%, rgba(10, 94, 255, 0.20) 0%, rgba(10, 94, 255, 0) 65%);
}
.on-dark .product-card-title {
color: #ffffff;
}
.on-dark .product-card-title:hover {
color: var(--mp-accent-light);
}
.on-dark .product-card-meta {
color: var(--mp-ink-text-soft);
}
.on-dark .product-card-price-old {
color: var(--mp-ink-text-soft);
}
.on-dark .product-card-price-now {
color: #ffffff;
}
.on-dark .btn-card {
background-color: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.on-dark .btn-card:hover {
background-color: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.22);
}
.on-dark .flag-battery {
background-color: rgba(21, 26, 39, 0.92);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.16);
}
.on-dark .product-image-placeholder {
color: rgba(255, 255, 255, 0.35);
}
.stock-low {
color: #c23b2e;
}
/* ---- Imagen de producto (tarjetas y detalle) ---- */
.product-image {
height: 200px;
overflow: hidden;
background-color: transparent;
}
@media (max-width: 575.98px) {
.product-image {
height: 150px;
}
}
.product-image-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Sin foto: el hueco toma el fondo de la tarjeta (claro u oscuro) en vez de
pintar un gris fijo que se ve mal sobre la banda oscura. */
.product-image-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #9aa1b1;
background-color: transparent;
}
/* ---- Imagen grande de la página de detalle de producto ---- */
.product-detail-image {
height: 320px;
overflow: hidden;
background-color: var(--mp-surface);
border: 1px solid var(--mp-border);
}
@media (min-width: 992px) {
.product-detail-image {
height: 420px;
}
}
.product-detail-image .product-image-img {
object-fit: contain;
}
/* ---- Ficha de especificaciones en el detalle de producto ---- */
.product-specs-list .list-group-item {
background: transparent;
border-color: var(--mp-border);
}
/* ---- Formularios / paneles de administración ---- */
.admin-panel {
background-color: var(--mp-surface);
border: 1px solid var(--mp-border);
}
/* Grilla de fotos de galería en el formulario de edición, con su casilla de
"Quitar" en cada una. */
.gallery-manager {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
gap: 0.75rem;
}
.gallery-manager-item {
border: 1px solid var(--mp-border);
border-radius: 0.75rem;
overflow: hidden;
background-color: var(--mp-surface);
}
.gallery-manager-item img {
width: 100%;
height: 7rem;
object-fit: contain;
display: block;
background: linear-gradient(170deg, #f7f9fc 0%, var(--mp-surface-alt) 100%);
}
.gallery-manager-remove {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.6rem;
font-size: 0.8125rem;
color: var(--mp-text-secondary);
border-top: 1px solid var(--mp-border);
cursor: pointer;
margin: 0;
}
.gallery-manager-remove .form-check-input {
margin: 0;
flex-shrink: 0;
}
.gallery-manager-remove:has(.form-check-input:checked) {
background-color: rgba(232, 64, 44, 0.10);
color: var(--mp-hot);
font-weight: 600;
}
/* Casilla "Destacar en la portada": va en recuadro propio porque no es un dato
del producto sino una decisión de vitrina, y conviene que se note. */
.featured-toggle {
background-color: var(--mp-accent-soft);
border: 1px solid #cfe0ff;
border-radius: 0.9rem;
padding: 1rem 1.15rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.featured-toggle .form-check-input:checked {
background-color: var(--mp-accent);
border-color: var(--mp-accent);
}
/* ---- Botón flotante de WhatsApp ---- */
.whatsapp-float {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #25d366;
color: #128c4a;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0.5rem 1.25rem rgba(18, 20, 28, 0.25);
z-index: 1030;
transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.whatsapp-float svg {
width: 1.75rem;
height: 1.75rem;
}
.whatsapp-float:hover {
color: #0f7a40;
background-color: #f0fdf5;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 0.75rem 1.5rem rgba(18, 20, 28, 0.3);
}
/* ---- Header y menú móvil ---- */
.mobile-header-row {
min-height: 3rem;
}
.mobile-menu-heading {
color: var(--mp-text-secondary);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.75rem;
}
.mobile-menu-list li + li {
margin-top: 0.15rem;
}
.mobile-menu-link {
display: block;
padding: 0.6rem 0.25rem;
color: var(--mp-text);
font-weight: 600;
text-decoration: none;
border-radius: 0.5rem;
}
.mobile-menu-link:hover {
background-color: var(--mp-surface-alt);
color: var(--mp-text);
}
/* ---- Barra inferior fija (celular) ---- */
/* Los últimos 991.98px porque coincide con d-lg-none/d-lg-flex de Bootstrap:
así el padding del body y el botón de WhatsApp se ajustan exactamente
cuando la barra aparece o desaparece. */
@media (max-width: 991.98px) {
body {
padding-bottom: 4rem;
}
.whatsapp-float {
bottom: 5.25rem;
}
}
.bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1030;
background-color: #ffffff;
border-top: 1px solid var(--mp-border);
box-shadow: 0 -0.25rem 0.75rem rgba(18, 20, 28, 0.08);
padding: 0.35rem 0.5rem;
}
.bottom-nav > .dropup {
flex: 1 1 0;
display: flex;
}
.bottom-nav-link {
flex: 1 1 0;
width: 100%;
min-height: 44px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
padding: 0.25rem 0;
border: none;
background: none;
color: var(--mp-text-secondary);
font-size: 0.7rem;
font-weight: 600;
text-decoration: none;
}
.bottom-nav-link:hover,
.bottom-nav-link:focus-visible {
color: var(--mp-accent);
}
.bottom-nav-link.dropdown-toggle::after {
display: none;
}
.bottom-nav-icon-wrap {
position: relative;
display: flex;
}
.bottom-nav-label {
line-height: 1;
}
/* ---- Plan Canje ---- */
/* Círculo con emoji, todavía usado por la pantalla de "acceso denegado". */
.canje-icon {
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: var(--mp-surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.canje-hero {
padding: 4rem 0;
}
/* Los dos "equipos" del canje: el que entregás y el que te llevás */
.canje-visual {
border-radius: 1.75rem;
background: linear-gradient(160deg, #171d2c 0%, #0f1320 100%);
border: 1px solid rgba(255, 255, 255, 0.09);
padding: 2.125rem 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1.4rem;
}
.canje-device {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.40);
}
.canje-device > svg {
width: 6.75rem;
height: 9.25rem;
padding: 1.5rem;
border-radius: 1rem;
border: 1.5px solid rgba(255, 255, 255, 0.28);
box-sizing: border-box;
}
.canje-device > span {
font-size: 0.8125rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.50);
}
.canje-device-new {
color: var(--mp-accent-light);
}
.canje-device-new > svg {
background-color: rgba(10, 94, 255, 0.14);
border-color: var(--mp-accent);
}
.canje-device-new > span {
color: var(--mp-accent-light);
}
.canje-arrow {
color: var(--mp-accent-light);
flex-shrink: 0;
}
/* Pasos numerados */
.step-card {
height: 100%;
background-color: #ffffff;
border: 1px solid var(--mp-border);
border-radius: 1.25rem;
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.step-number {
width: 2.75rem;
height: 2.75rem;
border-radius: 0.8rem;
background-color: var(--mp-accent-soft);
color: var(--mp-accent);
font-family: 'Manrope', 'Inter', system-ui, sans-serif;
font-size: 1.1875rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.step-title {
font-size: 1.1875rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0;
}
.step-text {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--mp-text-secondary);
margin: 0;
}
.canje-form-card {
background-color: #ffffff;
border: 1px solid var(--mp-border);
border-radius: 1.5rem;
padding: 2.25rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (max-width: 575.98px) {
.canje-form-card {
padding: 1.5rem;
}
}
.canje-side-card {
background-color: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: 1.5rem;
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
/* Zona para elegir fotos: el input real va oculto detrás de este recuadro */
.file-drop {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-align: center;
min-height: 8rem;
padding: 1.25rem;
border: 1.5px dashed #d5dae6;
border-radius: 0.875rem;
background-color: #fafbfd;
color: var(--mp-text-secondary);
cursor: pointer;
}
.file-drop:hover {
border-color: var(--mp-accent);
background-color: var(--mp-accent-soft);
}
.file-drop-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--mp-text);
}
.file-drop-sub {
font-size: 0.75rem;
color: #8790a1;
}
.file-drop-names:not(:empty) {
margin-top: 0.25rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--mp-accent);
}
/* ---- Contacto ---- */
.contact-card {
height: 100%;
background-color: #ffffff;
border: 1px solid var(--mp-border);
border-radius: 1.5rem;
padding: 1.875rem;
display: flex;
flex-direction: column;
gap: 1.125rem;
}
/* La tarjeta de WhatsApp va oscura: es el canal por el que se cierran las ventas */
.contact-card-ink {
position: relative;
overflow: hidden;
background-color: var(--mp-ink);
border-color: var(--mp-ink);
}
.contact-card-glow {
position: absolute;
top: -5.5rem;
right: -4.5rem;
width: 16rem;
height: 16rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(37, 211, 102, 0.22) 0%, rgba(37, 211, 102, 0) 70%);
pointer-events: none;
}
.contact-card-ink .contact-card-title {
color: #ffffff;
}
.contact-card-ink .contact-card-text {
color: var(--mp-ink-text);
}
.contact-card-ink .contact-card-value {
color: #ffffff;
}
.contact-icon {
width: 3.125rem;
height: 3.125rem;
border-radius: 0.9rem;
background-color: var(--mp-surface-alt);
color: var(--mp-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
}
.contact-icon-wa {
background-color: rgba(37, 211, 102, 0.14);
}
.contact-card-body {
display: flex;
flex-direction: column;
gap: 0.45rem;
position: relative;
}
.contact-card-title {
font-size: 1.3125rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0;
}
.contact-card-text {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--mp-text-secondary);
margin: 0;
}
.contact-card-foot {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 0.875rem;
position: relative;
}
.contact-card-value {
font-family: 'Manrope', 'Inter', system-ui, sans-serif;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--mp-text);
}
.contact-card-value-sm {
font-family: 'Inter', system-ui, sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: normal;
word-break: break-word;
}
.store-panel {
background-color: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: 1.5rem;
padding: 2.25rem;
}
@media (max-width: 575.98px) {
.store-panel {
padding: 1.5rem;
}
}
.contact-map {
border: 1px solid var(--mp-border);
border-radius: 1.25rem;
overflow: hidden;
height: 320px;
}
.contact-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* ---- Reseñas ---- */
.rating-summary {
background-color: #ffffff;
border: 1px solid var(--mp-border);
border-radius: 1.5rem;
padding: 1.5rem 2.25rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.rating-score {
font-family: 'Manrope', 'Inter', system-ui, sans-serif;
font-size: 3.25rem;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: var(--mp-text);
}
.rating-stars {
display: flex;
gap: 0.15rem;
}
.rating-count {
font-size: 0.875rem;
color: var(--mp-text-secondary);
}
.review-card {
background-color: #ffffff;
border: 1px solid var(--mp-border);
border-radius: 1.25rem;
padding: 1.625rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.review-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.review-author {
display: flex;
align-items: center;
gap: 0.875rem;
}
.review-avatar {
width: 2.875rem;
height: 2.875rem;
border-radius: 999px;
background-color: var(--mp-accent-soft);
color: var(--mp-accent);
font-family: 'Manrope', 'Inter', system-ui, sans-serif;
font-size: 1.0625rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.review-name {
display: block;
font-size: 1rem;
font-weight: 700;
color: var(--mp-text);
margin-bottom: 0.2rem;
}
.review-date {
font-size: 0.8125rem;
color: #8790a1;
flex-shrink: 0;
}
.review-text {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--mp-text);
margin: 0;
}
.review-form-card {
position: sticky;
top: 1rem;
background-color: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: 1.5rem;
padding: 1.875rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.review-note {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--mp-text-secondary);
}
.review-note svg {
color: #8790a1;
flex-shrink: 0;
margin-top: 0.1rem;
}
/* ---- Redes sociales del footer ---- */
.social-icon-btn {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid var(--mp-border);
color: var(--mp-text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.social-icon-btn svg {
width: 16px;
height: 16px;
}
.social-icon-btn:hover {
background-color: var(--mp-accent);
border-color: var(--mp-accent);
color: #ffffff;
}
/* ---- Barra lateral "agregado al carrito" ---- */
.mini-cart-offcanvas {
--bs-offcanvas-width: 380px;
}
.mini-cart-offcanvas .offcanvas-header {
background-color: var(--mp-surface);
border-bottom: 1px solid var(--mp-border);
}
.mini-cart-product-row {
background-color: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: 0.75rem;
padding: 0.75rem;
}
/* ---- Botón de WhatsApp (checkout, contacto, plan canje, servicio técnico) ---- */
.btn-whatsapp {
background-color: #ffffff;
border: 1px solid #25d366;
color: #128c4a;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus {
background-color: #f0fdf5;
border-color: #1ebe5b;
color: #0f7a40;
}
/* ---- Aviso flotante "agregado al carrito" ---- */
.cart-toast {
position: fixed;
top: 5.5rem;
right: 1.25rem;
z-index: 1050;
max-width: 320px;
background-color: #ffffff;
border: 1px solid var(--mp-border);
padding: 0.9rem 1rem;
animation: cartToastIn 0.25s ease-out;
}
.cart-toast-hide {
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
@keyframes cartToastIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ---- Carrito de compras ---- */
.cart-panel {
background-color: #ffffff;
border: 1px solid var(--mp-border);
border-radius: 1.25rem;
padding: 0 1.5rem;
}
.cart-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0 0.75rem 0;
border-bottom: 1px solid var(--mp-surface-alt);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--mp-text-secondary);
}
@media (max-width: 575.98px) {
.cart-panel {
padding: 0 1rem;
}
.cart-panel-head {
display: none;
}
}
.cart-item {
display: flex;
gap: 1.125rem;
padding: 1.35rem 0;
border-bottom: 1px solid var(--mp-surface-alt);
}
.cart-item-thumb-wrap {
position: relative;
flex-shrink: 0;
}
.cart-item-flag {
position: absolute;
top: -0.4rem;
left: -0.4rem;
height: 1.35rem;
padding: 0 0.45rem;
font-size: 0.6875rem;
}
.cart-item-thumb {
width: 96px;
height: 96px;
min-width: 96px;
border-radius: 0.85rem;
overflow: hidden;
border: 1px solid var(--mp-border);
background: linear-gradient(170deg, #f7f9fc 0%, var(--mp-surface-alt) 100%);
}
@media (max-width: 575.98px) {
.cart-item-thumb {
width: 76px;
height: 76px;
min-width: 76px;
}
}
.cart-item-thumb.product-image-placeholder svg {
width: 26px;
height: 26px;
}
.cart-item-thumb .small {
display: none;
}
.cart-item-main {
flex-grow: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.cart-item-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.cart-item-name {
font-size: 1rem;
font-weight: 600;
color: var(--mp-text);
text-decoration: none;
}
.cart-item-name:hover {
color: var(--mp-accent);
}
.cart-item-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
font-size: 0.875rem;
color: var(--mp-text-secondary);
}
.cart-item-sep {
color: #c3c8d4;
}
.cart-item-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 0.15rem;
}
.cart-item-subtotal {
font-family: 'Manrope', 'Inter', system-ui, sans-serif;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--mp-price);
}
.cart-panel-foot {
padding: 1.15rem 0;
}
.cart-keep-shopping {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--mp-accent);
text-decoration: none;
}
.qty-stepper {
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0 0.3rem;
border: 1px solid var(--mp-border);
border-radius: 999px;
}
.qty-stepper form {
display: contents;
}
.qty-btn {
width: 2rem;
height: 2.25rem;
border: none;
border-radius: 999px;
background: transparent;
color: var(--mp-text);
font-size: 1.1rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.qty-btn:hover:not(:disabled) {
background-color: var(--mp-surface);
}
.qty-btn:disabled {
color: #c3c8d4;
}
.qty-value {
min-width: 1.75rem;
text-align: center;
font-weight: 700;
font-size: 0.9375rem;
}
.cart-remove-btn {
width: 2rem;
height: 2rem;
border: none;
border-radius: 50%;
background: transparent;
color: #8790a1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cart-remove-btn:hover {
color: var(--mp-hot);
background-color: rgba(232, 64, 44, 0.08);
}
/* En celular, sumar/restar y quitar se tocan con el dedo: en px, porque abajo
de 768px la raíz baja a 14px y los rem quedarían por debajo del mínimo. */
@media (max-width: 991.98px) {
.qty-btn {
width: 44px;
height: 44px;
}
.qty-value {
min-width: 2.25rem;
}
.cart-remove-btn {
width: 44px;
height: 44px;
}
}
/* --- Resumen --- */
.cart-aside {
position: sticky;
top: 1rem;
}
.cart-summary-card {
background-color: #ffffff;
border: 1px solid var(--mp-border);
border-radius: 1.25rem;
padding: 1.6rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.cart-summary-rows {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.cart-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.9375rem;
}
.cart-summary-row > span:first-child {
color: var(--mp-text-secondary);
}
.cart-free {
font-weight: 700;
color: #16a34a;
}
.cart-shipping-hint {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--mp-text-secondary);
background-color: var(--mp-surface);
border-radius: 0.7rem;
padding: 0.7rem 0.85rem;
margin: 0;
}
.cart-total-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.cart-total-row > span:first-child {
font-size: 1rem;
font-weight: 700;
}
.cart-total {
font-family: 'Manrope', 'Inter', system-ui, sans-serif;
font-size: 1.875rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--mp-price);
}
.cart-note {
font-size: 0.8125rem;
line-height: 1.55;
color: var(--mp-text-secondary);
margin: 0;
}
.cart-assurance {
background-color: #ffffff;
border: 1px solid var(--mp-border);
border-radius: 1.25rem;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
/* Botón sólido de WhatsApp (carrito y barra fija) */
.btn-whatsapp-solid {
background-color: #25d366;
border: 1px solid #25d366;
color: #ffffff;
font-weight: 700;
box-shadow: 0 0.625rem 1.625rem rgba(37, 211, 102, 0.30);
}
.btn-whatsapp-solid:hover {
background-color: #1fb955;
border-color: #1fb955;
color: #ffffff;
}
/* --- Barra fija de checkout (celular) --- */
.cart-sticky-bar {
position: fixed;
left: 0;
right: 0;
bottom: 4rem;
z-index: 1029;
background-color: #ffffff;
border-top: 1px solid var(--mp-border);
box-shadow: 0 -0.375rem 1.25rem rgba(18, 20, 28, 0.07);
padding: 0.85rem 1rem 1rem 1rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.cart-sticky-row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.cart-sticky-total {
font-family: 'Manrope', 'Inter', system-ui, sans-serif;
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--mp-price);
}
/* La barra fija tapa el final de la página: se compensa con espacio extra
abajo, y el botón flotante de WhatsApp se corre para no superponerse. */
@media (max-width: 991.98px) {
body:has(.cart-sticky-bar) {
padding-bottom: 12rem;
}
body:has(.cart-sticky-bar) .whatsapp-float {
bottom: 13rem;
}
}