/* ═══════════════════════════════════════════════════════════════════════════
   PUNTO TIRE 2026 — Sistema de diseño

   Dirección: híbrido. El hero, el encabezado, las secciones de marca y el pie
   van en oscuro (impacto, la llanta se ve premium sobre fondo negro). El
   catálogo y la ficha de producto van en claro, porque comprar es una tarea de
   escaneo rápido y comparación de precios, y ahí gana la legibilidad.

   Índice
     1. Tokens
     2. Base
     3. Layout
     4. Botones y controles
     5. Encabezado
     6. Hero y buscador por medida
     7. Barra de confianza
     8. Tarjeta de producto
     9. Tienda y filtros
    10. Ficha de producto
    11. Carrito lateral
    12. Landings
    13. Blog
    14. Secciones de portada
    15. Pie
    16. Animaciones
    17. Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────────────────── */

:root {
  /* Superficies claras — catálogo y compra */
  --bg:            #F5F6FA;
  --surface:       #FFFFFF;
  --surface-2:     #FAFBFD;
  --line:          #E3E6EF;
  --line-soft:     #EDEFF5;

  /* Superficies oscuras — hero, encabezado, pie */
  --ink:           #0B0D14;
  --ink-2:         #12151F;
  --ink-3:         #1B1F2D;
  --ink-line:      rgba(255,255,255,.10);

  /* Texto */
  --text:          #0F1320;
  --text-2:        #414A63;
  --muted:         #6B7490;
  --on-dark:       #FFFFFF;
  --on-dark-2:     rgba(255,255,255,.72);
  --on-dark-3:     rgba(255,255,255,.48);

  /* Marca */
  --brand:         #1B2FD8;
  --brand-700:     #1524AE;
  --brand-500:     #3A4CEA;
  --brand-300:     #8B96FF;
  --brand-050:     #EEF0FE;

  /* Acento — precio, ofertas, llamadas a la acción secundarias */
  --amber:         #FFB020;
  --amber-600:     #D98A00;
  --amber-050:     #FFF6E5;

  /* Estado */
  --ok:            #0E9F5B;
  --ok-050:        #E7F7EF;
  --warn:          #E8880C;
  --warn-050:      #FEF3E4;
  --danger:        #DC2F35;
  --danger-050:    #FDECEC;
  --wa:            #25D366;

  /* Forma */
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-pill: 999px;

  /* Sombra — sutil en reposo, marcada al interactuar */
  --sh-1: 0 1px 2px rgba(11,13,20,.05), 0 1px 3px rgba(11,13,20,.04);
  --sh-2: 0 4px 12px rgba(11,13,20,.07), 0 2px 4px rgba(11,13,20,.04);
  --sh-3: 0 12px 28px rgba(11,13,20,.11), 0 4px 8px rgba(11,13,20,.05);
  --sh-brand: 0 8px 24px rgba(27,47,216,.26);

  /* Movimiento */
  --e-out:  cubic-bezier(.22,.85,.3,1);
  --e-in:   cubic-bezier(.5,0,.75,0);
  --e-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: .16s;
  --t:      .28s;
  --t-slow: .5s;

  /* Medidas */
  --hdr-h:     72px;
  --hdr-h-sm:  62px;
  --wrap:      1280px;
  --wrap-slim: 780px;
}

/* ─────────────────────────────────────────────────────────
   2. BASE
   ───────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  line-height: 1.14;
  letter-spacing: -.022em;
  font-weight: 800;
  color: var(--text);
}
h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.6rem); font-weight: 900; letter-spacing: -.035em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.5rem); }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration: none; transition: color var(--t-fast) var(--e-soft); }
a:hover { color: var(--brand-700); }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Los números (precios, medidas, índices) se leen mejor alineados en columna. */
.pt-num, .price, .amount, .pt-size, .woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

::selection { background: var(--brand); color: #fff; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2.5px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.pt-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Salto al contenido: aparece solo al tabular. */
.pt-skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--brand); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r) var(--r); font-weight: 700;
  transition: top var(--t) var(--e-out);
}
.pt-skip:focus { top: 0; color: #fff; }

/* ─────────────────────────────────────────────────────────
   3. LAYOUT
   ───────────────────────────────────────────────────────── */

.pt-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.pt-wrap--slim { max-width: var(--wrap-slim); }

.pt-sec { padding: clamp(44px, 6vw, 84px) 0; }
.pt-sec--tight { padding: clamp(30px, 4vw, 52px) 0; }
.pt-sec--dark { background: var(--ink); color: var(--on-dark); }
.pt-sec--dark h2, .pt-sec--dark h3 { color: var(--on-dark); }
.pt-sec--dark p { color: var(--on-dark-2); }
.pt-sec--white { background: var(--surface); }

.pt-sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.pt-sec-head--center { text-align: center; max-width: 680px; margin-inline: auto; }
.pt-sec-head p { color: var(--muted); font-size: 1.0625rem; margin: 0; }
.pt-sec--dark .pt-sec-head p { color: var(--on-dark-2); }

.pt-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: 12px;
}
.pt-sec--dark .pt-eyebrow, .pt-hero .pt-eyebrow { color: var(--amber); }
.pt-eyebrow::before {
  content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}

.pt-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────
   4. BOTONES Y CONTROLES
   ───────────────────────────────────────────────────────── */

.pt-btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 26px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 0; border-radius: var(--r);
  font-family: inherit; font-size: .9375rem; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: transform var(--t-fast) var(--e-out),
              box-shadow var(--t) var(--e-out),
              background-color var(--t-fast) var(--e-soft),
              filter var(--t-fast) var(--e-soft);
}
.pt-btn:hover  { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--sh-brand); filter: brightness(1.06); }
.pt-btn:active { transform: translateY(0); transition-duration: .05s; }

.pt-btn--amber   { --btn-bg: var(--amber); --btn-fg: #2A1B00; }
.pt-btn--amber:hover { box-shadow: 0 8px 24px rgba(255,176,32,.4); }
.pt-btn--dark    { --btn-bg: var(--ink); --btn-fg: #fff; }
.pt-btn--wa      { --btn-bg: var(--wa); --btn-fg: #04331A; }
.pt-btn--wa:hover { box-shadow: 0 8px 24px rgba(37,211,102,.36); }

.pt-btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text);
  border: 1.5px solid var(--line);
}
.pt-btn--ghost:hover { --btn-fg: var(--brand); border-color: var(--brand); box-shadow: var(--sh-2); filter: none; }

.pt-btn--ghost-light {
  --btn-bg: rgba(255,255,255,.07); --btn-fg: #fff;
  border: 1.5px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
}
.pt-btn--ghost-light:hover { --btn-bg: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); box-shadow: none; }

.pt-btn--lg    { min-height: 58px; padding: 0 34px; font-size: 1rem; }
.pt-btn--sm    { min-height: 40px; padding: 0 16px; font-size: .8125rem; border-radius: var(--r-sm); }
.pt-btn--block { width: 100%; }
.pt-btn[disabled], .pt-btn.is-loading { opacity: .55; pointer-events: none; }

/* Estado de carga: el botón se mantiene del mismo tamaño y gira un anillo. */
.pt-btn.is-loading::after {
  content: ''; width: 17px; height: 17px; margin-left: 4px;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: currentColor;
  border-radius: 50%; animation: pt-spin .65s linear infinite;
}

.pt-link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: .9375rem;
}
.pt-link-arrow svg, .pt-link-arrow .ar { transition: transform var(--t) var(--e-out); }
.pt-link-arrow:hover svg, .pt-link-arrow:hover .ar { transform: translateX(5px); }

/* Campos */
.pt-field { display: flex; flex-direction: column; gap: 6px; }
.pt-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}

.pt-select, .pt-input {
  width: 100%; min-height: 50px; padding: 0 14px;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--r);
  font-family: inherit; font-size: .9375rem; font-weight: 600;
  transition: border-color var(--t-fast) var(--e-soft), box-shadow var(--t-fast) var(--e-soft);
  appearance: none;
}
.pt-select {
  padding-right: 38px; cursor: pointer;
  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 1.5 6 6.5l5-5' stroke='%236B7490' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.pt-select:hover, .pt-input:hover { border-color: #C9CEDE; }
.pt-select:focus, .pt-input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3.5px var(--brand-050);
}
.pt-select:disabled { opacity: .5; cursor: not-allowed; }

