/* ========================================================================== bb2026 — PAGINA "ALBUMES Y PRODUCTOS IMPRESOS". Namespace .bb-prod-page (body) y .bb-prod*. NO toca la portada, ni el pie, ni el menu, ni el cursor, ni contacto, ni sobre-mi, ni los servicios, ni ningun z-index existente. De la cabecera NO anula NADA. JERARQUIA DE CAPAS QUE YA EXISTE (no se rompe): contenido 0-99, scrim 290, overlay de menu 300, barra 400, dialogos 500+, salto al contenido 999, cursor 1200, cortina 1500. Aqui no se pasa de 3 (la caja-etiqueta, que ya usa ese valor en components.css). ##################### LA REGLA QUE MAS IMPORTA AQUI ################### minmax(0, 1fr) — NUNCA 1fr — EN CUALQUIER PISTA CUYO CONTENIDO SEA UN MARCO CON aspect-ratio. 1fr es minmax(auto, 1fr): la pista se mide por su contenido. Con un marco con aspect-ratio dentro, el ancho depende del alto y el alto del ancho: referencia circular. Medido en este proyecto: 33.554.432 px de ancho. En esta pagina el riesgo es MAXIMO: TODAS las piezas que pintan un producto —las seis miniaturas del indice, las diez tarjetas, las dos fotos grandes y las cuatro miniaturas de detalle— son ese patron. Las dos piezas del patron seguro: - la pista: minmax(0, 5fr) minmax(0, 7fr) o repeat(N, minmax(0, 1fr)); - la imagen: position: absolute; inset: 0. ####################################################################### ##################### NO HAY NI UN PRECIO ############################# Esta hoja no maqueta ninguna columna de precio, ninguna tabla de tarifas y ningun boton de compra, porque la pagina no los tiene. Las MEDIDAS van en pastillas (.bb-prod-d__pill), y la plantilla descarta cualquier valor con simbolo de moneda. Si alguien aniade una columna de precio a una ficha, esta escribiendo una tarifa. ####################################################################### ##################### MEDIDAS DE CONTRASTE (WCAG AA) ################## Todas MEDIDAS, no estimadas. Metodo identico al de contact.css y about.css: composicion alfa canal a canal en sRGB, linealizacion ((c/255+0.055)/1.055)^2.4, luminancia relativa 0.2126R + 0.7152G + 0.0722B y contraste (L1+0.05)/(L2+0.05). Referencias fijas: --bb-paper #F7F5F2 -> L = 0.914903 --bb-ink #1C1B19 -> L = 0.011039 --bb-body #565451 -> L = 0.089126 --bb-accent #2E4A42 -> L = 0.058728 --bb-label #A6A8AB -> L = 0.383588 (PROHIBIDO sobre papel) 1. TEXTO PEQUENIO SOBRE PAPEL. Es LA cifra critica de esta pagina: esta llena de texto pequenio (rotulos Materiales / Formatos / Pedido minimo, pastillas de medidas, listas de materiales, notas, numeros de los pasos, enlaces de consulta). --bb-body #565451 sobre papel = 0.964903 / 0.139126 = 6,94:1 OK NINGUNO de esos textos usa --bb-label (#A6A8AB), que sobre papel da 0.964903 / 0.433588 = 2,23:1 -> NO CUMPLE Por eso existe .bb-prod__label: es la micro-etiqueta del sistema (Jost 500, 11px, tracking 0.18em) con el COLOR corregido a --bb-body. La clase .bb-label del sistema NO se usa en esta hoja sobre papel ni una sola vez. Este error ya se colo tres veces en el proyecto. 2. TITULARES Y NOMBRES DE PRODUCTO SOBRE PAPEL: --bb-ink #1C1B19 sobre papel = 0.964903 / 0.061039 = 15,81:1 OK 3. ENLACES DE CONSULTA SOBRE PAPEL (.bb-prod-it__ask-a, 17 de ellos): --bb-accent #2E4A42 sobre papel = 0.964903 / 0.108728 = 8,87:1 OK 4. CAP. 7 (MATERIALES) — TEXTO CLARO sobre el VELO PLANO al 68% (el MISMO valor del banner de la portada, home-cta.css) en el PEOR CASO IMAGINABLE de la fotografia: una zona de blanco puro, sRGB 255. fondo compuesto = (1 - 0.68) x 255 = 81.6 c = 81.6/255 = 0.32 -> ((0.32+0.055)/1.055)^2.4 = 0.083544 contraste = 0.964903 / 0.133544 = 7,23:1 CUMPLE 4,5:1 El velo es PLANO: no hay ningun punto de la superficie con menos oscuridad que ese, asi que 7,23:1 es el MINIMO GARANTIZADO de todo el capitulo, no un promedio. Con una foto real (los tacos son madera y metacrilato, no blanco puro) la cifra sube. 5. CAP. 7 — MICRO-ROTULO claro (--bb-paper al 78% de opacidad) sobre ese mismo velo del 68%: mezcla = 0.78 x (247,245,242) + 0.22 x 81.6 = (210.61 / 209.05 / 206.71) -> L = 0.639065 contraste = 0.689065 / 0.133544 = 5,16:1 CUMPLE 4,5:1 Tampoco aqui vale --bb-label: sobre este velo mide ~3,5:1. 6. FILETES DECORATIVOS (--bb-ink-soft): son separacion de SUPERFICIE, no texto ni borde de control, asi que no tienen umbral que cumplir. Ningun filete de esta hoja transmite informacion por si solo. Los bordes de las PASTILLAS de medidas si son parte de un contenido informativo, pero la informacion es el TEXTO de dentro (que cumple 6,94:1); la pastilla solo lo agrupa. ####################################################################### MOTION: se reutiliza assets/js/page-reveals.js TAL CUAL. Esta pagina no aporta ni una linea de JS. Reparto de atributos: banda del Cap. 1 @keyframes propios de apertura al cargar foto de cada ficha [data-bb-clip] persiana ascendente datos y pasos [data-bb-stagger] cascada de hijos directos Cap. 7 y banner [data-bb-clip-down] persiana descendente NO se usa [data-bb-inout]: 17 fotografias entrando y saliendo en una pagina de consulta marean. Ese recurso es de sobre-mi, que es narrativa. prefers-reduced-motion: todo queda en su estado final VISIBLE. El JS no hace nada (lo decide el propio page-reveals.js leyendo window.bbBlind) y esta hoja no aplica ningun clip-path por su cuenta, asi que no puede quedar nada invisible para siempre. ========================================================================== */ /* -------------------------------------------------------------------------- CASCARA DE PAGINA AQUI *NO* SE ANULA .bb-main--offset, al contrario que en sobre-mi y en los servicios. Es la decision de diseno del Cap. 1: la apertura es TIPOGRAFICA sobre papel y la fotografia va debajo, asi que el hueco de la barra fija tiene que seguir reservado y el logotipo se pinta en TINTA sobre papel. Si se anula, el logotipo cae sobre el h1. Y el fondo de carga va en PAPEL, no en blanco puro: lo que se ve al retirarse la cortina es ya la pagina de papel, no una fotografia. -------------------------------------------------------------------------- */ body.bb-prod-page { background: var(--bb-paper); } .bb-prod { background: var(--bb-paper); } /* -------------------------------------------------------------------------- MICRO-ROTULO PROPIO Es .bb-label del sistema con el color corregido: sobre papel el gris de rotulo (#A6A8AB) da 2,23:1 y no cumple AA (ver medida 1). Se declara aqui en vez de usar la clase del sistema para que no haya ninguna tentacion de "reutilizarla" y colar el gris. -------------------------------------------------------------------------- */ .bb-prod__label { font-family: var(--bb-font-display); font-weight: 500; font-size: var(--bb-size-label); text-transform: uppercase; letter-spacing: var(--bb-track-label); line-height: 1.4; color: var(--bb-body); margin: 0; } /* ========================================================================== CAP. 1 — APERTURA TIPOGRAFICA + BANDA FOTOGRAFICA ========================================================================== */ .bb-prod-hero { padding-block: var(--bb-s5) 0; } .bb-prod-hero__in { max-width: 1080px; } .bb-prod-hero__label { margin-bottom: var(--bb-s3); } /* Dos lineas: la primera en Jost 700 mayusculas (Display XL) y la segunda en EB Garamond italica. El

es UNO SOLO; las dos lineas son de bloque dentro de el. */ .bb-prod-hero__h1 { margin: 0; display: flex; flex-direction: column; gap: 0.08em; } .bb-prod-hero__h1-a { font-family: var(--bb-font-display); font-weight: 700; font-size: var(--bb-size-display-xl); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.08; color: var(--bb-ink); } .bb-prod-hero__h1-b { font-family: var(--bb-font-lyric); font-weight: 400; font-style: italic; font-size: var(--bb-size-lyric); line-height: 1.15; color: var(--bb-ink); /* La italica arranca visualmente adelantada: se compensa el sangrado optico para que las dos lineas queden alineadas a la izquierda. */ margin-left: -0.04em; } .bb-prod-hero__lead { margin: var(--bb-s3) 0 0; max-width: 62ch; } .bb-prod-hero__band { padding-top: var(--bb-s5); } /* EL MARCO lleva el recorte de la apertura; la imagen va dentro, en absoluto. Proporcion FIJA ~21/9 (la unica fija de la pagina, y a proposito: es una banda de composicion). */ .bb-prod-hero__frame { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--bb-frame-bg); } .bb-prod-hero__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } @media (min-width: 768px) { .bb-prod-hero { padding-block: var(--bb-s6) 0; } .bb-prod-hero__band { padding-top: var(--bb-s6); } } /* -------------------------------------------------------------------------- APERTURA AL CARGAR La banda se abre DE ARRIBA ABAJO: el borde inferior del recorte baja. inset(0% 0% 100% 0%) -> inset(0% 0% 0% 0%). CUATRO COMPONENTES Y LA MISMA UNIDAD EN LOS DOS EXTREMOS. Un inset() de 4 componentes NO interpola contra uno de 1: la animacion se queda clavada en el valor inicial y salta al final. Retardo: --bb-delay-curtain, o sea que arranca justo cuando la cortina de entrada empieza a irse. Mismo orden de lectura que en la portada y en sobre-mi: primero el logotipo, despues la fotografia. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .bb-prod-hero__frame { animation: bb-prod-open 1.25s var(--bb-ease-diag) var(--bb-delay-curtain) both; } /* Cascada del texto de la apertura. */ .bb-prod-hero__label { animation: bb-prod-rise 0.9s var(--bb-ease) 0.5s both; } .bb-prod-hero__h1 { animation: bb-prod-rise 0.9s var(--bb-ease) 0.62s both; } .bb-prod-hero__lead { animation: bb-prod-rise 0.9s var(--bb-ease) 0.74s both; } /* KEN BURNS: se REUTILIZAN los @keyframes bb-ken de home-kenburns.css (12s, curva simetrica, alternate, escala 1 -> 1,07, deriva 1,2%), que es el valor aprobado. Esa hoja los aplica solo a .bb-hhero__img y .bb-hstrip__img, que son selectores de la portada; aqui se aplican al selector propio, exactamente como hacen service.css, contact.css y about.css. NO se copia la aritmetica: esta documentada alli. NO CHOCA CON LA APERTURA: la apertura es clip-path sobre el MARCO y el Ken Burns es transform sobre la IMAGEN. Dos propiedades distintas sobre dos elementos distintos. Y es el UNICO Ken Burns de la pagina: las 13 fotos de ficha ya reciben la micro-escala de la persiana, que tambien es un transform, y dos animaciones peleando por el transform del mismo elemento es justo lo que la regla del proyecto prohibe. */ .bb-prod-hero__img { animation: bb-ken 12s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } } @keyframes bb-prod-open { from { clip-path: inset(0% 0% 100% 0%); } to { clip-path: inset(0% 0% 0% 0%); } } @keyframes bb-prod-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== CAP. 2 — UNA LINEA + INDICE VISUAL DE LAS SEIS FAMILIAS ========================================================================== */ .bb-prod-intro { padding-block: var(--bb-s5); } .bb-prod-intro__in > * + * { margin-top: var(--bb-s3); } .bb-prod-intro__p { margin: 0; } /* -------------------------------------------------------------------------- MARCO UNIVERSAL DE PRODUCTO (.bb-prod-f) Lo usan las cuatro piezas que pintan un producto: las miniaturas del indice, las tarjetas, la foto grande de las fichas en fila y la tira de detalles. Un solo marco para las cuatro es lo que hace que todo el catalogo se vea uniforme sin tocar ni una foto. ############ object-fit: CONTAIN, NUNCA cover ###################### Las fotos salen recortadas de las hojas de tarifa de la clienta y sus proporciones van de 2,0:1 (la pila de copias) a 0,84:1 (el iman de metacrilato). Con 'cover' en un marco 4/3, la pila perderia los dos extremos y el iman se quedaria sin bordes: en un catalogo, recortar el producto es mentir sobre su forma. Con 'contain' sobre blanco, cada pieza se ve ENTERA y todas las celdas miden lo mismo. ####################################################################### EL PADDING VA EN LA IMAGEN, no en el marco: asi el fondo blanco llega hasta el filete y la pieza respira dentro de el. Necesita box-sizing border-box (la caja de contenido se encoge y 'contain' se ajusta a ella); se declara aqui y no se da por heredado. LA IMAGEN EN ABSOLUTO dentro de un marco con aspect-ratio: es la otra mitad del patron seguro de esta hoja (ver la cabecera). -------------------------------------------------------------------------- */ .bb-prod-f { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bb-frame-bg); border: 1px solid var(--bb-ink-soft); } .bb-prod-f--sq { aspect-ratio: 1 / 1; } .bb-prod-f__img { position: absolute; inset: 0; display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 6%; object-fit: contain; } /* -------------------------------------------------------------------------- INDICE VISUAL: seis tarjetas con foto, numero, nombre y PARA QUE SIRVE El "para que sirve" ("Para la pared", "Para la nevera") es lo que de verdad hace entender el catalogo de un vistazo, y por eso esta en el indice y no enterrado en una ficha. Seis columnas desde 1200px, tres desde 768 y dos por debajo. La aritmetica de estas tres pistas esta en el 'sizes' de la plantilla (template-parts/products/intro.php): si se cambia aqui, se cambia alli. -------------------------------------------------------------------------- */ .bb-prod-index { margin-top: var(--bb-s5); padding-top: var(--bb-s4); border-top: 1px solid var(--bb-ink-soft); } .bb-prod-index__t { margin-bottom: var(--bb-s3); } .bb-prod-index__list { list-style: none; margin: 0; padding: 0; display: grid; /* minmax(0, 1fr) y no 1fr: dentro de cada pista hay un marco con aspect-ratio (ver la cabecera de esta hoja). */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bb-s3); } .bb-prod-index__item { min-width: 0; } .bb-prod-index__link { display: block; color: var(--bb-ink); } .bb-prod-index__frame { transition: border-color 0.35s var(--bb-ease); } .bb-prod-index__link:hover .bb-prod-index__frame, .bb-prod-index__link:focus-visible .bb-prod-index__frame { border-color: var(--bb-accent); } .bb-prod-index__num { display: block; margin-top: var(--bb-s2); font-family: var(--bb-font-display); font-weight: 700; font-size: var(--bb-size-label); letter-spacing: 0.12em; color: var(--bb-body); /* 6,94:1 sobre papel */ } .bb-prod-index__lbl { display: block; margin-top: 4px; font-family: var(--bb-font-display); font-weight: 300; font-size: 1rem; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.12em; transition: color 0.35s var(--bb-ease); } .bb-prod-index__link:hover .bb-prod-index__lbl, .bb-prod-index__link:focus-visible .bb-prod-index__lbl { color: var(--bb-accent); /* 8,87:1 sobre papel */ } .bb-prod-index__use { display: block; margin-top: 4px; font-family: var(--bb-font-body); font-size: 0.875rem; /* 14px */ line-height: 1.45; color: var(--bb-body); } @media (min-width: 768px) { .bb-prod-intro { padding-block: var(--bb-s6); } .bb-prod-index__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .bb-prod-index__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ========================================================================== CAP. 3-8 — LAS SEIS FAMILIAS ========================================================================== */ /* SCROLL-MARGIN-TOP: sin esto el ancla del indice deja el titular DEBAJO de la barra fija. El alto de la barra sale del token, no de un numero escrito a mano, asi que sigue siendo correcto a los dos anchos (72px / 88px). */ .bb-prod-fam { padding-block: var(--bb-s5); scroll-margin-top: calc(var(--bb-bar-h) + var(--bb-s4)); } /* La cabecera es el ancla de la caja-etiqueta, que va en absoluto. */ .bb-prod-fam__head { position: relative; } .bb-prod-fam__headin { max-width: 1080px; } .bb-prod-fam__num { margin-bottom: var(--bb-s2); } .bb-prod-fam__t { color: var(--bb-ink); } /* PARA QUE SIRVE LA FAMILIA. Cuatro palabras bajo el titular; el mismo dato que lleva su tarjeta del indice, para que quien llega por el ancla lo siga viendo. */ .bb-prod-fam__use { margin: var(--bb-s1) 0 0; font-family: var(--bb-font-display); font-weight: 300; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bb-body); /* 6,94:1 sobre papel */ } .bb-prod-fam__rule { display: block; width: 72px; height: 1px; margin-top: var(--bb-s3); background: var(--bb-ink); } .bb-prod-fam__list { margin-top: var(--bb-s4); } /* CAJA-ETIQUETA DEL CAPITULO: solo desde 1024px. Mide 120x120 y se ancla arriba a la derecha de la cabecera. Por debajo de 1024 no hay sitio a la derecha del titular sin que se le monte encima, asi que no se pinta: es un recurso de firma, no informacion (va con aria-hidden). Y va en variante 'accent' porque la caja por defecto tiene fondo de PAPEL y sobre papel no se leeria como caja. */ .bb-prod-fam__head > .bb-tag { display: none; } @media (min-width: 1024px) { .bb-prod-fam__head > .bb-tag { display: flex; } } /* -------------------------------------------------------------------------- REJILLA DE TARJETAS (familias de dos o tres productos) ############ POR QUE TODAS LAS TARJETAS MIDEN LO MISMO ############## Porque una rejilla CSS estira todas las celdas de una fila a la altura de la mas alta. No hay ni un alto fijo escrito: la tarjeta con treinta y dos pastillas de medidas y la que tiene una sola acaban igual de altas por construccion. Era la peticion expresa de la clienta —"que todas las tarjetas se vean iguales y de un vistazo"— y asi no se puede romper al aniadir un producto. ####################################################################### ############ TRES COLUMNAS SIEMPRE, TENGA DOS O TRES ################ Desde 1024 la rejilla es de TRES columnas aunque la familia solo tenga dos productos: la tercera celda se queda vacia a proposito. Asi TODAS las tarjetas de la pagina —las diez— miden exactamente lo mismo, que es lo que pidio la clienta. Si las familias de dos repartieran el ancho completo entre dos tarjetas, esas dos serian un 55% mas anchas que las de las familias de tres y la pagina tendria dos tamanios de tarjeta. Y una tarjeta de 660 px de ancho para un iman de 7x10 cm es ademas una plancha de blanco: a 426 px la pieza llena el marco. ####################################################################### Dos columnas entre 768 y 1023 (en las familias de tres, la tercera cae sola, que es preferible a tres tarjetas estrujadas en una tableta) y una sola por debajo. -------------------------------------------------------------------------- */ .bb-prod-grid { display: grid; /* minmax(0, 1fr): cada celda contiene un marco con aspect-ratio. */ grid-template-columns: minmax(0, 1fr); gap: var(--bb-s4); align-items: stretch; margin-top: var(--bb-s4); } @media (min-width: 768px) { .bb-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .bb-prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* LA TARJETA. height: 100% para que ocupe el alto que la rejilla le da, y columna flexible para que el enlace de consulta se vaya al fondo: con los CTA alineados, dos tarjetas vecinas se leen como pareja y no como dos bloques sueltos. */ .bb-prod-c { display: flex; flex-direction: column; height: 100%; min-width: 0; } .bb-prod-c__d { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: var(--bb-s3); } /* -------------------------------------------------------------------------- FICHA EN FILA (familias de un solo producto) Desde 900px: minmax(0, 5fr) minmax(0, 7fr) — NUNCA 1fr (ver la cabecera de esta hoja). La foto siempre a la izquierda: solo hay dos fichas de este tipo en la pagina (album e impresion) y estan separadas por dos rejillas, asi que no hay muro que romper con un zigzag. -------------------------------------------------------------------------- */ .bb-prod-it { width: 100%; max-width: var(--bb-max); margin-inline: auto; padding-inline: var(--bb-gutter); display: grid; gap: var(--bb-s3); align-items: start; } .bb-prod-it__media { min-width: 0; } /* TIRA DE DETALLES bajo la foto grande. Cuatro vistas del mismo objeto (la tapa, el canto, abierto, una pagina) cuentan del album mas que tres lineas de texto, y cuestan cuatro miniaturas. */ .bb-prod-th { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .bb-prod-th__i { min-width: 0; } /* Ficha sin fotografia: no deberia ocurrir (las doce tienen foto), pero si un rol no resolviera, la columna de datos ocupa el ancho completo y se lee como una decision de maqueta, no como un hueco. */ .bb-prod-it--solo .bb-prod-d { border-left: 2px solid var(--bb-ink); padding-left: var(--bb-s3); } @media (min-width: 900px) { /* ###### AQUI ESTA LA REGLA CRITICA DE TODA LA PAGINA ###### */ .bb-prod-it { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--bb-s5); align-items: center; } .bb-prod-it--solo { grid-template-columns: minmax(0, 1fr); } .bb-prod-it--solo .bb-prod-d { max-width: 900px; } } /* ========================================================================== BLOQUE DE DATOS (.bb-prod-d) — el mismo en la fila y en la tarjeta ========================================================================== */ .bb-prod-d > * + * { margin-top: var(--bb-s3); } .bb-prod-d__name { font-family: var(--bb-font-display); font-weight: 700; font-size: 1.125rem; /* 18px en tarjeta */ text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.18; color: var(--bb-ink); margin: 0; } /* En la ficha en fila el nombre manda mas: hay sitio y es el unico producto del capitulo. */ .bb-prod-it .bb-prod-d__name { font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.16; } .bb-prod-d__text { margin: 0; max-width: 60ch; } /* --- Listas de definicion: el marcado honesto para pares dato/valor --- NO una tabla: una tabla de dos columnas pide una tercera de precio. */ .bb-prod-d__dl { margin: 0; } .bb-prod-d__pair { display: grid; gap: var(--bb-s1); padding-top: var(--bb-s2); border-top: 1px solid var(--bb-ink-soft); } .bb-prod-d__pair + .bb-prod-d__pair { margin-top: var(--bb-s2); } .bb-prod-d__dl dt { margin: 0; } .bb-prod-d__dd { margin: 0; font-family: var(--bb-font-body); font-size: 0.9375rem; /* 15px */ line-height: 1.6; color: var(--bb-body); /* 6,94:1 sobre papel — medida 1 */ } .bb-prod-d__plain { list-style: none; margin: 0; padding: 0; } .bb-prod-d__plain li { position: relative; padding-left: 14px; } .bb-prod-d__plain li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 1px; background: var(--bb-body); } /* -------------------------------------------------------------------------- PASTILLAS DE MEDIDAS SOLO MEDIDAS: nunca una cifra de dinero. La plantilla ademas descarta cualquier valor con simbolo de moneda (template-parts/products/item.php). Sin unidad en cada pastilla: la unidad va una sola vez en el rotulo, "Medidas (cm)". En la ficha de impresion son treinta y dos pastillas y repetir "cm" treinta y dos veces es ruido. tabular-nums y nowrap: las cifras quedan en columna optica y ninguna medida se parte en dos lineas por el medio. -------------------------------------------------------------------------- */ .bb-prod-d__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .bb-prod-d__pill { border: 1px solid var(--bb-ink-soft); padding: 5px 10px; font-family: var(--bb-font-body); font-size: 0.8125rem; /* 13px */ line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--bb-body); /* 6,94:1 sobre papel */ } /* --- Enlace de consulta: discreto, NO un boton chillon. --- En la tarjeta se va al fondo (margin-top: auto) para que los CTA de una misma fila queden alineados. */ .bb-prod-d__ask { margin: 0; } .bb-prod-c .bb-prod-d__ask { margin-top: auto; padding-top: var(--bb-s3); } .bb-prod-d__ask-a { font-family: var(--bb-font-display); font-weight: 500; font-size: var(--bb-size-label); text-transform: uppercase; letter-spacing: 0.18em; color: var(--bb-accent); /* 8,87:1 sobre papel — medida 3 */ } /* ========================================================================== CAP. 7 — MATERIALES Y ACABADOS (a sangre, con velo) Contraste MEDIDO en la cabecera de esta hoja: 7,23:1 el texto claro y 5,16:1 el micro-rotulo, los dos sobre el peor caso imaginable de la fotografia (blanco puro) mas el velo plano al 68%. ========================================================================== */ .bb-prod-mat { position: relative; /* A sangre SIN 100vw. Su padre es .bb-prod, un bloque normal sin max-width ni padding-inline (products.css: `.bb-prod { background: ... }`), que a su vez es hijo directo de .bb-main. Es decir: la seccion YA ocupa todo el ancho del area de contenido, no hay ninguna columna con medida de la que salirse. Con width: 100% queda a sangre y no desborda nada. Antes decia `width: 100vw; margin-left: 50%; transform: translateX(-50%)`, y eso era el origen del desplazamiento horizontal de la pagina: 100vw incluye el ancho de la barra de desplazamiento (1512 frente a 1497 medidos), asi que la seccion sobresalia ~7,5px por lado. Ver el comentario largo de .bb-main en layout.css. El patron de romper el contenedor (margin-inline: calc(50% - 50vw); width: 100vw) solo hace falta cuando la seccion esta DENTRO de una columna con medida, y entonces obliga a que un ancestro recorte. Aqui no hace falta: se elimina la causa en vez de taparla. */ width: 100%; min-height: 62svh; display: flex; align-items: center; overflow: hidden; background: var(--bb-ink); padding-block: var(--bb-s6); } .bb-prod-mat__frame { position: absolute; inset: 0; z-index: 0; } .bb-prod-mat__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* VELO PLANO AL 68%: el mismo valor del banner de la portada (home-cta.css). Plano y no degradado a proposito: asi la cifra de contraste es un MINIMO GARANTIZADO en toda la superficie, no un promedio. */ .bb-prod-mat__veil { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.68); } .bb-prod-mat__in { position: relative; z-index: 2; } .bb-prod-mat__in > * + * { margin-top: var(--bb-s3); } /* Micro-rotulo claro al 78% de opacidad: 5,16:1 medidos (medida 5). NO --bb-label, que sobre este velo da ~3,5:1. */ .bb-prod-mat__label { font-family: var(--bb-font-display); font-weight: 500; font-size: var(--bb-size-label); text-transform: uppercase; letter-spacing: var(--bb-track-label); line-height: 1.4; color: var(--bb-paper); opacity: 0.78; margin: 0; } .bb-prod-mat__t { color: var(--bb-paper); } .bb-prod-mat__x { font-family: var(--bb-font-body); font-size: var(--bb-size-body); line-height: 1.76; color: var(--bb-paper); /* 7,23:1 medidos — medida 4 */ margin: 0; max-width: 68ch; } /* ========================================================================== CAP. 10 — DUDAS RAPIDAS (
sobre papel) Mismo recurso que las paginas de servicio, pero con hoja propia: este capitulo no puede depender de service.css, que aqui no se encola.
Y NO UN ACORDEON DE JAVASCRIPT: abre y cierra sin una linea de script, es accesible por teclado de serie y el texto de la respuesta esta en el HTML aunque el bloque este cerrado (que es lo que importa para el posicionamiento). El marcador nativo se quita con las DOS declaraciones: list-style en el (Firefox y Chrome actuales) y ::-webkit-details-marker (Safari). Quitar solo una deja el triangulito en la mitad de los navegadores. ========================================================================== */ .bb-prod-faq { padding-block: var(--bb-s5); } .bb-prod-faq__head > * + * { margin-top: var(--bb-s2); } .bb-prod-faq__t { color: var(--bb-ink); } .bb-prod-faq__list { margin-top: var(--bb-s4); border-top: 1px solid var(--bb-ink-soft); } .bb-prod-faq__i { border-bottom: 1px solid var(--bb-ink-soft); } .bb-prod-faq__q { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bb-s3); padding-block: var(--bb-s3); cursor: pointer; list-style: none; font-family: var(--bb-font-display); font-weight: 500; font-size: 1.0625rem; /* 17px */ line-height: 1.35; color: var(--bb-ink); transition: color 0.35s var(--bb-ease); } .bb-prod-faq__q::-webkit-details-marker { display: none; } .bb-prod-faq__q:hover { color: var(--bb-accent); } /* Signo propio, en vez del triangulo del navegador. */ .bb-prod-faq__q::after { content: "+"; flex: none; font-family: var(--bb-font-display); font-weight: 300; font-size: 1.25rem; line-height: 1; color: var(--bb-accent); /* 8,87:1 sobre papel */ } .bb-prod-faq__i[open] .bb-prod-faq__q::after { content: "–"; } .bb-prod-faq__a { margin: 0 0 var(--bb-s3); max-width: 70ch; } /* ========================================================================== CAP. 8 — COMO PIDO PRESUPUESTO (papel, tres pasos) ========================================================================== */ .bb-prod-ask { padding-block: var(--bb-s5); } .bb-prod-ask__head { max-width: 1080px; } .bb-prod-ask__t { color: var(--bb-ink); margin-top: var(--bb-s2); } .bb-prod-ask__rule { display: block; width: 88px; height: 1px; margin-top: var(--bb-s3); background: var(--bb-ink); } .bb-prod-steps { list-style: none; margin: var(--bb-s5) 0 0; padding: 0; display: grid; gap: var(--bb-s4); grid-template-columns: minmax(0, 1fr); } .bb-prod-steps__i { padding-top: var(--bb-s3); border-top: 1px solid var(--bb-ink-soft); } .bb-prod-steps__n { display: block; font-family: var(--bb-font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.06em; color: var(--bb-ink); } .bb-prod-steps__t { font-family: var(--bb-font-display); font-weight: 300; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.4; color: var(--bb-ink); margin: var(--bb-s2) 0 0; } .bb-prod-steps__x { margin: var(--bb-s1) 0 0; } /* Las tres vias de contacto. */ .bb-prod-ways { list-style: none; margin: var(--bb-s5) 0 0; padding: 0; max-width: 62ch; } .bb-prod-ways__i + .bb-prod-ways__i { margin-top: var(--bb-s2); } .bb-prod-ways__i .bb-link { color: var(--bb-accent); } /* 8,87:1 */ @media (min-width: 768px) { .bb-prod-ask { padding-block: var(--bb-s6); } .bb-prod-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bb-s4); } } /* ========================================================================== CAP. 9 — BANNER DE CTA NO HAY NINGUNA REGLA AQUI, Y ES CORRECTO: el banner reutiliza .bb-hcta y home-cta.css sin una sola anulacion. Si alguien necesita tocarlo, probablemente esta re-maquetandolo, que es justo lo que no toca hacer. ========================================================================== */