/* ========================================================================== PERFUMASTE — FICHA LARGA Todo lo que hay por DEBAJO de la unidad de compra: la descripcion larga y el listado completo de resenas. Se carga despues de `principal.css` y depende de ella, asi que a igualdad de especificidad gana sin necesidad de subir selectores. Aqui NO se sube ningun selector a base de `#id` ni de `!important` salvo donde se diga por que. El material es el del sistema y nada mas: filete de 1px `--hilo`, `--humo` para lo secundario, versalita mono (`--dato`) para las etiquetas de dato, serif (`--display`) para los titulares. Sin sombras, sin degradados, sin iconos. ========================================================================== */ /* ========================================================================== 1. DESCRIPCION LARGA ⚠️ EL PROBLEMA NO ERA "FALTA DE ESTILO", ERA ESTILO AJENO. Las descripciones vienen de importaciones y traian dentro `class="card"`, `class="btn"`, `class="grid"` y `class="mini"` — que son clases DE ESTE TEMA. Un `
` de la descripcion se pintaba como tarjeta de producto (`display:flex`) y un `` como el boton negro de comprar. Se corta de raiz en PHP (inc/ficha-larga.php quita `class` y `style` del HTML importado) y aqui solo se maqueta HTML desnudo: p, h2, h3, ul, ol, table. Por eso todo cuelga de `.prosa`, que es el envoltorio que pone el tema alrededor del contenido ajeno. El `h2.sec__t` del bloque queda FUERA y conserva su estilo del sistema. ========================================================================== */ /* Medida de lectura. ⚠️ AQUI HABIA `max-width: 68ch` (en principal.css) Y NO ERA LO QUE PARECIA. La unidad `ch` es el ancho del cero, que en Schibsted Grotesk es bastante mas ancho que la letra media: 68ch daban unos 120 caracteres por linea, casi el doble de lo legible. En `em` el calculo es directo y estable: 34em son ~65 caracteres, que es el centro de la horquilla de 60-75. */ .pdp__desc { max-width: 34em; } .prosa { font-size: 1rem; line-height: 1.65; /* Mas aire que el 1.55 del cuerpo: son textos largos. */ color: var(--tinta); overflow-wrap: break-word; /* Referencias y codigos de producto sin espacios. */ } /* Ritmo vertical. Va con `:where()` —especificidad cero— a proposito: cualquier regla concreta de mas abajo lo corrige sin pelear. Y se aplica a TODOS los descendientes, no solo a los hijos directos, porque el HTML importado envuelve medio contenido en `
` y `
` sueltos que ya no tienen clase pero siguen ahi. */ .prosa :where(p, ul, ol, dl, table, figure, blockquote, img, details, div, section, header, article) { margin-top: var(--s4); } .prosa :where(h2) { margin-top: var(--s7); } .prosa :where(h3, h4, h5, h6) { margin-top: var(--s5); } .prosa :where(:first-child) { margin-top: 0; } /* Los titulares de seccion: serif del tema y un filete que los separa de lo anterior. Es el mismo recurso que usa `.notas__i` para separar filas. */ .prosa h2 { font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96; font-size: 1.3rem; font-weight: 500; letter-spacing: -.018em; line-height: 1.2; padding-top: var(--s4); border-top: 1px solid var(--hilo); } .prosa > h2:first-child { padding-top: 0; border-top: 0; } /* ⚠️ h3 y h4 COMO ROTULO MONO, NO COMO TITULO PEQUEÑO. En las descripciones importadas los h3 son siempre etiquetas cortas —"Notas de Salida", "Descripción General", "Diseño del Frasco"—, que es exactamente el papel que en este tema hace la versalita mono (`.notas__t`, `.sello__tit`). Un serif de 1,05rem ahi solo compite con el h2 de arriba. */ .prosa :is(h3, h4, h5, h6) { font-family: var(--dato); font-size: var(--fs-dato); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--humo); line-height: 1.5; } .prosa strong, .prosa b { font-weight: 600; } .prosa em, .prosa i { font-style: italic; } .prosa a { color: inherit; text-decoration: underline; text-decoration-color: var(--hilo); text-underline-offset: 3px; } .prosa a:hover { text-decoration-color: var(--rojo); } /* --- Listas con filete --------------------------------------------------- Sin punto ni numero del navegador: una raya de 1px como vinete y un filete por fila, igual que `.notas__l`. Asi una lista de beneficios se lee como una tabla de datos del tema y no como una lista de blog. */ .prosa ul, .prosa ol { list-style: none; padding-left: 0; } .prosa > ul > li, .prosa > ol > li, .prosa :is(div, section, article) > ul > li, .prosa :is(div, section, article) > ol > li { display: grid; grid-template-columns: 2.1em 1fr; gap: var(--s3); padding-block: var(--s3); border-top: 1px solid var(--hilo); font-size: .95rem; line-height: 1.55; } .prosa ul > li:last-child, .prosa ol > li:last-child { border-bottom: 1px solid var(--hilo); } .prosa ul > li::before { content: ""; width: 11px; height: 1px; background: var(--tinta); margin-top: .78em; /* A la altura de la primera linea de texto. */ justify-self: start; } .prosa ol { counter-reset: pfp-orden; } .prosa ol > li { counter-increment: pfp-orden; } .prosa ol > li::before { content: counter(pfp-orden, decimal-leading-zero); font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .06em; color: var(--humo); padding-top: .28em; } /* Listas dentro de listas: heredarian filete y rejilla y saldria una escalera. */ .prosa li ul, .prosa li ol { margin-top: var(--s2); } .prosa li li { display: list-item; list-style: none; border: 0; padding-block: 2px; padding-left: var(--s4); } .prosa li li::before { content: none; } /* --- Tablas ------------------------------------------------------------- Ocho productos traen la "ficha tecnica" como tabla, con `border: 1px solid #ddd` en cada celda: una rejilla de Excel en mitad de una pagina editorial. Se rehace con el idioma de `.sello__fila`: clave en versalita mono, valor en tinta, y un filete horizontal por fila. Sin bordes verticales. `table-layout: fixed` no es decorativo: sin el, una tabla con una celda larga se ensancha por encima del contenedor y saca barra horizontal a toda la pagina. */ .prosa table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .925rem; } .prosa th, .prosa td { text-align: left; vertical-align: top; padding-block: var(--s3); border-top: 1px solid var(--hilo); overflow-wrap: anywhere; } .prosa tr:last-child :is(th, td) { border-bottom: 1px solid var(--hilo); } /* La primera celda es la clave la haya escrito el importador como `` o como ``, que de las dos formas viene. */ .prosa tbody tr > :first-child { width: 38%; font-family: var(--dato); font-size: var(--fs-dato); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--humo); line-height: 1.5; padding-top: calc(var(--s3) + 2px); } .prosa tbody tr > :first-child :is(strong, b) { font-weight: 400; } .prosa tbody tr > * + * { padding-left: var(--s4); } .prosa img { height: auto; border-radius: var(--r-sm); } .prosa blockquote { padding-left: var(--s4); border-left: 1px solid var(--hilo); color: var(--humo); } .prosa details { padding-block: var(--s3); border-top: 1px solid var(--hilo); } .prosa summary { cursor: pointer; font-weight: 600; font-size: .95rem; } /* En movil la tabla de dos columnas deja la clave en 38% de 358px —unos 136px para versalita mono— y las palabras largas se parten. Apiladas se leen. */ @media (max-width: 560px) { .prosa :is(table, tbody, tr, th, td) { display: block; width: auto; } .prosa tr { padding-block: var(--s3); border-top: 1px solid var(--hilo); } .prosa :is(th, td) { border: 0; padding: 0; width: auto; } .prosa tbody tr > * + * { padding-left: 0; margin-top: 3px; } .prosa tr:last-child :is(th, td) { border-bottom: 0; } .prosa tbody tr:last-child { border-bottom: 1px solid var(--hilo); } } /* ========================================================================== 2. LA CALIFICACION EN ESTRELLAS ⚠️ ESTO ES LO QUE HACIA QUE LAS RESENAS SE VIERAN "SUPREMAMENTE MAL". El marcado `.star-rating` de WooCommerce funciona tapando un texto con un `` encima, y ese truco vive ENTERO en la hoja `woocommerce-general`, que este tema desencola a proposito en inc/dieta.php. Sin ella no se tapa nada: en la ficha de Voyage de Nautica se leia el texto literal «Valorado con 5 de 5» treinta y ocho veces seguidas. Aqui se dibuja con dos capas de texto: una fija de cinco estrellas en `--hilo` y otra encima, recortada al porcentaje de la nota, en `--tinta`. Cuesta cero peticiones y ningun kB de CSS de terceros. La cuenta del ancho sale exacta porque `letter-spacing` se suma DESPUES de cada caracter, tambien del ultimo: el 80% del ancho total cae justo al terminar la cuarta estrella. ========================================================================== */ .calif { position: relative; display: inline-block; vertical-align: -.05em; font-size: .8rem; line-height: 1; letter-spacing: .08em; color: var(--hilo); white-space: nowrap; -webkit-user-select: none; user-select: none; } .calif::before { content: "★★★★★"; } .calif__v { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; color: var(--tinta); } .calif__v::before { content: "★★★★★"; } /* En una resena suelta la nota es contexto, no titular: mismo criterio que tenia `.estrellas--mini`. */ .calif--mini { font-size: .72rem; letter-spacing: .06em; } /* ========================================================================== 3. EL LISTADO COMPLETO DE RESENAS ========================================================================== */ /* ⚠️ SIN TOPE DE ANCHO DESDE QUE LAS RESENAS VAN EN COLUMNAS (2026-08-08). El `max-width: 40em` protegia la longitud de linea cuando cada resena era una fila a todo lo ancho; con las placas en `columns`, la linea la limita la propia columna (~570px con dos), y el tope solo conseguia que el bloque entero se viera arrinconado en una franja de 640px dentro de una pagina de 1180 — el "mal distribuido" que senalo el dueno. La cabecera (nota media y reparto) conserva su propio tope abajo para no desparramarse. */ .pdp__resenas { max-width: none; } .resenas__media { max-width: 40em; } /* --- Cabecera: la nota media y el reparto -------------------------------- */ .resenas__media { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s5); } /* La cifra es el titular del bloque, asi que va en la serif del tema y con cuerpo de titular. Es el mismo gesto que `.pdp__ahora` hace con el precio: el dato importante se lee antes que su etiqueta. */ .resenas__nota { font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96; font-size: 2.9rem; font-weight: 500; line-height: .9; letter-spacing: -.03em; } .resenas__nota-al { display: grid; gap: 6px; } .resenas__n { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--humo); } /* El reparto por estrellas. Las barras son filete de 2px, no bloques de color: lo que informa es el LARGO, y con 96% en cinco estrellas cualquier relleno mas grueso se convierte en una plancha oscura que se come la cabecera. */ .resenas__rep { list-style: none; padding: 0; margin-top: var(--s5); max-width: 24em; } .resenas__rf { display: grid; grid-template-columns: 6.6em 1fr 3.6em; align-items: center; gap: var(--s3); padding-block: 6px; } .resenas__rk { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .09em; text-transform: uppercase; color: var(--humo); } .resenas__rb { position: relative; height: 2px; background: var(--hilo); border-radius: 1px; } .resenas__rb i { position: absolute; top: 0; left: 0; height: 2px; background: var(--tinta); border-radius: 1px; } .resenas__rn { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .04em; color: var(--humo); text-align: right; font-variant-numeric: tabular-nums; } /* --- La lista ------------------------------------------------------------ ⚠️ PLACAS BLANCAS EN COLUMNAS, POR ORDEN DEL DUENO (2026-08-08): "los comentarios se ven muy largos y mal distribuidos". Aqui decia lo contrario —"filas con filete, no cajas blancas", por miedo a cincuenta sombras compitiendo— pero ese argumento murio cuando la placa SIN sombra (borde de 1px, como las tarjetas) paso a ser la superficie de todo el sitio. En filas a todo lo ancho, 246 resenas eran un pergamino y las mudas (solo estrellas) gastaban un renglon entero cada una. Las columnas son `columns`, no grid, a proposito: cada resena ocupa SU altura —las mudas quedan como fichas pequenas, las largas crecen— y el navegador las reparte solo, sin huecos. */ .resenas__l { list-style: none; padding: 0; margin-top: var(--s6); columns: 2; column-gap: var(--s5); } @media (max-width: 820px) { .resenas__l { columns: 1; } } .resena { break-inside: avoid; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md); padding: var(--s4) var(--s5); margin-bottom: var(--s5); } .resena__c { display: grid; grid-template-columns: 34px 1fr; gap: var(--s4); align-items: start; } /* El monograma sustituye al avatar. Ver el porque, con las cifras medidas, en `pfp_resena_iniciales()` (inc/ficha-larga.php). */ .resena__ini { width: 34px; height: 34px; display: grid; place-items: center; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); font-family: var(--dato); font-size: 10px; letter-spacing: .04em; color: var(--humo); } /* Anonima: el cuadrado se queda vacio y del color de la pagina. Es informacion, no un hueco: dice que ahi no hay nombre. */ .resena__ini--sin { background: transparent; } .resena__b { min-width: 0; } .resena__t { margin-top: var(--s2); font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; /* Hay resenas que son una parrafada sin espacios. */ } .resena__t p + p { margin-top: var(--s2); } .resena__m { margin-top: var(--s2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-family: var(--dato); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--humo); } /* "compra verificada" es lo que sostiene todo el bloque: mismo tratamiento que ya tenia `.opinion__m i` arriba, para que se reconozcan como lo mismo. */ .resena__m i { font-style: normal; color: var(--laca); } .resena__q { color: var(--tinta); } /* Resenas que son SOLO una calificacion (3.369 de 10.808 en staging): la placa entera en una linea. El porque esta en woocommerce/single-product/review.php. */ .resena--muda { padding-block: var(--s3); } .resena--muda .resena__b { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); } .resena--muda .resena__m { margin-top: 0; } /* --- Paginacion ---------------------------------------------------------- */ /* ⚠️ EL `ul` DE WOOCOMMERCE LLEVA LA MISMA CLASE QUE SUS ENLACES, y esa es la trampa entera de este bloque: `paginate_comments_links` imprime `