/* ============================================================
   Perfuaromas — Design System CSS
   Convertido del prototipo React al tema WordPress/WooCommerce
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
:root {
  --ink:       #161514;
  --ink-soft:  #3a3633;
  --paper:     #faf8f7;
  --paper-2:   #f1ece9;
  --paper-3:   #e9e2de;
  --pink:      #ce1059;
  --pink-deep: #a50f49;
  --pink-light:#e87fb0;
  --pink-rgb:  206,16,89;
  --gray:      #716a68;
  --line:      #e4ddd8;
  --line-soft: #efe9e5;
  --serif:     "Cormorant Garamond", Georgia, serif;
  --sans:      "Jost", -apple-system, system-ui, sans-serif;
  --script:    "Pinyon Script", cursive;
  --maxw:      1920px;
}

/* ── Reset base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { cursor: pointer; text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { margin: 0; font-weight: 500; }
p { margin: 0; }

/* ── Tokens helper ───────────────────────────────────────── */
.pl-script  { font-family: var(--script); color: var(--pink); font-weight: 400; letter-spacing: .01em; }
.pl-eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--pink); font-weight: 500; display: block; }
.pl-h2      { font-family: var(--serif); font-size: clamp(30px,4vw,46px); font-weight: 500; line-height: 1.04; letter-spacing: -.01em; margin-top: 10px; }
.pl-eyebrow--light { color: rgba(var(--pink-rgb),.85); }
.pl-h2--light      { color: #fff; }

/* ── Announce bar ────────────────────────────────────────── */
.pl-announce {
  background: var(--ink); color: #f3efec;
  height: 42px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pl-announce-track { overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pl-announce-msg   { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; white-space: nowrap; }
.pl-ann-in  { animation: plSlideIn .32s cubic-bezier(.25,.8,.25,1) both; }
.pl-ann-out { animation: plSlideOut .28s ease-in both; }
@keyframes plSlideIn  { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes plSlideOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-14px); } }

/* ── Utility bar ─────────────────────────────────────────── */
.pl-util { background: var(--paper-2); border-bottom: 1px solid var(--line-soft); }
.pl-util-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto; padding: 7px 40px;
  display: flex; align-items: center; gap: 14px; justify-content: flex-end;
}
.pl-util-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray); letter-spacing: .03em; transition: color .2s; }
.pl-util-item:hover { color: var(--pink); }
.pl-util-item svg  { width: 13px; height: 13px; flex-shrink: 0; opacity: .7; }
.pl-util-sep       { color: var(--line); font-size: 13px; user-select: none; }

/* ── Catálogo PDF (centrado en la utility bar) ──────────────── */
.pl-util-catalog       { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pl-util-catalog-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px;
  background: var(--ink); color: var(--paper); border: none;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: background .2s, transform .2s;
  white-space: nowrap;
}
.pl-util-catalog .pl-util-catalog-btn { position: static; transform: none; }
.pl-util-catalog-btn:hover { background: var(--pink); transform: translate(-50%, -50%) scale(1.03); }
.pl-util-catalog .pl-util-catalog-btn:hover { transform: scale(1.03); }
.pl-util-catalog-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.pl-util-catalog-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(20,20,20,.12); padding: 6px; min-width: 180px;
  display: none; flex-direction: column; gap: 2px; z-index: 50;
}
.pl-util-catalog.is-open .pl-util-catalog-menu { display: flex; }
.pl-util-catalog-menu a {
  padding: 7px 10px; font-size: 12.5px; color: var(--ink); border-radius: 5px; text-decoration: none;
  transition: background .15s;
}
.pl-util-catalog-menu a:hover { background: var(--paper-2); color: var(--pink); }

/* ── Topbar sticky ───────────────────────────────────────── */
.pl-sticky-wrap { position: sticky; top: 0; z-index: 40; will-change: transform; transform: translateZ(0); }
.pl-topbar { position: relative; }

/* ── Header ──────────────────────────────────────────────── */
.pl-header {
  /* La columna elastica es la de la derecha (buscador e iconos): asi el que
     cede espacio al estrecharse la pantalla es el buscador, no el menu. */
  display: grid; grid-template-columns: auto max-content minmax(0, 1fr);
  align-items: center; padding: 18px 40px;
  /* El crema de la barra de contacto que se retiró: el encabezado se queda
     con ese color en vez de dejar un blanco plano. */
  background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.pl-header.is-scrolled { padding: 10px 40px; }
.pl-nav          { display: flex; gap: 30px; align-items: center; }
.pl-nav--left    { justify-content: flex-start; margin-left: 46px; flex-wrap: nowrap; }
/* Los iconos van mas juntos que los enlaces del menu: forman un grupo. */
.pl-nav--right   { justify-content: flex-end; min-width: 0; gap: 14px; }
.pl-nav-link     { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--ink); position: relative; padding: 4px 0; white-space: nowrap; }
.pl-nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--pink); transition: width .3s; }
.pl-nav-link:hover         { color: var(--ink); }
.pl-nav-link:hover::after  { width: 100%; }
.pl-nav-link.is-active     { color: var(--ink); }
.pl-nav-link.is-active::after { width: 100%; }

/* ── Desktop nav: list reset ────────────────────────────────── */
.pl-nav-item { list-style: none; position: relative; }
/* Bridge invisible que cubre el gap entre el link y el dropdown */
.pl-nav-item--has-sub::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }

/* ── Desktop nav: caret ─────────────────────────────────────── */
.pl-nav-caret { width: 8px; height: 5px; margin-left: 5px; vertical-align: middle; transition: transform .22s; }
.pl-nav-item--has-sub:hover .pl-nav-caret { transform: rotate(180deg); }

/* ── Desktop nav: dropdown ──────────────────────────────────── */
.pl-nav-sub {
  list-style: none; padding: 8px 0; margin: 0;
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #fff; min-width: 160px;
  border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 200;
}
.pl-nav-sub::before {
  content: ""; position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom: 5px solid var(--line);
  border-top: none;
}
.pl-nav-sub::after {
  content: ""; position: absolute; top: -5px; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom: 5px solid #fff;
  border-top: none;
}
.pl-nav-item--has-sub:hover .pl-nav-sub {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.pl-nav-sub-link {
  display: block; padding: 10px 22px;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
  transition: color .18s, background .18s;
}
.pl-nav-sub-link:hover,
.pl-nav-sub-link.is-active { color: var(--pink); background: var(--paper-2); }

/* ── Mobile nav: list reset & submenu ────────────────────────── */
.pl-mob-item { list-style: none; }
.pl-mob-item-row { display: flex; align-items: center; justify-content: space-between; }
.pl-mob-item-row .pl-mob-link { flex: 1; }
.pl-mob-sub-toggle {
  background: none; border: none; padding: 8px 10px; cursor: pointer;
  color: var(--ink-soft); display: flex; align-items: center;
  transition: transform .22s, color .18s;
}
/* overflow visible: al girar la flecha su trazo se salia del viewBox y se veia cortada. */
.pl-mob-sub-toggle svg   { width: 12px; height: 8px; display: block; overflow: visible; }
.pl-mob-sub-toggle:hover { color: var(--pink); }
.pl-mob-item--has-sub.is-open .pl-mob-sub-toggle { transform: rotate(180deg); }
.pl-mob-sub {
  display: none; list-style: none; padding: 0 0 4px 18px; margin: 0;
  border-left: 2px solid rgba(var(--pink-rgb),.45);
}
.pl-mob-item--has-sub.is-open > .pl-mob-sub { display: block; }
.pl-mob-sub-link {
  display: block; padding: 10px 0;
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink); font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
  transition: color .18s;
}
.pl-mob-sub-link:hover,
.pl-mob-sub-link.is-active { color: var(--pink); }
.pl-mob-link.is-active { color: var(--ink); }

/* Iconos del encabezado. Cada uno vive en un círculo de 40 px que solo se
   ve al pasar por encima: da un área de toque decente en el móvil, donde
   antes eran 21 px de trazo fino, y deja claro que se pulsan. */
.pl-icon {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--ink-soft); background: transparent;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.pl-icon svg { width: 22px; height: 22px; display: block; }
.pl-icon:hover { background: var(--paper-3); }

/* La silueta de la cuenta, en rojo. */
.pl-account-wrap .pl-icon { color: var(--pink); }
.pl-account-wrap .pl-icon:hover { color: var(--pink-deep); }

/* El carrito es la acción principal del encabezado, así que va al revés que
   los demás: botón rojo lleno con la bolsa en blanco. En blanco a secas sobre
   el crema no se vería, y de paso queda claro cuál de los tres se pulsa. */
.pl-icon--cart {
  padding-right: 0;
  background: var(--pink); color: #fff;
  box-shadow: 0 8px 18px -10px rgba(var(--pink-rgb),.85);
}
.pl-icon--cart:hover { background: var(--pink-deep); color: #fff; }
.pl-icon--cart:active { background: var(--pink-deep); }

/* Account dropdown */
.pl-account-wrap { position: relative; display: flex; align-items: center; }
.pl-account-drop {
  position: absolute; top: 100%; right: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 2px; min-width: 200px;
  padding: 10px 0 10px; padding-top: 20px;
  box-shadow: 0 16px 40px -16px rgba(22,21,20,.22);
  opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity .22s, transform .22s; z-index: 60;
}
.pl-account-wrap:hover .pl-account-drop { opacity: 1; pointer-events: auto; transform: none; }
.pl-account-drop::before {
  content: ""; position: absolute; top: -6px; right: 14px;
  width: 11px; height: 11px; background: #fff;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); transform: rotate(45deg);
}
.pl-account-drop::after { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.pl-account-title { font-family: var(--serif); font-size: 17px; font-weight: 600; padding: 10px 22px 8px; color: var(--ink); margin: 0; border-bottom: 1px solid var(--line-soft); }
.pl-account-link  { display: block; padding: 11px 22px; font-size: 13.5px; color: var(--ink-soft); letter-spacing: .01em; transition: color .18s, background .18s; }
.pl-account-link:hover { color: var(--pink); background: var(--paper-2); }

/* Search */
/* Buscador en cápsula con filo rojo. Sobre el crema del encabezado el fondo
   blanco y el borde de color lo separan del resto y dicen «escribe aquí». */
.pl-search {
  display: flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--pink); border-radius: 999px;
  padding: 9px 16px; background: #fff;
  transition: border-color .22s, box-shadow .22s;
  /* Arranca en 210px pero puede encogerse hasta dejar sitio al menu. */
  flex: 0 1 210px;
  min-width: 128px;
  /* Aire fijo entre el ultimo enlace del menu y la capsula del buscador. */
  margin-left: 22px;
}
.pl-search:hover { border-color: var(--pink-deep); }
.pl-search:focus-within {
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 3px rgba(var(--pink-rgb),.14);
}
.pl-search-ico { width: 16px; height: 16px; color: var(--pink); flex-shrink: 0; }
.pl-search-mob-close { display: none; }
.pl-search input { border: none; outline: none; background: none; font-family: var(--sans); font-size: 12.5px; letter-spacing: .04em; color: var(--ink); width: 100%; font-weight: 300; }
.pl-search input::placeholder { color: var(--gray); letter-spacing: .04em; }
.pl-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Live search dropdown */
.pl-search { position: relative; }
.pl-search-drop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: -1px; right: -1px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(0,0,0,.10);
  border-radius: 14px; /* a juego con la cápsula del buscador */
  z-index: 300;
  overflow: hidden;
}
.pl-search-drop.is-open { display: block; }
.pl-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s;
  border-bottom: 1px solid var(--line);
}
.pl-search-result:last-of-type { border-bottom: none; }
.pl-search-result:hover,
.pl-search-result.is-active { background: var(--paper-2); }
.pl-search-result__thumb {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.pl-search-result__thumb--empty {
  width: 40px; height: 40px;
  background: var(--paper-2);
  border-radius: 2px;
  flex-shrink: 0;
}
.pl-search-result__info { flex: 1; min-width: 0; }
.pl-search-result__name {
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.pl-search-result__inspired {
  font-size: 11px;
  color: var(--gray);
  margin-top: 1px;
  font-style: italic;
}
.pl-search-result__price {
  font-size: 11.5px;
  color: var(--gray);
  margin-top: 2px;
}
.pl-search-empty {
  padding: 14px 12px;
  font-size: 12.5px;
  color: var(--gray);
  text-align: center;
}
.pl-search-drop-footer {
  padding: 9px 12px;
  font-size: 11.5px;
  color: var(--gray);
  text-align: center;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background .15s;
}
.pl-search-drop-footer:hover { background: var(--paper-2); color: var(--ink); }

/* Cart icon shake on add */
@keyframes pl-cart-shake {
  0%,100% { transform: rotate(0) scale(1); }
  15%  { transform: rotate(-14deg) scale(1.15); }
  30%  { transform: rotate(12deg)  scale(1.18); }
  45%  { transform: rotate(-10deg) scale(1.12); }
  60%  { transform: rotate(8deg)   scale(1.08); }
  75%  { transform: rotate(-5deg)  scale(1.04); }
  90%  { transform: rotate(3deg)   scale(1.02); }
}
.pl-icon--cart.is-shake svg {
  animation: pl-cart-shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
  transform-origin: 11px 4px;
}
/* Cart remind shake — más notorio, se repite 3 veces */
@keyframes pl-cart-remind {
  0%,100% { transform: rotate(0) scale(1); }
  8%   { transform: rotate(-22deg) scale(1.25); }
  18%  { transform: rotate(20deg)  scale(1.28); }
  28%  { transform: rotate(-18deg) scale(1.22); }
  38%  { transform: rotate(16deg)  scale(1.18); }
  48%  { transform: rotate(-12deg) scale(1.12); }
  58%  { transform: rotate(9deg)   scale(1.07); }
  68%  { transform: rotate(-5deg)  scale(1.03); }
  80%  { transform: rotate(2deg)   scale(1.01); }
}
.pl-icon--cart.is-remind svg {
  animation: pl-cart-remind 0.9s cubic-bezier(.36,.07,.19,.97) 3;
  transform-origin: 11px 4px;
}

/* Contador del carrito, en negro. Sobre el botón rojo un contador rojo se
   perdería; el negro de la tienda contrasta con el botón y con el crema del
   encabezado, y el anillo lo despega de la bolsa. */
.pl-cart-count {
  position: absolute; top: -1px; right: -2px;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--ink); color: #fff; font-style: normal;
  font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0;
  border-radius: 999px; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--paper-2);
}

/* ── Logo ────────────────────────────────────────────────── */
.pl-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 2px 8px; }
.pl-logo--img { padding: 0; }
.pl-logo--img img { width: 130px; height: auto; display: block; }
/* Logo alineado a la izquierda en la cabecera de escritorio */
.pl-header .pl-logo     { justify-self: start; }
.pl-header .pl-logo img { width: 120px; }
.pl-mob-nav-head .pl-logo img { width: 90px; height: auto; display: block; }
.pl-logo-word { display: none; }

/* ── Buttons ─────────────────────────────────────────────── */
.pl-btn { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; background: var(--ink); color: var(--paper); padding: 16px 30px; border-radius: 1px; transition: .25s; display: inline-flex; align-items: center; }
.pl-btn:hover        { background: var(--pink); }
.pl-btn--ghost       { background: none; color: var(--ink); border: 1px solid var(--ink); }
.pl-btn--ghost:hover { background: var(--ink); color: var(--paper); }
.pl-btn--hero        { margin-top: 32px; background: #fff; color: var(--ink); border: none; }
.pl-btn--hero:hover  { background: var(--pink); color: #fff; }

/* ── Hero Slider ─────────────────────────────────────────── */
.pl-hero-slider {
  position: relative; width: 100%; height: 88vh; min-height: 560px; max-height: 900px;
  overflow: hidden;
  background: linear-gradient(135deg,#1c1410 0%,#2d1a22 40%,#1a1018 70%,#0f0d0c 100%);
}
.pl-hero-slider::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(var(--pink-rgb),.13) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 20% 80%, rgba(var(--pink-rgb),.07) 0%, transparent 60%);
  pointer-events: none;
}
.pl-hs-slide { position: absolute; inset: 0; transition: opacity .7s ease; }
.pl-hs-slide.is-hidden  { opacity: 0; pointer-events: none; }
.pl-hs-slide.is-current { opacity: 1; z-index: 1; }
.pl-hs-slide.is-leaving { opacity: 0; z-index: 0; transition: opacity .7s ease; }
.pl-hs-slide img, .pl-hs-slide .pl-hs-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pl-hs-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(14,12,11,.72) 0%, rgba(14,12,11,.3) 55%, rgba(14,12,11,.08) 100%);
  z-index: 2;
}

/* Hero content */
.pl-hs-content {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px min(9vw,110px); max-width: 860px;
}
.pl-hs-content-inner { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.pl-hs-content-inner.is-visible { opacity: 1; transform: none; }
.pl-hs-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(52px,8vw,100px); line-height: .95;
  letter-spacing: -.015em; margin: 16px 0 20px; color: #fff; display: flex; flex-direction: column;
}
.pl-hs-line        { display: block; }
.pl-hs-accent      { color: var(--pink); font-family: var(--script); font-size: 1.08em; line-height: .85; }
.pl-hero-kicker    { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: rgba(255,255,255,.7); font-weight: 500; }
.pl-hero-sub       { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.75); max-width: 44ch; }

/* Dots */
.pl-hs-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 10px; align-items: center; }
.pl-hs-dot  { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); background: transparent; cursor: pointer; transition: .3s; padding: 0; }
.pl-hs-dot.is-on { background: #fff; border-color: #fff; transform: scale(1.25); }

/* Arrows */
.pl-hs-arr {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; transition: .25s; backdrop-filter: blur(4px);
}
.pl-hs-arr:hover { background: rgba(255,255,255,.25); }
.pl-hs-arr svg   { width: 20px; height: 20px; }
.pl-hs-arr--l { left: 28px; }
.pl-hs-arr--r { right: 28px; }

/* ── Sections ────────────────────────────────────────────── */
.pl-section              { max-width: var(--maxw); margin: 0 auto; padding: 84px 40px; }
.pl-section-head         { text-align: center; margin-bottom: 46px; }
.pl-section-head--row    { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; }
.pl-seeall               { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.pl-seeall:hover         { color: var(--pink); border-color: var(--pink); }
.pl-seeall--light        { color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.2); }
.pl-seeall--light:hover  { color: var(--pink); border-color: var(--pink); }

/* ── Categorías ──────────────────────────────────────────── */
.pl-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.pl-cat {
  flex: 0 0 calc(25% - 14px); max-width: calc(25% - 14px);
  text-align: left; background: var(--paper-2);
  border: 1px solid var(--line-soft); border-radius: 2px;
  padding: 0; overflow: hidden; transition: .3s;
  display: flex; flex-direction: column; cursor: pointer;
}
.pl-cat:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(22,21,20,.4); }
.pl-cat-art  { height: 230px; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(180deg,#fff,var(--paper-2)); }
.pl-cat-art--photo { padding: 0; }
.pl-cat-art--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-cat-text { padding: 22px 24px 26px; border-top: 1px solid var(--line-soft); }
.pl-cat-kicker { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gray); display: block; margin-bottom: 6px; }
.pl-cat-name   { font-family: var(--serif); font-size: 30px; font-weight: 500; display: block; line-height: 1; }
.pl-cat-link   { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); display: inline-flex; gap: 6px; margin-top: 14px; }
.pl-cat-link i { font-style: normal; transition: .25s; }
.pl-cat:hover .pl-cat-link i { transform: translateX(5px); }

/* ── Dark section (últimos) ──────────────────────────────── */
.pl-dark-wrap { background: var(--ink); width: 100%; }
.pl-dark-wrap .pl-section { background: transparent; }

/* ── Product grid & card ─────────────────────────────────── */
.pl-grid          { display: flex; gap: 22px; transition: transform .4s cubic-bezier(.25,.1,.25,1); }
.pl-grid--centered { justify-content: center; flex-wrap: wrap; }
.pl-grid--carousel { flex-wrap: nowrap; }
.pl-card {
  flex: 0 0 calc(25% - 16.5px); max-width: calc(25% - 16.5px);
  background: #fff; border: 1px solid var(--line-soft); border-radius: 2px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: .3s;
}

