/* ============================================================
   REDFIELD T&F - SISTEMA VISUAL "PIZARRA DE BOX" - hoja compartida.
   Generado como el denominador comun de las paginas redfield-*.html.
   Instrucciones de carga: GUIA-migracion-produccion.md (seccion 4).

   FUENTES AUTOHOSPEDADAS: descarga los 5 .woff2 en https://gwfh.mranftl.com/fonts
   (Permanent Marker 400; IBM Plex Sans 400/500/600/700, subset "latin" o "latin+latin-ext"),
   renombralos a los nombres de abajo y subelos por FTP a /wp-content/uploads/fonts/.
   Sin Google Fonts CDN (mas rapido + sin problema RGPD).
============================================================ */
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://www.redfieldtf.com/wp-content/uploads/fonts/permanent-marker-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://www.redfieldtf.com/wp-content/uploads/fonts/ibm-plex-sans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('https://www.redfieldtf.com/wp-content/uploads/fonts/ibm-plex-sans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('https://www.redfieldtf.com/wp-content/uploads/fonts/ibm-plex-sans-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('https://www.redfieldtf.com/wp-content/uploads/fonts/ibm-plex-sans-700.woff2') format('woff2');}

/* ============================================================
   BLINDAJE frente a Elementor "Ajustes del sitio" (Kit global, selector tipo
   .elementor-kit-XXX). El Kit imprime sus reglas como "clase + etiqueta"
   (p. ej. .elementor-kit-223 a), que siempre gana a una regla nuestra que sea
   solo una clase (.pz-link) o solo una etiqueta. Con !important lo evitamos.
   NO añadas mas !important fuera de este bloque y de las reglas ya marcadas
   mas abajo: cualquier regla NUEVA de color/subrayado que necesites debe
   llevar tambien !important o pierde contra el Kit.
============================================================ */
html,body{background:#f7f6f2!important;} /* fuera del widget: el hueco no debe verse negro */

.pz{--ink:#232323;--ink-soft:#3f3f3d;--ink-dim:#6c6b66;
  --red:#c62d1c;--orange:#c9560a;--orange-ink:#984408;--blue:#1c5fbf;--green:#237d43;
  --teal:#0f9e93;--lime:#6aa84f;--purple:#8a63d2;--sched-orange:#a94b05;
  --board:#f7f6f2;--board-2:#efeee7;--paper:#fffef9;--frame:#c9cbce;--frame-dark:#a7a9ac;--dash:#c9c6bb;--hair:#e4e2d7;
  --marker:"Permanent Marker","Bradley Hand",ui-rounded,"Segoe Print","Comic Sans MS",cursive;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-family:var(--sans);color:var(--ink-soft);background:var(--board);
  background-image:
    radial-gradient(circle at 14% 12%, rgba(0,0,0,.030), transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(0,0,0,.024), transparent 46%),
    radial-gradient(circle at 60% 40%, rgba(255,255,255,.5), transparent 60%);
  -webkit-font-smoothing:antialiased;}
.pz *{box-sizing:border-box;}
.pz a{color:inherit!important;text-decoration:none!important;} /* !important: ver bloque BLINDAJE arriba */
.pz img,.pz video{display:block;max-width:100%;}
.pz ::selection{background:rgba(198,45,28,.20);}
.pz-wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.pz-section{padding:78px 0;border-top:2px dashed var(--dash);}
.pz-section:first-child{border-top:0;}
.pz h1,.pz h2,.pz h3{font-family:var(--marker)!important;font-weight:400!important;line-height:1.05;letter-spacing:.005em;color:var(--ink)!important;margin:0;}
.pz h1{font-size:clamp(37px,6vw,66px);}
.pz h2{font-size:clamp(27px,3.4vw,38px);}
.pz h3{font-size:19px;}
.pz p{margin:0;color:var(--ink-soft)!important;font-family:var(--sans)!important;font-weight:400!important;}
/* El color de h1-h3/p SI lleva !important (a diferencia de una version anterior de este
   archivo): probado con -SimularKit, sin el, los titulares/parrafos sin clase propia (los que
   solo heredan este reset) se ven en el color del Kit. CUALQUIER pagina que cambie el color de
   un titulo o parrafo a proposito (como las de abajo) tiene que llevar tambien !important en
   ESA regla, con especificidad clase+etiqueta como minimo, o pierde contra este reset. */
/* .pz-wod-head: estaba duplicado igual en 16 paginas (bloque WOD de la pizarra). Centralizado
   aqui; borra la copia del <style> propio la proxima vez que edites esa pagina. */
.pz-wod-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;}
.pz-wod-head h3{font-size:24px;color:var(--blue)!important;}
.pz-wod-head span{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim)!important;}
/* El nombre del dia va DENTRO del h3 ("WOD · <span>Martes</span>"): sin esto hereda el
   estilo pequeño/gris/mayusculas de arriba en vez del estilo del titulo. Solo estaba en
   6 de las 16 paginas con este widget (home, crosstraining, hibrido, bodybuilding,
   gimnasticos, funcional) — las otras 10 (hub, el-box, horarios, empresas, contacto,
   halterofilia, hyrox, blog indice/plantilla, clase-gratis) lo tenian roto sin saberlo. */
