/* ════════════════════════════════════════════════════════════════════════
TIENDA — Estilos adicionales encima de jicrea-pro.css.
USAMOS LAS MISMAS variables y mismas tipografías del index. Solo
agregamos lo específico: cards de categorías, grid de productos,
isla flotante, carrito, modal de cantidad, notificación.
════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
TIENDA — RE-DISEÑO ARTESANAL COMPLETO
═══════════════════════════════════════════════════════════════════
Concepto: cada producto se siente como una ETIQUETA HECHA A MANO
sobre la superficie del taller. Paleta cálida cream parchment +
tierra + dorado. Detalles que vienen del oficio:
· Borde "cosido" en cards (stitch dashed effect)
· Números tipo etiqueta numerada manual
· Diamond divider entre secciones (◇)
· Price tag con look de papel/cartón colgante
· Hover sutil — la card "se levanta" como una etiqueta
─────────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
CARDS DE CATEGORÍAS — POLAROIDS ROTADAS (estilo .cards del index)
═══════════════════════════════════════════════════════════════════
Cuatro fotos levemente inclinadas, como polaroids tiradas sobre la
mesa. Cada una con su ángulo de rotación propio. Hover: enderezan
+ scale up + sombra crece. Debajo: numero italico, nombre serif
uppercase y descripción Garamond italic.
Reset crítico previo: .cards__inner del index tenía aspect-ratio
580/770 + position:relative que rompía cualquier grid acá. Lo
forzamos a static + auto.
─────────────────────────────────────────────────────────────────── */
/* Reset de reglas heredadas del index .cards__inner */
.cards--tienda .cards__inner.cards__inner--tienda {
position: static;
width: 100%;
aspect-ratio: auto;
}
.cards--tienda {
display: block;
align-items: stretch;
padding-top: max(4rem, min(6vw, 8rem));
padding-bottom: max(8rem, min(10vw, 14rem));
}
.cards__inner--tienda {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(2rem, 2.5vw, 4rem);
max-width: 1500px;
width: 100%;
margin: 0 auto;
padding: 0 var(--gutter);
}
@media (max-width: 900px) {
.cards__inner--tienda { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; }
}
@media (max-width: 480px) {
.cards__inner--tienda { grid-template-columns: 1fr; }
}
/* Card individual — link wrapper limpio */
.tienda-card {
position: relative;
display: block;
text-decoration: none;
color: inherit;
padding-top: 1rem;
padding-bottom: 1rem;
}
/* Foto polaroid — aspect 580/770 (más vertical, formato polaroid),
rounded corners suaves, sombra cálida, rotación propia por card.
Hover: rotación neutra (0deg) + scale-up + sombra más pronunciada. */
.tienda-card__photo {
position: relative;
width: 100%;
aspect-ratio: 580 / 770;
background-size: cover;
background-position: center;
background-color: rgba(46, 24, 12, 0.06);
border-radius: clamp(12px, 1.4vw, 20px);
box-shadow:
0 14px 32px -12px rgba(46, 24, 12, 0.30),
0 4px 12px -4px rgba(46, 24, 12, 0.20);
transform-origin: center center;
transition:
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
/* Ángulos de rotación distintos por card — natural "tirada sobre la mesa".
El patrón alterna izq/der/izq/der para ritmo visual coherente. */
.tienda-card--1 .tienda-card__photo { transform: rotate(-5deg); }
.tienda-card--2 .tienda-card__photo { transform: rotate(4deg); }
.tienda-card--3 .tienda-card__photo { transform: rotate(-3deg); }
.tienda-card--4 .tienda-card__photo { transform: rotate(6deg); }
.tienda-card:hover .tienda-card__photo {
transform: rotate(0deg) scale(1.04);
box-shadow:
0 28px 55px -14px rgba(46, 24, 12, 0.45),
0 8px 18px -4px rgba(46, 24, 12, 0.30);
}
/* Información debajo de la foto — alineada a izquierda con padding,
número italic + nombre serif grande + descripción italic */
.tienda-card__num {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: 1.4rem;
letter-spacing: 0.18em;
color: rgba(107, 68, 35, 0.85);
margin: 2.4rem 0 0.6rem;
}
.tienda-card__num::before {
content: "";
width: 5px;
height: 5px;
background: var(--c-brand, #CBA058);
transform: rotate(45deg);
}
.tienda-card__name {
font-family: var(--font-serif);
font-size: max(2.4rem, min(2.4vw, 3.4rem));
font-weight: 700;
text-transform: uppercase;
line-height: 1;
letter-spacing: 1.5px;
margin: 0 0 0.8rem;
color: #2B3A2C;
}
/* Línea dorada animada bajo el nombre — aparece en hover */
.tienda-card__name::after {
content: "";
display: block;
width: 28px;
height: 2px;
margin-top: 1.2rem;
background: var(--c-brand, #CBA058);
transition: width 0.5s var(--ease-out);
}
.tienda-card:hover .tienda-card__name::after { width: 72px; }
.tienda-card__desc {
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: 1.6rem;
line-height: 1.5;
color: rgba(42, 24, 16, 0.75);
margin: 0;
}
/* ─────────────────────────────────────────────────────────────────────
Seccion-prod — fondos por step (light / leather / dark)
───────────────────────────────────────────────────────────────────── */
.seccion-prod {
position: relative;
padding: max(8rem, min(10vw, 14rem)) var(--gutter);
overflow: hidden;
}
.seccion-prod[data-bg="leather"] {
background:
radial-gradient(ellipse at 20% 30%, rgba(255, 230, 200, 0.10), transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(46, 24, 12, 0.30), transparent 60%),
linear-gradient(135deg, #6B4423 0%, #8B5A33 50%, #7A4A28 100%);
color: #2A1810;
}
.seccion-prod[data-bg="leather"]::before,
.seccion-prod[data-bg="leather"]::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
}
.seccion-prod[data-bg="leather"]::before {
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.5;
mix-blend-mode: multiply;
}
.seccion-prod[data-bg="leather"]::after {
background-image: url("data:image/svg+xml;utf8,");
background-size: 140px 140px;
opacity: 0.3;
mix-blend-mode: overlay;
}
.seccion-prod > * { position: relative; z-index: 1; }
/* Light section — beige cream con TEXTURA SUTIL TIPO PAPEL KRAFT,
para que tenga personalidad propia y no compita con las cards cream.
El grain SVG es muy tenue (opacity 0.25 multiply) — apenas se nota
pero le da el toque "papel artesanal" característico. */
.seccion-prod[data-bg="light"] {
background-color: #EFE5D5; /* cream más tostado, kraft-paper feel */
color: var(--c-text);
position: relative;
}
.seccion-prod[data-bg="light"]::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
opacity: 0.25;
mix-blend-mode: multiply;
}
.seccion-prod[data-bg="dark"] {
background-color: var(--c-dark);
color: var(--c-text-alt);
}
/* ─────────────────────────────────────────────────────────────────────
HEADER de cada sección de productos — diamond divider + título serif
grande + subtítulo italic Garamond. Sigue la estética de manifesto
pero con un toque más artesanal: pequeño divisor decorativo arriba.
───────────────────────────────────────────────────────────────────── */
.seccion-prod__head {
max-width: 900px;
margin: 0 auto 6rem;
text-align: center;
/* Padding-top extra para que el ◇ tenga aire arriba sin pegarse al
borde superior de la sección. */
padding-top: 5rem;
}
/* Decorative divider arriba del título: ──── ◇ ──── (líneas finas con
diamond dorado al medio). Es la firma visual artesanal de cada head. */
.seccion-prod__head::before {
content: "";
display: block;
width: 60px;
height: 1px;
background: rgba(107, 68, 35, 0.45);
/* Margin-bottom aumentado (era 1.6rem). 4.5rem separa la línea del
título lo suficiente para que el ◇ respire y no se sienta pegado. */
margin: 0 auto 4.5rem;
position: relative;
}
.seccion-prod[data-bg="leather"] .seccion-prod__head::before {
background: rgba(244, 235, 225, 0.55);
}
.seccion-prod__head .manifesto__title {
position: relative;
display: inline-block;
}
/* Diamond dorado SOBRE la línea decorativa. top:-5.5rem (era -3.6rem)
para que tenga buena separación del título — pedido del cliente
"separar los cositos un poco más de los títulos". */
.seccion-prod__head .manifesto__title::before {
content: "◇";
position: absolute;
top: -5.5rem;
left: 50%;
transform: translateX(-50%);
color: var(--c-brand);
font-size: 1.3rem;
background: var(--c-bg);
padding: 0 1rem;
}
.seccion-prod[data-bg="leather"] .seccion-prod__head .manifesto__title::before {
background: linear-gradient(135deg, #6B4423, #8B5A33); /* matchea el leather bg */
}
/* Override del color del título según fondo — match contra leather */
.seccion-prod[data-bg="leather"] .seccion-prod__head .manifesto__title {
color: #F4EBE1;
}
.seccion-prod[data-bg="leather"] .seccion-prod__head .manifesto__text {
color: rgba(244, 235, 225, 0.85);
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: 1.8rem;
text-transform: none;
letter-spacing: 0.02em;
font-weight: 400;
}
.seccion-prod[data-bg="light"] .seccion-prod__head .manifesto__text {
color: rgba(42, 24, 16, 0.78);
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: 1.8rem;
text-transform: none;
letter-spacing: 0.02em;
font-weight: 400;
}
/* Grid de productos — flexbox para centrar perfecto con cualquier cantidad */
.seccion-prod__grid {
max-width: 1500px;
margin: 0 auto;
/* CAROUSEL DE UNA FILA — scroll horizontal con snap. Las flechas
(.seccion-carousel__arrow) lo desplazan en desktop; en mobile es
swipe nativo. Así una categoría con 12 productos ocupa UNA sola
fila en vez de 4. Cuando hay pocas cards y no desborda, el JS
agrega .is-centered para centrarlas. */
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
align-items: stretch;
--gap: 1.8rem;
--cards: 4; /* PC: 4 cards visibles por fila */
gap: var(--gap);
padding: .4rem .3rem 1.4rem;
scrollbar-width: none;
}
.seccion-prod__grid::-webkit-scrollbar { display: none; }
.seccion-prod__grid.is-centered { justify-content: center; }
/* Ancho = (visible - huecos) / 4 → siempre se ven 4 exactas, el resto
queda en el scroll del carousel. */
.seccion-prod__grid > .prod {
flex: 0 0 calc((100% - (var(--cards) - 1) * var(--gap)) / var(--cards));
width: calc((100% - (var(--cards) - 1) * var(--gap)) / var(--cards));
max-width: none;
scroll-snap-align: start;
}
/* Wrapper del carousel con las flechas de navegación (desktop). */
.seccion-carousel { position: relative; max-width: 1560px; margin: 0 auto; }
.seccion-carousel > .seccion-prod__grid { max-width: none; margin: 0; }
.seccion-carousel__arrow {
position: absolute; top: 44%; transform: translateY(-50%);
z-index: 6; width: 54px; height: 54px; border-radius: 50%;
display: grid; place-items: center; cursor: pointer; padding: 0;
background: #FAF3E8; color: #2A1810;
border: 1px solid rgba(107, 68, 35, .3);
box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
font-size: 1.9rem; line-height: 1; padding-bottom: .15em;
transition: background .2s, transform .2s, opacity .2s;
}
.seccion-carousel__arrow:hover { background: var(--c-brand); transform: translateY(-50%) scale(1.07); }
.seccion-carousel__arrow--prev { left: -8px; }
.seccion-carousel__arrow--next { right: -8px; }
.seccion-carousel__arrow[disabled] { opacity: 0; pointer-events: none; }
/* SUB-FILTROS — botones dentro de la sección Mates (Clásicos, Con
boquilla, Forrados, Imperiales, Algarrobo y cerámica). */
.subfilters {
display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
max-width: 1100px; margin: -1.2rem auto 2.6rem;
}
.subfilter {
padding: .55rem 1.25rem; border-radius: 999px; cursor: pointer;
font-family: var(--font-sans); font-weight: 700; font-size: .82rem;
letter-spacing: .12em; text-transform: uppercase; background: transparent;
border: 1px solid rgba(107, 68, 35, .28); color: rgba(42, 24, 16, .7);
transition: background .2s, color .2s, border-color .2s;
}
.subfilter:hover { border-color: var(--c-brand); color: var(--c-text); }
.subfilter.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #2A1810; }
/* En secciones leather (Mates) los chips van claros para contrastar. */
.seccion-prod[data-bg="leather"] .subfilter { border-color: rgba(245, 236, 224, .4); color: rgba(245, 236, 224, .85); }
.seccion-prod[data-bg="leather"] .subfilter:hover { border-color: var(--c-brand); color: #fff; }
.seccion-prod[data-bg="leather"] .subfilter.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #2A1810; }
@media (max-width: 640px) {
.seccion-carousel__arrow { display: none; }
.subfilters { margin: 0 auto 1.8rem; gap: .5rem; }
.subfilter { font-size: 1rem; padding: .55rem 1.1rem; }
}
/* ═══════════════════════════════════════════════════════════════════
PROD CARD — ETIQUETA ARTESANAL
═══════════════════════════════════════════════════════════════════
Cada producto es una etiqueta sobre el cuero (en secciones leather)
o sobre la mesa cream (en secciones light). MISMO look en ambas →
visual coherente: parchment cream + texto SIEMPRE dark earth (legible).
Detalles que ningún competidor copia:
· Stitched border (dashed inner border simulando cuero cosido)
· Numbered badge en esquina (etiqueta de inventario)
· Gold hairline bajo el nombre
· Price con look de tag de papel colgante
· Hover lift sutil con sombra "sobre el cuero"
─────────────────────────────────────────────────────────────────── */
.prod {
position: relative;
background: #FAF3E8; /* parchment cream cálido — UNIFORME en todas las secciones */
color: #2A1810; /* dark earth — SIEMPRE legible sobre el cream */
padding: 1.2rem 1.2rem 0;
display: flex;
flex-direction: column;
/* SIN height:100% — un height explícito desactiva el align-items:stretch
del grid y dejaba cards de distinta altura (p.ej. la matera del medio
más baja). Con height auto + stretch, TODAS igualan a la más alta. */
min-height: 460px;
border-radius: 6px;
/* Border sutil + sombra elevada (sensación "etiqueta sobre superficie") */
box-shadow:
0 0 0 1px rgba(107, 68, 35, 0.18),
0 2px 8px rgba(46, 24, 12, 0.08);
transition:
transform 0.55s var(--ease-out),
box-shadow 0.45s var(--ease-out);
}
/* Stitching dashed sobre la card — costura del cuero artesanal */
.prod::before {
content: "";
position: absolute;
inset: 8px;
border: 1px dashed rgba(107, 68, 35, 0.22);
border-radius: 3px;
pointer-events: none;
z-index: 1;
}
/* Hover: sutil lift + sombra más pronunciada (simula etiqueta levantándose) */
.prod:hover {
transform: translateY(-6px);
box-shadow:
0 0 0 1px rgba(107, 68, 35, 0.35),
0 24px 40px -16px rgba(46, 24, 12, 0.30);
}
/* En leather la sombra es más oscura — refuerza la sensación "label sobre cuero" */
.seccion-prod[data-bg="leather"] .prod:hover {
box-shadow:
0 0 0 1px rgba(107, 68, 35, 0.55),
0 28px 50px -16px rgba(10, 5, 0, 0.55);
}
/* Link wrapper — imagen + nombre + descripción + precio. Click → producto.html */
.prod__link {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
padding: 0 0 1.2rem 0;
flex: 1;
}
/* Imagen del producto — SIN backdrop por defecto. Las fotos reales
(posa mates, materas, yerberos) ya traen su propio fondo de estudio
fotográfico, entonces NO necesitan que la card agregue nada — la
imagen llena el área completa con su bg natural. */
.prod__img {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
display: block;
overflow: hidden;
margin-bottom: 2.4rem;
border-radius: 3px;
background: transparent;
}
/* Hairline dorado debajo de la imagen — touch de etiqueta premium */
.prod__img::after {
content: "";
position: absolute;
left: 16%;
right: 16%;
bottom: -1.2rem;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(203, 160, 88, 0.6) 50%, transparent 100%);
}
.prod__img img {
width: 100%;
height: 100%;
/* cover por defecto — la imagen LLENA el área (las fotos de productos
ya son ~cuadradas con bg estudio, no se nota el crop). */
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.7s var(--ease-out);
}
.prod:hover .prod__img img {
transform: scale(1.06);
}
/* ─── EXCEPCIÓN: cards de MATES (en CUALQUIER página) ────────────────
Los mates son PNG con fondo transparente. SÍ necesitan el backdrop
cream para no quedar "flotando en el vacío" sobre el cream de la card.
Acá restauramos el bg estudio + object-fit:contain + padding interno.
Usamos clase .prod--mate (no #mates) para que también aplique en
"productos relacionados" de la página de detalle. */
.prod--mate .prod__img,
#mates .prod__img {
background:
radial-gradient(ellipse 90% 60% at 50% 25%, rgba(255, 250, 235, 0.7) 0%, transparent 70%),
linear-gradient(180deg, #F0E4CB 0%, #D9C7A4 100%);
}
.prod--mate .prod__img img,
#mates .prod__img img {
object-fit: contain;
padding: 8%;
box-sizing: border-box;
}
/* Cards con FOTO REAL (img/productos/...) → la card se ADAPTA a la foto.
Las fotos de catálogo son 4:5 (vertical). Forzamos ese aspect-ratio en
el contenedor para que `cover` LLENE el área SIN recortar el mate (la
proporción coincide exacto). Sin padding ni backdrop de estudio. */
.prod__img--photo,
.prod--mate .prod__img--photo,
#mates .prod__img--photo {
aspect-ratio: 4 / 5 !important;
background: none !important;
}
.prod__img--photo img,
.prod--mate .prod__img--photo img,
#mates .prod__img--photo img {
object-fit: cover !important;
padding: 0 !important;
}
/* Placeholder cuando no hay foto — patrón rayado tipo papel kraft */
.prod__img--placeholder {
background:
repeating-linear-gradient(45deg, rgba(107, 68, 35, 0.05) 0 8px, transparent 8px 16px),
#FFFCF7;
border: 1px dashed rgba(107, 68, 35, 0.25);
}
.prod__img--placeholder span {
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
color: rgba(107, 68, 35, 0.6);
font-size: 1.4rem;
letter-spacing: 0.08em;
padding: 0 1.6rem;
text-align: center;
}
/* Nombre del producto — serif uppercase, dark green (matchea titulos),
con hairline dorado debajo (decorativo, identidad de la marca). */
.prod__name {
font-family: var(--font-serif);
font-weight: 700;
/* Más compacto y CENTRADO — los nombres del catálogo son largos
(ej. "Mate de cerámica imperial forrado suela alpaca"). Centrado +
line-clamp a 3 líneas con min-height reservado → todas las cards
arrancan el precio/botón a la misma altura. */
font-size: max(1.35rem, min(1.15vw, 1.6rem));
text-transform: uppercase;
letter-spacing: .5px;
line-height: 1.12;
margin: 0 1rem 0.4rem;
text-align: center;
color: #2B3A2C; /* dark green — SIEMPRE legible sobre el cream */
min-height: calc(2 * 1.6rem * 1.12); /* reserva ~2 líneas → bases parejas */
}
/* Hairline dorado bajo el nombre — centrado, touch de etiqueta artesanal */
.prod__name::after {
content: "";
display: block;
width: 28px;
height: 1.5px;
margin: 0.8rem auto 0;
background: var(--c-brand, #CBA058);
transition: width 0.5s var(--ease-out);
}
.prod:hover .prod__name::after {
width: 64px;
}
/* Descripción — italic Garamond, dark earth, 2 líneas clamp para uniformidad */
.prod__desc {
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: 1.5rem;
line-height: 1.55;
color: rgba(42, 24, 16, 0.75); /* dark earth con opacity — legible */
margin: 1.2rem 1.8rem 1.6rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Precio — tag style. Ya no es solo texto, simula un papel/cartón
colgante con un punto-perforación a la izquierda y línea-corte
simulando la marca de troquelado de una etiqueta artesanal. */
.prod__price {
position: relative;
display: inline-block;
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 700;
color: #2A1810;
margin: auto 1.8rem 0;
padding: 1.2rem 0 0 2.4rem;
/* Perforación: pequeño círculo gold a la izquierda del precio,
simulando el agujero de una etiqueta colgante */
}
.prod__price::before {
content: "";
position: absolute;
left: 0.4rem;
top: 1.9rem;
width: 6px;
height: 6px;
border: 1.5px solid var(--c-brand, #CBA058);
border-radius: 50%;
}
/* Línea decorativa que une la perforación con el precio (efecto "cordón") */
.prod__price::after {
content: "";
position: absolute;
left: 1.4rem;
top: 2.05rem;
width: 0.8rem;
height: 1.5px;
background: rgba(203, 160, 88, 0.6);
}
/* Botón Add to Cart — leather-feel rectangular en la base de la card,
con stitching propio. Hover sube sutil y se intensifica el color. */
.prod__btn {
position: relative;
z-index: 2;
background: #2B3A2C; /* dark green — contrasta sobre el cream */
color: #F4EBE1;
border: none;
padding: 1.6rem 2rem;
margin: 1.6rem 1.2rem 1.2rem;
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.3rem;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
border-radius: 3px;
transition:
background-color 0.35s var(--ease-out),
transform 0.35s var(--ease-out),
box-shadow 0.35s var(--ease-out);
box-shadow: 0 2px 0 rgba(46, 24, 12, 0.2);
}
.prod__btn:hover {
background: #1d2a1e;
transform: translateY(-2px);
box-shadow: 0 6px 16px -2px rgba(46, 24, 12, 0.4);
}
.prod__btn:active {
transform: translateY(0);
box-shadow: 0 1px 0 rgba(46, 24, 12, 0.2);
}
/* ─────────────────────────────────────────────────────────────────────
CTA grande dentro de manifesto (mayorista / marca blanca)
───────────────────────────────────────────────────────────────────── */
.manifesto--banner {
padding-bottom: max(8rem, min(10vw, 12rem));
}
.manifesto--banner[data-bg="leather"] {
background:
radial-gradient(ellipse at 20% 30%, rgba(255, 230, 200, 0.10), transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(46, 24, 12, 0.30), transparent 60%),
linear-gradient(135deg, #6B4423 0%, #8B5A33 50%, #7A4A28 100%);
color: var(--c-text-alt);
position: relative;
overflow: hidden;
}
/* VARIANTE LEAF — verde profundo en vez de cuero marrón. Misma paleta
que el .b2b-v2 del index para integrar coherencia visual. */
.manifesto--banner[data-bg="leaf"] {
background:
radial-gradient(ellipse at 30% 20%, rgba(203, 160, 88, 0.06), transparent 60%),
linear-gradient(135deg, #2b3a2c 0%, #1f2b1f 55%, #15201a 100%);
color: var(--c-text-alt);
position: relative;
overflow: hidden;
}
.manifesto--banner[data-bg="leather"]::before,
.manifesto--banner[data-bg="leaf"]::before {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.5;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}
.manifesto--banner[data-bg="leaf"]::before { opacity: 0.4; }
.manifesto--banner > * { position: relative; z-index: 1; }
.manifesto--dark {
background-color: var(--c-dark);
color: var(--c-text-alt);
}
.cta-grande {
margin-top: 4rem;
display: inline-flex;
align-items: center;
gap: 1.2rem;
background: #25D366;
color: #0A0807;
text-decoration: none;
padding: 1.8rem 3.2rem;
font-family: var(--font-sans);
font-size: 1.4rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
.cta-grande:hover {
background: #1ebe5b;
transform: translateY(-3px);
box-shadow: 0 7px 0 rgba(0, 0, 0, 0.3);
}
.cta-grande--gold {
background: var(--c-brand);
}
.cta-grande--gold:hover {
background: #d8b070;
}
/* ─────────────────────────────────────────────────────────────────────
INFO-GRID — 4 features en mayorista / marca blanca
───────────────────────────────────────────────────────────────────── */
.manifesto__inner--info {
max-width: 1100px;
}
.manifesto__text--intro {
margin-bottom: 5rem !important;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: max(2.5rem, min(3vw, 4rem));
margin: 4rem auto 5rem;
text-align: left;
max-width: 1100px;
}
.info-grid__item {
padding-top: 2.4rem;
border-top: 1px solid rgba(203, 160, 88, 0.35);
}
.info-grid__num {
display: block;
font-family: var(--font-sans);
font-style: italic;
color: var(--c-brand);
font-size: 1.3rem;
letter-spacing: 0.22em;
margin-bottom: 1.2rem;
}
.info-grid__title {
font-family: var(--font-serif);
font-size: max(1.8rem, min(2vw, 2.4rem));
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.1;
margin: 0 0 1.2rem 0;
color: inherit;
}
.info-grid__text {
font-family: var(--font-sans);
font-size: 1.45rem;
line-height: 1.55;
color: inherit;
opacity: 0.78;
margin: 0;
}
/* ─── INFO-CLIENTES — bloque de "Trabajamos con" + lista horizontal ──
Sólo en tienda mayorista. Pequeño label dorado italic + chips de
tipos de cliente separados por dot dorado. Centrado, con borde-top
sutil que enmarca el bloque como una etiqueta artesanal sobre cuero. */
.info-clientes {
margin: 4rem auto 4.5rem;
max-width: 1100px;
text-align: center;
padding-top: 3rem;
border-top: 1px solid rgba(203, 160, 88, 0.3);
}
.info-clientes__label {
display: block;
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
color: var(--c-brand);
font-size: 1.4rem;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 1.6rem;
}
.info-clientes__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(1.2rem, 2vw, 2.4rem);
align-items: center;
font-family: var(--font-serif);
text-transform: uppercase;
letter-spacing: 1px;
font-size: clamp(1.4rem, 1.5vw, 1.8rem);
color: inherit;
}
/* Separator entre items: pequeño diamond dorado · ◇ · */
.info-clientes__list li {
position: relative;
display: inline-flex;
align-items: center;
gap: clamp(1.2rem, 2vw, 2.4rem);
}
.info-clientes__list li:not(:last-child)::after {
content: "◇";
color: var(--c-brand);
font-size: 0.8em;
opacity: 0.7;
}
.cta-row {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
justify-content: center;
margin-top: 4rem;
}
.cta-grande--outline {
background: transparent;
color: var(--c-text-alt);
border: 2px solid var(--c-brand);
box-shadow: none;
}
.cta-grande--outline:hover {
background: rgba(203, 160, 88, 0.12);
border-color: #d8b070;
color: var(--c-text-alt);
}
.manifesto--banner[data-bg="leather"] .cta-grande--outline {
border-color: var(--c-text-alt);
}
/* ═════════════════════════════════════════════════════════════════════
ISLA FLOTANTE — barra de navegación cuero, fija abajo
═════════════════════════════════════════════════════════════════════ */
.floating-island {
position: fixed;
bottom: 3rem;
left: 50%;
transform: translate(-50%, calc(100% + 5rem));
z-index: 95;
display: flex;
align-items: center;
gap: max(0.8rem, min(1.2vw, 2rem));
padding: 1.4rem 2.4rem;
border-radius: 5rem;
/* Textura CUERO real */
background-color: var(--c-earth);
background-image:
radial-gradient(ellipse at 30% 30%, rgba(255, 230, 200, 0.20), transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(46, 24, 12, 0.35), transparent 65%),
url("data:image/svg+xml;utf8,");
background-size: cover, cover, 180px 180px;
background-blend-mode: normal, normal, overlay;
border: 1px solid rgba(203, 160, 88, 0.3);
box-shadow:
0 20px 50px -15px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: transform 0.6s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.4s;
opacity: 0;
pointer-events: none;
}
.floating-island.is-visible {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
.floating-island__link {
flex-shrink: 0;
color: rgba(244, 235, 225, 0.75);
font-family: var(--font-sans);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
padding: 0.6rem 1.2rem;
border-radius: 3rem;
transition: color 0.3s, background-color 0.3s;
white-space: nowrap;
}
.floating-island__link:hover {
color: var(--c-text-alt);
}
.floating-island__link.is-active {
color: var(--c-text-alt);
background-color: rgba(0, 0, 0, 0.25);
}
.floating-island__sep {
width: 1px;
height: 1.8rem;
background: rgba(244, 235, 225, 0.25);
}
/* ─────────────────────────────────────────────────────────────────────
BOTÓN DE CARRITO en el header
───────────────────────────────────────────────────────────────────── */
.cart-btn {
background: none;
border: none;
cursor: pointer;
padding: 0.6rem;
display: inline-flex;
align-items: center;
position: relative;
color: inherit;
margin-left: max(1.5rem, min(2vw, 3rem));
transition: opacity 0.3s, transform 0.3s;
}
.cart-btn:hover {
opacity: 0.7;
transform: translateY(-2px);
}
.cart-btn__count {
position: absolute;
top: -0.4rem;
right: -0.4rem;
background: var(--c-brand);
color: var(--c-dark);
border-radius: 50%;
font-family: var(--font-sans);
font-size: 1.1rem;
font-weight: 700;
min-width: 1.8rem;
height: 1.8rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.4rem;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.cart-btn__count.is-visible {
opacity: 1;
transform: scale(1);
}
.cart-btn__count.is-pulse {
animation: cart-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cart-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.4); }
100% { transform: scale(1); }
}
/* ─────────────────────────────────────────────────────────────────────
CART DRAWER — panel lateral derecho
───────────────────────────────────────────────────────────────────── */
.cart-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 8, 7, 0.6);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease-out);
z-index: 200;
backdrop-filter: blur(2px);
}
.cart-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.cart {
position: fixed;
top: 0;
right: 0;
width: min(460px, 90vw);
height: 100vh;
height: 100dvh; /* iOS: descuenta las barras de Safari (el botón ya no queda tapado) */
background-color: var(--c-bg);
background-image:
url("data:image/svg+xml;utf8,");
background-size: 180px 180px;
color: var(--c-text);
z-index: 201;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.4);
}
.cart.is-open {
transform: translateX(0);
}
.cart__head {
padding: 2.4rem 2.6rem 2rem;
padding-top: calc(2.4rem + env(safe-area-inset-top, 0px));
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(42, 24, 16, 0.15);
}
.cart__title {
font-family: var(--font-serif);
font-size: 2.2rem;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
}
.cart__close {
background: none; border: none; cursor: pointer;
color: var(--c-text);
padding: 0.4rem;
display: flex;
transition: opacity 0.3s, transform 0.3s;
}
.cart__close:hover { opacity: 0.6; transform: rotate(90deg); }
.cart__body {
flex: 1;
overflow-y: auto;
padding: 1.6rem 2.6rem;
}
.cart__empty {
font-family: var(--font-sans);
font-style: italic;
text-align: center;
margin: 6rem 0;
color: rgba(26, 26, 26, 0.5);
font-size: 1.6rem;
line-height: 1.5;
}
.cart__empty span {
display: block;
margin-top: 0.8rem;
font-size: 1.3rem;
}
.cart__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.cart-item {
display: flex;
align-items: center;
gap: 1.4rem;
padding: 1.4rem 0;
border-bottom: 1px solid rgba(42, 24, 16, 0.1);
}
.cart-item:last-child { border-bottom: none; }
/* Thumbnail del producto — cuadrado con bg cremita matching las cards
de la tienda. object-fit:contain + padding para que el producto se vea
entero sin recortes, igual que en las cards. */
.cart-item__thumb {
flex-shrink: 0;
width: 7rem;
height: 7rem;
border-radius: 4px;
overflow: hidden;
background:
radial-gradient(ellipse 90% 60% at 50% 25%, rgba(255, 250, 235, 0.7) 0%, transparent 70%),
linear-gradient(180deg, #F0E4CB 0%, #D9C7A4 100%);
border: 1px solid rgba(107, 68, 35, 0.18);
}
.cart-item__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6%;
box-sizing: border-box;
display: block;
}
.cart-item__info {
flex: 1;
min-width: 0; /* permite que el nombre haga ellipsis si es muy largo */
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.cart-item__name {
font-family: var(--font-serif);
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
}
.cart-item__price {
font-family: var(--font-sans);
font-size: 1.3rem;
color: rgba(26, 26, 26, 0.6);
}
.cart-item__qty {
display: flex;
align-items: center;
gap: 0.8rem;
background: rgba(42, 24, 16, 0.08);
padding: 0.4rem;
}
.cart-item__qty-btn {
width: 2.6rem; height: 2.6rem;
background: none; border: none; cursor: pointer;
font-size: 1.6rem; color: var(--c-text);
display: flex; align-items: center; justify-content: center;
transition: background-color 0.2s;
}
.cart-item__qty-btn:hover { background: rgba(42, 24, 16, 0.12); }
.cart-item__qty-value {
min-width: 1.8rem;
text-align: center;
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.4rem;
}
.cart-item__remove {
background: none; border: none; cursor: pointer;
color: rgba(26, 26, 26, 0.4);
padding: 0.4rem;
display: flex;
transition: color 0.3s, transform 0.3s;
}
.cart-item__remove:hover { color: #c0392b; transform: scale(1.15); }
.cart__foot {
padding: 1.8rem 2.6rem 2.4rem;
/* Suma el safe-area inferior (home indicator / barra de Safari) para que el
botón Finalizar compra no quede tapado en iPhone. */
padding-bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(42, 24, 16, 0.15);
background: rgba(42, 24, 16, 0.04);
}
.cart__total {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 1.4rem;
font-family: var(--font-serif);
}
.cart__total-label {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(26, 26, 26, 0.6);
}
.cart__total-amount {
font-size: 2.4rem;
font-weight: 700;
color: var(--c-text);
}
.cart__note {
font-family: var(--font-sans);
font-style: italic;
font-size: 1.2rem;
color: rgba(26, 26, 26, 0.6);
text-align: center;
margin: 0 0 1.4rem;
}
.cart__cta {
width: 100%;
background: #25D366;
color: #0A0807;
border: none;
padding: 1.8rem;
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.4rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem;
transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
.cart__cta:not(:disabled):hover {
background: #1ebe5b;
transform: translateY(-2px);
}
.cart__cta:disabled {
opacity: 0.45;
cursor: not-allowed;
background: rgba(42, 24, 16, 0.5);
color: rgba(244, 235, 225, 0.8);
box-shadow: none;
}
/* ═════════════════════════════════════════════════════════════════════
MODAL DE CANTIDAD — textura cuero, centrado, antes de agregar
═════════════════════════════════════════════════════════════════════ */
.qty-modal {
position: fixed;
inset: 0;
z-index: 250;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s var(--ease-out);
}
.qty-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.qty-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 8, 7, 0.7);
backdrop-filter: blur(4px);
}
.qty-modal__panel {
position: relative;
width: min(440px, 92vw);
padding: 3rem 2.8rem;
/* Textura CUERO */
background-color: var(--c-earth);
background-image:
radial-gradient(ellipse at 25% 25%, rgba(255, 230, 200, 0.20), transparent 55%),
radial-gradient(ellipse at 75% 75%, rgba(46, 24, 12, 0.40), transparent 60%),
url("data:image/svg+xml;utf8,");
background-size: cover, cover, 200px 200px;
background-blend-mode: normal, normal, overlay;
color: var(--c-text-alt);
border: 1px solid rgba(203, 160, 88, 0.35);
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
transform: scale(0.92);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.qty-modal.is-open .qty-modal__panel { transform: scale(1); }
.qty-modal__close {
position: absolute;
top: 1.4rem;
right: 1.4rem;
background: none; border: none; cursor: pointer;
color: var(--c-text-alt);
padding: 0.4rem;
opacity: 0.7;
transition: opacity 0.3s, transform 0.3s;
}
.qty-modal__close:hover { opacity: 1; transform: rotate(90deg); }
.qty-modal__product {
display: flex;
align-items: center;
gap: 1.6rem;
margin-bottom: 2rem;
}
.qty-modal__img {
width: 7rem; height: 7rem;
object-fit: contain;
background: rgba(0, 0, 0, 0.2);
padding: 0.6rem;
flex-shrink: 0;
}
.qty-modal__name {
font-family: var(--font-serif);
font-size: 1.8rem;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 0.4rem 0;
}
.qty-modal__price {
font-family: var(--font-sans);
font-size: 1.5rem;
font-weight: 700;
color: var(--c-brand);
margin: 0;
}
.qty-modal__question {
font-family: var(--font-sans);
font-style: italic;
font-size: 1.5rem;
margin: 0 0 1.4rem 0;
opacity: 0.85;
}
.qty-modal__qty {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
padding: 1.2rem;
background: rgba(0, 0, 0, 0.25);
margin-bottom: 1.4rem;
}
.qty-modal__btn {
width: 4rem; height: 4rem;
background: rgba(203, 160, 88, 0.18);
color: var(--c-text-alt);
border: 1px solid rgba(203, 160, 88, 0.4);
font-size: 2rem;
font-weight: 700;
cursor: pointer;
transition: background-color 0.3s;
}
.qty-modal__btn:hover { background: rgba(203, 160, 88, 0.32); }
.qty-modal__value {
font-family: var(--font-serif);
font-size: 2.6rem;
font-weight: 700;
min-width: 4rem;
text-align: center;
}
.qty-modal__subtotal {
font-family: var(--font-sans);
font-size: 1.4rem;
text-align: center;
margin: 0 0 1.8rem 0;
opacity: 0.85;
}
.qty-modal__subtotal span {
font-weight: 700;
color: var(--c-brand);
}
.qty-modal__confirm {
width: 100%;
background: var(--c-brand);
color: var(--c-dark);
border: none;
padding: 1.6rem;
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.3rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
.qty-modal__confirm:hover {
background: #d8b070;
transform: translateY(-2px);
}
/* ═════════════════════════════════════════════════════════════════════
NOTIFICACIÓN "Se agregó" — textura cuero, arriba-derecha
═════════════════════════════════════════════════════════════════════ */
.cart-notif {
position: fixed;
top: 11rem;
right: 3rem;
width: min(360px, 92vw);
padding: 2rem 2.2rem;
/* Textura CUERO */
background-color: var(--c-earth);
background-image:
radial-gradient(ellipse at 20% 20%, rgba(255, 230, 200, 0.22), transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(46, 24, 12, 0.40), transparent 60%),
url("data:image/svg+xml;utf8,");
background-size: cover, cover, 180px 180px;
background-blend-mode: normal, normal, overlay;
color: var(--c-text-alt);
border: 1px solid rgba(203, 160, 88, 0.4);
box-shadow: 0 18px 50px -15px rgba(0, 0, 0, 0.5);
z-index: 220;
transform: translateX(calc(100% + 5rem));
opacity: 0;
transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.4s;
}
.cart-notif.is-visible {
transform: translateX(0);
opacity: 1;
}
.cart-notif__row {
display: flex;
align-items: flex-start;
gap: 1.2rem;
}
.cart-notif__check {
flex-shrink: 0;
width: 3.2rem; height: 3.2rem;
background: #25D366;
color: var(--c-dark);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
font-weight: 700;
}
/* Thumb del producto agregado — bg cream para PNGs transparentes,
border dorado fino para destacar. */
.cart-notif__thumb {
flex-shrink: 0;
width: 4.6rem; height: 4.6rem;
border-radius: 4px;
overflow: hidden;
background:
radial-gradient(ellipse 90% 60% at 50% 25%, rgba(255, 250, 235, 0.7) 0%, transparent 70%),
linear-gradient(180deg, #F0E4CB 0%, #D9C7A4 100%);
border: 1px solid rgba(203, 160, 88, 0.4);
}
.cart-notif__thumb img {
width: 100%; height: 100%;
object-fit: contain;
padding: 6%;
box-sizing: border-box;
display: block;
}
.cart-notif__text { flex: 1; min-width: 0; }
.cart-notif__title {
font-family: var(--font-serif);
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 0.3rem 0;
}
.cart-notif__detail {
font-family: var(--font-sans);
font-style: italic;
font-size: 1.35rem;
margin: 0;
opacity: 0.8;
}
.cart-notif__sep {
height: 1px;
background: rgba(244, 235, 225, 0.18);
margin: 1.5rem 0 1.2rem;
}
.cart-notif__total {
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: var(--font-sans);
font-size: 1.35rem;
margin-bottom: 1.4rem;
}
.cart-notif__total span { opacity: 0.7; }
.cart-notif__total strong {
font-family: var(--font-serif);
font-size: 1.9rem;
font-weight: 700;
color: var(--c-brand);
}
.cart-notif__actions {
display: flex;
gap: 0.8rem;
}
.cart-notif__btn {
flex: 1;
padding: 1rem 1rem;
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.15rem;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
border: none;
transition: background-color 0.3s, transform 0.3s;
}
.cart-notif__btn--ghost {
background: transparent;
color: var(--c-text-alt);
border: 1px solid rgba(244, 235, 225, 0.4);
}
.cart-notif__btn--ghost:hover {
background: rgba(244, 235, 225, 0.1);
}
.cart-notif__btn--solid {
background: #25D366;
color: var(--c-dark);
}
.cart-notif__btn--solid:hover {
background: #1ebe5b;
transform: translateY(-2px);
}
/* ═════════════════════════════════════════════════════════════════════
MAYORISTA PICKER — Modal selector compra mayorista (min 10)
═════════════════════════════════════════════════════════════════════
Modal full-screen con la MISMA estética que el sitio: textura cuero,
título serif uppercase, dorado en acentos. Grid de productos con +/-
por unidad. Counter abajo con barra de progreso hasta el mínimo de 10.
Cuando se llega o supera, el CTA pasa a verde WhatsApp y habilita el
click para finalizar por chat.
─────────────────────────────────────────────────────────────────── */
.mayorista-modal {
position: fixed;
inset: 0;
z-index: 240;
display: flex;
align-items: stretch;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 0.35s var(--ease-out);
}
.mayorista-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.mayorista-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 8, 7, 0.78);
backdrop-filter: blur(4px);
}
.mayorista-modal__panel {
position: relative;
width: min(1180px, 96vw);
max-height: 92vh;
margin: auto;
display: flex;
flex-direction: column;
/* Textura cuero — mismo recipe que el resto de bloques leather */
background-color: var(--c-earth);
background-image:
radial-gradient(ellipse at 20% 25%, rgba(255, 230, 200, 0.18), transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(46, 24, 12, 0.42), transparent 60%),
url("data:image/svg+xml;utf8,");
background-size: cover, cover, 200px 200px;
background-blend-mode: normal, normal, overlay;
color: var(--c-text-alt);
border: 1px solid rgba(203, 160, 88, 0.4);
box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7);
transform: scale(0.94) translateY(20px);
transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
overflow: hidden;
}
.mayorista-modal.is-open .mayorista-modal__panel {
transform: scale(1) translateY(0);
}
/* Header del modal — título serif + subtítulo italic + close */
.mayorista-modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
padding: 2.6rem 3rem 2.2rem;
border-bottom: 1px solid rgba(203, 160, 88, 0.28);
}
.mayorista-modal__head-text {
flex: 1;
min-width: 0;
}
.mayorista-modal__eyebrow {
display: inline-block;
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
color: var(--c-brand);
font-size: 1.25rem;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 0.8rem;
}
.mayorista-modal__title {
font-family: var(--font-serif);
font-size: max(2.2rem, min(2.8vw, 3.4rem));
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
line-height: 1.05;
margin: 0 0 0.8rem 0;
color: var(--c-text-alt);
}
.mayorista-modal__sub {
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: 1.55rem;
line-height: 1.4;
margin: 0;
opacity: 0.85;
}
.mayorista-modal__sub strong {
font-style: normal;
font-family: var(--font-sans);
font-weight: 700;
color: var(--c-brand);
}
.mayorista-modal__close {
flex-shrink: 0;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(203, 160, 88, 0.35);
color: var(--c-text-alt);
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.3s, transform 0.3s;
}
.mayorista-modal__close:hover {
background: rgba(203, 160, 88, 0.25);
transform: rotate(90deg);
}
/* Grid de productos — scrolleable. Items con look "etiqueta sobre cuero" */
.mayorista-modal__body {
flex: 1;
overflow-y: auto;
padding: 2.4rem 3rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1.8rem;
}
.mayorista-modal__body::-webkit-scrollbar { width: 8px; }
.mayorista-modal__body::-webkit-scrollbar-thumb {
background: rgba(203, 160, 88, 0.4);
border-radius: 4px;
}
.mayorista-modal__body::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
}
/* Card individual dentro del picker — parchment cream coherente con el resto */
.mayo-card {
background: #FAF3E8;
color: #2A1810;
border-radius: 6px;
padding: 1.4rem 1.2rem 1.2rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
position: relative;
box-shadow:
0 0 0 1px rgba(107, 68, 35, 0.18),
0 6px 16px -6px rgba(0, 0, 0, 0.4);
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.mayo-card.is-selected {
box-shadow:
0 0 0 2px var(--c-brand),
0 10px 24px -6px rgba(0, 0, 0, 0.55);
transform: translateY(-3px);
}
.mayo-card__img {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(ellipse 90% 60% at 50% 25%, rgba(255, 250, 235, 0.7) 0%, transparent 70%),
linear-gradient(180deg, #F0E4CB 0%, #D9C7A4 100%);
}
.mayo-card__img img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6%;
box-sizing: border-box;
display: block;
}
.mayo-card__cat {
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: 1.1rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(107, 68, 35, 0.78);
margin-top: 0.4rem;
}
.mayo-card__name {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.1;
margin: 0;
color: #2B3A2C;
}
.mayo-card__price {
font-family: var(--font-sans);
font-size: 1.35rem;
font-weight: 700;
color: #2A1810;
margin: 0;
}
.mayo-card__qty {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
padding-top: 0.8rem;
border-top: 1px dashed rgba(107, 68, 35, 0.22);
}
.mayo-card__qty-btn {
width: 3.2rem;
height: 3.2rem;
background: #2B3A2C;
color: #F4EBE1;
border: none;
border-radius: 4px;
font-size: 1.8rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.25s, transform 0.2s;
}
.mayo-card__qty-btn:hover {
background: #1d2a1e;
transform: translateY(-1px);
}
.mayo-card__qty-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
transform: none;
}
.mayo-card__qty-value {
font-family: var(--font-serif);
font-size: 1.7rem;
font-weight: 700;
min-width: 2.4rem;
text-align: center;
color: #2A1810;
}
/* Footer — counter + barra de progreso + total + CTA */
.mayorista-modal__foot {
border-top: 1px solid rgba(203, 160, 88, 0.28);
padding: 1.8rem 3rem 2rem;
display: grid;
grid-template-columns: 1.4fr 1fr auto;
gap: 2.4rem;
align-items: center;
background: rgba(0, 0, 0, 0.18);
}
.mayorista-modal__counter {
min-width: 0;
}
.mayorista-modal__counter-bar {
position: relative;
height: 6px;
background: rgba(0, 0, 0, 0.4);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.8rem;
}
.mayorista-modal__counter-fill {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--c-brand) 0%, #d8b070 100%);
border-radius: 3px;
transition: width 0.45s var(--ease-out), background-color 0.3s;
}
.mayorista-modal__counter-fill.is-met {
background: linear-gradient(90deg, #25D366 0%, #1ebe5b 100%);
}
.mayorista-modal__counter-text {
font-family: var(--font-sans);
font-size: 1.35rem;
margin: 0;
letter-spacing: 0.04em;
color: var(--c-text-alt);
}
.mayorista-modal__counter-text strong {
font-family: var(--font-serif);
font-size: 1.8rem;
font-weight: 700;
color: var(--c-brand);
margin-right: 0.4rem;
}
.mayorista-modal__counter-extra {
display: inline-block;
margin-left: 0.6rem;
font-style: italic;
color: rgba(244, 235, 225, 0.7);
font-size: 1.2rem;
}
.mayorista-modal__total {
text-align: right;
font-family: var(--font-serif);
}
.mayorista-modal__total-label {
display: block;
font-size: 1.15rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244, 235, 225, 0.7);
margin-bottom: 0.3rem;
}
.mayorista-modal__total-amount {
font-size: 2.4rem;
font-weight: 700;
color: var(--c-brand);
}
.mayorista-modal__confirm {
background: #25D366;
color: #0A0807;
border: none;
padding: 1.6rem 2.4rem;
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.3rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;
transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
min-width: 24rem;
}
.mayorista-modal__confirm:not(:disabled):hover {
background: #1ebe5b;
transform: translateY(-2px);
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
}
.mayorista-modal__confirm:disabled {
background: rgba(244, 235, 225, 0.18);
color: rgba(244, 235, 225, 0.6);
cursor: not-allowed;
box-shadow: none;
}
/* Responsive — el footer pasa a layout vertical en mobile */
@media (max-width: 800px) {
.mayorista-modal__head { padding: 1.8rem 1.8rem 1.4rem; }
.mayorista-modal__body { padding: 1.6rem; grid-template-columns: repeat(2, 1fr); }
.mayorista-modal__foot {
grid-template-columns: 1fr;
gap: 1.4rem;
padding: 1.6rem 1.8rem 1.8rem;
text-align: center;
}
.mayorista-modal__total { text-align: center; }
.mayorista-modal__confirm { width: 100%; min-width: 0; }
}
@media (max-width: 420px) {
.mayorista-modal__body { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────────────────────────────────
Marcar el link activo en navbar
───────────────────────────────────────────────────────────────────── */
.header__nav a.is-current {
color: var(--c-brand);
}
.header.is-scrolled .header__nav a.is-current,
.header.is-scrolled.is-dark-bg .header__nav a.is-current,
.header.is-scrolled.is-leather-bg .header__nav a.is-current {
color: var(--c-brand) !important;
}
/* ─────────────────────────────────────────────────────────────────────
Hero media para tienda
───────────────────────────────────────────────────────────────────── */
.hero__media--tienda {
background-image:
linear-gradient(180deg, rgba(10, 8, 7, 0.55) 0%, rgba(10, 8, 7, 0.7) 100%),
url("../img/momento2.jpg");
background-size: cover;
background-position: center;
}
/* Responsive */
@media (max-width: 800px) {
/* En tablet/mobile las cards usan más ancho disponible */
.seccion-prod__grid > .prod {
flex: 1 1 260px;
}
.cart {
width: 100vw;
}
.cart-notif {
right: 1.5rem;
left: 1.5rem;
width: auto;
top: 9rem;
}
.floating-island {
bottom: 1.5rem;
padding: 1rem 1.4rem;
gap: 0.4rem;
overflow-x: auto;
max-width: calc(100vw - 3rem);
}
.floating-island__link {
font-size: 1.05rem;
padding: 0.5rem 0.8rem;
}
.cta-row {
flex-direction: column;
align-items: center;
}
}
/* ════════════════════════════════════════════════════════════════════════
TOOLBAR — buscador + filter pills antes del catálogo
════════════════════════════════════════════════════════════════════════
Fondo cream parchment. Layout en 2 filas en mobile, 1 fila en desktop.
Buscador a la izquierda (input con ícono + clear), pills a la derecha. */
.tienda-toolbar {
position: sticky;
/* top base 0 (arriba del todo). El JS (initToolbarOffset en tienda-cart.js)
ajusta este top en vivo para que sea igual al borde inferior del navbar:
cuando el navbar está oculto → 0 (arriba); cuando aparece al hacer scroll
up → lo empuja justo hasta donde termina el navbar, así se ven los dos. */
top: 0;
z-index: 60;
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 250, 235, 0.5) 0%, transparent 70%),
#EFE5D5;
border-top: 1px solid rgba(107, 68, 35, 0.15);
border-bottom: 1px solid rgba(107, 68, 35, 0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 1.4rem var(--gutter);
}
.tienda-toolbar__inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center; /* Centra search + pills como grupo */
gap: clamp(1.2rem, 2vw, 2.8rem);
flex-wrap: wrap;
}
/* Buscador con ícono lupa adentro y botón clear opcional */
.tienda-search {
position: relative;
flex: 0 0 auto;
width: min(360px, 100%);
display: flex;
align-items: center;
}
.tienda-search__icon {
position: absolute;
left: 1.2rem;
color: rgba(42, 24, 16, 0.5);
pointer-events: none;
}
.tienda-search__input {
width: 100%;
padding: 1rem 3.4rem 1rem 3.6rem;
background: rgba(255, 252, 247, 0.7);
border: 1px solid rgba(107, 68, 35, 0.22);
border-radius: 999px;
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-size: 1.5rem;
font-style: italic;
color: var(--c-text);
letter-spacing: 0.02em;
transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.tienda-search__input::placeholder { color: rgba(42, 24, 16, 0.45); }
.tienda-search__input:focus {
outline: none;
border-color: var(--c-brand);
background: #fff;
}
.tienda-search__clear {
position: absolute;
right: 0.8rem;
background: rgba(107, 68, 35, 0.15);
color: rgba(42, 24, 16, 0.65);
border: none;
cursor: pointer;
width: 2.4rem; height: 2.4rem;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.tienda-search__clear:hover {
background: rgba(107, 68, 35, 0.28);
color: var(--c-text);
}
/* Filter pills — una por categoría. Activa = dorado sólido. */
.tienda-filters {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
/* No grow — toma sólo el ancho que necesita y respeta el centrado */
flex: 0 0 auto;
justify-content: center;
}
.tienda-filter {
padding: 0.7rem 1.4rem;
background: transparent;
border: 1px solid rgba(107, 68, 35, 0.28);
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(42, 24, 16, 0.7);
cursor: pointer;
transition:
background-color 0.25s var(--ease-out),
color 0.25s var(--ease-out),
border-color 0.25s var(--ease-out);
}
.tienda-filter:hover {
background: rgba(203, 160, 88, 0.15);
border-color: var(--c-brand);
color: var(--c-text);
}
.tienda-filter.is-active {
background: var(--c-brand);
border-color: var(--c-brand);
color: #2A1810;
}
/* Empty state — no hay resultados de búsqueda */
.tienda-empty {
max-width: 600px;
margin: 6rem auto;
padding: 0 var(--gutter);
text-align: center;
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: 1.6rem;
line-height: 1.5;
color: rgba(42, 24, 16, 0.7);
}
.tienda-empty small {
display: inline-block;
margin-top: 0.8rem;
font-size: 1.3rem;
}
.tienda-empty a {
color: var(--c-brand);
font-weight: 600;
text-decoration: none;
}
.tienda-empty a:hover { color: #b88d3f; }
@media (max-width: 720px) {
.tienda-toolbar { padding: 1rem 1.2rem; position: relative; }
.tienda-toolbar__inner { flex-direction: column; align-items: stretch; gap: 1rem; }
.tienda-search { width: 100%; }
.tienda-filters {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.4rem;
margin: 0 -1.2rem;
padding-left: 1.2rem;
padding-right: 1.2rem;
}
.tienda-filter { flex-shrink: 0; font-size: 1rem; padding: 0.6rem 1.1rem; }
}
/* ════════════════════════════════════════════════════════════════════════
BANNER ENVÍOS — stripe fina entre hero y catálogo
════════════════════════════════════════════════════════════════════════
Fondo dorado oscuro tipo "etiqueta artesanal", texto cream. Sutil
pero presente. Comunica el beneficio sin gritar. */
.ship-banner {
background:
radial-gradient(ellipse at center, rgba(255, 230, 200, 0.06), transparent 70%),
linear-gradient(180deg, #6B4423 0%, #5b3b1e 100%);
color: #f4ebd9;
border-top: 1px solid rgba(203, 160, 88, 0.35);
border-bottom: 1px solid rgba(203, 160, 88, 0.35);
padding: 1rem var(--gutter);
}
.ship-banner__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: clamp(1.3rem, 1.2vw, 1.55rem);
letter-spacing: 0.04em;
}
.ship-banner__inner strong {
font-style: normal;
font-family: var(--font-sans);
font-weight: 700;
color: var(--c-brand);
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.92em;
}
.ship-banner__icon { color: var(--c-brand); flex-shrink: 0; }
/* ════════════════════════════════════════════════════════════════════════
PERSONALIZADOS — sección "tu mate con tu identidad"
════════════════════════════════════════════════════════════════════════
Light bg con noise (mismo que .seccion-prod[data-bg=light]). Layout
centrado: eyebrow + título Cormorant grande con acento verde + lead
+ lista de 3 features con check + CTA WhatsApp. */
.personalizados {
position: relative;
padding: clamp(5rem, 8vw, 11rem) var(--gutter);
background-color: #EFE5D5;
color: var(--c-text);
overflow: hidden;
}
.personalizados::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
opacity: 0.25;
mix-blend-mode: multiply;
}
.personalizados__inner {
position: relative;
z-index: 1;
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.personalizados__eyebrow {
display: inline-block;
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: 1.35rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-brand);
margin-bottom: 1.6rem;
}
.personalizados__title {
font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
font-size: clamp(3rem, 5vw, 6.4rem);
font-weight: 500;
line-height: 1.05;
color: #2B3A2C;
margin: 0 0 2rem;
}
.personalizados__title em {
font-style: italic;
font-weight: 500;
}
.personalizados__lead {
font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
font-size: clamp(1.55rem, 1.4vw, 1.95rem);
line-height: 1.55;
color: rgba(42, 24, 16, 0.78);
max-width: 680px;
margin: 0 auto 3rem;
}
.personalizados__features {
list-style: none;
margin: 0 auto 3.4rem;
padding: 0;
max-width: 580px;
display: grid;
gap: 1.2rem;
text-align: left;
}
.personalizados__features li {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 1rem 0;
border-bottom: 1px dashed rgba(107, 68, 35, 0.25);
font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
font-size: clamp(1.45rem, 1.3vw, 1.75rem);
color: rgba(42, 24, 16, 0.85);
font-style: italic;
}
.personalizados__features li:last-child { border-bottom: none; }
.personalizados__features svg {
flex-shrink: 0;
color: var(--c-brand);
}
/* ════════════════════════════════════════════════════════════════════════
FAQ — accordion nativo con /
════════════════════════════════════════════════════════════════════════
Cream parchment bg con cards de pregunta tipo "etiqueta artesanal".
Cada pregunta es un que abre con la respuesta debajo.
Sin JS — interactividad nativa del navegador. */
.faq {
background-color: var(--c-bg);
color: var(--c-text);
padding: clamp(5rem, 8vw, 12rem) var(--gutter);
}
.faq__inner {
max-width: 880px;
margin: 0 auto;
}
.faq__head {
text-align: center;
margin-bottom: 4rem;
}
.faq__eyebrow {
display: inline-block;
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: 1.35rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-brand);
margin-bottom: 1.4rem;
}
.faq__title {
font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
font-size: clamp(2.8rem, 4.6vw, 5.6rem);
font-weight: 500;
line-height: 1.05;
color: #2B3A2C;
margin: 0;
}
.faq__list {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.faq__item {
background: #FAF3E8;
border: 1px solid rgba(107, 68, 35, 0.18);
border-radius: 6px;
padding: 0;
box-shadow: 0 2px 6px rgba(46, 24, 12, 0.04);
overflow: hidden;
transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.faq__item[open] {
box-shadow: 0 6px 18px rgba(46, 24, 12, 0.10);
border-color: rgba(203, 160, 88, 0.4);
}
.faq__item summary {
/* Reset del marker default del */
list-style: none;
cursor: pointer;
padding: 1.6rem 2rem;
font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
font-size: clamp(1.55rem, 1.4vw, 1.95rem);
font-weight: 500;
color: #2B3A2C;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.2rem;
transition: color 0.3s var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "";
flex-shrink: 0;
width: 18px; height: 18px;
border-right: 2px solid var(--c-brand);
border-bottom: 2px solid var(--c-brand);
transform: rotate(45deg);
transition: transform 0.3s var(--ease-out);
margin-top: -4px;
}
.faq__item[open] summary::after {
transform: rotate(-135deg);
margin-top: 4px;
}
.faq__item summary:hover { color: var(--c-brand); }
.faq__body {
padding: 0 2rem 1.8rem;
font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
font-size: clamp(1.4rem, 1.25vw, 1.7rem);
line-height: 1.55;
color: rgba(42, 24, 16, 0.82);
font-style: italic;
}
.faq__body p { margin: 0; }
.faq__body p strong {
font-style: normal;
font-family: var(--font-sans);
font-weight: 700;
color: var(--c-green);
letter-spacing: 0.02em;
}
.faq__more {
margin-top: 3rem;
text-align: center;
font-family: "EB Garamond", "Times New Roman", Georgia, serif;
font-style: italic;
font-size: 1.5rem;
color: rgba(42, 24, 16, 0.7);
}
.faq__more a {
color: var(--c-brand);
font-weight: 600;
text-decoration: none;
letter-spacing: 0.02em;
transition: color 0.3s var(--ease-out);
}
.faq__more a:hover { color: #b88d3f; }
@media (max-width: 640px) {
.ship-banner { padding: 0.8rem 1.2rem; }
.ship-banner__inner { font-size: 1.2rem; gap: 0.6rem; }
.personalizados { padding: 4rem 1.4rem !important; }
.personalizados__features li { font-size: 1.3rem; }
.faq { padding: 4rem 1.4rem !important; }
.faq__head { margin-bottom: 2.6rem; }
.faq__item summary { padding: 1.2rem 1.4rem; font-size: 1.4rem; }
.faq__item summary::after { width: 14px; height: 14px; }
.faq__body { padding: 0 1.4rem 1.4rem; font-size: 1.3rem; }
}
/* ════════════════════════════════════════════════════════════════════════
TIENDA MOBILE — overrides para teléfonos (≤640px)
════════════════════════════════════════════════════════════════════════
El móvil es el canal principal. Acá optimizamos:
· Cards de categorías polaroid: stack vertical limpio, sin rotación
· Grid de productos: 2 columnas (no 1) para mostrar más en menos scroll
· CTAs grandes con tap-target generoso
· Mayorista picker full-screen con grid 2 col
· Carrito drawer full-width con padding ajustado
· Notificación full-width
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* ─── HERO DE LA TIENDA ──────────────────────────────────────────────
Hereda del block global del jicrea-pro.css mobile, pero la foto
bg necesita un overlay un poco más oscuro acá para que el "LA TIENDA"
se lea sobre los matices brown de la foto. */
.hero__media--tienda {
background-image:
linear-gradient(180deg, rgba(10, 8, 7, 0.65) 0%, rgba(10, 8, 7, 0.82) 100%),
url("../img/momento2.jpg");
}
/* ─── CARDS DE CATEGORÍAS — polaroid grid ────────────────────────────
De 4 columnas en desktop a stack vertical en mobile. Sin rotación,
sólo translateY hover-like permanente. */
.cards--tienda {
padding-top: 3rem !important;
padding-bottom: 5rem !important;
}
/* ═══════════════════════════════════════════════════════════════
TIENDA CATEGORÍAS — CAROUSEL STACK 3D (mobile only)
═══════════════════════════════════════════════════════════════
Las 4 cards se vuelven un mazo de cartas apiladas:
· Active (front): full opacity, scale 1, sin offset
· #1 behind: scale 0.92, offset -22px arriba, opacity 0.7
· #2 behind: scale 0.84, offset -44px arriba, opacity 0.45
· #3 behind: scale 0.76, offset -66px arriba, opacity 0.20
JS rota la clase .is-active cada 2s (tienda-cart.js). El usuario
ve siempre 3-4 cards "asomando" detrás de la del frente — sabe
que hay más sin tener que scrollear. */
/* ═══════════════════════════════════════════════════════════════
CAROUSEL FAN — estilo cartas de naipe españolas
═══════════════════════════════════════════════════════════════
La del medio (is-active) al frente, las 2 vecinas asomando a los
costados rotadas, la 4ta (cuando hay 4) detrás del active media
oculta. El user reemplazó el stack vertical (poco visible) por
este fan horizontal que muestra "hay más cards" desde el primer
vistazo. */
.cards__inner--tienda {
display: block !important;
grid-template-columns: none !important;
position: relative !important; /* override del reset .cards--tienda .cards__inner que pone static */
height: clamp(420px, 92vw, 540px) !important;
margin: 1rem auto 3rem !important;
max-width: 280px !important;
width: 100% !important;
padding: 0 !important;
overflow: visible !important;
aspect-ratio: auto !important;
}
.cards__inner--tienda .tienda-card {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
border-radius: 10px !important;
overflow: hidden;
background: #FAF3E8;
border: 1px solid rgba(107, 68, 35, 0.18) !important;
box-shadow:
0 1px 0 rgba(255, 250, 235, 0.4) inset,
0 20px 40px -12px rgba(46, 24, 12, 0.40),
0 8px 16px -4px rgba(46, 24, 12, 0.20) !important;
transform-origin: center center !important;
/* IMPORTANTE: NO usamos transition CSS aquí — el browser entra en
un estado raro donde no aplica los estilos inline aunque tengan
!important (verificado en Chrome). El JS setea inline styles
directamente y queremos que se apliquen instantáneamente.
La animación entre posiciones la hacemos vía la clase .is-tween
que el JS añade después de la primera aplicación. */
}
/* La clase .is-tween se agrega después del primer paint para que
las rotaciones subsiguientes sí animen suavemente. */
.cards__inner--tienda .tienda-card.is-tween {
transition:
transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.tienda-card__photo {
aspect-ratio: 1 / 1 !important;
transform: none !important;
border-radius: 9px 9px 0 0;
background-size: cover;
background-position: center;
}
/* Diamante dorado más bonito + num en uppercase con letter-spacing */
.tienda-card__num {
font-size: 1.1rem !important;
letter-spacing: 0.32em !important;
margin: 1.4rem 1.8rem 0 !important;
color: var(--c-brand, #CBA058) !important;
font-style: italic;
}
.tienda-card__name {
font-size: 2.6rem !important;
letter-spacing: 1px !important;
margin: 0.4rem 1.8rem 0.4rem !important;
line-height: 1 !important;
text-transform: uppercase;
}
/* Hairline dorado debajo del nombre — touch premium */
.tienda-card__name::after {
margin-top: 0.8rem !important;
width: 36px !important;
height: 1.5px !important;
}
.tienda-card__desc {
font-size: 1.35rem !important;
margin: 1.2rem 1.8rem 1.6rem !important;
line-height: 1.5;
font-style: italic;
}
/* Dots indicator (lo agregamos via JS) */
.cards-carousel-dots {
display: flex;
justify-content: center;
gap: 0.8rem;
margin: 1rem 0 0;
}
.cards-carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(107, 68, 35, 0.25);
cursor: pointer;
transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
border: none;
padding: 0;
}
.cards-carousel-dot.is-active {
background: var(--c-brand, #CBA058);
transform: scale(1.3);
}
/* ─── MANIFESTO INTRO DE LA TIENDA ───────────────────────────────── */
.manifesto__title { font-size: 2.4rem !important; line-height: 1.1; }
.manifesto__text { font-size: 1.35rem !important; }
/* ─── SECCIÓN DE PRODUCTOS POR CATEGORÍA ─────────────────────────────
Mobile: STACK CAROUSEL — cada sección (Mates, Posa Mates, etc) se
vuelve un carrusel apilado. 1 card al frente, las otras detrás con
scale + offset + opacity decreciente. Auto-rotate cada 4s. */
.seccion-prod {
padding: 5rem 1.2rem !important;
}
.seccion-prod__head { margin-bottom: 3.2rem !important; padding-top: 2rem !important; }
.seccion-prod__head .manifesto__title { font-size: 2.6rem !important; }
/* ─── PRODUCTOS — CAROUSEL CLÁSICO 2-UP ─────────────────────────────
Scroll horizontal con scroll-snap. 2 productos visibles lado a
lado. JS auto-advance cada 4s. Swipe nativo del browser.
IMPORTANTE: el contenedor padre (.seccion-prod) tiene overflow:
hidden para que el scroll horizontal de las cards no rompa el
layout del page (sino el body scroll horizontaliza). */
.seccion-prod {
overflow-x: hidden !important;
}
.seccion-prod__grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
scrollbar-width: none;
gap: 1.2rem !important;
/* IMPORTANTE: justify-content: flex-start (no center) — el grid
hereda el center del desktop que en mobile con scroll horizontal
empujaba la card 0 a left:-79px (fuera de pantalla). El user
reportaba "la card 0 nunca se ve" — ESTE era el bug. */
justify-content: flex-start !important;
align-items: stretch !important;
padding: 0.6rem 0 1rem !important;
margin: 0 !important;
max-width: 100% !important;
height: auto !important;
position: static !important;
perspective: none !important;
}
.seccion-prod__grid::-webkit-scrollbar { display: none; }
.seccion-prod__grid > .prod {
position: static !important;
flex: 0 0 calc(50% - 0.6rem) !important;
max-width: calc(50% - 0.6rem) !important;
min-width: 0 !important;
width: auto !important;
margin: 0 !important;
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
z-index: auto !important;
scroll-snap-align: start; /* start = card alineada al borde izq → exactamente 2 visibles, sin peek de la 3ra */
border-radius: 4px !important;
inset: auto !important;
/* Cards compactas — el contenido define el alto pero todas
igualan via flex stretch del container parent. No fijamos
height para evitar gaps grandes entre desc y price. */
height: auto !important;
display: flex !important;
flex-direction: column !important;
}
/* Container con align-items stretch (default) ya iguala las
alturas. El precio + botón quedan pegados al fondo via
margin-top: auto en .prod__price (que es el último elemento
del .prod__link). */
.seccion-prod__grid > .prod .prod__price {
margin-top: auto !important;
}
.seccion-prod__grid > .prod .prod__btn {
margin-top: 1rem !important;
}
/* Descripción line-clamp 2 — uniforme para no descontrolar la
altura de cada card. min-height para que cards con desc de 1
línea no queden mucho más cortas que las de 2 líneas. */
.seccion-prod__grid > .prod .prod__desc {
min-height: 3rem;
}
/* Cards de producto compactas (2 por fila visible) */
.prod {
min-height: 0 !important;
padding: 0.8rem 0.8rem 0 !important;
}
.prod::before { inset: 5px; }
.prod__name {
font-size: 1.4rem !important;
margin: 0 0.8rem 0.3rem !important;
letter-spacing: 0.5px;
}
.prod__desc {
font-size: 1.15rem !important;
margin: 0.6rem 0.8rem 1rem !important;
-webkit-line-clamp: 2;
}
.prod__price {
font-size: 1.5rem !important;
margin: auto 0.8rem 0;
padding-left: 1.8rem;
}
.prod__price::before { left: 0.2rem; top: 1.3rem; width: 5px; height: 5px; }
.prod__price::after { left: 1.0rem; top: 1.45rem; }
.prod__btn {
margin: 1.2rem 0.6rem 0.6rem !important;
padding: 1.2rem 0.8rem !important;
font-size: 1rem !important;
letter-spacing: 0.12em;
}
.prod__img {
margin-bottom: 1.4rem !important;
aspect-ratio: 1 / 1 !important;
}
/* Dots indicator de carousel productos */
.seccion-prod .cards-carousel-dots {
margin-top: 1.4rem;
}
/* ─── SECCIÓN MAYORISTA / B2B ────────────────────────────────────────
El manifesto banner se compacta. CTAs en columna full-width. */
.manifesto--banner { padding: 5rem 1.4rem !important; }
.manifesto__inner--info { max-width: 100%; }
.manifesto__inner--info .manifesto__title { font-size: 2.6rem !important; line-height: 1.1; }
.manifesto__text--intro { font-size: 1.4rem !important; margin-bottom: 3rem !important; }
.info-grid {
grid-template-columns: 1fr !important;
gap: 1.4rem !important;
margin: 3rem auto !important;
}
/* En mobile cada pilar pasa a ser una CARD real con fondo sutil
verde-leaf (matches el .manifesto--banner[data-bg="leaf"]) y
border-left dorado tipo etiqueta. NO se aplana a fila plana
con border-top. */
.info-grid__item {
padding: 2rem 1.6rem !important;
border-top: 1px solid rgba(203, 160, 88, 0.3) !important;
background: rgba(255, 250, 235, 0.06);
border: 1px solid rgba(203, 160, 88, 0.2);
border-radius: 6px;
border-left: 3px solid var(--c-brand);
}
.info-grid__title { font-size: 1.6rem !important; }
.info-grid__text { font-size: 1.4rem !important; }
.info-clientes { margin: 3rem auto 3.6rem !important; padding-top: 2.4rem !important; }
.info-clientes__label {
font-size: 1.2rem !important;
letter-spacing: 0.24em;
margin-bottom: 1.2rem !important;
}
/* "Trabajamos con" — pasa de lista vertical a párrafo fluido en
Garamond italic con separador "·" entre items. Se siente texto
editorial, no lista. */
.info-clientes__list {
flex-direction: row !important;
flex-wrap: wrap;
justify-content: center;
gap: 0 !important;
font-family: "EB Garamond", "Times New Roman", Georgia, serif !important;
font-style: italic;
font-weight: 400;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 1.55rem !important;
line-height: 1.7;
padding: 0 0.8rem;
color: rgba(244, 235, 225, 0.88);
}
.info-clientes__list li {
display: inline !important;
gap: 0 !important;
padding: 0;
}
.info-clientes__list li:not(:last-child)::after {
content: " · " !important;
display: inline !important;
color: var(--c-brand) !important;
font-size: 1em !important;
opacity: 0.6;
margin: 0 0.3rem;
}
/* ─── CTA-ROW MAYORISTA — 3 botones rediseñados ──────────────────────
Antes: 3 botones de estilos distintos (gold/green/outline) con
widths inconsistentes. Ahora jerarquía clara:
1. "Armar compra" → gold sólido (acción primaria, gris claro)
2. "Pedir cotización" → verde WhatsApp (chat directo)
3. "Asesoramiento" → outline cream (acción secundaria/info)
Todos same width, same height, mismo radius, gap consistente. */
.cta-row {
flex-direction: column !important;
gap: 1.1rem !important;
margin-top: 3.2rem !important;
align-items: stretch;
}
.cta-grande {
width: 100% !important;
margin-top: 0 !important;
justify-content: center !important;
padding: 1.7rem 1.6rem !important;
font-size: 1.15rem !important;
letter-spacing: 0.2em !important;
border-radius: 4px !important;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22) !important;
min-height: 5.4rem;
gap: 1rem !important;
}
.cta-grande svg {
width: 18px !important;
height: 18px !important;
flex-shrink: 0;
}
/* Primary gold — alta jerarquía visual */
.cta-grande--gold {
background: var(--c-brand) !important;
color: #2A1810 !important;
}
/* WhatsApp green — botón secundario de contacto */
.cta-grande:not(.cta-grande--gold):not(.cta-grande--outline) {
background: #25D366 !important;
color: #0A0807 !important;
}
/* Outline — terciario, sin sombra (se ve diferente a los otros 2 con relleno) */
.cta-grande--outline {
background: transparent !important;
color: var(--c-text-alt) !important;
border: 1.5px solid rgba(244, 235, 225, 0.55) !important;
box-shadow: none !important;
}
/* ─── ISLA FLOTANTE (anchor scroll dentro de la tienda) ─────────────
Ya tenía overrides en el @800px. Acá refinamos para 640px y abajo
con tap-targets más grandes. */
.floating-island {
bottom: 1.2rem !important;
padding: 0.8rem 1rem !important;
gap: 0.3rem !important;
max-width: calc(100vw - 2.4rem) !important;
border-radius: 4rem !important;
}
.floating-island__link {
font-size: 1rem !important;
padding: 0.5rem 0.75rem !important;
letter-spacing: 0.08em !important;
}
.floating-island__sep { display: none; } /* No hay espacio para el separador */
/* ─── CART DRAWER ────────────────────────────────────────────────────
Full-width ya está. Refinamos el padding interno + thumbs + qty UI
para que sea cómodo de manejar con el dedo. */
.cart { width: 100vw !important; }
.cart__head { padding: 1.8rem 1.6rem 1.4rem !important; }
.cart__title { font-size: 1.8rem !important; }
.cart__body { padding: 1.2rem 1.6rem !important; }
.cart-item { gap: 1rem !important; padding: 1.2rem 0 !important; }
.cart-item__thumb { width: 6rem; height: 6rem; }
.cart-item__name { font-size: 1.35rem !important; }
.cart-item__price { font-size: 1.2rem !important; }
.cart-item__qty-btn { width: 3rem; height: 3rem; font-size: 1.8rem; }
.cart-item__qty-value { min-width: 2rem; font-size: 1.4rem; }
.cart__foot { padding: 1.4rem 1.6rem 1.8rem !important; }
.cart__total-amount { font-size: 2rem !important; }
.cart__cta {
padding: 1.6rem !important;
font-size: 1.25rem !important;
letter-spacing: 0.1em !important;
}
/* ─── MODAL DE CANTIDAD ────────────────────────────────────────────── */
.qty-modal__panel { padding: 2.4rem 2rem !important; width: min(420px, 92vw) !important; }
.qty-modal__name { font-size: 1.6rem !important; }
.qty-modal__price { font-size: 1.3rem !important; }
.qty-modal__qty { gap: 1.6rem !important; padding: 1rem !important; }
.qty-modal__btn { width: 3.6rem; height: 3.6rem; font-size: 1.8rem; }
.qty-modal__value { font-size: 2.2rem; min-width: 3.6rem; }
/* ─── MAYORISTA PICKER ──────────────────────────────────────────────
Modal full-screen en mobile. Grid de 2 columnas. Footer en stack
vertical (counter / total / CTA) para que cada bloque respire. */
.mayorista-modal__panel {
width: 100vw !important;
max-height: 100vh !important;
height: 100vh;
border-radius: 0;
}
.mayorista-modal__head {
padding: 1.6rem 1.4rem 1.2rem !important;
gap: 1rem !important;
}
.mayorista-modal__eyebrow { font-size: 1.1rem !important; letter-spacing: 0.18em; margin-bottom: 0.4rem; }
.mayorista-modal__title { font-size: 2rem !important; line-height: 1.1; margin: 0 0 0.5rem !important; }
.mayorista-modal__sub { font-size: 1.3rem !important; line-height: 1.4; }
.mayorista-modal__close { width: 3.4rem; height: 3.4rem; flex-shrink: 0; }
.mayorista-modal__body {
padding: 1.4rem !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem !important;
}
.mayo-card { padding: 1rem 0.8rem 0.8rem !important; }
.mayo-card__name { font-size: 1.25rem !important; line-height: 1.15; }
.mayo-card__price { font-size: 1.2rem !important; }
.mayo-card__cat { font-size: 0.95rem !important; }
.mayo-card__qty { padding-top: 0.6rem !important; }
.mayo-card__qty-btn { width: 2.8rem; height: 2.8rem; font-size: 1.6rem; }
.mayo-card__qty-value { font-size: 1.5rem; min-width: 2rem; }
/* Footer del picker en stack vertical compacto */
.mayorista-modal__foot {
grid-template-columns: 1fr !important;
gap: 1rem !important;
padding: 1.2rem 1.4rem 1.4rem !important;
}
.mayorista-modal__counter-text { font-size: 1.2rem !important; }
.mayorista-modal__counter-text strong { font-size: 1.6rem; }
.mayorista-modal__total-label { font-size: 1rem !important; }
.mayorista-modal__total-amount { font-size: 1.9rem !important; }
.mayorista-modal__total { text-align: left; display: flex; align-items: baseline; justify-content: space-between; }
.mayorista-modal__confirm {
width: 100%;
min-width: 0;
padding: 1.4rem !important;
font-size: 1.2rem !important;
}
/* ─── NOTIFICACIÓN (top right) ─────────────────────────────────────── */
.cart-notif { top: 8rem !important; padding: 1.4rem 1.6rem !important; }
.cart-notif__title { font-size: 1.3rem !important; }
.cart-notif__detail { font-size: 1.2rem !important; }
}
/* ─── MAYORISTA en pantallas extra chicas (≤420px) ──────────────────── */
@media (max-width: 420px) {
.mayorista-modal__body { grid-template-columns: 1fr !important; }
.mayorista-modal__title { font-size: 1.8rem !important; }
}
/* ── Carrito: campos de contacto (nombre + celular obligatorio) ───────────── */
.cart-contact { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0 .8rem; }
.cart-input {
width: 100%; padding: .7rem .85rem; border: 1px solid rgba(0,0,0,.18);
border-radius: 10px; font-size: .95rem; font-family: inherit; background: #fff; color: #1a1a1a;
}
.cart-input:focus { outline: none; border-color: #6b8e5a; box-shadow: 0 0 0 3px rgba(107,142,90,.18); }
.cart-input--err { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.15); }
/* Banner de envíos retirado: el envío siempre lo paga el cliente al retirar. */
.ship-banner { display: none !important; }