/* ═══════════════════════════════════════════════════════════════════════
ESENCIA Y ESTILO CO — Liquid Glass para el sitio institucional
(portada, sedes, blog, envases, franquicias…) Guía: DISENO.md
Las páginas de la raíz tienen su propio sistema de componentes (#nav,
#annbar, #mob, .waf, .ee-tm, #lbx), distinto del de la tienda /t/.
Esta hoja las trae al mismo material SIN tocar el HTML de cada una:
una sola hoja para las 24 páginas, en vez de 24 copias del CSS.
Regla de Apple que se respeta acá: el vidrio va SOLO en la capa que
flota sobre el contenido. Las tarjetas, el hero y los números NO
llevan vidrio: llevan elevación, aire y radio continuo.
═══════════════════════════════════════════════════════════════════════ */
:root{
--g-ease:cubic-bezier(.32,.72,0,1);
--g-spec:inset 0 1px 0 rgba(255,255,255,.62);
--g-spec-d:inset 0 1px 0 rgba(242,238,232,.20);
--g-el1:0 1px 2px rgba(33,28,22,.05), 0 8px 22px -16px rgba(33,28,22,.18);
--g-el2:0 1px 2px rgba(33,28,22,.05), 0 14px 34px -18px rgba(33,28,22,.22);
}
/* ── Barra de anuncio: sólida, es parte del bloque del header ── */
#annbar{
background:rgba(26,21,17,.92) !important;
border-bottom:none !important;
}
/* ── Navegación: vidrio de verdad ──
Acá SÍ corresponde (a diferencia del header oscuro de la tienda):
el contenido pasa por debajo al desplazar, así que hay algo que
refractar. Antes tenía blur pero con el fondo al 96 % de opacidad,
o sea desenfoque desperdiciado: no se veía nada detrás. */
#nav{
/* Translucidez de verdad. A .72 el desenfoque casi no se notaba; a .58
se ve pasar el contenido por debajo — y en esta pagina hay una tarjeta
espresso y una banda oscura que al cruzar tinen el cristal. Eso es el
efecto de Apple: el material toma el color de lo que hay detras. */
background:rgba(242,238,232,.58) !important;
-webkit-backdrop-filter:blur(32px) saturate(1.9);
backdrop-filter:blur(32px) saturate(1.9);
/* En reposo sin línea dura: el filete aparece cuando el contenido
empieza a pasar por debajo, no antes. */
border-bottom:1px solid transparent !important;
}
#nav.sc{
background:rgba(242,238,232,.66) !important;
border-bottom-color:rgba(33,28,22,.06) !important;
box-shadow:var(--g-spec), 0 10px 30px -18px rgba(33,28,22,.28) !important;
}
/* Borde de scroll: el desenfoque se desvanece bajo la barra en vez de
cortarse en seco contra el contenido. */
#nav::after{
content:'';position:absolute;left:0;right:0;top:100%;height:14px;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);
pointer-events:none;opacity:0;transition:opacity .35s var(--g-ease);
}
#nav.sc::after{opacity:1}
/* ── Menú móvil: era 100 % opaco ── */
#mob{
-webkit-backdrop-filter:blur(32px) saturate(1.45);
backdrop-filter:blur(32px) saturate(1.45);
}
/* ── Burbuja de WhatsApp ──
La guía la marca como la única flotante permitida y como superficie
de vidrio. Estaba plana: ahora lleva filo especular y un halo suave. */
.waf-b{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.30),
inset 0 -1px 0 rgba(0,0,0,.14),
0 4px 12px -4px rgba(37,211,102,.42),
0 16px 34px -14px rgba(18,15,12,.34) !important;
transition:transform .22s var(--g-ease), box-shadow .3s var(--g-ease) !important;
}
.waf-b:hover{
transform:scale(1.06) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.38),
inset 0 -1px 0 rgba(0,0,0,.14),
0 6px 16px -4px rgba(37,211,102,.48),
0 22px 44px -16px rgba(18,15,12,.40) !important;
}
.waf-b:active{transform:scale(.96) !important}
/* La burbuja pasó a vidrio OSCURO pero se quedó con el texto espresso
que traía de cuando era una pastilla crema: letra oscura sobre fondo
oscuro, invisible. Sobre el pie —que ya es espresso— no se veía ni la
burbuja. Texto claro, y algo mas de cuerpo para que despegue del
fondo aunque este sea oscuro. */
.waf-lb{
background:rgba(26,21,17,.82) !important;
-webkit-backdrop-filter:blur(16px) saturate(1.4);
backdrop-filter:blur(16px) saturate(1.4);
border:1px solid rgba(242,238,232,.20) !important;
box-shadow:var(--g-spec-d), 0 12px 28px -14px rgba(18,15,12,.5) !important;
border-radius:100px !important;
color:#F2EEE8 !important;
font-size:12px !important;font-weight:var(--w-med) !important;
letter-spacing:-.005em !important;padding:8px 15px !important;
}
/* ── Modal de la tienda en línea ──
El velo tenía blur(5px), casi nada, y la caja era un bloque sólido.
Ahora el fondo se difumina de verdad y la tarjeta es vidrio. */
.ee-tm-bg{
background:rgba(24,20,15,.46) !important;
-webkit-backdrop-filter:blur(22px) saturate(1.2);
backdrop-filter:blur(22px) saturate(1.2);
}
.ee-tm-box{
background:rgba(251,249,245,.82) !important;
-webkit-backdrop-filter:blur(34px) saturate(1.5);
backdrop-filter:blur(34px) saturate(1.5);
border:1px solid rgba(255,255,255,.55) !important;
box-shadow:var(--g-spec), 0 44px 88px -34px rgba(24,20,15,.62) !important;
animation:gmodal .5s var(--g-ease) both;
}
@keyframes gmodal{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.ee-tm-x{
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
transition:transform .18s var(--g-ease), background .2s !important;
}
.ee-tm-x:active{transform:scale(.9) !important}
/* ── Visor de imágenes ── */
#lbx{
-webkit-backdrop-filter:blur(18px) saturate(1.2);
backdrop-filter:blur(18px) saturate(1.2);
}
/* ── Primitivas de contenido: volumen, no vidrio ──
El mismo oficio óptico (filo especular de 1 px) aplicado a materiales
opacos les da cuerpo físico sin volverlos translúcidos. */
.btn{transition:transform .18s var(--g-ease), box-shadow .3s var(--g-ease),
background .25s var(--g-ease), border-color .25s var(--g-ease) !important}
.btn-gold{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.40),
inset 0 -1px 0 rgba(33,28,22,.10),
0 2px 6px -2px rgba(154,110,46,.30),
0 10px 22px -10px rgba(154,110,46,.42) !important;
}
.btn-gold:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.48),
inset 0 -1px 0 rgba(33,28,22,.10),
0 3px 8px -2px rgba(154,110,46,.34),
0 16px 30px -12px rgba(154,110,46,.50) !important;
}
.btn-dark{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
inset 0 -1px 0 rgba(0,0,0,.18),
0 2px 6px -2px rgba(33,28,22,.22),
0 10px 22px -10px rgba(33,28,22,.34) !important;
}
.btn-gold:active,.btn-dark:active,.btn-outline:active,.btn-ghost-light:active{
transform:scale(.975) !important;
}
/* ═══════════════════════════════════════════════════════════════════
Accesibilidad — obligatoria, no opcional
═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-transparency:reduce){
#nav,#nav.sc,#annbar,#mob,.waf-lb,.ee-tm-bg,.ee-tm-box,.ee-tm-x,#lbx{
-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
#nav,#nav.sc{background:var(--bg) !important}
#annbar,#mob{background:var(--dark) !important}
.waf-lb{background:#1A1511 !important}
.ee-tm-bg{background:rgba(24,20,15,.88) !important}
.ee-tm-box{background:#FBF9F5 !important}
#nav::after{display:none}
}
@media (prefers-contrast:more){
#nav,#nav.sc{background:var(--bg) !important;border-bottom-color:var(--txt) !important}
.ee-tm-box{background:#FBF9F5 !important;border-color:var(--txt) !important}
}
@media (prefers-reduced-motion:reduce){
#nav,#nav::after,.btn,.waf-b,.ee-tm-x{transition:none !important}
.ee-tm-box{animation:none}
.waf-b:hover{transform:none !important}
}
@supports not (backdrop-filter:blur(1px)){
#nav,#nav.sc{background:var(--bg) !important}
#annbar,#mob{background:var(--dark) !important}
.waf-lb{background:#1A1511 !important}
.ee-tm-box{background:#FBF9F5 !important}
.ee-tm-bg{background:rgba(24,20,15,.88) !important}
}
/* ═══════════════════════════════════════════════════════════════════════
PORTADA MAYORISTA — capa de contenido
Sin vidrio (manda la guía): lo que cambia es el oficio. Elevación en dos
capas, filo especular de 1 px, radio continuo y la curva de Apple. Las
secciones dejan de ser cajas planas apiladas.
═══════════════════════════════════════════════════════════════════════ */
/* ── Hero: una luz cálida detrás del titular ──
Muy sutil, solo para que el texto no flote sobre un plano muerto. */
#hero{position:relative;isolation:isolate}
#hero::before{
content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(90% 70% at 18% 8%, rgba(196,145,62,.10), transparent 62%),
radial-gradient(70% 60% at 96% 0%, rgba(196,145,62,.06), transparent 58%);
}
/* ── Tarjetas de catálogo: ahora reaccionan ──
Eran tercios planos a sangre. La letra de fondo respira con el cursor. */
.cards-sec .ccard,.cards-sec > a,.cards-sec > div > a{
transition:background .45s var(--g-ease), transform .45s var(--g-ease) !important;
}
/* ── Rejillas de filete: celdas con cuerpo ──
El patrón de la casa es rejilla de 2 px sobre --bg-3. Se conserva, pero
cada celda gana elevación al pasar por encima en vez de solo cambiar de
color: así se lee como superficie, no como tabla. */
.nv-card,.tr-stat,.tr-card,.about-nums > *{
transition:transform .4s var(--g-ease), box-shadow .4s var(--g-ease),
background .3s var(--g-ease) !important;
}
.nv-card:hover,.tr-card:hover{
transform:translateY(-2px) !important;
box-shadow:var(--g-spec), var(--g-el2) !important;
z-index:2;position:relative;
}
/* Los números son el argumento de venta: que se lean como cifras, no como
texto. Tabulares y con el mismo filo especular de los botones. */
.tr-stat .n,.about-nums b,.about-nums .n{
font-variant-numeric:tabular-nums !important;
letter-spacing:-.035em !important;
}
.tr-stat{position:relative}
.tr-stat::after{
content:'';position:absolute;bottom:0;height:2px;
background:linear-gradient(90deg,var(--gold),rgba(196,145,62,0));
opacity:0;transition:opacity .4s var(--g-ease);
}
.tr-stat:hover::after{opacity:1}
/* ── Franja de cierre: profundidad, no un rectángulo oscuro ── */
.cta-strip{isolation:isolate}
.cta-strip::after{
content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(60% 100% at 50% 0%, rgba(196,145,62,.12), transparent 70%);
}
/* ── Preguntas frecuentes: el detalle se abre, no salta ── */
#sec-guias details,.faq details{
transition:background .3s var(--g-ease), box-shadow .3s var(--g-ease) !important;
}
#sec-guias details[open],.faq details[open]{
box-shadow:var(--g-el1) !important;
}
@media (prefers-reduced-motion:reduce){
.nv-card,.tr-stat,.tr-card,.about-nums > *,.cards-sec > a{transition:none !important}
.nv-card:hover,.tr-card:hover{transform:none !important}
}
/* ═══════════════════════════════════════════════════════════════════════
VIDRIO DONDE SÍ HAY ALGO DETRÁS
Regla que aprendimos a golpes: el Liquid Glass solo se percibe sobre
contenido rico. No se le fabrica un fondo al vidrio; se pone el vidrio
donde el contenido ya es rico. En esta página eso son dos sitios:
· la barra de navegación, por la que pasa TODO al desplazar
· las etiquetas sobre las letras gigantes de las tarjetas de catálogo
═══════════════════════════════════════════════════════════════════════ */
/* ── Etiquetas de familia y el "Ver →": vidrio CLEAR ──
Flotan sobre la letra decorativa de 160 px de cada tarjeta, que es
justo el caso que Apple autoriza para la variante clear: control
translúcido sobre contenido visualmente rico. */
.cat-grid > a span[style*="padding:4px 10px"]{
border-color:transparent !important;
border-radius:100px !important;
background:rgba(255,255,255,.34) !important;
}
.cat-grid > a:hover span[style*="padding:4px 10px"]{
background:rgba(255,255,255,.52) !important;
}
/* (Aqui vivian dos reglas de cuando la tarjeta de caballero era espresso:
pintaban las capsulas de blanco translucido y al pasar el cursor las
aclaraban mas. Con la tarjeta ya en azul claro, eso las volvia blancas
sobre blanco. Retiradas.) */
/* La letra decorativa reacciona: el cristal necesita algo que deformar y
ese algo se mueve, así el material se siente vivo y no pegado. */
.cat-grid > a > div:first-child{
transition:transform .9s var(--g-ease), color .9s var(--g-ease);
}
.cat-grid > a:hover > div:first-child{
transform:translateX(-14px) scale(1.06);
}
@media (prefers-reduced-motion:reduce){
.cat-grid > a > div:first-child,
.cat-grid > a span[style*="padding:4px 10px"]{transition:none}
.cat-grid > a:hover > div:first-child{transform:none}
}
@media (prefers-reduced-transparency:reduce){
.cat-grid > a span[style*="padding:4px 10px"]{
-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
background:var(--bg) !important;border-color:var(--rule) !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
SISTEMA — tipografía, color y ritmo
Medido sobre la portada antes de tocar nada: 164 de 271 textos no
pasaban contraste, había 5 tamaños por debajo de 10 px usados 112
veces, 7 pesos tipográficos y el 27 % del texto en oro.
Esto NO es maquillaje: es el sistema que faltaba. Se define una vez y
rige las 24 páginas de la raíz. En Apple el acabado es el 10 % final;
el 90 % es tipografía, espacio y contención — este bloque es ese 90 %.
═══════════════════════════════════════════════════════════════════════ */
:root{
/* Escala de seis pasos. El piso es 11 px: por debajo de eso no hay
contraste que salve al texto, y Apple no baja de 11 pt. */
--t-label:11px; /* etiquetas, epígrafes, contadores */
--t-small:13px; /* pies, notas */
--t-body:15px; /* cuerpo */
--t-lead:20px; /* entradilla */
--t-sub:32px; /* subtítulo */
/* Tres pesos, no siete */
--w-body:300; --w-med:600; --w-bold:700;
/* Tinta con contraste comprobado sobre crema */
--ink-1:#211C16; /* 13.6:1 */
--ink-2:#4A4039; /* 8.4:1 */
--ink-3:#6B6158; /* 5.4:1 — reemplaza a --txt-3 (3.4:1, fallaba) */
--ink-4:#7C7268; /* 4.6:1 — reemplaza a --txt-4 (2.0:1, fallaba) */
--oro-ink:#7A5618; /* 5.6:1 — oro legible para TEXTO pequeño */
}
/* ── 1 · PISO TIPOGRÁFICO ──
Todo lo que estaba entre 6,5 y 10,5 px sube al piso. Solo eso corrige
más de cien fallos de contraste, porque el texto diminuto en gris claro
era la mitad del problema. */
.eyebrow,.h-eyebrow,.h-lbl,.nv-g,.tr-stat .l,.an-l,.ab-tag,
.ft-lbl,.ft-contact-label,.ft-tag,.logo-s,.biz-feat .feat-num,
[style*="font-size:6.5px"],[style*="font-size:7px"],
[style*="font-size:7.5px"],[style*="font-size:8px"],
[style*="font-size:9px"],[style*="font-size:9.5px"],
[style*="font-size:10.5px"],[style*="font-size:10px"]{
font-size:var(--t-label) !important;
letter-spacing:.10em !important;
}
/* El nombre de la marca en la barra no es una etiqueta: mantiene su escala */
/* Los botones son acción, no micro-texto */
.btn,.btn-gold,.btn-dark,.btn-outline,.btn-ghost-light{
font-size:11.5px !important;letter-spacing:.08em !important;
}
/* ── 2 · TINTA CON CONTRASTE ──
Los grises de la paleta estaban por debajo del mínimo: --txt-3 daba
3,4:1 y --txt-4 apenas 2,0:1 sobre crema. Se sustituyen por dos grises
que sí pasan, manteniendo la misma sensación de jerarquía. */
p,.h-sub,.nv-casa,.tr-quote,.about-txt p,.biz-feat-d,
[style*="color:var(--txt-3)"]{color:var(--ink-3) !important}
.nv-g,.tr-stat .l,.h-lbl,.an-l,.ft-lbl,.ft-contact-label,
[style*="color:var(--txt-4)"]{color:var(--ink-4) !important}
/* ── 3 · PRESUPUESTO DE COLOR ──
El oro pasa de estar en el 27 % del texto a quedarse en tres sitios:
la palabra destacada del titular, las cifras y la acción principal.
Los epígrafes y las micro-etiquetas van a tinta. Un acento que está en
todo no acentúa nada — y en oro sobre crema el texto pequeño nunca
pasa contraste, así que esto arregla forma y accesibilidad a la vez. */
.eyebrow,.h-eyebrow,.ab-tag,.ft-tag,.ft-lbl,.ft-contact-label,
.cat-grid > a span[style*="color:var(--gold)"]{
color:var(--ink-3) !important;
}
.eyebrow::before,.h-eyebrow::before,
.eyebrow > span:first-child{background:var(--ink-4) !important}
/* Lo que SÍ conserva el oro */
.h-title .accent,.g,.tr-stat .n,.h-num,.an-n,
.btn-gold,.cat-grid > a span[style*="letter-spacing:.14em"]{
color:var(--oro-ink) !important;
}
.btn-gold{color:var(--dark) !important}
/* ── 4 · RITMO DE 8 PUNTOS ──
Había doce valores de espaciado sin múltiplo común (24, 28, 36, 56,
60, 68, 70, 100…). Las secciones se sentían desalineadas sin que se
supiera por qué. Se normalizan a la rejilla. */
.nv-sec,.tr-sec,.about-sec,#sec-guias{padding-top:96px !important;padding-bottom:96px !important}
.cta-strip{padding-top:96px !important;padding-bottom:96px !important}
.nv-head,.tr-head{margin-bottom:40px !important}
.about-row{gap:96px !important}
@media(max-width:900px){
.nv-sec,.tr-sec,.about-sec,#sec-guias,.cta-strip{
padding-top:64px !important;padding-bottom:64px !important;
}
.about-row{gap:48px !important}
}
/* ── Corrección: la tinta oscura NO aplica sobre fondo oscuro ──
Al normalizar los grises forcé tinta oscura en todos los párrafos, y eso
dejó ilegible el texto de las bandas espresso, la tarjeta de caballero y
el pie. Sobre oscuro la jerarquía se hace con blancos, no con grises. */
.cta-strip p,.cta-strip .c p,
footer p,.ft p,.ft-col p,
section[style*="background:var(--dark)"] p,
section[style*="background:var(--dark)"] span,
.cat-grid > a[href="caballero"] p{
color:rgba(242,238,232,.72) !important;
}
section[style*="background:var(--dark)"] [style*="rgba(242,238,232,.4)"],
footer .ft-lbl,footer .ft-contact-label,.ft-lbl,.ft-contact-label{
color:rgba(242,238,232,.58) !important;
}
.cat-grid > a[href="caballero"] span[style*="color:var(--txt-3)"],
.cat-grid > a[href="caballero"] span{color:rgba(242,238,232,.70) !important}
.cta-strip .eyebrow,section[style*="background:var(--dark)"] .eyebrow,
section[style*="background:var(--dark)"] > div > div > div > span:first-child{
color:rgba(217,169,78,.92) !important;
}
.cta-strip .g{color:var(--gold-2) !important}
/* El gris de etiqueta quedaba en 4,07:1 — justo por debajo del mínimo */
:root{--ink-4:#736A60;} /* 5.0:1 sobre crema */
/* "Aromas Inspirados" del logo: oro sobre espresso, sube a tono legible */
/* Números 01-04 del bloque de distribuidores: en oro sobre crema daban
2,2:1. Son ordinales, no acento: van en tinta. */
.biz-feat .feat-num,.feat-num{color:var(--ink-4) !important;font-weight:var(--w-med) !important}
/* Aviso legal del pie: gris demasiado claro para texto corrido */
[style*="color:var(--txt-3)"][style*="font-size:11.5px"],.legal,.aviso-legal{color:var(--ink-3) !important}
/* Remates tras subir la escala */
/* El "Ver →" se partía en dos renglones al crecer */
.cat-grid > a span[style*="letter-spacing:.14em"],
.cat-grid > a span[style*="Ver"]{white-space:nowrap !important}
/* Las cápsulas de familia aprietan el tracking para no saltar de fila */
/* La barra es CLARA: el subtítulo del logo va en oro legible, no en el
oro claro que sirve sobre espresso (daba 1,9:1 sobre crema) */
.logo-s{color:var(--oro-ink) !important}
/* ═══════════════════════════════════════════════════════════════════════
RADIO CONTINUO — segunda versión, con los errores corregidos
El primer intento se veía genérico por tres motivos concretos:
· las etiquetas de familia saltaban a dos filas en dos de las tres
tarjetas, y eso desfasaba los pies 36 px entre sí;
· el "Ver →" competía por el mismo renglón que las etiquetas;
· el bloque de distribuidores quedaba en caja dentro de caja.
Un radio no arregla una composición rota: primero se alinea, después
se redondea.
═══════════════════════════════════════════════════════════════════════ */
:root{ --r-lg:26px; --r-md:18px; --r-sm:13px; }
/* ── Botones: cápsula ── */
.btn,.btn-dark,.btn-gold,.btn-outline,.btn-ghost-light{
border-radius:100px !important;padding:14px 26px !important;
}
/* ── Las rejillas dejan de fingir filetes con un hueco de 2 px ──
Ese hueco sobre fondo oscuro es lo que dejaba "uñitas" al redondear. */
.cat-grid,.nv-grid,.tr-bar,.tr-grid,.about-nums{
background:transparent !important;gap:12px !important;
}
.cat-grid{padding:0 clamp(12px,3vw,40px) !important;gap:14px !important}
/* ── Tarjetas de catálogo ── */
.cat-grid > a{
border-radius:var(--r-lg) !important;
overflow:hidden;
box-shadow:var(--g-el1);
transition:transform .45s var(--g-ease), box-shadow .45s var(--g-ease),
background var(--t-slow) !important;
}
.cat-grid > a:hover{transform:translateY(-3px);box-shadow:var(--g-el2)}
/* El pie: el "Ver →" se ancla en la esquina y las etiquetas se quedan con
TODO el ancho, en una sola fila. Así las tres tarjetas tienen el mismo
pie y quedan alineadas. */
.cat-grid > a{position:relative}
.cat-grid > a > div:last-child{ /* sitio para la flecha anclada */
}
/* Cortar las etiquetas para que quepan en una fila era peor que el
desfase: se perdian "Arabe" y "Sandalo". Se dejan envolver, y la
alineacion se resuelve dandole al pie una altura fija: asi las tres
tarjetas terminan a la misma linea aunque una lleve dos filas. */
.cat-grid > a > div:last-child{
align-items:flex-start !important;
}
.cat-grid > a > div:last-child > div:first-child{
flex-wrap:wrap !important;min-width:0;
align-content:flex-start;
}
.cat-grid > a span[style*="padding:4px 10px"]{flex-shrink:0;
}
/* ── Celdas de rejilla ── */
.nv-card,.tr-stat,.tr-card,.about-nums > *{
border-radius:var(--r-md) !important;
border:1px solid var(--rule) !important;
box-shadow:var(--g-el1) !important;
}
.tr-stat::after{left:18px;right:18px}
/* ── Distribuidores: fuera la caja de atrás ── */
/* El ordinal como ficha, no como mota suelta */
.biz-feat .feat-num{
flex-shrink:0;align-items:center;justify-content:center;
}
/* ── Menores ── */
.faq details,#sec-guias details,.accord,.biz-ico,.h-img{border-radius:var(--r-sm) !important}
@media(max-width:760px){
:root{--r-lg:20px;--r-md:15px;--r-sm:11px}
.cat-grid{padding:0 12px !important}
.cat-grid,.nv-grid,.tr-bar,.tr-grid,.about-nums{gap:10px !important}
}
@media (prefers-reduced-motion:reduce){
.cat-grid > a,.biz-feat{transition:none !important}
.cat-grid > a:hover,.biz-feat:hover{transform:none !important}
}
/* La sección de catálogo estaba a padding:0 y sus tarjetas nacían pegadas
al borde de la banda oscura. Con esquina viva encajaba; con radio, el
encuentro se lee como un recorte mal hecho. Las tarjetas necesitan
apoyarse sobre el crema, no colgar de la banda. */
.cards-sec{padding:24px 0 !important}
@media(max-width:760px){.cards-sec{padding:14px 0 !important}}
/* ═══════════════════════════════════════════════════════════════════════
CATÁLOGO — cada familia con su color, del sistema de la marca
Antes había cuatro fondos que no significaban nada (crema, espresso,
verde menta, crema oscuro). Unificarlos borró la distinción, que sí
hacía falta. La respuesta no era inventar colores: la tienda /t/ ya
tiene un color por categoría, en versión apagada —rosa, azul pizarra,
verde— que convive con el espresso sin pelearle. Se traen acá, así los
dos sitios hablan el mismo idioma.
El color es un susurro en el fondo y una afirmación en el filete: la
tarjeta se lee como parte del conjunto, pero se reconoce de un vistazo.
═══════════════════════════════════════════════════════════════════════ */
:root{
--c-dama:#8E4F62; --c-dama-bg:rgba(168,106,122,.07);
--c-cab:#4A5A6B; --c-cab-bg:rgba(90,106,124,.07);
}
.cards-sec{background:var(--bg-2) !important}
/* Las tarjetas van MAS CLARAS que el estante, no mas oscuras: asi es como
se lee la elevacion. Teñidas al 7 % sobre el crema quedaban del mismo
valor que el fondo y no se despegaban. Ahora son casi blancas con un
susurro de color, y el estante (#E9E3DA) hace de sombra. */
.cat-grid > a[href="dama"]{background:#F7E9EC !important}
.cat-grid > a[href="caballero"]{background:#E9EEF3 !important}
.cat-grid > a[href="ambientales"]{background:#E7F0E9 !important}
.cat-grid > a[href="envases"]{background:#F7F1E6 !important}
.cat-grid > a[href="dama"]:hover{background:#FBF1F3 !important}
.cat-grid > a[href="caballero"]:hover{background:#F1F5F9 !important}
.cat-grid > a[href="ambientales"]:hover{background:#EFF6F1 !important}
.cat-grid > a[href="envases"]:hover{background:#FBF7EF !important}
/* El filete bajo el título es la afirmación del color */
.cat-grid > a[href="dama"] div[style*="height:2px"]{background:var(--c-dama) !important}
.cat-grid > a[href="caballero"] div[style*="height:2px"]{background:var(--c-cab) !important}
.cat-grid > a[href="ambientales"] div[style*="height:2px"]{background:var(--c-amb) !important}
/* El "Ver →" y el contador toman el color de su familia */
.cat-grid > a[href="dama"] span[style*="letter-spacing:.14em"]{color:var(--c-dama) !important}
.cat-grid > a[href="ambientales"] span[style*="letter-spacing:.14em"]{color:var(--c-amb) !important}
/* Las cápsulas de familia, teñidas y en cristal sobre la letra decorativa */
.cat-grid > a[href="dama"] span[style*="padding:4px 10px"]{color:var(--c-dama) !important}
.cat-grid > a[href="caballero"] span[style*="padding:4px 10px"]{color:var(--c-cab) !important}
.cat-grid > a[href="ambientales"] span[style*="padding:4px 10px"]{color:var(--c-amb) !important}
/* La letra decorativa también: deja de ser un gris genérico */
.cat-grid > a[href="dama"] > div:first-child{color:rgba(142,79,98,.09) !important}
.cat-grid > a[href="caballero"] > div:first-child{color:rgba(74,90,107,.10) !important}
.cat-grid > a[href="ambientales"] > div:first-child{color:rgba(63,107,76,.09) !important}
/* Nacía en top:-10px y el radio se la comía: entra completa */
.cat-grid > a > div:first-child{top:14px !important;right:20px !important}
/* Caballero deja de ser espresso: el café en una sola tarjeta de tres no
distinguía la familia, solo pesaba. La tinta vuelve a oscuro. */
.cat-grid > a[href="caballero"],
.cat-grid > a[href="caballero"] div,
.cat-grid > a[href="caballero"] p{color:var(--ink-1) !important}
.cat-grid > a[href="caballero"] p{color:var(--ink-3) !important}
/* Caballero ya no es espresso: hay que deshacer TODAS las reglas de tinta
clara que se le habían puesto cuando su fondo era oscuro, o queda texto
claro sobre fondo claro — invisible. */
.cat-grid > a[href="caballero"] span,
.cat-grid > a[href="caballero"] span[style*="color:var(--txt-3)"],
.cat-grid > a[href="caballero"] span[style*="color:var(--txt-4)"]{
color:var(--ink-4) !important;
}
.cat-grid > a[href="caballero"] span[style*="letter-spacing:.26em"]{color:var(--ink-3) !important}
.cat-grid > a[href="caballero"] span[style*="letter-spacing:.14em"]{color:var(--c-cab) !important}
.cat-grid > a[href="caballero"] div[style*="border-top"]{border-top-color:var(--rule) !important}
/* Entre 1024 y 1240 px el nombre de la marca se partía en dos renglones y
descuadraba la barra. El nombre de una marca no se envuelve. */
.logo-n{white-space:nowrap}
@media(max-width:1240px) and (min-width:1025px){
.nl{gap:14px !important}
.nl > a,.nl > div > a{font-size:12px !important}
}
/* ═══════════════════════════════════════════════════════════════════════
EL FONDO — de color plano a papel
El crema era un tono liso de arriba abajo, y un plano liso se lee como
pantalla, no como material. Tres capas muy tenues lo cambian sin tocar
la paleta:
1 · un grano finísimo, como el de un papel de algodón
2 · una temperatura que va de cálido arriba a más asentado abajo
3 · los filetes duros entre secciones, que hacían ver hojas apiladas,
pasan a desvanecerse en los extremos
Nada de esto se "ve": se siente. Es lo que separa un fondo caro de uno
por defecto.
═══════════════════════════════════════════════════════════════════════ */
/* 1 · Grano. Va fijo y por encima de todo, sin capturar el cursor, así
una sola capa cubre la página entera sin importar los fondos de cada
sección. Al 3,5 % es imperceptible de cerca y cambia todo de lejos. */
body::after{
content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
opacity:.035;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:220px 220px;
}
/* 2 · Temperatura. El crema arranca más cálido y se asienta al bajar;
las secciones claras dejan pasar ese degradado en vez de taparlo. */
body{
background:linear-gradient(180deg,#F6F2EB 0%,#F2EEE8 38%,#EDE9E1 100%) !important;
background-attachment:fixed !important;
}
/* Las secciones claras dejan pasar el degradado. Las OSCURAS no: la banda
de la tienda y el cierre conservan su espresso, o el bloque desaparece. */
/* OJO: esta regla vacia el fondo de CUALQUIER seccion con clase, y eso
se llevo por delante la calculadora de Emprende —que es espresso—
dejando el texto crema sobre crema. Las secciones OSCURAS quedan
excluidas de aqui. */
section[class]:not(.cards-sec):not(.cta-strip):not(.banda-tienda-slab):not(.fq-calc-sec),
.about-sec,#sec-guias{background-color:transparent !important}
.nv-sec{background-color:rgba(233,227,218,.55) !important}
.tr-sec{background-color:rgba(233,227,218,.40) !important}
.cards-sec{background-color:rgba(226,219,208,.55) !important}
/* 3 · Los filetes duros entre secciones se desvanecen en los extremos.
Una línea que cruza de borde a borde corta la página en hojas; una que
nace y muere en el aire la deja respirar. */
.nv-sec,.tr-sec,.about-sec,#sec-guias,.cards-sec{
border-top:none !important;border-bottom:none !important;position:relative;
}
.nv-sec::before,.tr-sec::before,.about-sec::before,#sec-guias::before{
content:'';position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(33,28,22,.09) 22%,rgba(33,28,22,.09) 78%,transparent);
}
@media (prefers-reduced-transparency:reduce){
body::after{display:none}
}
/* ── La banda de la tienda deja de ser un rectángulo a sangre ──
Con todo lo demás en tarjetas redondeadas, un bloque oscuro de canto
vivo cruzando la pantalla se lee como de otro sitio. Se convierte en
una pieza del mismo sistema: misma sangría y mismo radio que las
tarjetas de catálogo, apoyada directamente sobre el fondo de la página.
OJO: el bloque ES la pieza. No se le mete un panel adentro —eso deja un
marco oscuro alrededor y las esquinas asoman como uñitas. */
.banda-tienda-slab{
margin:0 clamp(12px,3vw,40px) !important;
border-radius:var(--r-lg) !important;
overflow:hidden;
box-shadow:0 2px 8px rgba(18,15,12,.10), 0 26px 60px -34px rgba(18,15,12,.55);
}
/* ═══════════════════════════════════════════════════════════════════════
ALINEACIÓN — la columna de texto tiene que ser UNA
Medido: seis de los siete titulares nacen en x=52, pero el de preguntas
frecuentes nace en x=226 (su bloque va centrado a 820 px) y el de la
banda de la tienda en x=87 (la sangría del bloque se suma a su relleno).
Tres márgenes izquierdos distintos es lo que hace que una página se
sienta "movida" aunque no se sepa señalar por qué.
═══════════════════════════════════════════════════════════════════════ */
/* Preguntas frecuentes: conserva la medida corta —el texto largo se lee
mejor angosto— pero se alinea a la izquierda con el resto en vez de
centrarse. */
/* Sin :has(): si el navegador no lo soporta invalida TODO el grupo de
selectores, y la regla no se aplica nunca. */
/* Es la propia caja .c la que lleva el max-width inline, no un hijo. */
.c[style*="max-width:820px"]{
margin-left:0 !important;margin-right:auto !important;
}
/* La banda: su sangría lateral ya la aporta el bloque, así que el relleno
interior se descuenta para que el texto caiga en la misma columna. */
.banda-tienda-slab .c{
padding-left:clamp(20px,calc(52px - 3vw),52px) !important;
padding-right:clamp(20px,calc(52px - 3vw),52px) !important;
}
/* Las dos secciones sin clase (distribuidores y preguntas frecuentes)
quedaron fuera del ritmo: 56/90 y 70/90 px. A la rejilla de 8. */
section:not([class]){padding-top:96px !important;padding-bottom:96px !important}
@media(max-width:900px){
section:not([class]){padding-top:64px !important;padding-bottom:64px !important}
}
/* El hero conserva su propio arranque bajo la barra */
#hero{padding-top:var(--nav-h) !important;padding-bottom:0 !important}
/* ── Remates de móvil ────────────────────────────────────────────────
1 · La rejilla de novedades se desbordaba: sus columnas son `1fr`, que
equivale a minmax(AUTO,1fr), así que un nombre largo de fragancia
empuja la pista más allá del contenedor. Con minmax(0,1fr) la columna
puede encogerse y el texto envuelve. */
.nv-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
@media(max-width:1020px){.nv-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
/* En movil se mantienen DOS columnas: asi "3 filas" son 6 tarjetas de
verdad y el bloque no se estira a 29 filas. */
@media(max-width:560px){
.nv-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.nv-card{padding:16px 13px 14px !important;min-height:104px !important}
.nv-name{font-size:13px !important;line-height:1.28 !important}
.nv-casa{font-size:11px !important}
.nv-g{font-size:8px !important;letter-spacing:.14em !important}
.nv-tag{font-size:7.5px !important;padding:5px 9px 5px 10px !important}
}
/* 2 · La sección de guías conservaba 52 px de sangría en móvil mientras
el resto bajaba a 22: tres columnas de texto distintas en la misma
pantalla. */
@media(max-width:900px){
#sec-guias .c,.cta-strip .c,section:not([class]) .c{
padding-left:22px !important;padding-right:22px !important;
}
}
/* ── Últimos oros sin contraste ──
Quedaban cuatro sitios donde el oro #C4913E sigue sobre crema y da
2,4:1. En texto es ilegible; pasan al oro de tinta, que da 5,6:1 y se
ve igual de dorado. */
.nl a[style*="gold"],.nl .on,.nl a.on,
/* OJO: esto era para ENLACES de texto a Maps. Sin excluir los botones se
llevaba por delante el "Cómo llegar" de las sedes —que tambien apunta a
maps— y lo dejaba en oro sobre espresso: 2.55:1. */
a[href*="maps"]:not(.btn):not(.branch-link):not(.map-btn),a[href="contacto"][style*="gold"]:not(.btn),
.ft-brand small,.ft-tagline,
#sec-guias h2 .g,#sec-guias .g{
color:var(--oro-ink) !important;
}
/* Los enlaces dorados dentro de párrafos, en cualquier sección clara */
section:not([style*="var(--dark)"]):not(.cta-strip) p a[style*="var(--gold)"],
section:not([style*="var(--dark)"]):not(.cta-strip) p a[style*="color:var(--gold)"]{
color:var(--oro-ink) !important;
}
/* Los últimos: tarjetas de guías, el aviso legal y "experto" del titular */
#sec-guias a,#sec-guias a div,#sec-guias a span,
.guia-card,.guia-card *{color:var(--ink-2) !important}
#sec-guias h2 span,#sec-guias h2 .g{color:var(--oro-ink) !important}
[style*="color:var(--txt-3)"]{color:var(--ink-3) !important}
/* Marca del pie y la píldora "Nuevo" de la franja superior */
.ft-brand small,.ft-tag{color:rgba(242,238,232,.62) !important}
#annbar .nuevo,#annbar span[style*="gold"]{color:var(--dark) !important}
/* ═══════════════════════════════════════════════════════════════════════
NOVEDADES — el color informa, no decora
Primero teñí la tarjeta entera y le puse un filete lateral de color.
Eso es lenguaje de aviso, no de producto: Apple nunca colorea la
superficie para clasificar, usa el color en el dato y deja la
superficie neutra. Queda solo en la etiqueta de género, que es
exactamente la información que el color transmite.
═══════════════════════════════════════════════════════════════════════ */
.nv-card{
transition:background .3s var(--g-ease), transform .4s var(--g-ease),
box-shadow .4s var(--g-ease) !important;
}
.nv-card[data-genero="Dama"] .nv-g{color:var(--c-dama) !important}
.nv-card[data-genero="Caballero"] .nv-g{color:var(--c-cab) !important}
.nv-card[data-genero="Unisex"] .nv-g{color:var(--oro-ink) !important}
/* Al pasar el cursor, el nombre toma el tono de su familia: el color
aparece cuando el lector se interesa, no antes. */
.nv-card[data-genero="Dama"]:hover .nv-name{color:var(--c-dama) !important}
.nv-card[data-genero="Caballero"]:hover .nv-name{color:var(--c-cab) !important}
.nv-card[data-genero="Unisex"]:hover .nv-name{color:var(--oro-ink) !important}
/* ═══════════════════════════════════════════════════════════════════════
MODALES — la superficie que SÍ pide vidrio
Un modal flota sobre la página: es capa funcional pura, el único sitio
donde la guía de Apple manda cristal sin discusión. Y acá el desenfoque
se nota de verdad, porque detrás hay una rejilla llena de contenido.
El velo pasaba de blur(3px) —imperceptible— a un desenfoque real.
═══════════════════════════════════════════════════════════════════════ */
/* El velo: lo de atrás se difumina de verdad y el modal gana foco */
#prod-modal{
background:rgba(18,15,12,.42) !important;
-webkit-backdrop-filter:blur(24px) saturate(1.25) !important;
backdrop-filter:blur(24px) saturate(1.25) !important;
}
/* La tarjeta: cristal claro sobre el velo, radio del sistema */
.pm-card{
max-width:460px !important;
border-radius:var(--r-lg) !important;
padding:32px 32px 28px !important;
background:rgba(252,250,246,.92) !important;
-webkit-backdrop-filter:blur(30px) saturate(1.6);
backdrop-filter:blur(30px) saturate(1.6);
border:1px solid rgba(255,255,255,.65) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
0 2px 10px rgba(18,15,12,.14),
0 44px 90px -34px rgba(18,15,12,.66) !important;
animation:pmIn .46s var(--g-ease) both;
}
@keyframes pmIn{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:none}}
/* Cerrar: cápsula de cristal, no un botón gris */
.pm-close{
width:34px !important;height:34px !important;top:16px !important;right:16px !important;
background:rgba(33,28,22,.06) !important;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border:1px solid rgba(33,28,22,.08) !important;
color:var(--ink-3) !important;
transition:background .2s var(--g-ease), transform .18s var(--g-ease) !important;
}
.pm-close:hover{background:rgba(33,28,22,.12) !important;color:var(--ink-1) !important}
.pm-close:active{transform:scale(.9) !important}
/* Jerarquía: el nombre manda, los datos son una ficha técnica */
.pm-eyebrow{color:var(--ink-3) !important;}
.pm-title{font-size:28px !important;margin:8px 44px 22px 0 !important;letter-spacing:-.035em !important}
.pm-gold{color:var(--oro-ink) !important}
/* Las notas olfativas: cápsulas de cristal, que es lo que son —etiquetas
flotando sobre una superficie, no botones */
.pm-note{
font-size:11.5px !important;
color:var(--ink-2) !important;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.75) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(33,28,22,.06) !important;
padding:5px 12px !important;
}
/* Mismo trato para el modal de la tienda y el visor de imágenes */
.ee-tm-box{border-radius:var(--r-lg) !important}
@media (prefers-reduced-motion:reduce){
.pm-card{animation:none}
.pm-close{transition:none !important}
}
@media (prefers-reduced-transparency:reduce){
#prod-modal{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
background:rgba(18,15,12,.88) !important}
.pm-card,.pm-note{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.pm-card{background:#FCFAF6 !important}
.pm-note{background:var(--bg-2) !important}
}
/* ═══════════════════════════════════════════════════════════════════════
HEADER — rediseño
Lo que estaba mal, medido:
· NUEVE enlaces de primer nivel, y "Ambientales" repetía lo que ya
estaba dentro del desplegable de Fragancias;
· tres tratamientos distintos para el mismo tipo de enlace (peso 500,
peso 600, y uno en oro), o sea tres jerarquías donde hay una sola;
· los enlaces a 9,5 px y el botón a 8 px — texto ilegible;
· el botón con 2 px de radio, un rectángulo;
· la página activa marcada con un subrayado, que es de otra época.
═══════════════════════════════════════════════════════════════════════ */
/* Más aire: el logo mide 50 px y la barra 68, iba apretado */
:root{--nav-h:78px}
/* Un solo tratamiento para todos los enlaces, a tamaño legible */
.nl a,.nav-drop-toggle{
font-size:12.5px !important;font-weight:500 !important;
letter-spacing:0 !important;
color:var(--ink-2) !important;
border-bottom:none !important;border-radius:100px !important;
transition:background .25s var(--g-ease), color .25s var(--g-ease) !important;
}
.nl a:hover,.nav-drop-toggle:hover{
background:rgba(33,28,22,.055) !important;color:var(--ink-1) !important;
}
/* La página activa: pastilla suave, no subrayado */
.nl a.on{
background:rgba(196,145,62,.13) !important;
color:var(--oro-ink) !important;font-weight:600 !important;
}
.nav-drop-toggle svg{width:12px;height:12px;opacity:.55}
/* El botón es el ÚNICO acento del header */
.nwa{
border-radius:100px !important;
padding:11px 22px !important;
font-size:11px !important;letter-spacing:.08em !important;
background:var(--dark) !important;color:var(--bg) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
inset 0 -1px 0 rgba(0,0,0,.18),
0 8px 20px -10px rgba(33,28,22,.45) !important;
transition:transform .18s var(--g-ease), background .25s var(--g-ease) !important;
}
.nwa:hover{background:var(--oro-ink) !important;color:#FFF8EC !important}
.nwa:active{transform:scale(.97) !important}
/* La marca respira */
.logo{gap:15px !important}
.logo-n{font-size:17px !important}
.logo-s{font-size:9.5px !important;letter-spacing:.20em !important;margin-top:4px !important}
/* La franja de anuncio, a la misma escala del sistema */
#annbar a,#annbar span{font-size:11px !important}
@media(max-width:1024px){#annbar{}#nav{}}
@media (prefers-reduced-motion:reduce){
.nl a,.nav-drop-toggle,.nwa{transition:none !important}
.nwa:active{transform:none !important}
}
/* Los enlaces del menú no se parten: un rótulo de navegación en dos
renglones descuadra la barra entera. Si no caben, se aprieta el
espaciado; por debajo de 1100 px ya entra el menú móvil. */
.nl a,.nav-drop-toggle,.nwa{white-space:nowrap !important}
.nl{flex-wrap:nowrap !important}
@media(max-width:1280px){
.nl{gap:8px !important}
.nl a,.nav-drop-toggle{padding:8px 8px !important;font-size:12px !important}
.nwa{padding:11px 18px !important;font-size:10.5px !important}
}
/* El género baja a la misma escala para que no le compita */
.nv-g{font-size:9.5px !important;}
/* ── El color de la familia aparece al tocar la tarjeta ──
En reposo las 29 se quedan neutras: así la rejilla se lee como un
conjunto y el ojo recorre los nombres, que es lo que importa. El color
entra cuando el lector se detiene en una — un lavado muy leve, del 5 %,
más la elevación. Es información que responde, no decoración fija.
(Teñirlas todas de entrada ya se probó: convierte la rejilla en un
semáforo. No reintentar.) */
.nv-card:hover{
z-index:2;position:relative;
}
@media (prefers-reduced-motion:reduce){
.nv-card:hover{transform:none !important}
}
/* ═══════════════════════════════════════════════════════════════════════
NOVEDADES — tarjeta teñida a la manera de Apple
Apple sí colorea tarjetas por categoría (Salud, Música, Atajos), pero
nunca con un relleno plano: usa un DEGRADADO que nace del tinte y se
disuelve en blanco hacia abajo. Eso hace que el color se lea como luz
sobre un material, no como pintura. Sumado a esto:
· la tinta del texto se mantiene oscura y a contraste pleno;
· nada de bordes de color ni filetes laterales;
· el radio generoso y la elevación hacen el resto.
═══════════════════════════════════════════════════════════════════════ */
.nv-card{
border:1px solid rgba(255,255,255,.7) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--g-el1) !important;
}
.nv-card[data-genero="Dama"]{
background:linear-gradient(168deg,#F4DDE3 0%,#FAEEF1 46%,#FEFCFC 100%) !important;
}
.nv-card[data-genero="Caballero"]{
background:linear-gradient(168deg,#DCE6EF 0%,#EDF2F7 46%,#FCFDFE 100%) !important;
}
.nv-card[data-genero="Unisex"]{
background:linear-gradient(168deg,#F3E6CC 0%,#F9F1E2 46%,#FEFCF8 100%) !important;
}
/* Al tocar, el degradado se intensifica y la tarjeta se levanta: el
material responde a la luz, no cambia de color. */
.nv-card[data-genero="Dama"]:hover{
background:linear-gradient(168deg,#EFD0D9 0%,#F7E6EB 46%,#FDF9FA 100%) !important;
}
.nv-card[data-genero="Caballero"]:hover{
background:linear-gradient(168deg,#D2DFEB 0%,#E7EEF5 46%,#FAFCFD 100%) !important;
}
.nv-card[data-genero="Unisex"]:hover{
background:linear-gradient(168deg,#EEDCBB 0%,#F6EBD6 46%,#FDFAF4 100%) !important;
}
.nv-card:hover{
transform:translateY(-3px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--g-el2) !important;
}
/* El rótulo de género en su color, sin punto */
.nv-g{display:inline !important;font-weight:700 !important;letter-spacing:.14em !important}
/* ═══════════════════════════════════════════════════════════════════════
NOVEDADES · el sello NUEVO
Pestaña anclada al vértice superior izquierdo: su esquina externa copia
el radio de la tarjeta y la interna se redondea, así se lee como parte
del propio material y no como una pastilla apoyada encima.
Va en ESPRESSO, no en dorado, por dos razones:
· contrasta contra los degradados claros de las tarjetas, así que se
ve antes sin necesidad de ser más grande;
· al ser el color de la marca, hermana las 29 tarjetas bajo un mismo
sello aunque cada una esté teñida de su familia. En dorado competía
con el rosa y el azul, y sobre las unisex se confundía —oro sobre
oro—. Probado y descartado.
Y deja el dorado libre para el hover: así el oro señala interacción en
vez de estar siempre encendido (presupuesto de color).
═══════════════════════════════════════════════════════════════════════ */
.nv-card{position:relative;overflow:hidden}
.nv-tag{
position:absolute !important;top:0 !important;left:0 !important;z-index:2;
font-size:8px !important;font-weight:700 !important;letter-spacing:.22em !important;
padding:6px 13px 6px 14px !important;
border-radius:var(--r-md) 0 12px 0 !important;
color:#F4EFE6 !important;
background:linear-gradient(160deg,rgba(45,38,30,.92),rgba(26,21,17,.88)) !important;
-webkit-backdrop-filter:blur(12px) saturate(1.3);
backdrop-filter:blur(12px) saturate(1.3);
border:none !important;
border-right:1px solid rgba(242,238,232,.14) !important;
border-bottom:1px solid rgba(242,238,232,.14) !important;
box-shadow:
inset 0 1px 0 rgba(242,238,232,.22),
0 2px 6px -2px rgba(18,15,12,.35) !important;
transition:background .3s var(--g-ease), box-shadow .3s var(--g-ease) !important;
}
.nv-card:hover .nv-tag{
background:linear-gradient(160deg,rgba(122,86,24,.95),rgba(154,110,46,.92)) !important;
color:#FFF6E4 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 3px 10px -3px rgba(154,110,46,.45) !important;
}
/* Al salir del flujo, el rótulo de género se queda solo en su fila */
.nv-top{justify-content:flex-end !important;min-height:22px}
@media (prefers-reduced-transparency:reduce){
.nv-tag{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
background:#241E18 !important}
}
@media (prefers-reduced-motion:reduce){.nv-tag{transition:none !important}}
/* ═══════════════════════════════════════════════════════════════════════
MODAL DE FRAGANCIA — de formulario a ficha
Lo que estaba mal: cinco rótulos en versalitas del MISMO tamaño y peso
—incluido el que va sobre el nombre— convertían la ficha en un
formulario. Y el modal no tenía relación con la tarjeta que lo abrió.
Corrección:
· el modal hereda el degradado de la familia, así el objeto que
tocaste es el que se abre;
· los rótulos bajan de peso y los valores suben: el ojo lee datos,
no etiquetas;
· el epígrafe superior deja de repetir el estilo de los rótulos y
nombra la familia.
═══════════════════════════════════════════════════════════════════════ */
/* Continuidad: el degradado de la tarjeta entra en el modal */
#prod-modal[data-genero="Dama"] .pm-card{
background:linear-gradient(172deg,#F7E3E9 0%,#FCF4F6 34%,rgba(253,250,250,.94) 100%) !important;
}
#prod-modal[data-genero="Caballero"] .pm-card{
background:linear-gradient(172deg,#E1EAF3 0%,#F2F6FA 34%,rgba(250,252,253,.94) 100%) !important;
}
#prod-modal[data-genero="Unisex"] .pm-card{
background:linear-gradient(172deg,#F5E9D2 0%,#FBF4E7 34%,rgba(254,252,248,.94) 100%) !important;
}
/* El epígrafe nombra la familia y toma su color: deja de ser un rótulo más */
.pm-eyebrow{
font-size:10.5px !important;font-weight:700 !important;letter-spacing:.2em !important;
}
#prod-modal[data-genero="Dama"] .pm-eyebrow{color:var(--c-dama) !important}
#prod-modal[data-genero="Caballero"] .pm-eyebrow{color:var(--c-cab) !important}
#prod-modal[data-genero="Unisex"] .pm-eyebrow{color:var(--oro-ink) !important}
/* Los rótulos se apagan, los valores mandan */
.pm-lbl{
font-size:10px !important;font-weight:600 !important;letter-spacing:.12em !important;
color:var(--ink-4) !important;opacity:.85;
}
.pm-val{font-size:15px !important;font-weight:600 !important;color:var(--ink-1) !important}
.pm-row{border-top-color:rgba(33,28,22,.06) !important;padding:14px 0 !important}
.pm-title{margin-bottom:18px !important}
/* Las notas, sobre el degradado, necesitan más cuerpo para leerse */
.pm-note{
background:rgba(255,255,255,.72) !important;
border-color:rgba(255,255,255,.9) !important;
}
@media (prefers-reduced-transparency:reduce){
#prod-modal[data-genero] .pm-card{background:#FCFAF6 !important}
}
/* ═══════════════════════════════════════════════════════════════════════
MENÚS DESPLEGABLES — la superficie funcional que faltaba
Era un rectángulo blanco de esquina viva, sin radio ni material, muy
ancho y con las filas a ras. Un desplegable flota sobre el contenido:
es capa funcional pura, el sitio donde el vidrio corresponde sin
discusión. Y acá el desenfoque se nota, porque debajo pasa el hero.
═══════════════════════════════════════════════════════════════════════ */
.nav-drop-menu{
top:calc(100% + 10px) !important;
padding:7px !important;
border-radius:20px !important;
/* Mas cuerpo y mas desenfoque: a .82 con blur(30) el titular del hero
se colaba por detras y chocaba con los rotulos del menu. El vidrio
tiene que dejar VER el fondo, no dejarlo LEER. */
background:rgba(250,247,242,.93) !important;
-webkit-backdrop-filter:blur(44px) saturate(1.5);
backdrop-filter:blur(44px) saturate(1.5);
border:1px solid rgba(255,255,255,.7) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
0 2px 8px rgba(33,28,22,.07),
0 26px 56px -22px rgba(33,28,22,.30) !important;
transition:opacity .28s var(--g-ease), transform .28s var(--g-ease) !important;
}
/* Nace desde el botón que lo invocó en vez de aparecer de golpe */
.nav-drop-menu{transform:translateX(-50%) translateY(-6px) scale(.97) !important}
.nav-drop-menu.open{transform:translateX(-50%) translateY(0) scale(1) !important}
/* Filas como celdas con su propio radio: el cursor cae sobre una pieza,
no sobre una franja de borde a borde. */
.nav-drop-menu a{
border-radius:13px !important;
padding:11px 13px !important;
transition:background .22s var(--g-ease) !important;
}
.nav-drop-menu a:hover{background:rgba(33,28,22,.055) !important}
.nav-drop-menu a:hover .dd-name{color:var(--oro-ink) !important}
.nav-drop-menu a.on .dd-name{color:var(--oro-ink) !important}
.nav-drop-menu .dd-name{font-size:13.5px !important;color:var(--ink-1) !important}
.nav-drop-menu .dd-count{
font-size:10px !important;letter-spacing:.12em !important;
color:var(--ink-4) !important;margin-top:4px !important;
}
/* Las guías son una lista larga: se le pone techo y medida legible */
.nav-drop-menu .dd-name{
overflow:hidden;-webkit-box-orient:vertical;white-space:normal;
}
@media (prefers-reduced-transparency:reduce){
.nav-drop-menu{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
background:var(--bg) !important}
}
@media (prefers-reduced-motion:reduce){
.nav-drop-menu,.nav-drop-menu a{transition:none !important}
.nav-drop-menu{transform:translateX(-50%) !important}
}
/* ── Ancho del desplegable ──
Un absoluto se encoge al ancho de su contenedor, que es el
del
botón: por eso el de Guías —con títulos largos— quedaba angosto y
partía cada título en dos renglones, mientras el de Fragancias, con
rótulos cortos, se veía cómodo. Con width:max-content el panel se
dimensiona por su contenido, hasta un tope legible. */
.nav-drop-menu{
width:max-content !important;
max-width:min(400px,92vw) !important;
min-width:240px !important;
}
/* Sin recorte: un título cortado con puntos suspensivos no ayuda a elegir */
.nav-drop-menu .dd-name{
-webkit-line-clamp:none !important;display:block !important;
text-overflow:clip !important;line-height:1.35 !important;
}
/* El panel no se sale de la pantalla al estar cerca del borde derecho */
.nl > li:nth-last-child(-n+3) .nav-drop-menu{
left:auto !important;right:0 !important;transform:translateY(-6px) scale(.97) !important;
}
.nl > li:nth-last-child(-n+3) .nav-drop-menu.open{
transform:translateY(0) scale(1) !important;
}
/* ── El desplegable también responde con el color de la familia ──
Misma lógica que en las tarjetas: el tono aparece cuando el cursor se
detiene. Así el código de color es uno solo en toda la página — lo
aprendés en el menú y te sirve en el catálogo y en las novedades. */
.nav-drop-menu a[href="dama"]:hover{background:rgba(168,106,122,.11) !important}
.nav-drop-menu a[href="dama"]:hover .dd-name{color:var(--c-dama) !important}
.nav-drop-menu a[href="dama"]:hover .dd-count{color:rgba(142,79,98,.72) !important}
.nav-drop-menu a[href="caballero"]:hover{background:rgba(90,106,124,.11) !important}
.nav-drop-menu a[href="caballero"]:hover .dd-name{color:var(--c-cab) !important}
.nav-drop-menu a[href="caballero"]:hover .dd-count{color:rgba(74,90,107,.72) !important}
.nav-drop-menu a[href="ambientales"]:hover{background:rgba(94,132,104,.11) !important}
.nav-drop-menu a[href="ambientales"]:hover .dd-name{color:var(--c-amb) !important}
.nav-drop-menu a[href="ambientales"]:hover .dd-count{color:rgba(63,107,76,.72) !important}
.nav-drop-menu a[href="envases"]:hover{background:rgba(196,145,62,.11) !important}
.nav-drop-menu a[href="envases"]:hover .dd-name{color:var(--oro-ink) !important}
/* Las guías no son familias olfativas: conservan el realce neutro */
/* ═══════════════════════════════════════════════════════════════════════
HERO — composición centrada
Estaba alineado a la izquierda con la mitad derecha vacía: el CSS
todavía reserva una columna .h-right que el marcado ya no usa. Rellenar
ese hueco se intentó dos veces (panel espresso, frascos) y no funcionó.
La salida correcta no es rellenarlo, es eliminarlo: una declaración
centrada, simétrica, con la medida del párrafo controlada. Es lo que
hace Apple cuando el protagonista es la frase y no un producto.
═══════════════════════════════════════════════════════════════════════ */
#hero{align-items:center !important}
.h-left{
max-width:940px !important;
align-items:center !important;text-align:center !important;
padding:clamp(56px,7vw,96px) clamp(20px,4vw,52px) clamp(48px,6vw,80px) !important;
}
.h-sub{max-width:620px !important;margin-left:auto !important;margin-right:auto !important}
.h-btns{justify-content:center !important}
/* El epígrafe centrado lleva filete a los dos lados */
.h-eyebrow{justify-content:center !important}
.h-eyebrow::after{
content:'';width:28px;height:1px;background:var(--ink-4);
display:inline-block;margin-left:12px;vertical-align:middle;
}
/* Las cifras se reparten en la anchura completa, con filetes entre ellas */
.h-stats{max-width:820px;margin-left:auto !important;margin-right:auto !important;width:100%}
.h-stat{text-align:center;padding:0 !important;border-right:1px solid var(--rule)}
.h-stat:last-child{border-right:none}
@media(max-width:760px){
.h-left{text-align:left !important;align-items:flex-start !important}
.h-btns{justify-content:flex-start !important}
.h-eyebrow{justify-content:flex-start !important}
.h-eyebrow::after{display:none}
.h-sub{margin-left:0 !important}
.h-stat{text-align:left}
}
/* ── Los botones del hero, cuando no caben ──
Al centrar el hero, en anchos medios los dos botones se partían en dos
filas con anchos distintos: parecía un salto de línea accidental, no
una decisión. Si van a apilarse, que lo hagan a propósito — mismo ancho,
centrados y con el mismo aire entre ellos. */
@media(max-width:980px){
.h-btns{flex-direction:column;align-items:center;gap:10px !important}
.h-btns .btn{width:min(340px,100%);justify-content:center}
}
/* En telefono el hero va alineado a la izquierda: los botones tambien */
@media(max-width:760px){
.h-btns{align-items:stretch}
.h-btns .btn{width:100%;max-width:340px}
}
/* Un poco más de holgura para que aguanten en una fila hasta 980 px */
@media(max-width:1100px) and (min-width:981px){
.h-btns .btn{padding:13px 20px !important;font-size:11px !important}
}
/* ═══════════════════════════════════════════════════════════════════════
MENÚ MÓVIL — rediseño
Lo que estaba mal: cuatro colores distintos entre los enlaces (crema,
verde escrito a mano, dorado, y el activo), guiones «—» haciendo de
viñeta, los títulos a 30 px con las cifras metidas entre paréntesis en
el mismo renglón, y la cabecera flotando sobre una banda más clara que
no pertenecía al panel.
═══════════════════════════════════════════════════════════════════════ */
#mob{
gap:0 !important;
}
/* Un solo color para todos; el activo se marca con el filete dorado */
.mob-link{
display:flex !important;align-items:center;justify-content:space-between;
transition:color .25s var(--g-ease), padding-left .35s var(--g-ease) !important;
}
.mob-link:hover,.mob-link:active{color:#FFF !important;padding-left:6px !important}
/* Las familias: nombre a la izquierda, conteo a la derecha en su color.
Los guiones de viñeta se van; la sangría ya indica que dependen. */
.mob-sub{
display:flex !important;align-items:baseline;justify-content:space-between;gap:14px;font-weight:500 !important;
border-left:2px solid transparent !important;
transition:color .25s var(--g-ease), border-color .25s var(--g-ease),
padding-left .3s var(--g-ease) !important;
}
.mob-sub em{
font-style:normal;font-weight:600;
text-transform:uppercase;color:rgba(242,238,232,.40);flex-shrink:0;
}
/* El color de cada linea iba SOLO en :hover, y en un telefono no existe
el hover: las tres entradas se veian iguales. El filete de color va
siempre; el hover (o el toque) es lo que ademas tiñe el texto. */
.mob-sub[data-fam="dama"]{border-left-color:rgba(232,169,188,.75) !important}
.mob-sub[data-fam="cab"]{border-left-color:rgba(169,194,218,.75) !important}
.mob-sub[data-fam="amb"]{border-left-color:rgba(163,207,174,.75) !important}
.mob-sub[data-fam="dama"] em{color:rgba(232,169,188,.72) !important}
.mob-sub[data-fam="cab"] em{color:rgba(169,194,218,.72) !important}
.mob-sub[data-fam="amb"] em{color:rgba(163,207,174,.72) !important}
/* La pagina en la que estas, ya teñida */
.mob-sub[data-fam="dama"].on{color:#E8A9BC !important;border-left-color:#E8A9BC !important}
.mob-sub[data-fam="cab"].on{color:#A9C2DA !important;border-left-color:#A9C2DA !important}
.mob-sub[data-fam="amb"].on{color:#A3CFAE !important;border-left-color:#A3CFAE !important}
.mob-sub:active{padding-left:22px !important}
.mob-sub[data-fam="dama"]:active{color:#E8A9BC !important}
.mob-sub[data-fam="cab"]:active{color:#A9C2DA !important}
.mob-sub[data-fam="amb"]:active{color:#A3CFAE !important}
@media(hover:hover){
.mob-sub[data-fam="dama"]:hover{color:#E8A9BC !important;border-left-color:#E8A9BC !important}
.mob-sub[data-fam="cab"]:hover{color:#A9C2DA !important;border-left-color:#A9C2DA !important}
.mob-sub[data-fam="amb"]:hover{color:#A3CFAE !important;border-left-color:#A3CFAE !important}
.mob-sub:hover{padding-left:22px !important}
}
.mob-cta{padding-top:32px !important;
border-top:1px solid rgba(242,238,232,.10) !important;
}
/* ── La cabecera, con el menú abierto ──
Lo que se veía como una banda gris lavada NO era del panel: es la barra
de navegación de verdad, que es crema translúcida y tiene mayor z-index,
así que quedaba encima del menú oscuro y los dos se mezclaban en barro.
Con el menú abierto, la barra se pasa al material oscuro y la tinta a
crema, para que cabecera y panel sean una sola pieza. */
#mob::before{display:none}
body:has(#mob.op) .logo-n{color:#F2EEE8 !important}
body:has(#mob.op) .logo-s{color:var(--gold-2) !important}
body:has(#mob.op) .hbg span{background:#F2EEE8 !important}
body:has(#mob.op) #annbar{opacity:0;pointer-events:none;transition:opacity .25s var(--g-ease)}
/* ── Aire entre la marca y el menú ──
.ni reparte con space-between, así que al crecer el menú la primera
pastilla terminaba tocando el nombre de la marca: se leían como una
sola cosa. Se le exige una separación mínima y la marca deja de
encogerse. */
.ni{gap:clamp(20px,3vw,48px) !important}
.logo{flex-shrink:0 !important;margin-right:8px}
.nl{flex:0 1 auto;min-width:0}
.nwa{flex-shrink:0}
/* ── El titular respira ──
Estaba a line-height:.93, o sea MENOS que el cuerpo de la letra: a ese
valor los rasgos descendentes invaden el renglón siguiente y la "p" de
Inspiradas se monta sobre la "d" de Alta. En tipografía de display se
puede apretar, pero el piso es el que deja pasar la "p" y la "g". */
.h-title{line-height:1.13 !important}
@media(max-width:760px){.h-title{line-height:1.14 !important}}
/* ── Sin flechas en los botones ──
Apple no las usa: un botón ya se ve pulsable por su forma, y la flecha
le agrega ruido y desbalancea el centrado del rótulo. Se quitan de los
botones; los enlaces de texto sí la conservan, porque ahí la flecha es
la que indica que llevan a otro sitio. */
.btn.arr::after{content:none !important;display:none !important}
.btn.arr{gap:0 !important}
/* ── La columna del botón en la banda de la tienda ──
Botón y nota estaban alineados al inicio, pero la nota es más ancha que
el botón, así que se leían descuadrados. Se centran entre sí: la nota
pertenece al botón, no al bloque. */
.banda-tienda-slab .c > div:last-child{
align-items:center !important;text-align:center;
}
/* ── "Ver" como pestaña de esquina ──
Mismo recurso que el sello NUEVO de las novedades, pero en el vértice
opuesto: se apoya en la esquina inferior derecha, su ángulo externo
copia el radio de la tarjeta y el interno se redondea. Deja de flotar
suelto sobre el pie y pasa a ser parte del material.
En espresso, con el dorado reservado para el hover. */
.cat-grid > a span[style*="letter-spacing:.14em"]{
position:absolute !important;right:0 !important;bottom:0 !important;
left:auto !important;top:auto !important;z-index:3;font-weight:700 !important;
background:linear-gradient(200deg,rgba(45,38,30,.94),rgba(26,21,17,.90)) !important;
-webkit-backdrop-filter:blur(12px) saturate(1.3);
backdrop-filter:blur(12px) saturate(1.3);
border-left:1px solid rgba(242,238,232,.14) !important;
border-top:1px solid rgba(242,238,232,.14) !important;
box-shadow:inset 0 1px 0 rgba(242,238,232,.18), -2px -2px 8px -3px rgba(18,15,12,.3) !important;
transition:background .3s var(--g-ease), padding .3s var(--g-ease) !important;
white-space:nowrap !important;
}
.cat-grid > a:hover span[style*="letter-spacing:.14em"]{
background:linear-gradient(200deg,rgba(122,86,24,.96),rgba(154,110,46,.92)) !important;
}
/* El pie deja sitio a la pestaña para que las etiquetas no pasen por debajo */
@media(max-width:760px){
.cat-grid > a span[style*="letter-spacing:.14em"]{position:absolute !important}
}
/* ── Etiquetas de familia: más grandes y en blanco ──
En cristal translúcido con tinta de color se leían apagadas y quedaban
diminutas. Pasan a cápsula rellena con el color de la familia y texto
blanco: más peso, más tamaño y contraste de sobra (entre 6,7 y 7,6:1
sobre cada tono). El vidrio se conserva en el degradado y el filo. */
.cat-grid > a span[style*="padding:4px 10px"]{
font-size:11.5px !important;font-weight:600 !important;
letter-spacing:.02em !important;
padding:7px 15px !important;
color:#FFFFFF !important;
border:none !important;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.24),
inset 0 -1px 0 rgba(0,0,0,.12),
0 2px 6px -2px rgba(33,28,22,.28) !important;
transition:transform .25s var(--g-ease), box-shadow .25s var(--g-ease) !important;
}
.cat-grid > a[href="dama"] span[style*="padding:4px 10px"]{
background:linear-gradient(160deg,#9E5B70,#8E4F62) !important;
}
.cat-grid > a[href="caballero"] span[style*="padding:4px 10px"]{
background:linear-gradient(160deg,#586A7C,#4A5A6B) !important;
}
.cat-grid > a[href="ambientales"] span[style*="padding:4px 10px"]{
background:linear-gradient(160deg,#4A7C59,#3F6B4C) !important;
}
.cat-grid > a:hover span[style*="padding:4px 10px"]{
transform:translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.32),
inset 0 -1px 0 rgba(0,0,0,.12),
0 4px 10px -3px rgba(33,28,22,.34) !important;
}
/* Al crecer necesitan un poco más de sitio en el pie */
.cat-grid > a > div:last-child{min-height:96px !important}
@media (prefers-reduced-motion:reduce){
.cat-grid > a span[style*="padding:4px 10px"]{transition:none !important}
.cat-grid > a:hover span[style*="padding:4px 10px"]{transform:none !important}
}
/* Las reglas por familia de más arriba fijaban la tinta en su propio color
y le ganaban en especificidad al blanco genérico. Se igualan. */
.cat-grid > a[href="dama"] span[style*="padding:4px 10px"],
.cat-grid > a[href="caballero"] span[style*="padding:4px 10px"],
.cat-grid > a[href="ambientales"] span[style*="padding:4px 10px"],
.cat-grid > a[href="dama"]:hover span[style*="padding:4px 10px"],
.cat-grid > a[href="caballero"]:hover span[style*="padding:4px 10px"],
.cat-grid > a[href="ambientales"]:hover span[style*="padding:4px 10px"]{
color:#FFFFFF !important;
}
/* ── La pestaña "Ver", más grande y en blanco puro ── */
.cat-grid > a span[style*="letter-spacing:.14em"]{
font-size:11px !important;letter-spacing:.16em !important;
padding:12px 20px 12px 19px !important;
color:#FFFFFF !important;
border-radius:16px 0 var(--r-lg) 0 !important;
}
.cat-grid > a:hover span[style*="letter-spacing:.14em"]{
color:#FFFFFF !important;padding-right:25px !important;
}
.cat-grid > a > div:last-child{padding-right:112px !important}
@media(max-width:760px){
.cat-grid > a > div:last-child{padding-right:96px !important}
}
/* La pestaña "Ver" es un botón de esquina, no un enlace: sin flecha y en
blanco puro, igual que los demás botones del sitio. */
.cat-grid > a span[style*="letter-spacing:.14em"],
.cat-grid > a:hover span[style*="letter-spacing:.14em"],
.cat-grid > a[href="dama"] span[style*="letter-spacing:.14em"],
.cat-grid > a[href="caballero"] span[style*="letter-spacing:.14em"],
.cat-grid > a[href="ambientales"] span[style*="letter-spacing:.14em"]{
color:#FFFFFF !important;
}
/* ═══════════════════════════════════════════════════════════════════════
«CALIDAD TOTAL» — las dos columnas se equilibran
Medido: la columna de texto medía 496 px y la de cifras 292, así que la
rejilla de números flotaba arriba con un vacío de 200 px debajo. Y
dentro de cada celda el contenido se apoyaba en el borde superior, con
otro hueco abajo. Dos vacíos superpuestos.
═══════════════════════════════════════════════════════════════════════ */
.about-row{align-items:stretch !important}
/* OJO: el ultimo hijo de .about-row ES .about-nums, que es una REJILLA.
Ponerle display:flex apilaba las cuatro celdas en una columna. Se le
deja su grid y solo se le pide que ocupe el alto disponible. */
.about-nums{
display:grid !important;
height:100% !important;
grid-auto-rows:1fr !important;
align-content:stretch !important;
}
/* El dato se centra en su celda en vez de colgar del borde superior */
.about-nums > *{
display:flex !important;flex-direction:column;justify-content:center;
padding:28px 26px !important;
}
/* El aviso legal: era tinta oscura sobre un dorado muy pálido — 1,24:1,
prácticamente invisible. Se le da fondo con cuerpo y tinta legible. */
/* El aviso legal deja de ser una cita con filete y pasa a ser lo que es:
una nota al pie. Fondo neutro apenas insinuado, esquinas completas y
tinta apagada. Que esté, que se pueda leer, y que no reclame atención. */
/* ═══════════════════════════════════════════════════════════════════════
MODAL DE LA TIENDA — rediseño
Lo que estaba mal:
· la cabecera oscura ocupaba un tercio del modal para mostrar un logo
que ya lleva su propio fondo oscuro: negro sobre negro;
· decía «600 referencias» cuando el resto de la página dice +650;
· el botón traía flecha, que ya quitamos del resto del sitio;
· la lista y el cierre competían en peso con la acción principal.
═══════════════════════════════════════════════════════════════════════ */
/* La cabecera conserva el café y el logo —es la firma de la marca y lo
primero que se ve—, pero más contenida: antes se comía un tercio del
modal. Se le suma el halo cálido detrás del logo para que el espresso
no sea un rectángulo plano. */
.ee-tm-hero{
padding:30px 0 26px !important;
background:linear-gradient(165deg,#2E261D 0%,#15110C 100%) !important;
border-radius:var(--r-lg) var(--r-lg) 0 0 !important;
overflow:hidden;
}
.ee-tm-hero::before{
display:block !important;
width:260px !important;height:260px !important;
background:radial-gradient(circle,rgba(196,145,62,.30),transparent 66%) !important;
}
.ee-tm-hero img{
width:92px !important;height:92px !important;
filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
.ee-tm-box{padding-bottom:8px;overflow:hidden}
.ee-tm-body{padding:22px 30px 28px !important}
/* Jerarquía: el precio manda, el lema acompaña */
.ee-tm-body h3{font-size:25px !important;line-height:1.22 !important;letter-spacing:-.03em !important}
.ee-tm-body h3 em{color:var(--oro-ink) !important;font-style:normal;font-weight:800}
.ee-tm-lema{font-size:13px !important;color:var(--ink-3) !important;margin-top:8px !important}
.ee-tm-lema b{color:var(--oro-ink) !important;font-weight:600}
/* La lista: filas de datos, no de adornos */
.ee-tm-ul li{
gap:12px !important;padding:9px 0 !important;
font-size:13.5px !important;color:var(--ink-2) !important;line-height:1.5;
}
.ee-tm-ul li b{color:var(--ink-1) !important;font-weight:700}
.ee-tm-ul svg{
width:17px !important;height:17px !important;flex-shrink:0;
stroke:var(--oro-ink) !important;opacity:.9;
}
/* La acción, con el filo especular del sistema */
.ee-tm-go{
border-radius:100px !important;padding:15px 26px !important;
font-size:12.5px !important;letter-spacing:.04em !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.16),
inset 0 -1px 0 rgba(0,0,0,.20),
0 12px 28px -14px rgba(33,28,22,.55) !important;
transition:transform .18s var(--g-ease), background .25s var(--g-ease) !important;
}
.ee-tm-go:active{transform:scale(.98) !important}
/* La salida es secundaria: que no compita con la acción */
.ee-tm-no{
font-size:12.5px !important;color:var(--ink-3) !important;
margin-top:14px !important;text-decoration:underline;
text-underline-offset:3px;text-decoration-color:rgba(33,28,22,.2);
transition:color .2s var(--g-ease) !important;
}
.ee-tm-no:hover{color:var(--ink-1) !important}
/* ── El menú no se desborda sobre el botón ──
Medido a 1520 px: la lista pedía 894 px de ancho y solo disponía de
792, así que se salía de su caja y "Contacto" quedaba 57 px por debajo
del botón COTIZAR. Ocho entradas con separación de 28 px no caben ni en
pantallas grandes. Se aprieta el espaciado y se le pone un tope duro
para que, si algún día se agrega otra entrada, el menú se recorte antes
de pisar el botón. */
.nl{
gap:clamp(4px,.7vw,14px) !important;
/* NADA de overflow:hidden aqui: los desplegables son absolutos dentro
de sus
y quedaban recortados, o sea que dejaban de verse. El
desbordamiento se controla apretando el espaciado, no cortando. */
min-width:0;
}
.nl a,.nav-drop-toggle{padding:8px 8px !important}
@media(min-width:1400px){
.nl a,.nav-drop-toggle{padding:8px 10px !important;font-size:12.5px !important}
}
/* ── La barra va a ancho completo ──
Usaba el contenedor de 1320 px del contenido, así que en una pantalla
de 1520 el logo quedaba a 100 px del borde —hundido— y al menú le
faltaba sitio. Una barra de navegación pertenece a la ventana, no a la
columna de texto: se extiende de lado a lado con una sangría propia.
De paso le da al menú 200 px más de aire y desaparece el atropello. */
.ni{
max-width:none !important;
padding:0 clamp(18px,2.6vw,48px) !important;
}
#annbar > *{max-width:none !important}
/* ═══════════════════════════════════════════════════════════════════════
FRANJA DE ANUNCIO — rediseño
Estaba toda en versalitas con .14em de tracking, o sea el mensaje entero
GRITANDO, y la etiqueta era una píldora de contorno hueco. Un anuncio no
necesita gritar: necesita distinguirse de la navegación y leerse rápido.
· la etiqueta pasa a sello relleno —dorado sólido, tinta espresso—,
que es lo que de verdad llama la atención en una franja oscura;
· el mensaje baja a caja normal y peso medio: se lee de un vistazo
en vez de descifrarse letra por letra;
· la flecha se vuelve un cheurón fino que avanza al pasar el cursor.
═══════════════════════════════════════════════════════════════════════ */
#annbar a{
gap:12px !important;
font-size:12.5px !important;font-weight:500 !important;
letter-spacing:.005em !important;
text-transform:none !important;
color:rgba(242,238,232,.80) !important;
padding:4px 10px;border-radius:100px;
transition:color .25s var(--g-ease), background .25s var(--g-ease) !important;
}
#annbar a:hover{
color:#FFF8EC !important;background:rgba(242,238,232,.06) !important;
}
#annbar .ab-tag{
background:linear-gradient(160deg,var(--gold-2),var(--gold)) !important;
border:none !important;
color:#1A1511 !important;
font-size:9px !important;font-weight:800 !important;letter-spacing:.16em !important;
text-transform:uppercase !important;
padding:4px 10px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px -2px rgba(196,145,62,.45) !important;
}
#annbar .ab-long{color:rgba(242,238,232,.62) !important}
#annbar a:hover .ab-long{color:rgba(242,238,232,.80) !important}
#annbar .ab-arr{
font-size:15px !important;color:var(--gold-2) !important;
transition:transform .3s var(--g-ease) !important;
}
#annbar a:hover .ab-arr{transform:translateX(4px) !important}
@media (prefers-reduced-motion:reduce){
#annbar a,#annbar .ab-arr{transition:none !important}
#annbar a:hover .ab-arr{transform:none !important}
}
/* En vez de una flecha, la franja cierra con la acción escrita: una
flecha obliga a deducir qué pasa; un verbo lo dice. Va subrayada en
dorado para leerse como enlace sin necesidad de una caja más. */
#annbar .ab-arr{
font-size:12px !important;font-weight:700 !important;letter-spacing:.02em !important;
color:var(--gold-2) !important;
border-bottom:1px solid rgba(217,169,78,.45);
padding-bottom:1px;
transition:color .25s var(--g-ease), border-color .25s var(--g-ease) !important;
transform:none !important;
}
#annbar a:hover .ab-arr{
color:#F3C97A !important;border-bottom-color:#F3C97A !important;transform:none !important;
}
/* "Comprar ahora" es la accion de la franja: se queda siempre. Antes se
escondia por debajo de 600 px, o sea en todos los telefonos. */
@media(max-width:600px){
#annbar .ab-arr{display:inline !important}
}
/* ═══════════════════════════════════════════════════════════════════════
«CALIDAD TOTAL» — jerarquía dentro del texto
Los dos párrafos tenían el mismo tamaño, el mismo peso y el mismo tono,
así que el bloque se leía como un muro: nada indica por dónde empezar.
El primero carga el argumento —alta concentración, superior a un eau de
parfum— y el segundo es operativo. Se les da peso distinto.
═══════════════════════════════════════════════════════════════════════ */
.about-txt h2{margin-bottom:22px !important}
.about-txt p{max-width:58ch !important}
/* Entradilla: el argumento de venta, más grande y más oscuro */
.about-txt p:first-of-type{
font-size:17px !important;font-weight:400 !important;
line-height:1.65 !important;color:var(--ink-2) !important;
margin-bottom:16px !important;
}
/* Sin filete lateral: el tamaño y el tono ya establecen la jerarquía.
Una línea de color al margen es lenguaje de cita o de aviso, y este
párrafo no es ninguna de las dos cosas. */
/* Párrafo operativo: acompaña, no compite */
.about-txt p:nth-of-type(2){
font-size:14.5px !important;color:var(--ink-3) !important;
line-height:1.75 !important;
}
@media(max-width:760px){
.about-txt p:first-of-type{font-size:15.5px !important}
.about-txt p:nth-of-type(2){font-size:14px !important}
}
/* ══════════════════════════════════════════════════════════════
COMO LO HARÍA APPLE
Dos correcciones del mismo principio: una nota legal no es una
cita, y una lista de razones no son cuatro tarjetas.
══════════════════════════════════════════════════════════════ */
/* ── El aviso legal: nota al pie, no caja ──
Apple pone los descargos al final del bloque, en el cuerpo más
pequeño del sistema y en el tono más apagado. Sin recuadro, sin
filete, sin fondo: la tipografía sola dice "esto es secundario". */
.note-box{
display:block !important;
background:none !important;border:0 !important;border-left:0 !important;
border-radius:0 !important;box-shadow:none !important;
margin:30px 0 0 !important;padding:16px 0 0 !important;
border-top:1px solid rgba(33,28,22,.07) !important;
max-width:52ch !important;
font-size:11.5px !important;font-weight:var(--w-body) !important;
line-height:1.7 !important;letter-spacing:.005em !important;
color:var(--ink-4) !important;
}
.note-box strong{color:var(--ink-3) !important;font-weight:600 !important}
/* ── Las cuatro razones: una lista, no cuatro tarjetas ──
Cuatro cajas iguales en fila no jerarquizan nada; sólo repiten
un borde cuatro veces. Apple resuelve esto con una lista: un
filete finísimo entre elementos, aire generoso y el ordinal
suelto en el margen. El recuadro del número desaparece — era
una caja dentro de una caja dentro de una sección. */
.biz-grid > div:last-child{
background:transparent !important;gap:0 !important;
display:flex !important;flex-direction:column !important;
}
.biz-feat{
background:none !important;box-shadow:none !important;
border:0 !important;border-top:1px solid rgba(33,28,22,.075) !important;
border-radius:0 !important;
padding:26px 4px 26px 0 !important;gap:22px !important;
align-items:baseline !important;
transform:none !important;
transition:opacity .35s var(--g-ease) !important;
}
.biz-feat:first-child{border-top:0 !important;padding-top:4px !important}
.biz-feat:hover{
transform:none !important;background:none !important;
border-color:rgba(33,28,22,.075) !important;box-shadow:none !important;
}
/* El ordinal: cifra suelta, alineada a la mayúscula del título */
.biz-feat .feat-num{
flex:0 0 auto !important;width:26px !important;height:auto !important;
display:block !important;
background:none !important;border:0 !important;border-radius:0 !important;
color:var(--ink-4) !important;
font-size:12px !important;font-weight:var(--w-med) !important;
letter-spacing:.04em !important;line-height:1.5 !important;
font-variant-numeric:tabular-nums;
transition:color .3s var(--g-ease) !important;
}
.biz-feat:hover .feat-num{color:var(--oro-ink) !important}
.biz-feat-t{
font-size:16px !important;font-weight:var(--w-med) !important;
letter-spacing:-.012em !important;line-height:1.35 !important;
color:var(--ink-1) !important;margin-bottom:7px !important;
}
.biz-feat-d{
font-size:13.5px !important;color:var(--ink-3) !important;
line-height:1.72 !important;max-width:46ch !important;
}
@media(max-width:760px){
.biz-feat{padding:22px 0 !important;gap:16px !important}
.biz-feat-t{font-size:15px !important}
}
/* ── Enlace de cierre de la franja de confianza ──
Apple escribe estos enlaces como una frase completa en el color de
acento, con un chevron que se desplaza al pasar el mouse y el
subrayado apareciendo solo en hover. Nada de flechas "→" ni de
texto gris con dos palabras doradas en medio. */
.tr-link{
display:inline-flex !important;align-items:center;gap:5px;
font-size:14px !important;font-weight:var(--w-med) !important;
letter-spacing:-.005em;line-height:1.4;
color:var(--oro-ink) !important;text-decoration:none !important;
transition:color .3s var(--g-ease) !important;
}
.tr-link::after{
content:'\203A';font-size:17px;line-height:1;font-weight:400;
transform:translateY(-1px);
transition:transform .35s var(--g-ease);
}
.tr-link:hover{color:#5F420F !important}
.tr-link:hover span,.tr-link:hover{text-decoration:none !important}
.tr-link:hover::after{transform:translate(3px,-1px)}
.tr-link:focus-visible{outline:2px solid var(--oro-ink);outline-offset:4px;border-radius:4px}
@media(hover:hover){
.tr-link:hover{text-decoration:underline !important;text-underline-offset:4px;
text-decoration-thickness:1px;text-decoration-color:rgba(122,86,24,.4) !important}
}
@media(prefers-reduced-motion:reduce){.tr-link::after{transition:none}}
/* ── Novedades en movil: 3 filas y un enlace ──
29 tarjetas en dos columnas son 15 filas de scroll. Se muestran las
3 primeras filas y el resto se despliega a peticion.
El control no es una pastilla con borde: es un enlace de texto en el
color de acento con un chevron que gira, como el "Cargar mas" de
Apple Newsroom. La frase entera va del mismo color — una cifra
dorada en mitad de un texto gris parte el enlace en dos. */
.nv-mas{
display:none;margin:26px auto 0;
min-height:44px;padding:10px 14px;
background:none !important;border:0 !important;border-radius:0 !important;
font:inherit;font-size:15px;font-weight:var(--w-med);
letter-spacing:-.01em;line-height:1.2;
color:var(--oro-ink);cursor:pointer;
align-items:center;justify-content:center;
transition:color .3s var(--g-ease);
}
.nv-mas .nv-mas-t{color:inherit}
.nv-mas::after{
content:'';width:7px;height:7px;flex:0 0 auto;margin-left:9px;
border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
transform:translateY(-2px) rotate(45deg);
transition:transform .4s var(--g-ease);
}
.nv-grid.nv-todas ~ .nv-mas::after{transform:translateY(1px) rotate(225deg)}
.nv-mas:active{color:#5F420F}
.nv-mas:focus-visible{outline:2px solid var(--oro-ink);outline-offset:4px;border-radius:6px}
@media(max-width:900px){
.nv-mas{display:flex}
.nv-grid:not(.nv-todas) > .nv-card:nth-child(n+7){display:none}
}
@media(hover:hover){
.nv-mas:hover{color:#5F420F;text-decoration:underline;text-underline-offset:5px;
text-decoration-thickness:1px;text-decoration-color:rgba(122,86,24,.35)}
}
@media(prefers-reduced-motion:reduce){.nv-mas::after{transition:none}}
/* ══════════════════════════════════════════════════════════════
PREGUNTAS FRECUENTES — lista, no cinco cajas grises
Las preguntas estaban dentro de rectangulos rellenos, sin ninguna
señal de que se abrieran: parecian botones desactivados. Y nada
indicaba jerarquia entre una y otra.
Apple resuelve una FAQ con una lista: filete finisimo entre filas,
la pregunta en cuerpo de lectura, un chevron a la derecha que gira
al abrir, y la respuesta apareciendo debajo. Sin caja, sin relleno,
sin sombra.
══════════════════════════════════════════════════════════════ */
section:not([class]) .c[style*="max-width:820px"]{max-width:1040px !important}
/* El contenedor traia gap:2px sobre un fondo gris para fingir filetes */
div:has(> .faq-it){
background:none !important;gap:0 !important;
border-top:1px solid rgba(33,28,22,.11) !important;
}
.faq-it{
background:none !important;box-shadow:none !important;
border:0 !important;border-bottom:1px solid rgba(33,28,22,.11) !important;
border-radius:0 !important;padding:0 !important;
}
.faq-it[open]{box-shadow:none !important;background:none !important}
.faq-it > summary{
display:flex !important;align-items:flex-start;justify-content:space-between;
gap:28px;padding:24px 2px 24px 0 !important;
font-size:17px !important;font-weight:var(--w-med) !important;
letter-spacing:-.015em !important;line-height:1.4 !important;
color:var(--ink-1) !important;
list-style:none;cursor:pointer;
transition:color .25s var(--g-ease) !important;
}
.faq-it > summary::-webkit-details-marker{display:none}
.faq-it > summary::marker{content:''}
/* Chevron: gira 180 grados al abrir */
.faq-it > summary::after{
content:'';flex:0 0 auto;width:9px;height:9px;margin-top:7px;
border-right:1.7px solid var(--ink-3);border-bottom:1.7px solid var(--ink-3);
transform:rotate(45deg);transform-origin:60% 60%;
transition:transform .42s var(--g-ease), border-color .25s var(--g-ease);
}
.faq-it[open] > summary{color:var(--oro-ink) !important}
.faq-it[open] > summary::after{transform:rotate(225deg);border-color:var(--oro-ink)}
.faq-it > summary:focus-visible{outline:2px solid var(--oro-ink);outline-offset:3px;border-radius:4px}
.faq-it > p{
font-size:15px !important;font-weight:var(--w-body) !important;
color:var(--ink-3) !important;line-height:1.75 !important;
margin:-4px 0 26px !important;max-width:64ch !important;padding-right:40px;
}
@media(hover:hover){
.faq-it > summary:hover{color:var(--oro-ink) !important}
.faq-it > summary:hover::after{border-color:var(--oro-ink)}
}
@media(max-width:760px){
.faq-it > summary{font-size:15.5px !important;gap:18px;padding:20px 0 !important}
.faq-it > p{font-size:14.5px !important;padding-right:0;margin-bottom:22px !important}
}
@media(prefers-reduced-motion:reduce){
.faq-it > summary::after{transition:none}
}
/* ══════════════════════════════════════════════════════════════
FRANJA DE CIERRE — el mismo lenguaje que la banda de la tienda
Era el unico bloque oscuro que seguia siendo un rectangulo a
sangre, con esquinas rectas contra el crema. Ahora se apoya en
el mismo molde que la banda de la tienda: margenes laterales,
radio grande y sombra de apoyo. Un solo idioma para los bloques
oscuros de la pagina.
══════════════════════════════════════════════════════════════ */
.cta-strip{
margin:0 clamp(12px,3vw,40px) !important;
border-radius:var(--r-lg) !important;
overflow:hidden !important;
box-shadow:0 2px 8px rgba(18,15,12,.10), 0 26px 60px -34px rgba(18,15,12,.55);
}
/* El eyebrow al 55% de opacidad daba 2.6:1 sobre el espresso: ilegible */
.cta-strip .eyebrow{color:var(--gold-2) !important;opacity:1 !important}
.cta-strip .eyebrow::before{background:rgba(212,166,90,.55) !important}
/* Las sombras doradas del boton funcionan sobre crema; sobre espresso
se leen como un halo encendido. Aqui la sombra es neutra. */
.cta-strip .btn-gold{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.34),
inset 0 -1px 0 rgba(33,28,22,.14),
0 10px 26px -12px rgba(0,0,0,.55) !important;
}
.cta-strip .btn-gold:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.42),
inset 0 -1px 0 rgba(33,28,22,.14),
0 16px 34px -14px rgba(0,0,0,.6) !important;
}
/* La accion secundaria deja de imitar a la primaria: mismo alto, pero
sin relleno y con un filete que apenas se insinua. */
.cta-strip .btn-ghost-light{
background:rgba(242,238,232,.06) !important;
border:1px solid rgba(242,238,232,.22) !important;
color:rgba(242,238,232,.92) !important;
box-shadow:none !important;
}
@media(hover:hover){
.cta-strip .btn-ghost-light:hover{
background:rgba(242,238,232,.11) !important;
border-color:rgba(242,238,232,.38) !important;
}
}
.cta-strip h2{max-width:16ch;margin-left:auto !important;margin-right:auto !important}
.cta-strip p{max-width:46ch !important}
/* ══════════════════════════════════════════════════════════════
GUIAS DEL EXPERTO
Tres problemas, no uno:
· el resumen se cortaba a 110 caracteres CLAVADOS, partiendo
palabras por la mitad ("las fa…", "los erro…");
· "Leer la guia →" repetido cuatro veces, cuando la tarjeta
entera ya era el enlace — y con una flecha de mas;
· las cuatro tarjetas tenian altos distintos segun el largo del
titular, asi que la fila nunca cerraba recta.
Ahora: titular a 2 lineas, resumen a 3, ambos recortados por
lineas (que es lo unico que respeta donde acaba una palabra) y
la tarjeta con el mismo molde de elevacion del resto del sitio.
══════════════════════════════════════════════════════════════ */
.gu-grid{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:14px !important;align-items:stretch !important;
}
.gu-card{
display:flex;flex-direction:column;gap:11px;
background:var(--bg) !important;
border:1px solid var(--rule) !important;
border-radius:var(--r-md) !important;
padding:22px 20px 24px !important;
text-decoration:none;color:inherit;height:100%;
box-shadow:var(--g-el1);
transition:transform .4s var(--g-ease), box-shadow .4s var(--g-ease),
border-color .3s var(--g-ease);
}
.gu-tag{
font-size:9.5px;font-weight:var(--w-bold);letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-4);
transition:color .3s var(--g-ease);
}
.gu-t{
font-size:16px;font-weight:var(--w-med);letter-spacing:-.02em;
line-height:1.32;color:var(--ink-1);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
transition:color .3s var(--g-ease);
}
.gu-x{
font-size:13px;font-weight:var(--w-body);color:var(--ink-3);line-height:1.65;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;margin-top:1px;
}
@media(hover:hover){
.gu-card:hover{
transform:translateY(-3px);box-shadow:var(--g-el2);
border-color:rgba(196,145,62,.30) !important;
}
.gu-card:hover .gu-t{color:var(--oro-ink)}
.gu-card:hover .gu-tag{color:var(--oro-ink)}
}
.gu-card:focus-visible{outline:2px solid var(--oro-ink);outline-offset:3px}
@media(max-width:1020px){.gu-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:560px){
.gu-grid{grid-template-columns:minmax(0,1fr) !important;gap:10px !important}
.gu-card{padding:19px 17px 20px !important}
.gu-t{font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){
.gu-card{transition:none}
.gu-card:hover{transform:none}
}
/* ══════════════════════════════════════════════════════════════
PIE DE PAGINA
Lo que estaba mal, medido:
· las columnas eran 379/190/190/247 px, y "Fragancias Caballero
(320)" no cabe en 190: se partia en dos lineas y rompia la
alineacion de toda la lista;
· el rotulo de columna (CATALOGO) y el rotulo de dato (WHATSAPP)
usaban EXACTAMENTE el mismo estilo: dos niveles de jerarquia
pintados igual;
· el aviso legal llevaba una frase dorada en medio de un parrafo
gris — el mismo "enlace partido en dos" que ya corregimos arriba,
aqui sin ser siquiera un enlace;
· la fila final quedaba justo debajo del boton flotante de
WhatsApp, que tapaba "Terminos".
══════════════════════════════════════════════════════════════ */
/* 1 · Anchos: la columna del catalogo necesita medida para sus items */
.ft-top{
grid-template-columns:1.7fr 1.15fr .9fr 1.25fr !important;
gap:44px !important;
}
/* 2 · Dos niveles de rotulo, dos estilos.
El de columna manda (oro, mas tracking); el del dato es solo una
etiqueta silenciosa encima del valor. */
footer .ft-lbl{
font-size:10.5px !important;letter-spacing:.2em !important;
color:var(--gold-2) !important;margin-bottom:20px !important;
}
footer .ft-contact-label{
font-size:11px !important;letter-spacing:.02em !important;
text-transform:none !important;font-weight:var(--w-body) !important;
color:rgba(242,238,232,.42) !important;margin-bottom:2px !important;
}
.ft-contact-item{margin-bottom:16px !important}
.ft-contact-val,.ft-contact-val a{
font-size:13.5px !important;color:rgba(242,238,232,.86) !important;
}
@media(hover:hover){.ft-contact-val a:hover{color:var(--gold-2) !important}}
/* 3 · Enlaces de lista: cuerpo legible y sin el filete de adorno */
.ft-ul{gap:13px !important}
.ft-ul a{
font-size:13.5px !important;color:rgba(242,238,232,.66) !important;
transition:color .25s var(--g-ease) !important;
}
.ft-ul a::before{display:none !important}
@media(hover:hover){.ft-ul a:hover{color:rgba(242,238,232,.98) !important}}
/* 4 · El logo era un circulo oscuro sobre fondo oscuro: se perdia */
.ft-logo-img{
opacity:1 !important;
box-shadow:0 0 0 1px rgba(242,238,232,.16), 0 6px 16px -8px rgba(0,0,0,.6);
}
/* 5 · El aviso legal es UN parrafo, de un solo tono */
.ft-disc{
font-size:11px !important;line-height:1.8 !important;
color:rgba(242,238,232,.44) !important;
padding:24px 0 !important;max-width:96ch;
}
.ft-disc strong{
color:rgba(242,238,232,.62) !important;font-weight:500 !important;
}
/* 6 · La fila final sube para no quedar bajo el boton de WhatsApp */
/* 92 px abajo: el boton flotante de WhatsApp ocupa los ultimos 82 px
de la ventana y se comia "Terminos". */
.ft-bottom{padding:20px 0 92px !important}
.ft-cp,.ft-lk a{font-size:11.5px !important;color:rgba(242,238,232,.42) !important}
@media(hover:hover){.ft-lk a:hover{color:var(--gold-2) !important}}
@media(max-width:900px){
.ft-top{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:34px !important}
.ft-bottom{padding-bottom:96px !important}
}
@media(max-width:560px){
.ft-top{grid-template-columns:minmax(0,1fr) !important}
}
/* ══════════════════════════════════════════════════════════════
FRANJA DE ANUNCIO EN TODO EL SITIO
Vivia solo en la portada, con su CSS escrito dentro de index.html.
En las otras 23 paginas #nav seguia anclado en top:40 —asi que
sobre la barra quedaba una banda crema vacia de 40 px— y ademas
se perdia el aviso de que ya se puede comprar por unidad.
Aqui van las reglas base, para que la franja funcione en cualquier
pagina que enlace esta hoja.
══════════════════════════════════════════════════════════════ */
/* Las reglas BASE vivian dentro de index.html, asi que en las paginas
interiores la franja salia sin el espaciado, la caja "Nuevo" ni las
versalitas: parecia otra barra. Aqui estan completas, identicas a
las de la portada, para que la franja sea LA MISMA en todo el sitio.
(Los ajustes finos —alto, cuerpo, la pastilla dorada, el subrayado
de "Comprar ahora"— ya viven mas abajo en esta hoja y se aplican
igual en todas.) */
#annbar{
display:flex;align-items:center;justify-content:center;
}
#annbar a{
display:inline-flex;align-items:center;gap:10px;
color:rgba(242,238,232,.85);text-decoration:none;
font-size:10.5px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;transition:color .2s;
}
#annbar a:hover{color:var(--gold-2)}
#annbar .ab-tag{
display:inline-flex;align-items:center;padding:3px 9px;
border:1px solid rgba(196,145,62,.55);border-radius:100px;
color:var(--gold-2);font-size:9px;font-weight:700;letter-spacing:.16em;
}
#annbar .ab-arr{color:var(--gold-2);font-size:13px;letter-spacing:0;transition:transform .2s}
#annbar a:hover .ab-arr{transform:translateX(3px)}
/* La portada abre con #hero, que ya reserva el alto de la barra.
Las interiores no: se les añade arriba el alto de la franja. */
body:not(:has(#hero)){padding-top:40px}
@media(max-width:1024px){
body:not(:has(#hero)){padding-top:36px}
}
@media(max-width:600px){#annbar a span.ab-long{display:none}}
/* ══════════════════════════════════════════════════════════════
NOSOTROS · PORTADA
· El panel de la derecha era una caja gris con el logo dentro:
lee como un hueco de imagen sin rellenar, no como una pieza de
marca. Ahora es una placa espresso —el mismo material que la
banda de la tienda y la franja de cierre— y el logo, que es
dorado sobre negro, por fin se apoya en su propio fondo.
· El sello "Bogotá / Colombia / 2024" era un cuadrado dorado
encajado en la esquina, con un año suelto que parecia una
fecha caducada. Pasa a ser un pie de placa.
· "+639" no cuadraba con el resto del sitio (+650 en portada,
tienda y menu) y ademas pintaba el "+" de otro color que la
cifra: un numero de dos colores no es un numero.
══════════════════════════════════════════════════════════════ */
.nos-hero-inner{gap:clamp(40px,5vw,72px) !important;align-items:center !important}
.nos-img-box{
background:linear-gradient(158deg,#2E261E 0%,#211C16 52%,#171310 100%) !important;
border:1px solid rgba(242,238,232,.10) !important;
border-radius:var(--r-lg) !important;
aspect-ratio:1/1 !important;
box-shadow:inset 0 1px 0 rgba(242,238,232,.10),
0 2px 8px rgba(18,15,12,.10),
0 30px 66px -34px rgba(18,15,12,.55) !important;
flex-direction:column;gap:26px;
padding:clamp(28px,4vw,46px) !important;
}
/* Un halo tenue detras del logo: el material recibe la luz, no la emite */
.nos-img-box::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(58% 50% at 50% 42%, rgba(196,145,62,.16), transparent 70%);
}
.nos-logo{
width:min(62%,300px) !important;opacity:1 !important;position:relative;z-index:1;
filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
}
.nos-badge{
position:static !important;background:none !important;
border:0 !important;border-top:1px solid rgba(242,238,232,.12) !important;
border-radius:0 !important;
padding:18px 0 0 !important;margin:0 !important;width:100%;
text-align:center;position:relative;z-index:1;
font-size:10.5px !important;font-weight:var(--w-med) !important;
letter-spacing:.2em !important;text-transform:uppercase !important;
color:rgba(242,238,232,.58) !important;line-height:1.4 !important;
}
/* Las cifras: un solo color, y la etiqueta legible */
.ns-n,.ns-n span{color:var(--ink-1) !important;font-weight:var(--w-med) !important}
.ns-n{font-size:38px !important;letter-spacing:-.035em !important;font-variant-numeric:tabular-nums}
.ns-l{
font-size:11px !important;letter-spacing:.14em !important;
color:var(--ink-3) !important;margin-top:8px !important;
font-weight:var(--w-med) !important;
}
.nos-stats{border-top-color:rgba(33,28,22,.11) !important;padding-top:34px !important}
.nos-hero p{font-size:16px !important;color:var(--ink-2) !important;max-width:52ch !important}
@media(max-width:900px){
.nos-img-box{aspect-ratio:4/3 !important;max-width:none !important}
.nos-logo{width:min(52%,220px) !important}
.ns-n{font-size:32px !important}
}
/* En movil las tres cifras se apretaban tanto que "DEPARTAMENTOS" y
"RESPUESTA" se tocaban. Rejilla de tres con separadores propios. */
@media(max-width:560px){
.nos-stats{
display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:0 !important;
}
.nos-stats .ns{padding:0 12px !important;border-left:1px solid rgba(33,28,22,.11) !important}
.nos-stats .ns:first-child{padding-left:0 !important;border-left:0 !important}
.ns-n{font-size:26px !important}
.ns-l{font-size:9.5px !important;letter-spacing:.1em !important;line-height:1.35 !important}
}
/* ══════════════════════════════════════════════════════════════
NOSOTROS · LINEA DE TIEMPO
· El carril seguia 40 px por debajo del ultimo hito, apuntando a
la nada: la linea tiene que morir en el ultimo punto.
· El año iba a 8 px —el cuerpo mas pequeño de todo el sitio— y
en oro; con el titular de la seccion tambien dorado, eran
cinco acentos dorados en la misma pantalla.
· Las etiquetas mezclaban formatos: "2024", "2024 — EXPANSION",
"2025", "2026 — PRESENTE". Una columna de años se lee como
carril solo si todas las fichas tienen la misma forma.
· El texto iba en 13.5 px muy claro: por debajo del cuerpo de
lectura del resto del sitio.
══════════════════════════════════════════════════════════════ */
.timeline{
border-left:0 !important;padding-left:34px !important;position:relative;
}
/* El carril nace en el primer punto y muere en el ultimo */
.timeline::before{
content:'';position:absolute;left:0;top:9px;bottom:0;width:1px;
background:rgba(33,28,22,.13);
}
.tl-item{margin-bottom:44px !important}
.tl-item:last-child{margin-bottom:0 !important}
.tl-item::before{
left:-38px !important;top:7px !important;
width:7px !important;height:7px !important;
background:var(--ink-2) !important;
border:3px solid #F2EEE8 !important;
box-shadow:0 0 0 1px rgba(33,28,22,.13);
}
/* Solo el hito de HOY va en oro: el color marca el presente, no decora */
.tl-item:last-child::before{background:var(--oro-ink) !important}
.tl-yr{
font-size:11px !important;font-weight:var(--w-med) !important;
letter-spacing:.16em !important;color:var(--ink-4) !important;
margin-bottom:9px !important;font-variant-numeric:tabular-nums;
}
.tl-item:last-child .tl-yr{color:var(--oro-ink) !important}
.tl-title{
font-size:18px !important;font-weight:var(--w-med) !important;
letter-spacing:-.022em !important;color:var(--ink-1) !important;
margin-bottom:9px !important;line-height:1.3 !important;
}
.tl-txt{
font-size:14.5px !important;font-weight:var(--w-body) !important;
color:var(--ink-3) !important;line-height:1.75 !important;
max-width:58ch !important;
}
.tl-txt strong{color:var(--ink-2) !important;font-weight:600 !important}
/* La columna de la izquierda, al mismo cuerpo de lectura */
.story-head p{font-size:15.5px !important;color:var(--ink-2) !important;max-width:54ch !important}
@media(max-width:900px){
.timeline{padding-left:28px !important}
.tl-item::before{left:-32px !important}
.tl-title{font-size:16.5px !important}
.tl-txt{font-size:14px !important}
}
/* ══════════════════════════════════════════════════════════════
NOSOTROS · LO QUE NOS DEFINE
Cada celda apilaba CUATRO niveles: el ordinal, una etiqueta
dorada, el titulo y el texto. Con cuatro celdas son dieciseis
piezas de jerarquia en una fila, y el ordinal y la etiqueta
dicen lo mismo dos veces. Se funden en una sola linea —
"01 · Calidad"— y quedan tres niveles, como en el resto del
sitio.
Ademas eran cuatro cajas rellenas de esquina recta, con filetes
de 2 px fingidos por el fondo: una tabla, no una fila de
valores. Pasan a columnas separadas por un filete real.
══════════════════════════════════════════════════════════════ */
.vals-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:0 !important;background:none !important;
border-top:1px solid rgba(33,28,22,.11) !important;
border-bottom:1px solid rgba(33,28,22,.11) !important;
margin-top:48px !important;
}
.val-card{
background:none !important;border:0 !important;
border-left:1px solid rgba(33,28,22,.11) !important;
border-radius:0 !important;
padding:34px 30px 36px 28px !important;
overflow:visible !important;
}
.val-card:first-child{border-left:0 !important;padding-left:0 !important}
.val-card::before{display:none !important}
.val-card:hover{background:none !important;border-color:rgba(33,28,22,.11) !important}
/* El ordinal y la etiqueta, en una sola linea */
.val-card .feat-num{
display:inline !important;font-size:12px !important;
font-weight:var(--w-med) !important;color:var(--ink-4) !important;
letter-spacing:.04em !important;margin:0 !important;
}
.val-card .feat-num::after{content:' · ';color:var(--ink-4)}
.val-label{
display:inline !important;font-size:12px !important;
font-weight:var(--w-med) !important;letter-spacing:.04em !important;
text-transform:none !important;color:var(--ink-4) !important;margin:0 !important;
}
.val-title{
display:block !important;margin-top:14px !important;margin-bottom:10px !important;
font-size:17px !important;font-weight:var(--w-med) !important;
letter-spacing:-.022em !important;color:var(--ink-1) !important;line-height:1.3 !important;
}
.val-txt{
font-size:14px !important;font-weight:var(--w-body) !important;
color:var(--ink-3) !important;line-height:1.72 !important;
}
@media(max-width:900px){
.vals-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.val-card{padding:28px 22px 30px !important}
.val-card:nth-child(odd){border-left:0 !important;padding-left:0 !important}
.val-card:nth-child(n+3){border-top:1px solid rgba(33,28,22,.11) !important}
}
@media(max-width:560px){
.vals-grid{grid-template-columns:minmax(0,1fr) !important}
.val-card{border-left:0 !important;padding:26px 0 !important}
.val-card:nth-child(n+2){border-top:1px solid rgba(33,28,22,.11) !important}
}
/* ── Franja de cierre: reglas BASE ──
Vivian dentro de index.html, asi que al darle la clase .cta-strip a
las franjas de Nosotros y Envases se quedaban SIN fondo: texto crema
sobre crema. Aqui van, para que la clase funcione en cualquier pagina
que enlace esta hoja. (El molde —margenes, radio y sombra— ya esta
definido mas arriba.) */
.cta-strip{
padding:100px 0;background:var(--dark);
text-align:center;position:relative;overflow:hidden;
}
.cta-strip .c{position:relative;z-index:1}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}
@media(max-width:900px){.cta-strip{padding:72px 0}}
/* La franja de cierre es una placa con margenes laterales; cuando el pie
viene justo despues, su borde superior queda pegado al canto inferior
de la placa y se comen las esquinas redondeadas. Se le da al pie la
misma separacion que la placa tiene a los lados. */
.cta-strip + footer{margin-top:clamp(12px,3vw,40px)}
/* ══════════════════════════════════════════════════════════════
CATALOGOS (DAMA / CABALLERO) · PANEL DE FILTROS
Medido: tres controles en la misma fila con tres alturas
distintas (37, 35 y 46 px) y dos radios ajenos al sistema (6 px
y "0 6px 6px 0"). Eso es lo que hace que el panel se vea armado
a pedazos aunque cada pieza por separado este bien.
Y las etiquetas: "CATEGORIA" en oro de 8 px DENTRO del control,
"CASA:" en oro de 11 px FUERA y con dos puntos. Dos formas de
rotular en 20 cm de pantalla.
══════════════════════════════════════════════════════════════ */
/* 1 · Una sola altura y un solo radio para todo el panel */
.cat-dd-btn,#casa-sel,.btn-reset,.srch-ic,.srch-in{
height:44px !important;
font-size:13px !important;
border-color:rgba(33,28,22,.13) !important;
}
.cat-dd-btn,#casa-sel,.btn-reset{
border-radius:var(--r-sm) !important;
padding:0 16px !important;
background:#FBF9F6 !important;
}
.btn-reset{background:none !important;color:var(--ink-3) !important}
.srch-ic{border-radius:var(--r-sm) 0 0 var(--r-sm) !important;width:46px !important;background:#FBF9F6 !important}
.srch-in{border-radius:0 var(--r-sm) var(--r-sm) 0 !important;background:#FBF9F6 !important;font-size:13.5px !important}
.srch-in::placeholder{color:var(--ink-4)}
#filter-bar{margin-bottom:14px !important}
.cat-dd{margin-bottom:14px !important}
/* 2 · Las dos etiquetas, rotuladas igual y las dos FUERA del control */
.cat-dd::before{
content:'Categoría';flex:0 0 auto;
font-size:11px;font-weight:var(--w-med);
text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.cat-dd-lbl{display:none !important}
#filter-bar > label{
font-size:11px !important;font-weight:var(--w-med) !important;
letter-spacing:.14em !important;color:var(--ink-3) !important;
}
/* 3 · El aviso legal: nota al pie, no cita con filete dorado
(el mismo arreglo que en la portada y en el pie) */
.disc{
border-left:0 !important;background:none !important;
border-top:1px solid rgba(33,28,22,.09) !important;
padding:14px 0 0 !important;margin-bottom:22px !important;
font-size:11.5px !important;line-height:1.75 !important;
color:var(--ink-4) !important;max-width:104ch;
}
.disc strong{color:var(--ink-3) !important;font-weight:600 !important}
/* 4 · "Mostrando 335 referencias": una frase, un color */
.tbl-count{font-size:12.5px !important;color:var(--ink-3) !important}
.tbl-count span{color:var(--ink-2) !important;font-weight:600 !important}
/* 5 · La cabecera de la tabla iba a 8 px y en oro: es el rotulo de
una columna, no un acento de marca */
.tbl thead th{
font-size:10.5px !important;letter-spacing:.14em !important;
color:var(--ink-3) !important;padding:13px 16px !important;
}
@media(max-width:760px){
.cat-dd{display:flex !important;flex-direction:column;align-items:stretch;gap:7px}
.cat-dd::before{letter-spacing:.12em}
#filter-bar{flex-wrap:wrap}
#filter-bar > label{width:100%}
}
/* ══════════════════════════════════════════════════════════════
CATALOGOS · PANEL DE FILTROS Y TABLA — pasada 2
(Sin tocar el comportamiento: los mismos controles, los mismos
onclick, la misma tabla. Solo como se ven y como se alinean.)
· El panel apilaba tres filas con alineaciones distintas: la
etiqueta "CATEGORIA" es mas ancha que "CASA", asi que sus
controles arrancaban en x distintos. Un formulario con dos
margenes izquierdos se siente torcido sin saber por que.
Ahora los rotulos van ENCIMA y los tres campos comparten una
rejilla: mismo arranque, mismo ancho de columna.
· "Comprar" era un boton VERDE. En este sitio el verde es
WhatsApp; ese enlace va a la ficha del producto en la tienda.
Un color que promete una cosa y hace otra es un error de
señalizacion, no de gusto.
· La columna "Referencia comercial" iba en oro: repetido 335
veces el acento deja de acentuar. El enfasis lo hace el peso.
══════════════════════════════════════════════════════════════ */
.filter-panel{
background:#F4F1EC !important;border-color:rgba(33,28,22,.10) !important;
border-radius:var(--r-md) !important;padding:22px !important;
}
/* Una rejilla para los tres campos: mismo arranque y mismo ancho */
.filter-panel > .cat-dd{margin:0 !important}
.cat-dd{
display:grid !important;grid-template-rows:auto auto;gap:7px !important;
align-items:stretch !important;width:100%;
}
.cat-dd::before{letter-spacing:.14em}
#filter-bar{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:7px 12px !important;align-items:end !important;
grid-template-areas:'lbl .' 'sel btn' !important;
margin:0 0 14px !important;
}
#filter-bar > label{grid-area:lbl;margin:0}
#filter-bar > select{grid-area:sel;width:100% !important}
/* El desplegable propio ocupa la celda del nativo; el nativo se sale de
la rejilla para no reservar una columna vacia. */
#filter-bar > .casa-dd{grid-area:sel}
#filter-bar > .casa-dd-nativo{position:absolute !important}
#filter-bar > .btn-reset{grid-area:btn;white-space:nowrap}
/* Categoria y Casa, lado a lado en pantalla ancha */
@media(min-width:760px){
.filter-panel{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:16px !important;align-items:end;
}
.filter-panel > .srch-row{grid-column:1 / -1}
.cat-dd-btn{min-width:0 !important;width:100% !important}
}
.cat-dd,#filter-bar{margin-bottom:0 !important}
.srch-row{margin-top:2px !important}
/* La accion de la tabla lleva al producto: color de la casa, no de
WhatsApp */
.cbuy{
background:var(--ink-1) !important;color:#F4EFE6 !important;
font-size:10.5px !important;padding:8px 16px !important;
box-shadow:0 4px 12px -7px rgba(33,28,22,.7) !important;
}
@media(hover:hover){
.cbuy:hover{
background:var(--oro-ink) !important;color:#FFF8EC !important;
box-shadow:0 8px 18px -9px rgba(122,86,24,.75) !important;
}
}
.cbuy-alt{
background:none !important;color:var(--oro-ink) !important;
border:1px solid rgba(122,86,24,.40) !important;box-shadow:none !important;
}
/* La tabla: el enfasis con peso, no con color */
.tbl tbody td{font-size:13px !important;color:var(--ink-3) !important}
.tbl tbody td:first-child{color:var(--ink-4) !important;font-size:11.5px !important}
.tbl tbody td:nth-child(2){color:var(--ink-1) !important;font-weight:600 !important}
.tbl tbody td:nth-child(3){font-size:12.5px !important;color:var(--ink-3) !important}
.tbl tbody td:nth-child(4){
color:var(--ink-2) !important;font-size:12.5px !important;font-weight:600 !important;
}
/* ══════════════════════════════════════════════════════════════
CATALOGOS · TARJETA DE PORTADA Y TABLA DE VIDRIO
La tabla es el sitio del catalogo donde el vidrio SI esta
justificado: la cabecera es sticky, o sea flota sobre 335 filas
que le pasan por debajo. Eso es exactamente la capa funcional
de Apple — material que toma el color de lo que hay detras.
══════════════════════════════════════════════════════════════ */
/* La portada, en tarjeta */
.cat-hero-card{
background:rgba(255,253,250,.72) !important;
-webkit-backdrop-filter:blur(22px) saturate(1.35);
backdrop-filter:blur(22px) saturate(1.35);
border:1px solid rgba(255,255,255,.70) !important;
border-radius:var(--r-lg) !important;
padding:clamp(30px,4vw,52px) clamp(24px,4vw,56px) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
0 2px 8px rgba(33,28,22,.05),
0 26px 60px -34px rgba(33,28,22,.30) !important;
}
/* La tabla: esquinas del sistema y la cabecera en vidrio */
.tw{
border-radius:var(--r-lg) !important;
border-color:rgba(33,28,22,.11) !important;
overflow:auto !important;
box-shadow:0 2px 8px rgba(33,28,22,.05),
0 22px 52px -32px rgba(33,28,22,.28) !important;
}
/* A .78 de opacidad la fila que pasa por debajo se LEIA a traves de la
cabecera y chocaba con los rotulos ("ANGEL" encima de "REFERENCIA
OLFATIVA"). El vidrio tiene que dejar VER el fondo, no dejarlo leer:
mas cuerpo y mas desenfoque. */
.tbl thead th{
background:rgba(246,243,238,.94) !important;
-webkit-backdrop-filter:blur(30px) saturate(1.6);
backdrop-filter:blur(30px) saturate(1.6);
border-bottom:1px solid rgba(33,28,22,.12) !important;
box-shadow:inset 0 -1px 0 rgba(255,255,255,.6), 0 6px 14px -10px rgba(33,28,22,.30);
}
/* Las esquinas de la cabecera acompañan al contenedor */
.tbl thead th:first-child{border-top-left-radius:var(--r-lg)}
.tbl thead th:last-child{border-top-right-radius:var(--r-lg)}
.tbl tbody tr:last-child{border-bottom:0 !important}
/* Sin soporte de vidrio (o transparencia reducida): relleno solido */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.cat-hero-card{background:#FDFBF8 !important}
.tbl thead th{background:#F1EDE6 !important}
}
@media (prefers-reduced-transparency:reduce){
.cat-hero-card{background:#FDFBF8 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.tbl thead th{background:#F1EDE6 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
}
/* ══════════════════════════════════════════════════════════════
DESPLEGABLES DEL CATALOGO EN VIDRIO
El panel de Categoria era un rectangulo blanco de radio 8 px con
una sombra dura. Y el de Casa era el