/* =============================================================================
   PRECIFILM · precifilm.css
   Sistema de diseño completo para el child theme de Divi 5 + WooCommerce.

   Este fichero es la concatenación LITERAL de los bloques CSS del handoff:
     · Parte 1 — tokens (:root) + tipografía + botones
     · Parte 2 — layout, secciones, tarjetas, responsive, WooCommerce
   No se han reescrito ni "mejorado" los valores. Al final, un bloque
   claramente marcado "AÑADIDOS PRECIFILM" cubre solo lo que el markup real
   de Divi 5 y WooCommerce necesita para respetar el diseño.

   Fuentes: se encolan desde functions.php (Opción B del handoff). No se usa
   @import aquí para no duplicar peticiones a Google Fonts.
   ============================================================================= */


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 1 · 01 — DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* — Color: marca — */
  --p-orange:        #eb654e;
  --p-orange-dark:   #d24d36;   /* hover CTA primaria */
  --p-orange-soft:   rgba(235,101,78,.10);
  --p-navy:          #1a2545;
  --p-navy-deep:     #111a33;   /* solo estados :active de botón */
  --p-navy-soft:     rgba(26,37,69,.06);

  /* — Color: neutrales — */
  --p-bg:            #ffffff;
  --p-surface:       #f7f6f4;
  --p-surface-2:     #efece6;
  --p-border:        #e2dfd8;
  --p-border-dark:   rgba(255,255,255,.14);  /* bordes sobre navy */
  --p-text:          #1a2545;
  --p-text-2:        #5b6171;
  --p-text-inv:      #ffffff;
  --p-text-inv-2:    rgba(255,255,255,.72);
  --p-text-inv-3:    rgba(255,255,255,.60);

  /* — Color: estado — */
  --p-ok:            #177a4c;
  --p-ok-soft:       rgba(23,122,76,.10);
  --p-warn:          #a85b00;
  --p-warn-soft:     rgba(168,91,0,.10);
  --p-dot-idle:      #d6d2c9;

  /* — Tipografía — */
  --p-font-display:  'Source Serif 4', Georgia, serif;
  --p-font-ui:       'Inter', system-ui, -apple-system, sans-serif;
  --p-font-mono:     'IBM Plex Mono', ui-monospace, monospace;

  --p-fs-h1:         52px;
  --p-fs-h2:         34px;
  --p-fs-h3:         30px;
  --p-fs-h4:         19px;
  --p-fs-stat:       26px;
  --p-fs-price:      26px;
  --p-fs-price-lg:   30px;
  --p-fs-lead:       16.5px;
  --p-fs-body:       15px;
  --p-fs-body-sm:    14.5px;
  --p-fs-small:      13px;
  --p-fs-xsmall:     12.5px;
  --p-fs-eyebrow:    11px;
  --p-fs-mono:       10px;

  --p-lh-tight:      1.08;
  --p-lh-heading:    1.25;
  --p-lh-snug:       1.35;
  --p-lh-body:       1.6;
  --p-lh-relaxed:    1.65;

  --p-ls-h1:         -.03em;
  --p-ls-h2:         -.03em;
  --p-ls-h4:         -.02em;
  --p-ls-eyebrow:    .1em;
  --p-ls-mono:       .1em;
  --p-ls-mono-tight: .08em;
  --p-ls-mono-wide:  .12em;

  --p-fw-regular:    400;
  --p-fw-medium:     500;
  --p-fw-semibold:   600;
  --p-fw-bold:       700;

  /* — Espaciado (escala base 4) — */
  --p-space-1:       4px;
  --p-space-2:       8px;
  --p-space-3:       12px;
  --p-space-4:       16px;
  --p-space-5:       20px;
  --p-space-6:       24px;
  --p-space-7:       28px;
  --p-space-8:       32px;
  --p-space-9:       40px;
  --p-space-10:      44px;
  --p-space-11:      52px;
  --p-space-12:      56px;
  --p-space-13:      64px;

  /* — Layout — */
  --p-container:     1320px;
  --p-gutter:        40px;
  --p-gutter-tablet: 28px;
  --p-gutter-mobile: 20px;
  --p-gap-grid:      20px;   /* rejillas de tarjetas */
  --p-gap-cols:      56px;   /* dos columnas hero / CTA */

  /* — Radios — */
  --p-radius-sm:     5px;    /* badge % descuento */
  --p-radius:        6px;    /* eyebrow / badge stock */
  --p-radius-md:     8px;    /* inputs */
  --p-radius-btn:    9px;    /* botones nav y tarjeta */
  --p-radius-cta:    10px;   /* CTA grandes, buzones */
  --p-radius-lg:     12px;   /* tarjetas y bloques */
  --p-radius-pill:   99px;

  /* — Sombras (con tinte de marca) — */
  --p-shadow-cta:    0 8px 20px rgba(235,101,78,.26);
  --p-shadow-cta-sm: 0 6px 16px rgba(235,101,78,.28);
  --p-shadow-card:   0 18px 40px rgba(26,37,69,.10);
  --p-shadow-card-2: 0 16px 36px rgba(26,37,69,.10);
  --p-shadow-hover:  0 14px 30px rgba(26,37,69,.12);

  /* — Motion — */
  --p-ease:          cubic-bezier(.4,0,.2,1);
  --p-dur-fast:      .2s;
  --p-dur:           .3s;
  --p-dur-slide:     .6s;

  /* — Textura de placeholder de imagen — */
  --p-hatch: repeating-linear-gradient(45deg,#efece6 0 9px,#f7f6f4 9px 18px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 1 · 02 — TIPOGRAFÍA (clases de utilidad)
   ═══════════════════════════════════════════════════════════════════════════ */
/* El `:not(.p-h2)` es por el titular de la presentación de la portada: es un
   <h1 class="p-h2"> —etiqueta por SEO, tamaño por diseño— y sin la excepción
   se pintaría a 52px, porque `.p-scope h1` vale (0,1,1) y `.p-h2` (0,1,0). */
.p-h1, .p-scope h1:not(.p-h2) {
  font-family: var(--p-font-display); font-weight: 600;
  font-size: var(--p-fs-h1); line-height: var(--p-lh-tight);
  letter-spacing: var(--p-ls-h1); margin: 20px 0 16px; text-wrap: pretty;
}
.p-h2, .p-scope h2 {
  font-family: var(--p-font-display); font-weight: 600;
  font-size: var(--p-fs-h2); line-height: 1.15;
  letter-spacing: var(--p-ls-h2); margin: 0 0 12px;
}
.p-h3, .p-scope h3 {
  font-family: var(--p-font-display); font-weight: 600;
  font-size: var(--p-fs-h3); line-height: 1.2; letter-spacing: -.03em; margin: 0 0 12px;
}
.p-h4, .p-scope h4 {
  font-family: var(--p-font-display); font-weight: 600;
  font-size: var(--p-fs-h4); line-height: var(--p-lh-heading);
  letter-spacing: var(--p-ls-h4); margin: 0 0 8px;
}
.p-em { font-style: italic; color: var(--p-orange); }

.p-lead   { font-size: var(--p-fs-lead); line-height: var(--p-lh-body);
            color: var(--p-text-2); max-width: 52ch; text-wrap: pretty; }
.p-body   { font-size: var(--p-fs-body); line-height: var(--p-lh-body); color: var(--p-text-2); }
.p-small  { font-size: var(--p-fs-small); line-height: 1.5; color: var(--p-text-2); }
.p-caption{ font-size: var(--p-fs-xsmall); line-height: 1.5; color: var(--p-text-2); }

.p-eyebrow {
  display: inline-block; font-family: var(--p-font-ui);
  font-size: var(--p-fs-eyebrow); font-weight: 700;
  letter-spacing: var(--p-ls-eyebrow); text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--p-radius);
  background: var(--p-orange); color: #fff;
}
.p-eyebrow--navy  { background: var(--p-navy); }
.p-eyebrow--green { background: var(--p-ok); }

.p-mono {
  font-family: var(--p-font-mono); font-size: var(--p-fs-mono);
  letter-spacing: var(--p-ls-mono); text-transform: uppercase; color: var(--p-text-2);
}
.p-sku   { font-family: var(--p-font-mono); font-size: 10.5px;
           letter-spacing: var(--p-ls-mono); text-transform: uppercase; color: var(--p-text-2); }
.p-price { font-family: var(--p-font-display); font-weight: 600;
           font-size: var(--p-fs-price); letter-spacing: -.02em; color: var(--p-text); }
.p-price--lg  { font-size: var(--p-fs-price-lg); }
.p-price-was  { font-size: 13px; color: var(--p-text-2); text-decoration: line-through; }
.p-stat  { font-family: var(--p-font-display); font-weight: 600;
           font-size: var(--p-fs-stat); letter-spacing: -.02em; }

.p-badge-stock { display:inline-block; font-size: 11.5px; font-weight: 600;
  padding: 5px 9px; border-radius: var(--p-radius);
  color: var(--p-ok); background: var(--p-ok-soft); }
.p-badge-stock--warn { color: var(--p-warn); background: var(--p-warn-soft); }
.p-badge-off { position:absolute; top:10px; left:10px; font-size:11px; font-weight:700;
  padding:4px 8px; border-radius: var(--p-radius-sm);
  background: var(--p-orange); color:#fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 1 · 03 — SISTEMA DE BOTONES
   ═══════════════════════════════════════════════════════════════════════════ */
/* ——— Botones: base común ——— */
.btn-primary, .btn-secondary, .btn-dark, .btn-ghost-light,
.wp-block-button[class*="is-style-p-"] > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--p-font-ui); font-size: 14.5px; font-weight: 600;
  line-height: 1; text-decoration: none; white-space: nowrap;
  padding: 14px 24px; border-radius: var(--p-radius-cta);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--p-dur-fast) var(--p-ease),
              color var(--p-dur-fast) var(--p-ease),
              border-color var(--p-dur-fast) var(--p-ease),
              box-shadow var(--p-dur-fast) var(--p-ease),
              transform var(--p-dur-fast) var(--p-ease);
}


/* ——— Primaria (naranja) ——— */
.btn-primary, .wp-block-button.is-style-p-primario > .wp-block-button__link {
  background: var(--p-orange); color: #fff;
  box-shadow: var(--p-shadow-cta);
}
.btn-primary:hover, .btn-primary:focus-visible,
.wp-block-button.is-style-p-primario > .wp-block-button__link:hover, .wp-block-button.is-style-p-primario > .wp-block-button__link:focus-visible {
  background: var(--p-orange-dark); color: #fff;
  box-shadow: 0 10px 24px rgba(235,101,78,.32); transform: translateY(-1px);
}
.btn-primary:active, .wp-block-button.is-style-p-primario > .wp-block-button__link:active {
  background: #bf4530; box-shadow: 0 4px 10px rgba(235,101,78,.24); transform: translateY(0);
}

/* ——— Secundaria (contorno navy) ——— */
.btn-secondary, .wp-block-button.is-style-p-secundario > .wp-block-button__link {
  background: transparent; color: var(--p-navy); border-color: var(--p-navy);
}
.btn-secondary:hover, .btn-secondary:focus-visible,
.wp-block-button.is-style-p-secundario > .wp-block-button__link:hover, .wp-block-button.is-style-p-secundario > .wp-block-button__link:focus-visible {
  background: var(--p-navy); color: #fff; border-color: var(--p-navy);
}
.btn-secondary:active, .wp-block-button.is-style-p-secundario > .wp-block-button__link:active { background: var(--p-navy-deep); border-color: var(--p-navy-deep); color:#fff; }

/* ——— Oscura (navy sólido) — CTA de tarjeta ——— */
.btn-dark, .wp-block-button.is-style-p-oscuro > .wp-block-button__link {
  background: var(--p-navy); color: #fff;
  font-size: 13.5px; padding: 11px 20px; border-radius: var(--p-radius-btn);
}
.btn-dark:hover, .btn-dark:focus-visible,
.wp-block-button.is-style-p-oscuro > .wp-block-button__link:hover, .wp-block-button.is-style-p-oscuro > .wp-block-button__link:focus-visible { background: #24325c; color: #fff; }
.btn-dark:active, .wp-block-button.is-style-p-oscuro > .wp-block-button__link:active { background: var(--p-navy-deep); }

/* Variante contorno usada en la tarjeta de producto (estado por defecto)
   → mismo tamaño que .btn-dark pero fondo blanco */
.btn-dark--outline {
  background: #fff; color: var(--p-navy); border-color: var(--p-navy);
}
.btn-dark--outline:hover { background: var(--p-navy); color: #fff; }

/* ——— Ghost sobre fondo oscuro ——— */
.btn-ghost-light, .wp-block-button.is-style-p-claro > .wp-block-button__link {
  background: transparent; color: #fff; font-size: 13.5px; font-weight: 500;
  padding: 11px 20px; border-radius: var(--p-radius-btn);
  border-color: rgba(255,255,255,.28);
}
.btn-ghost-light:hover, .btn-ghost-light:focus-visible,
.wp-block-button.is-style-p-claro > .wp-block-button__link:hover, .wp-block-button.is-style-p-claro > .wp-block-button__link:focus-visible {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5); color: #fff;
}
.btn-ghost-light:active, .wp-block-button.is-style-p-claro > .wp-block-button__link:active { background: rgba(255,255,255,.16); }

/* ——— Compacta (barra de navegación) ——— */
.btn-primary--sm {
  font-size: 13.5px; padding: 11px 18px;
  border-radius: var(--p-radius-btn); box-shadow: var(--p-shadow-cta-sm);
}

/* ——— Enlace de texto con flecha ——— */
.p-link, .p-more > a {
  font-size: 13.5px; font-weight: 600; color: var(--p-orange); text-decoration: none;
}
.p-link:hover, .p-more > a:hover { color: var(--p-orange-dark); }

/* ——— Foco accesible global ——— */
.p-scope a:focus-visible, .p-scope button:focus-visible, .p-scope input:focus-visible {
  outline: 2px solid var(--p-orange); outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 2 · 06 — CSS GLOBAL (layout, secciones, tarjetas, responsive)
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══ LAYOUT Y HELPERS ═══ */
.p-scope { color: var(--p-text); font-family: var(--p-font-ui); }
.p-container { max-width: var(--p-container); margin: 0 auto; padding: 0 var(--p-gutter); }
.p-section    { padding: var(--p-space-11) 0; }
.p-section--tight { padding: var(--p-space-10) 0; }
.p-section--wide  { padding: var(--p-space-12) 0; }
.p-section--hero  { padding: var(--p-space-13) 0 var(--p-space-12); }
.p-bordered-top    { border-top: 1px solid var(--p-border); }
.p-bordered-bottom { border-bottom: 1px solid var(--p-border); }

.p-surface   { background: var(--p-surface); }
.p-surface-2 { background: var(--p-surface-2); }
.p-navy      { background: var(--p-navy); color: var(--p-text-inv); }
.p-navy .p-body, .p-navy p { color: var(--p-text-inv-2); }
.p-navy h1, .p-navy h2, .p-navy h3 { color: var(--p-text-inv); }

.p-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--p-gap-grid); }
.p-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--p-gap-grid); }
.p-split      { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--p-gap-cols); align-items: center; }
/* Los modificadores se usan SOLOS en el marcado (class="p-split--even"), sin
   la clase base .p-split, así que tienen que traer su propia rejilla. Sin
   `display: grid` heredaban `block` y las dos columnas caían una bajo otra:
   así se veían los apartados de dropshipping y de alta de cuenta B2B. */
.p-split--even {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--p-gap-cols);
  align-items: center;
}
.p-split--rev {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--p-gap-cols);
  align-items: center;
}
.p-row-between{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--p-space-8); margin-bottom: var(--p-space-6); }
.p-actions    { display: flex; gap: var(--p-space-3); flex-wrap: wrap; }

/* ═══ TARJETAS ═══ */
.p-card {
  background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.p-card--elevated { box-shadow: var(--p-shadow-card); padding: 20px; }
.p-card--hover { transition: box-shadow var(--p-dur-fast) var(--p-ease), transform var(--p-dur-fast) var(--p-ease); }
.p-card--hover:hover { box-shadow: var(--p-shadow-hover); transform: translateY(-2px); }
.p-card__body { padding: var(--p-space-4); display: flex; flex-direction: column; flex: 1; }
.p-card__foot { margin-top: auto; }

/* Placeholder de imagen con textura */
.p-hatch { background: var(--p-hatch); }
.p-hatch--card { height: 158px; position: relative; }
.p-hatch--cat  { height: 132px; display: flex; align-items: flex-end; padding: 10px; }

/* La foto de categoría que sustituye al rayado, en las tarjetas de familia de
   la portada y en las de venta cruzada. Ocupa EXACTAMENTE el hueco del rayado
   —132px— para que la tarjeta no cambie de alto según haya foto o no.

   Esta regla faltaba: el marcado de la portada ya pedía `.p-fam__photo` desde
   el principio y no había nada que la vistiera, así que la imagen salía a su
   tamaño natural. */
.p-fam__photo {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  background: var(--p-surface);
}
.p-hatch--hero { height: 180px; border-radius: 9px; display: flex; align-items: flex-end;
                 justify-content: center; padding-bottom: 12px; }

/* Guías técnicas */
.p-guide { display: block; background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg); padding: 22px; color: var(--p-text);
  transition: background var(--p-dur-fast) var(--p-ease); }
.p-guide:hover { background: var(--p-surface-2); color: var(--p-text); }
.p-guide__tag { font-family: var(--p-font-mono); font-size: 10px; letter-spacing: var(--p-ls-mono);
  text-transform: uppercase; color: var(--p-orange); margin-bottom: 12px; }

/* Pills de sector */
.p-pills { display: flex; flex-wrap: wrap; gap: var(--p-space-2) 10px; }
.p-pill { border: 1px solid var(--p-border); border-radius: var(--p-radius-pill);
  padding: 9px 18px; font-size: 13.5px; font-weight: 500;
  color: var(--p-text); background: var(--p-bg); }
.p-pill:hover { border-color: var(--p-orange); color: var(--p-orange); }

/* Trust strip: 4 columnas con separadores */
.p-trust { display: grid; grid-template-columns: repeat(4,1fr); }
.p-trust > div { padding: 26px; border-right: 1px solid var(--p-border); }
.p-trust > div:first-child { padding-left: 0; }
.p-trust > div:last-child  { padding-right: 0; border-right: 0; }

/* Fila de stats del hero */
.p-stats { display: flex; gap: var(--p-space-10); flex-wrap: wrap; }

/* Buscador por medidas (bloque navy) */
.p-dimsearch { background: var(--p-navy); border-radius: var(--p-radius-lg); padding: 26px 30px;
  display: grid; grid-template-columns: auto 1fr 1fr 1fr auto; gap: var(--p-space-5); align-items: end; }
.p-dimsearch label { display: block; }
.p-field-label { display: block; font-family: var(--p-font-mono); font-size: 10px;
  letter-spacing: var(--p-ls-mono); text-transform: uppercase;
  color: var(--p-text-inv-3); margin-bottom: 7px; }
.p-input-dark { width: 100%; height: 42px; border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--p-radius-md); background: rgba(255,255,255,.06);
  color: #fff; padding: 0 12px; font-size: 14px; font-family: var(--p-font-ui); }
.p-input-dark::placeholder { color: rgba(255,255,255,.4); }
.p-input-dark:focus { outline: none; border-color: var(--p-orange); background: rgba(255,255,255,.10); }

/* Tabla de precios escalonados */
.p-table { border: 1px solid var(--p-border); border-radius: var(--p-radius-lg);
  overflow: hidden; background: var(--p-bg); }
.p-table__head, .p-table__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.p-table__head { background: var(--p-navy); color: rgba(255,255,255,.85);
  font-family: var(--p-font-mono); font-size: 10px; letter-spacing: var(--p-ls-mono);
  text-transform: uppercase; }
.p-table__head > div { padding: 12px 16px; }
.p-table__row { border-top: 1px solid var(--p-border); font-size: 14px; align-items: center; }
.p-table__row > div { padding: 14px 16px; }
.p-table__row > div:first-child { font-weight: 600; }
.p-table__row > div:not(:first-child) { font-family: var(--p-font-mono); font-size: 13px; }
.p-table__row--featured { background: var(--p-orange); color: #fff; }

/* Etiqueta de envío (dropshipping) */
.p-shiplabel { border: 1px dashed var(--p-border); border-radius: 9px; padding: 18px; }
.p-barcode { height: 34px; width: 120px;
  background: repeating-linear-gradient(90deg, var(--p-navy) 0 2px, #fff 2px 5px); }

/* Checklist sobre navy */
.p-check { display: flex; gap: var(--p-space-3); align-items: flex-start;
  background: rgba(255,255,255,.06); border: 1px solid var(--p-border-dark);
  border-radius: var(--p-radius-cta); padding: 16px 18px; }
.p-check__mark { color: var(--p-orange); font-weight: 700; }

/* Cabecera y utility bar */
.p-utility { background: var(--p-navy); color: rgba(255,255,255,.82); font-size: 12.5px; }
.p-utility .p-container { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-6); }
.p-header { background: var(--p-bg); border-bottom: 1px solid var(--p-border); }
.p-header .p-container { height: 78px; display: flex; align-items: center; gap: var(--p-space-8); }
.p-logo img { height: 40px; width: auto; display: block; }
.p-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 44px;
  border: 1px solid var(--p-border); border-radius: var(--p-radius-cta);
  background: var(--p-surface); padding: 0 14px; }
.p-search input { flex: 1; border: 0; background: transparent; outline: none;
  font-size: 14px; color: var(--p-text); font-family: var(--p-font-ui); }
.p-catnav { background: var(--p-surface); border-bottom: 1px solid var(--p-border); }
.p-catnav .p-container { height: 46px; display: flex; align-items: center;
  gap: 26px; font-size: 13px; font-weight: 500; overflow-x: auto; scrollbar-width: none; }
.p-catnav a { color: var(--p-text); white-space: nowrap; }
.p-catnav a:hover { color: var(--p-orange); }
.p-cart-count { color: var(--p-orange); font-weight: 700; }

/* Footer */
/* Mismo azul que la barra de utilidad de la cabecera y que los apartados
   oscuros de la portada. Antes el pie usaba --p-navy-deep, un tono más
   cerrado que rompía la unidad de las tres zonas oscuras del sitio. */
.p-footer { background: var(--p-navy); color: rgba(255,255,255,.68); }
/* Menos relleno arriba porque la separación con el apartado anterior la marca
   ahora la línea divisoria de .p-footer__cols. */
.p-footer .p-container { padding-top: var(--p-space-9); }

/* Línea divisoria entre el último apartado de la página y el pie.
   Desde que ambos comparten el mismo azul de marca, las dos zonas se fundían
   sin ningún corte visual. Se replica exactamente el filete que ya separa el
   aviso legal (.p-footer__bar): mismo grosor y mismo blanco al 12 %.

   Va en .p-footer__cols y no en .p-container a propósito: el contenedor ocupa
   todo el ancho de la ventana y su borde se dibujaría de lado a lado, mientras
   que aquí queda alineado con el contenido —1185px a partir de x=40— igual que
   el del aviso legal. */
.p-footer__cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: var(--p-space-9);
  padding-bottom: var(--p-space-7);
}
.p-footer__head { font-family: var(--p-font-mono); font-size: 10px;
  letter-spacing: var(--p-ls-mono-wide); text-transform: uppercase;
  color: #fff; margin-bottom: 14px; }
.p-footer a { color: rgba(255,255,255,.68); }
.p-footer a:hover { color: #fff; }
.p-footer__links { display: grid; gap: 9px; font-size: 13px; }
.p-footer__bar { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0 var(--p-space-9);
  display: flex; justify-content: space-between; font-size: 12px; }
.p-footer__logo { display: inline-flex; background: #fff; border-radius: var(--p-radius-md);
  padding: 10px 14px; margin-bottom: var(--p-space-4); }
.p-footer__logo img { height: 34px; width: auto; display: block; }

/* Hero slider (si se implementa con et_pb_code) */
.p-hero { background: var(--p-surface); border-bottom: 1px solid var(--p-border); overflow: hidden; }
.p-hero__track { display: flex; transition: transform var(--p-dur-slide) var(--p-ease); }
.p-hero__slide { flex: 0 0 100%; max-width: 100%; }
.p-dots { display: flex; gap: var(--p-space-2); }
.p-dot { width: 8px; height: 8px; border: 0; padding: 0; border-radius: var(--p-radius-pill);
  background: var(--p-dot-idle); cursor: pointer; transition: all var(--p-dur) var(--p-ease); }
.p-dot.is-active { width: 26px; background: var(--p-orange); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 980px) {
  :root { --p-fs-h1: 38px; --p-fs-h2: 28px; --p-fs-h3: 25px; --p-fs-lead: 15.5px; --p-gap-cols: 36px; }
  .p-container { padding: 0 var(--p-gutter-tablet); }
  .p-section { padding: var(--p-space-9) 0; }
  .p-section--hero { padding: var(--p-space-9) 0 var(--p-space-8); }
  .p-split, .p-split--even, .p-split--rev { grid-template-columns: 1fr; }
  .p-grid-4 { grid-template-columns: repeat(2,1fr); }
  .p-trust { grid-template-columns: repeat(2,1fr); }
  .p-trust > div { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--p-border); }
  .p-trust > div:nth-child(odd) { padding-right: 22px; }
  .p-trust > div:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--p-border); }
  .p-dimsearch { grid-template-columns: 1fr 1fr; }
  .p-footer__cols { grid-template-columns: repeat(2,1fr); gap: 28px; }
  .p-header .p-container { height: auto; padding: 14px var(--p-gutter-tablet); flex-wrap: wrap; }
  .p-search { order: 3; flex: 1 0 100%; }
}
@media (max-width: 767px) {
  :root { --p-fs-h1: 30px; --p-fs-h2: 24px; --p-fs-h3: 22px; --p-fs-price: 23px; }
  .p-container { padding: 0 var(--p-gutter-mobile); }
  .p-section, .p-section--wide, .p-section--tight { padding: var(--p-space-8) 0; }
  .p-grid-4, .p-grid-2 { grid-template-columns: 1fr; }
  .p-trust { grid-template-columns: 1fr; }
  .p-trust > div { padding: 18px 0 !important; border-left: 0 !important; }
  .p-dimsearch { grid-template-columns: 1fr; padding: 20px; }
  .p-table__head { display: none; }
  .p-table__row { grid-template-columns: 1fr 1fr; }
  .p-table__row > div { padding: 10px 14px; }
  .p-footer__cols { grid-template-columns: 1fr; }
  .p-footer__bar { flex-direction: column; gap: 10px; }
  .p-stats { gap: var(--p-space-5) var(--p-space-8); }
  .p-actions .btn-primary, .p-actions .btn-secondary,
  .p-actions > .wp-block-button,
  .p-actions > .wp-block-button > .wp-block-button__link { width: 100%; }
  .p-utility { display: none; }   /* teléfono pasa a la cabecera en móvil */
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 2 · 07 — WOOCOMMERCE (loop de catálogo)
   ═══════════════════════════════════════════════════════════════════════════ */
/* OJO CON EL SELECTOR: `.p-scope ul.products`, NO `.p-scope .woocommerce ul.products`.
   Esta regla estuvo escrita así hasta el 05/10/2026 y NUNCA llegó a aplicarse:
   WooCommerce pone `woocommerce` en el <body> y el tema pone ahí mismo
   `p-scope`, así que el combinador de descendencia pedía un `.woocommerce`
   DENTRO de `.p-scope` que no existe. Un elemento no es descendiente de sí
   mismo. Es la trampa de la §17.21 con otro disfraz.

   No se notó porque GP Premium tapaba el hueco: su módulo de WooCommerce
   envuelve el listado en `.wc-columns-container` y su CSS le da la rejilla.
   El día que ese módulo no está activo —producción, 05/10/2026— el listado
   cae al maquetado por `float` de WooCommerce, el <ul> se queda con altura 0
   y la franja de «¿Necesitas grandes cantidades?», que es su hermana, sube a
   colocarse al lado de las tarjetas como si fuera una más.

   La rejilla del catálogo NO puede depender de un módulo de un plugin de
   pago que alguien puede desactivar. */
.p-scope ul.products { display: grid; grid-template-columns: repeat(4,1fr);
  gap: var(--p-gap-grid); margin: 0; }
.p-scope ul.products::before,
.p-scope ul.products::after { display: none; }
.p-scope ul.products li.product {
  width: 100% !important; margin: 0 !important; float: none !important;
  display: flex; flex-direction: column;
  background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg); overflow: hidden;
  transition: box-shadow var(--p-dur-fast) var(--p-ease), transform var(--p-dur-fast) var(--p-ease);
}
.p-scope ul.products li.product:hover {
  box-shadow: var(--p-shadow-hover); transform: translateY(-2px);
}
/* imagen */
.p-scope ul.products li.product a img {
  margin: 0 !important; border-radius: 0; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--p-hatch);
}
/* cuerpo de la tarjeta */
.p-scope ul.products li.product .woocommerce-loop-product__link { padding: 0; }
.p-scope ul.products li.product > *:not(a):not(.onsale) { padding-left: var(--p-space-4); padding-right: var(--p-space-4); }
.p-scope ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--p-font-ui) !important; font-size: 14.5px !important;
  font-weight: 600 !important; line-height: var(--p-lh-snug);
  color: var(--p-text); padding: var(--p-space-4) var(--p-space-4) var(--p-space-2) !important;
}
/* SKU: requiere el hook de functions.php (ver más abajo) */
.p-scope ul.products li.product .p-loop-sku {
  font-family: var(--p-font-mono); font-size: 10px; letter-spacing: var(--p-ls-mono);
  text-transform: uppercase; color: var(--p-text-2);
  padding: var(--p-space-4) var(--p-space-4) 0; margin: 0;
}
.p-scope ul.products li.product .p-loop-sku + .woocommerce-loop-product__title { padding-top: 7px !important; }
/* atributos / specs (short description) */
.p-scope ul.products li.product .p-loop-specs {
  font-size: 12.5px; line-height: 1.5; color: var(--p-text-2); margin: 0 0 var(--p-space-3); }
/* precio */
.p-scope ul.products li.product .price {
  font-family: var(--p-font-display) !important; font-weight: 600 !important;
  font-size: var(--p-fs-price) !important; letter-spacing: -.02em;
  color: var(--p-text) !important; margin: auto 0 0 !important;
  display: flex; align-items: baseline; gap: var(--p-space-2);
  padding-bottom: var(--p-space-1);
}
.p-scope .price del {
  font-family: var(--p-font-ui); font-size: 13px; font-weight: 400;
  color: var(--p-text-2); opacity: 1; text-decoration: line-through; order: 2;
}
.p-scope .price ins { text-decoration: none; order: 1; }
.p-scope .price .woocommerce-Price-currencySymbol { font-size: inherit; }
/* sufijo "/ bobina" — configurar en WooCommerce > Productos > Sufijo de precio */
.p-scope .price small.woocommerce-price-suffix {
  display: block; width: 100%; order: 3;
  font-family: var(--p-font-mono); font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-tight); text-transform: uppercase;
  color: var(--p-text-2); margin-top: 3px;
}
/* badge de rebaja */
.p-scope ul.products li.product .onsale {
  position: absolute; top: 10px; left: 10px; right: auto; margin: 0;
  min-width: 0; min-height: 0; line-height: 1; border-radius: var(--p-radius-sm);
  background: var(--p-orange) !important; color: #fff !important;
  font-family: var(--p-font-ui); font-size: 11px; font-weight: 700; padding: 4px 8px;
}
/* stock */
.p-scope .stock.in-stock, .p-scope .p-loop-stock {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 8px;
  border-radius: var(--p-radius); color: var(--p-ok); background: var(--p-ok-soft); margin: 0; }
.p-scope .stock.out-of-stock, .p-scope .p-loop-stock--warn {
  color: var(--p-warn); background: var(--p-warn-soft); }
/* botón añadir al carrito en el loop */
.p-scope ul.products li.product .button,
.p-scope ul.products li.product .add_to_cart_button {
  display: block !important; width: calc(100% - var(--p-space-4) * 2);
  margin: var(--p-space-3) var(--p-space-4) var(--p-space-4) !important;
  height: 40px; line-height: 38px; text-align: center; padding: 0 !important;
  font-family: var(--p-font-ui) !important; font-size: 13.5px !important; font-weight: 600 !important;
  background: #fff !important; color: var(--p-navy) !important;
  border: 1px solid var(--p-navy) !important; border-radius: var(--p-radius-btn) !important;
  transition: background var(--p-dur-fast) var(--p-ease), color var(--p-dur-fast) var(--p-ease);
}
.p-scope ul.products li.product .button:hover {
  background: var(--p-navy) !important; color: #fff !important;
}
.p-scope ul.products li.product .button:after { display: none !important; }
.p-scope ul.products li.product .added_to_cart { display: none; }
/* cantidad (compra por múltiplos / caja) */
.p-scope .quantity input.qty {
  height: 40px; border: 1px solid var(--p-border); border-radius: var(--p-radius-md);
  font-family: var(--p-font-ui); font-size: 14px; color: var(--p-text); background: #fff;
}
/* ocultar valoraciones por estrellas en el loop (no están en el diseño) */
.p-scope ul.products li.product .star-rating { display: none; }