.pz-wod-head h3 span{font-family:inherit;color:inherit;text-transform:none;letter-spacing:inherit;font-size:inherit;}
/* .pz-wod-cap (el pie "Barra y metcon completo" bajo el WOD): mismo caso, duplicado igual en
   16 paginas y sin !important, asi que el Kit le metia su tipografia/peso en vez del rotulador
   rojo. Centralizado. Dos paginas (home, crosstraining) le anaden max-width:55% en su propio
   <style> — eso no hace falta tocarlo aqui, no choca con nada. */
.pz-wod-cap{margin-top:14px;font-family:var(--marker)!important;font-weight:400!important;font-size:15px;color:var(--red)!important;transform:rotate(-1deg);}
.pz-brand{font-family:var(--sans);font-weight:700;letter-spacing:0;}
.pz-underline{position:relative;display:inline-block;}
.pz-underline svg{position:absolute;left:-3%;bottom:-.30em;width:106%;height:.42em;overflow:visible;pointer-events:none;}
.pz-stroke{stroke-dasharray:560;stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1) .15s;}
.pz-js .pz-reveal:not(.pz-in) .pz-stroke{stroke-dashoffset:560;}
.pz-lead{font-size:16.5px;line-height:1.68;color:var(--ink-soft);max-width:62ch;}
.pz-lead + .pz-lead{margin-top:16px;}
a.pz-link{display:inline-block;margin-top:14px;font-weight:700;font-size:13.5px;color:var(--blue)!important;text-decoration:underline!important;text-underline-offset:4px;}
.pz-cta{display:inline-flex;flex-direction:column;align-items:flex-start;gap:11px;margin-top:30px;}
.pz-cta-scribble{position:relative;display:inline-flex;isolation:isolate;}
.pz-cta-scribble > .pz-cta-btn{flex:0 0 auto;}
.pz-cta-btn{position:relative;z-index:2;display:inline-block;text-decoration:none;
    font-weight:700;font-size:15.5px;color:var(--ink);background:var(--paper);
    padding:14px 30px;border:2.5px solid var(--ink);
    border-radius:36px 44px 32px 40px/42px 32px 46px 30px;transform:rotate(-.7deg);
    transition:transform .16s ease,background .16s ease,color .16s ease;}
.pz-cta-btn:hover,.pz-cta-btn:focus-visible{background:var(--red);color:#fff;border-color:var(--red);transform:rotate(-.7deg) translateY(-2px);outline:none;}
/* .pz-cta-btn vive tambien en un <button type="submit"> (formulario de contacto), que el
   Kit de Elementor no toca (solo tiene reglas para <a>). El refuerzo !important va aparte,
   solo para el caso <a>, para no obligar a repetirlo en el <button>. */
a.pz-cta-btn{text-decoration:none!important;color:var(--ink)!important;
    font-family:var(--sans)!important;font-weight:700!important;font-size:15.5px!important;line-height:normal!important;}
a.pz-cta-btn:hover,a.pz-cta-btn:focus-visible{color:#fff!important;}
.pz-cta-ellipse{position:absolute;left:-22px;top:-16px;width:calc(100% + 44px);height:calc(100% + 32px);pointer-events:none;z-index:3;overflow:visible;}
.pz-cta-ellipse path{stroke-dasharray:680;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1) .35s;}
.pz-js .pz-reveal:not(.pz-in) .pz-cta-ellipse path{stroke-dashoffset:680;}
.pz-cta-note{font-family:var(--marker);font-size:14.5px;color:var(--orange-ink);transform:rotate(-1.5deg);padding-left:8px;}
.pz-board{position:relative;padding:13px;border-radius:10px;
  background:linear-gradient(135deg,#e4e6e9 0%,#c2c4c7 38%,#d3d5d8 55%,#a9abae 100%);
  box-shadow:0 28px 58px -22px rgba(0,0,0,.5),
    inset 0 2px 0 rgba(255,255,255,.85), inset 0 -3px 4px rgba(0,0,0,.28),
    inset 2px 0 3px rgba(255,255,255,.4), inset -2px 0 3px rgba(0,0,0,.2);}
.pz-board-inner{position:relative;background:var(--paper);border-radius:3px;
    padding:30px 30px 34px;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.13), inset 0 0 30px rgba(0,0,0,.035);}
.pz-note{background:var(--paper);border:1px solid var(--hair);padding:24px 24px 22px;transform:rotate(.7deg);
  box-shadow:4px 8px 18px -6px rgba(0,0,0,.16);}
.pz-note h3{margin-bottom:14px;}
.pz-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.pz-check li{position:relative;padding-left:26px;font-size:14px;line-height:1.5;color:var(--ink-soft);}
.pz-check li::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;
    background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23237d43' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l5 5L20 6'/%3E%3C/svg%3E");}
.pz-tag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:#fff;padding:3px 9px;border-radius:3px;margin-bottom:11px;transform:rotate(-1deg);}
.t-red{background:var(--red);}
.t-orange{background:#a94b05;}
.t-blue{background:var(--blue);}
.t-green{background:var(--green);}
.pz-tape{position:relative;background:#fff;padding:8px 8px 12px;border:1px solid #e7e5db;
    box-shadow:3px 7px 16px -5px rgba(0,0,0,.28);
    transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s cubic-bezier(.16,1,.3,1);}
.pz-reveal:not(.pz-in) .pz-tape{transform:rotate(0)!important;box-shadow:1px 2px 6px -2px rgba(0,0,0,.14);}
.pz-tape::before{content:"";position:absolute;top:-11px;left:50%;width:78px;height:24px;transform:translateX(-50%) rotate(-3deg);
    background:linear-gradient(160deg,rgba(226,159,45,.30),rgba(226,159,45,.5));border:1px solid rgba(226,159,45,.4);
    box-shadow:0 1px 3px rgba(0,0,0,.10);}
.pz-tape img{width:100%;height:100%;object-fit:cover;}
.pz-tape figcaption{font-family:var(--marker);font-size:12.5px;color:var(--ink-dim);text-align:center;margin-top:7px;}
.pz-faq{margin-top:22px;border-top:2px dashed var(--dash);}
.pz-faq details{border-bottom:2px dashed var(--dash);padding:18px 0;}
.pz-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
    font-weight:600;font-size:15.5px;color:var(--ink);}
.pz-faq summary::-webkit-details-marker{display:none;}
.pz-faq summary::after{content:"+";font-family:var(--marker);font-size:24px;color:var(--red);line-height:1;flex-shrink:0;}
.pz-faq details[open] summary::after{content:"–";}
.pz-faq details p{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--ink-soft);max-width:70ch;}
.pz-faq a{color:var(--blue)!important;text-decoration:underline!important;text-underline-offset:3px;}
.pz-final{border-top:3px solid var(--red);}
.pz-final .pz-wrap{display:flex;justify-content:space-between;align-items:center;gap:34px;flex-wrap:wrap;}
.pz-final h2{margin-bottom:10px;}
.pz-final p{color:var(--ink-soft);max-width:42ch;font-size:15.5px;line-height:1.6;}
/* .pz-legal: descargo de marca registrada (CrossFit, Hyrox...) al final de una landing.
   Centralizado aqui tras la auditoria de marcas (11 sep 2026) — antes solo estaba en
   redfield-programa-hyrox.html; ahora tambien lo usa redfield-programa-crosstraining.html.
   flex-basis:100% para que siempre caiga en su propia linea dentro de .pz-final .pz-wrap
   (que es flex con justify-content:space-between), aunque haya sitio de sobra al lado del CTA. */
