/* ============================================================
   Women Essential — tienda
   Menú lateral, rejilla de colección, ficha de producto y upsells.
   Se carga DESPUÉS de style.css y reutiliza sus tokens (:root).
   Aditivo: no pisa nada de la home.
   ============================================================ */

/* ---------- Menú lateral off-canvas ---------- */
.menu-btn{
  background:none; border:none; padding:6px; margin:-6px; cursor:pointer;
  color:var(--tinta); display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
}
.menu-btn:focus-visible{ outline:2px solid var(--taupe-deep); outline-offset:3px; }
.menu-btn svg{ display:block; }

.side-menu{ position:fixed; inset:0; z-index:200; }
.side-menu[hidden]{ display:none; }
.side-menu-overlay{
  position:absolute; inset:0; background:rgba(26,26,26,.42);
  opacity:0; transition:opacity .32s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.side-menu.is-open .side-menu-overlay{ opacity:1; }

.side-menu-panel{
  position:absolute; top:0; left:0; bottom:0;
  width:min(88vw, 340px); background:var(--crema);
  border-right:1px solid var(--beige);
  transform:translateX(-100%); transition:transform .36s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  padding:clamp(1.4rem,4vw,2rem) 0 2rem;
  overflow-y:auto; overscroll-behavior:contain;
}
.side-menu.is-open .side-menu-panel{ transform:translateX(0); }

.sm-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1.25rem,4vw,1.75rem) 1.2rem;
}
.sm-title{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--taupe-deep);
}
.sm-close{
  background:none; border:none; padding:6px; margin:-6px; cursor:pointer;
  color:var(--tinta-soft); border-radius:8px;
}
.sm-close:focus-visible{ outline:2px solid var(--taupe-deep); outline-offset:2px; }

.sm-group{
  font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--taupe);
  padding:1.1rem clamp(1.25rem,4vw,1.75rem) .4rem;
}
.sm-list{ list-style:none; margin:0; padding:0; }
.sm-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  padding:.72rem clamp(1.25rem,4vw,1.75rem);
  font-family:var(--serif); font-size:1.18rem; font-weight:300;
  color:var(--tinta); text-decoration:none; line-height:1.25;
}
.sm-list a:hover{ background:var(--beige); }
.sm-list a[aria-current="page"]{ font-style:italic; color:var(--taupe-deep); }
.sm-list a:focus-visible{ outline:2px solid var(--taupe-deep); outline-offset:-2px; }
.sm-count{
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  color:var(--taupe); font-variant-numeric:tabular-nums;
}
.sm-foot{
  margin-top:auto; padding:1.5rem clamp(1.25rem,4vw,1.75rem) 0;
  font-family:var(--sans); font-size:.75rem; color:var(--taupe-deep);
  border-top:1px solid var(--beige);
}
@media (prefers-reduced-motion: reduce){
  .side-menu-panel, .side-menu-overlay{ transition:none; }
}

/* ---------- Cabecera de las páginas de tienda ---------- */
/* La home tiene intro + hero; estas páginas no, así que el nav necesita
   fondo desde el primer píxel y el contenido, aire por debajo. */
/* En tienda el nav va STICKY (en flujo): así el marquee queda pegado debajo sin
   hueco, sin depender de adivinar la altura del nav con un margin. */
.tienda .nav{
  position:sticky; top:0;
  background:rgba(245,239,230,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--beige);
}
.tienda main{ padding-top:clamp(1rem,3vw,1.5rem); }

/* ---------- Cartel deslizante (marquee) bajo la barra ---------- */
.marquee{
  display:block; text-decoration:none; cursor:pointer;
  position:relative; z-index:90;
  overflow:hidden;
  background:var(--tinta); color:var(--crema);
}
.marquee:hover{ background:#000; }
.marquee-track{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding-block:.6rem; will-change:transform;
  /* 07/09: de 34s a 52s. Iba demasiado rápida para leerla de un vistazo. */
  animation:marquee-slide 52s linear infinite;
}
@keyframes marquee-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{
  font-family:var(--sans); font-size:.76rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; padding-inline:1.3rem;
}
.marquee-sep{ color:var(--taupe); font-size:.7rem; }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; padding-inline:var(--gutter); }
}

