/* precioporml.es — una sola hoja para toda la web. La genera web.py con ?v=<hash>. */
@font-face{font-family:"Fraunces";src:url(/fuentes/fraunces.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fuentes/fraunces-italic.woff2) format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --fondo:#fbf7f4; --papel:#fff; --tinta:#241a22; --suave:#6f6169; --linea:#ece2dd;
  --marca:#8a2c50; --marca-osc:#6b1f3d; --rosa:#f5e6ec; --rosa-2:#efd9e2;
  --oro:#a77a2c; --oro-suave:#f7eedc; --verde:#1d6f47; --verde-suave:#e4f2ea;
  --sombra:0 1px 2px rgba(36,26,34,.05),0 4px 14px rgba(36,26,34,.06);
  --radio:18px; --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--fondo);color:var(--tinta);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--marca)}
a:hover{color:var(--marca-osc)}
.envoltura{max-width:1120px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;
  font-variation-settings:"opsz" 72}
h2{font-size:1.65rem;margin-bottom:.9rem}
.saltar{position:absolute;left:-999px}
.saltar:focus{left:16px;top:8px;background:#fff;padding:.4rem .8rem;z-index:9}

/* Cabecera, en el color de la marca: logo, menú en el centro, el día de los precios y el buscador
   (David, 27-10-2026: «mejora esa barra: color, menú centrado, algo más») */
.cab{background:linear-gradient(90deg,#55162f 0%,var(--marca-osc) 45%,var(--marca) 100%);color:#fff;
  position:sticky;top:0;z-index:20;box-shadow:0 2px 16px rgba(58,14,32,.2)}
.cab-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;min-height:64px}
.logo{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--tinta);text-decoration:none;
  letter-spacing:-.02em;white-space:nowrap}