@media (max-width: 980px) { .p-scope ul.products { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 767px) { .p-scope ul.products { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════════════════════
   AÑADIDOS PRECIFILM — solo lo imprescindible para que el markup real de
   Divi 5 y WooCommerce respete el diseño. No introduce colores, radios ni
   sombras fuera de los tokens --p-*.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Divi envuelve el contenido de cada sección en .et_pb_section > .et_pb_row.
   Neutralizamos su padding lateral por defecto: nuestro ancho lo fija
   .p-container (o el propio módulo). El padding vertical lo dan las clases
   .p-section* aplicadas a la sección en Avanzado → Clase CSS. */
.p-scope.et_pb_section { padding: 0; }

/* Los módulos et_pb_text/et_pb_code no deben añadir su propio ancho de línea
   ni márgenes que rompan las rejillas del diseño. */
.p-scope .et_pb_text,
.p-scope .et_pb_code { line-height: inherit; }

/* Los shortcodes de widget entregan su propio contenedor .p-container;
   evitamos doble gutter cuando el módulo ya va a ancho completo. */
.p-scope .et_pb_code_inner > .p-container { padding-left: var(--p-gutter); padding-right: var(--p-gutter); }

/* Encabezado de sección con enlace "Ver todo →" (secciones 07, 10). */
.p-row-between .p-link, .p-row-between .p-more > a { white-space: nowrap; }

/* Hero slider: viewport que recorta el track a ancho de contenedor. */
.p-hero__viewport { overflow: hidden; }
.p-hero__foot { display: flex; align-items: center; justify-content: space-between;
  gap: var(--p-space-6); flex-wrap: wrap; padding-top: var(--p-space-8); }

/* Fila de datos del hero: cada celda. */
.p-stat-item { display: flex; flex-direction: column; gap: 2px; }
.p-stat-item .p-caption { color: var(--p-text-2); }

/* La fila vive ahora dentro de la columna de texto de cada diapositiva, así
   que se separa de los botones con su propio filete en vez de con el padding
   del pie. `flex-wrap` porque la columna es más estrecha que el contenedor
   entero donde estaba antes: cuatro datos en 690px caben, pero con el titular
   a dos líneas conviene que puedan bajar. */
.p-hero__slide .p-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-5) var(--p-space-8);
  margin-top: var(--p-space-8);
  padding-top: var(--p-space-6);
  border-top: 1px solid var(--p-border);
}

/* El pie se queda solo con los puntos del carrusel, alineados a la derecha
   como estaban. */
.p-hero__foot { justify-content: flex-end; padding-top: var(--p-space-6); }

/* La foto de la tarjeta, cuando enlaza. */
.p-hero__cardlink { display: block; text-decoration: none; }
.p-hero__cardlink:hover .p-hero__photo { opacity: .92; }
.p-hero__photo { transition: opacity var(--p-dur) var(--p-ease); }

/* Buscador por medidas (06): la cabecera va dentro del bloque navy. */
.p-dimsearch__intro { align-self: center; }
.p-dimsearch__intro h2 { color: var(--p-text-inv); margin: 0; }
.p-dimsearch__sub { color: var(--p-text-inv-3); font-size: 13px; margin-top: 6px; }
.p-dimsearch .btn-primary { height: 42px; }

/* Buscador de la cabecera (sección 02): hint mono a la derecha del input. */
.p-search__hint { font-family: var(--p-font-mono); font-size: var(--p-fs-mono);
  letter-spacing: var(--p-ls-mono); text-transform: uppercase; color: var(--p-text-2);
  white-space: nowrap; }

/* Tarjeta flotante de producto del hero (dentro de [precifilm_hero]).
   Sin sombra a propósito: el carrusel mueve el track con translateX y todas
   las diapositivas viven una al lado de otra dentro del mismo viewport, así
   que la sombra difusa de las tarjetas contiguas se colaba durante la
   transición y quedaba «pegada» al cambiar de slide. El borde ya da
   suficiente separación sobre el fondo crema. */
.p-hero__card { background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg); box-shadow: none; padding: 20px; }
.p-hero__card .p-price { display: flex; align-items: baseline; gap: var(--p-space-2); }
.p-hero__card .p-mono { display: block; margin-top: 4px; }

/* Etiqueta de envío: líneas de datos (sección 13). */
.p-shiplabel__row { display: flex; justify-content: space-between; gap: var(--p-space-4);
  font-size: 12.5px; line-height: 1.5; }
.p-shiplabel__row + .p-shiplabel__row { margin-top: 8px; }

/* Blurb nativo de Divi usado como pilar (05) y como familia (10): quitamos el
   centrado y los tamaños por defecto de Divi para respetar la maqueta. */

/* Tarjeta de guía técnica (09) construida con blurb + clase .p-guide. */

/* Checklist B2B (14): marca ✓ como icono textual del blurb. */

/* — Helpers de markup para los widgets y las secciones (sin inline CSS) — */

/* Separación bajo el eyebrow/badge cuando precede a un titular. */
.p-eyebrow { margin-bottom: 14px; }

/* Cabecera de sección (título + subtítulo o enlace "Ver todo"). */
.p-sec-head { margin-bottom: var(--p-space-6); }

/* ——— Film y precinto, dos columnas de texto ———
   Cinco frases sueltas por columna, sin viñeta ni filete: las separa el aire,
   igual que en la presentación de la tienda. El enlace se despega un poco más
   del último párrafo para que se lea como cierre de la columna y no como una
   frase más. */
/* .p-grid-2 trae 20px de hueco, que es lo que piden dos tarjetas de producto
   pero se queda corto entre dos columnas de texto de 580px: las líneas casi se
   tocan. Se usa el hueco de columnas, el mismo del resto de bloques a dos. */
.p-catalogo .p-grid-2 { gap: var(--p-gap-cols); }

.p-catalogo__col { display: grid; gap: var(--p-space-4); align-content: start; }
.p-catalogo__col .p-h2 { margin-bottom: var(--p-space-2); }
.p-catalogo__col p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--p-text-2); }
.p-catalogo__col .p-link,
.p-catalogo__col .p-more { margin-top: var(--p-space-3); justify-self: start; }

/* ——— Presentación de la tienda, sobre fondo azul ———
   Dos columnas: el texto corrido a la izquierda y las cuatro afirmaciones
   como lista a la derecha. La rejilla la pone .p-split--even, que ya trae el
   colapso a una columna en móvil; aquí solo se corrige la alineación, porque
   ese modificador centra verticalmente y con dos bloques de texto de altura
   distinta eso deja la lista flotando a media altura. */
.p-welcome { align-items: start; }

.p-welcome__prose { display: grid; gap: var(--p-space-4); }
.p-welcome__prose .p-h2 { margin-bottom: 0; }
.p-welcome__prose p { margin: 0; font-size: 15px; line-height: 1.7; }

/* Sin viñeta y sin filetes: cuatro frases sueltas, separadas solo por aire.
   Llevaron un filete naranja encima de cada una y sobre el azul se leían como
   bandas, no como una lista. El espacio entre puntos es mayor que el
   interlineado de cada frase (32 px contra 25,5 px), que es lo que hace que
   se lean como cuatro cosas y no como un párrafo. */
.p-welcome__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--p-space-8); }

.p-welcome__list li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--p-text-inv-2);
}
.p-sec-head .p-lead { margin-top: 8px; }

/* Hero: tarjeta flotante. */
.p-hero__card .p-sku { margin: 14px 0 6px; }
.p-hero__name { font-size: var(--p-fs-body); line-height: var(--p-lh-body);
  color: var(--p-text); font-weight: 600; margin: 0 0 10px; }
.p-hero__card .p-badge-stock { margin-top: 12px; }
.p-hero__card .p-mono { display: inline; margin: 0; }

/* Trust strip: título de cada pilar. */
.p-trust__title { font-size: var(--p-fs-body-sm); font-weight: 600; color: var(--p-text);
  line-height: var(--p-lh-snug); margin-bottom: 6px; }

/* Split de la franja fabricante (08): contenido + CTA. */
.p-split--cta { display: grid; grid-template-columns: 1fr auto; gap: var(--p-space-9);
  align-items: center; }

/* Tabla de tarifas (11): columna de texto + tabla. */
.p-tiers-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--p-space-11);
  align-items: start; }
.p-tiers-split .p-body { margin: 12px 0; }

/* Familias (10): nombre de la familia. */
.p-fam__name { color: var(--p-text); font-weight: 600; font-size: var(--p-fs-body); }
.p-card__body .p-mono { margin-top: 6px; }

/* Dropship (13): tarjeta derecha con sombra card-2. */
.p-dropship__card { background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg); box-shadow: var(--p-shadow-card-2); padding: 20px; }
.p-shiplabel__row--head { margin-top: 14px; }
.p-shiplabel__row--code { align-items: center; margin-top: 12px; }
.p-shiplabel__note { margin-top: 12px; }

/* Checklist B2B (14): columna de items. */
.p-checks { display: grid; gap: var(--p-space-3); }
.p-check__title { color: var(--p-text-inv); font-weight: 600; font-size: var(--p-fs-body-sm); }
.p-check__desc { color: var(--p-text-inv-2); font-size: 13px; line-height: 1.6; }
.p-b2b__note { margin-top: var(--p-space-4); font-size: 13px; }
/* Único enlace del diseño que llevaba subrayado explícito. Se sustituye por
   un borde inferior, que da el mismo peso visual sobre fondo navy sin
   reintroducir el subrayado que se ha retirado en todo el sitio. */
.p-b2b__note a {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.45);
  padding-bottom: 1px;
}
.p-b2b__note a:hover { color: #fff; border-bottom-color: #fff; }

/* Rejillas de producto: el grid de WooCommerce NO lleva gutter propio.
   Esta regla venía del montaje con Divi, donde el módulo de tienda quedaba
   fuera del contenedor y necesitaba su propio relleno lateral. Aquí el grid
   va dentro de .p-container, que ya aporta esos 40px: al sumarse, la rejilla
   de productos entraba 40px más que el titular del apartado. */
.p-prodgrid .woocommerce { padding: 0; }
@media (max-width: 980px) { .p-prodgrid .woocommerce { padding: 0 var(--p-gutter-tablet); } }
@media (max-width: 767px) { .p-prodgrid .woocommerce { padding: 0 var(--p-gutter-mobile); } }

/* Reset de márgenes de columna Divi cuando una fila actúa como rejilla propia. */

/* Colapso responsive de los splits auxiliares. */
@media (max-width: 980px) {
  .p-split--cta, .p-tiers-split { grid-template-columns: 1fr; gap: var(--p-space-8); }
}

/* — Cabecera y pie (Theme Builder) — */
.p-utility__rating { color: var(--p-orange); font-weight: 600; }

/* Enlace a las reseñas: en la barra azul y en el pie. Sin subrayado en reposo
   para no ensuciar la franja, y con él al pasar por encima. */
.p-utility__reviews, .p-footer__legal a {
  color: var(--p-orange);
  font-weight: 600;
  text-decoration: none;
}
.p-utility__reviews:hover, .p-footer__legal a:hover { text-decoration: underline; }

/* El dato de reseñas del hero es ahora un enlace; hereda el tamaño de .p-stat
   y solo cambia el color al pasar por encima. */
.p-stat--link { color: inherit; text-decoration: none; }
.p-stat--link:hover { color: var(--p-orange); }
.p-header__actions { display: flex; align-items: center; gap: var(--p-space-5); }
.p-header__cart { color: var(--p-text); font-weight: 500; font-size: 14px; white-space: nowrap; }
.p-footer__phone { font-family: var(--p-font-mono); color: #fff; font-size: 13px; margin-top: 12px; }
.p-footer__brand .p-small { color: rgba(255,255,255,.68); }

/* Áreas táctiles ≥ 44px en móvil (accesibilidad). */
@media (max-width: 767px) {
  .p-catnav a, .p-footer__links a, .p-pill { min-height: 44px; display: inline-flex; align-items: center; }
  .p-dot { min-width: 8px; min-height: 24px; background-clip: content-box; padding: 8px 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 07 — INTEGRACIÓN CON GENERATEPRESS

   Sustituye al antiguo bloque "DIVI COMPAT". Aquel existía para pelear con el
   CSS del Customizer de Divi, que se imprimía después del child theme y le
   pisaba las tipografías. GeneratePress encola el hijo con dependencia de
   'generate-style' y mete su CSS de Customizer como inline sobre ese mismo
   handle, así que el hijo gana siempre y no hace falta ni un !important.

   Aquí quedan tres cosas distintas:
     7.1 · La capa global de marca (tipografía y color en todo el sitio).
     7.2 · Los ajustes de contenedor para que los apartados vayan a sangre.
     7.3 · El estilo de la cabecera y la navegación nativas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— 7.1 · Capa global de marca ———
   El diseño deja de vivir solo dentro de .p-scope: tipografía, color de texto
   y encabezados se aplican a todo el sitio, de modo que tienda, blog, carrito
   y checkout hereden la identidad sin trabajo extra. Las reglas de .p-scope
   siguen intactas y mandan dentro de los apartados de la home. */
body {
  font-family: var(--p-font-ui);
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-text-2);
  background: var(--p-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--p-font-display);
  font-weight: 600;
  line-height: var(--p-lh-heading);
  color: var(--p-text);
}

/* GeneratePress subraya todos los enlaces por defecto. En este diseño el
   indicador de enlace es el color, no la línea: el subrayado ensuciaba
   tarjetas enteras que son un <a> (guías técnicas, familias de producto) y
   elementos de cabecera como el carrito. Se retira en todo el sitio. */
a { color: var(--p-orange); text-decoration: none; }
a:hover, a:focus { color: var(--p-orange-dark); text-decoration: none; }

/* El foco por teclado sí necesita una marca visible, que no puede ser el
   color: sin subrayado, el contorno es la única señal que queda. */
a:focus-visible { outline: 2px solid var(--p-orange); outline-offset: 2px; }

input, textarea, select, button { font-family: var(--p-font-ui); }

/* ——— 7.2 · Contenedores ———
   Los apartados de la home traen su propio fondo a sangre y su .p-container
   interior, así que hay que desactivar el ancho y los márgenes que
   GeneratePress aplica al contenido de la entrada.

   En la página de inicio conviene además marcar, en el panel lateral del
   editor, Contenedor de contenido = "Ancho completo" y Barras laterales =
   "Sin barras laterales". Estas reglas cubren el resto. */
.p-scope[data-precifilm-section] {
  width: 100%;
  max-width: none;
  margin: 0;
  /* Sin `padding: 0` a propósito: esta regla tiene más especificidad que la
     del ritmo vertical de 7.4 (clase + atributo frente a solo atributo) y le
     ganaba, dejando todos los apartados pegados. El relleno lateral lo pone
     .p-container, no la sección. */
  padding-left: 0;
  padding-right: 0;
}

/* GeneratePress separa 20px cada hijo directo del contenido; entre apartados
   a sangre eso deja franjas del color de fondo del body. */
.site-main > .p-scope[data-precifilm-section] { margin-bottom: 0; }

/* La home no lleva título de entrada ni cabecera de artículo. */
.home .entry-header,
.home .page-header,
.home .entry-content > .p-scope:first-child { margin-top: 0; }

.home .site-main,
.home .entry-content,
.home .inside-article {
  padding: 0;
  margin: 0;
  max-width: none;
}

/* Rompe el contenedor si la página no está en modo "ancho completo", para que
   los fondos de sección lleguen a los bordes de la ventana igualmente. */
.home .site-content > .content-area > .site-main > .p-scope[data-precifilm-section] {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.home.full-width-content .site-content > .content-area > .site-main > .p-scope[data-precifilm-section] {
  margin-left: 0;
  margin-right: 0;
}

/* ——— 7.3 · Cabecera y navegación nativas ———
   La barra de utilidad y el buscador con acciones son marcado propio
   (inc/header-footer.php); el logo y el menú los pinta GeneratePress. */
.site-header { background: var(--p-bg); border-bottom: 1px solid var(--p-border); }

.inside-header {
  display: flex;
  align-items: center;
  gap: var(--p-space-8);
  max-width: var(--p-container);
  padding: 0 var(--p-gutter);
  min-height: 78px;
}

.site-header .site-branding,
.site-header .site-logo { flex: 0 0 auto; margin: 0; }
.site-header .site-logo img { max-height: 40px; width: auto; }

/* El buscador ocupa el hueco libre entre el logo y las acciones. */
.inside-header .p-search { flex: 1 1 auto; min-width: 0; }
.inside-header .p-header__actions { flex: 0 0 auto; }

/* Defensa: la navegación va debajo de la cabecera (lo fuerza el filtro
   generate_navigation_location en inc/header-footer.php). Si por un ajuste del
   Customizer o un módulo de Menu Plus acabara dentro de .inside-header, aquí
   se le impide estirarla: al ser esta un contenedor flex sin wrap, un menú
   comprimido apila sus elementos en vertical y dispara el alto de la cabecera
   de 78 a más de 350px. */
.inside-header > .main-navigation {
  flex: 0 0 auto;
  align-self: center;
}
.inside-header > .main-navigation .main-nav > ul {
  display: flex;
  flex-wrap: nowrap;
}

/* Tira de categorías: es la navegación principal de GeneratePress, así que
   hereda el menú móvil, el sticky y el off-canvas de Menu Plus. */
.main-navigation.p-catnav {
  background: var(--p-surface);
  border-bottom: 1px solid var(--p-border);
}
.main-navigation.p-catnav .inside-navigation {
  max-width: var(--p-container);
  margin: 0 auto;
  padding: 0 var(--p-gutter);
}
.main-navigation.p-catnav .main-nav > ul > li > a {
  font-family: var(--p-font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 46px;
  color: var(--p-text);
  padding: 0 14px;
}
/* Hover y elemento activo, en TODOS los niveles.
   Se replica la forma exacta del selector de GeneratePress añadiéndole
   .p-catnav: su regla es
     .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a
   con especificidad (0,4,3) y color var(--accent), que por defecto es el azul
   #1e73be. Copiar su estructura y sumar una clase garantiza ganarle sin
   recurrir a !important, y de paso cubre los submenús, que antes se quedaban
   con el azul porque la regla anterior solo alcanzaba al primer nivel. */
.main-navigation.p-catnav .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation.p-catnav .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation.p-catnav .main-nav ul li[class*="current-menu-"] > a {
  color: var(--p-orange);
}

.main-navigation.p-catnav .main-nav > ul > li > a:hover,
.main-navigation.p-catnav .main-nav > ul > li.current-menu-item > a {
  background: transparent;
}

/* ——— Menús desplegables ———
   GeneratePress los sirve con fondo gris #f0f0f0, sin radio y con una sombra
   dura de 1px. Se rehacen como una tarjeta flotante coherente con el resto de
   superficies del sitio: fondo blanco, borde suave, esquinas redondeadas y
   sombra difusa. */
.main-navigation.p-catnav ul ul {
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  box-shadow: 0 12px 32px rgba(26, 37, 69, .13);
  padding: 6px;
  min-width: 232px;
  top: calc(100% - 4px);
}

.main-navigation.p-catnav ul ul li { border: 0; }

.main-navigation.p-catnav .main-nav ul ul li a {
  font-family: var(--p-font-ui);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--p-text);
  padding: 9px 12px;
  border-radius: var(--p-radius);
  transition: color var(--p-dur-fast) var(--p-ease),
              background var(--p-dur-fast) var(--p-ease);
}

/* Fondo suave al pasar por encima: el color solo no basta para señalar la
   fila activa dentro de una lista de elementos igual de anchos. */
.main-navigation.p-catnav .main-nav ul ul li:hover > a,
.main-navigation.p-catnav .main-nav ul ul li a:hover,
.main-navigation.p-catnav .main-nav ul ul li a:focus {
  background: var(--p-orange-soft);
}

/* La flecha del elemento que despliega, en el naranja de marca. */
.main-navigation.p-catnav .main-nav ul li:hover > a .dropdown-menu-toggle,
.main-navigation.p-catnav .main-nav ul li[class*="current-menu-"] > a .dropdown-menu-toggle {
  color: var(--p-orange);
}

/* El pie propio sustituye al de GeneratePress: se le quita el fondo heredado
   para que mande el color de .p-footer. */
.site-footer { background: none; padding: 0; }

@media (max-width: 1024px) {
  .inside-header { flex-wrap: wrap; gap: var(--p-space-4); padding: 12px var(--p-gutter-tablet); }
  .inside-header .p-search { order: 3; flex-basis: 100%; }
}

/* En móvil el buscador desbordaba la página 19px, y con él TODAS las páginas
   del sitio: el rótulo «o busca por SKU» va en `nowrap`, y con `min-width:auto`
   —el valor por omisión de un hijo flex— fijaba un suelo de 105px que el resto
   de la caja no podía compensar. Medido a 375px: el formulario terminaba en
   x=394. Se retira el rótulo, que en esa anchura no cabe de todas formas, y se
   deja al formulario encogerse. */
@media (max-width: 899px) {
  .inside-header .p-search { min-width: 0; max-width: 100%; }
  .p-search__hint { display: none; }
}


/* ——— 7.4 · Ritmo vertical de los apartados ———
   En Divi este aire lo ponía el propio et_pb_section del constructor (54px por
   defecto, más el custom_padding de cada sección), no este CSS. Al salir de
   Divi desapareció y los apartados quedaban pegados unos a otros. Aquí se
   define de forma explícita, que además es donde debía haber estado siempre.

   El hero y la franja de garantías llevan su propio ritmo: el primero por ser
   la portada y la segunda por ser una tira estrecha de apoyo. */
[data-precifilm-section] {
  padding-top: var(--p-space-13);
  padding-bottom: var(--p-space-13);
}

[data-precifilm-section="hero"] {
  padding-top: var(--p-space-13);
  padding-bottom: var(--p-space-12);
}

[data-precifilm-section="trust"] {
  padding-top: 0;
  padding-bottom: 0;
}

/* La franja de presupuesto se apoya sobre el apartado siguiente: lleva aire
   arriba pero no abajo, para que la caja navy quede pegada al bloque de
   ofertas y se lean como una sola unidad. */
[data-precifilm-section="quote"] {
  padding-top: var(--p-space-12);
  padding-bottom: 0;
}

@media (max-width: 1024px) {
  [data-precifilm-section] {
    padding-top: var(--p-space-11);
    padding-bottom: var(--p-space-11);
  }
}

@media (max-width: 767px) {
  [data-precifilm-section] {
    padding-top: var(--p-space-9);
    padding-bottom: var(--p-space-9);
  }
}

/* ——— 7.5 · Doble contenedor ———
   Los shortcodes de widget (hero y buscador por medidas) traen su propio
   .p-container. Cuando uno de ellos es todo el contenido del apartado, el
   contenedor que añade la sección queda anidado y duplica el gutter. */
[data-precifilm-section] > .p-container > .p-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}


/* ——— 7.6 · Formularios sobre bloques oscuros ———
   GeneratePress estiliza los campos con selectores de atributo
   (`input[type="text"]`, especificidad 0,1,1) que ganan a una clase suelta
   como .p-input-dark (0,1,0). El resultado eran campos blancos con texto
   negro sobre el bloque navy del buscador por medidas. Se sube la
   especificidad anteponiendo el contenedor. */
.p-dimsearch .p-input-dark,
.p-dimsearch input.p-input-dark {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--p-radius-md);
  color: #fff;
  height: 42px;
}

.p-dimsearch .p-input-dark::placeholder { color: rgba(255, 255, 255, .4); }

.p-dimsearch .p-input-dark:focus {
  outline: none;
  border-color: var(--p-orange);
  background: rgba(255, 255, 255, .10);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 08 — REJILLA DE PRODUCTO (.p-prodgrid)

   Tarjeta de tres elementos: imagen, título y precio. Sin descripción.

   .p-prodgrid es la clase COMPARTIDA por todos los apartados que muestran una
   rejilla de productos de WooCommerce: hoy «Productos en oferta» y «Los más
   vendidos». Cada apartado conserva además su clase propia (.p-offers,
   .p-bestsellers) para lo que sea específico suyo. Tocar aquí afecta a los
   dos, que es justo lo que se busca: una sola tarjeta de producto.

   Aviso sobre el markup de et_pb_shop: la posición del precio NO es estable
   entre productos. En unos <span class="price"> es hijo directo de
   li.product; en otros queda dentro de a.woocommerce-LoopProduct-link. Por
   eso ninguna regla de esta sección usa el combinador hijo (>) para el
   precio: se seleccionan por descendencia y el anclaje al fondo se resuelve
   haciendo flex también el enlace.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ——— 8.3 · Columna flexible en los dos niveles ———
   El enlace crece para ocupar el hueco sobrante, de modo que el precio quede
   pegado al fondo tanto si cuelga del <li> como si cuelga del <a>. */
.p-prodgrid ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
}
.p-prodgrid ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0;
}

/* ——— 8.4 · Imagen protagonista ——— */
.p-prodgrid ul.products li.product .woocommerce-loop-product__link > img, .p-prodgrid ul.products li.product a > img {
  display: block; overflow: hidden; background: var(--p-hatch); flex: 0 0 auto;
}
.p-prodgrid ul.products li.product a img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover;
  width: 100%;
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.p-prodgrid ul.products li.product:hover a img { transform: scale(1.045); }

/* ——— 8.5 · Título de altura fija ———
   Reservar siempre dos líneas evita que un título corto suba el bloque y
   descuadre la fila. 2,6em = 2 líneas a line-height 1.3, más el relleno. */
.p-prodgrid ul.products li.product .woocommerce-loop-product__title {
  font-size: 16.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--p-text) !important;
  letter-spacing: -.01em;
  padding: var(--p-space-4) var(--p-space-4) var(--p-space-2) !important;
  min-height: calc(2.6em + var(--p-space-4) + var(--p-space-2));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 0 auto;
}

/* ——— 8.6 · Precio: bloque destacado al pie de la tarjeta ———
   El padding se declara aquí (no se hereda de la regla `> *` de la PARTE 2,
   que no alcanza a los precios anidados dentro del enlace). */
.p-prodgrid ul.products li.product .price {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--p-space-2);
  margin: auto 0 0 !important;
  padding: var(--p-space-3) var(--p-space-4) var(--p-space-5) !important;
  font-family: var(--p-font-display) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em;
  color: var(--p-orange) !important;
}

/* Precio vigente: naranja de marca, el elemento más pesado de la tarjeta. */
.p-prodgrid ul.products li.product .price ins,
.p-prodgrid ul.products li.product .price ins .amount,
.p-prodgrid ul.products li.product .price ins bdi {
  text-decoration: none !important;
  color: var(--p-orange) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
}

/* Precio anterior: tachado en naranja sobre texto gris, para que se lea como
   referencia de ahorro y no como ruido. */
.p-prodgrid ul.products li.product .price del,
.p-prodgrid ul.products li.product .price del .amount,
.p-prodgrid ul.products li.product .price del bdi {
  font-family: var(--p-font-ui) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--p-text-2) !important;
  opacity: 1 !important;
  /* El atajo `text-decoration` resetea color y grosor a su valor inicial.
     Al llevar !important ganaría a las propiedades largas de debajo, así que
     se usa la propiedad larga `text-decoration-line` y todas con !important. */
  text-decoration-line: line-through !important;
  text-decoration-color: var(--p-orange) !important;
  text-decoration-thickness: 2px !important;
}

/* El lector de pantalla ya anuncia ambos precios; ocultar el texto duplicado
   que WooCommerce inserta para accesibilidad evita descuadrar el flex. */
.p-prodgrid ul.products li.product .price .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ——— 8.7 · Color de enlace heredado de Divi, neutralizado ——— */
.p-prodgrid ul.products li.product a.woocommerce-LoopProduct-link,
.p-prodgrid ul.products li.product .p-loop-sku {
  color: var(--p-text-2);
}

/* ——— 8.8 · Foco visible: la tarjeta entera es un enlace ——— */
.p-prodgrid ul.products li.product a.woocommerce-LoopProduct-link:focus-visible {
  outline: 2px solid var(--p-orange); outline-offset: 2px;
}

/* ——— 8.9 · Móvil: precio algo menor para que quepa junto al tachado ——— */
@media (max-width: 767px) {
  .p-prodgrid ul.products li.product .price,
  .p-prodgrid ul.products li.product .price ins,
  .p-prodgrid ul.products li.product .price ins .amount,
  .p-prodgrid ul.products li.product .price ins bdi { font-size: 27px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 09 — TARJETA Y FOTO DEL HERO

   Los slides son entradas editables (inc/hero-cpt.php) y la foto es su imagen
   destacada. Dos problemas resueltos aquí:

   1) Recorte. La foto heredaba la altura fija de 180px del marcador decorativo
      .p-hatch--hero y con object-fit:cover perdía más de la mitad. Ahora la
      caja tiene proporción —no altura— y usa `contain`, así entra entera sea
      cuadrada (480×480 de WooCommerce) o apaisada.

   2) Descuadre. .p-split centra las dos columnas verticalmente. Al crecer la
      tarjeta, el texto quedaba flotando muy por debajo de su borde superior.
      La solución no es cambiar la alineación —.p-split la comparten otras
      secciones— sino contener el alto de la tarjeta para que la diferencia
      con la columna de texto vuelva a ser inapreciable.

   El ajuste va acotado a .p-hero para no alterar el resto de splits.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— 9.1 · Proporción de columnas del hero ———
   Tarjeta más estrecha: al ser la foto cuadrada, ancho y alto van de la mano,
   así que estrechar la columna es lo que más rebaja el alto de la tarjeta.
   360px es el valor medido de compromiso: foto de 225px con un desfase de
   58px frente a la columna de texto (el original era 42) y las tres tarjetas
   igualadas en altura. Por encima de 380px el desfase se dispara y a 400px
   las tarjetas dejan de medir lo mismo.
   La columna de texto se limita para que el titular no se estire de más. */
/* La tarjeta pasa de 440px a 510px: se mete 70px hacia la izquierda y gana
   otros 70 de ancho. Medido a 1440px de ventana, el hero solo crece 26px y las
   tres diapositivas siguen midiendo lo mismo, que era el riesgo.

   `align-items: start` en lugar del `center` heredado: la tarjeta es más alta
   que la columna de texto, y al centrarlas verticalmente el rótulo naranja
   empezaba 59px por debajo del borde superior de la tarjeta. Ese hueco era el
   que se veía entre la etiqueta y el inicio de la caja. */
.p-hero .p-split {
  grid-template-columns: minmax(0, 1fr) 510px;
  gap: var(--p-space-9);
  align-items: start;
}

/* Sin límite de ancho en la columna de texto: con `max-width: 620px` sobre una
   pista de 769px quedaban 149px muertos que, sumados al hueco de la rejilla,
   se leían como un vacío enorme entre el texto y la tarjeta. */
.p-hero .p-split > *:first-child { max-width: none; }

/* ——— 9.2 · Caja de la foto ———
   Cuadrada por defecto, que es la proporción de las imágenes de producto de
   WooCommerce, con tope de altura para que la tarjeta no dispare el alto del
   hero. Con `contain` el tope no recorta: solo encoge la foto. */
.p-hero__card .p-hero__photo,
.p-hero__card .p-hatch--hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  /* Es el tope de ALTURA lo que dimensiona la foto, no el ancho de la caja:
     con `contain` manda el lado menor. Ensanchar la columna sin subir este
     valor solo engorda las bandas laterales; por eso, al pasar la tarjeta de
     440px a 510px, este tope sube de 240 a 290. */
  max-height: 290px;
  border-radius: 9px;
}

.p-hero__card .p-hero__photo {
  object-fit: contain;
  padding: 10px;              /* aire para que el producto no toque el borde */
  background: var(--p-surface);
}

/* El marcador conserva su textura; solo se le iguala la caja para que los
   slides sin foto midan lo mismo y el carrusel no dé saltos al rotar. */
.p-hero__card .p-hatch--hero { background: var(--p-hatch); }

/* ——— 9.3 · Tablet y móvil ———
   A una columna, la tarjeta ya no compite con el texto: se le deja más aire
   y se centra bajo el bloque de texto. */
@media (max-width: 1024px) {
  .p-hero .p-split { grid-template-columns: 1fr; }
  .p-hero .p-split > *:first-child { max-width: none; }
  .p-hero__card { max-width: 460px; margin: 0 auto; }
  .p-hero__card .p-hero__photo,
  .p-hero__card .p-hatch--hero { max-height: 280px; }
}

@media (max-width: 767px) {
  .p-hero__card .p-hero__photo { padding: 8px; }
  .p-hero__card .p-hero__photo,
  .p-hero__card .p-hatch--hero { max-height: 230px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 10 — FRANJA DE PRESUPUESTO PERSONALIZADO (.p-quote)

   Caja navy a ancho de contenedor con el mensaje a la izquierda y la CTA a la
   derecha. Sustituye al buscador por medidas en la portada.

   El diseño de origen venía con estilos en línea; aquí se traduce al sistema
   de tokens para que herede los colores de marca y responda a los cambios de
   :root como el resto del sitio.
   ═══════════════════════════════════════════════════════════════════════════ */

.p-quote__box {
  background: var(--p-navy);
  border-radius: var(--p-radius-lg);
  padding: 34px 40px;
  display: flex;
  align-items: center;
  /* Centrado con separación fija, como el diseño de origen: el conjunto
     mensaje + CTA se lee como una unidad, no como dos extremos opuestos. */
  justify-content: center;
  gap: var(--p-space-8);
  flex-wrap: wrap;
}

.p-quote__copy { max-width: 600px; }

/* Selector doble a propósito: `.p-scope h2` de la PARTE 1 es (0,1,1) y le
   ganaría a una clase suelta, dejando el titular en los 34px de .p-h2. */
.p-quote .p-quote__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--p-text-inv);
  margin: 0;
}

.p-quote .p-quote__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--p-text-inv-2);
  margin: 8px 0 0;
}

/* La CTA es algo mayor que la primaria estándar: es el único botón de la
   franja y tiene que sostener el peso de la caja navy. */
.p-quote__cta,
.p-quote__box .wp-block-button > .wp-block-button__link {
  height: 52px;
  padding: 0 30px;
  font-size: 15px;
  border-radius: 9px;
  flex: none;
}