.pz-legal{font-size:12px;color:var(--ink-dim);margin-top:34px;max-width:70ch;line-height:1.55;flex-basis:100%;}
.pz-reveal{transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.pz-js .pz-reveal{opacity:0;transform:translateY(20px);}
.pz-js .pz-reveal.pz-in{opacity:1;transform:none;}
.pz-reveal.pz-stagger > *{transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);}
.pz-js .pz-reveal.pz-stagger > *{opacity:0;transform:translateY(14px);}
.pz-js .pz-reveal.pz-in.pz-stagger > *{opacity:1;transform:none;}
.pz-two{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;}
/* .pz-cell: estaba duplicado igual en el <style> de cada pagina (hub de programas, home,
   el-box, blog...). Se centraliza aqui una sola vez, ya con !important (ver BLINDAJE arriba).
   Si alguna pagina aun trae su copia en el <style> propio, no molesta (mismo valor), pero se
   puede borrar de ahi la proxima vez que se edite esa pagina. */
a.pz-cell{border-right:2px dashed var(--dash);border-bottom:2px dashed var(--dash);padding:22px 20px;
    text-decoration:none!important;color:inherit!important;display:block;transition:background .16s;}
a.pz-cell:hover,a.pz-cell:focus-visible{background:rgba(28,95,191,.05);outline:none;}
.pz-cell h3{margin-bottom:7px;color:var(--ink)!important;}
.pz-cell p{font-size:13px;line-height:1.5;color:var(--ink-soft)!important;}
.pz-cell .go{display:inline-block;margin-top:9px;font-weight:700;font-size:12px;color:var(--blue)!important;}