/* Insignias */
.pt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; line-height: 1.5;
  background: var(--brand-050); color: var(--brand-700);
}
.pt-badge--sale   { background: var(--amber); color: #2A1B00; }
.pt-badge--stock  { background: var(--ok-050); color: var(--ok); }
.pt-badge--low    { background: var(--warn-050); color: var(--warn); }
.pt-badge--out    { background: #F1F2F6; color: var(--muted); }
.pt-badge--dark   { background: rgba(255,255,255,.1); color: #fff; }

/* ─────────────────────────────────────────────────────────
   5. ENCABEZADO
   ───────────────────────────────────────────────────────── */

.pt-topbar {
  background: var(--ink-2); color: var(--on-dark-2);
  font-size: .8125rem; border-bottom: 1px solid var(--ink-line);
}
.pt-topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 38px;
}
.pt-topbar a { color: var(--on-dark-2); }
.pt-topbar a:hover { color: #fff; }
.pt-topbar-msg { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pt-topbar-msg .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(14,159,91,.6);
  animation: pt-pulse 2.4s var(--e-out) infinite;
}
.pt-topbar-links { display: flex; align-items: center; gap: 20px; }

.pt-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--ink); color: #fff;
  border-bottom: 1px solid var(--ink-line);
  transition: box-shadow var(--t) var(--e-soft), background-color var(--t) var(--e-soft);
}
.pt-header.is-stuck { box-shadow: 0 6px 24px rgba(0,0,0,.35); background: rgba(11,13,20,.94); backdrop-filter: blur(14px) saturate(1.4); }

.pt-header-in {
  display: flex; align-items: center; gap: 18px;
  height: var(--hdr-h); position: relative;
}

/*
 * Logo.
 *
 * Se fija la ALTURA y se deja libre el ancho, con un tope: así un logo
 * cuadrado (447×447), uno apaisado o uno vertical ocupan siempre la misma
 * franja del encabezado y ninguno puede empujar al menú.
 *
 * Las reglas se escriben también sobre .custom-logo a secas —no solo dentro
 * de .pt-logo— como red de seguridad: si algún día el marcado vuelve a
 * anidarse mal, el logo seguirá acotado en lugar de renderizarse a tamaño
 * natural y romper la maqueta.
 */
.pt-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; line-height: 0; }
.pt-logo .custom-logo-link,
.pt-header .custom-logo-link,
.pt-footer .custom-logo-link { display: block; line-height: 0; }

.pt-logo img,
.pt-logo .custom-logo,
.pt-header .custom-logo {
  height: 46px; width: auto; max-width: 190px;
  object-fit: contain; display: block;
}

.pt-logo--footer img,
.pt-footer .custom-logo {
  height: 54px; width: auto; max-width: 200px;
  object-fit: contain; display: block; margin-bottom: 16px;
}

.pt-logo-text {
  font-size: 1.2rem; font-weight: 900; letter-spacing: -.03em;
  color: #fff; line-height: 1;
}
.pt-logo-text b { color: var(--brand-300); }

.pt-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
/* wp_nav_menu con items_wrap '%3$s' entrega los <li> sin su <ul> contenedor.
   Sin esto el navegador les pinta viñeta y las deja fuera del flex. */
.pt-nav ul, .pt-nav li { list-style: none; margin: 0; padding: 0; }
.pt-nav li { display: contents; }
.pt-nav a {
  position: relative; padding: 9px 14px; border-radius: var(--r-sm);
  color: var(--on-dark-2); font-size: .9375rem; font-weight: 600;
  transition: color var(--t-fast) var(--e-soft), background-color var(--t-fast) var(--e-soft);
}
.pt-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.pt-nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 2px; background: var(--amber); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--e-out);
}
.pt-nav a:hover::after,
.pt-nav .current-menu-item > a::after { transform: scaleX(1); }
.pt-nav .current-menu-item > a { color: #fff; }

.pt-head-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.pt-icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r);
  background: transparent; border: 0; color: #fff; cursor: pointer;
  transition: background-color var(--t-fast) var(--e-soft), transform var(--t-fast) var(--e-out);
}
.pt-icon-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.pt-icon-btn:active { transform: scale(.93); }
.pt-icon-btn svg { width: 21px; height: 21px; }

.pt-cart-count {
  position: absolute; top: 5px; right: 4px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--amber); color: #2A1B00;
  border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 900; line-height: 1;
  border: 2px solid var(--ink);
  transition: transform var(--t) var(--e-out);
}
.pt-cart-count:empty, .pt-cart-count[data-n="0"] { display: none; }
.pt-cart-count.is-bump { animation: pt-bump .45s var(--e-out); }

.pt-call {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: var(--r);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  color: #fff; font-size: .875rem; font-weight: 700;
  transition: background-color var(--t-fast) var(--e-soft), border-color var(--t-fast) var(--e-soft);
}
.pt-call:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); color: #fff; }
.pt-call svg { width: 16px; height: 16px; opacity: .8; }

/* Hamburguesa (solo móvil) */
.pt-burger { display: none; }
.pt-burger span {
  display: block; width: 20px; height: 2px; background: #fff;
  border-radius: 2px; transition: transform var(--t) var(--e-out), opacity var(--t-fast) linear;
}
.pt-burger span + span { margin-top: 5px; }
body.pt-menu-open .pt-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.pt-menu-open .pt-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.pt-menu-open .pt-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─────────────────────────────────────────────────────────
   6. HERO Y BUSCADOR POR MEDIDA
   ───────────────────────────────────────────────────────── */

.pt-hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  padding: clamp(48px, 7vw, 96px) 0 clamp(60px, 8vw, 108px);
  isolation: isolate;
}

/* Resplandor de marca detrás del contenido. Es un degradado radial, no una
   imagen: no cuesta ninguna petición y escala a cualquier viewport. */
.pt-hero::before {
  content: ''; position: absolute; inset: -40% -10% auto -10%; height: 130%;
  background:
    radial-gradient(56% 46% at 22% 32%, rgba(27,47,216,.42) 0%, transparent 62%),
    radial-gradient(44% 40% at 84% 22%, rgba(255,176,32,.15) 0%, transparent 60%),
    radial-gradient(70% 60% at 60% 100%, rgba(58,76,234,.20) 0%, transparent 60%);
  z-index: -2; pointer-events: none;
}
/* Trama diagonal muy tenue: da textura de "taller" sin ruido visual. */
.pt-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(115deg,
    rgba(255,255,255,.028) 0 1px, transparent 1px 9px);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

.pt-hero-grid {
  display: grid; gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 1000px) {
  .pt-hero-grid { grid-template-columns: 1.05fr .95fr; }
}

.pt-hero h1 { color: #fff; margin-bottom: 20px; max-width: 15ch; }
.pt-hero h1 .hl {
  color: var(--amber);
  position: relative; display: inline-block;
}
/* Subrayado que se dibuja al cargar. */
.pt-hero h1 .hl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .085em;
  background: var(--amber); opacity: .32; border-radius: 3px;
  transform: scaleX(0); transform-origin: left;
  animation: pt-underline .9s var(--e-out) .5s forwards;
}
.pt-hero-lead {
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  color: var(--on-dark-2); max-width: 46ch; margin-bottom: 28px;
}

.pt-hero-stats {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 30px;
}
.pt-hero-stat { display: flex; flex-direction: column; gap: 1px; }
.pt-hero-stat b {
  font-size: 1.5rem; font-weight: 900; color: #fff;
  letter-spacing: -.03em; line-height: 1.1;
}
.pt-hero-stat span { font-size: .8125rem; color: var(--on-dark-3); font-weight: 600; }

.pt-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Buscador por medida ── */
.pt-finder {
  position: relative;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-xl);
  padding: clamp(22px, 2.6vw, 30px);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
}
/* Filo superior iluminado: le da volumen al panel de cristal. */
.pt-finder::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,.34), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.pt-finder-head { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.pt-finder-head h2 {
  font-size: 1.1875rem; color: #fff; margin: 0; letter-spacing: -.02em;
}
.pt-finder-head .ic {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--brand); color: #fff;
}
.pt-finder-head .ic svg { width: 18px; height: 18px; }
.pt-finder-sub { color: var(--on-dark-3); font-size: .8125rem; margin: 0 0 20px 47px; }

