/* La tienda pública de cada negocio de Ezra Ventas. Veinte diseños sobre el mismo HTML: cada uno es una clase en que cambia tokens (letras, paleta, proporción de las fotos, cómo van los títulos, el menú y los botones) y la disposición de algunos componentes. El color lo elige el negocio (--marca); --sobre-marca es el texto que va encima. La base sigue el lenguaje de Dawn, el tema de referencia de Shopify (github.com/Shopify/dawn, licencia MIT, Copyright (c) 2021-present Shopify Inc.): fotos protagonistas y a sangre, precio en texto plano, etiquetas sobrias en mayúscula chica con aire, botones rectos, esquinas rectas, sin sombras y mucho blanco. No se copió su código: se tomaron sus decisiones (proporciones, tamaños, espaciados). Los diseños se distinguen por tipografía, paleta y disposición, no por adornos. Letras guardadas en el sitio (la CSP es 'self'), todas con licencia OFL; el navegador baja sólo las del diseño elegido. */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assistant.woff2) format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(plus-jakarta-sans.woff2) format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(cormorant-garamond.woff2) format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(manrope.woff2) format('woff2'); } @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(bodoni-moda.woff2) format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(oswald.woff2) format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fraunces.woff2) format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(jost.woff2) format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(playfair-display.woff2) format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url(playfair-display-italica.woff2) format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(archivo.woff2) format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(dm-sans.woff2) format('woff2'); } /* Las de los nueve diseños del 27-sep (OFL, subconjunto latino). */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(barlow-condensed.woff2) format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300 400; font-display: swap; src: url(barlow.woff2) format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(barlow-medio.woff2) format('woff2'); } @font-face { font-family: 'Italiana'; font-style: normal; font-weight: 400; font-display: swap; src: url(italiana.woff2) format('woff2'); } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(mulish.woff2) format('woff2'); } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(schibsted-grotesk.woff2) format('woff2'); } @font-face { font-family: 'Tenor Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(tenor-sans.woff2) format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(newsreader.woff2) format('woff2'); } @font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(young-serif.woff2) format('woff2'); } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url(courier-prime.woff2) format('woff2'); } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url(courier-prime-negrita.woff2) format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(outfit.woff2) format('woff2'); } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(bricolage-grotesque.woff2) format('woff2'); } @font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(marcellus.woff2) format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(instrument-sans.woff2) format('woff2'); } /* La marca va en :root (la pone la tienda en ); el resto, en : los tokens que salen de otros (--pie-tinta: var(--tinta)) se calculan donde se declaran, y cada diseño cambia los de base en body.. */ :root { --marca: #121212; --sobre-marca: #fff; } body { --f: 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-titulo: var(--f); --peso-titulo: 400; --espaciado-titulo: .01em; --mayus-titulo: none; --alto-titulo: 1.15; --estilo-titulo: normal; --tam-hero: clamp(34px, 5vw, 60px); --tam-seccion: clamp(22px, 2.3vw, 30px); --f-marca: var(--f-titulo); --peso-marca: 600; --esp-marca: .02em; --mayus-marca: none; --tam-marca: 21px; --tam-nav: 14.5px; --esp-nav: .03em; --mayus-nav: none; --peso-nav: 400; --etiqueta: 11px; --esp-etiqueta: .13em; --fondo: #fff; --fondo-2: #f3f3f3; --tarjeta: #fff; --tinta: #121212; --gris: #6b6b6b; --linea: #e6e6e6; --cab-fondo: var(--fondo); --cab-tinta: var(--tinta); --anuncio-fondo: var(--tinta); --anuncio-tinta: var(--fondo); --banner-fondo: var(--fondo-2); --banner-tinta: var(--tinta); --pie-fondo: var(--fondo); --pie-tinta: var(--tinta); --pie-gris: var(--gris); --pie-linea: var(--linea); --btn-fondo: var(--tinta); --btn-tinta: var(--fondo); --mayus-btn: none; --esp-btn: .06em; --tam-btn: 15px; --peso-btn: 500; --etq-fondo: var(--tinta); --etq-tinta: var(--fondo); --precio: var(--tinta); --peso-precio: 400; --leyenda: var(--gris); --radio: 0; --radio-foto: 0; --radio-btn: 0; --proporcion: 4 / 5; --ancho: 1320px; --alto-cab: 72px; color-scheme: light; /* Copias que se resuelven acá (con los valores del diseño): una franja de color da vuelta --marca y --fondo-2 adentro y necesita los de afuera. */ --marca-base: var(--marca); --sobre-base: var(--sobre-marca); --fondo-alt: var(--fondo-2); --tinta-base: var(--tinta); --fondo-base: var(--fondo); } * { box-sizing: border-box; } html { scroll-padding-top: 96px; } html, body { margin: 0; } body { font-family: var(--f); background: var(--fondo); color: var(--tinta); font-size: 15.5px; line-height: 1.6; letter-spacing: .015em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.cargando #tienda { opacity: 0; } button, input, select { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; } img { display: block; max-width: 100%; } svg { width: 20px; height: 20px; flex: none; } a { color: inherit; } .envol { max-width: var(--ancho); margin: 0 auto; padding: 0 40px; } @media (max-width: 990px) { .envol { padding: 0 24px; } } @media (max-width: 720px) { .envol { padding: 0 16px; } } h1, h2, h3 { text-wrap: balance; } .cuerpo { min-height: 50vh; } /* ── Encabezado ──────────────────────────────────────────────────── */ .cab-caja { position: sticky; top: 0; z-index: 20; } .anuncio { background: var(--anuncio-fondo); color: var(--anuncio-tinta); text-align: center; font-size: 12px; padding: 9px 16px; letter-spacing: .12em; } .cab { background: var(--cab-fondo); color: var(--cab-tinta); border-bottom: 1px solid var(--linea); } .cab-fila { display: flex; align-items: center; gap: 32px; height: var(--alto-cab); } .marca { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; flex: none; } .marca img { width: var(--logo, 44px); height: var(--logo, 44px); border-radius: 50%; object-fit: cover; flex: none; } .marca b { font-family: var(--f-marca); font-size: var(--tam-marca); font-weight: var(--peso-marca); letter-spacing: var(--esp-marca); text-transform: var(--mayus-marca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; line-height: 1.2; } .cab-nav { display: flex; gap: 28px; flex: 1; min-width: 0; overflow: hidden; } .cab-nav a { color: inherit; text-decoration: none; font-weight: var(--peso-nav); font-size: calc(var(--tam-nav) * var(--k-nav, 1)); letter-spacing: var(--esp-nav); text-transform: var(--mayus-nav); white-space: nowrap; padding: 6px 0; opacity: .78; text-underline-offset: 6px; } .cab-nav a:hover { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; } .cab-acc { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; } .ic-btn, .cab-buscar { width: 44px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; color: inherit; padding: 0; } .cab-buscar span { display: none; } .ic-btn:hover svg, .cab-buscar:hover svg, .btn-carrito:hover svg { transform: scale(1.07); } .menu-btn { display: none; } .btn-carrito { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: transparent; color: inherit; height: 44px; min-width: 44px; padding: 0 6px; font-weight: 500; } .btn-carrito svg { width: 22px; height: 22px; } .btn-carrito .txt { display: none; } .btn-carrito .n { position: absolute; top: 5px; right: 1px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--tinta); color: var(--fondo); font-size: 10.5px; font-weight: 600; letter-spacing: 0; display: grid; place-items: center; padding: 0 4px; line-height: 1; } .cab.centro .cab-fila { display: grid; grid-template-columns: 1fr auto 1fr; } .cab.centro .marca { grid-column: 2; justify-content: center; } .cab.centro .menu-btn { grid-column: 1; } .cab.centro .cab-acc { grid-column: 3; justify-self: end; } .cab-nav-centro { display: flex; justify-content: center; padding-bottom: 14px; margin-top: -8px; } .cab-nav-centro .cab-nav { flex: none; } .cab.de-color { background: var(--marca); color: var(--sobre-marca); border-bottom: 0; } .cab.de-color .btn-carrito .n { background: var(--sobre-marca); color: var(--marca); } @media (max-width: 900px) { .cab-nav, .cab-nav-centro { display: none; } .menu-btn { display: grid; margin-left: -12px; } body { --alto-cab: 60px; } .cab-fila { gap: 4px; } .cab:not(.centro) .marca { margin-right: auto; } .marca b { font-size: min(var(--tam-marca), 19px); letter-spacing: min(var(--esp-marca), .08em); max-width: 58vw; } .cab { --logo: 36px; } } /* ── Banner / portada ────────────────────────────────────────────── */ /* De fondo, una imagen, un video o un carrusel (.medio), una capa de color (.capa, con la opacidad que elige el negocio) y el texto encima. El alto lo da .medio; "pantalla" es la pantalla menos el encabezado (--cab-h, lo mide la tienda; 0 si el encabezado va transparente encima). */ .banner { position: relative; overflow: hidden; isolation: isolate; } .banner .medio { position: relative; height: clamp(320px, 44vw, 580px); background: var(--fondo-2); } .banner .medio > img, .banner .medio > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .banner.alto-chico .medio { height: clamp(200px, 26vw, 320px); } .banner.alto-grande .medio { height: clamp(480px, 70vw, 820px); } .banner.alto-pantalla .medio { height: calc(100vh - var(--cab-h, 0px)); height: calc(100svh - var(--cab-h, 0px)); min-height: 440px; } .banner .capa { position: absolute; inset: 0; pointer-events: none; } .capa-negro { background: #000; } .capa-blanco { background: #fff; } .capa-marca { background: var(--marca); } .banner.sin-foto { background: var(--banner-fondo); color: var(--banner-tinta); } .banner.sin-foto .texto { padding: clamp(52px, 7vw, 100px) 0; } .banner.sin-foto.alto-chico .texto { padding: clamp(30px, 4vw, 48px) 0; } .banner.sin-foto.alto-grande .texto { padding: clamp(68px, 10vw, 144px) 0; } .banner.sin-foto.alto-pantalla .texto { min-height: calc(100svh - var(--cab-h, 0px)); display: flex; align-items: center; } .banner.con-foto .texto { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: calc(var(--cab-sobre-h, 0px) + clamp(22px, 4vw, 48px)) 0 clamp(30px, 6vw, 72px); pointer-events: none; } .banner.con-foto .texto > .envol { width: 100%; } .banner.con-foto .texto a, .banner.con-foto .texto button { pointer-events: auto; } .banner.con-foto.pos-arriba .texto { align-items: flex-start; } .banner.con-foto.pos-centro .texto { align-items: center; } .banner.con-foto.letra-clara .texto { color: #fff; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.06) 55%, transparent); } .banner.con-foto.letra-oscura .texto { color: #121212; background: linear-gradient(to top, rgba(255,255,255,.7), transparent 60%); } /* Con capa elegida, la capa manda; queda una sombra suave detrás de la letra. */ .banner.con-foto.con-capa .texto { background: none; } .banner.con-foto.con-capa.letra-clara .banner-txt { text-shadow: 0 1px 16px rgba(0,0,0,.22); } .banner.alin-centro .texto { text-align: center; } .banner.alin-derecha .texto { text-align: right; } .banner.alin-centro p, .banner.alin-centro h1, .banner.alin-centro h2 { margin-left: auto; margin-right: auto; } .banner.alin-derecha p, .banner.alin-derecha h1, .banner.alin-derecha h2 { margin-left: auto; } .banner h1, .banner h2 { font-family: var(--f-titulo); font-weight: var(--peso-titulo); letter-spacing: var(--espaciado-titulo); text-transform: var(--mayus-titulo); font-style: var(--estilo-titulo); font-size: var(--tam-hero); line-height: var(--alto-titulo); margin: 0 0 16px; max-width: 14ch; } .banner p { margin: 0; max-width: 520px; font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.6; opacity: .88; white-space: pre-line; } .banner-btn, .btn-linea { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 28px; border: 1px solid var(--btn-fondo); background: var(--btn-fondo); color: var(--btn-tinta); font-weight: var(--peso-btn); padding: 0 32px; border-radius: var(--radio-btn); font-size: var(--tam-btn); letter-spacing: var(--esp-btn); text-transform: var(--mayus-btn); text-decoration: none; transition: box-shadow .15s ease; } .banner-btn:hover, .btn-grande:not(:disabled):hover { box-shadow: 0 0 0 1px currentColor inset; } .btn-linea { background: transparent; color: inherit; border-color: currentColor; } .btn-linea:hover { box-shadow: 0 0 0 1px currentColor inset; } .banner.con-foto.letra-clara .banner-btn { background: #fff; color: #121212; border-color: #fff; } .banner.con-foto.letra-oscura .banner-btn { background: #121212; color: #fff; border-color: #121212; } /* Sin imagen: el texto y, al lado, fotos de los productos. */ .banner.mosaico .texto { padding: clamp(44px, 6vw, 92px) 0; } .banner.mosaico .envol { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .mos-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .banner.n3 .mos-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mos-foto { display: block; aspect-ratio: var(--proporcion); overflow: hidden; border-radius: var(--radio-foto); background: color-mix(in srgb, var(--banner-tinta) 8%, transparent); } .mos-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; } .mos-foto:hover img { transform: scale(1.03); } .banner.mosaico.alin-centro .envol { grid-template-columns: minmax(0, 1fr); } .banner.mosaico.alin-centro .mos-fotos { max-width: 860px; width: 100%; margin: 8px auto 0; } .banner.mosaico.alin-derecha .envol { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .banner.mosaico.alin-derecha .banner-txt { order: 2; } @media (max-width: 720px) { .banner.mosaico .envol { grid-template-columns: minmax(0, 1fr); gap: 26px; } .banner.mosaico.alin-derecha .envol { grid-template-columns: minmax(0, 1fr); } .banner.mosaico.alin-derecha .banner-txt { order: 0; } .banner.mosaico .texto { padding: 36px 0 40px; } .mos-fotos { gap: 6px; } .banner h1, .banner h2 { max-width: 16ch; } } /* Con márgenes: la portada del ancho del contenido. */ .banner.ancho-contenido { width: calc(100% - 80px); max-width: calc(var(--ancho) - 80px); margin: clamp(16px, 2.4vw, 28px) auto 0; border-radius: var(--radio); } @media (max-width: 990px) { .banner.ancho-contenido { width: calc(100% - 48px); } } @media (max-width: 720px) { .banner.ancho-contenido { width: calc(100% - 32px); } } /* El carrusel: una tira que se desliza (con el dedo o sola). */ .carr { position: absolute; inset: 0; } .carr-pista { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .carr-pista::-webkit-scrollbar { display: none; } .carr-pista img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; user-select: none; -webkit-user-drag: none; } .carr-control { position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(14px, 2.4vw, 26px); z-index: 2; display: flex; align-items: center; gap: 10px; } .carr-puntos { display: flex; gap: 2px; } .carr-puntos button { width: 24px; height: 24px; border: 0; padding: 0; background: none; display: grid; place-items: center; } .carr-puntos button::before { content: ''; width: 16px; height: 2px; background: rgba(255,255,255,.5); transition: background .25s; } .carr-puntos button.on::before { background: #fff; } .medio-pausa { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.18); color: #fff; display: grid; place-items: center; padding: 0; } .medio-pausa svg { width: 14px; height: 14px; } .medio-pausa:hover { background: rgba(0,0,0,.4); } .banner.letra-oscura .carr-puntos button::before { background: rgba(0,0,0,.25); } .banner.letra-oscura .carr-puntos button.on::before { background: #121212; } .banner.letra-oscura .medio-pausa { color: #121212; border-color: rgba(0,0,0,.35); background: rgba(255,255,255,.35); } @media (max-width: 720px) { .banner.con-foto:has(.carr-control) .texto { padding-bottom: 62px; } } /* ── Secciones: títulos, texto, imagen con texto, categorías… ────── */ .productos, .categorias, .beneficios, .cta-wa, .bloque-texto, .img-txt, .pasos, .preguntas, .contacto { padding-top: var(--sep, clamp(48px, 6vw, 88px)); } .sec-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .tit-seccion, .bloque-texto h2, .img-txt h2, .cta-caja h2, .pag-cab h1 { font-family: var(--f-titulo); font-weight: var(--peso-titulo); letter-spacing: var(--espaciado-titulo); text-transform: var(--mayus-titulo); font-style: var(--estilo-titulo); line-height: 1.2; } .tit-seccion { font-size: var(--tam-seccion); margin: 0 0 6px; } .ver-todo { border: 0; background: none; font-size: 14px; color: inherit; padding: 6px 0; white-space: nowrap; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; letter-spacing: .04em; } .bloque-texto h2 { font-size: var(--tam-seccion); margin: 0 0 14px; } .bloque-texto p { margin: 0; line-height: 1.8; color: var(--gris); white-space: pre-line; max-width: 700px; font-size: 16px; } .bloque-texto.alin-centro { text-align: center; } .bloque-texto.alin-centro p { margin: 0 auto; } .img-txt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; } .img-txt.lado-derecha .img-txt-foto { order: 2; } .img-txt-foto { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio-foto); background: var(--fondo-2); } .img-txt-foto img { width: 100%; height: 100%; object-fit: cover; } .img-txt-foto.vacia { display: grid; place-items: center; font-size: 12px; letter-spacing: var(--esp-etiqueta); text-transform: uppercase; color: var(--gris); padding: 20px; text-align: center; } .img-txt h2 { font-size: var(--tam-seccion); margin: 0 0 16px; } .img-txt p { margin: 0; line-height: 1.8; color: var(--gris); white-space: pre-line; font-size: 16px; max-width: 520px; } @media (max-width: 720px) { .img-txt { grid-template-columns: minmax(0, 1fr); } .img-txt.lado-derecha .img-txt-foto { order: 0; } .img-txt-foto { aspect-ratio: 1; } } /* En el celular, una fila que se desliza; en la compu, una grilla pareja. */ .cat-grilla { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px; padding-top: 18px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; } .cat-grilla::-webkit-scrollbar { display: none; } .cat-grilla > * { scroll-snap-align: start; } @media (min-width: 720px) { .cat-grilla { grid-auto-flow: row; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; margin: 0; padding-left: 0; padding-right: 0; overflow: visible; } } .cat-tarj { position: relative; border: 0; padding: 0; background: none; text-align: left; color: inherit; display: flex; flex-direction: column; gap: 12px; } .cat-foto { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radio-foto); overflow: hidden; background: var(--fondo-2); } .cat-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; } .cat-tarj:hover img { transform: scale(1.03); } .cat-foto .sin-foto { display: block; height: 100%; } .cat-tarj b { font-weight: 400; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; } .cat-tarj b::after { content: '→'; font-size: .95em; transition: transform .2s ease; } .cat-tarj:hover b::after { transform: translateX(4px); } .ben-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 22px; } @media (min-width: 720px) { .ben-grilla.n2 { grid-template-columns: repeat(2, 1fr); } .ben-grilla.n3 { grid-template-columns: repeat(3, 1fr); } .ben-grilla.n4 { grid-template-columns: repeat(4, 1fr); } .ben-grilla { gap: 40px; } } .beneficios:not(:has(.tit-seccion)) .ben-grilla { margin-top: 0; } .ben { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .ben-ic { color: var(--tinta); display: block; } .ben-ic svg { width: 26px; height: 26px; stroke-width: 1.4; } .ben b { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 500; } .ben p { margin: 0; color: var(--gris); font-size: 14.5px; line-height: 1.6; } .pasos-lista { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; } @media (min-width: 720px) { .pasos-lista { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; } } .pasos-lista li { border-top: 1px solid var(--tinta); padding-top: 18px; } .paso-n { display: block; font-size: var(--etiqueta); letter-spacing: var(--esp-etiqueta); color: var(--gris); margin-bottom: 14px; } .pasos-lista b { display: block; font-size: 16px; font-weight: 500; margin-bottom: 4px; } .pasos-lista p { margin: 0; color: var(--gris); line-height: 1.6; font-size: 14.5px; } .faq-lista { margin-top: 14px; border-top: 1px solid var(--linea); max-width: 860px; } .preguntas:has(.faq-lista:only-child) .faq-lista { margin-top: 0; } .faq { border-bottom: 1px solid var(--linea); } .faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; cursor: pointer; font-size: 16.5px; } .faq summary::-webkit-details-marker { display: none; } .faq summary svg { transition: transform .25s ease; color: var(--gris); width: 18px; height: 18px; } .faq[open] summary svg { transform: rotate(180deg); } .faq p { margin: -4px 0 22px; color: var(--gris); line-height: 1.75; white-space: pre-line; max-width: 720px; } .contacto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: start; } .contacto-txt p { color: var(--gris); line-height: 1.75; margin: 8px 0 24px; white-space: pre-line; max-width: 520px; font-size: 16px; } .contacto-txt .btn-grande.btn-wa { width: auto; display: inline-flex; padding: 0 28px; text-decoration: none; } .contacto-datos { list-style: none; margin: 0; padding: 28px; display: grid; gap: 22px; background: var(--fondo-2); border-radius: var(--radio); } .contacto-datos li { display: flex; gap: 14px; align-items: flex-start; } .contacto-datos svg { margin-top: 2px; color: var(--gris); } .contacto-datos b { display: block; font-size: var(--etiqueta); letter-spacing: var(--esp-etiqueta); text-transform: uppercase; color: var(--gris); font-weight: 400; margin-bottom: 2px; } .contacto-datos a, .contacto-datos span { display: block; text-decoration: none; overflow-wrap: anywhere; } .contacto-datos .como-llegar { font-size: 14px; margin-top: 6px; text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 720px) { .contacto { grid-template-columns: minmax(0, 1fr); } } .cta-caja { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; background: var(--fondo-2); border-radius: var(--radio); padding: clamp(26px, 4vw, 48px); } .cta-caja h2 { margin: 0 0 6px; font-size: clamp(21px, 2.4vw, 28px); } .cta-caja p { margin: 0; color: var(--gris); } .cta-caja .btn-grande.btn-wa { width: auto; padding: 0 28px; text-decoration: none; flex: none; } /* ── Cabecera de una página (Nosotros, Contacto…) ────────────────── */ .pag-cab { padding-top: clamp(28px, 4vw, 52px); } .pag-cab h1 { font-size: clamp(32px, 4.4vw, 52px); margin: 12px 0 0; line-height: 1.1; } .pag-cab + section { padding-top: clamp(28px, 4vw, 48px); } .migas { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--gris); } .migas a { text-decoration: none; } .migas a:hover { text-decoration: underline; } .migas span:last-child { color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; } /* ── Filtros y grilla ────────────────────────────────────────────── */ .filtros { display: flex; gap: 12px; align-items: center; padding: 16px 0 4px; flex-wrap: wrap; } .filtros-der { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; } .cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 360px; min-width: 0; padding-bottom: 2px; } .cats::-webkit-scrollbar { display: none; } .cat { flex: none; border: 1px solid var(--linea); background: transparent; padding: 7px 14px; border-radius: var(--radio-btn); font-size: 13.5px; } .cat:hover { border-color: var(--tinta); } .cat.on { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); } .buscar, .orden { min-width: 0; border: 1px solid var(--linea); background: var(--tarjeta); border-radius: var(--radio-btn); padding: 9px 14px; font-size: 14px; outline: none; } .buscar { width: 210px; } .buscar:focus, .orden:focus { border-color: var(--tinta); } @media (max-width: 520px) { .filtros-der { width: 100%; margin: 0; } .buscar { flex: 1; width: auto; } } .grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 10px; padding: 22px 0 8px; } @media (min-width: 720px) { .grilla { gap: 44px 16px; } .grilla.col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grilla.col-3, .grilla.col-4, .grilla.col-5, .grilla.col-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .grilla.col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grilla.col-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px 14px; } .grilla.col-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 12px; } } .tarj { color: inherit; text-decoration: none; display: flex; flex-direction: column; min-width: 0; } .tarj .img { position: relative; aspect-ratio: var(--proporcion); background: var(--fondo-2); overflow: hidden; border-radius: var(--radio-foto); } .tarj .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease, opacity .5s ease; } .tarj .img .img2 { opacity: 0; } @media (hover: hover) { .tarj:hover .img img { transform: scale(1.03); } .tarj.dos-fotos:hover .img .img2 { opacity: 1; } .tarj:hover .nom { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } } /* Sin foto: un rectángulo neutro con el nombre en chico, como los temas de verdad. */ .tarj .sin-foto { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; text-align: center; font-size: 12px; letter-spacing: .08em; color: var(--gris); line-height: 1.4; } .tarj .info { padding: 13px 0 0; display: flex; flex-direction: column; gap: 3px; } .cat-min { font-size: var(--etiqueta); letter-spacing: var(--esp-etiqueta); text-transform: uppercase; color: var(--gris); } .tarj .nom { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tarj .precio { font-size: 15px; font-weight: var(--peso-precio); color: var(--precio); letter-spacing: .04em; } .precio small { color: var(--gris); font-size: .86em; letter-spacing: .02em; } .leyenda { font-size: 12.5px; color: var(--leyenda); line-height: 1.4; } .muestras { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .muestras i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 20%, transparent); } .muestras small { font-size: 12px; color: var(--gris); } .colores-n { font-size: 12.5px; color: var(--gris); } .talles-min { display: none; font-size: 12px; color: var(--gris); letter-spacing: .04em; } .etiquetas { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 1; } .etq { background: var(--etq-fondo); color: var(--etq-tinta); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; line-height: 1.3; border-radius: calc(var(--radio-btn) / 2); } .etq-sin { background: var(--fondo); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); } .tarj.agotada .img img { opacity: .5; } .vacio { text-align: center; color: var(--gris); padding: 60px 16px; line-height: 1.6; } .vacio b { display: block; color: var(--tinta); font-size: 18px; font-weight: 500; margin-bottom: 4px; } /* ── Ficha del producto ──────────────────────────────────────────── */ .ficha { padding-top: 24px; } .ficha .migas { margin-bottom: 20px; } .ficha-grilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .ficha-fotos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; } .ficha-grilla.con-minis .ficha-fotos { grid-template-columns: 76px minmax(0, 1fr); } .galeria-caja { position: relative; min-width: 0; } .galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--fondo-2); aspect-ratio: var(--proporcion); border-radius: var(--radio-foto); outline: none; } .galeria::-webkit-scrollbar { display: none; } .galeria img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; } .galeria .sin-foto { width: 100%; display: grid; place-items: center; font-size: 13px; letter-spacing: .08em; color: var(--gris); padding: 20px; text-align: center; } .galeria-caja .etq { position: absolute; top: 14px; left: 14px; } /* Las prendas de muestra de la vista previa: se ven, pero no se abren. */ .etq.etq-ejemplo { background: rgba(255, 255, 255, .94); color: #1a1a1a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); } .tarj.de-ejemplo { cursor: default; } .flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); display: grid; place-items: center; opacity: 0; transition: opacity .2s; } .flecha svg { width: 16px; height: 16px; } .flecha.izq { left: 14px; } .flecha.der { right: 14px; } .galeria-caja:hover .flecha { opacity: 1; } .minis { display: flex; flex-direction: column; gap: 8px; } .minis button { width: 76px; aspect-ratio: var(--proporcion); padding: 0; border: 0; border-radius: var(--radio-foto); overflow: hidden; background: var(--fondo-2); opacity: .5; transition: opacity .2s; box-shadow: none; } .minis button.on { opacity: 1; box-shadow: 0 0 0 1px var(--tinta); } .minis img { width: 100%; height: 100%; object-fit: cover; } .puntos { display: none; gap: 6px; justify-content: center; } .puntos i { width: 16px; height: 2px; background: var(--linea); } .puntos i.on { background: var(--tinta); } .ficha-datos { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--alto-cab) + 28px); } .ficha-datos h1 { font-family: var(--f-titulo); font-weight: var(--peso-titulo); letter-spacing: var(--espaciado-titulo); text-transform: var(--mayus-titulo); font-style: var(--estilo-titulo); margin: 0; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; } .ficha-datos .precio { font-size: 19px; color: var(--precio); letter-spacing: .04em; margin-top: -8px; } .ficha-datos .leyenda { margin-top: -14px; font-size: 13.5px; } .desc { border-top: 1px solid var(--linea); padding-top: 18px; } .desc p { color: var(--gris); line-height: 1.75; margin: 0; white-space: pre-line; } .opc-tit { font-size: var(--etiqueta); color: var(--gris); text-transform: uppercase; letter-spacing: var(--esp-etiqueta); margin-bottom: 10px; } .opc-tit span { color: var(--tinta); text-transform: none; letter-spacing: .02em; font-size: 13.5px; } .opcs { display: flex; flex-wrap: wrap; gap: 8px; } .opc { min-width: 48px; min-height: 42px; border: 1px solid var(--linea); background: var(--tarjeta); padding: 8px 15px; border-radius: var(--radio-btn); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .opc i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); } .opc:hover:not(:disabled) { border-color: var(--tinta); } .opc.on { border-color: var(--tinta); background: var(--tinta); color: var(--fondo); } .opc:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; } .cant { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--radio-btn); overflow: hidden; flex: none; } .cant button { width: 44px; height: 50px; border: 0; background: transparent; font-size: 18px; } .cant span { min-width: 30px; text-align: center; font-weight: 500; } .fila-agregar { display: flex; gap: 10px; align-items: center; } .btn-grande { flex: 1; min-height: 52px; border: 1px solid var(--btn-fondo); border-radius: var(--radio-btn); background: var(--btn-fondo); color: var(--btn-tinta); font-weight: var(--peso-btn); font-size: var(--tam-btn); letter-spacing: var(--esp-btn); text-transform: var(--mayus-btn); transition: box-shadow .15s ease; } .btn-grande:disabled { opacity: .45; cursor: not-allowed; } .btn-wa, .btn-grande.btn-wa { background: #1f8f4e; border-color: #1f8f4e; color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; text-transform: none; letter-spacing: .02em; } .btn-wa svg { width: 21px; height: 21px; } .consulta { display: inline-flex; align-items: center; gap: 8px; color: #1f7a45; text-decoration: underline; text-underline-offset: 4px; font-size: 14.5px; } .prod-info { list-style: none; padding: 18px 0 0; margin: 0; border-top: 1px solid var(--linea); display: grid; gap: 12px; font-size: 14px; color: var(--gris); } .prod-info li { display: flex; gap: 10px; align-items: center; } .prod-info svg { color: var(--tinta); width: 19px; height: 19px; stroke-width: 1.5; } .prod-info a { color: var(--tinta); } .relacionados { padding-top: clamp(56px, 8vw, 110px); } @media (max-width: 860px) { .ficha { padding-top: 12px; padding-left: 0; padding-right: 0; } .ficha .migas { padding: 0 16px; margin-bottom: 12px; } .ficha-grilla, .ficha-grilla.con-minis .ficha-fotos { grid-template-columns: minmax(0, 1fr); } .ficha-datos { position: static; padding: 0 16px; } .galeria { border-radius: 0; } .minis { display: none; } .puntos { display: flex; } .flecha { display: none; } } /* ── Pie ─────────────────────────────────────────────────────────── */ .pie { margin-top: clamp(72px, 9vw, 120px); background: var(--pie-fondo); color: var(--pie-tinta); font-size: 14.5px; border-top: 1px solid var(--pie-linea); } .pie-grilla { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 44px; } @media (max-width: 860px) { .pie-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie-marca { grid-column: 1 / -1; } } .pie-marca b { font-family: var(--f-marca); font-weight: var(--peso-marca); font-size: 21px; letter-spacing: var(--esp-marca); text-transform: var(--mayus-marca); } .pie-marca p { color: var(--pie-gris); line-height: 1.7; margin: 10px 0 16px; max-width: 360px; } .pie h4 { font-size: var(--etiqueta); letter-spacing: var(--esp-etiqueta); text-transform: uppercase; color: var(--pie-gris); margin: 4px 0 16px; font-weight: 400; } .pie-grilla > div > a, .pie-grilla > div > span { display: block; color: inherit; text-decoration: none; margin-bottom: 10px; opacity: .86; overflow-wrap: anywhere; } .pie-grilla > div > a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } .redes { display: flex; gap: 6px; margin-left: -10px; } .redes a { width: 40px; height: 40px; display: grid; place-items: center; color: inherit; } .redes a:hover svg { transform: scale(1.08); } .pie-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--pie-linea); color: var(--pie-gris); font-size: 12.5px; } /* ── Hojas (carrito, menú, buscador) ─────────────────────────────── */ .velo { position: fixed; inset: 0; background: rgba(18,18,18,.42); z-index: 40; display: flex; align-items: flex-end; justify-content: center; animation: aparece .18s; } @keyframes aparece { from { opacity: 0; } } .hoja { background: var(--fondo); color: var(--tinta); width: 100%; max-width: 980px; max-height: 92vh; overflow: auto; position: relative; animation: sube .22s ease-out; } @keyframes sube { from { transform: translateY(30px); } } .hoja.chica { max-width: 520px; } @media (min-width: 720px) { .velo { align-items: center; padding: 24px; } .velo:has(.hoja.derecha) { align-items: stretch; justify-content: flex-end; padding: 0; } .hoja.derecha { max-width: 440px; max-height: none; height: 100%; animation: desde-der .24s ease-out; } } @keyframes desde-der { from { transform: translateX(40px); } } .velo:has(.hoja.lateral) { align-items: stretch; justify-content: flex-start; padding: 0; } .hoja.lateral { max-width: 340px; max-height: none; height: 100%; animation: desliza .22s ease-out; } @keyframes desliza { from { transform: translateX(-30px); } } .velo:has(.hoja.arriba) { align-items: flex-start; padding: 0; } .hoja.arriba { max-width: none; animation: baja .2s ease-out; } @keyframes baja { from { transform: translateY(-20px); } } .cerrar { position: absolute; top: 10px; right: 10px; z-index: 2; width: 42px; height: 42px; border: 0; background: transparent; display: grid; place-items: center; padding: 0; color: var(--tinta); } .cerrar svg { width: 20px; height: 20px; } .menu-lat { display: flex; flex-direction: column; padding: 26px 22px; gap: 0; } .menu-tit { font-family: var(--f-marca); font-weight: var(--peso-marca); font-size: 20px; margin-bottom: 18px; padding-right: 44px; letter-spacing: var(--esp-marca); text-transform: var(--mayus-marca); } .menu-lat a { color: inherit; text-decoration: none; font-size: 17px; padding: 13px 0; border-bottom: 1px solid var(--linea); } .menu-lat a.sub { padding-left: 14px; font-size: 15.5px; color: var(--gris); } .menu-lat .menu-wa { display: flex; align-items: center; gap: 10px; border: 0; margin-top: 18px; color: #1f7a45; } .busq { max-width: 760px; margin: 0 auto; padding: 22px 64px 20px 20px; } .busq-in { width: 100%; border: 0; border-bottom: 1px solid var(--tinta); padding: 10px 2px; font-size: 20px; outline: none; background: none; } .busq-res { display: grid; gap: 4px; margin-top: 12px; max-height: 60vh; overflow: auto; } .busq-it { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 8px; } .busq-it:hover { background: var(--fondo-2); } .busq-it img, .busq-it .mini { width: 52px; height: 64px; object-fit: cover; background: var(--fondo-2); flex: none; } .busq-it b { display: block; font-weight: 500; } .busq-it small { color: var(--gris); } .nota { font-size: 13px; color: var(--gris); line-height: 1.55; margin: 12px 0 0; } .carrito { padding: 26px 24px 28px; } .carrito h2 { font-family: var(--f-titulo); font-weight: var(--peso-titulo); margin: 0 0 16px; font-size: 24px; text-transform: var(--mayus-titulo); letter-spacing: var(--espaciado-titulo); } .recien { margin: -6px 0 8px; font-size: 14px; color: #1f7a45; } .linea-c { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); } .linea-c .mini { width: 64px; height: 80px; object-fit: cover; background: var(--fondo-2); } .linea-c b { display: block; font-size: 15px; font-weight: 500; } .linea-c small { color: var(--gris); } .linea-c .cant button { width: 32px; height: 36px; font-size: 16px; } .linea-c .cant span { min-width: 26px; font-size: 14px; } .total { display: flex; justify-content: space-between; font-size: 17px; font-weight: 500; padding: 18px 0; letter-spacing: .03em; } .seguir { display: block; width: 100%; margin-top: 10px; border: 0; background: none; padding: 12px; text-decoration: underline; text-underline-offset: 4px; } .codigo { text-align: center; padding: 8px 0 4px; } .codigo .c { font-size: 28px; font-weight: 600; letter-spacing: .14em; } .aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #121212; color: #fff; padding: 13px 20px; font-size: 14px; z-index: 60; max-width: calc(100% - 32px); } .elegida { outline: 2px solid #2f6fed; outline-offset: -2px; } /* La miniatura de un diseño en el panel: quieta. */ html.mini, html.mini body { overflow: hidden; scrollbar-width: none; } html.mini *, html.mini *::before, html.mini *::after { transition: none !important; animation: none !important; } html.mini .cab-caja { position: static; } /* ── Por menor / por mayor ───────────────────────────────────────── */ /* Con "las dos", la clienta elige arriba; la barra es parte del encabezado. */ .modo-venta { background: var(--fondo-2); color: var(--tinta); border-bottom: 1px solid var(--linea); font-size: 13px; } .modo-fila { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 40px; } .modo-t { color: var(--gris); letter-spacing: .04em; } .modo-seg { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--radio-btn); overflow: hidden; background: var(--fondo); } .modo-seg button { border: 0; background: transparent; padding: 6px 14px; font-size: 13px; color: var(--gris); } .modo-seg button + button { border-left: 1px solid var(--linea); } .modo-seg button.on { background: var(--tinta); color: var(--fondo); } @media (max-width: 720px) { .modo-fila { justify-content: space-between; } } .mayor-info { font-size: var(--etiqueta); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); line-height: 1.5; } .mayor-reglas { list-style: none; margin: -8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--gris); } .mayor-reglas li::before { content: '—'; margin-right: 8px; color: var(--linea); } .mayor-reglas li:first-child { font-size: var(--etiqueta); letter-spacing: var(--esp-etiqueta); text-transform: uppercase; color: var(--tinta); } .mayor-reglas li:first-child::before { content: none; } .faltan { margin: 4px 0 14px; padding: 14px 16px; background: var(--fondo-2); font-size: 14px; } .faltan b { display: block; font-weight: 500; margin-bottom: 4px; } .faltan ul { margin: 0; padding-left: 18px; color: var(--gris); display: grid; gap: 3px; } body.cab-sobre .cab-caja:not(.solida) .modo-venta { background: rgba(0,0,0,.25); color: #fff; border-bottom-color: transparent; } /* ── Portada partida: la imagen de un lado y el texto del otro ─────── */ /* El texto va sobre el fondo del banner del diseño (no encima de la foto): se lee siempre, sin capa. "A la derecha" pone el texto a la derecha. En el celular, la foto arriba y el texto abajo. */ .banner.partida { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--banner-fondo); color: var(--banner-tinta); } .banner.partida .medio { grid-column: 2; grid-row: 1; } .banner.partida .texto { grid-column: 1; grid-row: 1; display: flex; align-items: center; padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px); } .banner.partida .texto > .envol { padding: 0; margin: 0; width: 100%; max-width: 560px; } .banner.partida.alin-derecha .medio { grid-column: 1; } .banner.partida.alin-derecha .texto { grid-column: 2; text-align: left; } .banner.partida.alin-derecha :is(p, h1, h2) { margin-left: 0; } .banner.partida.alin-centro .texto { justify-content: center; } .banner.partida.alin-centro .texto > .envol { margin: 0 auto; } .banner.partida.pos-arriba .texto { align-items: flex-start; } .banner.partida.pos-abajo .texto { align-items: flex-end; } .banner.partida .capa { display: none; } .banner.partida h1, .banner.partida h2 { max-width: 12ch; } @media (max-width: 720px) { .banner.partida { grid-template-columns: minmax(0, 1fr); } .banner.partida .medio, .banner.partida.alin-derecha .medio { grid-column: 1; grid-row: 1; height: clamp(300px, 105vw, 540px); } .banner.partida .texto, .banner.partida.alin-derecha .texto { grid-column: 1; grid-row: 2; padding: 30px 16px 38px; } } /* ── Lo de toda la tienda: botón de WhatsApp, redes, pagos ────────── */ /* El botón flotante: recto como los demás, abajo; no tapa el carrito (que está arriba) y se esconde detrás de las hojas (carrito, menú). */ .wa-flotante { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 16px; background: #1f8f4e; color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: .01em; border-radius: var(--radio-btn); box-shadow: 0 1px 0 rgba(0,0,0,.08); } .wa-flotante.der { right: 18px; } .wa-flotante.izq { left: 18px; } .wa-flotante svg { width: 22px; height: 22px; } .wa-flotante:hover { background: #197a42; } @media (max-width: 720px) { .wa-flotante { height: 50px; width: 50px; padding: 0; justify-content: center; } .wa-flotante span { display: none; } } body.con-wa .pie-base { padding-bottom: 86px; } html.mini .wa-flotante { display: none; } .cab-redes { display: flex; gap: 0; margin-right: 6px; } .cab-redes a { width: 36px; height: 44px; display: grid; place-items: center; color: inherit; opacity: .8; } .cab-redes a:hover { opacity: 1; } .cab-redes svg { width: 18px; height: 18px; } @media (max-width: 900px) { .cab-redes { display: none; } } .redes { flex-wrap: wrap; } .pie-horarios { white-space: pre-line; } .pie-pagos { display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; border-top: 1px solid var(--pie-linea); font-size: 13.5px; } .pie-pagos-l { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; } .pie-t { font-size: var(--etiqueta); letter-spacing: var(--esp-etiqueta); text-transform: uppercase; color: var(--pie-gris); } .pagos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; } .pagos li, .pie-envios { display: inline-flex; align-items: center; gap: 8px; } .pagos svg, .pie-envios svg { width: 19px; height: 19px; stroke-width: 1.5; } .pie-envios { color: var(--pie-gris); } /* ── La página que no existe ─────────────────────────────────────── */ .no-esta { text-align: center; padding-top: clamp(56px, 9vw, 120px); } .no-esta-n { display: block; font-size: var(--etiqueta); letter-spacing: .3em; color: var(--gris); margin-bottom: 14px; } .no-esta h1 { font-family: var(--f-titulo); font-weight: var(--peso-titulo); letter-spacing: var(--espaciado-titulo); text-transform: var(--mayus-titulo); font-style: var(--estilo-titulo); font-size: clamp(30px, 4.4vw, 56px); line-height: 1.08; margin: 0 auto 12px; max-width: 16ch; } .no-esta p { color: var(--gris); margin: 0 auto; max-width: 460px; } .no-esta-bot { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .no-esta-bot a { margin-top: 24px; } /* ── Reseñas, marcas, mapa, contador, marquesina ─────────────────── */ .testimonios, .marcas, .mapa, .contador { padding-top: var(--sep, clamp(48px, 6vw, 88px)); } .test-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; } @media (min-width: 720px) { .test-grilla.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .test-grilla.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .test-grilla { gap: 20px; } } .testimonios:not(:has(.tit-seccion)) .test-grilla { margin-top: 0; } .test { margin: 0; padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--linea); border-radius: var(--radio); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } .test blockquote { margin: 0; } .test blockquote p { margin: 0; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; white-space: pre-line; } .test figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .test figcaption b { font-weight: 500; } .test figcaption span { color: var(--gris); font-size: 13px; } .marcas .tit-seccion { text-align: center; } .marcas-fila { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px clamp(28px, 5vw, 64px); padding: 18px 0 4px; } .marcas-fila img { height: clamp(34px, 4vw, 52px); width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .78; } .mapa-caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(28px, 6vw, 80px); align-items: center; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: clamp(26px, 4vw, 44px) 0; } .mapa-txt .tit-seccion { margin-bottom: 8px; } .mapa-txt p { margin: 0; color: var(--gris); line-height: 1.7; white-space: pre-line; } .mapa-dir { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; white-space: pre-line; } .mapa-dir svg { margin-top: 3px; color: var(--gris); } .mapa-datos .btn-linea { margin-top: 8px; } @media (max-width: 720px) { .mapa-caja { grid-template-columns: minmax(0, 1fr); } } .cont-caja { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px 36px; background: var(--fondo-2); border-radius: var(--radio); padding: clamp(24px, 4vw, 44px); } .cont-txt .tit-seccion { margin-bottom: 6px; } .cont-txt p { margin: 0; color: var(--gris); } .cont-reloj { display: flex; gap: 8px; } .cont-n { min-width: 64px; text-align: center; border: 1px solid var(--linea); background: var(--fondo); padding: 10px 6px; border-radius: var(--radio); } .cont-n b { display: block; font-family: var(--f-titulo); font-size: clamp(24px, 2.6vw, 34px); font-weight: var(--peso-titulo); line-height: 1.1; font-variant-numeric: tabular-nums; } .cont-n span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); } .cont-caja .banner-btn { margin-top: 0; } @media (max-width: 860px) { .cont-caja { grid-template-columns: minmax(0, 1fr); } .cont-n { min-width: 0; flex: 1; } } .marquesina { margin-top: var(--sep, clamp(48px, 6vw, 88px)); overflow: hidden; padding: 13px 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .marquesina.color-marca { background: var(--marca); color: var(--sobre-marca); } .marquesina.color-oscuro { background: #141414; color: #f2f1ee; } .marquesina.color-claro { background: var(--fondo-2); color: var(--tinta); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); } .marq-pista { display: flex; width: max-content; animation: marq 32s linear infinite; } .marquesina.vel-lenta .marq-pista { animation-duration: 48s; } .marquesina.vel-rapida .marq-pista { animation-duration: 20s; } .marquesina:hover .marq-pista { animation-play-state: paused; } .marq-grupo { display: flex; } .marq-grupo span { padding: 0 32px; } .marq-grupo span::after { content: '·'; margin-left: 64px; opacity: .5; } .marq-quieta { text-align: center; white-space: normal; } @keyframes marq { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marq-pista { animation: none; } } .cuerpo > .marquesina:first-child { margin-top: 0; } /* ── Grilla editorial: la primera prenda grande ──────────────────── */ /* Dos de ancho y, en la compu, dos de alto; las demás llenan alrededor. */ .grilla.editorial { grid-auto-flow: row dense; } .grilla.editorial > .tarj:first-child { grid-column: span 2; } .grilla.editorial > .tarj:first-child .img { aspect-ratio: 1 / 1; } @media (min-width: 720px) { .grilla.editorial:not(.col-2) > .tarj:first-child { grid-row: span 2; } .grilla.editorial:not(.col-2) > .tarj:first-child .img { aspect-ratio: auto; flex: 1; min-height: 360px; } .grilla.editorial > .tarj:first-child .nom { font-size: 1.12em; } } /* ═══ Minimal: blanco y negro, fotos grandes, mucho aire ═══════════════ Manrope, el logo en mayúsculas con mucho aire, los títulos de sección como etiqueta y el nombre y el precio en la misma línea. */ body.minimal { --f: 'Manrope', system-ui, sans-serif; --f-titulo: var(--f); --peso-titulo: 600; --espaciado-titulo: -.035em; --alto-titulo: .98; --f-marca: var(--f); --peso-marca: 700; --esp-marca: .34em; --mayus-marca: uppercase; --tam-marca: 15px; --tam-nav: 12px; --esp-nav: .16em; --mayus-nav: uppercase; --peso-nav: 500; --fondo: #fff; --fondo-2: #f2f2f0; --tinta: #0f0f0f; --gris: #737373; --linea: #e7e7e5; --banner-fondo: #f2f2f0; --anuncio-fondo: #0f0f0f; --anuncio-tinta: #fff; --btn-fondo: #0f0f0f; --btn-tinta: #fff; --mayus-btn: uppercase; --esp-btn: .18em; --tam-btn: 12px; --peso-btn: 600; --etq-fondo: #fff; --etq-tinta: #0f0f0f; --tam-hero: clamp(40px, 7.4vw, 104px); letter-spacing: 0; } body.minimal .banner h1, body.minimal .banner h2 { max-width: 11ch; } body.minimal .tit-seccion { font-size: 12px; text-transform: uppercase; letter-spacing: .24em; font-weight: 700; } body.minimal .cat { border: 0; padding: 6px 0; margin-right: 18px; background: none; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--gris); } body.minimal .cat.on { background: none; color: var(--tinta); text-decoration: underline; text-underline-offset: 8px; } body.minimal .buscar, body.minimal .orden { border-width: 0 0 1px; background: none; } @media (min-width: 720px) { body.minimal .grilla { gap: 60px 18px; } } body.minimal .tarj .info { flex-direction: row; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; } body.minimal .tarj .cat-min, body.minimal .tarj .leyenda, body.minimal .tarj .muestras { width: 100%; } body.minimal .tarj .nom { font-size: 13.5px; flex: 1; } body.minimal .tarj .precio { font-size: 13.5px; white-space: nowrap; margin: 0; } body.minimal .tarj .precio small { display: none; } body.minimal .etq { box-shadow: inset 0 0 0 1px #0f0f0f; } body.minimal .contacto-datos, body.minimal .cta-caja { background: none; box-shadow: inset 0 0 0 1px var(--linea); } /* ═══ Editorial: revista de moda, serifa grande, papel ═════════════════ */ body.editorial { --f: 'Jost', system-ui, sans-serif; --f-titulo: 'Bodoni Moda', 'Didot', Georgia, serif; --peso-titulo: 400; --espaciado-titulo: -.01em; --alto-titulo: 1; --f-marca: 'Bodoni Moda', Georgia, serif; --peso-marca: 500; --esp-marca: .18em; --mayus-marca: uppercase; --tam-marca: 24px; --tam-nav: 12px; --esp-nav: .2em; --mayus-nav: uppercase; --peso-nav: 400; --fondo: #f6f2ec; --fondo-2: #ece6db; --tarjeta: #fbf9f5; --tinta: #1c1a17; --gris: #6f685d; --linea: #ddd5c7; --banner-fondo: #ece6db; --pie-fondo: #1c1a17; --pie-tinta: #f6f2ec; --pie-gris: #a39a8b; --pie-linea: #3a362f; --anuncio-fondo: #1c1a17; --anuncio-tinta: #f6f2ec; --btn-fondo: #1c1a17; --btn-tinta: #f6f2ec; --mayus-btn: uppercase; --esp-btn: .2em; --tam-btn: 11.5px; --peso-btn: 400; --etq-fondo: #f6f2ec; --etq-tinta: #1c1a17; --proporcion: 3 / 4; --tam-hero: clamp(48px, 8.6vw, 128px); --tam-seccion: clamp(32px, 4.2vw, 54px); font-weight: 300; } body.editorial .anuncio { letter-spacing: .24em; text-transform: uppercase; font-size: 10.5px; } body.editorial .cab { border-bottom-color: #1c1a17; } body.editorial .banner h1, body.editorial .banner h2 { max-width: 12ch; } body.editorial .sec-cab { justify-content: center; flex-direction: column; align-items: center; margin-bottom: 18px; } body.editorial .tit-seccion { text-align: center; } body.editorial .ver-todo { text-transform: uppercase; letter-spacing: .2em; font-size: 11px; } body.editorial .bloque-texto.alin-centro h2 { font-size: clamp(30px, 4vw, 48px); font-style: italic; } body.editorial .filtros { justify-content: center; } body.editorial .cats { flex: 0 1 auto; } body.editorial .cat { border: 0; background: none; padding: 6px 0; margin: 0 12px; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--gris); } body.editorial .cat.on { background: none; color: var(--tinta); box-shadow: inset 0 -1px 0 var(--tinta); } @media (min-width: 720px) { body.editorial .grilla { gap: 64px 24px; } } body.editorial .tarj .info { align-items: center; text-align: center; padding-top: 16px; } body.editorial .tarj .nom { font-family: var(--f-titulo); font-size: 18px; } body.editorial .tarj .precio { letter-spacing: .1em; font-size: 13px; } body.editorial .cat-tarj { align-items: center; } body.editorial .cat-tarj b { font-family: var(--f-titulo); font-size: 22px; } body.editorial .cat-tarj b::after { content: none; } body.editorial .cta-caja { background: transparent; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); } body.editorial .paso-n { font-family: var(--f-titulo); font-style: italic; font-size: 32px; letter-spacing: 0; color: var(--tinta); } body.editorial .pag-cab { text-align: center; } body.editorial .pag-cab .migas { justify-content: center; } body.editorial .pag-cab h1 { font-size: clamp(44px, 7vw, 88px); } body.editorial .faq summary { font-family: var(--f-titulo); font-size: 20px; } body.editorial .ficha-datos h1 { font-size: clamp(30px, 3.4vw, 46px); } /* ═══ Urbano: oscuro, angosta en mayúsculas, un color fuerte ═══════════ */ body.urbano { --f: 'Archivo', system-ui, sans-serif; --f-titulo: 'Oswald', 'Arial Narrow', sans-serif; --peso-titulo: 500; --espaciado-titulo: .005em; --mayus-titulo: uppercase; --alto-titulo: .95; --f-marca: 'Oswald', sans-serif; --peso-marca: 600; --esp-marca: .04em; --mayus-marca: uppercase; --tam-marca: 24px; --tam-nav: 13px; --esp-nav: .1em; --mayus-nav: uppercase; --peso-nav: 500; --fondo: #0e0e0e; --fondo-2: #1a1a1a; --tarjeta: #141414; --tinta: #f2f2ef; --gris: #9a9a95; --linea: #2a2a2a; --banner-fondo: #161616; --pie-fondo: #0e0e0e; --pie-linea: #2a2a2a; --anuncio-fondo: var(--marca); --anuncio-tinta: var(--sobre-marca); --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --mayus-btn: uppercase; --esp-btn: .1em; --tam-btn: 13.5px; --peso-btn: 600; --etq-fondo: var(--marca); --etq-tinta: var(--sobre-marca); --precio: #fff; --tam-hero: clamp(54px, 10vw, 150px); --tam-seccion: clamp(32px, 4.6vw, 56px); color-scheme: dark; letter-spacing: .01em; } body.urbano .anuncio { text-transform: uppercase; letter-spacing: .16em; font-weight: 600; font-size: 11.5px; } body.urbano .banner h1, body.urbano .banner h2 { max-width: 9ch; } body.urbano .banner.con-foto.letra-clara .banner-btn { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); } body.urbano .cat { border-color: #333; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; } body.urbano .cat.on { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); } body.urbano .buscar, body.urbano .orden { background: #141414; border-color: #333; } body.urbano .tarj .nom { text-transform: uppercase; font-size: 13px; letter-spacing: .04em; font-weight: 500; } body.urbano .tarj .precio { font-size: 14px; } body.urbano .etq-sin { background: #0e0e0e; color: #f2f2ef; box-shadow: inset 0 0 0 1px #444; } body.urbano .cat-tarj b { font-family: var(--f-titulo); text-transform: uppercase; font-size: 20px; letter-spacing: .02em; } body.urbano .ben-ic { color: var(--marca); } body.urbano .cta-caja { background: var(--marca); color: var(--sobre-marca); } body.urbano .cta-caja p { color: inherit; opacity: .78; } body.urbano .cta-caja .btn-wa { background: #0e0e0e; border-color: #0e0e0e; } body.urbano .pasos-lista li { border-top-color: var(--marca); } body.urbano .contacto-datos { background: #141414; } body.urbano .opc { background: transparent; border-color: #3a3a3a; } body.urbano .opc.on { background: var(--tinta); color: #0e0e0e; } body.urbano .cant { border-color: #3a3a3a; } body.urbano .flecha { background: #0e0e0e; color: #fff; border-color: #333; } /* ═══ Natural: tonos tierra, serifa suave, mucho aire ═════════════════ */ body.natural { --f: 'DM Sans', system-ui, sans-serif; --f-titulo: 'Fraunces', Georgia, serif; --peso-titulo: 400; --espaciado-titulo: -.01em; --alto-titulo: 1.05; --f-marca: 'Fraunces', Georgia, serif; --peso-marca: 500; --esp-marca: -.005em; --tam-marca: 24px; --tam-nav: 14px; --esp-nav: .02em; --peso-nav: 400; --fondo: #f6f1e8; --fondo-2: #ece4d6; --tarjeta: #fbf8f2; --tinta: #2e2a23; --gris: #736a5c; --linea: #ddd3c2; --banner-fondo: #e8dfcf; --pie-fondo: #2f2b23; --pie-tinta: #f1ebdf; --pie-gris: #b3a992; --pie-linea: #474134; --anuncio-fondo: #2f2b23; --anuncio-tinta: #f1ebdf; --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --peso-btn: 500; --etq-fondo: #fbf8f2; --etq-tinta: #2e2a23; --radio-foto: 2px; --radio-btn: 2px; --tam-hero: clamp(40px, 6.2vw, 84px); --tam-seccion: clamp(28px, 3.4vw, 42px); } body.natural .banner h1, body.natural .banner h2 { max-width: 15ch; } body.natural .etq { text-transform: none; letter-spacing: .02em; font-size: 12px; } body.natural .cat { border-color: #cfc3ad; } body.natural .cat.on { background: #2e2a23; border-color: #2e2a23; color: #f6f1e8; } body.natural .cat-tarj b { font-family: var(--f-titulo); font-size: 20px; } body.natural .ben-ic { color: var(--marca); } body.natural .paso-n { font-family: var(--f-titulo); font-size: 26px; letter-spacing: 0; color: var(--marca); } body.natural .pasos-lista li { border-top-color: var(--linea); } body.natural .cta-caja { background: #e8dfcf; } /* ═══ Lujo: negro, mayúsculas espaciadas, pocas piezas ════════════════ */ body.lujo { --f: 'Jost', system-ui, sans-serif; --f-titulo: 'Cormorant Garamond', 'Didot', Georgia, serif; --peso-titulo: 500; --espaciado-titulo: .12em; --mayus-titulo: uppercase; --alto-titulo: 1.12; --f-marca: 'Cormorant Garamond', Georgia, serif; --peso-marca: 600; --esp-marca: .24em; --mayus-marca: uppercase; --tam-marca: 21px; --tam-nav: 11.5px; --esp-nav: .24em; --mayus-nav: uppercase; --peso-nav: 400; --fondo: #0c0c0b; --fondo-2: #171614; --tarjeta: #121110; --tinta: #eeebe4; --gris: #9d978b; --linea: #2a2824; --banner-fondo: #121110; --pie-fondo: #0c0c0b; --pie-linea: #2a2824; --anuncio-fondo: #0c0c0b; --anuncio-tinta: var(--marca); --btn-fondo: transparent; --btn-tinta: #eeebe4; --mayus-btn: uppercase; --esp-btn: .26em; --tam-btn: 11px; --peso-btn: 400; --etq-fondo: #0c0c0b; --etq-tinta: #eeebe4; --proporcion: 3 / 4; --tam-hero: clamp(34px, 5.6vw, 76px); --tam-seccion: clamp(22px, 2.6vw, 32px); color-scheme: dark; font-weight: 300; letter-spacing: .03em; } body.lujo .anuncio { border-bottom: 1px solid #2a2824; letter-spacing: .28em; text-transform: uppercase; font-size: 10.5px; } body.lujo .banner-btn, body.lujo .btn-grande:not(.btn-wa) { border-color: var(--marca); } body.lujo .banner-btn:hover, body.lujo .btn-grande:not(.btn-wa):not(:disabled):hover { background: var(--marca); color: #0c0c0b; box-shadow: none; } body.lujo .banner.con-foto.letra-clara .banner-btn { background: transparent; color: #fff; border-color: #fff; } body.lujo .banner h1, body.lujo .banner h2 { max-width: 18ch; } body.lujo .banner p { color: var(--gris); opacity: 1; } body.lujo .banner.con-foto p { color: inherit; opacity: .85; } body.lujo .sec-cab { justify-content: center; flex-direction: column; align-items: center; margin-bottom: 22px; } body.lujo .tit-seccion { text-align: center; } body.lujo .ver-todo { color: var(--marca); text-transform: uppercase; letter-spacing: .24em; font-size: 10.5px; text-decoration: none; } body.lujo .filtros { justify-content: center; } body.lujo .cats { flex: 0 1 auto; } body.lujo .cat { border: 0; background: none; padding: 6px 0; margin: 0 12px; text-transform: uppercase; letter-spacing: .24em; font-size: 10.5px; color: var(--gris); } body.lujo .cat.on { background: none; color: var(--tinta); box-shadow: inset 0 -1px 0 var(--marca); } body.lujo .buscar, body.lujo .orden { background: transparent; border-color: #2a2824; } @media (min-width: 720px) { body.lujo .grilla { gap: 64px 28px; } } body.lujo .tarj .info { align-items: center; text-align: center; padding-top: 18px; gap: 6px; } body.lujo .tarj .nom { text-transform: uppercase; letter-spacing: .18em; font-size: 11.5px; } body.lujo .tarj .precio { letter-spacing: .12em; font-size: 12.5px; } body.lujo .etq { box-shadow: inset 0 0 0 1px #4a463e; letter-spacing: .2em; } body.lujo .cat-tarj { align-items: center; } body.lujo .cat-tarj b { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .16em; font-size: 15px; } body.lujo .cat-tarj b::after { content: none; } body.lujo .ben { align-items: center; text-align: center; } body.lujo .ben-ic { color: var(--marca); } body.lujo .ben b { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; } body.lujo .cta-caja { background: transparent; box-shadow: inset 0 0 0 1px #2a2824; justify-content: center; text-align: center; flex-direction: column; } body.lujo .pasos-lista li { border-top-color: #3a3730; } body.lujo .contacto-datos { background: #121110; } body.lujo .opc { background: transparent; border-color: #3a3730; } body.lujo .opc.on { background: var(--tinta); border-color: var(--tinta); color: #0c0c0b; } body.lujo .cant { border-color: #3a3730; } body.lujo .flecha { background: #0c0c0b; color: var(--tinta); border-color: #2a2824; } body.lujo .faq summary { letter-spacing: .04em; } /* ═══ Infantil: blanco, un color alegre y letra clara ═════════════════ Como las marcas de ropa de chicos de verdad: el color en el anuncio, los botones y las etiquetas; fotos cuadradas, todo lo demás tranquilo. */ body.infantil { --f: 'Assistant', system-ui, sans-serif; --f-titulo: 'Jost', system-ui, sans-serif; --peso-titulo: 500; --espaciado-titulo: -.005em; --alto-titulo: 1.08; --f-marca: 'Jost', sans-serif; --peso-marca: 600; --esp-marca: .01em; --tam-marca: 23px; --tam-nav: 15px; --esp-nav: .02em; --peso-nav: 500; --fondo: #fffdf9; --fondo-2: #f6f0e6; --tarjeta: #fff; --tinta: #26293b; --gris: #676a7d; --linea: #ebe4d8; --banner-fondo: #f6f0e6; --pie-fondo: #f6f0e6; --pie-linea: #e6ddce; --anuncio-fondo: var(--marca); --anuncio-tinta: var(--sobre-marca); --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --peso-btn: 600; --tam-btn: 15.5px; --etq-fondo: var(--marca); --etq-tinta: var(--sobre-marca); --peso-precio: 600; --radio-foto: 4px; --radio-btn: 4px; --radio: 4px; --proporcion: 1 / 1; --tam-hero: clamp(36px, 5.6vw, 68px); --tam-seccion: clamp(24px, 2.8vw, 34px); } body.infantil .anuncio { letter-spacing: .06em; font-size: 13px; font-weight: 600; } body.infantil .etq { text-transform: none; letter-spacing: .02em; font-size: 12px; font-weight: 600; } body.infantil .cat.on { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); } body.infantil .tarj .nom { font-size: 15.5px; } body.infantil .cat-tarj b { font-family: var(--f-titulo); font-weight: 500; font-size: 17px; } body.infantil .cat-foto { aspect-ratio: 1; } body.infantil .ben-ic { color: var(--marca); } body.infantil .paso-n { font-family: var(--f-titulo); font-size: 26px; letter-spacing: 0; color: var(--marca); font-weight: 500; } body.infantil .pasos-lista li { border-top: 2px solid var(--marca); } /* ═══ Mayorista: catálogo denso, precio por unidad ════════════════════ */ body.mayorista { --f: 'Archivo', system-ui, sans-serif; --f-titulo: var(--f); --peso-titulo: 600; --espaciado-titulo: -.015em; --alto-titulo: 1.05; --f-marca: var(--f); --peso-marca: 700; --esp-marca: -.01em; --tam-marca: 21px; --tam-nav: 14px; --esp-nav: 0; --peso-nav: 500; --fondo: #f4f5f7; --fondo-2: #e9ebef; --tarjeta: #fff; --tinta: #111827; --gris: #5b6272; --linea: #dfe2e8; --cab-fondo: #fff; --banner-fondo: var(--marca); --banner-tinta: var(--sobre-marca); --pie-fondo: #111827; --pie-tinta: #e9ebef; --pie-gris: #8d93a3; --pie-linea: #262c3a; --anuncio-fondo: #111827; --anuncio-tinta: #fff; --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --tam-btn: 15px; --peso-btn: 600; --esp-btn: .01em; --etq-fondo: #111827; --etq-tinta: #fff; --leyenda: #19703d; --peso-precio: 700; --radio: 2px; --radio-foto: 2px; --radio-btn: 2px; --proporcion: 1 / 1; --ancho: 1440px; --tam-hero: clamp(30px, 4vw, 48px); --tam-seccion: clamp(21px, 2.2vw, 27px); letter-spacing: 0; } body.mayorista .banner.sin-foto .banner-btn { background: #fff; color: #111827; border-color: #fff; } body.mayorista .banner.sin-foto p { opacity: .9; } body.mayorista .cab-buscar { width: auto; min-width: 44px; gap: 10px; padding: 0 14px; background: var(--fondo); color: var(--gris); font-size: 14px; justify-content: flex-start; display: flex; align-items: center; border-radius: var(--radio-btn); } @media (min-width: 900px) { body.mayorista .cab-buscar { width: 300px; } body.mayorista .cab-buscar span { display: inline; } } body.mayorista .btn-carrito { background: var(--marca); color: var(--sobre-marca); padding: 0 16px; margin-left: 8px; border-radius: var(--radio-btn); } body.mayorista .btn-carrito .n { position: static; background: var(--sobre-marca); color: var(--marca); } @media (min-width: 900px) { body.mayorista .btn-carrito .txt { display: inline; } } body.mayorista .productos { padding-top: 32px; } body.mayorista .cat { background: #fff; } body.mayorista .cat.on { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); } body.mayorista .grilla { gap: 10px; } @media (min-width: 720px) { body.mayorista .grilla { gap: 12px; } } body.mayorista .tarj { background: #fff; border: 1px solid var(--linea); padding: 8px; } body.mayorista .tarj:hover { border-color: #b9bfca; } body.mayorista .tarj .info { padding: 10px 4px 4px; gap: 2px; } body.mayorista .tarj .nom { font-size: 13.5px; } body.mayorista .tarj .precio { font-size: 16px; letter-spacing: 0; } body.mayorista .tarj .leyenda { font-size: 11.5px; } body.mayorista .talles-min { display: block; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--linea); } body.mayorista .pasos { padding-top: 32px; } body.mayorista .pasos-lista li { background: #fff; border: 1px solid var(--linea); padding: 18px 18px 20px; } body.mayorista .paso-n { color: var(--marca); font-weight: 700; font-size: 12px; } body.mayorista .cta-caja, body.mayorista .contacto-datos { background: #fff; border: 1px solid var(--linea); } /* ═══ Romántica: rosa empolvado, serifa fina en cursiva ═══════════════ */ body.romantica { --f: 'DM Sans', system-ui, sans-serif; --f-titulo: 'Playfair Display', Georgia, serif; --peso-titulo: 400; --espaciado-titulo: -.01em; --alto-titulo: 1.06; --estilo-titulo: italic; --f-marca: 'Playfair Display', Georgia, serif; --peso-marca: 500; --esp-marca: .02em; --tam-marca: 25px; --tam-nav: 12px; --esp-nav: .16em; --mayus-nav: uppercase; --peso-nav: 400; --fondo: #fcf8f6; --fondo-2: #f5e9e6; --tarjeta: #fffbfa; --tinta: #3d2b2f; --gris: #8a7276; --linea: #eddcd8; --banner-fondo: #f3e3df; --pie-fondo: #f5e9e6; --pie-linea: #e6d0cb; --anuncio-fondo: var(--marca); --anuncio-tinta: var(--sobre-marca); --btn-fondo: var(--tinta); --btn-tinta: #fcf8f6; --mayus-btn: uppercase; --esp-btn: .18em; --tam-btn: 12px; --peso-btn: 500; --etq-fondo: #fcf8f6; --etq-tinta: var(--tinta); --proporcion: 3 / 4; --tam-hero: clamp(44px, 7vw, 100px); --tam-seccion: clamp(30px, 3.8vw, 46px); } body.romantica .anuncio { letter-spacing: .16em; text-transform: uppercase; font-size: 11px; } body.romantica .marca b { font-style: italic; } body.romantica .banner h1, body.romantica .banner h2 { max-width: 12ch; } body.romantica .sec-cab { justify-content: center; flex-direction: column; align-items: center; margin-bottom: 16px; } body.romantica .tit-seccion { text-align: center; } body.romantica .ver-todo { text-transform: uppercase; letter-spacing: .16em; font-size: 11px; } body.romantica .filtros { justify-content: center; } body.romantica .cats { flex: 0 1 auto; } body.romantica .cat { border-color: #e3cbc6; } body.romantica .cat.on { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); } body.romantica .tarj .info { align-items: center; text-align: center; padding-top: 15px; } body.romantica .tarj .nom { font-family: var(--f-titulo); font-size: 17px; } body.romantica .muestras { justify-content: center; } body.romantica .cat-tarj { align-items: center; } body.romantica .cat-tarj b { font-family: var(--f-titulo); font-style: italic; font-size: 21px; } body.romantica .cat-tarj b::after { content: none; } body.romantica .ben { align-items: center; text-align: center; } body.romantica .ben-ic { color: var(--marca); } body.romantica .cta-caja { justify-content: center; text-align: center; flex-direction: column; } body.romantica .paso-n { font-family: var(--f-titulo); font-style: italic; font-size: 30px; letter-spacing: 0; color: var(--marca); } body.romantica .pasos-lista li { border-top-color: var(--linea); } body.romantica .faq summary { font-family: var(--f-titulo); font-size: 19px; } /* ═══ Boutique: crema, serifa clásica, fotos altas ════════════════════ */ body.boutique { --f: 'Assistant', system-ui, sans-serif; --fondo: #faf7f2; --fondo-2: #f1ebe1; --tarjeta: #fffdf9; --linea: #e6ddcf; --gris: #7b7163; --tinta: #2a2520; --f-titulo: 'Cormorant Garamond', 'Didot', Georgia, serif; --peso-titulo: 500; --espaciado-titulo: 0; --alto-titulo: 1.05; --f-marca: var(--f-titulo); --peso-marca: 600; --esp-marca: .16em; --mayus-marca: uppercase; --tam-marca: 22px; --tam-nav: 12.5px; --esp-nav: .14em; --mayus-nav: uppercase; --banner-fondo: #efe6d8; --anuncio-fondo: #2a2520; --anuncio-tinta: #faf7f2; --pie-fondo: #f1ebe1; --btn-fondo: #2a2520; --btn-tinta: #faf7f2; --mayus-btn: uppercase; --esp-btn: .16em; --tam-btn: 12.5px; --etq-fondo: #faf7f2; --etq-tinta: #2a2520; --proporcion: 3 / 4; --tam-hero: clamp(42px, 6.6vw, 92px); --tam-seccion: clamp(30px, 3.8vw, 46px); } body.boutique .tit-seccion, body.boutique .bloque-texto h2 { text-align: center; } body.boutique .sec-cab { justify-content: center; flex-direction: column; align-items: center; } body.boutique .filtros { justify-content: center; } body.boutique .cats { flex: 0 1 auto; justify-content: center; } body.boutique .cat { border: 0; background: none; padding: 6px 0; margin: 0 12px; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--gris); } body.boutique .cat.on { background: none; color: var(--tinta); box-shadow: inset 0 -1px 0 var(--tinta); } body.boutique .tarj .info { align-items: center; text-align: center; } body.boutique .tarj .nom { font-family: var(--f-titulo); font-size: 20px; line-height: 1.25; } body.boutique .tarj .precio { letter-spacing: .08em; font-size: 14px; } body.boutique .muestras { justify-content: center; } body.boutique .cat-tarj { align-items: center; } body.boutique .cat-tarj b { font-family: var(--f-titulo); font-size: 22px; } body.boutique .cat-tarj b::after { content: none; } body.boutique .paso-n { font-family: var(--f-titulo); font-size: 30px; letter-spacing: 0; color: var(--tinta); } /* ═══ Vitrina: la clásica de tienda online, tarjetas con borde fino ═══ */ body.vitrina { --fondo: #fff; --fondo-2: #f4f4f4; --radio: 4px; --radio-foto: 2px; --radio-btn: 4px; --proporcion: 1 / 1; --peso-precio: 600; --peso-titulo: 500; --banner-fondo: color-mix(in srgb, var(--marca) 8%, #fff); --anuncio-fondo: var(--marca); --anuncio-tinta: var(--sobre-marca); --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --etq-fondo: var(--marca); --etq-tinta: var(--sobre-marca); } body.vitrina .btn-carrito { background: var(--marca); color: var(--sobre-marca); padding: 0 16px; border-radius: var(--radio-btn); } body.vitrina .btn-carrito .n { position: static; background: var(--sobre-marca); color: var(--marca); } @media (min-width: 900px) { body.vitrina .btn-carrito .txt { display: inline; } } body.vitrina .tarj { border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px; transition: border-color .2s; } @media (hover: hover) { body.vitrina .tarj:hover { border-color: #bdbdbd; } } body.vitrina .tarj .info { padding: 12px 4px 4px; } body.vitrina .tarj .precio { font-size: 16.5px; letter-spacing: .01em; } body.vitrina .cat.on { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); } body.vitrina .ben-ic { color: var(--marca); } body.vitrina .cat-foto { aspect-ratio: 1; } /* ═══ Color: tu color en el encabezado, bloques y botones ═════════════ (la clave sigue siendo "feria": hay tiendas que ya lo eligieron). */ body.feria { --fondo: #fff; --fondo-2: #f5f4f2; --tarjeta: #fff; --linea: #e8e6e3; --proporcion: 4 / 5; --f-titulo: 'Plus Jakarta Sans', var(--f); --peso-titulo: 700; --espaciado-titulo: -.025em; --alto-titulo: 1.02; --f-marca: var(--f-titulo); --peso-marca: 800; --esp-marca: -.02em; --tam-marca: 22px; --tam-nav: 14.5px; --peso-nav: 500; --peso-precio: 600; --banner-fondo: color-mix(in srgb, var(--marca) 14%, #fff); --etq-fondo: var(--marca); --etq-tinta: var(--sobre-marca); --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --peso-btn: 600; --tam-hero: clamp(38px, 6.6vw, 84px); --tam-seccion: clamp(24px, 2.8vw, 36px); } body.feria .cat.on { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); } body.feria .ben-ic { color: var(--marca); } body.feria .cta-caja { background: var(--marca); color: var(--sobre-marca); } body.feria .cta-caja p { color: inherit; opacity: .85; } body.feria .paso-n { font-family: var(--f-titulo); font-size: 28px; letter-spacing: -.02em; color: var(--marca); font-weight: 700; } body.feria .pasos-lista li { border-top: 2px solid var(--marca); } body.feria .cat-tarj b { font-weight: 600; } /* ═══ Los nueve del 27-sep ════════════════════════════════════════════ Seba: "sí, igual más diseños agregale". Los rubros que faltaban, con el mismo criterio que los de arriba: letra, paleta y disposición (portada partida, a pantalla completa, grilla editorial, catálogo denso), esquinas de 0 a 4 px, sin sombras ni píldoras. */ /* ═══ Deportivo: angosta en mayúsculas, portada partida, un color fuerte ═══ Barlow Condensed en los títulos y los botones, Barlow en el texto. Las categorías son fotos grandes con el nombre encima. */ body.deportivo { --f: 'Barlow', system-ui, sans-serif; --f-titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif; --peso-titulo: 600; --espaciado-titulo: .005em; --mayus-titulo: uppercase; --alto-titulo: .92; --f-marca: 'Barlow Condensed', sans-serif; --peso-marca: 600; --esp-marca: .04em; --mayus-marca: uppercase; --tam-marca: 27px; --tam-nav: 14px; --esp-nav: .08em; --mayus-nav: uppercase; --peso-nav: 500; --fondo: #fff; --fondo-2: #eef0f2; --tarjeta: #fff; --tinta: #0b0b0c; --gris: #62666d; --linea: #e3e5e8; --banner-fondo: #0b0b0c; --banner-tinta: #fff; --anuncio-fondo: var(--marca); --anuncio-tinta: var(--sobre-marca); --pie-fondo: #0b0b0c; --pie-tinta: #f2f3f5; --pie-gris: #9a9ea6; --pie-linea: #26282c; --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --mayus-btn: uppercase; --esp-btn: .07em; --tam-btn: 17px; --peso-btn: 600; --etq-fondo: var(--marca); --etq-tinta: var(--sobre-marca); --peso-precio: 500; --tam-hero: clamp(54px, 8.4vw, 124px); --tam-seccion: clamp(32px, 3.8vw, 52px); letter-spacing: .01em; } body.deportivo .anuncio { text-transform: uppercase; letter-spacing: .14em; font-weight: 500; font-size: 12px; } body.deportivo :is(.banner-btn, .btn-grande:not(.btn-wa), .btn-linea) { font-family: var(--f-titulo); } body.deportivo .banner.partida .banner-btn { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); } body.deportivo .tarj .nom { text-transform: uppercase; font-size: 14px; letter-spacing: .03em; font-weight: 500; } body.deportivo .tarj .precio { font-size: 15px; } body.deportivo .cat-foto { position: relative; aspect-ratio: 3 / 4; } body.deportivo .cat-foto::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.5)); } body.deportivo .cat-foto .sin-foto { background: #1b1c1f; } body.deportivo .cat-tarj b { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; color: #fff; font-family: var(--f-titulo); text-transform: uppercase; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: .02em; font-weight: 600; line-height: 1; } body.deportivo .cat-tarj b::after { content: none; } body.deportivo .ben-ic { color: var(--marca); } body.deportivo .ben b { font-family: var(--f-titulo); text-transform: uppercase; font-size: 20px; letter-spacing: .03em; font-weight: 600; } body.deportivo .pasos-lista li { border-top: 3px solid var(--marca); } body.deportivo .paso-n { font-family: var(--f-titulo); font-size: 34px; letter-spacing: 0; color: var(--tinta); font-weight: 600; } body.deportivo .cta-caja { background: var(--tinta); color: #fff; } body.deportivo .cta-caja p { color: inherit; opacity: .74; } body.deportivo .cta-caja h2 { font-size: clamp(26px, 3vw, 38px); } /* ═══ Íntima: tonos piel, letra fina, fotos altas ═════════════════════ Italiana (una serifa de trazo fino) en los títulos y Mulish liviana en el texto. Portada a pantalla completa con el texto abajo, tres por fila con fotos 2:3 y todo centrado. */ body.intima { --f: 'Mulish', system-ui, sans-serif; --f-titulo: 'Italiana', 'Didot', Georgia, serif; --peso-titulo: 400; --espaciado-titulo: .02em; --alto-titulo: 1.04; --f-marca: 'Italiana', Georgia, serif; --peso-marca: 400; --esp-marca: .22em; --mayus-marca: uppercase; --tam-marca: 25px; --tam-nav: 11.5px; --esp-nav: .2em; --mayus-nav: uppercase; --peso-nav: 500; --fondo: #faf6f3; --fondo-2: #f1e7e2; --tarjeta: #fdfaf8; --tinta: #2a2123; --gris: #7c6d6f; --linea: #eaded8; --banner-fondo: #efe3dd; --anuncio-fondo: #efe3dd; --anuncio-tinta: #2a2123; --pie-fondo: #2a2123; --pie-tinta: #f5ede9; --pie-gris: #b3a3a4; --pie-linea: #43373a; --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --mayus-btn: uppercase; --esp-btn: .22em; --tam-btn: 11px; --peso-btn: 600; --etq-fondo: #faf6f3; --etq-tinta: #2a2123; --proporcion: 2 / 3; --tam-hero: clamp(48px, 8vw, 118px); --tam-seccion: clamp(34px, 4.2vw, 56px); font-weight: 300; font-synthesis: none; } body.intima .anuncio { letter-spacing: .2em; text-transform: uppercase; font-size: 10.5px; } body.intima .banner h1, body.intima .banner h2 { max-width: 14ch; } body.intima .sec-cab { justify-content: center; flex-direction: column; align-items: center; margin-bottom: 18px; } body.intima .tit-seccion { text-align: center; } body.intima .ver-todo { text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; } body.intima .filtros { justify-content: center; } body.intima .cats { flex: 0 1 auto; } body.intima .cat { border: 0; background: none; padding: 6px 0; margin: 0 12px; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--gris); } body.intima .cat.on { background: none; color: var(--tinta); box-shadow: inset 0 -1px 0 var(--tinta); } @media (min-width: 720px) { body.intima .grilla { gap: 60px 22px; } } body.intima .tarj .info { align-items: center; text-align: center; padding-top: 16px; } body.intima .tarj .nom { font-size: 14px; letter-spacing: .02em; } body.intima .tarj .precio { font-size: 13.5px; letter-spacing: .08em; } body.intima .muestras { justify-content: center; } body.intima .cat-tarj { align-items: center; } body.intima .cat-tarj b { font-family: var(--f-titulo); font-size: 24px; } body.intima .cat-tarj b::after { content: none; } body.intima .img-txt h2 { font-size: clamp(36px, 4.4vw, 58px); } body.intima .ben { align-items: center; text-align: center; } body.intima .ben-ic { color: var(--marca); } body.intima .cta-caja { justify-content: center; text-align: center; flex-direction: column; background: var(--fondo-2); } body.intima .faq summary { font-family: var(--f-titulo); font-size: 21px; } body.intima .paso-n { font-family: var(--f-titulo); font-size: 32px; letter-spacing: 0; color: var(--marca); } /* ═══ Calzado: fotos cuadradas sobre gris claro, talles a la vista ════ Schibsted Grotesk en todo, títulos apretados y pesados. Portada partida con el texto a la derecha, catálogo de cinco por fila y el talle debajo de cada par. */ body.calzado { --f: 'Schibsted Grotesk', system-ui, sans-serif; --f-titulo: var(--f); --peso-titulo: 700; --espaciado-titulo: -.035em; --alto-titulo: .96; --f-marca: var(--f); --peso-marca: 800; --esp-marca: -.025em; --tam-marca: 23px; --tam-nav: 14.5px; --esp-nav: 0; --peso-nav: 500; --fondo: #fff; --fondo-2: #f2f2f2; --tarjeta: #fff; --tinta: #111; --gris: #6b6b6b; --linea: #e6e6e6; --banner-fondo: #f2f2f2; --anuncio-fondo: #111; --anuncio-tinta: #fff; --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --tam-btn: 15px; --peso-btn: 600; --esp-btn: 0; --etq-fondo: #fff; --etq-tinta: #111; --peso-precio: 600; --proporcion: 1 / 1; --tam-hero: clamp(50px, 7.6vw, 112px); --tam-seccion: clamp(24px, 2.6vw, 34px); letter-spacing: 0; } body.calzado .anuncio { font-weight: 500; letter-spacing: .02em; font-size: 12.5px; } body.calzado .tit-seccion { letter-spacing: -.02em; } body.calzado .tarj .info { gap: 1px; padding-top: 11px; } body.calzado .tarj .nom { font-size: 15px; font-weight: 500; } body.calzado .tarj .precio { font-size: 15px; letter-spacing: 0; } body.calzado .talles-min { display: block; margin-top: 3px; } body.calzado .cat-foto { aspect-ratio: 1; } body.calzado .cat-tarj b { font-weight: 600; font-size: 17px; } body.calzado .etq { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; } body.calzado .cat.on { background: var(--tinta); border-color: var(--tinta); } body.calzado .ben { flex-direction: row; gap: 16px; } body.calzado .ben-ic svg { width: 28px; height: 28px; } body.calzado .cta-caja { background: #111; color: #fff; } body.calzado .cta-caja p { color: inherit; opacity: .72; } /* ═══ Joyas: marfil, todo centrado, mucho aire ═══════════════════════ Tenor Sans en mayúsculas espaciadas para los títulos y los nombres, Manrope en el texto. Fotos cuadradas y chicas, cuatro por fila en un ancho más angosto: la pieza es chica y el aire la hace valer. */ body.joyas { --f: 'Manrope', system-ui, sans-serif; --f-titulo: 'Tenor Sans', 'Gill Sans', sans-serif; --peso-titulo: 400; --espaciado-titulo: .14em; --mayus-titulo: uppercase; --alto-titulo: 1.2; --f-marca: 'Tenor Sans', sans-serif; --peso-marca: 400; --esp-marca: .32em; --mayus-marca: uppercase; --tam-marca: 20px; --tam-nav: 11.5px; --esp-nav: .22em; --mayus-nav: uppercase; --peso-nav: 500; --fondo: #fbf9f5; --fondo-2: #f1ede5; --tarjeta: #fff; --tinta: #1f1d1a; --gris: #7a746a; --linea: #e7e1d6; --banner-fondo: #f1ede5; --anuncio-fondo: #1f1d1a; --anuncio-tinta: #f1ede5; --btn-fondo: #1f1d1a; --btn-tinta: #fbf9f5; --mayus-btn: uppercase; --esp-btn: .22em; --tam-btn: 11px; --peso-btn: 600; --etq-fondo: #fbf9f5; --etq-tinta: #1f1d1a; --proporcion: 1 / 1; --ancho: 1200px; --tam-hero: clamp(30px, 4.4vw, 58px); --tam-seccion: clamp(16px, 1.5vw, 20px); font-synthesis: none; } body.joyas .anuncio { letter-spacing: .24em; text-transform: uppercase; font-size: 10.5px; } body.joyas .banner h1, body.joyas .banner h2 { max-width: 18ch; } body.joyas .sec-cab { justify-content: center; flex-direction: column; align-items: center; margin-bottom: 14px; } body.joyas .tit-seccion { text-align: center; } body.joyas .ver-todo { text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; } body.joyas .filtros { justify-content: center; } body.joyas .cats { flex: 0 1 auto; } body.joyas .cat { border: 0; background: none; padding: 6px 0; margin: 0 12px; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; color: var(--gris); } body.joyas .cat.on { background: none; color: var(--tinta); box-shadow: inset 0 -1px 0 var(--tinta); } @media (min-width: 720px) { body.joyas .grilla { gap: 64px 30px; } } body.joyas .tarj .info { align-items: center; text-align: center; padding-top: 16px; gap: 5px; } body.joyas .tarj .nom { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; } body.joyas .tarj .precio { font-size: 13.5px; letter-spacing: .06em; color: var(--gris); } body.joyas .muestras { justify-content: center; } body.joyas .cat-foto { aspect-ratio: 1; } body.joyas .cat-tarj { align-items: center; } body.joyas .cat-tarj b { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 400; } body.joyas .cat-tarj b::after { content: none; } body.joyas .img-txt h2 { font-size: clamp(20px, 2vw, 26px); } body.joyas .bloque-texto h2 { font-size: clamp(18px, 1.8vw, 24px); } body.joyas .ben { align-items: center; text-align: center; } body.joyas .ben b { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 400; } body.joyas .cta-caja { justify-content: center; text-align: center; flex-direction: column; background: transparent; box-shadow: inset 0 0 0 1px var(--linea); } body.joyas .cta-caja h2 { font-size: clamp(18px, 1.8vw, 22px); } /* ═══ Sastrería: serifa clásica, azul noche, grilla editorial ═════════ Newsreader en los títulos y los nombres, Instrument Sans en el texto. El menú al centro, la primera prenda de la colección grande y una línea bajo cada título de sección, como en un catálogo impreso. */ body.sastreria { --f: 'Instrument Sans', system-ui, sans-serif; --f-titulo: 'Newsreader', Georgia, serif; --peso-titulo: 400; --espaciado-titulo: -.015em; --alto-titulo: 1.02; --f-marca: 'Newsreader', Georgia, serif; --peso-marca: 500; --esp-marca: .005em; --tam-marca: 27px; --tam-nav: 12.5px; --esp-nav: .12em; --mayus-nav: uppercase; --peso-nav: 500; --fondo: #f7f6f2; --fondo-2: #ebe8e0; --tarjeta: #fbfaf7; --tinta: #16181d; --gris: #626670; --linea: #dedbd2; --banner-fondo: #ebe8e0; --anuncio-fondo: var(--marca); --anuncio-tinta: var(--sobre-marca); --pie-fondo: #16181d; --pie-tinta: #ecebe6; --pie-gris: #9a9da6; --pie-linea: #2c2f36; --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --mayus-btn: uppercase; --esp-btn: .14em; --tam-btn: 12px; --peso-btn: 600; --etq-fondo: #f7f6f2; --etq-tinta: #16181d; --proporcion: 3 / 4; --tam-hero: clamp(50px, 7.4vw, 110px); --tam-seccion: clamp(30px, 3.6vw, 46px); } body.sastreria .anuncio { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; } body.sastreria .banner h1, body.sastreria .banner h2 { max-width: 11ch; } body.sastreria .sec-cab { border-bottom: 1px solid var(--tinta); padding-bottom: 12px; margin-bottom: 6px; } body.sastreria .ver-todo { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; } body.sastreria .tarj .nom { font-family: var(--f-titulo); font-size: 18.5px; line-height: 1.25; } body.sastreria .tarj .precio { font-size: 14px; letter-spacing: .04em; } body.sastreria .cat-tarj b { font-family: var(--f-titulo); font-size: 23px; } body.sastreria .bloque-texto h2 { font-size: clamp(36px, 4.6vw, 64px); max-width: 16ch; line-height: 1.02; } body.sastreria .bloque-texto p { font-size: 17px; } body.sastreria .cat { border-color: #cfcbc0; } body.sastreria .cat.on { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); } body.sastreria .paso-n { font-family: var(--f-titulo); font-size: 30px; letter-spacing: 0; color: var(--tinta); } body.sastreria .cta-caja { background: transparent; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); } body.sastreria .faq summary { font-family: var(--f-titulo); font-size: 20px; } /* ═══ Vintage: papel, máquina de escribir, catálogo denso ═════════════ Young Serif en los títulos; Courier Prime en todo lo que es etiqueta (el anuncio, el menú, los precios, las categorías y los botones), como el cartoncito colgado de la percha. Cinco por fila, poco espacio. */ body.vintage { --f: 'DM Sans', system-ui, sans-serif; --f-titulo: 'Young Serif', Georgia, serif; --peso-titulo: 400; --espaciado-titulo: -.01em; --alto-titulo: 1.06; --f-marca: 'Young Serif', Georgia, serif; --peso-marca: 400; --esp-marca: 0; --tam-marca: 25px; --tam-nav: 13px; --esp-nav: .04em; --mayus-nav: uppercase; --peso-nav: 400; --fondo: #f3eee3; --fondo-2: #e7dfcd; --tarjeta: #f8f4ec; --tinta: #2b2620; --gris: #6f6556; --linea: #d9cfbb; --banner-fondo: #e7dfcd; --anuncio-fondo: var(--marca); --anuncio-tinta: var(--sobre-marca); --pie-fondo: #2b2620; --pie-tinta: #f3eee3; --pie-gris: #a89c88; --pie-linea: #463e33; --btn-fondo: #2b2620; --btn-tinta: #f3eee3; --mayus-btn: uppercase; --esp-btn: .06em; --tam-btn: 13.5px; --peso-btn: 700; --etq-fondo: #f3eee3; --etq-tinta: #2b2620; --proporcion: 3 / 4; --etiqueta: 12px; --esp-etiqueta: .06em; --tam-hero: clamp(42px, 6.2vw, 88px); --tam-seccion: clamp(26px, 3vw, 38px); font-synthesis: none; } body.vintage :is(.anuncio, .cab-nav a, .banner-btn, .btn-grande:not(.btn-wa), .btn-linea, .cat, .cat-min, .precio, .etq, .ver-todo, .paso-n, .opc-tit, .pie h4, .migas, .buscar, .orden, .talles-min, .mayor-info) { font-family: 'Courier Prime', 'Courier New', monospace; } body.vintage .anuncio { font-size: 12.5px; letter-spacing: .04em; } @media (min-width: 1000px) { body.vintage .grilla { gap: 36px 14px; } } body.vintage .tarj .info { padding-top: 10px; } body.vintage .tarj .nom { font-size: 14.5px; } body.vintage .tarj .precio { font-size: 14.5px; font-weight: 700; letter-spacing: 0; } body.vintage .etq { text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--tinta); letter-spacing: .06em; font-weight: 700; } body.vintage .etq-sin { box-shadow: inset 0 0 0 1px var(--gris); } body.vintage .cat { border-color: #cbbfa6; } body.vintage .cat.on { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); } body.vintage .cat-tarj b { font-family: var(--f-titulo); font-size: 19px; } body.vintage .paso-n { font-size: 14px; color: var(--marca); letter-spacing: .04em; font-weight: 700; } body.vintage .pasos-lista li { border-top: 1px dashed var(--tinta); } body.vintage .cta-caja { background: transparent; box-shadow: inset 0 0 0 1px var(--tinta); } /* ═══ Bebés: colores suaves, fotos cuadradas, portada partida ═════════ Outfit (geométrica, liviana) en todo: redonda sin ser infantil. El fondo de la portada y del anuncio es un tinte muy suave de tu color. */ body.bebes { --f: 'Outfit', system-ui, sans-serif; --f-titulo: var(--f); --peso-titulo: 400; --espaciado-titulo: -.02em; --alto-titulo: 1.03; --f-marca: var(--f); --peso-marca: 500; --esp-marca: 0; --tam-marca: 24px; --tam-nav: 15px; --esp-nav: .01em; --peso-nav: 400; --fondo: #fcfaf6; --fondo-2: #f3eee5; --tarjeta: #fff; --tinta: #2f3a36; --gris: #6c7672; --linea: #e8e2d7; --banner-fondo: color-mix(in srgb, var(--marca) 16%, #fcfaf6); --banner-tinta: #2f3a36; --anuncio-fondo: color-mix(in srgb, var(--marca) 18%, #fcfaf6); --anuncio-tinta: #2f3a36; --pie-fondo: #f3eee5; --pie-linea: #e5dccd; --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --tam-btn: 15.5px; --peso-btn: 500; --etq-fondo: #fff; --etq-tinta: #2f3a36; --peso-precio: 500; --radio: 4px; --radio-foto: 4px; --radio-btn: 4px; --proporcion: 1 / 1; --tam-hero: clamp(42px, 6vw, 80px); --tam-seccion: clamp(24px, 2.6vw, 34px); font-weight: 300; } body.bebes .anuncio { font-size: 13px; letter-spacing: .03em; font-weight: 400; } body.bebes .tarj .nom { font-size: 15.5px; font-weight: 400; } body.bebes .tarj .precio { font-size: 15px; } body.bebes .cat-foto { aspect-ratio: 1; } body.bebes .cat-tarj b { font-size: 17px; font-weight: 400; } body.bebes .etq { text-transform: none; letter-spacing: .02em; font-size: 12px; } body.bebes .ben-grilla { gap: 12px; } body.bebes .ben { padding: 22px; background: var(--fondo-2); border-radius: var(--radio); } body.bebes .ben-ic { color: var(--marca); } body.bebes .ben b { font-weight: 500; } body.bebes .paso-n { font-size: 26px; letter-spacing: 0; color: var(--marca); font-weight: 400; } body.bebes .pasos-lista li { border-top: 2px solid var(--marca); } body.bebes .cta-caja { background: var(--banner-fondo); } body.bebes .cat.on { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); } /* ═══ Curvy: letra con carácter, portada a pantalla completa ══════════ Bricolage Grotesque en todo, títulos enormes y apretados, fotos 3:4 y los talles de cada prenda a la vista (lo primero que se busca). */ body.curvy { --f: 'Bricolage Grotesque', system-ui, sans-serif; --f-titulo: var(--f); --peso-titulo: 700; --espaciado-titulo: -.035em; --alto-titulo: .94; --f-marca: var(--f); --peso-marca: 800; --esp-marca: -.03em; --tam-marca: 25px; --tam-nav: 15px; --esp-nav: 0; --peso-nav: 500; --fondo: #fff; --fondo-2: #f4efe9; --tarjeta: #fff; --tinta: #1b1614; --gris: #6e6560; --linea: #ebe4dd; --banner-fondo: #f4efe9; --anuncio-fondo: var(--marca); --anuncio-tinta: var(--sobre-marca); --pie-fondo: #1b1614; --pie-tinta: #f4efe9; --pie-gris: #a79d97; --pie-linea: #3a322e; --btn-fondo: var(--marca); --btn-tinta: var(--sobre-marca); --tam-btn: 16px; --peso-btn: 600; --esp-btn: 0; --etq-fondo: var(--marca); --etq-tinta: var(--sobre-marca); --peso-precio: 600; --proporcion: 3 / 4; --tam-hero: clamp(58px, 9.4vw, 140px); --tam-seccion: clamp(30px, 3.8vw, 52px); letter-spacing: 0; } body.curvy .anuncio { font-weight: 600; letter-spacing: .02em; font-size: 13px; } body.curvy .banner h1, body.curvy .banner h2 { max-width: 10ch; } body.curvy .banner.con-foto.letra-clara .banner-btn { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); } body.curvy .talles-min { display: block; font-size: 12.5px; margin-top: 3px; } body.curvy .tarj .nom { font-size: 16px; font-weight: 500; } body.curvy .tarj .precio { font-size: 16px; letter-spacing: 0; } body.curvy .cat-tarj b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; } body.curvy .etq { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; } body.curvy .img-txt h2 { font-size: clamp(34px, 4.4vw, 60px); } body.curvy .ben-ic, body.curvy .paso-n { color: var(--marca); } body.curvy .paso-n { font-size: 30px; font-weight: 700; letter-spacing: -.03em; } body.curvy .cta-caja { background: var(--marca); color: var(--sobre-marca); } body.curvy .cta-caja p { color: inherit; opacity: .84; } body.curvy .cta-caja .btn-wa { background: #1b1614; border-color: #1b1614; } /* ═══ Fiesta: marfil, mayúsculas finas, fotos a toda altura ═══════════ Marcellus (mayúsculas con remate, como de invitación) en los títulos y Mulish en el texto. Portada a pantalla completa con el texto al medio, tres por fila con fotos 2:3, todo centrado. */ body.fiesta { --f: 'Mulish', system-ui, sans-serif; --f-titulo: 'Marcellus', 'Trajan Pro', Georgia, serif; --peso-titulo: 400; --espaciado-titulo: .1em; --mayus-titulo: uppercase; --alto-titulo: 1.14; --f-marca: 'Marcellus', Georgia, serif; --peso-marca: 400; --esp-marca: .26em; --mayus-marca: uppercase; --tam-marca: 21px; --tam-nav: 11.5px; --esp-nav: .22em; --mayus-nav: uppercase; --peso-nav: 500; --fondo: #fbf8f3; --fondo-2: #f1ebe2; --tarjeta: #fffdf9; --tinta: #231f1c; --gris: #7b7168; --linea: #e8e0d4; --banner-fondo: #f1ebe2; --anuncio-fondo: #fbf8f3; --anuncio-tinta: #231f1c; --pie-fondo: #f1ebe2; --pie-linea: #e2d8c9; --btn-fondo: #231f1c; --btn-tinta: #fbf8f3; --mayus-btn: uppercase; --esp-btn: .24em; --tam-btn: 11px; --peso-btn: 600; --etq-fondo: #fbf8f3; --etq-tinta: #231f1c; --proporcion: 2 / 3; --tam-hero: clamp(36px, 5.8vw, 84px); --tam-seccion: clamp(22px, 2.4vw, 32px); font-weight: 300; font-synthesis: none; } body.fiesta .anuncio { letter-spacing: .22em; text-transform: uppercase; font-size: 10.5px; border-bottom: 1px solid var(--linea); } body.fiesta .banner h1, body.fiesta .banner h2 { max-width: 16ch; } body.fiesta .sec-cab { justify-content: center; flex-direction: column; align-items: center; margin-bottom: 20px; } body.fiesta .tit-seccion { text-align: center; } body.fiesta .ver-todo { text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; } body.fiesta .filtros { justify-content: center; } body.fiesta .cats { flex: 0 1 auto; } body.fiesta .cat { border: 0; background: none; padding: 6px 0; margin: 0 12px; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; color: var(--gris); } body.fiesta .cat.on { background: none; color: var(--tinta); box-shadow: inset 0 -1px 0 var(--tinta); } @media (min-width: 720px) { body.fiesta .grilla { gap: 68px 26px; } } body.fiesta .tarj .info { align-items: center; text-align: center; padding-top: 18px; gap: 6px; } body.fiesta .tarj .nom { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; } body.fiesta .tarj .precio { font-size: 13px; letter-spacing: .1em; } body.fiesta .muestras { justify-content: center; } body.fiesta .cat-tarj { align-items: center; } body.fiesta .cat-tarj b { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .16em; font-size: 14px; font-weight: 400; } body.fiesta .cat-tarj b::after { content: none; } body.fiesta .img-txt h2 { font-size: clamp(22px, 2.4vw, 30px); } body.fiesta .ben { align-items: center; text-align: center; } body.fiesta .ben-ic { color: var(--marca); } body.fiesta .cta-caja { justify-content: center; text-align: center; flex-direction: column; background: transparent; box-shadow: inset 0 0 0 1px var(--linea); } body.fiesta .faq-lista { margin-left: auto; margin-right: auto; } body.fiesta .preguntas .tit-seccion { text-align: center; } body.fiesta .faq summary { font-family: var(--f-titulo); letter-spacing: .06em; font-size: 16px; } /* ═══ Lo que arma cada negocio: encabezado, portada y estilo de sección ═══ Opciones acotadas (ventas_tienda.FORMA): cada una se resuelve con los tokens del diseño, así se ve bien en los veinte. Va al final para ganarle a las reglas de cada diseño. */ /* El encabezado: tamaño y forma del logo, menú al centro, tamaño del menú. */ .cab.logo-chico { --logo: 34px; } .cab.logo-grande { --logo: 58px; } .cab.logo-grande .cab-fila { height: 84px; } .cab.logo-original .marca img { width: auto; max-width: min(200px, 40vw); height: calc(var(--logo, 44px) * .86); border-radius: 0; object-fit: contain; } .cab.menu-chico { --k-nav: .9; } .cab.menu-grande { --k-nav: 1.16; } .cab.menu-grande .cab-nav { gap: 32px; } @media (min-width: 901px) { .cab.menu-centro .cab-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 58%) minmax(0, 1fr); } .cab.menu-centro .cab-nav { justify-content: center; } .cab.menu-centro .cab-acc { justify-self: end; } } @media (max-width: 900px) { .cab.logo-chico { --logo: 30px; } .cab.logo-grande { --logo: 44px; } .cab.logo-grande .cab-fila { height: 64px; } } /* Transparente encima de la portada; sólido al bajar (.solida). */ body.cab-sobre .cab-caja { position: fixed; top: 0; left: 0; right: 0; } body.cab-sobre .cab { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } body.cab-sobre .cab-caja:not(.solida) .cab { background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0)); color: #fff; border-bottom-color: transparent; } body.cab-sobre.cab-sobre-oscura .cab-caja:not(.solida) .cab { background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)); color: #121212; } body.cab-sobre .cab-caja:not(.solida) .cab .btn-carrito .n { background: #fff; color: #121212; } /* El logo con su forma (el nombre escrito) va en blanco sobre la portada oscura, como hacen los temas con "logo para encabezado transparente". */ body.cab-sobre:not(.cab-sobre-oscura) .cab-caja:not(.solida) .cab.logo-original .marca img { filter: brightness(0) invert(1); } body.cab-sobre .cuerpo > .banner:first-child .medio { min-height: calc(var(--cab-sobre-h, 0px) + 240px); } html.mini body.cab-sobre .cab-caja { position: static; } /* El estilo de cada sección: espaciado, ancho y fondo. --sep es el aire. */ .esp-compacto { --sep: clamp(20px, 3vw, 36px); } .esp-amplio { --sep: clamp(72px, 10vw, 148px); } body .cuerpo section:is(.esp-compacto, .esp-amplio), body .cuerpo .franja > section { padding-top: var(--sep, clamp(48px, 6vw, 88px)); } .ancho-completo { --ancho: 100%; } .franja { --sep: clamp(48px, 6vw, 88px); margin-top: var(--sep); padding-bottom: var(--sep); } .franja + .franja { margin-top: 0; } .franja.fondo-suave { background: var(--fondo-alt); --fondo-2: var(--fondo-base); } .franja.fondo-marca { background: var(--marca-base); color: var(--sobre-base); --marca: var(--sobre-base); --sobre-marca: var(--marca-base); --tinta: var(--sobre-base); --gris: color-mix(in srgb, var(--sobre-base) 74%, var(--marca-base)); --linea: color-mix(in srgb, var(--sobre-base) 24%, var(--marca-base)); --fondo: var(--marca-base); --fondo-2: color-mix(in srgb, var(--sobre-base) 11%, var(--marca-base)); --tarjeta: color-mix(in srgb, var(--sobre-base) 7%, var(--marca-base)); --precio: var(--sobre-base); --leyenda: var(--gris); --btn-fondo: var(--sobre-base); --btn-tinta: var(--marca-base); --etq-fondo: var(--sobre-base); --etq-tinta: var(--marca-base); } .franja.fondo-oscuro { background: #141414; color: #f2f1ee; color-scheme: dark; --fondo: #141414; --fondo-2: #1f1f1f; --tarjeta: #1a1a1a; --tinta: #f2f1ee; --gris: #a9a7a1; --linea: #2f2f2f; --precio: #fff; --leyenda: #a9a7a1; --btn-fondo: #f2f1ee; --btn-tinta: #141414; --etq-fondo: #f2f1ee; --etq-tinta: #141414; } .franja.fondo-claro { background: #fbfaf8; color: #17161a; color-scheme: light; --fondo: #fbfaf8; --fondo-2: #f0eee9; --tarjeta: #fff; --tinta: #17161a; --gris: #6b6870; --linea: #e4e1db; --precio: #17161a; --leyenda: #6b6870; } .franja :is(.bloque-texto p, .img-txt p, .cta-caja p, .ben p, .pasos-lista p, .faq p, .contacto-txt p) { color: var(--gris); } /* Los diseños que pintan tarjetas blancas (vitrina, mayorista) las dejan blancas con su letra oscura dentro de una franja oscura o de color. */ body:is(.vitrina, .mayorista) .franja:is(.fondo-marca, .fondo-oscuro) :is(.tarj, .pasos-lista li, .cta-caja, .contacto-datos, .cat:not(.on)) { --tinta: var(--tinta-base); --gris: #6b6b6b; --linea: #e6e6e6; --precio: var(--tinta-base); --leyenda: #6b6b6b; --marca: var(--marca-base); --sobre-marca: var(--sobre-base); --fondo: #fff; --fondo-2: #f4f4f4; --tarjeta: #fff; --btn-fondo: var(--marca-base); --btn-tinta: var(--sobre-base); background: #fff; color: var(--tinta-base); } body.feria .franja.fondo-marca .cta-caja { background: var(--fondo-2); } /* Y los oscuros (urbano, lujo), sus cajas oscuras claras en una franja clara. */ body:is(.urbano, .lujo) .franja.fondo-claro .contacto-datos { background: var(--fondo-2); } body:is(.urbano, .lujo) .franja.fondo-claro :is(.buscar, .orden, .cat:not(.on), .opc) { background: #fff; border-color: var(--linea); } body.urbano .franja.fondo-claro .etq-sin { background: #fff; color: #17161a; } body.lujo .franja.fondo-claro { --btn-tinta: #17161a; } body.lujo .franja.fondo-claro .cta-caja { box-shadow: inset 0 0 0 1px var(--linea); }