/* ============================================================= Excellent — Design Tokens (light / editorial) Base blanca, fotografía protagonista. NORMA TIPOGRÁFICA (13-ago) — se aplica a TODO el sitio, sin excepciones: 1. NUNCA `text-transform: uppercase`. 2. NUNCA `letter-spacing` positivo. El negativo (--tracking-tight) sí: no separa las letras, las junta, y en titulares grandes es práctica estándar. 3. Escala de pesos, y solo estos cuatro: 400 cuerpo, descripciones, enlaces de lista 500 etiquetas, marcas, texto secundario, cabeceras de tabla 600 titulares, nombres de producto, precios, botones y acciones 700 SOLO texto pequeño sobre fondo de color, donde el peso no es jerarquía sino legibilidad: la etiqueta de descuento y los contadores. Hoy son tres sitios y no deben crecer. Prohibidos el 800 y el 900. La jerarquía la dan el TAMAÑO y el COLOR, no el grosor. Antes de este barrido había 75 mayúsculas, 96 espaciados y 143 declaraciones en peso 700 o más contra 9 en peso normal: el sitio entero estaba en negrita. ============================================================= */ /* Bricks (tema padre) aplica html{font-size:62.5%} (=10px), que encogía todo. Fijamos la base tipográfica del sitio. 109.375% = 17.5px (17.5/16). Toda la escala rem parte de aquí. */ html { font-size: 109.375% !important; } :root { /* --- Colores --- */ --c-bg: #ffffff; /* fondo principal */ --c-soft: #f5f4f1; /* secciones alternas */ --c-ink: #141414; /* titulares y texto fuerte */ --c-body: #6f6f6f; /* texto secundario */ --c-muted: #9a9a9a; /* texto terciario */ --c-line: #e7e5e1; /* bordes sutiles */ --c-dark: #141414; /* footer / bloques oscuros */ --c-dark-2: #1d1d1d; --c-gold: #a9843f; /* acento discreto (del logo) */ --c-gold-soft: #f0e7d6; /* fondo suave del acento (pastillas, resaltados) */ --c-white: #ffffff; /* Rojo comercial: SOLO ofertas y rebajas — etiqueta de descuento, precio rebajado, bandera de la ficha y el rótulo «Sale» del menú. Historia: #c0392b → #c8102e → #ff0000, los tres el 12-ago, a petición del cliente, que lo quería cada vez más fuerte. Rojo puro y decisión suya, tomada con el dato delante. ⚠️ CONTRASTE: #ff0000 da 4,00:1 sobre blanco y 3,64:1 sobre --c-soft. AA pide 4,5:1 para texto pequeño, así que NO cumple — ni el rótulo «Sale», ni el precio rebajado, ni el texto blanco sobre la etiqueta. Está asumido a conciencia. Si algún día hay que cumplir AA sin perder el rojo puro de la marca, lo más cercano medido es #e60000 (4,81:1 sobre blanco), o dejar el rojo en fondos y poner el TEXTO en --c-ink. No estimar estos números: medirlos. */ --c-sale: #ff0000; /* --- Estados (pastillas de pedido, avisos) --- */ --c-ok: #2f6f4e; /* completado / entregado */ --c-ok-soft: #e6f0ea; --c-wait: #8a6d1f; /* en proceso / pendiente de pago */ --c-wait-soft: #f7f0dc; --c-off: #6f6f6f; /* cancelado / reembolsado */ --c-off-soft: #f0efec; --c-err-soft: #fbeae8; /* fondo suave del estado fallido */ /* Rojo de interfaz: errores, avisos y acciones destructivas (quitar del carrito, cerrar sesión, pedido fallido, contraseña débil). Separado de --c-sale a propósito, y desde el 12-ago **de verdad**: hasta ese día seis puntos de interfaz tiraban de --c-sale pese a que este comentario ya decía que no debían. Al subir la oferta a rojo puro dejó de ser una incoherencia de nombres y pasó a verse: la ✕ de quitar del carrito habría gritado igual que un -50 %. Un error y una oferta no comparten color. Cumple AA sobre blanco (6,54:1), que es justo lo que --c-sale ya no cumple. */ --c-err: #b3261e; /* --- Tipografía --- */ --font-display: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* titulares */ --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* === Escala tipográfica modular === Base 16px · ratio ≈ 1.25 (Tercera Mayor). Todo tamaño de texto sale de aquí. */ /* === Texto de interfaz / cuerpo === Rehechos los TRES escalones por debajo del cuerpo el 13-ago. El cuerpo y los titulares NO se tocan. Estaban en 12,0 / 13,1 / 15,3px: tres escalones apretados en 3,3px. Tan juntos que no se distinguían entre sí, pero los tres claramente menores que el cuerpo — de ahí que el sitio se viera menudo Y descoordinado a la vez. Y no era una esquina: 185 usos por debajo del cuerpo contra 21 en cuerpo o más. El sitio está construido casi entero con letra pequeña. Ahora van 13 → 14,5 → 16 → 17,5: se separan de verdad. ⚠️ NO se subió la base del documento, que era la otra salida. Hay 69 tokens en rem que no son texto —anchos, altos, el botón de WhatsApp, la barra del menú móvil— y habrían crecido todos, mientras --gutter (50px) y --nav-gap (25px) son absolutos y no. Se habría roto la relación entre texto y espacio que costó afinar. Los rem no caen redondos porque la base es 17,5px; el px va en el comentario, que es donde se lee. Para calcular uno nuevo: px / 17,5. */ --fs-2xs: 0.7429rem; /* 13 — micro: etiqueta de descuento, contadores */ --fs-xs: 0.8286rem; /* 14,5 — rótulos, eyebrows, avisos, contador de resultados */ /* 16px NO es casualidad: Safari en iPhone hace zoom automático al tocar un campo cuyo texto mida menos, y eso descoloca el checkout entero. --field-fs apunta aquí, así que con este valor deja de pasar. */ --fs-sm: 0.9143rem; /* 16 — navegación, botones, campos, texto secundario */ --fs-base: 1rem; /* 17,5 — cuerpo base */ --fs-md: 1.125rem; /* 19,7 — párrafo destacado (lead) */ /* Encabezados (semánticos H1–H6) ⚠️ Los px de aquí estaban TODOS mal hasta el 14-ago: se escribieron contra una base de 16px cuando la de este sitio es 17,5, así que cada uno decía un 9% menos de lo que mide (el H1 ponía 44 y mide 48,1). Los valores en rem nunca cambiaron: era solo el comentario, pero es el número que se lee para decidir, y con él se elige mal. Los de la escala de cuerpo sí estaban bien. Comprobado en el navegador, no calculado a mano. Regla: px = rem × 17,5. */ --fs-h6: 1.125rem; /* 19,7 */ --fs-h5: 1.25rem; /* 21,9 */ --fs-h4: 1.5rem; /* 26,2 */ --fs-h3: 1.875rem; /* 32,8 */ --fs-h2: 2.25rem; /* 39,4 */ --fs-h1: 2.75rem; /* 48,1 */ --fs-display: clamp(2.5rem, 4.5vw, 3.75rem); /* 43,8→65,6 — hero */ /* Alias de compatibilidad (mapeados a la escala) */ --fs-lg: var(--fs-h4); /* 24 */ --fs-xl: var(--fs-h3); /* 30 */ --fs-2xl: var(--fs-h2); /* 36 */ --fs-hero: var(--fs-display); /* ⚠️ RETIRADOS el 13-ago. Ya no los usa nadie y NO deben volver a usarse: son el espaciado ancho que la norma prohíbe. Se dejan definidos —y solo por eso— para que una regla vieja de un plugin o de Bricks que aún los invoque no herede un valor roto. El día que se confirme que nada externo los llama, se borran las dos líneas. */ --tracking-wide: 0; --tracking-mid: 0; /* --- Espaciado --- */ --space-05: 0.25rem; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4.5rem; --space-7: 6.5rem; /* === Layout: los tres que gobiernan TODO el espaciado === Antes no existían: el margen lateral estaba escrito a mano en cuatro reglas distintas y el vertical era un 50px fijo igual para un teléfono que para un monitor. Cualquier vista nueva debe salir de aquí. */ /* Margen lateral. Único en todo el proyecto: nunca volver a escribir `clamp(...)` suelto en un padding-inline. Techo bajado de 3rem a 50px el 11-ago a petición del cliente. Va en px y no en rem —al revés que --section-y, donde 70px caían justo en 4rem— porque 50px son 2,857rem: un número que nadie puede leer ni mantener. Es un tope de composición, no un ritmo tipográfico, así que un valor absoluto es defendible aquí. El suelo sigue en rem y manda en móvil. Con 5vw, el tope se alcanza a los 1000px de ventana (antes 1050). */ --gutter: clamp(1.25rem, 5vw, 50px); /* 21.9px → 50px */ /* Aire vertical entre secciones. Fluido: en móvil sobraba. El techo baja de 87,5px a 60px el 11-ago, en dos pasos pedidos por el cliente (primero 70, luego 60). Se mantiene en REM aunque 60px no caiga redondo (son 3,4286rem, y sí, se lee mal): a diferencia del margen lateral, el aire vertical debe crecer si el visitante agranda la letra del navegador, o el texto se apelmaza contra los bordes de la sección. El comentario dice los px; el valor lo dice en la unidad que toca. El suelo NO se toca: en móvil se sigue viendo el mismo compacto de antes. Con 6vw, el techo se alcanza a los 1000px de ventana (antes 1458). */ --section-y: clamp(2.5rem, 6vw, 3.4286rem); /* 43.75px → 60px */ /* Ritmo entre elementos dentro de un bloque (título ↔ texto ↔ acción). */ --flow: clamp(1rem, 2vw, 1.5rem); /* 17.5px → 26px */ /* --- Tokens semánticos (por componente) --- */ /* Proporción de la foto de producto. Recorrido: 2:3 dejaba la foto en 501px y la tarjeta en 604 —demasiado—; 3:4 bajaba a 445 y quitaba 56, más de lo que se quería. 5:7 se queda en 468: quita 33 respecto a 2:3 y mantiene la prenda alta. 5:7 no es un número inventado: es una proporción fotográfica de toda la vida (el papel 5×7), así que el fotógrafo puede encuadrar a ella. ⚠️ Al diseñador se le indicó 2:3. Con esta proporción, `cover` recortará un poco por los lados. Se decide con la prueba piloto: o se cambia esta línea, o se le pide 5:7. */ --product-media-ratio: 5 / 7; --product-grid-cols: 4; /* columnas de la rejilla de producto de la home */ --product-card-gap: 3px; /* separación entre marca / nombre / precio en la tarjeta */ /* Interlineado de las tres líneas de la tarjeta. Sin esto, marca y precio heredan el 1,65 del cuerpo —pensado para leer párrafos— y cada línea arrastra su media interlínea de aire: el gap decía 5px y lo que se veía eran 12-13px, además desiguales entre sí. Con un valor común, el gap de arriba gobierna de verdad. 1,25 y no menos: el nombre del producto se parte en dos líneas a menudo («Perry Ellis Tech Knit Open Collar Sweater Polo») y por debajo de eso las dos líneas se tocan. */ --product-card-lh: 1.25; /* Textos de la tarjeta, medidos para una tarjeta de ~330px (rejilla de 4). Se probaron un escalón más abajo (12 / 15,3 / 16,5) cuando la home estuvo a 5 columnas y la tarjeta bajó a 263px; al volver a 4, esos tamaños se quedaban cortos para el ancho disponible. El nombre va fuera de la escala modular (16,5px) porque es un ajuste fino, pero en REM y no en px, para que siga creciendo si el visitante sube el tamaño de letra del navegador. 16,5 / 17,5 = 0.9429 */ --product-card-brand-fs: var(--fs-xs); /* 14,5px */ --product-card-name-fs: 0.9429rem; /* 16,5px */ --product-card-price-fs: var(--fs-base); /* 17,5px */ /* Líneas máximas del nombre. Sin tope, un nombre de tres líneas estira las otras cuatro tarjetas de su fila, porque todas se igualan a la más alta. */ --product-card-name-lines: 2; --product-carousel-gap: 16px; /* separación entre productos en el carrusel/grilla */ --carousel-card-w: clamp(220px, 24vw, 300px); /* ancho de tarjeta en el carrusel continuo */ --carousel-duration: 45s; /* velocidad del marquee (menor = más rápido) */ /* Controles del carrusel (rediseñados el 11-ago). Antes eran tres cajas blancas sobre una sección blanca, separadas del fondo solo por un borde --c-line: 1,18:1 de contraste, cuando un control necesita 3:1 como mínimo. La caja no se veía y el botón no se leía como pulsable. Ahora la flecha va maciza (16:1) y la pausa sale del grupo: es un control de accesibilidad que se usa mucho menos y no debe pesar lo mismo que la navegación. */ /* Páginas legales: columna de lectura estrecha. Un texto de condiciones se abandona si la línea es larga, así que no hereda el ancho del contenedor general, pensado para rejillas de producto. */ --legal-w: 46rem; /* ~805px: unos 75 caracteres por línea */ --legal-anchor: 6rem; /* hueco al saltar por ancla, o la cabecera adherida tapa el título */ /* Aire vertical de la página legal. 100px pedidos por el cliente; en rem por el mismo motivo que --section-y: si el visitante agranda la letra, el aire debe crecer con ella. 5.7143 × 17,5 = 100px. */ --legal-y: 5.7143rem; /* 100px */ --carousel-btn: 44px; /* mínimo táctil; no bajar de aquí */ --carousel-glifo: 19px; /* el chevron dentro del botón macizo */ --carousel-pause-glifo: 13px; --carousel-gap: 0.5rem; /* entre la pausa y las flechas */ /* --- Hero (carrusel de inicio) --- */ --hero-text-indent: 40px; /* sangría del texto para librar la flecha ‹ */ /* --- Carrito --- */ --cart-summary-w: 24rem; /* ancho de la tarjeta de totales */ /* --- Cabecera --- */ --header-logo-h: 50px; /* alto del logo; el ancho lo pone su proporción */ --header-icon: 38px; /* área de cada icono de acción */ /* Separación entre iconos. Bajada el 12-ago de 3px → 2px → 0. A cero NO quedan pegados: el aire lo da el área de 38px de cada icono, con el glifo centrado dentro, así que entre dos glifos sigue habiendo el margen interior de las dos cajas. El gap solo sumaba encima de eso. Escritorio y móvil quedan ahora igual: bajo (hover:none) o 640px este valor ya era 0 y el área sube a 48px. */ --header-gap: 0px; /* Aire entre el icono del carrito y el importe. Estaba escrito a mano en main.css como `.5rem` (8,75px) y el cliente lo veía despegado (12-ago). ⚠️ Lo que se ve NO es este valor: el icono vive dentro de una caja .icon-btn de 38px con un glifo de 24 centrado, así que ya sobran ~7px dentro de la caja. Del glifo al importe había ~16px. Con 2px quedan ~9, que es el aire real que se percibe. Bajar de aquí lo pega al glifo. */ --cart-total-gap: 2px; /* Aire entre enlaces del menú. Tope bajado el 12-ago a petición del cliente, en dos pasos: 30px → 27px → 25px. Cede por debajo de cierto ancho o el menú desbordaría contra el logo antes de llegar al móvil. Bajado en tres pasos el 12 y 13-ago a petición del cliente: 30px → 27px → 25px → 23px. Con 2.2vw, el tope se alcanza ahora a los ~1045px de ventana (antes 1364px), así que el menú se aplana antes y cualquier portátil normal ve ya el aire definitivo en vez de uno intermedio. ⚠️ El aire que se VE entre dos subrayados es este gap menos 6px, porque la barra asoma --nav-underline-bleed (3px) por cada lado: 19px arriba del todo y unos 16px en la ventana más estrecha donde el menú existe. */ --nav-gap: clamp(1.25rem, 2.2vw, 23px); /* Peso del menú principal. Iba a 600, y el barrido tipográfico del 13-ago lo bajó a 500 junto con todo lo demás — correcto: la navegación no es un titular. Pero ARRASTRÓ TAMBIÉN a la sección actual, que estaba en 700 y quedó igual que el resto: la marca de «estás aquí» dejó de existir salvo por el subrayado, que además aparece al pasar el ratón. Se resuelve con dos escalones de la escala, sin recurrir al 700 prohibido: 500 de base y 600 para la actual. */ --nav-weight: 500; --nav-weight-current: 600; /* Tamaño del texto de la navegación — barra Y mega menú. Apuntaba a --fs-sm. Cuando ese global subió de 15,3 a 16px el 13-ago —subida necesaria para los campos y el texto de servicio— el menú creció DE REBOTE, sin que nadie decidiera que debía crecer. El cliente lo notó al instante y prefería el tamaño anterior. Este token existe justo para eso: el menú tiene su medida y ya no queda atado a la escala general. Cambiar --fs-sm no vuelve a arrastrarlo. ⚠️ 0.875rem (15,3px) NO es un escalón de la escala: cae entre --fs-xs (14,5) y --fs-sm (16). Está asumido, y es la razón de que este token exista. La alternativa «de manual» era mandar el menú a --fs-xs y no salirse de la escala, pero 14,5 se queda pequeño para una navegación principal. Cuando un componente pide un valor intermedio se le da SU token y se anota el porqué; lo que no se hace es escribir 0.875rem suelto repartido por cuatro reglas. */ --nav-fs: 0.875rem; /* 15,3px */ --header-pad-y: 10px; /* aire arriba/abajo de la barra; el alto lo marca el logo */ /* --- Banner de archivo (tienda, categoría, etiqueta, búsqueda) --- Referencia: indie.com.ec, medido el 12-ago. Allí son 294px fijos (100 de aire arriba, 100 abajo, 94 de texto) sobre negro plano. Aquí se deja MÁS BAJO a petición del cliente y además fluido: 220px de tope en escritorio frente a los 294 de INDIE, y 150 en móvil, donde un banner alto empuja el producto fuera de la primera pantalla. Es `min-height`, no `height`: si una categoría trae descripción larga, el banner crece en vez de recortar el texto. */ --banner-h: clamp(150px, 18vw, 220px); /* Negro puro, por decisión del cliente (12-ago). Solo se ve cuando la categoría NO tiene foto: en cuanto suba una, este color queda debajo y manda la imagen con su velo. Se probó un negro cálido (#0f0d0d, del orden del rgb(10,0,0) de INDIE) y se prefirió el plano. */ --banner-bg: #000000; /* Velo sobre la foto. Sin él, una foto clara deja el título blanco ilegible — y la foto la sube el cliente desde el panel, así que aquí no se puede saber cómo será. Al 45% el texto aguanta sobre casi cualquier imagen sin apagarla del todo. Sobre el negro plano ni se nota. */ --banner-veil: rgba(0, 0, 0, .45); /* Subrayado que aparece bajo el enlace del menú al pasar el ratón. Copiado de indie.com.ec (12-ago), pero medido, no a ojo: allí la barra es de 2px, cuelga 2px bajo el texto, crece desde la IZQUIERDA hasta el ancho exacto del texto, y tarda .4s con cubic-bezier(.19,1,.22,1) —un easeOutExpo: sale disparada y frena al final—. Esa curva es lo que hace que se sienta viva; con un `ease` normal parece perezosa. El color NO se fija aquí: la barra usa `currentColor`, así hereda el dorado del hover y el rojo del rótulo «Sale» sin una regla por caso. */ /* 2px, igual que INDIE. Se probó 1px y se volvió: a 2px se lee mejor. ⚠️ Este grosor SOLO se ve limpio porque la barra anima `width` y no `transform` — ver el comentario largo en main.css. Si alguien vuelve a «optimizar» eso a scaleX, este 2px se verá como 3px durante el barrido. */ --nav-underline-h: 2px; --nav-underline-dur: .4s; --nav-underline-ease: cubic-bezier(.19, 1, .22, 1); /* Aire vertical del enlace. Estaba escrito a mano (`.4rem`) dentro de la regla; se saca aquí porque la barra necesita restarlo para acercarse. */ --nav-pad-y: .4rem; /* 7px */ /* Separación entre el texto y la barra. Era de 7px —todo el padding— y el cliente la quiso más pegada (12-ago). A 3px queda cerca del texto sin tocar los descendentes de la «j» y la «g»: por debajo de ~2px la barra parece un subrayado de procesador de textos, no una pista de estado. */ --nav-underline-gap: 3px; /* Cuánto sobresale la barra del texto por CADA lado (12-ago). Sin esto moría justo en la primera y la última letra y se leía pegada; asomando un poco parece decidida en vez de recortada. Comprobado que no choca con la entrada de al lado: --nav-gap son 22px en la ventana más estrecha donde el menú sigue visible, así que gastando 3px por lado quedan 16px de aire entre una barra y la siguiente. No mueve nada: la barra va en position:absolute y se sale sin empujar. */ --nav-underline-bleed: 3px; /* --- Menú móvil (navegación por niveles) --- Tocar una sección no despliega hacia abajo: desliza a una pantalla propia con flecha de volver. Dos niveles: secciones → contenido de la sección. */ --mmenu-w: min(86vw, 24rem); /* ancho del panel */ --mmenu-bar-h: 3.5rem; /* barra superior: volver · título · cerrar */ --mmenu-row-h: 3rem; /* alto mínimo de fila = objetivo táctil */ --mmenu-pad-x: 1.5rem; /* sangría lateral del panel */ --mmenu-anim: .3s; /* deslizamiento entre niveles */ /* --- Botón flotante de WhatsApp --- El verde y el z-index son de marca y de capa, no decisiones estéticas del sitio: viven aquí para que nadie los vuelva a escribir a mano. La capa se queda POR DEBAJO del velo (150) a propósito — con el menú o el cajón del carrito abiertos el botón debe quedar tapado, no flotando sobre el velo. */ --wa-size: 3.25rem; /* 56,9px — por encima del mínimo táctil de 44px */ --wa-offset: 1.25rem; /* separación al borde inferior y derecho */ --wa-bg: #25d366; /* verde oficial de WhatsApp */ --wa-bg-hover:#1da851; --wa-fg: #fff; --wa-z: 120; /* --- Mega menú --- */ /* --- Mega menú en cascada (rehecho el 13-ago, referencia: Udemy) --- Antes era un panel a todo el ancho con cuatro columnas de enlaces y una foto de 448px: 33 enlaces de golpe. Ahora es una tarjeta contenida con revelación progresiva — nivel 1 (grupos) → nivel 2 (enlaces). Medidas tomadas del Explore de Udemy: filas de 38px, texto de 14px en peso ligero, sangría 8/16. Aquí el texto sube a --fs-sm (15,3px) porque nuestra base tipográfica es mayor. */ /* Anchos AJUSTADOS al contenido (13-ago). Los dos estaban en 15rem = 262,5px, iguales entre si, y sobraban ~128px en el nivel 1 y ~95 en el 2: la tarjeta arrastraba unos 220px de aire muerto. No deben ser iguales: el nivel 1 guarda nombres de departamento de una palabra («Accesorios», «Big & Tall», ~134px con chevron) y el nivel 2 etiquetas largas («Ultima oferta 70%», «Zapatos de vestir», ~167px). Se deja ~65px de holgura en cada una a proposito: el catalogo real traera etiquetas mas largas que las de hoy, y una columna clavada al milimetro las partiria en dos lineas. ⚠️ En REM y no en px, al reves que la foto: contienen TEXTO, asi que si el visitante agranda la letra del navegador la columna crece con ella. En px se partirían las etiquetas justo a quien peor ve. */ --mega-l1-w: 11.4286rem; /* 200px — columna de grupos */ --mega-l2-w: 13.1429rem; /* columna de enlaces; ancho FIJO para que la tarjeta no cambie de tamaño al saltar de un grupo a otro — el salto se lee como un fallo */ /* Alto de fila. Bajado de 2.4rem (42px) a 2rem (35px) el 13-ago. ⚠️ EL NÚMERO QUE IMPORTA NO ES ESTE, es el hueco entre textos: la caja del texto ocupa 19,9px (15,3px × interlineado 1,3), así que el aire real es la fila MENOS esos 19,9. A 42px quedaban 22px de hueco —más aire que texto— y se leía suelto. Con 35px el hueco es de 15px, que es lo pedido. Para cambiarlo: hueco deseado + 19,9px, y eso partido por 17,5. ⚠️ Recalculado DOS veces el 13-ago: primero al subir --fs-sm a 16px, y otra vez al sacar el menú de la escala global con --nav-fs (15,3px). El hueco depende del TAMAÑO del texto, así que cada vez que cambie --nav-fs hay que rehacer esta cuenta o el hueco deja de ser el pedido. Aquí NO aplica el mínimo táctil de 44px: el mega menú es de escritorio —por debajo de 900px se esconde y entra el móvil—, así que manda el ratón. Mismo criterio que ya usan los campos del formulario. */ --mega-row-h: 1.9946rem; --mega-row-pad: 0.85rem; /* sangría lateral de cada fila — 14,9px */ /* Aire EXTRA entre la línea divisoria y el texto del nivel 2. Los dos niveles llevan la misma sangría (14,9px), así que sobre el papel ya estaban simétricos. Pero lo que queda pegado a la línea por la izquierda es el CHEVRON —fino y al 55% de opacidad— y por la derecha, texto macizo. A igual distancia, la mancha más densa parece más cerca, y «Camisas» se veía comida por la línea. Es una corrección ÓPTICA, no una medida: por eso va aparte y no tocando --mega-row-pad, que gobierna las dos columnas por igual. */ --mega-l2-extra: 6px; /* Aire que despega «Ver todo» de su lista. Medio salto de fila: suficiente para que se lea como un bloque aparte, insuficiente para parecer otra sección. Con una fila entera parecería que falta algo en medio. */ --mega-all-aire: 0.6rem; /* 10,5px */ /* Caja del logotipo de marca. Bajado de 26 a 20px el 13-ago. Sobre una fila de 35px deja ~7px de aire arriba y abajo, así que el logo acompaña al nombre en vez de competir con él. ⚠️ A 20px un logotipo de tipo emblema —el pingüino, el caballo de U.S. Polo— pierde detalle. Si alguno se vuelve irreconocible, la salida NO es solo agrandar esta caja: por encima de ~28px habría que subir también --mega-row-h, o el logo tocaría los bordes de la fila. En px porque es el lienzo de una imagen, mismo criterio que la foto. */ --mega-logo: 20px; /* Hueco entre el logotipo y el nombre de la marca. El cliente pidió «al menos 5px»; se dan 6 porque los logos llevan `contain` dentro de su caja y algunos —los anchos, como Donna Karan— la llenan de lado a lado: con 5 justos, esos quedaban rozando la palabra mientras los estrechos se veían sueltos. Con 6 los ocho se leen igual de separados. */ --mega-logo-gap: 6px; /* Opacidad del logotipo cuando la columna esta atenuada. Ver el porque del 0.6 en main.css: iguala el apagado del logo al del texto. */ --mega-logo-dim: 0.6; --mega-card-pad: 0.6rem; /* aire interior de la tarjeta */ /* === La foto del panel: MEDIDA FIJA (13-ago) === Hasta ahora se estiraba a la altura de la tarjeta, así que cambiaba de tamaño según el grupo señalado: 349px en Ropa de Hombres (10 enlaces) y 70px en Precio de Sale (2 enlaces). Imposible diseñar una imagen para eso. Ahora es SIEMPRE 300 × 350. El 350 sale del grupo más alto que existe hoy —Ropa de Hombres, 10 × 34,9 = 349px— redondeado, que además es el que el cliente señaló como el bueno. Van en px y no en rem a propósito: es el lienzo de una imagen que alguien tiene que exportar a un tamaño concreto, no un ritmo tipográfico. Si fueran rem, cambiar la base tipográfica obligaría a rehacer las fotos. ⚠️ Al tocar estos valores hay que reexportar las imágenes. */ --mega-visual-w: 300px; --mega-visual-h: 350px; --mega-card-radio: 8px; /* el mismo de Udemy, medido */ /* Sombra de la tarjeta, en CUATRO capas. La de antes eran tres con mucha opacidad y quedaba sucia: se veía el gris, no la profundidad. El criterio es el de una sombra real: cuanto más lejos de la superficie, más difusa Y más transparente. Por eso la opacidad BAJA a medida que el desenfoque sube, al revés de lo que parece intuitivo. - anillo de 1px: define el filo sin necesidad de `border` - contacto (1px): apoya la tarjeta sobre la página - media (12px): el cuerpo de la sombra - lejana (40px con spread negativo): el halo que la hace flotar. El spread negativo la recoge para que no se derrame por los lados. */ --mega-card-shadow: 0 0 0 1px rgba(20, 20, 20, .07), 0 1px 2px rgba(20, 20, 20, .04), 0 6px 12px -2px rgba(20, 20, 20, .06), 0 20px 40px -12px rgba(20, 20, 20, .18); /* Retrasos de intención del mega menú (13-ago). ABRIR: sin espera, cruzar la barra con el ratón abría y cerraba los siete paneles por el camino. 120ms es el umbral habitual: por debajo se sigue disparando solo, por encima se siente lento. CAMBIAR DE GRUPO: al ir en diagonal del nivel 1 al nivel 2 el cursor cruza los grupos de en medio y el panel cambiaba justo al ir a pulsar. 90ms es menos que el tiempo de ese cruce, así que lo absorbe sin notarse. */ --mega-abrir-ms: 120; --mega-grupo-ms: 90; /* Tope de altura de las columnas del panel, con desplazamiento dentro. Hoy no se alcanza: el grupo más largo —Ropa de Hombres, 10 enlaces— son 420px. Es una red para el catálogo real: el día que «Camisas» tenga 30 productos, sin este tope la tarjeta se sale de la pantalla y a los últimos no se llega. Udemy tiene el mismo tope y desplaza igual. El `min()` con vh es lo que importa: en un portátil bajo, manda la pantalla y no el número fijo. */ --mega-max-h: min(62vh, 28rem); --mega-cols-gap: clamp(2rem, 5vw, 4.5rem); /* separación entre columnas de enlaces */ --mega-gap: clamp(1.5rem, 3vw, 2.75rem); /* separación foto ↔ columnas y entre columnas */ --mega-link-y: 0.15rem; /* aire vertical de cada enlace del panel */ --mega-cols-pad: clamp(1rem, 3vw, 3.5rem); /* sangría lateral del bloque de columnas */ /* --- Lista de deseos --- El estado "guardado" se marca RELLENANDO el corazón, no cambiándolo de color a rojo: el sitio es blanco y negro con dorado discreto, y un rojo suelto aquí competiría con la etiqueta de rebaja, que ya usa ese color. El cambio de contorno a relleno se lee igual de rápido. Si algún día se quiere el rojo clásico, se cambia solo esta línea. */ --wish-on: var(--c-ink); --wish-size: 2.25rem; /* área pulsable del corazón en la tarjeta */ --wish-icon: 1.15rem; /* tamaño del glifo */ --wish-inset: 0.6rem; /* separación al borde de la foto */ /* Acciones rápidas de la tarjeta (guardar · añadir · vista rápida). Miden lo mismo que el corazón porque son la misma familia de botón: tres tamaños distintos apilados se leerían como tres cosas distintas. */ --cardacc-gap: 0.35rem; /* aire entre los tres botones */ --cardacc-hover-bg: var(--c-ink); /* fondo al apuntar */ --cardacc-hover-fg: var(--c-white); /* glifo al apuntar */ --cardacc-in: 0.9rem; /* desde cuánto a la derecha entran deslizándose */ /* El escalón tiene que ser MAYOR que un tercio de la duración o los tres viajes se solapan tanto que la cascada no se lee y parece que entran a la vez. Con 120ms sobre 260ms, cada uno arranca cuando el anterior va por la mitad: se ve el orden y aun así encadena. */ --cardacc-dur: 260ms; --cardacc-stagger: 120ms; /* Salida suave, sin rebote: el rebote llama la atención sobre el adorno y aquí lo que importa es la foto. */ --cardacc-ease: cubic-bezier(.22, .61, .36, 1); --vr-w: 52rem; /* ancho de la ventana de vista rápida */ --vr-media-max: 62vh; /* tope de alto de su foto, para que el texto no ruede */ /* Aire de las rejillas de producto, en fila y en columna por igual. 20px, el mismo valor de indie.com.ec. Se probó primero a 25 con la rejilla de 4 columnas y allí funcionaba; al pasar la home a 5 columnas la tarjeta se estrechó y 20 encaja mejor con la densidad nueva. Antes de todo esto eran 35 de fila y 26,25 de columna, casi el doble en vertical. Va en px y fuera de la escala modular a propósito: es una medida tomada de una referencia real, no un paso de la escala tipográfica. */ --product-grid-gap: 20px; /* Ritmo del panel de acceso. Más ceñido que --space-3/4 porque es un formulario de dos campos, no una página de contenido. */ --auth-flow: var(--space-2); /* entre campos y bloques del formulario */ --auth-flow-lg: var(--space-3); /* bajo el logo, las pestañas y la entradilla */ /* Área pulsable del aspa de quitar. El glifo mide ~10px; el área se mantiene aunque el recuadro ya no se vea, o sería imposible acertar con el dedo. */ --minicart-x-size: 26px; /* --- Barra de desplazamiento propia (cajón del carrito) --- */ --scroll-w: 6px; --scroll-thumb: rgba(20, 20, 20, .22); --scroll-thumb-hover: rgba(20, 20, 20, .40); /* --- Aviso flotante --- Va en `position: fixed`, así que NUNCA empuja el contenido: ese era el problema del aviso de WooCommerce, que se insertaba en el flujo y tiraba la página hacia abajo. */ --toast-w: min(26rem, calc(100vw - var(--gutter) * 2)); --toast-top: 6.5rem; /* por debajo de la cabecera adherida */ --toast-z: 400; /* por encima del cajón (200) y de las ventanas (300) */ --toast-vida: 3.5s; /* cuánto se queda antes de irse solo */ /* Aire vertical de los LISTADOS (tienda, categoría, marca). Más ceñido que --section-y a propósito: la rejilla ya separa por sí sola. */ --shop-y: clamp(1.5rem, 3vw, 2.5rem); --wishlist-col: 13rem; /* ancho mínimo de columna en la rejilla de la lista */ /* --- Avisos de WooCommerce (carrito, checkout, cuenta) --- Sin caja: un filete lateral del color del estado y un icono a juego. El fondo relleno + filete dorado grueso que había antes hacía una banda que competía con el contenido y no distinguía un éxito de un error. */ --notice-bar: 2px; /* grosor del filete lateral */ --notice-pad-y: 0.7rem; /* aire vertical */ --notice-pad-x: 0.9rem; /* del filete al icono */ --notice-icon: 1rem; /* tamaño del icono de estado */ --notice-gap: 0.65rem; /* icono ↔ texto */ --container: 1500px; --radius: 0px; /* estética limpia sin esquinas redondeadas */ /* Un control que ahora mismo no responde: bloqueado, o esperando a que termine lo que se le pidió. Es el mismo valor en los tres sitios donde pasa, y tenerlo suelto era pedir que se separaran con el tiempo. Ojo: `.mega__chev` también usa .55 y NO viene de aquí. Ahí es una flecha decorativa que se atenúa a propósito, no un control inactivo. Mismo número, otra idea: juntarlos ataría dos cosas que no tienen por qué cambiar a la vez. */ --op-inactivo: .55; /* --- Líneas y foco (a11y) --- */ --hairline: 1px; /* grosor de líneas divisorias sutiles */ --focus-w: 2px; /* grosor del anillo de foco visible */ --tracking-tight: -0.015em; /* titulares grandes más compactos */ /* --- PDP (página de producto individual) --- */ --pdp-container: 1280px; /* la ficha respira más que el resto del sitio */ /* El aire lateral de la ficha NO tiene token propio: sale de --gutter, como todo el sitio. Aquí vivió `--pdp-pad-x` hasta el 14-ago, con el mismo clamp que --gutter salvo el máximo (52,5 en vez de 50px). Era el único margen lateral del proyecto fuera de --gutter y nadie había pedido esa diferencia. Lo propio de la ficha es el ANCHO (--pdp-container), no el margen. */ /* Separación galería ↔ resumen. Fijo a propósito: antes era elástico —clamp(2rem, 5vw, 4.5rem)— y en pantallas grandes se abría hasta 79px, que separaba demasiado la foto de su precio. 50px se lee igual en un portátil que en un monitor de 27". */ --pdp-gap: 50px; --pdp-summary-max: 33rem; /* ancho máx. de la columna resumen */ /* === Marca sobre el título (14-ago) === Hueco CUADRADO para el logotipo, no una altura suelta. Los ocho logos son isotipos sobre lienzo de 300×300, así que un cuadrado los alinea a todos sin tocar nada; y si algún día entra un logotipo apaisado, `object-fit` lo encaja dentro del mismo cuadrado en vez de desalinear la fila. Reservar el hueco también evita que el título dé un salto cuando el logotipo termina de cargar. En px, mismo criterio que las miniaturas: es un lienzo, no texto. */ --pdp-marca-logo: 34px; /* === Galería de la ficha (13-ago) === Medidas tomadas de indie.com.ec, que es la referencia que pidió el cliente: miniaturas de 122px, 10px entre ellas y 10px hasta la foto. El valor anterior (76px) NUNCA se aplicó: apuntaba a `ol.flex-control-thumbs`, una clase que el marcado de esta ficha no generaba. En px y no en rem: son lienzos de fotografía, igual criterio que la foto del mega menú. */ --pdp-thumb-w: 122px; --pdp-thumb-gap: 10px; /* entre miniaturas */ --pdp-gal-gap: 10px; /* miniaturas ↔ foto grande */ /* Flechas de la galería. 30px de alto y a media columna cada una, medido en INDIE (59x30 con 5px entre ellas sobre una columna de 122). ⚠️ 30px queda por debajo del mínimo táctil de 44, y es correcto AQUÍ: las flechas se ocultan por debajo de 780px, donde la tira pasa a horizontal y se arrastra con el dedo. En escritorio manda el ratón. */ --pdp-nav-size: 30px; --pdp-nav-gap: 5px; --pdp-nav-bg: #f7f7f7; /* el gris de INDIE; más claro que --c-soft */ /* Cuántas miniaturas se ven a la vez. TRES a propósito: el mínimo por producto son 4 fotos, así que con 3 visibles las flechas siempre tienen trabajo y nunca salen las dos apagadas. Antes la cifra la decidía el alto de la foto, así que variaba con el ancho de la ventana y de un producto a otro. Aquí se fija. El alto de la miniatura NO se puede sacar de --pdp-media-ratio con un calc(): una proporción CSS no es un número que se pueda multiplicar. Por eso va escrito, con la cuenta al lado. ⚠️ Si cambia la proporción o el ancho, hay que rehacer este valor. */ --pdp-thumb-visibles: 3; --pdp-thumb-h: 170.8px; /* 122 × 7/5 */ /* La miniatura activa se distingue SOLO por opacidad, sin recuadro. Un borde en la activa competía con el anillo de foco del teclado —que es el mismo lenguaje, un contorno— y al cargar la página parecía que la primera estaba enfocada sin que nadie la hubiera tocado. */ /* Opacidad de las miniaturas NO seleccionadas. Bajada de 0.8 a 0.6 el 13-ago: a 0.8 la diferencia con la activa era de dos puntos y había que comparar para verla. A 0.6 se distingue de un vistazo, que es lo que se pide de un estado. ⚠️ No bajar de ~0.45: por debajo de eso la foto deja de leerse y la miniatura ya no cumple su función, que es dejarte elegir. */ --pdp-thumb-op: 0.6; /* Ampliación al pasar el ratón sobre la foto. 1,8 y no 2: la imagen que se sirve es la de 1024px mostrada a ~500, así que por encima de 2x se vería el grano en vez del tejido. */ --pdp-zoom: 1.8; --pdp-flecha: 40px; /* flechas sobre la foto grande */ --pdp-btn-icon: 18px; /* El carrito recibe un empujon, sale por la derecha y entra uno nuevo por la izquierda. Giro y salida van en unidades del viewBox (0 0 24 24), no en pixeles de pantalla: asi el gesto es el mismo aunque se cambie --pdp-btn-icon. */ --pdp-btn-carro-dur: .78s; /* el ciclo entero: empuje, salida y regreso */ --pdp-btn-carro-empuje: 7deg; /* se echa atras antes de arrancar */ --pdp-btn-carro-giro: -9deg; /* inclinacion mientras rueda */ --pdp-btn-carro-salida: 15px; /* cuanto se aleja antes de desaparecer */ --pdp-btn-icon-gap: 8px; /* El carrito avanza al señalar el botón. Es un gesto con SIGNIFICADO —el carrito se empuja— y no un adorno; por eso va hacia delante y no gira ni rebota en el sitio. La curva se pasa de frenada a propósito (el 1.56 del tercer valor): llega un poco más allá de los 4px y vuelve. Sin ese exceso el movimiento se lee mecánico; con él parece que algo con peso se ha puesto en marcha. Va con `transition` y no con `animation` para que al RETIRAR el ratón deshaga el camino en vez de saltar de golpe a su sitio. */ --pdp-btn-icon-x: 4px; --pdp-btn-icon-dur: .28s; --pdp-btn-icon-ease: cubic-bezier(.34, 1.56, .64, 1); /* Proporción de la foto. La misma que la tarjeta de producto para que el catálogo y la ficha enseñen la prenda con el mismo encuadre. */ --pdp-media-ratio: var(--product-media-ratio); --pdp-arrow-size: 44px; /* botones ‹ › sobre la imagen principal */ --pdp-control-h: 2.75rem; /* altura de cantidad y botón añadir */ --pdp-panel-max: 47rem; /* ancho de lectura: descripción/reseñas */ /* --- Formularios (campos compartidos: cuenta, checkout) --- */ --field-border: 1.5px; /* grosor de borde de inputs y botones */ /* Alto de campo y de botón. Compacto: 48px hacía formularios muy altos y en el checkout se notaba mucho. En táctil vuelve a subir (ver más abajo): por debajo de ~44px un dedo falla el objetivo. */ --field-h: 2.375rem; /* 41.5px */ --field-pad-x: 1rem; /* Tamaño del texto dentro de los campos. Iba a --fs-base (17.5px) mientras el resto de la interfaz va a --fs-sm: los campos se veían de otra escala. Un único valor para toda la web, sin excepciones por dispositivo. */ --field-fs: var(--fs-sm); /* --- Proceso de compra (carrito → checkout) --- */ --co-container: 1180px; /* más estrecho que el sitio: menos distracción */ --co-head-h: 4.5rem; /* alto de la cabecera reducida */ --co-aside-w: 22rem; /* ancho del resumen fijo */ --co-gap: clamp(1.5rem, 3vw, 2.5rem); /* separación pasos ↔ resumen */ --co-card-pad: clamp(1.25rem, 3vw, 2rem); /* interior de cada bloque */ --co-step-n: 1.75rem; /* círculo numerado de cada paso */ --co-dot: 0.5rem; /* punto de la barra de pasos */ --co-bg: #f6f5f3; /* fondo del lienzo del CHECKOUT; sus tarjetas van en blanco */ --cart-bg: var(--c-bg); /* el CARRITO va sobre blanco: ver checkout.css */ --co-sticky-top: 1.5rem; /* separación del resumen al fijarse */ --coitem-thumb: 4.25rem; /* miniatura de producto en el resumen */ --coitem-gap: 0.875rem; /* foto ↔ texto en la línea de producto */ --cosum-row-y: 0.7rem; /* aire vertical de cada fila de totales */ --cosum-sep-y: 1.25rem; /* separación entre bloques del resumen */ /* Fondo del resumen. NO es blanco a propósito: con fondo blanco y filete `--c-line` era idéntico a un campo del formulario de al lado (medido: los dos daban `0.8px solid #e7e5e1` sobre blanco) y se leía como casillas que rellenar. Los campos son blancos; esto no. */ --cosum-bg: var(--c-soft); /* Filete interno del resumen. Sobre el gris, `--c-line` desaparece. */ --cosum-line: rgba(20, 20, 20, .10); /* Identificación (paso 1): tarjeta de sesión iniciada y avisos del paso. */ --coid-caja-bg: #f3f6f3; /* verde muy lavado: "esto ya está resuelto" */ --coid-caja-pad: 0.9rem; /* interior de la tarjeta de sesión */ --coid-error: var(--c-err); /* el error del paso es EL error del sitio, no otro rojo */ --coid-gap: 0.6rem; /* aire entre casilla, nota y contraseña */ --cartline-thumb: 5.5rem; /* miniatura de la fila del carrito */ --cart-row-y: 0.875rem; /* aire vertical de cada fila del carrito */ /* Sangría del contenido dentro de las tablas. Sin esto el texto y la foto arrancan justo donde empieza el filete y se leen pegados al borde. Vale para TODA la web, no solo el carrito. */ --cell-pad-x: 0.875rem; /* 15px */ --cell-pad-y: 0.75rem; /* 13px — alto de celda, compacto */ /* La fila de encabezados solo lleva etiquetas: no necesita el aire del contenido y con el mismo valor quedaba una banda de 50px. */ --cell-head-y: 0.45rem; /* 8px */ /* --- Checkout: dirección con autocompletado --- */ --addr-geo-size: 2rem; /* botón "usar mi ubicación" dentro del campo */ --addr-list-max: 17rem; /* alto máx. del desplegable de sugerencias */ --addr-item-y: 0.6rem; /* aire vertical de cada sugerencia */ --addr-pin: 1rem; /* icono de pin de cada sugerencia */ --addr-note-gap: 0.4rem; /* separación campo ↔ mensaje de estado */ /* --- Cuenta / autenticación --- */ --auth-panel-max: 27rem; /* ancho del formulario en login/registro */ --auth-min-h: 44rem; /* alto mínimo del split foto + formulario */ --account-nav-w: 15rem; /* ancho de la navegación lateral de la cuenta */ --account-gap: clamp(2rem, 4vw, 3.5rem); /* separación nav ↔ contenido */ --account-card-pad: clamp(1rem, 2vw, 1.5rem); /* interior de tarjetas de la cuenta */ /* --- Verificación del correo por código --- El color del aviso NO es nuevo: son los tokens de estado «pendiente» que ya usan las pastillas de pedido (--c-wait / --c-wait-soft). Un correo sin confirmar es exactamente eso, un pendiente, y merece el mismo lenguaje. */ --vc-panel-max: 27rem; /* ancho de la pantalla de código */ --vc-codigo-h: 3.25rem; /* el campo del código va más alto que uno normal: es la única acción de la pantalla */ --vc-codigo-fs: var(--fs-h4); /* 24px — se lee de un vistazo al teclearlo */ --vc-codigo-track: 0.5em; /* separación entre dígitos, para contarlos */ --vc-aviso-pad: clamp(0.875rem, 2vw, 1.15rem); /* interior del aviso */ --vc-aviso-gap: var(--space-2); /* texto ↔ botón del aviso */ /* --- Elevación (uso muy puntual: paneles flotantes) --- */ --shadow-sm: 0 1px 2px rgba(20,20,20,.05); --shadow-md: 0 30px 50px -30px rgba(20,20,20,.2); --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Táctil: los campos vuelven a ~48px. El compacto es para ratón; con el dedo, un objetivo por debajo de 44px se falla, y en un formulario de compra eso se paga en pedidos abandonados. Se usa `pointer: coarse` y no `hover: none`: este último daba positivo en escritorio (basta un portátil con pantalla táctil, o el navegador en modo automatizado) y colaba la escala táctil donde no tocaba. `pointer: coarse` mira el puntero principal, que en portátil sigue siendo el trackpad. */ @media (pointer: coarse), (max-width: 640px) { :root { --field-h: 2.75rem; /* 48px */ --cell-pad-y: 0.9rem; /* El corazón sube a 44px: es un objetivo pequeño y está en una esquina, que es donde peor se acierta con el dedo. */ --wish-size: 2.75rem; /* Iconos de cabecera: 38px es un objetivo pequeño para un dedo. El glifo sigue midiendo 21px, así que solo crece el área que se puede tocar. */ --header-icon: 2.75rem; /* 48px */ } } /* Cabecera compacta por ANCHO de pantalla, no por tipo de puntero: cuánto mide el logo es cuestión de sitio, no de dedo. Puesto en el bloque táctil, un portátil con pantalla táctil se quedaba con el logo pequeño a 2880px. */ @media (max-width: 900px) { :root { --header-logo-h: 38px; /* cede alto para que quepan las 4 acciones */ /* --header-gap ya es 0 en la base: con cajas de 48px el aire lo da el área. */ } }