.logo span{color:var(--suave);font-weight:400}
.logo em{color:var(--marca);font-style:italic}
.cab .logo{color:#fff}
.cab .logo span{color:#e3aec4}
.cab .logo em{color:#f9d3e1}
.menu{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
/* centrado, y si no cabe se desliza sin cortar el primero */
.menu a:first-child{margin-left:auto}
.menu a:last-child{margin-right:auto}
.menu a{text-decoration:none;color:#fbeef3;font-size:.95rem;font-weight:500;padding:.45rem .95rem;border-radius:999px;white-space:nowrap;
  transition:background .15s}
.menu a:hover{background:rgba(255,255,255,.13);color:#fff}
.menu a[aria-current],.menu a.actual{background:#fff;color:var(--marca-osc);font-weight:600}
/* Perfumes, Cremas y Cabello: abren una tira debajo de la barra con sus listados (28-10-2026) */
.menu .fl{font-size:.7em;margin-left:.35em;opacity:.75}
.menu a.menu-sub[aria-expanded=true]{background:rgba(255,255,255,.22);color:#fff}
.menu a.actual.menu-sub[aria-expanded=true]{background:#fff;color:var(--marca-osc)}
/* la tira, en otro tono (rosa claro, como la caja de filtros) para que se note que es otro nivel
   (David, 28-10-2026: «cambia el tono del color para que se note diferencia») */
.cab-sub{padding:.75rem 0;background:var(--rosa);border-bottom:1px solid #e8cfd9;box-shadow:inset 0 6px 10px -8px rgba(58,14,32,.35)}
.cab-sub[hidden]{display:none}
.cab-sub nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.cab-sub a{display:inline-flex;align-items:baseline;gap:.45rem;text-decoration:none;color:var(--marca-osc);font-weight:600;font-size:.93rem;
  padding:.5rem 1.05rem;border-radius:999px;background:#fff;border:1px solid #e3c3d0;
  transition:background .15s,color .15s,border-color .15s}
.cab-sub a small{font-weight:500;font-size:.8em;color:var(--suave)}
.cab-sub a:hover,.cab-sub a[aria-current]{background:var(--marca);border-color:var(--marca);color:#fff}
.cab-sub a:hover small,.cab-sub a[aria-current] small{color:#f3d9e3}
.cab-der{display:flex;align-items:center;justify-content:flex-end;gap:.9rem}
.cab-buscar{display:none;align-items:center;gap:.45rem;font:inherit;font-size:.9rem;font-weight:600;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:.45rem .95rem;
  transition:background .15s,color .15s}
.js .cab-buscar{display:inline-flex}
.cab-buscar svg{width:17px;height:17px}
.cab-buscar:hover,.cab-buscar[aria-expanded=true]{background:#fff;color:var(--marca-osc)}
.cab-busqueda{padding:.3rem 0 1rem}
.cab-busqueda[hidden]{display:none}
.cab-busqueda .buscador{max-width:640px;margin:0 auto}
.cab-busqueda .buscador input{border-color:transparent;box-shadow:0 6px 22px rgba(0,0,0,.18)}
@media(max-width:900px){
  .cab-in{grid-template-columns:1fr auto;row-gap:0;padding-top:.45rem;min-height:0}
  .menu{grid-column:1/-1;grid-row:2;margin:0 -16px;padding:.35rem 12px .55rem;width:calc(100% + 32px)}
}
@media(max-width:620px){
  .cab .logo{font-size:1.35rem}
  .cab-der{gap:.6rem}
  .cab-buscar{padding:.5rem;border-radius:50%}
  .cab-buscar span{display:none}
  .menu{gap:.1rem;margin:0 -16px;padding:.35rem 8px .55rem;width:calc(100% + 32px)}
  .menu a{padding:.4rem .6rem;font-size:.92rem}
}
/* si aun así no cabe (móviles estrechos), el borde derecho se difumina: se ve que sigue */
.menu.desliza{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}

/* Buscador */
.buscador{position:relative;max-width:520px}
.buscador input{width:100%;font:inherit;font-size:16px;padding:.9rem 1.1rem .9rem 2.8rem;border-radius:999px;
  border:1px solid var(--linea);background:#fff;box-shadow:var(--sombra);color:var(--tinta)}
.buscador input:focus{outline:2px solid var(--marca);outline-offset:1px}
.buscador input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.buscador svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--suave)}
.resultados{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border-radius:16px;
  box-shadow:0 12px 40px rgba(36,26,34,.16);list-style:none;overflow:hidden;z-index:30}
.resultados a{display:flex;align-items:center;gap:.7rem;padding:.55rem .9rem;text-decoration:none;color:var(--tinta)}
.resultados a:hover,.resultados a.activo{background:var(--rosa)}
.resultados img{width:34px;height:42px;object-fit:contain;mix-blend-mode:multiply}
.resultados small{display:block;color:var(--suave);font-size:.8rem}
.resultados .nada{padding:.8rem 1rem;color:var(--suave)}

/* Portada */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;padding:3.2rem 16px 2.4rem}
.antetitulo{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--marca);font-weight:600;margin-bottom:.8rem}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:1rem}
.hero h1 em{color:var(--marca);font-style:italic;font-weight:500}
.entradilla{font-size:1.1rem;color:var(--suave);margin-bottom:1.5rem}
/* Las cifras de la web debajo del titular, como en PPG (05-11-2026): productos, tiendas y el día de los precios */
.hero-cifras{display:flex;gap:.6rem;margin:0 0 1.1rem;max-width:460px}
.hero-cifras span{flex:1 1 0;min-width:0;background:#fff;border-radius:14px;padding:.55rem .8rem;box-shadow:var(--sombra);
  text-align:center;line-height:1.1}
.hero-cifras b{display:block;font-family:var(--serif);font-size:1.55rem;font-weight:700;color:var(--marca);white-space:nowrap}
.hero-cifras i{display:block;font-style:normal;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--suave);margin-top:.2rem}
@media(max-width:400px){.hero-cifras{gap:.45rem}.hero-cifras span{padding:.5rem .4rem}.hero-cifras b{font-size:1.3rem}
  .hero-cifras i{font-size:.62rem;letter-spacing:.05em}}
.hero-fotos{position:relative;aspect-ratio:1/1;max-width:440px;justify-self:center;width:100%}
.hero-fotos::before{content:"";position:absolute;inset:8% 4% 0;border-radius:50% 50% 24px 24px;
  background:linear-gradient(160deg,var(--rosa) 0%,var(--rosa-2) 100%)}
.hero-fotos img{position:absolute;bottom:0;mix-blend-mode:multiply;height:78%;width:auto}
.hero-fotos img:nth-child(1){left:-4%;height:64%}
.hero-fotos img:nth-child(2){left:50%;transform:translateX(-50%);height:84%;z-index:1}
.hero-fotos img:nth-child(3){right:-4%;height:60%;z-index:2}
/* La foto ancha con el titular encima, para que sean un solo bloque (30-10-2026). La banda es del
   crema del borde izquierdo de la foto, y la foto se funde con ella por la izquierda */
.hero-banda{position:relative;background:#f5ebe3;overflow:hidden}
.hero-banda::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4.5rem;pointer-events:none;
  background:linear-gradient(to bottom,rgba(251,247,244,0),var(--fondo))}
.hero-img img{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 30%);mask-image:linear-gradient(to right,transparent,#000 30%)}
.hero-banda .hero{position:relative;z-index:1;grid-template-columns:minmax(0,640px);padding:4rem 16px 5rem}
/* en el móvil y la tableta, los frascos encima del titular, fundidos por abajo */
@media(max-width:1024px){
  .hero-img img{position:static;display:block;width:100%;max-width:520px;height:auto;margin:0 auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
  .hero-banda .hero{grid-template-columns:1fr;padding:0 16px 3rem;margin-top:-1.2rem}
}
@media(min-width:641px) and (max-width:1024px){
  .hero-img img{-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent),linear-gradient(to right,transparent,#000 15%,#000 85%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,#000 70%,transparent),linear-gradient(to right,transparent,#000 15%,#000 85%,transparent);
    mask-composite:intersect}
}
/* Elegir sección, nada más entrar (David, 28-10-2026: «lo de las cremas no aparece si no lo buscas») */
.elegir{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:-.6rem auto 1.4rem}
/* el frasco de la oferta del día sobresale por arriba de su recuadro: que no pise las tarjetas */
.elegir+.envoltura>.oferta-dia:first-child{margin-top:5.5rem}
.eleg{display:flex;align-items:center;gap:1.1rem;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1rem 1.2rem;text-decoration:none;color:var(--tinta);box-shadow:var(--sombra);transition:transform .2s,box-shadow .2s}
.eleg:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(36,26,34,.06),0 10px 26px rgba(36,26,34,.1)}
.eleg-foto{flex:0 0 92px;height:112px;display:flex;align-items:flex-end;justify-content:center;border-radius:14px;
  background:radial-gradient(circle at 50% 70%,var(--rosa),#fff 75%)}
.eleg-foto img{max-width:84px;max-height:104px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.eleg-txt{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-width:0}
.eleg-txt b{font-family:var(--serif);font-size:1.55rem;font-weight:600;line-height:1.1}
.eleg-txt span{color:var(--tinta);font-size:.95rem}
.eleg-txt small{color:var(--suave);font-size:.82rem}
.eleg .boton-borde{margin-top:.55rem}
.eleg:hover .boton-borde{background:var(--marca);color:#fff}
@media(max-width:620px){.elegir{gap:.7rem;margin-top:-.8rem}.eleg{padding:.8rem 1rem}
  .eleg-foto{flex-basis:76px;height:92px}.eleg-foto img{max-width:70px;max-height:86px}.eleg-txt b{font-size:1.35rem}}
/* con dos o más por fila, foto arriba y texto debajo: de lado, «Ver los 71 productos» se salía de la tarjeta (30-10-2026) */
@media(min-width:621px){.eleg{flex-direction:column;align-items:stretch;gap:.8rem;padding:1rem}
  .eleg-foto{flex:none;height:120px}.eleg-foto img{max-width:110px;max-height:110px}
  .eleg-txt{flex:1;align-items:center;text-align:center}.eleg-txt small{margin-bottom:.55rem}
  .eleg .boton-borde{align-self:center;margin-top:auto}}
@media(max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:2rem;gap:1.2rem}
  .hero-fotos{max-width:300px;order:-1}
}
.seccion{padding:2.2rem 0}
.seccion-cab{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.seccion-cab h2{margin:0}
.seccion-cab p{color:var(--suave);flex-basis:100%}
/* En la portada, cada sección arranca con un título que se ve, más grande, en el color de la
   marca y con su raya: los frascos de las tarjetas se lo comían (David, 29-10-2026: «pasan
   completamente desapercibidos») */
.cab-portada{margin-bottom:1.3rem}
.cab-portada h2{font-size:clamp(1.85rem,3.4vw,2.5rem);color:var(--marca-osc);text-wrap:balance}
.cab-portada h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;
  background:var(--marca);margin-top:.6rem}
/* Cada bloque de la portada en su recuadro de color, con el título en una franja más oscura,
   para que se vea dónde acaba uno y empieza otro (David, 30-10-2026: «que se note que es un
   bloque aparte, que se diferencia entre unos bloques y otros») */
.recuadro-sec{--tinte:#fbeef3;--franja:#f5dce6;--acento:var(--marca-osc);
  background:var(--tinte);border-radius:28px;padding:0 1.6rem 2rem;margin:2.4rem 0}
.recuadro-sec>.cab-portada{margin:0 -1.6rem 1.6rem;padding:1.5rem 1.6rem 1.2rem;background:var(--franja);border-radius:28px 28px 0 0}
.recuadro-sec>.cab-portada h2{color:var(--acento)}
.recuadro-sec>.cab-portada h2::after{background:var(--acento)}
.recuadro-sec>.cab-portada p{color:#5e5258}
/* con el margen del recuadro, a 200 px solo cabían 4 por fila y 10 productos dejaban huecos */
@media(min-width:481px){.recuadro-sec .rejilla{grid-template-columns:repeat(auto-fill,minmax(188px,1fr))}
  .recuadro-sec .bajadas{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
.bl-mujer{--tinte:#fbeef3;--franja:#f5dce6;--acento:#6b1f3d}
.bl-hombre{--tinte:#edf2f7;--franja:#dae4ee;--acento:#2f4a63}
.bl-piel{--tinte:#fbf2e8;--franja:#f3e1cc;--acento:#7d5226}
.bl-cabello{--tinte:#eef5f0;--franja:#d9eadf;--acento:#2f5f45}
.bl-maquillaje{--tinte:#f5eff9;--franja:#e7dcf1;--acento:#5b3d78}
.bl-bajadas{--tinte:#edf6f0;--franja:#d6ecdf;--acento:var(--verde)}
@media(max-width:480px){
  .recuadro-sec{padding:0 .8rem 1.5rem;border-radius:22px;margin:1.6rem 0}
  .recuadro-sec>.cab-portada{margin:0 -.8rem 1.2rem;padding:1.1rem .8rem 1rem;border-radius:22px 22px 0 0}
}

/* Datos del día: tarjetas con el frasco saliendo por arriba */
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;padding-top:2.8rem}
.dato{position:relative;background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:1.3rem 46% 1.2rem 1.3rem;min-height:236px;display:flex;flex-direction:column}
.dato-foto{position:absolute;right:0;top:0;bottom:0;width:44%;
  background:linear-gradient(180deg,#fff 0%,var(--rosa) 100%);border-radius:0 var(--radio) var(--radio) 0}
/* el frasco, más alto que la tarjeta: asoma por arriba (como Gramo en PPG) */
.dato-foto img{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);height:calc(100% + 2.6rem);
  width:auto;max-width:94%;object-fit:contain;object-position:50% 100%;mix-blend-mode:multiply;
  transition:transform .25s;transform-origin:50% 100%}
.dato:hover .dato-foto img{transform:translateX(-50%) scale(1.04)}
.dato-eti{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--marca);font-weight:600}
.dato-cifra{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.35rem);font-weight:600;line-height:1.1;margin:.35rem 0 .4rem;white-space:nowrap}
.dato-txt{color:var(--suave);font-size:.95rem;flex:1}
.dato .boton-borde{margin-top:.9rem}
.dato a::after{content:"";position:absolute;inset:0;border-radius:var(--radio)}
@media(max-width:900px){.datos{grid-template-columns:1fr;gap:2.6rem}}

/* «Han bajado hoy» debajo del titular, como la tarjeta de PPG: número grande, fotos con su
   porcentaje y un brillo que la cruza tres veces al cargar (David, 30-10-2026: «que llame la atención más») */
.hb{position:relative;overflow:hidden;display:flex;align-items:center;gap:1rem;max-width:620px;margin:0 0 1rem;
  padding:.85rem .9rem .85rem 1.15rem;background:#fff;border-radius:18px;text-decoration:none;color:var(--tinta);
  box-shadow:0 10px 28px rgba(107,31,61,.16);transition:transform .16s,box-shadow .16s}
.hb:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(107,31,61,.22);color:var(--tinta)}
.hb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);
  transform:translateX(-120%);animation:hb-brillo 1.5s ease-in-out .8s 3}
@keyframes hb-brillo{to{transform:translateX(120%)}}
.hb-num{flex:0 0 auto;text-align:center;line-height:1}
.hb-num b{display:block;font-family:var(--serif);font-size:2.6rem;font-weight:700;color:var(--verde)}
.hb-num i{display:block;font-style:normal;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--suave);margin-top:.15rem}
.hb-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.hb-et{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:700;line-height:1.2;white-space:nowrap}
.hb-punto{width:.6rem;height:.6rem;border-radius:50%;background:var(--verde);flex:0 0 auto;animation:hb-latido 1.8s infinite}
@keyframes hb-latido{0%{box-shadow:0 0 0 0 rgba(29,111,71,.55)}70%,100%{box-shadow:0 0 0 .55rem rgba(29,111,71,0)}}
.hb-sub{font-size:.88rem;color:var(--suave);line-height:1.35}
.hb-sub b{color:var(--verde)}
.hb-fotos{display:flex;flex:0 0 auto;padding:0 0 .35rem .6rem}
.hb-f{position:relative;width:3.2rem;height:3.2rem;margin-left:-.3rem;border-radius:50%;background:#fff;
  border:2px solid #fff;box-shadow:0 2px 8px rgba(36,26,34,.18)}
.hb-f img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;mix-blend-mode:multiply}
.hb-f em{position:absolute;bottom:-.45rem;left:50%;transform:translateX(-50%);font-style:normal;font-size:.64rem;
  font-weight:700;color:#fff;background:var(--verde);border-radius:99px;padding:.05rem .35rem;white-space:nowrap;line-height:1.35}
.hb-ir{flex:0 0 auto;background:var(--marca);color:#fff;font-weight:700;font-size:.88rem;border-radius:99px;
  padding:.6rem 1rem;white-space:nowrap;transition:background .14s}
.hb:hover .hb-ir{background:var(--marca-osc)}
/* en el móvil, las fotos y el botón bajan a una segunda fila */
@media(max-width:560px){.hb{flex-wrap:wrap;gap:.7rem .9rem}.hb-tx{flex-basis:calc(100% - 6rem)}
  .hb-fotos{order:3}.hb-ir{order:4;margin-left:auto}}
@media(max-width:400px){.hb-f{width:3rem;height:3rem;margin-left:-.2rem}.hb-f:nth-child(4){display:none}.hb-ir{padding:.55rem .85rem}}
@media(prefers-reduced-motion:reduce){.hb::after,.hb-punto{animation:none}}

/* La oferta del día: una sola, con el frasco asomando por arriba */
.oferta-dia{position:relative;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:1.6rem;align-items:end;
  background:var(--papel);border-radius:28px;box-shadow:var(--sombra);margin:3.2rem 0 1rem;padding:0 1.6rem 0 0}
.od-foto{position:relative;align-self:stretch;min-height:250px;border-radius:28px 0 0 28px;
  background:linear-gradient(180deg,#fff 0%,var(--rosa) 100%)}
.od-foto img{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);height:calc(100% + 3rem);width:auto;
  max-width:92%;object-fit:contain;object-position:50% 100%;mix-blend-mode:multiply}
.od-txt{padding:1.5rem 0}
.od-eti{display:inline-block;background:var(--verde);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.2rem .6rem;border-radius:6px;margin-bottom:.7rem}
.od-marca{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--marca);font-weight:600}
.oferta-dia h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:.2rem 0 .6rem}
.oferta-dia h2 a{color:var(--tinta);text-decoration:none}
.oferta-dia h2 span{display:block;font-family:var(--sans);font-size:.9rem;font-weight:400;color:var(--suave);margin-top:.25rem;letter-spacing:0}
.od-precio{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.od-pct{background:var(--verde-suave);color:var(--verde);font-weight:700;border-radius:8px;padding:.1rem .5rem}
.od-precio s{color:var(--suave)}
.od-precio b{font-family:var(--serif);font-size:2rem;line-height:1}
.od-precio small{color:var(--oro);font-weight:600}
.od-porque{color:var(--suave);margin-bottom:1rem}
.od-botones{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.od-nota{color:var(--suave);font-size:.8rem;margin-top:.8rem}
@media(max-width:700px){
  .oferta-dia{grid-template-columns:1fr;padding:0 1.2rem;gap:.4rem;margin-top:3rem}
  .od-foto{min-height:190px;margin:0 -1.2rem;border-radius:28px 28px 0 0}
  .od-txt{padding:.6rem 0 1.4rem}
}

/* Botón de borde: el segundo de una pareja y los «ver más» de cada sección. Los enlaces sueltos con
   flecha (Ver los 30 →) no le gustaban a David (27-10-2026): todo lo que lleva a otra página es un botón */
.boton-borde{display:inline-block;align-self:flex-start;font-weight:600;text-decoration:none;padding:.7rem 1.4rem;
  border-radius:999px;border:1.5px solid var(--marca);color:var(--marca);background:#fff;text-align:center;
  transition:background .2s,color .2s}
.boton-borde:hover,.dato:hover .boton-borde,.guia-tj:hover .boton-borde{background:var(--marca);color:#fff}
.boton-borde.peq{font-size:.9rem;padding:.45rem 1rem;white-space:nowrap}
.boton-borde.oro{border-color:var(--oro);color:var(--oro)}
.boton-borde.oro:hover{background:var(--oro);color:#fff}
.seccion-pie{text-align:center;margin-top:1.6rem}
@media(max-width:480px){.seccion-pie .boton-borde,.od-botones a{width:100%}}
/* Cremas: Todas · Cremas faciales · Cremas corporales · Protectores solares. La de la página, rellena */
.tipos-crema{display:flex;flex-wrap:wrap;gap:.5rem;margin:-.4rem 0 1.2rem}
.boton-borde.puesto{background:var(--marca);color:#fff}
@media(max-width:620px){.tipos-crema{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .tipos-crema::-webkit-scrollbar{display:none}}

/* Han bajado hoy */
.bajadas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.8rem}
.baja{display:flex;gap:.8rem;align-items:center;background:var(--papel);border-radius:16px;box-shadow:var(--sombra);
  padding:.7rem .9rem .7rem .6rem;text-decoration:none;color:var(--tinta);transition:transform .2s,box-shadow .2s}
.baja:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(36,26,34,.1);color:var(--tinta)}
.js .baja.oculta{display:none}
.bj-foto{flex:0 0 64px;height:80px;border-radius:12px;background:linear-gradient(180deg,#fff 0%,var(--rosa) 100%)}
.bj-foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.bj-foto .tj-sinfoto{font-size:.75rem;padding:.3rem}
.bj-txt{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.bj-pct{align-self:flex-start;background:var(--verde-suave);color:var(--verde);font-weight:700;font-size:.8rem;border-radius:6px;padding:0 .4rem;margin-bottom:.15rem}
.bj-nombre{font-family:var(--serif);font-weight:600;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bj-sub,.bj-donde{font-size:.8rem;color:var(--suave)}
.bj-precio s{color:var(--suave);font-size:.85rem}
.bj-precio b{font-size:1.05rem}
.bj-estado{font-size:.78rem;color:var(--suave);margin-top:.1rem}
.bj-estado.si{color:var(--verde);font-weight:600}
.sin-bajadas{background:#fff;border-radius:16px;padding:1rem 1.2rem;color:var(--suave);box-shadow:var(--sombra)}
.ver-mas{display:none;font:inherit;font-weight:600;margin:1rem auto 0;border:1px solid var(--marca);background:#fff;
  color:var(--marca);border-radius:999px;padding:.55rem 1.2rem;cursor:pointer}
.js .ver-mas{display:block}
.ver-mas:hover{background:var(--marca);color:#fff}

/* Guías: tarjetas con el frasco asomando, como los datos del día */
/* entre filas, más de lo que asoma el frasco (~3.4rem): con 1.2rem se metía en la tarjeta de arriba (30-10-2026) */
.guias{display:grid;grid-template-columns:repeat(2,1fr);gap:4.4rem 1.2rem;padding-top:2.6rem}
.guia-tj{position:relative;background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:1.3rem 42% 1.2rem 1.3rem;min-height:230px;display:flex;flex-direction:column}
.guia-tj-fotos{position:absolute;right:0;top:0;bottom:0;width:40%;
  background:linear-gradient(180deg,#fff 0%,var(--oro-suave) 100%);border-radius:0 var(--radio) var(--radio) 0}
.guia-tj-fotos img{position:absolute;bottom:16px;width:auto;object-fit:contain;object-position:50% 100%;mix-blend-mode:multiply}
.guia-tj-fotos.n1 img{left:50%;transform:translateX(-50%);height:calc(100% + 2.4rem);max-width:92%}
/* dos fotos del mismo frasco: el pequeño y el grande, uno al lado del otro */
.guia-tj-fotos.n2 img:nth-child(1){left:8%;height:52%;max-width:40%}
.guia-tj-fotos.n2 img:nth-child(2){right:6%;height:calc(100% + 2.4rem);max-width:56%}
.guia-tj h3{font-size:1.35rem;margin:.35rem 0 .5rem}
.guia-tj h3 a{color:var(--tinta);text-decoration:none}
.guia-tj h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radio)}
.guia-tj-txt{color:var(--suave);font-size:.95rem;flex:1}
.guia-tj .boton-borde{margin-top:.9rem}
@media(max-width:820px){.guias{grid-template-columns:1fr;gap:4.4rem}}
/* el bloque de guías en su recuadro, para que no se confunda con los perfumes */
.recuadro-guias{background:var(--oro-suave);border:1px solid #ecdcbc;border-radius:28px;padding:1.8rem 1.6rem 2rem;margin:2rem 0}
.recuadro-guias .guia-tj-fotos{background:linear-gradient(180deg,#fff 0%,var(--rosa) 100%)}
@media(max-width:480px){
  .recuadro-guias{padding:1.3rem .8rem 1.5rem;border-radius:22px;margin:1.5rem 0}
  .guias{gap:3.6rem}
  .guia-tj{padding:1.1rem 35% 1.1rem 1rem;min-height:0}
  .guia-tj-fotos{width:32%}
  .guia-tj h3{font-size:1.2rem}
  .guia-tj-txt{font-size:.9rem}
}

/* Página de una guía */
.guia .antetitulo{margin-bottom:.5rem}
.guia .entradilla{font-size:1.15rem;margin:.2rem 0 .8rem}
.firma{color:var(--suave);font-size:.88rem;border-bottom:1px solid var(--linea);padding-bottom:1.1rem;margin-bottom:1.4rem}
.guia table td{white-space:nowrap}
.guia table th{vertical-align:bottom}
.aviso-borrador{background:var(--oro-suave);color:var(--oro);font-weight:600;border-radius:10px;padding:.5rem .9rem;font-size:.9rem}

/* Cuadrícula de perfumes */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
@media(max-width:480px){.rejilla{grid-template-columns:repeat(2,1fr);gap:.7rem}}
.tarjeta{background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);text-decoration:none;color:var(--tinta);
  display:flex;flex-direction:column;overflow:hidden;transition:transform .2s,box-shadow .2s}
.tarjeta:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(36,26,34,.12);color:var(--tinta)}
.tj-foto{background:linear-gradient(180deg,#fff 0%,var(--rosa) 100%);aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center}
.tj-foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
/* la campanita de cada tarjeta: lleva a la ficha con «Avísame si baja» abierto (solo con JS) */
.tj-foto{position:relative}
.tj-aviso{display:none;position:absolute;top:.55rem;right:.55rem;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--marca);align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(36,26,34,.15);transition:background .15s,color .15s}
.js .tj-aviso{display:flex}
.tj-aviso svg{width:17px;height:17px}
.tj-aviso:hover{background:var(--marca);color:#fff}
.tj-sinfoto{font-family:var(--serif);font-size:1.3rem;color:var(--marca);align-self:center;padding:1rem;text-align:center}
.tj-txt{padding:.8rem .95rem 1rem;display:flex;flex-direction:column;gap:.1rem;flex:1}
.tj-marca{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--suave);font-weight:600}
.tj-nombre{font-size:1.15rem;margin:.1rem 0 .35rem}
.tj-nombre span{display:block;font-family:var(--sans);font-size:.8rem;font-weight:400;color:var(--suave);letter-spacing:0;margin-top:.15rem}
.tj-precio{margin-top:auto;font-size:.9rem;color:var(--suave)}
.tj-precio b{font-size:1.15rem;color:var(--tinta)}
.tj-ml{font-size:.8rem;color:var(--oro);font-weight:600}
.etiqueta{display:inline-block;font-size:.7rem;font-weight:600;padding:.1rem .45rem;border-radius:6px;background:var(--rosa);color:var(--marca-osc);vertical-align:middle}

/* Filtros y orden de un listado: desplegables propios, en su recuadro de color, como en PPG.
   Sin JavaScript no hacen nada, así que no se enseñan */
.filtros{display:none;background:var(--rosa);border:1px solid var(--rosa-2);border-radius:20px;padding:1rem 1rem .8rem;margin-bottom:1.3rem}
.js .filtros{display:block}
.filtros-tit{font-weight:700;color:var(--marca-osc);font-size:.95rem;margin-bottom:.6rem}
.fb-fila{display:flex;flex-wrap:wrap;gap:.55rem}
.fb{position:relative;flex:1 1 9.5rem;min-width:0}
.fb-orden{flex:1.6 1 15rem}
.fb-boton{font:inherit;font-size:.93rem;font-weight:600;color:var(--tinta);background:#fff;border:2px solid transparent;
  border-radius:999px;padding:.55rem .95rem;width:100%;cursor:pointer;display:flex;align-items:center;gap:.4rem;
  box-shadow:0 4px 14px rgba(107,31,61,.1);transition:border-color .15s}
.fb-boton:focus-visible{outline:none;border-color:var(--marca-osc)}
.fb-boton.puesto{border-color:var(--marca);color:var(--marca-osc)}
.fb-boton .pre{color:var(--suave);font-weight:400}
.fb-boton .ic{display:none;color:var(--marca)}
.fb-boton .et{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-boton .fl{color:var(--marca);font-size:.8rem;transition:transform .15s}
.fb-boton[aria-expanded=true] .fl{transform:rotate(180deg)}
.fb-panel{position:absolute;z-index:41;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:min(92vw,20rem);
  max-height:min(62vh,25rem);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid var(--linea);
  border-radius:16px;box-shadow:0 18px 44px rgba(36,26,34,.2);padding:.35rem}
.fb-panel[hidden]{display:none}
.fb-cab{display:none}
.fb-grupo{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--suave);font-weight:600;padding:.6rem .65rem .2rem}
.fb-buscar{display:block;width:100%;font:inherit;font-size:16px;padding:.5rem .8rem;margin:.15rem 0 .35rem;
  border:1px solid var(--linea);border-radius:10px;color:var(--tinta)}
.fb-buscar:focus{outline:2px solid var(--marca);outline-offset:0}
.fb-op{font:inherit;display:flex;align-items:center;gap:.6rem;width:100%;padding:.5rem .65rem;border:0;border-radius:10px;
  background:none;cursor:pointer;color:var(--tinta);font-size:.93rem;line-height:1.25;text-align:left}
.fb-op:hover,.fb-op:focus-visible{background:var(--rosa);outline:none}
.fb-op.activa{background:var(--rosa);color:var(--marca-osc);font-weight:600}
.fb-op.oculta{display:none}
.fb-op.cero{opacity:.4;cursor:default}
.fb-op.cero:hover{background:none}
.fb-op input{accent-color:var(--marca);width:18px;height:18px;flex:0 0 auto;margin:0}
.fb-op .tx{flex:1;min-width:0}
.fb-op .n{color:var(--suave);font-size:.8rem;font-weight:600;flex:0 0 auto}
.fb-pie{position:sticky;bottom:-.35rem;background:#fff;padding:.4rem 0 .05rem;margin-top:.2rem;border-top:1px solid var(--linea)}
.fb-listo{font:inherit;font-weight:600;width:100%;border:0;border-radius:999px;background:var(--marca);color:#fff;padding:.6rem 1rem;cursor:pointer}
.fb-listo:hover{background:var(--marca-osc)}
.fb-velo{position:fixed;inset:0;z-index:40;background:rgba(36,26,34,.38)}
.fb-velo[hidden]{display:none}
.filtros-cuenta{margin-top:.7rem;font-size:.9rem;color:var(--suave)}
.filtros-cuenta b{color:var(--tinta)}
.filtros-quitar,.sin-resultados button{font:inherit;font-size:.9rem;font-weight:600;color:var(--marca);background:none;border:0;
  padding:0 0 0 .4rem;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.filtros-quitar[hidden]{display:none}
.tarjeta.fuera{display:none}
.tj-precio .nw,.tj-ml .nw{white-space:nowrap}
.sin-resultados{background:#fff;border-radius:16px;padding:1rem 1.2rem;color:var(--suave);box-shadow:var(--sombra)}
.sin-resultados[hidden]{display:none}
/* en el móvil, dos por fila y el panel sube desde abajo, con su título y «Ver N perfumes» */
@media(max-width:620px){
  .filtros{padding:.85rem .75rem .7rem;border-radius:18px}
  .fb-fila{gap:.5rem}
  .fb{flex:1 1 calc(50% - .25rem)}
  /* «Más filtros» a su medida y el orden con el resto de la fila: a medias, «Más vendidos» no cabía */
  .fb[data-multi=mas]{flex:0 0 auto}
  .fb-orden{flex:1 1 0}
  .fb-orden .pre,.fb-orden .fl{display:none}
  .fb-orden .ic{display:inline}
  .fb-boton{padding:.55rem .8rem;font-size:.9rem}
  .fb-panel{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;min-width:0;max-width:none;max-height:78vh;
    border-radius:22px 22px 0 0;padding:.5rem .8rem calc(.8rem + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(36,26,34,.25)}
  .fb-cab{display:block;font-family:var(--serif);font-weight:600;font-size:1.25rem;padding:.6rem .65rem .4rem}
  .fb-op{padding:.7rem .65rem;font-size:1rem}
  .fb-pie{bottom:calc(-.8rem - env(safe-area-inset-bottom));padding:.6rem 0 .8rem}
  .fb-listo{padding:.8rem 1rem;font-size:1rem}
  body.fb-abierto{overflow:hidden}
}

/* Ficha de perfume */
/* Arriba de cada página: «Volver» y «Portada» como botones, y detrás el camino (30-10-2026) */
.migas{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--suave);padding-top:1rem;padding-bottom:.3rem}
.miga-bt{display:inline-flex;align-items:center;gap:.35rem;min-height:38px;background:#fff;border:1px solid var(--linea);
  border-radius:99px;padding:.35rem .95rem;font-weight:600;font-size:.88rem;color:var(--marca);text-decoration:none;
  box-shadow:var(--sombra);transition:background .14s,color .14s}
.miga-bt:hover{background:var(--marca);border-color:var(--marca);color:#fff}
.miga-bt svg{width:15px;height:15px}
.migas-camino{margin-left:.4rem}
.migas-camino a{color:var(--suave);text-decoration:none}
.migas-camino a:hover{color:var(--marca)}
@media(max-width:480px){.migas-camino{flex-basis:100%;margin-left:.2rem}}
.ficha-cab{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2.2rem;align-items:start;padding:1rem 0 1.5rem}
.ficha-foto{background:linear-gradient(180deg,#fff 0%,var(--rosa) 100%);border-radius:28px;aspect-ratio:4/5;
  display:flex;align-items:flex-end;justify-content:center;position:sticky;top:80px}
.ficha-foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ficha-marca{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--marca);font-weight:600}
.ficha-info h1{font-size:clamp(2rem,4.2vw,3rem);margin:.3rem 0 .4rem}
.ficha-info h1 span{display:block;font-style:italic;font-weight:400;font-size:.55em;color:var(--suave);margin-top:.3rem}
.ficha-sub{color:var(--suave);margin-bottom:1.2rem}
.cifras{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.2rem}
.cifra{background:#fff;border-radius:16px;padding:.9rem 1rem;box-shadow:var(--sombra)}
.cifra span{display:block;font-size:.78rem;color:var(--suave);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.cifra b{display:block;font-family:var(--serif);font-size:clamp(1.45rem,5.6vw,1.9rem);font-weight:600;line-height:1.15;white-space:nowrap}
.cifra small{color:var(--suave);font-size:.85rem}
.cifra-oro{background:var(--oro-suave)}
.cifra-oro span{color:var(--oro)}
.resumen{border-left:3px solid var(--marca);padding:.2rem 0 .2rem 1rem;margin-bottom:1.3rem}
.resumen p+p{margin-top:.5rem}
.boton{display:inline-block;background:var(--marca);color:#fff;text-decoration:none;font-weight:600;
  padding:.8rem 1.4rem;border-radius:999px}
.boton:hover{background:var(--marca-osc);color:#fff}
@media(max-width:760px){
  .ficha-cab{grid-template-columns:1fr;gap:1rem}
  .ficha-foto{position:static;max-width:320px;width:100%;justify-self:center}
}
@media(max-width:380px){.cifras{grid-template-columns:1fr}}
.bloque{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);padding:1.4rem 1.3rem;margin-bottom:1.3rem}
.bloque>p.nota{color:var(--suave);font-size:.9rem;margin-top:.8rem}
@media(max-width:480px){.bloque{padding:1.1rem .9rem;border-radius:14px}}

/* Tabla de tamaños */
.tamanos{width:100%;border-collapse:collapse;font-size:.95rem}
.tamanos th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);
  font-weight:600;padding:.4rem .5rem;border-bottom:1px solid var(--linea)}
.tamanos td{padding:.7rem .5rem;border-bottom:1px solid var(--linea);vertical-align:middle}
.tamanos tr:last-child td{border-bottom:0}
.tamanos .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-right:1.2rem}
.tamanos td.ml{font-weight:600;white-space:nowrap}
.tamanos td.ml .insignia{display:block;width:max-content;margin:.25rem 0 0}
.tamanos .pml{width:38%;white-space:nowrap;font-variant-numeric:tabular-nums}
.barra{height:6px;border-radius:3px;background:var(--rosa-2);min-width:6px;margin-top:5px}
.mejor td{background:var(--oro-suave)}
.mejor .barra{background:var(--oro)}
.insignia{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.12rem .45rem;border-radius:6px;background:var(--oro);color:#fff;margin-left:.35rem;vertical-align:1px}
.insignia.verde{background:var(--verde)}
.donde{font-size:.9rem}
.donde small{display:block;color:var(--suave);font-size:.8rem}
.solo-movil{display:none}
.subtabla{margin:1.4rem 0 .3rem;font-size:1.15rem}
.nota-tabla{color:var(--suave);font-size:.9rem;margin-bottom:.4rem}
@media(max-width:560px){
  .tamanos{font-size:.88rem}
  .tamanos th,.tamanos td{padding-left:.3rem;padding-right:.3rem}
  .tamanos .num{padding-right:.6rem}
  .tamanos .pml{width:auto}
  .tamanos .donde,.tamanos th:last-child{display:none}
  .tamanos .solo-movil{display:block;white-space:normal;font-size:.75rem;color:var(--suave);max-width:9rem;margin-left:auto}
}

/* Tiendas por tamaño */
.tallas{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.tallas button{font:inherit;font-weight:600;font-size:.92rem;border:1px solid var(--linea);background:#fff;color:var(--tinta);
  padding:.45rem .9rem;border-radius:999px;cursor:pointer}
.tallas button[aria-selected=true]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.js .panel{display:none}
.js .panel.abierto{display:block}
.panel h3{font-size:1.15rem;margin-bottom:.6rem}
.js .panel h3{display:none}
.panel+.panel{margin-top:1.3rem}
.js .panel+.panel{margin-top:0}
.ofertas{list-style:none}
.oferta{display:grid;grid-template-columns:1fr auto auto;gap:.4rem 1rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--linea)}
.oferta:last-child{border-bottom:0}
.of-tienda{font-weight:600}
.of-tienda small{display:block;font-weight:400;color:var(--suave);font-size:.8rem}
.of-precio{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.of-precio b{font-size:1.15rem}
.of-precio small{display:block;color:var(--suave);font-size:.8rem}
.of-precio small.antes{color:var(--verde);font-weight:600}
.of-precio small.antes s{color:var(--suave);font-weight:400}
/* el envío de cada tienda (28-10-2026): gratis en verde; si no, cuánto y desde cuánto es gratis */
.of-precio small.envio{white-space:normal;max-width:15rem;margin-left:auto;font-size:.76rem;line-height:1.3;margin-top:.15rem}
.of-precio small.envio.gratis{color:var(--verde);font-weight:600}
/* «mínimo de 30 días» en la tabla de tamaños y en las tarjetas (solo con una semana de historial) */
.insignia-min{display:block;width:max-content;margin:.25rem 0 0 auto;font-size:.64rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;background:var(--verde);border-radius:6px;padding:.12rem .4rem}
.etiqueta.minimo{background:var(--verde-suave);color:var(--verde)}
#precio-hoy p+p,#precio-hoy p+.grafica{margin-top:.7rem}
.bloque p.familia{margin-bottom:1rem}
.of-ir{display:inline-block;text-decoration:none;font-weight:600;font-size:.9rem;padding:.5rem .95rem;border-radius:999px;
  border:1px solid var(--marca);color:var(--marca);white-space:nowrap}
.of-ir:hover{background:var(--marca);color:#fff}
.oferta.barata .of-ir{background:var(--marca);color:#fff}
.oferta.barata .of-ir:hover{background:var(--marca-osc)}
.oferta.agotada{opacity:.55}
@media(max-width:520px){
  .oferta{gap:.3rem .7rem}
  .of-largo{display:none}
  .of-ir{padding:.5rem .9rem}
  .of-tienda .insignia{display:block;width:max-content;margin:.2rem 0 0}
}
.igual{background:var(--verde-suave);color:var(--verde);border-radius:12px;padding:.6rem .9rem;font-size:.9rem;margin-top:.8rem}

/* Notas olfativas */
.notas{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.notas h3{font-family:var(--sans);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--suave);margin-bottom:.5rem}
.notas ul{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
.notas li{background:var(--rosa);color:var(--marca-osc);border-radius:999px;padding:.25rem .7rem;font-size:.9rem}
@media(max-width:560px){.notas{grid-template-columns:1fr}}

/* Gráfica del histórico */
.grafica svg{width:100%;height:auto}
.grafica .eje{fill:var(--suave);font-size:11px}

/* Recuadro «cómo leemos estos precios» */
.como{background:var(--rosa);border-radius:var(--radio);padding:1.2rem 1.3rem;font-size:.93rem;margin-bottom:1.3rem}
.como h2{font-size:1.15rem;margin-bottom:.4rem}

/* Páginas de texto */
/* sin ancho máximo: David quiere el texto hasta el final, como el resto (27-10-2026) */
.texto{padding:2rem 0 3rem}
.texto h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:1rem}
.texto h2{font-size:1.4rem;margin:2rem 0 .6rem}
.texto p,.texto ul,.texto table{margin-bottom:1rem}
.texto ul{padding-left:1.2rem}
.texto li{margin-bottom:.35rem}
.texto table{border-collapse:collapse;width:100%;font-size:.92rem;background:#fff}
.texto th,.texto td{border:1px solid var(--linea);padding:.55rem .6rem;text-align:left;vertical-align:top}
.texto .destacado{background:var(--rosa);border-radius:14px;padding:1rem 1.2rem}
.actualizado{color:var(--suave);font-size:.85rem}

/* Tira de logos de las tiendas, como en PPG: en gris, y en color al pasar por encima */
.tira-tiendas{text-align:center;border-top:1px solid var(--linea);padding:2rem 0 .4rem;margin-top:1.5rem}
.tira-tiendas>p:first-child{color:var(--suave);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-bottom:1.2rem}
.tira-tiendas .logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.6rem 2.6rem}
.tira-tiendas .logos img{height:28px;width:auto;max-width:150px;object-fit:contain;opacity:.6;filter:grayscale(1);
  transition:opacity .15s,filter .15s}
.tira-tiendas .logos img:hover{opacity:1;filter:none}
.tira-tiendas .logos img[alt="El Corte Inglés"]{height:38px}
.tira-tiendas .sinlogo{font-weight:700;color:var(--suave);font-size:1.05rem}
.tira-tiendas .marcas{color:var(--suave);font-size:.9rem;margin-top:1.2rem}
.tira-tiendas .marcas b{color:var(--marca)}
@media(max-width:560px){.tira-tiendas .logos{gap:1.2rem 1.6rem}.tira-tiendas .logos img{height:22px;max-width:110px}}

/* Banda de método en portada */
.metodo{background:var(--tinta);color:#f4ecef;border-radius:28px;padding:2rem 1.6rem;margin:1.5rem 0 2.5rem}
.metodo h2{color:#fff}
.metodo ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:1rem 0 1.2rem;counter-reset:m}
.metodo li{counter-increment:m}
.metodo li::before{content:counter(m);display:block;font-family:var(--serif);font-size:2.2rem;color:#e7b8ca;line-height:1;margin-bottom:.4rem}
.metodo b{color:#fff}
.metodo-entrada{color:#eadde2;font-size:1.05rem}
/* los dos enlaces, como botones centrados: sueltos se leían como parte del texto (David, 27-10-2026) */
.metodo-enlaces{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.12)}
.mt-boton{display:inline-block;font-weight:600;text-decoration:none;padding:.7rem 1.4rem;border-radius:999px;
  border:1.5px solid #f2c5d6;color:#f2c5d6;text-align:center;transition:background .2s,color .2s}
.mt-boton:hover{background:#f2c5d6;color:var(--tinta)}
.mt-boton.lleno{background:#f2c5d6;color:var(--tinta)}
.mt-boton.lleno:hover{background:#fff;border-color:#fff;color:var(--tinta)}
@media(max-width:480px){.mt-boton{width:100%}}
@media(max-width:760px){.metodo ol{grid-template-columns:1fr}}

/* Pie */
.pie{border-top:1px solid var(--linea);padding:2.2rem 0 2.6rem;margin-top:2rem;font-size:.88rem;color:var(--suave)}
.pie p{margin-bottom:.7rem}
.pie nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.1rem;margin:1.4rem 0 1rem}
.pie .pie-centro{text-align:center}
.firma-tc{color:var(--suave);text-decoration:none;font-size:.82rem}
.firma-tc b{color:var(--tinta)}
.firma-tc:hover b{color:var(--marca)}
.pie nav a{color:var(--tinta);text-decoration:none}
.pie nav a:hover{color:var(--marca)}
.pie .logo{font-size:1.2rem}

/* «Avísame si baja» (28-10-2026): el botón junto al precio y el recuadro que abre */
.ficha-botones{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.2rem}
.aviso-boton{display:none;align-items:center;gap:.45rem;cursor:pointer;font:inherit;font-weight:600}
.js .aviso-boton{display:inline-flex}
.aviso-boton svg{width:17px;height:17px}
.aviso-boton[aria-expanded=true]{background:var(--marca);color:#fff}
.aviso{background:var(--rosa);border:1px solid #e8cfd9;border-radius:var(--radio);padding:1.3rem 1.3rem 1.1rem;margin:0 0 1.3rem;scroll-margin-top:90px}
.aviso[hidden]{display:none}
.aviso h2{margin:0 0 .35rem;font-size:1.35rem}
.aviso-cab{display:flex;gap:1rem;align-items:flex-end;margin-bottom:.9rem}
.aviso-cab .aviso-gancho{margin:0}
/* Mili: el círculo y, encima, su cara, que se sale por arriba (como Gramo en PPG) */
.mili-cara{position:relative;flex:none;width:92px;height:118px}
.mili-cara::before{content:"";position:absolute;left:0;right:0;bottom:0;height:92px;border-radius:50%;
  background:linear-gradient(160deg,#fff 0%,var(--rosa-2) 100%);box-shadow:inset 0 0 0 2px #fff}
.mili-cara>span{position:absolute;inset:0;overflow:hidden;border-radius:0 0 46px 46px}
.mili-cara img{position:absolute;left:50%;bottom:0;width:96px;height:auto;max-width:none;transform:translateX(-50%)}
.error-404{display:flow-root;padding-bottom:0}
/* de pie sobre la raya del pie (el margen del pie es de 2rem) */
.mili-404{float:right;width:min(28%,150px);height:auto;margin:0 0 -2rem 1.2rem}
/* en el móvil el buscador ocupa todo el ancho y se metía debajo de ella: ahí está de pie encima */
@media(max-width:620px){.mili-404{margin-bottom:0}.error-404 .buscador{clear:both}}
/* Mili de cuerpo entero en la portada: se sale por arriba del recuadro y apoya los pies en su borde */
.mili-portada{display:flow-root;background:linear-gradient(120deg,var(--rosa) 0%,var(--rosa-2) 100%);
  border:1px solid #e8cfd9;border-radius:28px;padding:2rem 2.2rem 1.8rem;margin:6.5rem 0 1.5rem}
.mili-portada>img{float:left;width:150px;height:auto;margin:-7.5rem 2rem -1.8rem 0}
.mili-portada h2{margin:0 0 .6rem;font-size:clamp(1.45rem,2.6vw,1.9rem)}
.mili-portada p{margin:0 0 .6rem}
.mili-portada .mili-portada-pie{color:var(--suave);font-size:.9rem;margin-bottom:1.1rem}
.mili-portada .boton{display:inline-flex;align-items:center;gap:.5rem;border:0;font:inherit;font-weight:600;cursor:pointer}
.mili-portada .boton svg{width:18px;height:18px}
@media(max-width:620px){
  .mili-portada{padding:1.3rem 1.1rem 1.4rem;border-radius:22px;margin-top:5rem}
  .mili-portada>img{float:right;width:96px;margin:-5rem 0 .4rem .8rem}
  .mili-portada h2{font-size:1.3rem}}
.aviso-gancho{margin:0 0 .9rem}
.aviso-lbl{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--suave);margin:0 0 .4rem}
.aviso-tallas{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.8rem}
.aviso-talla input{position:absolute;opacity:0;pointer-events:none}
.aviso-talla span{display:inline-block;padding:.45rem .9rem;border-radius:999px;background:#fff;border:1px solid #e3c3d0;
  font-weight:600;font-size:.92rem;cursor:pointer;color:var(--marca-osc)}
.aviso-talla input:checked+span{background:var(--marca);border-color:var(--marca);color:#fff}
.aviso-talla input:focus-visible+span{outline:2px solid var(--marca);outline-offset:2px}
.aviso-obj{display:block;margin-bottom:.8rem;font-weight:600}
.aviso-obj input{width:9rem;margin:0 .3rem;padding:.5rem .7rem;border:1px solid #e3c3d0;border-radius:10px;font:inherit;font-size:16px}
.aviso-fila{display:flex;gap:.5rem;flex-wrap:wrap}
.aviso-fila input{flex:1;min-width:13rem;padding:.7rem .9rem;border:1px solid #e3c3d0;border-radius:999px;font:inherit;font-size:16px;background:#fff}
.aviso-fila .boton{border:0;cursor:pointer;font:inherit;font-weight:700}
.aviso-bf{display:flex;gap:.55rem;align-items:flex-start;margin:.85rem 0 0;font-size:.93rem;cursor:pointer}
.aviso-bf input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--marca);flex:none}
.aviso-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.aviso-legal{font-size:.8rem;color:var(--suave);margin:.8rem 0 0}
.aviso-resp{margin:.9rem 0 0;font-weight:600}
.aviso-resp.bien{color:var(--verde)}
.aviso-resp.mal{color:#b3261e}
.aviso-resp .boton-borde{margin:.4rem .3rem 0 0}
@media(max-width:480px){.aviso{padding:1.1rem 1rem}.aviso-cab{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;align-items:end}.aviso-cab>div{display:contents}.aviso-cab h2{align-self:center;margin:0}.aviso-cab .aviso-gancho{grid-column:1/-1;margin-top:.7rem}.mili-cara{width:72px;height:92px}.mili-cara::before{height:72px}.mili-cara>span{border-radius:0 0 36px 36px}.mili-cara img{width:76px}.aviso h2{font-size:1.2rem}.aviso-talla span{padding:.4rem .7rem;font-size:.85rem}.aviso-obj input{width:7.5rem}}