/* ============================================================
   Punto Graphic — Tienda online
   Portado del mockup "Tienda Punto Graphic v2" (Claude Design).

   Convención: todo va prefijado .pgt- y colgando de body.pgt, para que
   nada se filtre al checkout, a las landings ni al hub.
   ============================================================ */

body.pgt {
  --pgt-bg: #faf7f3;
  --pgt-surface: #fff;
  --pgt-ink: #102e3e;
  --pgt-ink-2: #3b5563;
  --pgt-ink-3: #7790a0;
  --pgt-line: #e9e0d6;
  --pgt-line-2: #e2d8cc;
  --pgt-brand: #0f7fae;
  --pgt-brand-2: #13a3c2;
  --pgt-pale: #eaf6fa;
  --pgt-pale-line: #cfe6ee;
  --pgt-deep: #145976;
  --pgt-ph: #efe7dd;
  --pgt-gold: #f2c14e;
  --pgt-ok: #16a34a;
  --pgt-wa: #2a9d5c;
  --pgt-wa-sombra: 42,157,92;
  --pgt-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --pgt-serif: 'Instrument Serif', Georgia, serif;
  --pgt-mono: 'JetBrains Mono', ui-monospace, monospace;
  --pgt-ease: cubic-bezier(.22, .9, .28, 1);
  --pgt-max: 1240px;

  margin: 0;
  background: var(--pgt-bg);
  font-family: var(--pgt-sans);
  font-size: 16px;
  color: var(--pgt-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.pgt *,
body.pgt *::before,
body.pgt *::after { box-sizing: border-box; }

body.pgt a { text-decoration: none; color: var(--pgt-brand); }
body.pgt a:hover { color: var(--pgt-brand-2); }
body.pgt img { max-width: 100%; height: auto; display: block; }
body.pgt input, body.pgt select, body.pgt button, body.pgt textarea { font-family: inherit; }
body.pgt ::selection { background: #bfe9f2; }
body.pgt :focus-visible { outline: 2px solid var(--pgt-brand-2); outline-offset: 2px; }

/* El pill flotante del drawer duplicaría el botón "Mi pedido" del header,
   y encima se le pone arriba. En la tienda mandamos el del header. */
body.pgt #pgdwPill { display: none !important; }
/* ── Blindaje contra la tipografía global del tema ─────────
   Las landings no sufren esto porque no llaman a wp_head(); la tienda SÍ lo
   llama (necesita los scripts de Woo, el drawer y los píxeles), y con eso
   entran Hello Elementor, el kit de Elementor y el CSS del Personalizador.

   Subir la especificidad no basta: una propiedad que este archivo NO declara
   —text-transform, letter-spacing, font-style— la sigue ganando el tema aunque
   su selector sea más débil. Por eso hay que anularlas explícitamente acá y
   dejar que cada componente vuelva a fijar la suya más abajo. */
body.pgt h1, body.pgt h2, body.pgt h3, body.pgt h4, body.pgt h5, body.pgt h6 {
  /* `inherit` y NO el color de tinta: un color declarado le gana siempre a uno
     heredado, así que fijar la tinta acá dejaba los titulares oscuros incluso
     dentro de bloques con fondo oscuro y `color:#fff` (pasó con el bloque de
     cierre de la portada). Heredando, cada titular toma el color de su
     superficie y el reset sigue ganándole al tema igual. */
  margin: 0; padding: 0; color: inherit;
  font-family: var(--pgt-sans); font-weight: 800; font-style: normal;
  text-transform: none; letter-spacing: normal; line-height: 1.2;
}
body.pgt p { margin: 0; text-transform: none; letter-spacing: normal; }
body.pgt a, body.pgt button, body.pgt input, body.pgt select, body.pgt textarea, body.pgt label, body.pgt span, body.pgt em, body.pgt b, body.pgt strong {
  text-transform: none; letter-spacing: normal;
}
body.pgt button {
  margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font-size: inherit; line-height: inherit; text-align: inherit;
}
body.pgt em { font-style: italic; }
body.pgt b, body.pgt strong { font-weight: 700; }
body.pgt ul, body.pgt ol { margin: 0; padding: 0; list-style: none; }

@keyframes pgtUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pgtRain { 0% { transform: translateY(-40px) rotate(0); } 100% { transform: translateY(760px) rotate(260deg); } }
@keyframes pgtFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pgtMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pgtSpin { to { transform: rotate(360deg); } }
@keyframes pgtBurst { 0% { transform: translate3d(0,0,0) rotate(0); opacity: 1; } 12% { opacity: 1; } 100% { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); opacity: 0; } }
@keyframes pgtPop { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

body.pgt .pgt-wrap { max-width: var(--pgt-max); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
body.pgt .pgt-rise { animation: pgtUp .9s var(--pgt-ease) both; }
body.pgt .pgt-eyebrow { font-family: var(--pgt-mono); font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--pgt-brand); }
body.pgt .pgt-crumb { font-family: var(--pgt-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--pgt-ink-3); }
body.pgt .pgt-crumb a { color: inherit; }
body.pgt .pgt-h2 { margin: 0; font-family: var(--pgt-serif); font-weight: 400; font-size: 38px; letter-spacing: -.015em; line-height: 1.12; }
body.pgt .pgt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Barra de avisos ─────────────────────────────────────── */
body.pgt .pgt-avisos { background: var(--pgt-deep); color: #fff; overflow: hidden; }
body.pgt .pgt-avisos-tira { display: flex; width: max-content; padding: 12px 0; animation: pgtMarquee 42s linear infinite; }
body.pgt .pgt-avisos-set { display: flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
body.pgt .pgt-avisos-set b { font-weight: 800; }
body.pgt .pgt-sep { color: #7fd6e6; letter-spacing: 0; font-size: 13px; }

/* ── Header ──────────────────────────────────────────────── */
body.pgt .pgt-header { position: sticky; top: 0; z-index: 50; background: rgba(250,247,243,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--pgt-line); }
body.pgt .pgt-header-top { max-width: var(--pgt-max); margin: 0 auto; padding: 11px 24px 0; display: flex; align-items: center; gap: 16px; }
body.pgt .pgt-header-spacer { flex: none; width: 118px; }
body.pgt .pgt-brand { margin: 0 auto; display: grid; place-items: center; width: 62px; height: 62px; position: relative; flex: none; }
body.pgt .pgt-brand-glow { position: absolute; inset: 5px; border-radius: 50%; background: linear-gradient(135deg, #4ec9dd, #4a90d6); opacity: .22; }
body.pgt .pgt-brand-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed #bfe0ea; animation: pgtSpin 34s linear infinite; }
body.pgt .pgt-brand img { position: relative; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 6px 16px rgba(19,163,194,.28); }
body.pgt .pgt-brand-mono { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--pgt-brand); color: #fff; font-family: var(--pgt-serif); font-size: 21px; letter-spacing: .02em; box-shadow: 0 6px 16px rgba(19,163,194,.28); }
body.pgt .pgt-cart { flex: none; height: 34px; padding: 0 5px 0 14px; border-radius: 999px; border: none; background: var(--pgt-ink); color: #fff; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: 0 10px 24px rgba(16,46,62,.22); transition: transform .22s var(--pgt-ease); }
body.pgt .pgt-cart:hover { transform: translateY(-2px); }
body.pgt .pgt-cart-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
body.pgt .pgt-cart-n.on { background: var(--pgt-brand-2); }
body.pgt .pgt-nav { max-width: var(--pgt-max); margin: 0 auto; padding: 9px 24px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; }
body.pgt .pgt-nav-l { padding: 0 2px 5px; color: var(--pgt-ink-2); font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
body.pgt .pgt-nav-l:hover, body.pgt .pgt-nav-l.on { color: var(--pgt-brand); border-bottom-color: var(--pgt-brand-2); }

/* ── Recuadro de producto con landing propia ─────────────── */
/* El Libro de Buenos Deseos y las Tarjetas Raspa y Gana se venden desde su
   propia landing, así que en la portada van en un recuadro grande —foto a un
   lado, precio y botón al otro— que lleva allá y no a la ficha. */
body.pgt .pgt-destacados { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
body.pgt .pgt-dest { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); background: var(--pgt-surface); border: 1px solid #ece4da; border-radius: 24px; overflow: hidden; color: var(--pgt-ink); box-shadow: 0 1px 3px rgba(16,46,62,.04); transition: transform .3s var(--pgt-ease), box-shadow .3s, border-color .3s; }
body.pgt .pgt-dest:hover { transform: translateY(-7px); box-shadow: 0 28px 54px rgba(16,46,62,.17); border-color: var(--pgt-pale-line); color: var(--pgt-ink); }
body.pgt .pgt-dest-img { display: block; background: var(--pgt-ph); overflow: hidden; }
body.pgt .pgt-dest-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--pgt-ease); }
body.pgt .pgt-dest:hover .pgt-dest-img img { transform: scale(1.06); }
body.pgt .pgt-dest-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; }
body.pgt .pgt-dest-body b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.22; text-wrap: pretty; }
body.pgt .pgt-dest-copy { font-size: 13.5px; line-height: 1.55; color: var(--pgt-ink-2); text-wrap: pretty; }
/* Precio arriba y botón abajo: en una fila, la tarjeta con el precio más
   largo lo empujaba a otra línea y las dos quedaban distintas. */
body.pgt .pgt-dest-pie { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
body.pgt .pgt-dest-precio { font-size: 12.5px; color: var(--pgt-ink-3); }
body.pgt .pgt-dest-precio b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--pgt-ink); }
body.pgt .pgt-dest-cta { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--pgt-ink); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: background .25s; }
body.pgt .pgt-dest:hover .pgt-dest-cta { background: var(--pgt-brand); }

/* ── Tarjeta de producto ─────────────────────────────────── */
body.pgt .pgt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
body.pgt .pgt-grid.cols-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
body.pgt .pgt-card { border: 1px solid #ece4da; background: var(--pgt-surface); border-radius: 24px; overflow: hidden; padding: 9px; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(16,46,62,.04); transition: transform .3s var(--pgt-ease), box-shadow .3s, border-color .3s; }
body.pgt .pgt-card:hover { transform: translateY(-7px); box-shadow: 0 28px 54px rgba(16,46,62,.17); border-color: var(--pgt-pale-line); }
body.pgt .pgt-card-img { display: block; width: 100%; background: var(--pgt-ph); aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; }
body.pgt .pgt-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--pgt-ease); }
body.pgt .pgt-card:hover .pgt-card-img img { transform: scale(1.06); }
body.pgt .pgt-card-body { padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
body.pgt .pgt-card-badges { display: flex; flex-wrap: wrap; gap: 5px; }
body.pgt .pgt-badge { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
body.pgt .pgt-badge.mas-vendido { background: #f4633a; color: #fff; }
body.pgt .pgt-badge.personalizable { background: var(--pgt-pale); color: var(--pgt-deep); }
body.pgt .pgt-badge.digital { background: #ece5f8; color: #5b3fa8; }
body.pgt .pgt-card-cat { font-family: var(--pgt-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pgt-ink-3); }
/* El nombre se corta a dos líneas: con títulos largos, una tarjeta crecía
   hacia abajo y desalineaba el precio de toda la fila. */
body.pgt .pgt-card-nom { font-size: 15px; font-weight: 700; letter-spacing: -.015em; color: var(--pgt-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.pgt .pgt-card-nom:hover { color: var(--pgt-brand); }
body.pgt .pgt-card.serif .pgt-card-nom { font-family: var(--pgt-serif); font-weight: 400; font-size: 20px; letter-spacing: -.015em; line-height: 1.2; text-wrap: pretty; }

/* Bloque de plata: precio, cuotas, envío y letra chica. Pegado abajo con
   margin-top:auto para que quede a la misma altura en toda la fila. */
body.pgt .pgt-card-pie { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 3px; }
body.pgt .pgt-card-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
body.pgt .pgt-card-precio i { font-style: normal; font-size: 12px; color: var(--pgt-ink-2); }
body.pgt .pgt-card-precio b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
body.pgt .pgt-card-precio span { font-size: 11.5px; color: var(--pgt-ink-3); }
body.pgt .pgt-card-cuotas { font-size: 12.5px; color: var(--pgt-ok); line-height: 1.35; }
body.pgt .pgt-card-envio { font-size: 12.5px; color: var(--pgt-ok); line-height: 1.35; }
body.pgt .pgt-card-envio b { font-weight: 700; }
body.pgt .pgt-card-meta { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; font-size: 11.5px; color: var(--pgt-ink-3); }
body.pgt .pgt-vacio { border: 1px dashed #d8cec1; border-radius: 18px; padding: 44px; text-align: center; color: var(--pgt-ink-2); grid-column: 1 / -1; }
body.pgt .pgt-vacio b { display: block; font-size: 17px; margin-bottom: 6px; }
body.pgt .pgt-vacio span { font-size: 14px; }

/* ── Botones ─────────────────────────────────────────────── */
body.pgt .pgt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: none; border-radius: 14px; background: var(--pgt-brand); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px rgba(15,127,174,.28); transition: transform .22s var(--pgt-ease), background .2s, box-shadow .22s; }
body.pgt .pgt-btn:hover { background: var(--pgt-brand-2); color: #fff; transform: translateY(-3px); box-shadow: 0 18px 34px rgba(15,127,174,.34); }
body.pgt .pgt-btn-2 { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 24px; border: 1.5px solid #d8cec1; border-radius: 14px; background: var(--pgt-surface); color: var(--pgt-ink); font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .22s var(--pgt-ease), border-color .2s, color .2s; }
body.pgt .pgt-btn-2:hover { border-color: var(--pgt-brand-2); color: var(--pgt-brand); transform: translateY(-3px); }
body.pgt .pgt-btn-sm { height: 44px; padding: 0 20px; border: 1.5px solid #d8cec1; border-radius: 12px; background: transparent; color: var(--pgt-ink); font-size: 13.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; }
body.pgt .pgt-btn-sm:hover { border-color: var(--pgt-brand-2); color: var(--pgt-brand); }

/* ── Portada: hero ───────────────────────────────────────── */
body.pgt .pgt-hero { position: relative; overflow: hidden; max-width: var(--pgt-max); margin: 0 auto; padding: 52px 24px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 44px; align-items: center; }
body.pgt .pgt-lluvia { position: absolute; inset: -60px 0 -40px; z-index: 0; overflow: hidden; pointer-events: none; }
body.pgt .pgt-lluvia span { position: absolute; }
body.pgt .pgt-hero-txt { position: relative; }
body.pgt .pgt-hero h1 { margin: 16px 0 0; font-family: var(--pgt-serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.04; letter-spacing: -.02em; }
body.pgt .pgt-hero h1 em { font-style: italic; color: var(--pgt-brand); }
body.pgt .pgt-hero p { margin: 22px 0 0; font-size: 17px; line-height: 1.65; color: var(--pgt-ink-2); max-width: 52ch; text-wrap: pretty; }
body.pgt .pgt-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
body.pgt .pgt-hero-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--pgt-line); }
body.pgt .pgt-hero-stats span { font-size: 13px; color: var(--pgt-ink-2); line-height: 1.5; }
body.pgt .pgt-hero-stats b { display: block; font-size: 20px; font-family: var(--pgt-serif); font-weight: 400; }
body.pgt .pgt-hero-media { position: relative; z-index: 1; }
body.pgt .pgt-hero-sello { position: absolute; top: -22px; right: -16px; z-index: 3; width: 104px; height: 104px; display: grid; place-items: center; }
body.pgt .pgt-hero-sello i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed #b9dbe6; animation: pgtSpin 26s linear infinite; }
body.pgt .pgt-hero-sello u { position: absolute; inset: 9px; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px rgba(16,46,62,.14); }
body.pgt .pgt-hero-sello span { position: relative; font-family: var(--pgt-serif); font-size: 14px; line-height: 1.15; text-align: center; color: var(--pgt-brand); }
body.pgt .pgt-hero-foto { border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(16,46,62,.18); aspect-ratio: 4/5; background: var(--pgt-ph); }
body.pgt .pgt-hero-foto img { width: 100%; height: 100%; object-fit: cover; }
body.pgt .pgt-hero-pin { position: absolute; bottom: -22px; left: -18px; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 18px 40px rgba(16,46,62,.2); display: flex; align-items: center; gap: 13px; animation: pgtFloat 6.5s ease-in-out infinite; color: var(--pgt-ink); }
body.pgt .pgt-hero-pin i { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex: none; background: var(--pgt-ph); }
body.pgt .pgt-hero-pin i img { width: 100%; height: 100%; object-fit: cover; }
body.pgt .pgt-hero-pin em { display: block; font-family: var(--pgt-mono); font-size: 9px; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--pgt-ink-3); }
body.pgt .pgt-hero-pin b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; margin-top: 3px; }
body.pgt .pgt-hero-pin u { display: block; font-size: 12.5px; color: var(--pgt-brand); font-weight: 700; margin-top: 2px; text-decoration: none; }

/* ── Portada: marquee serif ──────────────────────────────── */
body.pgt .pgt-tira { margin-top: 56px; background: #fff; border-top: 1px solid var(--pgt-line); border-bottom: 1px solid var(--pgt-line); overflow: hidden; }
body.pgt .pgt-tira-in { display: flex; width: max-content; padding: 15px 0; animation: pgtMarquee 46s linear infinite; }
body.pgt .pgt-tira-set { display: flex; align-items: center; gap: 30px; padding-right: 30px; font-family: var(--pgt-serif); font-size: 23px; color: var(--pgt-ink); white-space: nowrap; }
body.pgt .pgt-tira-set i { font-style: italic; color: var(--pgt-brand); }
body.pgt .pgt-tira-set s { color: var(--pgt-brand-2); text-decoration: none; }

/* ── Portada: secciones ──────────────────────────────────── */
body.pgt .pgt-sec { max-width: var(--pgt-max); margin: 0 auto; padding: 70px 24px 0; }
body.pgt .pgt-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
body.pgt .pgt-sec-head h2 { margin: 12px 0 0; }
body.pgt .pgt-nota { font-size: 13.5px; color: var(--pgt-ink-3); }

body.pgt .pgt-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
body.pgt .pgt-cat { border: 1px solid var(--pgt-line); background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; color: var(--pgt-ink); box-shadow: 0 2px 8px rgba(16,46,62,.05); transition: transform .3s var(--pgt-ease), box-shadow .3s, border-color .3s; }
body.pgt .pgt-cat:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(16,46,62,.16); border-color: var(--pgt-pale-line); color: var(--pgt-ink); }
body.pgt .pgt-cat-img { display: block; aspect-ratio: 4/3; background: var(--pgt-ph); }
body.pgt .pgt-cat-img img { width: 100%; height: 100%; object-fit: cover; }
body.pgt .pgt-cat-body { display: block; padding: 14px 15px 16px; }
body.pgt .pgt-cat-body b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
body.pgt .pgt-cat-body span { display: block; font-size: 12px; color: var(--pgt-ink-2); line-height: 1.5; margin-top: 6px; }
body.pgt .pgt-cat-body em { display: block; font-family: var(--pgt-mono); font-style: normal; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pgt-brand); margin-top: 10px; }

body.pgt .pgt-pasos-sec { margin-top: 80px; background: #fff; border-top: 1px solid var(--pgt-line); border-bottom: 1px solid var(--pgt-line); }
body.pgt .pgt-pasos-in { max-width: var(--pgt-max); margin: 0 auto; padding: 60px 24px; }
body.pgt .pgt-pasos-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
body.pgt .pgt-pasos-head h2 { margin: 12px 0 10px; font-size: 38px; }
body.pgt .pgt-pasos-head p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--pgt-ink-2); }
body.pgt .pgt-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
body.pgt .pgt-paso { background: var(--pgt-bg); border: 1px solid var(--pgt-line); border-radius: 18px; padding: 28px 26px; transition: transform .35s var(--pgt-ease), box-shadow .35s; }
body.pgt .pgt-paso:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16,46,62,.08); }
body.pgt .pgt-paso-n { display: flex; align-items: center; gap: 10px; }
body.pgt .pgt-paso-n b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--pgt-line-2); font-family: var(--pgt-serif); font-weight: 400; font-size: 19px; color: var(--pgt-brand); }
body.pgt .pgt-paso-n i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--pgt-line-2), rgba(226,216,204,0)); }
body.pgt .pgt-paso h3 { margin: 18px 0 9px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; text-wrap: pretty; }
body.pgt .pgt-paso p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--pgt-ink-2); text-wrap: pretty; }

