/* ===================================================================== goodlook — hoja de estilos de la tienda --------------------------------------------------------------------- Está escrita a mano, sin frameworks: no hay Bootstrap ni Tailwind que descargar. Todo lo que ves acá se sirve desde tu propio servidor. Esta es la hoja BASE: define las variables, la tipografía, los botones, los formularios y el marco del sitio. Después se cargan otras hojas encima (tarjetas.css, encabezado.css, hero.css, carrusel.css, portada.css…) que pisan a propósito algunas cosas de acá. Eso no es un error: en CSS, cuando dos reglas discuten con la misma fuerza, gana la que se leyó última. Lo que se define acá es el piso del que parten todas. Organización: 1. Variables de color y medidas 2. Reset y tipografía 3. Estructura (contenedor, grillas) 4. Encabezado, menú de celular y barra de categorías 5. Botones 6. Tarjetas de producto 7. Formularios 8. Avisos (éxito / error) 9. Carrito y checkout 10. Pie de página 11. Adaptación a celular Tres ideas atraviesan todo el archivo, y si hay que tocar algo conviene respetarlas porque son las que hacen que se vea de marca y no casero: · Los títulos son GRANDES y el texto de al lado es chico. El salto entre uno y otro es lo que hace la jerarquía. · Los rótulos ("CATEGORÍAS", "TIENDA", "MUJER") van siempre igual: letra chica, mayúsculas, bien separadas. Un solo recurso repetido en todo el sitio. · El aire entre secciones sale de --aire-seccion, en un solo lugar. El espacio en blanco es lo que más se nota y lo que menos se piensa. ===================================================================== */ /* --- 0. Tipografía de títulos ---------------------------------------- Playfair Display, servida desde nuestro propio servidor (ver la carpeta /fuentes). Es una serif de trazo contrastado: es la que le da al sitio el aire de revista de moda en vez de parecer una planilla. font-display: swap hace que el texto se vea desde el primer instante con la tipografía de respaldo y cambie cuando termina de cargar. Sin eso, el título quedaría invisible unos milisegundos. -------------------------------------------------------------------- */ @font-face { font-family: "Playfair Display"; src: url("/fuentes/playfair-display-6da252de0cbc8a69b5d5c2e0e3f67722.woff2") format("woff2"); font-weight: 500 800; /* es una fuente variable: un archivo, todos los pesos */ font-style: normal; font-display: swap; } /* --- 1. Variables ---------------------------------------------------- */ :root { /* Violeta de goodlook, tomado de la identidad de la marca en Instagram. Se usa en los botones principales, el chip de categoría activa y los destacados. Cambiando estas dos líneas cambia el color de todo el sitio. Es un violeta FRÍO, y de ahí sale toda la paleta de invierno 2026: en vez de grises neutros, los grises llevan una gota de este mismo azul violáceo. Es lo que hace que el sitio se sienta de temporada sin poner una sola imagen de nieve encima. Blanco sobre este violeta da 5,77:1 — pasa AA de sobra para los botones. */ --marca: #6d5b9e; --marca-oscuro: #574a80; /* Un violeta lavado, casi blanco, para SUPERFICIES: el fondo de un chip cuando le pasás el mouse por encima, la fila de una opción elegida. Es el mismo color de la marca diluido, no un gris nuevo: así el sitio se sigue sintiendo de un solo color aunque se toque en veinte lugares. Contrastes medidos encima de este tinte: --marca 4,95:1 (pasa AA para texto normal) --marca-oscuro 6,68:1 --tinta 16,02:1 */ --marca-tenue: #efecf7; /* Escala de grises AZULADOS. Los contrastes están medidos, no estimados (los números son contra --fondo-pagina, el peor caso realista): --tinta 17,1:1 textos y títulos --tinta-suave 9,4:1 párrafos secundarios --gris 5,5:1 letra chica, ayudas, pie --gris-claro 3,3:1 sólo cosas apagadas o deshabilitadas, nunca texto que haga falta leer */ --tinta: #0d1220; --tinta-suave: #39414f; --gris: #5b6474; --gris-claro: #7d8698; --borde: #dfe3ec; /* Borde de los campos de formulario: más marcado que el resto (3,4:1 sobre blanco). Un recuadro de input es la única pista de que ahí se escribe; si es tan tenue como una línea divisoria, deja de verse. */ --borde-campo: #828c9f; /* --fondo es la superficie de ARRIBA (tarjetas, campos, botones claros) y sigue siendo blanco puro: la ropa es negra y necesita ese blanco detrás para recortarse. --fondo-pagina es el papel de abajo, un gris azulado apenas perceptible; la diferencia entre los dos es lo que hace que las fotos floten en vez de fundirse con la página. */ --fondo: #ffffff; --fondo-pagina: #f2f5fa; --fondo-suave: #edf0f7; --fondo-hueco: #e7ebf3; /* El verde claro de WhatsApp queda para el globito flotante, que se reconoce por la forma. Para los BOTONES con texto blanco encima hace falta el verde oscuro de la misma marca: el claro da 1,98:1 y el texto no se lee; este da 4,65:1. Los dos son colores oficiales de WhatsApp. */ --whatsapp: #25d366; --whatsapp-boton: #0e8468; /* Con MercadoPago pasa exactamente lo mismo que con WhatsApp: el celeste oficial es un color de logo, no de botón. Blanco encima da 3,00:1 y no llega ni al mínimo de texto grande. El azul de abajo es el mismo tono bajado de luz y da 5,19:1. El celeste queda para el logo, donde no hay texto encima que leer. */ --mercadopago: #009ee3; --mercadopago-boton: #0074a6; --exito: #15803d; --exito-fondo: #f0fdf4; --error: #b91c1c; --error-fondo: #fef2f2; --aviso: #b45309; --aviso-fondo: #fffbeb; /* El ancho de la caja donde vive todo el contenido. Pasó de 1240 a 1360: con el mínimo de columna que usa .grilla-productos siguen entrando CUATRO productos por fila en una pantalla de escritorio, pero cada foto es unos 30px más ancha. Es una diferencia chica en el número y grande en la sensación: en una tienda de ropa el producto se vende con la foto, y una foto más grande se mira más. No se va más arriba de esto a propósito. Pasados los ~1400px de texto corrido el ojo se pierde volviendo de una línea a la otra, y una quinta columna de productos ya empieza a parecer una planilla de stock. */ --ancho-maximo: 1360px; /* El aire lateral de .contenedor. Está acá arriba y no suelto adentro de la regla porque portada.css necesita EXACTAMENTE el mismo número: los carruseles se salen del contenedor con un margen negativo de esta medida. Si los dos números se separan, las fotos de los carruseles quedan desalineadas con el resto de la página. */ --aire-lateral: 20px; /* El ritmo vertical del sitio, en un solo lugar. Esto es lo que más separa una tienda hecha en casa de una de marca, más que los colores o la tipografía: el ESPACIO EN BLANCO entre las cosas. Cuando cada sección respira, el ojo entiende solo dónde termina una idea y empieza la otra, y todo se ve más caro sin haber agregado nada. clamp() son tres números: el mínimo, el que se querría, y el máximo. El navegador toma el del medio (que crece con el ancho de la ventana) pero nunca lo deja salir de los otros dos. Así un teléfono no desperdicia media pantalla en aire y un monitor grande no apelmaza todo arriba. */ --aire-seccion: clamp(52px, 6.5vw, 104px); /* entre secciones grandes */ --aire-bloque: clamp(26px, 3vw, 44px); /* entre el título y su contenido */ --radio: 10px; --radio-chico: 6px; /* Sombras teñidas del mismo azul de la tinta, no de negro puro: una sombra gris sobre un fondo frío se ve sucia. Y más abiertas y suaves que antes, para dar profundidad sin dibujar un borde duro debajo de cada cosa. */ --sombra: 0 1px 2px rgba(13, 18, 32, .05), 0 4px 14px rgba(13, 18, 32, .05); --sombra-alta: 0 2px 6px rgba(13, 18, 32, .06), 0 16px 38px rgba(13, 18, 32, .13); --transicion: 160ms ease; /* Palo seco: menús, botones, textos largos, precios. Se lee cómodo y rápido. */ --tipografia: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* Serif de títulos. Los respaldos son serifs elegantes que ya vienen instaladas: si por lo que sea no carga Playfair, sigue viéndose bien. */ --tipografia-titulo: "Playfair Display", "Bodoni 72", Didot, Georgia, "Times New Roman", serif; /* --- La escala de títulos ----------------------------------------- Cuatro tamaños y nada más. Tener pocos escalones, bien separados entre sí, es lo que hace que la jerarquía se lea de un vistazo: se entiende qué es el título de la página, qué es el título de una sección y qué es el nombre de un producto SIN leer una palabra. El error típico —y el que tenía este archivo— es poner los títulos tímidos: 2,7rem para un h2 se ve prolijo pero no grita nada. En una tienda de marca el título de sección es enorme y el texto de al lado es chiquito; ese salto grande entre uno y otro es el "lujo". Escalones parecidos entre sí (18px, 20px, 22px) se leen todos como lo mismo. Los tres primeros crecen con la ventana. El cuarto no: por debajo de cierto tamaño la letra ya no es un título, es texto, y ahí lo que importa es que se lea cómodo y no que sea proporcional a nada. */ --t-display: clamp(2.9rem, 7vw, 5.2rem); /* el título de la portada */ --t-titulo: clamp(2.2rem, 4.4vw, 3.4rem); /* el título de la página (h1) */ --t-titulo2: clamp(1.85rem, 3.4vw, 2.7rem); /* título de sección (h2) */ --t-sub: clamp(1.2rem, 1.6vw, 1.5rem); /* subtítulo dentro de un bloque */ --t-menor: 1.0625rem; /* h4, nombres cortos */ } /* --- 2. Reset y tipografía ------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Al saltar a un ancla (el "Ver el catálogo" de la portada, por ejemplo), el encabezado pegajoso no tiene que tapar el título al que se saltó. scroll-padding-top es "frená esta cantidad de píxeles antes de llegar". El número es el alto real del encabezado más un poco de aire: hoy son 92px de la fila del logo + 46 de la barra Mujer/Hombre + 2 de bordes + 8 de aire. Ojo: encabezado.css se carga después y vuelve a declarar esta línea calculándola con SUS propias variables de alto, así que la que manda es aquella. Ésta queda como piso razonable por si ese archivo no cargara. */ html { scroll-padding-top: 148px; } body { margin: 0; font-family: var(--tipografia); font-size: 16px; /* 1,65 y no 1,6: un renglón un pelín más separado se lee más liviano, y además hace que los párrafos ocupen un poco más de alto, que es aire gratis. Es de esos cambios que nadie nota y todos sienten. */ line-height: 1.65; color: var(--tinta); -webkit-font-smoothing: antialiased; /* Que el texto largo no se corte con renglones de tres palabras en el teléfono. Es una sugerencia: los navegadores que no la entienden simplemente cortan como siempre. */ text-wrap: pretty; /* El "invierno" del sitio es esto y nada más: el papel no es blanco sino un gris azulado, con un degradado frío en la parte de arriba que se apaga antes de los primeros 600px. No hay imagen de fondo que descargar ni nada que anime; es un pintado que el navegador resuelve solo. no-repeat + fixed: el degradado se pinta una vez sobre la ventana, así no se vuelve a dibujar en páginas largas ni aparecen bandas al hacer scroll. */ background-color: var(--fondo-pagina); background-image: linear-gradient(175deg, #e9eef8 0%, var(--fondo-pagina) 62%); background-repeat: no-repeat; background-attachment: fixed; } /* Respeto a quien pidió menos movimiento en su sistema: se apagan todas las transiciones y animaciones del sitio, incluidas las que se agregan más abajo (el panel lateral, el zoom de las fotos, el rebote de la flecha). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; /* También las esperas: el panel lateral usa un delay para ocultarse recién al terminar de salir, y sin animación no hay nada que esperar. */ transition-delay: 0s !important; scroll-behavior: auto !important; } } /* Foco de teclado visible en TODO lo navegable, con el violeta de la marca. Va con :where() para que su especificidad sea cero y cualquier regla más específica de las páginas pueda seguir mandando sobre el color. :focus-visible y no :focus: el anillo aparece al navegar con el teclado, no al hacer clic con el mouse. */ :where(a, button, summary, label, [tabindex]):focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: var(--radio-chico); } /* Los títulos van en serif y GRANDES. Es la diferencia entre una tienda que parece un catálogo de repuestos y una que parece una marca de ropa. Tres detalles que hacen casi todo el trabajo, y que son los que uno no pone por instinto: · line-height por debajo de 1. En texto normal las líneas van separadas para poder leer; en un título de cinco centímetros de alto esa misma separación deja un pasillo vacío en el medio. Apretadas, las dos líneas de un título se leen como un bloque, como en la tapa de una revista. · letter-spacing NEGATIVO. Las letras de una serif están espaciadas pensando en tamaño de texto; al agrandarlas, ese aire se agranda igual y la palabra se desarma. Juntándolas un poquito vuelve a verse maciza. · text-wrap: balance. Reparte las palabras entre los renglones para que queden parejos, en vez de dejar una palabra sola abajo. Sólo vale la pena en títulos (el navegador lo calcula y por eso está limitado a textos cortos). */ h1, h2 { margin: 0 0 .35em; font-family: var(--tipografia-titulo); font-weight: 700; line-height: .98; letter-spacing: -.022em; text-wrap: balance; } h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; } /* El h1 es el título de la página y hay UNO solo; los h2 son los títulos de las secciones de adentro y puede haber cinco. Por eso el h2 va un escalón más chico: en /contacto los dos aparecen en la misma pantalla, y con el mismo tamaño se pierde cuál manda. */ h1 { font-size: var(--t-titulo); } h2 { font-size: var(--t-titulo2); } h3 { font-size: var(--t-sub); font-family: var(--tipografia-titulo); font-weight: 600; } h4 { font-size: var(--t-menor); } p { margin: 0 0 1em; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } small { font-size: .8125rem; } .apagado { color: var(--gris); } .centrado { text-align: center; } .chico { font-size: .875rem; } /* Texto visible sólo para lectores de pantalla. */ .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- 3. Estructura --------------------------------------------------- */ .contenedor { width: 100%; max-width: var(--ancho-maximo); margin: 0 auto; /* OJO: este número lo comparte portada.css con su --aire-lateral para alinear los carruseles. Por eso sale de una variable y no está escrito a mano acá. */ padding: 0 var(--aire-lateral); } .seccion { padding: var(--aire-seccion) 0; } /* Dos secciones pegadas suman su aire: el de abajo de una más el de arriba de la otra, y queda un hueco del doble de grande sin que nadie lo haya pedido. Pasa en las páginas de resultados, donde el encabezado ("Buzos — 27 productos") y la grilla son dos secciones seguidas: el título quedaba flotando lejísimos de los productos que estaba anunciando. El "+" quiere decir "la sección que viene JUSTO después de otra sección". */ .seccion + .seccion { padding-top: 0; } .seccion-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: var(--aire-bloque); flex-wrap: wrap; } .grilla-productos { display: grid; /* min() y no un ancho fijo: con minmax(260px, ...) a secas, en una ventana de ~700px entran dos columnas de 260px MÁS el espacio entre ellas, se pasa del contenedor y la página se va de costado. Con min(260px, 100%) la columna nunca puede ser más ancha que el espacio disponible. 260 y no 230: con el contenedor de 1360px siguen entrando cuatro columnas en escritorio, pero cada una es más ancha. Menos productos por fila y más grandes se ve a marca; muchos y chiquitos se ve a mayorista. */ grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); /* El hueco de arriba abajo es casi el doble que el de los costados, y no es un descuido. Entre dos productos de la misma fila alcanza con un respiro para que no se toquen; entre una fila y la siguiente hace falta un corte, porque abajo de cada foto cuelga el nombre y el precio y sin ese aire el texto de una fila parece el título de la de abajo. */ gap: clamp(30px, 3.4vw, 52px) 20px; } /* --- 4. Encabezado --------------------------------------------------- */ .encabezado { position: sticky; top: 0; /* Por encima del botón flotante de WhatsApp (60): si no, el botón verde se le monta al panel lateral cuando está abierto. */ z-index: 70; /* Casi blanco pero con la misma gota de azul del fondo, y translúcido: lo que pasa por debajo se insinúa. */ background: rgba(243, 246, 251, .88); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--borde); } .encabezado-fila { display: flex; align-items: center; gap: 24px; height: 68px; } /* El nombre de la tienda escrito con letras. En el encabezado esta clase envuelve el logo dibujado (un SVG) y la tipografía no se ve; donde SÍ se ve es en el pie, que escribe "goodlook" como texto. Va en la serif de los títulos justamente por eso: así el nombre se ve igual en los dos lugares. Un logo dibujado arriba y el mismo nombre en palo seco abajo se leen como dos marcas distintas. */ .marca { display: inline-flex; align-items: center; font-family: var(--tipografia-titulo); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; flex: 0 0 auto; } .marca:hover { text-decoration: none; opacity: .75; } .marca img { height: 26px; width: auto; display: block; transition: opacity var(--transicion); } @media (max-width: 640px) { .marca img { height: 22px; } } .navegacion { display: flex; align-items: center; gap: 20px; margin-left: auto; } /* Los links del encabezado van en VERSALITAS (todo mayúscula, chiquitas y separadas entre sí). Es la convención de las tiendas de ropa y no es capricho: en mayúscula todas las palabras tienen la misma altura, así que una fila de links se lee como una barra pareja en vez de como una frase. Y al ser chiquitas no le compiten al logo, que es lo que tiene que ganar. El letter-spacing es obligatorio acá: las mayúsculas seguidas se apelmazan y sin ese aire "TIENDA" parece una sola mancha. El ">" quiere decir "sólo los hijos DIRECTOS". Sin él, esta regla también alcanzaría a los iconitos de Instagram y Facebook, que son links y viven adentro de un div de esta misma barra: les pondría mayúsculas a sus textos escondidos y les cambiaría el tamaño sin motivo. */ .navegacion > a { font-size: .78rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-suave); transition: color var(--transicion); } .navegacion > a:hover, .navegacion > a.activo { color: var(--tinta); text-decoration: none; } /* Buscador del encabezado */ .buscador { display: flex; align-items: center; gap: 8px; background: var(--fondo-hueco); border: 1px solid transparent; border-radius: 999px; padding: 7px 14px; min-width: 180px; transition: border-color var(--transicion), background var(--transicion); } .buscador:focus-within { background: var(--fondo); border-color: var(--marca); box-shadow: 0 0 0 3px rgba(109, 91, 158, .18); } /* El recuadro que se ve es la píldora de afuera (.buscador), no el input: el input tiene que quedar completamente transparente. Va con [type="search"] para ganarle a la regla general de campos de la sección 7, que está más abajo en el archivo y con la misma especificidad. */ .buscador input, .buscador input[type="search"] { border: 0; padding: 0; background: none; outline: none; box-shadow: none; font: inherit; font-size: .875rem; width: 100%; } /* Icono del carrito con su globito de cantidad. El globito pasó de negro a violeta: es el único punto de color de toda la barra de arriba, así que el ojo va derecho ahí. Y es justo el número que uno quiere que el cliente mire. Blanco sobre el violeta da 5,77:1. */ .icono-carrito { position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; } .globito { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--marca); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; /* El link del carrito hereda el espaciado de letras de la barra de arriba, que está pensado para mayúsculas. Adentro del globito hay un número solo y ese aire extra lo empuja hacia la izquierda del círculo. */ letter-spacing: normal; } /* --- Menú lateral de celular ------------------------------------------ Sin una línea de JavaScript: un checkbox invisible (.menu-interruptor) es el que guarda si está abierto, y el panel y el velo son HERMANOS suyos en el HTML, por eso se los alcanza con "~". Todo esto vive sólo en celular. En pantallas grandes queda en display:none, que además saca al checkbox y a los links del recorrido del tabulador: no hay manera de caer con el teclado en un menú que no se ve. -------------------------------------------------------------------- */ .menu-interruptor, .menu-boton, .menu-velo, .menu-lateral { display: none; } @media (max-width: 640px) { /* Invisible pero enfocable: con display:none el teclado no podría abrirlo. */ .menu-interruptor { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .menu-boton { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -9px; /* el ícono queda alineado con el margen del texto */ border-radius: var(--radio-chico); color: var(--tinta); cursor: pointer; flex: 0 0 auto; } .menu-boton:hover { background: var(--fondo-hueco); } /* El foco del teclado cae en el checkbox, que no se ve: el anillo se dibuja sobre la hamburguesa, que es lo que el usuario sí ve. */ .menu-interruptor:focus-visible ~ .encabezado .menu-boton { outline: 2px solid var(--marca); outline-offset: 2px; } .menu-velo { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(13, 18, 32, .45); opacity: 0; /* La visibilidad no se desvanece, se corta: cerrado espera a que termine el desvanecido (delay) y recién ahí desaparece; abierto aparece de una. Así nunca queda un velo invisible tapando clics. */ visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms; } .menu-lateral { display: block; position: fixed; top: 0; left: 0; bottom: 0; z-index: 81; width: min(84vw, 330px); padding: 16px 20px 40px; overflow-y: auto; overscroll-behavior: contain; background: var(--fondo); box-shadow: var(--sombra-alta); transform: translateX(-100%); /* visibility además del transform: mientras está cerrado sus links no reciben foco ni los lee un lector de pantalla. */ visibility: hidden; transition: transform 240ms ease, visibility 0s linear 240ms; } .menu-interruptor:checked ~ .menu-velo { opacity: 1; visibility: visible; transition: opacity 220ms ease, visibility 0s; } .menu-interruptor:checked ~ .menu-lateral { transform: none; visibility: visible; transition: transform 240ms ease, visibility 0s; } .menu-fila-superior { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .menu-titulo { font-family: var(--tipografia-titulo); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; } .menu-cerrar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: -8px; border-radius: var(--radio-chico); color: var(--tinta-suave); cursor: pointer; } .menu-cerrar:hover { background: var(--fondo-hueco); color: var(--tinta); } .menu-buscador { display: flex; gap: 8px; margin-bottom: 24px; } .menu-rotulo { margin: 22px 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); } .menu-rotulo:first-of-type { margin-top: 0; } .menu-links { display: grid; gap: 2px; } .menu-link { display: block; padding: 11px 12px; margin: 0 -12px; border-radius: var(--radio-chico); font-family: var(--tipografia-titulo); font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; color: var(--tinta); } .menu-link:hover { background: var(--fondo-hueco); text-decoration: none; } /* Misma píldora violeta que la pestaña del encabezado: la sección donde está parado el cliente se marca igual en los dos lugares. */ .menu-link.activo { background: var(--marca); color: #fff; } /* Los links de segundo orden (categorías, contacto) van en palo seco y más chicos, para que las dos secciones grandes se lean primero. */ .menu-link-chico { font-family: var(--tipografia); font-size: .9375rem; font-weight: 500; padding: 9px 12px; color: var(--tinta-suave); } } /* Con el menú abierto la página de atrás no se mueve. Va con :has() y en su propia regla: si el navegador no lo entiende, lo único que pasa es que el fondo sigue desplazándose. */ @media (max-width: 640px) { html:has(.menu-interruptor:checked) { overflow: hidden; } } /* En pantallas anchas las 12 categorías entran holgadas y no hay nada que desplazar: el degradado ahí sólo ensuciaría el borde. */ @media (min-width: 1100px) { .barra-secciones::after { display: none; } } .categoria-chip { flex: 0 0 auto; /* 34px de alto mínimo. En un teléfono el dedo necesita algo que agarrar: una píldora de 26px se falla una de cada tres veces. */ display: inline-flex; align-items: center; min-height: 34px; padding: 0 15px; border: 1px solid var(--borde); border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-indent: .06em; /* mismo arreglo de centrado que .seccion-tab */ white-space: nowrap; color: var(--tinta-suave); background: var(--fondo); /* Se listan las propiedades en vez de "all": con "all" el navegador vigila todas por las dudas, y cualquier cosa que se agregue mañana empezaría a animarse sin que nadie lo haya pedido. */ transition: background var(--transicion), border-color var(--transicion), color var(--transicion); } .categoria-chip:hover { background: var(--marca-tenue); border-color: var(--marca); color: var(--marca-oscuro); /* 6,68:1 sobre el tinte violeta */ text-decoration: none; } /* La categoría en la que estás parado se rellena de violeta. Cambia la FORMA además del color (una píldora maciza donde las otras son un contorno vacío), así se distingue igual sin percibir bien los colores. Y la sombra la levanta un milímetro del resto: es la única del renglón que "flota". Blanco sobre el violeta: 5,77:1. */ .categoria-chip.activo { background: var(--marca); border-color: var(--marca); color: #fff; box-shadow: 0 2px 10px rgba(109, 91, 158, .32); } .categoria-chip.activo:hover { background: var(--marca-oscuro); border-color: var(--marca-oscuro); color: #fff; } @media (max-width: 640px) { /* En el teléfono el rótulo "CATEGORÍAS" se va: ocupa el ancho de dos píldoras y no dice nada que no se entienda solo mirando la fila. Lo que se gana es que se vean dos categorías más de entrada, que es lo que hace que el cliente se dé cuenta de que la fila se corre. */ .barra-secciones-titulo { display: none; } .barra-secciones-fila { gap: 7px; padding: 10px 46px 10px 0; } } /* --- Hero de la portada ---------------------------------------------- La foto ocupa todo el ancho y es lo primero que se ve al abrir el sitio. Hay DOS imágenes distintas y no una sola redimensionada: · hero.jpg 2400x1200, la modelo apoyada a la derecha y aire a la izquierda para el texto. Para pantallas anchas. · hero-movil.jpg 1200x1600, vertical. En un celular la pantalla es vertical y la foto entra entera; usar la horizontal ahí dejaría a la modelo del tamaño de una uña. Y de cada una hay una versión para la sección de hombre (.hero-hombre), porque entrar a "Hombre" y encontrarse con la foto de una modelo mujer deja la sensación de haber clickeado mal. Las cuatro se arman con herramientas/armar-portada.py a partir de una foto de catálogo. -------------------------------------------------------------------- */ .hero { position: relative; display: flex; align-items: center; min-height: min(78vh, 660px); /* Este color es el del fondo del estudio de la foto: se ve mientras la imagen carga, así no hay un parpadeo blanco. */ background-color: #d3d4cf; background-image: url("/img/hero-757190e3e274a607092d014de1c39d4c.jpg"); background-size: cover; background-position: 72% center; border-bottom: 1px solid var(--borde); } /* El fondo del estudio de la foto de hombre es más frío que el de mujer, por eso el color de espera también cambia. */ .hero-hombre { background-color: #e7f0ed; background-image: url("/img/hero-hombre-cb096a4b6838e203f54280be68eaba93.jpg"); } .hero-texto { max-width: 34ch; } .hero-etiqueta { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; margin-bottom: 18px; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--marca); } .hero-titulo { font-family: var(--tipografia-titulo); /* El escalón más grande de la escala, el que sólo usa la portada. Sale de la variable y no de un número suelto para que siga siendo parte de la misma familia de tamaños que el resto del sitio. */ font-size: var(--t-display); font-weight: 700; line-height: .95; letter-spacing: -.025em; margin-bottom: 20px; } .hero-bajada { font-size: 1.05rem; line-height: 1.55; color: var(--tinta-suave); margin-bottom: 26px; } .hero-acciones { display: flex; gap: 10px; flex-wrap: wrap; } /* La flechita que invita a seguir bajando. */ .hero-flecha { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: var(--tinta-suave); opacity: .55; animation: rebote 2.4s ease-in-out infinite; } @keyframes rebote { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } } /* Quien haya pedido menos animaciones en su sistema, no ve el rebote. */ @media (prefers-reduced-motion: reduce) { .hero-flecha { animation: none; } } @media (max-width: 900px) { .hero { background-image: url("/img/hero-movil-be594821b1ea338d59e4b22abbc98b91.jpg"); background-position: center 12%; min-height: 88vh; align-items: flex-end; padding-bottom: 44px; } .hero-hombre { background-image: url("/img/hero-hombre-movil-350bd73a2dc204f1d26ddbb1279de03a.jpg"); } /* Sobre la foto vertical el texto va abajo, con un velo blanco degradado para que se lea sin tapar la cara de la modelo. */ .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .90) 26%, rgba(255, 255, 255, 0) 58%); } .hero .contenedor { position: relative; z-index: 1; } .hero-texto { max-width: none; } .hero-flecha { display: none; } } /* --- Banda de marca --------------------------------------------------- Franja oscura con el logo de Miwok. Separa la foto del hero de la grilla de productos y deja claro de entrada qué marca se vende acá. -------------------------------------------------------------------- */ .banda-marca { position: relative; overflow: hidden; background: var(--tinta); color: #fff; padding: 64px 0; text-align: center; } /* El logo enorme del fondo, casi transparente: da textura y profundidad sin competir con el logo chico que sí se lee. */ .banda-marca-fondo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150%; max-width: none; opacity: .05; pointer-events: none; } .banda-marca-contenido { position: relative; z-index: 1; } .banda-marca-etiqueta { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 22px; } .banda-marca-logo { height: 46px; width: auto; margin: 0 auto 24px; } .banda-marca-texto { max-width: 46ch; margin: 0 auto; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .72); } @media (max-width: 640px) { .banda-marca { padding: 48px 0; } .banda-marca-logo { height: 34px; } .banda-marca-fondo { width: 220%; } .banda-marca-texto { font-size: .9375rem; } } /* --- 5. Botones ------------------------------------------------------ Antes el hover de todos los botones era "opacity: .88": el botón se transparentaba un poco y dejaba pasar el fondo de la página. Servía porque funciona con cualquier color de botón sin saber cuál es, pero tiene dos problemas: el color se ensucia (se mezcla con el papel gris azulado) y el contraste del texto blanco BAJA justo cuando el cliente está por hacer clic. El arreglo es darle a cada botón un par de colores propios guardados en variables: el de reposo y el de hover. La regla general no necesita saber qué color es cada uno, sólo cambiar de una variable a la otra. Así el botón de WhatsApp se oscurece a un verde y el principal a un violeta, con la misma regla escrita una sola vez. (Antes esto no se podía hacer así: si .boton:hover hubiera puesto un color fijo, le habría ganado al verde de .boton-whatsapp y TODOS los botones se habrían puesto violetas al pasarles el mouse.) -------------------------------------------------------------------- */ .boton { --boton-fondo: var(--marca); --boton-fondo-hover: var(--marca-oscuro); /* La sombra va teñida del MISMO color del botón, no de negro: una sombra gris debajo de algo de color se ve como suciedad, y del propio color parece que el botón está encendido. Por eso también es una variable: cada botón trae la suya. */ --boton-sombra: 0 2px 12px rgba(109, 91, 158, .26); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border: 1px solid transparent; border-radius: var(--radio-chico); background: var(--boton-fondo); box-shadow: var(--boton-sombra); color: #fff; font: inherit; font-size: .9375rem; font-weight: 600; /* Un pelín de aire entre letras: en un botón hay dos o tres palabras y ese espacio las hace ver deliberadas en vez de apretadas. */ letter-spacing: .01em; line-height: 1.2; text-align: center; cursor: pointer; transition: background var(--transicion), border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion); } .boton:hover { background: var(--boton-fondo-hover); text-decoration: none; /* Se levanta un milímetro. Es el gesto más barato que existe para que algo se sienta apretable, y con 1px alcanza: más ya se ve un salto. */ transform: translateY(-1px); } .boton:active { transform: translateY(1px); } .boton:disabled, .boton[disabled] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; } /* El secundario es un contorno sobre blanco. Al pasar el mouse se tiñe apenas del violeta de la marca en vez de sólo oscurecer el borde: se nota más y emparenta los dos botones cuando están uno al lado del otro. */ .boton-secundario { --boton-fondo: var(--fondo); --boton-fondo-hover: var(--marca-tenue); --boton-sombra: none; color: var(--tinta); border-color: var(--borde-campo); } .boton-secundario:hover { border-color: var(--marca); color: var(--marca-oscuro); } .boton-fantasma { --boton-fondo: transparent; --boton-fondo-hover: var(--fondo-hueco); --boton-sombra: none; color: var(--tinta-suave); border-color: transparent; padding: 9px 14px; } .boton-fantasma:hover { color: var(--tinta); } .boton-whatsapp { --boton-fondo: var(--whatsapp-boton); --boton-fondo-hover: #0b6e57; /* blanco encima: 6,21:1 */ --boton-sombra: 0 2px 12px rgba(14, 132, 104, .26); } .boton-mercadopago { --boton-fondo: var(--mercadopago-boton); /* blanco encima: 5,19:1 */ --boton-fondo-hover: #005c85; --boton-sombra: 0 2px 12px rgba(0, 116, 166, .26); } .boton-peligro { --boton-fondo: var(--fondo); --boton-fondo-hover: var(--error-fondo); --boton-sombra: none; color: var(--error); border-color: var(--borde); } .boton-peligro:hover { border-color: var(--error); } .boton-ancho { width: 100%; } /* El botón grande es el que dice "Ver el catálogo" arriba de todo. Tiene que verse de lejos: crece el relleno más que la letra, porque lo que hace grande a un botón es el aire de adentro, no el tamaño del texto. */ .boton-grande { padding: 17px 34px; font-size: 1rem; letter-spacing: .02em; } .boton-chico { padding: 8px 15px; font-size: .8125rem; } /* --- 6. Tarjetas de producto ----------------------------------------- */ .tarjeta { display: flex; flex-direction: column; position: relative; } .tarjeta:hover { text-decoration: none; } .tarjeta-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio); background: var(--fondo-hueco); margin-bottom: 12px; /* Sobre el papel gris azulado, la sombra baja hace que cada foto se despegue de la página. Es lo que reemplaza al borde: ninguna línea, sólo aire. */ box-shadow: var(--sombra); transition: box-shadow var(--transicion); } .tarjeta:hover .tarjeta-foto { box-shadow: var(--sombra-alta); } .tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .tarjeta:hover .tarjeta-foto img { transform: scale(1.04); } /* Marco cuando el producto no tiene foto cargada todavía */ .sin-foto { display: grid; place-items: center; width: 100%; height: 100%; /* --gris y no --gris-claro: sobre el fondo hueco el claro queda en 2,2:1 y no se lee. Este da 5:1. */ color: var(--gris); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; } /* El nombre del producto va en serif, como los títulos: es lo que hace que la grilla se lea como una vidriera y no como una lista de inventario. */ .tarjeta-nombre { font-family: var(--tipografia-titulo); font-size: 1.15rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 5px; } /* El precio SÍ va en palo seco: los números se leen mejor y sin ambigüedad. */ .tarjeta-precio { font-size: 1.05rem; font-weight: 700; } .tarjeta-talles { font-size: .8rem; color: var(--gris); margin-top: 4px; } /* Etiquetas sobre la foto */ .etiqueta { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 999px; background: var(--marca); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .etiqueta-agotado { background: rgba(10, 10, 10, .75); left: auto; right: 10px; } /* --- Carteles de promoción ------------------------------------------------- Una prenda puede estar en oferta Y en 2x1 a la vez, así que los carteles van apilados en una columna en vez de sueltos: con la misma posición absoluta se taparían entre sí y el segundo no existiría. ------------------------------------------------------------------------ */ .etiquetas-promo { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 2; } /* Adentro de la columna dejan de posicionarse solos: los ubica el flex. */ .etiquetas-promo .etiqueta { position: static; } /* El descuento va en el violeta de la marca invertido —fondo oscuro, letra clara— y no en rojo. El rojo de liquidación es de otra tienda; acá lo que tiene que gritar es la marca. Blanco sobre --marca da 5,77:1, AA de sobra. */ .etiqueta-oferta { background: var(--marca-oscuro); } /* EL 2x1: GRANDE Y ABAJO AL CENTRO, como en miwok.com.ar. --------------------------------------------------------------------------- La medida no es a ojo. En el HTML de miwok.com.ar su cartel de 2x1 se dibuja con --badge-text-size:25px, abajo al centro de la foto y con el descuento arriba, separado. El nuestro estaba a .7rem (11 px) y apilado con el "-30% OFF" en la esquina: menos de la mitad de tamaño y encima compitiendo por el mismo rincón. Ramiro: "el 2 x 1 se ve muy chico en las prendas". El clamp llega hasta 1.5rem (24 px) en pantalla grande y baja a 1.05rem en el celular, donde la tarjeta mide la mitad: 25 px fijos ahí taparían la prenda, que es lo que se está vendiendo. Se queda en violeta y no en el verde de ellos: el violeta es lo único que distingue a goodlook de la marca que revende. */ .etiqueta-2x1 { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; padding: 6px 20px; border-radius: 999px; background: var(--marca); color: #fff; font-size: clamp(1.05rem, 3.4vw, 1.5rem); font-weight: 700; line-height: 1.1; /* Sin versalitas ni espaciado extra: "2x1" es un número, no una palabra. */ letter-spacing: 0; text-transform: none; white-space: nowrap; } /* La foto de una prenda agotada se apaga, pero NO al 50%: a ese valor, sobre el gris de la caja, las fotos de fondo claro de Miwok desaparecian y la grilla quedaba llena de rectangulos vacios. Con .88 y un poco de gris se lee "esta apagada" sin dejar de verse la prenda, que es lo que igual hay que mostrar: el cliente puede querer encargarla. */ .agotado .tarjeta-foto img { opacity: .88; filter: grayscale(.35); } /* --- 7. Formularios -------------------------------------------------- */ .campo { margin-bottom: 20px; } /* El rótulo del campo en versalitas chiquitas, como los del encabezado: en un formulario largo eso arma una columna de etiquetas parejas y calladas, y lo que se lee primero es lo que el cliente escribió, no los nombres de las casillas. El ">" es importante: sólo el rótulo que cuelga DIRECTO del campo. Adentro de un .campo también hay