/* ============================================================
   BLOG DINÁMICO — color de categoría por URL (Loop Item / Single Post, ver
   GUIA-blog-elementor.md). Un widget dinámico de Elementor (Post Info > Términos)
   no admite una clase CSS condicional por término desde su panel: el campo "CSS
   personalizado" de un widget solo acepta propiedades sueltas para ESE MISMO
   elemento, nunca selectores nuevos. Se resuelve seleccionando por coincidencia de
   texto en el href que ya genera ese enlace de categoría (sin JS).
   Slugs REALES leídos de /wp-json/wp/v2/categories del sitio en producción (11 sep
   2026) — no son los inventados de una versión anterior de este bloque. Ver mapeo
   completo y motivo de cada color en GUIA-blog-elementor.md §0.
   Actualizado (13 sep 2026): las categorías que corresponden a un tipo de clase real
   del horario (Entrenamiento Funcional, Híbrido, Gimnasia y calistenia, Bodybuilding)
   pasan a usar EL MISMO color que esa clase en `redfield-horarios.html`/AimHarder
   (teal, naranja de horario, lila, lima) en vez de un color de rol genérico — así el
   mismo tipo de clase se reconoce con el mismo color en todo el sitio. Las categorías
   sin clase equivalente (Halterofilia, Principiantes, Salud y Bienestar, Consejos y
   Guías, Vida Redfield, Competición y Rendimiento) mantienen su rol de tintero
   genérico de siempre. Crosstraining ya coincidía con el rojo del WOD, sin cambios.
   Actualizado (24 sep 2026): añadidos los slugs de las categorías CA (/ca/category/…) y EN
   (/en/category/…) de Polylang con el mismo color que su equivalente ES. Los que Polylang
   sufija (-ca/-en: crosstraining, halterofilia, vida-redfield, bodybuilding) se casan por
   prefijo, sin barra final. Si se crea una categoría nueva, añadir aquí sus 3 slugs.
============================================================ */
.pz-post-cat[href*="/category/crosstraining"],
.pz-post-cat[href*="/category/salud-y-bienestar-barcelona/"],
.pz-post-cat[href*="/category/competicion-y-rendimiento/"],
.pz-post-cat[href*="/category/salut-i-benestar/"],
.pz-post-cat[href*="/category/competicio-i-rendiment/"],
.pz-post-cat[href*="/category/health-and-well-being/"],
.pz-post-cat[href*="/category/competition-and-performance/"]{background:var(--red);}
.pz-post-cat[href*="/category/entrenamiento-hibrido-barcelona/"],
.pz-post-cat[href*="/category/entrenament-hibrid/"],
.pz-post-cat[href*="/category/hybrid-training/"]{background:var(--sched-orange);}
.pz-post-cat[href*="/category/halterofilia"],
.pz-post-cat[href*="/category/olympic-weightlifting/"]{background:var(--blue);}
.pz-post-cat[href*="/category/entrenamiento-funcional-barcelona/"],
.pz-post-cat[href*="/category/entrenament-funcional/"],
.pz-post-cat[href*="/category/functional-training/"]{background:var(--teal);}
.pz-post-cat[href*="/category/gimnasia-y-calistenia-barcelona/"],
.pz-post-cat[href*="/category/gimnastica-i-calistenia/"],
.pz-post-cat[href*="/category/gymnastics-and-calisthenics/"]{background:var(--purple);}
.pz-post-cat[href*="/category/bodybuilding"]{background:var(--lime);}
.pz-post-cat[href*="/category/principiantes-entrenamiento-funcional-barcelona/"],
.pz-post-cat[href*="/category/consejos-y-guias-barcelona/"],
.pz-post-cat[href*="/category/vida-redfield"],
.pz-post-cat[href*="/category/principiants/"],
.pz-post-cat[href*="/category/consells-i-guies/"],
.pz-post-cat[href*="/category/beginners/"],
.pz-post-cat[href*="/category/tips-and-guides/"],
.pz-post-cat[href*="/category/redfield-life/"]{background:var(--green);}

.pz-tagline[href*="/category/crosstraining"],
.pz-tagline[href*="/category/salud-y-bienestar-barcelona/"],
.pz-tagline[href*="/category/competicion-y-rendimiento/"],
.pz-tagline[href*="/category/salut-i-benestar/"],
.pz-tagline[href*="/category/competicio-i-rendiment/"],
.pz-tagline[href*="/category/health-and-well-being/"],
.pz-tagline[href*="/category/competition-and-performance/"]{color:var(--red)!important;border-color:var(--red)!important;}
.pz-tagline[href*="/category/entrenamiento-hibrido-barcelona/"],
.pz-tagline[href*="/category/entrenament-hibrid/"],
.pz-tagline[href*="/category/hybrid-training/"]{color:var(--sched-orange)!important;border-color:var(--sched-orange)!important;}
.pz-tagline[href*="/category/halterofilia"],
.pz-tagline[href*="/category/olympic-weightlifting/"]{color:var(--blue)!important;border-color:var(--blue)!important;}
.pz-tagline[href*="/category/entrenamiento-funcional-barcelona/"],
.pz-tagline[href*="/category/entrenament-funcional/"],
.pz-tagline[href*="/category/functional-training/"]{color:var(--teal)!important;border-color:var(--teal)!important;}
.pz-tagline[href*="/category/gimnasia-y-calistenia-barcelona/"],
.pz-tagline[href*="/category/gimnastica-i-calistenia/"],
.pz-tagline[href*="/category/gymnastics-and-calisthenics/"]{color:var(--purple)!important;border-color:var(--purple)!important;}
.pz-tagline[href*="/category/bodybuilding"]{color:var(--lime)!important;border-color:var(--lime)!important;}
.pz-tagline[href*="/category/principiantes-entrenamiento-funcional-barcelona/"],
.pz-tagline[href*="/category/consejos-y-guias-barcelona/"],
.pz-tagline[href*="/category/vida-redfield"],
.pz-tagline[href*="/category/principiants/"],
.pz-tagline[href*="/category/consells-i-guies/"],
.pz-tagline[href*="/category/beginners/"],
.pz-tagline[href*="/category/tips-and-guides/"],
.pz-tagline[href*="/category/redfield-life/"]{color:var(--green)!important;border-color:var(--green)!important;}