body.pgt .pgt-rating { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--pgt-line); border-radius: 999px; padding: 12px 22px 12px 14px; box-shadow: 0 2px 10px rgba(16,46,62,.05); }
/* Las caritas son las iniciales de quienes comentaron: gente real, sacada del
   mismo array de reseñas. No hay foto porque no tenemos su foto. */
body.pgt .pgt-rating-caras { display: flex; align-items: center; flex: none; }
body.pgt .pgt-rating-caras i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(16,46,62,.16); background: var(--pgt-brand); color: #fff; font-style: normal; font-size: 12.5px; font-weight: 800; text-transform: uppercase; }
body.pgt .pgt-rating-caras i + i { margin-left: -11px; }
body.pgt .pgt-rating-caras i:nth-child(2n) { background: var(--pgt-deep); }
body.pgt .pgt-rating-caras i:nth-child(3n) { background: var(--pgt-brand-2); }
body.pgt .pgt-estrellas { display: block; color: var(--pgt-gold); font-size: 13px; letter-spacing: .14em; line-height: 1; }
body.pgt .pgt-rating span span { display: block; font-size: 13px; color: var(--pgt-ink-2); }
body.pgt .pgt-rating .pgt-estrellas + span { margin-top: 5px; }
/* Carrusel de reseñas: scroll con ajuste (scroll-snap) para que funcione con
   el dedo y con la rueda aunque el JS no cargue; las flechas sólo empujan ese
   mismo scroll. */