/* ---------- Logos de pago ---------- */
.pagos{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; list-style:none; padding:0; margin:0; }
.pago-logo{ display:inline-flex; }
.pago-logo svg{ height:1.55rem; width:auto; color:var(--taupe-deep); opacity:.78; }
.pago-chip{ fill:none; stroke:var(--beige); stroke-width:1; }
.pago-txt{ fill:currentColor; font-family:var(--sans); font-size:11px; }
.ft .pagos{ justify-content:flex-start; margin:1.1rem 0; padding-top:1.1rem; border-top:1px solid var(--beige); }
.fp-pago{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--beige); }
.fp-pago-txt{ font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe-deep); }

/* ---------- Guía de tallas ---------- */
.guia-tallas{ margin:0 0 1.3rem; border-bottom:1px solid var(--beige); }
.guia-tallas summary{
  cursor:pointer; list-style:none; padding:.5rem 0;
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--taupe-deep);
}
.guia-tallas summary::-webkit-details-marker{ display:none; }
.guia-tallas summary::after{ content:"+"; float:right; color:var(--taupe); font-weight:400; }
.guia-tallas[open] summary::after{ content:"–"; }
.gt-body{ padding-bottom:.8rem; }
.gt-tabla{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:.82rem; color:var(--tinta); }
.gt-tabla th, .gt-tabla td{ text-align:left; padding:.42rem .3rem; border-bottom:1px solid var(--beige); }
.gt-tabla th{ color:var(--taupe-deep); font-weight:600; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; }
.gt-nota{ font-size:.74rem; color:var(--taupe); margin-top:.55rem; }

.migas{
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  font-family:var(--sans); font-size:.75rem; color:var(--taupe-deep);
}
.migas a{ color:inherit; text-decoration:none; }
.migas a:hover{ color:var(--tinta); text-decoration:underline; }
.migas span{ color:var(--taupe); }

.cab{
  max-width:var(--max); margin:0 auto;
  padding:clamp(1.5rem,4vw,2.5rem) var(--gutter) clamp(1.75rem,4vw,2.5rem);
}
.cab h1{
  font-family:var(--serif); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(2.1rem,6vw,3.6rem); line-height:1.05; color:var(--tinta);
}
.cab .claim{
  font-family:var(--sans); font-weight:300; color:var(--tinta-soft);
  font-size:clamp(.92rem,2vw,1.05rem); margin-top:.7rem; max-width:46ch;
}

/* ---------- Rejilla de colección ---------- */
.rejilla{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter) clamp(4rem,9vw,7rem);
  display:grid; gap:clamp(1.1rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
}
@media (max-width:520px){
  .rejilla{ grid-template-columns:repeat(2,1fr); gap:.85rem; }
}

/* ---------- "Te podría interesar" (cross-sell en ficha y colección) ---------- */
.relacionados{ border-top:1px solid var(--beige); margin-top:clamp(2rem,5vw,3.5rem); padding-top:clamp(1rem,3vw,2rem); }
.rel-titulo{
  font-family:var(--serif); font-weight:300; letter-spacing:-.01em;
  font-size:clamp(1.5rem,4vw,2.2rem); line-height:1.1; color:var(--tinta);
}