.pt-finder-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 18px;
  background: rgba(0,0,0,.3); border-radius: var(--r);
}
.pt-finder-tab {
  flex: 1; min-height: 38px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--on-dark-2);
  font-family: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
  transition: background-color var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft);
}
.pt-finder-tab:hover { color: #fff; }
.pt-finder-tab[aria-selected="true"] { background: var(--brand); color: #fff; }

.pt-finder-panel[hidden] { display: none; }

.pt-finder-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px;
}
.pt-finder .pt-label { color: var(--on-dark-3); }
.pt-finder .pt-select {
  background-color: rgba(255,255,255,.94);
  border-color: transparent;
  min-height: 52px; font-weight: 700;
}
.pt-finder .pt-select:focus { box-shadow: 0 0 0 3.5px rgba(58,76,234,.45); }

.pt-finder-hint {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 16px 0 0; padding: 12px 14px;
  background: rgba(255,176,32,.09); border: 1px solid rgba(255,176,32,.22);
  border-radius: var(--r); color: var(--on-dark-2); font-size: .8125rem; line-height: 1.5;
}
.pt-finder-hint svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--amber); }
.pt-finder-hint b { color: #fff; }

/* Ilustración del costado de la llanta: enseña dónde leer la medida. */
.pt-sidewall {
  display: inline-flex; align-items: baseline; gap: 2px;
  padding: 3px 9px; margin: 0 2px;
  background: rgba(255,255,255,.1); border-radius: 6px;
  font-weight: 800; letter-spacing: .02em; color: #fff;
}
.pt-sidewall i { font-style: normal; opacity: .45; }

/* ─────────────────────────────────────────────────────────
   7. BARRA DE CONFIANZA
   ───────────────────────────────────────────────────────── */

.pt-trust { position: relative; z-index: 2; margin-top: -34px; }
.pt-trust-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-3);
}
@media (min-width: 860px) { .pt-trust-grid { grid-template-columns: repeat(4, 1fr); } }

.pt-trust-item {
  display: flex; align-items: center; gap: 13px;
  padding: 20px 18px; background: var(--surface);
  transition: background-color var(--t) var(--e-soft);
}
.pt-trust-item:hover { background: var(--surface-2); }
.pt-trust-item .ic {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--brand-050); color: var(--brand);
  transition: transform var(--t) var(--e-out);
}
.pt-trust-item:hover .ic { transform: scale(1.08) rotate(-4deg); }
.pt-trust-item .ic svg { width: 20px; height: 20px; }
.pt-trust-item b { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.pt-trust-item span { font-size: .8125rem; color: var(--muted); }

/* ─────────────────────────────────────────────────────────
   8. TARJETA DE PRODUCTO
   ───────────────────────────────────────────────────────── */

/*
 * Rejilla de producto.
 *
 * ⚠️ woocommerce-layout.css impone a li.product `float:left`, un `width` en
 * porcentaje y `margin: 0 3.8% 2.99em 0`. Dentro de una rejilla el float se
 * ignora, pero el ancho y el margen NO: descuadran las columnas y dejan las
 * tarjetas de una misma fila con alturas distintas. Por eso se neutralizan
 * aquí de forma explícita. Se seleccionan tanto .pt-grid como ul.products
 * porque woocommerce_product_loop_start() imprime su propio <ul class="products">.
 */
.pt-grid,
.woocommerce ul.products,
ul.products {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
/* Cuatro columnas como máximo: más estrechas que eso, la foto de la llanta
   deja de leerse y el precio pierde jerarquía. */
@media (min-width: 1120px) {
  .pt-grid,
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(4, 1fr); }
}

.pt-grid > li,
.woocommerce ul.products li.product,
ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }

@media (max-width: 560px) {
  .pt-grid,
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(2, 1fr); gap: 11px; }
}

.pt-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t) var(--e-out),
              box-shadow var(--t) var(--e-out),
              border-color var(--t) var(--e-soft);
}
.pt-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: #D2D7E6;
}

.pt-card-media {
  position: relative; display: block;
  aspect-ratio: 1 / 1; background: var(--surface-2);
  overflow: hidden;
}
.pt-card-media img {
  width: 100%; height: 100%; object-fit: contain; padding: 12%;
  transition: transform var(--t-slow) var(--e-out);
}
.pt-card:hover .pt-card-media img { transform: scale(1.07); }

/* Marcador de agua cuando el producto no tiene foto todavía. */
.pt-card-noimg {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 6px;
  background: linear-gradient(155deg, #F3F5FA, #E8EBF4);
  text-align: center; padding: 16px;
}
.pt-card-noimg .m {
  font-size: clamp(1rem, .85rem + .8vw, 1.35rem); font-weight: 900;
  color: var(--text); letter-spacing: -.03em;
}
.pt-card-noimg .b { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.pt-card-noimg svg { width: 34px; height: 34px; color: #B9C0D4; }

.pt-card-flags {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}

/* Acción rápida: aparece al pasar el cursor, siempre visible en táctil. */
.pt-card-quick {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: var(--r);
  background: var(--ink); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; transform: translateY(8px) scale(.9);
  transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-out), background-color var(--t-fast) var(--e-soft);
}
.pt-card:hover .pt-card-quick,
.pt-card-quick:focus-visible { opacity: 1; transform: none; }
.pt-card-quick:hover { background: var(--brand); }
.pt-card-quick svg { width: 18px; height: 18px; }
@media (hover: none) {
  .pt-card-quick { opacity: 1; transform: none; }
}

.pt-card-body { display: flex; flex-direction: column; flex: 1; padding: 14px 15px 16px; gap: 8px; }

.pt-card-brand {
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand);
}
.pt-card-title {
  margin: 0; font-size: .9375rem; font-weight: 700; line-height: 1.35;
  letter-spacing: -.012em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pt-card-title a { color: var(--text); }
.pt-card-title a:hover { color: var(--brand); }

/* La medida es lo que el cliente busca: se muestra grande y separada. */
.pt-card-size {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--ink); color: #fff;
  font-size: .8125rem; font-weight: 800; letter-spacing: -.01em;
}
.pt-card-specs {
  display: flex; flex-wrap: wrap; gap: 4px;
  font-size: .6875rem; color: var(--muted); font-weight: 600;
}
.pt-card-specs span {
  padding: 2px 7px; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 5px;
}

.pt-card-foot { margin-top: auto; padding-top: 10px; }

.pt-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.pt-price .now {
  font-size: 1.3125rem; font-weight: 900; letter-spacing: -.035em; color: var(--text);
  line-height: 1.1;
}
.pt-price .was { font-size: .875rem; color: var(--muted); text-decoration: line-through; font-weight: 500; }
.pt-price .off {
  padding: 2px 7px; border-radius: 5px;
  background: var(--amber-050); color: var(--amber-600);
  font-size: .6875rem; font-weight: 900;
}
.pt-price-note { font-size: .6875rem; color: var(--muted); margin-top: 2px; }

/* Altura reservada para dos líneas: sin ella, un aviso que envuelve empuja el
   botón hacia abajo y los "Ver llanta" de una misma fila quedan desalineados. */
.pt-card-stock {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 700; margin-top: 8px;
  min-height: 34px;
}
.pt-card-stock .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pt-card-stock.is-ok  { color: var(--ok); }
.pt-card-stock.is-low { color: var(--warn); }
.pt-card-stock.is-out { color: var(--muted); }

.pt-card .pt-btn { margin-top: 11px; }

/* Tarjeta agotada: se atenúa pero sigue siendo indexable y consultable. */
.pt-card.is-out .pt-card-media { opacity: .55; filter: grayscale(.6); }

/* ─────────────────────────────────────────────────────────
   9. TIENDA Y FILTROS
   ───────────────────────────────────────────────────────── */

.pt-shop { padding: 26px 0 64px; }

.pt-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: .8125rem; color: var(--muted); margin-bottom: 18px;
}
.pt-crumbs a { color: var(--muted); font-weight: 600; }
.pt-crumbs a:hover { color: var(--brand); }
.pt-crumbs .sep { opacity: .45; }
.pt-crumbs [aria-current] { color: var(--text); font-weight: 700; }