/* ============================================================
   CAUSA RAÍZ encontrada inspeccionando /blog/ en vivo (12 sep 2026): el <style>
   propio de la maqueta redfield-blog-index.html (.pz-tagline base, .pz-post como caja
   de papel, .pz-post-img con el efecto celo, .pz-post-body) NUNCA se trasladó a
   ningún sitio al pasar de maqueta estática a Loop Grid nativo — no existe en NINGÚN
   CSS cargado del sitio real (comprobado: 0 coincidencias en los 19 <style> inline de
   la página). Se centraliza aquí, adaptado a la estructura real que genera Elementor
   (comprobada con el inspector, no la que se pidió construir a mano):
   - `.pz-post`/`.pz-post-body` en la práctica salen como HERMANOS bajo `.e-loop-item`
     (no uno dentro del otro, aunque la guía pida anidarlos) — la caja de tarjeta
     (fondo, borde, sombra, rotación) se pone aquí sobre `.e-loop-item` directamente,
     así funciona la tengas anidada bien o no.
   - `.pz a{color:inherit!important}` (regla base de arriba) es MÁS ESPECÍFICA que una
     clase suelta y le ganaba el color blanco al chip de categoría — aquí se prefija
     con `.pz` para ganar en especificidad sin tocar esa regla base.
   - Actualización (12 sep 2026, 2ª ronda): Elementor inyecta un `<style>` como PRIMER
     hijo del contenedor de la rejilla (`.elementor-loop-container`), antes de la
     primera tarjeta real — así que `:nth-child` contaba mal (la 1ª tarjeta visible
     era la "2ª" para el navegador, la 2ª era la "3ª"...). Cambiado a `:nth-of-type`,
     que solo cuenta hermanos con la misma etiqueta (DIV) e ignora ese `<style>`.
   - El hueco grande entre foto y categoría venía de un padding nativo que Elementor
     aplica al contenedor atómico (probablemente puesto sin querer al construirlo, o
     un valor por defecto del propio Div Block) con más prioridad que una regla sin
     `!important` — añadido aquí a `.pz-post-body`/`.pz-post-img`.
   - Actualización (12 sep 2026, 3ª ronda): el `overflow:hidden` que llevaba
     `.e-loop-item` (puesto para que la imagen no se saliera del recuadro) recortaba
     también el celo, que necesita sobresalir por encima del borde de la tarjeta hacia
     el fondo — quitado. Celo subido un poco más (`top:-14px`) para que se note más
     claramente por encima de la tarjeta.
   - Actualización (12 sep 2026, 4ª ronda): las 3 columnas salían de ancho MUY
     desigual (comprobado: 375px / 656px / 613px sobre un contenedor de 1200px, ni
     siquiera suman el total). No era la imagen (ya se comprobó con `display:block`
     forzado, sin cambio en las columnas) — es el propio `grid-template-columns` de
     `.elementor-loop-container`, que Elementor calcula según el contenido mínimo de
     cada columna en vez de a partes iguales. Se fuerza aquí a `repeat(3,1fr)` y se
     permite que cada tarjeta encoja por debajo de su contenido (`min-width:0`, el
     valor por defecto de un hijo de grid es "auto", que respeta el ancho mínimo de su
     contenido y es justo lo que rompía el reparto igualitario).
============================================================ */
.pz-tagline{display:inline-block;font-family:var(--sans);font-weight:700;font-size:11px;
    letter-spacing:.09em;text-transform:uppercase;color:var(--red);border:2px solid var(--red);
    padding:4px 11px;border-radius:3px;transform:rotate(-1deg);}
.pz-posts .elementor-loop-container{grid-template-columns:repeat(3,1fr)!important;}
@media(max-width:1024px){ .pz-posts .elementor-loop-container{grid-template-columns:repeat(2,1fr)!important;} }
@media(max-width:600px){ .pz-posts .elementor-loop-container{grid-template-columns:1fr!important;} }
/* Caja de tarjeta (fondo/borde/sombra/rotación): ya NO depende de ".pz-posts" — se
   aplica a cualquier ".e-loop-item" (comprobado, 12 sep 2026: el Loop Grid de
   "relacionados" del artículo individual no lleva la clase "pz-posts" y tenía el
   mismo bug de columnas desiguales que el índice). ".e-loop-item" solo existe donde
   se usa la plantilla "Tarjeta blog — pizarra", así que generalizarlo es seguro. */
.e-loop-item{min-width:0!important;background:var(--paper);border:1px solid var(--hair);
    box-shadow:4px 8px 18px -6px rgba(0,0,0,.16);display:flex!important;flex-direction:column!important;
    gap:0!important;transition:transform .18s cubic-bezier(.16,1,.3,1);}
.e-loop-item:nth-of-type(3n+1){transform:rotate(-.7deg);}
.e-loop-item:nth-of-type(3n+2){transform:rotate(.5deg);}
.e-loop-item:nth-of-type(3n){transform:rotate(-.3deg);}
.e-loop-item:hover{transform:translateY(-3px) rotate(0);}
/* Rejilla de "relacionados" (2 tarjetas, no 3): añade la clase "pz-related-posts" al
   widget Loop Grid de relacionados en Elementor (además de dejarlo tal cual está,
   sin necesidad de tocar su ajuste nativo de "Columnas" — este CSS lo sustituye). */
.pz-related-posts .elementor-loop-container{grid-template-columns:repeat(2,1fr)!important;}
@media(max-width:600px){ .pz-related-posts .elementor-loop-container{grid-template-columns:1fr!important;} }

/* Celda "Clase gratis" junto a las 2 tarjetas relacionadas: el borde discontinuo de
   .pz-cell (solo derecha/abajo) está pensado para rejillas donde las celdas comparten
   borde entre sí (hub de programas); aquí va sola al lado de tarjetas con foto y con
   caja completa, así que desentona. La clase "pz-cell-card" se pone en el widget HTML
   de Elementor (su <div> envoltorio) — el <a class="pz-cell"> real está DENTRO, pegado
   como contenido del widget, así que el selector busca uno dentro del otro, no los dos
   juntos en el mismo elemento (comprobado en producción, 12 sep 2026: por eso no
   cambiaba nada con ".pz-cell.pz-cell-card"). */
