@layer components {
.sello {
position: relative;
background: var(--blanco);
border: 1px solid var(--hilo);
border-radius: var(--r-sm);
padding: var(--s4) var(--s4) var(--s3);
}
.sello__cab {
display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
padding-bottom: var(--s3); margin-bottom: var(--s3);
border-bottom: 1px solid var(--hilo);
}
.sello__tit { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); }
.sello__marca {
width: 34px; height: 34px; flex: none;
display: grid; place-items: center;
border: 1.5px solid var(--rojo); border-radius: 50%;
color: var(--rojo);
font-family: var(--dato); font-size: 8px; letter-spacing: .04em; line-height: 1.05; text-align: center;
transform: rotate(-8deg);
animation: estampar .5s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes estampar { from { opacity: 0; transform: rotate(-8deg) scale(1.5); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
.sello__fila { display: flex; gap: var(--s3); justify-content: space-between; padding-block: 5px; font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; }
.sello__k { color: var(--humo); text-transform: uppercase; }
.sello__v { color: var(--tinta); text-align: right; }
.sello__pie { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hilo); font-size: .875rem; line-height: 1.45; color: var(--tinta); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
height: 52px; padding-inline: var(--s6);
background: var(--tinta); color: var(--papel);
border-radius: var(--r-md);
font-size: .95rem; font-weight: 600; letter-spacing: -.005em;
text-decoration: none;
transition: background .18s ease;
}
.btn:hover { background: #2C2F29; }
.btn--full { width: 100%; }
.btn--fantasma { background: transparent; color: var(--tinta); border: 1px solid var(--tinta); }
.btn--fantasma:hover { background: rgba(26,28,24,.06); }
.btn--quieto { height: 44px; font-weight: 500; background: transparent; color: var(--tinta); border: 1px solid var(--hilo); }
.btn--quieto:hover { background: var(--blanco); border-color: var(--humo); }
.card { display: flex; flex-direction: column; min-width: 0; }
.card__media {
position: relative; aspect-ratio: 3/4;
background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm);
display: grid; place-items: center; padding: 11%;
overflow: hidden;
transition: border-color .18s ease;
}
.card:hover .card__media { border-color: var(--humo); }
.foto { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.card__cuerpo { padding: var(--s4) 2px 0; display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card__marca { font-family: var(--dato); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta); }
.card__meta { color: var(--humo); }
.card__nom { font-size: .95rem; font-weight: 500; line-height: 1.3; }
.card__ml { font-family: var(--dato); font-size: 11.5px; letter-spacing: .05em; color: var(--humo); }
.card__val { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--humo); }
.card__precio { margin-top: auto; padding-top: var(--s2); display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.card__ahora { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.card__antes { font-size: .8rem; color: var(--humo); text-decoration: line-through; }
.card__ahorro { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; color: var(--laca); }
.card__ok { display: flex; align-items: center; gap: 5px; font-family: var(--dato); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta); }
.card__ok::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--rojo); }
@media (max-width: 359px) { .card__ok { letter-spacing: .04em; } }
.logo { height: 54px; width: auto; }
@media (min-width: 760px) { .logo { height: 66px; } }
.foot .logo { height: 72px; }
.evid { background: var(--blanco); border-block: 1px solid var(--hilo); }
.evid__in { display: grid; grid-template-columns: repeat(2, 1fr); }
.evid__i {
display: block; padding: var(--s4) var(--s3); text-align: center; text-decoration: none;
border-right: 1px solid var(--hilo); border-bottom: 1px solid var(--hilo);
transition: background .2s ease;
}
.evid__i:nth-child(2n) { border-right: 0; }
.evid__i:nth-last-child(-n+2) { border-bottom: 0; }
.evid__i:hover { background: color-mix(in srgb, var(--papel) 55%, var(--blanco)); }
.evid__n {
display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em;
font-variant-numeric: tabular-nums; line-height: 1.05;
transition: color .2s ease;
}
.evid__i:hover .evid__n { color: var(--laca); }
.evid__l { font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.evid__mas {
display: block; margin-top: 7px;
font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
color: var(--laca);
}
.evid__mas::after { content: " →"; }
@media (min-width: 760px) {
.evid__in { grid-template-columns: repeat(4, 1fr); }
.evid__i { padding: var(--s6) var(--s4); border-bottom: 0; }
.evid__i:nth-child(2n) { border-right: 1px solid var(--hilo); }
.evid__i:last-child { border-right: 0; }
.evid__n { font-size: 2rem; }
.evid__mas { opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease; }
.evid__i:hover .evid__mas, .evid__i:focus-visible .evid__mas { opacity: 1; transform: none; }
}
.fam { display: flex; gap: var(--s2); flex-wrap: wrap; }
.fam__c {
display: inline-flex; align-items: baseline; gap: var(--s2);
padding: 9px 15px; background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-pill);
text-decoration: none; font-size: .9rem;
transition: border-color .15s ease;
}
.fam__c:hover { border-color: var(--tinta); }
.fam__c i { font-family: var(--dato); font-size: 9px; letter-spacing: .05em; color: var(--humo); font-style: normal; }
.lanza--tendencia { margin-block: 0; }
.lanza--tendencia .lanza__panel { padding-block: var(--s6); }
.lanza--tendencia .lanza__marca { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.lanza--tendencia .lanza__nombre { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.lanza--tendencia .lanza__meta { margin-bottom: var(--s6); }
@media (min-width: 900px) {
.lanza--tendencia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lanza--tendencia .lanza__vis { order: -1; }
.lanza--tendencia .lanza__panel { padding: var(--s7); }
}
.casas { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--hilo); border-left: 1px solid var(--hilo); }
@media (min-width: 640px) { .casas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px) { .casas { grid-template-columns: repeat(5, 1fr); } }
.casa {
display: grid; place-items: center; gap: 3px;
padding: var(--s5) var(--s3); min-height: 96px;
border-right: 1px solid var(--hilo); border-bottom: 1px solid var(--hilo);
text-decoration: none; text-align: center;
transition: background .15s ease;
}
.casa:hover { background: var(--blanco); }
.casa b { font-weight: 600; font-size: .95rem; letter-spacing: .02em; }
.casa span { font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.sec { padding-block: var(--s8); }
.sec__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.sec__t { font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96; font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.02em; }
.sec__v { font-size: .875rem; color: var(--humo); text-decoration: none; border-bottom: 1px solid var(--hilo); padding-bottom: 2px; white-space: nowrap; }
.sec__v:hover { color: var(--tinta); border-bottom-color: var(--rojo); }
.grid3 { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
.foot { background: var(--tinta); color: #C9CCC5; padding-block: var(--s8) var(--s6); margin-top: var(--s9); }
.foot a { color: #C9CCC5; text-decoration: none; font-size: .875rem; }
.foot a:hover { color: var(--blanco); }
.foot__g { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot__g { grid-template-columns: 1.6fr .9fr .9fr 1.1fr; gap: var(--s7) var(--s6); } }
.foot__g > div { min-width: 0; }
.foot__g--minimo { grid-template-columns: 1fr; max-width: 520px; }
.foot__l a { position: relative; }
.foot__l a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform .28s cubic-bezier(.16,.84,.44,1);
}
.foot__l a:hover::after { transform: scaleX(1); }
.foot__c { gap: var(--s4); }
.foot__wa { display: flex; align-items: center; gap: var(--s3); }
.foot__wa b { display: block; font-weight: 600; }
.foot__wa-n { display: block; font-size: .8rem; color: #7E837A; }
.foot__wa::after { display: none; }
.foot__wa-p {
flex: none; width: 34px; height: 34px; border-radius: 50%;
border: 1px solid rgba(240,238,234,.22);
background: no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C9CCC5'%3E%3Cpath d='M12 2a10 10 0 0 0-8.7 15L2 22l5.2-1.3A10 10 0 1 0 12 2zm5.5 14.2c-.2.6-1.2 1.2-1.7 1.2-.5.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.4-4-.1-.2-1-1.4-1-2.6 0-1.2.6-1.8.9-2 .2-.3.5-.3.6-.3h.5c.2 0 .4-.1.6.4l.8 2c.1.2.1.3 0 .5l-.3.5-.3.3c-.1.1-.3.3-.1.6.1.3.6 1.1 1.4 1.8 1 .8 1.7 1.1 2 1.2.2.1.4.1.5-.1l.7-.8c.2-.2.3-.2.5-.1l1.9.9c.2.1.4.2.4.3.1.1.1.5-.1 1z'/%3E%3C/svg%3E");
transition: border-color .25s ease;
}
.foot__wa:hover .foot__wa-p { border-color: rgba(240,238,234,.5); }
.foot__t { font-family: var(--dato); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #7E837A; margin-bottom: var(--s3); }
.foot__l { list-style: none; padding: 0; display: grid; gap: 9px; }
}
@layer views {
.lanza { display: grid; background: var(--tinta); color: var(--papel); isolation: isolate; }
@media (min-width: 900px) { .lanza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lanza__panel { padding: var(--s6) var(--s5) var(--s7); display: flex; flex-direction: column; }
@media (min-width: 900px) { .lanza__panel { padding: var(--s7) var(--s8); justify-content: center; } }
.lanza__meta {
display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap;
padding-bottom: var(--s4); margin-bottom: var(--s7);
border-bottom: 1px solid rgba(240,238,234,.18);
font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: rgba(240,238,234,.62);
}
.lanza__editor { display: inline-flex; align-items: center; gap: var(--s2); }
.lanza__editor img { height: 26px; width: auto; }
.lanza__marca {
font-family: var(--texto); font-weight: 700;
font-size: clamp(1.9rem, 5.4vw, 3.1rem);
letter-spacing: .17em; text-transform: uppercase;
line-height: 1; margin-right: -.17em;
}
.lanza__kicker {
display: flex; align-items: center; gap: var(--s3);
margin-top: var(--s6);
font-family: var(--dato); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--papel);
}
.lanza__kicker::before { content: ""; width: 34px; height: 2px; background: var(--rojo); flex: none; }
.lanza__nombre { font-size: clamp(2.5rem, 6.4vw, 4.1rem); margin-top: var(--s3); max-width: 11ch; }
.lanza__desc { margin-top: var(--s4); color: rgba(240,238,234,.76); max-width: 40ch; font-size: .975rem; }
.lanza__datos {
display: flex; gap: var(--s5); flex-wrap: wrap; align-items: baseline;
margin-top: var(--s6); padding-top: var(--s4);
border-top: 1px solid rgba(240,238,234,.18);
}
.lanza__precio { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.lanza__ficha { font-family: var(--dato); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(240,238,234,.62); }
.lanza__cta { margin-top: var(--s5); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.btn--claro { background: var(--papel); color: var(--tinta); }
.btn--claro:hover { background: #FFF; }
.lanza__garantia { display: inline-flex; align-items: center; gap: var(--s2); font-size: .875rem; color: rgba(240,238,234,.8); }
.lanza__garantia::before {
content: "100%"; flex: none;
display: grid; place-items: center; width: 30px; height: 30px;
border: 1.5px solid var(--rojo); border-radius: 50%;
font-family: var(--dato); font-size: 7px; color: #E8767C;
transform: rotate(-8deg);
}
.lanza__vis {
order: -1;
position: relative; overflow: hidden;
background: var(--blanco);
display: grid; place-items: center;
padding: var(--s6) var(--s5);
isolation: isolate;
}
.lanza__vis::after {
content: ""; position: absolute; inset: -40% -10%;
background: linear-gradient(102deg, transparent 40%, rgba(255,255,255,.72) 50%, transparent 60%);
pointer-events: none; z-index: 2;
animation: recorrido 9s cubic-bezier(.45,0,.35,1) 1.4s infinite;
}
@keyframes recorrido {
0%   { transform: translateX(-78%); opacity: 0; }
7%   { opacity: 1; }
26%  { transform: translateX(78%); opacity: 0; }
100% { transform: translateX(78%); opacity: 0; }
}
.lanza__foto { width: min(430px, 88%); }
.lanza__foto img {
width: 100%; height: auto; max-height: 38vh; object-fit: contain;
transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) scale(var(--sc, 1));
transition: transform .5s cubic-bezier(.2,.7,.2,1);
will-change: transform;
}
.lanza__vis[data-activo] .lanza__foto img { transition: transform .12s linear; }
@media (min-width: 900px) {
.lanza__vis { order: 0; padding: var(--s7) var(--s6); }
.lanza__foto { width: min(480px, 92%); }
.lanza__foto img { max-height: none; }
}
.lanza__vis--foto { padding: 0; background: none; }
.lanza__vis--foto .lanza__foto { width: 100%; height: 100%; }
.lanza__vis--foto .lanza__foto picture { display: block; width: 100%; height: 100%; }
.lanza__vis--foto .lanza__foto img {
width: 100%; height: 100%; max-height: none;
object-fit: cover;
object-position: 62% center;
mix-blend-mode: normal;
aspect-ratio: 4/5;
}
@media (min-width: 900px) {
.lanza__vis--foto .lanza__foto img { aspect-ratio: auto; object-position: 72% center; }
}
@media (min-width: 1500px) {
.lanza__vis--foto .lanza__foto img { object-position: 60% center; }
}
.lanza__vis--foto::after { display: none; }
@media (prefers-reduced-motion: reduce) {
.lanza__vis::after { animation: none; opacity: 0; }
.lanza__foto img { transform: none; }
}
.lanza__vis--izq .lanza__foto img { object-position: 38% center; }
@media (min-width: 1500px) { .lanza__vis--izq .lanza__foto img { object-position: 45% center; } }
.como { background: var(--blanco); border-block: 1px solid var(--hilo); }
.como__g { display: grid; gap: var(--s6); }
@media (min-width: 860px) { .como__g { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
.como__i { padding-top: var(--s4); border-top: 1px solid var(--hilo); }
.como__i h3 { font-size: 1.05rem; margin-bottom: var(--s2); }
.como__i p { font-size: .925rem; color: var(--humo); }
.como__n { display: block; margin-bottom: var(--s3); font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .09em; text-transform: uppercase; color: var(--laca); }
.compra { background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); margin-top: var(--s5); }
.compra__s { padding: var(--s5); border-bottom: 1px solid var(--hilo); }
.compra__s:last-child { border-bottom: 0; }
.compra__s--cert { background: color-mix(in srgb, var(--papel) 55%, var(--blanco)); }
.cat { padding-block: var(--s5) var(--s8); }
.cat__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-bottom: var(--s3); }
.cat__barra { border-top: 1px solid var(--hilo); border-bottom: 1px solid var(--hilo); }
.cat__t { font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -.022em; }
.cat__n { font-family: var(--dato); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--humo); }
.cat__filtros { border-bottom: 1px solid var(--hilo); }
.cat__barra > .cat__filtros:last-child { border-bottom: 0; }
.cat__filtros__r {
display: flex; align-items: center; gap: var(--s3);
padding-block: var(--s4);
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
}
.cat__filtros__r::-webkit-details-marker { display: none; }
.cat__filtros__k {
font-family: var(--dato); font-size: 9.5px; letter-spacing: .11em;
text-transform: uppercase; color: var(--tinta); font-weight: 600;
}
.cat__filtros__l {
flex: 1 1 auto; min-width: 0;
font-size: .875rem; color: var(--humo);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat__filtros__v { flex: none; color: var(--humo); transition: transform .18s ease; }
.cat__filtros[open] .cat__filtros__v { transform: rotate(180deg); }
.cat__filtros__r:hover .cat__filtros__l,
.cat__filtros__r:hover .cat__filtros__v { color: var(--tinta); }
.cat__facetas { display: grid; gap: var(--s5); padding-bottom: var(--s5); }
@media (min-width: 760px) { .cat__facetas { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.faceta__t { font-family: var(--dato); font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--humo); margin-bottom: var(--s3); }
.faceta__o { display: flex; gap: 6px; flex-wrap: wrap; }
.op {
display: inline-flex; align-items: baseline; gap: 6px;
padding: 7px 13px; background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-pill);
font-size: .85rem; text-decoration: none; color: var(--tinta);
transition: border-color .15s ease;
}
.op:hover { border-color: var(--humo); }
.op[data-on] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.op i { font-family: var(--dato); font-size: 9px; font-style: normal; color: var(--humo); }
.op[data-on] i { color: rgba(240,238,234,.7); }
.cat__aplicados { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding-block: var(--s4); }
.cat__aplicados > span { font-family: var(--dato); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--humo); margin-right: var(--s2); }
.quitar { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 13px; background: var(--tinta); color: var(--papel); border-radius: var(--r-pill); font-size: .8rem; }
.quitar b { font-weight: 400; opacity: .65; }
.cat__orden { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-block: var(--s3); font-size: .875rem; color: var(--humo); }
.cat__grid { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--s6); }
@media (min-width: 860px) { .cat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
.pdp { padding-block: var(--s5) var(--s8); }
.pdp__g { display: grid; gap: var(--s6); }
@media (min-width: 940px) { .pdp__g { grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: start; } }
.pdp__mig { font-size: .8rem; color: var(--humo); margin-bottom: var(--s4); }
.pdp__mig a { text-decoration: none; }
.pdp__gal { display: grid; gap: var(--s3); }
.pdp__th { display: grid; grid-auto-flow: column; grid-auto-columns: 62px; gap: var(--s2); overflow-x: auto; min-width: 0; }
.pdp__t { aspect-ratio: 1; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); display: grid; place-items: center; min-width: 0; overflow: hidden; padding: 8%; }
.pdp__t[aria-current="true"] { border-color: var(--tinta); }
.pdp__big { order: -1; }
@media (min-width: 640px) {
.pdp__gal { grid-template-columns: 62px 1fr; }
.pdp__th { grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: 62px; align-content: start; overflow-x: visible; }
.pdp__big { order: 0; }
.pdp__gal:not(:has(.pdp__th)) { grid-template-columns: 1fr; }
}
.pdp__big { aspect-ratio: 4/5; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); display: grid; place-items: center; position: relative; padding: 7% 9%; }
.pdp__ph { position: absolute; top: var(--s3); left: var(--s3); font-family: var(--dato); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--humo); }
.pdp__nom { font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144; font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.022em; line-height: 1.03; }
.pdp__casa { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--humo); margin-bottom: var(--s3); }
.pdp__val { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: .875rem; }
.pdp__val a { color: var(--humo); }
.estrellas { color: var(--tinta); letter-spacing: .08em; font-size: .8rem; }
.pdp__precio { margin-top: var(--s5); display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.pdp__ahora { font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; }
.pdp__antes { color: var(--humo); text-decoration: line-through; }
.pdp__ahorro { font-family: var(--dato); font-size: .7rem; letter-spacing: .05em; color: var(--laca); }
.pdp__agotado {
margin: 0;
font-size: 1.05rem;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 600;
color: var(--humo);
}
.pdp__unit { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; color: var(--humo); margin-top: 6px; }
.pdp__cuotas { margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); font-size: .9rem; display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.pdp__cuotas b { font-weight: 600; }
.pdp__cuotas i { font-style: normal; font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.pdp__compra { margin-top: var(--s5); display: grid; gap: var(--s3); }
.pdp__fila { display: grid; grid-template-columns: 108px 1fr; gap: var(--s3); }
.qty { display: flex; align-items: center; justify-content: space-between; height: 52px; padding-inline: var(--s3); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md); }
.qty span { font-size: .95rem; font-weight: 600; }
.qty button { color: var(--humo); font-size: 1.1rem; line-height: 1; padding: 4px 6px; }
.pdp__entrega { margin-top: var(--s4); font-size: .9rem; color: var(--tinta); }
.pdp__entrega b { font-weight: 600; }
.notas { margin-top: var(--s7); }
.notas__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--humo); margin-bottom: var(--s4); }
.notas__l { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.notas__i {
background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-pill);
padding: 7px 15px; font-size: .875rem;
}
.notas__n { font-weight: 600; letter-spacing: -.01em; }
.notas__d { color: var(--humo); }
.dudas { margin-top: var(--s6); }
.dudas__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--humo); margin-bottom: var(--s4); }
.dudas__d {
background: var(--blanco); border: 1px solid var(--hilo);
border-radius: var(--r-md); margin-bottom: 6px;
}
.dudas__q {
display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
padding: 12px var(--s4);
font-size: .925rem; font-weight: 600; letter-spacing: -.01em;
cursor: pointer; list-style: none;
}
.dudas__q::-webkit-details-marker { display: none; }
.dudas__q::after {
content: "+"; flex: 0 0 auto;
font-family: var(--dato); font-size: 1.05rem; font-weight: 400; line-height: 1;
color: var(--humo); transition: transform .18s ease;
}
.dudas__d[open] .dudas__q::after { transform: rotate(45deg); }
.dudas__d[open] .dudas__q { padding-bottom: 6px; }
.dudas__r {
margin: 0; padding: 0 var(--s4) 14px;
font-size: .9rem; line-height: 1.55; color: var(--humo);
}
.ficha-t { margin-top: var(--s7); }
.ficha-t__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--humo); margin-bottom: var(--s4); }
.ficha-t__l {
margin: 0;
background: var(--blanco);
border: 1px solid var(--hilo);
border-radius: var(--r-md);
padding: 4px var(--s5);
}
.ficha-t__f {
display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: var(--s4);
align-items: baseline;
padding-block: var(--s3);
border-top: 1px solid var(--hilo);
}
.ficha-t__f:first-child { border-top: 0; }
.ficha-t__k { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.ficha-t__v { margin: 0; font-size: .925rem; font-weight: 500; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ficha-t__seg { display: flex; gap: 5px; width: 84px; }
.ficha-t__seg i { height: 3px; flex: 1; background: var(--hilo); border-radius: 2px; }
.ficha-t__seg i[data-on] { background: var(--tinta); }
.casa-cab { background: var(--tinta); color: var(--papel); padding-block: var(--s7) var(--s8); }
.casa-cab__meta { font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(240,238,234,.6); }
.casa-cab__n {
font-family: var(--texto); font-weight: 700;
font-size: clamp(2.4rem, 8vw, 5.2rem);
letter-spacing: .12em; text-transform: uppercase; line-height: 1;
margin: var(--s4) 0 0; margin-right: -.12em;
}
.casa-cab__g { display: grid; gap: var(--s6); margin-top: var(--s6); }
@media (min-width: 860px) { .casa-cab__g { grid-template-columns: 1.35fr 1fr; gap: var(--s8); align-items: start; } }
.casa-cab__txt { color: rgba(240,238,234,.8); font-size: 1.02rem; max-width: 52ch; }
.casa-cab__datos { display: grid; gap: 0; }
.casa-cab__f {
display: flex; justify-content: space-between; gap: var(--s4);
padding-block: 9px; border-top: 1px solid rgba(240,238,234,.18);
font-family: var(--dato); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
}
.casa-cab__f:last-child { border-bottom: 1px solid rgba(240,238,234,.18); }
.casa-cab__f span:first-child { color: rgba(240,238,234,.6); }
.carro { padding-block: var(--s5) var(--s8); }
.carro__g { display: grid; gap: var(--s6); }
@media (min-width: 940px) { .carro__g { grid-template-columns: 1.5fr 1fr; gap: var(--s8); align-items: start; } }
.barra { background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); padding: var(--s4); margin-bottom: var(--s5); }
.barra__t { font-size: .9rem; margin-bottom: var(--s3); }
.barra__t b { font-weight: 600; }
.barra__p { height: 4px; background: var(--hilo); border-radius: 4px; overflow: hidden; }
.barra__p i { display: block; height: 100%; width: 72%; background: var(--tinta); }
.barra--ok .barra__t b::before { content: "✓ "; color: var(--laca); }
.item { display: grid; grid-template-columns: 78px 1fr; gap: var(--s4); padding-block: var(--s5); border-top: 1px solid var(--hilo); }
.item__im { aspect-ratio: 3/4; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); display: grid; place-items: center; padding: 8%; }
.item__marca { font-family: var(--dato); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); }
.item__nom { font-size: 1rem; font-weight: 500; margin-top: 3px; }
.item__ml { font-family: var(--dato); font-size: 9.5px; letter-spacing: .05em; color: var(--humo); margin-top: 4px; }
.item__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s4); }
.qty--sm { height: 40px; width: 104px; }
.item__precio { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.item__quitar { font-size: .8rem; color: var(--humo); text-decoration: underline; text-underline-offset: 3px; }
.bump { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4); margin-top: var(--s5); background: var(--blanco); border: 1px dashed var(--humo); border-radius: var(--r-sm); }
.bump__ck { width: 20px; height: 20px; flex: none; margin-top: 2px; border: 1.5px solid var(--tinta); border-radius: 3px; display: grid; place-items: center; font-size: 12px; color: var(--tinta); }
.bump__t { display: block; font-weight: 600; font-size: .95rem; }
.bump__d { display: block; font-size: .875rem; color: var(--humo); margin-top: 3px; }
.bump__p { display: block; font-family: var(--dato); font-size: 10px; letter-spacing: .06em; color: var(--laca); margin-top: 6px; }
.fondo { position: fixed; inset: 0; background: rgba(28,23,20,.42); z-index: 60; }
.cajon {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
width: min(400px, 92vw);
background: var(--papel);
border-left: 1px solid var(--hilo);
display: flex; flex-direction: column;
}
.cajon__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5); border-bottom: 1px solid var(--hilo); }
.cajon__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .12em; text-transform: uppercase; }
.cajon__x { font-size: 1.3rem; line-height: 1; color: var(--humo); padding: 4px 8px; }
.cajon__aviso { padding: var(--s3) var(--s5); background: var(--blanco); border-bottom: 1px solid var(--hilo); font-size: .85rem; }
.cajon__aviso b::before { content: "✓ "; color: var(--laca); }
.cajon__cuerpo { flex: 1; overflow-y: auto; padding-inline: var(--s5); }
.cajon__pie { padding: var(--s5); border-top: 1px solid var(--hilo); background: var(--blanco); }
.cajon__tot { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s4); }
.cajon__tot b { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.mini { display: grid; grid-template-columns: 58px 1fr; gap: var(--s3); padding-block: var(--s4); border-bottom: 1px solid var(--hilo); }
.mini:last-of-type { border-bottom: 0; }
.mini__im { aspect-ratio: 3/4; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); display: grid; place-items: center; padding: 8%; }
.mini__marca { font-family: var(--dato); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); }
.mini__nom { font-size: .925rem; font-weight: 500; margin-top: 2px; }
.mini__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); }
.mini__precio { font-weight: 600; font-size: .95rem; }
.qty--xs { height: 32px; width: 88px; font-size: .85rem; }
.cta-g { padding-block: var(--s5) var(--s8); display: grid; gap: var(--s6); }
@media (min-width: 940px) { .cta-g { grid-template-columns: 232px minmax(0, 1fr); gap: var(--s8); align-items: start; } }
.menu-c { display: grid; gap: 0; border-top: 1px solid var(--hilo); }
.menu-c a { padding-block: var(--s3); border-bottom: 1px solid var(--hilo); text-decoration: none; font-size: .925rem; display: flex; justify-content: space-between; gap: var(--s3); }
.menu-c a[aria-current] { font-weight: 600; }
.menu-c a[aria-current]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rojo); align-self: center; }
.puntos { margin-top: var(--s5); background: var(--tinta); color: var(--papel); border-radius: var(--r-sm); padding: var(--s4); }
.puntos__n { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; }
.puntos__l { font-family: var(--dato); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: rgba(240,238,234,.62); }
.puntos__eq { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid rgba(240,238,234,.18); font-size: .85rem; color: rgba(240,238,234,.8); }
.pedido { background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); }
.pedido__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s5); border-bottom: 1px solid var(--hilo); }
.pedido__id { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--humo); }
.pedido__n { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; margin-top: 3px; }
.estado { font-family: var(--dato); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--r-pill); background: var(--tinta); color: var(--papel); }
.pedido__b { padding: var(--s5); }
.pedido__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); margin-bottom: var(--s5); }
.ruta { display: flex; position: relative; margin-bottom: var(--s5); }
.ruta::before { content: ""; position: absolute; top: 13px; left: 12%; right: 12%; height: 1px; background: var(--hilo); }
.paso { flex: 1; text-align: center; position: relative; }
.paso__p { width: 26px; height: 26px; margin: 0 auto 10px; border-radius: 50%; background: var(--papel); border: 1px solid var(--hilo); display: grid; place-items: center; font-size: 11px; color: transparent; }
.paso__l { font-family: var(--dato); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--humo); line-height: 1.35; }
.paso__f { display: block; font-family: var(--dato); font-size: 8.5px; color: var(--humo); opacity: .75; margin-top: 3px; }
.paso[data-ok] .paso__p { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.paso[data-ok] .paso__l { color: var(--tinta); font-weight: 500; }
.paso[data-ahora] .paso__p { background: var(--tinta); border-color: var(--tinta); color: var(--papel); box-shadow: 0 0 0 4px rgba(28,23,20,.12); }
.paso[data-ahora] .paso__l { color: var(--tinta); font-weight: 600; }
.paso[data-alerta] .paso__p { background: var(--laca); border-color: var(--laca); color: #fff; }
.paso[data-alerta] .paso__l { color: var(--laca); font-weight: 600; }
.guia { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: center; padding: var(--s4); background: var(--papel); border-radius: var(--r-sm); font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; }
.guia b { color: var(--tinta); font-weight: 400; }
.guia span { color: var(--humo); text-transform: uppercase; }
.pedido__acc { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.pedido__items { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--hilo); }
.ck { min-height: 100vh; background: var(--papel); }
.ck__top { border-bottom: 1px solid var(--hilo); background: var(--papel); }
.ck__top .wrap {
display: grid; grid-template-columns: auto 1fr; align-items: center;
min-height: 104px; gap: var(--s4);
}
@media (min-width: 860px) {
.ck__top .wrap { grid-template-columns: 1fr auto 1fr; }
}
.ck__marca { display: inline-flex; justify-self: start; }
.ck__marca img { display: block; height: 60px; width: auto; }
@media (max-width: 639px) { .ck__marca img { height: 46px; } }
.ck__pasos { display: none; }
@media (min-width: 860px) {
.ck__pasos { display: flex; align-items: center; gap: var(--s4); justify-self: center; }
}
.ck__paso {
display: inline-flex; align-items: baseline; gap: 9px;
font-family: var(--dato); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--humo); text-decoration: none;
white-space: nowrap; padding-bottom: 7px; border-bottom: 1px solid transparent;
transition: color .18s ease, border-color .18s ease;
}
.ck__num {
font-size: 9px; letter-spacing: .1em; color: var(--tenue, var(--humo));
font-variant-numeric: tabular-nums; opacity: .75;
}
.ck__paso--hecho:hover { color: var(--tinta); }
.ck__paso--hecho:hover .ck__num { opacity: 1; }
.ck__paso--aqui { color: var(--tinta); border-bottom-color: var(--laca); }
.ck__paso--aqui .ck__num { color: var(--laca); opacity: 1; }
.ck__hilo { width: 44px; height: 1px; background: var(--hilo); flex: none; align-self: center; }
.ck__seg {
justify-self: end;
font-family: var(--dato); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--tinta);
display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.ck__seg svg { width: 15px; height: 15px; flex: none; color: var(--tinta); opacity: .85; }
.ck__util { border-bottom: 1px solid var(--hilo); background: var(--papel); }
.ck__util .wrap {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
padding-block: var(--s3);
font-size: .875rem; color: var(--humo);
}
.ck__util .showcoupon,
.ck__util .showlogin {
display: inline-flex; align-items: center; height: 30px; padding-inline: var(--s3);
margin-left: var(--s2);
background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-pill);
font-family: var(--dato); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: var(--tinta); text-decoration: none; white-space: nowrap;
transition: border-color .18s ease, background .18s ease;
}
.ck__util .showcoupon:hover,
.ck__util .showlogin:hover { border-color: var(--tinta); background: var(--papel); }
.ck__util .woocommerce-form-login-toggle { display: none; }
.ck__util .woocommerce-form-login,
.ck__util .checkout_coupon {
flex-basis: 100%; margin: var(--s3) 0 0;
padding: var(--s5); background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-md);
}
.ck__util .checkout_coupon {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
.ck__util .checkout_coupon .clear { display: none; }
.ck__util .checkout_coupon .form-row { margin: 0; }
.ck__util .checkout_coupon .form-row-first { flex: 1 1 280px; }
.ck__util .woocommerce-form-login p { margin: 0 0 var(--s3); }
.ck__util .woocommerce-form-login label {
display: block; margin-bottom: 5px;
font-family: var(--dato); font-size: 9px; letter-spacing: .08em;
text-transform: uppercase; color: var(--humo);
}
.ck__util .woocommerce-form-login input[type="text"],
.ck__util .woocommerce-form-login input[type="password"],
.ck__util .checkout_coupon input[type="text"] {
width: 100%; height: 48px; padding-inline: var(--s3);
background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md);
font-family: inherit; font-size: 1rem; color: var(--tinta);
}
.ck__util .woocommerce-form-login input:focus,
.ck__util .checkout_coupon input:focus { outline: none; border-color: var(--tinta); }
.ck__util .checkout_coupon input::placeholder { color: #A7ABA3; }
.ck__util .woocommerce-form-login .woocommerce-form-login__submit,
.ck__util .checkout_coupon button {
display: inline-flex; align-items: center; justify-content: center;
height: 48px; padding-inline: var(--s6); border: 0; cursor: pointer;
background: var(--tinta); color: var(--papel); border-radius: var(--r-md);
font-family: inherit; font-size: .95rem; font-weight: 600; white-space: nowrap;
transition: background .18s ease;
}
.ck__util .woocommerce-form-login .woocommerce-form-login__submit:hover,
.ck__util .checkout_coupon button:hover { background: #2C2F29; }
.ck__util .woocommerce-form-login .form-row-first,
.ck__util .woocommerce-form-login .form-row-last { display: block; width: auto; }
@media (min-width: 640px) {
.ck__util .woocommerce-form-login .form-row-first,
.ck__util .woocommerce-form-login .form-row-last {
display: inline-block; width: calc(50% - var(--s2)); vertical-align: top;
}
.ck__util .woocommerce-form-login .form-row-first { margin-right: var(--s3); }
}
.ck__util .woocommerce-form-login .lost_password { font-size: .85rem; }
.ck__g .blockUI.blockOverlay {
background: var(--papel) !important;
opacity: .45 !important;
cursor: default !important;
}
.ck__g .res,
.ck__g #payment { position: relative; }
.ck__g .res:has(> .blockOverlay)::after,
.ck__g #payment:has(> .blockOverlay)::after {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
z-index: 1001; border-radius: var(--r-pill);
background: linear-gradient(90deg, transparent, var(--laca), transparent);
animation: pfp-espera 1.1s ease-in-out infinite;
}
@keyframes pfp-espera {
0%   { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.ck__g .res:has(> .blockOverlay)::after,
.ck__g #payment:has(> .blockOverlay)::after { animation: none; opacity: .6; }
}
.ck__util .woocommerce-form-coupon-toggle { order: 1; }
.ck__util .woocommerce-cart-notice,
.ck__util #yith-par-message-cart,
.ck__util #yith-par-message-checkout { order: 2; }
.ck__util .woocommerce-notices-wrapper { order: 3; }
.ck__util .checkout_coupon,
.ck__util .woocommerce-form-login { order: 4; }
.ck__util > .wrap > :empty { display: none; }
.ck__util .barra,
.ck__util .woocommerce-info,
.ck__util .woocommerce-cart-notice,
.ck__util #yith-par-message-cart,
.ck__util #yith-par-message-checkout,
.ck__util #yith-par-message-reward-cart {
background: none; border: 0; padding: 0; margin: 0; width: auto; display: block;
}
.ck__util .woocommerce-info::before,
.ck__util .woocommerce-cart-notice::before,
.ck__util #yith-par-message-cart::before,
.ck__util #yith-par-message-checkout::before { content: none; }
.ck__util strong { color: var(--tinta); font-weight: 600; }
.ck__util p { margin: 0; }
.ck__util .woocommerce-form-coupon-toggle { margin-right: auto; }
.ck__util a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--hilo); }
.ck__util a:hover { border-bottom-color: var(--tinta); }
.ck__util .woocommerce-notices-wrapper { flex-basis: 100%; }
@media (max-width: 639px) {
.ck__util .wrap { flex-direction: column; align-items: flex-start; }
.ck__util .woocommerce-form-coupon-toggle { margin-right: 0; }
}
.ck__g { display: grid; gap: var(--s6); padding-block: var(--s6) var(--s8); }
@media (min-width: 940px) {
.ck__g { grid-template-columns: 1.08fr .92fr; gap: var(--s8); align-items: start; }
.ck__col--pago { grid-column: 1; }
}
.ck__col .woocommerce-billing-fields { margin-bottom: var(--s5); }
#ship-to-different-address {
margin: 0 0 var(--s3);
font-family: var(--dato); font-size: 13px; font-weight: 600;
letter-spacing: 0; text-transform: none; color: var(--tinta);
}
#ship-to-different-address label { display: flex; align-items: center; gap: var(--s2); cursor: pointer; }
#ship-to-different-address input[type="checkbox"] {
accent-color: var(--tinta); width: 15px; height: 15px; flex: none;
}
@media (min-width: 940px) { .ck__g { row-gap: var(--s5); } }
.ck__col .woocommerce-additional-fields .campo:last-child,
.ck__col .woocommerce-additional-fields .form-row:last-child { margin-bottom: 0; }
#payment .place-order { display: flex; flex-direction: column; gap: var(--s4); }
#payment .place-order > *, #payment .place-order p { margin: 0; }
#payment .place-order .pdp__regalo { order: 1; }
#payment .place-order #perfumaste_whatsapp_optins { order: 2; }
#payment .place-order .woocommerce-terms-and-conditions-wrapper { order: 3; }
#payment .place-order #place_order { order: 4; }
#payment .pdp__regalo,
#payment #perfumaste_whatsapp_optins {
background: var(--blanco); border: 1px solid var(--hilo);
border-radius: var(--r-md); padding: var(--s3) var(--s4);
}
#payment .pdp__regalo { font-size: 13px; }
#payment .pdp__regalo .pdp__regalo-f { width: 64px; height: 64px; }
#payment #perfumaste_whatsapp_optins { display: flex; flex-direction: column; gap: var(--s2); }
#payment #perfumaste_whatsapp_optins h3 {
font-family: var(--dato); font-size: 10px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--humo);
}
#payment .pf-wa-option label {
display: flex; align-items: flex-start; gap: var(--s2);
font-size: 13px; line-height: 1.5; color: var(--tinta); cursor: pointer;
}
#payment .woocommerce-terms-and-conditions-wrapper { display: flex; flex-direction: column; gap: var(--s2); }
#payment .woocommerce-privacy-policy-text p { font-size: 12px; line-height: 1.6; color: var(--humo); }
#payment .place-order a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--hilo); }
#payment .place-order a:hover { border-bottom-color: var(--tinta); }
#payment .woocommerce-form__label-for-checkbox {
display: flex; align-items: flex-start; gap: var(--s2);
font-size: 13px; line-height: 1.5; color: var(--tinta); cursor: pointer;
}
#payment .woocommerce-terms-and-conditions {
background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm);
padding: var(--s3) var(--s4); font-size: 12px; line-height: 1.6; color: var(--humo);
}
#payment .woocommerce-terms-and-conditions p { margin: 0 0 var(--s2); }
#payment .place-order input[type="checkbox"] {
accent-color: var(--tinta); width: 15px; height: 15px; flex: none; margin-top: 2px;
}
.campo { display: grid; gap: 5px; margin-bottom: var(--s3); }
.campo > label { font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.campo input, .campo select {
height: 48px; padding-inline: var(--s3);
background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md);
font-size: 1rem;
}
.campo input::placeholder { color: #A7ABA3; }
.campo__ayuda { font-size: .8rem; color: var(--humo); }
.par { display: grid; gap: var(--s3); }
@media (min-width: 560px) { .par { grid-template-columns: 1fr 1fr; } }
.ck__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); margin-bottom: var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--hilo); }
.ck__blq { margin-bottom: var(--s7); }
.pago { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pago__i {
display: grid; grid-template-columns: auto 1fr; align-items: center;
column-gap: var(--s3); padding: var(--s4);
background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md);
}
.pago__i:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.pago__i:focus-within { outline: 2px solid var(--tinta); outline-offset: 2px; }
.pago__i > input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.pago__r { width: 17px; height: 17px; border: 1px solid var(--humo); border-radius: 50%; flex: none; display: grid; place-items: center; }
.pago__i:has(input:checked) .pago__r { border-color: var(--tinta); }
.pago__i:has(input:checked) .pago__r::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tinta); }
.pago__o {
display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
margin: 0; cursor: pointer; font-weight: 600; font-size: .95rem;
}
.pago__o img { height: 20px; width: auto; margin-left: auto; }
.pago__d { grid-column: 1 / -1; margin-top: var(--s3); font-size: .85rem; color: var(--humo); }
.pago__d p:last-child { margin-bottom: 0; }
.pago__cifra { color: var(--tinta); font-weight: 600; }
.pago__tag { margin-left: auto; font-family: var(--dato); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--laca); white-space: nowrap; }
.pago { list-style: none; margin: 0; padding: 0; }
.res { background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); padding: var(--s5); position: sticky; top: 78px; }
.res__i { display: flex; gap: var(--s3); padding-bottom: var(--s4); border-bottom: 1px solid var(--hilo); margin-bottom: var(--s4); }
.res__im { width: 62px; aspect-ratio: 3/4; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); flex: none; display: grid; place-items: center; padding: 6px; overflow: hidden; }
.res__im img { width: 100%; height: 100%; object-fit: contain; display: block; }
.res__l { display: flex; justify-content: space-between; gap: var(--s3); font-size: .9rem; padding-block: 5px; }
.res__l span:last-child { font-variant-numeric: tabular-nums; }
.res__tot { display: flex; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); margin-top: var(--s3); border-top: 1px solid var(--hilo); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.res__nota { margin-top: var(--s4); font-size: .85rem; color: var(--humo); }
}
@layer views {
.anuncio { background: var(--tinta); color: var(--papel); }
.anuncio__in {
display: flex; justify-content: center; align-items: center;
gap: var(--s4); min-height: 34px; text-align: center;
}
.anuncio__in .dato { color: color-mix(in srgb, var(--papel) 86%, transparent); }
@media (max-width: 639px) {
.anuncio__in { position: relative; display: block; min-height: 34px; }
.anuncio__in .dato {
position: absolute; inset: 0;
display: grid; place-items: center; text-align: center; white-space: nowrap;
opacity: 0; animation: pfp-anuncio 12s infinite;
}
.anuncio__in .dato:nth-child(2) { animation-delay: 4s; }
.anuncio__in .dato:nth-child(3) { animation-delay: 8s; }
@keyframes pfp-anuncio {
0%, 1.5%  { opacity: 0; }
3%, 31.5% { opacity: 1; }
33%,100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.anuncio__in .dato { animation: none; opacity: 0; }
.anuncio__in .dato:first-child { opacity: 1; }
}
}
.pie { margin-top: var(--s9); padding-block: var(--s7) var(--s5); border-top: 1px solid var(--hilo); }
.pie__nav, .pie__legal {
display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
margin: 0; padding: 0; list-style: none; font-size: .875rem;
}
.pie__nav a, .pie__legal a { color: var(--humo); text-decoration: none; }
.pie__nav a:hover, .pie__legal a:hover { color: var(--tinta); }
.pie__legal { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hilo); font-size: .75rem; }
.pie__sello { margin-top: var(--s6); color: var(--humo); }
.card__btn { margin-top: var(--s3); }
.pfm-wa-btn {
position: fixed; right: var(--s4); bottom: var(--s4); z-index: 90;
display: inline-flex; align-items: center; gap: var(--s2);
padding: var(--s3) var(--s4); border-radius: var(--r-pill);
background: #0B7C46; color: #fff; font-size: .875rem; line-height: 1;
text-decoration: none;
}
.pfm-wa-btn__text { display: inline-flex; align-items: center; gap: var(--s2); }
.pfm-wa-btn img { width: 20px; height: 20px; }
body:has(.pfp-fab-wrap) .pfm-wa-btn { bottom: 88px; }
@media (max-width: 639px) {
.pfm-wa-btn { padding: var(--s3); }
body:has(.pfp-fab-wrap) .pfm-wa-btn { bottom: 76px; }
.pfm-wa-btn__text { font-size: 0; gap: 0; }
.pfm-wa-btn img { width: 24px; height: 24px; }
}
.woocommerce-checkout .pfm-wa-btn { display: none; }
}
.card__nom a { color: inherit; text-decoration: none; }
.card__nom a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cat__seo {
max-width: 68ch;
margin-top: var(--s8);
padding-top: var(--s5);
border-top: 1px solid var(--hilo);
color: var(--humo);
font-size: .925rem;
}
.cat__seo > * + * { margin-top: var(--s3); }
.cat__seo strong, .cat__seo b { color: var(--tinta); font-weight: 600; }
.cat__seo h2, .cat__seo h3 { color: var(--tinta); font-size: 1.05rem; margin-top: var(--s5); }
.cat__orden form { margin: 0; }
.cat__orden select {
font: inherit;
color: var(--tinta);
font-weight: 600;
background: transparent;
border: 0;
border-bottom: 1px solid var(--hilo);
padding: 2px 18px 2px 2px;
cursor: pointer;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 6px center, right 1px center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.cat__orden select:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.cat__vacio {
display: grid;
place-items: center;
gap: var(--s4);
padding-block: var(--s9);
text-align: center;
color: var(--humo);
}
.woocommerce-pagination { margin-top: var(--s7); }
.woocommerce-pagination ul { list-style: none; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.woocommerce-pagination a,
.woocommerce-pagination span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; height: 40px; padding: 0 12px;
border: 1px solid var(--hilo); border-radius: var(--r-pill);
background: var(--blanco); color: var(--tinta);
text-decoration: none; font-size: .875rem;
}
.woocommerce-pagination a:hover { border-color: var(--humo); }
.woocommerce-pagination .current { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.casa-cab__txt > * + * { margin-top: var(--s3); }
.casa-cab__txt strong, .casa-cab__txt b { color: var(--papel); }
.screen-reader-text {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pdp__compra form.cart {
display: flex; align-items: center; gap: var(--s3);
flex-wrap: wrap; margin: 0;
}
.pdp__compra form.cart > * { flex: 1 1 100%; min-width: 0; }
.pdp__compra form.cart .quantity {
flex: 0 0 auto;
display: inline-flex; align-items: center;
height: 52px; padding-inline: var(--s2);
background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-md);
}
.pdp__compra form.cart .quantity input {
width: 62px; height: 100%; padding: 0 4px;
border: 0; background: transparent; text-align: center;
font: inherit; font-weight: 600; color: var(--tinta);
}
.pdp__compra form.cart .single_add_to_cart_button {
flex: 1 1 240px;
display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
height: 52px; padding-inline: var(--s6);
background: var(--tinta); color: var(--papel);
border: 0; border-radius: var(--r-md);
font-size: .95rem; font-weight: 600; letter-spacing: -.005em;
text-decoration: none; cursor: pointer;
transition: background .18s ease;
}
.pdp__compra form.cart .single_add_to_cart_button:hover { background: #2C2F29; }
.pdp__compra form.cart .dsfps-add-to-cart-id ~ .single_add_to_cart_button,
.pdp__compra form.cart .single_add_to_cart_button.dsfps-free-sample-btn {
flex: 1 1 100%;
width: 100% !important;
display: block;
text-align: center;
white-space: normal;
line-height: 1.35;
height: auto;
min-height: 44px;
padding: 10px var(--s4);
background: transparent;
color: var(--tinta) !important;
border: 1px solid var(--hilo);
font-weight: 500;
}
.pdp__compra form.cart .dsfps-add-to-cart-id ~ .single_add_to_cart_button:hover,
.pdp__compra form.cart .single_add_to_cart_button.dsfps-free-sample-btn:hover {
background: var(--blanco); border-color: var(--humo);
}
.pdp__compra form.cart .single_add_to_cart_button #fps-sample-btn-price,
.pdp__compra form.cart .dsfps-free-sample-btn #fps-sample-btn-price {
display: inline !important;
white-space: nowrap;
}
.pdp__compra form.cart .dsfps-sample-btn-wrap {
flex: 1 1 100%;
width: 100%;
margin: 0;
padding: 0 !important;
}
.pdp__compra form.cart .single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; }
.pdp__compra .stock { font-family: var(--dato); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.pdp__compra .stock.out-of-stock { color: var(--rojo); }
.pdp__t { border: 1px solid var(--hilo); background: var(--blanco); padding: 6px; cursor: pointer; border-radius: var(--r-sm); }
.pdp__t[aria-current="true"] { border-color: var(--tinta); }
.pdp__t:hover { border-color: var(--humo); }
.pdp__desc, .pdp__resenas { max-width: 68ch; margin-top: var(--s8); }
.pdp__desc > * + * { margin-top: var(--s3); }
.pdp__desc h2 { margin-bottom: var(--s4); }
.pdp__resenas { padding-top: var(--s6); border-top: 1px solid var(--hilo); }
.pdp .pfm-badges { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.pdp .pfm-badge {
font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
color: var(--humo); background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-pill);
padding: 5px 11px;
}
.compra .yith-par-message { display: none !important; }
.compra .yith-par-message-desactivado {
display: block;
margin-top: var(--s4); padding-top: var(--s4);
border-top: 1px solid var(--hilo);
font-size: .875rem; line-height: 1.45; color: var(--humo);
background: none !important;
}
.compra .yith-par-message img { float: left; width: 20px !important; height: 20px; max-width: 20px !important; margin: 2px 10px 0 0 !important; }
.compra .yith-par-message strong { color: var(--tinta); font-weight: 600; }
.compra .yith-par-message .product_point {
font-family: var(--dato); font-size: 1rem; font-weight: 500;
color: var(--tinta); letter-spacing: -.02em;
}
.compra .yith-par-message em { font-style: normal; font-size: .8rem; opacity: .75; }
.fondo, .cajon { transition: opacity .22s ease, transform .24s cubic-bezier(.22,.61,.36,1); }
.fondo[hidden], .cajon[hidden] { display: none; }
.fondo:not([data-abierto]),
.cajon:not([data-abierto]) {
pointer-events: none;
visibility: hidden;
transition: opacity .22s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s linear .24s;
}
.fondo[data-abierto],
.cajon[data-abierto] { visibility: visible; transition-delay: 0s; }
.fondo,
.cajon__cab,
.cajon__pie,
.compra-fija,
.qty button,
.qty__b {
user-select: none;
-webkit-user-select: none;
}
img,
a,
picture,
svg {
-webkit-user-drag: none;
}
img {
user-select: none;
-webkit-user-select: none;
}
.fondo { opacity: 0; }
.fondo[data-abierto] { opacity: 1; }
.cajon { transform: translateX(100%); }
.cajon[data-abierto] { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
.fondo, .cajon { transition: none; }
.cajon { transform: none; }
}
.cajon__datos { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.qty button { background: none; border: 0; cursor: pointer; font: inherit; }
.qty button:hover { color: var(--tinta); }
.single_add_to_cart_button.loading { opacity: .6; pointer-events: none; }
.mini__tag {
display: inline-block; margin-left: 7px; vertical-align: 2px;
font-family: var(--dato); font-size: 8.5px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase;
color: var(--papel); background: var(--tinta);
border-radius: var(--r-pill);
padding: 3px 9px;
}
.mini[data-muestra] .mini__im { padding: 26%; }
.dsfps-ajax-success-msg,
.dsfps_added_to_cart,
.dsfps-sample-added-notice { display: none !important; }
.pdp__compra form.cart .qty {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: space-between;
height: 52px; padding-inline: var(--s2);
background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-md);
}
.pdp__compra form.cart .qty .quantity { border: 0; background: none; height: auto; padding: 0; }
.pdp__compra form.cart .qty input {
width: 46px; height: 100%; padding: 0;
border: 0; background: transparent; text-align: center;
font: inherit; font-weight: 600; color: var(--tinta);
-moz-appearance: textfield;
}
.pdp__compra form.cart .qty input::-webkit-outer-spin-button,
.pdp__compra form.cart .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__b {
display: grid; place-items: center;
width: 30px; height: 100%;
background: none; border: 0; cursor: pointer;
font-size: 1.15rem; line-height: 1; color: var(--humo);
transition: color .15s ease;
}
.qty__b:hover { color: var(--tinta); }
.qty__b:disabled { opacity: .3; cursor: not-allowed; }
.compra__s--premio { background: color-mix(in srgb, var(--papel) 55%, var(--blanco)); }
.premio { display: flex; align-items: center; gap: var(--s4); }
.premio__n {
flex: 0 0 auto;
font-family: var(--dato); font-size: 1.35rem; font-weight: 500;
letter-spacing: -.03em; color: var(--tinta);
padding-right: var(--s4);
border-right: 1px solid var(--hilo);
}
.premio__t { font-size: .925rem; font-weight: 600; color: var(--tinta); }
.premio__d { font-size: .8rem; color: var(--humo); margin-top: 3px; }
@media (max-width: 420px) {
.premio { gap: var(--s3); }
.premio__n { font-size: 1.15rem; padding-right: var(--s3); }
}
app-simulator,
addi-product-widget {
display: block;
width: 100%;
margin-top: var(--s3);
padding: 8px 16px;
background: transparent;
border: 1px solid #00369C;
border-radius: 8px;
font-size: 1rem;
}
.pdp__val + app-simulator,
.pdp__val + addi-product-widget { margin-top: var(--s4); }
app-simulator .simulador-box {
border: 0 !important;
border-radius: 0 !important;
background: none !important;
padding: 0 !important;
font-family: var(--texto) !important;
}
app-simulator:empty {
display: none;
}
.compra { display: flex; flex-direction: column; }
.compra__s:has(.pdp__precio)  { order: 1; }
.compra__s:has(.pdp__compra)  { order: 2; }
.compra__s--cert              { order: 3; }
.compra__s--premio            { order: 4; }
@media (max-width: 859px) {
.pdp__big { aspect-ratio: 1 / 1; }
}
.compra-fija {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
background: var(--blanco);
border-top: 1px solid var(--hilo);
box-shadow: 0 -14px 30px -22px rgba(0, 0, 0, .45);
padding: var(--s3) var(--s4);
padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
transform: translateY(100%);
transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.compra-fija[hidden] { display: none; }
.compra-fija[data-visible] { transform: translateY(0); }
.compra-fija__in {
display: flex; align-items: center; gap: var(--s4);
width: 100%; max-width: var(--ancho); margin-inline: auto;
}
@media (min-width: 900px) { .compra-fija { padding-inline: var(--s6); } }
.compra-fija__d  { min-width: 0; flex: 0 1 auto; }
.compra-fija__ok { display: none; }
@media (min-width: 1000px) {
.compra-fija__ok {
display: flex; flex: 1 1 auto; justify-content: center; align-items: center;
min-width: 0;
gap: clamp(var(--s5), 3vw, var(--s7));
margin-inline: clamp(var(--s4), 3vw, var(--s7));
}
.compra-fija__ok span {
display: inline-flex; align-items: center;
padding-bottom: 5px;
border-bottom: 1.5px solid var(--laca);
font-family: var(--texto); font-size: .875rem; font-weight: 600;
letter-spacing: -.005em;
color: var(--tinta); white-space: nowrap;
}
}
.compra-fija__im {
flex: 0 0 auto; width: 52px; height: 52px;
object-fit: contain;
background: none; border: 0; border-radius: 0; padding: 0;
}
@media (max-width: 479px) { .compra-fija__im { display: none; } }
.compra-fija__nom {
display: block;
font-family: var(--display);
font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 24;
font-size: .95rem; font-weight: 500; letter-spacing: -.01em;
color: var(--tinta);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compra-fija__p { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.compra-fija__p b { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }
.compra-fija__p i {
font-family: var(--dato); font-size: var(--fs-dato); font-style: normal;
letter-spacing: .05em; color: var(--laca);
background: color-mix(in srgb, var(--laca) 9%, transparent);
padding: 4px 8px; border-radius: 999px; line-height: 1;
}
.compra-fija__b {
flex: 0 0 auto; margin-left: auto;
height: 48px; padding-inline: var(--s6); font-weight: 600;
}
@media (max-width: 639px) {
.compra-fija__p { flex-wrap: nowrap; gap: var(--s2); }
.compra-fija__p b { font-size: 1.15rem; }
.compra-fija__p i { font-size: 10px; padding: 3px 7px; letter-spacing: .02em; white-space: nowrap; }
.compra-fija__b { padding-inline: var(--s5); }
}
body:has(.compra-fija[data-visible]) .pfm-wa-btn {
bottom: calc(var(--barra-alto, 111px) + var(--s3));
}
.fondo { z-index: 120; }
.cajon { z-index: 121; }
.pfm-wa-btn,
.pfp-fab-wrap {
transition: transform .24s cubic-bezier(.22,.61,.36,1), bottom .2s ease;
}
body:has(.cajon[data-abierto]) .pfm-wa-btn {
transform: translateX(calc(100% + var(--s4)));
}
body:has(.cajon[data-abierto]) .pfp-fab-wrap {
transform: translateX(-50%) translateY(calc(100% + var(--s5)));
}
body:has(.cajon[data-abierto]) .compra-fija { transform: translateY(100%); }
.opiniones { margin-top: var(--s5); }
.opiniones__cab {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s3); flex-wrap: wrap;
}
.opiniones__n { display: flex; align-items: center; gap: 7px; font-size: .875rem; color: var(--humo); }
.opiniones__n b { font-size: 1rem; font-weight: 600; color: var(--tinta); }
.opiniones__v { font-size: .8rem; color: var(--humo); border-bottom: 1px solid var(--hilo); padding-bottom: 1px; text-decoration: none; }
.opiniones__v:hover { color: var(--tinta); border-bottom-color: var(--rojo); }
.opinion {
background: var(--blanco);
border: 1px solid var(--hilo);
border-radius: var(--r-sm);
padding: var(--s4);
margin-top: var(--s3);
}
.estrellas--mini { font-size: .72rem; letter-spacing: .06em; }
.opinion__t { font-size: .925rem; line-height: 1.5; margin-top: 5px; }
.opinion__m {
margin-top: 6px;
font-family: var(--dato); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
color: var(--humo);
}
.opinion__m i { font-style: normal; color: var(--laca); }
.pdp__compra .pdp__entrega { margin-top: var(--s3); font-size: .875rem; }
@media (max-width: 899px) {
.lanza__vis { height: 320px; min-height: 0; }
.lanza__vis .foto,
.lanza__foto img { height: 100%; object-fit: cover; }
.lanza__meta,
.lanza__desc { display: none; }
.lanza__panel { padding: var(--s5) var(--s5) var(--s6); }
}
.pdp__regalo {
display: flex; align-items: center; gap: var(--s3);
margin-top: var(--s4);
font-size: .875rem;
line-height: 1.45;
color: var(--humo);
}
.pdp__regalo b { color: var(--tinta); font-weight: 600; }
.item .foto--muestra,
.mini .foto--muestra {
width: 100%; height: 100%;
object-fit: contain;
object-position: center;
}
.pdp__regalo .pdp__regalo-f {
flex: none; width: 84px; height: 84px;
object-fit: cover;
object-position: 30% center;
border-radius: var(--r-sm);
}
.cajon__pie .pdp__regalo { margin: 0 0 var(--s3); font-size: .8125rem; }
.cajon__pie .pdp__regalo .pdp__regalo-f { width: 56px; height: 56px; }
@media (max-width: 430px) {
.pdp__regalo { gap: var(--s2); font-size: .84rem; }
.pdp__regalo-f { width: 68px; height: 68px; }
}
.pdp__prueba {
margin-top: var(--s3);
font-size: .85rem; line-height: 1.45; color: var(--humo);
}
.pdp__prueba b { color: var(--tinta); font-weight: 600; }
.club {
margin-top: var(--s5);
padding: var(--s4);
background: var(--papel);
border: 1px solid var(--hilo);
border-radius: var(--r-sm);
}
.club__t {
font-family: var(--dato); font-size: var(--fs-dato);
letter-spacing: .1em; text-transform: uppercase; color: var(--tinta);
margin-bottom: var(--s3);
}
.club #yith-par-message-cart,
.club #yith-par-message-reward-cart,
.club .woocommerce-info,
.club .woocommerce-message,
.club .woocommerce-error,
.club .woocommerce-cart-notice {
display: block;
margin: 0; padding: 0;
background: none; border: 0;
color: inherit; font: inherit;
}
.club #yith-par-message-cart::before,
.club #yith-par-message-reward-cart::before,
.club .woocommerce-info::before,
.club .woocommerce-message::before,
.club .woocommerce-cart-notice::before { content: none; }
.club__canje, .club__gana { font-size: .85rem; line-height: 1.55; color: var(--humo); }
.club__canje strong, .club__gana strong { color: var(--tinta); font-weight: 600; }
.club__canje + .club__gana {
margin-top: var(--s3); padding-top: var(--s3);
border-top: 1px solid var(--hilo);
}
.club__gana p { margin: 0; }
.club input[type="text"], .club input[type="number"] {
width: 58px; height: 34px;
margin-inline: 5px;
padding-inline: 6px;
background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-sm);
font-family: inherit; font-size: .9rem;
font-variant-numeric: tabular-nums; text-align: center;
color: var(--tinta);
}
.club input[type="text"]:focus, .club input[type="number"]:focus {
outline: none; border-color: var(--tinta);
}
.club button {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 44px; margin-top: var(--s4);
padding-inline: var(--s6);
background: transparent; color: var(--tinta);
border: 1px solid var(--hilo); border-radius: var(--r-md);
font-family: inherit; font-size: .95rem; font-weight: 500; letter-spacing: -.005em;
cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.club button:hover { background: var(--blanco); border-color: var(--humo); }
.club .ywpar_min_reedem_value_error { margin-top: var(--s2); font-size: .8rem; color: var(--laca); }
.club:not(:has(.club__canje > *:not(:empty), .club__gana > *:not(:empty))) { display: none; }
.dir {
font-style: normal;
font-size: .925rem; line-height: 1.65;
color: var(--humo);
}
.dir::first-line { color: var(--tinta); font-weight: 600; }
.dir__datos {
margin-top: var(--s3); padding-top: var(--s3);
border-top: 1px solid var(--hilo);
}
.wc-block-components-additional-fields-list {
margin: 0;
display: grid; grid-template-columns: 1fr auto;
column-gap: var(--s3);
font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em;
}
.wc-block-components-additional-fields-list dt {
padding-block: 5px; color: var(--humo); text-transform: uppercase;
}
.wc-block-components-additional-fields-list dd {
margin: 0; padding-block: 5px; color: var(--tinta); text-align: right;
}
.dir + .wc-block-components-additional-fields-list {
margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hilo);
}
.dir + p, .dir__datos + p { margin: 0; font-size: .85rem; color: var(--humo); }
.dir__extra {
margin-top: var(--s3); padding-top: var(--s3);
border-top: 1px solid var(--hilo);
font-family: var(--dato); font-size: var(--fs-dato);
letter-spacing: .05em; color: var(--tinta);
}
.dir__extra strong {
color: var(--humo); font-weight: 400; text-transform: uppercase;
}
.dir-form .form-row { display: grid; gap: 5px; margin-bottom: var(--s3); }
.dir-form .form-row label {
font-family: var(--dato); font-size: 9px;
letter-spacing: .08em; text-transform: uppercase; color: var(--humo);
}
.dir-form .form-row .required { color: var(--laca); text-decoration: none; border: 0; }
.dir-form .form-row .optional { display: none; }
.dir-form .form-row input,
.dir-form .form-row select,
.dir-form .form-row textarea {
width: 100%; height: 48px; padding-inline: var(--s3);
background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-md);
font-family: inherit; font-size: 1rem; color: var(--tinta);
}
.dir-form .form-row textarea { height: auto; min-height: 96px; padding-block: var(--s3); }
.dir-form .form-row input:focus,
.dir-form .form-row select:focus,
.dir-form .form-row textarea:focus { outline: none; border-color: var(--tinta); }
.dir-form .form-row input::placeholder { color: #A7ABA3; }
@media (min-width: 560px) {
.dir-form .form-row-first, .dir-form .form-row-last {
display: inline-grid; width: calc(50% - var(--s2)); vertical-align: top;
}
.dir-form .form-row-first { margin-right: var(--s3); }
}
#billing_country_field,
#shipping_country_field { display: none !important; }
@media (min-width: 940px) {
.ck__g .campo input,
.ck__g .campo select,
.dir-form .form-row input,
.dir-form .form-row select,
.dir-form .form-row textarea {
height: 42px;
font-size: .9rem;
}
.dir-form .form-row textarea { height: auto; min-height: 72px; padding-block: 10px; }
.dir-form .select2-container--default .select2-selection--single { height: 42px; }
.dir-form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; }
.dir-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.ck__g .campo,
.dir-form .form-row { margin-bottom: 10px; }
.ck__g .campo,
.dir-form .form-row { gap: 4px; }
.payment_method_bold_co .pago__o { flex-wrap: nowrap; }
.payment_method_bold_co .pago__o > div[id^="bold-icon-checkout"] {
flex: 0 1 auto; min-width: 0; margin-right: 0 !important;
}
.ck__g .pago > li { padding: 12px var(--s3); }
.ck__g .wc_payment_methods label { font-size: .9rem; font-weight: 500; }
.ck__g .payment_box p { font-size: 13px; line-height: 1.5; }
#payment #place_order { height: 46px; font-size: .9rem; font-weight: 500; }
.ck__col--res .res { padding: var(--s4) var(--s5); }
#ship-to-different-address { font-weight: 500; }
}
.dir-form .select2-container--default .select2-selection--single {
height: 48px; background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-md);
}
.dir-form .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 46px; padding-left: var(--s3); color: var(--tinta);
}
.dir-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
.dir-form .woocommerce-invalid input,
.dir-form .woocommerce-invalid select { border-color: var(--laca); }
.campo .required { color: var(--laca); text-decoration: none; border: 0; }
.campo .optional { display: none; }
.club__tabs {
display: flex; gap: var(--s5);
list-style: none; margin: 0 0 var(--s5); padding: 0 0 var(--s3);
border-bottom: 1px solid var(--hilo);
font-family: var(--dato); font-size: var(--fs-dato);
letter-spacing: .1em; text-transform: uppercase;
}
.club__tabs .ywpar_tabs_links {
cursor: pointer; color: var(--humo);
padding-bottom: var(--s3); margin-bottom: calc(var(--s3) * -1 - 1px);
border-bottom: 1px solid transparent;
transition: color .15s ease;
}
.club__tabs .ywpar_tabs_links:hover { color: var(--tinta); }
.club__tabs .ywpar_tabs_links.active { color: var(--tinta); border-bottom-color: var(--tinta); }
.mov {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s4);
padding-block: var(--s3);
border-top: 1px solid var(--hilo);
}
.mov:first-child { border-top: 0; }
.mov__r { font-size: .95rem; color: var(--tinta); }
.mov__f {
font-family: var(--dato); font-size: var(--fs-dato);
letter-spacing: .05em; color: var(--humo); margin-top: 2px;
}
.mov__f a { color: var(--humo); }
.mov__f a:hover { color: var(--tinta); }
.mov__p {
flex: none; font-size: 1.05rem; font-weight: 600;
color: var(--tinta); font-variant-numeric: tabular-nums;
}
.mov__p[data-resta] { color: var(--laca); }
#share_points {
background: none; padding: 0;
font-size: .95rem; color: var(--humo);
}
#share_points h3 {
font-family: var(--dato); font-size: var(--fs-dato);
font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
color: var(--tinta); margin: 0 0 var(--s3);
}
#share_points > p { max-width: 58ch; margin: 0 0 var(--s4); line-height: 1.55; }
#ywpar-share-points {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
}
#ywpar-share-points > span { color: var(--tinta); }
#ywpar_share_points_to_share {
width: 84px; height: 40px;
padding-inline: var(--s2);
background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-sm);
font-family: inherit; font-size: .95rem;
font-variant-numeric: tabular-nums; text-align: center; color: var(--tinta);
}
#ywpar_share_points_to_share:focus { outline: none; border-color: var(--tinta); }
#share_points input#ywpar-share-points__submit {
flex: none;
height: 44px; padding-inline: var(--s6);
background: transparent; color: var(--tinta);
border: 1px solid var(--hilo); border-radius: var(--r-md);
font-family: inherit; font-size: .95rem; font-weight: 500; letter-spacing: -.005em;
cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
#share_points input#ywpar-share-points__submit:hover { background: var(--blanco); border-color: var(--humo); }
@media (max-width: 559px) {
#share_points input#ywpar-share-points__submit { width: 100%; margin-top: var(--s2); }
}
.ywpar-share-points-error { margin: var(--s3) 0 0; }
.ywpar-share-points-error .error { color: var(--laca); font-size: .85rem; }
:root { --cabecera: 129px; }
@media (min-width: 940px) {
:root { --cabecera: 93px; }
body:has(.top__nav) { --cabecera: 146px; }
}
.res { top: calc(var(--cabecera) + var(--s4)); }
.woocommerce-checkout .res { position: static; }
@media (min-width: 940px) {
.pdp__gal {
position: sticky;
top: calc(var(--cabecera) + var(--s4));
}
}
.abc {
display: flex; flex-wrap: wrap; gap: var(--s2);
margin-block: var(--s5) var(--s7);
padding-bottom: var(--s4); border-bottom: 1px solid var(--hilo);
}
.abc a {
min-width: 30px; padding: 5px 8px;
font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .08em;
color: var(--humo); text-align: center; text-decoration: none;
border: 1px solid var(--hilo); border-radius: var(--r-sm);
transition: color .15s ease, border-color .15s ease;
}
.abc a:hover { color: var(--tinta); border-color: var(--humo); }
.abc__g { margin-bottom: var(--s7); }
.abc__g { scroll-margin-top: calc(var(--cabecera) + var(--s4)); }
.abc__t {
font-family: var(--dato); font-size: var(--fs-dato);
letter-spacing: .14em; color: var(--humo);
padding-bottom: var(--s3); margin-bottom: var(--s5);
border-bottom: 1px solid var(--hilo);
}
.marcas {
display: grid; gap: var(--s4);
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.casa {
display: block; padding: var(--s5) var(--s4);
background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-sm);
text-align: center; text-decoration: none;
transition: border-color .15s ease;
}
.casa:hover { border-color: var(--tinta); }
.casa__im {
display: grid; place-items: center;
height: 62px; margin-bottom: var(--s3);
}
.casa__logo { max-width: 100%; max-height: 62px; object-fit: contain; }
.casa__txt {
font-family: var(--display);
font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 100;
font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em;
line-height: 1.05; color: var(--tinta);
}
.casa__n { display: block; font-size: .9rem; color: var(--tinta); }
.casa__c {
display: block; margin-top: 3px;
font-family: var(--dato); font-size: var(--fs-dato);
letter-spacing: .05em; color: var(--humo);
}
.casa:has(.casa__txt) .casa__n { display: none; }
.casa:has(.casa__txt) .casa__c { margin-top: 0; }
.solo-lectores {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
.top__nav ul { flex-wrap: nowrap; }
.top__nav li { white-space: nowrap; }
@media (max-width: 859px) {
.pdp__mig { display: none; }
}
@media (max-width: 899px) {
.top__buscar {
height: 42px; padding: 0 var(--s4);
background: var(--blanco);
border: 1px solid var(--hilo); border-radius: var(--r-md);
}
.top__buscar:hover,
.top__buscar:focus-within { border-color: var(--tinta); }
.top__buscar input { flex: 1; min-width: 0; font-size: .95rem; }
.top__util { gap: var(--s4); }
}
.aura {
position: fixed; inset: 0; z-index: 0;
width: 100%; height: 100%;
pointer-events: none;
}
.pdp, .cat, .carro, .sec, .evid, main > * { position: relative; z-index: 1; }
.foot { overflow: hidden; }
.foot__firma {
font-weight: 700;
font-size: clamp(72px, 15.5vw, 230px);
letter-spacing: -.05em;
line-height: .72;
text-align: center;
white-space: nowrap;
color: transparent;
margin-bottom: -.14em;
padding-top: clamp(16px, 2.4vw, 36px);
user-select: none;
background-image: linear-gradient(to bottom,
rgba(240, 238, 234, .30) 0%,
rgba(240, 238, 234, .17) 42%,
rgba(240, 238, 234, .06) 74%,
rgba(240, 238, 234, 0) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,.45) 100%);
mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,.45) 100%);
}
.foot__pie {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3);
padding-top: var(--s5); margin-top: var(--s7);
border-top: 1px solid rgba(240, 238, 234, .1);
}
.foot__legal { color: #7E837A; }
app-simulator{
display:block;
background:var(--blanco);
border-radius:var(--r-md);
}
addi-product-widget{
display:block;
background:var(--blanco);
border-radius:8px;
}
.pfp-app {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 94;
background: var(--blanco);
border-top: 1px solid var(--hilo);
box-shadow: 0 -14px 30px -22px rgba(0, 0, 0, .45);
transform: translateY(100%);
opacity: 0;
pointer-events: none;
transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
user-select: none; -webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
.pfp-app[hidden] { display: none; }
.pfp-app[data-abierta] { transform: translateY(0); opacity: 1; pointer-events: auto; }
body:has(.compra-fija[data-visible]) .pfp-app {
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}
.pfp-app__in {
display: flex; align-items: center; gap: var(--s3);
max-width: var(--ancho); margin: 0 auto;
padding: var(--s3) var(--s4);
padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
}
.pfp-app__icono {
flex: none; width: 52px; height: 52px;
border-radius: 12px; border: 1px solid var(--hilo);
object-fit: cover;
}
.pfp-app__txt { flex: 1 1 auto; min-width: 0; }
.pfp-app__t { margin: 0; font-size: .95rem; font-weight: 500; letter-spacing: -.01em; }
.pfp-app__e { margin: 2px 0 0; font-size: .8rem; color: var(--humo); }
.pfp-app__cta {
flex: none; text-decoration: none; white-space: nowrap;
background: var(--tinta); color: var(--papel);
padding: 10px var(--s4); border-radius: var(--r-pill);
font-size: .82rem; font-weight: 500;
}
.pfp-app__x { flex: none; color: var(--humo); padding: var(--s2); line-height: 0; }
@media (max-width: 430px) {
.pfp-app__in { gap: var(--s2); padding-left: var(--s3); padding-right: var(--s3); }
.pfp-app__icono { width: 44px; height: 44px; }
.pfp-app__t { font-size: .88rem; line-height: 1.25; }
.pfp-app__e { display: none; }
.pfp-app__cta { padding: 9px var(--s3); font-size: .78rem; }
}
@media (min-width: 900px) {
.top__buscar {
flex: 0 1 520px;
margin-inline: auto;
height: 44px;
max-width: 520px;
padding: 0 var(--s4);
background: var(--blanco);
border: 1px solid var(--hilo);
border-bottom-color: var(--hilo);
border-radius: var(--r-md);
transition: border-color .16s ease;
}
.top__buscar:hover { border-color: var(--humo); }
.top__buscar:focus-within { border-color: var(--tinta); }
.top__lupa { color: var(--laca); }
.top__acc { margin-left: 0; }
}
.top__buscar { position: relative; overflow: visible; }
.buscap {
position: absolute; left: -1px; right: -1px; top: calc(100% + 6px);
z-index: 120;
background: var(--blanco);
border: 1px solid var(--hilo);
border-radius: var(--r-md);
box-shadow: 0 18px 40px -24px rgba(28, 23, 20, .45);
overflow: hidden;
max-height: min(70vh, 460px); overflow-y: auto;
}
.buscap__i {
display: flex; align-items: center; gap: var(--s3);
padding: 10px var(--s4);
text-decoration: none; color: inherit;
border-bottom: 1px solid var(--hilo);
}
.buscap__i:last-of-type { border-bottom: 0; }
.buscap__i:hover,
.buscap__i.es-sel { background: var(--papel); }
.buscap__f {
flex: 0 0 auto; width: 44px; height: 44px;
object-fit: contain; background: var(--papel); border-radius: var(--r-sm);
}
.buscap__t { flex: 1; min-width: 0; }
.buscap__m {
display: block;
font-family: var(--dato); font-size: 10px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--humo);
}
.buscap__n {
display: block; font-size: .92rem; font-weight: 600; letter-spacing: -.01em;
color: var(--tinta);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buscap__p { flex: 0 0 auto; font-size: .9rem; font-weight: 600; color: var(--tinta); }
.buscap__p--no { color: var(--humo); font-weight: 400; font-size: .78rem; }
.buscap__todos {
display: block; padding: 11px var(--s4);
background: var(--papel);
font-family: var(--dato); font-size: 11px; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
color: var(--laca); text-decoration: none; text-align: center;
}
.buscap__todos:hover,
.buscap__todos.es-sel { background: var(--hilo); }
.buscap__nada {
margin: 0; padding: 16px var(--s4);
font-size: .9rem; color: var(--humo); text-align: center;
}