body.pgt .pgt-carrusel { position: relative; }
body.pgt .pgt-resenas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); align-items: start; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 14px; margin: 0 -4px; scrollbar-width: thin; scrollbar-color: var(--pgt-line-2) transparent; }
body.pgt .pgt-resenas::-webkit-scrollbar { height: 6px; }
body.pgt .pgt-resenas::-webkit-scrollbar-track { background: transparent; }
body.pgt .pgt-resenas::-webkit-scrollbar-thumb { background: var(--pgt-line-2); border-radius: 999px; }
body.pgt .pgt-resenas:focus-visible { outline: 2px solid var(--pgt-brand-2); outline-offset: 4px; border-radius: 20px; }
body.pgt .pgt-resena { scroll-snap-align: start; }

body.pgt .pgt-flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pgt-line); background: var(--pgt-surface); color: var(--pgt-ink); cursor: pointer; box-shadow: 0 8px 22px rgba(16,46,62,.13); transition: background .2s, color .2s, opacity .2s, box-shadow .2s; }
body.pgt .pgt-flecha:hover { background: var(--pgt-brand); border-color: var(--pgt-brand); color: #fff; }
body.pgt .pgt-flecha.izq { left: -14px; }
body.pgt .pgt-flecha.der { right: -14px; }
body.pgt .pgt-flecha[disabled] { opacity: 0; pointer-events: none; }

/* Tarjeta de reseña.
   Cada tarjeta mide lo que mide su texto (por el `align-items: start` de la
   pista): antes todas estiraban hasta la más larga y las cortas quedaban con
   medio cuerpo vacío. Y el texto se recorta a 6 líneas para que ninguna se
   dispare; el botón "Leer completa" (lo enciende el JS sólo si de verdad
   sobra texto) deja leer el comentario entero sin salir de la portada. */
body.pgt .pgt-resena { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--pgt-line); border-radius: 20px; padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 13px; transition: transform .3s var(--pgt-ease), box-shadow .3s, border-color .3s; }
body.pgt .pgt-resena::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--pgt-brand), var(--pgt-brand-2)); opacity: 0; transition: opacity .3s; }
body.pgt .pgt-resena:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(16,46,62,.13); border-color: var(--pgt-pale-line); }
body.pgt .pgt-resena:hover::before { opacity: 1; }
body.pgt .pgt-resena-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; }
body.pgt .pgt-comillas { color: var(--pgt-pale-line); flex: none; }
body.pgt .pgt-resena-tag { flex: 0 1 auto; min-width: 0; font-family: var(--pgt-mono); font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--pgt-brand); background: var(--pgt-pale); border: 1px solid #d5e9f0; border-radius: 999px; padding: 4px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pgt .pgt-resena p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--pgt-ink-2); text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
body.pgt .pgt-resena.abierta p { -webkit-line-clamp: unset; }
body.pgt .pgt-resena-mas { display: none; align-self: flex-start; margin: -6px 0 0; padding: 0; border: 0; background: none; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--pgt-brand); cursor: pointer; }
body.pgt .pgt-resena-mas:hover { color: var(--pgt-brand-2); }
body.pgt .pgt-resena.recortada .pgt-resena-mas { display: block; }
body.pgt .pgt-resena-pie { margin-top: auto; padding-top: 14px; border-top: 1px solid #f1e9df; display: flex; align-items: center; gap: 11px; }
body.pgt .pgt-resena-ava { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--pgt-brand), var(--pgt-brand-2)); color: #fff; font-size: 14px; font-weight: 800; text-transform: uppercase; }
body.pgt .pgt-resena-quien { min-width: 0; }
body.pgt .pgt-resena-quien b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pgt .pgt-resena-quien span { display: block; font-size: 11.5px; color: var(--pgt-ink-3); margin-top: 2px; }