@media (max-width: 767px) {
  .p-quote__box { padding: 26px 22px; gap: var(--p-space-6); }
  .p-quote .p-quote__title { font-size: 22px; }
  .p-quote__cta,
  .p-quote__box > .wp-block-buttons,
  .p-quote__box .wp-block-button,
  .p-quote__box .wp-block-button > .wp-block-button__link { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 11 — FICHA DE CATEGORÍA DE PRODUCTO (.p-cat)

   Fase 1: cabecera, chips de subcategoría, barra de herramientas y rejilla.
   La tarjeta de producto es la misma .p-prodgrid de la portada, aquí SIN el
   misma tarjeta en portada y categoría: no hay variantes.

   La barra lateral de filtros del diseño no se incluye: filtra por atributos
   de producto (tipo, micraje, anchura, peso, color) que no existen en el
   catálogo. Los chips de subcategoría cubren la única faceta con datos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— 11.1 · La ficha gestiona su propio ancho ———
   El contenido se imprime dentro de la envoltura de GeneratePress
   (#primary > main > article > .inside-article > .entry-content), que trae su
   propio relleno y su fondo de tarjeta. Aquí se neutraliza para que manden los
   contenedores del diseño. */
.p-cat .site-content,
.p-cat .content-area,
.p-cat .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.p-cat .inside-article {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.p-cat .entry-content { max-width: none; margin: 0; }

.p-cat .woocommerce-products-header,
.p-cat .woocommerce-notices-wrapper:empty { display: none; }

/* Nada de `calc(50% - 50vw)` para sacar los fondos a sangre: los contenedores
   de arriba ya son de ancho completo, así que el sangrado sobra, y además
   `100vw` INCLUYE la barra de desplazamiento, lo que provocaba 8px de
   desbordamiento horizontal y su barra de scroll. Medido: con sangrado, la
   cabecera ocupaba 1280px empezando en x=-7 sobre una ventana de 1265. */

/* El resto del contenido de la categoría sí respeta el contenedor. */
.p-cat .p-cat-toolbar,
.p-cat ul.products,
.p-cat .p-cat-quote,
.p-cat .woocommerce-pagination {
  max-width: var(--p-container);
  margin-left: auto;
  margin-right: auto;
}

.p-cat .p-cat-toolbar {
  margin-top: var(--p-space-7);
  /* Ancho y clear explícitos: WooCommerce flota a la derecha el selector de
     orden y cualquier elemento flotado que quede suelto estrecharía la barra. */
  width: 100%;
  clear: both;
  box-sizing: border-box;
}

/* ——— 11.2 · Miga de pan ——— */
.p-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--p-space-2);
  font-size: 12.5px;
  color: var(--p-text-2);
  margin-bottom: var(--p-space-4);
  flex-wrap: wrap;
}
/* Las migas son las de WooCommerce, y su plantilla imprime el elemento actual
   como TEXTO SUELTO, sin etiqueta que agarrar. Así que el estilo se hace al
   revés: el color y la negrita del elemento actual los lleva el `<nav>`, y los
   enlaces y los separadores los deshacen. Sale igual y no hay que copiar la
   plantilla al tema.

   `.p-breadcrumb__current` sigue definido porque el carrito y la tienda pintan
   su propia miga a mano, con ese `<span>`. */
.p-breadcrumb { color: var(--p-text); font-weight: 600; }

.p-breadcrumb a { color: var(--p-text-2); font-weight: 400; }
.p-breadcrumb a:hover { color: var(--p-orange); }
.p-breadcrumb__sep { color: #c9c4b9; font-weight: 400; }
.p-breadcrumb__current { color: var(--p-text); font-weight: 600; }

/* ——— 11.3 · Cabecera de categoría ——— */
.p-cat-head {
  background: var(--p-surface);
  border-bottom: 1px solid var(--p-border);
  padding: var(--p-space-9) 0 var(--p-space-8);
}

.p-cat-head__grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.35fr) minmax(240px, .65fr);
  gap: var(--p-space-11);
  align-items: start;
}

.p-cat .p-cat-head__title {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 var(--p-space-3);
}

.p-cat-head__desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}

/* Tarjetas de datos: rejilla con filete de 1px hecho con el hueco, para que
   las separaciones sean líneas continuas y no bordes dobles. */
.p-cat-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--p-border);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  overflow: hidden;
}

.p-cat-stat { background: var(--p-bg); padding: 14px 16px; }

.p-cat-stat__label {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 5px;
}

.p-cat-stat__value--big {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--p-text);
}

.p-cat-stat__value--ok { font-size: 13.5px; font-weight: 600; color: var(--p-ok); }

/* ——— 11.4 · Chips de subcategoría ——— */
.p-cat-subnav {
  border-bottom: 1px solid var(--p-border);
  padding: var(--p-space-4) 0;
}
.p-cat-subnav .p-container {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
  flex-wrap: wrap;
}
.p-cat-subnav__label {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-right: var(--p-space-2);
}

.p-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  border: 1px solid var(--p-border);
  background: var(--p-bg);
  color: var(--p-text);
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 500;
  transition: border-color var(--p-dur-fast) var(--p-ease),
              background var(--p-dur-fast) var(--p-ease);
}
.p-chip:hover { border-color: var(--p-orange); color: var(--p-text); }
.p-chip.is-active { border-color: var(--p-orange); background: var(--p-orange-soft); }

.p-chip__count {
  font-family: var(--p-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--p-text-2);
}
.p-chip.is-active .p-chip__count { color: var(--p-orange); }

/* ——— 11.5 · Barra de herramientas ——— */
.p-cat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-5);
  flex-wrap: wrap;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  padding: 10px 14px;
  margin-bottom: var(--p-space-5);
}

.p-cat-toolbar__count { font-size: 13.5px; color: var(--p-text-2); }
.p-cat-toolbar__count strong { color: var(--p-text); }

.p-cat-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--p-space-4);
  flex-wrap: wrap;
}

.p-cat-toolbar__sortlabel {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-text-2);
}

/* El selector de orden lo imprime WooCommerce; solo se le da nuestra forma. */
.p-cat .woocommerce-ordering { margin: 0; }
.p-cat .woocommerce-ordering select {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  height: 36px;
  padding: 0 10px;
  font-family: var(--p-font-ui);
  font-size: 13px;
  color: var(--p-text);
  background: var(--p-bg);
  outline: none;
}

/* ——— 11.6 · Conmutador cuadrícula / lista ——— */
.p-viewtoggle {
  display: flex;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  overflow: hidden;
}
.p-viewtoggle__btn {
  border: 0;
  padding: 0 13px;
  height: 36px;
  font-family: var(--p-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--p-bg);
  color: var(--p-text);
}
.p-viewtoggle__btn + .p-viewtoggle__btn { border-left: 1px solid var(--p-border); }
.p-viewtoggle__btn.is-active { background: var(--p-navy); color: #fff; }

/* ——— 11.7 · Gutter lateral del contenido ——— */
.p-cat .p-cat-toolbar,
.p-cat ul.products,
.p-cat .p-cat-quote,
.p-cat .woocommerce-pagination {
  padding-left: var(--p-gutter);
  padding-right: var(--p-gutter);
}

.p-cat .woocommerce { padding-bottom: var(--p-space-9); }

/* La CTA de grandes cantidades reutiliza la franja de presupuesto. */
/* `clear: both` es un seguro, no decoración. La franja es HERMANA de
   `ul.products`, no hija: se imprime en `woocommerce_after_shop_loop`, ya
   cerrado el <ul>. Mientras el listado sea una rejilla eso basta y la franja
   cae debajo. Pero el 05/10/2026 la rejilla no llegó a aplicarse en producción
   y WooCommerce maquetó las tarjetas con `float`: un hermano sin `clear` se
   coloca al lado de lo flotado, así que con una o dos tarjetas la franja subía
   a la fila y parecía otra tarjeta más. Con `clear` no puede volver a pasar,
   se arregle o no la rejilla. */
.p-cat-quote { margin-top: var(--p-space-6); clear: both; }

/* ——— 11.8 · Paginación ——— */
.p-cat .woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: var(--p-space-2);
  border: 0;
  margin: var(--p-space-7) 0 0;
}
.p-cat .woocommerce-pagination ul li { border: 0; }
.p-cat .woocommerce-pagination a,
.p-cat .woocommerce-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p-text);
  background: var(--p-bg);
  padding: 0 12px;
}
.p-cat .woocommerce-pagination .current {
  background: var(--p-orange);
  border-color: var(--p-orange);
  color: #fff;
}

/* ——— 11.9 · Responsive ——— */
@media (max-width: 1024px) {
  .p-cat-head__grid { grid-template-columns: 1fr; gap: var(--p-space-7); }
  .p-cat .p-cat-head__title { font-size: 32px; }
}

@media (max-width: 767px) {
  .p-cat .p-cat-head__title { font-size: 27px; }
  .p-cat-toolbar { align-items: flex-start; flex-direction: column; gap: var(--p-space-3); }
  .p-cat-toolbar__right { width: 100%; justify-content: space-between; }
  .p-cat-stats { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 12 — BLOQUES EDITORIALES DE LA FICHA DE CATEGORÍA

   Los cuatro bloques bajo el catálogo: ayuda con pasos, venta cruzada, guía de
   compra con tabla de referencia y preguntas frecuentes.

   El contenido sale de campos por categoría, así que cada bloque puede faltar:
   ninguna regla asume que exista el anterior.
   ═══════════════════════════════════════════════════════════════════════════ */

.p-cat-help,
.p-cat-cross,
.p-cat-guide,
.p-cat-faq {
  padding: var(--p-space-12) 0;
}

/* Fondos alternos para que los bloques no se fundan entre sí. */
.p-cat-help { background: var(--p-surface); border-top: 1px solid var(--p-border); }
/* Destino del enlace «Ver guía de compra». El margen evita que el titular
   quede tapado al saltar. */
.p-cat-guide { scroll-margin-top: var(--p-space-9); }

.p-cat-guide { background: var(--p-surface); border-top: 1px solid var(--p-border); border-bottom: 1px solid var(--p-border); }

/* ——— 12.1 · Bloque de ayuda ——— */
.p-cat-help__grid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(300px, 1.1fr);
  gap: var(--p-space-11);
  align-items: center;
}

/* Solo tarjetas de pasos: sin titular ni texto, una sola columna. Si no, las
   tarjetas se quedarían en la mitad derecha con medio bloque en blanco. */
.p-cat-help .p-cat-help__grid.is-solo-pasos { grid-template-columns: minmax(0, 1fr); }

.p-cat .p-cat-help__title { font-size: 30px; letter-spacing: -.03em; margin: 0 0 var(--p-space-3); }

.p-cat-help__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0 0 var(--p-space-6);
  max-width: 52ch;
}

.p-cat-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--p-space-4);
}

.p-cat-step {
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  padding: 16px 18px;
}

.p-cat-step__tag {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-orange);
  margin-bottom: var(--p-space-2);
}

.p-cat-step__title { font-size: 14px; font-weight: 600; color: var(--p-text); margin-bottom: 4px; }
.p-cat-step__desc { font-size: 12.5px; line-height: 1.5; color: var(--p-text-2); }

/* ——— 12.2 · Venta cruzada ——— */
.p-cat-cross__text { font-size: 15px; color: var(--p-text-2); margin: 0 0 var(--p-space-6); }

.p-cat-cross__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--p-space-4);
}

.p-cat-cross__why {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--p-text-2);
  margin-top: 4px;
}

/* ——— 12.3 · Guía de compra ——— */
.p-cat-guide__grid {
  display: grid;
  grid-template-columns: minmax(340px, 1.25fr) minmax(260px, .75fr);
  gap: var(--p-space-11);
  align-items: start;
}

/* Sin tabla, el texto no debe estirarse a todo el ancho: se vuelve ilegible. */
.p-cat-guide__grid.is-single { grid-template-columns: minmax(0, 78ch); }

.p-cat .p-cat-guide__title { font-size: 30px; letter-spacing: -.03em; margin: 0 0 var(--p-space-5); }

.p-cat-guide__blocks { display: grid; gap: var(--p-space-6); }

/* Se llama __h3 por historia: desde el 22/09/2026 los apartados son <h2> (el
   nivel que tienen en producción) y solo los subapartados «### » son <h3>. Los
   dos se ven igual. `.p-cat` delante NO es decorativo: `.p-scope h2` (0,1,1)
   le ganaría a la clase suelta (§17.40). El interlineado va escrito porque el
   de h2 (1.15) y el de h3 (1.2) de la PARTE 1 no coinciden: así el cambio de
   etiqueta no mueve ni un píxel. */
.p-cat .p-cat-guide__h3 {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--p-text);
  margin: 0 0 7px;
}

/* Subapartados: «### » (H3) y «#### » (H4). Bajan de cuerpo para que la
   jerarquía se lea, no solo se etiquete. */
.p-cat .p-cat-guide__sec.is-n3 .p-cat-guide__h3 { font-size: 17px; }
.p-cat .p-cat-guide__sec.is-n4 .p-cat-guide__h3 { font-size: 15.5px; }

/* Varios párrafos bajo un mismo apartado: antes cada uno era un apartado
   aparte y los separaba el hueco de la rejilla. */
.p-cat-guide__p + .p-cat-guide__p { margin-top: var(--p-space-3); }

.p-cat-guide__p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--p-text-2);
  margin: 0;
  max-width: 70ch;
}

/* Tabla de referencia rápida */
.p-cat-table {
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 22px;
}

.p-cat-table__label {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: var(--p-space-4);
}

.p-cat-table__head,
.p-cat-table__row { display: grid; grid-template-columns: 1fr 1fr; }

.p-cat-table__head {
  background: var(--p-navy);
  color: rgba(255, 255, 255, .85);
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  border-radius: var(--p-radius) var(--p-radius) 0 0;
  overflow: hidden;
}
.p-cat-table__head > div { padding: 10px 12px; }

.p-cat-table__body {
  border: 1px solid var(--p-border);
  border-top: 0;
  border-radius: 0 0 var(--p-radius) var(--p-radius);
  overflow: hidden;
}

.p-cat-table__row { font-size: 13px; }
.p-cat-table__row + .p-cat-table__row { border-top: 1px solid var(--p-border); }
.p-cat-table__row > div { padding: 10px 12px; }
.p-cat-table__row .p-mono { font-size: 12px; }

.p-cat-table__note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--p-text-2);
  margin: var(--p-space-4) 0 0;
}

/* ——— 12.4 · Preguntas frecuentes ———
   Acordeón con <details>/<summary>: sin JavaScript y accesible por teclado. */
.p-cat-faq__list {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
  max-width: 900px;
  margin-top: var(--p-space-5);
}

.p-cat-faq__item + .p-cat-faq__item { border-top: 1px solid var(--p-border); }
.p-cat-faq__item[open] { background: var(--p-surface); }

.p-cat-faq__q, .p-cat-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-5);
  padding: 17px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--p-text);
  cursor: pointer;
  list-style: none;
}

/* La pregunta es un <h3> dentro del <summary> (jerarquía de encabezados, como
   en producción) y tiene que verse EXACTAMENTE igual que antes: hereda todo
   del summary, que es quien lleva el tamaño, el peso y la fila flexible. Dos
   clases para ganarle a `.p-h3, .p-scope h3` de la PARTE 1, que vale (0,1,1)
   y si no le impondría 26px y su margen (§17.40). */
.p-cat-faq .p-cat-faq__qh {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  min-width: 0;
}

/* El triángulo por defecto se sustituye por el signo del diseño. */
.p-cat-faq__q::-webkit-details-marker, .p-cat-faq__item > summary::-webkit-details-marker { display: none; }
.p-cat-faq__q::marker, .p-cat-faq__item > summary::marker { content: ''; }

.p-cat-faq__q::after, .p-cat-faq__item > summary::after {
  content: '+';
  color: var(--p-orange);
  font-size: 18px;
  font-weight: 600;
  flex: none;
}
.p-cat-faq__item[open] .p-cat-faq__q::after,
.p-cat-faq__item[open] > summary::after { content: '−'; }

.p-cat-faq__q:focus-visible, .p-cat-faq__item > summary:focus-visible { outline: 2px solid var(--p-orange); outline-offset: -2px; }

.p-cat-faq__a,
.wp-block-details.p-cat-faq__item > :not(summary) {
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--p-text-2);
  max-width: 80ch;
}

/* ——— 12.5 · Responsive ——— */
@media (max-width: 1024px) {
  .p-cat-help__grid,
  .p-cat-guide__grid,
  .p-cat-guide__grid.is-single { grid-template-columns: 1fr; gap: var(--p-space-8); }
  .p-cat .p-cat-help__title,
  .p-cat .p-cat-guide__title { font-size: 25px; }
}

@media (max-width: 767px) {
  .p-cat-help,
  .p-cat-cross,
  .p-cat-guide,
  .p-cat-faq { padding: var(--p-space-9) 0; }
  .p-cat-steps { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 13 — TARJETA DE PRODUCTO: SKU, ESPECIFICACIONES Y COMPRA

   Ajustes sobre .p-prodgrid (PARTE 3 · 08) para la tarjeta completa. Aplican
   igual en la portada y en la ficha de categoría, que comparten esa clase.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— 13.1 · SKU bajo la imagen ———
   Antes vivía dentro del envoltorio de imagen de GP Premium, encima de la
   foto. Ahora va entre la imagen y el título. */
.p-prodgrid ul.products li.product .p-loop-sku {
  font-family: var(--p-font-mono);
  font-size: 10px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  padding: var(--p-space-4) var(--p-space-4) 0;
  margin: 0;
}

/* El título pierde el relleno superior: ya lo aporta el SKU que va encima. */
.p-prodgrid ul.products li.product .p-loop-sku + .woocommerce-loop-product__title {
  padding-top: 7px !important;
}

/* ——— 13.2 · Caja de características técnicas ——— */
.p-prodgrid ul.products li.product .p-loop-techspecs {
  font-family: var(--p-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--p-text);
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: 7px;
  padding: 7px 10px;
  margin: 0 var(--p-space-4) var(--p-space-3);
}

/* ——— 13.3 · Badge de disponibilidad ——— */
.p-prodgrid ul.products li.product .p-loop-stock {
  margin: 0 var(--p-space-4) var(--p-space-3);
}

/* ——— 13.4 · Precio con su unidad en la misma línea ———
   La unidad es un <span> dentro del mismo bloque de precio, no un <small> en
   línea aparte: antes «/ bobina» caía debajo del importe. */
.p-prodgrid ul.products li.product .price {
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0;
}

.p-prodgrid ul.products li.product .p-price-unit {
  font-family: var(--p-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--p-text-2);
  letter-spacing: 0;
  white-space: nowrap;
}

/* ——— 13.5 · Cantidad y botón Añadir ——— */
.p-prodgrid ul.products li.product .p-loop-buy {
  display: flex;
  align-items: stretch;
  gap: var(--p-space-2);
  margin: 0 var(--p-space-4) var(--p-space-4);
}

.p-prodgrid ul.products li.product .p-loop-qty {
  width: 68px;
  flex: 0 0 auto;
  height: 44px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  background: var(--p-bg);
  color: var(--p-text);
  font-family: var(--p-font-ui);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 0 4px;
}

.p-prodgrid ul.products li.product .p-loop-qty:focus {
  outline: none;
  border-color: var(--p-orange);
}

.p-prodgrid ul.products li.product .p-loop-add {
  flex: 1 1 auto;
  height: 44px;
  border: 1px solid var(--p-navy);
  border-radius: var(--p-radius-md);
  background: var(--p-bg);
  color: var(--p-navy);
  font-family: var(--p-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--p-dur-fast) var(--p-ease),
              color var(--p-dur-fast) var(--p-ease);
}

.p-prodgrid ul.products li.product .p-loop-add:hover,
.p-prodgrid ul.products li.product .p-loop-add:focus-visible {
  background: var(--p-navy);
  color: #fff;
}

/* El enlace por defecto de WooCommerce solo queda para productos variables o
   agotados; se le da la misma forma que al botón propio. */
.p-prodgrid ul.products li.product .button,
.p-prodgrid ul.products li.product .add_to_cart_button {
  display: block !important;
  width: calc(100% - var(--p-space-4) * 2);
  margin: 0 var(--p-space-4) var(--p-space-4) !important;
  height: 44px;
  line-height: 42px;
  text-align: center;
  border: 1px solid var(--p-navy);
  border-radius: var(--p-radius-md);
  background: var(--p-bg);
  color: var(--p-navy);
  font-size: 13.5px;
  font-weight: 600;
  padding: 0;
}


@media (max-width: 480px) {
  .p-prodgrid ul.products li.product .p-loop-buy { flex-wrap: wrap; }
  .p-prodgrid ul.products li.product .p-loop-qty { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 14 — FRANJA DE PRESUPUESTO A ANCHO COMPLETO

   La franja de la ficha de categoría va de borde a borde, sin esquinas
   redondeadas, a diferencia de la de la portada, que es una caja dentro del
   contenedor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El titular y el texto colgaban de `.p-quote .p-quote__title`, es decir,
   dependían de estar dentro del apartado .p-quote de la portada. En la ficha
   de categoría ese ancestro no existe, así que caían al `h1..h6 { color:
   navy }` global y quedaban navy sobre navy: solo se leía la palabra naranja.
   Ahora cuelgan de la propia caja, que sí está en los dos sitios. */
.p-quote__box .p-quote__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--p-text-inv);
  margin: 0;
}

.p-quote__box .p-quote__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--p-text-inv-2);
  margin: 8px 0 0;
}

/* Variante de la ficha de categoría: a sangre y con esquinas rectas. */
.p-cat .p-cat-quote {
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--p-gutter);
  padding-right: var(--p-gutter);
  max-width: none;
}

/* El contenido interior sí respeta el contenedor del sitio. */
.p-cat .p-cat-quote > * { max-width: calc(var(--p-container) / 2); }