.pt-shop-head { margin-bottom: 24px; }
.pt-shop-head h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); margin-bottom: 8px; }
.pt-shop-head .cnt { color: var(--muted); font-size: .9375rem; }
.pt-shop-head .cnt b { color: var(--text); }

.pt-shop-layout { display: grid; gap: 26px; align-items: start; }
@media (min-width: 980px) { .pt-shop-layout { grid-template-columns: 268px 1fr; } }

/* Barra de filtros */
.pt-filters {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 980px) {
  .pt-filters { position: sticky; top: calc(var(--hdr-h) + 16px); max-height: calc(100vh - var(--hdr-h) - 32px); overflow-y: auto; }
}
.pt-filters-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line-soft);
}
.pt-filters-head h2 { margin: 0; font-size: 1rem; }
.pt-filters-clear { font-size: .8125rem; font-weight: 700; color: var(--danger); }

.pt-fgroup { border-bottom: 1px solid var(--line-soft); }
.pt-fgroup:last-child { border-bottom: 0; }
.pt-fgroup > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; cursor: pointer; list-style: none;
  font-size: .875rem; font-weight: 700;
  transition: background-color var(--t-fast) var(--e-soft);
}
.pt-fgroup > summary::-webkit-details-marker { display: none; }
.pt-fgroup > summary:hover { background: var(--surface-2); }
.pt-fgroup > summary::after {
  content: ''; width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform var(--t) var(--e-out);
}
.pt-fgroup[open] > summary::after { transform: rotate(225deg) translate(-2px,-2px); }
.pt-fgroup-body { padding: 0 18px 18px; }
.pt-fgroup-body > * + * { margin-top: 10px; }

.pt-fradios { display: flex; flex-direction: column; gap: 2px; max-height: 232px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.pt-fradio {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer;
  font-size: .875rem; color: var(--text-2);
  transition: background-color var(--t-fast) var(--e-soft);
}
.pt-fradio:hover { background: var(--surface-2); }
.pt-fradio input { accent-color: var(--brand); width: 15px; height: 15px; cursor: pointer; }
.pt-fradio:has(input:checked) { background: var(--brand-050); color: var(--brand-700); font-weight: 700; }
.pt-fradio .n { margin-left: auto; font-size: .75rem; color: var(--muted); font-weight: 600; }

.pt-fprice { display: flex; align-items: center; gap: 8px; }
.pt-fprice .pt-input { min-height: 42px; text-align: center; }
.pt-fprice span { color: var(--muted); }

/* Chips de filtros activos */
.pt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pt-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 8px 7px 13px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-size: .8125rem; font-weight: 700;
  transition: transform var(--t-fast) var(--e-out);
}
.pt-chip:hover { color: #fff; transform: translateY(-1px); }
.pt-chip .x {
  width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.2); font-size: .75rem; line-height: 1;
}
.pt-chip:hover .x { background: var(--danger); }

/* Barra de herramientas del listado */
.pt-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.pt-toolbar .cnt { font-size: .875rem; color: var(--muted); }
.pt-toolbar .cnt b { color: var(--text); font-weight: 800; }
.pt-toolbar select { min-height: 42px; max-width: 230px; }

.pt-filters-toggle { display: none; }

/* Vacío */
.pt-empty {
  text-align: center; padding: 60px 20px;
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.pt-empty svg { width: 52px; height: 52px; color: #C3C9DB; margin: 0 auto 16px; }
.pt-empty h3 { margin-bottom: 8px; }
.pt-empty p { color: var(--muted); max-width: 44ch; margin: 0 auto 20px; }

/* Paginación */
.pt-pager { display: flex; justify-content: center; gap: 7px; margin-top: 40px; flex-wrap: wrap; }
.pt-pager a, .pt-pager span {
  min-width: 44px; height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); font-size: .9375rem; font-weight: 700; color: var(--text-2);
  transition: all var(--t-fast) var(--e-soft);
}
.pt-pager a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-2); }
.pt-pager .current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ─────────────────────────────────────────────────────────
   10. FICHA DE PRODUCTO
   ───────────────────────────────────────────────────────── */

.pt-product { padding: 24px 0 64px; }
.pt-product-top { display: grid; gap: clamp(26px, 3.5vw, 52px); align-items: start; }
@media (min-width: 900px) { .pt-product-top { grid-template-columns: minmax(0,1fr) minmax(0,.85fr); } }

.pt-gallery {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
}
@media (min-width: 900px) { .pt-gallery { position: sticky; top: calc(var(--hdr-h) + 16px); } }
.pt-gallery .woocommerce-product-gallery__image img { padding: 6%; }

.pt-pd-brand {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand);
}
.pt-pd h1 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: 12px; }

.pt-pd-size-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pt-spec-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .8125rem; font-weight: 700; color: var(--text-2);
}
.pt-spec-pill b { color: var(--text); }
.pt-spec-pill--hero {
  background: var(--ink); border-color: var(--ink); color: #fff; font-size: .9375rem;
}
.pt-spec-pill--hero b { color: #fff; }

/* Bloque de precio: lo más importante de la página. */
.pt-pd-price {
  padding: 20px 22px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pt-pd-price .row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.pt-pd-price .now {
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); font-weight: 900;
  letter-spacing: -.04em; line-height: 1; color: var(--text);
}
.pt-pd-price .was { font-size: 1.125rem; color: var(--muted); text-decoration: line-through; }
.pt-pd-price .off {
  padding: 5px 11px; border-radius: var(--r-sm);
  background: var(--amber); color: #2A1B00; font-size: .8125rem; font-weight: 900;
}
.pt-pd-price .tax { font-size: .8125rem; color: var(--muted); margin-top: 6px; }
.pt-pd-price .save { font-size: .875rem; font-weight: 700; color: var(--ok); margin-top: 4px; }

/* Precio por juego de 4: es como realmente se compran las llantas. */
.pt-set-price {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding: 13px 15px;
  background: var(--brand-050); border-radius: var(--r);
}
.pt-set-price .lbl { font-size: .8125rem; font-weight: 700; color: var(--brand-700); }
.pt-set-price .val { font-size: 1.1875rem; font-weight: 900; color: var(--brand-700); letter-spacing: -.03em; }

.pt-pd-stock {
  display: flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-size: .9375rem; font-weight: 700;
}
.pt-pd-stock .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pt-pd-stock.is-ok  { color: var(--ok); }
.pt-pd-stock.is-low { color: var(--warn); }
.pt-pd-stock.is-out { color: var(--danger); }
.pt-pd-stock.is-ok .dot { box-shadow: 0 0 0 0 rgba(14,159,91,.55); animation: pt-pulse 2.4s var(--e-out) infinite; }

/* Selector de cantidad con atajos: 1, 2 o juego de 4.
   Rejilla y no flex: así los tres caben siempre en una sola fila, aunque la
   columna sea estrecha, en vez de dejar "4" descolgado abajo. */
.pt-qty-presets {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 14px;
}
.pt-qty-preset {
  min-height: 62px; padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r);
  cursor: pointer; font-family: inherit;
  transition: all var(--t-fast) var(--e-soft);
}
.pt-qty-preset:hover { border-color: var(--brand-300); }
.pt-qty-preset b { font-size: 1rem; font-weight: 800; }
.pt-qty-preset span { font-size: .6875rem; color: var(--muted); font-weight: 600; }
.pt-qty-preset[aria-pressed="true"] {
  border-color: var(--brand); background: var(--brand-050);
  box-shadow: 0 0 0 3px var(--brand-050);
}
.pt-qty-preset[aria-pressed="true"] b, .pt-qty-preset[aria-pressed="true"] span { color: var(--brand-700); }

.pt-pd-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