body.pgt .pgt-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
body.pgt .pgt-social a { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--pgt-line); background: #fff; color: var(--pgt-ink); transition: transform .25s var(--pgt-ease), border-color .25s, box-shadow .25s; }
body.pgt .pgt-social a:hover { transform: translateY(-4px); border-color: var(--pgt-pale-line); box-shadow: 0 18px 36px rgba(16,46,62,.1); color: var(--pgt-ink); }
body.pgt .pgt-social-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: none; }
body.pgt .pgt-social-ico.ig { background: radial-gradient(circle at 28% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
body.pgt .pgt-social-ico.tt { background: #010101; }
body.pgt .pgt-social-ico.fb { background: #1877F2; }
body.pgt .pgt-social b { display: block; font-size: 14.5px; font-weight: 800; }
body.pgt .pgt-social span span { display: block; font-size: 12.5px; color: var(--pgt-ink-3); margin-top: 2px; }

body.pgt .pgt-cta { position: relative; overflow: hidden; background: #124e68; border-radius: 24px; padding: 64px 44px 68px; text-align: center; color: #fff; }
body.pgt .pgt-cta i { position: absolute; border-radius: 50%; }
body.pgt .pgt-cta i.a { top: -110px; left: -90px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(127,214,230,.20), rgba(127,214,230,0) 68%); }
body.pgt .pgt-cta i.b { bottom: -130px; right: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(238,170,120,.16), rgba(238,170,120,0) 68%); }
body.pgt .pgt-cta-in { position: relative; max-width: 600px; margin: 0 auto; }
body.pgt .pgt-cta h2 { margin: 0; font-family: var(--pgt-serif); font-weight: 400; font-size: 44px; line-height: 1.08; letter-spacing: -.02em; text-wrap: pretty; }
body.pgt .pgt-cta p { margin: 18px 0 0; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.82); text-wrap: pretty; }
body.pgt .pgt-cta-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
body.pgt .pgt-cta-wa { height: 54px; padding: 0 26px; border-radius: 14px; background: var(--pgt-wa); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 26px rgba(var(--pgt-wa-sombra),.28); transition: transform .25s var(--pgt-ease); }
body.pgt .pgt-cta-wa:hover { transform: translateY(-3px); color: #fff; }
body.pgt .pgt-cta-ghost { height: 54px; padding: 0 26px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.38); background: transparent; color: #fff; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; cursor: pointer; transition: background .25s, transform .25s var(--pgt-ease); }
body.pgt .pgt-cta-ghost:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-3px); }

/* ── Catálogo ────────────────────────────────────────────── */
body.pgt .pgt-main { max-width: var(--pgt-max); margin: 0 auto; padding: 34px 24px 80px; }
body.pgt .pgt-main h1 { margin: 12px 0 6px; font-family: var(--pgt-serif); font-weight: 400; font-size: 44px; letter-spacing: -.02em; line-height: 1.06; }
body.pgt .pgt-main-sub { margin: 0 0 22px; font-size: 15.5px; color: var(--pgt-ink-2); }
body.pgt .pgt-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 26px; }
body.pgt .pgt-buscador { flex: 1 1 340px; min-width: 0; display: flex; align-items: center; gap: 13px; background: #fff; border: 1.5px solid var(--pgt-line-2); border-radius: 16px; padding: 0 18px; height: 56px; box-shadow: 0 10px 26px rgba(16,46,62,.06); transition: border-color .25s, box-shadow .25s; }
body.pgt .pgt-buscador:focus-within { border-color: var(--pgt-pale-line); }
body.pgt .pgt-buscador input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 15.5px; color: var(--pgt-ink); }
body.pgt .pgt-buscador-n { font-family: var(--pgt-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--pgt-ink-3); white-space: nowrap; }
body.pgt .pgt-orden { flex: none; display: flex; align-items: center; gap: 8px; height: 56px; background: #fff; border: 1px solid var(--pgt-line); border-radius: 16px; padding: 0 14px; }
body.pgt .pgt-orden-t { font-family: var(--pgt-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pgt-ink-3); }
body.pgt .pgt-orden a { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pgt-line-2); background: #fff; color: var(--pgt-ink-2); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; }
body.pgt .pgt-orden a.on { border: 1.5px solid var(--pgt-brand-2); background: var(--pgt-pale); color: var(--pgt-brand); }

body.pgt .pgt-cols { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
body.pgt .pgt-filtros { flex: 1 1 230px; max-width: 270px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 128px; }
body.pgt .pgt-filtro { background: #fff; border: 1px solid var(--pgt-line); border-radius: 18px; padding: 20px; }
body.pgt .pgt-filtro-t { display: block; font-family: var(--pgt-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--pgt-ink-3); margin-bottom: 13px; }
body.pgt .pgt-filtro-lista { display: flex; flex-direction: column; gap: 7px; }
body.pgt .pgt-filtro-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid transparent; background: var(--pgt-bg); color: var(--pgt-ink-2); font-size: 13px; font-weight: 600; text-align: left; }
body.pgt .pgt-filtro-l:hover { color: var(--pgt-brand); }
body.pgt .pgt-filtro-l.on { border-color: var(--pgt-brand-2); background: var(--pgt-pale); color: var(--pgt-brand); font-weight: 800; }
body.pgt .pgt-filtro-l i { font-family: var(--pgt-mono); font-style: normal; font-size: 10.5px; opacity: .7; }
body.pgt .pgt-limpiar { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--pgt-brand); text-decoration: underline; }
body.pgt .pgt-resultados { flex: 1 1 480px; min-width: 0; }
body.pgt .pgt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
body.pgt .pgt-chip { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pgt-pale-line); background: var(--pgt-pale); color: var(--pgt-brand); font-size: 12.5px; font-weight: 700; }
body.pgt .pgt-filtros-toggle { display: none; }

