/* ============================================================= Excellent — Main Stylesheet (light / editorial, estilo tienda real) ============================================================= */ /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--c-bg); color: var(--c-body); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color .2s var(--ease); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--c-ink); font-weight: 500; line-height: 1.08; margin: 0 0 .4em; } /* Escala de encabezados */ h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } h5 { font-size: var(--fs-h5); } h6 { font-size: var(--fs-h6); } /* ============================================================= ROLES DE TEXTO (sistema) — clases semánticas reutilizables. Cada rol apunta a un token de la escala. Úsalas en cualquier elemento. ============================================================= */ .t-display { font-size: var(--fs-display); font-weight: 500; line-height: 1.05; } .t-lead { font-size: var(--fs-md); } /* 18 — párrafo destacado */ .t-body { font-size: var(--fs-base); } /* 16 — cuerpo */ .t-nav { font-size: var(--fs-sm); font-weight: 500; } /* 14 — navegación */ .t-small { font-size: var(--fs-sm); } /* 14 — secundario */ .t-caption { font-size: var(--fs-xs); } /* 12 — utilidad/topbar */ .t-label { font-size: var(--fs-xs); font-weight: 500; } /* 12 — eyebrow/etiqueta */ .t-micro { font-size: var(--fs-2xs); } /* 11 — badges/micro */ p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } /* ============================================================= CONTROLES DE FORMULARIO — regla general del sitio Una sola altura para todos los campos: --field-h. Sin esto cada zona inventaba la suya: Bricks inyecta line-height:40px en los inputs y WooCommerce añade padding en em, y entre los dos salían campos de más de 70px de alto. Las excepciones (buscador de la cabecera, cantidad del carrito) ganan por especificidad más adelante. ============================================================= */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], input[type="date"], select, textarea { height: var(--field-h); padding: 0 var(--field-pad-x); line-height: 1.2; border: var(--field-border) solid var(--c-line); border-radius: var(--radius); background: var(--c-white); font-family: var(--font-body); font-size: var(--field-fs); color: var(--c-ink); transition: border-color .2s var(--ease); } textarea { height: auto; min-height: calc(var(--field-h) * 2); padding: var(--space-1) var(--field-pad-x); line-height: 1.5; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-ink); } input::placeholder, textarea::placeholder { color: var(--c-muted); } /* === Contenedor: definición ÚNICA del proyecto === Todo lo que deba respetar el ancho y el margen lateral del sitio se añade a esta lista. Antes cada vista copiaba el `clamp(...)` a mano —cuatro copias— y la que se olvidaba dejaba el texto pegado al borde. El valor vive en --gutter (tokens.css) y no se vuelve a escribir literal en ningún sitio. Se incluyen aquí los contenedores que pinta Bricks, porque en tienda, carrito y checkout el ancho lo manda su marcado, no el nuestro. */ .container, .woocommerce-shop .brxe-container, .tax-product_cat .brxe-container, .tax-product_tag .brxe-container, .woocommerce-checkout #brx-content, .woocommerce-cart #brx-content, .woocommerce .container, .single-product .site-main > .woocommerce { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--soft { background: var(--c-soft); } /* === Utilidades de layout === Para plantillas nuevas. No se pone un margen lateral general al contenedor raíz a propósito: en este sitio la mayoría de bloques van a sangre (hero, banda de marcas, pie) y una regla así los metería hacia dentro. El margen se pide, no se hereda — pero se pide SIEMPRE con estas clases, nunca con un valor escrito a mano. */ /* Margen lateral sin limitar el ancho: para bloques a sangre con texto dentro. */ .u-gutter { padding-inline: var(--gutter); } /* Ritmo vertical entre hermanos. Evita ir poniendo márgenes sueltos. */ .u-flow > * + * { margin-top: var(--flow); } /* Saca un bloque del contenedor hasta el borde de la ventana, sin desbordar en horizontal (100vw incluye la barra de scroll y provoca scroll lateral). */ .u-full { width: auto; margin-inline: calc(var(--gutter) * -1); } /* Encabezado de sección — alineado a la izquierda, bold (estilo INDIE) */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-4); } .section-head h2 { font-size: var(--fs-xl); margin: 0; } .section-head .eyebrow { display: block; margin-bottom: .5rem; } .eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; color: var(--c-muted); } .link-more { font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink); white-space: nowrap; } .link-more:hover { color: var(--c-gold); } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; padding: 1.05em 2.4em; cursor: pointer; border: 1.5px solid var(--c-ink); background: var(--c-ink); color: #fff; transition: all .25s var(--ease); } .btn:hover { background: transparent; color: var(--c-ink); } .btn--light { background: #fff; color: var(--c-ink); border-color: #fff; } .btn--light:hover { background: transparent; color: #fff; border-color: #fff; } /* Secundario: mismo tamaño que .btn pero sin peso visual, para que no compita con la acción principal de la pantalla. */ .btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); } .btn--ghost:hover { background: transparent; color: var(--c-ink); border-color: var(--c-ink); } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); } .btn--outline-light:hover { background: #fff; color: var(--c-ink); border-color: #fff; } /* ============================================================= Top bar (barra de utilidad) ============================================================= */ .topbar { background: var(--c-ink); color: #fff; font-size: var(--fs-xs); } .topbar-inner { padding: .55rem 0; text-align: center; } /* El importe iba en --c-gold. Cumplía AA (5,32:1 sobre la barra negra), pero el texto que lo rodea es blanco a 18,42:1: al lado de su vecino quedaba 3,5 veces más apagado y se hundía justo el dato que hay que leer. Un acento solo destaca si es MÁS luminoso que lo de alrededor, no menos. `inherit` y no #fff: si algún día la barra cambia de color, el importe va detrás sin tocar esta línea. La jerarquía la sigue dando el peso 700. */ .topbar-c strong { font-weight: 500; color: inherit; } /* ============================================================= Header — logo + navegación (izquierda), acciones (derecha) ============================================================= */ /* Cabecera adherida que se aparta al bajar y vuelve al subir. Al bajar el cliente está mirando producto y la barra solo le quita alto de pantalla; al subir es que busca navegar, y ahí la quiere ya. Va por debajo del cajón del carrito (200) y de las ventanas (300) a propósito: cuando algo se abre encima, la cabecera no debe asomar por delante. */ .site-header { background: #fff; border-bottom: 1px solid var(--c-line); position: sticky; top: 0; z-index: 100; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } /* Solo al despegarse del principio: sobre el hero no hace falta separar nada. */ .site-header.is-stuck { box-shadow: var(--shadow-sm); } .site-header.is-hidden { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; padding-block: var(--header-pad-y); } .header-logo { justify-self: start; } .header-logo img { height: var(--header-logo-h); width: auto; display: block; } .header-right { justify-self: end; display: flex; align-items: center; gap: var(--header-gap); } .icon-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--c-ink); display: inline-flex; align-items: center; justify-content: center; width: var(--header-icon); height: var(--header-icon); position: relative; } .icon-btn:hover { color: var(--c-gold); } .icon-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; } /* Un solo contador para toda la cabecera: el del carrito y el de la lista de deseos son la misma pastilla. Se añade el selector a la regla en vez de escribir otra igual. */ .cart-count, .icon-btn__count { position: absolute; top: 0; right: 0; background: var(--c-ink); color: #fff; font-size: var(--fs-2xs); font-weight: 700; min-width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } /* `[hidden]` no basta: `.icon-btn__count` declara `display: inline-flex` y una clase con `display` gana al atributo. Ya pasó con `.btn-co` en el checkout. */ .icon-btn__count[hidden] { display: none; } .icon-btn--wish { position: relative; } .cart-link { display: flex; align-items: center; gap: var(--cart-total-gap); color: var(--c-ink); } .cart-link:hover { color: var(--c-gold); } .cart-total { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; } .cart-total .woocommerce-Price-amount { font-weight: 600; } /* Nav */ .primary-nav ul { display: flex; align-items: center; gap: var(--nav-gap); } .primary-nav a { display: flex; align-items: center; padding: var(--nav-pad-y) 0; font-family: var(--font-body); font-size: var(--nav-fs); font-weight: var(--nav-weight); text-transform: capitalize; color: var(--c-ink); white-space: nowrap; } /* El enlace NO cambia de color al pasar el ratón (decisión del cliente, 12-ago): la única señal es la barra. Dos señales para un mismo estado es ruido, y así se parece a INDIE, donde el texto se queda quieto y solo aparece la línea. «Sale» sigue rojo siempre, que eso no es un estado sino su identidad. */ /* --- Subrayado del menú (referencia: indie.com.ec, medida el 12-ago) --- El enlace NO lleva padding lateral, así que su ancho ya es el del texto y la barra encaja sola con `left:0; right:0` — sin tocar el HTML ni envolver el texto en un , que es como lo resuelve Woodmart en INDIE. ⚠️ SE ANIMA `width`, NO `transform`. Y hay que dejarlo así. El primer intento (12-ago) usaba `transform: scaleX()` por rendimiento: lo lleva el compositor y no recalcula la maquetación en cada fotograma. Pero el cliente detectó el defecto enseguida: **la barra barría con unos 3px de grueso y adelgazaba de golpe a 2px al terminar**. El motivo es que, al animar un transform, Chrome saca el elemento a su propia capa, lo rasteriza UNA vez y luego reescala ese mapa de bits. Durante el barrido no se ve la barra pintada: se ve una imagen suya estirada, con los bordes suavizados, y ese suavizado reparte 2px sobre 3 filas de píxeles. Al acabar, Chrome tira la capa y repinta de verdad → encaje brusco. Con pantallas al 125-150% (lo normal en Windows) es peor: 2px de CSS son 2,5px reales y siempre caen a caballo entre dos filas. A 1px no se apreciaba —hay menos tinta que repartir— pero el defecto estaba. Animando `width` no hay capa ni reescalado: la barra se pinta de verdad en cada fotograma y el grosor se mantiene. Es lo que hace INDIE, y por eso allí se ve limpio. El coste de maquetación es irrelevante: un pseudo-elemento de 2px de alto, en un enlace cada vez. `currentColor` a propósito: la barra sale dorada en el hover y ROJA bajo «Sale» sin escribir una regla para cada caso. Si cambia el color del enlace, la barra va detrás sola. El ::after no se vuelve elemento flexible pese al `display:flex` del enlace: al ir en `position:absolute` queda fuera del flujo. */ .primary-nav a { position: relative; } .primary-nav a::after { content: ""; position: absolute; /* Arranca --nav-underline-bleed antes del texto; el ancho final le devuelve ese margen por los dos lados. Se sale del enlace sin empujarlo porque va en absolute — la alternativa (padding-inline) habría separado 4px cada entrada del menú y cambiado el ritmo de toda la barra. */ left: calc(-1 * var(--nav-underline-bleed)); /* El enlace tiene --nav-pad-y de aire abajo; se le resta el hueco que se quiere dejar. Así la separación se lee del token y no de una resta mental: subir --nav-underline-gap acerca la barra al texto. */ bottom: calc(var(--nav-pad-y) - var(--nav-underline-gap)); width: 0; height: var(--nav-underline-h); background: currentColor; transition: width var(--nav-underline-dur) var(--nav-underline-ease); } /* También con el teclado: quien navega con tabulador merece la misma pista. Y se queda puesta mientras su mega menú está abierto — es el «estás aquí». */ /* `.is-current` marca la sección de la página que se está viendo: la barra se queda puesta sin necesidad de señalar nada. Sin esto, quien aterriza desde Google o desde un enlace no sabía en qué sección estaba. */ .primary-nav a:hover::after, .primary-nav a:focus-visible::after, .primary-nav a.is-current::after, .primary-nav .has-mega.is-active > a::after { width: calc(100% + var(--nav-underline-bleed) * 2); } /* La sección actual va en tinta llena; el resto de la barra queda un punto por debajo. Es la única jerarquía de color que se permite aquí. */ .primary-nav a.is-current { font-weight: var(--nav-weight-current); } /* === UNA barra a la vez === La barra hacía DOS trabajos —«estás aquí» y «estás apuntando»— y al coincidir se veían dos marcas sin saber cuál era cuál. Ahora cada señal tiene su medio: la BARRA dice dónde apuntas, la NEGRITA dice en qué sección estás. La negrita no se retira nunca, así que no se pierde la referencia mientras exploras. Se retira la barra de la página actual en DOS situaciones: 1. `ul:hover` — el ratón está sobre los enlaces. 2. `ul:has(.is-active)` — hay un panel abierto. La segunda no es redundante, y costó una pasada descubrirlo: al entrar el ratón EN EL PANEL ya no está sobre la lista, así que `ul:hover` deja de valer y la barra de la página actual reaparecía mientras la sección abierta conservaba la suya. Dos barras otra vez, justo al explorar. ⚠️ AQUÍ NO MANDA EL ORDEN, MANDA LA ESPECIFICIDAD. Es el error que se cometió al escribir esto la primera vez: se dio por hecho que bastaba poner las reglas que muestran más abajo. No basta, porque las que ocultan son MÁS específicas y ganan estén donde estén: ocultar ...ul:hover a.is-current::after (3,3) mostrar ...a:hover::after (2,2) ← pierde ocultar ...ul:has(.has-mega.is-active) a.is-current::after (4,3) mostrar ....has-mega.is-active > a::after (3,2) ← pierde Resultado: estando en Mujeres, señalar Mujeres NO sacaba su barra, y abrir su propio panel tampoco. Por eso hacen falta las dos reglas de rescate de abajo, escritas a propósito con especificidad por encima de la que oculta. */ .primary-nav ul:hover a.is-current::after, .primary-nav ul:has(.has-mega.is-active) a.is-current::after { width: 0; } .primary-nav a:hover::after, .primary-nav .has-mega.is-active > a::after { width: calc(100% + var(--nav-underline-bleed) * 2); } /* Rescate: la sección actual recupera su barra cuando ES la señalada (4,3) o cuando es la que tiene el panel abierto (5,3). */ .primary-nav ul a.is-current:hover::after, .primary-nav ul:has(.has-mega.is-active) .has-mega.is-active > a::after { width: calc(100% + var(--nav-underline-bleed) * 2); } /* Quien pide menos movimiento recibe el mismo estado, sin el barrido. */ @media (prefers-reduced-motion: reduce) { .primary-nav a::after { transition-duration: 1ms; } } .nav-caret { display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); } .has-mega { position: static; } .nav-toggle { display: none; } /* Búsqueda expandible */ /* ============================================================= Buscador — cajón lateral Mismas medidas y misma animación que el del carrito: si dos paneles laterales del mismo sitio entran de forma distinta, se nota. Comparten también el velo `.menu-overlay`. ============================================================= */ .search-drawer { position: fixed; inset: 0 0 0 auto; width: min(92vw, 420px); z-index: 200; background: var(--c-white); transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; } /* `hidden` lo quita el JS al primer uso; hasta entonces el cajón no existe para nadie, tampoco para el lector de pantalla. */ .search-drawer[hidden] { display: none; } .search-drawer.is-open { transform: translateX(0); } .search-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--hairline) solid var(--c-line); flex: none; } .search-drawer__title { font-size: var(--fs-h5); margin: 0; } .search-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-3); } /* El campo es una caja con el icono dentro, no un input suelto con un icono al lado: así el área pulsable es toda la caja. */ .search-drawer__field { display: flex; align-items: center; gap: var(--space-1); border: var(--field-border) solid var(--c-line); padding: 0 var(--space-2); min-height: var(--field-h); transition: border-color .18s var(--ease); } .search-drawer__field:focus-within { border-color: var(--c-ink); } .search-drawer__field svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--c-muted); stroke-width: 1.8; } .search-drawer__field input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: var(--field-fs); color: var(--c-ink); } .search-drawer__field input[type="search"]:focus { outline: none; } .search-drawer__go { width: 100%; margin-top: var(--space-2); border: 0; background: var(--c-ink); color: var(--c-white); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; min-height: var(--field-h); cursor: pointer; transition: background .18s var(--ease); } .search-drawer__go:hover { background: var(--c-gold); } .search-drawer__sug { margin-top: var(--space-4); } .search-drawer__sug ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; } .search-drawer__sug a { display: block; padding: var(--space-1) 0; font-size: var(--fs-sm); color: var(--c-ink); } .search-drawer__sug a:hover { color: var(--c-gold); } /* Restos de la barra antigua: se conservan por si algún molde suelto todavía la usa, pero el buscador de la cabecera ya no la pinta. */ .search-bar { border-top: 1px solid var(--c-line); background: var(--c-soft); } .search-bar form { display: flex; align-items: center; gap: .8rem; padding: 1rem 0; } .search-bar svg { width: 20px; height: 20px; fill: none; stroke: var(--c-ink); stroke-width: 1.6; flex: none; } /* El buscador de la cabecera es la única excepción de tamaño: es un campo protagonista, a pantalla completa, no un campo de formulario. */ .search-bar input[type="search"] { flex: 1; border: 0; background: transparent; font-family: var(--font-body); font-size: var(--fs-md); color: var(--c-ink); } .search-bar input[type="search"]:focus { outline: none; } .search-bar button { border: 0; background: var(--c-ink); color: #fff; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; padding: .8rem 1.6rem; cursor: pointer; } .search-bar button:hover { background: var(--c-gold); } /* Las clases .mega-panel / .mega-grid / .mega-col / .mega-all / .mega-brand y .mega-promo* eran el panel ANTERIOR a la cascada del 13-ago. Se comprobo que no aparecen ni en el HTML servido ni en el PHP y se borraron: eran ~20 reglas muertas, y dos de ellas mantenian vivo el dorado en el mega menu. */ /* --- Mega-menú por sección --- Un panel por entrada de la navegación. La foto de la izquierda es la del panel y cambia al pasar por un enlace que traiga la suya (ver main.js). */ /* Capa de posicionamiento. NO pinta NADA: el fondo, el borde y la sombra viven en .mega__card. Esta regla llevaba `background` y bordes, y por eso seguía viéndose una banda blanca de lado a lado aunque la tarjeta ya fuera estrecha: el panel «invisible» seguía siendo visible. Corregido el 13-ago. */ .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 90; opacity: 0; visibility: hidden; /* ⚠️ La capa va de borde a borde aunque no pinte nada, así que CAPTURABA el ratón en todo el ancho: el panel seguía abierto con el cursor a 400px de la tarjeta. `none` aquí y `auto` en la tarjeta hacen que solo la tarjeta —lo que se ve— reciba el ratón. */ pointer-events: none; /* El «pop» de Udemy, medido en su Explore: escala de .9 a 1 en 0,1s con cubic-bezier(.2, 0, .38, .9). Es un gesto CORTO y seco. El deslizamiento de 6px en .22s que había antes se sentía perezoso al lado. Aquí se usa .96 y no .9 porque nuestra tarjeta es mucho más ancha que la suya y a .9 el salto se ve exagerado; y .14s en vez de .1 por lo mismo: más recorrido pide un pelín más de tiempo. */ transform: scale(.96); transform-origin: top center; /* nace de la barra, que va centrada */ transition: opacity .14s cubic-bezier(.2, 0, .38, .9), transform .14s cubic-bezier(.2, 0, .38, .9), visibility .14s; } .mega.is-open { opacity: 1; visibility: visible; transform: scale(1); } /* Quien pide menos movimiento recibe el panel sin el salto de escala. */ @media (prefers-reduced-motion: reduce) { .mega { transform: none; transition-duration: 1ms; } } /* La foto va a la derecha; en el marcado está antes, así que se coloca explícita. */ /* === Mega menú en cascada (13-ago, referencia: Udemy «Explore») === El panel ya no ocupa el ancho de la pantalla: es una TARJETA contenida que se apoya sobre la página. El fondo blanco y la sombra viven en .mega__card, no en .mega, que ahora solo posiciona. Por qué se cambió: el panel anterior soltaba 33 enlaces a la vez en cuatro columnas iguales, sin jerarquía, más una foto de 448px sin función. Ese patrón se lee como un índice, no como una tienda. */ .mega__card { display: flex; align-items: stretch; width: max-content; max-width: 100%; pointer-events: auto; /* la capa lo desactiva; aquí se recupera */ /* Sin min-height: el suelo lo pone ahora la FOTO, que tiene alto fijo. Dos fuentes para la misma medida acaban descuadrando siempre. */ margin-inline: auto; /* centrada bajo la navegación, que va centrada */ padding: var(--mega-card-pad); background: var(--c-white); border-radius: var(--mega-card-radio); /* Cuatro capas, ver el token: anillo + contacto + cuerpo + halo. Sustituye al borde, por eso aquí no hay `border`. */ box-shadow: var(--mega-card-shadow); } /* --- Nivel 1: los grupos --- */ .mega__l1 { flex: none; width: var(--mega-l1-w); list-style: none; margin: 0; padding: 0; border-right: var(--hairline) solid var(--c-line); } .mega__l1-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); width: 100%; min-height: var(--mega-row-h); padding: 0 var(--mega-row-pad); background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-size: var(--nav-fs); font-weight: 400; line-height: 1.3; text-align: left; color: var(--c-body); transition: color .18s var(--ease); } /* JERARQUÍA (13-ago): el nivel 1 es un ÍNDICE, no el destino. Va en gris y solo se pone en tinta al señalarlo. Lo que se pulsa —los enlaces del nivel 2— es lo que va en negro. Antes estaba al revés: el índice en tinta y los destinos en gris, o sea lo importante más apagado que el rótulo que lo agrupa. */ .mega__l1-row:hover { color: var(--c-ink); } /* Sin color y sin filete: el estado se marca OSCURECIENDO y con el peso. El dorado que habia aqui daba 3,47:1 —suspende AA— y saltaba en cada hover; el filete vertical se probo el 13-ago y al cliente no le convencio. La senal mas fuerte no es ninguna de las tres, es el CONTENIDO: la columna de al lado cambia y muestra los enlaces de ese grupo. El color y el peso solo tienen que confirmarlo. */ .mega__l1-row.is-active { color: var(--c-ink); font-weight: 500; } .mega__chev { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; opacity: .55; } .mega__l1-row.is-active .mega__chev { opacity: 1; } /* --- Nivel 2: los enlaces del grupo --- */ /* El aire extra va en el CONTENEDOR, no en cada enlace: si se sumara al padding de .mega__link se desplazaria tambien el subrayado del hover, que debe seguir alineado con el texto. */ .mega__l2wrap { flex: none; width: calc(var(--mega-l2-w) + var(--mega-l2-extra)); padding-left: var(--mega-l2-extra); } .mega__l2 { display: none; } /* Fundido al cambiar de grupo. Se usa `animation` y no `transition` a propósito: una transición NO se dispara sobre un elemento que viene de `display: none`, pero una animación SÍ arranca en cuanto aparece. Por eso los cambios de panel por `display` se animan así y no de la otra forma. Solo entra el nuevo; el anterior se va de golpe. Se lee como una sustitución limpia, y encadenar salida y entrada duplicaría la espera. */ .mega__l2.is-active { display: block; animation: megaEntra .13s ease-out; } @keyframes megaEntra { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } } /* Tope de altura con desplazamiento en las DOS columnas — ver --mega-max-h. `scrollbar-gutter: stable` reserva el hueco de la barra para que el texto no se desplace al aparecer. Misma barra fina que el cajón del carrito: se reutiliza el patrón del proyecto en vez de inventar otro. */ .mega__l1, .mega__l2wrap { max-height: var(--mega-max-h); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } /* Solo el nivel 2 reserva el hueco de la barra: su contenido cambia de un grupo a otro, así que la barra aparecería y desaparecería moviendo el texto. El nivel 1 no cambia dentro de una sección, y reservarlo ahí sería restarle 6px de ancho a cambio de nada. */ .mega__l2wrap { scrollbar-gutter: stable; } .mega__l1::-webkit-scrollbar, .mega__l2wrap::-webkit-scrollbar { width: var(--scroll-w); } .mega__l1::-webkit-scrollbar-track, .mega__l2wrap::-webkit-scrollbar-track { background: transparent; } .mega__l1::-webkit-scrollbar-thumb, .mega__l2wrap::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--scroll-w); } .mega__l1::-webkit-scrollbar-thumb:hover, .mega__l2wrap::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } @media (prefers-reduced-motion: reduce) { .mega__l2.is-active { animation: none; } } /* ⚠️ SIN JAVASCRIPT SE VEN TODOS. La clase `is-enhanced` la pone main.js: hasta entonces manda esta regla y el panel enseña los enlaces de todos los grupos, apilados. El menú sigue sirviendo. Es la misma mejora progresiva que usan el checkout y la lista de deseos. */ .mega__card:not(.is-enhanced) .mega__l2 { display: block; } .mega__card:not(.is-enhanced) .mega__l2wrap { width: auto; } /* MISMA fila que el nivel 1: igual alto, igual sangria, igual tamano. Antes el nivel 1 tenia filas de 42px y el nivel 2 enlaces de 34px sin sangria, y los dos niveles se leian como dos listas distintas en vez de un recorrido. Es lo que hace Udemy: una sola fila para todos los niveles. */ .mega__link { display: flex; align-items: center; min-height: var(--mega-row-h); font-size: var(--nav-fs); line-height: 1.3; color: var(--c-ink); padding: 0 var(--mega-row-pad); transition: color .18s var(--ease), transform .18s var(--ease); } /* El enlace ya es tinta, asi que un cambio de color no cabe: el hover se marca SUBRAYANDO, igual que la barra del menu principal. Mismo idioma en las dos navegaciones. */ /* === Hover del nivel 2: atenuar el resto + avanzar el señalado === Se quitó el subrayado por un motivo concreto: desde que «Ver todo» va subrayado SIEMPRE, subrayar los demás al señalarlos los hacía parecerse a él por un instante. Dos cosas distintas con la misma marca. Ahora al entrar en la columna TODOS bajan a gris y solo el señalado se queda en tinta y avanza 4px. El avance acompaña la dirección de la cascada (izquierda → derecha) y no repite ningún recurso ya usado en el panel. Va con `transform` y no con `padding`: el padding recalcularía la maquetación en cada fotograma; el transform no mueve nada más. */ .mega__l2wrap:hover .mega__link { color: var(--c-body); } .mega__l2wrap:hover .mega__link:hover { color: var(--c-ink); transform: translateX(4px); } /* «Ver todo» se atenúa como los demás, pero NO se desplaza: su seña es la flecha, que ya se mueve sola. Moviendo también el texto, la flecha recorrería 7px y el gesto se pasaría de frenada. */ .mega__l2wrap:hover .mega__link.is-all:hover { transform: none; } /* FOCO. Sin esto la navegación por teclado del panel —flechas arriba/abajo/ derecha, añadida el 13-ago— se recorría a ciegas: no había ninguna regla de foco en todo el mega menú. El anillo va hacia DENTRO (`outline-offset` negativo) porque las filas llegan al borde de la tarjeta y uno hacia fuera se saldría por el filo. */ .mega__l1-row:focus-visible, .mega__link:focus-visible { outline: var(--focus-w) solid var(--c-gold); outline-offset: -2px; border-radius: 3px; } /* «Ver todo» cierra la lista como ACCIÓN, no como un destino más. Recorrido: llevaba una línea encima que partía la lista en dos y parecía un separador de sección; luego iba en dorado, que se retiró con el resto. La flecha va JUNTO al texto y no empujada al borde de la columna: separada tanto se leía como dos elementos sueltos en la misma fila, no como una acción. ⚠️ El peso 600 frente al 400 del resto NO BASTABA. A 15px esa diferencia se aprecia al comparar, y nadie compara: se barre la lista con la vista. Por eso ahora el trabajo lo hacen otras dos cosas: · el AIRE de encima, que lo despega del grupo. Es aire y NO una línea: la línea ya se probó y partía la lista en dos, con pinta de separador de sección en vez de cierre de esta. · el SUBRAYADO permanente. Los demás enlaces solo se subrayan al señalarlos, así que uno que ya viene subrayado se lee al instante como otra cosa. Es el mismo recurso invertido, y por eso distingue sin añadir nada nuevo. */ .mega__link.is-all { font-weight: 600; color: var(--c-ink); gap: var(--space-1); margin-top: var(--mega-all-aire); } /* Logotipo de marca. Caja FIJA con `contain`: los seis logos tienen proporciones distintas —de 0,58 (U.S. Polo, alto) a 1,11 (Donna Karan, ancho)— y sin caja fija cada fila tendría una sangría distinta y la columna se vería temblorosa. Con `contain` cada uno se encaja entero en la misma caja y todos los nombres arrancan a la misma altura. */ .mega__logo { width: var(--mega-logo); height: var(--mega-logo); flex: none; object-fit: contain; } /* El hueco va en la FILA, no como margen del logo: así lo aplica solo cuando hay dos hijos, y las marcas sin logotipo no arrastran un margen fantasma. El centrado vertical ya lo da el `align-items: center` de .mega__link. */ .mega__link--marca { gap: var(--mega-logo-gap); } /* El atenuado de la columna se hace con `color`, y el color NO afecta a una imagen: los logos se quedaban a plena intensidad mientras los nombres se agrisaban, y la fila se leía a dos velocidades. Con `opacity` acompañan. 0.6 no es un número al azar: es la opacidad a la que la tinta (#141414) sobre blanco da ~#6f6f6f, que es exactamente --c-body, el gris al que baja el texto. Así los dos se apagan lo mismo. */ .mega__logo { transition: opacity .18s var(--ease); } .mega__l2wrap:hover .mega__logo { opacity: var(--mega-logo-dim); } .mega__l2wrap:hover .mega__link:hover .mega__logo { opacity: 1; } /* Marcas SIN logotipo —hoy Guess y Zapatos Vita—: se les reserva el mismo hueco con un pseudo-elemento vacío, para que sus nombres no se desalineen respecto a los que sí lo tienen. Nada que cargar, solo espacio. */ .mega__link--marca:not(:has(.mega__logo))::before { content: ""; width: var(--mega-logo); flex: none; } .mega__flecha { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; /* Avanza al señalarla: es el gesto que dice «te lleva a algún sitio». Sin él la flecha es solo un dibujo al final de la fila. */ transition: transform .18s var(--ease); } .mega__link.is-all:hover .mega__flecha { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .mega__flecha { transition: none; } /* Quien pide menos movimiento conserva la ATENUACION —que es color, no movimiento— y pierde solo el desplazamiento. El estado se sigue viendo. */ .mega__l2wrap:hover .mega__link:hover { transform: none; } } /* --- La foto --- */ .mega__visual { flex: none; width: var(--mega-visual-w); height: var(--mega-visual-h); margin-left: var(--mega-row-pad); } /* La foto ACOMPAÑA la altura de la tarjeta; ya no la impone. Con `aspect-ratio: 4/5` sobre 17rem de ancho medía 372px FIJOS y, al ser el elemento más alto, marcaba la altura de todo el panel. En «Sale» con el grupo Precio abierto eso daba 68px de contenido dentro de una tarjeta de 372px: más de 300px de blanco. Ahora se estira a lo que haya (`stretch`) y el mínimo lo pone la tarjeta, no ella. */ .mega__visual { position: relative; display: block; align-self: start; overflow: hidden; border-radius: calc(var(--mega-card-radio) - 2px); background: var(--c-soft); } .mega__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s var(--ease); } /* Degradado más suave: el .72 de antes apagaba la foto entera para sostener un titular en mayúsculas 900 que ya no está. */ .mega__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,20,.62), rgba(20,20,20,0) 55%); } .mega__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--space-2); color: var(--c-white); } .mega__cap .eyebrow { display: block; color: var(--c-gold-soft); margin-bottom: var(--space-05); } /* Rótulo discreto. Era --fs-h4 (26px) en peso 900 y MAYÚSCULAS: el último resto del panel anterior, y chocaba con la sobriedad del resto de la tarjeta, donde ya nada grita. */ .mega__cap strong { display: block; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; text-transform: none; line-height: 1.2; color: var(--c-white); } /* La navegación marca cuál es el panel abierto */ /* Con el mega menú abierto tampoco se colorea: la barra ya dice cuál está abierto (ver la regla de .is-active junto al ::after). */ /* ============================================================= Menú móvil — navegación por niveles (drill-down) Tocar una sección NO la despliega hacia abajo: desliza a una pantalla propia con flecha de volver, como en Zara o Mango. Dos niveles: secciones → contenido de la sección. ============================================================= */ .mmenu__bar { display: flex; align-items: center; gap: var(--space-1); flex: none; height: var(--mmenu-bar-h); padding-inline: var(--mmenu-pad-x); border-bottom: var(--hairline) solid var(--c-line); } .mmenu__title { flex: 1; min-width: 0; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mmenu__back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--header-icon); height: var(--header-icon); margin-left: calc(var(--space-1) * -1); background: none; border: 0; padding: 0; cursor: pointer; color: var(--c-ink); } .mmenu__back:hover, .mmenu__back:focus-visible { color: var(--c-gold); } .mmenu__back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mmenu__back[hidden] { display: none; } .mmenu__viewport { position: relative; flex: 1; min-height: 0; } .mmenu__level { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--mmenu-pad-x) var(--space-4); } /* Solo con JS los niveles se apilan y se deslizan. Sin JS quedan uno debajo de otro, visibles: el menú sigue siendo navegable. */ .mobile-menu.js-drill .mmenu__viewport { overflow: hidden; } .mobile-menu.js-drill .mmenu__level { position: absolute; inset: 0; transform: translateX(100%); visibility: hidden; transition: transform var(--mmenu-anim) var(--ease), visibility var(--mmenu-anim) var(--ease); } .mobile-menu.js-drill .mmenu__level.is-current { transform: translateX(0); visibility: visible; } .mobile-menu.js-drill .mmenu__level.is-parent { transform: translateX(-25%); visibility: hidden; } .mmenu__list { list-style: none; margin: 0; padding: 0; } .mmenu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: var(--mmenu-row-h); padding-block: var(--space-1); background: none; border: 0; border-bottom: var(--hairline) solid var(--c-line); cursor: pointer; text-align: left; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); } .mmenu__row:hover, .mmenu__row:focus-visible { color: var(--c-gold); } .mmenu__row svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--c-muted); } .mmenu__row--link { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--c-body); } .mmenu__all { display: flex; align-items: center; min-height: var(--mmenu-row-h); border-bottom: var(--hairline) solid var(--c-line); font-size: var(--fs-sm); font-weight: 600; color: var(--c-gold); } .mmenu__group { margin-top: var(--space-3); } .mmenu__group-title { display: block; margin-bottom: var(--space-05); font-size: var(--fs-2xs); font-weight: 600; color: var(--c-muted); } /* ============================================================= Hero Slider (estilo Original Penguin) — banners deslizables ============================================================= */ .hero-slider { position: relative; height: 600px; overflow: hidden; background: #000; } /* Variante «banner de campaña»: la pieza ya trae logo y claim incrustados. - Sin degradado ni capa de texto: se pisarían con los de la imagen. - El alto lo marca la proporción real de la pieza (3:1) en vez de un alto fijo. Con `cover` sobre 600px se recortaban los laterales y el logo, que en estas piezas va pegado al borde, desaparecía. Doble clase a propósito: así gana al `height` del bloque responsive de más abajo sin depender del orden en la hoja. */ .hero-slider.hero-slider--banner { height: auto; aspect-ratio: 1500 / 500; background: var(--c-soft); } .hero-slider--banner .hero-slide { align-items: stretch; } .hero-slider--banner .hero-slide::after { content: none; } .hero-slider--banner .hero-slide__link { position: absolute; inset: 0; display: block; } .hero-slider--banner .hero-slide__img { object-fit: cover; } .hero-slides { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; display: flex; align-items: center; color: #fff; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease); } .hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .hero-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.05) 72%, rgba(0,0,0,0) 100%); } .hero-slide__inner { position: relative; z-index: 2; width: 100%; } /* Sangría para que el texto no quede debajo de la flecha ‹ del carrusel: la flecha llega a 76px y el contenedor solo separaba 54px. */ .hero-slide__content { max-width: 620px; padding-left: var(--hero-text-indent); } .hero-slide .eyebrow { color: var(--c-gold-light, #e8d9a8); color: rgba(255,255,255,.9); margin-bottom: 1.1rem; } .hero-slide h1 { color: #fff; font-size: var(--fs-hero); line-height: .96; margin: 0 0 1.2rem; } .hero-slide p { color: rgba(255,255,255,.92); font-size: var(--fs-md); max-width: 44ch; margin-bottom: 2rem; } /* Slide entra con leve desplazamiento del texto */ .hero-slide__content > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .hero-slide.is-active .hero-slide__content > * { opacity: 1; transform: none; } .hero-slide.is-active .hero-slide__content > *:nth-child(1) { transition-delay: .15s; } .hero-slide.is-active .hero-slide__content > *:nth-child(2) { transition-delay: .28s; } .hero-slide.is-active .hero-slide__content > *:nth-child(3) { transition-delay: .40s; } .hero-slide.is-active .hero-slide__content > *:nth-child(4) { transition-delay: .52s; } /* Flechas — solo el icono, sin caja. Se conserva el área de 52px como objetivo de clic aunque no se vea nada; y la sombra suave es lo que mantiene legible el trazo blanco cuando el banner de debajo es claro (antes ese trabajo lo hacía el fondo difuminado). */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: #fff; cursor: pointer; transition: opacity .25s var(--ease); } .hero-arrow:hover { opacity: .65; } .hero-arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 7px rgba(0,0,0,.4)); } .hero-arrow--prev { left: 24px; } .hero-arrow--next { right: 24px; } /* Puntos */ .hero-dots { position: absolute; bottom: 26px; left: 0; right: 0; z-index: 6; display: flex; justify-content: center; gap: 10px; } .hero-dot { width: 34px; height: 3px; padding: 0; border: 0; background: rgba(255,255,255,.4); cursor: pointer; transition: background .25s var(--ease); } .hero-dot:hover { background: rgba(255,255,255,.7); } .hero-dot.is-active { background: #fff; } /* ============================================================= COMPRA POR MARCA — banda a todo el ancho, sin gap Foto + nombre y flecha "Ver colección →" abajo a la izquierda. ============================================================= */ .brand-section { padding-block: 0; } .brand-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; } .brand-tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-soft); display: flex; align-items: flex-end; } .brand-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .brand-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.05) 55%); } .brand-tile:hover .brand-tile__img { transform: scale(1.06); } .brand-tile__body { position: relative; z-index: 2; padding: var(--space-4); width: 100%; color: var(--c-white); } .brand-tile__name { color: var(--c-white); font-size: var(--fs-h4); margin: 0 0 var(--space-1); } .brand-tile__cta { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; } @media (max-width: 768px) { .brand-band { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .brand-band { grid-template-columns: 1fr; } } /* ============================================================= Grid de CATEGORÍAS — foto + nombre y flecha DEBAJO (estilo INDIE) ============================================================= */ .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1.25rem; } .cat-card { display: block; } .cat-card__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-soft); } .cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .cat-card:hover .cat-card__media img { transform: scale(1.05); } .cat-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 1rem .15rem 0; } .cat-card__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--c-ink); } .cat-card__arrow { font-size: 1.2rem; color: var(--c-ink); transition: transform .25s var(--ease); } .cat-card:hover .cat-card__arrow { transform: translateX(6px); color: var(--c-gold); } /* ============================================================= Productos ============================================================= */ .product-grid { display: grid; grid-template-columns: repeat(var(--product-grid-cols), 1fr); gap: var(--product-grid-gap); } /* Escalón intermedio. Sin él, la rejilla salta de 4 columnas a 2 de golpe en 1024px: a 1100px las tarjetas bajan a 250px de golpe. */ @media (max-width: 1150px) { .product-grid { --product-grid-cols: 3; } } .product-card { position: relative; display: flex; flex-direction: column; } .product-card__media { position: relative; aspect-ratio: var(--product-media-ratio); overflow: hidden; background: var(--c-soft); margin-bottom: var(--space-2); } .product-card__badge { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; background: var(--c-sale); color: var(--c-white); font-size: var(--fs-2xs); font-weight: 700; padding: .35rem .6rem; line-height: 1; } .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .product-card:hover .product-card__media img { transform: scale(1.06); } /* Bloque de textos: separación uniforme y tokenizada entre marca/nombre/precio */ /* El interlineado se fija en el contenedor para que las tres líneas lo hereden igual: es lo que hace que --product-card-gap signifique lo que dice. */ .product-card__info { display: flex; flex-direction: column; gap: var(--product-card-gap); line-height: var(--product-card-lh); } /* Jerarquía de la tarjeta: la marca sitúa, el nombre identifica, el PRECIO decide. Antes nombre y precio eran idénticos —17,5px y peso 700 los dos— así que competían y ninguno mandaba. Con 18 de 29 productos en oferta, el precio es lo que hay que poder barrer de un vistazo por toda la rejilla. */ /* Sin tracking: la marca es un nombre propio, no una etiqueta. Espaciada se leía como un rótulo y además obligaba a partir las marcas largas. */ .product-card__brand { font-family: var(--font-body); font-size: var(--product-card-brand-fs); font-weight: 500; letter-spacing: 0; color: var(--c-muted); } /* La jerarquía frente al precio la lleva el PESO (500 contra 700), no el tamaño: así el nombre no tiene que encogerse para que el precio mande. */ /* El interlineado va explícito aunque el contenedor ya lo declare: el nombre es un