/* Ventajas del pedido */
.pt-pd-perks { display: grid; gap: 2px; margin-bottom: 20px; }
.pt-pd-perk {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px;
  background: var(--surface); border: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--e-soft);
}
.pt-pd-perk:first-child { border-radius: var(--r) var(--r) 0 0; }
.pt-pd-perk:last-child  { border-radius: 0 0 var(--r) var(--r); }
.pt-pd-perk + .pt-pd-perk { border-top: 0; }
.pt-pd-perk:hover { background: var(--surface-2); }
.pt-pd-perk svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--brand); margin-top: 2px; }
.pt-pd-perk b { display: block; font-size: .875rem; }
.pt-pd-perk span { font-size: .8125rem; color: var(--muted); }

/* Pestañas de contenido */
.pt-tabs { margin-top: clamp(38px, 5vw, 60px); }
.pt-tabs-nav {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1.5px solid var(--line); margin-bottom: 26px;
}
.pt-tabs-nav::-webkit-scrollbar { display: none; }
.pt-tab-btn {
  position: relative; padding: 13px 20px; border: 0; background: transparent;
  font-family: inherit; font-size: .9375rem; font-weight: 700; color: var(--muted);
  cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast) var(--e-soft);
}
.pt-tab-btn:hover { color: var(--text); }
.pt-tab-btn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 2.5px;
  background: var(--brand); border-radius: 2px;
  transform: scaleX(0); transition: transform var(--t) var(--e-out);
}
.pt-tab-btn[aria-selected="true"] { color: var(--brand); }
.pt-tab-btn[aria-selected="true"]::after { transform: scaleX(1); }
.pt-tab-panel[hidden] { display: none; }

.pt-prose { max-width: 74ch; color: var(--text-2); }
.pt-prose h3 { color: var(--text); margin: 1.7em 0 .6em; font-size: 1.125rem; }
.pt-prose h3:first-child { margin-top: 0; }
.pt-prose ul, .pt-prose ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.pt-prose li { margin-bottom: .45em; }
.pt-prose strong { color: var(--text); font-weight: 700; }
.pt-prose table, .ptb-specs {
  width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .9375rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.pt-prose th, .pt-prose td, .ptb-specs th, .ptb-specs td {
  padding: 11px 15px; border-bottom: 1px solid var(--line-soft); text-align: left;
}
.ptb-specs th { width: 44%; font-weight: 600; color: var(--muted); background: var(--surface-2); }
.ptb-specs td { font-weight: 700; color: var(--text); }
.pt-prose tr:last-child th, .pt-prose tr:last-child td,
.ptb-specs tr:last-child th, .ptb-specs tr:last-child td { border-bottom: 0; }

/* Acordeón de preguntas */
.pt-faq { display: grid; gap: 10px; }
.pt-faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: border-color var(--t) var(--e-soft), box-shadow var(--t) var(--e-soft);
}
.pt-faq details[open] { border-color: var(--brand-300); box-shadow: var(--sh-2); }
.pt-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: .9375rem;
}
.pt-faq summary::-webkit-details-marker { display: none; }
.pt-faq summary::after {
  content: '+'; flex-shrink: 0;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--brand-050); color: var(--brand); border-radius: 50%;
  font-size: 1.125rem; font-weight: 700; line-height: 1;
  transition: transform var(--t) var(--e-out), background-color var(--t-fast) var(--e-soft);
}
.pt-faq details[open] summary::after { transform: rotate(135deg); background: var(--brand); color: #fff; }
.pt-faq .a { padding: 0 18px 18px; color: var(--text-2); font-size: .9375rem; }
.pt-faq .a p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────
   10b. ELEMENTOS NATIVOS DE WOOCOMMERCE
   Carrito, finalizar compra, mi cuenta y el formulario de compra usan la
   plantilla original de Woo (a propósito: ahí viven los ganchos del ERP).
   Sin estos estilos se ven como WooCommerce de fábrica dentro de un sitio
   que ya no lo parece.
   ───────────────────────────────────────────────────────── */

/*
 * ⚠️ woocommerce.css maqueta la ficha con flotados de dos columnas:
 *   div.product div.images  { float:left;  width:48% }
 *   div.product div.summary { float:right; width:48% }
 * Dentro de la rejilla del tema eso deja la columna de compra a la mitad de
 * su ancho real: el precio, los atajos de cantidad y el botón se comprimen.
 * Se anulan aquí para que la rejilla mande.
 */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.images,
.woocommerce-page div.product div.summary {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  clear: none !important;
}
.woocommerce div.product::before,
.woocommerce div.product::after { content: none !important; }

/* Botones de Woo con la identidad del tema */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px;
  background: var(--brand); color: #fff;
  border: 0; border-radius: var(--r);
  font-family: inherit; font-size: .9375rem; font-weight: 700; line-height: 1;
  text-transform: none; letter-spacing: -.01em;
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t) var(--e-out), filter var(--t-fast) var(--e-soft);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--brand); color: #fff;
  transform: translateY(-2px); box-shadow: var(--sh-brand); filter: brightness(1.06);
}
.woocommerce .button:disabled,
.woocommerce button.button:disabled[disabled] { opacity: .5; transform: none; box-shadow: none; }

/* El botón de compra de la ficha ocupa todo el ancho */
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.woocommerce div.product form.cart .button { flex: 1; min-width: 180px; min-height: 58px; font-size: 1rem; }

/* Selector de cantidad: en móvil salía de 21 px de alto, imposible de tocar */
.woocommerce .quantity,
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce .quantity .qty,
.woocommerce div.product form.cart .quantity .qty,
.woocommerce table.cart td.product-quantity .qty {
  width: 86px; min-height: 58px; height: 58px; padding: 0 8px;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--r);
  font-family: inherit; font-size: 1.0625rem; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums;
}
.woocommerce .quantity .qty:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-050);
}

/* Campos de formulario (checkout, cuenta, comentarios) */
.woocommerce form .form-row { margin-bottom: 16px; padding: 0; }
.woocommerce form .form-row label { display: block; font-size: .8125rem; font-weight: 700; margin-bottom: 6px; color: var(--text-2); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single {
  width: 100%; min-height: 50px; padding: 12px 14px;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--r);
  font-family: inherit; font-size: .9375rem;
  transition: border-color var(--t-fast) var(--e-soft), box-shadow var(--t-fast) var(--e-soft);
}
.woocommerce form .form-row textarea { min-height: 110px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-050);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 26px; color: var(--text); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }

/* Avisos: éxito, información y error */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 15px 18px; margin: 0 0 20px;
  border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--r); background: var(--surface);
  font-size: .9375rem; list-style: none;
}
.woocommerce-message { border-left-color: var(--ok); background: var(--ok-050); }
.woocommerce-info    { border-left-color: var(--brand); background: var(--brand-050); }
.woocommerce-error   { border-left-color: var(--danger); background: var(--danger-050); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; min-height: 42px; padding: 0 18px; font-size: .875rem; }

/* Tablas de carrito y pedido */
.woocommerce table.shop_table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 26px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 15px 16px; border-bottom: 1px solid var(--line-soft); border-top: 0;
  vertical-align: middle;
}
.woocommerce table.shop_table thead th {
  background: var(--surface-2); font-size: .75rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }
.woocommerce table.cart img { width: 62px; border-radius: var(--r-sm); background: var(--surface-2); }
.woocommerce a.remove {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2); color: var(--muted) !important;
  font-size: 1.1rem; line-height: 1;
}
.woocommerce a.remove:hover { background: var(--danger) !important; color: #fff !important; }

.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce .cross-sells { margin-top: 8px; }
.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-size: 1.125rem; margin-bottom: 14px; }
.woocommerce-checkout #payment {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.woocommerce-checkout #payment ul.payment_methods { padding: 18px; border-bottom: 1px solid var(--line-soft); }
.woocommerce-checkout #payment div.form-row { padding: 18px; }
.woocommerce-checkout #payment div.payment_box { background: var(--brand-050); border-radius: var(--r); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* Cupones */
.woocommerce .coupon { display: flex; gap: 8px; flex-wrap: wrap; }
.woocommerce .coupon .input-text { min-height: 50px; border: 1.5px solid var(--line); border-radius: var(--r); padding: 0 14px; }

/* Mi cuenta */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 11px 14px; border-radius: var(--r);
  color: var(--text-2); font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--brand-050); color: var(--brand-700); }