/* ── Categoría ───────────────────────────────────────────── */
body.pgt .pgt-cathero { background: #fff; border-bottom: 1px solid var(--pgt-line); }
body.pgt .pgt-cathero-in { position: relative; max-width: var(--pgt-max); margin: 0 auto; padding: 44px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; align-items: center; overflow: hidden; }
body.pgt .pgt-cathero .pgt-lluvia { inset: -120px 0; }
body.pgt .pgt-cathero-txt { position: relative; }
body.pgt .pgt-cathero h1 { margin: 14px 0 0; font-family: var(--pgt-serif); font-weight: 400; font-size: clamp(38px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.02em; white-space: pre-line; }
body.pgt .pgt-cathero p { margin: 20px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--pgt-ink-2); max-width: 54ch; text-wrap: pretty; }
body.pgt .pgt-cathero-subs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
body.pgt .pgt-cathero-subs span { height: 34px; padding: 0 14px; display: flex; align-items: center; border-radius: 999px; background: var(--pgt-bg); border: 1px solid var(--pgt-line-2); font-size: 12.5px; font-weight: 700; color: var(--pgt-ink-2); }
body.pgt .pgt-cathero-foto { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16/11; background: var(--pgt-ph); box-shadow: 0 24px 56px rgba(16,46,62,.16); }
body.pgt .pgt-cathero-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ── Ficha ───────────────────────────────────────────────── */
body.pgt .pgt-ficha { max-width: var(--pgt-max); margin: 0 auto; padding: 28px 24px 80px; }
body.pgt .pgt-ficha-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 44px; margin-top: 20px; align-items: start; }
body.pgt .pgt-galeria { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 128px; }
body.pgt .pgt-galeria-big { border-radius: 20px; overflow: hidden; aspect-ratio: 1/1; background: var(--pgt-ph); box-shadow: 0 20px 48px rgba(16,46,62,.14); }
body.pgt .pgt-galeria-big img { width: 100%; height: 100%; object-fit: cover; }
body.pgt .pgt-galeria-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
body.pgt .pgt-galeria-thumbs button { padding: 0; border: 1.5px solid var(--pgt-line-2); border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; background: var(--pgt-ph); cursor: pointer; }
body.pgt .pgt-galeria-thumbs button.on { border: 2px solid var(--pgt-brand-2); }
body.pgt .pgt-galeria-thumbs img { width: 100%; height: 100%; object-fit: cover; }

