/* ================================================ TEMA — DubTech Se carga sólo en /marca/dubtech y en las fichas de sus productos. Personalidad: DubTech no expone productos, los mide: una mesa de trabajo de precisión donde todo dato tiene su casilla y el violeta sólo se enciende cuando algo está activo. Movimientos: 1. Voz tipográfica de instrumento — la serif editorial sale de los títulos (sans pesada y cerrada) y toda la metadata pasa a monoespaciada; los precios se leen como medición (tabular-nums). 2. Superficie de laboratorio — se apaga lo cálido del sistema (crema → neutro frío) y las cajas de imagen pasan a grafito con retícula técnica: el producto queda sobre una mesa de medición. 3. Geometría cortada — bisel de 10px en toda superficie llena (imagen, CTA, badge, tag) y adiós a los círculos: el vocabulario de forma del hardware en lugar del rectángulo neutro. 4. Marcas de registro — corchetes en L en la galería y riel superior en las cards: encuadre de precisión, no adorno. 5. El acento es señal, no pintura — el violeta entra en dosis chicas y marca estado (activo / hover / foco) como un LED, y se aclara cuando cae sobre fondo oscuro para no perder contraste. 6. Ritmo mecánico — transiciones cortas y parejas, tracking normalizado, sin escalados blandos. El color viene de la base (`marcas.color_hex`) como var(--bb-accent): NO se escribe su hex acá o el panel deja de servir. ================================================ */ /* Las variables del tema se declaran en `body`, NO en `:root`: el color de la marca llega como style inline del (`Marca::estiloDeMarca()`), así que en `:root` var(--bb-accent) todavía vale el negro por defecto de tokens.css y cualquier derivación salía gris. Declarándolas acá se resuelven contra el violeta real y siguen al panel. */ body { /* Mono del sistema: cero requests extra y en toda plataforma hay una (SF Mono / Menlo / Consolas). La marca no necesita otra webfont. */ --dt-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Neutros propios de DubTech: fríos, no cálidos. No son el acento, así que pueden vivir acá sin romper el panel. */ --dt-graphite: #111318; --dt-neutral: #f3f4f7; /* reemplaza al crema --bb-bg-soft */ --dt-line-cool: rgba(17, 19, 24, 0.12); /* Gris de metadata propio, frío y más oscuro que el del sistema. --bb-ink-muted (#6b6b6b) da 5,3:1 sobre blanco, pero cuando el texto cae justo encima de una línea de la retícula baja a 4,4:1 y queda por debajo del mínimo. Este gris se mantiene en 6:1 en el peor pixel. */ --dt-muted: #55555c; /* Retícula técnica: una sobre claro, otra sobre grafito. */ --dt-grid-light: rgba(17, 19, 24, 0.05); --dt-grid-dark: rgba(255, 255, 255, 0.055); /* Violeta legible sobre fondo oscuro. El acento puro (#6b3fa0 hoy) da 2,6:1 contra el negro del hero y del footer CTA — falla incluso para texto grande. Esta mezcla parte del MISMO token, así que si el operador cambia el color en el panel, esto lo sigue. La proporción 68/32 es la medida: a 68% da 5,5:1 sobre #0f0f0f y 4,6:1 sobre el peor pixel de la foto del hero. Subiendo el blanco (58%) gana contraste pero se lava a gris y deja de leerse como acento; bajándolo se acerca al 2,6:1 del violeta puro. */ --dt-accent-lit: color-mix(in srgb, var(--bb-accent) 68%, #fff); /* Bisel: se guarda el valor completo de clip-path para repetirlo sin recalcular el polígono en cada regla. */ --dt-cut: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); --dt-cut-sm: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); --dt-track: 0.16em; /* tracking único de todas las labels mono */ } /* ════════════════════════════════════════════════ M1 · VOZ TIPOGRÁFICA DE INSTRUMENTO Regla del tema: la MONO nombra (labels, categorías, specs, estados), la SANS actúa (títulos y botones). La serif Cormorant no participa: una marca de electrónica no firma en itálica. ════════════════════════════════════════════════ */ /* — Titulares: sans pesada, caja alta y tracking cerrado — */ .brand-hero-name, .section-title, .brand-footer-cta h2 { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.02; } .brand-hero-name { font-size: clamp(2.5rem, 7.5vw, 5.25rem); line-height: 0.94; letter-spacing: -0.03em; } /* El nombre entero viene envuelto en : en itálica violeta sobre el hero oscuro daba 2,6:1 (falla WCAG hasta para texto grande). Pasa a blanco y el acento se muda al riel inferior del hero. */ .brand-hero-name em { font-style: normal; color: #ffffff; } .section-title { font-size: clamp(1.65rem, 3vw, 2.6rem); } .section-title em { font-style: normal; font-weight: 800; color: var(--bb-accent); /* 7,4:1 sobre blanco */ } .brand-footer-cta h2 { font-size: clamp(1.7rem, 4vw, 2.9rem); } .brand-footer-cta h2 em { font-style: normal; color: var(--dt-accent-lit); /* sobre #0f0f0f: 6,0:1 en vez de 2,6:1 */ } /* Título de producto: sans pesada pero SIN caja alta — los nombres largos ("Auriculares inalámbricos Pulse") en versalitas se vuelven ilegibles en móvil. La caja alta queda para titulares cortos. */ .product-title { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; font-size: clamp(1.6rem, 3.4vw, 2.35rem); } .product-info h3, .product-info h3 a { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.005em; line-height: 1.35; } /* — Metadata en mono: todo lo que es dato, no discurso — */ .eyebrow, .brand-hero-eyebrow, .product-eyebrow, .product-cat, .product-info .product-cat, .product-brand-tag, .badge-bb, .product-tab, .variant-label, .gallery-zoom-hint, .breadcrumb-bb, .manifesto-sign, .process-num, .spec-table th, .shipping-grid .item h5, .review-card .date, .product-price-usd, .product-price-usd-line, .section-link { font-family: var(--dt-mono); letter-spacing: var(--dt-track); font-weight: 600; font-style: normal; } .eyebrow, .product-cat, .product-info .product-cat { color: var(--bb-accent-dark); /* 9,8:1 sobre blanco */ } .brand-hero-eyebrow { color: var(--dt-accent-lit); /* sobre el hero oscuro: 8,9:1 */ letter-spacing: var(--dt-track); } .product-brand-tag, .product-brand-tag.tag-dubtech { color: var(--bb-accent-dark); font-size: 0.58rem; } /* La miga venía con enlaces de 13px de alto (caja de texto en línea): por debajo del mínimo táctil de 24px. Se les da cuerpo vertical sin mover el renglón. */ .breadcrumb-bb { font-size: 0.68rem; } .breadcrumb-bb a { display: inline-block; padding: 0.4rem 0; } .process-num { font-size: 0.8rem; color: var(--bb-accent-dark); } .manifesto-sign { color: var(--bb-ink-muted); } /* — Precios: cifras alineadas en columna, como una lectura de instrumento. Manrope con tabular-nums (no mono: en los importes largos en guaraníes la mono se va de ancho en móvil). — */ .product-price, .product-price-main, .product-price-old, .sticky-cta-price, .reviews-score { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.02em; } .product-price { font-size: 1.15rem; } .product-price-main { font-size: 1.85rem; } .product-price-old { font-weight: 600; } .reviews-score { font-weight: 800; color: var(--bb-accent-dark); } .product-price-usd, .product-price-usd-line { font-size: 0.68rem; font-variant-numeric: tabular-nums; color: var(--bb-ink-muted); /* 5,3:1 sobre blanco */ } /* Ficha técnica: la tabla es el corazón de un producto electrónico. Etiqueta en mono, valor en sans tabular. */ .spec-table th { font-size: 0.72rem; text-transform: uppercase; color: var(--bb-ink-muted); } .spec-table td { font-variant-numeric: tabular-nums; font-weight: 600; } .spec-table th, .spec-table td { border-bottom-color: var(--dt-line-cool); } /* ════════════════════════════════════════════════ M2 · SUPERFICIE DE LABORATORIO El sistema base es cálido (cremas #faf8f4 / #f4efe6). DubTech lo enfría y le pone retícula: los bloques de contenido son una mesa de medición, no papel de catálogo. ════════════════════════════════════════════════ */ /* Retícula sobre claro. Las líneas están al 5% de opacidad: el texto sigue midiendo >12:1 contra el peor pixel del patrón. */ .brand-products-section, .related-section, .product-tabs-section, .process-section, .product-page { background-color: var(--dt-neutral); background-image: linear-gradient(var(--dt-grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--dt-grid-light) 1px, transparent 1px); background-size: 32px 32px; } /* Las dos zonas "de lectura" quedan en blanco para no competir con la ficha: alternancia dura blanco / neutro, sin degradados. */ .brand-products-section, .product-page { background-color: #ffffff; } /* Cajas de imagen: grafito + retícula fina. Sobre este fondo el producto recortado se lee como pieza sobre banco de trabajo. */ .product-image, .gallery-main, .gallery-thumbs .swiper-slide { background-color: var(--dt-graphite); background-image: linear-gradient(var(--dt-grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--dt-grid-dark) 1px, transparent 1px); background-size: 24px 24px; border-color: transparent; } /* Resto de superficies cálidas del sistema, enfriadas. */ .review-card, .benefits li i { background: var(--dt-neutral); border-color: var(--dt-line-cool); } .product-card, .product-meta, .product-tabs, .reviews-summary, .product-tabs-section { border-color: var(--dt-line-cool); } .product-card { border: 1px solid var(--dt-line-cool); } .product-meta { border-top: 1px solid var(--dt-line-cool); } /* Hero: misma retícula sobre la foto + riel de acento como zócalo. `::before` (el degradado) ya lo usa la base; acá va `::after`. */ .brand-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(var(--dt-grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--dt-grid-dark) 1px, transparent 1px); background-size: 48px 48px; border-bottom: 3px solid var(--bb-accent); } /* El tagline se lee como nota al margen de una especificación. */ .brand-hero-tagline { border-left: 2px solid var(--dt-accent-lit); padding-left: 1rem; } /* ════════════════════════════════════════════════ M3 · GEOMETRÍA CORTADA El bisel aparece donde hay superficie llena (imagen, CTA, badge, tag). Los elementos con borde de 1px quedan rectos: un clip-path les cortaría el borde y se leería como error, no como decisión. ════════════════════════════════════════════════ */ .product-image, .gallery-main, .btn-add-cart, .brand-footer-cta .btn-bb-primary, .product-tabs-section .btn-bb-primary { clip-path: var(--dt-cut); } .product-brand-tag, .gallery-zoom-hint, .badge-bb { clip-path: var(--dt-cut-sm); } /* El bisel corta la sombra, y está bien: en este tema los CTA son piezas planas, no botones flotando. */ .btn-add-cart, .brand-footer-cta .btn-bb-primary { box-shadow: none; } /* Se van los círculos: en DubTech no hay curvas. */ .quick-btn, .badge-bb::before, .product-eyebrow .dot, .swatch, .swatch.is-active::after { border-radius: 0; } .badge-bb::before, .product-eyebrow .dot { width: 6px; height: 6px; background: var(--bb-accent); } /* Badge sin borde: bloque lleno, biselado, mono. */ .badge-bb { background: var(--bb-accent-soft); border-color: transparent; font-size: 0.62rem; letter-spacing: var(--dt-track); } /* ════════════════════════════════════════════════ M4 · MARCAS DE REGISTRO Corchetes de encuadre en la galería y riel superior en las cards: la retícula de precisión que usa cualquier ficha de ingeniería. ════════════════════════════════════════════════ */ .gallery-main::before, .gallery-main::after { content: ''; position: absolute; width: 26px; height: 26px; z-index: 4; pointer-events: none; opacity: 0.85; } /* Van en las esquinas que el bisel NO corta (arriba-izq / abajo-der). */ .gallery-main::before { top: 14px; left: 14px; border-top: 1px solid var(--dt-accent-lit); border-left: 1px solid var(--dt-accent-lit); } .gallery-main::after { bottom: 14px; right: 14px; border-bottom: 1px solid var(--dt-accent-lit); border-right: 1px solid var(--dt-accent-lit); } /* Riel de acento que se enciende al recorrer la grilla de productos. */ .product-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--bb-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.14s linear; z-index: 3; } .product-card:hover::after { transform: scaleX(1); } /* ════════════════════════════════════════════════ M5 · EL ACENTO ES SEÑAL, NO PINTURA El violeta marca estado (activo, hover, foco, disponible). En reposo la página es neutra; el color aparece cuando algo se puede accionar. ════════════════════════════════════════════════ */ /* Eyebrow: la línea del sistema pasa a marca de regla graduada. */ .eyebrow::before, .brand-hero-eyebrow::before { background: repeating-linear-gradient( 90deg, currentColor 0 5px, transparent 5px 9px ); width: 40px; } /* CTA principal: pieza plana con filamento encendido arriba. */ .btn-add-cart { font-family: var(--font-body); font-weight: 800; letter-spacing: 0.14em; background-image: linear-gradient(var(--dt-accent-lit), var(--dt-accent-lit)); background-repeat: no-repeat; background-size: 100% 2px; background-position: top left; transition: background-color 0.14s linear, transform 0.14s linear; } .btn-add-cart:hover { transform: none; /* nada de rebote: es un interruptor */ background-color: var(--bb-accent-dark); box-shadow: none; } /* Botón de borde: en reposo neutro, al hover se enciende entero. */ .section-head .btn-bb-ghost, .product-tabs-section .btn-bb-ghost { font-family: var(--font-body); font-weight: 800; letter-spacing: 0.14em; border-color: var(--bb-ink); box-shadow: none; transition: background-color 0.14s linear, color 0.14s linear, border-color 0.14s linear; } .section-head .btn-bb-ghost:hover, .product-tabs-section .btn-bb-ghost:hover { background: var(--bb-accent); border-color: var(--bb-accent); color: var(--bb-accent-text); /* blanco sobre violeta: 7,4:1 */ transform: none; } /* El primario del cierre de marca ya viene teñido; acá sólo se le saca el barrido suave y se le deja el corte y el peso del resto. */ .brand-footer-cta .btn-bb-primary, .product-tabs-section .btn-bb-primary { font-family: var(--font-body); font-weight: 800; letter-spacing: 0.14em; } .product-tabs-section .btn-bb-primary::before { background: var(--bb-accent); } /* Tabs: el activo es el canal encendido. */ .product-tab { font-size: 0.72rem; padding: 0.9rem 1.4rem; border-bottom-width: 2px; transition: color 0.14s linear, border-color 0.14s linear; } .product-tab.is-active { color: var(--bb-accent); font-weight: 700; } /* Precio: la regla inferior deja de ser un subrayado y pasa a escala. */ .product-price-block { border-bottom: 2px solid var(--bb-accent); padding-bottom: 0.85rem; } /* Stepper y favorito: casillas rectas de 1px, dígitos tabulares. */ .qty-stepper { border-color: var(--bb-ink); background: #ffffff; } .qty-stepper .qty-val { font-family: var(--dt-mono); font-variant-numeric: tabular-nums; font-weight: 700; } .qty-stepper button:hover { background: var(--bb-accent); color: var(--bb-accent-text); } .btn-fav { border-color: var(--bb-ink); } /* Beneficios: los iconos son casillas del mismo sistema. */ .benefits li i { border-radius: 0; color: var(--bb-accent-dark); } /* Velo de acciones rápidas: grafito frío en vez del negro cálido. */ .product-quick { background: rgba(17, 19, 24, 0.58); } .quick-btn:hover { background: var(--bb-accent); color: var(--bb-accent-text); transform: none; /* el escalado blando no es de esta marca */ } /* Miniaturas: el estado activo se marca con el acento pleno. */ .gallery-thumbs .swiper-slide.is-active { border: 2px solid var(--bb-accent); } .gallery-thumbs .swiper-slide:hover { transform: none; } /* ════════════════════════════════════════════════ M6 · RITMO MECÁNICO Transiciones cortas y parejas, sin curvas de salida largas ni escalados: todo se enciende o no se enciende. ════════════════════════════════════════════════ */ .product-card { transition: border-color 0.14s linear, transform 0.14s linear, box-shadow 0.14s linear; } .product-card:hover { transform: translateY(-2px); border-color: var(--bb-accent); box-shadow: 0 12px 24px -18px rgba(17, 19, 24, 0.45); } .product-card:hover .product-image img { transform: scale(1.02); } .product-image img { transition: transform 0.25s linear; } .section-head { margin-bottom: 2.75rem; } /* Toda la metadata secundaria pasa al gris frío del tema: es el precio de poner retícula debajo del texto (ver --dt-muted). */ .section-head-text p, .product-shortdesc, .product-price-usd, .product-price-usd-line, .product-tab, .breadcrumb-bb, .breadcrumb-bb a, .breadcrumb-bb .sep, .spec-table th, .shipping-grid .item p, .process-desc, .manifesto-sign, .review-card .date, .reviews-meta span, .product-rating { color: var(--dt-muted); } .product-tab:hover { color: var(--bb-ink); } /* Foco visible y del mismo idioma: cuadrado, acento, sin blur. */ .product-page :focus-visible, .product-tabs-section :focus-visible, .related-section :focus-visible, .brand-products-section :focus-visible, .brand-footer-cta :focus-visible, .brand-hero :focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 2px; box-shadow: none; } /* Bloques editoriales de la marca (manifiesto/proceso): hoy DubTech no los tiene cargados, pero si el operador los completa tienen que entrar con la misma voz y no volver a la serif itálica. */ .manifesto-text, .process-title { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.02em; } .manifesto-text em { font-style: normal; color: var(--bb-accent); font-weight: 800; } .process-step-img { border-color: var(--dt-line-cool); background: var(--dt-graphite); clip-path: var(--dt-cut); } /* ════════════════════════════════════════════════ RESPONSIVE — al final, para que ganen por orden a las reglas de arriba con la misma especificidad. ════════════════════════════════════════════════ */ @media (max-width: 767.98px) { /* La retícula de 32px sobre un ancho de 375 se vuelve ruido: se agranda el paso y se baja el contraste del patrón. */ .brand-products-section, .related-section, .product-tabs-section, .process-section, .product-page { background-size: 48px 48px; } /* El bisel de 10px come demasiado en cajas chicas. */ .product-image, .gallery-main, .btn-add-cart, .brand-footer-cta .btn-bb-primary, .product-tabs-section .btn-bb-primary { clip-path: var(--dt-cut-sm); } /* "AGREGAR AL CARRITO" ya partía en tres líneas en 375 con el tracking de 0.22em de la base: acá se cierra y entra en dos. */ .btn-add-cart { letter-spacing: 0.06em; font-size: 0.72rem; padding: 0 0.9rem; } /* Corchetes de encuadre proporcionales a la galería chica. */ .gallery-main::before, .gallery-main::after { width: 18px; height: 18px; } .gallery-main::before { top: 10px; left: 10px; } .gallery-main::after { bottom: 10px; right: 10px; } /* Tabs: área táctil completa aunque el texto se achique. */ .product-tab { padding: 0.95rem 1.1rem; font-size: 0.68rem; letter-spacing: 0.1em; } /* Labels mono muy trackeadas desbordan en columnas de media card. */ .product-cat, .product-info .product-cat, .product-brand-tag, .breadcrumb-bb { letter-spacing: 0.1em; } } @media (max-width: 575.98px) { /* En dos columnas el título de card necesita respirar hacia abajo, no hacia los costados. */ .product-info h3, .product-info h3 a { font-size: 0.88rem; } .product-price { font-size: 1rem; } /* En la grilla de 2 columnas a 375px el pie de la card no da el ancho para precio + flecha en la misma línea: los importes en guaraníes se partían en "Gs." / "3.667.650" (pasaba también antes del tema). Se apilan: la cifra recupera su renglón completo y la flecha conserva sus 38px de área táctil. */ .product-meta { flex-direction: column; align-items: flex-start; gap: 0.7rem; } } /* Quien pidió menos movimiento no debería recibir el riel animado. */ @media (prefers-reduced-motion: reduce) { .product-card::after { transition: none; } .product-card:hover { transform: none; } .product-card:hover .product-image img { transform: none; } }