/* ============================================================================ KOVA GRMNT — tienda en línea ---------------------------------------------------------------------------- LA IDEA: silencio. Mucho blanco, poca línea, nada que grite. La mercancía es lo único que tiene color en esta página; todo lo demás se quita del camino. LA SEÑA DE LA CASA es la portada: una noche que se abre al día. El negro entra por arriba, se difumina y termina siendo el blanco de la página, sin una raya que diga dónde acabó. Esa disolución es lo único llamativo del sitio, y por eso pasa una sola vez. DE DÓNDE SALE EL GRIS: el logo de Kova es tinta sobre papel, sin una gota de calidez. Los grises de aquí son neutros por eso. Si alguien los "mejora" con un crema o un beige, dejan de empatar con la marca impresa. UN SOLO COLOR EN TODO EL SITIO: el verde de WhatsApp, y nada más que en el botón que manda el pedido y en el que flota. La página tiene un trabajo; ese botón es el trabajo. TODO ES REDONDEADO, y con el mismo radio. Antes todo era de esquina viva. Si algún día se vuelve a cuadrar algo, se cuadra todo: la mezcla delata que nadie decidió nada. ============================================================================ */ :root { color-scheme: light dark; --papel: #FFFFFF; --superficie: #F5F5F7; /* el gris donde se recuestan las fotos */ --tinta: #1D1D1F; --humo: #6E6E73; --linea: #E6E6EB; --linea-fuerte: #D2D2D7; /* El fondo contra el que se recuesta la foto de un producto. Es BLANCO en los dos modos, y no el gris de las superficies: casi toda foto de catálogo viene recortada sobre blanco, así que cualquier otro color deja un rectángulo duro alrededor de la pieza. Con blanco no hay costura: la pieza flota. */ --marco-foto: #FFFFFF; /* El color CONTRARIO al de la página. Es el que entra por arriba de la portada y se deshace. Manda el color de la barra: con barra blanca la portada es mayormente blanca y lo negro es la difusión; con barra negra, al revés. El contrario nunca es el que domina. */ --contra: #000000; /* El verde de WhatsApp tal cual, con tinta verde muy oscura encima: 7.47:1 de contraste, muy por arriba del 4.5 que pide WCAG AA. Con texto blanco este mismo verde da 3.09 y no pasa; oscurecer el verde para poder usar blanco lo aleja del color que la gente reconoce. */ --verde: #25D366; --verde-vivo: #1FBE5B; --verde-tinta: #0A2E18; /* Jost es una geométrica de la familia de Futura. Se usa para todo lo que se lee de lejos: titulares, precios, botones y etiquetas. A cuerpo grande y peso ligero se ve calmada y cara, y ahí está casi todo el tono de la página. Además le hace eco al logo: la "o" y la "a" de KOVA son círculos casi perfectos. Archivo se queda solo para los párrafos: a 15 px una geométrica cansa la vista y Archivo no. */ --display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif; --etiqueta: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif; --texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Un solo radio para todo. La pastilla de los botones es aparte. */ --r: 18px; --r-chico: 12px; --pastilla: 980px; --ancho: 1320px; --marco: clamp(20px, 5vw, 64px); /* Capas. Se declaran aquí para no andar inventando z-index sueltos. */ --z-barra: 40; --z-velo: 50; --z-hoja: 60; } /* ------------------------------ Claro y oscuro ---------------------------- */ /* Tres casos, y hacen falta los tres: 1. Sin elegir nada, manda el celular o la computadora. 2. Si la persona escogió CLARO, se queda claro aunque su teléfono esté en oscuro. 3. Si escogió OSCURO, se queda oscuro aunque sea de día. El interruptor de la barra pone data-tema en el . Sin el `:not()` del caso 1, escoger claro no serviría de nada en un teléfono en modo oscuro: la regla del sistema ganaría por ir después. En oscuro el papel es negro de verdad, no gris: así la portada, que SIEMPRE es negra, se funde con la página en vez de flotar sobre ella. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --papel: #000000; --superficie: #1C1C1E; --tinta: #F5F5F7; --humo: #8E8E93; --linea: #2A2A2D; --linea-fuerte: #3A3A3D; /* --marco-foto se queda BLANCO también aquí: casi toda foto de catálogo viene recortada sobre blanco, y cualquier otro color deja un rectángulo duro alrededor de la pieza. Un recuadro claro sobre el negro además hace que la mercancía salte, que es lo que tiene que pasar. */ --contra: #FFFFFF; } } :root[data-tema="oscuro"] { --papel: #000000; --superficie: #1C1C1E; --tinta: #F5F5F7; --humo: #8E8E93; --linea: #2A2A2D; --linea-fuerte: #3A3A3D; /* --marco-foto se queda BLANCO también aquí: casi toda foto de catálogo viene recortada sobre blanco, y cualquier otro color deja un rectángulo duro alrededor de la pieza. Un recuadro claro sobre el negro además hace que la mercancía salte, que es lo que tiene que pasar. */ --contra: #FFFFFF; } /* Para que los controles del navegador —barras de scroll, campos— vayan del mismo color que la página cuando se escoge a mano. */ :root[data-tema="claro"] { color-scheme: light; } :root[data-tema="oscuro"] { color-scheme: dark; } * { box-sizing: border-box; } /* El atributo `hidden` lo pisa cualquier regla de display que uno escriba después. Sin esto, el botón del pedido se quedaba visible marcando "0". */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; } /* Para quien navega con teclado: el primer tabulador salta al catálogo. */ .saltar { position: absolute; left: -9999px; z-index: 200; padding: 12px 20px; border-radius: var(--pastilla); background: var(--tinta); color: var(--papel); font-family: var(--etiqueta); font-size: 13px; text-decoration: none; } .saltar:focus { left: 12px; top: 12px; } /* El grano de papel se fue con el rediseño: le metía ruido a una página cuyo punto entero es que no tenga ninguno. La clase se queda por si el HTML todavía la trae, pero ya no dibuja nada. */ .grano { display: none; } /* El logo cambia de color con el modo; la silueta es idéntica. Misma regla de tres casos que la paleta: si se escogió a mano, manda la elección. */ .marca--oscuro { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .marca--claro { display: none; } :root:not([data-tema="claro"]) .marca--oscuro { display: block; } } :root[data-tema="oscuro"] .marca--claro { display: none; } :root[data-tema="oscuro"] .marca--oscuro { display: block; } :root[data-tema="claro"] .marca--claro { display: block; } :root[data-tema="claro"] .marca--oscuro { display: none; } /* Solo para lectores de pantalla: la etiqueta del buscador. */ .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ============================== Barra ==================================== */ /* Traslúcida y desenfocada, como vidrio: la página se ve correr por debajo en vez de esconderse detrás de una banda opaca. */ .barra { position: sticky; top: 0; z-index: var(--z-barra); display: flex; align-items: center; gap: 16px; height: 62px; padding: 0 var(--marco); background: color-mix(in srgb, var(--papel) 78%, transparent); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid var(--linea); } /* Donde no haya desenfoque, opaca: medio transparente y sin blur se lee el catálogo por debajo del logo. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .barra { background: var(--papel); } } .barra__marca { display: block; line-height: 0; flex: 0 0 auto; } .barra__marca img { height: 28px; width: auto; } @media (min-width: 760px) { .barra { height: 70px; gap: 24px; } .barra__marca img { height: 34px; } } .barra__buscar { flex: 1 1 auto; min-width: 0; display: block; max-width: 480px; } @media (min-width: 1100px) { .barra__buscar { margin-inline: auto; } } .barra__buscar input { width: 100%; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--pastilla); background: var(--superficie); color: var(--tinta); font-family: var(--texto); font-size: .92rem; transition: border-color .18s ease, background .18s ease; -webkit-appearance: none; appearance: none; } .barra__buscar input::placeholder { color: var(--humo); } .barra__buscar input:focus { outline: none; border-color: var(--linea-fuerte); background: var(--papel); } .barra__buscar input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; } /* La equis de borrar que pone Chrome viene azul y rompe el blanco y negro de toda la página. Se dibuja una propia, del color de la tinta, que además se voltea sola en modo oscuro porque hereda `currentColor`. */ .barra__buscar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; cursor: pointer; opacity: .4; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2 L14 14 M14 2 L2 14' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2 L14 14 M14 2 L2 14' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; } .barra__buscar input::-webkit-search-cancel-button:hover { opacity: 1; } .barra__acciones { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-left: auto; } /* El carrito. Un icono y su contador, nada de texto: la barra ya carga el logo y el buscador, y "PEDIDO 0" ocupaba el triple para decir lo mismo. */ .carrito { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--tinta); cursor: pointer; transition: background .18s ease; } .carrito:hover { background: var(--superficie); } .carrito svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; } /* El contador se monta en la esquina, no adentro: adentro empujaba el icono y el carrito cambiaba de ancho cada vez que se agregaba una pieza. */ .carrito__cuenta { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border-radius: var(--pastilla); background: var(--tinta); color: var(--papel); font-family: var(--etiqueta); font-weight: 500; font-size: 11px; line-height: 1; } /* El interruptor de claro y oscuro. Del mismo tamaño y forma que el carrito: son los dos únicos botones de la barra y no tienen por qué verse distintos. Solo se dibuja uno de los dos iconos a la vez. */ .tema { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--tinta); cursor: pointer; transition: background .18s ease; } .tema:hover { background: var(--superficie); } .tema svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } /* Se enseña el icono de LO QUE VA A PASAR al apretarlo, no el del estado en que se está: un sol cuando la página está oscura quiere decir "ponla clara". Al revés, la gente lo aprieta esperando lo contrario. */ .tema__sol { display: none; } .tema__luna { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .tema__sol { display: block; } :root:not([data-tema="claro"]) .tema__luna { display: none; } } :root[data-tema="oscuro"] .tema__sol { display: block; } :root[data-tema="oscuro"] .tema__luna { display: none; } :root[data-tema="claro"] .tema__sol { display: none; } :root[data-tema="claro"] .tema__luna { display: block; } /* ============================= Portada =================================== */ /* LA SEÑA DE LA CASA. Una luz que solo aparece a media portada. ARRIBA Y ABAJO VA EL COLOR DE LA PÁGINA, los dos. Arriba tiene que empatar con la barra y abajo con el catálogo: en ninguno de los dos bordes se debe notar dónde empieza ni dónde acaba la portada. El color contrario entra, llega a su punto más fuerte a media altura y se vuelve a ir. Con barra negra es una luz blanca en medio de lo negro; con barra blanca, una sombra en medio de lo blanco. POR QUÉ LA LUZ SE MIDE EN PÍXELES Y NO EN PORCENTAJE Es la parte importante y costó un error en vivo. La luz ocupa EXACTAMENTE el relleno de abajo, ni un pixel más: las dos cosas salen de la misma variable, --luz-alto. Así el texto, que vive arriba de ese relleno, no puede caerle encima nunca. En porcentaje no se cumplía. El bloque de texto mide lo mismo siempre, pero la portada cambia de alto con la ventana: en una pantalla chaparra el texto bajaba hasta el 55% y la luz empezaba en el 20%, así que la bajada y el botón quedaban escritos encima de la sombra y no se leían. Se veía bien en la pantalla en que se probó y mal en la del cliente. Si alguien sube --luz-alto, el relleno crece con ella y el texto sigue a salvo. Si alguien las separa, vuelve el error. */ .portada { --luz-alto: clamp(300px, 48vh, 500px); position: relative; isolation: isolate; display: flex; align-items: flex-start; justify-content: center; padding: clamp(54px, 8vh, 96px) var(--marco) var(--luz-alto); background: var(--papel); color: var(--tinta); text-align: center; overflow: hidden; } /* La luz ocupa el relleno de abajo y nada más. Entra desde arriba de esa caja, sube a su punto más fuerte en el primer tercio y se va antes de llegar al borde, para entregarle al catálogo la página limpia. */ .portada::before { content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: 0; height: var(--luz-alto); z-index: -1; background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--contra) 34%, transparent) 22%, color-mix(in srgb, var(--contra) 80%, transparent) 40%, color-mix(in srgb, var(--contra) 34%, transparent) 68%, transparent 97%), radial-gradient(66% 42% at 50% 42%, color-mix(in srgb, var(--contra) 38%, transparent), transparent 76%); pointer-events: none; } .portada__dicho { position: relative; z-index: 1; width: 100%; max-width: 760px; margin: 0 auto; } .portada h1 { font-family: var(--display); /* Peso ligero a cuerpo grande. El titular pesa por tamaño, no por grosor: es lo que separa una tienda de ropa de un letrero de oferta. */ font-weight: 400; font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; margin: 0 0 22px; } .portada__bajada { max-width: 46ch; margin: 0 auto 34px; font-size: 1.02rem; line-height: 1.65; color: var(--humo); text-wrap: pretty; } /* ---------------------------- El dibujo de fondo -------------------------- */ /* El tendido de mercancía trazado a línea. Se quedó del diseño anterior pero bajadísimo: aquí ya no es una ilustración, es la textura que impide que el negro se vea como un rectángulo pintado. */ .portada__lienzo { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .portada__imagen, .trazo { position: absolute; inset: 0; width: 100%; height: 100%; } /* La foto, cuando la haya. Va ENCIMA del dibujo en vez de en su lugar: si el archivo no existe basta con quitarla para que abajo ya esté el dibujo. */ .portada__imagen { z-index: 1; object-fit: cover; filter: grayscale(1) contrast(.9); opacity: .3; } .trazo { color: var(--tinta); } .trazo :is(path, rect, circle, ellipse) { fill: none; stroke: currentColor; stroke-linejoin: round; stroke-linecap: round; /* El grosor no se escala con la pieza: sin esto, la gorra reducida al 65% sale con línea más delgada que la playera y el dibujo se ve de dos manos distintas. */ vector-effect: non-scaling-stroke; } .trazo__fondo { stroke-width: 1; opacity: .07; } .trazo__frente { stroke-width: 1; opacity: .11; } /* En pantalla chica el recorte apaisado le corta la diadema a los audífonos y deja aros sueltos. Ahí no va. */ @media (max-width: 899px) { .portada__lienzo--sin-foto { display: none; } } /* ========================== Acaba de llegar ============================== */ .nuevo { max-width: var(--ancho); margin: 0 auto; padding: 8px 0 30px; } .nuevo__titulo { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 3.2vw, 1.9rem); letter-spacing: -.025em; margin: 0 var(--marco) 20px; } /* Tira lateral con enganche: se ojea, no se compara. Es un ritmo distinto al de la rejilla de abajo a propósito. */ .tira { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--marco) 6px; } .tira::-webkit-scrollbar { display: none; } .tira .pieza { flex: 0 0 clamp(190px, 44vw, 260px); scroll-snap-align: start; } /* ========================== Para quién =================================== */ /* HOMBRE / MUJER. Pesa más que las categorías a propósito: es la primera pregunta que se hace quien entra a una tienda de ropa, y la categoría es la segunda. NO es pegajosa, a diferencia de las categorías: el departamento se escoge una vez al entrar, mientras que de categoría se brinca a cada rato. Dos barras pegadas una encima de otra se comen media pantalla de celular. */ .departamentos { display: flex; justify-content: center; gap: clamp(22px, 5vw, 44px); overflow-x: auto; scrollbar-width: none; max-width: var(--ancho); margin: 0 auto; padding: 40px var(--marco) 4px; } .departamentos::-webkit-scrollbar { display: none; } .depto { flex: 0 0 auto; padding: 0; border: none; background: transparent; color: var(--humo); font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 3.6vw, 1.8rem); letter-spacing: -.028em; cursor: pointer; white-space: nowrap; transition: color .18s ease; } .depto:hover { color: var(--tinta); } .depto[aria-pressed="true"] { color: var(--tinta); } /* ========================== Categorías =================================== */ /* Pastillas, centradas. Con el radio de todo el sitio y sin líneas: la barra de categorías no necesita marco, se entiende sola por el contraste de la que está puesta. */ .filtros { display: flex; justify-content: flex-start; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: var(--ancho); margin: 0 auto; padding: 26px var(--marco) 4px; } .filtros::-webkit-scrollbar { display: none; } @media (min-width: 760px) { .filtros { justify-content: center; } } .filtro { flex: 0 0 auto; padding: 9px 17px; border: none; border-radius: var(--pastilla); background: var(--superficie); color: var(--humo); font-family: var(--etiqueta); font-weight: 400; font-size: 14px; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: background .18s ease, color .18s ease; } .filtro:hover { color: var(--tinta); } .filtro[aria-pressed="true"] { background: var(--tinta); color: var(--papel); } /* ============================== Rejilla ================================== */ .rejilla { max-width: var(--ancho); margin: 0 auto; padding: 34px var(--marco) 110px; display: grid; gap: 40px 18px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .rejilla { grid-template-columns: repeat(3, 1fr); gap: 52px 26px; } } @media (min-width: 1120px) { .rejilla { grid-template-columns: repeat(4, 1fr); } } .pieza { display: flex; flex-direction: column; border: none; background: transparent; padding: 0; text-align: left; cursor: pointer; color: inherit; opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; } .pieza--dentro { opacity: 1; transform: none; } /* La foto se recuesta dentro de un gris, no llena el hueco. Casi toda foto de catálogo viene recortada sobre blanco: con `cover` y sin aire, el producto llega pegado al filo y se ve como un error de recorte, no como una foto. */ .pieza__foto { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r); background: var(--marco-foto); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; padding: clamp(14px, 2.4vw, 26px); transition: transform .4s cubic-bezier(.16,1,.3,1); } .pieza__foto img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.16,1,.3,1); } .pieza:hover .pieza__foto img { transform: scale(1.045); } .pieza:active .pieza__foto { transform: scale(.985); } .pieza__sinfoto { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--etiqueta); font-size: 12px; color: var(--humo); } .pieza__ultimas { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: var(--pastilla); background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FFFFFF; font-family: var(--etiqueta); font-weight: 400; font-size: 11px; letter-spacing: .01em; } .pieza__nombre { font-family: var(--display); font-weight: 400; font-size: 1.02rem; line-height: 1.3; letter-spacing: -.018em; margin: 16px 0 0; text-wrap: pretty; } .pieza__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 5px; } .pieza__marca { font-family: var(--etiqueta); font-size: 13px; color: var(--humo); } .pieza__precio { font-family: var(--etiqueta); font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .pieza__precio .desde { font-size: 12px; color: var(--humo); margin-right: 4px; } /* -------------------------------------------------------------------------- LA ETIQUETA. Es la firma de la página, y por eso NO va en todas partes. Una marca de ropa se reconoce por la etiqueta cosida por dentro: chica, el dato a la izquierda y el valor a la derecha. Aquí resuelve algo real, porque esta tienda vende playeras Y fundas y cada categoría nombra distinto sus dos datos. En la rejilla se enseña solo al pasar el cursor, y siempre en la ficha. Si saliera en las veinte tarjetas a la vez dejaría de ser una firma y sería papel tapiz. -------------------------------------------------------------------------- */ .etiqueta { padding-top: 8px; margin-top: 8px; font-family: var(--etiqueta); font-size: 13px; color: var(--humo); } .etiqueta__fila { display: flex; justify-content: space-between; gap: 12px; line-height: 1.7; } .etiqueta__fila b { color: var(--tinta); font-weight: 400; } @media (hover: hover) and (min-width: 760px) { .pieza .etiqueta { max-height: 0; margin-top: 0; padding-top: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease, padding-top .3s ease; } .pieza:hover .etiqueta, .pieza:focus-visible .etiqueta { max-height: 90px; margin-top: 8px; padding-top: 8px; opacity: 1; } } /* ========================= Vacío, error, carga =========================== */ .cargando, .vacio { grid-column: 1 / -1; padding: 110px 10px; text-align: center; color: var(--humo); font-family: var(--etiqueta); font-size: 14px; } .vacio b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: -.03em; color: var(--tinta); margin-bottom: 14px; } .vacio span { display: block; max-width: 46ch; margin: 0 auto; font-family: var(--texto); font-size: .95rem; line-height: 1.65; } /* Al cargar, huecos con la forma de lo que va a llegar. Una ruedita girando no dice nada; esto ya enseña la maqueta. */ .hueso { grid-column: span 1; } .hueso__foto { aspect-ratio: 1 / 1; border-radius: var(--r); background: var(--superficie); position: relative; overflow: hidden; } .hueso__foto::after, .hueso__linea::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(128,128,128,.12), transparent); animation: brillo 1.4s infinite; } .hueso__linea { position: relative; overflow: hidden; height: 12px; border-radius: var(--pastilla); margin-top: 16px; background: var(--superficie); } .hueso__linea--corta { width: 45%; margin-top: 8px; } @keyframes brillo { to { transform: translateX(100%); } } /* ============================ Ficha y cajón ============================== */ .velo { position: fixed; inset: 0; z-index: var(--z-velo); background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: aparecer .22s ease; } @keyframes aparecer { from { opacity: 0 } } .ficha, .cajon { position: fixed; z-index: var(--z-hoja); background: var(--papel); overflow-y: auto; -webkit-overflow-scrolling: touch; left: 0; right: 0; bottom: 0; max-height: 92dvh; border-radius: var(--r) var(--r) 0 0; padding: 26px var(--marco) calc(26px + env(safe-area-inset-bottom)); animation: subir .32s cubic-bezier(.22,.68,.36,1); } @keyframes subir { from { transform: translateY(100%) } } @media (min-width: 860px) { .ficha { left: 50%; right: auto; bottom: auto; top: 50%; width: min(1020px, 92vw); max-height: 88dvh; transform: translate(-50%, -50%); border-radius: var(--r); padding: 0; box-shadow: 0 30px 90px rgba(0,0,0,.22); animation: centrar .28s cubic-bezier(.16,1,.3,1); } @keyframes centrar { from { opacity: 0; transform: translate(-50%, -45%) } } .cajon { left: auto; right: 0; top: 0; bottom: 0; width: min(460px, 96vw); max-height: none; border-radius: 0; padding: 34px 32px; box-shadow: -20px 0 60px rgba(0,0,0,.16); animation: entrar .3s cubic-bezier(.22,.68,.36,1); } @keyframes entrar { from { transform: translateX(100%) } } } .cerrar { position: absolute; top: 16px; right: 16px; z-index: 2; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--superficie); color: var(--tinta); font-size: 15px; line-height: 1; cursor: pointer; transition: background .18s ease, transform .16s ease; } .cerrar:hover { background: var(--linea-fuerte); } .cerrar:active { transform: scale(.94); } .ficha__cuerpo { display: grid; } @media (min-width: 860px) { .ficha__cuerpo { grid-template-columns: 1fr 1fr; align-items: stretch; } } /* `contain` y no `cover`: lo que importa aquí es ver la pieza completa, no llenar el rectángulo. */ .ficha__foto { position: relative; aspect-ratio: 1 / 1; background: var(--marco-foto); padding: clamp(20px, 3.4vw, 40px); border-radius: var(--r) var(--r) 0 0; box-shadow: inset 0 0 0 1px var(--linea); } @media (min-width: 860px) { .ficha__foto { aspect-ratio: auto; border-radius: var(--r) 0 0 var(--r); } } .ficha__foto img { width: 100%; height: 100%; object-fit: contain; } /* Si hay tira de miniaturas, se le hace lugar abajo. Sin esto la tira se recuesta sobre la propia foto, y en un producto recortado sobre blanco las miniaturas quedaban flotando encima de la pieza. */ .ficha__foto:has(.ficha__tira) { padding-bottom: calc(clamp(20px, 3.4vw, 40px) + 66px); } .ficha__tira { position: absolute; left: clamp(20px, 3.4vw, 40px); right: clamp(20px, 3.4vw, 40px); bottom: clamp(20px, 3.4vw, 40px); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .ficha__tira::-webkit-scrollbar { display: none; } .ficha__mini { flex: 0 0 auto; width: 54px; height: 54px; padding: 4px; border: 1px solid transparent; border-radius: var(--r-chico); background: #FFFFFF; cursor: pointer; opacity: .6; transition: opacity .18s ease, border-color .18s ease; } .ficha__mini:hover { opacity: 1; } .ficha__mini img { width: 100%; height: 100%; object-fit: contain; } .ficha__mini--puesta { opacity: 1; /* Sobre una miniatura blanca el filo tiene que ser oscuro siempre, no seguir al tema: en oscuro, --tinta es casi blanco y desaparecía. */ border-color: #1D1D1F; } .ficha__datos { padding: 28px 0 0; } @media (min-width: 860px) { .ficha__datos { padding: 44px 40px; } } .ficha h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1.1; letter-spacing: -.032em; text-wrap: balance; margin: 0 0 6px; } .ficha__marca { font-family: var(--etiqueta); font-size: 14px; color: var(--humo); margin: 0 0 20px; } .ficha__desc { font-size: .95rem; line-height: 1.65; color: var(--humo); max-width: 52ch; margin: 0 0 26px; } .grupo { margin-bottom: 22px; } .grupo__nombre { display: block; font-family: var(--etiqueta); font-size: 13px; color: var(--humo); margin-bottom: 10px; } .opciones { display: flex; flex-wrap: wrap; gap: 8px; } .opcion { min-width: 46px; padding: 10px 17px; border: none; border-radius: var(--pastilla); background: var(--superficie); color: var(--tinta); font-family: var(--etiqueta); font-size: 14px; cursor: pointer; transition: background .16s ease, color .16s ease, transform .12s ease; } .opcion:hover:not(:disabled) { background: var(--linea-fuerte); } .opcion:active:not(:disabled) { transform: scale(.96); } .opcion[aria-pressed="true"] { background: var(--tinta); color: var(--papel); } .opcion:disabled { color: var(--linea-fuerte); cursor: not-allowed; text-decoration: line-through; } .ficha__precio { font-family: var(--display); font-weight: 400; font-size: 1.9rem; letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin: 26px 0 8px; } /* Cuántas quedan, debajo del precio. En gris cuando hay de sobra y en tinta llena cuando ya quedan pocas: la urgencia se dice con el contraste, no con un color de alarma que en una tienda se vuelve ruido de tanto salir. */ .ficha__existe { font-family: var(--etiqueta); font-size: 14px; color: var(--humo); margin: 0 0 22px; } .ficha__existe--poco { color: var(--tinta); } /* ============================ Botones ==================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 26px; border: 1px solid var(--tinta); border-radius: var(--pastilla); background: var(--tinta); color: var(--papel); font-family: var(--etiqueta); font-weight: 400; font-size: 15px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: opacity .18s ease, transform .14s ease; } .btn:hover:not(:disabled) { opacity: .86; } .btn:active:not(:disabled) { transform: scale(.985); } .btn:disabled { background: var(--superficie); border-color: var(--superficie); color: var(--humo); cursor: not-allowed; } /* El de la portada: de contorno, para no competir con el de cobrar, que es el único que tiene color en todo el sitio. */ .btn--linea { width: auto; background: transparent; border-color: var(--linea-fuerte); color: var(--tinta); } .btn--linea:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); opacity: 1; } /* El único color del sitio, en el único botón que hace el trabajo. */ .btn--wa { background: var(--verde); border-color: var(--verde); color: var(--verde-tinta); } .btn--wa:hover { background: var(--verde-vivo); border-color: var(--verde-vivo); opacity: 1; } /* ============================== Pedido =================================== */ .cajon h2 { font-family: var(--display); font-weight: 400; font-size: 1.7rem; letter-spacing: -.03em; margin: 0 0 22px; } .renglon { display: grid; grid-template-columns: 62px 1fr auto; gap: 15px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--linea); } .renglon__foto { width: 62px; height: 62px; object-fit: contain; padding: 6px; border-radius: var(--r-chico); background: var(--marco-foto); } .renglon__nombre { font-family: var(--display); font-weight: 400; font-size: .98rem; line-height: 1.3; letter-spacing: -.015em; } .renglon__etq { font-family: var(--etiqueta); font-size: 12.5px; color: var(--humo); margin-top: 3px; } .renglon__precio { font-family: var(--etiqueta); font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .contador { display: inline-flex; align-items: center; margin-top: 10px; border-radius: var(--pastilla); background: var(--superficie); } .contador button { width: 32px; height: 32px; border: none; border-radius: 50%; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; transition: background .16s ease; } .contador button:hover:not([disabled]) { background: var(--linea-fuerte); } .contador button[disabled] { opacity: .3; cursor: not-allowed; } .contador span { min-width: 34px; text-align: center; font-family: var(--etiqueta); font-size: 14px; font-variant-numeric: tabular-nums; } .total { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 0 20px; font-family: var(--display); font-weight: 400; } .total .etq { font-size: 15px; color: var(--humo); } .total .val { font-size: 1.9rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .cajon__nota { font-size: .85rem; color: var(--humo); text-align: center; margin: 16px 0 0; line-height: 1.55; } /* ---------------------- WhatsApp, flotante y siempre ---------------------- */ /* Fuera de la barra. Ahí competía con el carrito, que es lo que la tienda quiere que se apriete; abajo a la derecha está a la mano todo el rato sin estorbar, y es donde la gente ya lo busca. */ .wa { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: var(--z-barra); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--verde); color: #FFFFFF; box-shadow: 0 8px 26px rgba(0, 0, 0, .22); transition: transform .2s cubic-bezier(.16,1,.3,1), background .16s ease; } .wa:hover { background: var(--verde-vivo); transform: scale(1.06); } .wa:active { transform: scale(.96); } .wa svg { width: 28px; height: 28px; fill: currentColor; stroke: none; } /* =============================== Pie ===================================== */ .pie { border-top: 1px solid var(--linea); padding: 64px var(--marco) calc(56px + env(safe-area-inset-bottom)); max-width: var(--ancho); margin: 0 auto; text-align: center; } .pie__marca { line-height: 0; margin-bottom: 26px; } .pie__marca img { height: 40px; width: auto; margin: 0 auto; } .pie__datos { font-family: var(--etiqueta); font-size: 14px; color: var(--humo); line-height: 2.1; } .pie__datos a { color: var(--tinta); text-decoration: none; transition: opacity .16s ease; } .pie__datos a:hover { opacity: .6; } .pie__nota { font-size: .82rem; color: var(--humo); margin: 26px 0 0; } /* ============================== Aviso ==================================== */ /* El letrero de "solo quedan 3". Va fijo abajo al centro, encima de todo —incluido el cajón del pedido, que es justo donde se le pica al + y donde tiene que verse. Se quita solo. */ .aviso { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: calc(var(--z-hoja) + 10); max-width: min(420px, calc(100vw - 32px)); padding: 14px 22px; border-radius: var(--pastilla); background: var(--tinta); color: var(--papel); font-family: var(--etiqueta); font-size: 14px; line-height: 1.45; text-align: center; box-shadow: 0 10px 34px rgba(0, 0, 0, .26); } /* ========================= Movimiento reducido =========================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .pieza { opacity: 1; transform: none; } }