body.pgt .pgt-ficha-cat { font-family: var(--pgt-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--pgt-brand); }
body.pgt .pgt-ficha h1 { margin: 12px 0 0; font-family: var(--pgt-serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.02em; }
body.pgt .pgt-ficha-desc { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: var(--pgt-ink-2); max-width: 54ch; text-wrap: pretty; }
body.pgt .pgt-ficha-desc p { margin: 0 0 12px; }

body.pgt .pgt-precio-box { display: flex; align-items: flex-end; gap: 12px; margin-top: 26px; padding: 20px 22px; background: #fff; border: 1px solid var(--pgt-line); border-radius: 18px; flex-wrap: wrap; }
body.pgt .pgt-precio-cap { display: block; font-size: 12px; color: var(--pgt-ink-3); font-weight: 600; }
body.pgt .pgt-precio-n { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
body.pgt .pgt-precio-tot { margin-left: auto; text-align: right; }
body.pgt .pgt-precio-tot b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--pgt-brand); margin-top: 4px; }

body.pgt .pgt-tramos-wrap { margin-top: 22px; }
body.pgt .pgt-tramos-t { display: block; font-size: 13.5px; font-weight: 800; margin-bottom: 10px; }
body.pgt .pgt-tramos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
body.pgt .pgt-tramo { padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--pgt-line-2); background: var(--pgt-bg); color: var(--pgt-ink); cursor: pointer; text-align: left; }
body.pgt .pgt-tramo.on { border: 2px solid var(--pgt-brand-2); background: var(--pgt-pale); }
body.pgt .pgt-tramo b { display: block; font-size: 14.5px; font-weight: 800; }
body.pgt .pgt-tramo span { display: block; font-size: 12px; margin-top: 4px; opacity: .8; }
body.pgt .pgt-tramo em { display: block; font-family: var(--pgt-mono); font-style: normal; font-size: 10px; letter-spacing: .08em; margin-top: 6px; color: var(--pgt-brand); }
body.pgt .pgt-minimo { display: block; font-size: 12.5px; color: var(--pgt-ink-3); margin-top: 10px; }

body.pgt .pgt-pers { margin-top: 26px; background: #fff; border: 1px solid var(--pgt-line); border-radius: 18px; padding: 22px; }
body.pgt .pgt-pers-t { display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
body.pgt .pgt-pers-d { display: block; font-size: 12.5px; color: var(--pgt-ink-3); margin-bottom: 18px; }
body.pgt .pgt-pers label.pgt-campo { display: block; margin-bottom: 14px; }
body.pgt .pgt-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--pgt-ink-2); margin-bottom: 8px; }
body.pgt .pgt-pers input[type="text"] { width: 100%; height: 44px; padding: 0 14px; border: 1.5px solid var(--pgt-line-2); border-radius: 12px; font-size: 14px; color: var(--pgt-ink); background: var(--pgt-bg); outline: none; }
body.pgt .pgt-pers input[type="text"]:focus { border-color: var(--pgt-brand-2); }
body.pgt .pgt-pers input.err { border-color: #e53935; background: #fff5f5; }
body.pgt .pgt-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
body.pgt .pgt-opt { height: 38px; padding: 0 15px; border-radius: 11px; border: 1.5px solid var(--pgt-line-2); background: var(--pgt-bg); color: var(--pgt-ink-2); font-size: 13px; font-weight: 700; cursor: pointer; }
body.pgt .pgt-opt.on { border: 2px solid var(--pgt-brand-2); background: var(--pgt-pale); color: var(--pgt-brand); }
body.pgt .pgt-opts.paleta .pgt-opt { display: flex; align-items: center; gap: 7px; padding: 0 14px 0 10px; color: var(--pgt-ink); }
body.pgt .pgt-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); flex: none; }
body.pgt .pgt-dot.b { margin-left: -7px; }
body.pgt .pgt-opts.papel { flex-direction: column; gap: 8px; }
body.pgt .pgt-opts.papel .pgt-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: auto; padding: 12px 14px; border-radius: 12px; text-align: left; color: var(--pgt-ink); }
body.pgt .pgt-opts.papel .pgt-opt > span { flex: 1; min-width: 0; text-align: left; }
body.pgt .pgt-opts.papel .pgt-opt b { display: block; font-size: 13.5px; font-weight: 800; }
body.pgt .pgt-opts.papel .pgt-opt > span > span { display: block; font-size: 11.5px; color: var(--pgt-ink-3); margin-top: 2px; font-weight: 500; }
body.pgt .pgt-opts.papel .pgt-opt em { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--pgt-brand); white-space: nowrap; }

body.pgt .pgt-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
body.pgt .pgt-add { flex: 1 1 200px; height: 54px; border: none; border-radius: 14px; background: var(--pgt-brand); color: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px rgba(15,127,174,.28); transition: transform .22s var(--pgt-ease), background .25s, box-shadow .22s; }
body.pgt .pgt-add:hover { background: var(--pgt-brand-2); transform: translateY(-3px); box-shadow: 0 20px 38px rgba(15,127,174,.34); }
body.pgt .pgt-add.ok { background: var(--pgt-ok); animation: pgtPop .45s cubic-bezier(.22,1.2,.3,1); }
body.pgt .pgt-add[disabled] { opacity: .6; cursor: wait; }
body.pgt .pgt-add-wa { flex: 1 1 180px; height: 54px; border: 1.5px solid #d8cec1; border-radius: 14px; background: #fff; color: var(--pgt-ink); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 9px; }
body.pgt .pgt-add-wa:hover { border-color: var(--pgt-brand-2); color: var(--pgt-brand); }
body.pgt .pgt-tiempo-nota { display: block; font-size: 12.5px; color: var(--pgt-ink-3); margin-top: 12px; }
body.pgt .pgt-error { display: none; margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: #fff5f5; border: 1px solid #f3c9c9; color: #b3261e; font-size: 13.5px; }
body.pgt .pgt-error.on { display: block; }

body.pgt .pgt-landing-aviso { margin-top: 26px; background: var(--pgt-pale); border: 1px solid var(--pgt-pale-line); border-radius: 18px; padding: 22px; }
body.pgt .pgt-landing-aviso b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 6px; }
body.pgt .pgt-landing-aviso p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--pgt-ink-2); }