/* ---------- Reseñas (ilustrativas) ---------- */
.resenas{
  max-width:var(--max); margin:clamp(2rem,5vw,3.5rem) auto 0;
  padding:clamp(1.5rem,4vw,2.5rem) var(--gutter) 0;
  border-top:1px solid var(--beige);
}
.rs-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.4rem 1rem; margin-bottom:1.3rem; }
.rs-avg{ font-family:var(--sans); font-size:.88rem; color:var(--tinta-soft); }
.rs-stars{ color:#c8901f; letter-spacing:.08em; }
.rs-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.rs-card{ background:var(--perla); border:1px solid #ece3d5; border-radius:9px; padding:1rem 1.1rem 1.1rem; }
.rs-card .rs-stars{ font-size:.9rem; }
.rs-texto{ font-family:var(--sans); font-weight:300; font-size:.92rem; line-height:1.55; color:var(--tinta); margin:.5rem 0 .75rem; }
.rs-autor{ font-family:var(--serif); font-size:.92rem; color:var(--tinta-soft); }

.tarjeta{ position:relative; }
.tarjeta a.tj-link{ display:block; text-decoration:none; color:inherit; }
.tj-foto{
  position:relative; overflow:hidden; background:var(--beige);
  aspect-ratio:3/4; border-radius:2px;
}
.tj-foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.tarjeta:hover .tj-foto img{ transform:scale(1.04); }
.tj-badge{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  background:var(--tinta); color:var(--crema);
  font-family:var(--sans); font-size:.62rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.32rem .6rem; border-radius:2px;
}
.tj-info{ padding-top:.7rem; }
.tj-nombre{
  font-family:var(--serif); font-weight:400; font-size:1.05rem;
  color:var(--tinta); line-height:1.25;
}
.tj-sub{
  font-family:var(--sans); font-size:.78rem; color:var(--taupe-deep);
  margin-top:.15rem; line-height:1.35;
}
.tj-precios{ margin-top:.45rem; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.tj-precio{ font-family:var(--sans); font-size:.95rem; font-weight:600; color:var(--tinta); }
.tj-antes{ font-family:var(--sans); font-size:.8rem; color:var(--taupe); text-decoration:line-through; }
.tj-colores{ display:flex; gap:.3rem; margin-top:.5rem; }
.tj-color{
  width:13px; height:13px; border-radius:50%;
  border:1px solid rgba(26,26,26,.18); display:inline-block;
}

/* ---------- Navegador de secciones (home, dentro de .rejilla) ---------- */
.seccion-card{
  display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem;
  min-height:clamp(190px,30vw,280px);
  padding:clamp(1.1rem,2.5vw,1.6rem);
  background:linear-gradient(165deg, var(--beige) 0%, var(--crema) 100%);
  border:1px solid #e4dac8; border-radius:3px;
  text-decoration:none; color:var(--tinta);
  transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.seccion-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 44px -24px rgba(26,26,26,.4);
  border-color:var(--taupe);
}
.seccion-icono{
  display:inline-flex;
  margin-bottom:auto;               /* empuja el icono arriba; el texto queda abajo */
  color:#4a352a;                    /* marrón fuerte de marca (chocolate) */
}
.seccion-icono svg{
  width:clamp(44px,5.2vw,60px);
  height:clamp(44px,5.2vw,60px);
}
.seccion-nombre{
  font-family:var(--serif); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.05;
}
.seccion-claim{
  font-family:var(--sans); font-weight:300; font-size:.86rem; line-height:1.5;
  color:var(--tinta-soft); max-width:26ch;
}
.seccion-ir{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.4rem;
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta);
}
.seccion-ir svg{ transition:transform .4s ease; }
.seccion-card:hover .seccion-ir svg{ transform:translateX(4px); }

/* ---------- Home: botón "ver las colecciones" centrado bajo las tarjetas ---------- */
.tienda-home .rejilla{ padding-bottom:clamp(1.25rem,3vw,2rem); }   /* menos hueco antes del botón */
.tienda-home-mas{
  text-align:center;
  margin:0 auto;
  padding:0 var(--gutter) clamp(3rem,7vw,5rem);
}

/* ---------- Estado vacío (próximamente) ---------- */
.vacio{
  grid-column:1 / -1;
  max-width:38rem; margin:clamp(1rem,3vw,2.5rem) auto;
  padding:clamp(2rem,6vw,3.5rem) var(--gutter);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.vacio-tag{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--taupe-deep);
}
.vacio-titulo{
  font-family:var(--serif); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(1.7rem,5vw,2.6rem); line-height:1.08; color:var(--tinta);
}
.vacio-texto{
  font-family:var(--sans); font-weight:300; font-size:1rem; line-height:1.65;
  color:var(--tinta-soft); max-width:34ch;
}
.vacio-cta{ margin-top:.7rem; }

/* ---------- Popup de venta cruzada (al añadir el top) ---------- */
.upsell-pop{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
@media (min-width:640px){ .upsell-pop{ align-items:center; } }
.upsell-pop.is-open{ opacity:1; visibility:visible; }
.up-overlay{ position:absolute; inset:0; background:rgba(26,24,22,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.up-panel{
  position:relative; z-index:1;
  width:100%; max-width:640px; max-height:92vh; overflow-y:auto;
  background:var(--crema); border-radius:16px 16px 0 0;
  padding:clamp(1.5rem,4vw,2.4rem);
  transform:translateY(26px); transition:transform .35s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 -24px 70px -22px rgba(26,24,22,.5);
}
@media (min-width:640px){ .up-panel{ border-radius:16px; transform:translateY(16px) scale(.98); box-shadow:0 30px 80px -30px rgba(26,24,22,.55); } }
.upsell-pop.is-open .up-panel{ transform:none; }
.up-close{
  position:absolute; top:.8rem; right:.8rem; width:40px; height:40px;
  display:grid; place-items:center; border:0; background:transparent; cursor:pointer;
  color:var(--taupe-deep); border-radius:50%; transition:background .2s,color .2s;
}
.up-close:hover{ background:var(--beige); color:var(--tinta); }
.up-eyebrow{ font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe-deep); }
.up-title{ font-family:var(--serif); font-weight:300; font-size:clamp(1.4rem,4vw,2rem); line-height:1.1; color:var(--tinta); margin-top:.25rem; }
.up-title em{ font-style:italic; }
.up-sub{ font-family:var(--sans); font-weight:300; font-size:.92rem; color:var(--tinta-soft); margin-top:.5rem; max-width:44ch; }
.up-grid{ display:grid; gap:.7rem; margin:1.3rem 0; }
.up-card{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.9rem;
  background:var(--perla); border:1px solid #ece3d5; border-radius:9px; padding:.6rem;
}
.up-card.up-need{ border-color:#c99; box-shadow:0 0 0 2px rgba(200,140,140,.25); }
.up-card.up-done{ opacity:.55; }
.up-foto{ width:56px; height:75px; object-fit:cover; border-radius:4px; background:var(--beige); }
.up-info{ min-width:0; }
.up-name{ font-family:var(--serif); font-size:1rem; color:var(--tinta); line-height:1.2; }
.up-prices{ display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap; margin-top:.15rem; }
.up-now{ font-family:var(--sans); font-weight:600; font-size:.95rem; color:var(--tinta); }
.up-was{ font-family:var(--sans); font-size:.78rem; color:var(--taupe); text-decoration:line-through; }
.up-badge{ font-family:var(--sans); font-size:.66rem; font-weight:700; color:#7a1b1b; background:#f3d9d9; padding:.12rem .4rem; border-radius:3px; }
.up-talla{ display:inline-block; margin-top:.45rem; font-family:var(--sans); font-size:.8rem; padding:.32rem .5rem; border:1px solid var(--taupe); border-radius:4px; background:var(--crema); color:var(--tinta); }
.up-add{
  font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.02em;
  padding:.6rem .95rem; border:1px solid var(--tinta); border-radius:4px;
  background:var(--tinta); color:var(--crema); cursor:pointer; white-space:nowrap; transition:opacity .2s;
}
.up-add:hover{ opacity:.85; }
.up-add:disabled{ background:transparent; color:var(--taupe-deep); border-color:var(--taupe); cursor:default; opacity:1; }
.up-foot{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.3rem; }
.up-foot .btn{ flex:1; min-width:150px; }
.up-seguir{ background:transparent; color:var(--tinta); border:1px solid var(--taupe); }
.up-seguir:hover{ background:var(--beige); }

/* ---------- Selector de cantidad / packs (tiers 2×, 3×) ---------- */
.fp-cantidad .fp-label{ margin-bottom:.6rem; }
.fp-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin-top:.55rem; }
.fp-tier{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.18rem;
  padding:.75rem .65rem .8rem; cursor:pointer; text-align:left;
  background:var(--perla); border:1.5px solid #e6dccc; border-radius:10px;
  font-family:var(--sans); color:var(--tinta); -webkit-tap-highlight-color:transparent;
  transition:border-color .25s ease, transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, background .25s ease;
}
.fp-tier:hover{ transform:translateY(-3px); border-color:var(--taupe); box-shadow:0 12px 26px -18px rgba(26,26,26,.55); }
.fp-tier:active{ transform:translateY(-1px); }
.fp-tier.is-on{ border-color:var(--tinta); background:var(--crema); box-shadow:0 0 0 1.5px var(--tinta); }
.fp-tier:focus-visible{ outline:2px solid var(--taupe-deep); outline-offset:2px; }
.ft-uds{ font-family:var(--serif); font-size:1rem; line-height:1.1; }
.ft-precio{ font-weight:600; font-size:.95rem; }
.ft-ahorro{ font-size:.66rem; color:#7a1b1b; background:#f3d9d9; padding:.1rem .36rem; border-radius:3px; margin-top:.2rem; }
.ft-flag{
  position:absolute; top:-.62rem; left:.55rem;
  font-size:.56rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.16rem .42rem; border-radius:3px; background:var(--taupe-deep); color:var(--crema);
  transition:background .25s ease;
}
.fp-tier.is-best{ border-color:var(--taupe-deep); }
.fp-tier.is-best .ft-flag{ background:var(--tinta); }
.fp-tier.is-best.is-on .ft-flag,
.fp-tier.is-on .ft-flag{ background:var(--tinta); }
/* Check animado al seleccionar */
.fp-tier.is-on::after{
  content:""; position:absolute; top:.5rem; right:.5rem; width:17px; height:17px; border-radius:50%;
  background:var(--tinta) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EFE6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat;
  animation:tierPop .3s cubic-bezier(.2,1.6,.45,1);
}
@keyframes tierPop{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
/* El botón de añadir late suave cuando cambias de tier a un pack */
@keyframes ctaNudge{ 0%,100%{ transform:none; } 40%{ transform:translateY(-2px); } }
@media (prefers-reduced-motion: reduce){
  .fp-tier, .fp-tier:hover, .fp-tier:active{ transition:none; transform:none; }
  .fp-tier.is-on::after{ animation:none; }
}
@media (max-width:420px){
  .fp-tiers{ gap:.4rem; }
  .fp-tier{ padding:.65rem .45rem .7rem; }
  .ft-uds{ font-size:.9rem; }
}

/* ---------- Ficha de producto ---------- */
.ficha{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter) clamp(3rem,7vw,5rem);
  display:grid; gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;
}
@media (max-width:900px){ .ficha{ grid-template-columns:1fr; } }

.fp-galeria{ display:grid; gap:.6rem; }
.fp-principal{
  aspect-ratio:3/4; background:var(--beige); overflow:hidden; border-radius:2px;
}
.fp-principal img{ width:100%; height:100%; object-fit:cover; display:block; }
.fp-minis{ display:flex; gap:.5rem; flex-wrap:wrap; }
.fp-mini{
  width:64px; height:85px; padding:0; border:1px solid transparent;
  background:var(--beige); cursor:pointer; overflow:hidden; border-radius:2px;
}
.fp-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.fp-mini[aria-current="true"]{ border-color:var(--tinta); }
.fp-mini:focus-visible{ outline:2px solid var(--taupe-deep); outline-offset:2px; }

@media (min-width:901px){ .fp-info{ position:sticky; top:6rem; } }

.fp-oferta{
  display:inline-block; background:var(--tinta); color:var(--crema);
  font-family:var(--sans); font-size:.64rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.34rem .66rem; border-radius:2px; margin-bottom:.9rem;
}
.fp-nombre{
  font-family:var(--serif); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.5vw,2.9rem); line-height:1.08; color:var(--tinta);
}
.fp-sub{
  font-family:var(--sans); font-size:.9rem; color:var(--taupe-deep); margin-top:.4rem;
}
.fp-rating{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.6rem;
  font-size:.88rem; color:var(--tinta-soft); text-decoration:none;
}
.fp-rating-stars{ color:#c8901f; letter-spacing:1px; font-size:.95rem; }
.fp-rating b{ color:var(--tinta); font-weight:600; }
.fp-rating:hover{ text-decoration:underline; text-underline-offset:3px; }
.fp-precios{ display:flex; align-items:baseline; gap:.7rem; margin:1.1rem 0 .3rem; flex-wrap:wrap; }
.fp-precio{ font-family:var(--sans); font-size:1.7rem; font-weight:600; color:var(--tinta); }
.fp-antes{ font-family:var(--sans); font-size:1rem; color:var(--taupe); text-decoration:line-through; }
.fp-dto{
  font-family:var(--sans); font-size:.72rem; font-weight:700; color:#7a1b1b;
  background:#f3d9d9; padding:.2rem .45rem; border-radius:2px;
}
.fp-iva{ font-family:var(--sans); font-size:.74rem; color:var(--taupe); }
.fp-resumen{
  font-family:var(--sans); font-weight:300; font-size:.95rem; line-height:1.65;
  color:var(--tinta-soft); margin:1.2rem 0;
}

.fp-campo{ margin:1.3rem 0; }
.fp-label{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--taupe-deep);
  display:block; margin-bottom:.55rem;
}
.fp-label b{ color:var(--tinta); font-weight:600; text-transform:none; letter-spacing:0; font-size:.82rem; }

.fp-colores{ display:flex; gap:.55rem; flex-wrap:wrap; }
.fp-color{
  width:34px; height:34px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid rgba(26,26,26,.2); position:relative;
}
.fp-color[aria-pressed="true"]{ box-shadow:0 0 0 1.5px var(--crema), 0 0 0 3px var(--tinta); }
.fp-color:focus-visible{ outline:2px solid var(--taupe-deep); outline-offset:3px; }
/* color agotado: atenuado + raya diagonal */
.fp-color.is-agotado{ opacity:.5; }
.fp-color.is-agotado::after{
  content:""; position:absolute; inset:-1px;
  background:linear-gradient(to top left, transparent calc(50% - 1px), rgba(26,26,26,.75) 50%, transparent calc(50% + 1px));
  border-radius:50%;
}
/* botón deshabilitado (color agotado) */
.btn.is-disabled{ opacity:.45; cursor:not-allowed; pointer-events:auto; }

.fp-tallas{ display:flex; gap:.5rem; flex-wrap:wrap; }
.fp-talla{
  min-width:52px; padding:.62rem .8rem; cursor:pointer;
  background:transparent; border:1px solid var(--beige);
  font-family:var(--sans); font-size:.88rem; font-weight:500; color:var(--tinta);
  border-radius:2px;
}
.fp-talla:hover{ border-color:var(--taupe); }
.fp-talla[aria-pressed="true"]{ background:var(--tinta); border-color:var(--tinta); color:var(--crema); }
.fp-talla:focus-visible{ outline:2px solid var(--taupe-deep); outline-offset:2px; }
.fp-medidas{ font-family:var(--sans); font-size:.76rem; color:var(--taupe); margin-top:.5rem; }

.fp-pack{
  display:flex; align-items:center; gap:.7rem;
  background:var(--perla); border:1px solid var(--beige);
  padding:.85rem 1rem; border-radius:2px; margin:1.2rem 0;
}
.fp-pack-tag{
  font-family:var(--sans); font-size:.6rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; background:var(--tinta); color:var(--crema);
  padding:.28rem .5rem; border-radius:2px; flex:none;
}
.fp-pack-txt{ font-family:var(--sans); font-size:.84rem; color:var(--tinta-soft); line-height:1.4; }
.fp-pack-txt b{ color:var(--tinta); }

/* El recuadro rojo lo define style.css (más grande y llamativo: un tester no
   vio que le faltaba la talla). Aquí solo la familia: esta hoja carga DESPUÉS
   y con font-size/color propios pisaba el aviso. */
.fp-aviso{
  font-family:var(--sans);
  margin-top:.85rem;
}
.fp-detalles{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.5rem; }
.fp-detalles li{
  font-family:var(--sans); font-size:.86rem; color:var(--tinta-soft);
  padding-left:1.1rem; position:relative; line-height:1.5;
}
.fp-detalles li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:5px; height:1px; background:var(--taupe);
}
.fp-envio{
  border-top:1px solid var(--beige); margin-top:1.6rem; padding-top:1.1rem;
  display:grid; gap:.4rem;
}
.fp-envio p{ font-family:var(--sans); font-size:.82rem; color:var(--tinta-soft); }
.fp-envio b{ color:var(--tinta); font-weight:600; }
/* Las tarifas por debajo del umbral: se leen, pero no compiten con el titular.
   Van escritas porque "envío gratis" a secas no es cierto en Canarias. */
.fp-envio-tarifas{ font-size:.75rem; opacity:.85; margin-top:-.25rem; }

/* ---------- Upsell dentro del cajón ---------- */
.cart-upsell{ border-top:1px solid var(--beige); margin-top:1.1rem; padding-top:1rem; }
.cart-upsell-title{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--taupe-deep);
  margin-bottom:.7rem;
}
.cart-upsell-card{
  display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem;
}
.cart-upsell-card img{
  width:56px; height:75px; object-fit:cover; flex:none;
  background:var(--beige); border-radius:2px;
}
.cu-info{ flex:1; min-width:0; }
.cu-name{ font-family:var(--serif); font-size:.95rem; color:var(--tinta); line-height:1.25; }
.cu-prices{ display:flex; align-items:baseline; gap:.4rem; margin-top:.15rem; }
.cu-price{ font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--tinta); }
.cu-was{ font-family:var(--sans); font-size:.75rem; color:var(--taupe); text-decoration:line-through; }
.cu-btn{
  flex:none; border:1px solid var(--tinta); background:transparent;
  color:var(--tinta); font-family:var(--sans); font-size:.76rem; font-weight:600;
  padding:.5rem .85rem; border-radius:2px; cursor:pointer; text-decoration:none;
  display:inline-block; white-space:nowrap;
}
.cu-btn:hover{ background:var(--tinta); color:var(--crema); }

/* Agrupación por producto y chip de pack en el cajón */
.cart-group{ margin-bottom:1.1rem; }
.cart-group-name{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--taupe-deep);
  margin-bottom:.5rem;
}
.cart-pack{
  display:block; width:100%; text-align:left; margin-top:.4rem;
  font-family:var(--sans); font-size:.78rem; line-height:1.4;
  padding:.55rem .7rem; border-radius:2px; border:1px solid var(--beige);
}
.cart-pack.ok{ background:var(--beige); color:var(--tinta-soft); border-style:solid; }
.cart-pack.push{
  background:transparent; border-style:dashed; border-color:var(--taupe);
  color:var(--tinta); cursor:pointer; font-weight:500;
}
.cart-pack.push:hover{ background:var(--beige); }

/* ---------- Ofertas ---------- */
.pack-destacado{
  max-width:var(--max); margin:0 auto clamp(2.5rem,6vw,4rem);
  padding:0 var(--gutter);
}
.pack-caja{
  background:var(--perla); border:1px solid var(--beige);
  padding:clamp(1.4rem,4vw,2.4rem);
  display:grid; gap:clamp(1.2rem,3vw,2.4rem);
  grid-template-columns:auto 1fr auto; align-items:center;
}
@media (max-width:760px){ .pack-caja{ grid-template-columns:1fr; text-align:left; } }
/* Una foto por unidad del pack. Se reparten el ancho en vez de ir a tamaño
   fijo: con cuatro prendas (2 tops + vaquero + bolso) a 88 px cada una, en un
   móvil de 390 px la última quedaba cortada por el borde derecho. */
.pack-fotos{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:.5rem;
  width:100%;
  max-width:calc(88px * 4 + .5rem * 3);
}
.pack-fotos img{
  width:100%; aspect-ratio:88/117; height:auto;
  object-fit:cover; border-radius:2px; background:var(--beige);
}
.pack-nombre{ font-family:var(--serif); font-weight:300; font-size:clamp(1.4rem,3vw,2rem); color:var(--tinta); line-height:1.15; }
.pack-claim{ font-family:var(--sans); font-size:.88rem; color:var(--tinta-soft); margin-top:.4rem; }
.pack-precios{ display:flex; align-items:baseline; gap:.6rem; margin-top:.7rem; }
.pack-precio{ font-family:var(--sans); font-size:1.5rem; font-weight:600; color:var(--tinta); }
.pack-antes{ font-family:var(--sans); font-size:.9rem; color:var(--taupe); text-decoration:line-through; }

/* Móvil: la foto 3/4 se comía 85 % de la pantalla y empujaba el "Añadir al
   carrito" dos pantallas abajo. Se limita la altura y se encogen las miniaturas
   para que precio, talla y botón entren mucho antes. */
@media (max-width:900px){
  .fp-principal{ aspect-ratio:auto; height:52svh; max-height:400px; }
  .fp-mini{ width:52px; height:69px; }
  .fp-galeria{ gap:.45rem; }
}

/* Barra fija con el CTA (solo móvil). El botón inline sigue existiendo: esta
   solo aparece cuando aquel no está en pantalla, y le delega el clic. */
.fp-sticky{ display:none; }
@media (max-width:900px){
  .fp-sticky{
    position:fixed; left:.6rem; right:.6rem; bottom:.6rem; z-index:90;
    display:flex; align-items:center; gap:.75rem;
    background:rgba(245,239,230,.97);
    border:1px solid rgba(26,26,26,.10);
    border-radius:14px; padding:.5rem .55rem .5rem .9rem;
    box-shadow:0 14px 38px -12px rgba(26,26,26,.30);
    transform:translateY(140%);
    transition:transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .fp-sticky.is-visible{ transform:translateY(0); }
  .fp-sticky-precio{
    font-family:var(--serif); font-size:1.05rem; color:var(--tinta);
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .fp-sticky-btn{ flex:1; padding:.8rem .9rem; font-size:.66rem; }
  body{ padding-bottom:76px; }
}

/* Iconos de sección más grandes. Son SVG en línea: escalan sin perder nitidez,
   pero el trazo hay que afinarlo o se ve tosco al ampliarlo. */
.seccion-icono svg{
  width:clamp(60px, 7.2vw, 88px);
  height:clamp(60px, 7.2vw, 88px);
  stroke-width:1.15;
}
@media (max-width:640px){
  .seccion-icono svg{ width:56px; height:56px; stroke-width:1.25; }
}

/* ---------- «Llévate el look»: los packs que contienen esta prenda ---------- */
/* Vender el pack en la ficha convierte mejor que esperar a que la clienta lo
   descubra en el carrito. El botón abre el configurador de js/pack.js. */
.llevate-el-look{
  background:var(--beige);
  padding:clamp(2.5rem,6vw,4rem) var(--gutter);
}
.lel-inner{
  max-width:1100px;margin:0 auto;
  display:grid;gap:1rem;
}
.lel-inner .section-title{ margin-bottom:.6rem; }
.lel-card{
  display:flex;align-items:center;gap:clamp(.9rem,3vw,2rem);
  background:var(--crema);
  border-radius:16px;
  padding:clamp(.9rem,2.5vw,1.4rem);
}
.lel-fotos{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:.4rem;flex-shrink:0;
  width:min(48%,340px);
}
.lel-fotos img{
  width:100%;aspect-ratio:70/93;height:auto;object-fit:cover;
  border-radius:8px;background:var(--beige);
}
.lel-info{flex:1;min-width:0}
.lel-nombre{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.15rem,3vw,1.6rem);
  color:var(--tinta);margin:0 0 .45rem;
}
.lel-precios{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin:0 0 .9rem}
.lel-precio{font-family:var(--sans);font-size:1.25rem;font-weight:600;color:var(--tinta)}
.lel-antes{font-size:.85rem;color:var(--taupe)}
.lel-ahorro{
  font-size:.7rem;font-weight:600;
  color:#2f5d39;background:rgba(61,110,71,.12);
  border-radius:999px;padding:.2rem .55rem;
}
.lel-btn{padding:.7rem 1.5rem;font-size:.74rem}
@media (max-width:640px){
  .lel-card{flex-direction:column;align-items:stretch}
  .lel-fotos{width:100%}
  .lel-info{text-align:center}
  .lel-precios{justify-content:center}
  .lel-btn{width:100%}
}