.pz-cell-card .pz-cell{border:1px solid var(--hair)!important;background:var(--paper);
    box-shadow:4px 8px 18px -6px rgba(0,0,0,.16);}
.pz-cell-card .pz-cell:hover,.pz-cell-card .pz-cell:focus-visible{background:var(--paper)!important;}

/* Tarjeta "Clase gratis" de relacionados, versión con foto (24 sep 2026): con extracto en
   todas las entradas, las 2 tarjetas del Loop Grid crecieron (foto + extracto, ~510px) y la
   celda .pz-cell de clase gratis se quedaba en ~176px. Ahora el widget HTML "pz-cell-card"
   lleva <a class="pz-free-card"> con la MISMA anatomía que la tarjeta del loop: foto 16:10
   con celo (verde, para distinguirla), chip, título en rotulador, texto y enlace pegado
   abajo; y ocupa toda la altura de la fila. En escritorio, Loop Grid (2 tarjetas) y widget
   se reparten el ancho 2:1 para que las 3 tarjetas midan casi igual. */
.pz-cell-card{align-self:stretch!important;display:flex!important;}
.pz-cell-card > .elementor-widget-container{display:flex;width:100%;}
@media(min-width:768px){
  .pz-related-posts{flex:2 1 0!important;min-width:0;width:auto!important;}
  .pz-cell-card{flex:1 1 0!important;min-width:0;width:auto!important;}
}
.pz .pz-free-card{display:flex!important;flex-direction:column;width:100%;height:100%;
    font-family:var(--sans);font-weight:400;color:var(--ink-soft)!important;text-decoration:none!important;
    background:var(--paper);border:1px solid var(--hair);box-shadow:4px 8px 18px -6px rgba(0,0,0,.16);
    transform:rotate(-.3deg);transition:transform .18s cubic-bezier(.16,1,.3,1);}
.pz .pz-free-card:hover,.pz .pz-free-card:focus-visible{transform:translateY(-3px) rotate(0);}
.pz-free-img{position:relative;display:block;padding:2px 2px 0;}
.pz-free-img::before{content:"";position:absolute;z-index:2;top:-21px;left:26px;width:66px;height:26px;
    transform:rotate(-4deg);background:linear-gradient(160deg,rgba(35,125,67,.26),rgba(35,125,67,.4));
    border:1px solid rgba(35,125,67,.4);pointer-events:none;}
.pz-free-img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
.pz-free-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 20px;}
.pz-free-cat{align-self:flex-start;font-weight:700;font-size:11px;line-height:16.5px;letter-spacing:.06em;
    text-transform:uppercase;color:#fff;background:var(--red);padding:3px 8px;border-radius:3px;
    transform:rotate(-1deg);margin-bottom:9px;}
.pz-free-title{font-family:var(--marker);font-size:19px;line-height:1.05;color:var(--ink);margin:0 0 10px;}
.pz-free-text{font-size:16px;line-height:24px;color:var(--ink-soft);margin:0 0 14px;}
.pz-free-go{margin-top:auto;font-size:12px;font-weight:700;color:var(--blue);}
/* Marco blanco tipo Polaroid alrededor de la foto: reducido de 8px a 2px (pedido).
   El celo (::before) necesita pintarse POR ENCIMA de la foto para que se vea que la
   sujeta — antes salía por debajo porque ninguno de los dos tenía z-index (la imagen,
   al ser un elemento normal en el flujo, ganaba la pintura por encima del ::before
   posicionado). Se les da z-index explícito a ambos para fijar el orden. */
.pz-post-img{position:relative!important;padding:2px 2px 0!important;margin:0!important;}
.pz-post-img::before{content:"";position:absolute;z-index:2;top:-21px;left:26px;width:66px;height:26px;
    transform:rotate(-4deg);background:linear-gradient(160deg,rgba(226,159,45,.32),rgba(226,159,45,.5));
    border:1px solid rgba(226,159,45,.4);pointer-events:none;}
.e-loop-item:nth-of-type(2n) .pz-post-img::before{background:rgba(28,95,191,.3);
    border-color:rgba(28,95,191,.42);left:auto;right:26px;transform:rotate(4deg);}
.e-loop-item:nth-of-type(3n) .pz-post-img::before{background:rgba(35,125,67,.32);
    border-color:rgba(35,125,67,.42);}
.pz-post-img img{position:relative!important;z-index:1!important;width:100%!important;
    max-width:100%!important;aspect-ratio:16/10!important;object-fit:cover!important;display:block!important;}
.pz-post-body{position:relative!important;padding:16px 18px 20px!important;margin:0!important;
    gap:0!important;display:flex!important;flex-direction:column!important;flex:1!important;}
.pz-post-body .rd p,.pz-post-body p.rd{margin-top:12px!important;font-weight:700!important;
    font-size:12px!important;color:var(--blue)!important;font-family:var(--sans)!important;}
/* El "Enlace anidado" de Elementor duplica el <a> del enlace de toda la tarjeta en
   cada zona que cubre — dentro de .pz-post-body aparece un segundo (y a veces un
   tercer, anidado dentro del propio widget Post Info) <a class="pz-post"> vacío que,
   al ser un elemento de flujo normal, empujaba la categoría 24px hacia abajo. Se
   sacan del flujo con position:absolute (cubren igual todo el cuerpo, así el texto
   también es clicable) sin que ocupen espacio visual. Selector por descendiente
   (no hijo directo) para pillar también el que queda anidado más adentro. */