body.pgt .pgt-detalles { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
body.pgt .pgt-det { background: #fff; border: 1px solid var(--pgt-line); border-radius: 14px; overflow: hidden; }
body.pgt .pgt-det summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; font-size: 14.5px; font-weight: 800; color: var(--pgt-ink); cursor: pointer; list-style: none; }
body.pgt .pgt-det summary::-webkit-details-marker { display: none; }
body.pgt .pgt-det summary::after { content: '+'; font-size: 20px; color: var(--pgt-brand); line-height: 1; transition: transform .18s; }
body.pgt .pgt-det[open] summary::after { transform: rotate(45deg); }
body.pgt .pgt-det-body { padding: 0 18px 18px; font-size: 14px; line-height: 1.65; color: var(--pgt-ink-2); white-space: pre-line; }

body.pgt .pgt-rel { margin-top: 70px; }
body.pgt .pgt-rel h2 { margin: 0 0 20px; font-family: var(--pgt-serif); font-weight: 400; font-size: 30px; letter-spacing: -.015em; }

/* ── Búsqueda ────────────────────────────────────────────── */
body.pgt .pgt-busq { max-width: 900px; margin: 0 auto; padding: 52px 24px 90px; }
body.pgt .pgt-busq h1 { margin: 0 0 20px; font-family: var(--pgt-serif); font-weight: 400; font-size: 40px; letter-spacing: -.02em; }
body.pgt .pgt-busq-input { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--pgt-line-2); border-radius: 16px; padding: 0 18px; height: 60px; box-shadow: 0 10px 30px rgba(16,46,62,.07); }
body.pgt .pgt-busq-input input { flex: 1; border: none; outline: none; background: transparent; font-size: 16.5px; color: var(--pgt-ink); }
body.pgt .pgt-busq-input .pgt-buscador-n { font-size: 11px; letter-spacing: .12em; }
body.pgt .pgt-sugs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; align-items: center; }
body.pgt .pgt-sugs > span { font-size: 12.5px; color: var(--pgt-ink-3); margin-right: 4px; }
body.pgt .pgt-sug { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pgt-line-2); background: #fff; font-size: 12.5px; font-weight: 700; color: var(--pgt-ink-2); display: inline-flex; align-items: center; }
body.pgt .pgt-sug:hover { border-color: var(--pgt-brand-2); color: var(--pgt-brand); }
body.pgt .pgt-hits { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
body.pgt .pgt-hit { display: flex; gap: 16px; align-items: center; text-align: left; background: #fff; border: 1px solid var(--pgt-line); border-radius: 16px; padding: 14px; color: var(--pgt-ink); }
body.pgt .pgt-hit:hover { border-color: var(--pgt-pale-line); box-shadow: 0 14px 32px rgba(16,46,62,.1); color: var(--pgt-ink); }
body.pgt .pgt-hit-img { flex: none; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--pgt-ph); }
body.pgt .pgt-hit-img img { width: 100%; height: 100%; object-fit: cover; }
body.pgt .pgt-hit-body { flex: 1; min-width: 0; }
body.pgt .pgt-hit-body em { display: block; font-family: var(--pgt-mono); font-style: normal; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pgt-ink-3); }
body.pgt .pgt-hit-body b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.015em; margin-top: 5px; }
body.pgt .pgt-hit-body span { display: block; font-size: 13px; color: var(--pgt-ink-2); margin-top: 4px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.pgt .pgt-hit-precio { flex: none; text-align: right; }
body.pgt .pgt-hit-precio b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
body.pgt .pgt-hit-precio span { display: block; font-size: 11.5px; color: var(--pgt-ink-3); margin-top: 3px; }
body.pgt .pgt-hit-precio i { display: block; font-style: normal; font-size: 12px; color: var(--pgt-ok); margin-top: 3px; }

/* ── Paginación ──────────────────────────────────────────── */
body.pgt .pgt-pag { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
body.pgt .pgt-pag .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--pgt-line-2); background: #fff; color: var(--pgt-ink-2); font-size: 14px; font-weight: 700; }
body.pgt .pgt-pag .page-numbers.current { background: var(--pgt-brand); border-color: var(--pgt-brand); color: #fff; }
body.pgt .pgt-pag .page-numbers:hover { border-color: var(--pgt-brand-2); color: var(--pgt-brand); }
body.pgt .pgt-pag .page-numbers.current:hover { color: #fff; }

/* ── Footer ──────────────────────────────────────────────── */
body.pgt .pgt-footer { background: var(--pgt-ink); color: #fff; margin-top: 70px; }
body.pgt .pgt-footer-grid { max-width: var(--pgt-max); margin: 0 auto; padding: 52px 24px 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 34px; }
body.pgt .pgt-footer-marca { display: block; font-family: var(--pgt-serif); font-size: 26px; letter-spacing: -.01em; }
body.pgt .pgt-footer-bajada { margin: 12px 0 0; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.68); max-width: 34ch; }
body.pgt .pgt-footer-t { display: block; font-family: var(--pgt-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; }
body.pgt .pgt-footer-links { display: flex; flex-direction: column; gap: 9px; }
body.pgt .pgt-footer-links a { font-size: 13.5px; color: rgba(255,255,255,.82); }
body.pgt .pgt-footer-links a:hover { color: #fff; }
body.pgt .pgt-footer-redes { max-width: var(--pgt-max); margin: 0 auto; padding: 0 24px 22px; display: flex; flex-wrap: wrap; gap: 10px; }
body.pgt .pgt-footer-redes a { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 12.5px; font-weight: 700; transition: background .2s, transform .2s; }
body.pgt .pgt-footer-redes a:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); color: #fff; }
body.pgt .pgt-footer-legal { max-width: var(--pgt-max); margin: 0 auto; padding: 18px 24px 34px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.55); }

/* ── WhatsApp flotante ───────────────────────────────────── */
body.pgt .pgt-wa { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: flex; align-items: center; gap: 11px; }
body.pgt .pgt-wa-txt { background: #fff; border: 1px solid var(--pgt-line); border-radius: 999px; padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--pgt-ink); box-shadow: 0 12px 30px rgba(16,46,62,.16); }
body.pgt .pgt-wa-btn { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--pgt-wa); box-shadow: 0 12px 28px rgba(var(--pgt-wa-sombra),.34); transition: transform .22s var(--pgt-ease); }
body.pgt .pgt-wa-btn:hover { transform: scale(1.08); }

/* ── Challa al agregar al carrito ────────────────────────── */
body.pgt .pgt-challa { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
body.pgt .pgt-challa span { position: absolute; left: 50%; top: 32%; box-shadow: 0 1px 3px rgba(16,46,62,.18); animation: pgtBurst 2s cubic-bezier(.12,.62,.32,1) forwards; }

/* ── Feed de Instagram ───────────────────────────────────── */
body.pgt .pgt-feed { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
body.pgt .pgt-feed-item { display: block; position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1/1; background: var(--pgt-ph); transition: transform .4s var(--pgt-ease), box-shadow .4s; }
body.pgt a.pgt-feed-item:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 22px 44px rgba(16,46,62,.18); }
body.pgt .pgt-feed-item img { width: 100%; height: 100%; object-fit: cover; }
body.pgt .pgt-feed-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; pointer-events: none; }
body.pgt .pgt-feed-item.reel:hover .pgt-feed-video,
body.pgt .pgt-feed-video.on { opacity: 1; }
body.pgt .pgt-feed-badge { position: absolute; top: 9px; right: 9px; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 8px; background: rgba(16,46,62,.62); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(4px); }
body.pgt .pgt-feed-badge:not(.reel) { width: 26px; padding: 0; justify-content: center; }

/* ── Visor de la publicación ─────────────────────────────── */
body.pgt .pgt-visor { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
body.pgt .pgt-visor-fondo { position: absolute; inset: 0; background: rgba(9,26,35,.78); }
body.pgt .pgt-visor-caja { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); max-width: 940px; width: 100%; max-height: 88vh; background: var(--pgt-surface); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 90px rgba(9,26,35,.45); animation: pgtPop .28s var(--pgt-ease); }
body.pgt .pgt-visor-media { background: #0d1f28; display: grid; place-items: center; min-height: 0; }
body.pgt .pgt-visor-media img, body.pgt .pgt-visor-media video { width: 100%; height: 100%; max-height: 88vh; object-fit: contain; }
body.pgt .pgt-visor-info { padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
body.pgt .pgt-visor-pie { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--pgt-ink-2); white-space: pre-line; text-wrap: pretty; }
body.pgt .pgt-visor-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; height: 46px; border-radius: 12px; background: var(--pgt-ink); color: #fff; font-size: 14px; font-weight: 700; flex: none; }
body.pgt .pgt-visor-cta:hover { background: var(--pgt-brand); color: #fff; }
body.pgt .pgt-visor-x { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(9,26,35,.55); color: #fff; cursor: pointer; backdrop-filter: blur(4px); }
body.pgt .pgt-visor-x:hover { background: rgba(9,26,35,.8); }
body.pgt .pgt-seguir { display: flex; align-items: center; gap: 11px; height: 50px; padding: 0 22px; border-radius: 999px; background: var(--pgt-ink); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 12px 28px rgba(16,46,62,.2); transition: transform .22s var(--pgt-ease); white-space: nowrap; }
body.pgt .pgt-seguir:hover { transform: translateY(-3px); color: #fff; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.pgt .pgt-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  body.pgt .pgt-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.pgt .pgt-flecha.izq { left: 2px; }
  body.pgt .pgt-flecha.der { right: 2px; }
  body.pgt .pgt-visor { padding: 0; }
  body.pgt .pgt-visor-caja { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); max-height: 100vh; height: 100%; border-radius: 0; }
  body.pgt .pgt-visor-media img, body.pgt .pgt-visor-media video { max-height: 55vh; }
  body.pgt .pgt-orden { flex: 1 1 100%; min-width: 0; height: auto; flex-wrap: wrap; padding: 12px 14px; }
  body.pgt .pgt-header-spacer { display: none; }
  body.pgt .pgt-header-top { justify-content: space-between; }
  body.pgt .pgt-brand { margin: 0; }
  body.pgt .pgt-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body.pgt .pgt-nav::-webkit-scrollbar { display: none; }
  body.pgt .pgt-nav-l { white-space: nowrap; }
  body.pgt .pgt-galeria, body.pgt .pgt-filtros { position: static; }
  body.pgt .pgt-filtros { max-width: none; }
  body.pgt .pgt-filtros-toggle { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--pgt-line-2); background: #fff; font-size: 13.5px; font-weight: 700; color: var(--pgt-ink); cursor: pointer; }
  body.pgt .pgt-filtros.oculto { display: none; }
  body.pgt .pgt-hero { padding-top: 32px; }
  body.pgt .pgt-hero-pin { position: static; margin-top: 16px; animation: none; }
  body.pgt .pgt-hero-sello { display: none; }
  body.pgt .pgt-cta { padding: 44px 24px 48px; }
  body.pgt .pgt-cta h2 { font-size: 34px; }
  body.pgt .pgt-main h1, body.pgt .pgt-busq h1 { font-size: 34px; }
  body.pgt .pgt-h2, body.pgt .pgt-pasos-head h2 { font-size: 30px; }
  body.pgt .pgt-wa-txt { display: none; }
}
@media (max-width: 560px) {
  body.pgt .pgt-destacados { gap: 14px; }
  body.pgt .pgt-dest { grid-template-columns: minmax(0, 1fr); }
  body.pgt .pgt-dest-img { aspect-ratio: 16/10; }
  body.pgt .pgt-dest-body { padding: 18px 18px 20px; }
  body.pgt .pgt-flecha { display: none; }
  body.pgt .pgt-resenas { grid-auto-columns: 86%; }
  body.pgt .pgt-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.pgt .pgt-cats { grid-template-columns: 1fr; }
  body.pgt .pgt-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  body.pgt .pgt-card { border-radius: 18px; padding: 7px; }
  body.pgt .pgt-card-body { padding: 12px 8px 8px; gap: 5px; }
  body.pgt .pgt-card-precio b { font-size: 19px; }
  body.pgt .pgt-card-cuotas, body.pgt .pgt-card-envio { font-size: 11.5px; }
  body.pgt .pgt-orden { flex-wrap: wrap; height: auto; padding: 12px 14px; }
  /* Una sola etiqueta por tarjeta: en dos columnas, dos etiquetas se
     apilan y le comen a la tarjeta una línea entera. Van ordenadas por
     importancia, así que sobrevive la que más pesa. */
  body.pgt .pgt-card-badges .pgt-badge:nth-child(n+2) { display: none; }
  /* El precio pasa a su propia línea: apretado contra el nombre en la
     misma fila, el título se partía en cinco renglones. */
  body.pgt .pgt-hit { flex-wrap: wrap; }
  body.pgt .pgt-hit-img { width: 64px; height: 64px; }
  body.pgt .pgt-hit-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.pgt .pgt-hit-precio { flex: 1 0 100%; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  body.pgt .pgt-hit-precio span, body.pgt .pgt-hit-precio i { margin-top: 0; }
  body.pgt .pgt-footer-legal { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  body.pgt *, body.pgt *::before, body.pgt *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  body.pgt .pgt-lluvia, body.pgt .pgt-challa, body.pgt .pgt-feed-video { display: none; }
}
