/* =============================================================================
   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)
   ═══════════════════════════════════════════════════════════════════════════ */
.p-h1, .p-scope h1 {
  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 {
  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 {
  background: var(--p-orange); color: #fff;
  box-shadow: var(--p-shadow-cta);
}
.btn-primary:hover, .btn-primary: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 {
  background: #bf4530; box-shadow: 0 4px 10px rgba(235,101,78,.24); transform: translateY(0);
}

/* ——— Secundaria (contorno navy) ——— */
.btn-secondary {
  background: transparent; color: var(--p-navy); border-color: var(--p-navy);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--p-navy); color: #fff; border-color: var(--p-navy);
}
.btn-secondary:active { background: var(--p-navy-deep); border-color: var(--p-navy-deep); color:#fff; }

/* ——— Oscura (navy sólido) — CTA de tarjeta ——— */
.btn-dark {
  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 { background: #24325c; color: #fff; }
.btn-dark: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 {
  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 {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5); color: #fff;
}
.btn-ghost-light: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 {
  font-size: 13.5px; font-weight: 600; color: var(--p-orange); text-decoration: none;
}
.p-link: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; }
.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 { width: 100%; }
  .p-utility { display: none; }   /* teléfono pasa a la cabecera en móvil */
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 2 · 07 — WOOCOMMERCE (loop de catálogo)
   ═══════════════════════════════════════════════════════════════════════════ */
.p-scope .woocommerce ul.products { display: grid; grid-template-columns: repeat(4,1fr);
  gap: var(--p-gap-grid); margin: 0; }
.p-scope .woocommerce ul.products::before,
.p-scope .woocommerce ul.products::after { display: none; }
.p-scope .woocommerce 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 .woocommerce 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 .woocommerce ul.products { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 767px) { .p-scope .woocommerce 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 { 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 stats del hero: cada celda. */
.p-stat-item { display: flex; flex-direction: column; gap: 2px; }
.p-stat-item .p-caption { color: var(--p-text-2); }

/* 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); }
.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; }
.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%; }
}


/* ——— 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.1 · Fuera la descripción corta ——— */
.p-prodgrid ul.products li.product .p-loop-specs,
.p-prodgrid ul.products li.product .woocommerce-LoopProduct-link > ul,
.p-prodgrid ul.products li.product .woocommerce-LoopProduct-link > p:not([class]),
.p-prodgrid ul.products li.product > ul,
.p-prodgrid ul.products li.product > p:not([class]),
.p-prodgrid ul.products li.product > a:not([class]) {
  display: none !important;
}

/* ——— 8.2 · Fuera el badge de stock y el sufijo "/ bobina" ——— */
.p-prodgrid ul.products li.product .p-loop-stock,
.p-prodgrid ul.products li.product .woocommerce-price-suffix {
  display: none !important;
}

/* ——— 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. */
.p-hero .p-split {
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: var(--p-space-9);
}

/* 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. */
  max-height: 240px;
  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 {
  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 { width: 100%; }
}