/* Galería de la ficha */
.woocommerce div.product div.images { margin: 0; }
.woocommerce div.product div.images img { border-radius: var(--r-lg); }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: 10px; gap: 8px; display: flex; padding: 0 6% 6%; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; margin: 0; float: none; }
.woocommerce div.product div.images .flex-control-thumbs img {
  width: 62px; height: 62px; object-fit: contain;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 4px; opacity: 1;
}

/* Ordenación del catálogo */
.woocommerce .woocommerce-ordering select {
  min-height: 44px; padding: 0 34px 0 14px;
  background-color: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r);
  font-family: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
  appearance: none;
  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 1.5 6 6.5l5-5' stroke='%236B7490' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.woocommerce .woocommerce-result-count { display: none; }

/* Reseñas */
.woocommerce #reviews #comments ol.commentlist { padding: 0; }
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px;
}
.woocommerce p.stars a { color: var(--amber); }

/* Banner de promoción que imprime el plugin del ERP en la ficha.
   Se respeta su marcado y solo se ajusta el color al del tema nuevo. */
.woocommerce div.product [style*="E9EBFA"] {
  background: var(--brand-050) !important;
  border-color: var(--brand) !important;
  color: var(--brand-700) !important;
  border-radius: var(--r) !important;
}

@media (max-width: 700px) {
  .woocommerce table.shop_table { display: block; overflow-x: auto; }
  .woocommerce div.product form.cart .button { min-width: 100%; }
}

/* ── Avisos propios del carrito (promoción del ERP / envío gratis) ── */
.pt-cart-note {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 18px; margin: 0 0 14px;
  border-radius: var(--r); font-size: .9375rem; font-weight: 600;
}
.pt-cart-note svg { flex-shrink: 0; }
.pt-cart-note--promo {
  background: var(--amber-050); border: 1px solid rgba(255,176,32,.5); color: #7A5200;
}
.pt-cart-note--promo svg { color: var(--amber-600); }
.pt-cart-note--envio {
  background: var(--brand-050); border: 1px solid rgba(27,47,216,.2); color: var(--brand-700);
}

/* ─────────────────────────────────────────────────────────
   10c. CARRITO Y CHECKOUT DE BLOQUES
   Las páginas /carrito/ y /finalizar-compra/ de este sitio están hechas con
   los bloques de WooCommerce (React), no con los shortcodes clásicos. Traen
   su propia hoja de estilos, muy neutra: sin esto, el paso final de la compra
   parece de otro sitio distinto al que trajo al cliente hasta aquí.
   ───────────────────────────────────────────────────────── */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { font-family: inherit; }

.wc-block-components-title,
.wc-block-cart__submit-container + *,
.wp-block-woocommerce-checkout h2 { font-family: inherit; letter-spacing: -.02em; }

/* Botones */
.wc-block-components-button:not(.is-link) {
  min-height: 54px; padding: 0 26px;
  background: var(--brand); color: #fff;
  border: 0; border-radius: var(--r);
  font-family: inherit; font-size: 1rem; font-weight: 700;
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t) var(--e-out), filter var(--t-fast) var(--e-soft);
}
.wc-block-components-button:not(.is-link):hover {
  background: var(--brand); transform: translateY(-2px);
  box-shadow: var(--sh-brand); filter: brightness(1.06);
}
.wc-block-components-checkout-place-order-button { width: 100%; min-height: 60px; font-size: 1.0625rem; }

/* Campos */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container,
.wc-block-components-combobox-control input {
  min-height: 52px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r) !important;
  font-family: inherit !important; font-size: .9375rem !important;
  background: var(--surface) !important; color: var(--text) !important;
}
.wc-block-components-text-input.is-active input:focus,
.wc-block-components-text-input input:focus {
  outline: none !important; border-color: var(--brand) !important;
  box-shadow: 0 0 0 3.5px var(--brand-050) !important;
}

/* Tarjetas y bordes */
.wc-block-components-panel,
.wc-block-components-radio-control-accordion-option,
.wc-block-checkout__payment-method .wc-block-components-radio-control {
  border-color: var(--line) !important; border-radius: var(--r) !important;
}
.wc-block-cart-items__row { border-color: var(--line-soft) !important; }
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  border-radius: var(--r-sm); background: var(--surface-2);
}
.wc-block-cart-item__product-name a,
.wc-block-components-product-name { color: var(--text) !important; font-weight: 700 !important; }
.wc-block-cart-item__product-name a:hover { color: var(--brand) !important; }

/* Totales: el número final es lo que el cliente busca con la mirada */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; color: var(--text);
}
.wc-block-components-totals-item { font-family: inherit; }

/* Avisos */
.wc-block-components-notice-banner {
  border-radius: var(--r) !important; font-family: inherit !important;
}
.wc-block-components-notice-banner.is-info    { border-color: var(--brand) !important; background: var(--brand-050) !important; }
.wc-block-components-notice-banner.is-success { border-color: var(--ok) !important;    background: var(--ok-050) !important; }
.wc-block-components-notice-banner.is-error   { border-color: var(--danger) !important; background: var(--danger-050) !important; }

/* Enlaces del bloque */
.wc-block-components-button.is-link,
.wc-block-cart__submit-container a { color: var(--brand); }

/* ─────────────────────────────────────────────────────────
   11. CARRITO LATERAL
   ───────────────────────────────────────────────────────── */

.pt-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(11,13,20,.55); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t) var(--e-soft), visibility var(--t) var(--e-soft);
}
body.pt-drawer-open .pt-scrim { opacity: 1; visibility: visible; }

.pt-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  box-shadow: -12px 0 44px rgba(11,13,20,.24);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--e-out);
}
body.pt-drawer-open .pt-drawer { transform: none; }

.pt-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.pt-drawer-head h2 { margin: 0; font-size: 1.0625rem; }
.pt-drawer-close {
  width: 38px; height: 38px; border: 0; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color var(--t-fast) var(--e-soft), transform var(--t-fast) var(--e-out);
}
.pt-drawer-close:hover { background: var(--line); }
.pt-drawer-close:active { transform: scale(.92); }

.pt-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.pt-drawer-foot {
  padding: 18px 20px; border-top: 1px solid var(--line);
  background: var(--surface-2); flex-shrink: 0;
}
.pt-drawer-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px; font-size: 1.0625rem;
}
.pt-drawer-total b { font-size: 1.375rem; font-weight: 900; letter-spacing: -.03em; }

