body.wp-singular.product-template-default.single.single-product .site-content-wrapper .container { width: 100%; padding: 0; max-width: 100%; } body.wp-singular.product-template-default.single.single-product .product.type-product { padding: 0; } /* ═════════ DESIGN TOKENS ═════════ */ :root { --ls-red: #ae1a31; --ls-gold: #c2b57b; --ls-sand: #b8aa7e; --ls-cream: #e9e2cf; --ls-dark: #3c3b39; --ls-white: #ffffff; --ls-off-white: #f5f5f5; --pinyon: 'Pinyon Script', cursive; } /* ═════════ RESET TIPOGRÁFICO ═════════ */ /* Fijamos el font-size base a 16px absoluto en mis secciones, así todos los em internos escalan desde 16px sin depender del */ .puntajes, .notas, .cross-sell { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.4; } .puntajes *, .notas *, .cross-sell * { box-sizing: border-box; } .puntajes p, .notas p, .cross-sell p { margin: 0; } .puntajes .pinyon, .notas__cata-label { font-family: var(--pinyon); } /* ═════════ PUNTAJES (bloque rojo) ═════════ */ .puntajes { background-color: var(--ls-red); padding: 3.5em 0 2.5em; color: var(--ls-white); } .puntajes .container-xl { max-width: 1320px; margin: 0 auto; padding: 0 1.5em; } .puntajes .grid-puntajes { display: grid; grid-template-columns: 1fr 2px 1fr 2px 1fr; align-items: center; gap: 0; } @media (max-width: 991.98px) { .puntajes .grid-puntajes { grid-template-columns: 1fr; gap: 1.5em; } } .puntajes__label { font-size: 1.4em; /* ≈ 22px */ font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ls-gold); margin-bottom: 0.35em !important; } .puntajes__value { font-size: 2.4em; /* ≈ 38px */ font-weight: 900; line-height: 1; margin-bottom: 0.6em !important; color: var(--ls-white); } .puntajes__value.pinyon { font-size: 5em; /* ≈ 80px */ font-weight: 400; line-height: 1; } .puntajes__value small { font-size: 1.2em; font-weight: 700; } .puntajes__value-sub { font-size: 1em; font-weight: 400; } /* Barras de progreso (alcohol + amargor) */ .puntajes__bar-track { height: 24px; border-radius: 20px; background: var(--ls-cream); border: 4px solid var(--ls-cream); max-width: 282px; margin: 0 auto; box-sizing: content-box; overflow: hidden; } .puntajes__bar-fill { height: 100%; border-radius: 20px; background: var(--ls-gold); transition: width .4s ease-out; } .puntajes__divider { border-left: 2px solid var(--ls-gold); height: 100%; min-height: 120px; } @media (max-width: 991.98px) { .puntajes__divider { display: none; } } .puntajes__sep-line { border: none; border-top: 2px solid var(--ls-gold); margin: 1.8em 0; opacity: 1; } /* Grid de ficha técnica */ .puntajes .grid-ficha { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 1em; align-items: center; } @media (max-width: 991.98px) { .puntajes .grid-ficha { grid-template-columns: 1fr 1fr; } } @media (max-width: 575.98px) { .puntajes .grid-ficha { grid-template-columns: 1fr; } } .puntajes__secondary-label { font-weight: 700; font-size: 1.2em; /* ≈ 19px */ letter-spacing: 0.08em; text-transform: uppercase; color: var(--ls-gold); margin-bottom: 0.2em !important; line-height: 1.2; } .puntajes__secondary-value { font-size: 1.1em; /* ≈ 17.6px como en Figma */ font-weight: 300; margin-bottom: 0 !important; color: var(--ls-white); line-height: 1.4; } /* Pastilla CONTIENE GLUTEN */ .puntajes__badge { background: var(--ls-dark); border-radius: 3em; padding: 0.5em 1.2em; display: inline-flex; align-items: center; justify-content: center; gap: 1.2em; font-size: 1em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ls-white); width: 100%; line-height: 1.2; min-height: 3.5em; } .puntajes__badge img { display: block; max-width: 32px; height: auto; } /* ═════════ NOTAS DE CATA (bloque sand) ═════════ */ .notas { background-color: var(--ls-sand); padding: 3em 0; color: var(--ls-white); } .notas .container-xl { max-width: 1320px; margin: 0 auto; padding: 0 1.5em; } .notas__pairing { display: flex; align-items: center; text-align: center; font-size: 1.3em; /* ≈ 21px */ font-weight: 500; letter-spacing: 0.04em; margin-bottom: 2em !important; color: var(--ls-white); } .notas__pairing-line { display: inline-block; vertical-align: middle; flex: 1; height: 2px; background: var(--ls-white); margin: 0 0.9em; } .nota-col { display: flex; gap: 1.875em; align-items: flex-start; } .nota-izq img { max-width: 48px; height: auto; } .nota-der { flex: 1; } .notas__cata-label { font-family: var(--pinyon); text-align: left; font-size: 2.8em; /* ≈ 45px */ font-weight: 400; margin-bottom: 0.25em !important; color: var(--ls-white); line-height: 1; } .notas__cata-text { font-size: 1.1em; /* ≈ 17.6px — ahora sí coincide con Figma */ text-align: left; font-weight: 300; line-height: 1.55; color: var(--ls-white); margin-bottom: 0 !important; }