@media (max-width: 767px) {
  .p-quote__box .p-quote__title { font-size: 22px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 15 — AJUSTES FINALES DE LA TARJETA DE PRODUCTO

   Correcciones sobre el diseño de referencia. Todas cuelgan de .p-prodgrid y
   no de .p-scope: en la ficha de categoría ambas clases viven en el <body>,
   así que un selector como `.p-scope .woocommerce ul.products li.product`
   nunca casa —exige que .woocommerce esté DENTRO de .p-scope, y ahí son
   hermanas—. Por eso la tarjeta había perdido borde, fondo y esquinas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— 15.1 · Caja de la tarjeta ——— */
.p-prodgrid ul.products li.product {
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
  text-align: left;
}

/* ——— 15.2 · Todo alineado a la izquierda ———
   WooCommerce centra el contenido de la tarjeta por defecto. */
.p-prodgrid ul.products li.product,
.p-prodgrid ul.products li.product .p-loop-sku,
.p-prodgrid ul.products li.product .woocommerce-loop-product__title,
.p-prodgrid ul.products li.product .p-loop-techspecs,
.p-prodgrid ul.products li.product .p-loop-specs,
.p-prodgrid ul.products li.product .price {
  text-align: left;
}

/* ——— 15.3 · Ritmo vertical del cuerpo ———
   WooCommerce mete un margen superior a cada elemento del loop, que sumado a
   los rellenos separaba el título de sus características casi 30px. Se anula
   y se controla el espaciado desde aquí. */
.p-prodgrid ul.products li.product > *,
.p-prodgrid ul.products li.product .woocommerce-LoopProduct-link > * {
  margin-top: 0;
}

.p-prodgrid ul.products li.product .p-loop-sku {
  padding: var(--p-space-4) var(--p-space-4) 0;
  margin-bottom: 6px;
}

.p-prodgrid ul.products li.product .woocommerce-loop-product__title {
  padding: 0 var(--p-space-4) !important;
  margin-bottom: 10px;
}

.p-prodgrid ul.products li.product .p-loop-techspecs {
  margin: 0 var(--p-space-4) 10px;
}

.p-prodgrid ul.products li.product .p-loop-specs {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--p-text-2);
  margin: 0 var(--p-space-4) var(--p-space-3);
}

/* La descripción corta puede traer listas: se aplanan para que no rompan la
   tarjeta con viñetas y sangrías. */
.p-prodgrid ul.products li.product .p-loop-specs ul,
.p-prodgrid ul.products li.product .p-loop-specs p {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ——— 15.4 · Precio y unidad ———
   La unidad va en la tipografía de datos, en versalitas y con aire respecto al
   importe: pegada y en cuerpo pequeño se leía como un exponente. */
.p-prodgrid ul.products li.product .price {
  gap: var(--p-space-2);
  padding: 0 var(--p-space-4) var(--p-space-3) !important;
  margin-top: auto !important;
}

.p-prodgrid ul.products li.product .p-price-unit {
  font-family: var(--p-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  white-space: nowrap;
}

/* ——— 15.5 · Selector de cantidad con − y + ——— */
.p-prodgrid ul.products li.product .p-qty {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  overflow: hidden;
  height: 44px;
}

.p-prodgrid ul.products li.product .p-qty__btn {
  width: 34px;
  border: 0;
  background: var(--p-surface);
  color: var(--p-text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--p-dur-fast) var(--p-ease);
}
.p-prodgrid ul.products li.product .p-qty__btn:hover { background: var(--p-surface-2); }
.p-prodgrid ul.products li.product .p-qty__btn:focus-visible {
  outline: 2px solid var(--p-orange);
  outline-offset: -2px;
}

.p-prodgrid ul.products li.product .p-loop-qty {
  width: 46px;
  height: 100%;
  border: 0;
  border-left: 1px solid var(--p-border);
  border-right: 1px solid var(--p-border);
  border-radius: 0;
  text-align: center;
  font-family: var(--p-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--p-text);
  background: var(--p-bg);
  padding: 0;
  -moz-appearance: textfield;
}

/* Las flechas nativas del input duplicarían los botones propios. */
.p-prodgrid ul.products li.product .p-loop-qty::-webkit-outer-spin-button,
.p-prodgrid ul.products li.product .p-loop-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.p-prodgrid ul.products li.product .p-loop-buy {
  margin: 0 var(--p-space-4) var(--p-space-4);
}


@media (max-width: 480px) {
  .p-prodgrid ul.products li.product .p-loop-buy { flex-wrap: nowrap; }
  .p-prodgrid ul.products li.product .p-qty { flex: 0 0 auto; }
}

/* ——— 15.7 · Altura del título ———
   La regla de la PARTE 3 · 08 reservaba dos líneas contando el relleno
   antiguo (16px arriba + 8 abajo). Al pasar el título a 0/7px de relleno, esa
   reserva dejaba ~17px de aire muerto entre el texto y la caja de
   características. Se recalcula con el relleno real. */
.p-prodgrid ul.products li.product .woocommerce-loop-product__title {
  min-height: calc(2.6em + 7px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 16 — ANCHO COMPLETO REAL EN LA FICHA DE CATEGORÍA

   El tope no estaba donde parecía. GeneratePress envuelve TODA la página en
   `div#page.site.grid-container`, que lleva `max-width: 1320px` y márgenes
   automáticos. Las reglas anteriores liberaban .site-content, .content-area y
   .site-main, pero ese envoltorio exterior seguía recortando: en una ventana
   de 1665px, la banda crema de la cabecera medía 1320 y dejaba 172px de blanco
   a cada lado.

   Se libera el envoltorio y el ancho lo pasa a controlar cada .p-container
   interior, que es lo que ya hace la portada.

   Se evita a propósito el truco de `margin: calc(50% - 50vw)`: `100vw` incluye
   la barra de desplazamiento y provoca desbordamiento horizontal.
   ═══════════════════════════════════════════════════════════════════════════ */

.p-cat #page.grid-container,
.p-cat #page.container {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Con el envoltorio liberado, cada bloque recupera su propio tope. */
.p-cat .p-cat-toolbar,
.p-cat ul.products,
.p-cat .woocommerce-pagination {
  max-width: var(--p-container);
  margin-left: auto;
  margin-right: auto;
}

/* ——— 16.1 · Alineación del selector de orden ———
   WooCommerce entrega el desplegable dentro de un <form> con margen inferior
   propio, que lo dejaba 15px por encima de su etiqueta y del conmutador. */
.p-cat .woocommerce-ordering,
.p-cat .woocommerce-ordering form {
  margin: 0 !important;
  padding: 0;
  display: flex;
  align-items: center;
  float: none;
}

.p-cat .woocommerce-ordering select {
  margin: 0;
  height: 36px;
  line-height: 1;
  vertical-align: middle;
}

.p-cat-toolbar__right { align-items: center; }

/* ——— 16.2 · Cabecera sin tarjetas de datos ———
   Al quitarlas, el titular y la descripción ocupan todo el ancho útil en vez
   de la primera columna de una rejilla de dos. */
.p-cat-head__grid { display: block; }

.p-cat-head__desc { max-width: 78ch; }

/* ——— 16.3 · Rejilla de 3 columnas ———
   Con 4 columnas sobre 1320px las tarjetas quedaban en 259px y la ficha
   técnica no respiraba. A 3 columnas suben a ~413px. */
.p-cat ul.products {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 1024px) {
  .p-cat ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
  .p-cat ul.products { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 17 — RITMO INTERIOR DE LA TARJETA

   Se recupera espacio del hueco entre el título y la ficha técnica para
   dárselo a la descripción corta, que necesita dos líneas y separarse del
   precio.
   ═══════════════════════════════════════════════════════════════════════════ */

/* OJO CON LA ESPECIFICIDAD. WooCommerce trae esta regla en woocommerce.min.css:

     .woocommerce ul.products li.product .woocommerce-LoopProduct-link > :not(:first-child)
     { margin-top: 10px; margin-bottom: 0 }

   Son (0,5,2) —cuatro clases más el :first-child de dentro del :not—, y le
   gana a un `.p-prodgrid ul.products li.product .p-loop-specs`, que es (0,4,2).
   El resultado: los márgenes de abajo se perdían y todo quedaba separado por
   los mismos 10px.

   La forma de ganarle sin !important es replicar su misma estructura de
   selector sustituyendo `.woocommerce` por nuestra clase: se empata en
   especificidad y decide el orden, y nuestro CSS carga después. */

.p-prodgrid ul.products li.product .woocommerce-LoopProduct-link > .woocommerce-loop-product__title {
  margin-top: 0;
  margin-bottom: 6px;
}

.p-prodgrid ul.products li.product .woocommerce-LoopProduct-link > .p-loop-techspecs {
  margin: 0 var(--p-space-4) 8px;
}

/* Dos líneas reservadas: así todas las tarjetas de una fila mantienen la misma
   estructura aunque una descripción sea más corta que otra. */
.p-prodgrid ul.products li.product .woocommerce-LoopProduct-link > .p-loop-specs {
  min-height: 3em;
  margin: 0 var(--p-space-4) var(--p-space-5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-prodgrid ul.products li.product .woocommerce-LoopProduct-link > .price {
  margin-top: auto;
  padding-top: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 18 — ALINEACIONES FINALES

   Tres desajustes de encaje, medidos en la ficha de categoría.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— 18.1 · La barra de herramientas, al ancho de la rejilla ———
   La barra tenía max-width 1320 con 40px de relleno lateral: su BORDE caía en
   el mismo borde del contenedor, 40px por fuera de donde empiezan las
   tarjetas. Ahora el gutter va por fuera del borde, de modo que la caja
   empieza y acaba exactamente donde las tarjetas. */
.p-cat .p-cat-toolbar,
.p-cat .woocommerce-pagination {
  max-width: calc(var(--p-container) - var(--p-gutter) * 2);
  padding-left: 14px;
  padding-right: 14px;
}

.p-cat .woocommerce-pagination { padding-left: 0; padding-right: 0; }

/* ——— 18.2 · El selector de cantidad, alineado con el resto ———
   El formulario es hijo directo de li.product, así que le caía el relleno
   lateral de la regla `> *:not(a):not(.onsale)` de la PARTE 2: 16px de margen
   propio MÁS 16 de relleno heredado lo dejaban 16px por dentro del resto de
   elementos de la tarjeta. */
/* Se cualifica con `form` para sumar un elemento al selector: la regla de la
   PARTE 2 que reparte el relleno lateral —
   `.p-scope ul.products li.product > *:not(a):not(.onsale)` — es (0,4,3) y le
   ganaba a un (0,4,2). Con `form.p-loop-buy` se empata y decide el orden. */
.p-prodgrid ul.products li.product form.p-loop-buy {
  padding-left: 0;
  padding-right: 0;
}

/* Algo más ancho: con los botones a 34px el campo quedaba en 46 y el número
   de tres cifras no respiraba. */
.p-prodgrid ul.products li.product .p-qty__btn { width: 38px; }
.p-prodgrid ul.products li.product .p-loop-qty { width: 54px; }


/* ——— 18.4 · La imagen llena la tarjeta ———
   Las miniaturas de WooCommerce son de 300px y la tarjeta pasó a 380 al bajar
   a tres columnas: sin estirar, la foto dejaba 40px de blanco a cada lado.
   Se cualifica con `img` sobre la clase del envoltorio de GP Premium para
   ganar a su propia regla de ancho.

   Conviene además subir el tamaño de miniatura del catálogo a 400px en
   WooCommerce → Ajustes → Productos y regenerar: estirar una imagen de 300 a
   380 se nota en pantallas de alta densidad. */
/* El problema no era la imagen sino su envoltorio: GP Premium sirve
   .inside-wc-product-image como inline-block, que se encoge al tamaño de la
   foto (300px). Un `width: 100%` en la imagen se calculaba sobre esos 300 y no
   sobre los 380 de la tarjeta. */
.p-prodgrid ul.products li.product .wc-product-image,
.p-prodgrid ul.products li.product .inside-wc-product-image {
  display: block;
  width: 100%;
}

.p-prodgrid ul.products li.product .inside-wc-product-image img,
.p-prodgrid ul.products li.product .woocommerce-LoopProduct-link img {
  width: 100%;
  max-width: none;
  display: block;
}

/* ——— 18.3 · La unidad, a la derecha del precio ———
   Los hijos del precio llevan `order` desde la PARTE 2: el precio actual va en
   1 y el tachado en 2. La regla del sufijo apunta a
   `small.woocommerce-price-suffix`, que es el marcado antiguo de WooCommerce;
   nuestro <span class="p-price-unit"> se quedaba sin `order`, valía 0 por
   defecto y se colocaba DELANTE de ambos precios. */
.p-scope .price .p-price-unit,
.p-prodgrid ul.products li.product .p-price-unit {
  order: 3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 19 — VISTA DE LISTA COMO TABLA

   Cuatro columnas: Producto (foto + SKU + título), Especificaciones
   (características + descripción), Precio y Cantidad y compra. Sin columna de
   disponibilidad.

   CÓMO SE CONSIGUE SIN CAMBIAR EL MARCADO
   Todo el contenido menos el formulario de compra vive dentro del enlace
   <a class="woocommerce-LoopProduct-link">. Se le aplica `display: contents`,
   que disuelve la caja del enlace y sube sus hijos a ser elementos de la
   rejilla de li.product, sin perder el enlace ni su área clicable en cada
   pieza. A partir de ahí cada elemento se coloca por fila y columna.

   Las cinco pistas —foto, textos, especificaciones, precio, compra— se
   declaran una sola vez en una variable para que la barra de títulos y las
   filas no puedan descuadrarse entre sí.
   ═══════════════════════════════════════════════════════════════════════════ */

.p-cat {
  /* La última pista es fija y ha de caber entera: selector 136 + hueco 8 +
     botón. Con 210px el botón sobresalía 19px y lo recortaba el
     `overflow: hidden` de la tabla. */
  --p-list-cols: 92px minmax(0, 1.9fr) minmax(0, 1.6fr) minmax(0, 1.2fr) 248px;
}

/* La barra solo existe en modo lista. */
.p-list-head { display: none; }

.p-view-list.p-cat .p-list-head {
  display: grid;
  grid-template-columns: var(--p-list-cols);
  align-items: center;
  gap: var(--p-space-5);
  max-width: calc(var(--p-container) - var(--p-gutter) * 2);
  margin: 0 auto;
  padding: 12px 16px;
  background: var(--p-navy);
  border-radius: var(--p-radius-md) var(--p-radius-md) 0 0;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

/* El primer rótulo cubre foto y textos: son una sola columna conceptual. */
.p-view-list.p-cat .p-list-head > div:first-child { grid-column: 1 / span 2; }

/* ——— 19.1 · La fila ——— */
/* Misma caja que la barra de títulos: sin esto, la rejilla conserva el
   max-width de 1320 y el gutter de 40px del modo cuadrícula, y las filas
   quedaban 28px desplazadas respecto a los rótulos. */
.p-view-list.p-cat ul.products {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  max-width: calc(var(--p-container) - var(--p-gutter) * 2);
  margin: 0 auto;
  padding: 0 !important;
  border: 1px solid var(--p-border);
  border-top: 0;
  border-radius: 0 0 var(--p-radius-md) var(--p-radius-md);
  overflow: hidden;
}

.p-view-list.p-cat ul.products li.product {
  display: grid !important;
  grid-template-columns: var(--p-list-cols);
  align-items: center;
  gap: var(--p-space-5);
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: var(--p-bg);
}

.p-view-list.p-cat ul.products li.product + li.product {
  border-top: 1px solid var(--p-border);
}

/* `display: contents` disuelve la caja del enlace: sus hijos pasan a ser
   elementos de la rejilla de la fila. */
.p-view-list.p-cat ul.products li.product .woocommerce-LoopProduct-link {
  display: contents;
}

/* ——— 19.2 · Colocación de cada pieza ———

   LA FOTO SE COLOCA POR DOS VÍAS, Y HACEN FALTA LAS DOS.

   `.wc-product-image` es el envoltorio que pone GP Premium con su módulo de
   WooCommerce. Si ese módulo no está activo —producción, 05/10/2026— la foto
   es un `<img>` suelto colgando del enlace del producto, que en esta vista va
   con `display: contents`, así que el elemento de la rejilla es la propia
   imagen.

   Con solo el selector del envoltorio, sin GP Premium la imagen no recibía
   colocación: se autocolocaba en la fila 1, la fila 1 crecía a sus 92px, y el
   título caía a la fila 2 **por debajo** de la foto en lugar de al lado del
   SKU. De ahí que la foto no encajara con el SKU ni con el título, y que las
   dos columnas de texto arrancaran a alturas distintas.

   Medido con y sin GP Premium: las dos vías dan filas de 38,375px + 57px y
   una fila de 143px de alto. */
.p-view-list.p-cat ul.products li.product .wc-product-image,
.p-view-list.p-cat ul.products li.product > a > img,
.p-view-list.p-cat ul.products li.product > img {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 92px;
  align-self: center;
}

.p-view-list.p-cat ul.products li.product .inside-wc-product-image img,
.p-view-list.p-cat ul.products li.product > a > img,
.p-view-list.p-cat ul.products li.product > img {
  width: 92px;
  height: 92px;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover;
  border-radius: 7px;
}

.p-view-list.p-cat ul.products li.product .p-loop-sku {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding: 0 !important;
  margin: 0 !important;
}

.p-view-list.p-cat ul.products li.product .woocommerce-loop-product__title {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 3px 0 0 !important;
  font-size: 14.5px !important;
  -webkit-line-clamp: 2;
}

/* Especificaciones: texto plano, sin caja. En cuadrícula sí lleva recuadro,
   pero aquí compite con el resto de columnas y el marco añade ruido. */
.p-view-list.p-cat ul.products li.product .p-loop-techspecs {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 !important;
  margin: 0 !important;
}

.p-view-list.p-cat ul.products li.product .p-loop-specs {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  min-height: 0;
  padding: 0 !important;
  margin: 3px 0 0 !important;
  font-size: 12px;
}

.p-view-list.p-cat ul.products li.product .price {
  grid-column: 4;
  grid-row: 1 / span 2;
  flex-wrap: wrap;
  align-content: center;
  padding: 0 !important;
  margin: 0 !important;
}

.p-view-list.p-cat ul.products li.product form.p-loop-buy {
  grid-column: 5;
  grid-row: 1 / span 2;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

/* En la tabla el botón es la acción principal de la fila y compite con mucha
   información alrededor, así que va en el naranja de marca. En la cuadrícula
   se queda en contorno navy: ahí la tarjeta ya tiene jerarquía propia y una
   rejilla de botones naranjas sería demasiado ruido. */
.p-view-list.p-cat ul.products li.product .p-loop-add {
  flex: 1 1 auto;
  min-width: 96px;
  background: var(--p-orange);
  border-color: var(--p-orange);
  color: #fff;
}

.p-view-list.p-cat ul.products li.product .p-loop-add:hover,
.p-view-list.p-cat ul.products li.product .p-loop-add:focus-visible {
  background: var(--p-orange-dark);
  border-color: var(--p-orange-dark);
  color: #fff;
}

/* El botón de WooCommerce para productos variables ocupa la misma celda. */
.p-view-list.p-cat ul.products li.product .button {
  grid-column: 5;
  grid-row: 1 / span 2;
  width: auto !important;
  margin: 0 !important;
}

/* Sin zoom en la foto: en una fila de 92px el efecto no aporta y descuadra. */
.p-view-list.p-cat ul.products li.product:hover a img { transform: none; }

/* ——— 19.3 · Pantallas medias y estrechas ———
   Por debajo de 900px la tabla deja de caber: se vuelve a tarjeta apilada,
   que es lo que el modo lista pretendía evitar en ancho pero necesita en
   estrecho. */
@media (max-width: 900px) {
  .p-view-list.p-cat .p-list-head { display: none; }

  .p-view-list.p-cat ul.products {
    border: 0;
    gap: var(--p-space-3) !important;
  }

  .p-view-list.p-cat ul.products li.product {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: var(--p-space-4);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-lg);
  }

  .p-view-list.p-cat ul.products li.product + li.product { border-top: 1px solid var(--p-border); }

  .p-view-list.p-cat ul.products li.product .p-loop-techspecs,
  .p-view-list.p-cat ul.products li.product .p-loop-specs { grid-column: 2; }
  .p-view-list.p-cat ul.products li.product .p-loop-techspecs { grid-row: 3; }
  .p-view-list.p-cat ul.products li.product .p-loop-specs { grid-row: 4; }
  .p-view-list.p-cat ul.products li.product .price { grid-column: 2; grid-row: 5; }
  .p-view-list.p-cat ul.products li.product form.p-loop-buy { grid-column: 1 / -1; grid-row: 6; }
  /* Las dos vías de la foto, como en la 19.2: con GP Premium y sin él. */
  .p-view-list.p-cat ul.products li.product .wc-product-image,
  .p-view-list.p-cat ul.products li.product > a > img,
  .p-view-list.p-cat ul.products li.product > img { grid-row: 1 / span 2; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 20 — BARRA LATERAL DE FILTROS

   Rejilla de dos columnas en la ficha de categoría: filtros a la izquierda,
   catálogo a la derecha. La barra es pegajosa mientras se recorre el listado.

   Las opciones son enlaces con una casilla dibujada, no <input type=checkbox>:
   así el filtrado funciona sin JavaScript y cada combinación tiene su URL.
   La casilla se pinta con ::after para no depender de una fuente de iconos.
   ═══════════════════════════════════════════════════════════════════════════ */

.p-cat-layout {
  max-width: calc(var(--p-container) - var(--p-gutter) * 2);
  margin: 0 auto;
}

/* Dos columnas SOLO si la barra existe. Sin `has-filters` el envoltorio es un
   bloque normal y el catálogo ocupa todo el ancho, que es lo que necesitan las
   categorías cuyos productos aún no tienen atributos. */
.p-cat-layout.has-filters {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--p-space-8);
  align-items: start;
}

/* Dentro del envoltorio manda la caja del layout, que YA es el ancho de
   contenido: el contenido deja de centrarse y de poner gutter por su cuenta.

   Se aplica con o sin barra. Cuando lo limité a `.has-filters`, las categorías
   sin filtros mantenían el gutter de 40px en la rejilla pero no en la barra de
   herramientas, y quedaban desalineadas justo esos 40px. */
.p-cat-layout .p-cat-toolbar,
.p-cat-layout ul.products,
.p-cat-layout .woocommerce-pagination,
.p-cat-layout .p-list-head {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* El gutter lateral lo aportaba la rejilla cuando iba suelta; aquí sobra. */
.p-cat-layout ul.products {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.p-cat-main { min-width: 0; }

/* La barra arranca a la altura de la barra de herramientas, no del envoltorio.
   Las dos columnas de la rejilla empiezan en el mismo punto, pero la de la
   derecha abre con .p-cat-toolbar, que trae 28px de margen superior: sin
   compensarlo, la caja de filtros quedaba 28px por encima de la de resultados
   y las dos cabeceras no casaban. Medido en /tienda/: filtros en y=522 contra
   barra en y=550. El margen inferior mantiene la simetría cuando la barra es
   la columna más alta, que pasa en categorías con pocos productos. */
.p-cat-layout.has-filters .p-filters {
  margin-top: var(--p-space-7);
  margin-bottom: var(--p-space-7);
}

/* ——— 20.1 · La caja ——— */
.p-filters { position: sticky; top: 20px; }

.p-filters__box {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
  background: var(--p-bg);
}

.p-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-3);
  padding: 14px 16px;
  background: var(--p-surface);
  border-bottom: 1px solid var(--p-border);
}

.p-filters__title { font-size: 14px; font-weight: 600; color: var(--p-text); }

.p-filters__clear {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--p-orange);
}
.p-filters__clear:hover { color: var(--p-orange-dark); }

/* ——— 20.2 · Grupos ——— */
.p-filters__group {
  padding: 14px 16px;
  border-bottom: 1px solid var(--p-border);
}

.p-filters__grouphead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.p-filters__label,
.p-filters__unit {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
}

.p-filters__label { color: var(--p-text-2); }
.p-filters__unit { color: #c9c4b9; }

.p-filters__options { display: grid; gap: 2px; }

/* ——— 20.3 · Cada opción ——— */
.p-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--p-text);
  padding: 5px 6px;
  margin: 0 -6px;
  border-radius: var(--p-radius);
  transition: background var(--p-dur-fast) var(--p-ease);
}

.p-filter:hover { background: var(--p-surface); color: var(--p-text); }
.p-filter:focus-visible { outline: 2px solid var(--p-orange); outline-offset: -2px; }

.p-filter__box {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 1px solid var(--p-border);
  border-radius: 3px;
  background: var(--p-bg);
  position: relative;
  transition: background var(--p-dur-fast) var(--p-ease),
              border-color var(--p-dur-fast) var(--p-ease);
}

.p-filter.is-active .p-filter__box {
  background: var(--p-orange);
  border-color: var(--p-orange);
}

/* La marca de verificación, dibujada con dos bordes girados. */
.p-filter.is-active .p-filter__box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.p-filter__label { flex: 1 1 auto; }
.p-filter.is-active .p-filter__label { font-weight: 600; }

.p-filter__count {
  font-family: var(--p-font-mono);
  font-size: 10.5px;
  color: var(--p-text-2);
}

/* Un término sin resultados con los filtros puestos se atenúa en vez de
   desaparecer: verlo a cero informa de que existe pero no combina. */
.p-filter__count:empty::after { content: '0'; }

/* Sin pie: el último grupo cierra la caja, así que se le quita el filete
   inferior para no dejar una línea suelta sobre el borde. */
.p-filters__group:last-child { border-bottom: 0; }

/* ——— 20.5 · Chips de filtros activos ——— */
.p-active-filters {
  display: flex;
  align-items: center;
  gap: var(--p-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--p-space-4);
}

.p-active-filters__label {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-right: 2px;
}

.p-active-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  border: 1px solid var(--p-orange);
  background: var(--p-orange-soft);
  color: var(--p-text);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
}
.p-active-filter:hover { background: var(--p-orange); color: #fff; }
.p-active-filter span[aria-hidden] { color: var(--p-orange); font-weight: 700; }
.p-active-filter:hover span[aria-hidden] { color: #fff; }

.p-active-filters__clear {
  font-size: 12.5px;
  color: var(--p-text-2);
  text-decoration: underline;
}
.p-active-filters__clear:hover { color: var(--p-orange); }

/* ——— 20.6 · Piezas que solo existen en móvil ———
   Se declaran ocultas AQUÍ, antes del media query. Puestas después, ganarían:
   un media query no aporta especificidad, así que entre dos reglas iguales
   manda la última del archivo.

   El telón no aparece en esta lista: lleva el atributo `hidden` en el HTML y lo
   gobierna el JavaScript. Añadirle `display: none` desde CSS lo dejaría oculto
   incluso al abrir el panel. */
.p-filtersbtn,
.p-filters__close,
.p-filters__foot { display: none; }

.p-filtersbtn__n {
  font-family: var(--p-font-mono);
  font-size: 10.5px;
  color: var(--p-orange);
}

/* ——— 20.7 · Panel deslizante en móvil ———
   Por debajo de 900px la columna de 264px se comía media pantalla y el
   catálogo quedaba en una tira. Desplegar la barra en horizontal encima del
   listado —lo que había antes— tampoco servía: con seis grupos abiertos había
   que recorrer pantalla y media para ver un solo producto.

   Ahora la barra pasa a panel deslizante con telón, que es el patrón de
   cualquier tienda grande. Es el MISMO elemento .p-filters: solo cambia de
   posición. Duplicar el marcado obligaría a mantener dos barras y dejaría cada
   enlace de filtro dos veces en la página. */
@media (max-width: 899px) {
  .p-cat-layout.has-filters { display: block; }

  .p-cat-layout.has-filters .p-filtersbtn {
    display: inline-flex;
    align-items: center;
    gap: var(--p-space-2);
    border: 1px solid var(--p-navy);
    background: var(--p-bg);
    color: var(--p-navy);
    border-radius: var(--p-radius-md);
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  .p-filters {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: min(340px, 88vw);
    margin: 0 !important;
    background: var(--p-bg);
    transform: translateX(-100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
  }

  .p-filters-open .p-filters { transform: translateX(0); }

  /* Rueda el panel, no la página: sin `contain`, al llegar al final de la lista
     de filtros el scroll pasa al documento de detrás. */
  .p-filters__box {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
  }

  /* Cabecera y pie quedan a la vista; solo ruedan los grupos. */
  .p-filters__head {
    position: sticky;
    top: 0;
    z-index: 1;
    flex: none;
    padding: 16px 18px;
  }

  .p-filters__title { font-size: 16px; }

  .p-filters__close {
    display: block;
    border: 0;
    background: transparent;
    color: var(--p-text-2);
    font-size: 26px;
    line-height: 1;
    padding: 0 0 0 var(--p-space-3);
    cursor: pointer;
  }
  .p-filters__close:hover { color: var(--p-orange); }

  /* Objetivos táctiles: 13.5px de texto con 9px de hueco va bien con ratón y
     mal con el dedo. Se sube a 15px y 24px de alto mínimo. */
  .p-filters__group { padding: 16px 18px; }
  .p-filters__options { gap: 14px; }
  .p-filter { font-size: 15px; min-height: 24px; }

  .p-filters__foot {
    display: block;
    position: sticky;
    bottom: 0;
    flex: none;
    background: var(--p-bg);
    border-top: 1px solid var(--p-border);
    padding: 14px 18px;
  }

  .p-filters__see { width: 100%; }

  .p-filters-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(17, 26, 51, .5);
  }

  /* Sin esto, la página de detrás rueda mientras el panel está abierto. */
  .p-filters-open { overflow: hidden; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 21 — TIENDA GENERAL (/tienda/)

   La tienda reutiliza casi todo el catálogo de la ficha de categoría: comparte
   la clase `p-cat` del <body>, así que hereda barra de herramientas, rejilla,
   vista de lista, paginación y CTA sin repetir una línea. Aquí solo va lo
   exclusivo: cabecera con tarjeta de atajos, chips de búsquedas frecuentes,
   la familia en la tarjeta y la barra de filtros a la derecha.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— 21.1 · Cabecera ———
   §16.2 dejó .p-cat-head__grid en `display: block` al retirar las tarjetas de
   datos de la ficha de categoría. La tienda sí tiene segunda columna, así que
   recupera la rejilla. Misma especificidad (0,1,0), pero esta parte va después
   en el archivo y por eso gana. */
.p-shop-head__grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.25fr) minmax(300px, .75fr);
  gap: var(--p-space-11);
  /* `end`, como en el diseño original, alineaba las dos columnas por abajo: la
     tarjeta de atajos mide 199px y el bloque de texto 130, así que el titular
     caía 85px por debajo de las migas de pan y parecía descolgado. Con `start`
     los dos empiezan a la vez y el titular queda a 16px de las migas, el mismo
     ritmo que en la ficha de categoría. */
  align-items: start;
}

/* La entradilla enumera las ocho familias y se hace larga: sin tope de medida
   se pegaría a la tarjeta de atajos. */
.p-shop .p-cat-head__desc { max-width: 62ch; }

/* ——— 21.2 · Tarjeta de atajos ——— */
.p-shop-shortcuts {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  background: var(--p-bg);
  padding: 18px 20px;
}

.p-shop-shortcuts__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--p-text);
  margin-bottom: 3px;
}

.p-shop-shortcuts__sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--p-text-2);
  margin-bottom: var(--p-space-4);
}

/* auto-fit y no un número fijo de columnas: los atajos se imprimen solo si su
   página existe, así que pueden ser dos, tres o cuatro. */
.p-shop-shortcuts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
}

.p-shop-shortcut {
  display: block;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 11px 13px;
  color: var(--p-text);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color .2s, color .2s;
}
/* El diseño original marcaba el hover en azul; se usa el naranja de marca, que
   es el color de interacción en el resto del sitio. */
.p-shop-shortcut:hover {
  border-color: var(--p-orange);
  color: var(--p-orange);
}

/* ——— 21.3 · Búsquedas frecuentes ——— */
.p-shop-frequent { padding: var(--p-space-5) 0 0; }

.p-shop-frequent .p-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.p-shop-frequent__label {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-right: 2px;
}

.p-shop-chip {
  border: 1px solid var(--p-border);
  border-radius: 99px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--p-text);
  background: var(--p-bg);
  transition: border-color .2s, color .2s;
}
.p-shop-chip:hover {
  border-color: var(--p-orange);
  color: var(--p-orange);
}

/* ——— 21.4 · Filtros ———
   Nada que ajustar: la barra de la tienda es la misma de la ficha de categoría
   (§20), a la izquierda y con la misma caja. Lo único propio de la tienda es un
   grupo más, «Familia», que no necesita estilo aparte.

   ——— 21.5 · Familia en la tarjeta ———
   Sobre el SKU. En la tienda conviven las ocho familias y el nombre del
   producto no siempre dice de cuál es. */
.p-prodgrid ul.products li.product .p-loop-family {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-text-2);
  padding: var(--p-space-4) var(--p-space-4) 0;
  margin: 0 0 6px;
  text-align: left;
}

/* Con la familia encima, el SKU ya no abre el bloque de texto. */
.p-prodgrid ul.products li.product .p-loop-family + .p-loop-sku {
  padding-top: 0;
}

/* En la vista de lista cada celda tiene su sitio asignado en la rejilla de la
   fila; un elemento sin colocar se autocolocaría y descuadraría la tabla. La
   familia se omite: la columna «Producto» ya va llena. */
.p-view-list.p-cat ul.products li.product .p-loop-family { display: none; }

/* ——— 21.6 · Responsive ——— */
@media (max-width: 1024px) {
  .p-shop-head__grid { grid-template-columns: 1fr; gap: var(--p-space-6); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 22 — BLOQUES EDITORIALES DE LA TIENDA (fase 2)

   Los cinco bloques de debajo del catálogo. Todos comparten la envoltura
   .p-shopblock, que aporta el ritmo vertical y el contenedor, para que añadir
   uno nuevo no obligue a repetir medidas.
   ═══════════════════════════════════════════════════════════════════════════ */

.p-shopblock { padding-top: var(--p-space-12); }

.p-shopblock__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--p-text);
  margin: 0 0 var(--p-space-2);
}

.p-shopblock__title--sm { font-size: 26px; }

.p-shopblock__lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0 0 var(--p-space-6);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ——— 22.1 · Comprar por proceso ——— */
.p-process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: var(--p-space-4);
}

.p-process__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 18px;
  background: var(--p-surface);
  color: var(--p-text);
  transition: background .2s, border-color .2s;
}
.p-process__card:hover {
  background: var(--p-surface-2);
  border-color: var(--p-orange);
}

.p-process__tag {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-orange);
  margin-bottom: var(--p-space-3);
}

.p-process__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-bottom: 7px;
}

.p-process__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--p-text-2);
}

/* ——— 22.2 · Tarifa por cantidad ——— */
.p-volume {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  background: var(--p-surface);
  padding: 26px 30px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.1fr);
  gap: var(--p-space-9);
  align-items: center;
}

.p-volume__copy .p-shopblock__lead { margin-bottom: 0; max-width: 56ch; }

/* Overflow propio: en pantallas estrechas la escala se desplaza sola en vez de
   desbordar la página. */
.p-volume__scale {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  overflow-x: auto;
}

/* El filete de 1px sale del hueco sobre fondo de borde: así las separaciones
   son líneas continuas y no bordes dobles. Mismo recurso que .p-cat-stats. */
.p-volume__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  gap: 1px;
  background: var(--p-border);
  min-width: 360px;
}

.p-volume__step {
  background: var(--p-bg);
  padding: 14px 12px;
  text-align: center;
}

.p-volume__step.is-best { background: var(--p-navy); }

.p-volume__qty {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 6px;
}
.p-volume__step.is-best .p-volume__qty { color: var(--p-text-inv-2); }

.p-volume__pct {
  display: block;
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--p-text);
}
.p-volume__step.is-best .p-volume__pct { color: var(--p-orange); }

/* ——— 22.3 · Tarjetas de servicio ——— */
.p-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--p-space-5);
}

.p-service {
  border-radius: var(--p-radius-lg);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
}

.p-service--dark { background: var(--p-navy); }
.p-service--soft { background: var(--p-surface-2); border: 1px solid var(--p-border); }

.p-service__badge {
  align-self: flex-start;
  background: var(--p-navy);
  color: var(--p-text-inv);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--p-radius-sm);
  margin-bottom: var(--p-space-4);
}

.p-service__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 var(--p-space-3);
  color: var(--p-text);
}
.p-service--dark .p-service__title { color: var(--p-text-inv); }

.p-service__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--p-text-2);
  margin: 0 0 var(--p-space-4);
}
.p-service--dark .p-service__text { color: var(--p-text-inv-2); }

/* margin-top:auto pega los botones al fondo: las dos tarjetas tienen textos de
   distinta longitud y sin esto sus botones no quedan a la misma altura. */
.p-service__actions {
  margin-top: auto;
  display: flex;
  gap: var(--p-space-3);
  flex-wrap: wrap;
}

/* ——— 22.4 · Asesoramiento y guías ——— */
.p-advice {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 26px 30px;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(300px, 1.1fr);
  gap: var(--p-space-9);
  align-items: center;
}

/* Sin entradas publicadas no hay segunda columna: el texto no debe estirarse a
   todo el ancho porque se vuelve ilegible. */
.p-advice.is-single { grid-template-columns: minmax(0, 68ch); }

.p-advice .p-shopblock__lead { margin-bottom: var(--p-space-5); max-width: 54ch; }

.p-advice__actions { display: flex; gap: var(--p-space-3); flex-wrap: wrap; }

.p-advice__guides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--p-space-3);
}

.p-advice__guide {
  display: block;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 14px 16px;
  color: var(--p-text);
  transition: background .2s, border-color .2s;
}
.p-advice__guide:hover {
  background: var(--p-surface-2);
  border-color: var(--p-orange);
}

.p-advice__tag {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-orange);
  margin-bottom: var(--p-space-2);
}

.p-advice__gtitle {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

/* ——— 22.5 · Texto de fondo ———
   Cierra la página, así que lleva franja propia a sangre y su propio relleno
   inferior: es el último bloque antes del pie. */
.p-shopblock--seo {
  background: var(--p-surface);
  border-top: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
  margin-top: var(--p-space-12);
  padding: var(--p-space-12) 0;
}

.p-shopblock--seo .p-shopblock__title { margin-bottom: var(--p-space-5); }

/* Dos columnas fijas, no `auto-fit`: con cuatro apartados, auto-fit los reparte
   en cuatro columnas de ~300px sobre un contenedor de 1320, y una columna de
   prosa de 300px es ilegible. El diseno usa dos columnas de dos apartados. */
.p-seo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--p-space-8);
}

.p-seo__h3 {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--p-text);
  margin: 0 0 7px;
}

.p-seo__p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--p-text-2);
  /* La separacion entre apartados la pone el hueco de la rejilla. */
  margin: 0;
}

.p-seo__p a { color: var(--p-text); text-decoration: underline; }
.p-seo__p a:hover { color: var(--p-orange); }

/* ——— 22.6 · Responsive ——— */
@media (max-width: 900px) {
  .p-seo__grid { grid-template-columns: 1fr; }
  .p-volume,
  .p-advice {
    grid-template-columns: 1fr;
    gap: var(--p-space-6);
  }
  .p-shopblock__title { font-size: 26px; }
  .p-shopblock__title--sm { font-size: 23px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 23 — FICHA DE PRODUCTO

   Las dos columnas del diseño son hijas directas de `div.product`, que
   WooCommerce ya imprime: galería, resumen y —tras la limpieza de
   inc/woo-product.php— los bloques de debajo. En vez de envolverlas en
   contenedores propios se coloca cada una en una rejilla explícita. Ventaja:
   no hay marcado intermedio que mantener y, si Woo cambia el orden de sus
   hooks, cada pieza sigue cayendo en su celda.

   Comprobado en dev: los hijos de `div.product` son .woocommerce-product-gallery,
   .summary, .woocommerce-tabs y .related. Las dos últimas se retiran en PHP.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— 23.1 · La envoltura de GeneratePress ———
   Mismo despeje que en el catálogo: la tarjeta del artículo no debe aportar
   fondo, borde ni relleno, porque las cajas las ponen los bloques. */
.p-product .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.p-product .inside-article {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.p-product .entry-content { max-width: none; margin: 0; }

.p-product .woocommerce-notices-wrapper:empty { display: none; }

/* ——— 23.2 · Rejilla de la ficha ——— */
/* La miga es lo primero que hay bajo la cabecera del sitio. Con 20px iba pegada
   al filete y parecía parte de la barra; con 28 seguía leyéndose como parte del
   menú. A 40 se ve lo que es: el principio de la página. */
.p-pdp-crumbs {
  max-width: var(--p-container);
  margin: 0 auto;
  padding: var(--p-space-9) var(--p-gutter) 0;
}

/* `div.product` es solo el contenedor de ancho. La rejilla de dos columnas
   vive en `.p-pdp-top`, que envuelve fotos y caja de compra, y NADA más. */
.p-product div.product {
  max-width: var(--p-container);
  margin: 0 auto;
  padding: var(--p-space-6) var(--p-gutter) 0;
}

.p-pdp-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--p-space-10);
  align-items: start;
}

/* La columna izquierda se queda pegada mientras se recorre la caja de compra.
   El tope lo pone `.p-pdp-top`: un elemento pegajoso se detiene al final de su
   bloque contenedor, y `.p-pdp-top` mide exactamente lo que la caja.

   OJO con la versión anterior: la rejilla estaba en `div.product` y se dio por
   hecho que el bloque contenedor sería la CELDA. No lo es —es el contenedor de
   rejilla entero—, así que las fotos bajaban hasta el final de la ficha. Ver
   §14.25. */
.p-product .p-pdp-left {
  min-width: 0;
  position: sticky;
  top: 20px;
}

/* GP Premium imprime en línea el ancho de la galería desde su ajuste
   single_product_image_width (50 % por defecto). Ese 50 % se aplicaba DENTRO
   de una columna que ya era la mitad, así que las fotos salían a 299px en una
   celda de 598.
   
   Hace falta un ID para ganarle. Su lista de selectores incluye
   `.woocommerce #content div.product div.images`, que con `#content` vale
   (1,3,2): cuatro clases sin ID —(0,4,2)— pierden igual. Con `#content` y la
   clase del <body> queda en (1,4,2). Medido: 299px antes, 598px después, el
   mismo ancho que el resumen. */
.p-product.woocommerce #content div.product div.images,
.p-product.woocommerce div.product div.images,
.p-product .woocommerce-product-gallery {
  float: none;
  width: auto;
  margin: 0;
}

/* El margen inferior del resumen decide dónde para la columna pegajosa.
   WooCommerce le pone `margin-bottom: 2em` y su lista de selectores incluye una
   variante con `#content`, así que hace falta un ID para ganarle —la misma
   trampa que con el ancho de la galería, §14.20—. Medido: con los 30px, la
   fila 1 medía 615px y las fotos se soltaban 30px POR DEBAJO del final de la
   caja de compra; sin ellos, fila y caja miden lo mismo (585px) y la columna
   para exactamente donde arranca «¿Necesitas grandes cantidades?». */
.p-product.woocommerce #content div.product div.summary,
.p-product.woocommerce div.product div.summary,
.p-product .summary {
  float: none;
  width: auto;
  margin: 0;
}

/* Los bloques de debajo quedan fuera de `.p-pdp-top`, sueltos dentro de
   `div.product`, así que ocupan el ancho completo sin necesidad de colocarlos. */

/* ——— 23.2b · Galería ———
   Una foto por vista y dos flechas encima. El carril se desplaza en múltiplos
   del 100 %, así que no hace falta saber el ancho en píxeles. */
/* Sin borde ni fondo: la foto de producto ya viene recortada sobre blanco y
   la caja solo añadía un marco que el diseño no pide. */
.p-gallery__viewport {
  position: relative;
  border-radius: var(--p-radius-lg);
  overflow: hidden;
}

.p-gallery__track {
  display: flex;
  transition: transform .3s ease;
}

/* `flex: 0 0 100%` y no `width`: sin el `0 0`, las fotos estrechas encogen y
   dos slides comparten vista.

   Sin fondo: con `object-fit: contain`, una foto más alta que ancha deja franjas
   a los lados, y pintadas de crema parecían parte del producto. */
.p-gallery__slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.p-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-pill);
  background: var(--p-bg);
  color: var(--p-text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s, color .2s, border-color .2s;
}
.p-gallery__arrow:hover {
  background: var(--p-orange);
  border-color: var(--p-orange);
  color: var(--p-text-inv);
}

.p-gallery__arrow--prev { left: 12px; }
.p-gallery__arrow--next { right: 12px; }

.p-gallery__count {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--p-font-mono);
  font-size: 10px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  padding: 4px 8px;
}

.p-gallery--empty img { width: 100%; height: auto; display: block; border-radius: var(--p-radius-lg); }

/* ——— 23.3 · Cabecera del resumen ——— */
.p-product .summary .product_title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: 0 0 var(--p-space-3);
  text-wrap: pretty;
}

.p-pdp-meta {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--p-space-4);
}

.p-pdp-sku {
  font-family: var(--p-font-mono);
  font-size: 11px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
}

.p-pdp-meta__sep { color: var(--p-border); }
.p-pdp-fam { font-size: 12.5px; font-weight: 500; }

.p-pdp-strip {
  font-family: var(--p-font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--p-text);
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  padding: 10px 13px;
  margin-bottom: var(--p-space-3);
}

.p-product .woocommerce-product-details__short-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0 0 var(--p-space-5);
}

/* ——— 23.4 · Caja de compra ——— */
.p-buybox {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
}

.p-buybox__row {
  padding: 18px 20px;
  border-bottom: 1px solid var(--p-border);
}