/* Fragmento del mini carrito de WooCommerce */
.pt-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.pt-drawer .woocommerce-mini-cart-item {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 12px;
  align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.pt-drawer .woocommerce-mini-cart-item img {
  width: 62px; height: 62px; object-fit: contain;
  background: var(--surface-2); border-radius: var(--r-sm); padding: 5px;
}
.pt-drawer .woocommerce-mini-cart-item a { font-size: .875rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.pt-drawer .woocommerce-mini-cart-item .quantity { font-size: .8125rem; color: var(--muted); }
.pt-drawer .woocommerce-mini-cart-item .remove {
  grid-column: 3; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2); color: var(--muted);
  font-size: 1rem; line-height: 1; text-decoration: none;
}
.pt-drawer .woocommerce-mini-cart-item .remove:hover { background: var(--danger-050); color: var(--danger); }
.pt-drawer .woocommerce-mini-cart__total,
.pt-drawer .woocommerce-mini-cart__buttons { display: none; }
.pt-drawer .woocommerce-mini-cart__empty-message { text-align: center; color: var(--muted); padding: 40px 0; }

/* ─────────────────────────────────────────────────────────
   12. LANDINGS
   ───────────────────────────────────────────────────────── */

.pt-landing-hero {
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
  padding: clamp(34px, 4.5vw, 60px) 0;
}
.pt-landing-hero::before {
  content: ''; position: absolute; inset: -50% -20% auto -20%; height: 200%;
  background: radial-gradient(50% 40% at 26% 40%, rgba(27,47,216,.4) 0%, transparent 64%);
  pointer-events: none;
}
.pt-landing-hero > * { position: relative; }
.pt-landing-hero h1 { color: #fff; margin-bottom: 10px; }
.pt-landing-hero .pt-crumbs, .pt-landing-hero .pt-crumbs a { color: var(--on-dark-3); }
.pt-landing-hero .pt-crumbs a:hover, .pt-landing-hero .pt-crumbs [aria-current] { color: #fff; }
.pt-landing-hero .lead { color: var(--on-dark-2); max-width: 62ch; font-size: 1.0625rem; }

.pt-landing-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; }
.pt-landing-fact b { display: block; font-size: 1.375rem; font-weight: 900; letter-spacing: -.03em; color: #fff; }
.pt-landing-fact span { font-size: .8125rem; color: var(--on-dark-3); font-weight: 600; }

/* Nube de enlaces internos entre medidas */
.pt-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-tag {
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .875rem; font-weight: 700; color: var(--text-2);
  transition: all var(--t-fast) var(--e-soft);
}
.pt-tag:hover {
  border-color: var(--brand); color: var(--brand);
  transform: translateY(-2px); box-shadow: var(--sh-2);
}
.pt-tag .n { color: var(--muted); font-weight: 600; font-size: .8125rem; }

.pt-measure-index { columns: 220px; column-gap: 26px; }
.pt-measure-index a {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--text-2); font-weight: 600; font-size: .9375rem;
  break-inside: avoid;
  transition: background-color var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft);
}
.pt-measure-index a:hover { background: var(--brand-050); color: var(--brand-700); }
.pt-measure-index a .n { color: var(--muted); font-size: .8125rem; font-weight: 600; }

/* ─────────────────────────────────────────────────────────
   13. BLOG
   ───────────────────────────────────────────────────────── */

.pt-post-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pt-post-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.pt-post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.pt-post-card .media { aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; }
.pt-post-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--e-out); }
.pt-post-card:hover .media img { transform: scale(1.05); }
.pt-post-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.pt-post-card h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.pt-post-card h3 a { color: var(--text); }
.pt-post-card h3 a:hover { color: var(--brand); }
.pt-post-card .ex { font-size: .875rem; color: var(--muted); flex: 1; }
.pt-post-card .meta { font-size: .75rem; color: var(--muted); font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; }

.pt-article { padding: 0 0 64px; }
.pt-article-hero { background: var(--ink); color: #fff; padding: clamp(38px,5vw,72px) 0; position: relative; overflow: hidden; }
.pt-article-hero::before {
  content: ''; position: absolute; inset: -50% -20% auto -20%; height: 200%;
  background: radial-gradient(46% 40% at 30% 46%, rgba(27,47,216,.36) 0%, transparent 64%);
}
.pt-article-hero > * { position: relative; }
.pt-article-hero h1 { color: #fff; max-width: 22ch; }
.pt-article-hero .meta { color: var(--on-dark-3); font-size: .875rem; font-weight: 600; }

.pt-article-body {
  max-width: 72ch; margin: 0 auto; padding-top: 40px;
  font-size: 1.0625rem; line-height: 1.75; color: var(--text-2);
}
.pt-article-body h2 { font-size: 1.6rem; margin: 1.8em 0 .5em; color: var(--text); }
.pt-article-body h3 { font-size: 1.25rem; margin: 1.6em 0 .45em; color: var(--text); }
.pt-article-body img { border-radius: var(--r-lg); margin: 1.6em 0; }
.pt-article-body ul, .pt-article-body ol { padding-left: 1.3em; }
.pt-article-body li { margin-bottom: .55em; }
.pt-article-body blockquote {
  margin: 1.6em 0; padding: 18px 24px;
  border-left: 4px solid var(--brand); background: var(--brand-050);
  border-radius: 0 var(--r) var(--r) 0; font-style: italic; color: var(--text);
}
.pt-article-body a { text-decoration: underline; text-underline-offset: 3px; }

/* Llamada a la acción intercalada en el artículo: es lo que convierte
   el tráfico informativo del blog en ventas. */
.pt-inline-cta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: 2.2em 0; padding: 24px 26px;
  background: var(--ink); color: #fff; border-radius: var(--r-xl);
  position: relative; overflow: hidden;
}
.pt-inline-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 88% 50%, rgba(27,47,216,.5), transparent 70%);
}
.pt-inline-cta > * { position: relative; }
.pt-inline-cta .t { flex: 1; min-width: 220px; }
.pt-inline-cta h3 { color: #fff; margin-bottom: 5px; font-size: 1.1875rem; }
.pt-inline-cta p { color: var(--on-dark-2); margin: 0; font-size: .9375rem; }

/* ─────────────────────────────────────────────────────────
   14. SECCIONES DE PORTADA
   ───────────────────────────────────────────────────────── */

/* Carrusel de ofertas */
.pt-slider { position: relative; }
.pt-slider-view { overflow: hidden; border-radius: var(--r-xl); }
.pt-slider-track { display: flex; transition: transform .62s var(--e-out); }
.pt-slider-slide { flex: 0 0 100%; min-width: 100%; }
.pt-slider-slide img { width: 100%; height: auto; display: block; }
.pt-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.pt-slider-dots button {
  width: 30px; height: 5px; padding: 0; border: 0; border-radius: 3px;
  background: var(--line); cursor: pointer;
  transition: background-color var(--t) var(--e-soft), width var(--t) var(--e-out);
}
.pt-slider-dots button[aria-current="true"] { background: var(--brand); width: 44px; }
.pt-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--text);
  box-shadow: var(--sh-2); cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; transition: opacity var(--t) var(--e-soft), transform var(--t-fast) var(--e-out);
}
.pt-slider:hover .pt-slider-arrow { opacity: 1; }
.pt-slider-arrow:hover { transform: translateY(-50%) scale(1.08); }
.pt-slider-arrow.prev { left: 14px; }
.pt-slider-arrow.next { right: 14px; }
@media (hover: none) { .pt-slider-arrow { opacity: 1; } }

/* Categorías destacadas */
.pt-cats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pt-cat {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 190px; padding: 22px;
  background: var(--ink); color: #fff; border-radius: var(--r-lg);
  overflow: hidden; isolation: isolate;
  transition: transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.pt-cat::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 90% at 85% 15%, rgba(27,47,216,.62), transparent 66%);
  transition: transform var(--t-slow) var(--e-out);
}
.pt-cat:hover { transform: translateY(-5px); box-shadow: var(--sh-3); color: #fff; }
.pt-cat:hover::before { transform: scale(1.3); }
.pt-cat .ic { position: absolute; top: 20px; right: 20px; opacity: .3; }
.pt-cat .ic svg { width: 44px; height: 44px; }
.pt-cat h3 { color: #fff; font-size: 1.1875rem; margin-bottom: 4px; }
.pt-cat p { color: var(--on-dark-2); font-size: .8125rem; margin: 0; }
.pt-cat .go { margin-top: 12px; font-size: .8125rem; font-weight: 800; color: var(--amber); display: flex; align-items: center; gap: 6px; }
.pt-cat .go .ar { transition: transform var(--t) var(--e-out); }
.pt-cat:hover .go .ar { transform: translateX(5px); }

/* Marcas */
.pt-brands { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pt-brand-pill {
  padding: 11px 22px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .9375rem; font-weight: 700; color: var(--text-2);
  transition: all var(--t-fast) var(--e-soft);
}
.pt-brand-pill:hover {
  border-color: var(--brand); color: var(--brand);
  transform: translateY(-3px); box-shadow: var(--sh-2);
}
.pt-sec--dark .pt-brand-pill {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff;
}
.pt-sec--dark .pt-brand-pill:hover { background: rgba(255,255,255,.13); border-color: var(--amber); color: var(--amber); }

/* Pasos */
.pt-steps { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); counter-reset: s; }
.pt-step { position: relative; padding-top: 46px; }
.pt-step::before {
  counter-increment: s; content: counter(s);
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--brand); color: #fff; border-radius: 10px;
  font-size: .9375rem; font-weight: 900;
}
.pt-step h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.pt-step p { color: var(--muted); font-size: .9375rem; margin: 0; }
.pt-sec--dark .pt-step p { color: var(--on-dark-2); }

/* Bloque nosotros / mapa */
.pt-about { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .pt-about { grid-template-columns: 1.1fr .9fr; } }
.pt-infocard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 26px; box-shadow: var(--sh-2);
}
.pt-infocard h3 { margin-bottom: 14px; }
.pt-infocard ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.pt-infocard li { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--text-2); }
.pt-infocard li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand); margin-top: 3px; }