.pz-post-body a.pz-post{position:absolute!important;inset:0!important;height:auto!important;
    min-height:0!important;margin:0!important;padding:0!important;z-index:1;}

/* Chip real que genera el widget clásico "Post Info" > Términos dentro del Loop Item /
   Single Post (comprobado en producción, 12 sep 2026): cada categoría sale como
   <a class="elementor-post-info__terms-list-item" href=".../category/slug/">, DOS
   niveles por debajo del widget al que se le pone la clase "pz-post-cat" en Elementor
   — esa clase nunca llega a este <a>, así que el chip se pinta aquí directamente sobre
   la clase real que Elementor sí pone en cada término, sin depender de "pz-post-cat".
   Prefijado con ".pz" para ganarle en especificidad a ".pz a{color:inherit!important}"
   de más arriba (sin el prefijo, esa regla base le ganaba el color blanco al chip).
   Un post con más de una categoría marcada saca un chip por cada una — recorta cada
   entrada a una sola categoría (ver GUIA-blog-elementor.md §0) para que quede un único
   chip limpio por tarjeta. */
.pz .elementor-post-info__terms-list-item{display:inline-flex!important;align-items:center;
    width:auto!important;flex:0 0 auto!important;max-width:none!important;white-space:nowrap;
    font-family:var(--sans)!important;font-weight:700!important;font-size:11px!important;
    letter-spacing:.06em;text-transform:uppercase;color:#fff!important;text-decoration:none!important;
    padding:3px 8px;border-radius:3px;transform:rotate(-1deg);margin:0 4px 4px 0;
    background:var(--ink-soft); /* respaldo: categoría sin color asignado (nunca blanco sobre transparente) */}
.pz .elementor-post-info__terms-list-item[href*="/category/crosstraining"],
.pz .elementor-post-info__terms-list-item[href*="/category/salud-y-bienestar-barcelona/"],
.pz .elementor-post-info__terms-list-item[href*="/category/competicion-y-rendimiento/"],
.pz .elementor-post-info__terms-list-item[href*="/category/salut-i-benestar/"],
.pz .elementor-post-info__terms-list-item[href*="/category/competicio-i-rendiment/"],
.pz .elementor-post-info__terms-list-item[href*="/category/health-and-well-being/"],
.pz .elementor-post-info__terms-list-item[href*="/category/competition-and-performance/"]{background:var(--red);}
.pz .elementor-post-info__terms-list-item[href*="/category/entrenamiento-hibrido-barcelona/"],
.pz .elementor-post-info__terms-list-item[href*="/category/entrenament-hibrid/"],
.pz .elementor-post-info__terms-list-item[href*="/category/hybrid-training/"]{background:var(--sched-orange);}
.pz .elementor-post-info__terms-list-item[href*="/category/halterofilia"],
.pz .elementor-post-info__terms-list-item[href*="/category/olympic-weightlifting/"]{background:var(--blue);}
.pz .elementor-post-info__terms-list-item[href*="/category/entrenamiento-funcional-barcelona/"],
.pz .elementor-post-info__terms-list-item[href*="/category/entrenament-funcional/"],
.pz .elementor-post-info__terms-list-item[href*="/category/functional-training/"]{background:var(--teal);}
.pz .elementor-post-info__terms-list-item[href*="/category/gimnasia-y-calistenia-barcelona/"],
.pz .elementor-post-info__terms-list-item[href*="/category/gimnastica-i-calistenia/"],
.pz .elementor-post-info__terms-list-item[href*="/category/gymnastics-and-calisthenics/"]{background:var(--purple);}
.pz .elementor-post-info__terms-list-item[href*="/category/bodybuilding"]{background:var(--lime);}
.pz .elementor-post-info__terms-list-item[href*="/category/principiantes-entrenamiento-funcional-barcelona/"],
.pz .elementor-post-info__terms-list-item[href*="/category/consejos-y-guias-barcelona/"],
.pz .elementor-post-info__terms-list-item[href*="/category/vida-redfield"],
.pz .elementor-post-info__terms-list-item[href*="/category/principiants/"],
.pz .elementor-post-info__terms-list-item[href*="/category/consells-i-guies/"],
.pz .elementor-post-info__terms-list-item[href*="/category/beginners/"],
.pz .elementor-post-info__terms-list-item[href*="/category/tips-and-guides/"],
.pz .elementor-post-info__terms-list-item[href*="/category/redfield-life/"]{background:var(--green);}
/* Las columnas responsivas del grid las pone el propio widget nativo Loop Grid
   (columnas 3/2/1 configuradas en su panel, ver GUIA-blog-elementor.md §3) — no hace
   falta un `display:grid` propio aquí, `.pz-posts` vive en el wrapper del widget, no
   en el contenedor real de la rejilla (`.elementor-loop-container.elementor-grid`). */

/* Paginación del Loop Grid (Anterior/números/Siguiente): Elementor la pone sin
   separación de las tarjetas de arriba (margin-top:0 por defecto). */
.pz-posts nav.elementor-pagination{margin-top:32px!important;}