.p-product .summary .p-buybox__price .price {
  display: flex;
  align-items: baseline;
  gap: var(--p-space-3);
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -.02em;
  color: var(--p-text);
}

/* La coletilla de unidad la imprime inc/woo-loop.php y aquí conviven las dos
   escalas: el importe en serif grande y la unidad en mono pequeña. */
.p-product .summary .p-buybox__price .p-price-unit {
  font-family: var(--p-font-mono);
  font-size: 11px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
}

.p-product .summary .p-buybox__price del { font-size: 18px; opacity: .6; }
.p-product .summary .p-buybox__price ins { text-decoration: none; }

/* ——— 23.5 · Cantidad y compra ——— */
.p-product .summary form.cart {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
  flex-wrap: wrap;
  margin: 0;
}

/* El campo de cantidad de WooCommerce y nuestros botones − / + comparten
   envoltorio: `div.quantity` pasa a ser la caja del selector. */
.p-product .summary form.cart .quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-btn);
  height: 52px;
  overflow: hidden;
  flex: none;
  margin: 0;
  float: none;
}

.p-product .summary form.cart .quantity .p-qty__btn {
  width: 46px;
  height: 100%;
  border: 0;
  background: var(--p-surface);
  color: var(--p-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.p-product .summary form.cart .quantity .p-qty__btn:hover { background: var(--p-surface-2); }

.p-product .summary form.cart .quantity input.qty {
  width: 66px;
  height: 100%;
  border: 0;
  border-left: 1px solid var(--p-border);
  border-right: 1px solid var(--p-border);
  border-radius: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--p-text);
  background: var(--p-bg);
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}
.p-product .summary form.cart .quantity input.qty::-webkit-outer-spin-button,
.p-product .summary form.cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.p-product .summary form.cart .single_add_to_cart_button {
  flex: 1 1 180px;
  min-width: 170px;
  height: 52px;
  border: 0;
  background: var(--p-orange);
  color: var(--p-text-inv);
  font-size: 15.5px;
  font-weight: 600;
  border-radius: var(--p-radius-cta);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(235, 101, 78, .26);
  padding: 0 var(--p-space-5);
}
.p-product .summary form.cart .single_add_to_cart_button:hover { background: var(--p-orange-dark); }

.p-buybox__label {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: var(--p-space-3);
}

.p-buybox__moq {
  font-family: var(--p-font-mono);
  font-size: 10px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-top: 11px;
}

/* ——— 23.7 · Garantías ——— */
.p-buybox__trust {
  padding: 16px 20px;
  display: grid;
  gap: 9px;
  background: var(--p-surface);
}

.p-buybox__point {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--p-text);
}

.p-buybox__tick { color: #177a4c; font-weight: 700; }

/* ——— 23.8 · Tarjetas bajo la galería ——— */
/* Tres columnas fijas: caja, palé y muestra. Con `auto-fit`, un producto sin
   los dos campos rellenos dejaba el botón de muestra ocupando todo el ancho. */
.p-pdp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--p-space-3);
  margin-top: var(--p-space-5);
}

.p-pdp-card {
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-cta);
  padding: 14px 16px;
}

.p-pdp-card__label {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 5px;
}

.p-pdp-card__value { display: block; font-size: 14px; font-weight: 600; }

.p-pdp-sample {
  background: var(--p-bg);
  border: 1px solid var(--p-navy);
  border-radius: var(--p-radius-cta);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--p-text);
  font-size: 14px;
  font-weight: 600;
  transition: background .2s, border-color .2s, color .2s;
}
.p-pdp-sample:hover {
  background: var(--p-orange);
  border-color: var(--p-orange);
  color: var(--p-text-inv);
}

/* ——— 23.9 · Bloques de debajo ——— */
.p-pdp-block { padding-top: var(--p-space-12); }

.p-pdp-h2 {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--p-text);
  margin: 0 0 var(--p-space-4);
}

/* ——— 23.x · Descripción del producto ———
   El texto que escribe el cliente en el editor. Se le da tipografía de lectura
   y poco más: aquí no se maqueta, se lee.

   A ancho completo, por decisión: llevaba un tope de 74 caracteres por línea
   —lo cómodo de leer— y se quita a petición. Si en algún momento el texto se
   hace difícil de seguir en pantallas anchas, es volver a poner ese `max-width`. */
.p-pdp-desc__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--p-text-2);
}

.p-pdp-desc__body > *:first-child { margin-top: 0; }
.p-pdp-desc__body > *:last-child { margin-bottom: 0; }

.p-pdp-desc__body p { margin: 0 0 var(--p-space-4); }

.p-pdp-desc__body h2,
.p-pdp-desc__body h3,
.p-pdp-desc__body h4 {
  font-family: var(--p-font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--p-text);
  margin: var(--p-space-6) 0 var(--p-space-3);
}

.p-pdp-desc__body h2 { font-size: 21px; }
.p-pdp-desc__body h3 { font-size: 18px; }
.p-pdp-desc__body h4 { font-size: 16px; }

.p-pdp-desc__body ul,
.p-pdp-desc__body ol { margin: 0 0 var(--p-space-4); padding-left: 1.3em; }
.p-pdp-desc__body li { margin-bottom: 6px; }

.p-pdp-desc__body strong { color: var(--p-text); }
.p-pdp-desc__body a { color: var(--p-orange); text-decoration: underline; }

.p-pdp-desc__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--p-radius-md);
}

.p-pdp-desc__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--p-space-4);
  font-size: 14px;
}

.p-pdp-desc__body th,
.p-pdp-desc__body td {
  border: 1px solid var(--p-border);
  padding: 9px 12px;
  text-align: left;
}

.p-pdp-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--p-space-8);
  align-items: start;
}
.p-pdp-two.is-single { grid-template-columns: minmax(0, 1fr); }

/* Franja de presupuesto */
.p-pdp-quote { padding-top: var(--p-space-8); }

.p-pdp-quote__box {
  background: var(--p-navy);
  border-radius: var(--p-radius-lg);
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-8);
  flex-wrap: wrap;
}

.p-pdp-quote__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -.02em;
  color: var(--p-text-inv);
  margin: 0;
}

.p-pdp-quote__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--p-text-inv-2);
  margin: var(--p-space-2) 0 0;
  max-width: 560px;
}

/* ——— 23.10 · Tabla de especificaciones ——— */
.p-spectable {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
}

.p-spectable__row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  font-size: 13.5px;
}
.p-spectable__row + .p-spectable__row { border-top: 1px solid var(--p-border); }

.p-spectable__k { padding: 11px 16px; color: var(--p-text-2); }
.p-spectable__v {
  padding: 11px 16px;
  font-family: var(--p-font-mono);
  font-size: 12.5px;
  font-weight: 500;
}

.p-pdp-docs {
  display: flex;
  gap: var(--p-space-3);
  flex-wrap: wrap;
  margin-top: var(--p-space-4);
}

.p-pdp-doc {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-btn);
  padding: 11px 14px;
  color: var(--p-text);
  font-size: 13px;
  font-weight: 600;
  transition: border-color .2s;
}
.p-pdp-doc:hover { border-color: var(--p-navy); }

.p-pdp-doc__tag {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  color: var(--p-orange);
}

/* ——— 23.11 · Valoraciones ——— */
.p-rating {
  display: flex;
  align-items: center;
  gap: var(--p-space-6);
  padding: 20px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  flex-wrap: wrap;
  margin-bottom: var(--p-space-4);
}

.p-rating__score { flex: none; }

.p-rating__avg {
  display: block;
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -.02em;
  line-height: 1;
}

.p-rating__stars { display: block; color: var(--p-orange); font-size: 14px; letter-spacing: .12em; margin-top: 4px; }

.p-rating__count {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-top: 6px;
}

.p-rating__bars { flex: 1; min-width: 200px; display: grid; gap: 6px; }

.p-rating__bar { display: flex; align-items: center; gap: var(--p-space-3); }

.p-rating__n {
  font-family: var(--p-font-mono);
  font-size: 10.5px;
  color: var(--p-text-2);
  width: 14px;
}
.p-rating__n--right { width: 20px; text-align: right; }

.p-rating__track {
  flex: 1;
  height: 6px;
  border-radius: var(--p-radius-pill);
  background: var(--p-border);
  overflow: hidden;
  display: block;
}

.p-rating__fill { display: block; height: 100%; background: var(--p-navy); }

/* Las reseñas se pintan con marcado propio (precifilm_pdp_reviews_list). */
.p-reviews {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
  margin-bottom: var(--p-space-4);
}

.p-review { padding: 18px 20px; }
.p-review + .p-review { border-top: 1px solid var(--p-border); }

.p-review__head {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--p-space-2);
}

.p-review__stars { color: var(--p-orange); font-size: 12.5px; letter-spacing: .1em; }
.p-review__author { font-size: 13.5px; font-weight: 600; color: var(--p-text); }

.p-review__verified {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: #177a4c;
}

/* `margin-left: auto` empuja la fecha al extremo: es el dato menos relevante
   de la fila y así no compite con el nombre. */
.p-review__date {
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  color: var(--p-text-2);
  margin-left: auto;
}

.p-review__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0;
}

/* De WooCommerce se conserva SOLO el formulario: lleva el campo de puntuación,
   los nonces y la validación, y reimplementarlo no aporta nada. Su lista se
   oculta porque ya la pinta .p-reviews. */
.p-product #reviews .commentlist,
.p-product #reviews .woocommerce-Reviews-title,
.p-product #reviews .woocommerce-noreviews { display: none; }

.p-product #reviews {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 20px;
}

.p-product #reviews #reply-title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--p-text);
  display: block;
  margin: 0 0 var(--p-space-3);
}

.p-product #reviews .comment-form input[type="text"],
.p-product #reviews .comment-form input[type="email"],
.p-product #reviews .comment-form textarea {
  width: 100%;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  background: var(--p-bg);
  padding: 10px 13px;
  font-size: 14px;
  color: var(--p-text);
}

.p-product #reviews .comment-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

.p-product #reviews .comment-form .stars a { color: var(--p-orange); }

.p-product #reviews .comment-form .form-submit input[type="submit"] {
  background: var(--p-orange);
  color: var(--p-text-inv);
  border: 0;
  border-radius: var(--p-radius-btn);
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.p-product #reviews .comment-form .form-submit input[type="submit"]:hover { background: var(--p-orange-dark); }

/* ——— 23.13 · Venta cruzada ———
   Reutiliza la tarjeta de .p-prodgrid, así que solo hace falta encender esa
   rejilla dentro de la ficha. */
/* WooCommerce le pone a `ul.products` un clearfix con ::before y ::after
   (`content: " "; display: table`). En una rejilla esos dos pseudoelementos SON
   elementos de rejilla: ocupaban la primera y la última celda, así que la
   primera columna salía vacía y el cuarto producto caía a una segunda fila.

   Ya había una regla para esto (PARTE 2 · 07), pero pedía `.p-scope .woocommerce`
   con combinador de descendencia, y en la ficha de producto las dos clases
   están en el MISMO <body>, así que no casaba. Esta no depende de dónde estén.
   Medido: 4 productos en 2 filas antes, en 1 fila después. */
.p-scope ul.products::before,
.p-scope ul.products::after { display: none; }

/* Cuatro columnas en escritorio. La tarjeta la aporta `p-prodgrid`, que la
   ficha añade al <body>.

   SIN `!important` en las columnas: lo llevaba «por si acaso» contra GP
   Premium, y el efecto fue que las reglas responsive de más abajo no podían
   ganarle. Resultado: cuatro columnas de 62px en un móvil de 390. Comprobado
   que ninguna regla ajena fija aquí `grid-template-columns`, así que la
   cascada normal basta. El `!important` del relleno sí hace falta. */
.p-product .p-pdp-cross ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--p-space-5);
  margin: 0;
  padding: 0 !important;
  list-style: none;
  max-width: none;
}

/* Aire antes del pie. La versión anterior de esta regla salió como
   `.p-product .p-product`, un `.p-product` dentro de otro, que no existe: la
   clase está en el <body> y solo hay uno. Por eso no separaba nada. */
.p-product .p-pdp-cross { padding-bottom: var(--p-space-13); }

.p-product .p-pdp-cross ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* ——— 23.14 · Responsive ——— */
@media (max-width: 900px) {
  .p-pdp-top {
    grid-template-columns: 1fr;
    row-gap: var(--p-space-6);
  }

  /* En una sola columna no hay nada al lado que recorrer: pegada, la galería
     taparía la caja de compra. */
  .p-product .p-pdp-left { position: static; }

  .p-gallery__arrow { width: 38px; height: 38px; font-size: 20px; }
  .p-gallery__arrow--prev { left: 8px; }
  .p-gallery__arrow--next { right: 8px; }

  .p-product .summary .product_title { font-size: 26px; }
  .p-product .summary .p-buybox__price .price { font-size: 32px; }
  .p-pdp-h2 { font-size: 22px; }
  .p-product .p-pdp-cross ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .p-product .p-pdp-cross ul.products { grid-template-columns: 1fr; }
  .p-pdp-quote__box { padding: 22px 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 24 — VENTANA MODAL Y AVISOS

   La usan la solicitud de muestra de la ficha de producto y la solicitud de
   tarifa de distribuidor de la portada. El formulario se imprime siempre en el
   pie y el disparador es un enlace a su identificador —#muestra,
   #tarifa-distribuidor—: sin JavaScript lo abre `:target` y se rellena sin
   más; con JavaScript, se abre encima y no se pierde el sitio.
   ═══════════════════════════════════════════════════════════════════════════ */

.p-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--p-space-5);
}

/* `hidden` lo gobierna el JavaScript. Con display:flex en la regla de arriba
   haría falta ganarle, porque el `display` del atributo hidden es de la hoja
   del navegador y pierde contra cualquier regla de autor. */
.p-modal[hidden] { display: none; }

/* Sin JavaScript, el botón es un enlace al identificador del modal y esta es
   la regla que lo abre. El comentario de la cabecera de esta parte prometía
   que el formulario se podía usar sin el guion y no era cierto: el atributo
   `hidden` lo escondía igualmente, así que el enlace no llevaba a ninguna
   parte.

   Va colgada de `html:not(.p-js)` —la clase que pone precifilm.js nada más
   ejecutarse— y NO sirve un `:target` a secas. Comprobado en el navegador: al
   cerrar la ventana, el guion limpia el ancla de la URL con `replaceState`,
   pero eso NO vuelve a evaluar `:target`, así que la ventana seguía pintada
   (`display: flex`) con el atributo `hidden` puesto. Con JavaScript manda el
   guion y esta regla no existe. */
html:not(.p-js) .p-modal[hidden]:target { display: flex; }

.p-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 26, 51, .55);
}

.p-modal__box {
  position: relative;
  width: min(720px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--p-bg);
  border-radius: var(--p-radius-lg);
  padding: 26px 30px 30px;
  box-shadow: 0 24px 60px rgba(17, 26, 51, .28);
}

.p-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p-space-4);
}

.p-modal__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--p-text);
  margin: 0;
}

.p-modal__close {
  border: 0;
  background: transparent;
  color: var(--p-text-2);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex: none;
}
.p-modal__close:hover { color: var(--p-orange); }

.p-modal__lead {
  font-size: 14px;
  line-height: 1.55;
  color: var(--p-text-2);
  margin: var(--p-space-2) 0 var(--p-space-5);
}

/* La trampa para robots. Fuera de pantalla y no `display:none`: algunos robots
   descartan lo que está oculto con display, y entonces la trampa no atrapa. */
.p-modal__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.p-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--p-space-4);
}

.p-modal__field { margin: 0; }
.p-modal__field.is-wide { grid-column: 1 / -1; }

.p-modal__field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text);
  margin-bottom: 5px;
}

.p-modal__req { color: var(--p-orange); }

.p-modal__field input,
.p-modal__field select,
.p-modal__field textarea {
  width: 100%;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  background: var(--p-bg);
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
  color: var(--p-text);
}

.p-modal__field input:focus,
.p-modal__field select:focus,
.p-modal__field textarea:focus {
  outline: 2px solid var(--p-orange);
  outline-offset: 1px;
  border-color: var(--p-orange);
}

/* El navegador marca en rojo solo los campos ya tocados y con valor inválido,
   no los vacíos nada más cargar. */
.p-modal__field input:user-invalid,
.p-modal__field select:user-invalid,
.p-modal__field textarea:user-invalid { border-color: #c0392b; }

/* El desplegable nativo no coge el mismo alto que los `input` aunque comparta
   relleno, borde y tipografía: Chrome le impone un alto mínimo propio y ni
   `line-height` lo mueve (medido: 43px frente a 41). Se le escribe el de los
   campos de texto —10+10 de relleno, 19 de línea y 2 de borde— para que
   «Consumo mensual» y «Provincia», que comparten fila, midan lo mismo. Si
   algún día cambia el relleno de los campos, esta cifra va detrás. */
.p-modal__field select { height: 41px; }

/* ——— 24.0b · Apuntes del campo (solicitud de tarifa) ——— */
.p-modal__opt {
  font-weight: 400;
  color: var(--p-text-2);
}

.p-modal__hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--p-text-2);
}

.p-modal__foot {
  display: flex;
  align-items: center;
  gap: var(--p-space-4);
  flex-wrap: wrap;
  margin-top: var(--p-space-5);
}

.p-modal__submit { flex: none; }

.p-modal__note {
  font-size: 12.5px;
  color: var(--p-text-2);
}

/* La página de detrás no debe rodar mientras el modal está abierto. */
.p-modal-open { overflow: hidden; }

/* El aviso de vuelta del envío va DENTRO de la ventana, así que no necesita el
   tope de ancho ni el centrado que lleva suelto en una página. */
.p-modal .p-notice {
  max-width: none;
  margin: var(--p-space-2) 0 var(--p-space-4);
}

/* ——— 24.1 · Avisos ——— */
.p-notice {
  max-width: var(--p-container);
  margin: var(--p-space-5) auto 0;
  padding: 14px 18px;
  border-radius: var(--p-radius-md);
  font-size: 14px;
  line-height: 1.5;
}

.p-notice--ok {
  background: rgba(23, 122, 76, .10);
  border: 1px solid rgba(23, 122, 76, .35);
  color: #125c39;
}

.p-notice--error {
  background: rgba(192, 57, 43, .08);
  border: 1px solid rgba(192, 57, 43, .35);
  color: #a02d21;
}

@media (max-width: 700px) {
  .p-modal__grid { grid-template-columns: 1fr; }
  .p-modal__box { padding: 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 25 — CARRITO

   La página tiene que llevar `[woocommerce_cart]`, no el bloque: ver la
   cabecera de inc/woo-cart.php.

   El marcado sigue siendo la TABLA de WooCommerce; aquí se convierte en una
   lista de tarjetas. Se conserva la tabla a propósito: los plugins que
   enganchan en el carrito siguen funcionando y no hay que copiar cart.php,
   que habría que revisar en cada actualización de WooCommerce.
   ═══════════════════════════════════════════════════════════════════════════ */

.p-cart .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.p-cart .inside-article {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.p-cart .entry-content { max-width: none; margin: 0; }

/* ——— 25.1 · Cabecera ——— */
/* Sin `max-width` ni `margin: 0 auto`: la cabecera es hija de `.woocommerce`,
   que YA aporta el contenedor y el gutter. Y sobre todo, `margin: auto` en un
   elemento de rejilla lo encoge a su contenido y lo centra —medido: 646px de
   ancho centrados en una pista de 1240— en lugar de ocupar la fila. */
.p-cart-head { padding: var(--p-space-5) 0 0; }

.p-cart-head__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--p-text);
  margin: var(--p-space-4) 0 var(--p-space-2);
}

.p-cart-head__lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0;
  max-width: 70ch;
}

/* ——— 25.2 · Dos columnas ———
   WooCommerce imprime el formulario y `.cart-collaterals` como hermanos dentro
   de `.woocommerce`. Basta con hacer rejilla ese contenedor. */
/* El relleno inferior pasa a margen: el recorrido de un elemento pegajoso
   termina en la caja de RELLENO de su contenedor, así que con `padding-bottom`
   el resumen seguía bajando 64px más allá del final de la columna izquierda. */
.p-cart .woocommerce {
  max-width: var(--p-container);
  margin: 0 auto var(--p-space-13);
  padding: var(--p-space-6) var(--p-gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
  /* Hueco de fila más corto que el de columna: entre la cabecera, la barra de
     envío gratis y el listado, 32px dejaba la página desarmada. Medido: la
     barra estaba a 64px de la entradilla; ahora a 20. */
  gap: var(--p-space-5) var(--p-space-8);
  align-items: start;
}

/* El envoltorio de avisos de WooCommerce se imprime siempre, vacío o no, y
   vacío seguía ocupando una fila de la rejilla con sus dos huecos: 32px de
   nada entre la cabecera y la barra. */
.p-cart .woocommerce-notices-wrapper:empty { display: none; }

/* El carrito vacío no tiene segunda columna. */
.p-cart .woocommerce:has(.p-cart-empty) { grid-template-columns: minmax(0, 1fr); }

/* Dentro de `.woocommerce` no solo están las dos columnas: también la cabecera
   propia, los avisos de WooCommerce y la barra de envío gratis del plugin de
   Precifilm (.pfsb-carrito-bar). Todos son hijos directos, así que en la
   rejilla se colocaban como columnas y descuadraban la página.

   Por eso se declara primero que TODO cruza las dos columnas y solo después se
   colocan el formulario y el resumen. Así cualquier hijo que aparezca en el
   futuro —otro aviso, otra barra— se comporta bien sin tocar esto. */
.p-cart .woocommerce > * { grid-column: 1 / -1; }
.p-cart .woocommerce > .p-cart-main { grid-column: 1; }
.p-cart .woocommerce > .cart-collaterals { grid-column: 2; }

/* La columna izquierda: listado, acciones y venta cruzada, una debajo de otra. */
.p-cart-main {
  min-width: 0;
  display: grid;
  gap: var(--p-space-5);
  align-content: start;
}

/* El resumen se queda a la vista mientras se recorre el listado y se suelta al
   final de la columna izquierda. El tope lo pone la rejilla, que solo tiene
   estos dos hijos en su última fila. */
.p-cart .cart-collaterals {
  position: sticky;
  top: 20px;
}

.p-cart .woocommerce-cart-form { min-width: 0; margin: 0; }

/* La barra de envío gratis del plugin: solo se le da aire por abajo. El estilo
   es suyo. */
.p-cart .pfsb-carrito-bar { margin-top: 0; margin-bottom: var(--p-space-4); }

/* Los avisos de guardar lista viven dentro de `.woocommerce`, así que les pasa
   lo mismo que a la cabecera: `margin: 0 auto` en un elemento de rejilla lo
   encoge a su contenido. Aquí el ancho ya lo pone el contenedor. */
.p-cart .p-notice {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ——— 25.3 · La tabla, convertida en tarjetas ——— */
.p-cart table.shop_table.cart {
  display: block;
  border: 0;
  border-radius: 0;
  margin: 0;
  width: 100%;
  border-collapse: separate;
}

.p-cart table.shop_table.cart thead { display: none; }

.p-cart table.shop_table.cart tbody {
  display: grid;
  gap: var(--p-space-4);
}

/* Rejilla EXPLÍCITA de la tarjeta. Con auto-colocación, cada celda de la
   tabla caía donde le tocaba por orden y no donde la quiere el diseño: la
   equis de borrar acabó flotando sobre la esquina y el precio unitario no
   podía ponerse encima del subtotal. Aquí cada `td` tiene su sitio. */
.p-cart tr.cart_item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) minmax(150px, .8fr) minmax(170px, .9fr);
  grid-template-rows: auto auto;
  gap: var(--p-space-3) var(--p-space-5);
  align-items: start;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  background: var(--p-bg);
  padding: 18px;
}

.p-cart tr.cart_item > td {
  border: 0;
  padding: 0;
  background: none;
}

.p-cart td.product-thumbnail { grid-column: 1; grid-row: 1; width: 84px; }

/* La celda de borrar se queda vacía: el enlace se imprime junto al nombre. */
.p-cart td.product-remove { display: none; }

/* Pegado al nombre, no en una fila propia.
   El selector repite `td.product-name` porque el enlace vive DENTRO de esa
   celda, y la regla del nombre —`.p-cart td.product-name a`, (0,2,1)— le ponía
   el azul y la negrita del título. */
.p-cart td.product-name a.p-cart-remove {
  display: inline-block;
  margin-top: var(--p-space-2);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--p-text-2);
  text-decoration: underline;
}
.p-cart td.product-name a.p-cart-remove:hover { color: var(--p-orange); }

.p-cart td.product-name { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.p-cart td.product-quantity { grid-column: 3; grid-row: 1 / span 2; min-width: 0; }

/* Precio unitario arriba, subtotal debajo: dos celdas distintas de la tabla en
   la misma columna de la tarjeta. */
.p-cart td.product-price { grid-column: 4; grid-row: 1; min-width: 0; }
.p-cart td.product-subtotal { grid-column: 4; grid-row: 2; min-width: 0; }

.p-cart td.product-thumbnail img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: var(--p-radius-btn);
  background: var(--p-surface);
  display: block;
}

.p-cart td.product-name a {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--p-text);
  margin-bottom: var(--p-space-2);
}
.p-cart td.product-name a:hover { color: var(--p-orange); }

.p-cart-sku {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 10px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 5px;
  order: -1;
}

/* El SKU va ANTES del nombre, pero WooCommerce imprime el nombre primero y el
   hook que lo añade va después. Con la celda en columna y `order` se recoloca
   sin tocar el marcado. */
.p-cart td.product-name { display: flex; flex-direction: column; align-items: flex-start; }

/* ——— 25.4 · Cantidad ——— */
.p-cart td.product-quantity { min-width: 0; }

.p-cart-qtylabel,
.p-cart-comp__label {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 9px;
}

.p-cart td.product-quantity .quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-btn);
  height: 46px;
  overflow: hidden;
  width: max-content;
  float: none;
}

.p-cart td.product-quantity .p-qty__btn {
  width: 40px;
  height: 100%;
  border: 0;
  background: var(--p-surface);
  color: var(--p-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.p-cart td.product-quantity .p-qty__btn:hover { background: var(--p-surface-2); }

.p-cart td.product-quantity input.qty {
  width: 60px;
  height: 100%;
  border: 0;
  border-left: 1px solid var(--p-border);
  border-right: 1px solid var(--p-border);
  border-radius: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--p-text);
  background: var(--p-bg);
  outline: none;
  -moz-appearance: textfield;
}
.p-cart td.product-quantity input.qty::-webkit-outer-spin-button,
.p-cart td.product-quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.p-cart-logistics {
  display: block;
  font-size: 12.5px;
  color: var(--p-text-2);
  margin-top: 9px;
}

/* ——— 25.5 · Subtotal y tramo ——— */
.p-cart-collabel {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 9px;
}

/* Precio unitario: tamaño de texto normal, para que no compita con el
   subtotal, que es la cifra que el cliente busca. */
.p-cart-unitprice {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--p-text);
}

.p-cart-unit {
  font-family: var(--p-font-mono);
  font-size: 10px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  font-weight: 400;
  margin-left: 4px;
}

/* El filete separa precio unitario de subtotal, como en el diseño. Va en la
   celda del subtotal porque son dos `td` distintos y el borde tiene que
   quedar entre los dos. */
.p-cart td.product-subtotal {
  min-width: 0;
  padding-top: var(--p-space-3) !important;
  border-top: 1px solid var(--p-border) !important;
}

.p-cart-amount {
  display: block;
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -.02em;
  color: var(--p-text);
}

.p-cart-calc {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--p-text-2);
  margin-top: 4px;
}

.p-cart-tier {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--p-text-2);
  font-weight: 400;
  margin-top: 5px;
}
.p-cart-tier.is-volume { color: #177a4c; }

/* El aviso del siguiente tramo. En el diseño es una franja a lo ancho de la
   tarjeta; aquí vive en la celda del subtotal porque la tabla de WooCommerce
   no ofrece ninguna fila propia por línea donde colgarla. */
.p-cart-next {
  display: block;
  font-family: var(--p-font-ui);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--p-text);
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 8px 10px;
  margin-top: var(--p-space-3);
}

/* ——— 25.6 · Fila de acciones de WooCommerce ——— */
.p-cart tr:has(td.actions) { display: block; }

.p-cart td.actions {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
  flex-wrap: wrap;
  border: 0;
  padding: 0;
  background: none;
}

.p-cart td.actions .coupon {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  float: none;
}

.p-cart td.actions input#coupon_code {
  height: 42px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  padding: 0 12px;
  font-size: 13.5px;
  width: 160px;
}

.p-cart td.actions button {
  height: 42px;
  border: 1px solid var(--p-navy);
  background: var(--p-bg);
  color: var(--p-text);
  border-radius: var(--p-radius-md);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.p-cart td.actions button:hover { background: var(--p-navy); color: var(--p-text-inv); }
.p-cart td.actions button[disabled] { opacity: .45; cursor: default; }

/* ——— 25.7 · Pie del listado ——— */
/* Sin margen propio: al salir del formulario, la separación la pone el hueco
   de fila de la rejilla. */
.p-cart-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-4);
  flex-wrap: wrap;
}

.p-cart-back { font-size: 13.5px; font-weight: 600; color: var(--p-text); }
.p-cart-back:hover { color: var(--p-orange); }

.p-cart-savebox { margin: 0; }

/* Vale para el <button> del formulario y para el <a> que se pinta cuando no hay
   sesión: los dos tienen que verse igual. */
.p-cart-save {
  display: inline-block;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-btn);
  background: var(--p-bg);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text);
  cursor: pointer;
  transition: border-color .2s;
}
.p-cart-save:hover { border-color: var(--p-navy); }

/* ——— 25.7b · «Te falta para completar el embalaje» ———
   Tarjeta de producto del catálogo (la aporta `p-prodgrid` en el <body>) dentro
   de una caja con titular propio. */
.p-cart-cross {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 20px;
}

.p-cart-cross__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--p-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--p-space-4);
}

.p-cart-cross__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--p-text);
  margin: 0;
}

.p-cart-cross__note { font-size: 12.5px; color: var(--p-text-2); }

.p-cart .p-cart-cross ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--p-space-4);
  margin: 0;
  padding: 0 !important;
  list-style: none;
  max-width: none;
}

.p-cart .p-cart-cross ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* En una tarjeta de 239px el selector de cantidad (136) y el botón (85) no
   caben en la misma línea: medido, el formulario necesitaba 229px en 205 y
   recortaba «Añadir» por la derecha. Se deja envolver, y el botón pasa a su
   propia línea a todo el ancho. Se prefiere esto a encoger el selector porque
   no depende de que las cifras sigan cuadrando en el futuro. */
.p-cart .p-cart-cross form.p-loop-buy { flex-wrap: wrap; }

.p-cart .p-cart-cross form.p-loop-buy .p-loop-add {
  flex: 1 1 100%;
  min-width: 0;
}

/* ——— 25.8 · Resumen ——— */
/* WooCommerce reparte `.cart-collaterals` en dos columnas del 48 % con
   `float`, pensando en resumen + venta cruzada. Aquí la venta cruzada se ha
   movido al otro lado, así que el resumen debe ocupar la columna entera.
   Hay que repetir `.cart-collaterals` para ganarle en especificidad: su regla
   es (0,3,0) y `.p-cart .cart_totals` solo (0,2,0). Medido: 200px antes,
   417px después. */
.p-cart .cart-collaterals { min-width: 0; width: auto; }

.p-cart .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
}

.p-cart .cart_totals {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
  width: auto;
  float: none;
}

.p-cart .cart_totals > h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--p-text);
  margin: 0;
  padding: 16px 20px;
  background: var(--p-surface);
  border-bottom: 1px solid var(--p-border);
}

.p-cart .cart_totals table.shop_table {
  border: 0;
  border-radius: 0;
  margin: 0;
  width: 100%;
}

/* `background: transparent` a propósito: WooCommerce tiñe los `th` de sus
   tablas con `rgba(0,0,0,.03)` y los `td` con un `.004`, y eso hacía que la
   fila del subtotal saliera de un gris distinto al resto de la caja. El único
   fondo que debe verse es el del total. */
.p-cart .cart_totals table.shop_table th,
.p-cart .cart_totals table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--p-border);
  padding: 14px 20px;
  font-size: 13.5px;
  vertical-align: top;
  background: transparent;
}

.p-cart .cart_totals table.shop_table th {
  font-weight: 400;
  color: var(--p-text-2);
  width: 45%;
}

.p-cart .cart_totals table.shop_table td { text-align: right; font-weight: 600; }

.p-cart .cart_totals table.shop_table tr.order-total th,
.p-cart .cart_totals table.shop_table tr.order-total td { background: var(--p-surface); }

.p-cart .cart_totals tr.order-total th { font-size: 15px; font-weight: 600; color: var(--p-text); }

.p-cart-taxnote {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  font-weight: 400;
  margin-top: 4px;
}

.p-cart .cart_totals tr.order-total .woocommerce-Price-amount {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -.02em;
}

/* ——— 25.8b · Transporte ———
   La fila la imprime WooCommerce y la tarifa la calcula el plugin Precifilm
   Shipping Rules. Aquí solo se le da la forma del diseño. */
.p-cart .cart_totals .woocommerce-shipping-totals td { text-align: left; }

.p-cart .cart_totals ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.p-cart .cart_totals ul#shipping_method li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--p-space-3);
  margin: 0;
  padding: 0;
  font-size: 13.5px;
}

.p-cart .cart_totals ul#shipping_method label { font-weight: 600; color: var(--p-text); }

/* El plugin inyecta su CSS en wp_head con prioridad 999, o sea después de
   precifilm.css, y sus reglas son de una sola clase. Para ajustarlas hace falta
   al menos dos, de ahí el `.p-cart` delante. */