y la regla base de titulares se lo pone a 1,08, que gana a la herencia. Con un nombre de dos líneas —los hay— esas dos líneas se tocaban. */ .product-card__name { font-family: var(--font-body); font-weight: 500; font-size: var(--product-card-name-fs); text-transform: none; letter-spacing: 0; color: var(--c-ink); margin: 0; line-height: var(--product-card-lh); /* Tope de líneas con puntos suspensivos. `-webkit-box` es el único mecanismo con soporte real para recortar por líneas; pese al prefijo, lo entienden todos los navegadores actuales. El nombre completo sigue disponible en el `title` del elemento y en el texto para lectores de pantalla del enlace. */ display: -webkit-box; -webkit-line-clamp: var(--product-card-name-lines); line-clamp: var(--product-card-name-lines); -webkit-box-orient: vertical; overflow: hidden; /* Reserva SIEMPRE el alto de las dos líneas, aunque el nombre ocupe una: sin esto, las tarjetas de nombre corto quedan más bajas y el precio de cada una cae a distinta altura dentro de la misma fila. */ min-height: calc(var(--product-card-name-lines) * var(--product-card-lh) * 1em); } .product-card__price { font-family: var(--font-body); font-weight: 600; font-size: var(--product-card-price-fs); color: var(--c-ink); } .product-card__price del { color: var(--c-muted); font-weight: 400; margin-right: var(--space-1); } .product-card__price ins { text-decoration: none; color: var(--c-sale); } /* Ocultar texto solo para lectores de pantalla (WooCommerce) */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================= Carrusel de productos ============================================================= */ /* === Controles del carrusel === Rediseñados el 11-ago. La versión anterior era una caja blanca sobre una sección blanca con borde --c-line: 1,18:1 de contraste contra el fondo, cuando el mínimo para un control es 3:1. Solo se veía el glifo flotando y el botón no se leía como pulsable. Ver el bloque de tokens --carousel-*. */ .carousel-nav { display: flex; align-items: center; gap: var(--carousel-gap); } .carousel-arrow { width: var(--carousel-btn); height: var(--carousel-btn); display: flex; align-items: center; justify-content: center; background: var(--c-ink); color: var(--c-white); border: 0; cursor: pointer; transition: background .2s var(--ease), transform .15s var(--ease); } /* Al apuntar vira al dorado en vez de invertirse: invertir un botón que ya es macizo no comunica nada, y el dorado es el acento de la marca. */ .carousel-arrow:hover { background: var(--c-gold); } .carousel-arrow:active { transform: scale(.94); } /* El anillo de foco va en tinta y separado: sobre el dorado del hover, un anillo dorado sería invisible. */ .carousel-arrow:focus-visible, .carousel-pause:focus-visible { outline: var(--focus-w) solid var(--c-ink); outline-offset: 2px; } .carousel-arrow svg { width: var(--carousel-glifo); height: var(--carousel-glifo); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Pausa: acción de texto, no botón. Sale de la jerarquía de las flechas a propósito. Conserva los 44px de alto para no perder objetivo táctil. */ .carousel-pause { height: var(--carousel-btn); display: inline-flex; align-items: center; gap: .4rem; padding-inline: var(--space-1); background: none; border: 0; cursor: pointer; color: var(--c-muted); font-family: inherit; font-size: var(--fs-2xs); font-weight: 500; transition: color .2s var(--ease); } .carousel-pause:hover { color: var(--c-ink); } /* Relleno y no trazo: a 13px un icono de líneas se deshilacha. */ .carousel-pause svg { width: var(--carousel-pause-glifo); height: var(--carousel-pause-glifo); fill: currentColor; stroke: none; flex: none; } /* Alterna icono Y texto según el estado. Lo mueve la clase `is-paused` que ya pone el JS, así que no hizo falta tocarlo. */ .carousel-pause .icon-play, .carousel-pause__on { display: none; } .carousel-pause.is-paused .icon-pause, .carousel-pause.is-paused .carousel-pause__off { display: none; } .carousel-pause.is-paused .icon-play { display: block; } .carousel-pause.is-paused .carousel-pause__on { display: inline; } @media (prefers-reduced-motion: reduce) { .carousel-arrow:active { transform: none; } } /* Marquee por scroll (JS): .product-carousel es el contenedor que se desplaza. El track se duplica; usamos margin-right (no gap) para que las copias encajen sin salto. */ .product-carousel { overflow: hidden; } .product-carousel__track { display: flex; width: max-content; } .product-carousel__track > .product-card { flex: 0 0 var(--carousel-card-w); margin-right: var(--product-carousel-gap); } /* ============================================================= Editorial "Descubre" — mosaico con overlay de texto grande ============================================================= */ .discover-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .discover-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--c-soft); } .discover-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .discover-card::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); transition: background .3s var(--ease); } .discover-card:hover img { transform: scale(1.06); } .discover-card:hover::after { background: rgba(0,0,0,.42); } .discover-card span { position: relative; z-index: 2; color: #fff; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); text-align: center; line-height: 1.05; padding: 0 1rem; } /* ============================================================= Newsletter ============================================================= */ .newsletter { background: var(--c-soft); text-align: center; } .newsletter h2 { font-size: var(--fs-xl); } .newsletter p { color: var(--c-body); max-width: 46ch; margin-inline: auto; } .newsletter-form { display: flex; gap: 0; max-width: 500px; margin: 1.75rem auto 0; } .newsletter-form input { flex: 1; background: #fff; border: 1.5px solid var(--c-ink); border-right: 0; color: var(--c-ink); padding: 1rem 1.2rem; font-family: var(--font-body); } .newsletter-form input::placeholder { color: var(--c-muted); } .newsletter-form input:focus { outline: none; } .newsletter-form .btn { border-left: 0; } /* ============================================================= Footer (oscuro) ============================================================= */ .site-footer { background: var(--c-dark); color: rgba(255,255,255,.72); padding-block: var(--space-6) var(--space-4); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; } .footer-brand img { height: 60px; margin-bottom: 1.1rem; } .footer-brand p { color: rgba(255,255,255,.6); font-size: var(--fs-sm); max-width: 34ch; } .footer-col h4 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; color: #fff; margin-bottom: 1.1rem; } .footer-col a { display: block; padding: .35rem 0; color: rgba(255,255,255,.6); font-size: var(--fs-sm); } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: var(--space-5); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); font-size: var(--fs-xs); } /* ============================================================= Responsive ============================================================= */ @media (max-width: 1024px) { .cat-grid, .product-grid, .discover-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .primary-nav { display: none; } .nav-toggle { display: inline-flex; } .mega-panel, .mega { display: none; } .cart-total { display: none; } /* La cabecera es `1fr auto 1fr` (logo · nav · acciones). Al ocultar la nav, esta SALE de la rejilla y solo quedan dos hijos: las acciones caían en la columna del medio —a 89px del borde— y el logo se aplastaba a 41px en una columna de 1fr. Con la nav fuera, la rejilla debe ser de dos columnas. */ .header-inner { grid-template-columns: auto 1fr; } .brand-grid { grid-template-columns: 1fr; } .hero-slider { height: 460px; } .hero-arrow { width: 42px; height: 42px; } .hero-arrow--prev { left: 10px; } .hero-arrow--next { right: 10px; } } @media (max-width: 560px) { .cat-grid, .product-grid, .discover-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } .newsletter-form { flex-direction: column; } .newsletter-form input { border-right: 1.5px solid var(--c-ink); } .section-head { flex-direction: column; align-items: flex-start; } } /* ---------- Menú móvil: el panel ---------- Columna flex: la barra queda fija arriba y el nivel activo es lo único que scrollea. Antes el panel entero scrolleaba y el botón de cerrar, posicionado en absoluto, se iba con el contenido. */ .mobile-menu { position: fixed; inset: 0 0 0 auto; width: var(--mmenu-w); background: #fff; transform: translateX(100%); transition: transform .35s var(--ease); z-index: 200; display: flex; flex-direction: column; } .mobile-menu.is-open { transform: translateX(0); } .mobile-close { flex: none; } .menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease); z-index: 150; } .menu-overlay.is-open { opacity: 1; visibility: visible; } /* Velo SUAVE, solo para el buscador (13-ago). El negro al 50% tiene sentido en el carrito y en el menú móvil: son decisiones —pagar, navegar— y apagar la página ayuda a concentrarse. Buscar no es eso: el cliente quiere seguir viendo dónde estaba. Con el velo fuerte se sentía un portazo. Aquí baja a un 18% y se apoya en un desenfoque muy leve: el fondo se aparta sin apagarse. El desenfoque es un extra —si el navegador no lo soporta, el velo claro ya cumple— y por eso no se le confía el contraste. */ .menu-overlay.is-suave { background: rgba(20, 20, 20, .18); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* ============================================================= Aviso flotante (toast) ------------------------------------------------------------- Sustituye al aviso de WooCommerce que se insertaba ARRIBA DEL TODO y empujaba toda la página hacia abajo. Este va en `position: fixed`: ocupa cero espacio en el flujo, así que no mueve ni un píxel de lo que hay debajo. Centrado en horizontal y colgado bajo la cabecera, no en mitad de la pantalla: un aviso en el centro exacto tapa justo el producto que acabas de añadir y se lee como una ventana que hay que cerrar. Para bajarlo, --toast-top. ============================================================= */ .exc-toast { position: fixed; top: var(--toast-top); left: 50%; z-index: var(--toast-z); width: var(--toast-w); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--c-ink); color: var(--c-white); box-shadow: var(--shadow-md); font-size: var(--fs-sm); line-height: 1.4; /* Entra deslizándose desde arriba. El -50% del eje X es lo que lo centra: va en el transform y no en un `margin-left`, que exigiría saber el ancho. */ transform: translate(-50%, -0.75rem); opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); /* Mientras no se ve, no intercepta clics. */ pointer-events: none; } .exc-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .exc-toast__icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .exc-toast__txt { flex: 1; min-width: 0; } .exc-toast__txt a { text-decoration: underline; text-underline-offset: 3px; } .exc-toast__close { flex: none; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; opacity: .7; display: inline-flex; } .exc-toast__close:hover { opacity: 1; } .exc-toast__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } @media (prefers-reduced-motion: reduce) { .exc-toast { transition: opacity .2s linear; transform: translate(-50%, 0); } } /* ============================================================= Ventanas (modales) — guía de tallas, cambios, tiendas ============================================================= */ .exc-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--space-3); background: rgba(20,20,20,.55); } .exc-modal[hidden] { display: none; } .exc-modal__panel { position: relative; width: 100%; max-width: 40rem; max-height: 88vh; display: flex; flex-direction: column; background: var(--c-white); box-shadow: var(--shadow-md); } .exc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--hairline) solid var(--c-line); flex: none; } .exc-modal__title { font-size: var(--fs-h5); margin: 0; } .exc-modal__body { padding: var(--space-3); overflow-y: auto; } .exc-modal__lead { font-size: var(--fs-sm); color: var(--c-body); margin: 0 0 var(--space-3); } .exc-modal__sub { font-size: var(--fs-h6); margin: var(--space-4) 0 var(--space-2); } .exc-modal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); } .exc-modal__list li { position: relative; padding-left: var(--space-3); font-size: var(--fs-sm); color: var(--c-body); line-height: 1.6; } .exc-modal__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--c-gold); } .exc-modal__list strong { color: var(--c-ink); font-weight: 500; } .exc-modal__note { font-size: var(--fs-xs); color: var(--c-muted); margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: var(--hairline) solid var(--c-line); } /* ---- Vista rápida ---- Más ancha que las demás ventanas porque lleva foto: a 40rem la imagen quedaría del tamaño de un sello y no serviría para decidir. Y sin relleno en el cuerpo, que aquí la foto va a sangre contra el borde del panel. */ .exc-modal--vr .exc-modal__panel { max-width: var(--vr-w); } .exc-modal--vr .exc-modal__body { padding: 0; } .vr { display: grid; grid-template-columns: 1fr 1fr; } /* La foto NO manda en el alto de la ventana. A 3:4 sobre media ventana ancha pide más alto del que cabe, el cuerpo se pone a rodar y lo primero que desaparece por arriba es el nombre del producto —justo lo que se vino a ver. Con el tope, la foto recorta y todo el texto queda a la vista sin rodar. */ .vr__media { aspect-ratio: var(--product-media-ratio); max-height: var(--vr-media-max); background: var(--c-soft); } .vr__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Centrado en vertical: con una foto alta y un texto corto, pegarlo arriba o abajo deja un vacío que parece un fallo de carga. */ .vr__info { display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); padding: var(--space-3); } .vr__brand { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--c-muted); } .vr__name { font-size: var(--fs-h5); margin: 0; } .vr__price { font-size: var(--fs-base); } .vr__desc { font-size: var(--fs-sm); color: var(--c-body); } .vr__desc p { margin: 0 0 var(--space-1); } .vr__aviso { font-size: var(--fs-xs); color: var(--c-err); margin: 0; } /* Las acciones se pegan al fondo del panel: así quedan a la misma altura aunque un producto traiga resumen y el siguiente no. */ .vr__acciones { padding-top: var(--space-2); display: grid; gap: var(--space-1); } .vr__acciones .btn { justify-content: center; height: var(--field-h); padding-block: 0; letter-spacing: 0; } .vr__form { margin: 0; display: grid; } .wish--vr .wish__btn { width: 100%; height: var(--field-h); background: transparent; border: var(--field-border) solid var(--c-line); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; } .wish--vr .wish__btn:hover { background: transparent; border-color: var(--c-ink); } .vr__link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink); } .vr__link svg { width: 15px; height: 15px; fill: none; stroke: var(--c-gold); stroke-width: 1.6; flex: none; } .vr__link:hover { color: var(--c-gold); } .vr__cargando { padding: var(--space-5); text-align: center; color: var(--c-muted); } @media (max-width: 640px) { /* Una columna: en vertical, media ventana de foto deja el precio y el botón fuera de la pantalla, que es lo único que hay que ver. */ .vr { grid-template-columns: 1fr; } .vr__media { aspect-ratio: 4 / 3; } } /* Tabla de medidas */ .exc-table__wrap { overflow-x: auto; } .exc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .exc-table th, .exc-table td { padding: var(--space-1) var(--space-2); text-align: left; border-bottom: var(--hairline) solid var(--c-line); white-space: nowrap; } .exc-table thead th { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--c-muted); } .exc-table tbody th { font-family: var(--font-display); font-weight: 500; color: var(--c-ink); } .exc-table tbody td { color: var(--c-body); } .exc-table tbody tr:hover { background: var(--c-soft); } /* Pasos numerados */ .exc-steps { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); } .exc-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; } .exc-steps__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-ink); color: var(--c-white); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; } .exc-steps strong { display: block; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); } .exc-steps span:not(.exc-steps__n) { display: block; font-size: var(--fs-sm); color: var(--c-body); line-height: 1.6; } /* Listado de tiendas */ .exc-stores { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--c-line); } .exc-store { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--c-line); } .exc-store__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .exc-store__name { font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 600; color: var(--c-ink); } .exc-store__city { font-size: var(--fs-2xs); font-weight: 500; color: var(--c-gold); } .exc-store__addr, .exc-store__hours { font-size: var(--fs-xs); color: var(--c-body); } .exc-store__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-05); flex: none; } .exc-store__tel { font-size: var(--fs-xs); color: var(--c-body); border-bottom: var(--hairline) solid var(--c-line); } .exc-store__tel:hover { color: var(--c-gold); border-color: var(--c-gold); } .exc-stock { display: inline-flex; align-items: center; gap: var(--space-1); padding: .3em .6em; font-size: var(--fs-2xs); font-weight: 500; line-height: 1; white-space: nowrap; } .exc-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .exc-stock--disponible { background: var(--c-ok-soft); color: var(--c-ok); } .exc-stock--pocas { background: var(--c-wait-soft); color: var(--c-wait); } .exc-stock--agotado { background: var(--c-off-soft); color: var(--c-off); } /* Accesos de ayuda en la ficha de producto */ .pdp-help { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-3); padding-block: var(--space-3); border-top: var(--hairline) solid var(--c-line); } .pdp-help__item { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink); line-height: 1; transition: color .2s var(--ease); } .pdp-help__item span { display: inline-block; line-height: 1; } .pdp-help__item:hover { color: var(--c-gold); } .pdp-help__item svg { width: 17px; height: 17px; fill: none; stroke: var(--c-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } @media (max-width: 560px) { .exc-modal { padding: 0; align-items: flex-end; } .exc-modal__panel { max-width: none; max-height: 92vh; } .exc-store__side { align-items: flex-start; } } /* ============================================================= Carrito — cajón lateral (mini carrito) Se abre al pulsar el carrito de la cabecera y al añadir un producto. Su contenido y el contador se refrescan por AJAX (fragmentos de Woo). ============================================================= */ .cart-drawer { position: fixed; inset: 0 0 0 auto; width: min(92vw, 420px); z-index: 200; background: var(--c-white); transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; } .cart-drawer.is-open { transform: translateX(0); } .cart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--hairline) solid var(--c-line); flex: none; } .cart-drawer__title { font-size: var(--fs-h5); margin: 0; } /* La barra de desplazamiento del cajón, fina y del color del sistema. La de Windows es gris, ancha y con flechas, y dentro de un panel blanco de 420px se come el borde derecho de las fotos. `scrollbar-gutter: stable` reserva su sitio siempre: sin eso, el contenido salta unos píxeles a la izquierda en cuanto un producto más hace aparecer la barra. */ .cart-drawer__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } /* WebKit no entiende `scrollbar-color`, así que va aparte. */ .cart-drawer__body::-webkit-scrollbar { width: var(--scroll-w); } .cart-drawer__body::-webkit-scrollbar-track { background: transparent; } .cart-drawer__body::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--scroll-w); } .cart-drawer__body::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } /* Lista de productos */ .mini-cart__list { list-style: none; margin: 0; padding: 0; flex: 1; } .mini-cart__item { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; padding: var(--space-2) var(--space-3); border-bottom: var(--hairline) solid var(--c-line); } .mini-cart__media { width: 68px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-soft); } .mini-cart__media img { width: 100%; height: 100%; object-fit: cover; } .mini-cart__info { display: flex; flex-direction: column; gap: var(--space-05); min-width: 0; } .mini-cart__brand { font-size: var(--fs-2xs); font-weight: 500; color: var(--c-muted); } .mini-cart__name { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); line-height: 1.35; } .mini-cart__name:hover { color: var(--c-gold); } .mini-cart__qty { font-size: var(--fs-xs); color: var(--c-body); } /* Solo el aspa, sin recuadro. El área pulsable SE MANTIENE en 26px aunque no se vea: reducirla al tamaño del glifo dejaría un objetivo de ~10px, imposible de acertar con el dedo y molesto con el ratón. */ .mini-cart__remove { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--minicart-x-size); height: var(--minicart-x-size); font-size: var(--fs-md); line-height: 1; color: var(--c-err); background: none; border: 0; text-decoration: none; transition: opacity .2s var(--ease); } /* Ya es rojo en reposo, así que el hover no puede ser un cambio de color: se marca bajando la opacidad, que sí se distingue de un rojo a otro rojo. */ .mini-cart__remove:hover { color: var(--c-err); opacity: .6; } .mini-cart__remove:focus-visible { outline: var(--focus-w) solid var(--c-gold); outline-offset: 2px; } /* Pie: subtotal y acciones. Queda fijo al fondo del cajón. */ .mini-cart__foot { flex: none; padding: var(--space-2) var(--space-3) var(--space-3); border-top: var(--hairline) solid var(--c-line); background: var(--c-white); position: sticky; bottom: 0; } .mini-cart__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 600; color: var(--c-ink); } .mini-cart__note { font-size: var(--fs-xs); color: var(--c-muted); margin: var(--space-05) 0 var(--space-2); } /* Dos acciones del MISMO tamaño: rejilla de dos columnas iguales, no flex con base flexible —así ninguna crece más que la otra por tener el texto más largo. La jerarquía la marca el relleno (macizo = finalizar), no el ancho. */ .mini-cart__buttons { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-2); } /* Sin tracking: en cajas estrechas el texto espaciado se parte antes y se lee peor. */ .mini-cart__buttons .btn { justify-content: center; height: var(--field-h); padding-inline: var(--space-1); padding-block: 0; letter-spacing: 0; white-space: nowrap; } /* Carrito vacío */ .mini-cart__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-1); padding: var(--space-5) var(--space-3); } .mini-cart__empty-ic { width: 40px; height: 40px; fill: none; stroke: var(--c-line); stroke-width: 1.4; margin-bottom: var(--space-1); } .mini-cart__empty-title { font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 600; color: var(--c-ink); margin: 0; } .mini-cart__empty-text { font-size: var(--fs-sm); color: var(--c-body); margin: 0 0 var(--space-2); } /* ---------- WooCommerce: usar nuestras tarjetas en shortcode [products] ---------- */ /* --- Listado de tienda --- La plantilla de la tienda es de Bricks y encierra el listado en un .brxe-container de 1100px, mientras el resto del sitio usa --container (1500). Lo alineamos para que la tienda no se vea más estrecha que la home. */ /* Bricks pinta su propio título de archivo, centrado y a 48px. Lo ocultamos: el encabezado lo imprime excellent_shop_head() con el patrón del sitio. */ .woocommerce-shop .bricks-archive-title-wrapper, .tax-product_cat .bricks-archive-title-wrapper, .tax-product_tag .bricks-archive-title-wrapper { display: none; } /* Bricks agrupa contador y orden en una fila flex; nuestro encabezado ocupa su propia línea completa por encima de ellos. */ .bricks-before-shop-loop { flex-wrap: wrap; align-items: center; gap: var(--space-2); } .bricks-before-shop-loop .shop-head { flex: 1 1 100%; } /* El ancho y el margen de estos contenedores de Bricks (tienda, carrito y checkout) se declaran arriba, en la regla única de contenedor. */ /* Título de la página (lo imprime Bricks): a 48px y pegado al borde era desproporcionado para estas vistas. */ .woocommerce-cart #brx-content > h1, .woocommerce-checkout #brx-content > h1 { font-size: var(--fs-h3); text-align: center; margin: 0 0 var(--space-4); letter-spacing: var(--tracking-tight); } /* El margen superior de .cart-collaterals era del carrito de una sola columna, cuando los totales iban debajo de la tabla y necesitaban despegarse. Ahora van en la columna de al lado y ese margen dejaba el resumen 52px más bajo que la tarjeta de productos. */ /* Encabezado propio del listado (mismo patrón que el archivo de marca) */ .shop-head { margin-bottom: var(--space-4); } /* === Banner de archivo (referencia: indie.com.ec) === A sangre desde dentro del contenedor de Bricks, que es de 1100px y centrado: `calc(50% - 50vw)` mide desde el centro del propio contenedor, así que funciona igual cuando Bricks lo pasa a ancho completo en móvil. No hace falta saber su padding — es lo que lo hace robusto. El desbordamiento de ~7px por lado que provoca la barra de scroll (100vw la incluye) lo recorta el `overflow-x: hidden` que ya lleva el body. Es simétrico, así que no descentra nada. */ .shop-head--banner { position: relative; margin-inline: calc(50% - 50vw); margin-bottom: var(--space-5); min-height: var(--banner-h); display: grid; place-items: center; padding: var(--space-4) var(--gutter); text-align: center; background-color: var(--banner-bg); /* La foto llega desde PHP en --shop-head-img. Si la categoría no tiene ninguna, el valor por defecto es `none` y se ve el color plano. */ background-image: var(--shop-head-img, none); background-size: cover; background-position: center; } .shop-head--banner::before { content: ""; position: absolute; inset: 0; background: var(--banner-veil); } /* El contenido va por encima del velo. Ancho de lectura acotado: un título centrado que cruza 1500px de pantalla deja de leerse como título. */ .shop-head__inner { position: relative; max-width: 46rem; } .shop-head--banner .shop-head__title { color: var(--c-white); } .shop-head--banner .eyebrow, .shop-head--banner .shop-head__count { color: rgba(255, 255, 255, .72); } .shop-head--banner .shop-head__desc { color: rgba(255, 255, 255, .85); margin-inline: auto; } /* Título de archivo (tienda, categoría, etiqueta, búsqueda). Se sale de la regla global de h1-h6, que va en 900 y MAYÚSCULAS (12-ago). A 39px, Figtree en 900 y caja alta se come la pantalla y tapa el producto, que es lo que el cliente viene a ver. En caja normal y 600 el nombre de la categoría se lee como un rótulo editorial y no como un cartel. El «CATEGORÍA» de encima sigue en mayúsculas: esa pareja —etiqueta pequeña en caja alta + título grande en caja normal— es justo lo que da el aire editorial. Dos mayúsculas seguidas, en cambio, se anulan entre sí. */ .shop-head__title { font-size: var(--fs-2xl); font-weight: 600; text-transform: none; margin: var(--space-1) 0 var(--space-1); letter-spacing: var(--tracking-tight); } .shop-head__desc { color: var(--c-body); font-size: var(--fs-sm); margin: 0 0 var(--space-1); max-width: 48ch; } .shop-head__count { color: var(--c-muted); font-size: var(--fs-xs); margin: 0; } /* Contador y orden: una sola línea discreta sobre la grilla */ .woocommerce .woocommerce-result-count { float: none; margin: 0; font-size: var(--fs-xs); color: var(--c-muted); } .woocommerce .woocommerce-ordering { float: none; margin: 0; } .woocommerce .woocommerce-ordering select { border: var(--field-border) solid var(--c-line); border-radius: var(--radius); padding: .5em 2em .5em .8em; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink); background-color: var(--c-white); } .woocommerce-shop .brxe-woocommerce-products, .tax-product_cat .brxe-woocommerce-products { display: flow-root; } .woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--product-grid-gap); margin: 0; } .woocommerce ul.products li.product { width: auto; margin: 0; float: none; text-align: left; } .woocommerce ul.products li.product a img { margin-bottom: .9rem; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); color: var(--c-ink); padding: 0; text-transform: none; } .woocommerce ul.products li.product .price { color: var(--c-ink); font-weight: 600; font-size: var(--fs-base); } .woocommerce ul.products li.product .button { display: none; } @media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .woocommerce ul.products { grid-template-columns: repeat(2,1fr); gap: 1rem; } } /* ============================================================= WooCommerce — producto, carrito y checkout (tokenizado) ============================================================= */ /* Bricks aplica display:flex al body en páginas Woo (layout con sidebar) y descuadra el ancho. Forzamos el flujo normal (bloque) para nuestro layout. */ body.woocommerce, body.woocommerce-page { display: block; } .site-main { width: 100%; } /* Contenedor de páginas Woo */ .woocommerce-page .site-main, .single-product .site-main { padding-block: var(--section-y); } /* Los LISTADOS van más ceñidos que una página de contenido: una rejilla de productos ya trae su propio aire entre filas, así que el de la sección se suma al que se ve y separa de más. Va aparte y no en --section-y para no arrastrar a la home, la cuenta y el resto del sitio. */ .post-type-archive-product .site-main, .tax-product_cat .site-main, .tax-product_tag .site-main, .tax-product_brand .site-main { padding-block: var(--shop-y); } /* ...pero ARRIBA no, donde hay banner a sangre: ese aire dejaba una franja blanca entre la cabecera adherida y el banner (12-ago). Se quita solo el de arriba; el de abajo separa el listado del pie y se conserva. ⚠️ Va justo DESPUÉS de la regla anterior a propósito. El primer intento se escribió 100 líneas más arriba y no hacía nada: misma especificidad, y en un empate manda la última. Si se mueve, deja de funcionar sin avisar. La MARCA no entra: su cabecera sigue siendo de texto, no un banner. */ .post-type-archive-product .site-main, .tax-product_cat .site-main, .tax-product_tag .site-main { padding-top: 0; } /* El ancho y el margen lateral salen de la regla única de contenedor (arriba). Carrito y checkout traen su propio ritmo vertical, más ceñido que el de una página de contenido: el proceso de compra no necesita aire de sección. */ .woocommerce-cart .site-main, .woocommerce-checkout .site-main { padding-block: 0; } /* En la PDP el producto cuelga directo de #main: lo contenemos aquí. El ANCHO sí es propio (--pdp-container, 1280 contra los 1500 del resto): la ficha se lee mejor más estrecha y eso es deliberado. El MARGEN LATERAL no: sale de --gutter como en todo el sitio. ⚠️ Hasta el 14-ago aquí había un `--pdp-pad-x` propio —el mismo clamp que --gutter pero con máximo 52,5 en vez de 50px—. Nadie pidió esos 2,5px y era el único margen lateral del proyecto fuera de --gutter. Token eliminado. No añadir aquí un segundo padding: `.woocommerce` NO es hijo directo de #main, por eso la regla de contenedor de arriba no llega y no se duplica el margen. */ .single-product #main.site-main { width: 100%; max-width: var(--pdp-container); margin-inline: auto; padding-inline: var(--gutter); padding-block: 0; } /* Botones */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button, .woocommerce-page .button { background: var(--c-ink); color: var(--c-white); border: 1.5px solid var(--c-ink); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; padding: 1em 2.2em; border-radius: 0; transition: background .25s var(--ease), color .25s var(--ease); cursor: pointer; line-height: 1.2; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce .button:hover, .woocommerce #respond input#submit:hover, .woocommerce button.button.alt:hover { background: transparent; color: var(--c-ink); } .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce #place_order, .single_add_to_cart_button, .checkout-button { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); } /* Cantidad */ .woocommerce .quantity input.qty { border: 1.5px solid var(--c-line); padding: .7em .4em; width: 68px; text-align: center; font-family: var(--font-body); font-weight: 500; border-radius: 0; } /* Precio */ .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--c-ink); font-weight: 600; font-size: var(--fs-h4); } .woocommerce div.product p.price del { color: var(--c-muted); font-weight: 400; } .woocommerce div.product p.price ins { text-decoration: none; color: var(--c-sale); } /* ============================================================= PDP — página de producto individual (rediseño editorial claro) Galería protagonista a la izquierda, resumen aireado a la derecha. ============================================================= */ /* Breadcrumb: dentro de la columna de información, encima de la marca. Micro y compacto. */ /* Peso 400, no 500 (14-ago, pedido por el cliente). Encaja en la norma sin forzarla: el escalón 400 cubre «enlaces de lista», y una miga es exactamente eso. Va con la intención de que la ruta acompañe y no reclame atención. ⚠️ Quien venga a «arreglarlo» al 500 de las etiquetas: es deliberado. */ .single-product .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-05); margin: 0 0 var(--space-1); font-size: var(--fs-2xs); font-weight: 400; color: var(--c-muted); } /* ⚠️ `font-weight: inherit` NO es relleno: sin él los enlaces salen en NEGRITA. Bricks trae `.woocommerce-breadcrumb a { font-weight: 700 }` en `assets/css/integrations/woocommerce-layer.min.css` —el mismo bloque que metía el `margin: 0 10px` del separador—, y esa regla apunta DIRECTAMENTE al . Poner el peso solo en el