/* Botón flotante de WhatsApp */
.pt-wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 20px 0 16px;
  background: var(--wa); color: #04331A;
  border-radius: var(--r-pill); font-size: .9375rem; font-weight: 800;
  box-shadow: 0 8px 26px rgba(37,211,102,.42);
  transition: transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.pt-wa-float:hover { color: #04331A; transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 34px rgba(37,211,102,.5); }
.pt-wa-float svg { width: 24px; height: 24px; }
@media (max-width: 640px) {
  .pt-wa-float { padding: 0; width: 54px; justify-content: center; right: 16px; bottom: 16px; }
  .pt-wa-float .t { display: none; }
}

/* ─────────────────────────────────────────────────────────
   15. PIE
   ───────────────────────────────────────────────────────── */

.pt-footer { background: var(--ink); color: var(--on-dark-2); margin-top: auto; }
.pt-footer-main {
  display: grid; gap: 34px; padding: clamp(44px, 5vw, 68px) 0 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .pt-footer-main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pt-footer-main { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }

.pt-footer h4 {
  color: #fff; font-size: .8125rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px;
}
.pt-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pt-footer a { color: var(--on-dark-2); font-size: .9375rem; }
.pt-footer a:hover { color: #fff; }
.pt-footer-about p { font-size: .9375rem; color: var(--on-dark-3); max-width: 34ch; }
.pt-footer-contact li { display: flex; gap: 11px; align-items: flex-start; font-size: .9375rem; }
.pt-footer-contact svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--brand-300); margin-top: 3px; }

.pt-footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 0; border-top: 1px solid var(--ink-line);
  font-size: .8125rem; color: var(--on-dark-3);
}
.pt-footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.pt-pay { display: flex; align-items: center; gap: 9px; font-size: .75rem; }

/* ─────────────────────────────────────────────────────────
   16. ANIMACIONES
   ───────────────────────────────────────────────────────── */

@keyframes pt-spin  { to { transform: rotate(360deg); } }
@keyframes pt-bump  { 0%,100% { transform: scale(1); } 35% { transform: scale(1.35); } }
@keyframes pt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(14,159,91,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(14,159,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,159,91,0); }
}
@keyframes pt-underline { to { transform: scaleX(1); } }
@keyframes pt-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pt-shimmer { to { background-position: 200% 0; } }

/* Aparición al hacer scroll. El estado inicial solo se aplica cuando el JS
   marca <html class="pt-js">: sin JavaScript nada queda invisible. */
.pt-js [data-reveal] { opacity: 0; transform: translateY(22px); }
.pt-js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .62s var(--e-out), transform .62s var(--e-out);
}
.pt-js [data-reveal][data-delay="1"].is-in { transition-delay: .07s; }
.pt-js [data-reveal][data-delay="2"].is-in { transition-delay: .14s; }
.pt-js [data-reveal][data-delay="3"].is-in { transition-delay: .21s; }
.pt-js [data-reveal][data-delay="4"].is-in { transition-delay: .28s; }
.pt-js [data-reveal][data-delay="5"].is-in { transition-delay: .35s; }

/* Entrada del hero: se anima sola, sin esperar al observador. */
.pt-hero-in > * { animation: pt-rise .78s var(--e-out) backwards; }
.pt-hero-in > *:nth-child(1) { animation-delay: .05s; }
.pt-hero-in > *:nth-child(2) { animation-delay: .13s; }
.pt-hero-in > *:nth-child(3) { animation-delay: .21s; }
.pt-hero-in > *:nth-child(4) { animation-delay: .29s; }
.pt-hero-in > *:nth-child(5) { animation-delay: .37s; }
.pt-finder { animation: pt-rise .82s var(--e-out) .22s backwards; }

/* Esqueleto de carga */
.pt-skeleton {
  background: linear-gradient(90deg, var(--line-soft) 25%, #F5F6FA 50%, var(--line-soft) 75%);
  background-size: 200% 100%;
  animation: pt-shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}

/* Aviso flotante al agregar al carrito */
.pt-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 130;
  display: flex; align-items: center; gap: 11px;
  padding: 14px 22px; max-width: calc(100vw - 32px);
  background: var(--ink); color: #fff;
  border-radius: var(--r-pill); box-shadow: var(--sh-3);
  font-size: .9375rem; font-weight: 700;
  transform: translate(-50%, 100px); opacity: 0;
  transition: transform var(--t-slow) var(--e-out), opacity var(--t) var(--e-soft);
}
.pt-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.pt-toast svg { width: 19px; height: 19px; color: var(--ok); flex-shrink: 0; }

/*
 * Accesibilidad del movimiento (WCAG 2.3.3).
 * No se apaga todo: se conservan los cambios de estado que comunican
 * información (color, opacidad final) y se eliminan los desplazamientos
 * y escalados, que son los que provocan malestar vestibular.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .pt-js [data-reveal] { opacity: 1; transform: none; }
  .pt-hero-in > *, .pt-finder { animation: none; }
  .pt-card:hover, .pt-cat:hover, .pt-tag:hover,
  .pt-post-card:hover, .pt-btn:hover, .pt-wa-float:hover { transform: none; }
  .pt-card:hover .pt-card-media img,
  .pt-post-card:hover .media img { transform: none; }
  .pt-drawer { transition: none; }
}

/* ─────────────────────────────────────────────────────────
   17. RESPONSIVE
   ───────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .pt-nav a { padding: 9px 11px; font-size: .875rem; }
  .pt-call .t { display: none; }
  .pt-call { padding: 9px 12px; }
}

@media (max-width: 900px) {
  :root { --hdr-h: var(--hdr-h-sm); }

  /* El encabezado móvil mide 62 px: el logo baja para no tocar los bordes. */
  .pt-logo img, .pt-logo .custom-logo, .pt-header .custom-logo { height: 38px; max-width: 150px; }

  .pt-burger { display: flex; flex-direction: column; justify-content: center; }

  /* El menú se despliega como panel a pantalla completa bajo el encabezado. */
  .pt-nav {
    position: fixed; inset: var(--hdr-h) 0 0; z-index: 88;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 18px 20px;
    background: var(--ink);
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--e-out);
    overflow-y: auto;
  }
  body.pt-menu-open .pt-nav { transform: none; }
  body.pt-menu-open { overflow: hidden; }
  .pt-nav a { padding: 15px 14px; font-size: 1.0625rem; border-radius: var(--r); }
  .pt-nav a::after { display: none; }

  .pt-topbar-links { display: none; }
  .pt-call { display: none; }

  /* Los filtros pasan a un panel desplegable sobre el listado. */
  .pt-filters-toggle {
    display: inline-flex; width: 100%; margin-bottom: 14px;
  }
  .pt-filters { display: none; }
  .pt-filters.is-open { display: block; }
}

@media (max-width: 700px) {
  .pt-hero { padding: 34px 0 48px; }
  .pt-finder-row { grid-template-columns: repeat(2, 1fr); }
  .pt-finder-row > *:last-child { grid-column: 1 / -1; }
  .pt-hero-stats { gap: 10px 20px; }
  .pt-hero-stat b { font-size: 1.25rem; }
  .pt-trust { margin-top: -22px; }
  .pt-trust-item { padding: 15px 13px; gap: 10px; }
  .pt-trust-item .ic { width: 36px; height: 36px; }
  .pt-pd-price { padding: 16px 17px; }
  .pt-drawer { width: 100vw; }
  .pt-measure-index { columns: 150px; column-gap: 14px; }
}

@media (max-width: 480px) {
  .pt-wrap { padding: 0 14px; }
  .pt-card-body { padding: 11px 12px 13px; }
  .pt-price .now { font-size: 1.1875rem; }
  .pt-qty-preset { min-width: 0; }
}

/* Impresión: la ficha de producto debe poderse imprimir para el taller. */
@media print {
  .pt-header, .pt-topbar, .pt-footer, .pt-wa-float, .pt-drawer,
  .pt-scrim, .pt-pd-actions, .pt-filters, .pt-toast { display: none !important; }
  body { background: #fff; }
  .pt-product-top { grid-template-columns: 1fr 1fr; }
}