.p-cart .psr-envio-detalle {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-top: 4px;
  padding-left: 0;
}

.p-cart .psr-envio-gratis-badge {
  background: rgba(23, 122, 76, .10);
  color: #177a4c;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  border-radius: var(--p-radius-sm);
  padding: 3px 7px;
}

/* Calculadora de transporte */
.p-cart .shipping-calculator-button {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--p-orange);
}

.p-cart .shipping-calculator-form { margin-top: var(--p-space-3); }

.p-cart .shipping-calculator-form .form-row { margin: 0 0 9px; }

.p-cart .shipping-calculator-form input,
.p-cart .shipping-calculator-form select {
  width: 100%;
  height: 42px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  padding: 0 12px;
  font-size: 14px;
  background: var(--p-bg);
  color: var(--p-text);
}

.p-cart .shipping-calculator-form button {
  height: 42px;
  border: 1px solid var(--p-navy);
  background: var(--p-bg);
  color: var(--p-text);
  border-radius: var(--p-radius-md);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* Botón de finalizar */
.p-cart .wc-proceed-to-checkout { padding: 18px 20px 0; }

/* `!important` justificado y comprobado: la regla que pinta este botón es la
   de GP Premium, cuya lista de selectores incluye `#respond input#submit.alt`
   —dos IDs—, y ninguna cantidad de clases le gana. El color se corrige además
   en su origen, en la opción del tema (ver inc/woo-cart.php). */
.p-cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  height: 52px;
  line-height: 52px;
  text-align: center;
  border: 0;
  background: var(--p-orange) !important;
  color: var(--p-text-inv) !important;
  font-size: 15.5px;
  font-weight: 600;
  border-radius: var(--p-radius-cta);
  box-shadow: 0 8px 20px rgba(235, 101, 78, .26);
  padding: 0;
  margin: 0;
}
.p-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--p-orange-dark) !important; }

.p-cart-trust {
  display: grid;
  gap: 7px;
  padding: 16px 20px 20px;
}

.p-cart-trust__point {
  display: flex;
  gap: 9px;
  font-size: 12.5px;
  color: var(--p-text-2);
}

.p-cart-trust__tick { color: #177a4c; font-weight: 700; }

/* Composición y caja B2B: van fuera de la caja del resumen. */
.p-cart-comp {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 16px 20px;
  margin-top: var(--p-space-4);
}

.p-cart-comp__row {
  display: flex;
  justify-content: space-between;
  gap: var(--p-space-3);
  font-size: 13px;
  color: var(--p-text-2);
}
.p-cart-comp__row + .p-cart-comp__row { margin-top: 8px; }
.p-cart-comp__row strong { color: var(--p-text); }

/* ——— 25.9 · Carrito vacío ——— */
.p-cart-empty {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 56px 40px;
  text-align: center;
  background: var(--p-surface);
}

.p-cart-empty__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -.03em;
  color: var(--p-text);
  margin: 0 0 var(--p-space-3);
}

.p-cart-empty__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0 auto var(--p-space-6);
  max-width: 52ch;
}

.p-cart-empty__actions {
  display: flex;
  gap: var(--p-space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.p-cart-empty__alt {
  border: 1px solid var(--p-navy);
  color: var(--p-text);
  font-size: 14.5px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: var(--p-radius-cta);
}
.p-cart-empty__alt.is-soft { border-color: var(--p-border); }
.p-cart-empty__alt:hover { background: var(--p-navy); color: var(--p-text-inv); border-color: var(--p-navy); }

/* ——— 25.10 · Responsive ——— */
@media (max-width: 1024px) {
  .p-cart .woocommerce { grid-template-columns: minmax(0, 1fr); }

  /* Con UNA columna declarada, un `grid-column: 2` crea una segunda columna
     IMPLÍCITA. Eso pasaba aquí: el resumen se llevaba 278px de los 310 y la
     columna izquierda quedaba en 0, con el texto saliendo letra por letra.
     Hay que soltar también las colocaciones, no solo redefinir las pistas. */
  .p-cart .woocommerce > .p-cart-main,
  .p-cart .woocommerce > .cart-collaterals { grid-column: 1 / -1; }

  /* A una columna no hay nada al lado que recorrer. */
  .p-cart .cart-collaterals { position: static; }
  .p-cart .p-cart-cross ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ——— 25.10b · La tabla adaptable de WooCommerce ———
   Por debajo de 768px WooCommerce aplica su propio modo adaptable a
   `shop_table_responsive`: pone las filas y las celdas en bloque, oculta la
   miniatura y añade rótulos con `data-title` delante de cada celda.

   Aquí la tabla YA es una tarjeta, así que todo eso sobra —y lo peor: su regla
   `.woocommerce table.shop_table_responsive tr { display: block }` es (0,3,2) y
   le ganaba a nuestro `display: grid`, así que la tarjeta dejaba de ser rejilla
   y las seis celdas se apilaban a lo ancho de una columna. De ahí que en móvil
   se viera «una letra por línea».

   Se recupera con selectores que incluyen `#content`, porque las suyas para la
   miniatura llevan ID. */
@media (max-width: 782px) {
  .p-cart #content table.shop_table_responsive thead { display: none; }
  .p-cart #content table.shop_table_responsive tbody { display: grid; }
  .p-cart #content table.shop_table_responsive tr.cart_item { display: grid; }

  /* Los rótulos «Producto», «Precio»… que WooCommerce inyecta con data-title. */
  .p-cart table.shop_table_responsive tr td::before { display: none; }
  .p-cart table.shop_table_responsive tr td { text-align: left; }

  .p-cart #content table.cart td.product-thumbnail { display: block; }
  .p-cart #content table.cart td.product-remove { display: none; }

  /* WooCommerce reduce la miniatura del carrito a 32px en móvil. */
  .p-cart #content table.cart td.product-thumbnail img {
    width: 84px !important;
    height: 84px !important;
  }

  .p-cart tr.cart_item {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: var(--p-space-4);
  }

  /* A dos columnas: foto y «Eliminar» a la izquierda, nombre al lado, y
     cantidad, precio y subtotal a lo ancho en filas propias. */
  .p-cart td.product-thumbnail { grid-column: 1; grid-row: 1; }
  .p-cart td.product-name { grid-column: 2; grid-row: 1; }
  .p-cart td.product-quantity { grid-column: 1 / -1; grid-row: 2; }
  .p-cart td.product-price { grid-column: 1 / -1; grid-row: 3; }
  .p-cart td.product-subtotal { grid-column: 1 / -1; grid-row: 4; }

  .p-cart-head__title { font-size: 27px; }
  .p-cart .p-cart-cross ul.products { grid-template-columns: 1fr; }
  .p-cart-empty { padding: 36px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 26 — FINALIZAR COMPRA

   La página tiene que llevar el shortcode, no el bloque: ver la cabecera de
   inc/woo-checkout.php.

   La rejilla va sobre `form.checkout`, cuyos hijos directos son
   `#customer_details`, el titular del resumen y `#order_review`. Solo hay que
   colocarlos: el marcado de WooCommerce no se toca, así que las pasarelas de
   pago siguen encontrando lo suyo donde lo esperan.
   ═══════════════════════════════════════════════════════════════════════════ */

.p-checkout .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.p-checkout .inside-article {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.p-checkout .entry-content { max-width: none; margin: 0; }

/* ——— 26.1 · Sin distracciones ———
   El diseño reduce cabecera y pie a lo mínimo. Se hace ocultando piezas, no
   desenganchándolas: si mañana se decide lo contrario, se borran estas reglas
   y no hay nada que volver a montar. */
.p-checkout .p-utility,
.p-checkout .main-navigation,
.p-checkout .p-search,
.p-checkout .p-footer__cols { display: none; }

.p-checkout .p-footer { padding-top: 0; }

/* La barra de envío gratis no pinta nada aquí: el transporte ya sale calculado
   en el resumen. La ocultaba el JavaScript del plugin Precifilm Checkout, cuyo
   módulo visual se desactiva (ver inc/woo-checkout.php), así que se asume aquí. */
.p-checkout .pfsb-carrito-bar,
.p-checkout [class*="pfsb"] { display: none; }

/* Los campos propios del plugin —NIF/CIF, referencia interna, persona de
   contacto— se imprimen como filas normales de WooCommerce, así que heredan el
   estilo de .form-row sin nada extra. Su descripción sí necesita forma. */
.p-checkout .form-row .description,
.p-checkout .form-row span.description {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--p-text-2);
  margin-top: 5px;
}

/* ——— 26.2 · Las dos columnas ——— */
.p-checkout .woocommerce {
  max-width: var(--p-container);
  margin: 0 auto var(--p-space-13);
  padding: var(--p-space-6) var(--p-gutter) 0;
}

.p-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr);
  gap: var(--p-space-5) var(--p-space-8);
  align-items: start;
}

/* Primero TODO cruza las dos columnas y solo después se colocan las cuatro
   piezas conocidas. WooCommerce mete en el formulario hijos que no son ninguna
   de ellas —`wc-order-attribution-inputs`, campos ocultos, lo que añada un
   plugin— y sin esta guarda se colocaban solos y descuadraban la página. */
.p-checkout form.checkout > * { grid-column: 1 / -1; }

/* Las cuatro se escriben con `form.checkout >`, igual que el catch-all de
   arriba. Sin ese `>` valían (0,2,0) contra los (0,2,1) del catch-all y perdían:
   el titular del resumen y la composición salían a ancho completo cruzando toda
   la página. Las dos que llevan ID sobrevivían por su especificidad, lo que
   despistaba aún más. */
.p-checkout form.checkout > .p-co-main { grid-column: 1; min-width: 0; }
.p-checkout form.checkout > .p-co-side { grid-column: 2; min-width: 0; }

/* La columna izquierda: caja de cliente y los tres bloques de campos, todos del
   mismo ancho y con la misma separación. */
.p-co-main {
  display: grid;
  gap: var(--p-space-5);
  align-content: start;
}

/* Ningún bloque de la columna puede traerse su propio ancho ni sus márgenes:
   el de la caja de cliente y el de los campos tienen que medir lo mismo. Los
   anchos los pone la rejilla y nada más. */
/* El selector lleva `form.checkout` a propósito. GeneratePress reparte el
   checkout en dos columnas con `.woocommerce-checkout .col2-set`, que es (0,2,0)
   y trae `width: 52.94%`, `float: left` y `margin-right: 5.88%`. Ese margen
   sobrevivía a un `.p-co-main > *` y dejaba la caja de los campos 42px más
   estrecha que la de «¿Ya eres cliente?». */
.p-checkout form.checkout .p-co-main > * {
  width: auto;
  max-width: none;
  margin: 0;
  margin-right: 0;
  float: none;
  min-width: 0;
}

/* La columna derecha entera —titular, resumen y composición— dentro de un solo
   elemento, y es ella la que se queda pegada. El tope lo pone `form.checkout`:
   se suelta al final de la columna izquierda. */
.p-co-side {
  display: grid;
  gap: var(--p-space-4);
  align-content: start;
  position: sticky;
  top: 20px;
}

.p-co-side .p-co-summaryhead { margin-bottom: calc(var(--p-space-4) * -1); }

/* El titular que trae WooCommerce se sustituye por .p-co-summaryhead, que sí
   admite el enlace de «Editar carrito» al lado. */
.p-checkout #order_review_heading { display: none; }

/* El resumen se queda a la vista mientras se rellenan los datos. El tope lo
   pone `form.checkout`, que es su contenedor de rejilla: se suelta al final de
   la columna izquierda. */
/* `width: auto` y `float: none` NO son decorativos: GeneratePress le impone
   `#order_review { width: 41.1765%; float: right }`, con el ID en el selector.
   Medido: la caja salía a 183px dentro de una columna de 443, o sea cortada por
   la mitad. Nuestro selector vale (1,1,0) y le gana a su (1,0,0). */
.p-checkout #order_review,
.p-checkout #order_review_heading {
  width: auto;
  float: none;
}

/* Las dos columnas de WooCommerce —facturación y envío— se apilan: aquí son
   secciones una debajo de otra, no dos columnas. */
.p-checkout #customer_details.col2-set,
.p-checkout #customer_details .col-1,
.p-checkout #customer_details .col-2 {
  width: auto;
  float: none;
}

/* TODOS los apartados de la izquierda viven en la MISMA caja, separados solo
   por sus bandas de titular. WooCommerce los reparte en dos columnas —`.col-1`
   factura, `.col-2` envío y observaciones—; aquí son secciones seguidas, así
   que la caja es el contenedor y ellas no llevan ni borde ni hueco. */
.p-checkout #customer_details {
  display: grid;
  gap: 0;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
}

/* ——— 26.3 · Secciones ———
   Cada bloque se convierte en una caja con cabecera. El número va escrito en el
   rótulo desde PHP: los cuatro apartados son fijos y con el número en el texto
   se lee lo mismo en el HTML que en pantalla. */

.p-checkout .col-1,
.p-checkout .col-2,
.p-checkout .woocommerce-additional-fields {
  border: 0;
  border-radius: 0;
}

.p-checkout .col-1 > h3,
.p-checkout .col-2 > h3,
.p-checkout .woocommerce-additional-fields > h3,
.p-checkout #ship-to-different-address {
  display: flex;
  align-items: center;
  gap: var(--p-space-2);
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--p-border);
  background: var(--p-surface);
  font-family: var(--p-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--p-text);
}

/* La banda del titular tiene que llegar de lado a lado, así que el relleno lo
   lleva el envoltorio de los campos y no el apartado. */
.p-checkout .col-1 .woocommerce-billing-fields,
.p-checkout .woocommerce-additional-fields__field-wrapper { padding: 18px; }

.p-checkout .col-2 .woocommerce-shipping-fields { padding: 0; }

/* Dos columnas EXACTAS, no `auto-fit`: con `minmax(210px, 1fr)` sobre una
   columna de ~630px salían tres, y el diseño pide dos filas de dos en el
   apartado 1. Los campos largos —dirección, notas— siguen cruzando las dos con
   `form-row-wide`. */
.p-checkout .woocommerce-billing-fields__field-wrapper,
.p-checkout .woocommerce-shipping-fields__field-wrapper,
.p-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--p-space-4);
  align-items: start;
}

/* WooCommerce marca así los campos que van a media fila y a fila entera. */
.p-checkout .form-row-first,
.p-checkout .form-row-last { grid-column: auto; }

/* Cada fila es una columna flexible con el campo abajo. Así, cuando una
   etiqueta ocupa dos líneas —«Empresa / razón social (opcional)» lo hace— el
   campo NO baja: todos los de una misma fila quedan a la misma altura. */
.p-checkout form.checkout .form-row {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

/* WooCommerce reparte con `form-row-wide`, `-first` y `-last`, pensados para un
   maquetado con `float` y anchos en porcentaje. Aquí manda la rejilla, así que
   se les quita el ancho y la flotación: `form-row-first` traía `width: 47%` y
   dejaba Empresa y NIF a media columna dentro de media columna. */
.p-checkout form.checkout .form-row-wide,
.p-checkout form.checkout .form-row-first,
.p-checkout form.checkout .form-row-last {
  width: auto;
  float: none;
  grid-column: auto;
}

/* Solo cruzan las dos columnas los que de verdad lo necesitan: las cabeceras,
   el selector fiscal, las dos líneas de dirección y las observaciones. */
/* El selector fiscal comparte fila con el país, y la segunda línea de la
   dirección con la provincia: ninguno de los dos cruza ya las dos columnas. */
.p-checkout form.checkout .p-co-heading,
.p-checkout form.checkout .p-co-notes-toggle,
.p-checkout form.checkout #billing_address_1_field,
.p-checkout form.checkout #billing_address_2_field,
.p-checkout form.checkout #billing_state_field,
.p-checkout form.checkout #shipping_address_1_field,
.p-checkout form.checkout #shipping_address_2_field,
.p-checkout form.checkout #shipping_state_field,
.p-checkout form.checkout #order_comments_field,
.p-checkout form.checkout .notes { grid-column: 1 / -1; }

.p-checkout .form-row label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--p-text);
  margin-bottom: 6px;
}

.p-checkout .form-row .optional { color: var(--p-text-2); font-weight: 400; }

/* `form.checkout` en el selector NO es decorativo: la regla de WooCommerce es
   `.woocommerce form .form-row .input-text`, o sea (0,3,1), y sin el elemento
   la nuestra valía (0,3,0) y perdía. Los campos salían con 4px de radio y 37px
   de alto en lugar de los del diseño. */
.p-checkout form.checkout .form-row .input-text,
.p-checkout form.checkout .form-row select,
.p-checkout form.checkout .form-row textarea,
.p-checkout .select2-container .select2-selection--single {
  width: 100%;
  height: 44px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-btn);
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--p-text);
  background: var(--p-bg);
  outline: none;
}

.p-checkout form.checkout .form-row textarea.input-text {
  height: auto;
  min-height: 92px;
  padding: 11px 12px;
  line-height: 1.5;
  resize: vertical;
}

.p-checkout form.checkout .form-row .input-text:focus,
.p-checkout form.checkout .form-row select:focus,
.p-checkout form.checkout .form-row textarea:focus {
  border-color: var(--p-orange);
  outline: 2px solid var(--p-orange);
  outline-offset: 1px;
}

.p-checkout .form-row.woocommerce-invalid .input-text,
.p-checkout .form-row.woocommerce-invalid select { border-color: #a85b00; }

.p-checkout .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}
.p-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.2;
  padding: 0;
  color: var(--p-text);
}
.p-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

/* La casilla de WooCommerce se queda en el formulario pero fuera de la vista:
   de ella dependen su validación y el guion que despliega los campos. Quien
   manda visualmente son los dos radios de .p-co-shipto. */
.p-checkout #ship-to-different-address {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding: 0;
  border: 0;
  background: none;
}

.p-co-shipto {
  display: grid;
  gap: var(--p-space-3);
  padding: 18px;
}

.p-co-shipto__opt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  cursor: pointer;
}

.p-co-shipto__opt input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--p-orange);
  margin-top: 2px;
  flex: none;
}

.p-co-shipto__body { min-width: 0; }

.p-co-shipto__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--p-text);
}

.p-co-shipto__note {
  display: block;
  font-size: 13px;
  color: var(--p-text-2);
  margin-top: 3px;
}

/* Los campos de la dirección alternativa solo respiran cuando se abren. */
.p-checkout .shipping_address { padding: 0 18px 18px; }

/* ——— 26.3b · Cabeceras de sección ———
   Las inyecta inc/woo-checkout.php como campos de tipo `pf_heading`, así que
   viven DENTRO de la rejilla de campos. Los márgenes negativos las sacan hasta
   el borde de la caja para que se lean como separadores de sección y no como
   una etiqueta más. */
.p-co-heading {
  grid-column: 1 / -1;
  margin: 0 -18px;
  padding: 12px 18px;
  background: var(--p-surface);
  border-top: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--p-text);
}

/* El número va escrito en el rótulo, no puesto por un contador: son cuatro
   apartados fijos y así se lee igual en el HTML que en pantalla. */

/* La primera va pegada al techo de la caja: ahí el filete superior sobra y el
   relleno de la caja hay que anularlo. */
.p-co-heading:first-child { margin-top: -18px; }

/* Las bandas que NO viven dentro de un envoltorio con relleno —la del apartado
   de entrega cuelga directamente de la columna— no tienen relleno que salvar,
   así que tampoco llevan el margen negativo. */
.p-co-heading--suelta,
.p-co-heading--suelta:first-child { margin: 0; }

/* Solo la PRIMERA banda de todas se queda sin filete superior: ahí ya está el
   borde de la caja. Las demás lo necesitan para separarse del apartado de
   arriba. */
.p-checkout .woocommerce-billing-fields__field-wrapper > .p-co-heading:first-child {
  border-top: 0;
}

/* Las cabeceras llevan la clase `form-row` para que el guion de WooCommerce que
   reordena los campos las arrastre consigo. Eso las mete de lleno en las reglas
   de `.form-row` —columna flexible, sin márgenes—, que aquí no valen: la
   cabecera es una banda que se sale del relleno de la caja. */
.p-checkout form.checkout .form-row.p-co-heading {
  display: block;
  margin: 0 -18px;
  padding: 12px 18px;
}

.p-checkout form.checkout .form-row.p-co-heading:first-child {
  margin-top: -18px;
}

/* Empresa y NIF solo existen para «Empresa / autónomo». El selector va cargado
   a propósito: medido en la página, con `.p-checkout .p-co-empresa[hidden]` el
   campo seguía midiendo 75px de alto pese a tener el atributo puesto; con este
   mide 0. */
.p-checkout form.checkout .form-row.p-co-empresa[hidden] { display: none; }

/* Con «Empresa / autónomo» marcado dejan de ser opcionales. La clase la pone el
   JavaScript; quien de verdad lo impide es la comprobación de `woo-checkout.php`. */
.p-checkout .p-co-obligatorio .optional { display: none; }

.p-checkout .p-co-obligatorio > label::after {
  content: " *";
  color: var(--p-orange);
  font-weight: 600;
}

/* Con cabeceras propias, el titular «Detalles de facturación» de WooCommerce
   sobra: diría lo mismo dos veces. */
.p-checkout .col-1 > h3,
.p-checkout .woocommerce-billing-fields > h3 { display: none; }

/* ——— 26.3c · Caja de «¿Ya eres cliente?» ———
   Va dentro de la columna izquierda, encima del apartado 1. */
.p-co-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-4);
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
}

.p-co-login__text { font-size: 13.5px; color: var(--p-text-2); }

.p-co-login__btn {
  border: 1px solid var(--p-navy);
  border-radius: var(--p-radius-btn);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text);
  flex: none;
  transition: background .2s, color .2s;
}
.p-co-login__btn:hover { background: var(--p-navy); color: var(--p-text-inv); }

/* ——— 26.3d · Empresa / autónomo o particular ———
   WooCommerce imprime los radios como una lista suelta; aquí se convierten en
   dos botones alternativos. El campo es real y se guarda con el pedido. */
.p-co-fiscal { display: flex; gap: var(--p-space-3); flex-wrap: wrap; }

.p-co-fiscal label {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  margin: 0;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-btn);
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p-text);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

/* El radio desaparece de la vista pero SIGUE EN EL FORMULARIO: quitarlo con
   `display: none` lo dejaría fuera del recorrido con teclado y, según el
   navegador, sin enviarse. Se aparta de la pantalla y el foco se dibuja sobre
   la etiqueta. */
.p-co-fiscal input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

/* WooCommerce imprime el radio y la etiqueta como HERMANOS, no anidados, así
   que el estado marcado se pinta con el combinador de hermano adyacente. */
.p-co-fiscal input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-btn);
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p-text);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.p-co-fiscal input[type="radio"]:checked + label {
  border-color: var(--p-orange);
  background: var(--p-orange-soft);
}

.p-co-fiscal input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--p-orange);
  outline-offset: 2px;
}

/* «(opcional)» no pinta nada dentro de un botón. */
.p-co-fiscal .optional { display: none; }

/* Empresa y NIF solo tienen sentido con «Empresa / autónomo» marcado. Lo
   conmuta el JavaScript con el atributo `hidden`, que respeta el teclado y los
   lectores de pantalla mejor que una clase. */
.p-checkout .p-co-empresa[hidden] { display: none; }

.p-co-fiscal .woocommerce-input-wrapper {
  display: flex;
  gap: var(--p-space-2);
  flex-wrap: nowrap;
}

/* En media columna los dos botones tienen que repartírsela sin desbordar. */
.p-co-fiscal input[type="radio"] + label {
  flex: 1 1 0;
  justify-content: center;
  text-align: center;
  padding: 11px 10px;
  min-width: 0;
}

/* La etiqueta vacía del campo no debe dejar hueco encima de los botones. */
.p-co-fiscal > label:first-child { display: none; }

/* ——— 26.3e · Referencia y observaciones ——— */
/* El fondo oscuro al pasar por encima NO era una regla propia: GeneratePress
   pinta en su CSS en línea `button:hover` con fondo #3f4047 y texto blanco, y
   alcanza a cualquier `<button>` del tema. Quitar la regla propia no bastaba;
   hay que apagar la del padre a la cara. */
.p-co-notes-toggle:hover,
.p-co-notes-toggle:focus,
.p-co-notes-toggle:active {
  background: transparent;
  color: var(--p-orange);
  box-shadow: none;
}

.p-co-notes-toggle {
  justify-self: start;
  align-self: start;
  border: 0;
  background: transparent;
  color: var(--p-orange);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
/* El campo de notas arranca cerrado y lo abre el botón de arriba. */
.p-checkout .woocommerce-additional-fields .notes[hidden] { display: none; }

/* El titular del bloque de observaciones se pinta como los demás apartados. */
.p-checkout .woocommerce-additional-fields h3 {
  display: flex;
  align-items: center;
  gap: var(--p-space-2);
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--p-border);
  background: var(--p-surface);
  font-family: var(--p-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--p-text);
}

/* ——— 26.4 · Avisos y cupón ——— */
.p-checkout .woocommerce-form-login-toggle .woocommerce-info,
.p-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  background: var(--p-bg);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--p-text-2);
  margin: 0 0 var(--p-space-4);
}

.p-checkout .woocommerce-form-login,
.p-checkout .checkout_coupon {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 18px;
  margin: 0 0 var(--p-space-4);
}

/* ——— 26.4b · Cupón ———
   El JavaScript lo traslada a la columna derecha, justo encima del botón de
   pagar. Ver la explicación en js/precifilm.js. */

/* El título se queda; el enlace que abría el desplegable, no: los campos van
   visibles de entrada. Se apaga el enlace y no el aviso entero para no perder
   una cadena traducida. */
.p-co-side .woocommerce-form-coupon-toggle { margin: 0 0 11px; }
.p-co-side .woocommerce-form-coupon-toggle a.showcoupon { display: none; }

.p-co-side .woocommerce-form-coupon-toggle .woocommerce-info {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text);
}
.p-co-side .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }

/* `!important` contra el `style="display:none"` que WooCommerce escribe en el
   propio elemento: a un atributo en línea no lo gana ninguna regla normal. */
.p-co-side form.checkout_coupon {
  display: flex !important;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  gap: 9px;
  flex-wrap: wrap;
}

/* El texto de ayuda de WooCommerce repite lo que ya dice el título. Se apunta
   por lo que NO es —un párrafo sin `form-row`— y no por su posición: en esta
   versión no lo imprime, y con `p:first-child` desaparecía la fila del campo. */
.p-co-side form.checkout_coupon > p:not(.form-row),
.p-co-side form.checkout_coupon .clear { display: none; }

.p-co-side form.checkout_coupon .form-row { margin: 0; padding: 0; flex: 1 1 120px; }
.p-co-side form.checkout_coupon .form-row:last-of-type { flex: 0 0 auto; }

.p-co-side form.checkout_coupon input.input-text {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  padding: 0 13px;
  font-size: 13.5px;
  background: var(--p-bg);
}

.p-co-side form.checkout_coupon button {
  height: 42px;
  border: 1px solid var(--p-navy);
  background: var(--p-bg);
  color: var(--p-text);
  border-radius: var(--p-radius-md);
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex: none;
}
.p-co-side form.checkout_coupon button:hover { background: var(--p-navy); color: var(--p-text-inv); }

/* La caja del cupón, entre los totales y las formas de pago. */
.p-co-coupon {
  padding: 16px 22px;
  border-bottom: 1px solid var(--p-border);
  background: transparent;
}

/* ——— 26.5 · Caja del resumen ——— */
.p-co-summaryhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-3);
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-bottom: 0;
  border-radius: var(--p-radius-lg) var(--p-radius-lg) 0 0;
}

.p-co-summaryhead__title { font-size: 16px; font-weight: 600; color: var(--p-text); }
.p-co-summaryhead__edit { font-size: 12.5px; font-weight: 600; }

.p-checkout #order_review {
  border: 1px solid var(--p-border);
  border-top: 0;
  border-radius: 0 0 var(--p-radius-lg) var(--p-radius-lg);
  overflow: hidden;
}

.p-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  border: 0;
  border-radius: 0;
  margin: 0;
  border-collapse: collapse;
}

.p-checkout .woocommerce-checkout-review-order-table thead { display: none; }

.p-checkout .woocommerce-checkout-review-order-table th,
.p-checkout .woocommerce-checkout-review-order-table td {
  border: 0;
  border-bottom: 1px solid var(--p-border);
  padding: 15px 22px;
  font-size: 14px;
  background: transparent;
}

/* Los totales van más apretados que las líneas de producto: son una lista de
   cifras, no fichas. */
/* WooCommerce tiñe el pie con un negro al 3% desde
   `.woocommerce table.shop_table tfoot th`, que vale (0,2,3). La regla de aquí
   sin el elemento `table` valía (0,2,2) y perdía por UN elemento: el gris
   seguía puesto. Con `form.checkout` y `table` delante son (0,3,4) y gana.

   Es la tercera vez que pasa lo mismo en esta página; ver §14.20. */
.p-checkout form.checkout table.woocommerce-checkout-review-order-table tfoot th,
.p-checkout form.checkout table.woocommerce-checkout-review-order-table tfoot td {
  padding: 8px 22px;
  border-bottom: 0;
  font-size: 13.5px;
  background: transparent;
}

/* Filete entre el subtotal y el envío, y entre el envío y el total. */
.p-checkout .woocommerce-checkout-review-order-table tfoot .cart-subtotal th,
.p-checkout .woocommerce-checkout-review-order-table tfoot .cart-subtotal td,
.p-checkout .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals th,
.p-checkout .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals td {
  border-bottom: 1px solid var(--p-border);
}

.p-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child th,
.p-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child td { padding-top: 16px; }

/* La última fila antes del total deja aire: en una tabla no hay hueco entre
   filas, así que lo pone el relleno de abajo. */
.p-checkout .woocommerce-checkout-review-order-table tfoot tr:nth-last-child(2) th,
.p-checkout .woocommerce-checkout-review-order-table tfoot tr:nth-last-child(2) td { padding-bottom: 20px; }

/* Los descuentos, en verde: son dinero que el cliente NO paga. */
.p-checkout .woocommerce-checkout-review-order-table tfoot .cart-discount td,
.p-checkout .woocommerce-checkout-review-order-table tfoot .cart-discount td .woocommerce-Price-amount {
  color: #177a4c;
}

.p-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.p-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
  padding: 36px 22px 24px;
  border-top: 1px solid var(--p-border);
  vertical-align: baseline;
}

/* El importe sin IVA, colgado del total. Solo aparece cuando el carrito lleva
   impuestos de verdad; ver `woo-checkout.php`. */
.p-co-total__net {
  display: block;
  margin-top: 6px;
  font-family: var(--p-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
}

.p-checkout .woocommerce-checkout-review-order-table .cart_item td { vertical-align: top; }

.p-checkout .woocommerce-checkout-review-order-table .product-name {
  font-weight: 600;
  color: var(--p-text);
}

.p-co-line { display: flex; gap: var(--p-space-3); align-items: flex-start; }

.p-co-line__thumb { flex: none; width: 56px; }

.p-co-line__thumb img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--p-radius-md);
  background: var(--p-surface);
  display: block;
}

.p-co-line__body { min-width: 0; display: block; }

.p-co-line__sku {
  display: block;
  font-weight: 400;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 4px;
}

.p-co-line__name {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--p-text);
}

.p-co-line__specs {
  display: block;
  font-weight: 400;
  font-family: var(--p-font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--p-text-2);
  margin-top: 4px;
}

/* Qué ha comprado, en palabras: «36 bobinas a 1,00 €/bobina». Sustituye al
   «× 36» de WooCommerce, que no dice nada en un catálogo por unidades. */
.p-co-line__qty {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--p-text-2);
  margin-top: 6px;
}

.p-co-line__qty .woocommerce-Price-amount { font-weight: 400; }

/* Rótulo sobre el importe de la línea. */
.p-co-line__totlabel {
  display: block;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  font-family: var(--p-font-mono);
  color: var(--p-text-2);
  margin-bottom: 4px;
}

.p-co-line__tot { display: block; }

.p-checkout .woocommerce-checkout-review-order-table .product-total {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  font-size: 15px;
  color: var(--p-text);
}

.p-checkout .woocommerce-checkout-review-order-table tfoot th {
  font-weight: 400;
  color: var(--p-text-2);
}

.p-checkout .woocommerce-checkout-review-order-table tfoot td { text-align: right; font-weight: 600; }

/* El total va sobre el mismo fondo que el resto de la caja: lo separa su
   filete, no una banda de color. */
.p-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.p-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
  background: transparent;
}

.p-checkout .woocommerce-checkout-review-order-table tfoot .order-total th {
  font-size: 15px;
  font-weight: 600;
  color: var(--p-text);
}

.p-checkout .woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--p-text);
}

/* `inline-grid` y no `grid`: así la lista se encoge al ancho de su opción más
   larga y la celda, que alinea a la derecha, la empuja hasta el margen. Dentro
   las opciones van alineadas a la izquierda, que es lo que pone los dos radios
   en la misma vertical. Con las opciones alineadas a la derecha una por una,
   cada radio caía donde lo dejaba el largo de su rótulo. */
.p-checkout ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-grid;
  gap: 8px;
  text-align: left;
}

/* La columna de la derecha la reparte el navegador según el contenido, y le
   tocaban 172px: descontados el relleno, el radio y su hueco, al rótulo le
   quedaban 103px y «Recoger en tienda» partía en dos líneas. Con 205px caben
   los dos métodos de una tirada, y a las líneas de producto les sobran los 317
   que les quedan para el nombre. */
.p-checkout .woocommerce-checkout-review-order-table td.product-total,
.p-checkout .woocommerce-checkout-review-order-table tfoot td { min-width: 205px; }

/* Cada opción, en una sola línea y con el radio delante. */
.p-checkout ul#shipping_method li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  margin: 0;
}