/* ── Product carousel controls ───────────────────────────── */
.pl-carousel-outer { position: relative; }
.pl-carousel-clip  { overflow: hidden; }
.pl-carousel-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
  box-shadow: 0 4px 18px rgba(22,21,20,.14);
  transition: opacity .25s, box-shadow .25s;
  opacity: 0; pointer-events: none;
}
.pl-carousel-arr.is-visible   { opacity: 1; pointer-events: auto; }
.pl-carousel-arr.is-disabled  { opacity: .28; cursor: default; }
.pl-carousel-arr:not(.is-disabled):hover { box-shadow: 0 8px 28px rgba(22,21,20,.22); }
.pl-carousel-arr--l { left: -22px; }
.pl-carousel-arr--r { right: -22px; }
.pl-dark-wrap .pl-carousel-arr { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.pl-dark-wrap .pl-carousel-arr svg { stroke: #fff; }
/* Al pasar el cursor, filo rojo y sombra del mismo color, con un pequeño
   levantamiento. Es el trato que ya tenían las tarjetas de «Los más elegidos»
   de la portada; ahora lo llevan todas —tienda, categorías, relacionados y
   buscador— para que una tarjeta se comporte igual en toda la web.
   Va dentro de (hover:hover) para que en el móvil no se quede pegado tras
   tocarla, que es lo que pasa cuando se aplica sin más. */
@media (hover: hover) {
  .pl-card:hover {
    border-color: #d31021;
    box-shadow: 0 18px 38px -20px rgba(211,16,33,.42);
    transform: translateY(-3px);
  }
}
.pl-card-media {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  overflow: hidden; background: linear-gradient(180deg,#fdfcfb,var(--paper-2));
}
.pl-card-img-wrap { display: contents; }
.pl-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pl-card-flags { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.pl-card-flags--right { left: auto; right: 14px; align-items: flex-end; }
.pl-flag       { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 5px 9px; border-radius: 1px; font-weight: 500; }
.pl-flag--ph   { background: rgba(var(--pink-rgb),.1); color: var(--pink-deep); border: 1px solid rgba(var(--pink-rgb),.25); }
.pl-flag--fav  { background: rgba(184,134,11,.12); color: #8a6200; border: 1px solid rgba(184,134,11,.3); }
.pl-card-soldout-wrap {
  position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none;
  background: rgba(250,248,247,.32);
}
.pl-card-soldout {
  position: absolute; top: 26px; left: -42px; width: 180px;
  transform: rotate(-45deg); transform-origin: center;
  background: var(--ink); color: #fff;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  text-align: center; padding: 6px 0;
  box-shadow: 0 2px 8px rgba(22,21,20,.25);
}
.pl-quick {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  background: rgba(22,21,20,.92); color: #fff;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  padding: 13px; border-radius: 1px; display: block; text-align: center;
  opacity: 0; transform: translateY(10px); transition: .28s;
}
@media (hover: hover) { .pl-card:hover .pl-quick { opacity: 1; transform: none; } }
.pl-card-family-bar { height: 3px; position: absolute; bottom: 0; left: 0; right: 0; }
.pl-card-body    { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; cursor: pointer; }
.pl-card-top     { display: flex; justify-content: space-between; align-items: center; }
.pl-card-fam     { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gray); }
.pl-card-conc    { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gray); background: var(--paper-2); padding: 3px 7px; border-radius: 1px; }
.pl-card-name    { font-family: var(--serif); font-size: 25px; font-weight: 500; margin-top: 5px; line-height: 1; }
.pl-card-name a  { color: inherit; }
.pl-inspired     { margin-top: 8px; font-size: 14px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 1px; }
.pl-inspired-script { font-family: var(--sans); color: var(--pink); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.pl-inspired-name   { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); line-height: 1.1; }
.pl-card-foot    { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: auto; padding-top: 18px; }
.pl-card-foot .pl-add { align-self: stretch; text-align: center; }
.pl-card-price   { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: .01em; }
.pl-card-price del { font-size: .72em; font-weight: 400; color: var(--gray); text-decoration: line-through; margin-right: 4px; }
.pl-card-price ins { text-decoration: none; color: var(--pink-deep); }
.pl-add {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--ink); padding: 10px 16px; border-radius: 1px; transition: .22s; white-space: nowrap;
  touch-action: manipulation;
}
@media (hover: hover) {
  .pl-add:hover { background: var(--ink); color: #fff; }
}
.pl-add.is-added { background: var(--pink); border-color: var(--pink); color: #fff; }
.pl-add--lg      { padding: 16px 26px; font-size: 12px; }
.pl-add--full    { width: 100%; text-align: center; }

/* ── CTA rojo destacado, con un tic cada pocos segundos ──────────────────────
   Lo usan las tarjetas de «Los más elegidos» y «Nuevos». El nombre viejo
   (.pl-buy-now) se conserva por si queda algún enlace suelto en caché.     */
.pl-buy-now,
.pl-add--fuerte {
  background: #d31021; border-color: #d31021; color: #fff;
  animation: pl-tick 5s ease-in-out infinite;
  transform-origin: center;
}
@media (hover: hover) {
  .pl-buy-now:hover,
  .pl-add--fuerte:hover { background: #b30d1c; border-color: #b30d1c; color: #fff; }
}
/* El movimiento es corto y con pausa larga: llama la atención sin marear. */
@keyframes pl-tick {
  0%, 86%, 100% { transform: scale(1); }
  90%           { transform: scale(1.06); }
  94%           { transform: scale(.98); }
  97%           { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-buy-now,
  .pl-add--fuerte { animation: none; }
}

/* ── Sección "Los más elegidos" ──────────────────────────────────────────── */
.pl-eleg-timer {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; letter-spacing: .08em; color: var(--gray);
  white-space: nowrap; flex-shrink: 0;
}
.pl-eleg-timer svg { width: 14px; height: 14px; opacity: .7; flex-shrink: 0; }
.pl-eleg-timer:empty, .pl-eleg-timer[hidden] { display: none; }

/* Cabecera centrada: título arriba y contador debajo. */
.pl-elegidos .pl-section-head--row {
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px;
}

/* Tarjetas con borde marcado y sombra al pasar por encima. */
.pl-elegidos .pl-card { border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s, transform .25s; }
@media (hover: hover) {
  .pl-elegidos .pl-card:hover {
    border-color: #d31021;
    box-shadow: 0 18px 38px -20px rgba(211,16,33,.42);
    transform: translateY(-3px);
  }
}

/* Ficha corta: mililitros, familia olfativa y concentración. */
.pl-card-specs {
  list-style: none; margin: 9px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pl-spec {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray); background: var(--paper-2);
  border: 1px solid var(--line-soft); border-radius: 2px;
  padding: 4px 8px; white-space: nowrap;
}
.pl-spec--ml { color: var(--ink); font-weight: 500; }

/* Precio limpio: solo tachado y precio de venta. */
.pl-card-price--clean del { opacity: .55; margin-right: 6px; font-size: .88em; }
.pl-card-price--clean ins { text-decoration: none; color: var(--pink); font-weight: 500; }

/* WooCommerce add-to-cart inside pl-card */
.pl-card .add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; }
.pl-card .added_to_cart { display: none; }

/* Dark card */
.pl-card--dark { background: #242120; border-color: #333; }
.pl-card--dark .pl-card-body      { background: #242120; }
.pl-card--dark .pl-card-name      { color: #f3efec; }
.pl-card--dark .pl-card-name a    { color: #f3efec; }
.pl-card--dark .pl-card-price     { color: #f3efec; }
.pl-card--dark .pl-inspired-name  { color: #d4ccc7; }
@media (hover: hover) { .pl-card--dark:hover { border-color: #444; box-shadow: 0 26px 50px -30px rgba(0,0,0,.7); } }
.pl-card--dark .pl-add             { border-color: #555; color: #d4ccc7; }
@media (hover: hover) { .pl-card--dark .pl-add:hover { background: #fff; border-color: #fff; color: var(--ink); } }
.pl-card--dark .pl-card-conc       { background: #333; color: #9b938e; }
.pl-card--dark .pl-stars-score     { color: #fff; }
.pl-card--dark .pl-stars-reviews   { color: rgba(255,255,255,.4); }

/* ── Stars ───────────────────────────────────────────────── */
.pl-stars        { display: flex; align-items: center; gap: 5px; margin: 4px 0 6px; }
.pl-stars-icons  { display: flex; align-items: center; gap: 1px; }
.pl-star         { font-size: 12px; }
.pl-star--full   { color: var(--pink); }
.pl-star--half   { color: var(--pink); opacity: .6; }
.pl-star--empty  { color: var(--line); }
.pl-stars-score  { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.pl-stars-reviews{ font-size: 11px; color: var(--gray); }

/* ── Bottle placeholder ──────────────────────────────────── */
.pl-ph { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pl-ph-art    { height: 100%; width: auto; max-width: 100%; }
.pl-ph--tall .pl-ph-art { height: 100%; }
.pl-ph-label  { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-family: ui-monospace,Menlo,monospace; font-size: 9px; letter-spacing: .1em; color: rgba(22,21,20,.34); text-transform: lowercase; white-space: nowrap; }

/* ── Assurance marquee ─────────────────────────────────────
   Banda oscura con acentos rojos, en la misma tonalidad del
   pie y de la franja de ventajas: negro de marca, texto claro
   y rojo para los detalles. Así el carrusel corta el blanco
   del inicio y hace juego con el cierre de la página.       */
.pl-assure {
  position: relative; overflow: hidden;
  background: #161514; padding: 0; pointer-events: none;
  border-top: 0; border-bottom: 0;
}
/* Filos rojos arriba y abajo, difuminados en los extremos:
   los mismos que separan la franja de ventajas. */
.pl-assure::before,
.pl-assure::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(to right,
              rgba(211,16,33,.12), rgba(211,16,33,.85), rgba(211,16,33,.12));
  pointer-events: none;
}
.pl-assure::before { top: 0; }
.pl-assure::after  { bottom: 0; }

.pl-assure-track { display: flex; width: max-content; animation: plMarquee 32s linear infinite; animation-play-state: running !important; }
@keyframes plMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.pl-assure-item {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 42px; white-space: nowrap; flex-shrink: 0;
  border-right: 1px solid transparent;
  border-image: linear-gradient(to bottom,
                rgba(211,16,33,.10), rgba(211,16,33,.70), rgba(211,16,33,.10)) 1;
}
.pl-assure-item strong { font-family: var(--serif); font-size: 17px; font-weight: 600; color: #f6f1ed; }
.pl-assure-item span   { font-size: 13px; color: #a49a95; }
/* El rombo también es un <span>, así que la regla de arriba lo alcanzaba
   y lo dejaba gris: se le devuelve el rojo con la misma especificidad.
   Parpadea despacio, y los desfases por nth-child evitan que todos
   laten a la vez, que se vería mecánico. */
.pl-assure-item .pl-assure-dot {
  color: #ff2d3f; font-size: 11px; flex-shrink: 0;
  text-shadow: 0 0 9px rgba(211,16,33,.8);
  animation: plAssureBrillo 2.4s ease-in-out infinite;
}
.pl-assure-item:nth-child(2n) .pl-assure-dot { animation-delay: .6s; }
.pl-assure-item:nth-child(3n) .pl-assure-dot { animation-delay: 1.2s; }
.pl-assure-item:nth-child(5n) .pl-assure-dot { animation-delay: 1.8s; }
@keyframes plAssureBrillo {
  0%, 100% { opacity: .5; transform: scale(.88); }
  50%      { opacity: 1;  transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-assure-dot { animation: none; opacity: 1; }
}

/* ── Testimonios ─────────────────────────────────────────── */
.pl-testi-section { background: #fff; padding: 80px 40px; border-top: 1px solid var(--line-soft); }
.pl-product-main .pl-testi-section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 40px);
  padding-right: calc(50vw - 50% + 40px);
}

/* ── FAQ en página de producto ──────────────────────────── */
.pl-sp-faq-section {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  padding: 72px 40px 80px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 40px);
  padding-right: calc(50vw - 50% + 40px);
}
.pl-sp-faq-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.pl-sp-faq-head  { text-align: center; }
.pl-sp-faq-title { font-family: var(--serif); font-size: clamp(28px,4vw,44px); font-weight: 500; color: var(--ink); line-height: 1.1; margin-top: 10px; }
.pl-sp-faq-title .pl-script { font-size: 1.1em; }
.pl-sp-faq-section .pl-ship-kicker { color: var(--pink); }
.pl-faq-list--light { max-width: 700px; width: 100%; }
.pl-faq-list--light .pl-faq-item        { border-bottom-color: var(--line); }
.pl-faq-list--light .pl-faq-item:first-child { border-top-color: var(--line); }
.pl-faq-list--light .pl-faq-q           { color: var(--ink-soft); }
.pl-faq-list--light .pl-faq-q:hover,
.pl-faq-list--light .pl-faq-item.is-open .pl-faq-q { color: var(--ink); }
.pl-faq-list--light .pl-faq-a           { color: var(--ink-soft); }

@media (max-width: 640px) {
  .pl-sp-faq-section { padding-top: 52px; padding-bottom: 60px; }
}

/* ── Reseñas en página de producto ──────────────────────── */
.pl-reviews-section {
  padding: 72px 40px 80px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 40px);
  padding-right: calc(50vw - 50% + 40px);
  border-top: 1px solid var(--line-soft);
}
.pl-reviews-inner  { max-width: var(--maxw); margin: 0 auto; }
.pl-reviews-header {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 40px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.pl-reviews-title    { font-family: var(--serif); font-size: 32px; font-weight: 500; color: var(--ink); }
.pl-reviews-verified { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); }

.pl-reviews-layout { display: grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: start; }

/* Resumen lateral */
.pl-reviews-summary  { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 100px; }
.pl-reviews-big-avg  { font-family: var(--serif); font-size: 72px; font-weight: 400; color: var(--ink); line-height: 1; }
.pl-reviews-avg-stars { display: flex; align-items: center; gap: 6px; }
.pl-reviews-avg-num  { font-size: 14px; color: var(--gray); }
.pl-reviews-count    { font-size: 13px; color: var(--gray); }
.pl-reviews-bars     { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.pl-reviews-bar-row  { display: flex; align-items: center; gap: 8px; }
.pl-reviews-bar-label { font-size: 11.5px; color: var(--gray); width: 22px; flex-shrink: 0; }
.pl-reviews-bar-track { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.pl-reviews-bar-fill  { height: 100%; background: var(--pink); border-radius: 3px; transition: width .4s; }
.pl-reviews-bar-pct  { font-size: 11px; color: var(--gray); width: 28px; text-align: right; flex-shrink: 0; }
.pl-reviews-summary .pl-review-cta { margin-top: 8px; }

/* Lista de reseñas */
.pl-reviews-list     { display: flex; flex-direction: column; }
.pl-review-item      { padding: 24px 0; border-bottom: 1px solid var(--line-soft); }
.pl-review-item:first-child { border-top: 1px solid var(--line-soft); }
.pl-review-item-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 10px;
}
.pl-review-item-who  { display: flex; flex-direction: column; gap: 3px; }
.pl-review-item-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.pl-review-item-meta { font-size: 12px; color: var(--gray); }
.pl-review-item-rating { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pl-review-item-score  { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.pl-review-item-text   { font-size: 14px; color: var(--pink); line-height: 1.65; font-style: italic; }
.pl-reviews-empty      { font-size: 14px; color: var(--gray); padding: 32px 0; }

@media (max-width: 900px) {
  .pl-reviews-layout { grid-template-columns: 1fr; gap: 32px; }
  .pl-reviews-summary { position: static; }
  .pl-reviews-big-avg { font-size: 56px; }
}
@media (max-width: 640px) {
  .pl-reviews-section { padding-top: 52px; padding-bottom: 60px; }
  .pl-reviews-header  { flex-direction: column; gap: 6px; }
  .pl-review-item-head { flex-direction: column; gap: 8px; }
}
.pl-testi-inner   { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.pl-testi-head    { text-align: center; }
.pl-testi-head .pl-h2 { margin-top: 6px; }
.pl-testi-sub     { margin: 14px auto 0; max-width: 48ch; font-size: 15px; line-height: 1.7; color: var(--gray); }

.pl-testi-stage   { display: flex; align-items: center; gap: 20px; width: 100%; }
.pl-testi-arr {
  background: #fff; border: 1px solid var(--line); border-radius: 50%;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--gray); flex-shrink: 0; transition: .2s; padding: 0;
}
.pl-testi-arr:hover { border-color: var(--pink); color: var(--pink); background: #fff; box-shadow: 0 6px 16px -8px rgba(22,21,20,.4); }

.pl-testi-card {
  flex: 1; position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px; padding: 44px 34px 34px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 16px;
  /* Sombra ambiente suave en todo el contorno, no solo abajo. */
  box-shadow: 0 2px 6px rgba(22,21,20,.05),
              0 10px 24px -12px rgba(22,21,20,.14),
              0 26px 54px -30px rgba(22,21,20,.22);
}
/* Sello verde: el argumento de confianza más fuerte, arriba del todo */
.pl-testi-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px;
  background: #eaf7ee; border: 1px solid #bfe4cc; color: #1f7a41;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.pl-testi-badge svg { width: 12px; height: 12px; }
.pl-testi-quote-mark { font-family: var(--serif); font-size: 64px; line-height: .6; color: var(--pink); opacity: .22; margin: 6px 0 -10px; }
.pl-testi-text { font-family: var(--serif); font-size: 21px; line-height: 1.65; color: var(--ink); font-style: italic; max-width: 52ch; margin: 0; }
.pl-testi-stars { display: flex; align-items: center; gap: 2px; }

.pl-testi-meta   { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.pl-testi-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--paper-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink);
}
.pl-testi-who    { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.pl-testi-name   { font-weight: 600; color: var(--ink); font-size: 14px; }
.pl-testi-detail { font-size: 12.5px; color: var(--gray); }
.pl-testi-detail em { font-style: normal; color: var(--pink); }

.pl-testi-dots  { display: flex; gap: 8px; }
.pl-testi-dot   { width: 7px; height: 7px; border-radius: 50%; background: var(--line); border: none; cursor: pointer; transition: .25s; padding: 0; }
.pl-testi-dot.is-on { background: var(--pink); transform: scale(1.25); }

@media (max-width: 700px) {
  .pl-testi-stage  { gap: 8px; }
  .pl-testi-arr    { width: 36px; height: 36px; }
  .pl-testi-card   { padding: 40px 18px 28px; border-radius: 14px; }
  .pl-testi-text   { font-size: 17px; }
  .pl-testi-sub    { font-size: 13.5px; }
}

/* Botón "Dejar mi reseña" */
.pl-review-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pink); background: none; border: 1.5px solid var(--pink);
  padding: 10px 22px; border-radius: 1px; cursor: pointer;
  transition: background .18s, color .18s;
}
.pl-review-cta:hover { background: var(--pink); color: #fff; }
.pl-review-cta svg { transition: stroke .18s; }
.pl-review-cta:hover svg { stroke: #fff; }

/* ── Modal de reseña ─────────────────────────────────────── */
.pl-review-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  visibility: hidden; pointer-events: none;
}
.pl-review-modal.is-open { visibility: visible; pointer-events: all; }
.pl-review-overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,.55); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s;
}
.pl-review-modal.is-open .pl-review-overlay { opacity: 1; }
.pl-review-box {
  position: relative; z-index: 1;
  background: #fff; padding: 40px 36px 36px;
  max-width: 520px; width: 100%;
  border-radius: 2px; box-shadow: 0 20px 60px rgba(0,0,0,.18);
  transform: translateY(18px); opacity: 0;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s;
}
.pl-review-modal.is-open .pl-review-box { transform: translateY(0); opacity: 1; }
.pl-review-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; padding: 6px; cursor: pointer;
  color: var(--gray); border-radius: 50%; transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center;
}
.pl-review-close:hover { background: var(--paper-2); color: var(--ink); }

/* ── Modal de confirmación de pago manual ───────────────────── */
.pl-pay-confirm-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding: 130px 20px 20px; overflow-y: auto; visibility: hidden; pointer-events: none; }
.pl-pay-confirm-modal.is-open { visibility: visible; pointer-events: all; }
.pl-pay-confirm-overlay { position: absolute; inset: 0; background: rgba(22,21,20,.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
.pl-pay-confirm-modal.is-open .pl-pay-confirm-overlay { opacity: 1; }
.pl-pay-confirm-box {
  position: relative; z-index: 1; background: var(--paper); color: var(--ink); padding: 32px 28px 28px;
  max-width: 460px; width: 100%; border-radius: 3px; box-shadow: 0 24px 70px rgba(0,0,0,.25);
  transform: translateY(18px); opacity: 0; transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s;
}
.pl-pay-confirm-modal.is-open .pl-pay-confirm-box { transform: translateY(0); opacity: 1; }
.pl-pay-confirm-close {
  position: absolute; top: 14px; right: 14px; background: none; border: none; padding: 6px;
  cursor: pointer; color: var(--gray); border-radius: 50%; transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center;
}
.pl-pay-confirm-close:hover { background: var(--paper-2); color: var(--ink); }

.pl-pc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.pl-pc-badge {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #1a1a1a;
}
.pl-pay-confirm-title { font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--ink); margin: 0; }
.pl-pc-bank { font-size: 12.5px; color: var(--gray); }

.pl-pc-notice {
  background: var(--paper-2); border-radius: 3px; padding: 13px 16px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 20px;
}

.pl-pc-rows { margin-bottom: 18px; }
.pl-pc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.pl-pc-row:last-child { border-bottom: none; }
.pl-pc-row span { font-size: 10.5px; letter-spacing: .1em; color: var(--gray); }
.pl-pc-row strong { font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right; }

.pl-pc-amount {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px; margin-bottom: 16px; background: #fff;
}
.pl-pc-amount span { font-size: 10.5px; letter-spacing: .1em; color: var(--gray); }
.pl-pc-amount strong { font-family: var(--serif); font-size: 19px; color: var(--pink-deep); }

.pl-pc-whatsapp {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(74,124,42,.08); border: 1px solid rgba(74,124,42,.22); border-radius: 3px;
  padding: 12px 14px; margin-bottom: 20px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
}
.pl-pc-whatsapp svg { flex-shrink: 0; color: #4a9c2a; margin-top: 1px; }
.pl-pc-whatsapp strong { color: var(--ink); }

.pl-pay-confirm-btn { width: 100%; text-align: center; justify-content: center; display: block; }
@media (hover: hover) {
  .pl-pay-confirm-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
}
.pl-review-title {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  color: var(--ink); margin: 0 0 6px;
}
.pl-review-sub {
  font-size: 13px; color: var(--gray); margin: 0 0 24px;
}
.pl-review-form { display: flex; flex-direction: column; gap: 18px; }
.pl-review-label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 6px;
}
.pl-review-field { display: flex; flex-direction: column; }
.pl-review-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pl-review-field input,
.pl-review-field textarea {
  border: 1.5px solid var(--line); border-radius: 1px;
  padding: 10px 12px; font-family: var(--sans); font-size: 14px;
  color: var(--ink); background: #fff; outline: none;
  transition: border-color .18s;
  resize: vertical;
}
.pl-review-field input:focus,
.pl-review-field textarea:focus { border-color: var(--pink); }

/* Selección de estrellas */
.pl-review-stars-wrap { display: flex; flex-direction: column; }
.pl-review-stars-pick { display: flex; gap: 4px; margin-top: 6px; }
.pl-star-pick-btn {
  background: none; border: none; padding: 0;
  font-size: 28px; cursor: pointer; color: var(--line);
  transition: color .12s, transform .12s;
  line-height: 1;
}
.pl-star-pick-btn.is-on   { color: #f5a623; }
.pl-star-pick-btn:hover   { transform: scale(1.15); }

/* Mensajes de feedback */
.pl-review-msg {
  font-size: 13.5px; border-radius: 1px; padding: 0;
  min-height: 0; transition: padding .2s, background .2s;
}
.pl-review-msg.is-ok  { color: #2e7d32; background: #f1fdf1; padding: 10px 14px; }
.pl-review-msg.is-err { color: #c62828; background: #fff5f5; padding: 10px 14px; }

.pl-review-submit { align-self: flex-start; padding: 12px 28px; }
.pl-review-submit:disabled { opacity: .6; cursor: not-allowed; }

/* Pulso reutilizado por la línea de tiempo del pedido (.pl-tline-step). */
@keyframes plOstepPulse { 0%,100%{box-shadow:0 0 0 0 rgba(var(--pink-rgb),.25);}50%{box-shadow:0 0 0 8px rgba(var(--pink-rgb),0);} }

/* ── Cómo comprar: 4 pasos sobre fondo negro ─────────────── */
.pl-osteps-section {
  background: #0f0e0d; padding: 92px 40px 84px; border-top: none;
  position: relative; overflow: hidden;
}
/* Halo rojo muy tenue detrás del bloque, para que el negro no sea plano. */
.pl-osteps-section::before {
  content: ""; position: absolute; inset: -40% 20% auto 20%; height: 70%;
  background: radial-gradient(ellipse at center, rgba(211,16,33,.16), transparent 68%);
  pointer-events: none;
}
.pl-osteps-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }

.pl-osteps-head            { text-align: center; margin-bottom: 54px; }
.pl-osteps-head .pl-eyebrow { color: #ff5a52; }
.pl-osteps-head .pl-h2     { color: #fff; }
.pl-osteps-sub {
  margin: 14px auto 0; max-width: 46ch;
  font-size: 15px; line-height: 1.7; color: #9d958f;
}

/* Tarjetas numeradas, unidas por una línea sutil en escritorio. */
.pl-osteps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  position: relative;
}
/* Recorrido automático: cada tarjeta se enciende 2,4 s por turno y el ciclo
   completo dura 9,6 s. El escalonado sale de --paso, que pinta PHP en cada
   tarjeta, así que no hace falta JavaScript ni que el visitante pase el ratón.
   Sin animación-fill-mode: antes de su turno cada tarjeta muestra su estado
   base, que es justo lo que queremos. */
.pl-ostep {
  position: relative; display: flex; flex-direction: column;
  background: #1a1817; border: 1px solid #2b2725; border-radius: 12px;
  padding: 30px 26px 28px;
  animation: plStepOn 9.6s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: calc(var(--paso, 0) * 2.4s);
}
@keyframes plStepOn {
  0%   { border-color: #2b2725; background: #1a1817; transform: none;
         box-shadow: 0 0 0 0 rgba(211,16,33,0); }
  6%   { border-color: #d31021; background: #221e1c; transform: translateY(-6px);
         box-shadow: 0 18px 40px -22px rgba(211,16,33,.9); }
  25%  { border-color: #d31021; background: #221e1c; transform: translateY(-6px);
         box-shadow: 0 18px 40px -22px rgba(211,16,33,.9); }
  32%, 100% { border-color: #2b2725; background: #1a1817; transform: none;
              box-shadow: 0 0 0 0 rgba(211,16,33,0); }
}

/* Flecha de continuidad entre tarjetas: se enciende justo al pasar el testigo */
.pl-ostep:not(:last-child)::after {
  content: ""; position: absolute; top: 50px; right: -14px; z-index: 2;
  width: 8px; height: 8px; border-top: 1.5px solid #3d3835; border-right: 1.5px solid #3d3835;
  transform: rotate(45deg);
  animation: plStepArrow 9.6s linear infinite;
  animation-delay: calc(var(--paso, 0) * 2.4s + 1.7s);
}
@keyframes plStepArrow {
  0%, 12% { border-top-color: #d31021; border-right-color: #d31021; }
  13%, 100% { border-top-color: #3d3835; border-right-color: #3d3835; }
}
.pl-ostep-num {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--serif); font-size: 46px; line-height: 1;
  color: rgba(255,255,255,.07); font-weight: 600; pointer-events: none;
  animation: plStepNum 9.6s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: calc(var(--paso, 0) * 2.4s);
}
@keyframes plStepNum {
  0%        { color: rgba(255,255,255,.07); }
  6%, 25%   { color: rgba(211,16,33,.62); }
  32%, 100% { color: rgba(255,255,255,.07); }
}
.pl-ostep-ico {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  border: 1px solid #34302d; background: #131110; color: #ff5a52;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  animation: plStepIco 9.6s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: calc(var(--paso, 0) * 2.4s);
}
@keyframes plStepIco {
  0%        { border-color: #34302d; background: #131110; color: #ff5a52; transform: none; }
  6%        { border-color: #d31021; background: #d31021; color: #fff; transform: scale(1.12); }
  10%, 25%  { border-color: #d31021; background: #d31021; color: #fff; transform: scale(1); }
  32%, 100% { border-color: #34302d; background: #131110; color: #ff5a52; transform: none; }
}

/* Quien prefiera menos movimiento ve las cuatro tarjetas en su estado base. */
@media (prefers-reduced-motion: reduce) {
  .pl-ostep, .pl-ostep::after, .pl-ostep-num, .pl-ostep-ico { animation: none !important; }
}
.pl-ostep-ico svg { width: 21px; height: 21px; }
.pl-ostep-title {
  font-family: var(--serif); font-size: 23px; font-weight: 500;
  color: #fff; margin: 0 0 9px; line-height: 1.15;
}
.pl-ostep-desc { font-size: 13.5px; line-height: 1.65; color: #9d958f; margin: 0; }

/* Cierre orientado a conversión */
.pl-osteps-cta {
  margin-top: 46px; display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}
.pl-osteps-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: #d31021; color: #fff;
  padding: 17px 34px; border-radius: 999px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  transition: background .22s, transform .22s, box-shadow .22s;
  box-shadow: 0 14px 30px -14px rgba(211,16,33,.8);
}
.pl-osteps-btn svg { width: 17px; height: 17px; transition: transform .22s; }
@media (hover: hover) {
  .pl-osteps-btn:hover { background: #ec1526; transform: translateY(-2px); color: #fff; }
  .pl-osteps-btn:hover svg { transform: translateX(4px); }
}
.pl-osteps-trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
}
.pl-osteps-trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #8d8781; letter-spacing: .02em;
}
.pl-osteps-trust svg { width: 14px; height: 14px; color: #3ec46b; flex-shrink: 0; }

/* Los cuatro pasos van siempre en horizontal, también en tablet y móvil.
   Lo que se reduce es el tamaño de la caja, no el número de columnas. */
@media (max-width: 980px) {
  .pl-osteps-section { padding: 66px 20px 60px; }
  .pl-osteps         { gap: 12px; }
  .pl-ostep          { padding: 22px 16px 20px; }
  .pl-ostep-num      { font-size: 32px; top: 12px; right: 13px; }
  .pl-ostep-ico      { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px; }
  .pl-ostep-ico svg  { width: 18px; height: 18px; }
  .pl-ostep-title    { font-size: 18px; margin-bottom: 7px; }
  .pl-ostep-desc     { font-size: 12px; line-height: 1.55; }
  .pl-ostep::after   { top: 38px; right: -10px; width: 7px; height: 7px; }
}
/* Móvil: se abandonan las cajas y se pasa a una línea de tiempo. Cuatro
   insignias redondas unidas por un hilo, con el número arriba y el título
   debajo. Sin descripción, para que respire. */
@media (max-width: 640px) {
  .pl-osteps-section { padding: 52px 16px 46px; }
  .pl-osteps         { gap: 4px; position: relative; }

  /* Hilo que une las cuatro insignias, del centro de la 1.ª al de la 4.ª */
  .pl-osteps::before {
    content: ""; position: absolute; top: 41px; left: 12.5%; right: 12.5%;
    height: 1px; background: #332f2c; z-index: 0;
  }

  .pl-ostep {
    background: none; border: none; border-radius: 0; padding: 0;
    align-items: center; text-align: center; z-index: 1;
  }
  /* La animación de caja no aplica aquí: se anima solo la insignia. */
  .pl-ostep, .pl-ostep::after { animation: none; }

  .pl-ostep-num {
    position: static; width: auto; margin-bottom: 6px;
    font-family: var(--sans); font-size: 9.5px; font-weight: 600;
    letter-spacing: .18em; color: #6c6560; line-height: 1;
  }
  @keyframes plStepNumMob {
    0%        { color: #6c6560; }
    6%, 25%   { color: #ff5a52; }
    32%, 100% { color: #6c6560; }
  }
  .pl-ostep-num { animation: plStepNumMob 9.6s cubic-bezier(.4,0,.2,1) infinite; animation-delay: calc(var(--paso, 0) * 2.4s); }

  .pl-ostep-ico {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid #34302d; background: #131110;
    margin: 0 auto 12px; position: relative; z-index: 1;
  }
  .pl-ostep-ico svg { width: 19px; height: 19px; }
  @keyframes plStepIcoMob {
    0%        { border-color: #34302d; background: #131110; color: #ff5a52; transform: none;
                box-shadow: 0 0 0 0 rgba(211,16,33,0); }
    6%        { border-color: #d31021; background: #d31021; color: #fff; transform: scale(1.14);
                box-shadow: 0 0 0 7px rgba(211,16,33,.16); }
    10%, 25%  { border-color: #d31021; background: #d31021; color: #fff; transform: scale(1.06);
                box-shadow: 0 0 0 7px rgba(211,16,33,.16); }
    32%, 100% { border-color: #34302d; background: #131110; color: #ff5a52; transform: none;
                box-shadow: 0 0 0 0 rgba(211,16,33,0); }
  }
  .pl-ostep-ico { animation: plStepIcoMob 9.6s cubic-bezier(.4,0,.2,1) infinite; animation-delay: calc(var(--paso, 0) * 2.4s); }

  .pl-ostep-title {
    font-size: 11.5px; line-height: 1.35; margin: 0; color: #cfc8c3;
    font-family: var(--sans); font-weight: 500; letter-spacing: .01em;
  }
  @keyframes plStepTitMob {
    0%        { color: #cfc8c3; }
    6%, 25%   { color: #fff; }
    32%, 100% { color: #cfc8c3; }
  }
  .pl-ostep-title { animation: plStepTitMob 9.6s cubic-bezier(.4,0,.2,1) infinite; animation-delay: calc(var(--paso, 0) * 2.4s); }

  /* En móvil solo icono y título */
  .pl-ostep-desc     { display: none; }

  .pl-osteps-head    { margin-bottom: 34px; }
  .pl-osteps-sub     { font-size: 13.5px; }
  .pl-osteps-cta     { margin-top: 38px; }
  .pl-osteps-btn     { width: 100%; justify-content: center; }
  .pl-osteps-trust   { flex-direction: column; align-items: center; gap: 9px; }
}

/* ── Ocasiones ───────────────────────────────────────────── */
.pl-occ-section, .pl-fam-section { background: var(--paper); }
.pl-occ-grid    { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.pl-occ-card    {
  flex: 0 0 calc(20% - 15px); max-width: calc(20% - 15px);
  text-align: left; background: var(--paper-2);
  border: 1px solid var(--occ-border, var(--line-soft));
  border-radius: 2px; padding: 0; overflow: hidden;
  transition: .3s; display: flex; flex-direction: column; cursor: pointer;
}
.pl-occ-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(22,21,20,.4); }
.pl-occ-art  { height: 180px; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--occ-accent, var(--paper-2)); border-bottom: 1px solid var(--occ-border, var(--line-soft)); }
.pl-occ-art--photo { padding: 0; }
.pl-occ-art--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-occ-text { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.pl-occ-name { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1; }
.pl-occ-desc { font-size: 12.5px; color: var(--gray); line-height: 1.55; margin: 2px 0 4px; }

/* ── Familias olfativas: botones compactos ───────────────── */
.pl-fam-sub { margin: 14px auto 0; max-width: 54ch; font-size: 15px; line-height: 1.7; color: var(--gray); }
.pl-fam-chips {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.pl-fam-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 13px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  color: var(--ink); white-space: nowrap;
  transition: border-color .22s, box-shadow .22s, transform .22s, background .22s;
}
/* Destello rojo que recorre los botones uno tras otro, como una ola.
   Va en una capa aparte para no pisar el efecto de pasar el ratón: si la
   animación se aplicara al propio botón, ganaría siempre al :hover. */
.pl-fam-chip::after {
  content: ""; position: absolute; inset: -1px; border-radius: 999px;
  border: 1px solid transparent; pointer-events: none;
  animation: plChipGlow 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .28s);
}
@keyframes plChipGlow {
  0%, 9%, 100% { border-color: transparent;
                 box-shadow: 0 0 0 0 rgba(211,16,33,0); }
  2%           { border-color: rgba(211,16,33,.85);
                 box-shadow: 0 8px 22px -8px rgba(211,16,33,.65), 0 0 0 4px rgba(211,16,33,.13); }
  5%           { border-color: rgba(211,16,33,.5);
                 box-shadow: 0 6px 16px -8px rgba(211,16,33,.35), 0 0 0 6px rgba(211,16,33,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-fam-chip::after { animation: none; }
}
.pl-fam-emoji  { font-size: 17px; line-height: 1; }
.pl-fam-nombre { font-size: 13.5px; font-weight: 500; letter-spacing: .01em; }
/* Contador en pastilla, para que se lea como dato y no como parte del nombre */
.pl-fam-n {
  font-size: 11px; font-weight: 600; color: var(--gray);
  background: var(--paper-2); border-radius: 999px; padding: 2px 8px;
  transition: background .22s, color .22s;
}
@media (hover: hover) {
  .pl-fam-chip:hover {
    border-color: #d31021; color: var(--ink);
    box-shadow: 0 10px 22px -14px rgba(211,16,33,.55);
    transform: translateY(-2px);
  }
  .pl-fam-chip:hover .pl-fam-n { background: #d31021; color: #fff; }
}
@media (max-width: 560px) {
  .pl-fam-chips  { gap: 8px; margin-top: 26px; }
  .pl-fam-chip   { padding: 9px 13px 9px 11px; gap: 7px; }
  .pl-fam-nombre { font-size: 12.5px; }
  .pl-fam-emoji  { font-size: 15px; }
  .pl-fam-sub    { font-size: 13.5px; }
}

/* ── Garantía ────────────────────────────────────────────── */
.pl-guar-section { background: var(--ink); padding: 84px 40px; border-top: 1px solid rgba(255,255,255,.07); }
.pl-guar-inner   { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 52px; }
/* Calificación de la tienda, encima de "Compra con confianza" */
.pl-guar-rating {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 38px; border-radius: 16px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.pl-guar-rating-label {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(243,239,236,.5); font-weight: 500;
}
.pl-guar-rating-row  { display: flex; align-items: center; gap: 16px; }
.pl-guar-rating-avg  { font-family: var(--serif); font-size: 52px; font-weight: 600; color: #fff; line-height: 1; }
.pl-guar-rating-side { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.pl-guar-rating-side .pl-testi-stars { display: flex; gap: 2px; }
.pl-guar-rating-total { font-size: 12.5px; color: rgba(243,239,236,.5); letter-spacing: .03em; }
@media (max-width: 560px) {
  .pl-guar-rating     { padding: 18px 24px; width: 100%; }
  .pl-guar-rating-avg { font-size: 42px; }
}

.pl-guar-header  { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pl-guar-sub     { font-size: 15px; color: rgba(243,239,236,.45); max-width: 46ch; text-align: center; line-height: 1.7; }
.pl-guar-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.pl-guar-card    { background: var(--ink); padding: 36px 28px; display: flex; flex-direction: column; gap: 14px; transition: background .25s; }
.pl-guar-card:hover { background: rgba(255,255,255,.03); }
.pl-guar-icon    { color: var(--pink); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(var(--pink-rgb),.08); border: 1px solid rgba(var(--pink-rgb),.18); flex-shrink: 0; }
.pl-guar-title   { font-family: var(--serif); font-size: 19px; font-weight: 500; color: #fff; line-height: 1.2; }

/* El icono y el título van centrados; el texto se queda alineado a la
   izquierda, que en párrafos de varias líneas se lee mejor que centrado. */
.pl-guar-icon  { margin-left: auto; margin-right: auto; }
.pl-guar-title { text-align: center; }
.pl-guar-desc    { font-size: 13.5px; color: rgba(243,239,236,.45); line-height: 1.75; }
.pl-guar-badge   { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border: 1px solid rgba(var(--pink-rgb),.25); color: rgba(255,255,255,.55); font-size: 13px; letter-spacing: .04em; }
.pl-guar-badge svg { color: var(--pink); flex-shrink: 0; }

/* Comparison table */
.pl-guar-cmp-wrap  { width: 100%; max-width: 900px; }
.pl-guar-cmp-title { font-family: var(--serif); font-size: 28px; font-weight: 400; color: #fff; text-align: center; margin: 0 0 28px; }
.pl-guar-cmp-table { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.pl-guar-cmp-row   { display: grid; grid-template-columns: 2fr 1.4fr 1.3fr 1.3fr; }
.pl-guar-cmp-row--head { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.12); }
.pl-guar-cmp-row--alt  { background: rgba(255,255,255,.02); }
.pl-guar-cmp-cell  { padding: 14px 20px; font-size: 13.5px; color: rgba(243,239,236,.5); border-right: 1px solid rgba(255,255,255,.06); line-height: 1.4; }
.pl-guar-cmp-cell:last-child { border-right: none; }
.pl-guar-cmp-feature   { color: rgba(243,239,236,.7); font-weight: 500; }
.pl-guar-cmp-col--us   { font-weight: 600; color: rgba(243,239,236,.4); text-align: center; }
.pl-guar-cmp-col--us.is-best { color: var(--pink); }
.pl-guar-cmp-col--other { text-align: center; color: rgba(243,239,236,.3); }
.pl-guar-cmp-row--head .pl-guar-cmp-cell { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 500; }
.pl-guar-cmp-row--head .pl-guar-cmp-col--us { color: #fff; background: rgba(var(--pink-rgb),.12); }

/* ── Garantía en página de producto (fondo claro) ─────────── */
.pl-product-main .pl-guar-section {
  background: var(--paper-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}
.pl-product-main .pl-h2--light      { color: var(--ink); }
.pl-product-main .pl-guar-sub       { color: var(--ink-soft); }
.pl-product-main .pl-guar-grid      { background: var(--line-soft); border-color: var(--line-soft); }
.pl-product-main .pl-guar-card      { background: var(--paper); }
.pl-product-main .pl-guar-card:hover { background: var(--paper-2); }
.pl-product-main .pl-guar-title     { color: var(--ink); }
.pl-product-main .pl-guar-desc      { color: var(--ink-soft); }
.pl-product-main .pl-guar-badge     { color: var(--ink-soft); border-color: rgba(var(--pink-rgb),.2); }
.pl-product-main .pl-guar-cmp-title { color: var(--ink); }
.pl-product-main .pl-guar-cmp-table { border-color: var(--line); }
.pl-product-main .pl-guar-cmp-row   { border-bottom: 1px solid var(--line); }
.pl-product-main .pl-guar-cmp-row:last-child { border-bottom: none; }
.pl-product-main .pl-guar-cmp-row--head { background: var(--paper); border-bottom: 2px solid var(--line); }
.pl-product-main .pl-guar-cmp-row--alt  { background: rgba(0,0,0,.025); }
.pl-product-main .pl-guar-cmp-cell  { color: var(--gray); border-right: 1px solid var(--line); }
.pl-product-main .pl-guar-cmp-cell:last-child { border-right: none; }
.pl-product-main .pl-guar-cmp-feature   { color: var(--ink-soft); }
.pl-product-main .pl-guar-cmp-col--other { color: var(--gray); }
.pl-product-main .pl-guar-cmp-row--head .pl-guar-cmp-cell { color: var(--gray); }
/* Columna Perfuaromas resaltada */
.pl-product-main .pl-guar-cmp-col--us {
  background: rgba(var(--pink-rgb),.06);
  color: var(--ink);
  font-weight: 600;
  border-right: 1px solid rgba(var(--pink-rgb),.18);
  border-left: 1px solid rgba(var(--pink-rgb),.18);
}
.pl-product-main .pl-guar-cmp-col--us.is-best { color: var(--pink-deep); }
.pl-product-main .pl-guar-cmp-row--head .pl-guar-cmp-col--us {
  color: var(--ink);
  background: rgba(var(--pink-rgb),.12);
  font-weight: 700;
}

/* ── Video feed (fondo claro a propósito: las cabeceras de Instagram/TikTok son blancas) ── */
.pl-vfeed-section { background: var(--paper); padding: 84px 40px; }
.pl-vfeed-section .pl-h2--light { color: var(--ink); }
.pl-vfeed-inner   { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.pl-vfeed-head    { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pl-vfeed-sub     { font-size: 14px; color: var(--gray); max-width: 44ch; line-height: 1.7; }
.pl-vfeed-grid    { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; width: 100%; }
.pl-vfeed-grid[data-count="1"] { grid-template-columns: minmax(0,280px); justify-content: center; }
.pl-vfeed-grid[data-count="2"] { grid-template-columns: repeat(2,minmax(0,280px)); justify-content: center; }
.pl-vfeed-grid[data-count="3"] { grid-template-columns: repeat(3,1fr); max-width: 820px; margin-inline: auto; }
.pl-vfeed-card    { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--paper-2); }
.pl-vfeed-embed   { position: relative; padding-top: 177%; background: #000; }
.pl-vfeed-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.pl-vfeed-placeholder {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px 20px;
  background: var(--paper-2); text-align: center;
}
.pl-vfeed-placeholder--embed { padding: 0; }
.pl-vfeed-placeholder--embed iframe,
.pl-vfeed-placeholder--embed blockquote { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-vfeed-placeholder svg { color: var(--line); width: 32px; height: 32px; }
.pl-vfeed-placeholder-label { font-size: 13px; color: var(--gray); line-height: 1.5; }
.pl-vfeed-caption { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--gray); }
.pl-vfeed-caption svg { flex-shrink: 0; width: 14px; height: 14px; opacity: .6; }
.pl-vfeed-social  { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center; }
.pl-vfeed-social-link { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray); transition: color .2s; letter-spacing: .04em; }
.pl-vfeed-social-link:hover { color: var(--pink); }
.pl-vfeed-social-link svg   { width: 16px; height: 16px; }

/* ── Shipping banner ─────────────────────────────────────── */
.pl-ship { background: var(--ink); color: var(--paper); }
.pl-ship-tabs { display: flex; justify-content: center; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.1); padding: 0 20px; }
.pl-ship-tab {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.5); padding: 16px 28px; border-bottom: 2px solid transparent;
  transition: .22s; cursor: pointer; font-weight: 400; border-radius: 2px 2px 0 0;
}
.pl-ship-tab:hover   { color: #fff; background: rgba(255,255,255,.06); }
.pl-ship-tab.is-on   { color: #fff; border-bottom-color: var(--pink); background: rgba(255,255,255,.04); }
.pl-ship-inner { max-width: 700px; margin: 0 auto; padding: 48px 40px 56px; text-align: center; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pl-ship-panel { display: none; flex-direction: column; align-items: center; width: 100%; }
.pl-ship-panel.is-on { display: flex; animation: plFadeIn .3s ease; }
@keyframes plFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pl-ship-kicker  { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--pink); display: block; font-weight: 500; margin-bottom: 14px; }
.pl-ship-title   { font-family: var(--serif); font-size: clamp(26px,3.8vw,46px); font-weight: 500; margin: 0 0 10px; line-height: 1.1; }
.pl-ship-title .pl-script { font-size: 1.16em; }
.pl-ship-amount  { color: var(--pink); font-family: var(--serif); }
.pl-ship-sub     { font-size: 13.5px; line-height: 1.7; color: rgba(243,239,236,.55); margin: 0 auto 30px; max-width: 44ch; text-align: center; }
.pl-ship-bar-wrap { width: 100%; margin-top: 10px; }
.pl-ship-bar      { height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.pl-ship-bar-fill { height: 100%; background: linear-gradient(90deg,var(--pink),var(--pink-light)); border-radius: 3px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.pl-ship-bar-ends { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.3); margin-top: 8px; letter-spacing: .04em; }
.pl-ship-steps    { display: flex; justify-content: space-between; width: 100%; margin-top: 22px; }
.pl-ship-step     { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pl-ship-step-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); background: transparent; transition: .4s; }
.pl-ship-step.is-done .pl-ship-step-dot { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 8px rgba(var(--pink-rgb),.5); }
.pl-ship-step span { font-size: 10.5px; color: rgba(255,255,255,.3); letter-spacing: .04em; }
.pl-ship-step.is-done span { color: rgba(255,255,255,.6); }

/* FAQ acordeón */
.pl-faq-list  { width: 100%; max-width: 600px; display: flex; flex-direction: column; text-align: left; }
.pl-faq-item  { border-bottom: 1px solid rgba(255,255,255,.1); }
.pl-faq-item:first-child { border-top: 1px solid rgba(255,255,255,.1); }
.pl-faq-q {
  width: 100%; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 0; cursor: pointer;
  font-size: 14px; color: rgba(243,239,236,.75); text-align: left;
  line-height: 1.5; transition: color .2s; font-family: var(--sans);
}
.pl-faq-q:hover, .pl-faq-item.is-open .pl-faq-q { color: #fff; }
.pl-faq-icon { font-size: 20px; color: var(--pink); flex-shrink: 0; line-height: 1; width: 20px; text-align: center; font-weight: 300; transition: transform .25s; }
.pl-faq-item.is-open .pl-faq-icon { transform: rotate(45deg); }
.pl-faq-a    { font-size: 13.5px; color: rgba(243,239,236,.72); line-height: 1.75; padding: 0 0 16px; display: none; }
.pl-faq-item.is-open .pl-faq-a { display: block; }

/* Concentration comparison */
.pl-conc-step        { background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: .2s; }
.pl-conc-step.is-done .pl-ship-step-dot  { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 8px rgba(var(--pink-rgb),.45); }
.pl-conc-step-label  { font-size: 10px; color: rgba(255,255,255,.3); letter-spacing: .04em; text-align: center; line-height: 1.3; max-width: 66px; transition: .25s; }
.pl-conc-step.is-done .pl-conc-step-label   { color: rgba(255,255,255,.65); }
.pl-conc-step.is-active .pl-conc-step-label { color: #fff; }
.pl-conc-step-pct                                      { font-family: var(--serif); font-size: 11px; color: rgba(255,255,255,.2); transition: .25s; }
.pl-conc-step.is-done .pl-conc-step-pct                { color: rgba(255,255,255,.38); }
.pl-conc-step:nth-child(2).is-done .pl-conc-step-pct   { color: rgba(255,255,255,.52); }
.pl-conc-step:nth-child(3).is-done .pl-conc-step-pct   { color: rgba(255,255,255,.68); }
.pl-conc-step.is-active .pl-conc-step-pct              { color: var(--pink); }
.pl-conc-desc        { font-size: 13px; color: rgba(243,239,236,.45); line-height: 1.7; margin-top: 14px; min-height: 40px; max-width: 46ch; text-align: center; }
.pl-conc-phero       { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; padding: 14px 22px; background: rgba(var(--pink-rgb),.07); border: 1px solid rgba(var(--pink-rgb),.18); border-radius: 2px; width: 100%; text-align: left; }
.pl-conc-phero-ico   { color: var(--pink); font-size: 14px; flex-shrink: 0; margin-top: 3px; }
.pl-conc-phero-label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--pink); font-weight: 500; display: block; margin-bottom: 5px; }
.pl-conc-phero-text  { font-size: 13px; color: rgba(243,239,236,.5); line-height: 1.65; margin: 0; }
.pl-conc-phero-text strong { color: rgba(255,255,255,.85); font-weight: 400; }

/* Delivery timeline */
.pl-tline       { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; width: 100%; margin-top: 24px; }
.pl-tline-track { position: absolute; top: 20px; left: 10%; right: 10%; height: 2px; background: rgba(255,255,255,.12); z-index: 0; border-radius: 2px; }
.pl-tline-fill  { height: 100%; background: linear-gradient(90deg,var(--pink),var(--pink-light)); border-radius: 2px; transition: width .7s cubic-bezier(.4,0,.2,1); }
.pl-tline-step  { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; gap: 6px; }
.pl-tline-dot   { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.3); transition: .35s; flex-shrink: 0; }
.pl-tline-step.is-active .pl-tline-dot { border-color: var(--pink); background: var(--pink); color: #fff; box-shadow: 0 0 0 5px rgba(var(--pink-rgb),.18); animation: plOstepPulse 2s ease infinite; }
.pl-tline-label { font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.4); line-height: 1.35; max-width: 80px; }
.pl-tline-step.is-active .pl-tline-label { color: rgba(255,255,255,.8); }
.pl-tline-date  { font-family: var(--serif); font-size: 15px; font-weight: 600; color: #fff; text-transform: capitalize; }
.pl-tline-step.is-active .pl-tline-date  { color: var(--pink); }
.pl-tline-time  { font-size: 10.5px; color: rgba(255,255,255,.28); letter-spacing: .04em; }
.pl-tline-note  { font-size: 11px; color: rgba(255,255,255,.22); letter-spacing: .06em; margin-top: 20px; text-align: center; }

/* ── Footer ──────────────────────────────────────────────── */
.pl-footer { background: #1b1917; color: #cfc8c3; }
.pl-footer-top  { max-width: var(--maxw); margin: 0 auto; padding: 70px 40px 50px; display: grid; grid-template-columns: 1fr 2.1fr; gap: 60px; }
.pl-footer-brand p { font-size: 14px; line-height: 1.7; color: #9b938e; margin: 18px 0 24px; max-width: 34ch; }
.pl-footer-brand-name { font-family: var(--serif); font-size: 22px; letter-spacing: .04em; color: #fff; text-decoration: none; display: inline-block; }
.pl-footer-brand .pl-logo { align-items: flex-start; padding-left: 0; display: inline-flex; width: auto; }
/* Logo del pie. Sin logo propio se invierte a blanco (comportamiento antiguo);
   con logo propio se respetan sus colores de marca. */
.pl-footer-logo img { width: 150px; height: auto; display: block; }
.pl-footer-logo:not(.pl-footer-logo--color) img { filter: brightness(0) invert(1); }
.pl-footer-contact       { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.pl-footer-contact-title { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin: 0 0 4px; font-weight: 500; }
.pl-footer-contact-item  { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #9b938e; transition: color .2s; }
.pl-footer-contact-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .6; }
.pl-footer-contact-item:not(.pl-footer-contact-item--plain):hover { color: var(--pink); }
.pl-footer-contact-item--plain { cursor: default; }
.pl-footer-pay-strip { border-top: 1px solid #2c2825; border-bottom: 1px solid #2c2825; padding: 12px 24px; }
/* Tira de pagos de lado a lado de la pantalla, con banda fina.
   Los logos van más pequeños para que la banda no engorde. */
.pl-footer-pay-inner { max-width: none; margin: 0 auto; display: flex; align-items: center; gap: 24px; overflow: hidden; }
.pl-footer-pay-label    { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #5c5450; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.pl-footer-pay-carousel { overflow: hidden; flex: 1; mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.pl-footer-pay-track    { display: flex; align-items: center; gap: 22px; width: max-content; animation: pl-pay-scroll 20s linear infinite; }
@keyframes pl-pay-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Cada logo va en su propia caja, tipo botón. El fondo es un punto más claro
   que el pie: así los logotipos en tonos claros (Nequi, Daviplata) siguen
   leyéndose, cosa que una caja blanca impediría. */
.pl-footer-pay-badge  {
  display: flex; align-items: center; justify-content: center;
  background: #262220; border: 1px solid #3b3531; border-radius: 9px;
  padding: 6px 12px; flex-shrink: 0; opacity: .92;
  transition: opacity .2s, border-color .2s, background .2s;
}
.pl-footer-pay-badge:hover { opacity: 1; background: #2d2825; border-color: #574f49; }
/* Logos reales: altura fija y ancho libre, con tope para los muy alargados
   (Sistecrédito) para que no se coman la tira. */
.pl-footer-pay-badge img { height: 22px; width: auto; max-width: 96px; object-fit: contain; display: block; }
.pl-footer-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.pl-footer-col h3  { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 12px; font-weight: 500; }
.pl-footer-col a   { display: block; font-size: 13.5px; line-height: 1.5; color: #9b938e; padding: 4px 0; transition: .2s; }
.pl-footer-col a:hover { color: var(--pink); }
/* Título de columna. En escritorio es texto plano; en móvil pasa a ser el
   botón que despliega los enlaces (ver bloque de 640px). */
.pl-footer-col-toggle {
  all: unset; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; cursor: default; color: inherit;
}
.pl-footer-col-caret { width: 10px; height: 6px; flex-shrink: 0; display: none; transition: transform .25s; }
/* Columna "Hablemos" — WhatsApp sin fondo, encabezando los datos de contacto */
.pl-footer-col--hablemos span { display: block; font-size: 13.5px; line-height: 1.5; color: #9b938e; padding: 4px 0; }
.pl-footer-wa {
  display: inline-flex !important; align-items: center; gap: 9px;
  background: none; color: #fff !important;
  padding: 4px 0; border-radius: 0;
  font-size: 13.5px; line-height: 1.5; font-weight: 500; letter-spacing: .02em;
  transition: color .2s;
}
.pl-footer-wa svg { width: 16px; height: 16px; flex-shrink: 0; color: #25d366; }
.pl-footer-wa:hover { background: none; color: #25d366 !important; }

/* Botón flotante de WhatsApp — solo icono, escritorio y móvil */
.pl-wa-float {
  position: fixed; left: 22px; bottom: 22px; z-index: 9990;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.pl-wa-float svg   { width: 30px; height: 30px; display: block; }
.pl-wa-float:hover { background: #1fb955; transform: scale(1.06); box-shadow: 0 9px 26px rgba(0,0,0,.36); }
@media (max-width: 640px) {
  .pl-wa-float     { width: 52px; height: 52px; left: 16px; bottom: 16px; }
  .pl-wa-float svg { width: 28px; height: 28px; }
}
.pl-footer-bottom  { border-top: 1px solid #2c2825; padding: 22px 40px; max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; font-size: 11.5px; color: #7c736e; letter-spacing: .02em; flex-wrap: wrap; }

/* ── Quick view modal ────────────────────────────────────── */
.pl-modal { position: fixed; inset: 0; z-index: 80; background: rgba(22,21,20,.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 30px; animation: plfade .25s ease; }
@keyframes plfade { from { opacity: 0; } to { opacity: 1; } }
.pl-modal.is-hidden { display: none; }
.pl-modal-card { background: var(--paper); border-radius: 3px; max-width: 880px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; position: relative; max-height: 88vh; }
.pl-modal-x    { position: absolute; top: 16px; right: 18px; font-size: 26px; line-height: 1; color: var(--ink-soft); z-index: 3; }
.pl-modal-x:hover { color: var(--pink); }
.pl-modal-media { background: linear-gradient(180deg,#fff,var(--paper-2)); display: flex; align-items: center; justify-content: center; padding: 40px; }
.pl-modal-media .pl-ph { height: 340px; }
.pl-modal-info  { padding: 46px 44px; display: flex; flex-direction: column; overflow-y: auto; }
.pl-modal-name  { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; margin: 6px 0; }
.pl-modal-house { font-size: 12px; letter-spacing: .04em; color: var(--gray); margin-top: 4px; }
.pl-modal-sizes { display: flex; gap: 10px; margin: 22px 0 6px; }
.pl-size        { border: 1px solid var(--line); padding: 11px 18px; border-radius: 1px; font-size: 12px; letter-spacing: .1em; color: var(--ink-soft); transition: .2s; }
.pl-size.is-on  { border-color: var(--ink); color: var(--ink); background: #fff; }
.pl-size:hover  { border-color: var(--ink); }
.pl-modal-ph    { font-size: 12.5px; color: var(--pink-deep); letter-spacing: .04em; margin-top: 14px; }
.pl-modal-foot  { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 26px; gap: 16px; }
.pl-modal-foot .pl-card-price { font-size: 28px; }
.pl-modal-link  { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 18px; border-bottom: 1px solid var(--line); align-self: flex-start; padding-bottom: 3px; }
.pl-modal-link:hover { color: var(--pink); border-color: var(--pink); }

/* ── Cart drawer ─────────────────────────────────────────── */
.pl-drawer-wrap       { position: fixed; inset: 0; z-index: 210; pointer-events: none; }
.pl-drawer-scrim      { position: absolute; inset: 0; background: rgba(22,21,20,.45); opacity: 0; transition: .3s; touch-action: none; }
.pl-drawer-wrap.is-open { pointer-events: auto; }
.pl-drawer-wrap.is-open .pl-drawer-scrim { opacity: 1; }
.pl-drawer            { position: absolute; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw; background: var(--paper-2); transform: translateX(100%); transition: .36s cubic-bezier(.5,0,.2,1); display: flex; flex-direction: column; box-shadow: -30px 0 60px -30px rgba(0,0,0,.4); }
.pl-drawer-wrap.is-open .pl-drawer { transform: none; }
.pl-drawer-head  { display: flex; justify-content: space-between; align-items: center; padding: 24px 26px; border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
/* La equis es .pl-modal-x, una clase compartida con los demás modales que va
   en position:absolute pegada a la esquina del cajón. Como no ocupa sitio en
   la fila, hay que reservárselo o el contador se le monta encima. */
.pl-drawer-head-der { display: flex; align-items: center; gap: 14px; padding-right: 34px; }
/* Cuántos artículos lleva, arriba a la derecha junto a la equis. */
.pl-drawer-count {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(211,16,33,.09); border: 1px solid rgba(211,16,33,.28);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #d31021; white-space: nowrap;
}
.pl-drawer-count b { font-size: 12.5px; font-weight: 700; }
/* Con el carrito vacío pierde el rojo: no hay nada que destacar. */
.pl-drawer-count.is-vacio {
  background: transparent; border-color: var(--line); color: var(--gray);
}
/* El cajón mide 92vw como mucho, así que en pantallas estrechas el título,
   el contador y la equis no caben los tres con la palabra entera. Se aprieta
   el título y, si aún así no cabe, el contador se queda solo con el número. */
@media (max-width: 560px) {
  .pl-drawer-head     { padding: 20px 18px; }
  .pl-drawer-head-tit { font-size: 11px; letter-spacing: .1em; }
  .pl-drawer-head-der { gap: 10px; }
  .pl-drawer-count    { padding: 3px 9px; font-size: 9.5px; }
  .pl-drawer-count b  { font-size: 11.5px; }
}
@media (max-width: 420px) {
  .pl-drawer-count-txt { display: none; }
  .pl-drawer-count     { padding: 3px 10px; }
}
.pl-progress     { height: 4px; background: var(--line); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.pl-progress i   { display: block; height: 100%; background: var(--pink); transition: width .4s; }
/* min-height:0 es lo que hace que esta zona pueda encogerse y le salga su
   propio scroll. Sin ello un elemento flexible nunca baja de la altura de su
   contenido: los productos se amontonaban y empujaban las sugerencias y el
   pie fuera de la pantalla. */
/* Productos y sugerencias comparten un único scroll: es lo que hace que las
   sugerencias no desaparezcan ni le quiten sitio a lo ya elegido. La cabecera
   y el pie con el total se quedan fijos fuera de esta zona. */
/* Una sola zona con scroll para todo el contenido del carrito. */
.pl-drawer-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.pl-drawer-items { flex: none; min-height: 0; overflow: visible; padding: 14px 20px; }
.pl-drawer-empty { color: var(--gray); font-size: 14px; padding: 40px 0; text-align: center; }

/* Cada producto en su propia tarjeta. Sobre el crema del cajón se separan
   mejor que con una raya, y el filo rojo de la izquierda los marca sin
   llenar el carrito de líneas: repetir un separador rojo entre cada artículo
   cansaría la vista y le quitaría fuerza al botón de pagar, que es el único
   sitio donde el rojo debe gritar. Es el mismo recurso de las tarjetas de la
   ficha de producto, así el carrito y el producto hablan igual. */
.pl-drawer-item {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 56px 1fr auto; gap: 13px; align-items: center;
  padding: 13px 14px 13px 16px; margin-bottom: 10px;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 4px;
  transition: border-color .22s, box-shadow .22s;
}
.pl-drawer-item::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(180deg, #d31021, #ff5a52);
}
.pl-drawer-item:hover {
  border-color: rgba(211,16,33,.38);
  box-shadow: 0 12px 26px -20px rgba(22,21,20,.6);
}
.pl-drawer-item:last-child { margin-bottom: 2px; }
.pl-drawer-thumb { width: 56px; height: 56px; background: #fff; border: 1px solid var(--line-soft); border-radius: 3px; overflow: hidden; flex-shrink: 0; padding: 0; }
.pl-drawer-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; display: block !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.pl-drawer-meta  { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Dentro de la tarjeta el nombre baja de tamaño y se limita a dos líneas:
   los nombres del catálogo son largos y si no, una sola referencia estiraba
   la tarjeta hasta empujar el resto del carrito fuera de la pantalla. */
.pl-drawer-meta strong {
  font-family: var(--serif); font-size: 15.5px; font-weight: 600; line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pl-drawer-meta span   { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.pl-drawer-item-right  { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* En el cajón estrecho del móvil, a tres columnas al nombre le quedaban 108 px
   y no se leía. La cantidad y el «quitar» bajan debajo, en fila, y el nombre
   se queda con todo el ancho. */
@media (max-width: 560px) {
  .pl-drawer-item       { grid-template-columns: 52px 1fr; gap: 12px; row-gap: 10px; padding: 12px 12px 12px 15px; }
  .pl-drawer-thumb      { width: 52px; height: 52px; }
  .pl-drawer-item-right { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
}
/* Sobre el crema del cajón, el selector de cantidad y el campo del cupón
   necesitan fondo blanco para leerse como campos y no como texto suelto. */
.pl-dqty        { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff; }
.pl-dqty-btn    { width: 28px; height: 28px; font-size: 17px; line-height: 1; color: var(--ink); background: none; border: none; cursor: pointer; transition: background .15s; display: flex; align-items: center; justify-content: center; }
.pl-dqty-btn:hover   { background: #fff; }
.pl-dqty-btn:disabled { opacity: .35; cursor: not-allowed; }
.pl-dqty-num    { min-width: 26px; text-align: center; font-size: 13px; font-weight: 500; }
.pl-drawer-rm    { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.pl-drawer-rm:hover { color: var(--pink); }
/* El pie va dentro de la zona con scroll: baja junto al resto del carrito, no
   se queda clavado abajo. El fondo propio lo separa de los productos. */
.pl-drawer-foot  { flex: none; padding: 20px 26px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0; background: var(--paper-2); }
#pl-drawer-checkout.is-disabled { opacity: .4; pointer-events: none; cursor: default; }
.pl-drawer-sub      { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding-bottom: 10px; }
.pl-drawer-sub b    { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.pl-drawer-discount { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 6px 0; color: #2a7a40; }
.pl-drawer-discount b { font-size: 15px; font-weight: 700; font-family: var(--serif); }
.pl-drawer-shipping-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 6px 0; color: var(--ink-soft); }
.pl-drawer-shipping-row b { font-size: 15px; font-weight: 500; font-family: var(--serif); }
.pl-drawer-total    { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 10px 0 16px; border-top: 1px solid var(--line-soft); margin-top: 6px; }
.pl-drawer-total b  { font-family: var(--serif); font-size: 24px; font-weight: 600; }

/* ── Cupón en carrito ────────────────────────────────────── */
.pl-drawer-coupon  { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; }
.pl-coupon-applied { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-coupon-tag {
  display: flex; align-items: center; gap: 6px;
  background: rgba(var(--pink-rgb),.08); border: 1px solid rgba(var(--pink-rgb),.2);
  padding: 4px 8px 4px 10px; border-radius: 2px; font-size: 11.5px;
  color: var(--pink-deep); font-weight: 600; letter-spacing: .04em;
}
.pl-coupon-tag svg { color: var(--pink); flex-shrink: 0; }
.pl-coupon-rm {
  background: none; border: none; padding: 0 0 0 4px; cursor: pointer;
  color: var(--gray); font-size: 16px; line-height: 1;
  transition: color .15s;
}
.pl-coupon-rm:hover { color: var(--pink); }
.pl-coupon-row  { display: flex; gap: 8px; }
.pl-coupon-input {
  flex: 1; height: 36px; padding: 0 12px; font-size: 12.5px;
  border: 1px solid var(--line); background: #fff;
  color: var(--ink); border-radius: 2px; outline: none; transition: border-color .2s;
  font-family: var(--sans);
}
.pl-coupon-input::placeholder { color: var(--gray); }
.pl-coupon-input:focus { border-color: var(--pink); }
.pl-coupon-apply-btn {
  height: 36px; padding: 0 14px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; background: var(--ink);
  color: #fff; border: none; cursor: pointer; border-radius: 2px;
  transition: background .2s; flex-shrink: 0; font-family: var(--sans);
}
.pl-coupon-apply-btn:hover    { background: var(--pink); }
.pl-coupon-apply-btn:disabled { opacity: .6; cursor: wait; }
.pl-coupon-msg         { font-size: 11.5px; line-height: 1.4; min-height: 0; transition: .2s; }
.pl-coupon-msg.is-ok   { color: #2a7a40; }
.pl-coupon-msg.is-error { color: #c0392b; }

/* ── Toast ───────────────────────────────────────────────── */
.pl-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 95; background: var(--ink); color: #fff; padding: 14px 24px; border-radius: 2px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: .3s; pointer-events: none; }
.pl-toast.is-on { opacity: 1; transform: translateX(-50%); }

/* ── WooCommerce main pages ──────────────────────────────── */
.pl-wc-main { padding-top: 40px; padding-bottom: 80px; }
.woocommerce .woocommerce-breadcrumb { font-size: 12px; color: var(--gray); margin-bottom: 24px; }
.pl-bc-sep { color: var(--line); }

/* ── Mobile nav & hamburger ──────────────────────────────── */
.pl-mob-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 8px;
  flex-shrink: 0;
}
.pl-mob-bar {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.pl-mob-toggle.is-open .pl-mob-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.pl-mob-toggle.is-open .pl-mob-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.pl-mob-toggle.is-open .pl-mob-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.pl-mob-nav {
  position: fixed; inset: 0; z-index: 75;
  pointer-events: none;
}
.pl-mob-nav-scrim {
  position: absolute; inset: 0;
  background: rgba(22,21,20,.5);
  opacity: 0; transition: opacity .3s;
  backdrop-filter: blur(2px);
}
.pl-mob-nav-panel {
  position: absolute; left: 0; top: 0; height: 100%;
  width: min(300px, 82vw);
  background: var(--paper);
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.5,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: 12px 0 40px rgba(0,0,0,.18);
  overflow-y: auto;
}
.pl-mob-nav.is-open { pointer-events: auto; }
.pl-mob-nav.is-open .pl-mob-nav-scrim { opacity: 1; }
.pl-mob-nav.is-open .pl-mob-nav-panel { transform: translateX(0); }

.pl-mob-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.pl-mob-nav-close {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--gray); line-height: 1; flex-shrink: 0;
}
.pl-mob-nav-close:hover { color: var(--pink); }
.pl-mob-links { display: flex; flex-direction: column; padding: 8px 0 32px; }
.pl-mob-link {
  display: block; padding: 14px 24px;
  font-size: 14px; letter-spacing: .04em; color: var(--ink); font-weight: 700;
  border-bottom: 1px solid var(--line-soft);
  transition: color .18s, background .18s;
}
.pl-mob-link:hover, .pl-mob-link:active { color: var(--pink); background: var(--paper-2); }
.pl-mob-link--head {
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gray); padding: 20px 24px 8px; border-bottom: none;
  pointer-events: none; cursor: default;
}

/* ── Responsive ──────────────────────────────────────────── */

/* 1100px */
@media (max-width: 1100px) {
  .pl-occ-card { flex: 0 0 calc(33.33% - 12px); max-width: calc(33.33% - 12px); }
  /* Cabecera: menos aire entre logo y menú para que no se desborde.
     min-width evita que la rejilla comprima el logo; el buscador cede el espacio. */
  .pl-nav--left           { margin-left: 24px; gap: 18px; }
  .pl-header .pl-logo img { width: 104px; min-width: 104px; }
  .pl-header .pl-search   { min-width: 120px; }
}

/* Por debajo de 1370px el menú completo ya no cabe junto al logo, el buscador
   y los iconos: el menú termina en 1052px y a su derecha hacen falta otros 296.
   Por debajo de ese ancho ya no sirve encoger el buscador (se saldría de su
   columna y taparía el menú), así que entra la hamburguesa. */
@media (max-width: 1370px) {
  .pl-nav--left           { display: none; }
  .pl-mob-toggle          { display: flex; }
  .pl-header              { grid-template-columns: auto 1fr auto; }
  .pl-header .pl-logo     { justify-self: center; }
  .pl-header .pl-logo img { width: 130px; }
  .pl-header .pl-search   { flex: 0 1 210px; min-width: 170px; margin-left: 0; }
  .pl-nav--right          { gap: 12px; }
}

/* 980px — tablets */
@media (max-width: 980px) {
  .pl-cat            { flex: 0 0 calc(50% - 9px); max-width: calc(50% - 9px); }
  .pl-grid--centered .pl-card,
  .pl-grid--carousel .pl-card { flex: 0 0 calc(50% - 11px); max-width: calc(50% - 11px); }
  .pl-carousel-arr   { display: none; }
  .pl-footer-top     { grid-template-columns: 1fr; gap: 40px; }
  .pl-modal-card     { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .pl-nav--left      { display: none; }
  /* hamburger visible, logo centered entre los dos extremos */
  .pl-mob-toggle     { display: flex; }
  .pl-header         { grid-template-columns: auto 1fr auto; }
  .pl-header .pl-logo     { justify-self: center; }
  .pl-header .pl-logo img { width: 130px; }
  .pl-nav--right     { gap: 12px; }
  /* los 4 pasos siguen en horizontal: ver bloque "Cómo comprar" */
  /* .pl-osteps-track ya no existe: el bloque se rehizo en tarjetas */
  .pl-vfeed-grid     { grid-template-columns: repeat(2,1fr); }
  .pl-guar-grid      { grid-template-columns: repeat(2,1fr); }
  .pl-guar-cmp-row   { grid-template-columns: 1.8fr 1.2fr 1fr 1fr; }
  .pl-guar-cmp-cell  { padding: 12px 10px; font-size: 12px; }
}

/* 768px — tablets pequeñas / teléfonos grandes */
@media (max-width: 768px) {
  /* Barra utilitaria compacta */
  .pl-util-inner { padding: 6px 20px; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .pl-util-item  { font-size: 11px; gap: 4px; }
  .pl-util-item svg { width: 12px; height: 12px; }
  .pl-util-sep   { display: none; }
  /* En móvil el botón de catálogo va en su propia línea, debajo de correo/horario/teléfono */
  .pl-util-catalog, .pl-util-catalog-btn {
    position: static; transform: none; order: 99; flex-basis: 100%; justify-content: center; margin-top: 6px;
  }
  .pl-util-catalog-btn:hover { transform: scale(1.03); }
  .pl-util-catalog-menu { left: 50%; transform: translateX(-50%); }

  .pl-header              { padding: 14px 24px; }
  .pl-header.is-scrolled  { padding: 10px 24px; }
  .pl-search              { min-width: 130px; }

  /* Hero: más compacto en altura, textos y botones igual de grandes */
  .pl-hero-slider { height: 74vh; min-height: 460px; }
  .pl-hs-content  { padding: 40px 28px; }
  .pl-hs-title    { font-size: clamp(36px, 8.5vw, 80px); }
  .pl-hero-sub    { font-size: 14px; }
  .pl-btn--hero   { margin-top: 22px; padding: 14px 26px; }

  /* Secciones */
  .pl-section          { padding: 60px 28px; }
  .pl-testi-section    { padding: 60px 28px; }
  .pl-osteps-section   { padding: 60px 28px; }
  .pl-guar-section     { padding: 60px 28px; }
  .pl-vfeed-section    { padding: 60px 28px; }

  /* Footer */
  .pl-footer-top       { padding: 50px 28px 40px; }
  .pl-footer-cols      { grid-template-columns: repeat(2,1fr); gap: 24px; }
  .pl-footer-pay-strip { padding: 16px 28px; }
  .pl-footer-bottom    { padding: 18px 28px; }

  /* Tabla de comparativa: scroll horizontal */
  .pl-guar-cmp-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pl-guar-cmp-table { min-width: 520px; }
}

/* 700px */
@media (max-width: 700px) {
  .pl-occ-card    { flex: 0 0 calc(50% - 9px); max-width: calc(50% - 9px); }
  .pl-tline       { grid-template-columns: repeat(2,1fr); row-gap: 32px; }
  .pl-tline-track { display: none; }
}

/* 640px — teléfonos */
@media (max-width: 640px) {
  /* Announce bar */
  .pl-announce     { height: auto; padding: 8px 16px; }
  .pl-announce-msg { white-space: normal; text-align: center; font-size: 10.5px; letter-spacing: .12em; line-height: 1.5; }

  /* Header: ocultar search, reducir gaps */
  .pl-header              { padding: 13px 20px; }
  .pl-header.is-scrolled  { padding: 9px 20px; }
  /* Buscador: solo icono en móvil.
     Se repite con .pl-header delante para ganarle en peso a la regla del
     bloque de 1100px, que si no deja el buscador con 160px de ancho vacío. */
  .pl-search:not(.is-mob-open),
  .pl-header .pl-search   { min-width: 0; width: 36px; height: 36px; padding: 0; border: none; background: none; justify-content: center; cursor: pointer; }
  /* Cabecera móvil: logo centrado de verdad y los tres iconos agrupados. */
  .pl-header              { grid-template-columns: 1fr auto 1fr; }
  .pl-header .pl-logo     { justify-self: center; }
  .pl-header .pl-logo img { width: 104px; min-width: 0; }
  .pl-search input[type="search"] { display: none; }
  .pl-search-ico          { width: 18px; height: 18px; pointer-events: none; }
  /* Estado expandido en móvil */
  .pl-search.is-mob-open  { position: fixed; top: 0; left: 0; right: 0; z-index: 200; width: 100%; height: auto; padding: 14px 16px; border: none; border-bottom: 1px solid var(--line); background: var(--paper); justify-content: flex-start; gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
  .pl-search.is-mob-open input[type="search"] { display: block; flex: 1; font-size: 15px; }
  .pl-search.is-mob-open .pl-search-ico { color: var(--pink); }
  .pl-search-mob-close    { display: none; }
  .pl-search.is-mob-open .pl-search-mob-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; color: var(--gray); cursor: pointer; background: none; border: none; padding: 0; }
  /* Los tres iconos, pegados de verdad. El aire que se veia no era el hueco
     entre ellos sino el relleno interior de cada caja: el buscador ocupaba
     46px para un dibujo de 18 y la cuenta 40px para uno de 22. Se recortan
     las cajas al tamano del dibujo. */
  .pl-nav--right              { gap: 3px; }
  .pl-nav--right .pl-icon     { width: 30px; height: 30px; }
  .pl-nav--right .pl-icon svg { width: 19px; height: 19px; }
  /* La cuenta va sin circulo, asi que su caja se ajusta al dibujo; el carrito
     conserva algo mas porque es un boton redondo lleno. */
  .pl-nav--right .pl-account-wrap .pl-icon { width: 24px; }
  .pl-search:not(.is-mob-open),
  /* flex 0 0 auto: sin esto manda el flex-basis de 210px y el ancho se ignora. */
  .pl-header .pl-search:not(.is-mob-open) { flex: 0 0 auto; width: 24px; height: 30px; margin-left: 0; }
  .pl-logo-word           { font-size: 20px; letter-spacing: .05em; }

  /* Medios de pago: tira más compacta y estrecha en móvil */
  .pl-footer-pay-inner     { gap: 14px; max-width: 320px; }
  .pl-footer-pay-label     { font-size: 9px; letter-spacing: .14em; }
  .pl-footer-pay-track     { gap: 12px; }
  .pl-footer-pay-badge     { padding: 6px 10px; border-radius: 7px; }
  .pl-footer-pay-badge img { height: 20px; max-width: 86px; }
  /* Línea de copyright centrada */
  .pl-footer-bottom        { justify-content: center; align-items: center; text-align: center; }

  /* Columnas del pie como acordeón: solo se ven los títulos hasta que se tocan */
  .pl-footer-cols          { gap: 0; }
  .pl-footer-col           { border-top: 1px solid #2c2825; }
  .pl-footer-col h3        { margin-bottom: 0; }
  .pl-footer-col-toggle    { cursor: pointer; padding: 15px 0; }
  .pl-footer-col-caret     { display: block; }
  .pl-footer-col.is-open .pl-footer-col-caret { transform: rotate(180deg); }
  .pl-footer-col-body      { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
  .pl-footer-col.is-open .pl-footer-col-body  { max-height: 320px; padding-bottom: 12px; }

  /* Hero: texto más pequeño, flechas más chicas y sin interferir */
  .pl-hero-slider { min-height: 480px; }
  .pl-hs-content  { padding: 36px 20px; }
  .pl-hs-title    { font-size: clamp(34px, 9vw, 64px); margin: 12px 0 16px; }
  .pl-hs-accent   { font-size: 0.88em; }
  .pl-hero-sub    { font-size: 13.5px; max-width: 100%; }
  .pl-btn--hero   { margin-top: 18px; padding: 13px 22px; font-size: 11px; }
  .pl-hs-arr      { width: 38px; height: 38px; }
  .pl-hs-arr svg  { width: 16px; height: 16px; }
  .pl-hs-arr--l   { left: 14px; }
  .pl-hs-arr--r   { right: 14px; }

  /* Testimonios */
  .pl-testi-section { padding: 56px 20px; }
  .pl-testi-text    { font-size: 17px; }
  .pl-testi-arr     { display: none; }
  .pl-testi-card    { padding: 38px 18px 26px; }

  /* Modal: panel inferior tipo sheet */
  .pl-modal               { padding: 0; align-items: flex-end; }
  .pl-modal-card          { border-radius: 20px 20px 0 0; max-height: 94vh; overflow-y: auto; }
  .pl-modal-media         { padding: 24px; }
  .pl-modal-media .pl-ph  { height: 200px; }
  .pl-modal-info          { padding: 24px 22px 32px; }
  .pl-modal-name          { font-size: 30px; }

  /* Tabs de envío: 2 × 2 para evitar desbordamiento */
  .pl-ship-tabs   { flex-wrap: wrap; gap: 0; justify-content: stretch; padding: 0; }
  .pl-ship-tab    { flex: 1 1 50%; min-width: 0; padding: 13px 10px; font-size: 10.5px; letter-spacing: .12em; border-bottom: 2px solid transparent; border-right: 1px solid rgba(255,255,255,.06); border-radius: 0; text-align: center; }
  .pl-ship-tab:nth-child(even) { border-right: none; }
  .pl-ship-tab.is-on { border-bottom-color: var(--pink); }
}

/* 560px — teléfonos pequeños */
@media (max-width: 560px) {
  .pl-header, .pl-ship-inner { padding-left: 20px; padding-right: 20px; }
  .pl-section               { padding: 52px 20px; }
  .pl-cat                   { flex: 0 0 calc(50% - 9px); max-width: calc(50% - 9px); }
  /* Carrusel de productos: scroll horizontal nativo en mobile.
     Se excluye "Los más elegidos", que allí funciona como carrusel propio
     de 2 en 2 con anchos calculados por JS. */
  section:not(.pl-elegidos) .pl-carousel-clip { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; }
  section:not(.pl-elegidos) .pl-carousel-clip::-webkit-scrollbar { display: none; }
  section:not(.pl-elegidos) .pl-carousel-outer .pl-grid--centered { flex-wrap: nowrap; justify-content: flex-start; }
  section:not(.pl-elegidos) .pl-carousel-outer .pl-grid--centered .pl-card,
  section:not(.pl-elegidos) .pl-carousel-outer .pl-grid--carousel .pl-card { flex: 0 0 75% !important; max-width: 75% !important; scroll-snap-align: start; }
  .pl-section-head--row     { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Hero: más compacto en altura */
  .pl-hero-slider { height: 62vh; min-height: 420px; }
  .pl-hs-title    { font-size: clamp(28px, 8vw, 48px); }
  .pl-hs-accent   { font-size: 0.82em; }
  .pl-hs-arr      { width: 34px; height: 34px; }
  .pl-hs-arr--l   { left: 8px; }
  .pl-hs-arr--r   { right: 8px; }

  /* Pasos del pedido */
  .pl-osteps-section { padding: 52px 20px; }
  /* los 4 pasos siguen en horizontal: ver bloque "Cómo comprar" */

  /* Garantía */
  .pl-guar-section  { padding: 52px 20px; }
  .pl-guar-grid     { grid-template-columns: 1fr; }

  /* Tabla comparativa: misma estructura, compacta para móvil */
  .pl-guar-cmp-wrap  { overflow-x: visible; }
  .pl-guar-cmp-table { min-width: 0; }
  .pl-guar-cmp-row   { grid-template-columns: 1.8fr 1.2fr 1fr 1fr; }
  .pl-guar-cmp-cell  { padding: 9px 7px; font-size: 10.5px; line-height: 1.35; }
  .pl-guar-cmp-row--head .pl-guar-cmp-cell { font-size: 8.5px; letter-spacing: .1em; padding: 10px 7px; }

  /* Video feed */
  .pl-vfeed-section { padding: 52px 20px; }
  .pl-vfeed-grid    { grid-template-columns: 1fr; }

  /* Ocasiones y testimonios */
  .pl-occ-card      { flex: 0 0 calc(50% - 9px); max-width: calc(50% - 9px); }
  .pl-testi-section { padding: 52px 20px; }
  .pl-testi-card    { padding: 36px 16px 24px; }

  /* Modal de reseña en móvil */
  .pl-review-box { padding: 28px 20px 24px; }
  .pl-review-row { grid-template-columns: 1fr; }

  /* Footer */
  .pl-footer-cols      { grid-template-columns: 1fr; }
  .pl-footer-top       { padding: 40px 20px 32px; }
  .pl-footer-pay-strip { padding: 14px 20px; }
  .pl-footer-bottom    { padding: 16px 20px; flex-direction: column; gap: 8px; }

  /* Marquee de garantías */
  .pl-assure-item        { padding: 14px 22px; }
  .pl-assure-item strong { font-size: 15px; }
  .pl-assure-item span   { font-size: 12px; }

  /* Envío */
  .pl-ship-inner { padding: 32px 20px 44px; }
}

/* ── Auth (Login / Register) ─────────────────────────────── */
.pl-wc-main { width: 100%; }

.pl-wc-title-bar,
.pl-wc-main .woocommerce {
  display: block !important;
  width: 100% !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* My Account — sin cap de ancho, maneja su propio layout */
.woocommerce-account .pl-wc-main .woocommerce {
  max-width: none !important;
  padding: 0 !important;
}
.woocommerce-account .pl-wc-title-bar {
  max-width: none !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  text-align: left !important;
}

/* Checkout — sin cap de ancho, pl-checkout-page maneja el layout */
.woocommerce-checkout .pl-wc-main .woocommerce {
  max-width: none !important;
  padding: 0 !important;
}
/* Ocultar título genérico — el checkout lo incluye alineado con el contenido */
.woocommerce-checkout .pl-wc-title-bar { display: none !important; }

.pl-wc-title-bar { padding: 48px 24px 0; }
.pl-wc-title {
  font-family: var(--serif); font-size: clamp(28px, 4vw, 40px);
  font-weight: 500; color: var(--ink);
}

/* ── Mi cuenta: dos columnas ──────────────────────────────────────────────
   A la izquierda por qué merece la pena la cuenta y con quién se trata; a la
   derecha el formulario. Un campo de contraseña solo en medio de una página
   vacía no da ninguna confianza, y aquí es donde el cliente decide. */
.pl-auth {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  max-width: 1080px; margin: 34px auto 90px; padding: 0 24px;
  align-items: stretch;
}

.pl-auth-marca {
  background: var(--ink); color: #f6f1ed;
  border-radius: 18px 0 0 18px;
  padding: 44px 40px;
  display: flex; flex-direction: column;
}
.pl-auth-marca .pl-ficha-eyebrow { color: #ff8b96; }
.pl-auth-marca-tit {
  font-family: var(--serif); font-size: clamp(27px, 3.2vw, 36px); font-weight: 500;
  line-height: 1.1; color: #fff; margin: 11px 0 0;
}
.pl-auth-marca-sub {
  font-size: 14px; line-height: 1.7; font-weight: 300;
  color: rgba(246,241,237,.7); margin: 13px 0 0;
}

.pl-auth-ventajas {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 20px; flex: 1;
}
.pl-auth-ventajas li { display: flex; align-items: flex-start; gap: 13px; }
.pl-auth-ventaja-ico {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: #ff8b96;
}
.pl-auth-ventaja-ico svg { width: 18px; height: 18px; }
.pl-auth-ventaja-txt { display: flex; flex-direction: column; gap: 3px; }
.pl-auth-ventaja-txt strong {
  font-family: var(--serif); font-size: 18px; font-weight: 600; color: #fff; line-height: 1.25;
}
.pl-auth-ventaja-txt em {
  font-style: normal; font-size: 12.5px; line-height: 1.6;
  color: rgba(246,241,237,.6); font-weight: 300;
}

.pl-auth-confianza {
  list-style: none; margin: 30px 0 0; padding: 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 10px;
}
.pl-auth-confianza li {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: .04em; color: rgba(246,241,237,.72);
}
.pl-auth-confianza svg { width: 15px; height: 15px; flex: none; color: #6fcf74; }

/* La columna del formulario, en tarjeta blanca pegada a la de marca. */
.pl-auth-wrap {
  width: 100%; max-width: none; margin: 0; padding: 44px 40px;
  background: #fff; border: 1px solid var(--line-soft); border-left: 0;
  border-radius: 0 18px 18px 0;
  box-shadow: 0 26px 60px -46px rgba(22,21,20,.75);
}

.pl-auth-tabs { margin-bottom: 26px; }
.pl-auth-sub  { margin-bottom: 24px; }
.pl-field-ayuda {
  display: block; margin-top: 6px;
  font-size: 11.5px; line-height: 1.5; color: var(--gray); font-weight: 300;
}
.pl-auth-legal a { color: #bf2233; border-bottom: 1px solid rgba(191,34,51,.35); }
.pl-auth-legal a:hover { border-bottom-color: #bf2233; }

@media (max-width: 900px) {
  /* En una columna la tarjeta de marca va debajo: primero se resuelve el
     trámite y después se explica, que es el orden en que se lee en el móvil. */
  .pl-auth        { grid-template-columns: 1fr; max-width: 560px; }
  .pl-auth-marca  { order: 2; border-radius: 0 0 18px 18px; padding: 34px 26px; }
  .pl-auth-wrap   { order: 1; border-radius: 18px 18px 0 0; border-left: 1px solid var(--line-soft); border-bottom: 0; padding: 34px 26px; }
  .pl-auth-ventajas { flex: none; }
}
@media (max-width: 560px) {
  .pl-auth       { margin: 24px auto 64px; padding: 0 16px; }
  .pl-auth-marca { padding: 28px 20px; }
  .pl-auth-wrap  { padding: 28px 20px; }
  .pl-auth-marca-tit { font-size: 25px; }
}

.pl-auth-tabs {
  display: flex; border-bottom: 2px solid var(--line);
  margin-bottom: 32px; gap: 0;
}
.pl-auth-tab {
  flex: 1; padding: 12px 0; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 500; color: var(--gray);
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; cursor: pointer; transition: color .2s, border-color .2s;
}
.pl-auth-tab.is-active { color: var(--ink); border-bottom-color: var(--pink); }
.pl-auth-tab:hover:not(.is-active) { color: var(--ink-soft); }

.pl-auth-sub {
  font-size: 14px; color: var(--gray); margin-bottom: 28px; line-height: 1.6;
}

.pl-auth-panel { display: none; }
.pl-auth-panel.is-active { display: block; }

.pl-auth-form { display: flex; flex-direction: column; gap: 20px; }

.pl-field { display: flex; flex-direction: column; gap: 7px; }
.pl-field label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-soft);
}
.pl-field input[type="text"],
.pl-field input[type="email"],
.pl-field input[type="password"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 2px; background: #fff; font-family: var(--sans);
  font-size: 14px; color: var(--ink); transition: border-color .2s;
  outline: none; font-weight: 300;
}
.pl-field input:focus { border-color: var(--pink); }

.pl-field-pass-wrap { position: relative; }
.pl-field-pass-wrap input { padding-right: 44px; }
.pl-pass-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--gray);
  padding: 4px; display: flex; align-items: center; transition: color .2s;
}
.pl-pass-toggle:hover { color: var(--pink); }
.pl-pass-toggle svg { width: 18px; height: 18px; }

.pl-auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: -4px;
}
.pl-check-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--gray); cursor: pointer;
}
.pl-check-label input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--pink); cursor: pointer;
}
.pl-auth-forgot {
  font-size: 12px; color: var(--gray); text-decoration: underline;
  text-underline-offset: 3px; transition: color .2s;
}
.pl-auth-forgot:hover { color: var(--pink); }

.pl-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 500; border: none;
  border-radius: 2px; cursor: pointer; transition: background .2s;
}
.pl-btn-primary:hover { background: var(--pink); }
.pl-btn-full { width: 100%; }

.pl-auth-legal {
  font-size: 12px; color: var(--gray); text-align: center; line-height: 1.6;
}
.pl-auth-legal a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }

.pl-field-error:not([hidden]) {
  display: block; font-size: 12px; color: #c0392b;
  margin-top: 6px; line-height: 1.4;
}

/* ── Avisos de WooCommerce, en la paleta de la tienda ────────
   Venían con los colores de fábrica: el azul corporativo de
   WooCommerce para la información y un magenta que no es el rojo
   de marca para los errores. Ahora cada tipo dice algo con el
   color: rojo si algo falló, verde si algo salió bien, y el negro
   de marca cuando solo se está informando —que es el caso de
   «tu carrito está vacío», donde el rojo alarmaría sin motivo.
   El !important y el border-top-color son para ganarle a la hoja
   de estilos del propio WooCommerce, que los pinta de azul.     */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none; padding: 12px 16px; margin: 0 0 20px; border-radius: 3px;
  font-size: 13px; line-height: 1.5;
  border-top: 0 !important;
}
.woocommerce-error {
  background: rgba(191,34,51,.06); border-left: 3px solid #bf2233 !important; color: var(--ink);
}
.woocommerce-message {
  background: rgba(61,139,64,.06); border-left: 3px solid #3d8b40 !important; color: var(--ink);
}
.woocommerce-info {
  background: var(--paper-2); border-left: 3px solid var(--ink) !important; color: var(--ink);
}
/* WooCommerce pone un iconito con ::before y lo tiñe de su azul. */
.woocommerce-error::before   { color: #bf2233 !important; }
.woocommerce-message::before { color: #3d8b40 !important; }
.woocommerce-info::before    { color: var(--ink) !important; }
/* Los enlaces dentro del aviso, en el rojo de marca. */
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a { color: #bf2233; }
.woocommerce-error a:hover, .woocommerce-message a:hover, .woocommerce-info a:hover { color: var(--ink); }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { margin: 0; }

/* ── My Account dashboard ────────────────────────────────── */
.pl-myaccount-wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding: 40px 40px 80px;
}

/* User info bar (top) */
.pl-myaccount-user {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 24px; margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}
.pl-myaccount-avatar { flex-shrink: 0; }
.pl-myaccount-avatar-img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--line);
}
.pl-myaccount-user-info { display: flex; flex-direction: column; gap: 2px; }
.pl-myaccount-user-info strong { font-size: 14px; font-weight: 500; color: var(--ink); }
.pl-myaccount-user-info span { font-size: 12px; color: var(--gray); }

/* Horizontal nav (desktop) */
.pl-myaccount-nav { margin-bottom: 40px; }
.pl-myaccount-nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: row; gap: 0;
  border-bottom: 2px solid var(--line);
}
.pl-myaccount-nav li {
  flex: 1; display: flex;
}
.pl-myaccount-nav li a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 18px 12px; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .2s, border-color .2s;
}
.pl-myaccount-nav li a:hover { color: var(--ink); }
.pl-myaccount-nav li.is-active a { color: var(--ink); border-bottom-color: var(--pink); }
.pl-myaccount-nav .woocommerce-MyAccount-navigation-link--customer-logout { flex: 0 0 auto; }
.pl-myaccount-nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--pink); padding-left: 24px; padding-right: 0; justify-content: flex-end; }
.pl-myaccount-nav .woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: #a0274a; }

.pl-myaccount-content { min-width: 0; }

/* Dashboard cards */
.pl-dashboard-title {
  font-family: var(--serif); font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 400; color: var(--ink); margin: 0 0 32px;
}
.pl-dashboard-title strong { font-weight: 600; }

.pl-dashboard-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-bottom: 40px;
}
.pl-dashboard-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 16px; padding: 32px 28px; border: 1px solid var(--line);
  border-radius: 2px; text-decoration: none; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pl-dashboard-card:hover {
  border-color: var(--ink); box-shadow: 0 4px 20px rgba(0,0,0,.07);
  transform: translateY(-2px);
}
.pl-dashboard-card-icon svg { width: 28px; height: 28px; color: var(--gray); }
.pl-dashboard-card-label {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); line-height: 1.4;
}
.pl-dashboard-card-count {
  font-family: var(--serif); font-size: 36px; font-weight: 400; color: var(--pink);
  line-height: 1; margin-top: auto;
}

.pl-dashboard-logout {
  font-size: 12px; color: var(--gray); margin-top: 4px;
}
.pl-dashboard-logout a { color: var(--gray); text-decoration: underline; text-underline-offset: 3px; }
.pl-dashboard-logout a:hover { color: var(--ink); }

/* ── Account sections (Pedidos, Perfil, Direcciones…) ────── */
.pl-account-section { padding-top: 4px; }

.pl-account-section-title {
  font-family: var(--serif); font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 400; color: var(--ink); margin: 0 0 32px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}

.pl-account-section-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 32px 0 24px; color: var(--gray); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.pl-account-section-divider::before,
.pl-account-section-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.pl-account-form { width: 100%; }

.pl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pl-field small { display: block; font-size: 11px; color: var(--gray); margin-top: 5px; }

/* Tabla de pedidos */
.pl-orders-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pl-orders-table th {
  text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--line);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--gray);
}
.pl-orders-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pl-orders-table tr:last-child td { border-bottom: none; }
.pl-orders-table tr:hover td { background: var(--paper-2); }

.pl-order-num { font-weight: 500; color: var(--ink); text-decoration: none; }
.pl-order-num:hover { text-decoration: underline; text-underline-offset: 3px; }

.pl-order-status {
  display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 20px;
}
.pl-order-status--processing { background: #e8f5e9; color: #2e7d32; }
.pl-order-status--completed  { background: #f3f4f6; color: #374151; }
.pl-order-status--pending    { background: #fff8e1; color: #f57f17; }
.pl-order-status--cancelled  { background: #fce4ec; color: #c62828; }
.pl-order-status--on-hold    { background: #e3f2fd; color: #1565c0; }

.pl-order-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-order-action {
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink); text-decoration: none; transition: background .18s, border-color .18s;
}
.pl-order-action:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pl-order-action--pay { background: var(--ink); color: #fff; border-color: var(--ink); }
.pl-order-action--pay:hover { background: #333; }

/* Estado vacío */
.pl-account-empty {
  text-align: center; padding: 60px 20px; color: var(--gray);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.pl-account-empty svg { width: 48px; height: 48px; opacity: .3; }
.pl-account-empty p { font-size: 14px; margin: 0; }

/* Paginación */
.pl-pagination { display: flex; gap: 12px; margin-top: 24px; }
.pl-page-link {
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 2px; transition: background .18s;
}
.pl-page-link:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── Addresses ──────────────────────────────────────────── */
.pl-addresses-intro {
  font-size: 13px; color: var(--gray); margin: -16px 0 32px;
}

.pl-addresses-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}

.pl-address-card {
  border: 1px solid var(--line); border-radius: 2px; padding: 28px 28px 24px;
}

.pl-address-card-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.pl-address-card-icon svg { width: 18px; height: 18px; color: var(--gray); flex-shrink: 0; }
.pl-address-card-title {
  flex: 1; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); margin: 0;
}
.pl-address-edit-link {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray); text-decoration: none; transition: color .18s;
}
.pl-address-edit-link:hover { color: var(--ink); }
.pl-address-edit-link svg { width: 14px; height: 14px; }

.pl-address-formatted {
  font-style: normal; font-size: 14px; line-height: 1.8; color: var(--ink-soft);
}
.pl-address-empty {
  font-size: 13px; color: var(--gray); margin: 0; line-height: 1.6;
}

/* Edit address form */
.pl-address-form-header {
  margin-bottom: 32px; padding-bottom: 0;
}
.pl-address-form-header .pl-account-section-title { margin-bottom: 20px; }

.pl-address-tabs {
  display: inline-flex; gap: 4px;
}
.pl-address-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: var(--gray);
  background: var(--paper-2); border-radius: 3px;
  border: 1px solid var(--line); border-bottom: 3px solid transparent;
  transition: color .18s, border-color .18s, background .18s;
}
.pl-address-tab svg { width: 15px; height: 15px; }
.pl-address-tab:hover { background: var(--paper-3); color: var(--ink); }
.pl-address-tab.is-active {
  background: #fff; color: var(--ink); font-weight: 700;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 3px solid var(--pink);
}

.pl-address-form { width: 100%; padding-bottom: 320px; }

.pl-address-fields-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px;
}

/* WooCommerce form-row styled to match theme */
.pl-address-form .form-row {
  display: flex; flex-direction: column; margin-bottom: 20px;
  float: none !important; width: auto !important; padding: 0 !important;
}
.pl-address-form .form-row-wide { grid-column: span 2; }
.pl-address-form .form-row label {
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 6px;
}
.pl-address-form .form-row label .required { color: var(--pink); margin-left: 2px; }
.pl-address-form .form-row .input-text,
.pl-address-form .form-row select {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 2px;
  font-size: 14px; color: var(--ink); background: #fff;
  transition: border-color .18s;
  font-family: var(--sans); appearance: none;
}
.pl-address-form .form-row .input-text:focus,
.pl-address-form .form-row select:focus {
  outline: none; border-color: var(--ink);
}
.pl-address-form .form-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}
.pl-address-form .woocommerce-input-wrapper { display: block; }
.pl-address-form .woocommerce-error,
.pl-address-form .woocommerce-invalid .input-text { border-color: #c0392b; }

.pl-address-form-footer { margin-top: 12px; }

/* ── Downloads ───────────────────────────────────────────── */
.pl-downloads-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pl-downloads-table th {
  text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--line);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--gray);
}
.pl-downloads-table td { padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pl-downloads-table tr:last-child td { border-bottom: none; }
.pl-downloads-table tr:hover td { background: var(--paper-2); }

.pl-dl-product a { color: var(--ink); text-decoration: none; font-weight: 500; }
.pl-dl-product a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pl-dl-product small { display: block; font-size: 11px; color: var(--gray); margin-top: 2px; }

.pl-dl-unlimited { color: var(--gray); font-size: 12px; }
.pl-dl-count { font-weight: 500; }

.pl-download-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink); text-decoration: none; transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.pl-download-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pl-download-btn svg { width: 14px; height: 14px; }

/* WooCommerce content area — reset estilos base */
.pl-myaccount-content .woocommerce-MyAccount-content { font-size: 14px; line-height: 1.7; color: var(--ink-soft); }

/* ── Campo País (Colombia estático) ─────────────────────────────────────── */
.pl-field-country-static { grid-column: span 2; }
.pl-country-display {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper-2); color: var(--gray);
  font-size: 14px; cursor: not-allowed; width: 100%; box-sizing: border-box;
}
.pl-country-display svg { width: 14px; height: 14px; opacity: .45; flex-shrink: 0; }

/* ── Cédula y demás campos WC wide dentro del grid ──────────────────────── */
.pl-address-fields-grid .form-row-wide { grid-column: span 2; }

/* ── Selects de ciudad/departamento (misma altura que inputs) ───────────── */
.pl-address-form select,
.pl-address-fields-grid select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 2px;
  font-size: 14px; background: #fff; color: var(--ink);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  cursor: pointer;
}
.pl-address-form select:focus,
.pl-address-fields-grid select:focus {
  outline: none; border-color: var(--ink);
}

@media (max-width: 700px) {
  .pl-myaccount-wrap {
    grid-template-columns: 1fr; gap: 32px; padding: 32px 20px 60px;
  }
  /* Nav vertical en móvil */
  .pl-myaccount-user {
    padding-bottom: 16px; margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .pl-myaccount-nav { margin-bottom: 28px; }
  .pl-myaccount-nav ul { flex-direction: column; border-bottom: none; gap: 2px; }
  .pl-myaccount-nav li a {
    border-bottom: none; border-radius: 2px; padding: 10px 12px;
    font-size: 13px; letter-spacing: .02em; text-transform: none; font-weight: 400;
  }
  .pl-myaccount-nav li.is-active a { background: var(--ink); color: #fff; border-bottom: none; }
  .pl-myaccount-nav li a:hover { background: var(--paper-2); color: var(--ink); }
  .pl-myaccount-nav .woocommerce-MyAccount-navigation-link--customer-logout { margin-left: 0; }
  .pl-myaccount-wrap { padding: 32px 20px 60px; }
  .pl-dashboard-cards { grid-template-columns: 1fr; }
  .pl-form-row { grid-template-columns: 1fr; }
  .pl-addresses-grid { grid-template-columns: 1fr; }
  .pl-address-fields-grid { grid-template-columns: 1fr; }
  .pl-address-form .form-row-wide { grid-column: span 1; }
  .pl-address-form-header { flex-direction: column; gap: 12px; }
  .pl-downloads-table th:nth-child(3),
  .pl-downloads-table td:nth-child(3),
  .pl-downloads-table th:nth-child(4),
  .pl-downloads-table td:nth-child(4) { display: none; }
  .pl-auth-tabs { margin-bottom: 24px; }
  .pl-btn-primary { font-size: 12px; padding: 13px 20px; }
}

/* 440px — teléfonos muy pequeños */
@media (max-width: 440px) {
  .pl-header    { padding: 12px 16px; }
  .pl-util-inner { padding: 7px 16px; }
  .pl-logo-word { font-size: 18px; }

  /* Hero: aún más compacto, flechas ocultas */
  .pl-hero-slider { height: 56vh; min-height: 360px; }
  .pl-hs-arr    { display: none; }
  .pl-hs-title  { font-size: clamp(26px, 7.5vw, 40px); }
  .pl-hs-content { padding: 28px 16px; }
  .pl-hero-sub  { font-size: 13px; }
  .pl-btn--hero { padding: 11px 18px; }
}

/* ============================================================
   Página de producto individual (single-product.php)
   ============================================================ */

/* Ocultar aviso "elige opciones" en página de producto (el scroll al form ya avisa) */
.single-product .woocommerce-error { display: none !important; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.pl-product-breadcrumb { max-width: 1200px; margin: 0 auto; padding: 22px 40px 0; }
.pl-product-breadcrumb .woocommerce-breadcrumb { font-size: 12px; color: var(--gray); }
.pl-product-breadcrumb a { color: var(--gray); transition: color .18s; }
.pl-product-breadcrumb a:hover { color: var(--pink); }

/* ── Wrapper principal ───────────────────────────────────── */
.pl-product-main { max-width: 1200px; margin: 0 auto; padding-bottom: 80px; }

/* ── Layout 2 columnas ───────────────────────────────────── */
.pl-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 40px 40px 0;
  align-items: start;
}

/* ── Galería ─────────────────────────────────────────────── */
.pl-product-gallery { display: flex; flex-direction: column; gap: 14px; }
.pl-gallery-main {
  background: linear-gradient(180deg, #fff 0%, var(--paper-2) 100%);
  border: 1px solid var(--line-soft); border-radius: 2px;
  position: relative; width: 100%; padding-bottom: 100%; overflow: hidden;
}
.pl-gallery-main img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: block; transition: opacity .25s;
}
.pl-gallery-main .pl-gallery-ph {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 120px; height: 170px; opacity: .35;
}
.pl-gallery-main.is-loading img { opacity: .6; }
.pl-gallery-ph { width: 120px; height: 170px; opacity: .35; }

.pl-gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pl-thumb {
  width: calc((100% - 30px) / 4); aspect-ratio: 1; flex-shrink: 0;
  border: 1.5px solid var(--line-soft); border-radius: 2px;
  background: #fff; padding: 6px; cursor: pointer;
  transition: border-color .2s; overflow: hidden;
}
.pl-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pl-thumb.is-active { border-color: var(--ink); }
.pl-thumb:hover:not(.is-active) { border-color: var(--gray); }

/* ── Info ────────────────────────────────────────────────── */
.pl-product-info { display: flex; flex-direction: column; gap: 0; }
.pl-product-badges { display: flex; gap: 8px; margin-bottom: 16px; }
.pl-product-fam { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; margin-bottom: 10px; display: block; }
.pl-product-name { font-family: var(--serif); font-size: clamp(30px,3.5vw,52px); font-weight: 500; line-height: 1; margin-bottom: 10px; color: var(--ink); }
.pl-product-inspired { margin-bottom: 18px; }
.pl-product-info .pl-inspired-script { font-size: 12px; letter-spacing: .22em; }
.pl-product-info .pl-inspired-name   { font-size: 28px; }
.pl-product-house { font-size: 15px; color: var(--gray); margin-top: 4px; }
.pl-product-info .pl-card-conc { font-size: 12px; padding: 4px 10px; }

.pl-product-meta-row { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; flex-wrap: wrap; }
.pl-product-divider { border: none; border-top: 1px solid var(--line-soft); margin: 18px 0; }
.pl-stars--lg .pl-star { font-size: 14px; }
.pl-stars--lg .pl-stars-score { font-size: 13px; }
.pl-stars--lg .pl-stars-reviews { font-size: 12px; }
.pl-stars--empty-state .pl-star--empty { color: var(--line); }
.pl-stars--empty-state .pl-stars-reviews { color: var(--gray); }

/* Píldora de descuento: se ve, pero no le grita al precio. */
.pl-dto {
  display: inline-flex; align-items: center; align-self: center;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .05em; line-height: 1;
  color: #bf2233; background: rgba(191,34,51,.07);
  border: 1px solid rgba(191,34,51,.24);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
/* La misma píldora, más pequeña, en las tarjetas y en el buscador. */
.pl-card-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pl-dto--card { font-size: 11px; padding: 4px 9px; letter-spacing: .04em; }
.pl-dto--mini {
  font-size: 10px; padding: 3px 7px; letter-spacing: .04em; margin-left: 7px;
  vertical-align: middle;
}
/* Sobre tarjeta oscura el rojo se apaga; se aclara para que siga leyéndose. */
.pl-card--dark .pl-dto {
  color: #ff9aa4; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18);
}
/* Buscador del hero, que va sobre fondo oscuro. */
.pl-hero-search .pl-dto--mini {
  color: #ff9aa4; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2);
}
.pl-product-short-desc-inline { font-size: 14px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 22px; max-width: 52ch; }

/* ── Tamaños ─────────────────────────────────────────────── */
.pl-product-sizes-wrap { margin-bottom: 22px; }
.pl-product-sizes-label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gray); font-weight: 500; display: block; margin-bottom: 10px; }
.pl-product-sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.pl-size { border: 1.5px solid var(--line); padding: 10px 18px; border-radius: 1px; font-size: 12px; letter-spacing: .08em; color: var(--ink-soft); transition: .2s; font-family: var(--sans); cursor: pointer; }
.pl-size.is-on { border-color: var(--ink); color: var(--ink); background: #fff; font-weight: 500; }
.pl-size:hover:not(.is-on) { border-color: var(--ink-soft); }

/* ── Formulario añadir al carrito ────────────────────────── */
.pl-product-cart-form { margin-bottom: 14px; }
.pl-product-cart-row { display: flex; gap: 10px; align-items: stretch; }
.pl-qty-wrap { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 1px; overflow: hidden; flex-shrink: 0; }
.pl-qty-btn {
  width: 44px; background: var(--paper-2); font-size: 20px; line-height: 1;
  color: var(--ink); transition: background .18s;
  display: flex; align-items: center; justify-content: center;
  font-weight: 300; border: none; cursor: pointer;
}
.pl-qty-btn:hover { background: var(--paper-3); }
.pl-qty-input {
  width: 52px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font-size: 14px; font-family: var(--sans); color: var(--ink);
  outline: none; background: #fff; -moz-appearance: textfield;
}
.pl-qty-input::-webkit-outer-spin-button,
.pl-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pl-btn--cart { flex: 1; text-align: center; justify-content: center; font-size: 11.5px; background: var(--pink) !important; color: #fff !important; border-color: var(--pink) !important; }
.pl-btn--cart:hover:not(.disabled) { background: var(--pink-deep) !important; border-color: var(--pink-deep) !important; }

/* Variable product — WooCommerce native form */
.pl-product-cart-variable .variations_form { width: 100%; }
/* Resetear display de tabla para que no colapse en algunos navegadores */
.pl-product-cart-variable .variations,
.pl-product-cart-variable .variations tbody,
.pl-product-cart-variable .variations tr,
.pl-product-cart-variable .variations .label,
.pl-product-cart-variable .variations .value { display: block; width: 100%; }
.pl-product-cart-variable .variations { margin-bottom: 10px; border: none; }
.pl-product-cart-variable .variations tr { margin-bottom: 10px; }
.pl-product-cart-variable .variations .label { margin-bottom: 4px; text-align: left; }
.pl-product-cart-variable .variations .label label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); font-weight: 500; font-family: var(--sans); }
.pl-product-cart-variable .variations select { width: 100%; border: 1px solid var(--line); border-radius: 1px; padding: 8px 12px; font-size: 13px; font-family: var(--sans); color: var(--ink); background: #fff; cursor: pointer; box-sizing: border-box; }
.pl-product-cart-variable .variations select:focus { outline: none; border-color: var(--pink); }
.pl-product-cart-variable .reset_variations { display: none !important; }
.pl-product-cart-variable .woocommerce-variation { display: none !important; }
.pl-product-cart-variable .woocommerce-variation-add-to-cart { display: flex; gap: 10px; align-items: stretch; }
/* Botones de variación */
.pl-var-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pl-var-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 12px 18px; min-width: 90px;
  border: 1.5px solid var(--line); border-radius: 2px; background: #fff;
  font-family: var(--sans); color: var(--ink); cursor: pointer;
  transition: border-color .18s, background .18s, color .18s; line-height: 1;
}
.pl-var-btn:hover { border-color: var(--ink-soft); }
.pl-var-btn.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.pl-var-btn-name { font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.pl-var-btn-price { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pl-var-btn-price del { font-size: 10px; color: var(--gray); text-decoration: line-through; }
.pl-var-btn-price strong { font-size: 12px; font-weight: 600; }
.pl-var-btn.is-active .pl-var-btn-price del { color: rgba(255,255,255,.55); }
.pl-var-btn.is-active .pl-var-btn-price strong { color: #fff; }

/* Viewers counter */
/* ── Tarjeta de precio + píldora de espectadores ─────────── */
.pl-precio-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 16px 20px; margin: -8px 0 10px;
  box-shadow: 0 14px 30px -28px rgba(22,21,20,.65);
}
.pl-precio-cifras { display: flex; flex-direction: column; gap: 3px; }
.pl-precio-ahora {
  font-family: var(--serif); font-size: clamp(28px,3vw,38px); font-weight: 600;
  line-height: 1; letter-spacing: -.01em; color: var(--pink-deep);
}
.pl-precio-antes {
  font-family: var(--sans); font-size: 12.5px; font-weight: 300;
  color: var(--gray); letter-spacing: .01em;
}
.pl-precio-antes del { text-decoration: line-through; }
.pl-dto--precio { font-size: 13px; padding: 7px 14px; }

.pl-viewers {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 13px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: 12.5px; font-weight: 300;
  color: var(--gray); margin: 0 0 14px;
  /* La columna del producto es flex: sin esto la píldora se estira de lado a
     lado y deja de parecer una píldora. */
  align-self: flex-start; width: fit-content; max-width: 100%;
}
.pl-viewers-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #3d8b40; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(61,139,64,.5);
  animation: pl-viewers-latido 2.1s ease-out infinite;
}
@keyframes pl-viewers-latido {
  0%   { box-shadow: 0 0 0 0 rgba(61,139,64,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(61,139,64,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,139,64,0); }
}
@media (prefers-reduced-motion: reduce) { .pl-viewers-dot { animation: none; } }
.pl-viewers-num { color: var(--ink); font-weight: 600; }

@media (max-width: 560px) {
  .pl-precio-card  { padding: 14px 16px; }
  .pl-precio-ahora { font-size: 27px; }
  .pl-dto--precio  { font-size: 12px; padding: 6px 12px; }
  .pl-viewers      { font-size: 11.5px; padding: 7px 13px 7px 11px; }
}
/* Botón añadir al carrito — usa color del Customizer */
.pl-product-cart-variable .single_add_to_cart_button { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; font-family: var(--sans); background: var(--pink) !important; color: #fff !important; border: none; cursor: pointer; padding: 0 20px; height: 40px; border-radius: 1px; transition: background .2s; text-decoration: none; }
.pl-product-cart-variable .single_add_to_cart_button:hover:not(.disabled) { background: var(--pink-deep) !important; }
.pl-product-cart-variable .single_add_to_cart_button.disabled { background: var(--pink) !important; opacity: .45; cursor: not-allowed; }

/* Out of stock */
.pl-out-of-stock {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--pink-deep); background: rgba(var(--pink-rgb),.08);
  border: 1px solid rgba(var(--pink-rgb),.3); border-radius: 2px;
  padding: 13px 18px; margin-bottom: 20px;
}
.pl-out-of-stock svg { flex-shrink: 0; }

/* ── Garantías strip ─────────────────────────────────────── */

/* ── Sticky add-to-cart bar ──────────────────────────────── */
.pl-sticky-atc {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: #fff; border-top: 1px solid var(--line-soft);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  padding: 10px 0;
}
.pl-sticky-atc.is-visible { transform: translateY(0); }
.pl-sticky-atc-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pl-sticky-atc-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.pl-sticky-atc-img { width: 44px; height: 44px; object-fit: contain; border-radius: 2px; flex-shrink: 0; }
.pl-sticky-atc-text { min-width: 0; }
.pl-sticky-atc-name { font-size: 13px; font-weight: 600; font-family: var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.pl-sticky-atc-price { font-size: 12px; color: var(--gray); font-family: var(--sans); margin-top: 1px; }
.pl-sticky-atc-price .amount { font-size: 12px; }
.pl-sticky-atc-btn {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 24px;
  background: var(--pink); color: #fff; border: none; border-radius: 1px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-family: var(--sans);
  cursor: pointer; transition: background .2s; white-space: nowrap;
}
.pl-sticky-atc-btn:hover { background: var(--pink-deep); }
@media (max-width: 600px) {
  .pl-sticky-atc-inner { padding: 0 14px; gap: 10px; }
  .pl-sticky-atc-img { width: 36px; height: 36px; }
  .pl-sticky-atc-name { font-size: 12px; max-width: 160px; }
  .pl-sticky-atc-btn { height: 36px; padding: 0 16px; font-size: 10px; letter-spacing: .14em; }
}

/* ── Tabs ────────────────────────────────────────────────── */
.pl-product-tabs-section {
  padding: 60px 40px;
  max-width: 1200px; margin: 0 auto;
}
.pl-product-tabs {
  display: flex; border-bottom: 2px solid var(--line); margin-bottom: 40px; gap: 0; flex-wrap: wrap;
}
.pl-ptab {
  padding: 12px 30px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; color: var(--gray); background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: .2s;
}
.pl-ptab.is-on { color: var(--ink); border-bottom-color: var(--pink); }
.pl-ptab:hover:not(.is-on) { color: var(--ink-soft); }

.pl-ptab-panel { display: none; }
.pl-ptab-panel.is-on { display: block; animation: plFadeIn .3s ease; }

.pl-product-short-desc { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 16px; max-width: 70ch; }
.pl-product-desc { font-size: 14px; line-height: 1.8; color: var(--ink-soft); max-width: 70ch; }
.pl-product-desc p { margin-bottom: 14px; }
.pl-product-desc h2, .pl-product-desc h3 { font-family: var(--serif); margin: 20px 0 8px; }

/* ── Notas olfativas ─────────────────────────────────────── */
.pl-notes-intro { font-size: 14px; color: var(--gray); margin-bottom: 28px; }
.pl-notes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.pl-note-group {
  background: var(--paper-2); border: 1px solid var(--line-soft);
  padding: 24px 22px; border-radius: 2px;
}
.pl-note-group-label {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--pink); font-weight: 600; display: block; margin-bottom: 6px;
}
.pl-note-group-sub { font-size: 11px; color: var(--gray); margin-bottom: 14px; }
.pl-note-group-name { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); line-height: 1.3; }

/* ── Pirámide olfativa ───────────────────────────────────── */
.pl-pyramid-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.pl-pyramid-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pl-pyramid-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-radius: 3px;
  text-align: center;
}
.pl-pyramid-tier--top  { width: 52%; background: rgba(var(--pink-rgb),.13); color: var(--pink-deep); }
.pl-pyramid-tier--mid  { width: 76%; background: var(--pink); color: #fff; }
.pl-pyramid-tier--base { width: 100%; background: var(--pink-deep); color: #fff; }
.pl-pyramid-tier-label {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; display: block; margin-bottom: 4px;
}
.pl-pyramid-tier-time { font-size: 11px; opacity: .82; display: block; }

.pl-pyramid-notes { display: flex; flex-direction: column; gap: 22px; }
.pl-pyramid-note  { padding-left: 14px; border-left: 3px solid var(--line); }
.pl-pyramid-note--top  { border-color: rgba(var(--pink-rgb),.35); }
.pl-pyramid-note--mid  { border-color: var(--pink); }
.pl-pyramid-note--base { border-color: var(--pink-deep); }
.pl-pyramid-note-label {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gray); font-weight: 600; display: block; margin-bottom: 5px;
}
.pl-pyramid-note-names {
  font-family: var(--serif); font-size: 18px; font-weight: 500;
  color: var(--ink); line-height: 1.3; margin-bottom: 4px;
}
.pl-pyramid-note-time { font-size: 11px; color: var(--gray); display: block; }

/* ── Familia olfativa tab ─────────────────────────────────── */
.pl-fam-detail { max-width: 540px; }
.pl-fam-detail-title { font-family: var(--serif); font-size: 28px; font-weight: 500; color: var(--ink); margin: 8px 0 14px; }
.pl-fam-detail-desc { font-size: 14px; line-height: 1.8; color: var(--ink-soft); }

/* ── Productos relacionados ──────────────────────────────── */
.pl-product-related {
  padding: 60px 40px 80px;
  max-width: 1200px; margin: 0 auto;
}

/* ── Responsive single-product ───────────────────────────── */
@media (max-width: 900px) {
  .pl-product-layout { grid-template-columns: 1fr; gap: 40px; padding: 32px 28px 0; }
  .pl-product-gallery { position: static; }
  .pl-product-tabs-section, .pl-product-related { padding: 48px 28px; }
  .pl-product-breadcrumb { padding: 18px 28px 0; }
  .pl-pyramid-wrap { grid-template-columns: 1fr; gap: 32px; }
  .pl-pyramid-tier--top  { width: 55%; }
  .pl-pyramid-tier--mid  { width: 78%; }
}
@media (max-width: 640px) {
  .pl-product-layout { padding: 24px 20px 0; }
  .pl-product-breadcrumb { padding: 16px 20px 0; }
  .pl-product-tabs-section, .pl-product-related { padding: 40px 20px; }
  .pl-notes-grid { grid-template-columns: 1fr; }
  .pl-product-assurance-item { flex: 0 0 100%; }
  .pl-gallery-main { padding-bottom: 100%; }
  .pl-ptab { padding: 10px 18px; font-size: 10.5px; }
}

/* ============================================================
   Catálogo de productos (archive-product.php)
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.pl-archive-main { max-width: var(--maxw); margin: 0 auto; padding: 52px 40px 80px; }
.pl-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── Hero banner del archivo ─────────────────────────────── */
/* ── Hero banner del archivo ─────────────────────────────── */
/* ── Cabecera de las páginas de catálogo ──────────────────────────────────────
   Antes era un rectángulo negro plano con el título y un contador diminuto.
   Ahora lleva filete de marca, una veladura muy tenue para que no parezca un
   bloque vacío, el rótulo en cápsula y tres sellos donde antes solo iba el
   número de productos: el cliente ve los argumentos de venta al entrar.     */
.pl-archive-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 78% -10%, rgba(var(--pink-rgb), .20) 0%, rgba(var(--pink-rgb), 0) 60%),
    linear-gradient(180deg, #1b1918 0%, #121110 100%);
  color: #f3efec;
  text-align: center;
  padding: 34px 40px 40px;
}

/* Filete superior: el mismo que identifica los correos de la tienda. */
.pl-archive-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #d31021, #8e0d18 60%, #d31021);
}

.pl-archive-hero-inner { position: relative; max-width: 720px; margin: 0 auto; }

/* Rótulo en cápsula: se lee como etiqueta, no como texto suelto. */
.pl-archive-cap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(var(--pink-rgb), .55);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ef6572;
  background: rgba(var(--pink-rgb), .10);
}

.pl-archive-cap svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Tres datos separados por líneas finas. */
.pl-archive-sellos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0 26px;
}

.pl-archive-sello {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .03em;
  color: rgba(243, 239, 236, .62);
}

.pl-archive-sello + .pl-archive-sello { border-left: 1px solid rgba(243, 239, 236, .14); }
.pl-archive-sello b   { color: #fff; font-weight: 600; }
.pl-archive-sello svg { width: 14px; height: 14px; color: var(--pink); flex-shrink: 0; }

@media (max-width: 640px) {
  .pl-archive-hero   { padding: 26px 20px 30px; }
  .pl-archive-sellos { gap: 10px 0; }
  .pl-archive-sello  { padding: 0 12px; font-size: 11px; }
  .pl-archive-sello + .pl-archive-sello { border-left: 0; }
}


.pl-archive-hero .pl-archive-breadcrumb { margin-bottom: 18px; }
.pl-archive-hero .woocommerce-breadcrumb { font-size: 11px; color: rgba(243,239,236,.45); letter-spacing: .04em; }
.pl-archive-hero .woocommerce-breadcrumb a { color: rgba(243,239,236,.45); transition: color .18s; }
.pl-archive-hero .woocommerce-breadcrumb a:hover { color: rgba(243,239,236,.8); }
.pl-archive-hero .woocommerce-breadcrumb .separator { color: rgba(243,239,236,.25); }
.pl-archive-title { font-family: var(--serif); font-size: clamp(32px,4vw,52px); font-weight: 500; color: #f3efec; line-height: 1; margin: 8px 0 0; }
.pl-archive-desc { display: none; }

/* Controles del hero (buscador + ordenar) */
.pl-hero-controls { display: flex; gap: 10px; margin-top: 28px; align-items: stretch; }
.pl-hero-search { flex: 1; min-width: 0; }
.pl-hero-search-wrap {
  display: flex; align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px;
  padding: 0 0 0 18px;
  height: 52px;
  transition: border-color .2s, background .2s;
}
.pl-hero-search-wrap:focus-within {
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.11);
}
.pl-hero-search-icon { flex-shrink: 0; color: rgba(243,239,236,.45); }
.pl-hero-search-input {
  flex: 1;
  background: none; border: none; outline: none;
  font-family: var(--sans); font-size: 15px; font-weight: 300;
  color: #f3efec; letter-spacing: .02em;
  padding: 0 14px;
  min-width: 0; height: 100%;
}
.pl-hero-search-input::placeholder { color: rgba(243,239,236,.35); }
.pl-hero-search-input::-webkit-search-cancel-button { display: none; }
.pl-hero-search-btn {
  flex-shrink: 0;
  background: var(--pink); color: #fff;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 0 24px; height: 100%; border-radius: 0 2px 2px 0;
  transition: background .18s;
}
.pl-hero-search-btn:hover { background: var(--pink-deep); }
.pl-hero-sort-form { flex-shrink: 0; }
.pl-hero-sort-select {
  height: 52px; padding: 0 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px;
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  color: rgba(243,239,236,.75); letter-spacing: .04em;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; outline: none;
  transition: border-color .2s, background .2s;
  min-width: 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='rgba(243,239,236,.45)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}
.pl-hero-sort-select:focus { border-color: rgba(255,255,255,.45); background-color: rgba(255,255,255,.11); }
.pl-hero-sort-select option { background: #1e1d1c; color: #f3efec; }

/* Dropdown live search dentro del hero */
.pl-hero-search { position: relative; }
.pl-hero-search .pl-search-drop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
  background: var(--ink); border: 1px solid rgba(255,255,255,.12);
  border-radius: 3px; box-shadow: 0 12px 32px rgba(0,0,0,.45);
  max-height: 380px; overflow-y: auto; display: none;
}
.pl-hero-search .pl-search-drop.is-open { display: block; }
.pl-hero-search .pl-search-result {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; transition: background .15s; color: #f3efec;
}
.pl-hero-search .pl-search-result:hover,
.pl-hero-search .pl-search-result.is-active { background: rgba(255,255,255,.07); }
.pl-hero-search .pl-search-result__thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.pl-hero-search .pl-search-result__thumb--empty { width: 44px; height: 44px; background: rgba(255,255,255,.08); border-radius: 2px; flex-shrink: 0; }
.pl-hero-search .pl-search-result__name { font-size: 13px; font-weight: 400; color: #f3efec; }
.pl-hero-search .pl-search-result__inspired { font-size: 11px; color: rgba(243,239,236,.55); margin-top: 1px; font-style: italic; }
.pl-hero-search .pl-search-result__price { font-size: 12px; color: rgba(243,239,236,.45); margin-top: 3px; }
.pl-hero-search .pl-search-empty { padding: 20px 16px; font-size: 13px; color: rgba(243,239,236,.45); }
.pl-hero-search .pl-search-drop-footer {
  padding: 12px 16px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pink); border-top: 1px solid rgba(255,255,255,.08);
  cursor: pointer; transition: color .15s;
}
.pl-hero-search .pl-search-drop-footer:hover { color: var(--pink-light); }

/* Shake hint */
@keyframes pl-shake {
  0%,100% { transform: translateX(0); }
  10%      { transform: translateX(-10px); }
  22%      { transform: translateX(10px); }
  34%      { transform: translateX(-8px); }
  46%      { transform: translateX(8px); }
  58%      { transform: translateX(-5px); }
  70%      { transform: translateX(5px); }
  82%      { transform: translateX(-2px); }
}
.pl-hint-shake { animation: pl-shake 0.75s ease-in-out; }

/* ── Aviso destacado (header) ───────────────────────────── */
.pl-highlight-bar { background: var(--pink); }
.pl-highlight-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 40px;
  display: flex; align-items: center; justify-content: center;
}
.pl-highlight-content {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: #fff; text-decoration: none; line-height: 1.3;
}
a.pl-highlight-content:hover { opacity: .9; }
.pl-highlight-content img { max-height: 32px; width: auto; display: block; }
.pl-highlight-content.is-shake     { animation: pl-shake 0.75s ease-in-out; }
.pl-highlight-content.pl-anim-pulse { animation: pl-highlight-pulse var(--pl-pulse-speed, 1.6s) ease-in-out infinite; }
.pl-highlight-content.pl-anim-pulse.is-shake {
  animation: pl-highlight-pulse var(--pl-pulse-speed, 1.6s) ease-in-out infinite, pl-shake 0.75s ease-in-out;
}
@keyframes pl-highlight-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.pl-highlight-marquee {
  overflow: hidden; width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.pl-highlight-marquee-track {
  display: flex; align-items: center; gap: 60px; width: max-content;
  animation: pl-pay-scroll 12s linear infinite;
}
.pl-highlight-marquee-track[data-dir="right"] { animation-direction: reverse; }
.pl-highlight-marquee-track .pl-highlight-content { flex-shrink: 0; }

/* ── Botón toggle filtros (móvil) ────────────────────────── */
.pl-filter-toggle {
  display: none;
  align-items: center; gap: 9px;
  padding: 10px 18px; border: 1px solid var(--line);
  border-radius: 2px; background: #fff;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--ink); margin-bottom: 20px; transition: border-color .18s;
}
.pl-filter-toggle:hover { border-color: var(--ink); }
.pl-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--pink); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0;
}
.pl-archive-overlay {
  display: none; position: fixed; inset: 0; background: rgba(22,21,20,.45);
  z-index: 99; backdrop-filter: blur(2px);
}
.pl-archive-overlay.is-visible { display: block; }

/* ── Layout con sidebar ──────────────────────────────────── */
.pl-archive-layout { display: grid; grid-template-columns: 220px 1fr; gap: 52px; align-items: start; }

/* ── Sidebar ─────────────────────────────────────────────── */
.pl-archive-sidebar { position: sticky; top: 88px; }
.pl-sidebar-close { display: none; }

/* Encabezado del panel: título, cuántos filtros hay puestos y cómo quitarlos. */
.pl-filter-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}
.pl-filter-h {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.pl-filter-h svg { flex: none; color: var(--ink); }
.pl-filter-h-n {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; background: #bf2233; color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0;
}
.pl-filter-limpiar {
  font-size: 11.5px; letter-spacing: .06em; color: var(--gray);
  border-bottom: 1px solid transparent; transition: color .18s, border-color .18s;
}
.pl-filter-limpiar:hover { color: #bf2233; border-bottom-color: rgba(191,34,51,.45); }

.pl-filter-group { border-bottom: 1px solid var(--line-soft); padding-bottom: 22px; margin-bottom: 22px; }
.pl-filter-group:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.pl-filter-title { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: var(--gray); margin-bottom: 14px; display: block; }
.pl-filter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pl-filter-item { display: flex; align-items: center; }
.pl-filter-link {
  display: flex; align-items: center; justify-content: space-between;
  flex: 1; padding: 5px 0; font-size: 13px;
  color: var(--ink-soft); transition: color .18s;
}
.pl-filter-link:hover { color: var(--pink); }
.pl-filter-link.is-active { color: var(--pink); font-weight: 500; }
.pl-filter-count { font-size: 11px; color: var(--gray); margin-left: 6px; }

/* Tamaños: cuadrícula de chapas. Son cifras cortas y en lista de una columna
   desperdiciarían todo el ancho de la barra. */
.pl-filter-tallas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
}
.pl-talla {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 4px 7px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink-soft);
  transition: border-color .18s, color .18s, background .18s;
}
.pl-talla:hover { border-color: var(--ink-soft); color: var(--ink); }
.pl-talla-ml { font-size: 12px; font-weight: 500; letter-spacing: .01em; line-height: 1.2; }
.pl-talla-n  { font-size: 9.5px; color: var(--gray); line-height: 1.2; }
.pl-talla.is-active {
  border-color: #bf2233; background: rgba(191,34,51,.06); color: #bf2233;
}
.pl-talla.is-active .pl-talla-ml { font-weight: 600; }
.pl-talla.is-active .pl-talla-n  { color: rgba(191,34,51,.7); }

/* ── Toolbar ─────────────────────────────────────────────── */
.pl-archive-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.pl-archive-count { font-size: 12px; color: var(--gray); letter-spacing: .04em; }
.pl-sort-select {
  padding: 8px 34px 8px 12px; border: 1px solid var(--line); border-radius: 2px;
  background: #fff; font-family: var(--sans); font-size: 12px; letter-spacing: .04em;
  color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .18s;
}
.pl-sort-select:focus { outline: none; border-color: var(--ink); }

/* ── Filtros activos ─────────────────────────────────────── */
.pl-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pl-active-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 12px; background: var(--ink); color: #fff;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-radius: 20px;
}
.pl-active-filter a { color: rgba(255,255,255,.6); font-size: 16px; line-height: 1; margin-left: 2px; transition: color .18s; }
.pl-active-filter a:hover { color: #fff; }
.pl-clear-filters {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border: 1px solid var(--line);
  border-radius: 20px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gray);
  transition: color .18s, border-color .18s;
}
.pl-clear-filters:hover { color: var(--ink); border-color: var(--ink); }

/* ── Grid del catálogo ───────────────────────────────────── */
.pl-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pl-archive-grid .pl-card { flex: none; max-width: none; width: 100%; }

/* ── Paginación del catálogo ─────────────────────────────── */
.pl-archive-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 52px; flex-wrap: wrap; }
.pl-page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
  transition: background .18s, border-color .18s;
}
.pl-page-link:hover:not(.is-current) { background: var(--paper-2); }
.pl-page-link.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── Sin resultados ──────────────────────────────────────── */
.pl-archive-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 80px 20px; text-align: center; color: var(--gray);
}
.pl-archive-empty svg { width: 52px; height: 52px; opacity: .25; }
.pl-archive-empty p { font-size: 15px; margin: 0; }
.pl-archive-empty .pl-btn { margin-top: 8px; }

/* ── Responsive archivo ──────────────────────────────────── */
@media (max-width: 980px) {
  .pl-archive-layout { grid-template-columns: 1fr; gap: 0; }
  .pl-archive-grid { grid-template-columns: repeat(2, 1fr); }

  /* Toggle button */
  .pl-filter-toggle { display: flex; }

  /* Sidebar como panel lateral */
  .pl-archive-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
    width: min(320px, 88vw); overflow-y: auto;
    background: var(--paper); padding: 24px 28px 40px;
    transform: translateX(-105%); transition: transform .32s cubic-bezier(.25,.1,.25,1);
    box-shadow: 6px 0 32px rgba(22,21,20,.14);
  }
  .pl-archive-sidebar.is-open { transform: translateX(0); }

  /* Botón cerrar dentro del panel */
  .pl-sidebar-close {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-left: auto; margin-bottom: 24px;
    border: 1px solid var(--line); border-radius: 50%;
    color: var(--gray); transition: color .18s, border-color .18s;
  }
  .pl-sidebar-close:hover { color: var(--ink); border-color: var(--ink); }
}
@media (max-width: 640px) {
  .pl-archive-main { padding: 0 20px 60px; }
  .pl-archive-hero { padding: 40px 24px 48px; }
  .pl-hero-search-btn { padding: 0 14px; font-size: 10px; letter-spacing: .12em; }
  .pl-hero-sort-select { min-width: 120px; }
  .pl-archive-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 440px) {
  .pl-archive-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pl-archive-grid .pl-add { font-size: 9px; letter-spacing: .08em; padding: 9px 6px; }
  .pl-archive-grid .pl-card-body { padding: 14px 14px 16px; }
  .pl-archive-grid .pl-card-name { font-size: 18px; }
}

/* ============================================================
   Checkout (woocommerce-checkout)
   ============================================================ */

/* ── Wrapper de página ───────────────────────────────────── */
.pl-checkout-page { max-width: 1360px; margin: 0 auto; padding: 32px 48px 100px; }
.pl-checkout-page-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 36px;
}

/* ── Layout 2 columnas ───────────────────────────────────── */
.pl-checkout-wrap {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 64px;
  align-items: start;
}
.pl-checkout-main { min-width: 0; }

/* ── Aviso de login ──────────────────────────────────────── */
.pl-checkout-login-notice {
  margin-bottom: 28px;
  padding: 14px 18px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 13px;
  color: var(--gray);
}
.pl-checkout-login-notice .pl-link { color: var(--pink); font-weight: 500; }

/* ── Tarjeta dirección guardada ──────────────────────────── */
.pl-co-saved-address {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pink);
  border-radius: 2px;
  margin-bottom: 32px;
}
.pl-co-saved-address-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: rgba(var(--pink-rgb), .08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--pink);
}
.pl-co-saved-address-icon svg { width: 16px; height: 16px; }
.pl-co-saved-address-info { flex: 1; min-width: 0; }
.pl-co-saved-address-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
  font-weight: 500;
  margin-bottom: 3px;
}
.pl-co-saved-address-text {
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-co-saved-address-edit {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--gray);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s;
}
.pl-co-saved-address-edit:hover { color: var(--pink); }

/* Checkbox guardar dirección */
.pl-save-address-row { margin-top: 16px; }
.pl-save-address-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--gray);
  transition: color .2s;
}
.pl-save-address-check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--pink);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}
.pl-save-address-check:hover { color: var(--ink); }

/* ── Secciones del billing form ──────────────────────────── */
.pl-co-section { margin-bottom: 40px; }
.pl-co-section:last-child { margin-bottom: 0; }

.pl-co-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.pl-co-section-title--order { font-size: 18px; margin-bottom: 20px; }

.pl-checkout-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Contenedores de campos ──────────────────────────────── */
.pl-co-fields         { margin-bottom: 12px; }
.pl-co-fields:last-child { margin-bottom: 0; }

.pl-co-fields--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

/* ── Campos (form-row) dentro de las secciones custom ───── */
.pl-co-section .form-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  clear: none !important;
}

.pl-co-section .form-row label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.pl-co-section .form-row label .required { color: var(--pink); margin-left: 2px; }
.pl-co-section .form-row label abbr { text-decoration: none; }

.pl-co-section .form-row .input-text,
.pl-co-section .form-row select,
.pl-co-section .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  font-family: var(--sans);
  font-weight: 300;
  appearance: none;
  transition: border-color .18s;
}
.pl-co-section .form-row .input-text:focus,
.pl-co-section .form-row select:focus,
.pl-co-section .form-row textarea:focus { outline: none; border-color: var(--ink); }

.pl-co-section .form-row .input-text::placeholder,
.pl-co-section .form-row textarea::placeholder { color: var(--gray); opacity: .7; }

/* Select con flecha custom */
.pl-co-section .form-row select,
.pl-co-section .pl-checkout-city-select,
.pl-co-section .pl-state-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Ciudad deshabilitada hasta elegir departamento */
.pl-co-section select:disabled,
.pl-co-section .pl-checkout-city-select:disabled {
  opacity: .45;
  cursor: not-allowed;
  background-color: var(--paper-3);
}

/* Textarea de indicaciones */
.pl-co-section .form-row textarea { resize: vertical; min-height: 88px; }

/* WC wrapper del input */
.pl-co-section .form-row .woocommerce-input-wrapper { display: block; }

/* Estado de error inline */
.pl-co-section .form-row.woocommerce-invalid .input-text,
.pl-co-section .form-row.woocommerce-invalid select { border-color: #c0392b !important; }

/* Ocultar country field (hidden en el template, WC no debe mostrarlo) */
#billing_country_field,
#shipping_country_field { display: none !important; }

/* ── Sección "Enviar a dirección diferente" ──────────────── */
.woocommerce-checkout .woocommerce-shipping-fields { margin-top: 8px; }
.woocommerce-checkout .shipping_address { display: none; }
.woocommerce-checkout #ship-to-different-address {
  padding: 16px 0 20px;
  border-top: 1px solid var(--line);
}
.woocommerce-checkout #ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--pink);
  flex-shrink: 0;
  margin: 0;
}
/* Campos del form de shipping (si aplica dirección diferente) — mismos estilos */
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
  display: flex; flex-direction: column; gap: 7px;
  margin: 0; float: none !important; width: auto !important; padding: 0 !important;
}
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row label {
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row .input-text,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 2px;
  font-size: 14px; color: var(--ink); background: #fff; font-family: var(--sans); appearance: none;
}
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row .input-text:focus,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row select:focus { outline: none; border-color: var(--ink); }

/* ── Columna derecha (sticky) ──────────────────────────────
   El position:sticky ya estaba, pero no hacía nada: la rejilla
   lleva align-items:start, así que la columna medía justo lo
   mismo que el recuadro y este no tenía por dónde deslizarse.
   Con align-self:stretch la columna crece hasta la altura del
   formulario y el resumen sí se queda quieto mientras se baja. */
.pl-checkout-side { min-width: 0; align-self: stretch; }
.pl-checkout-side-inner {
  position: sticky;
  top: 96px;
  /* Si el pedido lleva muchos productos, el recuadro se queda dentro de la
     pantalla y hace scroll por dentro en vez de cortarse por abajo. */
  max-height: calc(100vh - 120px);
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 28px 24px 24px;
}

/* ── Tabla de resumen de pedido ──────────────────────────── */
.pl-checkout-order-review { margin-bottom: 0; }

.pl-checkout-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--ink);
}

/* Cuántos artículos van en el pedido: sustituye a la cabecera
   «PRODUCTO / PRECIO», que era una etiqueta de hoja de cálculo. */
.pl-co-cuenta {
  margin: 0 0 4px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray); font-weight: 500;
}
.pl-co-cuenta strong { color: var(--ink); font-weight: 700; }

/* ── Artículos ───────────────────────────────────────────── */
.pl-co-items tbody tr { border-bottom: 1px solid var(--line-soft); }
.pl-co-items tbody tr:last-child { border-bottom: none; }

.pl-co-product { padding: 14px 0; width: 100%; }
/* Los dos precios de cada línea: el normal tachado encima, lo que se paga
   debajo. Apilados y no en línea, porque la columna es estrecha. */
.pl-co-total {
  padding: 16px 0 14px; white-space: nowrap; text-align: right; vertical-align: top;
  display: table-cell;
}
.pl-co-antes {
  display: block; font-size: 11.5px; font-weight: 400; color: var(--gray);
  line-height: 1.3; margin-bottom: 1px;
}
.pl-co-antes del { text-decoration: line-through; }
.pl-co-ahora {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
  line-height: 1.3;
}

.pl-co-product-inner { display: flex; align-items: flex-start; gap: 13px; }
.pl-co-thumb-wrap { position: relative; flex-shrink: 0; display: block; }
.pl-co-thumb {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: #fff;
  display: block;
}
/* La cantidad, en una chapa sobre la esquina de la foto. */
.pl-co-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
  border: 2px solid var(--paper);
}
.pl-co-product-inner a { display: block; }
.pl-co-product-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.pl-co-name { font-size: 13.5px; font-weight: 400; color: var(--ink); line-height: 1.35; }
.pl-co-unit { font-size: 11.5px; color: var(--gray); }
.pl-co-qty  { font-size: 12px; color: var(--gray); }
.variation  { font-size: 12px; color: var(--gray); margin: 0; }

/* ── Cupón ───────────────────────────────────────────────── */
.pl-co-cupon {
  margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.pl-co-cupon-abrir {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 4px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink-soft); text-align: left;
  transition: color .2s;
}
.pl-co-cupon-abrir:hover { color: #bf2233; }
.pl-co-cupon-ico { display: flex; flex-shrink: 0; color: #bf2233; }
.pl-co-cupon-ico svg { width: 17px; height: 17px; }
.pl-co-cupon-txt { flex: 1; }
.pl-co-cupon-flecha { flex-shrink: 0; color: var(--gray); transition: transform .25s; }
.pl-co-cupon.is-abierto .pl-co-cupon-flecha { transform: rotate(180deg); }

/* Se despliega sin dar el salto de un display:none. */
.pl-co-cupon-caja {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1);
}
.pl-co-cupon.is-abierto .pl-co-cupon-caja { grid-template-rows: 1fr; }
.pl-co-cupon-caja > * { overflow: hidden; min-height: 0; }
.pl-co-cupon-fila { display: flex; gap: 8px; padding-top: 12px; }
.pl-co-cupon-input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  text-transform: uppercase; letter-spacing: .06em;
  transition: border-color .2s;
}
.pl-co-cupon-input:focus { outline: none; border-color: #bf2233; }
.pl-co-cupon-input::placeholder { text-transform: none; letter-spacing: 0; color: var(--gray); }
.pl-co-cupon-btn {
  flex: none; height: 42px; padding: 0 20px; border: 0; border-radius: 8px;
  background: var(--ink); color: #fff; cursor: pointer;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .2s, opacity .2s;
}
.pl-co-cupon-btn:hover:not(:disabled) { background: #bf2233; }
.pl-co-cupon-btn:disabled { opacity: .55; cursor: default; }
.pl-co-cupon-msg {
  margin: 9px 0 0; font-size: 12px; line-height: 1.5; min-height: 0;
}
.pl-co-cupon-msg.is-error { color: #bf2233; }
.pl-co-cupon-msg.is-ok    { color: #3d8b40; }

/* ── Totales ─────────────────────────────────────────────── */
.pl-co-totales { margin-top: 16px; }
.pl-co-totales tr { border-bottom: none; }
.pl-co-totales th,
.pl-co-totales td {
  padding: 7px 0;
  font-size: 13px;
  color: var(--ink-soft);
  vertical-align: baseline;
}
.pl-co-totales th { font-weight: 400; text-align: left; }
.pl-co-totales td { text-align: right; }

.pl-co-totales .pl-co-subtotal th,
.pl-co-totales .pl-co-subtotal td {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* El descuento, en verde: es la única cifra que baja el total. */
.pl-co-totales .pl-co-coupon th,
.pl-co-totales .pl-co-coupon td { color: #3d8b40; }
.pl-co-totales .pl-co-coupon td { font-weight: 600; }
.pl-co-coupon-tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: rgba(61,139,64,.1); border: 1px solid rgba(61,139,64,.28);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #3d8b40;
  vertical-align: middle;
}
.pl-co-coupon-rm {
  margin-left: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 11px; color: var(--gray);
  text-decoration: underline; text-underline-offset: 2px;
  transition: color .2s;
}
.pl-co-coupon-rm:hover { color: #bf2233; }

.pl-co-gratis { color: #3d8b40; font-weight: 600; }
.pl-co-totales .pl-co-shipping td label { display: block; font-size: 12px; color: var(--gray); font-weight: 400; }
.pl-co-totales .pl-co-shipping td input[type="radio"] { accent-color: var(--pink); }
.pl-co-shipping-pending { font-size: 12px; color: var(--gray); font-style: italic; }

/* El total es la cifra que decide la compra: se le da tamaño y peso propios,
   por encima de todo lo demás del resumen. */
.pl-co-totales .pl-co-order-total th,
.pl-co-totales .pl-co-order-total td {
  padding-top: 15px;
  border-top: 2px solid var(--ink);
  vertical-align: baseline;
}
.pl-co-totales .pl-co-order-total th {
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink);
}
.pl-co-totales .pl-co-order-total td {
  font-family: var(--serif); font-size: 27px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.05; color: var(--ink);
}
.pl-co-totales .pl-co-order-total td strong,
.pl-co-totales .pl-co-order-total td .amount { font-weight: 700; }

/* Refuerzo del ahorro, debajo del total. */
.pl-co-ahorro {
  display: flex; align-items: center; gap: 7px;
  margin: 12px 0 0; padding: 9px 12px; border-radius: 9px;
  background: rgba(61,139,64,.08);
  font-size: 12px; line-height: 1.45; color: #2f6d32;
}
.pl-co-ahorro svg { flex: none; color: #3d8b40; }
.pl-co-ahorro b { font-weight: 700; }

/* ── Sección de pago (WC renderiza checkout/payment.php) ─── */
#payment {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  border-radius: 0 !important;
  background: #fff !important;
}
#payment .payment_methods {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* WooCommerce saca el botón redondo FUERA de la etiqueta, como hermanos: por
   eso cada opción ocupaba dos renglones y las cajas salían altísimas. Con una
   rejilla de dos columnas el botón y el nombre van en la misma línea, y el
   detalle del pago cruza las dos columnas por debajo. */
#payment .payment_methods li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  background: #fff !important;
}
/* El medio elegido se marca en verde: sobre una página donde el rojo es la
   marca y el botón de pagar, el verde se lee al instante como «esto es lo que
   escogiste» sin competir con nada. */
#payment .payment_methods li:has(input:checked) {
  border-color: rgba(61,139,64,.6);
  background: rgba(61,139,64,.05) !important;
  box-shadow: 0 8px 22px -18px rgba(61,139,64,.85);
}
/* WooCommerce le pone a cada opción un ::before decorativo con contenido. Al
   convertir la caja en rejilla, ese pseudoelemento pasaba a ocupar la primera
   celda y empujaba el botón redondo a la segunda, partiendo la línea. Se saca
   del flujo y se reaprovecha como filo lateral. */
#payment .payment_methods li::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  border: 0; box-shadow: none; border-radius: 4px 0 0 4px;
  background: none;
}
#payment .payment_methods li:has(input:checked)::before {
  background: linear-gradient(180deg, #3d8b40, #5cb860);
}
#payment .payment_methods li:has(input:checked) > label {
  background: transparent !important; font-weight: 600; color: #2f6e33;
}
#payment .payment_methods li label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  background: transparent !important;
}
#payment .payment_methods li > input[type="radio"] {
  accent-color: #3d8b40;
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin: 0;
}
#payment .payment_methods li img { height: 20px; width: auto; display: inline-block; margin-left: auto; }
/* El detalle del pago cruza las dos columnas y se despega del borde de la
   caja con márgenes negativos, para que la línea llegue de lado a lado. */
#payment .payment_box {
  grid-column: 1 / -1;
  margin: 10px -14px -10px;
  padding: 11px 14px;
  background: transparent !important;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.55;
}
#payment .payment_methods li:has(input:checked) .payment_box {
  border-top-color: rgba(61,139,64,.28);
}
/* WooCommerce le pone una flechita apuntando a la opción; sobra aquí. */
#payment .payment_box::before { display: none !important; }
#payment .place-order { margin-top: 0; }

/* Botón de realizar el pedido: rojo de marca y con luz propia. Es la última
   acción de toda la compra, así que se le deja el rojo más fuerte de la
   tienda y un halo que respira para que no haya duda de dónde pulsar. */
#place_order {
  display: block;
  width: 100%;
  padding: 16px;
  /* Un tono por debajo del rojo de marca: a este tamaño y con la luz encima,
     el #d31021 puro saturaba demasiado la parte baja de la página. */
  background: #bf2233;
  color: #fff;
  box-shadow: 0 10px 28px -14px rgba(191,34,51,.7);
  animation: plPedidoLuz 2.4s ease-in-out infinite;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background .22s;
  text-align: center;
}
#place_order:hover { background: #a81b2a; }
#place_order:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* La luz late en la sombra, no en el fondo: así el rojo no cambia de tono
   y el botón sigue leyéndose igual de sólido durante todo el ciclo. */
@keyframes plPedidoLuz {
  0%, 100% { box-shadow: 0 10px 24px -15px rgba(191,34,51,.6); }
  50%      { box-shadow: 0 14px 34px -12px rgba(191,34,51,.85); }
}
@media (prefers-reduced-motion: reduce) {
  #place_order { animation: none; }
}

.woocommerce-privacy-policy-text { font-size: 11px; color: var(--gray); margin-top: 12px; line-height: 1.5; }
.woocommerce-privacy-policy-text a { color: var(--pink); }

.woocommerce-terms-and-conditions-wrapper {
  font-size: 12px; color: var(--gray); margin-bottom: 12px;
  display: flex; align-items: flex-start; gap: 8px;
}
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { accent-color: var(--pink); flex-shrink: 0; margin-top: 2px; }

/* Avisos de error/éxito del checkout */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info { border-radius: 2px; font-size: 13px; margin-bottom: 20px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .pl-checkout-wrap { grid-template-columns: 1fr; gap: 32px; }
  .pl-checkout-side-inner { position: static; }
}

@media (max-width: 640px) {
  .pl-checkout-page { padding: 24px 20px 60px; }
  .pl-co-fields--2col { grid-template-columns: 1fr; gap: 0; }
  .pl-co-section-title { font-size: 19px; }
  .pl-checkout-side-inner { padding: 20px 16px 16px; }
}


/* ════════════════════════════════════════════════════════════
   PÁGINA DE CONFIRMACIÓN DE PEDIDO  (cf-*)
   ════════════════════════════════════════════════════════════ */

@keyframes cfFadeUp    { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes cfScaleIn   { from { opacity:0; transform:scale(.7); }        to { opacity:1; transform:scale(1); } }
@keyframes cfDrawCheck { from { stroke-dashoffset:36; }                   to { stroke-dashoffset:0; } }
@keyframes cfPulse     { 0%,100% { box-shadow:0 0 0 0 rgba(74,124,42,.3); } 60% { box-shadow:0 0 0 14px rgba(74,124,42,0); } }
@keyframes cfTrackPulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }

.woocommerce-order-received .cf-page, .cf-page {
  max-width:760px; margin:0 auto; padding:52px 32px 100px;
}

/* ── Hero ── */
.cf-hero { text-align:center; margin-bottom:56px; animation:cfFadeUp .55s ease both; }
.cf-check-ring {
  width:80px; height:80px; border-radius:50%;
  background:rgba(74,124,42,.08); border:1.5px solid rgba(74,124,42,.18);
  display:grid; place-items:center; margin:0 auto 28px;
  animation:cfScaleIn .45s cubic-bezier(.34,1.56,.64,1) both, cfPulse 2.4s ease 1s infinite;
}
.cf-check-path { animation:cfDrawCheck .4s ease .35s forwards; }
.cf-hero-eyebrow { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#4a7c2a; margin-bottom:12px; }
.cf-hero-title { font-family:var(--serif); font-size:clamp(44px,6vw,72px); font-weight:500; line-height:1.02; margin-bottom:14px; color:var(--ink); }
.cf-hero-title em { font-style:italic; color:var(--pink); }
.cf-hero-sub { font-size:14px; color:var(--ink-soft); line-height:1.85; max-width:480px; margin:0 auto 26px; }
.cf-order-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); padding:9px 18px; font-size:12px; color:var(--ink-soft);
}
.cf-order-badge strong { font-family:var(--serif); font-size:15px; color:var(--ink); font-weight:600; }

/* ── Email notice ── */
.cf-email-notice { text-align:center; margin-bottom:48px; animation:cfFadeUp .55s ease .35s both; }
.cf-email-inner {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(206,16,89,.07); border:1px solid rgba(206,16,89,.14);
  padding:11px 20px; font-size:12.5px; color:var(--ink-soft);
}
.cf-email-inner strong { color:var(--ink); }

/* ── Section titles ── */
.cf-sec-title {
  font-family:var(--serif); font-size:26px; font-weight:500;
  margin-bottom:18px; display:flex; align-items:center; gap:10px; color:var(--ink);
}
.cf-sec-title::before { content:""; display:block; width:3px; height:22px; background:var(--pink); flex-shrink:0; }

/* ── Order card ── */
.cf-card { background:#fff; border:1px solid var(--line-soft); margin-bottom:36px; animation:cfFadeUp .55s ease .1s both; }
.cf-card-hd { padding:16px 22px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; }
.cf-card-hd-title { font-family:var(--serif); font-size:20px; font-weight:500; }
/* Sello del resumen. El color dice el estado sin tener que leerlo: verde
   cobrado, ámbar pendiente, gris para el que paga al recibir. */
.cf-card-hd-badge {
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
  color:#4a7c2a; background:rgba(74,124,42,.08); border:1px solid rgba(74,124,42,.18);
}
.cf-card-hd-badge.is-pendiente {
  color:#9a6b00; background:rgba(196,140,0,.10); border-color:rgba(196,140,0,.28);
}
.cf-card-hd-badge.is-contraentrega {
  color:var(--ink-soft); background:var(--paper-2); border-color:var(--line);
}

.cf-item { display:grid; grid-template-columns:58px 1fr auto; gap:14px; align-items:center; padding:16px 22px; border-bottom:1px solid var(--line-soft); }
.cf-item:last-of-type { border-bottom:none; }
.cf-item-thumb { width:58px; height:58px; background:var(--paper); display:flex; align-items:center; justify-content:center; border:1px solid var(--line-soft); flex-shrink:0; overflow:hidden; }
.cf-item-img { width:100%; height:100%; object-fit:cover; display:block; }
.cf-item-name  { font-family:var(--serif); font-size:18px; font-weight:500; line-height:1.15; color:var(--ink); }
.cf-item-meta  { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); margin-top:2px; }
.cf-item-qty   { font-size:11px; color:var(--gray); margin-top:6px; letter-spacing:.04em; }
.cf-item-price { font-family:var(--serif); font-size:19px; font-weight:600; white-space:nowrap; color:var(--ink); }

.cf-totals { padding:14px 22px 18px; }
.cf-trow { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; font-size:13px; color:var(--ink-soft); border-bottom:1px solid var(--line-soft); }
.cf-trow:last-child { border-bottom:none; }
.cf-trow--total { padding-top:14px; margin-top:6px; font-size:14px; color:var(--ink); font-weight:500; }
.cf-tv       { font-family:var(--serif); font-size:14px; color:var(--ink); }
.cf-tv--big  { font-family:var(--serif); font-size:26px; font-weight:600; color:var(--ink); }
.cf-tv--free { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#4a7c2a; }
.cf-tv--disc { font-family:var(--serif); font-size:14px; color:#4a7c2a; }

.cf-details-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line-soft); }
.cf-detail-cell { padding:16px 22px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.cf-detail-cell:nth-child(even) { border-right:none; }
.cf-detail-cell:nth-last-child(-n+2) { border-bottom:none; }
.cf-detail-lbl { font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); margin-bottom:5px; }
.cf-detail-val { font-size:13.5px; color:var(--ink); line-height:1.5; }
.cf-detail-val strong { font-weight:500; }
.cf-detail-val.eta { color:var(--pink); font-family:var(--serif); font-size:16px; text-transform:capitalize; font-weight:500; }
.cf-payment-notice { padding:14px 22px; font-size:13px; color:var(--ink-soft); line-height:1.6; border-top:1px solid var(--line-soft); background:rgba(206,16,89,.04); }
.cf-payment-notice p { margin:0; }

/* ── Timeline ── */
.cf-timeline-wrap { margin-bottom:36px; animation:cfFadeUp .55s ease .2s both; }
.cf-timeline { background:#fff; border:1px solid var(--line-soft); padding:28px 32px 32px; }
.cf-tl-steps { display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.cf-tl-steps::before { content:""; position:absolute; top:19px; left:calc(12.5% + 2px); right:calc(12.5% + 2px); height:1px; background:var(--line); }
.cf-tl-step { display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; }
.cf-tl-dot { width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:#fff; display:grid; place-items:center; position:relative; z-index:1; color:var(--gray); transition:.3s; }
.cf-tl-step.done   .cf-tl-dot { background:var(--ink); border-color:var(--ink); color:#fff; }
.cf-tl-step.active .cf-tl-dot { background:var(--pink); border-color:var(--pink); color:#fff; animation:cfTrackPulse 1.8s ease infinite; }
.cf-tl-label { font-size:10px; letter-spacing:.1em; text-transform:uppercase; text-align:center; line-height:1.45; color:var(--gray); }
.cf-tl-step.done   .cf-tl-label { color:var(--ink-soft); }
.cf-tl-step.active .cf-tl-label { color:var(--pink); font-weight:500; }
.cf-tl-date { font-size:11px; color:var(--gray); text-align:center; margin-top:-4px; }
.cf-tl-step.active .cf-tl-date { color:var(--pink); }

/* ── ¿Qué sigue? ── */
.cf-next-wrap { margin-bottom:36px; animation:cfFadeUp .55s ease .3s both; }
.cf-next-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line-soft); }
.cf-next-item { background:#fff; padding:24px 22px; display:flex; flex-direction:column; gap:12px; }
.cf-next-ico { width:36px; height:36px; display:grid; place-items:center; background:var(--paper-2); color:var(--gray); }
.cf-next-heading { font-family:var(--serif); font-size:18px; font-weight:500; line-height:1.2; color:var(--ink); }
.cf-next-body { font-size:12.5px; color:var(--ink-soft); line-height:1.7; }
.cf-next-body strong { font-weight:600; color:var(--ink); }
.cf-next-link { color:#bf2233; border-bottom:1px solid rgba(191,34,51,.35); transition:border-color .18s; }
.cf-next-link:hover { border-bottom-color:#bf2233; }

/* ── Actions ── */
.cf-actions { display:flex; gap:12px; justify-content:center; animation:cfFadeUp .55s ease .4s both; }
.cf-btn-ghost { padding:14px 32px; background:none; color:var(--ink-soft); border:1px solid var(--line); font-size:11px; letter-spacing:.2em; text-transform:uppercase; transition:.2s; display:inline-block; font-family:var(--sans); }
.cf-btn-ghost:hover { border-color:var(--gray); color:var(--ink); }
.cf-btn-solid { padding:14px 32px; background:var(--pink); color:#fff; border:none; font-size:11px; letter-spacing:.2em; text-transform:uppercase; transition:.2s; display:inline-block; font-family:var(--sans); }
.cf-btn-solid:hover { background:var(--pink-deep); }

@media(max-width:640px) {
  .woocommerce-order-received .cf-page, .cf-page { padding:36px 20px 80px; }
  .cf-hero-title { font-size:40px; }
  .cf-details-grid { grid-template-columns:1fr; }
  .cf-detail-cell:nth-child(even) { border-right:none; }
  .cf-detail-cell:nth-last-child(-n+2) { border-bottom:1px solid var(--line-soft); }
  .cf-detail-cell:last-child { border-bottom:none; }
  .cf-next-grid { grid-template-columns:1fr; }
  .cf-tl-steps { grid-template-columns:1fr 1fr; gap:20px; }
  .cf-tl-steps::before { display:none; }
  .cf-actions { flex-direction:column; align-items:stretch; }
  .cf-btn-ghost, .cf-btn-solid { text-align:center; }
  .cf-item { grid-template-columns:46px 1fr auto; }
}

/* ============================================================
   "Los más elegidos" — ajustes finales
   Van al final del archivo a propósito: así ganan a las reglas
   de rejilla de los bloques responsive anteriores.
   ============================================================ */

/* 1 · Contenido alineado entre las tarjetas de una misma fila.
      Se reserva altura fija para nombre, estrellas y ficha, y el pie ya
      va empujado abajo con margin-top:auto, así los botones cuadran. */
.pl-elegidos .pl-card-top    { min-height: 14px; }
.pl-elegidos .pl-card-name   {
  line-height: 1.15; min-height: 2.3em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pl-elegidos .pl-stars       { min-height: 18px; }
.pl-elegidos .pl-card-specs  { min-height: 25px; align-content: flex-start; }
.pl-elegidos .pl-inspired    { min-height: 0; }
.pl-elegidos .pl-card-foot   { margin-top: auto; }

/* 3 · Carrusel en todos los tamaños. El JS reparte 4 tarjetas por página en
      escritorio y tablet, y 2 en móvil, escribiendo los anchos en línea; aquí
      solo se garantiza que la pista no se envuelva y que el recorte esconda
      lo que sobra. */
.pl-elegidos .pl-grid          { flex-wrap: nowrap; }
.pl-elegidos .pl-carousel-clip { overflow: hidden; }

/* Móvil: tarjetas más compactas para que quepan dos con holgura. */
@media (max-width: 640px) {
  .pl-elegidos .pl-carousel-clip { overflow-x: hidden; scroll-snap-type: none; }
  .pl-elegidos .pl-grid          { flex-wrap: nowrap; justify-content: flex-start; gap: 22px; }
  .pl-elegidos .pl-card-name     { font-size: 18px; }
  .pl-elegidos .pl-card-body     { padding: 14px 14px 16px; }
  .pl-elegidos .pl-spec          { font-size: 9px; padding: 3px 6px; }
  .pl-elegidos .pl-carousel-arr  { width: 34px; height: 34px; }
}

/* ── Franja de ventajas antes del pie ─────────────────────
   Fondo negro, separadores rojos muy tenues y una línea roja
   fina arriba que la despega de la sección anterior.        */
.pl-perks {
  position: relative;
  background: #1b1917; /* mismo negro del pie */
  padding: 22px 40px;
}
/* Al compartir color con el pie, las dos líneas rojas son las que marcan
   dónde empieza y dónde acaba la franja. Se difuminan en los extremos, igual
   que los separadores verticales entre iconos. */
.pl-perks::before,
.pl-perks::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right,
              rgba(211,16,33,.12), rgba(211,16,33,.85), rgba(211,16,33,.12));
  pointer-events: none;
}
.pl-perks::before { top: 0; }
.pl-perks::after  { bottom: 0; }
.pl-perks-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1180px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.pl-perk {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 6px 18px; text-align: center;
  color: #e6e0db; font-size: 13px; letter-spacing: .04em;
}
/* El separador va en los tres primeros: una línea que se desvanece
   arriba y abajo, para que no parezca un borde duro. */
.pl-perk:not(:last-child) {
  border-right: 1px solid transparent;
  border-image: linear-gradient(to bottom, rgba(211,16,33,.15), rgba(211,16,33,.85), rgba(211,16,33,.15)) 1;
}
.pl-perk-ico { display: flex; flex-shrink: 0; color: #d31021; }
.pl-perk-ico svg { width: 20px; height: 20px; display: block; }
.pl-perk-txt { white-space: nowrap; }

@media (max-width: 900px) {
  .pl-perks      { padding: 18px 20px; }
  .pl-perks-list { grid-template-columns: repeat(2, 1fr); gap: 14px 0; }
  /* Con dos columnas solo separa la de la izquierda de cada fila */
  .pl-perk:not(:last-child) { border-image: none; border-right: none; }
  .pl-perk:nth-child(odd) {
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom, rgba(211,16,33,.15), rgba(211,16,33,.85), rgba(211,16,33,.15)) 1;
  }
  .pl-perk       { font-size: 12px; padding: 4px 10px; gap: 8px; }
  .pl-perk-txt   { white-space: normal; }
}
@media (max-width: 400px) {
  .pl-perk     { font-size: 11px; gap: 6px; }
  .pl-perk-ico svg { width: 17px; height: 17px; }
}

/* ── Indicador de avance de lectura ───────────────────────
   Franja fina fija en el borde superior, por encima de la
   barra negra de avisos. Se llena de izquierda a derecha
   conforme se baja por la página. El z-index la deja sobre
   el encabezado pegajoso (40) pero bajo los paneles (200+),
   para que un cajón abierto la tape como corresponde.      */
.pl-readbar {
  position: fixed; top: 0; left: 0; right: 0;
  width: 100%; height: 3px;
  background: rgba(255,255,255,.14);
  z-index: 110; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
}
.pl-readbar.is-on { opacity: 1; }
.pl-readbar-fill {
  display: block; width: 0; height: 100%;
  background: linear-gradient(to right, #d31021, #ff5a52);
  box-shadow: 0 0 10px -1px rgba(211,16,33,.75);
}

@media (prefers-reduced-motion: reduce) {
  .pl-readbar { transition: none; }
}

/* ── Banda roja que cierra la sección de garantía ─────────
   Ocupa el ancho completo de la pantalla: los márgenes
   negativos anulan el relleno lateral e inferior de
   .pl-guar-section, así toca los tres bordes.
   La animación es automática: un destello la recorre y el
   rojo respira. No uso transform: scale porque en un
   elemento de ancho total desbordaría la pantalla.         */
.pl-guar-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 56px -40px -84px; padding: 26px 24px;
  background: linear-gradient(135deg, #b60d1b 0%, #d31021 45%, #ff3b30 100%);
  color: #fff; text-decoration: none; text-align: center;
  font-size: 15px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
  animation: plCtaPulso 2.8s ease-in-out infinite;
  transition: filter .25s ease;
}
.pl-guar-cta:hover,
.pl-guar-cta:focus-visible { filter: brightness(1.14); color: #fff; }
.pl-guar-cta:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

@keyframes plCtaPulso {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.13); }
}
/* Destello diagonal. El z-index negativo lo deja sobre el fondo
   de la banda pero por debajo del texto. */
.pl-guar-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 22%;
  transform: skewX(-20deg); pointer-events: none; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  animation: plCtaBrillo 2.8s ease-in-out infinite;
}
@keyframes plCtaBrillo {
  0%, 45%   { left: -35%; }
  90%, 100% { left: 113%; }
}
/* Filos superior e inferior para despegarla del negro. */
.pl-guar-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255,255,255,.28); pointer-events: none;
}
.pl-guar-cta-arrow { flex-shrink: 0; animation: plCtaFlecha 2.8s ease-in-out infinite; }
@keyframes plCtaFlecha {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

@media (max-width: 768px) {
  .pl-guar-cta { margin: 48px -28px -60px; padding: 23px 20px; font-size: 13.5px; }
}
@media (max-width: 560px) {
  .pl-guar-cta { margin: 40px -20px -52px; padding: 21px 16px;
                 font-size: 12.5px; letter-spacing: .12em; gap: 9px; }
  .pl-guar-cta-arrow { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-guar-cta,
  .pl-guar-cta::after,
  .pl-guar-cta-arrow { animation: none; }
}

/* ── Test "Descubre tu fragancia" ─────────────────────────
   El hueco sobre el título no lo ponía solo esta sección: la
   mayor parte venía del relleno inferior de la sección de
   arriba (84 px). Se recorta esa también, pero únicamente
   cuando va seguida de las familias, para no alterar el resto
   de la página.                                             */
.pl-section:has(+ .pl-fam-section) { padding-bottom: 28px; }
.pl-fam-section { padding-top: 26px; padding-bottom: 40px; }

/* Botón de ancho completo. Al ser hermano de la sección (no hijo)
   ya ocupa la pantalla entera sin recurrir a 100vw, que con la
   barra de desplazamiento provocaría desbordes.
   El margen inferior lo separa del banner oscuro que viene
   después: sin él los dos negros se fundían en uno solo. */
.pl-quiz-open {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 13px;
  width: 100%; margin: 0 0 48px; padding: 26px 24px;
  border: 0; border-top: 1px solid rgba(211,16,33,.4); border-bottom: 1px solid rgba(211,16,33,.4);
  background: #161514; color: #f6f1ed; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  transition: color .25s ease;
}
/* Un rojo tenue late por detrás del texto, para que el botón se
   note sin necesidad de pasar el cursor. */
.pl-quiz-open::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 140% at 50% 50%, rgba(211,16,33,.45), transparent 70%);
  animation: plQuizLatido 3s ease-in-out infinite;
}
@keyframes plQuizLatido {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
/* Destello que recorre la banda. */
.pl-quiz-open::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 20%;
  transform: skewX(-20deg); z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: plQuizBrillo 3s ease-in-out infinite;
}
@keyframes plQuizBrillo {
  0%, 45%   { left: -35%; }
  90%, 100% { left: 115%; }
}
.pl-quiz-open:hover { color: #fff; }
.pl-quiz-open:focus-visible { outline: 2px solid #ff2d3f; outline-offset: -6px; }
.pl-quiz-open-ico   { color: #ff2d3f; font-size: 13px; text-shadow: 0 0 9px rgba(211,16,33,.8); }
.pl-quiz-open-arrow { flex-shrink: 0; animation: plQuizFlecha 3s ease-in-out infinite; }
@keyframes plQuizFlecha {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* ── Ventana del test ─────────────────────────────────────
   Va por encima de todo lo demás del tema (los paneles del
   carrito llegan a 300).                                   */
.pl-quiz { position: fixed; inset: 0; z-index: 9500; display: flex;
           align-items: center; justify-content: center; padding: 24px; }
.pl-quiz[hidden] { display: none; }
.pl-quiz-scrim { position: absolute; inset: 0; background: rgba(12,11,10,.72);
                 backdrop-filter: blur(3px); animation: plQuizFade .25s ease; }
@keyframes plQuizFade { from { opacity: 0; } to { opacity: 1; } }

.pl-quiz-box {
  position: relative; z-index: 1;
  width: min(660px, 100%); max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--paper); border-radius: 4px;
  border-top: 3px solid #d31021;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
  padding: 40px 40px 28px;
  animation: plQuizEntra .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes plQuizEntra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pl-quiz-x {
  position: absolute; top: 14px; right: 14px;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink);
  transition: .2s;
}
.pl-quiz-x:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.pl-quiz-head  { text-align: center; padding-right: 30px; }
.pl-quiz-title { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.15; margin: 0; }
.pl-quiz-sub   { margin: 12px auto 0; max-width: 46ch; font-size: 14.5px; line-height: 1.65; color: var(--gray); }
.pl-quiz-sub strong { color: var(--ink); font-weight: 600; }

.pl-quiz-bar      { height: 3px; margin: 26px 0 10px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pl-quiz-bar-fill { display: block; height: 100%; width: 25%; border-radius: 3px;
                    background: linear-gradient(to right, #d31021, #ff5a52); transition: width .3s ease; }
.pl-quiz-count    { margin: 0 0 22px; font-size: 11px; letter-spacing: .14em;
                    text-transform: uppercase; color: var(--gray); text-align: center; }

.pl-quiz-step        { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.pl-quiz-step.is-on  { display: block; animation: plQuizPaso .28s ease; }
@keyframes plQuizPaso { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.pl-quiz-q    { font-family: var(--serif); font-size: 23px; font-weight: 500; text-align: center; padding: 0; width: 100%; }
.pl-quiz-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--gray); text-align: center; }

.pl-quiz-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 22px; }
.pl-quiz-opts--largas .pl-quiz-opt { flex: 0 0 calc(50% - 5px); justify-content: center; }

.pl-quiz-opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 17px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink);
  transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.pl-quiz-opt:hover { border-color: rgba(211,16,33,.55); transform: translateY(-1px); }
/* El input real se oculta pero sigue siendo enfocable con el teclado. */
.pl-quiz-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pl-quiz-opt.is-sel {
  background: #d31021; border-color: #d31021; color: #fff;
  box-shadow: 0 8px 22px -12px rgba(211,16,33,.9);
}
.pl-quiz-opt.is-foco { outline: 2px solid #d31021; outline-offset: 2px; }
.pl-quiz-opt-ico { font-size: 15px; line-height: 1; }

.pl-quiz-nav { display: flex; align-items: center; justify-content: space-between;
               gap: 12px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.pl-quiz-prev, .pl-quiz-next, .pl-quiz-go {
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  padding: 13px 26px; border-radius: 999px; transition: .2s;
}
.pl-quiz-prev { background: transparent; border: 1px solid var(--line); color: var(--gray); }
.pl-quiz-prev:hover { border-color: var(--ink); color: var(--ink); }
.pl-quiz-prev[hidden] { display: none; }
.pl-quiz-next, .pl-quiz-go { margin-left: auto; border: 0; background: var(--ink); color: #fff; }
.pl-quiz-next:hover { background: #d31021; }
.pl-quiz-go { background: #d31021; }
.pl-quiz-go:hover { background: #b60d1b; }
.pl-quiz-next[hidden], .pl-quiz-go[hidden] { display: none; }
/* Sin respuesta no se avanza: el botón se apaga en vez de desaparecer,
   para que no dé la sensación de que la ventana se rompió. */
.pl-quiz-next:disabled, .pl-quiz-go:disabled { opacity: .35; cursor: not-allowed; }
.pl-quiz-next:disabled:hover { background: var(--ink); }
.pl-quiz-go:disabled:hover { background: #d31021; }

@media (max-width: 640px) {
  .pl-quiz            { padding: 0; align-items: flex-end; }
  .pl-quiz-box        { width: 100%; max-height: 92vh; border-radius: 4px 4px 0 0; padding: 32px 22px 22px; }
  .pl-quiz-title      { font-size: 24px; }
  .pl-quiz-q          { font-size: 20px; }
  .pl-quiz-opts--largas .pl-quiz-opt { flex: 1 1 100%; }
  .pl-quiz-open       { margin-bottom: 34px; padding: 22px 18px; font-size: 12.5px; letter-spacing: .12em; gap: 10px; }
  .pl-quiz-open-arrow { width: 16px; height: 16px; }
  .pl-quiz-prev, .pl-quiz-next, .pl-quiz-go { padding: 12px 18px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-quiz-open, .pl-quiz-open::before, .pl-quiz-open::after,
  .pl-quiz-open-arrow, .pl-quiz-box, .pl-quiz-step.is-on, .pl-quiz-scrim { animation: none; }
}

/* ── Página de resultado del test ─────────────────────────── */
.pl-quizres-main  { background: var(--paper); }
.pl-quizres-hero  { max-width: var(--maxw); margin: 0 auto; padding: 64px 40px 34px; text-align: center; }
.pl-quizres-title { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.1; margin: 10px 0 0; }
.pl-quizres-sub   { margin: 14px auto 0; max-width: 56ch; font-size: 15px; line-height: 1.7; color: var(--gray); }
.pl-quizres-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
                    gap: 8px; margin: 22px 0 0; padding: 0; }
.pl-quizres-chip  { padding: 7px 14px; border-radius: 999px; background: #fff;
                    border: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }

.pl-quizres-grid-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px 20px; }
/* Las columnas se calculan solas con un ancho mínimo cómodo: así el
   nombre del perfume y sus datos siempre caben, y el número de
   columnas se ajusta a la pantalla sin listas de excepciones. */
.pl-quizres-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 18px; }
/* .pl-card viene de los carruseles con un ancho de un cuarto de fila.
   Dentro de esta rejilla eso la encogía a 39 px, así que aquí ocupa
   toda su celda. Mismo arreglo que usa .pl-archive-grid. */
.pl-quizres-grid .pl-card { flex: none; max-width: none; width: 100%; }
/* Cada tarjeta entra escalonada, de izquierda a derecha. El display:flex
   hace que la tarjeta llene la celda, de modo que todas las de una misma
   fila acaban a la misma altura aunque el nombre ocupe más líneas. */
.pl-quizres-item { position: relative; display: flex;
                   animation: plQuizresEntra .45s ease both;
                   animation-delay: calc(var(--i, 0) * .09s); }
@keyframes plQuizresEntra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* El número de orden deja claro cuál encaja mejor. */
.pl-quizres-rank {
  position: absolute; top: -10px; left: -10px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #d31021; color: #fff; font-size: 13px; font-weight: 700;
  box-shadow: 0 8px 20px -10px rgba(211,16,33,.9);
}

.pl-quizres-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 34px 40px 72px; }
.pl-quizres-btn {
  display: inline-flex; align-items: center; padding: 14px 30px; border-radius: 999px;
  background: #d31021; color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: .2s;
}
.pl-quizres-btn:hover { background: #b60d1b; color: #fff; }
.pl-quizres-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.pl-quizres-btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

@media (max-width: 768px) {
  .pl-quizres-hero      { padding: 48px 28px 28px; }
  .pl-quizres-title     { font-size: 30px; }
  .pl-quizres-grid-wrap { padding: 0 28px 20px; }
  .pl-quizres-grid      { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pl-quizres-cta       { padding: 28px 28px 56px; }
}
@media (max-width: 560px) {
  .pl-quizres-hero      { padding: 40px 20px 24px; }
  .pl-quizres-title     { font-size: 26px; }
  .pl-quizres-grid-wrap { padding: 0 20px 16px; }
  .pl-quizres-rank      { width: 26px; height: 26px; font-size: 12px; top: -8px; left: -8px; }
  .pl-quizres-btn       { padding: 13px 22px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-quizres-item { animation: none; }
}

/* ── Tarjeta de entrega (producto) ───────────────────────────────────────
   Va en crema, no en blanco: así se distingue de la tarjeta de compra sin
   pelearse con ella. Es información de apoyo, no la protagonista. */
.pl-product-delivery { padding: 0; margin-top: 0; }

.pl-entrega {
  margin-top: 0; background: var(--paper-2); border-radius: 16px;
  padding: 18px 20px 16px;
}

.pl-entrega-head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 18px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gray);
}
.pl-entrega-head svg { width: 16px; height: 16px; flex: none; color: #bf2233; }

.pl-entrega-line {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; width: 100%;
}
/* La pista une los centros de los tres círculos: de un sexto a
   cinco sextos del ancho, que es donde caen el primero y el último. */
.pl-entrega-track {
  position: absolute; top: 17px; left: 16.66%; right: 16.66%;
  height: 2px; border-radius: 2px; background: var(--line);
  overflow: hidden; z-index: 0;
}
.pl-entrega-fill {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, #d31021, #ff5a52);
  transition: width .7s cubic-bezier(.4, 0, .2, 1);
}

.pl-entrega-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px; padding: 0 6px;
}
.pl-entrega-dot {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: #fff; border: 2px solid var(--line); color: var(--gray);
  transition: background .35s, border-color .35s, color .35s, box-shadow .35s;
}
.pl-entrega-dot svg { width: 17px; height: 17px; }
.pl-entrega-step.is-on .pl-entrega-dot {
  background: #d31021; border-color: #d31021; color: #fff;
}
/* Solo el paso que va marcando el recorrido lleva el halo. */
.pl-entrega-step.is-ahora .pl-entrega-dot {
  animation: plEntregaPulso 2s ease infinite;
}
@keyframes plEntregaPulso {
  0%, 100% { box-shadow: 0 0 0 4px rgba(211, 16, 33, .12); }
  50%      { box-shadow: 0 0 0 8px rgba(211, 16, 33, .05); }
}

.pl-entrega-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray); line-height: 1.25; font-weight: 500; transition: color .35s;
}
.pl-entrega-step.is-on .pl-entrega-label { color: var(--ink-soft); }
.pl-entrega-fecha {
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  line-height: 1.25; color: var(--ink); transition: color .35s;
}
.pl-entrega-step.is-on .pl-entrega-fecha { color: #d31021; }
.pl-entrega-nota {
  font-size: 10.5px; line-height: 1.4; color: var(--gray);
  letter-spacing: .01em; max-width: 20ch;
}

/* Aviso de Bogotá, separado del resto por un filete tenue. */
.pl-entrega-aviso {
  display: flex; align-items: flex-start; justify-content: center; gap: 7px;
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.5; color: var(--gray); text-align: left;
}
.pl-entrega-aviso svg    { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; color: #d31021; }
.pl-entrega-aviso strong { color: var(--ink); font-weight: 600; }

/* Las tres garantías cierran la tarjeta: sin recuadro propio, solo
   el icono rojo y el texto, separados por filetes muy tenues. */
.pl-entrega-gar {
  list-style: none; margin: 14px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.pl-entrega-gar-item {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; min-width: 0;
  background: none; border: 0; border-radius: 0; transform: none;
}
.pl-entrega-gar-item + .pl-entrega-gar-item { border-left: 1px solid var(--line); }
.pl-entrega-gar-ico     { display: flex; flex-shrink: 0; color: #d31021; }
.pl-entrega-gar-ico svg { width: 17px; height: 17px; display: block; }
.pl-entrega-gar-txt     { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-entrega-gar-txt strong { font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.pl-entrega-gar-txt em     { font-size: 9.5px; font-style: normal; color: var(--gray); line-height: 1.25; }

@media (max-width: 560px) {
  .pl-compra        { padding: 17px 17px 16px; border-radius: 14px; }
  .pl-entrega       { padding: 16px 16px 14px; border-radius: 14px; }
  .pl-entrega-head  { font-size: 9.5px; letter-spacing: .16em; margin-bottom: 15px; }
  .pl-entrega-dot   { width: 32px; height: 32px; }
  .pl-entrega-dot svg { width: 15px; height: 15px; }
  .pl-entrega-track { top: 15px; }
  .pl-entrega-step  { padding: 0 3px; }
  .pl-entrega-label { font-size: 9px; letter-spacing: .08em; }
  .pl-entrega-fecha { font-size: 14px; }
  .pl-entrega-nota  { font-size: 9.5px; max-width: 16ch; }
  .pl-entrega-aviso { font-size: 11.5px; margin-top: 15px; padding-top: 12px; }
  .pl-entrega-gar-item    { padding: 0 6px; gap: 6px; }
  .pl-entrega-gar-ico svg { width: 15px; height: 15px; }
  .pl-entrega-gar-txt strong { font-size: 10px; }
  .pl-entrega-gar-txt em     { font-size: 9px; }
}
/* Muy estrechas: el icono encima del texto para que quepan los tres. */
@media (max-width: 380px) {
  .pl-entrega-gar-item { flex-direction: column; text-align: center; gap: 4px; padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-entrega-step.is-ahora .pl-entrega-dot { animation: none; }
  .pl-entrega-fill { transition: none; }
}

/* ── Botón de finalizar compra ─────────────────────────────
   Rojo de marca lleno: es la acción principal del carrito y
   antes se confundía con los botones secundarios, que llevan
   el mismo contorno negro.                                  */
#pl-drawer-checkout {
  background: #d31021; border-color: #d31021; color: #fff;
  transition: background .22s, border-color .22s, color .22s;
}
@media (hover: hover) {
  #pl-drawer-checkout:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
}
#pl-drawer-checkout:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── "Te puede encantar también" ───────────────────────────
   Dos sugerencias de la misma línea, entre los productos del
   carrito y el pie. Se mantiene discreto para no competir con
   el botón de pagar.                                        */
/* El único bloque blanco del cajón: así las sugerencias se despegan del
   crema del resto y se leen como algo aparte de lo que ya se compró. */
.pl-sug { flex: none; padding: 18px 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.pl-sug:empty { display: none; padding: 0; border: 0; }

.pl-sug-head  { margin-bottom: 13px; }
.pl-sug-title {
  margin: 0; font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #d31021;
}
.pl-sug-sub { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--gray); }

.pl-sug-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
/* Cada sugerencia también en su tarjeta, pero al revés que las del carrito:
   aquí el fondo del bloque es blanco, así que la tarjeta va en crema. Y sin
   filo rojo: las sugerencias son secundarias y no deben competir con lo que
   el cliente ya eligió ni con el botón de pagar. */
.pl-sug-item {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 10px 11px; border-radius: 4px;
  background: var(--paper-2); border: 1px solid var(--line-soft);
  transition: border-color .22s, background .22s;
}
.pl-sug-item:hover { border-color: rgba(211,16,33,.35); background: var(--paper); }

.pl-sug-img     { flex-shrink: 0; width: 52px; height: 52px; display: block;
                  border: 1px solid var(--line-soft); background: #fff; overflow: hidden; }
.pl-sug-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pl-sug-info   { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pl-sug-nombre {
  font-family: var(--serif); font-size: 14px; line-height: 1.25; color: var(--ink);
  text-decoration: none;
  /* Dos líneas como mucho: los nombres del catálogo son largos y si no,
     una sola sugerencia se comería el alto del bloque. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pl-sug-nombre:hover { color: #d31021; }
.pl-sug-precio       { font-size: 11.5px; color: var(--gray); }
.pl-sug-precio del   { opacity: .6; margin-right: 4px; }
.pl-sug-precio ins   { text-decoration: none; color: var(--ink); font-weight: 600; }

/* Negro por defecto y rojo al pasar el cursor, al revés que el de pagar. */
.pl-sug-btn {
  flex-shrink: 0; align-self: center;
  padding: 8px 14px; border-radius: 1px;
  background: var(--ink); border: 1px solid var(--ink); color: #fff;
  font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .22s, border-color .22s, color .22s;
}
@media (hover: hover) {
  .pl-sug-btn:hover { background: #d31021; border-color: #d31021; color: #fff; }
}
.pl-sug-btn:focus-visible { outline: 2px solid #d31021; outline-offset: 2px; }
/* Estados que pinta WooCommerce mientras añade al carrito. */
.pl-sug-btn.loading { opacity: .6; pointer-events: none; }
.pl-sug-btn.added   { background: #d31021; border-color: #d31021; }
/* El enlace "Ver carrito" que WooCommerce añade detrás del botón sobra aquí. */
.pl-sug-item .added_to_cart { display: none; }

@media (max-width: 420px) {
  .pl-sug        { padding: 15px 16px; }
  .pl-sug-img    { width: 46px; height: 46px; }
  .pl-sug-nombre { font-size: 13px; }
  .pl-sug-btn    { padding: 7px 11px; font-size: 9.5px; letter-spacing: .1em; }
}


/* ── Ficha olfativa del producto ───────────────────────────
   Cuatro recuadros blancos sobre fondo blanco se leían planos.
   Ahora la sección va sobre un fondo cálido, la pirámide de
   notas ocupa una tarjeta oscura que ancla el bloque, y los
   tres datos de apoyo quedan en tarjetas claras a su lado.   */
.pl-ficha {
  background: var(--paper-2);
  border-top: 1px solid var(--line-soft);
  padding: 62px 0 58px;
}
.pl-ficha-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* Ambos bloques cuelgan dentro de .pl-product-main, que lleva relleno lateral.
   Se sacan de él para que el fondo y los filos rojos lleguen a los bordes de
   la pantalla, igual que hacen la sección de garantía y la de testimonios. */
.pl-product-main .pl-ficha,
.pl-product-main .pl-marca,
.pl-product-main .pl-verfrag {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: auto;
}

.pl-ficha-head    { text-align: center; margin-bottom: 32px; }
.pl-ficha-eyebrow {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: #d31021;
}
.pl-ficha-title {
  font-family: var(--serif); font-size: 36px; font-weight: 500;
  line-height: 1.12; margin: 10px 0 0; color: var(--ink);
}
.pl-ficha-title em { font-style: italic; color: #d31021; }
.pl-ficha-sub {
  margin: 10px auto 0; max-width: 52ch;
  font-size: 16px; line-height: 1.6; color: var(--gray);
}

/* Familias y concentración, justo bajo el título. */
.pl-ficha-fams {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.pl-ficha-fam {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink); text-decoration: none;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
a.pl-ficha-fam:hover {
  border-color: #d31021; color: #d31021;
  box-shadow: 0 8px 20px -14px rgba(211,16,33,.9);
}

.pl-ficha-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: stretch; }

/* ── Tarjeta oscura: la pirámide de notas ─────────────────── */
.pl-ficha-notas-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 32px 32px 30px; border-radius: 4px;
  background: #161514; color: #f6f1ed;
  box-shadow: 0 30px 60px -40px rgba(22,21,20,.9);
}
/* Halo rojo muy tenue en la esquina, para que el negro no quede muerto. */
.pl-ficha-notas-card::after {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(211,16,33,.35), transparent 68%);
}
.pl-ficha-notas-card .pl-ficha-card-title { color: #fff; font-size: 20px; }
.pl-ficha-card-lead { margin: 5px 0 22px; font-size: 13px; color: rgba(246,241,237,.6); }

.pl-ficha-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: rgba(211,16,33,.10); color: #d31021;
}
.pl-ficha-ico svg { width: 21px; height: 21px; display: block; }
.pl-ficha-ico--dark { background: rgba(255,255,255,.07); color: #ff4d3d; margin-bottom: 16px; }

/* Las tres fases, numeradas y unidas por una línea. */
.pl-ficha-notas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; position: relative; }
.pl-ficha-nota  { position: relative; padding-left: 40px; }
.pl-ficha-nota-n {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #d31021; color: #fff; font-size: 12px; font-weight: 700;
}
/* Línea que baja de un número al siguiente. */
.pl-ficha-nota:not(:last-child)::before {
  content: ""; position: absolute; left: 12.5px; top: 30px; bottom: -22px;
  width: 1px; background: rgba(255,255,255,.16);
}
.pl-ficha-nota-fase {
  display: block; font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(246,241,237,.55); margin-bottom: 5px;
}
.pl-ficha-nota-txt { display: block; font-size: 15px; line-height: 1.6; color: #f6f1ed; }

/* ── Tarjetas claras de apoyo ─────────────────────────────── */
.pl-ficha-datos { display: flex; flex-direction: column; gap: 12px; }
.pl-ficha-card {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 16px; flex: 1;
  padding: 22px 22px; border-radius: 4px;
  background: #fff; border: 1px solid var(--line-soft);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.pl-ficha-card:hover {
  border-color: rgba(211,16,33,.5);
  box-shadow: 0 20px 40px -30px rgba(22,21,20,.5);
  transform: translateY(-2px);
}
/* Filo rojo lateral, siempre visible: marca la sección sin depender del cursor. */
.pl-ficha-card::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(180deg, #d31021, #ff5a52);
}
.pl-ficha-card-body  { min-width: 0; }
.pl-ficha-card-title {
  margin: 0 0 8px; font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #d31021;
}
.pl-ficha-dato {
  margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 600;
  line-height: 1.15; color: var(--ink);
}
.pl-ficha-pie { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--gray); }

.pl-ficha-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pl-ficha-lista li {
  padding: 5px 11px; border-radius: 999px;
  background: var(--paper-2); font-size: 12.5px; color: var(--ink);
}

/* ── Cierre de marca, de lado a lado ──────────────────────────
   Antes era un párrafo centrado y suelto que se leía como un pie
   más. Ahora va a dos columnas: la pregunta a la izquierda, la
   respuesta y el enlace al catálogo a la derecha, con una regla
   roja entre medias que las ata.                              */
.pl-marca {
  border-top: 2px solid #d31021; border-bottom: 2px solid #d31021;
  background: #fff; padding: 46px 40px;
}
.pl-marca-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 44px;
  align-items: start; text-align: left;
}
.pl-marca-firma {
  display: block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: #d31021; margin-bottom: 12px;
}
.pl-marca-title {
  margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 500;
  line-height: 1.15; color: var(--ink);
}
.pl-marca-title em { font-style: italic; color: #d31021; display: block; }

/* La regla roja separa las dos columnas sin necesidad de un borde entero. */
.pl-marca-col--txt { position: relative; padding-left: 44px; }
.pl-marca-col--txt::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  background: linear-gradient(180deg, #d31021, rgba(211,16,33,.15));
}
.pl-marca-txt {
  margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--gray);
}
/* Primera frase en oscuro: engancha y da entrada al resto. */
.pl-marca-txt::first-line { color: var(--ink); }

/* ── Banda «Ver todas las fragancias» ─────────────────────────
   Cierra la ficha de producto. Va suelta bajo la caja de marca,
   de lado a lado y en rojo lleno, porque dentro del párrafo se
   perdía como un enlace más.                                  */
.pl-verfrag {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 24px 24px;
  background: #d31021; color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  animation: plVerfragLatido 2.4s ease-in-out infinite;
  transition: background .25s ease;
}
.pl-verfrag:hover { background: #b60d1b; color: #fff; }
.pl-verfrag:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
/* Intermitencia: el rojo respira en lugar de parpadear en seco, que
   cansaría la vista y molesta a quien es sensible al destello. */
@keyframes plVerfragLatido {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}
/* Destello que recorre la banda en cada ciclo. */
.pl-verfrag::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 22%;
  transform: skewX(-20deg); z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: plVerfragBrillo 2.4s ease-in-out infinite;
}
@keyframes plVerfragBrillo {
  0%, 45%   { left: -35%; }
  90%, 100% { left: 113%; }
}
.pl-verfrag-arrow { flex-shrink: 0; animation: plVerfragFlecha 2.4s ease-in-out infinite; }
@keyframes plVerfragFlecha {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

@media (max-width: 900px) {
  .pl-ficha-grid { grid-template-columns: 1fr; }
}
/* Bajo 900 px las dos columnas se apilan y la regla roja pasa arriba. */
@media (max-width: 900px) {
  .pl-marca-inner    { grid-template-columns: 1fr; gap: 22px; }
  .pl-marca-col--txt { padding-left: 0; padding-top: 20px; }
  .pl-marca-col--txt::before {
    left: 0; right: auto; top: 0; bottom: auto; width: 64px; height: 2px;
    background: linear-gradient(90deg, #d31021, rgba(211,16,33,.15));
  }
}
@media (max-width: 768px) {
  .pl-ficha        { padding: 48px 0 44px; }
  .pl-ficha-inner  { padding: 0 28px; }
  .pl-ficha-title  { font-size: 28px; }
  .pl-marca        { padding: 36px 28px; }
  .pl-marca-title  { font-size: 27px; }
  .pl-marca-txt    { font-size: 15px; }
}
@media (max-width: 560px) {
  .pl-ficha            { padding: 40px 0 36px; }
  .pl-ficha-inner      { padding: 0 20px; }
  .pl-ficha-title      { font-size: 24px; }
  .pl-ficha-sub        { font-size: 14.5px; }
  .pl-ficha-notas-card { padding: 24px 20px 22px; }
  .pl-ficha-nota-txt   { font-size: 14px; }
  .pl-ficha-card       { padding: 18px 16px; gap: 13px; }
  .pl-ficha-ico        { width: 38px; height: 38px; }
  .pl-ficha-ico svg    { width: 19px; height: 19px; }
  .pl-ficha-dato       { font-size: 19px; }
  .pl-marca            { padding: 30px 20px; }
  .pl-marca-title      { font-size: 23px; }
  .pl-marca-txt        { font-size: 14.5px; line-height: 1.7; }
  .pl-marca-firma      { font-size: 10px; letter-spacing: .2em; }
  .pl-verfrag          { padding: 20px 16px; font-size: 12px; letter-spacing: .13em; gap: 9px; }
  .pl-verfrag-arrow    { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-verfrag, .pl-verfrag::after, .pl-verfrag-arrow { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-ficha-card { transition: none; }
  .pl-ficha-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   Finalizar compra: pasos, tarjetas y confianza
   La página se leía como un formulario plano sobre fondo claro.
   Ahora cada bloque es una tarjeta, con la misma familia visual
   del resto de la tienda: fondo cálido detrás, blanco delante y
   el rojo reservado para lo que de verdad importa.
   ═══════════════════════════════════════════════════════════ */

.woocommerce-checkout .pl-checkout-page { background: transparent; }
.pl-checkout-head { margin-bottom: 28px; text-align: center; }
.pl-checkout-head .pl-checkout-page-title { margin-bottom: 0; }

/* ── Las secciones del formulario, como tarjetas ──────────── */
.pl-co-section {
  position: relative; overflow: hidden;
  margin-bottom: 18px; padding: 26px 28px 22px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 5px;
  transition: border-color .25s, box-shadow .25s;
}
.pl-co-section:last-child { margin-bottom: 0; }
/* Filo rojo a la izquierda, el mismo recurso del carrito y de la ficha. */
.pl-co-section::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(180deg, #d31021, #ff5a52);
}
/* Al escribir dentro, la tarjeta se marca: ayuda a saber dónde se está. */
.pl-co-section:focus-within {
  border-color: rgba(211,16,33,.35);
  box-shadow: 0 18px 40px -30px rgba(22,21,20,.55);
}
.pl-co-section .pl-co-section-title {
  font-size: 19px; margin-bottom: 20px; padding-bottom: 13px;
  border-bottom: 1px solid var(--line-soft);
}
/* El número del paso, en rojo de marca. */
.pl-co-section .pl-checkout-step {
  background: #d31021; width: 26px; height: 26px; font-size: 11.5px;
}

/* El aviso de inicio de sesión, en la misma familia. */
.pl-checkout-login-notice {
  border-radius: 5px; border-color: var(--line-soft); background: #fff;
  border-left: 3px solid #d31021; padding: 15px 18px;
}

/* ── Resumen del pedido: una tarjeta con cabecera oscura ──── */
.pl-checkout-side-inner {
  background: #fff; border: 1px solid var(--line-soft); border-radius: 5px;
  padding: 0;
  /* Sin «overflow: hidden» a secas: taparía el desplazamiento interno que
     necesita el recuadro cuando el pedido es largo. Se recorta solo a lo
     ancho, que es lo único que hacía falta para las esquinas redondeadas. */
  overflow-x: hidden;
  overflow-y: auto;
}
.pl-checkout-side-inner > .pl-co-section-title--order {
  margin: 0; padding: 18px 24px;
  background: #161514; color: #fff; border-bottom: 0;
  font-size: 16px; letter-spacing: .02em;
}
.pl-checkout-side-inner #order_review { padding: 18px 24px 22px; }

/* El pago ya no vive en la columna del resumen, sino en su propia tarjeta
   como paso 3, con el botón de realizar el pedido debajo. */
.pl-co-section--pago #payment { margin: 0; }
.pl-co-section--pago .place-order { margin-top: 18px; }

/* ── Franja de envío gratis, destacada ────────────────────── */
.pl-co-envio {
  display: flex; align-items: center; gap: 13px;
  margin: 20px 0 12px; padding: 14px 16px; border-radius: 5px;
  background: linear-gradient(135deg, rgba(211,16,33,.07), rgba(211,16,33,.02));
  border: 1px solid rgba(211,16,33,.30);
}
.pl-co-envio-ico {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: #d31021; color: #fff;
}
.pl-co-envio-ico svg { width: 21px; height: 21px; }
.pl-co-envio-txt   { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pl-co-envio-txt b { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pl-co-envio-txt em{ font-size: 11.5px; font-style: normal; color: var(--gray); line-height: 1.3; }

/* ── Los tres avales pequeños ─────────────────────────────── */
/* Los avales van centrados en el ancho de la tarjeta, no repartidos de borde
   a borde: al ser solo dos, estirarlos los dejaba descolgados a los lados. */
.pl-co-trust {
  list-style: none; margin: 0 auto 4px; padding: 13px 0 0;
  display: flex; justify-content: center; gap: 0;
  border-top: 1px solid var(--line-soft);
}
.pl-co-trust-item { flex: 0 1 190px; }
.pl-co-trust-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 0 6px; text-align: center; border: 0;
}
.pl-co-trust-item + .pl-co-trust-item { border-left: 1px solid var(--line-soft); }
.pl-co-trust-item svg  { color: #d31021; flex-shrink: 0; }
.pl-co-trust-item span {
  font-size: 10.5px; letter-spacing: .03em; color: var(--gray); line-height: 1.3;
  text-transform: none; font-weight: 500;
}

@media (max-width: 768px) {
  .pl-co-section     { padding: 22px 18px 18px; }
  .pl-co-section .pl-co-section-title { font-size: 17px; }
  .pl-checkout-side-inner > .pl-co-section-title--order { padding: 16px 18px; }
  .pl-checkout-side-inner #order_review { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 560px) {
  .pl-co-envio       { padding: 12px 13px; gap: 11px; }
  .pl-co-envio-ico   { width: 36px; height: 36px; }
  .pl-co-envio-txt b { font-size: 12.5px; }
  .pl-co-trust-item span { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-co-section { transition: none; }
}

/* ── Resumen del pedido: cabecera con total y plegado ──────── */
.pl-checkout-side-inner > .pl-co-section-title--order {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pl-co-toggle {
  display: flex; align-items: center; gap: 9px;
  padding: 0; margin: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left;
  cursor: default;
}
.pl-co-toggle-ver,
.pl-co-toggle-flecha { display: none; }
.pl-co-toggle-total {
  font-family: var(--serif); font-size: 18px; font-weight: 700; color: #fff;
  white-space: nowrap;
}
/* En pantalla grande el total ya se ve en la tabla; no hace falta repetirlo. */
@media (min-width: 901px) {
  .pl-co-toggle-total { display: none; }
}

/* ── Total dentro del botón de realizar el pedido ──────────── */
#place_order {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap;
}
.pl-pedido-total {
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  padding-left: 12px; border-left: 1px solid rgba(255,255,255,.35);
  white-space: nowrap;
}

@media (max-width: 900px) {
  /* El resumen sube por encima del formulario: el cliente quiere ver qué va
     a pagar antes de empezar a escribir sus datos. */
  .pl-checkout-side { order: -1; }
  .pl-checkout-main { order: 1; }

  /* La cabecera pasa a ser el mando para desplegar. */
  .pl-co-toggle        { cursor: pointer; flex: 1; }
  .pl-co-toggle-ver    { display: inline; font-family: var(--sans); font-size: 11px;
                         font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
                         color: rgba(255,255,255,.62); }
  .pl-co-toggle-flecha { display: block; color: rgba(255,255,255,.72); transition: transform .3s ease; }

  /* Plegado por defecto: solo se ve la cabecera con el total. */
  #order_review {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .32s ease;
    overflow: hidden;
  }
  #order_review > * { min-height: 0; overflow: hidden; }
  /* El relleno del recuadro también tiene que irse al plegar, o quedan 40 px
     de aire debajo de la cabecera como si el detalle no se hubiera cerrado. */
  .pl-checkout-side-inner #order_review {
    padding-top: 0; padding-bottom: 0;
    transition: grid-template-rows .32s ease, padding .32s ease;
  }
  .pl-checkout-side-inner.is-abierto #order_review {
    grid-template-rows: 1fr; padding-top: 18px; padding-bottom: 22px;
  }
  .pl-checkout-side-inner.is-abierto .pl-co-toggle-flecha { transform: rotate(180deg); }

  /* El alto máximo y el scroll interno son para el recuadro fijo del
     escritorio. Aquí sobran: recortarían el resumen al desplegarlo. */
  .pl-checkout-side-inner { max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
  .pl-co-toggle-total { font-size: 16px; }
  .pl-co-toggle-ver   { font-size: 10px; }
  .pl-pedido-total    { font-size: 15px; padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #order_review, .pl-co-toggle-flecha { transition: none; }
}

/* ── Aceptación de términos y aire antes del botón ─────────── */
.pl-co-terms-wrap {
  margin: 16px 0 18px; padding: 13px 15px;
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 4px;
  transition: border-color .2s, background .2s;
}
.pl-co-terms-wrap:has(.pl-co-terms-check:checked) {
  border-color: rgba(191,34,51,.4); background: rgba(191,34,51,.04);
}
.pl-co-terms {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; cursor: pointer;
}
.pl-co-terms-check {
  flex-shrink: 0; width: 17px; height: 17px; margin: 1px 0 0;
  accent-color: #bf2233; cursor: pointer;
}
.pl-co-terms-txt  { font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.pl-co-terms-txt a { color: #bf2233; text-decoration: underline; text-underline-offset: 2px; }
.pl-co-terms-txt a:hover { color: var(--ink); }
.pl-co-terms-txt .required { color: #bf2233; text-decoration: none; margin-left: 2px; }

/* El aviso de privacidad vive ahora dentro de la tarjeta de Datos, con su
   candado delante y separado de los campos por una línea fina. */
.pl-co-privacidad {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px; line-height: 1.55; color: var(--gray);
}
.pl-co-privacidad svg { flex-shrink: 0; margin-top: 2px; color: #bf2233; }
.pl-co-privacidad a   { color: #bf2233; text-decoration: underline; text-underline-offset: 2px; }
.pl-co-privacidad a:hover { color: var(--ink); }
.place-order > #place_order { margin-top: 4px; }

/* Nota bajo el correo. */
.pl-co-ayuda {
  margin: -4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--gray);
}

/* ── Enlaces legales antes del botón de pagar ──────────────── */
.pl-co-legales {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0;
}
.pl-co-legales li { display: flex; align-items: center; }
.pl-co-legales li + li::before {
  content: ""; width: 1px; height: 11px; margin: 0 12px;
  background: var(--line);
}
.pl-co-legales a {
  font-size: 11.5px; color: var(--gray); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.pl-co-legales a:hover { color: #bf2233; border-bottom-color: rgba(191,34,51,.45); }

/* ── Página de preguntas frecuentes ────────────────────────── */
.pl-faqpage { max-width: 820px; margin: 0 auto; padding: 66px 40px 12px; }
.pl-faqpage-head { text-align: center; margin-bottom: 30px; }
.pl-faqpage-title {
  font-family: var(--serif); font-size: clamp(32px, 5vw, 50px); font-weight: 500;
  line-height: 1.06; letter-spacing: -.01em; margin: 10px 0 0; color: var(--ink);
}
.pl-faqpage-sub {
  margin: 15px auto 0; max-width: 52ch;
  font-size: 16px; line-height: 1.7; color: var(--gray); font-weight: 300;
}
.pl-faqpage-rule {
  display: block; width: 58px; height: 2px; margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, #bf2233, transparent);
}

.pl-faqpage-lista { display: flex; flex-direction: column; gap: 12px; }

/* Reaprovecha .pl-faq-item de la portada, pero en tarjeta suelta y sobre
   fondo claro: los colores de la portada son para fondo negro. */
.pl-faqpage-lista .pl-faq-item {
  position: relative; background: #fff;
  border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden;
  transition: border-color .22s, box-shadow .22s, background .22s;
}
.pl-faqpage-lista .pl-faq-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: #bf2233; opacity: 0; transition: opacity .22s;
}
.pl-faqpage-lista .pl-faq-item:hover {
  border-color: rgba(191,34,51,.28);
  box-shadow: 0 18px 38px -32px rgba(22,21,20,.7);
}
.pl-faqpage-lista .pl-faq-item.is-open {
  border-color: rgba(191,34,51,.3);
  box-shadow: 0 20px 44px -34px rgba(22,21,20,.65);
}
.pl-faqpage-lista .pl-faq-item.is-open::before { opacity: 1; }

.pl-faqpage-lista .pl-faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 15px;
  padding: 21px 24px; text-align: left;
  font-family: var(--sans); font-size: 16px; line-height: 1.45;
  color: var(--ink); transition: color .2s;
}
.pl-faqpage-lista .pl-faq-item.is-open .pl-faq-q,
.pl-faqpage-lista .pl-faq-q:hover { color: var(--ink); }

.pl-faqpage-num {
  flex: none; font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: rgba(191,34,51,.45); letter-spacing: .02em; transition: color .22s;
}
.pl-faqpage-lista .pl-faq-item.is-open .pl-faqpage-num { color: #bf2233; }
.pl-faqpage-preg { flex: 1 1 auto; font-weight: 400; }

.pl-faqpage-lista .pl-faq-icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink-soft);
  font-size: 0; transition: transform .28s ease, background .22s, color .22s;
}
.pl-faqpage-lista .pl-faq-icon svg { width: 15px; height: 15px; }
.pl-faqpage-lista .pl-faq-item.is-open .pl-faq-icon {
  transform: rotate(180deg); background: rgba(191,34,51,.09); color: #bf2233;
}

/* Apertura suave: la fila de la rejilla pasa de 0 a su altura natural. */
.pl-faqpage-resp {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
}
.pl-faqpage-lista .pl-faq-item.is-open .pl-faqpage-resp { grid-template-rows: 1fr; }
.pl-faqpage-lista .pl-faq-a {
  display: block; overflow: hidden; min-height: 0;
  padding: 0 24px 0 54px;
  font-size: 15px; line-height: 1.8; color: var(--ink-soft); font-weight: 300;
}
.pl-faqpage-lista .pl-faq-item.is-open .pl-faq-a { padding-bottom: 23px; }

.pl-faqpage-extra { margin-top: 34px; font-size: 15px; line-height: 1.75; color: var(--gray); }

@media (prefers-reduced-motion: reduce) {
  .pl-faqpage-resp { transition: none; }
  .pl-faqpage-lista .pl-faq-icon { transition: background .22s, color .22s; }
}

@media (max-width: 768px) {
  .pl-faqpage { padding: 48px 24px 10px; }
}
@media (max-width: 560px) {
  .pl-faqpage      { padding: 40px 18px 8px; }
  .pl-faqpage-sub  { font-size: 14.5px; }
  .pl-faqpage-lista .pl-faq-q { padding: 18px 17px; gap: 12px; font-size: 15px; }
  .pl-faqpage-lista .pl-faq-a { padding-left: 17px; padding-right: 17px; font-size: 14.5px; }
  .pl-faqpage-lista .pl-faq-item.is-open .pl-faq-a { padding-bottom: 19px; }
  .pl-faqpage-num  { font-size: 13.5px; }
  .pl-co-legales a  { font-size: 11px; }
  .pl-co-legales li + li::before { margin: 0 9px; }
}

/* ── Página «Quiénes somos» ──────────────────────────────── */
.pl-qs { max-width: 1060px; margin: 0 auto; padding: 66px 40px 12px; }

.pl-qs-hero { text-align: center; }
.pl-qs-title {
  font-family: var(--serif); font-size: clamp(34px, 5.2vw, 54px); font-weight: 500;
  line-height: 1.05; letter-spacing: -.01em; margin: 10px 0 0; color: var(--ink);
}
.pl-qs-lead {
  max-width: 620px; margin: 16px auto 0; font-size: 16px; line-height: 1.7;
  color: var(--gray); font-weight: 300;
}
.pl-qs-rule {
  display: block; width: 58px; height: 2px; margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, #bf2233, transparent);
}

.pl-qs-foto {
  margin: 40px 0 0; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: 0 30px 60px -46px rgba(22,21,20,.8);
}
.pl-qs-foto img { width: 100%; height: clamp(220px, 34vw, 400px); object-fit: cover; }

.pl-qs-historia {
  max-width: 760px; margin: 44px auto 0; text-align: center;
  display: flex; flex-direction: column; gap: 16px;
}
.pl-qs-historia p { font-size: 16.5px; line-height: 1.85; color: var(--ink-soft); font-weight: 300; }
.pl-qs-historia b { font-weight: 600; color: var(--ink); }
.pl-qs-historia a { color: #bf2233; border-bottom: 1px solid rgba(191,34,51,.3); }
.pl-qs-historia a:hover { border-bottom-color: #bf2233; }

/* Cifras */
.pl-qs-cifras {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: 52px 0 0; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden;
}
.pl-qs-cifra {
  background: #fff; padding: 26px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pl-qs-cifra-num {
  font-family: var(--serif); font-size: clamp(28px, 3.4vw, 38px); font-weight: 600;
  line-height: 1; color: #bf2233;
}
.pl-qs-cifra-txt {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray); font-weight: 500; line-height: 1.5; max-width: 150px;
}

/* Pilares */
.pl-qs-pilares-wrap { margin: 62px 0 0; text-align: center; }
.pl-qs-h2 {
  font-family: var(--serif); font-size: clamp(26px, 3.6vw, 38px); font-weight: 500;
  line-height: 1.1; color: var(--ink);
}
.pl-qs-sub {
  max-width: 660px; margin: 14px auto 0; font-size: 15.5px; line-height: 1.75;
  color: var(--gray); font-weight: 300;
}
.pl-qs-pilares {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 34px 0 0;
}
.pl-qs-pilar {
  background: #fff; border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 30px 24px 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.pl-qs-pilar:hover {
  border-color: rgba(191,34,51,.35); transform: translateY(-3px);
  box-shadow: 0 22px 44px -34px rgba(22,21,20,.7);
}
.pl-qs-pilar-ico {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(191,34,51,.07); color: #bf2233;
}
.pl-qs-pilar-ico svg { width: 24px; height: 24px; }
.pl-qs-pilar-tit {
  font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink);
  margin-bottom: 9px;
}
.pl-qs-pilar-txt { font-size: 14.5px; line-height: 1.7; color: var(--gray); font-weight: 300; }

/* Nota de marcas */
.pl-qs-nota {
  margin: 46px 0 0; padding: 24px 26px; border-radius: 14px;
  background: var(--paper-2); border-left: 3px solid #bf2233; text-align: left;
}
.pl-qs-nota-tit {
  display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: #bf2233; margin-bottom: 8px;
}
.pl-qs-nota p { font-size: 14px; line-height: 1.75; color: var(--ink-soft); font-weight: 300; }
.pl-qs-nota b { font-weight: 600; color: var(--ink); }

.pl-qs-extra { margin: 34px 0 0; font-size: 15px; line-height: 1.75; color: var(--gray); }
.pl-qs-extra p + p { margin-top: 12px; }

/* Llamada final de lado a lado */
.pl-qs-cta {
  margin: 62px 0 0; margin-left: calc(50% - 50vw); width: 100vw;
  background: #bf2233; text-align: center;
}
.pl-qs-cta-link {
  display: block; padding: 26px 20px; color: #fff;
  font-size: clamp(13px, 1.6vw, 16px); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  animation: plQsParpadeo 2.2s ease-in-out infinite;
}
.pl-qs-cta-link:hover { color: #fff; background: rgba(0,0,0,.09); }
@keyframes plQsParpadeo { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .pl-qs-cta-link { animation: none; }
}

@media (max-width: 900px) {
  .pl-qs-pilares { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 768px) {
  .pl-qs        { padding: 48px 24px 10px; }
  .pl-qs-cifras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pl-qs           { padding: 40px 18px 8px; }
  .pl-qs-lead      { font-size: 15px; }
  .pl-qs-historia  { margin-top: 34px; }
  .pl-qs-historia p{ font-size: 15.5px; line-height: 1.8; }
  .pl-qs-foto      { margin-top: 30px; border-radius: 14px; }
  .pl-qs-cifra     { padding: 20px 12px; }
  .pl-qs-pilar     { padding: 24px 20px; }
  .pl-qs-nota      { padding: 20px; }
  .pl-qs-cta-link  { padding: 22px 16px; letter-spacing: .16em; }
}

/* ── Restos del tema anterior (ver inc/atajos-tema-viejo.php) ────────────── */
.pl-viejo-gap { width: 100%; }
.pl-viejo-divider {
  border: 0; height: 2px; width: 72px; margin: 26px auto;
  background: linear-gradient(90deg, transparent, #bf2233, transparent);
}
.pl-viejo-row { margin: 22px 0; }
.pl-viejo-col { margin: 0; }
.pl-viejo-figura {
  margin: 22px 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-soft);
}
.pl-viejo-figura .pl-viejo-img { width: 100%; height: auto; }
.pl-viejo-tira {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 30px; margin: 24px 0; padding: 22px 18px;
  background: var(--paper-2); border-radius: 14px;
}
.pl-viejo-tira .pl-viejo-figura {
  margin: 0; border: 0; border-radius: 0; background: none;
}
.pl-viejo-tira .pl-viejo-img {
  width: auto; max-height: 46px; object-fit: contain;
  filter: grayscale(1); opacity: .62; transition: filter .2s, opacity .2s;
}
.pl-viejo-tira .pl-viejo-figura:hover .pl-viejo-img { filter: none; opacity: 1; }

@media (max-width: 560px) {
  .pl-viejo-tira { gap: 14px 20px; padding: 18px 12px; }
  .pl-viejo-tira .pl-viejo-img { max-height: 36px; }
}

/* ── Páginas de información: privacidad, términos, envíos, devoluciones ──── */
.pl-leg { max-width: 1080px; margin: 0 auto; padding: 66px 40px 12px; }

/* Portada */
.pl-leg-hero { text-align: center; }
.pl-leg-title {
  font-family: var(--serif); font-size: clamp(32px, 5vw, 52px); font-weight: 500;
  line-height: 1.06; letter-spacing: -.01em; margin: 10px 0 0; color: var(--ink);
}
.pl-leg-lead {
  max-width: 640px; margin: 16px auto 0; font-size: 16px; line-height: 1.7;
  color: var(--gray); font-weight: 300;
}
.pl-leg-rule {
  display: block; width: 58px; height: 2px; margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, #bf2233, transparent);
}

/* Destacados */
.pl-leg-destacados {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: 42px 0 0; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden;
}
.pl-leg-destacado {
  background: #fff; padding: 24px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.pl-leg-destacado-ico {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(191,34,51,.07); color: #bf2233; margin-bottom: 2px;
}
.pl-leg-destacado-ico svg { width: 20px; height: 20px; }
.pl-leg-destacado-tit {
  font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.15;
}
.pl-leg-destacado-txt {
  font-size: 12.5px; line-height: 1.5; color: var(--gray); font-weight: 300; max-width: 190px;
}

/* Marco de introducción */
.pl-leg-marco {
  margin: 34px 0 0; padding: 26px 30px; border-radius: 16px;
  background: var(--paper-2); border-left: 3px solid #bf2233;
}
.pl-leg-marco-txt { font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); font-weight: 300; }
.pl-leg-marco-txt + .pl-leg-marco-txt { margin-top: 13px; }
.pl-leg-marco b { font-weight: 600; color: var(--ink); }

/* Índice */
.pl-leg-indice {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 34px 0 0;
}
.pl-leg-indice-chip {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
  transition: border-color .18s, color .18s, background .18s;
}
.pl-leg-indice-chip:hover { border-color: #bf2233; color: #bf2233; background: rgba(191,34,51,.04); }

/* Cuadrícula de tarjetas */
.pl-leg-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  align-items: start; margin: 26px 0 0;
}
.pl-leg-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 28px 28px 26px; scroll-margin-top: 90px;
  transition: border-color .22s, box-shadow .22s;
}
.pl-leg-card:hover {
  border-color: rgba(191,34,51,.3);
  box-shadow: 0 22px 44px -36px rgba(22,21,20,.7);
}
.pl-leg-card--ancha { grid-column: 1 / -1; }
.pl-leg-card-head {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 15px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.pl-leg-card-ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(191,34,51,.07); color: #bf2233;
}
.pl-leg-card-ico svg { width: 21px; height: 21px; }
.pl-leg-card-tit {
  font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.2;
}
.pl-leg-card-body { font-size: 14.5px; line-height: 1.8; color: var(--gray); font-weight: 300; }
.pl-leg-card-body b, .pl-leg-card-body strong { font-weight: 600; color: var(--ink); }
.pl-leg-card-body a { color: #bf2233; border-bottom: 1px solid rgba(191,34,51,.3); }
.pl-leg-card-body a:hover { border-bottom-color: #bf2233; }
.pl-leg-p + .pl-leg-p,
.pl-leg-p + .pl-leg-lista,
.pl-leg-lista + .pl-leg-p,
.pl-leg-lista + .pl-leg-lista,
.pl-leg-p + .pl-leg-pasos,
.pl-leg-pasos + .pl-leg-p { margin-top: 13px; }

/* Listas con visto / aspa */
.pl-leg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pl-leg-lista li { position: relative; padding-left: 27px; line-height: 1.7; }
.pl-leg-lista li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(61,139,64,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d8b40' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px 9px no-repeat;
}
.pl-leg-lista--no li::before {
  background: rgba(191,34,51,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf2233' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center/8px 8px no-repeat;
}

/* Pasos numerados */
.pl-leg-pasos {
  list-style: none; margin: 0; padding: 0; counter-reset: plleg;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.pl-leg-pasos li {
  counter-increment: plleg; position: relative;
  padding: 20px 18px 18px; border-radius: 13px;
  background: var(--paper); border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.pl-leg-pasos li::before {
  content: counter(plleg);
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #bf2233; color: #fff; font-size: 12.5px; font-weight: 600;
  margin-bottom: 4px;
}
.pl-leg-paso-tit { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.pl-leg-paso-txt { font-size: 13.5px; line-height: 1.7; }

/* Nota al pie de una tarjeta */
.pl-leg-nota-p {
  margin-top: 14px; padding: 13px 15px; border-radius: 11px;
  background: var(--paper-2); border-left: 2px solid #bf2233;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-soft);
}

/* Transportadoras y medios de pago */
.pl-leg-marcas { margin: 34px 0 0; text-align: center; }
.pl-leg-marcas-tit {
  display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gray); font-weight: 600; margin-bottom: 16px;
}
.pl-leg-marcas-tit--sep { margin-top: 32px; }
.pl-leg-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px 34px; padding: 24px 20px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 16px;
}
.pl-leg-logo { display: block; }
.pl-leg-logo .pl-leg-logo-img {
  width: auto; max-height: 42px; object-fit: contain;
  /* Los logos van siempre a color: son marcas que el cliente reconoce. */
}
.pl-leg-logo:hover .pl-leg-logo-img { opacity: .85; }
.pl-leg-pagos { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.pl-leg-pago {
  display: inline-flex; align-items: center; padding: 9px 17px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
}

/* Documentos relacionados */
.pl-leg-relacionadas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px;
  margin: 30px 0 0; padding-top: 26px; border-top: 1px solid var(--line-soft);
}
.pl-leg-relacionadas-tit {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gray); font-weight: 600;
}
.pl-leg-relacionadas a {
  font-size: 13.5px; color: #bf2233; border-bottom: 1px solid rgba(191,34,51,.3);
}
.pl-leg-relacionadas a:hover { border-bottom-color: #bf2233; }

/* Tarjeta de ayuda */
.pl-leg-ayuda {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 34px 0 0; padding: 26px 28px; border-radius: 16px;
  background: var(--ink); color: #f3efec;
}
.pl-leg-ayuda-ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.09); color: #fff;
}
.pl-leg-ayuda-ico svg { width: 22px; height: 22px; }
.pl-leg-ayuda-txt { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.pl-leg-ayuda-tit { font-family: var(--serif); font-size: 21px; font-weight: 500; color: #fff; line-height: 1.3; }
.pl-leg-ayuda-sub { font-size: 12.5px; color: rgba(243,239,236,.6); font-weight: 300; }
.pl-leg-ayuda-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pl-leg-ayuda-btn {
  display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 999px;
  background: #bf2233; color: #fff; font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; transition: background .2s;
}
.pl-leg-ayuda-btn:hover { background: #a81b2a; color: #fff; }
.pl-leg-ayuda-mail { font-size: 13px; color: rgba(243,239,236,.72); border-bottom: 1px solid rgba(243,239,236,.25); }
.pl-leg-ayuda-mail:hover { color: #fff; border-bottom-color: #fff; }

@media (max-width: 900px) {
  .pl-leg-grid  { grid-template-columns: 1fr; gap: 14px; }
  .pl-leg-pasos { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pl-leg            { padding: 48px 24px 10px; }
  .pl-leg-destacados { grid-template-columns: repeat(2, 1fr); }
  .pl-leg-ayuda      { flex-direction: column; align-items: flex-start; text-align: left; gap: 14px; }
  /* En columna, el «flex: 1 1 260px» del escritorio se aplica al alto y abría
     un hueco de 260 px entre la pregunta y el botón. Aquí manda el contenido. */
  .pl-leg-ayuda-txt  { flex: 0 0 auto; width: 100%; }
  .pl-leg-ayuda-links{ width: 100%; }
}
@media (max-width: 560px) {
  .pl-leg              { padding: 40px 18px 8px; }
  .pl-leg-lead         { font-size: 15px; }
  .pl-leg-destacado    { padding: 19px 11px; }
  .pl-leg-destacado-tit{ font-size: 17.5px; }
  .pl-leg-destacado-txt{ font-size: 11.5px; }
  .pl-leg-marco        { padding: 20px; }
  .pl-leg-card         { padding: 22px 20px 20px; }
  .pl-leg-card-tit     { font-size: 19px; }
  .pl-leg-indice-chip  { font-size: 11.5px; padding: 7px 13px; }
  .pl-leg-logos        { gap: 14px 22px; padding: 18px 14px; }
  .pl-leg-logo .pl-leg-logo-img { max-height: 32px; }
  .pl-leg-ayuda        { padding: 22px 20px; }
  .pl-leg-ayuda-btn    { width: 100%; justify-content: center; }
}
/* ── Bloque de compra: precio + cantidad + botón, en una tarjeta ────────── */
.pl-compra {
  background: #fff; border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 20px 22px 18px; margin: -4px 0 12px;
  box-shadow: 0 20px 44px -36px rgba(22,21,20,.7);
}
/* Dentro de la tarjeta, el precio deja de ser una caja: sería una caja
   dentro de otra. Se queda como fila, separada por un filete. */
.pl-compra .pl-precio-card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0 0 16px; margin: 0 0 15px;
  border-bottom: 1px solid var(--line-soft);
}
.pl-compra .pl-viewers {
  background: var(--paper-2); border-color: transparent; margin: 0 0 13px;
}
.pl-compra .pl-product-cart-form { margin: 0; }
.pl-compra .pl-out-of-stock      { margin: 0; }

/* ── Características bajo la foto (solo pantallas anchas) ───────────────── */
/* La lista existe dos veces en el HTML: una bajo la foto y otra en la columna
   de info. Nunca se ven las dos a la vez; el ancho decide cuál se muestra. */
.pl-specs-side { display: none; }

@media (min-width: 901px) {
  .pl-specs-side {
    display: block; margin-top: 6px;
    padding: 18px 20px 16px;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 14px;
  }
  .pl-specs-side-tit {
    display: block; margin-bottom: 11px;
    font-family: var(--sans); font-size: 10.5px; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--gray);
  }
  .pl-specs-side ul { list-style: none; margin: 0; padding: 0; }
  .pl-specs-side li {
    position: relative; padding-left: 17px;
    font-size: 14px; line-height: 1.9; color: var(--ink-soft); font-weight: 300;
  }
  .pl-specs-side li::before {
    content: ""; position: absolute; left: 0; top: .85em;
    width: 5px; height: 5px; border-radius: 50%; background: #bf2233; opacity: .55;
  }
  .pl-specs-side li strong { font-weight: 600; color: var(--ink); }
  .pl-specs-side p { font-size: 14px; line-height: 1.8; color: var(--ink-soft); }

  /* En ancho, la lista de la columna derecha sobra: ya está bajo la foto. */
  .pl-product-info .pl-specs-info { display: none; }
}

/* ── Corte entre la zona de compra y la de contenido ────────────────────── */
.pl-sep {
  display: flex; align-items: center; gap: 18px;
  max-width: 1200px; margin: 0 auto; padding: 48px 40px 30px;
}
.pl-sep-linea { flex: 1; height: 1px; background: var(--line); }
.pl-sep-txt {
  flex: none; font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--gray);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .pl-sep { padding: 40px 28px 26px; gap: 14px; }
}
@media (max-width: 560px) {
  .pl-sep     { padding: 34px 20px 22px; gap: 11px; }
  .pl-sep-txt { font-size: 9.5px; letter-spacing: .18em; }
}

/* ── Franja del test en la ficha de producto ─────────────────────────────
   Negra, de lado a lado. En la página ya hay dos franjas rojas; una tercera
   se perdería entre ellas, así que esta juega con el contraste opuesto y
   deja el rojo solo para el botón, que es lo que se debe pulsar. */
.pl-quizcta {
  position: relative; overflow: hidden; isolation: isolate;
  /* Mismo recurso que usan la ficha olfativa y la franja de garantía para
     salirse del relleno lateral de .pl-product-main. */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: auto;
  background: var(--ink); color: #f6f1ed;
  padding: 66px 24px 62px; text-align: center;
}
/* Un rojo muy tenue late por detrás, para que la franja no sea un rectángulo
   negro y muerto. */
.pl-quizcta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(58% 130% at 50% 50%, rgba(211,16,33,.34), transparent 72%);
  animation: plQuizCtaLatido 4s ease-in-out infinite;
}
@keyframes plQuizCtaLatido {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}
.pl-quizcta-inner {
  max-width: 660px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.pl-quizcta-title {
  font-family: var(--serif); font-size: clamp(30px, 4.4vw, 46px); font-weight: 500;
  line-height: 1.08; letter-spacing: -.01em; color: #fff; margin: 0;
}
.pl-quizcta-sub {
  max-width: 46ch; margin: 15px 0 0;
  font-size: 15.5px; line-height: 1.72; font-weight: 300; color: rgba(246,241,237,.72);
}

.pl-quizcta-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  margin: 28px 0 0; padding: 18px 38px; border: 0; border-radius: 999px;
  background: #bf2233; color: #fff; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 18px 40px -18px rgba(191,34,51,.75);
  transition: background .22s, transform .22s, box-shadow .22s;
}
.pl-quizcta-btn:hover {
  background: #d31021; transform: translateY(-2px);
  box-shadow: 0 22px 46px -18px rgba(191,34,51,.9);
}
.pl-quizcta-btn:active { transform: translateY(0); }
.pl-quizcta-btn-ico { font-size: 15px; line-height: 1; }
.pl-quizcta-btn-arrow { transition: transform .22s; }
.pl-quizcta-btn:hover .pl-quizcta-btn-arrow { transform: translateX(4px); }
/* Destello que recorre el botón, igual que el de la portada. */
.pl-quizcta-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 22%;
  transform: skewX(-20deg); z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: plQuizCtaBrillo 3.4s ease-in-out infinite;
}
@keyframes plQuizCtaBrillo {
  0%, 55%  { left: -40%; }
  85%,100% { left: 120%; }
}

.pl-quizcta-notas {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(246,241,237,.5); font-weight: 500;
}
.pl-quizcta-notas li + li::before {
  content: "·"; margin: 0 11px; color: rgba(246,241,237,.35);
}

@media (prefers-reduced-motion: reduce) {
  .pl-quizcta::before,
  .pl-quizcta-btn::after { animation: none; }
  .pl-quizcta-btn:hover  { transform: none; }
}
@media (max-width: 640px) {
  .pl-quizcta       { padding: 50px 20px 46px; }
  .pl-quizcta-sub   { font-size: 14.5px; }
  .pl-quizcta-btn   { padding: 16px 26px; font-size: 12px; letter-spacing: .12em; width: 100%; max-width: 340px; }
  .pl-quizcta-notas { font-size: 10.5px; }
  .pl-quizcta-notas li + li::before { margin: 0 8px; }
}

/* ── «Avísame cuando vuelva» en productos agotados ───────────────────────── */
.pl-aviso {
  background: #fff; border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 20px 22px 18px; margin: -4px 0 12px;
  box-shadow: 0 20px 44px -36px rgba(22,21,20,.7);
}
.pl-aviso-cab { display: flex; align-items: flex-start; gap: 13px; }
.pl-aviso-ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(191,34,51,.07); color: #bf2233;
}
.pl-aviso-ico svg { width: 21px; height: 21px; }
.pl-aviso-txt { display: flex; flex-direction: column; gap: 3px; }
.pl-aviso-tit {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  color: var(--ink); line-height: 1.2;
}
.pl-aviso-sub { font-size: 13.5px; line-height: 1.6; color: var(--gray); font-weight: 300; }

.pl-aviso-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 16px 0 0; padding: 15px 20px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  transition: background .22s, transform .22s;
}
.pl-aviso-btn:hover { background: #2a2624; transform: translateY(-1px); }
.pl-aviso-btn svg { transition: transform .22s; }
.pl-aviso-btn:hover svg { transform: translateX(4px); }
/* Destello que recorre el botón para que se note que se puede pulsar. */
.pl-aviso-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 22%;
  transform: skewX(-20deg); z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  animation: plAvisoBrillo 3.6s ease-in-out infinite;
}
@keyframes plAvisoBrillo {
  0%, 60%   { left: -40%; }
  90%, 100% { left: 120%; }
}

.pl-aviso-form { margin-top: 16px; }
.pl-aviso-label {
  display: block; margin-bottom: 8px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gray); font-weight: 600;
}
.pl-aviso-fila {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
  background: #fff; transition: border-color .2s;
}
.pl-aviso-fila:focus-within { border-color: var(--ink); }
.pl-aviso-pais {
  display: grid; place-items: center; padding: 0 4px 0 16px;
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
}
.pl-aviso-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  padding: 13px 10px; font-family: var(--sans); font-size: 15px;
  letter-spacing: .04em; color: var(--ink);
}
.pl-aviso-input::placeholder { color: var(--line); letter-spacing: .04em; }
.pl-aviso-enviar {
  flex: none; border: 0; cursor: pointer; padding: 0 22px;
  background: #bf2233; color: #fff;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .2s;
}
.pl-aviso-enviar:hover:not(:disabled) { background: #a81b2a; }
.pl-aviso-enviar:disabled { opacity: .6; cursor: default; }
/* La trampa para robots: invisible, pero sin display:none para que la rellenen. */
.pl-aviso-trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}
.pl-aviso-legal { margin-top: 10px; font-size: 11.5px; line-height: 1.55; color: var(--gray); }
.pl-aviso-msg { margin-top: 10px; font-size: 13px; line-height: 1.5; }
.pl-aviso-msg.is-ok    { color: #3d8b40; font-weight: 500; }
.pl-aviso-msg.is-error { color: #bf2233; }
.pl-aviso-social {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--gray); text-align: center;
}

/* Botón en la tarjeta del catálogo */
.pl-add--aviso {
  border-color: var(--ink) !important; color: var(--ink) !important;
  font-weight: 600;
}
@media (hover: hover) {
  .pl-add--aviso:hover { background: var(--ink) !important; color: #fff !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-aviso-btn::after { animation: none; }
  .pl-aviso-btn:hover  { transform: none; }
}
@media (max-width: 560px) {
  .pl-aviso        { padding: 17px 17px 16px; border-radius: 14px; }
  .pl-aviso-tit    { font-size: 18px; }
  .pl-aviso-sub    { font-size: 12.5px; }
  .pl-aviso-btn    { font-size: 11.5px; letter-spacing: .12em; padding: 14px 16px; }
  .pl-aviso-enviar { padding: 0 16px; font-size: 11px; }
  .pl-aviso-input  { font-size: 14.5px; padding: 12px 8px; }
}

/* ── Tabla de precios por cantidad (ficha de producto) ───────────────────── */
.pl-vol {
  background: var(--paper-2); border-radius: 16px;
  padding: 17px 19px 15px; margin: 0 0 12px;
}
.pl-vol-cab { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; }
.pl-vol-ico { flex: none; color: #bf2233; display: flex; margin-top: 1px; }
.pl-vol-ico svg { width: 19px; height: 19px; }
.pl-vol-tit {
  display: block; font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
}
.pl-vol-sub {
  display: block; font-size: 12px; line-height: 1.5; color: var(--gray);
  font-weight: 300; margin-top: 2px;
}
.pl-vol-lista { list-style: none; margin: 0; padding: 0; }
.pl-vol-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 9px;
  font-size: 13.5px; color: var(--ink-soft);
}
.pl-vol-fila + .pl-vol-fila { margin-top: 2px; }
.pl-vol-rango em { font-style: normal; color: var(--gray); font-size: 12px; }
.pl-vol-dto { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pl-vol-dto em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--gray); margin-left: 2px; }
/* El tramo en el que ya está el cliente, marcado. */
.pl-vol-fila.is-actual {
  background: #fff; box-shadow: inset 0 0 0 1px rgba(191,34,51,.25);
}
.pl-vol-fila.is-actual .pl-vol-dto { color: #bf2233; }
.pl-vol-nudge {
  margin: 11px 0 0; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); font-weight: 300;
}

@media (max-width: 560px) {
  .pl-vol       { padding: 15px 15px 13px; border-radius: 14px; }
  .pl-vol-tit   { font-size: 16.5px; }
  .pl-vol-fila  { font-size: 12.5px; padding: 7px 8px; }
  .pl-vol-nudge { font-size: 12px; }
}

/* ── Barra de progreso del descuento por cantidad ─────────────────────────
   Va en rojo y ocupa el hueco de la antigua franja de promociones, para que
   el encabezado conserve su ritmo: negro, rojo, crema, blanco. Antes iba en
   negro solo porque encima había ya una franja roja; al quitarla, el rojo
   vuelve a ser el color de este sitio. */
.pl-volbar {
  position: relative;
  /* flow-root evita que el margen inferior de la barra de avance se escape
     del contenedor: sin esto la barra blanca quedaba pegada al filo. */
  display: flow-root;
  background: var(--pink);
  color: #fff;
}
/* Filete de dos píxeles al pie de la franja, que la separa de la barra de
   contacto. El color le recorre despacio: el ojo capta ese movimiento por el
   rabillo y ahí es donde mira. */
.pl-volbar::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.25), #fff, #ffd9dd, #fff, rgba(255,255,255,.25));
  background-size: 300% 100%;
  animation: plVolFilete 6s linear infinite;
}
@keyframes plVolFilete {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}
/* En el tope la franja entera se vuelve verde y el filete se queda quieto:
   ya no hay que llamar la atención, solo confirmar. */
.pl-volbar--tope { background: #3d8b40; }
.pl-volbar--tope::after {
  background: rgba(255,255,255,.45);
  animation: none;
}
.pl-volbar[hidden] { display: none; }

/* Todo centrado y en dos alturas: el aviso arriba, su avance debajo. La
   franja necesita alto de sobra o la barra blanca queda pegada al filo y se
   pierde contra el rojo. */
.pl-volbar-in {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px 0;
}
.pl-volbar-ico { flex: none; display: flex; color: rgba(255,255,255,.9); }
.pl-volbar-ico svg { width: 17px; height: 17px; }

.pl-volbar-txt {
  font-family: var(--sans); font-size: 13.5px; font-weight: 400;
  color: rgba(255,255,255,.85); letter-spacing: .01em; line-height: 1.35;
  text-align: center;
}
.pl-volbar-txt b { font-weight: 700; color: #fff; }
.pl-volbar-cola { color: rgba(255,255,255,.68); }

/* La barra de avance, centrada bajo el aviso. */
.pl-volbar-barra {
  display: block; width: 260px; max-width: 62vw; height: 7px;
  margin: 10px auto 15px; border-radius: 999px;
  background: rgba(255,255,255,.28); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.pl-volbar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: #fff;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
/* Sin barra —carrito vacío— el aviso necesita su propio hueco abajo. */
.pl-volbar--vacio .pl-volbar-in,
.pl-volbar--tope  .pl-volbar-in { padding-bottom: 13px; }

.pl-volbar--tope .pl-volbar-ico  { color: #fff; }

/* ── La misma barra dentro del cajón del carrito ────────────────────────── */
.pl-drawer .pl-volbar       { flex: none; border-bottom: 0; }
.pl-drawer .pl-volbar-in    { padding: 11px 18px 0; }
.pl-drawer .pl-volbar-txt   { font-size: 12.5px; }
.pl-drawer .pl-volbar-barra { width: 190px; height: 6px; margin: 8px auto 12px; }

@media (max-width: 720px) {
  .pl-volbar-in    { padding: 11px 18px 0; gap: 8px; }
  .pl-volbar-txt   { font-size: 12.5px; }
  .pl-volbar-barra { width: 200px; height: 6px; margin: 8px auto 12px; }
}
@media (max-width: 420px) {
  .pl-volbar-txt   { font-size: 12px; }
  .pl-volbar-cola  { display: none; }
  .pl-volbar-barra { width: 165px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-volbar-fill { transition: none; }
  .pl-volbar::after { animation: none; }
}


/* Dentro del cajón del carrito la franja mantiene el rojo, pero sin el filete
   animado: ahí no compite con nada y el movimiento distraería del pedido. */
.pl-drawer .pl-volbar::after { animation: none; opacity: .5; }

/* ── Tira estrecha del test, bajo el menú en todas las páginas ────────────
   Misma pieza que la franja de la portada, pero de bienvenida: más baja y con
   la letra más pequeña, para invitar sin ocupar media pantalla. */
.pl-quiz-open--slim {
  margin: 0;
  padding: 11px 20px;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: .22em;
  border-top: 0;
  border-bottom: 1px solid rgba(211,16,33,.35);
}
.pl-quiz-open--slim .pl-quiz-open-ico { font-size: 12px; }
.pl-quiz-open--slim .pl-quiz-open-arrow { width: 15px; height: 15px; }
/* El destello recorre la tira algo más rápido: al ser más baja, si tardara
   lo mismo que la de la portada parecería parada. */
.pl-quiz-open--slim::after { animation-duration: 2.6s; }

@media (max-width: 720px) {
  .pl-quiz-open--slim { padding: 10px 14px; font-size: 10.5px; letter-spacing: .16em; gap: 8px; }
  .pl-quiz-open--slim .pl-quiz-open-arrow { width: 14px; height: 14px; }
}
@media (max-width: 420px) {
  .pl-quiz-open--slim { font-size: 10px; letter-spacing: .12em; }
}

/* ── Aviso de soporte de pago (página de gracias) ─────────────────────────
   Va antes que nada porque es lo único que el cliente aún tiene que hacer:
   sin el comprobante su pedido no sale, y si no se lo decimos aquí se entera
   dos días después preguntando por qué no le ha llegado. */
.cf-soporte {
  max-width: 620px; margin: 0 auto 22px;
  background: #fff; border: 1px solid rgba(191,34,51,.28); border-radius: 16px;
  border-left: 4px solid #bf2233;
  padding: 22px 24px 20px;
  box-shadow: 0 20px 44px -34px rgba(22,21,20,.6);
}
.cf-soporte-cab { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 15px; }
.cf-soporte-ico { flex: none; color: #bf2233; display: flex; margin-top: 1px; }
.cf-soporte-tit {
  display: block; font-family: var(--serif); font-size: 20px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
}
.cf-soporte-sub {
  display: block; margin-top: 3px;
  font-size: 13px; line-height: 1.6; color: var(--gray); font-weight: 300;
}
.cf-soporte-sub strong { font-weight: 600; color: var(--ink-soft); }

.cf-soporte-pasos {
  list-style: none; margin: 0 0 17px; padding: 0; counter-reset: cfsop;
  display: flex; flex-direction: column; gap: 9px;
}
.cf-soporte-pasos li {
  counter-increment: cfsop;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); font-weight: 300;
}
.cf-soporte-pasos li::before {
  content: counter(cfsop);
  flex: none; display: grid; place-items: center;
  width: 21px; height: 21px; border-radius: 50%; margin-top: 1px;
  background: rgba(191,34,51,.09); color: #bf2233;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
}
.cf-soporte-pasos strong { font-weight: 600; color: var(--ink); }

/* Verde de WhatsApp: es el botón de una app concreta y el cliente lo busca
   por su color, no por el de la tienda. */
.cf-soporte-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 20px; border-radius: 999px;
  background: #25d366; color: #0b3d1f;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  transition: background .2s, transform .2s;
}
.cf-soporte-btn:hover { background: #1fbb59; color: #0b3d1f; transform: translateY(-1px); }
.cf-soporte-btn:active { transform: none; }

.cf-soporte-pie {
  margin: 13px 0 0; font-size: 12px; line-height: 1.6;
  color: var(--gray); font-weight: 300; text-align: center;
}
.cf-soporte-pie strong { font-weight: 600; color: var(--ink-soft); }

@media (max-width: 560px) {
  .cf-soporte      { padding: 18px 17px 17px; border-radius: 14px; margin-bottom: 18px; }
  .cf-soporte-tit  { font-size: 18px; }
  .cf-soporte-pasos li { font-size: 12.5px; }
  .cf-soporte-btn  { font-size: 12px; letter-spacing: .04em; padding: 13px 16px; }
}
@media (prefers-reduced-motion: reduce) { .cf-soporte-btn:hover { transform: none; } }

/* Contra entrega: mismo bloque que el del soporte pero sin la urgencia del
   rojo. Aquí no hay nada que pagar todavía, solo una confirmación. */
.cf-soporte--cod { border-color: var(--line); border-left-color: var(--ink); }
.cf-soporte--cod .cf-soporte-ico { color: var(--ink); }
.cf-soporte--cod .cf-soporte-pasos li::before { background: var(--paper-2); color: var(--ink-soft); }

/* ── Banner de Addi ───────────────────────────────────────────────────────────
   El plugin lo inserta como hermano del anclaje, justo antes del carrusel de
   «Los más elegidos». Su contenido va en un shadow DOM al que no llega el CSS
   del tema, así que solo se ajusta el elemento que lo contiene: se le quita el
   ancho de pantalla completa para que quede centrado y en franja estrecha.   */
.pl-addi { height: 0; }

addi-home-banner {
	display: block !important;
	max-width: 1040px;
	margin: 34px auto 6px !important;
	padding: 0 20px;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 16px;
}


@media (max-width: 900px) {
	addi-home-banner { margin: 24px auto 6px !important; padding: 0 16px; }
}

@media (max-width: 560px) {
	addi-home-banner { border-radius: 12px; }
}

/* ── Aviso de zona especial de envío ──────────────────────────────────────────
   Sale solo cuando el cliente elige uno de los siete departamentos sin
   cobertura normal. Va en ámbar, no en rojo: informa de una condición, no
   avisa de un error, y el rojo de la tienda ya se usa para otras cosas.     */
.pl-zona-esp {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 20px;
	padding: 15px 17px;
	border: 1px solid #e8c98a;
	border-left: 3px solid #c98a1a;
	border-radius: 6px;
	background: #fdf7ea;
}

.pl-zona-esp-ico   { flex-shrink: 0; color: #b8791a; margin-top: 1px; }
.pl-zona-esp-txt   { min-width: 0; }

.pl-zona-esp-tit {
	display: block;
	margin-bottom: 6px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #7a4e08;
}

.pl-zona-esp-lista {
	margin: 0;
	padding-left: 17px;
	list-style: disc;
}

.pl-zona-esp-lista li {
	font-size: 13px;
	line-height: 1.65;
	color: #6b532b;
}

.pl-zona-esp-lista li + li { margin-top: 4px; }
.pl-zona-esp-lista b      { color: #5a3d05; font-weight: 700; }

@media (max-width: 560px) {
	.pl-zona-esp        { padding: 13px 14px; gap: 10px; }
	.pl-zona-esp-lista li { font-size: 12.5px; }
}

/* Nota bajo la promesa de envío gratis de la portada: la excepción de las
   zonas apartadas, sin quitarle fuerza al titular. */
.pl-ship-nota {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .62);
	text-align: center;
	max-width: 420px;
}

.pl-ship-nota a {
	color: rgba(255, 255, 255, .9);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pl-ship-nota a:hover { color: #fff; }

/* ── Excepción de cobertura ───────────────────────────────────────────────────
   Solo aparece donde el cliente se compromete: la ficha de producto y el
   carrito. Discreta a propósito — informa a quien la necesita sin restarle
   fuerza a la promesa de envío gratis, que es cierta para el resto del país. */
.pl-entrega-zonas,
.pl-drawer-zonas {
	margin: 12px 0 0;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--gray);
	font-weight: 300;
}

.pl-entrega-zonas b,
.pl-drawer-zonas b { color: var(--ink-soft); font-weight: 600; }

.pl-entrega-zonas a,
.pl-drawer-zonas a {
	color: var(--pink);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.pl-entrega-zonas { padding-top: 12px; border-top: 1px solid var(--line-soft); }

.pl-drawer-zonas {
	margin: 10px 0 12px;
	padding-top: 10px;
	border-top: 1px solid var(--line-soft);
	font-size: 11px;
}

/* «Seguir comprando»: la segunda salida del carrito. Discreta frente al botón
   de pagar, pero visible — el carrito ahora se abre solo al añadir y el
   cliente tiene que poder volver al catálogo sin buscar la equis. */
.pl-drawer-seguir {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	margin-top: 10px;
	padding: 11px 12px;
	background: none;
	border: 1px solid var(--line);
	border-radius: 3px;
	font-family: var(--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-soft);
	cursor: pointer;
	transition: border-color .18s, color .18s, background .18s;
}

@media (hover: hover) {
	.pl-drawer-seguir:hover {
		border-color: var(--ink);
		color: var(--ink);
		background: var(--paper-2);
	}
}

.pl-drawer-seguir svg { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   MI CUENTA — escritorio del cliente
   ══════════════════════════════════════════════════════════════════════════ */

.pl-cta { display: flex; flex-direction: column; gap: 26px; }

/* ── Saludo ───────────────────────────────────────────────────────────── */
.pl-cta-hola {
  position: relative; overflow: hidden; border-radius: 4px;
  background:
    radial-gradient(90% 130% at 82% -20%, rgba(var(--pink-rgb), .22) 0%, rgba(var(--pink-rgb), 0) 62%),
    linear-gradient(180deg, #1b1918 0%, #121110 100%);
  color: #f3efec; padding: 30px 34px 32px;
}
.pl-cta-hola::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--pink-deep) 60%, var(--pink));
}
.pl-cta-hola-cap {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(var(--pink-rgb), .55); border-radius: 999px;
  padding: 5px 13px; font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #f08cb4; background: rgba(var(--pink-rgb), .12);
}
.pl-cta-hola-cap svg { width: 12px; height: 12px; }
.pl-cta-hola-tit {
  font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px); font-weight: 400;
  color: #fff; line-height: 1.1; margin: 15px 0 0;
}
.pl-cta-hola-tit strong { font-weight: 600; }
.pl-cta-hola-sub { font-size: 14px; color: rgba(243, 239, 236, .68); margin: 8px 0 0; max-width: 52ch; line-height: 1.6; }
.pl-cta-hola-sellos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; }
.pl-cta-hola-sellos span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(243, 239, 236, .6); letter-spacing: .02em;
}
.pl-cta-hola-sellos svg { width: 15px; height: 15px; color: var(--pink-light); flex-shrink: 0; }

/* ── Cifras ───────────────────────────────────────────────────────────── */
.pl-cta-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pl-cta-cifra {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 18px 12px; text-align: center; text-decoration: none;
  transition: border-color .18s, transform .18s;
}
.pl-cta-cifra:hover { border-color: var(--pink); transform: translateY(-2px); }
.pl-cta-cifra b { font-family: var(--serif); font-size: 32px; font-weight: 500; color: var(--ink); line-height: 1; }
.pl-cta-cifra span { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.pl-cta-cifra.is-vivo b { color: var(--pink); }

/* ── Panel del último pedido ──────────────────────────────────────────── */
.pl-cta-panel {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 24px 26px 26px;
}
.pl-cta-panel-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.pl-cta-panel-tit { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); margin: 0; }
.pl-cta-panel-meta { font-size: 13px; color: var(--gray); display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.pl-cta-panel-meta .amount, .pl-cta-panel-meta bdi { color: var(--ink); font-weight: 500; }
.pl-cta-panel-sep { color: var(--line); }
.pl-cta-panel-num { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--pink); }
.pl-cta-panel-num:hover { color: var(--pink); }

.pl-cta-panel-cuerpo {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin: 22px 0 0; padding: 20px 0 4px; border-top: 1px solid var(--line-soft);
}

/* Miniaturas */
.pl-cta-minis { display: flex; gap: 8px; flex-shrink: 0; }
.pl-cta-mini {
  width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; background: var(--paper-2); display: block; flex-shrink: 0;
}
.pl-cta-mini img, .pl-cta-mini-vacia { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-cta-mini--mas {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--gray); background: var(--paper-2);
}

/* Línea de tiempo */
.pl-cta-pasos {
  list-style: none; margin: 0; padding: 0; flex: 1 1 380px; min-width: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.pl-cta-paso { position: relative; padding: 20px 8px 0 0; text-align: left; }
.pl-cta-paso::before {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--line);
}
.pl-cta-paso:last-child::before { right: calc(100% - 14px); }
.pl-cta-paso.is-hecho::before, .pl-cta-paso.is-actual::before { background: var(--pink); }
.pl-cta-punto {
  position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line); z-index: 1;
}
.pl-cta-paso.is-hecho .pl-cta-punto { background: var(--pink); border-color: var(--pink); }
.pl-cta-paso.is-actual .pl-cta-punto {
  background: var(--pink); border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(var(--pink-rgb), .18);
}
.pl-cta-paso-t { display: block; font-size: 12.5px; font-weight: 600; color: var(--gray); letter-spacing: .01em; }
.pl-cta-paso-d { display: block; font-size: 11px; color: #a09a95; margin-top: 2px; line-height: 1.4; }
.pl-cta-paso.is-hecho .pl-cta-paso-t, .pl-cta-paso.is-actual .pl-cta-paso-t { color: var(--ink); }
.pl-cta-paso.is-actual .pl-cta-paso-d { color: var(--pink); }

.pl-cta-detenido {
  flex: 1 1 320px; font-size: 13px; color: var(--ink-soft); margin: 0;
  background: #fdf3f5; border-left: 3px solid var(--pink); padding: 12px 14px; line-height: 1.6;
}

/* Guía de rastreo */
.pl-cta-guia {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding: 15px 18px; border-radius: 4px;
  background: var(--paper-2); border: 1px solid var(--line);
}
.pl-cta-guia--pendiente { background: #fffaf2; border-color: #f0e2cd; }
.pl-cta-guia-ico { flex-shrink: 0; }
.pl-cta-guia-ico svg { width: 24px; height: 24px; color: var(--pink); display: block; }
.pl-cta-guia-datos { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-cta-guia-datos b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pl-cta-guia-datos span { font-size: 12.5px; color: var(--gray); }
.pl-cta-guia-datos code {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px;
}
.pl-cta-guia-btn {
  flex-shrink: 0; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: 10px 18px; border-radius: 3px; transition: background .18s;
}
.pl-cta-guia-btn:hover { background: var(--pink); color: #fff; }

/* Botones del panel */
.pl-cta-panel-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pl-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 3px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.pl-cta-btn:hover { border-color: var(--ink); background: var(--paper-2); color: var(--ink); }
.pl-cta-btn--fuerte { background: var(--pink); border-color: var(--pink); color: #fff; }
.pl-cta-btn--fuerte:hover { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; }
.pl-cta-btn--wa { border-color: #25d366; color: #128c47; }
.pl-cta-btn--wa:hover { background: #25d366; border-color: #25d366; color: #fff; }
.pl-cta-btn--wa svg { width: 16px; height: 16px; flex-shrink: 0; }
.pl-cta-btn--grande { padding: 15px 26px; font-size: 12.5px; flex-shrink: 0; }

/* Panel vacío */
.pl-cta-panel--vacio { text-align: center; padding: 44px 26px 46px; }
.pl-cta-vacio-ico svg { width: 52px; height: 52px; color: var(--line); }
.pl-cta-panel--vacio .pl-cta-panel-tit { margin: 14px 0 6px; }
.pl-cta-panel--vacio p { font-size: 13.5px; color: var(--gray); margin: 0 auto 22px; max-width: 44ch; line-height: 1.65; }

/* ── Accesos rápidos ──────────────────────────────────────────────────── */
.pl-cta-accesos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pl-cta-acceso {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 20px 18px 18px; text-decoration: none;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.pl-cta-acceso:hover {
  border-color: var(--pink); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 21, 20, .06);
}
.pl-cta-acceso-ico { margin-bottom: 6px; }
.pl-cta-acceso-ico svg { width: 26px; height: 26px; color: var(--pink); display: block; }
.pl-cta-acceso b { font-size: 14px; font-weight: 600; color: var(--ink); }
.pl-cta-acceso-d { font-size: 12px; color: var(--gray); line-height: 1.5; }
.pl-cta-acceso-n {
  position: absolute; top: 16px; right: 16px; min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
  border-radius: 999px; background: var(--paper-2); color: var(--ink-soft);
  font-size: 11.5px; font-weight: 600;
}

/* ── Ayuda ────────────────────────────────────────────────────────────── */
.pl-cta-ayuda {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 24px 26px;
}
.pl-cta-ayuda-txt { flex: 1 1 340px; min-width: 0; }
.pl-cta-ayuda-txt h3 { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--ink); margin: 0 0 6px; }
.pl-cta-ayuda-txt p { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.65; max-width: 56ch; }
.pl-cta-ayuda-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.pl-cta-ayuda-links a {
  font-size: 12.5px; color: var(--gray); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 1px;
}
.pl-cta-ayuda-links a:hover { color: var(--pink); border-bottom-color: var(--pink); }

.pl-cta-salir { font-size: 12.5px; color: var(--gray); text-align: center; margin: 0; }
.pl-cta-salir strong { color: var(--ink-soft); font-weight: 600; }
.pl-cta-salir a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }

/* Estados de pedido que añaden los plugins de pago */
.pl-order-status--pago-enviado  { background: #e3f2fd; color: #1565c0; }
.pl-order-status--addi-approved { background: #e8f5e9; color: #2e7d32; }
.pl-order-status--addi-declined { background: #fce4ec; color: #c62828; }
.pl-order-status--refunded      { background: #ede7f6; color: #5e35b1; }
.pl-order-status--failed        { background: #fce4ec; color: #c62828; }

/* ── Móvil ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pl-cta-accesos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pl-cta { gap: 20px; }
  .pl-cta-hola { padding: 24px 20px 26px; }
  .pl-cta-hola-sellos { flex-direction: column; gap: 7px; }
  .pl-cta-cifras { gap: 8px; }
  .pl-cta-cifra { padding: 14px 6px; }
  .pl-cta-cifra b { font-size: 26px; }
  .pl-cta-cifra span { font-size: 10px; letter-spacing: .04em; }
  .pl-cta-panel { padding: 20px 18px 22px; }
  .pl-cta-panel-cuerpo { gap: 18px; }

  /* La línea de tiempo pasa a vertical: en pantalla estrecha se lee mejor. */
  .pl-cta-pasos { grid-template-columns: 1fr; gap: 0; }
  .pl-cta-paso { padding: 0 0 18px 26px; text-align: left; }
  .pl-cta-paso:last-child { padding-bottom: 0; }
  .pl-cta-paso::before {
    top: 14px; bottom: -4px; left: 6px; right: auto; width: 2px; height: auto;
  }
  .pl-cta-paso:last-child::before { display: none; }
  .pl-cta-punto { top: 0; left: 0; }
  .pl-cta-panel-btns .pl-cta-btn { flex: 1 1 100%; }
  .pl-cta-guia-btn { width: 100%; text-align: center; }
  .pl-cta-ayuda { padding: 20px 18px; }
  .pl-cta-btn--grande { width: 100%; }
}
@media (max-width: 460px) {
  .pl-cta-accesos { grid-template-columns: 1fr; }
  .pl-cta-mini { width: 46px; height: 46px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   QUÉ SON LAS FRAGANCIAS INSPIRADAS
   ══════════════════════════════════════════════════════════════════════════ */

.pl-fi { max-width: 940px; margin: 0 auto; padding: 0 24px 84px; }

/* ── Portada ──────────────────────────────────────────────────────────── */
.pl-fi-hero { text-align: center; padding: 58px 0 0; }
.pl-fi-title {
  font-family: var(--serif); font-size: clamp(32px, 5vw, 54px); font-weight: 400;
  color: var(--ink); line-height: 1.08; margin: 14px 0 0; letter-spacing: .005em;
}
.pl-fi-lead {
  font-size: 15.5px; color: var(--ink-soft); line-height: 1.75;
  max-width: 60ch; margin: 16px auto 0;
}
.pl-fi-rule {
  display: block; width: 54px; height: 2px; margin: 30px auto 0;
  background: linear-gradient(90deg, var(--pink), var(--pink-deep));
}

/* ── La definición ────────────────────────────────────────────────────── */
.pl-fi-def {
  margin: 46px 0 0; padding: 34px 38px; border-radius: 4px;
  background: var(--paper-2); border-left: 3px solid var(--pink);
}
.pl-fi-def-txt {
  font-family: var(--serif); font-size: clamp(20px, 2.6vw, 27px); font-weight: 400;
  color: var(--ink); line-height: 1.45; margin: 0;
}
.pl-fi-def-txt b { font-weight: 600; }
.pl-fi-def-pie {
  font-size: 14px; color: var(--gray); line-height: 1.7;
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
}

/* ── Bloques ──────────────────────────────────────────────────────────── */
.pl-fi-bloque { margin-top: 58px; }
.pl-fi-h2 {
  font-family: var(--serif); font-size: clamp(24px, 3.2vw, 32px); font-weight: 400;
  color: var(--ink); margin: 0 0 6px; text-align: center;
}
.pl-fi-sub { font-size: 14px; color: var(--gray); text-align: center; margin: 0 auto 26px; max-width: 56ch; line-height: 1.7; }
.pl-fi-h2 + .pl-fi-pasos, .pl-fi-h2 + .pl-fi-faq { margin-top: 28px; }

/* ── Los tres pasos ───────────────────────────────────────────────────── */
.pl-fi-pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.pl-fi-paso {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 4px; padding: 26px 22px 24px;
}
.pl-fi-paso-n {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--serif); font-size: 34px; line-height: 1;
  color: var(--paper-3); font-weight: 500;
}
.pl-fi-paso-ico svg { width: 26px; height: 26px; color: var(--pink); display: block; }
.pl-fi-paso-tit { font-size: 15px; font-weight: 600; color: var(--ink); margin: 14px 0 7px; line-height: 1.35; }
.pl-fi-paso-txt { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin: 0; }

/* ── Aviso sobre las marcas ───────────────────────────────────────────── */
.pl-fi-marcas {
  position: relative; overflow: hidden; border-radius: 4px;
  margin-top: 58px; padding: 40px 44px 42px; text-align: center;
  background:
    radial-gradient(90% 140% at 80% -20%, rgba(var(--pink-rgb), .20) 0%, rgba(var(--pink-rgb), 0) 62%),
    linear-gradient(180deg, #1b1918 0%, #121110 100%);
  color: #f3efec;
}
.pl-fi-marcas::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--pink-deep) 60%, var(--pink));
}
.pl-fi-marcas-ico svg { width: 34px; height: 34px; color: var(--pink-light); display: block; margin: 0 auto; }
.pl-fi-marcas-tit {
  font-family: var(--serif); font-size: clamp(24px, 3.4vw, 34px); font-weight: 400;
  color: #fff; margin: 16px 0 14px;
}
.pl-fi-marcas-txt {
  font-size: 15.5px; line-height: 1.85; color: rgba(243, 239, 236, .84);
  max-width: 62ch; margin: 0 auto; text-wrap: pretty;
}

/* ── Preguntas frecuentes ─────────────────────────────────────────────── */
.pl-fi-faq { border-top: 1px solid var(--line); }
.pl-fi-faq-item { border-bottom: 1px solid var(--line); }
.pl-fi-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 2px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.45;
  transition: color .18s;
}
.pl-fi-faq-item summary::-webkit-details-marker { display: none; }
.pl-fi-faq-item summary:hover { color: var(--pink); }
.pl-fi-faq-item summary svg { width: 12px; height: 8px; flex-shrink: 0; color: var(--gray); transition: transform .22s; }
.pl-fi-faq-item[open] summary { color: var(--pink); }
.pl-fi-faq-item[open] summary svg { transform: rotate(180deg); color: var(--pink); }
.pl-fi-faq-r { padding: 0 2px 18px; }
.pl-fi-faq-r p { font-size: 14px; color: var(--ink-soft); line-height: 1.75; margin: 0 0 10px; }
.pl-fi-faq-r p:last-child { margin-bottom: 0; }
.pl-fi-faq-mas { text-align: center; margin: 24px 0 0; font-size: 13.5px; }
.pl-fi-faq-mas a {
  color: var(--gray); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.pl-fi-faq-mas a:hover { color: var(--pink); border-bottom-color: var(--pink); }

/* ── Cierre ───────────────────────────────────────────────────────────── */
.pl-fi-cta { text-align: center; margin-top: 58px; padding: 38px 24px 40px; background: var(--paper-2); border-radius: 4px; }
.pl-fi-cta-tit { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); font-weight: 400; color: var(--ink); margin: 0 0 8px; }
.pl-fi-cta-txt { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; margin: 0 auto 24px; max-width: 52ch; }
.pl-fi-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pl-fi-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: 3px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: background .18s, color .18s, border-color .18s;
}
.pl-fi-btn:hover { background: var(--ink); color: #fff; }
.pl-fi-btn--fuerte { background: var(--pink); border-color: var(--pink); color: #fff; }
.pl-fi-btn--fuerte:hover { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; }

.pl-fi-editor { font-size: 14.5px; color: var(--ink-soft); line-height: 1.8; }

/* ── Móvil ────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .pl-fi-pasos { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pl-fi { padding: 0 18px 60px; }
  .pl-fi-hero { padding-top: 40px; }
  .pl-fi-def { padding: 26px 22px; }
  .pl-fi-bloque { margin-top: 44px; }
  .pl-fi-marcas { margin-top: 44px; padding: 32px 22px 34px; }
  .pl-fi-marcas-txt { font-size: 14.5px; }
  .pl-fi-cta { margin-top: 44px; padding: 30px 18px 32px; }
  .pl-fi-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   AJUSTE: recuperar el menú completo entre 1200px y 1370px
   ------------------------------------------------------------------
   El bloque de arriba (max-width: 1370px) escondía el menú en cuanto
   la pantalla bajaba de 1370. Eso dejaba fuera los portátiles de
   1366px —los más habituales— y cualquier monitor con el escalado de
   Windows al 125% o 150%.
   Apretando el interletrado, el hueco entre enlaces y el logo, el menú
   pasa a necesitar ~1130px, así que cabe de sobra a partir de 1200.
   Por debajo de 1200 sigue entrando la hamburguesa, como antes.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) and (max-width: 1370px) {
  .pl-nav--left           { display: flex; margin-left: 22px; gap: 15px; }
  .pl-mob-toggle          { display: none; }
  .pl-header              { grid-template-columns: auto max-content minmax(0, 1fr); padding: 18px 24px; }
  .pl-header.is-scrolled  { padding: 10px 24px; }
  .pl-header .pl-logo     { justify-self: start; }
  .pl-header .pl-logo img { width: 104px; min-width: 104px; }
  .pl-nav-link            { font-size: 11px; letter-spacing: .07em; }
  .pl-header .pl-search   { flex: 0 1 200px; min-width: 130px; margin-left: 0; }
  .pl-nav--right          { gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   Accesibilidad: área pulsable de los puntos de los carruseles
   ------------------------------------------------------------------
   Los puntitos miden 6 y 7 px. El mínimo para un dedo son 24 px, y
   Lighthouse lo marcaba como fallo. Se les añade un área invisible de
   24x24 con un pseudo-elemento y se separa lo justo para que las áreas
   de dos puntos vecinos no se pisen (paso total = 24 px).
   El aspecto visible NO cambia: siguen midiendo 6 y 7 px.
   ══════════════════════════════════════════════════════════════════ */
.pl-hs-dots  { gap: 18px; }
.pl-testi-dots { gap: 17px; }

.pl-hs-dot,
.pl-testi-dot { position: relative; }

.pl-hs-dot::after,
.pl-testi-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* ══════════════════════════════════════════════════════════════════
   Contraste: textos sobre fondo oscuro y sobre la barra roja
   ------------------------------------------------------------------
   Cuatro rótulos se quedaban por debajo del mínimo de 4,5:1. Ojo con
   el rojo del apartado «Compra con confianza»: sobre fondo negro hace
   falta un rojo MÁS CLARO, no más oscuro como en el resto de la web.
   Medido sobre la web real; entre paréntesis, el contraste resultante.
   ══════════════════════════════════════════════════════════════════ */
.pl-volbar-txt     { color: #ffe9e9; }                  /* 4,21 -> 4,56 sobre el rojo  */
.pl-ostep-num      { color: #827973; }                  /* 3,37 -> 4,53 sobre casi negro */
.pl-eyebrow--light { color: #ec3a3a; }                  /* 2,78 -> 4,56 sobre negro     */
.pl-guar-sub       { color: rgba(243, 239, 236, .56); } /* 4,10 -> 4,9  sobre negro     */

/* ══════════════════════════════════════════════════════════════════
   Contraste: últimos cuatro rótulos sobre fondo oscuro
   ------------------------------------------------------------------
   Contrastes medidos sobre la web real, antes -> después.
   ══════════════════════════════════════════════════════════════════ */
.pl-guar-desc        { color: rgba(243, 239, 236, .56); }  /* 4,09 -> 5,68 */
.pl-footer-pay-label { color: #8b7f79; }                   /* 2,37 -> 4,52 */
.pl-footer-bottom    { color: #8c817c; }                   /* 3,94 -> 4,64 sobre el #1b1917 real */

/* El número de paso (01, 02, 03…) lleva una animación que le cambia el
   color en cada fotograma, así que declarar `color` no sirve de nada:
   la animación gana siempre. Hay que redefinir los fotogramas.
   Se conserva el efecto —gris, destello rojo, gris— y solo se aclara el
   gris hasta que pasa. El rojo #ff5a52 ya pasaba con 6,28. */
@media (max-width: 640px) {
  @keyframes plStepNumMob {
    0%        { color: #827973; }   /* 3,37 -> 4,53 */
    6%, 25%   { color: #ff5a52; }   /* sin cambio    */
    32%, 100% { color: #827973; }
  }
}

/* ══════════════════════════════════════════════════════════════════
   Últimos avisos de axe-core (el motor que usa Lighthouse)
   ══════════════════════════════════════════════════════════════════ */

/* El precio tachado usaba var(--gray) al 55 % de opacidad, lo que sobre
   el blanco de la tarjeta daba #b1adac: contraste 2,22 con 18,5 px de
   letra. Para pasar el 4,5 haría falta subir la opacidad a 0,94, así que
   se quita: el gris a plena opacidad da 5,30 y sigue leyéndose como
   secundario gracias al tachado y al tamaño menor. */
.pl-card-price--clean del { opacity: 1; }

/* Texto solo para lectores de pantalla. La aporta WooCommerce, pero se
   define también aquí: si su hoja no cargara, el texto se vería
   duplicado en pantalla. Definición estándar de WordPress. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ══════════════════════════════════════════════════════════════════
   Red de seguridad del interruptor PL_OCULTAR_VALORACIONES
   ------------------------------------------------------------------
   El PHP ya no imprime las estrellas de producto. Esta regla las oculta
   además por CSS por si algún sitio que no se haya contemplado las
   pintara. Solo afecta a las de PRODUCTO (tarjetas y ficha), no a las
   del carrusel de testimonios. Si se reactivan las valoraciones, quitar
   también este bloque.
   ══════════════════════════════════════════════════════════════════ */
.pl-card .pl-stars,
.pl-stars--lg { display: none !important; }