/* Bloque final "De leerlo a probarlo": pedido reducir el aire por arriba y por abajo
   respecto al resto de secciones. OJO: `.pz-final` es compartida por TODO el sitio
   (contacto, home, páginas de programa...) — no se toca esa clase en general para no
   cambiar de golpe el CTA final de páginas ya aprobadas. En Elementor, a la sección
   del CTA final de /blog/ (la que ya lleva "pz-section pz-reveal") añádele una clase
   más en CSS Classes: `pz-tight`.
   Comprobado en producción (12 sep 2026): `pz-tight` quedó puesto en la Sección de
   FUERA (la que de verdad lleva el padding de 78px via `.pz-section`) y `pz-final`
   en un contenedor de DENTRO — son dos elementos distintos anidados, no el mismo, por
   eso `.pz-final.pz-tight` (las dos juntas en un elemento) no coincidía con nada.
   Se deja el selector solo sobre `.pz-tight`.
   Actualización (12 sep 2026, 2ª ronda): el contenedor de DENTRO (`.pz-final`)
   también lleva su propia clase `pz-section` — así que aplicaba SUS OTROS 78px de
   padding aparte, sumados a los 40px de fuera. Se anula el padding del de dentro
   cuando está anidado bajo `.pz-tight`, dejando solo los 40px del de fuera. El
   `border-top` rojo de `.pz-final` (la raya de 3px) no se toca. */
.pz-tight{padding:40px 0!important;}
.pz-tight .pz-final{padding:0!important;}

/* Entrada individual — imagen destacada (comprobado en producción, 12 sep 2026): el
   widget de imagen lleva la clase "pz-tape" pero sin el contenedor "pz-art-fig" que
   le pone el max-width:560px — sale a todo el ancho de la columna (~1180px) en vez
   de sujeta como una Polaroid. Se fija aquí directamente sobre el propio widget de
   imagen destacada, sin depender de ese contenedor que falta. */
.elementor-widget-theme-post-featured-image.pz-tape{max-width:560px!important;margin:0 auto!important;}

/* Parche mientras el título de la tarjeta siga montado con el widget "Post Info de
   página"/"Título de la publicación" tipo Theme (siempre imprime <h1>, ignora
   cualquier clase "h3" que se le ponga — ver GUIA-blog-elementor.md §2). Arregla el
   tamaño sin tener que reconstruir el widget; bórralo en cuanto lo sustituyas por un
   Encabezado normal con etiqueta HTML h3. */
.pz-post h1{font-size:17px!important;line-height:1.15!important;margin:0 0 8px!important;}

/* ============================================================
   ENTRADA INDIVIDUAL — el resto del CSS de "pz-art-*" (metadatos, entradilla, cuerpo
   del artículo, cita destacada, caja de autor) vivía solo en el <style> de la maqueta
   redfield-blog-articulo-plantilla.html y nunca se trasladó a ningún sitio al montar
   la plantilla nativa en Elementor — mismo caso que el resto del blog dinámico.
   Comprobado en producción (13 sep 2026): .pz-art-body h2 tenía margin:0 en vez de
   "40px 0 12px" (el h2 salía literalmente pegado al párrafo siguiente). Se centraliza
   aquí, con !important donde Elementor pone lo suyo por encima, y con el espacio
   después del h2/h3 ampliado (pedido) para que respire más con el rotulador.
============================================================ */
.pz-art-meta{display:flex!important;gap:14px;flex-wrap:wrap;font-size:12px!important;
    font-weight:600!important;letter-spacing:.03em;text-transform:uppercase;
    color:var(--ink-dim)!important;margin:18px 0 22px!important;}
.pz-art-meta *{color:var(--ink-dim)!important;font-family:var(--sans)!important;}
.pz-art-lead{font-size:18px!important;line-height:1.6!important;color:var(--ink)!important;
    font-weight:500!important;}
.pz-art-body{max-width:680px;margin:0 auto!important;}
.pz-art-body h2{font-size:26px!important;margin:40px 0 20px!important;}
.pz-art-body h3{font-size:19px!important;margin:28px 0 12px!important;}
.pz-art-body p{font-size:16.5px!important;line-height:1.72!important;color:var(--ink-soft)!important;
    margin:0 0 16px!important;}
.pz-art-body ul,.pz-art-body ol{margin:0 0 18px!important;padding-left:22px;font-size:16px!important;
    line-height:1.7!important;color:var(--ink-soft)!important;}
.pz-art-body li{margin:6px 0;}
.pz-art-body a{color:var(--blue)!important;text-decoration:underline!important;text-underline-offset:3px;}
.pz-quote{font-family:var(--marker)!important;font-weight:400!important;font-size:22px!important;
    line-height:1.35!important;color:var(--ink)!important;background:var(--paper);
    border:1px solid var(--hair);box-shadow:4px 8px 18px -6px rgba(0,0,0,.16);
    padding:24px 26px!important;margin:30px 0!important;transform:rotate(-.6deg);}
.pz-quote::before{content:"\201C";color:var(--red);font-size:34px;line-height:0;
    vertical-align:-.2em;margin-right:4px;}
.pz-quote::after{content:"\201D";color:var(--red);font-size:34px;line-height:0;
    vertical-align:-.3em;margin-left:2px;}
.pz-art-author{max-width:680px;margin:44px auto 0!important;padding:22px 24px;display:flex;
    gap:16px;align-items:center;border-top:2px dashed var(--dash);border-bottom:2px dashed var(--dash);}
.pz-art-author p{font-size:13.5px!important;line-height:1.55!important;color:var(--ink-soft)!important;
    margin:0!important;}
.pz-art-author b{font-family:var(--marker)!important;font-weight:400!important;font-size:16px!important;
    color:var(--ink)!important;display:block;}
.pz-related{max-width:680px;margin:0 auto;padding:0 24px;}