.p-checkout ul#shipping_method input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--p-orange);
  margin: 0;
}

/* La fila de envío es una fila de tabla como las demás: solo así sus opciones
   caen a la misma altura y con el mismo margen derecho que el importe del
   subtotal. Sacarla de la tabla —se probó— la encogía a 379px y dejaba las
   opciones 143px a la izquierda del resto.

   Lo que hacía falta era ensancharla, no sacarla: ver la regla de `min-width`
   de más abajo. */
.p-checkout .woocommerce-shipping-totals td { text-align: right; }

.p-checkout ul#shipping_method label {
  display: inline-block;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--p-text);
  margin: 0;
  padding: 0;
}

/* El plugin de envíos inyecta su CSS en wp_head con prioridad 999: para
   ajustarlo hacen falta al menos dos clases. */
.p-checkout .psr-envio-detalle {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-top: 4px;
  padding-left: 0;
}

.p-checkout .psr-envio-gratis-badge {
  background: rgba(23, 122, 76, .10);
  color: #177a4c;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  border-radius: var(--p-radius-sm);
  padding: 3px 7px;
}

/* ——— 26.6 · Formas de pago ——— */
.p-checkout #payment { background: transparent; border-radius: 0; }

/* `#payment` es ya el último apartado de la caja izquierda, así que su lista
   lleva el mismo relleno que los demás y no necesita filete de cierre: ahí
   termina la caja. */
.p-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 18px;
  border-bottom: 0;
  display: grid;
  gap: 11px;
}

/* Cada forma de pago es una tarjeta: el relleno lo llevan la fila del título y
   la descripción, no el elemento de la lista, para que el fondo del método
   elegido llegue de lado a lado de la tarjeta. */
.p-checkout #payment ul.payment_methods li {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-cta);
  padding: 0;
  margin: 0;
  background: var(--p-bg);
  overflow: hidden;
  transition: border-color .18s, background .18s;
}

/* La cabecera de una tarjeta sin elegir es BLANCA. El fondo se declara aquí y
   no se hereda del elemento de la lista: WooCommerce y GeneratePress pintan de
   gris varias cosas por el camino y así no hay dudas.

   Rejilla de dos columnas y no una fila flexible: el radio ocupa las dos
   alturas a la izquierda y a su derecha van el nombre y el renglón corto, uno
   debajo del otro. */
.p-checkout #payment ul.payment_methods li > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 11px;
  background: var(--p-bg);
  padding: 13px 15px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--p-text);
  cursor: pointer;
  margin: 0;
}

.p-checkout #payment ul.payment_methods li > label > input[type="radio"] {
  grid-row: 1 / span 2;
  margin-top: 1px;
}

/* El nombre de la pasarela viaja como texto suelto dentro de la etiqueta, no
   envuelto: envolverlo obligaba a filtrar el título, y ese título es el que
   WooCommerce GUARDA en el pedido. Ver la explicación en woo-checkout.php.

   Como elemento anónimo de la rejilla no se puede estilar, pero se coloca solo:
   el radio ocupa las dos filas de la primera columna y el texto cae a su
   derecha. Solo hay que fijarle la columna al renglón corto para que baje. */
.p-co-pay__sub { grid-column: 2; }

/* El renglón corto: siempre a la vista, también sin elegir la tarjeta. */
.p-co-pay__sub {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--p-text-2);
  margin-top: 3px;
}

.p-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked) .p-co-pay__sub {
  color: var(--p-orange-dark);
}

.p-checkout #payment ul.payment_methods li > label img { display: none; }

/* Radio propio. `accent-color` no bastó —seguía saliendo azul—, así que se
   apaga el dibujo del navegador y se pinta a mano: aro fino y, al elegirlo, un
   punto naranja hecho con dos sombras interiores. */
.p-checkout #payment ul.payment_methods li input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--p-text-2);
  border-radius: 50%;
  background: var(--p-bg);
  flex: none;
  margin: 0;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}

.p-checkout #payment ul.payment_methods li input[type="radio"]:checked {
  border-color: var(--p-orange);
  box-shadow: inset 0 0 0 3px var(--p-bg), inset 0 0 0 9px var(--p-orange);
}

.p-checkout #payment ul.payment_methods li input[type="radio"]:focus-visible {
  outline: 2px solid var(--p-orange);
  outline-offset: 2px;
}

/* `:has()` para pintar la tarjeta entera según su radio. Donde no exista, la
   tarjeta se queda con el borde normal y solo cambia el punto del radio: se
   pierde el realce, no la función. */
.p-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked) {
  border-color: var(--p-orange);
}

/* La cabecera es blanca en las dos situaciones. El selector va cargado a
   propósito: WooCommerce tiñe la del método elegido con un negro al 7% y la
   regla corta perdía —medido en la página: `rgba(0, 0, 0, 0.07)`—.

   Que una tarjeta esté elegida se ve por su borde naranja, por el punto del
   radio y por el renglón corto en naranja; no hace falta fondo. */
.p-checkout form.checkout #payment ul.payment_methods li > label,
.p-checkout form.checkout #payment ul.payment_methods li:has(input[type="radio"]:checked) > label {
  background: var(--p-bg);
}

/* Sin ninguna pasarela activa, WooCommerce cuela su aviso dentro de la lista.
   No es una forma de pago: no lleva tarjeta. */
.p-checkout #payment ul.payment_methods li:has(> .woocommerce-info) {
  border: 0;
  background: transparent;
}

.p-checkout #payment ul.payment_methods .woocommerce-info {
  margin: 0;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  background: var(--p-surface);
  padding: 13px 15px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--p-text-2);
}
.p-checkout #payment ul.payment_methods .woocommerce-info::before { display: none; }

.p-checkout #payment ul.payment_methods .payment_box {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0 15px 13px 43px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--p-text-2);
}
.p-checkout #payment ul.payment_methods .payment_box::before { display: none; }
.p-checkout #payment ul.payment_methods .payment_box p { margin: 0; }
.p-checkout #payment ul.payment_methods .payment_box p + p { margin-top: 7px; }

/* La del método elegido se separa de su título con un filete. */
.p-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked) .payment_box {
  border-top: 1px solid var(--p-border);
  padding-top: 12px;
}

/* OJO: estas reglas ya NO pueden colgar de `#payment`. El bloque del botón se
   traslada a la columna derecha y `#payment` se queda en la izquierda; ver el
   reparto en js/precifilm.js.

   El selector lleva `form.checkout` porque el relleno lo perdía contra la regla
   general de `.form-row`: medido, la caja salía con `padding: 0 0 15px` y tanto
   el botón como los avisos cruzaban la tarjeta de lado a lado. */
.p-checkout form.checkout .place-order {
  padding: 18px 22px;
  margin: 0;
  display: block;
  float: none;
}

.p-checkout .place-order .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--p-space-4); }

.p-checkout .place-order .woocommerce-privacy-policy-text p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--p-text-2);
  margin: 0 0 var(--p-space-3);
}

.p-checkout .place-order .form-row.validate-required {
  display: block;
  margin: 0 0 var(--p-space-4);
  padding: 0;
}

.p-checkout .place-order .form-row.validate-required label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--p-text-2);
  cursor: pointer;
  margin: 0;
}

/* Casilla de condiciones, justo encima del botón. */
.p-co-terms {
  margin: 0 0 var(--p-space-4);
  padding: 0;
}

.p-co-terms label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--p-text-2);
  cursor: pointer;
}

.p-co-terms input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--p-orange);
  margin: 1px 0 0;
}

.p-co-terms a { color: var(--p-orange); text-decoration: underline; }
.p-co-terms .required { color: var(--p-orange); text-decoration: none; border: 0; }

.p-checkout .place-order input#terms {
  width: 16px;
  height: 16px;
  accent-color: var(--p-orange);
  flex: none;
  margin: 1px 0 0;
}

/* `!important` contra la regla de GP Premium que lleva dos IDs en su lista de
   selectores. Es el mismo caso que el botón del carrito. */
/* `display: flex` y no el `inline-block` heredado: con una altura fija y el
   interlineado de GeneratePress —24,8px medidos— el texto se quedaba pegado
   abajo en lugar de en el centro. */
.p-checkout #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 100%;
  height: 54px;
  border: 0;
  background: var(--p-orange) !important;
  color: var(--p-text-inv) !important;
  font-size: 15.5px;
  font-weight: 600;
  border-radius: var(--p-radius-cta);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(235, 101, 78, .26);
  float: none;
  padding: 0;
  margin: 0;
}
.p-checkout #place_order:hover { background: var(--p-orange-dark) !important; }

.p-co-trust {
  display: grid;
  gap: 7px;
  margin-top: var(--p-space-4);
  padding-top: var(--p-space-4);
  border-top: 1px solid var(--p-border);
}

.p-co-trust__point {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--p-text-2);
}

.p-co-trust__tick { color: #177a4c; font-weight: 700; flex: none; }

/* ——— 26.7 · Responsive ——— */
@media (max-width: 1024px) {
  .p-checkout form.checkout { grid-template-columns: minmax(0, 1fr); }

  /* Con una sola columna declarada, un `grid-column: 2` crearía una segunda
     columna implícita: hay que soltar también las colocaciones (§14.22). */
  .p-checkout form.checkout > .p-co-main,
  .p-checkout form.checkout > .p-co-side { grid-column: 1 / -1; }

  .p-co-side { position: static; }
}

@media (max-width: 600px) {
  .p-checkout .woocommerce-billing-fields__field-wrapper,
  .p-checkout .woocommerce-shipping-fields__field-wrapper,
  .p-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PARTE 27 · PEDIDO RECIBIDO
   ══════════════════════════════════════════════════════════════════════════ */

/* ——— 27.1 · Sin distracciones ——— */
/* Los mismos tokens que `.p-container` de la cabecera: 1320px y 40px de calle.
   Con 960 el contenido quedaba visiblemente más estrecho que la barra de arriba
   y se notaba el escalón. */
.p-thankyou .woocommerce {
  max-width: var(--p-container);
  margin: 0 auto var(--p-space-13);
  padding: var(--p-space-7) var(--p-gutter) 0;
}

/* El aviso «Gracias, tu pedido ha sido recibido» y la lista de cuatro datos los
   imprime `thankyou.php` sin pasar por ningún hook, así que se apagan aquí. Lo
   que sí cuelga de `woocommerce_thankyou` —las dos tablas— se quita con
   `remove_action`; ver woo-thankyou.php. */
.p-thankyou .woocommerce-notice--success,
.p-thankyou .woocommerce-order-overview,
.p-thankyou .woocommerce-thankyou-order-failed,
.p-thankyou .woocommerce-thankyou-order-failed-actions { display: none; }

/* ——— 27.2 · El orden de los bloques ———
   Las pasarelas escriben lo suyo en `woocommerce_thankyou_{método}`, que corre
   ANTES de `woocommerce_thankyou`. Sin esto, los datos bancarios de la
   transferencia saldrían por encima del titular. Con la columna flexible caen
   entre los datos del pedido y el resto. */
.p-thankyou .woocommerce-order {
  display: flex;
  flex-direction: column;
}

.p-thankyou .p-th-top { order: 1; }
.p-thankyou .woocommerce-order > section,
.p-thankyou .woocommerce-bacs-bank-details { order: 2; }
.p-thankyou .p-th-rest { order: 3; }

/* ——— 27.3 · Confirmación ——— */
/* EL PROBLEMA DEL ASPA, DE RAÍZ.
   No estaba en el aspa: estaba en el titular. `.p-scope h1` de la PARTE 1 vale
   (0,1,1) —una clase y un elemento— y le ganaba a `.p-th-hero__title`, que es
   (0,1,0). El titular salía con el cuerpo grande de la portada y con
   `margin: 20px 0 16px`, o sea empujado hacia abajo. De ahí que el aspa, que sí
   obedecía, pareciera flotar por encima.

   Se arregla en los dos frentes: el selector gana, y el alto de la línea del
   titular y el del aspa se escriben con el MISMO número. Así no hay aritmética
   que se pueda desajustar. */
.p-th-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--p-space-4);
  margin-bottom: var(--p-space-6);
}

/* 34px NO es un capricho: el titular mide 30px con interlineado 1,15, o sea
   una línea de 34,5px. Con el aspa a 34 las dos cajas arrancan en la misma y
   acaban en la misma, que es lo que se ve alineado. A 44 sobresalía por abajo
   y a 36 seguía sobrando. */
.p-th-hero__tick {
  width: 34px;   /* el mismo número que el interlineado del titular */
  height: 34px;
  align-self: start;
  border-radius: var(--p-radius-pill);
  background: rgba(23, 122, 76, .12);
  color: #177a4c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  flex: none;
}

.p-thankyou .p-th-hero__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 34px;   /* el mismo número que el alto del aspa */
  letter-spacing: -.03em;
  margin: 0 0 8px;
  color: var(--p-text);
}

.p-th-hero__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0;
}

/* ——— 27.4 · Pago sin completar ——— */
.p-th-alert {
  border: 1px solid #a85b00;
  background: rgba(168, 91, 0, .06);
  border-radius: var(--p-radius-lg);
  padding: 26px 28px;
  margin-bottom: var(--p-space-6);
}

.p-thankyou .p-th-alert__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  color: var(--p-text);
}

.p-th-alert__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0 0 18px;
}

.p-th-alert__actions { display: flex; gap: var(--p-space-3); flex-wrap: wrap; }

/* ——— 27.5 · Datos del pedido ——— */
.p-th-meta {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
  margin-bottom: var(--p-space-4);
}

/* El hueco de 1px sobre fondo de borde dibuja las separaciones sin tener que
   decidir a qué celda le toca el filete: la rejilla se reordena sola al
   estrecharse la pantalla. */
.p-th-meta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--p-border);
}

.p-th-meta__cell {
  background: var(--p-bg);
  padding: 16px 18px;
}

.p-th-meta__label {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 6px;
}

.p-th-meta__value {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--p-text);
}

.p-th-meta__value--big {
  font-family: var(--p-font-display);
  font-size: 19px;
  letter-spacing: -.02em;
}

/* Dos columnas: a la izquierda la forma de pago y, debajo, la referencia; a la
   derecha el estado, arriba del todo. */
.p-th-meta__foot {
  padding: 14px 18px;
  border-top: 1px solid var(--p-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px var(--p-space-4);
}

.p-th-meta__pay { grid-column: 1; }
.p-th-meta__ref { grid-column: 1; font-size: 13px; color: var(--p-text-2); }
.p-th-meta__ref strong { color: var(--p-text); }

/* El renglón de la pasarela, separado de su nombre y no pegado detrás. */
.p-th-meta__paynote {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--p-text-2);
}

.p-th-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: var(--p-radius-sm);
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

.p-th-badge--ok { background: rgba(23, 122, 76, .10); color: #177a4c; }
.p-th-badge--espera { background: rgba(168, 91, 0, .10); color: #a85b00; }
.p-th-badge--neutro { background: rgba(26, 37, 69, .08); color: var(--p-text); }

.p-th-detail {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0 0 var(--p-space-6);
}

/* ——— 27.6 · Datos que imprime la pasarela ———
   La caja de la transferencia la escribe WooCommerce con su propio marcado; se
   le da el mismo aire que a las cajas del tema sin tocar su contenido. */
.p-thankyou .woocommerce-bacs-bank-details {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  background: var(--p-surface);
  padding: 20px 22px;
  margin: 0 0 var(--p-space-6);
}

.p-thankyou .woocommerce-bacs-bank-details h2,
.p-thankyou .woocommerce-bacs-bank-details h3 {
  font-family: var(--p-font-ui);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--p-text);
}

/* WooCommerce encabeza los datos con el nombre de la cuenta, y ese mismo dato
   es ahora la fila «Banco» —ver woo-thankyou.php—. Se apaga el titular para no
   decirlo dos veces. En los correos sigue apareciendo, que allí hace de título
   del bloque y no hay nada encima. */
.p-thankyou .wc-bacs-bank-details-account-name { display: none; }

/* La lista lleva la clase `order_details`, y WooCommerce FLOTA sus filas para
   ponerlas en línea. Flotando, cada fila se apoya arriba y no hay forma de
   centrarlas entre sí: medido, las de texto tenían su centro en y=17 y la del
   certificado —más alta, porque lleva un botón— en y=33.

   Con la lista en fila flexible y `align-items: center` los tres centros caen
   en 18, 18 y 19. */
.p-thankyou .woocommerce-bacs-bank-details ul.wc-bacs-bank-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-thankyou .woocommerce-bacs-bank-details ul.wc-bacs-bank-details li {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
}

/* El clearfix de WooCommerce —`content: " "` con `display: table`— se convierte
   en un ELEMENTO de la fila flexible. Mide cero, pero el hueco de 24px que va
   detrás sí cuenta, y empujaba «Banco» esos 24px hacia dentro. Se notaba sobre
   todo en móvil, donde la caja es estrecha. Medido: 24px antes, 0 después.

   Es la misma trampa del §15.21, ahora en una fila flexible en lugar de una
   rejilla. */
.p-thankyou .woocommerce-bacs-bank-details ul.wc-bacs-bank-details::before,
.p-thankyou .woocommerce-bacs-bank-details ul.wc-bacs-bank-details::after { display: none; }

.p-thankyou .woocommerce-bacs-bank-details li {
  font-size: 13.5px;
  color: var(--p-text-2);
}

.p-thankyou .woocommerce-bacs-bank-details li strong { color: var(--p-text); }

/* Tarjeta de respaldo: solo aparece si el botón no pudo colarse entre los
   datos bancarios. Ver woo-thankyou.php. */
.p-th-certcard .p-th-cert { margin-top: 4px; }

/* La fila del certificado no es un dato, es una acción: sin rótulo delante —de
   ahí el cuerpo cero, que apaga el «Certificado:»— y sin margen propio, que era
   lo que la bajaba respecto a las demás. */
.p-thankyou .woocommerce-bacs-bank-details li.pf_certificado {
  font-size: 0;
  line-height: 1;
}

.p-thankyou .woocommerce-bacs-bank-details li.pf_certificado strong { display: inline-flex; }

.p-thankyou .woocommerce-bacs-bank-details li.pf_certificado strong { font-weight: 400; }

.p-th-cert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--p-font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 18px;
  border: 1px solid var(--p-navy);
  border-radius: var(--p-radius-btn);
  background: var(--p-bg);
  color: var(--p-navy);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--p-dur-fast) var(--p-ease), color var(--p-dur-fast) var(--p-ease);
}

.p-th-cert:hover { background: var(--p-navy); color: var(--p-text-inv); }

/* ——— 27.7 · Titulares de sección ——— */
/* `.p-thankyou` delante NO es decorativo: `.p-scope h2` de la PARTE 1 vale
   (0,1,1) y le ganaba a una clase suelta, dejando estos titulares en los 34px
   de `.p-h2`. Es la misma trampa del §15.20. */
.p-thankyou .p-th-h2 {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.03em;
  margin: 0 0 var(--p-space-4);
  color: var(--p-text);
}

.p-th-card {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
  margin-bottom: var(--p-space-6);
  background: var(--p-bg);
}

.p-th-card--pad { padding: 16px 18px; overflow: visible; }

/* ——— 27.7b · Dos columnas ———
   «Qué ocurre ahora» y «Productos del pedido» van uno al lado del otro: por
   separado dejaban la página larguísima y el segundo obligaba a bajar mucho
   para llegar a las direcciones y a las salidas. */
.p-th-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--p-space-5);
  align-items: start;
}

.p-th-col { min-width: 0; }

@media (max-width: 782px) {
  .p-th-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ——— 27.8 · Qué ocurre ahora ——— */
.p-th-step {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--p-border);
  align-items: flex-start;
}

.p-th-timeline .p-th-step:last-child { border-bottom: 0; }

.p-th-step__mark {
  width: 26px;
  height: 26px;
  border-radius: var(--p-radius-pill);
  background: var(--p-surface);
  color: var(--p-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}

.p-th-step.is-done .p-th-step__mark { background: #177a4c; color: var(--p-text-inv); }

.p-th-step__title { font-size: 14px; font-weight: 600; color: var(--p-text); }

.p-th-step__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--p-text-2);
  margin-top: 3px;
}

/* ——— 27.9 · Líneas del pedido ——— */
.p-th-line {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--p-border);
}

.p-th-line__thumb { flex: none; width: 56px; }

.p-th-line__thumb img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--p-radius-md);
  background: var(--p-surface);
  display: block;
}

.p-th-line__body { flex: 1; min-width: 0; }

.p-th-line__sku {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 4px;
}

.p-th-line__name {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--p-text);
}

.p-th-line__specs,
.p-th-line__qty {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--p-text-2);
  margin-top: 4px;
}

.p-th-line__qty .woocommerce-Price-amount { font-weight: 400; }

.p-th-line__total { text-align: right; flex: none; }

.p-th-line__totlabel {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 4px;
}

.p-th-line__amount { font-size: 15px; font-weight: 600; color: var(--p-text); }

/* ——— 27.10 · Totales ———
   Las filas las da `get_order_item_totals()`, que devuelve exactamente las que
   tenga el pedido: sin impuestos configurados no hay fila de IVA, y sin cupón
   no hay fila de descuento. Aquí no se inventa ninguna. */
.p-th-totals { padding: 16px 18px; display: grid; gap: 9px; }

.p-th-totals__row {
  display: flex;
  justify-content: space-between;
  gap: var(--p-space-3);
  font-size: 13.5px;
}

.p-th-totals__row > span:first-child { color: var(--p-text-2); }
.p-th-totals__row > span:last-child { font-weight: 600; color: var(--p-text); }

.p-th-totals__row--discount > span:last-child,
.p-th-totals__row--discount > span:last-child .woocommerce-Price-amount { color: #177a4c; }

.p-th-totals__row--order_total {
  align-items: baseline;
  border-top: 1px solid var(--p-border);
  padding-top: 14px;
  margin-top: 5px;
}

.p-th-totals__row--order_total > span:first-child {
  font-size: 15px;
  font-weight: 600;
  color: var(--p-text);
}

.p-th-totals__row--order_total > span:last-child .woocommerce-Price-amount,
.p-th-totals__row--order_total > span:last-child {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -.02em;
}

/* ——— 27.11 · Notas y direcciones ——— */
.p-th-note { padding: 16px 18px; overflow: visible; }

.p-th-note__label {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 9px;
}

.p-th-note__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--p-text);
}

.p-th-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--p-space-4);
  margin-bottom: var(--p-space-5);
}

.p-th-cards .p-th-card { margin-bottom: 0; }

.p-th-address {
  font-size: 13.5px;
  line-height: 1.55;
  font-style: normal;
  color: var(--p-text-2);
  margin: 0;
}

.p-th-address__phone { font-size: 13.5px; color: var(--p-text-2); }

.p-th-card__title { font-size: 14px; font-weight: 600; color: var(--p-text); margin-bottom: 3px; }
.p-th-card__body { font-size: 13.5px; line-height: 1.55; color: var(--p-text-2); }
.p-th-card__note { font-size: 12.5px; color: var(--p-text-2); margin-top: 10px; }

/* ——— 27.12 · Salidas ———
   Los botones son `.btn-secondary`, que es un botón completo. `.btn-dark--outline`
   NO vale suelto: es un modificador de `.btn-dark` y sin ella no hereda ni
   `display` ni relleno, así que el enlace salía como texto plano.

   Dos matices propios: uno más discreto para la tercera salida, que no debe
   competir con las dos primeras, y otro más pequeño para la caja de crear
   cuenta. */
.p-th-btn--soft { border-color: var(--p-border); }
.p-th-btn--soft:hover { border-color: var(--p-navy); }
.p-th-btn--sm { padding: 11px 18px; font-size: 13.5px; }

.p-th-actions {
  display: flex;
  gap: var(--p-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--p-space-7);
  padding-bottom: var(--p-space-4);
}

.p-th-signup__title { font-size: 15px; font-weight: 600; color: var(--p-text); margin-bottom: 8px; }

.p-th-signup__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0 0 14px;
}

/* ——— 27.13 · Responsive ——— */
@media (max-width: 600px) {
  .p-th-hero__title { font-size: 24px; }

  .p-th-line { flex-wrap: wrap; }
  .p-th-line__total { text-align: left; width: 100%; }
  .p-th-line__totlabel { margin-bottom: 2px; }

  .p-th-actions .btn-primary,
  .p-th-actions .btn-secondary { width: 100%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PARTE 28 · PRESUPUESTO DE EMBALAJE
   ══════════════════════════════════════════════════════════════════════════ */

/* ——— 28.1 · Anchos ———
   Mismo criterio que la ficha de categoría y el carrito: se neutraliza la
   envoltura de GeneratePress —relleno, fondo de tarjeta y contenedor— y mandan
   los contenedores del diseño.

   La cabecera de la entrada se apaga: la página no lleva título y ese hueco
   reservado dejaba un vacío enorme entre la cabecera del sitio y las migas. */
.p-quote .site-content,
.p-quote .content-area,
.p-quote .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.p-quote .inside-article {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.p-quote .entry-header,
.p-quote .page-header { display: none; }

.p-quote .entry-content { max-width: none; margin: 0; }

/* El formulario vive en una columna estrecha, que es lo que pide un formulario
   largo; lo de debajo se abre al ancho del sitio. La calle va SUMADA al ancho
   máximo para que la columna mida de verdad lo que dice. */
/* La cabecera va a ancho de contenedor y no a los 820px del formulario: es la
   presentación de la página, no parte del cuestionario. El texto sigue
   limitado por su propio ancho de lectura, así que ensanchar la caja no deja
   líneas de 1.300px. */
.p-q-head {
  max-width: var(--p-container);
  margin: 0 auto;
  padding: var(--p-space-4) var(--p-gutter) 0;
}

/* Sin tope de ancho: son la presentación de la página y acompañan al H1, que
   también va a ancho completo. Los 40ch y 72ch que tenían los dejaban en una
   columna estrecha a la izquierda, como si fueran una barra lateral. */
.p-q-sub {
  margin: 0 0 var(--p-space-3);
  font-family: var(--p-font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--p-text);
  text-wrap: balance;
}

.p-q-head .p-q-lead { max-width: none; }

/* Titular, subtítulo y entradilla comparten eje y ancho con el cuestionario:
   el mismo 80% y centrados. Antes ocupaban todo el contenedor mientras el
   formulario iba al 80%, y la página se leía como dos bloques distintos
   pegados uno encima de otro. */
/* Tres clases en el titular, y no dos, por una razón medida: quien le fija el
   margen no es `.p-quote .p-q-title` (0,2,0) sino `.p-scope h1:not(.p-h2)`,
   que vale (0,2,1) —el `:not()` suma la especificidad de lo que lleva dentro—
   y trae `margin: 20px 0 16px`. Con dos clases el titular salía con el ancho
   correcto pero pegado 124px a la izquierda de su propio subtítulo y del
   formulario. `.p-quote .p-q-head .p-q-title` vale (0,3,0) y manda.

   Es la trampa del §17.41 otra vez, con el agravante de que la excepción
   `:not(.p-h2)` que se añadió para el H1 de la portada es justo lo que subió
   la especificidad de esa regla. */
.p-quote .p-q-head .p-q-title,
.p-q-sub,
.p-q-head .p-q-lead {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.p-quote .p-q-head .p-q-title { margin-top: 0; margin-bottom: var(--p-space-3); }

/* ——— El cuestionario, al 80% ———
   Vive dentro de .p-q-head, que ahora es ancho para que quepan el titular y la
   entradilla. A todo lo ancho, un formulario de 1.185px obliga a recorrer la
   pantalla entera de etiqueta a campo. Se centra al 80%, y con él las alertas
   y la caja de contexto, que tienen que compartir su eje. */
.p-q-head .p-q-form,
.p-q-head .p-q-alert,
.p-q-head .p-q-context {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* ——— Las cuatro razones ———
   Bloque migrado de la página de producción. Va sobre crema y a ancho
   completo, entre el formulario y el resto de apartados. */
.p-q-why {
  background: var(--p-surface);
  border-top: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
  margin-top: var(--p-space-10);
  padding: var(--p-space-10) 0;
}

.p-q-why > * {
  max-width: var(--p-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--p-gutter);
  padding-right: var(--p-gutter);
}

/* `.p-quote .p-q-h2` (0,2,0) se define más abajo con `margin: 0 0 …` y le
   ganaba por orden, anulando los márgenes automáticos que este bloque necesita
   para centrarse. Con `.p-quote` delante son (0,3,0) y mandan estos.
   Sin el `margin: auto` el titular se quedaba pegado al borde izquierdo de la
   ventana mientras la rejilla de debajo se centraba a 1.320px. */
.p-quote .p-q-why .p-q-h2 {
  max-width: var(--p-container);
  margin: 0 auto var(--p-space-8);
}

.p-q-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--p-space-7);
}

.p-q-why__item { border-top: 2px solid var(--p-orange); padding-top: var(--p-space-3); }

.p-q-why__t {
  margin: 0 0 6px;
  font-family: var(--p-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--p-text);
}

.p-q-why__d { margin: 0; font-size: 14px; line-height: 1.65; color: var(--p-text-2); }

@media (max-width: 980px) {
  .p-q-head,
  .p-q-why > * { padding-left: var(--p-gutter-tablet); padding-right: var(--p-gutter-tablet); }
  .p-q-sub { font-size: 19px; }
}

@media (max-width: 767px) {
  .p-q-head,
  .p-q-why > * { padding-left: var(--p-gutter-mobile); padding-right: var(--p-gutter-mobile); }
}

.p-q-extras {
  max-width: var(--p-container);
  margin: 0 auto;
  padding: var(--p-space-9) var(--p-gutter) var(--p-space-10);
}

.p-q-done {
  max-width: calc(720px + var(--p-gutter) * 2);
  margin: 0 auto;
  padding: var(--p-space-8) var(--p-gutter) var(--p-space-11);
}

/* ——— 28.2 · Migas y titular ——— */
/* Mismo contenedor que la cabecera, no el del formulario: estaban centradas a
   900px mientras el titular se centraba a 1.320px, así que empezaban 143px más
   a la derecha que el H1. */
.p-q-crumbs {
  max-width: var(--p-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--p-text-2);
  padding: var(--p-space-5) var(--p-gutter) 0;
}

.p-q-crumbs a { color: var(--p-text-2); }
.p-q-crumbs a:hover { color: var(--p-orange); }
.p-q-crumbs__now { color: var(--p-text); font-weight: 600; }

/* `.p-quote` delante: `.p-scope h1` de la PARTE 1 vale (0,1,1) y le ganaría a
   una clase suelta. Es la trampa del §15.40. */
.p-quote .p-q-title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: 0 0 10px;
  color: var(--p-text);
  text-wrap: pretty;
}

.p-q-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0 0 var(--p-space-5);
}

/* ——— 28.3 · De dónde viene la solicitud ——— */
.p-q-context {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  background: var(--p-surface);
  padding: 13px 16px;
  margin-bottom: var(--p-space-4);
}

.p-q-context__label {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 8px;
}

.p-q-context__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 3px 0;
  color: var(--p-text);
}

.p-q-context__qty { color: var(--p-text-2); white-space: nowrap; }

/* ——— 28.4 · Aviso de errores ——— */
.p-q-alert {
  border: 1px solid #a85b00;
  background: rgba(168, 91, 0, .06);
  border-radius: var(--p-radius-md);
  padding: 13px 16px;
  margin-bottom: var(--p-space-4);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--p-text);
}

/* ——— 28.5 · La caja del formulario ——— */
.p-q-form {
  display: grid;
  gap: var(--p-space-4);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  background: var(--p-bg);
  box-shadow: 0 18px 40px rgba(26, 37, 69, .08);
  padding: 28px;
}

/* El campo trampa: fuera de la vista, pero NO con `display: none`. Algunos
   robots lo detectan y lo saltan; así lo rellenan igual. */
.p-q-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.p-q-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--p-space-4);
}

.p-q-field { display: block; }

.p-q-field__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--p-text);
  margin-bottom: 6px;
}

.p-q-opt { font-weight: 400; color: var(--p-text-2); }

/* Las MISMAS medidas que los campos de finalizar compra —44px de alto, radio de
   botón, 12px de relleno—: son el mismo formulario a ojos del cliente y no
   tiene sentido que se vean distintos.

   `.p-quote` delante otra vez: las reglas de campo de GeneratePress llevan
   elemento en el selector y ganarían a una clase sola. */
.p-quote .p-q-form input[type="text"],
.p-quote .p-q-form input[type="email"],
.p-quote .p-q-form input[type="tel"],
.p-quote .p-q-form select,
.p-quote .p-q-form textarea {
  width: 100%;
  height: 44px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-btn);
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--p-text);
  background: var(--p-bg);
  box-sizing: border-box;
  outline: none;
}

.p-quote .p-q-form textarea {
  height: auto;
  min-height: 92px;
  padding: 11px 12px;
  line-height: 1.5;
  resize: vertical;
}

.p-quote .p-q-form input:focus,
.p-quote .p-q-form select:focus,
.p-quote .p-q-form textarea:focus {
  border-color: var(--p-orange);
  outline: 2px solid var(--p-orange);
  outline-offset: 1px;
}

.p-q-field.has-error input,
.p-q-field.has-error select,
.p-q-field.has-error textarea,
.p-q-block.has-error .p-q-file { border-color: #a85b00; }

.p-q-field__error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #a85b00;
}

.p-q-field__error--center { text-align: center; }

/* ——— 28.6 · Categorías, como fichas ——— */
.p-q-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.p-q-chip { margin: 0; cursor: pointer; }

/* El control sigue en el formulario y en el recorrido del tabulador: se aparta
   de la vista, no se apaga. */
.p-q-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.p-q-chip span {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-pill);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--p-text);
  background: var(--p-bg);
  transition: border-color .18s, background .18s;
}

