/* ========================================================================== SCENTIVOIRE · Porcelana «Los Tres Salones» — Ficha de perfume Template: single-sv_perfume.php. Tokens come from porcelana-base.css; salon tokens (--pc-tinte, --pc-superficie, --pc-peana, --pc-acento) switch through [data-salon] on and on .pc-ficha-head. Platinum is used here only for the score arcs and the 48 px rule above the final verdict. ========================================================================== */ .pc-ficha, .pc-ficha-related { --pc-ficha-pad: clamp(64px, 8vw, 128px); --pc-ficha-ease: cubic-bezier(0.22, 0.61, 0.36, 1); color: var(--pc-grafito); font-family: var(--pc-font); } .pc-ficha-main { overflow-x: clip; } .pc-ficha [id], .pc-ficha-related [id] { scroll-margin-top: 96px; } /* Shared type ------------------------------------------------------------- */ .pc-ficha-h2 { margin: 0; font-size: var(--pc-h2); font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; color: var(--pc-grafito); text-wrap: balance; overflow-wrap: break-word; } .pc-ficha-eyebrow, .pc-ficha-facts dt, .pc-ficha-offer-state__label, .pc-ficha-offer-state__link, .pc-ficha-anchors a, .pc-ficha-note__level, .pc-ficha-score__label, .pc-ficha-rating__method, .pc-ficha-toc__summary, .pc-ficha-related__label, .pc-ficha-mini__brand, .pc-ficha-review__body .sv-review-badge { font-size: var(--pc-label); font-weight: 500; letter-spacing: var(--pc-label-track); line-height: 1.4; text-transform: uppercase; } .pc-ficha a:focus-visible, .pc-ficha summary:focus-visible, .pc-ficha-related a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; } /* 1 · Cabecera ------------------------------------------------------------ */ .pc-ficha-head { --pc-ficha-line: var(--pc-filete); --pc-ficha-lintel: clamp(20px, 3vw, 40px); position: relative; padding-block: var(--pc-ficha-lintel) clamp(48px, 6vw, 96px); background: var(--pc-tinte); color: var(--pc-grafito); } .pc-ficha-head[data-salon="mujer"], .pc-ficha-head[data-salon="hombre"], .pc-ficha-head[data-salon="unisex"] { --pc-ficha-line: var(--pc-peana); } /* Hombre: the lintel, a 1 px line in the salon accent across the whole band. */ .pc-ficha-head[data-salon="hombre"] { padding-top: calc(var(--pc-ficha-lintel) * 2 + 1px); } .pc-ficha-head[data-salon="hombre"]::before { content: ""; position: absolute; inset-inline: 0; top: var(--pc-ficha-lintel); height: 1px; background: var(--pc-acento); } .pc-ficha-head__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; } .pc-ficha-head__media { position: relative; min-width: 0; } .pc-ficha-head__info { min-width: 0; } /* Stage: the pedestal the bottle stands on. */ .pc-ficha-stage { position: relative; isolation: isolate; margin: 0; width: 100%; aspect-ratio: 4 / 5; max-height: min(64svh, 600px); overflow: hidden; background: var(--pc-superficie); } .pc-ficha-stage::after { content: ""; position: absolute; z-index: 0; left: 50%; bottom: calc(14% - 9px); width: 46%; height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(29, 30, 32, 0.16), rgba(29, 30, 32, 0)); pointer-events: none; } .pc-ficha-stage__bottle { position: absolute; z-index: 1; left: 0; right: 0; bottom: 14%; width: auto; height: 72%; max-width: 84%; margin-inline: auto; object-fit: contain; object-position: 50% 100%; transform: scale(var(--sv-bottle-scale, 1)); transform-origin: 50% 100%; } /* Square cut-outs carry transparent margins: a taller box puts the glass on the same base line. */ .pc-ficha-stage__bottle--square { bottom: 7%; height: 84%; max-width: 92%; } /* Merchant photography: shown as supplied, on a white plate, with its credit. */ .pc-ficha-stage--plated::after { content: none; } .pc-ficha-stage--plated .pc-ficha-stage__bottle { top: 9%; bottom: 15%; left: 9%; right: 9%; width: 82%; height: 76%; max-width: none; margin: 0; padding: clamp(10px, 2vw, 24px); box-sizing: border-box; background: #fff; object-position: 50% 50%; transform: none; } .pc-ficha-stage__credit { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 4.5%; margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--pc-pizarra); text-align: center; } .pc-ficha-stage--photo::after { content: none; } .pc-ficha-stage__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Mujer: arch mask and a second 1 px arch, 12 px outside. */ .pc-ficha-head[data-salon="mujer"] .pc-ficha-head__media { padding: 13px 13px 0; } .pc-ficha-head[data-salon="mujer"] .pc-ficha-stage { border-radius: 50% 50% 0 0 / 36% 36% 0 0; outline: 1px solid var(--pc-peana); outline-offset: 12px; } /* Hombre: sharp corners and an inner 1 px passe-partout. */ .pc-ficha-head[data-salon="hombre"] .pc-ficha-stage { outline: 1px solid var(--pc-peana); outline-offset: -12px; } /* Unisex: the axis, a 1 px vertical line through the centre of the pedestal. */ .pc-ficha-head[data-salon="unisex"] .pc-ficha-stage::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; background: var(--pc-peana); } /* Breadcrumbs */ .pc-ficha-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; line-height: 1.4; color: var(--pc-pizarra); } .pc-ficha-crumbs li { display: inline-flex; align-items: center; min-width: 0; min-height: 44px; } .pc-ficha-crumbs li + li::before { content: "/"; content: "/" / ""; padding-inline: 8px; color: var(--pc-filete-activo); } .pc-ficha-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pc-pizarra); text-decoration: none; } .pc-ficha-crumbs a:hover { color: var(--pc-grafito); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .pc-ficha-crumbs [aria-current] { color: var(--pc-grafito); } /* Label: house · concentration */ .pc-ficha-eyebrow { margin: 8px 0 0; color: var(--pc-acento); overflow-wrap: anywhere; } .pc-ficha-title { margin: 12px 0 0 -0.04em; font-size: var(--pc-h1); font-weight: 300; line-height: 1.02; letter-spacing: -0.025em; color: var(--pc-grafito); text-wrap: balance; overflow-wrap: break-word; } .pc-ficha-lead { margin: 20px 0 0; max-width: 44ch; font-size: 1.25rem; font-style: italic; font-weight: 300; line-height: 1.55; color: var(--pc-pizarra); } /* Cartela */ .pc-ficha-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 24px); margin: 32px 0 0; padding: 0; border-top: 1px solid var(--pc-ficha-line); } .pc-ficha-facts__item { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 56px; padding-block: 10px; border-bottom: 1px solid var(--pc-ficha-line); } .pc-ficha-facts__item--wide { grid-column: 1 / -1; } .pc-ficha-facts dt { margin: 0; color: var(--pc-pizarra); } .pc-ficha-facts dd { margin: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.4; color: var(--pc-grafito); overflow-wrap: anywhere; } .pc-ficha-facts__item--numeric dd { font-variant-numeric: tabular-nums lining-nums; } .pc-ficha-facts dd a { color: var(--pc-grafito); text-decoration: underline; text-decoration-color: var(--pc-filete-activo); text-decoration-thickness: 1px; text-underline-offset: 4px; } .pc-ficha-facts dd a:hover { text-decoration-color: currentColor; } /* Honest price state */ .pc-ficha-offer-state { display: grid; gap: 12px; margin-top: 24px; padding: 20px 20px 8px; background: var(--pc-yeso); } .pc-ficha-offer-state__copy > * { margin: 0; } .pc-ficha-offer-state__label { color: var(--pc-pizarra); } .pc-ficha-offer-state__title { margin-top: 8px; font-size: 1.375rem; font-weight: 300; line-height: 1.2; color: var(--pc-grafito); } .pc-ficha-offer-state__note { margin-top: 6px; max-width: 52ch; font-size: 0.875rem; line-height: 1.55; color: var(--pc-pizarra); } .pc-ficha-offer-state__link { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; color: var(--pc-grafito); text-decoration: underline; text-decoration-color: var(--pc-filete-activo); text-decoration-thickness: 1px; text-underline-offset: 6px; } .pc-ficha-offer-state__link:hover { text-decoration-color: currentColor; } /* Anchor index */ .pc-ficha-anchors { margin-top: 20px; } .pc-ficha-anchors ul { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; margin: 0; padding: 0; list-style: none; } .pc-ficha-anchors li { display: inline-flex; align-items: center; } .pc-ficha-anchors li + li::before { content: none; width: 1px; height: 10px; margin-right: 16px; background: var(--pc-filete-activo); } .pc-ficha-anchors a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pc-grafito); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 calc(50% + 0.95em); background-size: 0 1px; } .pc-ficha-anchors a:hover, .pc-ficha-anchors a:focus-visible { background-size: 100% 1px; } /* 2 · Pirámide ------------------------------------------------------------ */ .pc-ficha-pyramid { padding-block: var(--pc-ficha-pad); background: var(--pc-porcelana); } .pc-ficha-pyramid__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; } .pc-ficha-pyramid__intro { min-width: 0; } .pc-ficha-pyramid__copy { margin: 16px 0 0; max-width: 44ch; font-size: var(--pc-body); line-height: 1.7; color: var(--pc-grafito); } .pc-ficha-pyramid__source { margin: 16px 0 0; max-width: 52ch; font-size: 0.8125rem; line-height: 1.6; color: var(--pc-pizarra); } .pc-ficha-notes { --pc-lamina-w: 88px; --pc-lamina-pad: 6px; --pc-lamina-h: calc((var(--pc-lamina-w) - 2 * var(--pc-lamina-pad) - 2px) * 2 / 3 + 2 * var(--pc-lamina-pad) + 2px); margin: 0; padding: 0; list-style: none; min-width: 0; } .pc-ficha-notes--plain { --pc-lamina-w: 24px; } .pc-ficha-note { display: grid; grid-template-columns: var(--pc-lamina-w) minmax(0, 1fr); column-gap: 16px; } /* The plate column carries the lamina and the 1 px thread down to the next one. */ .pc-ficha-note__plate { display: flex; flex-direction: column; align-items: center; } .pc-ficha-note__plate::after { content: ""; flex: 1 1 auto; width: 1px; min-height: 20px; background: var(--pc-filete-activo); } .pc-ficha-note:last-child .pc-ficha-note__plate::after { content: none; } .pc-ficha-note__frame { box-sizing: border-box; width: 100%; padding: var(--pc-lamina-pad); border: 1px solid var(--pc-filete); background: var(--pc-porcelana); } .pc-ficha-note__window { aspect-ratio: 3 / 2; overflow: hidden; background: var(--pc-yeso); } .pc-ficha-note__window img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; transform: scale(var(--sv-note-scale, 1)); transform-origin: center; } .pc-ficha-note__node { display: block; flex: none; width: 9px; height: 9px; margin-top: 6px; box-sizing: border-box; border: 1px solid var(--pc-filete-activo); transform: rotate(45deg); } .pc-ficha-note--text-only .pc-ficha-note__plate::after { margin-top: 6px; } .pc-ficha-note__copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: var(--pc-lamina-h); padding-bottom: 24px; } .pc-ficha-notes--plain .pc-ficha-note__copy { justify-content: flex-start; min-height: 0; } .pc-ficha-note:last-child .pc-ficha-note__copy { padding-bottom: 0; } .pc-ficha-note__level { margin: 0; color: var(--pc-pizarra); } .pc-ficha-note__text { margin: 6px 0 0; font-size: var(--pc-body); font-weight: 400; line-height: 1.45; color: var(--pc-grafito); overflow-wrap: break-word; } .pc-ficha-note__text::first-letter { text-transform: uppercase; } /* 3 · Valoración (Grafito noche) ------------------------------------------ */ .pc-ficha-rating { padding-block: var(--pc-ficha-pad); background: var(--pc-noche); color: var(--pc-porcelana); } .pc-ficha-rating__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; } .pc-ficha-rating__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .pc-ficha-rating__title { margin: 0; font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.5rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; color: var(--pc-porcelana); text-wrap: balance; overflow-wrap: break-word; } .pc-ficha-wordmark { letter-spacing: 0.06em; } .pc-ficha-rating__method { display: inline-flex; align-items: center; min-height: 44px; color: var(--pc-porcelana); text-decoration: underline; text-decoration-color: var(--pc-niebla); text-decoration-thickness: 1px; text-underline-offset: 6px; } .pc-ficha-rating__method:hover { text-decoration-color: currentColor; } .pc-ficha-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .pc-ficha-score { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; } .pc-ficha-score__ring { position: relative; width: 96px; max-width: 100%; aspect-ratio: 1; } .pc-ficha-score__svg { display: block; width: 100%; height: 100%; overflow: visible; } .pc-ficha-score__track { fill: none; stroke: var(--pc-filete-activo); stroke-width: 1; stroke-opacity: 0.4; } .pc-ficha-score--pending .pc-ficha-score__track { stroke-opacity: 0.9; } .pc-ficha-score--pending .pc-ficha-score__track { stroke-dasharray: 2 5; } .pc-ficha-score__arc { fill: none; stroke: var(--pc-platino); stroke-width: 2; stroke-linecap: butt; } .pc-ficha-score__value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pc-ficha-score__number { font-size: 2rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums lining-nums; color: var(--pc-porcelana); } .pc-ficha-score__scale { margin-top: 4px; font-size: 0.75rem; line-height: 1.2; color: var(--pc-niebla); } .pc-ficha-score__label { margin: 14px 0 0; max-width: 100%; font-size: 0.75rem; letter-spacing: 0.02em; text-transform: none; color: var(--pc-niebla); overflow-wrap: break-word; hyphens: auto; } .pc-ficha-score__status { margin: 6px 0 0; font-size: 0.75rem; line-height: 1.4; color: var(--pc-niebla); } .pc-ficha-rating__source { margin: 0; max-width: 62ch; justify-self: center; font-size: 0.8125rem; line-height: 1.6; color: var(--pc-niebla-clara); text-align: center; } /* 4 · Reseña -------------------------------------------------------------- */ .pc-ficha-review { padding-block: var(--pc-ficha-pad); background: var(--pc-porcelana); } .pc-ficha-review__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; } .pc-ficha-review__rail { min-width: 0; } .pc-ficha-toc { border-block: 1px solid var(--pc-filete); } .pc-ficha-toc__summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; color: var(--pc-grafito); cursor: pointer; list-style: none; } .pc-ficha-toc__summary::-webkit-details-marker { display: none; } .pc-ficha-toc__summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); } .pc-ficha-toc[open] > .pc-ficha-toc__summary::after { transform: translateY(2px) rotate(-135deg); } .pc-ficha-toc__nav ol { margin: 0; padding: 0 0 12px; list-style: none; counter-reset: pc-toc; } .pc-ficha-toc__nav a { display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding-block: 11px; box-sizing: border-box; font-size: 0.875rem; line-height: 1.45; color: var(--pc-grafito); text-decoration: none; } .pc-ficha-toc__nav a::before { counter-increment: pc-toc; content: counter(pc-toc, decimal-leading-zero); content: counter(pc-toc, decimal-leading-zero) / ""; flex: none; width: 20px; font-size: var(--pc-label); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; color: var(--pc-pizarra); } .pc-ficha-toc__nav a:hover span, .pc-ficha-toc__nav a:focus-visible span { text-decoration: underline; text-decoration-color: var(--pc-filete-activo); text-decoration-thickness: 1px; text-underline-offset: 5px; } .pc-ficha-evidence { display: none; margin: 32px 0 0; padding: 0; } .pc-ficha-evidence__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--pc-filete); } .pc-ficha-evidence dt { margin: 0; font-size: 0.8125rem; color: var(--pc-pizarra); } .pc-ficha-evidence dd { margin: 0; flex: none; font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; color: var(--pc-grafito); } .pc-ficha-evidence dd.pc-ficha-evidence__pending { font-weight: 400; color: var(--pc-pizarra); } .pc-ficha-review__body { min-width: 0; max-width: 68ch; font-size: var(--pc-body); font-weight: 400; line-height: 1.7; color: var(--pc-grafito); counter-reset: pc-sec; } .pc-ficha-review__body > :first-child { margin-top: 0; } .pc-ficha-review__body > :last-child { margin-bottom: 0; } .pc-ficha-review__body p, .pc-ficha-review__body ul, .pc-ficha-review__body ol { margin: 0 0 1.1em; } .pc-ficha-review__body > p:first-child:not([class]) { font-size: 1.3125rem; font-weight: 300; line-height: 1.5; } .pc-ficha-review__body h2 { margin: 2.2em 0 0.7em; font-size: var(--pc-h2); font-weight: 300; line-height: 1.15; letter-spacing: -0.015em; color: var(--pc-grafito); text-wrap: balance; overflow-wrap: break-word; } .pc-ficha-review__body > h2::before { counter-increment: pc-sec; content: counter(pc-sec, decimal-leading-zero); content: counter(pc-sec, decimal-leading-zero) / ""; display: block; margin-bottom: 12px; font-size: var(--pc-label); font-weight: 500; letter-spacing: 0.12em; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; color: var(--pc-pizarra); } .pc-ficha-review__body h3 { margin: 2em 0 0.5em; font-size: 1.125rem; font-weight: 500; line-height: 1.35; color: var(--pc-grafito); } .pc-ficha-review__body ul { padding-left: 0; list-style: none; } .pc-ficha-review__body ul > li { position: relative; padding-left: 24px; } .pc-ficha-review__body ul > li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 10px; height: 1px; background: var(--pc-filete-activo); } .pc-ficha-review__body ol { padding-left: 1.4em; list-style: decimal; } .pc-ficha-review__body li + li { margin-top: 0.45em; } .pc-ficha-review__body ol > li::marker { color: var(--pc-pizarra); font-size: 0.875em; } .pc-ficha-review__body strong, .pc-ficha-review__body b { font-weight: 500; } .pc-ficha-review__body a { color: var(--pc-grafito); text-decoration: underline; text-decoration-color: var(--pc-filete-activo); text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: break-word; } .pc-ficha-review__body a:hover { text-decoration-color: currentColor; } .pc-ficha-review__body .sv-review-badge { display: inline-block; margin: 0 0 2.4em; padding: 8px 12px; border: 1px solid var(--pc-filete); color: var(--pc-pizarra); } .pc-ficha-review__body .sv-review-badge + h2 { margin-top: 0; } .pc-ficha-review__body img { max-width: 100%; height: auto; } .pc-ficha-review__body blockquote { margin: 1.6em 0; padding-left: 24px; border-left: 1px solid var(--pc-filete-activo); font-weight: 300; } /* 5 · Veredicto final (Pizarra azul) --------------------------------------- */ .pc-ficha-verdict { padding-block: var(--pc-ficha-pad); background: var(--pc-pizarra-azul); color: var(--pc-porcelana); } .pc-ficha-verdict__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; } .pc-ficha-verdict__rule { display: block; width: 48px; height: 1px; background: var(--pc-platino); } .pc-ficha-verdict__title { margin: 24px 0 0; font-size: var(--pc-h2); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; color: var(--pc-porcelana); text-wrap: balance; } .pc-ficha-verdict__body { min-width: 0; max-width: 660px; } .pc-ficha-verdict__body p { margin: 0; font-size: var(--pc-body); font-weight: 400; line-height: 1.7; color: var(--pc-porcelana); } .pc-ficha-verdict__body p + p { margin-top: 16px; } .pc-ficha-verdict__body .pc-ficha-verdict__note { font-size: 0.9375rem; line-height: 1.65; color: var(--pc-niebla-clara); } .pc-ficha-verdict__note em { font-style: normal; } .pc-ficha-verdict__body strong { font-weight: 500; } .pc-ficha-verdict__body a { color: var(--pc-porcelana); text-decoration: underline; text-decoration-color: var(--pc-niebla); text-decoration-thickness: 1px; text-underline-offset: 4px; } /* Offers table (only when the plugin prints verified offers) --------------- */ .pc-ficha-offers { padding-block: var(--pc-ficha-pad); background: var(--pc-porcelana); } .pc-ficha-offers .sv-offers { padding: 0; background: none; color: var(--pc-grafito); font-variant-numeric: tabular-nums lining-nums; } .pc-ficha-offers .sv-offers h2 { margin: 0 0 32px; font-size: var(--pc-h2); font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; } .pc-ficha-offers .sv-offer-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px 18px; min-height: 64px; padding-block: 14px; border-top: 1px solid var(--pc-filete); } .pc-ficha-offers .sv-offer-row a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; background: var(--pc-grafito); color: var(--pc-porcelana); font-size: var(--pc-label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; } /* 6 · Fuentes -------------------------------------------------------------- */ .pc-ficha-sources { padding-block: clamp(56px, 7vw, 104px); background: var(--pc-porcelana); } .pc-ficha-sources__grid { display: grid; grid-template-columns: minmax(0, 1fr); } .pc-ficha-sources__body { min-width: 0; max-width: 76ch; font-size: 0.875rem; line-height: 1.6; color: var(--pc-pizarra); } .pc-ficha-sources__body h2 { margin: 0 0 20px; font-size: 1.375rem; font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; color: var(--pc-grafito); } .pc-ficha-sources__body ul, .pc-ficha-sources__body ol { margin: 0; padding: 0; list-style: none; counter-reset: pc-src; } .pc-ficha-sources__body li { position: relative; padding: 12px 0 12px 36px; border-top: 1px solid var(--pc-filete); } .pc-ficha-sources__body li:last-child { border-bottom: 1px solid var(--pc-filete); } .pc-ficha-sources__body li::before { counter-increment: pc-src; content: counter(pc-src, decimal-leading-zero); content: counter(pc-src, decimal-leading-zero) / ""; position: absolute; left: 0; top: 15px; font-size: var(--pc-label); font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums lining-nums; color: var(--pc-pizarra); } .pc-ficha-sources__body p { margin: 20px 0 0; font-size: 0.8125rem; line-height: 1.65; } .pc-ficha-sources__body a { color: var(--pc-grafito); text-decoration: underline; text-decoration-color: var(--pc-filete-activo); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; } .pc-ficha-sources__body a:hover { text-decoration-color: currentColor; } /* 7 · Perfumes para la misma temporada ------------------------------------- */ .pc-ficha-related { padding-block: var(--pc-ficha-pad); background: var(--pc-porcelana); border-top: 1px solid var(--pc-filete); } .pc-ficha-related__head { margin-bottom: clamp(32px, 4vw, 56px); } .pc-ficha-related__label { margin: 0 0 12px; color: var(--pc-pizarra); } .pc-ficha-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; } .pc-ficha-related__grid > * { min-width: 0; } /* An odd count never leaves a hole: the last card is centred on its own row. */ .pc-ficha-related__grid--odd > :last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); } /* Fallback card, only when sv_pc_card() is not available. */ .pc-ficha-mini { position: relative; display: flex; flex-direction: column; } .pc-ficha-mini__link { display: flex; flex-direction: column; color: var(--pc-grafito); text-decoration: none; } .pc-ficha-mini__stage { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--pc-superficie); } .pc-ficha-mini__stage img { position: absolute; left: 0; right: 0; bottom: 14%; width: auto; height: 72%; max-width: 84%; margin-inline: auto; object-fit: contain; object-position: 50% 100%; } .pc-ficha-mini__brand { margin-top: 16px; color: var(--pc-grafito); } .pc-ficha-mini__title { margin: 8px 0 0; font-size: 1.0625rem; font-weight: 400; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; } .pc-ficha-mini__link:hover .pc-ficha-mini__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .pc-ficha-mini__state { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--pc-filete); font-size: 0.8125rem; color: var(--pc-pizarra); } /* Responsive --------------------------------------------------------------- */ @media (min-width: 600px) { .pc-ficha-offer-state { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; padding: 24px 24px 12px; } .pc-ficha-offer-state__title { font-size: 1.5rem; } .pc-ficha-anchors ul { column-gap: 16px; } .pc-ficha-anchors li + li::before { content: ""; } .pc-ficha-notes { --pc-lamina-w: 128px; --pc-lamina-pad: 8px; } .pc-ficha-notes--plain { --pc-lamina-w: 24px; } .pc-ficha-note { column-gap: 32px; } .pc-ficha-note__copy { padding-bottom: 32px; } .pc-ficha-note__text { margin-top: 8px; font-size: 1.375rem; font-weight: 300; line-height: 1.3; } .pc-ficha-score + .pc-ficha-score { border-left: 1px solid color-mix(in srgb, var(--pc-porcelana) 14%, transparent); } .pc-ficha-score__ring { width: 136px; } .pc-ficha-score__number { font-size: 2.5rem; } .pc-ficha-score { padding-inline: 8px; } .pc-ficha-score__label { margin-top: 18px; font-size: var(--pc-label); letter-spacing: var(--pc-label-track); text-transform: uppercase; } .pc-ficha-score__status { font-size: 0.8125rem; } .pc-ficha-mini__title { font-size: 1.375rem; font-weight: 300; line-height: 1.15; } } @media (min-width: 900px) { .pc-ficha-related__grid { gap: 56px 32px; } .pc-ficha-related__grid--odd > :last-child { grid-column: auto; justify-self: stretch; width: auto; } .pc-ficha-related__grid--n1 { grid-template-columns: minmax(0, 400px); justify-content: center; } .pc-ficha-related__grid--n2 { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; } .pc-ficha-related__grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pc-ficha-related__grid--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 960px) { .pc-ficha-head__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; } .pc-ficha-head__media { grid-column: 1 / span 6; } .pc-ficha-head__info { grid-column: 7 / span 6; padding-left: clamp(8px, 3.5vw, 64px); } .pc-ficha-stage { max-height: min(78svh, 720px); } .pc-ficha-facts { margin-top: 36px; } } @media (min-width: 1024px) { .pc-ficha-pyramid__grid, .pc-ficha-rating__grid, .pc-ficha-review__grid, .pc-ficha-verdict__grid, .pc-ficha-sources__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } .pc-ficha-notes { grid-column: 1 / span 7; grid-row: 1; } .pc-ficha-pyramid__intro { grid-column: 9 / span 4; grid-row: 1; align-self: start; } .pc-ficha-note__text { font-size: 1.5rem; } .pc-ficha-rating__head { grid-column: 1 / span 4; align-items: flex-start; justify-content: space-between; align-self: stretch; text-align: left; } .pc-ficha-scores { grid-column: 5 / span 8; align-self: center; } .pc-ficha-rating__source { grid-column: 5 / span 8; justify-self: center; } .pc-ficha-review__rail { grid-column: 1 / span 3; position: sticky; top: 32px; align-self: start; } .pc-ficha-review__body { grid-column: 5 / span 7; } .pc-ficha-review__grid--solo .pc-ficha-review__body { grid-column: 3 / span 8; } .pc-ficha-evidence { display: block; } .pc-ficha-verdict__head { grid-column: 1 / span 4; } .pc-ficha-verdict__body { grid-column: 6 / span 7; padding-top: 25px; } .pc-ficha-sources__body { grid-column: 5 / span 7; } } @media (min-width: 1280px) { .pc-ficha-rating__title { font-weight: 200; } .pc-ficha-score__number { font-size: 3rem; font-weight: 200; } } /* German and Polish: longer words, tighter tracking, hyphenated headings. */ .pc-ficha :is(.pc-ficha-eyebrow, .pc-ficha-facts dt, .pc-ficha-offer-state__label, .pc-ficha-offer-state__link, .pc-ficha-anchors a, .pc-ficha-note__level, .pc-ficha-score__label, .pc-ficha-rating__method, .pc-ficha-toc__summary):is(:lang(de), :lang(pl)), .pc-ficha-related :is(.pc-ficha-related__label, .pc-ficha-mini__brand):is(:lang(de), :lang(pl)) { letter-spacing: 0.16em; } .pc-ficha :is(.pc-ficha-title, .pc-ficha-h2, .pc-ficha-rating__title, .pc-ficha-verdict__title, .pc-ficha-review__body h2, .pc-ficha-note__text):is(:lang(de), :lang(pl)), .pc-ficha-related .pc-ficha-h2:is(:lang(de), :lang(pl)) { hyphens: auto; } .pc-ficha-title:is(:lang(de), :lang(pl)) { font-size: calc(var(--pc-h1) * 0.9); } .pc-ficha-rating__title:is(:lang(de), :lang(pl)) { font-size: clamp(1.625rem, 1rem + 2.1vw, 3.125rem); } .pc-ficha .pc-ficha-score__label:is(:lang(de), :lang(pl)) { letter-spacing: 0.02em; } @media (min-width: 600px) { .pc-ficha .pc-ficha-score__label:is(:lang(de), :lang(pl)) { letter-spacing: 0.14em; } } /* Motion: underline growth only, and only when motion is welcome. */ @media (prefers-reduced-motion: no-preference) { .pc-ficha-anchors a { transition: background-size 0.3s var(--pc-ficha-ease); } .pc-ficha-offer-state__link, .pc-ficha-facts dd a, .pc-ficha-review__body a, .pc-ficha-sources__body a, .pc-ficha-rating__method { transition: text-decoration-color 0.3s var(--pc-ficha-ease); } } @media print { .pc-ficha-rating, .pc-ficha-verdict { background: none; color: #000; } .pc-ficha-rating *, .pc-ficha-verdict * { color: #000 !important; } .pc-ficha-anchors, .pc-ficha-toc { display: none; } }