.p-q-chip input:checked + span {
  border-color: var(--p-orange);
  background: var(--p-orange-soft);
}

.p-q-chip input:focus-visible + span {
  outline: 2px solid var(--p-orange);
  outline-offset: 2px;
}

/* ——— 28.7 · Adjunto ——— */
.p-q-file {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px dashed var(--p-border);
  background: var(--p-surface);
  color: var(--p-text);
  border-radius: var(--p-radius-md);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}

.p-q-file:hover { border-color: var(--p-orange); }

.p-q-file input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.p-q-file__plus { color: var(--p-orange); font-family: var(--p-font-mono); }
.p-q-file__text { min-width: 0; }

.p-q-file__hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--p-text-2);
}

/* ——— 28.8 · Consentimientos ——— */
.p-q-consent {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--p-border);
  padding-top: var(--p-space-4);
}

.p-q-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin: 0;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--p-text-2);
}

.p-q-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--p-orange);
  margin: 1px 0 0;
}

.p-q-check a { color: var(--p-orange); text-decoration: underline; }

/* ——— 28.9 · Suma y envío ——— */
.p-q-send {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
  flex-wrap: wrap;
}

.p-q-sum {
  font-family: var(--p-font-mono);
  font-size: 13px;
  color: var(--p-text);
  white-space: nowrap;
}

.p-quote .p-q-form input.p-q-sum__input {
  width: 68px;
  height: 44px;
  padding: 0 10px;
  text-align: center;
}

.p-q-submit {
  flex: 1 1 220px;
  min-width: 200px;
  height: 52px;
  font-size: 15px;
}

.p-q-note {
  font-size: 12px;
  color: var(--p-text-2);
  text-align: center;
  margin: 0;
}

/* ——— 28.10 · Lo de debajo ——— */
.p-q-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--p-space-5);
  margin-bottom: var(--p-space-6);
}

.p-q-col__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--p-text);
  margin-bottom: var(--p-space-3);
}

.p-q-list { display: grid; gap: 8px; }

.p-q-list__row {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  color: var(--p-text);
}

.p-q-list__plain { font-size: 13.5px; line-height: 1.5; color: var(--p-text-2); }
.p-q-list__plain strong { color: var(--p-text); }

.p-q-tick,
.p-q-list__row--tick::before { color: #177a4c; font-weight: 700; flex: none; }

.p-q-num,
.p-q-list--num > .p-q-list__plain::before {
  font-family: var(--p-font-mono);
  font-size: 11.5px;
  color: var(--p-text-2);
  margin-right: 6px;
}

.p-q-strip {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  background: var(--p-surface);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-4);
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--p-text-2);
  margin-bottom: var(--p-space-3);
}

.p-q-strip__btn,
.p-q-strip .wp-block-button > .wp-block-button__link { font-size: 13px; padding: 9px 15px; }

.p-q-phone {
  font-size: 13px;
  color: var(--p-text-2);
  margin: 0 0 var(--p-space-8);
}

.p-q-phone strong { color: var(--p-text); }
.p-q-phone a { color: var(--p-orange); }

/* ——— 28.11 · Preguntas frecuentes ———
   Se reutiliza el acordeón de la ficha de categoría: mismo patrón en todo el
   sitio y ni una regla nueva. A ancho completo, no en la columna estrecha del
   formulario: aquí abajo ya manda el contenedor del sitio. */
.p-q-faq { max-width: none; }

/* ——— 28.12 · Titulares ——— */
.p-quote .p-q-h2 {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0 0 var(--p-space-3);
  color: var(--p-text);
}

.p-quote .p-q-h2--big { font-size: 26px; letter-spacing: -.03em; margin-bottom: var(--p-space-5); }

/* ——— 28.13 · Solicitud recibida ——— */
.p-q-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--p-space-4);
  margin-bottom: var(--p-space-6);
}

/* 32px: el mismo número que el interlineado del titular de al lado. */
.p-q-hero__tick {
  width: 32px;
  height: 32px;
  border-radius: var(--p-radius-pill);
  background: rgba(23, 122, 76, .12);
  color: #177a4c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  flex: none;
}

.p-quote .p-q-hero__title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -.03em;
  margin: 0 0 8px;
  color: var(--p-text);
}

.p-q-hero__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--p-text-2);
  margin: 0;
}

.p-q-ref {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 18px 20px;
  margin-bottom: var(--p-space-6);
}

.p-q-ref__label {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 6px;
}

.p-q-ref__value {
  display: block;
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--p-text);
}

.p-q-steps {
  list-style: none;
  margin: 0 0 var(--p-space-7);
  padding: 0;
  display: grid;
  gap: 11px;
}

.p-q-steps__item { display: flex; gap: var(--p-space-3); align-items: flex-start; }

.p-q-steps__n { font-weight: 700; color: var(--p-text-2); flex: none; }
.p-q-steps__item.is-done .p-q-steps__n { color: #177a4c; }

.p-q-steps__t { font-size: 13.5px; color: var(--p-text-2); }

.p-q-actions { display: flex; gap: var(--p-space-3); flex-wrap: wrap; }

/* ——— 28.14 · Responsive ——— */
@media (max-width: 700px) {
  .p-q-row { grid-template-columns: minmax(0, 1fr); }
  .p-q-form { padding: 20px; }
  .p-quote .p-q-title { font-size: 26px; }
  .p-q-submit { flex: 1 1 100%; }
  .p-q-strip { align-items: flex-start; }
  .p-q-actions .btn-primary,
  .p-q-actions .btn-secondary { width: 100%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PARTE 29 · PREVISUALIZACIÓN DEL BUSCADOR
   ══════════════════════════════════════════════════════════════════════════ */

/* El panel cuelga del formulario, así que este necesita ser el origen de la
   posición. `overflow: visible` NO es de adorno: la barra del buscador es una
   caja con borde y radio, y sin esto el panel se recortaría dentro de ella. */
.p-search {
  position: relative;
  overflow: visible;
}

.p-search__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  box-shadow: 0 18px 40px rgba(26, 37, 69, .14);
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}

.p-search__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--p-border);
  color: var(--p-text);
  text-decoration: none;
}

.p-search__item:last-of-type { border-bottom: 0; }

/* El resaltado del teclado y el del ratón son el MISMO: quien navega con
   flechas tiene que ver exactamente lo que vería pasando el ratón. */
.p-search__item:hover,
.p-search__item.is-active { background: var(--p-surface); }

.p-search__thumb {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--p-radius-sm);
  background: var(--p-surface);
  overflow: hidden;
}

.p-search__thumb img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.p-search__body { min-width: 0; }

/* El SKU en una sola línea: partido por la mitad no se reconoce, que es
   justamente para lo que está ahí. Si no cabe, se recorta con puntos
   suspensivos, que al menos deja ver el principio. */
.p-search__sku {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-search__name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--p-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-search__specs {
  display: block;
  font-family: var(--p-font-mono);
  font-size: 10.5px;
  color: var(--p-text-2);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tope al precio. La columna es de ancho automático, así que un precio largo
   —y `get_price_html()` llegó a devolver un párrafo entero— se quedaba con toda
   la fila y aplastaba el nombre hasta hacerlo desaparecer. Ya se corrige en el
   PHP, pero el tope evita que vuelva a pasar por cualquier otra vía. */
.p-search__price {
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text);
  white-space: nowrap;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-search__all {
  display: block;
  padding: 11px 14px;
  border-top: 1px solid var(--p-border);
  background: var(--p-surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--p-orange);
  text-align: center;
}

.p-search__all:hover { color: var(--p-orange-dark); }

.p-search__empty {
  padding: 16px 14px;
  font-size: 13px;
  color: var(--p-text-2);
  text-align: center;
}

/* En pantallas estrechas la barra del buscador se estira de lado a lado y el
   panel con ella; la ficha técnica sobra ahí. */
@media (max-width: 600px) {
  .p-search__specs { display: none; }
  .p-search__panel { max-height: 60vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 30 · PÁGINAS LEGALES

   Aquí vivía el estilo del shortcode [precifilm_condiciones]: apartados
   numerados, el número colgando al margen y los datos pendientes en rojo. El
   shortcode se retiró —las condiciones de compra las escribe el cliente con
   bloques de Gutenberg, que puede editar sin tocar código— y con él se fue ese
   estilo, que no tenía a qué aplicarse.

   Lo que se queda es la disposición de la PÁGINA: ancho completo y sin barra
   lateral. Eso vale para cualquier página legal, la monte quien la monte, y es
   lo que evita que un texto largo salga dentro de la caja con sombra de
   GeneratePress y con un widget de categorías al lado.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 31 · OFERTAS Y PÁGINAS LEGALES A ANCHO COMPLETO
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— 31.1 · La barra de la página de ofertas ———
   El cuerpo lleva `p-cat`, así que la rejilla, la tarjeta, el selector de
   orden y la paginación ya vienen dadas. Lo que falta es la fila de arriba:
   WooCommerce entrega el contador de resultados y el desplegable de orden como
   dos hermanos sueltos dentro de `.wc-columns-container`, uno debajo del otro.
   Se colocan en una sola fila con la misma caja que `.p-cat-toolbar` de las
   categorías.

   Las posiciones se escriben con `grid-area` explícito y no con `order`: el
   contenedor tiene cuatro hijos de tipos distintos y la colocación automática
   los repartiría según el orden del marcado, que es justo lo que se quiere
   cambiar. */
.p-ofertas .wc-columns-container {
  max-width: var(--p-container);
  margin: 0 auto;
  padding: 0 var(--p-gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--p-space-5);
}

.p-ofertas .woocommerce-notices-wrapper { grid-area: 1 / 1 / 2 / 3; }

.p-ofertas .woocommerce-result-count,
.p-ofertas .woocommerce-ordering {
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--p-border);
}

.p-ofertas .woocommerce-result-count {
  grid-area: 2 / 1 / 3 / 2;
  font-size: 13.5px;
  color: var(--p-text-2);
  padding-left: 14px;
}

.p-ofertas .woocommerce-result-count strong { color: var(--p-text); font-weight: 600; }

/* ——— 31.1b · La cabecera de ofertas ———
   Es la misma `.p-cat-head` de las categorías, que ya viene estilada. Lo único
   que hace falta aquí es el aire de debajo: en una categoría, tras la cabecera
   viene la fila de subcategorías, y en ofertas viene directamente la barra del
   listado. */
.p-ofertas-page .p-cat-head { margin-bottom: var(--p-space-8); }

/* La franja azul de cierre respira más aquí que en «Quiénes somos»: viene
   detrás de una rejilla de productos, no de un párrafo. */
.p-ofertas-page .p-pag-cierre { margin-top: var(--p-space-10); }

.p-ofertas .woocommerce-ordering {
  grid-area: 2 / 2 / 3 / 3;
  float: none;
  padding-right: 14px;
}

.p-ofertas .woocommerce-ordering select { height: 36px; margin: 0; }

.p-ofertas ul.products {
  grid-area: 3 / 1 / 4 / 3;
  margin-top: var(--p-space-6);
  padding: 0;
}

/* La caja de la barra: se dibuja con los bordes de las dos celdas más los
   laterales del contenedor, porque los dos elementos son hermanos y no hay
   dónde colgar un borde común sin añadir marcado. */
.p-ofertas .woocommerce-result-count { border-left: 1px solid var(--p-border); border-top: 1px solid var(--p-border); border-top-left-radius: var(--p-radius-md); border-bottom-left-radius: var(--p-radius-md); }
.p-ofertas .woocommerce-ordering { border-right: 1px solid var(--p-border); border-top: 1px solid var(--p-border); border-top-right-radius: var(--p-radius-md); border-bottom-right-radius: var(--p-radius-md); }

/* ——— 31.2 · El texto de cierre de ofertas ——— */
.p-ofertas__texto {
  max-width: var(--p-container);
  margin: var(--p-space-11) auto var(--p-space-12);
  padding: var(--p-space-9) var(--p-gutter) 0;
  border-top: 1px solid var(--p-border);
  display: grid;
  gap: var(--p-space-5);
}

.p-ofertas__texto .p-h2 { margin-bottom: var(--p-space-2); max-width: 30ch; }

/* Los párrafos van a ancho completo y en tres columnas a partir de 1100px: son
   tres bloques independientes —precio, variedad y calidad— y en una sola
   columna de 76 caracteres sobre un contenedor de 1.320px sobraba medio ancho
   de pantalla vacío. Con `columns` no hay que tocar el marcado y cada párrafo
   cae entero en su columna gracias a `break-inside`. */
.p-ofertas__texto p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--p-text-2);
  break-inside: avoid;
}

@media (min-width: 1100px) {
  .p-ofertas__texto { grid-template-columns: repeat(3, 1fr); gap: var(--p-space-9); }
  .p-ofertas__texto .p-h2 { grid-column: 1 / -1; }
}

/* El titular de la página, que lo imprime GeneratePress, tiene que respetar el
   contenedor: `p-cat` le quita el relleno a la envoltura y sin esto quedaría
   pegado al borde de la ventana. */
.p-cat .entry-header,
.p-legal-page .entry-header,
.p-legal-page .entry-content {
  max-width: var(--p-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--p-gutter);
  padding-right: var(--p-gutter);
}

/* ——— 31.3 · Páginas legales a ancho completo ———
   Se neutraliza la tarjeta de GeneratePress igual que en el catálogo. El texto
   sigue limitado a 76 caracteres por línea: eso lo hace `.p-legal`, y es lo
   que mantiene la lectura cómoda aunque la página ocupe todo el ancho. */
.p-legal-page .site-content,
.p-legal-page .content-area,
.p-legal-page .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.p-legal-page .inside-article {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.p-legal-page .entry-content { max-width: var(--p-container); }
.p-legal-page .entry-header { margin-bottom: var(--p-space-7); }

@media (max-width: 980px) {
  .p-ofertas .wc-columns-container,
  .p-ofertas__texto,
  .p-cat .entry-header,
  .p-legal-page .entry-header,
  .p-legal-page .entry-content { padding-left: var(--p-gutter-tablet); padding-right: var(--p-gutter-tablet); }
}

@media (max-width: 767px) {
  .p-ofertas .wc-columns-container,
  .p-ofertas__texto,
  .p-cat .entry-header,
  .p-legal-page .entry-header,
  .p-legal-page .entry-content { padding-left: var(--p-gutter-mobile); padding-right: var(--p-gutter-mobile); }

  /* En móvil el contador y el orden no caben en una fila. */
  .p-ofertas .wc-columns-container { grid-template-columns: 1fr; }
  .p-ofertas .woocommerce-result-count { grid-area: 2 / 1 / 3 / 2; border-radius: 0; border-right: 1px solid var(--p-border); border-top-right-radius: var(--p-radius-md); border-top-left-radius: var(--p-radius-md); }
  .p-ofertas .woocommerce-ordering { grid-area: 3 / 1 / 4 / 2; border-radius: 0; border-left: 1px solid var(--p-border); border-top: 0; border-bottom-left-radius: var(--p-radius-md); border-bottom-right-radius: var(--p-radius-md); }
  .p-ofertas ul.products { grid-area: 4 / 1 / 5 / 2; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 32 · QUIÉNES SOMOS Y CONTACTO
   Mismo esqueleto que la portada: una <section> por bloque, con su fondo, y un
   .p-container dentro. Así estas dos páginas se leen como parte del sitio y no
   como un documento pegado.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La página ocupa todo el ancho para que los fondos de cada apartado lleguen a
   los bordes. El contenedor lo pone cada sección.

   El envoltorio exterior de GeneratePress hay que liberarlo TAMBIÉN, y es la
   misma trampa de la PARTE 16: `div#page.site.grid-container` lleva su propio
   tope y márgenes automáticos, así que sin esta regla las bandas se quedaban
   dentro de él —medido en dev el 20/09/2026: la cabecera de «Quiénes somos» a
   1200px con 113 de blanco a cada lado en una ventana de 1440—. La ficha de
   categoría y Ofertas no lo sufrían porque entran por `.p-cat`. */
.p-pagfull #page.grid-container,
.p-pagfull #page.container {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.p-pagfull .site-content,
.p-pagfull .content-area,
.p-pagfull .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.p-pagfull .inside-article {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.p-pagfull .entry-content { max-width: none; margin: 0; }

.p-pag-sec { padding: var(--p-space-11) 0; }
.p-pag-sec:first-child { padding-top: var(--p-space-9); }

/* ——— 32.1 · Cabecera ——— */
.p-pag-head__inner { max-width: 68ch; }
.p-pag-head .p-eyebrow { margin-bottom: var(--p-space-4); }
.p-pag-head .p-cat-head__title { font-size: 40px; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 var(--p-space-3); }
.p-pag-head .p-lead { margin: 0; }

/* ——— 32.2 · Bloque a dos columnas ———
   El rótulo y el titular a la izquierda, el texto a la derecha. Es la misma
   proporción que la cabecera de categoría, y evita el párrafo suelto de 1.240px
   que hacía que la página pareciera un documento de Word. */
.p-pag-split {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(320px, 1.2fr);
  gap: var(--p-space-11);
  align-items: start;
}

.p-pag-split__head { display: grid; gap: var(--p-space-3); align-content: start; }

/* `justify-items: start` en el contenedor y no en la pastilla: si no, el
   .p-eyebrow —que es hijo directo de una rejilla— se estira hasta el ancho de
   la columna y sale como una banda naranja. Era el defecto más visible de la
   primera versión. */
.p-pag-split__head,
.p-pag-head__inner { justify-items: start; }

.p-pag-split__head .p-h2 { margin: 0; }
.p-pag-split__head .p-small { color: var(--p-text-2); margin: 0; }

.p-pag-split__body { display: grid; gap: var(--p-space-4); }
.p-pag-split__body p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--p-text-2); }

/* ——— 32.3 · Vías de contacto ——— */
.p-pag-contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--p-border);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow: hidden;
}

.p-pag-via { background: var(--p-bg); padding: 22px 24px; display: grid; gap: 6px; align-content: start; }

.p-pag-via__k {
  font-family: var(--p-font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-text-2);
}

.p-pag-via__v {
  font-family: var(--p-font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--p-text);
  text-decoration: none;
  line-height: 1.3;
}

a.p-pag-via__v:hover { color: var(--p-orange); }
.p-pag-via__n { font-size: 13px; color: var(--p-text-2); }

/* ——— 32.4 · Fichas cortas ——— */
.p-pag-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--p-space-6);
  margin-top: var(--p-space-9);
}

.p-pag-split + .p-pag-cards { margin-top: var(--p-space-9); }
.p-pag-split__body .p-pag-cards { margin-top: 0; }

.p-pag-card {
  border-top: 2px solid var(--p-orange);
  padding-top: var(--p-space-3);
  display: grid;
  gap: 6px;
  align-content: start;
}

.p-pag-card__t { margin: 0; font-family: var(--p-font-ui); font-size: 15px; font-weight: 600; color: var(--p-text); }
.p-pag-card__d { margin: 0; font-size: 14px; line-height: 1.65; color: var(--p-text-2); }

/* ——— 32.5 · Cierre sobre azul ——— */
.p-pag-cierre__inner {
  display: grid;
  grid-template-columns: minmax(320px, 1.4fr) auto;
  gap: var(--p-space-9);
  align-items: center;
}

.p-pag-cierre .p-h2 { margin: 0 0 var(--p-space-3); max-width: 22ch; }
.p-pag-cierre p { margin: 0; max-width: 62ch; }
.p-pag-cierre .p-actions { justify-content: flex-end; }

@media (max-width: 980px) {
  .p-pag-split,
  .p-pag-cierre__inner { grid-template-columns: 1fr; gap: var(--p-space-7); }
  .p-pag-cierre .p-actions { justify-content: flex-start; }
  .p-pag-head .p-cat-head__title { font-size: 32px; }
}

/* ——— 15.3b · El extracto de la tarjeta, a dos líneas ———
   El texto sale ya recortado a 12 palabras desde PHP. Este límite es la red:
   un «Extracto para el catálogo» escrito a mano puede venir más largo, y una
   tarjeta más alta que sus vecinas desalinea toda la fila de la rejilla. */
.p-prodgrid ul.products li.product .p-loop-specs {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* En la vista de lista hay sitio de sobra: ahí se deja respirar. */
.p-view-list.p-cat ul.products li.product .p-loop-specs {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 30 — CORRECCIONES DEL 17/09/2026

   Tres arreglos medidos en dev. Ninguno cambia el diseño: devuelven a su sitio
   lo que ya estaba escrito y añaden la pieza que faltaba.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— 30.1 · Miga de pan pintada por Yoast ———
   Con Yoast activo la miga la imprime `yoast_breadcrumb()` (ver el bloque
   «MIGA DE PAN» de functions.php). Su marcado NO es el de WooCommerce: mete
   todos los rastros dentro de UN solo <span>, así que con el `display: flex`
   de `.p-breadcrumb` quedaría un único elemento flexible y el `gap` no
   separaría nada. Se pasa a flujo en línea, que es como se compone un rastro
   de texto, y el aire entre piezas lo pone el propio separador.

   El aspecto es el mismo: color, peso y tamaño siguen saliendo de
   `.p-breadcrumb`, que no se toca. */
.p-breadcrumb--yoast {
  display: block;
  line-height: 1.7;
}

.p-breadcrumb--yoast .p-breadcrumb__sep { margin: 0 var(--p-space-2); }

/* Yoast marca el elemento actual con su propia clase. El `<nav>` ya pinta en
   negro y negrita —ver 11.2—, así que aquí solo hay que evitar que herede el
   gris de los enlaces. */
.p-breadcrumb--yoast .breadcrumb_last {
  color: var(--p-text);
  font-weight: 600;
}

/* ——— 30.2 · Ancla de la guía de compra ———
   El id viejo se conserva como alias para no romper enlaces ya escritos fuera
   del tema. Es un elemento vacío: no debe ocupar ni una línea en el flujo, y
   el desfase que ya tenía la sección tiene que valerle también a él. */
.p-anchor-alias {
  display: block;
  height: 0;
  overflow: hidden;
  scroll-margin-top: var(--p-space-9);
}

/* ——— 30.3 · Espaciado del bloque de opiniones ———
   `.p-pdp-h2` vale (0,1,0) y `.p-h2, .p-scope h2` de la PARTE 1 vale (0,1,1):
   es la trampa del §17.40, y aquí llevaba ganando desde siempre. Medido en dev
   sobre una ficha: el titular «Valoraciones de clientes» salía a 24px con
   `margin-bottom: 12px` en vez de los 26px y los 16px que pide el bloque, y la
   caja del formulario de WooCommerce quedaba pegada a 12px de un titular más
   grande de lo previsto.

   Se gana con dos clases (0,2,0) en lugar de con `!important`, para que las
   reglas responsive de más abajo puedan seguir ganándole (§17.21). */
.p-product .p-pdp-h2,
.p-cat .p-pdp-h2 {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 var(--p-space-4);
}

/* La caja del formulario de valoraciones nacía sin margen superior, así que
   con el producto sin reseñas se apoyaba directamente en el titular. Con
   reseñas, este margen colapsa con el `margin-bottom` de `.p-reviews` —son
   hermanos en flujo normal—, de modo que la separación es la misma en los dos
   casos y no se suma. */
.p-product .p-pdp-reviews #reviews { margin-top: var(--p-space-4); }

/* El reparto de estrellas y la lista son bloques distintos: sin esto, el
   último de ellos quedaba pegado a la caja del formulario cuando el margen no
   llegaba a colapsar (un plugin que meta algo entre medias, por ejemplo). */
.p-product .p-pdp-reviews > * + * { margin-top: var(--p-space-4); }

/* Y el formulario de dentro, con su propio aire: el rótulo «Deja tu
   valoración» y el campo de estrellas se tocaban. */
.p-product #reviews .comment-form > p { margin: 0 0 var(--p-space-4); }
.p-product #reviews .comment-form > p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  /* Repite las dos clases para empatar con la regla de arriba y ganar por
     orden: un media query no aporta especificidad por sí mismo (§17.19). */
  .p-product .p-pdp-h2,
  .p-cat .p-pdp-h2 { font-size: 22px; }
}

/* ——— 30.4 · Botón flotante de WhatsApp ———
   Lo imprime `wp_footer` desde header-footer.php, en toda la web menos en
   finalizar compra.

   Es un botón de icono: circular en todos los tamaños, sin rótulo. Con rótulo
   ocupaba 148px de ancho y, estando ahora en TODAS las páginas, se comía una
   esquina del catálogo y del carrito durante todo el recorrido. El nombre
   accesible lo dan `aria-label` y `title` del enlace.

   Abajo a la IZQUIERDA, a petición. Por encima de todo menos del panel de
   filtros (999/1000 en la §20.7) y del modal de solicitar muestra (1100 en la
   PARTE 24): 900 lo deja por debajo de los dos y por encima del contenido.

   En móvil el panel de filtros entra también por la izquierda, pero no
   choca: cuando está abierto lo tapa entero (z 1000), y cerrado está fuera de
   la pantalla. */
.p-whatsapp {
  position: fixed;
  left: var(--p-space-5);
  bottom: var(--p-space-5);
  z-index: 900;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* El verde de WhatsApp es de la marca de WhatsApp, no de la de Precifilm:
     por eso es el único color literal del archivo fuera de :root. Va en una
     variable propia para que no se copie suelto en ninguna otra regla. */
  --p-whatsapp: #25D366;
  --p-whatsapp-dark: #1da851;

  background: var(--p-whatsapp);
  color: #fff;

  /* 56px de lado: por encima del mínimo táctil de 44 y del tamaño al que el
     icono de 28 se lee bien. `width`/`height` en lugar de relleno, para que el
     círculo no dependa de lo que lleve dentro. */
  width: 56px;
  height: 56px;
  border-radius: 50%;

  text-decoration: none;

  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: background-color .2s, transform .2s, box-shadow .2s;
}

/* GeneratePress pinta los enlaces con su color de acento, incluido el :hover.
   Se fija el blanco en los cuatro estados para que el icono no cambie de color
   sobre el verde. */
.p-whatsapp:hover,
.p-whatsapp:focus,
.p-whatsapp:active,
.p-whatsapp:visited { color: #fff; text-decoration: none; }

.p-whatsapp:hover,
.p-whatsapp:focus {
  background: var(--p-whatsapp-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
}

.p-whatsapp:focus-visible {
  outline: 3px solid var(--p-navy);
  outline-offset: 3px;
}

.p-whatsapp__icon { display: block; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .p-whatsapp { transition: none; }
  .p-whatsapp:hover,
  .p-whatsapp:focus { transform: none; }
}

/* En móvil se arrima un poco más al borde y se sube lo que ocupe la barra del
   navegador, que en iOS se come la franja de abajo. */
@media (max-width: 767px) {
  .p-whatsapp {
    left: var(--p-space-4);
    bottom: calc(var(--p-space-4) + env(safe-area-inset-bottom, 0px));
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 31 — BLOQUES DE WORDPRESS CON EL SISTEMA DE DISEÑO

   La portada y las páginas se editan con bloques nativos (Grupo, Título,
   Párrafo, Botones, Lista) que llevan las clases del tema: el diseño sigue
   saliendo de este archivo (§5bis del CLAUDE.md). Los botones, el enlace con
   flecha y el botón de la franja de presupuesto se conectaron sumando su
   selector a las reglas que ya existían, sin copiar propiedades. Aquí queda
   solo lo que no tenía regla a la que sumarse: lo que cambia al pasar un
   elemento de <div> o <span> a párrafo, que es lo que produce el editor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* GeneratePress da a todo <p> un margen inferior de 1.5em. Los componentes que
   en el HTML de antes eran <div> o <span> no lo llevaban: al pasar a párrafo lo
   heredaban y abrían huecos que el diseño no tiene. */
.p-more,
.p-check p {
  margin: 0;
}

/* El enlace «Ver todo →» junto al titular: el párrafo que lo envuelve no debe
   estirar la fila ni partirse en dos líneas. */
.p-row-between > .p-more { flex: none; }

/* En las columnas de «Film y precinto» el enlace era una celda de la rejilla y
   medía lo suyo: 13,5px con interlineado 21,6px. Envuelto en un párrafo heredaba
   los 15px y el 1.7 de `.p-catalogo__col p`, y cada columna crecía 4px. Solo
   aquí: en «Descuento por volumen» el enlace iba en línea dentro de un bloque
   y ya medía lo mismo; aplicarlo en general lo encogía 2px (medido). */
.p-catalogo__col .p-more { font-size: 13.5px; line-height: 1.6; }

/* El contenedor de botones de WordPress trae su propio hueco (0.5em) en la
   hoja de diseño de bloques. Se iguala al de `.p-actions`, que es el del
   sistema. Dos clases para ganar a la del núcleo. */
.wp-block-buttons.p-actions { gap: var(--p-space-3); }

/* En la franja de presupuesto, el grupo de botones es un hijo de la caja
   flexible: sin esto se encogía y partía el rótulo en dos líneas. */
.p-quote__box > .wp-block-buttons { flex: none; margin: 0; }

/* ——— 31.2 · Páginas montadas con bloques ———
   Lo mismo que arriba para Quiénes somos, Contacto, Ofertas y Presupuesto. */

/* Respuesta del acordeón: en el bloque «Detalles» es un párrafo suelto y
   heredaba el margen inferior de 1.5em que GeneratePress da a todo <p>. */
.wp-block-details.p-cat-faq__item > p { margin: 0; }

/* Dentro de la columna de texto de una página (Contacto), la respuesta antigua
   era un <p> metido en `.p-pag-split__body`, y esa columna pone a sus párrafos
   15,5px con interlineado 1,75. Se repite aquí para que la página mida lo
   mismo: sin esto, el acordeón de Contacto encogía 37px (medido). */
.p-pag-split__body .wp-block-details.p-cat-faq__item > p { font-size: 15.5px; line-height: 1.75; }

/* Filas de «Esta opción es para ti si…»: el ✓ era un <span> dentro del texto,
   que el editor podía perder al editar la fila. Ahora lo pone el CSS, y una
   fila nueva lo trae sola. El texto alternativo vacío evita que un lector de
   pantalla lea «marca de verificación» delante de cada fila. */
.p-q-list__row--tick::before { content: '\2713' / ''; }

/* «Qué ocurre después»: los números 01, 02… eran texto escrito a mano. Con un
   contador, añadir o quitar un paso renumera la lista solo. */
.p-q-list--num { counter-reset: p-q-paso; }
.p-q-list--num > .p-q-list__plain::before {
  counter-increment: p-q-paso;
  content: counter(p-q-paso, decimal-leading-zero);
}

/* Las filas y los títulos de columna eran <div>; como párrafos llevaban el
   margen de GeneratePress. */
.p-q-list > p,
.p-q-strip > p { margin: 0; }
.p-q-strip > .wp-block-buttons { margin: 0; }

/* Tras enviar la solicitud la página enseña solo la confirmación, como con el
   shortcode. La clase la pone inc/quote-form.php en el <body>. */
.p-q-enviada .p-q-why,
.p-q-enviada .p-q-extras { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 3 · 33 — AVISOS DE WOOCOMMERCE FUERA DE LA TIENDA

   Los imprime `precifilm_avisos_fuera_de_la_tienda()` (inc/woo-loop.php) en
   las páginas que no son de la tienda —la portada, sobre todo—, donde hasta
   el 06/10/2026 añadir al carrito no daba ninguna confirmación.

   Se les da el aspecto de `.p-notice--ok` en vez del de WooCommerce, que trae
   su propio verde y su borde superior grueso.
   ═══════════════════════════════════════════════════════════════════════════ */

.p-avisos-sueltos { margin: 0 0 var(--p-space-5); }

.p-avisos-sueltos .woocommerce-notices-wrapper:empty { display: none; }

/* El ancho lo pone el contenedor del sitio, no el aviso: en la portada, que va
   a sangre, un aviso a todo lo ancho de la pantalla se lee fatal. */
.p-avisos-sueltos .woocommerce-message,
.p-avisos-sueltos .woocommerce-info,
.p-avisos-sueltos .woocommerce-error {
  max-width: var(--p-container);
  margin: var(--p-space-5) auto 0;
  padding: 14px 18px;
  border-radius: var(--p-radius-md);
  font-family: var(--p-font-ui);
  font-size: 14px;
  line-height: 1.5;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-space-4);
}

/* WooCommerce pinta un borde superior de 3px y un ::before con su icono. Los
   dos se retiran: el color y el contorno los da el sistema de diseño. */
.p-avisos-sueltos .woocommerce-message::before,
.p-avisos-sueltos .woocommerce-info::before,
.p-avisos-sueltos .woocommerce-error::before { display: none; }

.p-avisos-sueltos .woocommerce-message {
  background: rgba(23, 122, 76, .10);
  border: 1px solid rgba(23, 122, 76, .35);
  color: #125c39;
}

.p-avisos-sueltos .woocommerce-info {
  background: rgba(26, 37, 69, .06);
  border: 1px solid rgba(26, 37, 69, .20);
  color: var(--p-navy);
}

.p-avisos-sueltos .woocommerce-error {
  background: rgba(192, 57, 43, .08);
  border: 1px solid rgba(192, 57, 43, .35);
  color: #a02d21;
}

/* El enlace «Ver carrito» va dentro del propio aviso y es la acción que el
   cliente busca justo después de añadir, así que se pinta como botón y se
   empuja al final de la línea. */
.p-avisos-sueltos .woocommerce-message .button,
.p-avisos-sueltos .woocommerce-info .button {
  margin-left: auto;
  order: 2;
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  .p-avisos-sueltos .woocommerce-message,
  .p-avisos-sueltos .woocommerce-info,
  .p-avisos-sueltos .woocommerce-error { padding-left: var(--p-gutter); padding-right: var(--p-gutter); }
  .p-avisos-sueltos .woocommerce-message .button { margin-left: 0; width: 100%; }
}