/* PadelMagic - bloques que amplían el catálogo.
   Todo dentro de la capa 'bloques' y con tokens de pm-tokens.css.
   Ni un hex ni un espaciado a mano.
*/

@layer bloques {

  /* Blog: entrada destacada. */
  .pm-dest { display: grid; gap: var(--pm-space-6); align-items: center }

  .pm-dest__media {
    display: block;
    overflow: hidden;
    border-radius: var(--pm-radius-md);
    border: var(--pm-border);
    background: var(--pm-gray-100);
  }

  .pm-dest__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: scale 400ms ease-out;
  }

  .pm-dest__media:hover img { scale: 1.03 }

  .pm-dest__tx { display: grid; gap: var(--pm-space-4) }

  .pm-dest__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-space-3) }

  .pm-tag {
    padding: var(--pm-space-1) var(--pm-space-3);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-navy);
    color: var(--pm-white);
    font-family: var(--pm-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .pm-dest__meta time { font-size: var(--pm-fs-small); color: var(--pm-gray-500) }

  .pm-dest__t {
    margin: 0;
    font-family: var(--pm-font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .pm-dest__t a { color: var(--pm-ink); text-decoration: none }

  .pm-dest__t a:hover { color: var(--pm-navy); text-decoration: underline;
    text-decoration-thickness: 2px; text-underline-offset: 4px }

  .pm-dest__e {
    margin: 0;
    font-size: var(--pm-fs-body);
    line-height: 1.65;
    color: var(--pm-gray-700);
    max-inline-size: var(--pm-measure);
    text-wrap: pretty;
  }

  /* Blog: las entradas agrupadas por categoria. */
  .pm-posts { display: grid; gap: var(--pm-space-5); grid-template-rows: auto auto }

  .pm-post {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    gap: var(--pm-space-3);
  }

  .pm-post__media {
    display: block;
    overflow: hidden;
    border-radius: var(--pm-radius-md);
    border: var(--pm-border);
    background: var(--pm-gray-100);
  }

  .pm-post__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: scale 350ms ease-out;
  }

  .pm-post:hover .pm-post__media img { scale: 1.04 }

  .pm-post__tx { display: grid; gap: var(--pm-space-2); align-content: start }

  .pm-post__f { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--pm-gray-500) }

  .pm-post__t {
    margin: 0;
    font-family: var(--pm-font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-wrap: pretty;
  }

  .pm-post__t a { color: var(--pm-ink); text-decoration: none }

  .pm-post__t a:hover { color: var(--pm-navy); text-decoration: underline;
    text-decoration-thickness: 2px; text-underline-offset: 3px }

  @media (min-width: 640px) { .pm-posts { grid-template-columns: repeat(2, 1fr) } }

  @media (min-width: 1000px) {
    .pm-dest { grid-template-columns: 1.1fr 1fr; gap: var(--pm-space-8) }
    .pm-posts { grid-template-columns: repeat(4, 1fr) }
  }

  @media (prefers-reduced-motion: reduce) {
    .pm-dest__media:hover img, .pm-post:hover .pm-post__media img { scale: 1 }
  }


  /* Acciones de la tarjeta de modelo: pegadas al pie de la tarjeta para que las
     cuatro queden alineadas, y con la principal invitando a presupuesto. */
  .pm-product__acc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pm-space-3);
    margin-block-start: auto;
    padding-block-start: var(--pm-space-5);
  }

  .pm-btn--sm {
    padding-block: var(--pm-space-3);
    padding-inline: var(--pm-space-4);
    font-size: var(--pm-fs-small);
    display: inline-flex;
    align-items: center;
    gap: var(--pm-space-2);
  }

  .pm-btn--sm svg { inline-size: 15px; block-size: 15px; flex: none }

  .pm-product__acc .pm-btn--lima svg { transition: translate var(--pm-transition) }

  .pm-product__acc .pm-btn--lima:hover svg { translate: 3px 0 }

  /* El cuerpo de la tarjeta se estira para que el pie quede abajo. */
  .pm-product__body { display: flex; flex-direction: column }

  @media (prefers-reduced-motion: reduce) {
    .pm-product__acc .pm-btn--lima:hover svg { translate: 0 }
  }


  /* IMPORTANTE. Los tokens aplican 'aspect-ratio: 4/3' y 'object-fit: cover' a
     TODA imagen dentro de .pm-split__media y .pm-hero__media. Eso esta bien
     para una foto, pero destroza una captura de pantalla o un movil vertical:
     los recorta. Aqui se anula para las imagenes de dispositivos, que tienen
     que verse enteras y con su proporcion real. */
  /* La especificidad importa: '.pm-duo__movil' sola (0,1,0) PIERDE contra
     '.pm-split__media img' (0,1,1) de los tokens. Se cualifica con el
     contenedor y la etiqueta para que gane sin recurrir a !important. */
  .pm-duo img,
  .pm-duo .pm-ipad__scr img,
  .pm-duo img.pm-duo__movil {
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
  }

  .pm-ipad__scr img { border-radius: 0 }


  /* device-duo: iPad con la captura de escritorio y iPhone superpuesto. */
  .pm-duo { position: relative; padding-block-end: var(--pm-space-8) }

  .pm-ipad { margin: 0 }

  .pm-ipad__body {
    position: relative;
    padding: 2.6%;
    border-radius: 20px;
    background: linear-gradient(160deg,
      color-mix(in oklch, var(--pm-gray-500) 60%, black),
      color-mix(in oklch, var(--pm-gray-700) 70%, black));
    box-shadow: 0 26px 50px rgb(14 22 33 / 0.42);
  }

  .pm-ipad__cam {
    position: absolute;
    inset-block-start: 1.1%;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 999px;
    background: color-mix(in oklch, var(--pm-white) 26%, transparent);
  }

  .pm-ipad__scr { border-radius: 10px; overflow: hidden; background: var(--pm-white) }

  .pm-ipad__scr img { display: block; inline-size: 100%; block-size: auto }

  /* El movil, superpuesto en la esquina. Ya trae su propio marco en la imagen. */
  .pm-duo__movil {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: -2%;
    inline-size: 21%;
    min-inline-size: 92px;
    block-size: auto;
    filter: drop-shadow(0 16px 30px rgb(14 22 33 / 0.5));
    z-index: 2;
  }

  .pm-duo__pie {
    margin-block: var(--pm-space-4) 0;
    color: var(--pm-on-navy-quiet);
    max-inline-size: 72%;
  }

  /* Sobre fondo claro el pie necesita otro color. */
  .pm-section:not(.pm-section--navy):not(.pm-section--navy-dark) .pm-duo__pie {
    color: var(--pm-gray-700);
  }

  @media (min-width: 640px) {
    .pm-duo__movil { inline-size: 19%; inset-inline-end: -4% }
  }


  /* contact-block: formulario y canales directos. */
  .pm-contacto { display: grid; gap: var(--pm-space-7); align-items: start }

  .pm-canales { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pm-space-5) }

  .pm-canales li { display: grid; gap: var(--pm-space-1) }

  .pm-canales__v {
    font-family: var(--pm-font-display);
    font-weight: 600;
    font-size: var(--pm-fs-h3);
    color: var(--pm-navy);
    text-decoration: none;
  }

  a.pm-canales__v:hover { color: var(--pm-lima-dark); text-decoration: underline }

  .pm-aviso {
    margin: 0;
    padding: var(--pm-space-5);
    border: var(--pm-border);
    border-inline-start: 3px solid var(--pm-error);
    border-radius: var(--pm-radius-sm);
    font-size: var(--pm-fs-small);
    color: var(--pm-gray-700);
  }

  @media (min-width: 900px) {
    .pm-contacto { grid-template-columns: 1.6fr 0.9fr; gap: var(--pm-space-8) }
  }


  /* La pista dentro del simulador de domotica: la luz y la puerta responden a
     los interruptores. Puerta naranja, como en reservadeportes.com. */
  .pm-court--sim { margin-block-end: var(--pm-space-4) }

  .pm-sim__panel[data-luz="1"] .pm-court--sim .pm-court__floor { opacity: 1 }
  .pm-sim__panel[data-luz="1"] .pm-court--sim .pm-court__lines { opacity: 0.72 }

  .pm-sim__panel[data-luz="1"] .pm-court--sim .pm-lamp {
    background: #FFF6DC;
    box-shadow: 0 0 14px 4px rgb(255 246 220 / 0.5);
  }

  .pm-court__door {
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 50%;
    inline-size: 27%;
    block-size: 9px;
    margin-inline-start: -13.5%;
    background: #F5821F;
    border-radius: 2px;
    z-index: 4;
    transform-origin: left center;
    transition: rotate 550ms cubic-bezier(.5,1.4,.5,1);
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.3);
  }

  .pm-sim__panel[data-abierta="1"] .pm-court__door { rotate: -62deg }

  @media (prefers-reduced-motion: reduce) {
    .pm-court__door { transition: none }
  }


  /* Los numeros del marcador son botones: se pulsan y suman. */
  .pm-led__pt {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: var(--pm-font-mono);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1;
    color: var(--pm-lima);
    min-inline-size: 3.5ch;
    text-align: end;
    font-variant-numeric: tabular-nums;
    transition: scale 120ms ease-out;
  }

  .pm-led__pt:active { scale: 0.93 }

  .pm-led__pt:focus-visible { outline: 2px solid var(--pm-lima); outline-offset: 3px }


  /* La foto real del reloj sobre una foto de pista. Nada dibujado: la foto
     tiene transparencia, asi que se recorta sola sobre el fondo. */
  .pm-wrap-w__watch {
    position: relative;
    z-index: 1;
    display: block;
    inline-size: min(62%, 240px);
    block-size: auto;
    margin-block: var(--pm-space-6);
    filter: drop-shadow(0 20px 34px rgb(0 0 0 / 0.55));
  }


  /* La pista: proporcion 2:1 como una pista real de 20 x 10 m. */
  .pm-show__stage { display: grid; gap: var(--pm-space-3) }

  .pm-court {
    position: relative;
    aspect-ratio: 2 / 1;
    border-radius: var(--pm-radius-md);
    background: color-mix(in oklch, var(--pm-navy-dark) 88%, black);
    overflow: hidden;
    border: var(--pm-border-on-navy);
  }

  /* El suelo se enciende con la luz. */
  .pm-court__floor {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 500ms ease, background 400ms ease;
    background: linear-gradient(135deg, #1668C4, #1E86E6 45%, #1668C4);
  }

  /* Resplandor por mitades, para que el split se lea en el suelo. */
  .pm-court__glow {
    position: absolute;
    inset-block: -14%;
    inline-size: 46%;
    opacity: 0;
    transition: opacity 450ms ease, background 300ms ease;
    pointer-events: none;
    z-index: 1;
  }

  .pm-court__glow--a { inset-inline-start: 2% }
  .pm-court__glow--b { inset-inline-end: 2% }

  .pm-court__lines {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    color: var(--pm-white);
    opacity: 0.34;
    transition: opacity 500ms ease;
    z-index: 2;
  }

  /* Los ocho focos, en cuatro torres de dos. */
  .pm-lamp {
    position: absolute;
    inset-inline-start: var(--x);
    translate: -50% 0;
    inline-size: 13px;
    block-size: 9px;
    border-radius: 3px;
    background: color-mix(in oklch, var(--pm-white) 34%, transparent);
    z-index: 3;
    transition: background-color 320ms, box-shadow 320ms;
  }

  .pm-lamp--t { inset-block-start: 6px }
  .pm-lamp--b { inset-block-end: 6px }

  .pm-lamp.is-w {
    background: #FFF6DC;
    box-shadow: 0 0 16px 5px rgb(255 246 220 / 0.5);
  }

  .pm-lamp.is-a {
    background: var(--pm-lima);
    box-shadow: 0 0 16px 5px color-mix(in oklch, var(--pm-lima) 55%, transparent);
  }

  .pm-lamp.is-b {
    background: #59A9FF;
    box-shadow: 0 0 16px 5px rgb(89 169 255 / 0.5);
  }

  .pm-lamp.is-off { background: color-mix(in oklch, var(--pm-white) 16%, transparent); box-shadow: none }

  /* Estados de la pista segun el efecto. */
  .pm-show[data-efecto="juego"] .pm-court__floor,
  .pm-show[data-efecto="puntazo"] .pm-court__floor { opacity: 1 }

  .pm-show[data-efecto="juego"] .pm-court__lines,
  .pm-show[data-efecto="puntazo"] .pm-court__lines { opacity: 0.72 }

  .pm-show[data-efecto="split"] .pm-court__floor { opacity: 0.5 }
  .pm-show[data-efecto="corrido"] .pm-court__floor { opacity: 0.35 }

  .pm-show[data-efecto="split"] .pm-court__glow--a {
    opacity: 0.85;
    background: radial-gradient(ellipse at center,
      color-mix(in oklch, var(--pm-lima) 80%, transparent), transparent 66%);
  }

  .pm-show[data-efecto="split"] .pm-court__glow--b {
    opacity: 0.85;
    background: radial-gradient(ellipse at center, rgb(89 169 255 / 0.85), transparent 66%);
  }

  .pm-show[data-efecto="juego"] :is(.pm-court__glow--a, .pm-court__glow--b),
  .pm-show[data-efecto="puntazo"] :is(.pm-court__glow--a, .pm-court__glow--b) {
    opacity: 0.55;
    background: radial-gradient(ellipse at center, rgb(255 246 220 / 0.55), transparent 66%);
  }

  .pm-show__cap { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--pm-on-navy-quiet); margin: 0 }


  /* El reloj: correas y caja en CSS sobre una foto de pista, y los dos numeros
     grandes son botones. Es como se ve la app de verdad. */
  .pm-wrap-w {
    position: relative;
    border-radius: var(--pm-radius-md);
    overflow: hidden;
    display: grid;
    place-items: center;
    isolation: isolate;
  }

  .pm-wrap-w__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .pm-wrap-w::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklch, var(--pm-navy-dark) 45%, transparent);
  }

  

  

  /* Las dos correas, detras de la caja. */
  

  
  

  /* La corona lateral. */
  

  

  

  

  

  

  

  

  

  

  

  /* Los dos numeros grandes: son los botones. */
  

  

  

  

  

  

  

  


  /* Video dentro del split: el del banquillo es de 360 px nativos, asi que se
     limita para que no se vea pixelado. */
  .pm-split__media--vid { margin: 0; display: grid; gap: var(--pm-space-3); justify-items: center }

  .pm-split__media--vid video {
    display: block;
    inline-size: 100%;
    max-inline-size: 440px;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--pm-radius-md);
    border: var(--pm-border-on-navy);
  }

  .pm-split__media--vid figcaption { color: var(--pm-on-navy-quiet); text-align: center }


  /* light-show: la pista desde arriba y los ocho focos cambiando de color. */
  .pm-show { display: grid; gap: var(--pm-space-6); align-items: center }

  

  

  

  

  

  

  /* Los focos. El color y el halo salen del propio relleno. */
  

  
  
  
  
  

  .pm-show__ctrl { display: grid; gap: var(--pm-space-4); align-content: start }

  .pm-show__btns { display: flex; flex-wrap: wrap; gap: var(--pm-space-2) }

  .pm-show__b {
    padding: var(--pm-space-3) var(--pm-space-4);
    border: var(--pm-border-on-navy);
    border-radius: var(--pm-radius-sm);
    background: transparent;
    color: var(--pm-on-navy);
    font-family: var(--pm-font-mono);
    font-size: var(--pm-fs-small);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--pm-transition), color var(--pm-transition),
                border-color var(--pm-transition);
  }

  .pm-show__b:hover { background: color-mix(in oklch, var(--pm-white) 8%, transparent) }

  .pm-show__b.is-on {
    background: var(--pm-lima);
    border-color: var(--pm-lima);
    color: var(--pm-navy-dark);
  }

  .pm-show__b:focus-visible { outline: 2px solid var(--pm-lima); outline-offset: 2px }

  .pm-show__d {
    margin: 0;
    min-block-size: 3.2em;
    font-size: var(--pm-fs-body);
    line-height: 1.6;
    color: var(--pm-on-navy);
  }

  .pm-show__nota {
    margin: 0;
    padding-block-start: var(--pm-space-4);
    border-block-start: var(--pm-border-on-navy);
    font-size: var(--pm-fs-small);
    line-height: 1.55;
    color: var(--pm-on-navy-quiet);
  }

  @media (min-width: 900px) {
    .pm-show { grid-template-columns: 1.25fr 1fr; gap: var(--pm-space-7) }
  }

  /* El reloj, sobre una foto de pista: se ve mucho mas que sobre fondo plano. */
  

  

  

  /* Puntazo: el mismo destello que hace la pista, en el marcador y el reloj. */
  .pm-demo.is-puntazo .pm-led,
  .pm-demo.is-puntazo 

  @keyframes pm-puntazo {
    0%, 100% { background: color-mix(in oklch, var(--pm-navy-dark) 92%, black) }
    50%      { background: var(--pm-lima) }
  }

  @media (prefers-reduced-motion: reduce) {
    .pm-demo.is-puntazo .pm-led,
    .pm-demo.is-puntazo 
  }


  /* score-demo: marcador LED, reloj y control. Todo con tokens y dentro del
     contenedor del sistema, para que no haya dos anchos distintos. */
  .pm-demo { display: grid; gap: var(--pm-space-6); align-items: start; }

  .pm-demo figure { margin: 0; display: grid; gap: var(--pm-space-3); }

  /* El marcador, imitando un panel LED sobre el cristal del fondo. */
  .pm-led {
    display: grid;
    gap: var(--pm-space-2);
    padding: var(--pm-space-5);
    border-radius: var(--pm-radius-md);
    background: color-mix(in oklch, var(--pm-navy-dark) 92%, black);
    border: var(--pm-border-on-navy);
    font-variant-numeric: tabular-nums;
  }

  .pm-led__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--pm-space-4);
  }

  .pm-led__eq {
    font-family: var(--pm-font-display);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--pm-on-navy);
    position: relative;
    padding-inline-start: var(--pm-space-4);
  }

  .pm-led__eq::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    translate: 0 -50%;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 999px;
    background: var(--pm-lima);
    opacity: 0;
    transition: opacity var(--pm-transition);
  }

  .pm-led__eq.is-srv::before { opacity: 1; }

  .pm-led__sets {
    font-family: var(--pm-font-mono);
    font-size: 1.125rem;
    color: var(--pm-on-navy-quiet);
    min-inline-size: 2ch;
    text-align: end;
  }

  .pm-led__pt {
    font-family: var(--pm-font-mono);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1;
    color: var(--pm-lima);
    min-inline-size: 3.5ch;
    text-align: end;
    transition: scale var(--pm-transition);
  }

  /* El reloj: mismo estado, otra pantalla. */
  

  

  

  

  

  .pm-demo__ctrl { display: grid; gap: var(--pm-space-4); align-content: start; }

  .pm-demo__hint, .pm-demo__msg {
    margin: 0;
    font-size: var(--pm-fs-small);
    line-height: 1.55;
    color: var(--pm-on-navy);
  }

  .pm-demo__msg {
    padding: var(--pm-space-4);
    border-inline-start: 2px solid var(--pm-lima);
    background: color-mix(in oklch, var(--pm-white) 6%, transparent);
    font-family: var(--pm-font-mono);
    letter-spacing: 0.04em;
  }

  .pm-demo__ctrl .pm-actions { flex-wrap: wrap; }

  @media (prefers-reduced-motion: no-preference) {
    .pm-led__pt.is-bump { scale: 1.14; }
  }

  @media (min-width: 900px) {
    .pm-demo { grid-template-columns: 1.4fr 0.7fr 1.1fr; gap: var(--pm-space-7); }
  }


  /* Caracteristicas dentro de la tarjeta de modelo: seis por modelo. */
  .pm-product__car { margin-block: var(--pm-space-4) var(--pm-space-4); }

  .pm-product__car li { font-size: var(--pm-fs-small); line-height: 1.5; }


  /* pack-groups: tres paquetes, cada uno con sus tres capacidades. */
  .pm-pack { margin-block-start: var(--pm-space-8); }

  .pm-pack:first-of-type { margin-block-start: 0; }

  .pm-pack__head {
    display: grid;
    gap: var(--pm-space-4);
    padding-block-end: var(--pm-space-5);
    margin-block-end: var(--pm-space-5);
    border-block-end: 2px solid var(--pm-navy);
  }

  .pm-pack__n {
    margin: 0;
    font-family: var(--pm-font-mono);
    font-size: var(--pm-fs-small);
    letter-spacing: 0.14em;
    color: var(--pm-lima-dark);
  }

  .pm-pack__t {
    margin: 0;
    font-family: var(--pm-font-display);
    font-weight: 700;
    font-size: var(--pm-fs-h2);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--pm-navy);
  }

  .pm-pack__s {
    margin-block: var(--pm-space-2) 0;
    font-size: var(--pm-fs-lead);
    line-height: 1.45;
    color: var(--pm-ink);
  }

  .pm-pack__d {
    margin: 0;
    font-size: var(--pm-fs-body);
    line-height: 1.65;
    color: var(--pm-gray-700);
    max-inline-size: var(--pm-measure);
  }

  .pm-pack__f .pm-card h4 { margin: 0 0 var(--pm-space-2); }

  .pm-pack__vid { margin: var(--pm-space-5) 0 0; }

  .pm-pack__vid video {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--pm-radius-md);
    border: var(--pm-border);
  }

  .pm-pack__vid figcaption { margin-block-start: var(--pm-space-3); color: var(--pm-gray-700); }

  @media (min-width: 900px) {
    .pm-pack__head { grid-template-columns: 3rem 22rem 1fr; align-items: start; }
  }


  /* domo-sim: interruptores y panel de estado. */
  .pm-sim { display: grid; gap: var(--pm-space-6); }

  .pm-sim__ctrl {
    display: grid;
    gap: var(--pm-space-4);
    padding: var(--pm-space-6);
    border: var(--pm-border);
    border-radius: var(--pm-radius-md);
    background: var(--pm-white);
    align-content: start;
  }

  .pm-sim__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--pm-space-4);
  }

  .pm-sim__lbl {
    font-family: var(--pm-font-display);
    font-weight: 600;
    color: var(--pm-ink);
  }

  .pm-sim__est {
    font-family: var(--pm-font-mono);
    font-size: var(--pm-fs-small);
    letter-spacing: 0.06em;
    color: var(--pm-gray-700);
    min-inline-size: 8ch;
    text-align: end;
  }

  .pm-sim__sw {
    inline-size: 3.25rem;
    block-size: 1.75rem;
    padding: 3px;
    border: var(--pm-border);
    border-radius: 999px;
    background: var(--pm-gray-100);
    cursor: pointer;
    transition: background-color var(--pm-transition), border-color var(--pm-transition);
  }

  .pm-sim__sw span {
    display: block;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: 999px;
    background: var(--pm-gray-500);
    transition: translate var(--pm-transition), background-color var(--pm-transition);
  }

  .pm-sim__sw[aria-pressed="true"] { background: var(--pm-navy); border-color: var(--pm-navy); }

  .pm-sim__sw[aria-pressed="true"] span { translate: 1.5rem 0; background: var(--pm-lima); }

  .pm-sim__sw:focus-visible { outline: 2px solid var(--pm-lima-dark); outline-offset: 2px; }

  .pm-sim__row--dim input[type="range"] { inline-size: 8rem; accent-color: var(--pm-navy); }

  .pm-sim__panel {
    --luz: 0.8;
    padding: var(--pm-space-7) var(--pm-space-6);
    border-radius: var(--pm-radius-md);
    background: var(--pm-navy-dark);
    color: var(--pm-on-navy);
    display: grid;
    gap: var(--pm-space-3);
    align-content: center;
    transition: box-shadow var(--pm-transition);
  }

  .pm-sim__panel[data-abierta="1"] {
    box-shadow: inset 0 0 0 2px var(--pm-lima);
  }

  .pm-sim__res {
    margin: 0;
    font-family: var(--pm-font-display);
    font-size: var(--pm-fs-h3);
    color: color-mix(in oklch, var(--pm-white) calc(60% + var(--luz) * 40%), transparent);
  }

  .pm-sim__avi {
    margin: 0;
    font-family: var(--pm-font-mono);
    font-size: var(--pm-fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pm-lima);
  }

  @media (min-width: 900px) {
    .pm-sim { grid-template-columns: 1fr 1fr; gap: var(--pm-space-7); }
  }


  /* ANCHO DEL CONTENEDOR — decision del cliente, no del sistema.
     Los tokens fijan 1200px. En pantallas grandes eso deja demasiado margen a
     los lados y no se aprovecha el ancho. Se sube de forma fluida hasta
     1560px sin tocar la hoja de tokens: el valor se sobreescribe aqui, con la
     razon escrita, para que quede claro que es una desviacion consciente. */
  .pm-container { max-inline-size: min(1560px, 100% - var(--pm-gutter) * 2); }

  .pm-container--narrow { max-inline-size: min(var(--pm-container-narrow), 100% - var(--pm-gutter) * 2); }

  /* El hero con fondo respira mas: su texto no debe llegar al borde. */
  .pm-hero--fondo .pm-hero__text { max-inline-size: 52rem; }


  /* Planos: proporciones muy distintas entre si, asi que van con relacion fija
     y 'contain' para que las celdas queden alineadas y nada se recorte. */
  .pm-media-grid--contain .pm-media img { aspect-ratio: 16 / 10; }

  /* Primera imagen a todo el ancho: el plano de AutoCAD manda sobre las cotas. */
  .pm-media-grid--lead .pm-media:first-child { grid-column: 1 / -1; }

  .pm-media-grid--lead .pm-media:first-child img { aspect-ratio: 16 / 9; }


  /* Ficha agrupada: los nombres de grupo hacen de subcabecera dentro de la
     tabla, para que se lea Estructura, Vidrios, Iluminacion y Cesped. */
  .pm-table--groups tbody + tbody th[scope="colgroup"] { padding-block-start: var(--pm-space-6); }

  .pm-table__group th {
    font-family: var(--pm-font-mono);
    font-size: var(--pm-fs-small);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pm-lima-dark);
    background: transparent;
    border-block-end: 2px solid var(--pm-navy);
    text-align: start;
  }


  /* project-groups: hasta ocho proyectos reales por modelo. */
  .pm-pgroup { margin-block-start: var(--pm-space-7); }

  .pm-pgroup:first-of-type { margin-block-start: 0; }

  .pm-pgroup__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pm-space-4);
    padding-block-end: var(--pm-space-3);
    margin-block-end: var(--pm-space-4);
    border-block-end: var(--pm-border);
  }

  .pm-pgroup__head h3 { margin: 0; }

  .pm-pgroup__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pm-space-4);
  }

  .pm-pcard {
    display: grid;
    gap: var(--pm-space-2);
    text-decoration: none;
    color: inherit;
  }

  .pm-pcard img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: var(--pm-border);
    border-radius: var(--pm-radius-md);
    transition: border-color var(--pm-transition);
  }

  .pm-pcard:hover img { border-color: var(--pm-border-hover); }

  .pm-pcard__tx { display: grid; gap: var(--pm-space-1); }

  .pm-pcard__t {
    font-family: var(--pm-font-display);
    font-weight: 600;
    font-size: var(--pm-fs-small);
    line-height: 1.3;
    color: var(--pm-ink);
  }

  .pm-pcard:hover .pm-pcard__t { color: var(--pm-navy); }

  .pm-pgroup__cta { margin-block: var(--pm-space-8) 0; }

  @media (min-width: 640px) { .pm-pgroup__grid { grid-template-columns: repeat(4, 1fr); } }

  @media (min-width: 1200px) { .pm-pgroup__grid { grid-template-columns: repeat(8, 1fr); } }


  /* Render con fondo blanco en el hero: tiene que caber ENTERO, no recortado.
     Los tokens usan object-fit: cover, correcto para fotos y erroneo para un
     render de producto, que pierde la pista al recortarse. */
  .pm-hero__media--contain img {
    aspect-ratio: 16 / 11;
    object-fit: contain;
    background: var(--pm-white);
    padding: var(--pm-space-4);
  }


  /* config-tabs: eleccion por numero de pistas. */
  .pm-tabs__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--pm-gray-300);
    border: var(--pm-border);
    margin-block-end: var(--pm-space-6);
  }

  .pm-tab {
    display: grid;
    gap: var(--pm-space-1);
    justify-items: start;
    padding: var(--pm-space-4);
    background: var(--pm-white);
    border: 0;
    cursor: pointer;
    text-align: start;
    transition: background-color var(--pm-transition);
  }

  .pm-tab:hover { background: var(--pm-gray-100); }

  .pm-tab.is-on { background: var(--pm-navy); }

  .pm-tab:focus-visible { outline: 2px solid var(--pm-lima-dark); outline-offset: -2px; }

  .pm-tab__n {
    font-family: var(--pm-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--pm-navy);
  }

  .pm-tab__t {
    font-family: var(--pm-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pm-gray-700);
  }

  .pm-tab.is-on .pm-tab__n { color: var(--pm-lima); }

  .pm-tab.is-on .pm-tab__t { color: var(--pm-on-navy); }

  .pm-tabs__panel { display: none; }

  .pm-tabs__panel.is-on { display: block; }

  @media (min-width: 640px) {
    .pm-tabs__list { grid-template-columns: repeat(3, 1fr); }
  }

  @media (min-width: 900px) {
    .pm-tabs__list { grid-template-columns: repeat(6, 1fr); }
  }


  /* Pie de tabla con la descarga de la ficha en PDF. */
  .pm-table-pie {
    margin-block: var(--pm-space-6) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pm-space-4);
  }


  /* media-grid: imagenes con pie. 'contain' para renders con fondo blanco, que
     no se deben recortar; sin el, recorte a 4:3 para fotos de obra. */
  .pm-media-grid { display: grid; gap: var(--pm-space-5); }

  .pm-media { margin: 0; display: grid; gap: var(--pm-space-3); }

  .pm-media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--pm-white);
    border: var(--pm-border);
    border-radius: var(--pm-radius-md);
  }

  .pm-media-grid--contain .pm-media img {
    object-fit: contain;
    padding: var(--pm-space-4);
  }

  .pm-media a { display: block; }

  .pm-media a img { transition: border-color var(--pm-transition); }

  .pm-media a:hover img { border-color: var(--pm-border-hover); }

  .pm-media figcaption { color: var(--pm-gray-700); }

  .pm-media figcaption .pm-eyebrow { display: block; margin-block-end: var(--pm-space-1); }


  /* process-steps: cinco fases en una linea con subgrid para que los titulares
     y los textos queden alineados por filas reales, no a ojo. */
  .pm-steps {
    display: grid;
    gap: var(--pm-space-5);
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
    grid-template-rows: auto auto 1fr;
  }

  .pm-step {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: var(--pm-space-2);
    padding-block-start: var(--pm-space-4);
    border-block-start: 2px solid var(--pm-gray-300);
  }

  .pm-step__n {
    margin: 0;
    font-family: var(--pm-font-mono);
    font-size: var(--pm-fs-small);
    letter-spacing: 0.12em;
    color: var(--pm-lima-dark);
  }

  .pm-step h3 { margin: 0; }

  .pm-step p:last-child {
    margin: 0;
    font-size: var(--pm-fs-small);
    line-height: 1.55;
    color: var(--pm-gray-700);
  }

  @media (min-width: 900px) {
    .pm-steps { grid-template-columns: repeat(5, 1fr); gap: var(--pm-space-5); }
  }

  @media (min-width: 640px) and (max-width: 899px) {
    .pm-steps { grid-template-columns: repeat(2, 1fr); }
  }


  /* La hoja de tokens estiliza la banda de datos suponiendo fondo navy: la
     etiqueta va en blanco al 65% y el filete en navy claro. Sobre fondo claro
     eso es texto blanco sobre blanco. Aqui van las variantes para claro.
     Se selecciona por exclusion para que valga en 'white' y en 'surface'. */
  .pm-section:not(.pm-section--navy):not(.pm-section--navy-dark) .pm-data {
    border-inline-start: var(--pm-border);
  }

  .pm-section:not(.pm-section--navy):not(.pm-section--navy-dark) .pm-data__value {
    color: var(--pm-ink);
  }

  /* gray-700 y no gray-500: la etiqueta va en mayusculas y a 0.875rem, asi que
     necesita 4.5:1. El gray-500 sobre surface da 4.31 y no pasa. */
  .pm-section:not(.pm-section--navy):not(.pm-section--navy-dark) .pm-data__label {
    color: var(--pm-gray-700);
  }

  /* El dato de acento sobre claro necesita el lima legible, no el puro. */
  .pm-section:not(.pm-section--navy):not(.pm-section--navy-dark) .pm-data--accent .pm-data__value {
    color: var(--pm-lima-dark);
  }


  /* split-feature con dos fotos: solo para el bloque de espesores, donde la
     prueba exige mostrar los dos modelos marcados. */
  .pm-split__media--duo { display: grid; gap: var(--pm-space-4); }

  .pm-split__media--duo figure { margin: 0; }

  .pm-split__media--duo img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--pm-radius-md);
    border: var(--pm-border-on-navy);
  }

  .pm-split__media--duo figcaption {
    margin-block-start: var(--pm-space-2);
    display: flex;
    align-items: center;
    gap: var(--pm-space-2);
    color: var(--pm-on-navy-quiet);
  }

  /* Cuadradito que explica el codigo de color de las fotos marcadas. */
  .pm-marca {
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-radius: 2px;
    background: var(--pm-error);
    flex: none;
  }


  /* Hero con video de fondo a sangre. El texto va encima sobre un velo que
     garantiza contraste; el video es decorativo y no lleva texto propio. */
  .pm-hero--fondo {
    position: relative;
    display: grid;
    align-items: end;
    min-block-size: clamp(30rem, 68dvh, 44rem);
    overflow: clip;
  }

  .pm-hero--fondo > .pm-container { position: relative; z-index: 2; }

  .pm-hero__bg { position: absolute; inset: 0; z-index: 0; }

  .pm-hero__bg :is(video, img) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Velo: mas denso abajo, donde va el texto. */
  .pm-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      color-mix(in oklch, var(--pm-navy-dark) 55%, transparent) 0%,
      color-mix(in oklch, var(--pm-navy-dark) 72%, transparent) 55%,
      color-mix(in oklch, var(--pm-navy-dark) 92%, transparent) 100%
    );
  }

  .pm-hero--fondo .pm-hero__text { max-inline-size: 46rem; }

  @media (prefers-reduced-motion: reduce) {
    .pm-hero__bg video { display: none; }
    .pm-hero__bg {
      background-image: var(--pm-hero-poster);
      background-size: cover;
      background-position: center;
    }
  }


  /* Hero con video: mismo hueco que la imagen, sin salto de maqueta. */
  .pm-hero__media video {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--pm-radius-md);
  }

  /* Tarjeta con foto: la imagen sustituye al icono y permite menos texto. */
  .pm-card--media { padding: 0; overflow: hidden; }

  .pm-card--media > * { padding-inline: var(--pm-space-5); }

  .pm-card__media {
    margin: 0;
    padding-inline: 0;
    overflow: hidden;
    background: var(--pm-gray-100);
  }

  .pm-card__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: scale var(--pm-transition);
  }

  .pm-card--media:hover .pm-card__media img { scale: 1.03; }

  .pm-card--media > :last-child { padding-block-end: var(--pm-space-5); }

  /* Video de proyecto dentro de la tarjeta de producto. */
  .pm-product__media video {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  @media (prefers-reduced-motion: reduce) {
    .pm-card--media:hover .pm-card__media img { scale: 1; }
  }


  /* content-guide: contenido largo indexable con índice pegajoso.
     Justificación en blocks/pm-blocks.php. */
  /* Dos columnas es una decision de layout de pagina, asi que va en media
     query. Una container query no puede estilar a su propio contenedor:
     ponerla ahi es lo que hacia que el indice se solapara con el texto. */
  .pm-guide {
    display: grid;
    gap: var(--pm-space-7);
  }

  @media (min-width: 900px) {
    .pm-guide {
      grid-template-columns: 17rem minmax(0, 1fr);
      gap: var(--pm-space-8);
      align-items: start;
    }
    .pm-guide__nav {
      position: sticky;
      inset-block-start: var(--pm-space-8);
      max-block-size: calc(100dvh - var(--pm-space-9));
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  }

  .pm-guide__nav { align-self: start; }

  .pm-guide__toc {
    margin-block: var(--pm-space-3) 0;
    padding-inline-start: 0;
    list-style: none;
    counter-reset: pm-toc;
    display: grid;
    gap: var(--pm-space-1);
  }

  .pm-guide__toc li { counter-increment: pm-toc; }

  .pm-guide__toc a {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: var(--pm-space-2);
    padding-block: var(--pm-space-2);
    padding-inline: var(--pm-space-3);
    border-inline-start: var(--pm-border);
    color: var(--pm-gray-700);
    font-size: var(--pm-fs-small);
    line-height: 1.4;
    text-decoration: none;
    transition: color var(--pm-transition), border-color var(--pm-transition),
                background-color var(--pm-transition);
  }

  .pm-guide__toc a::before {
    content: counter(pm-toc, decimal-leading-zero);
    font-family: var(--pm-font-mono);
    color: var(--pm-lima-dark);
  }

  .pm-guide__toc a:hover,
  .pm-guide__toc a:focus-visible {
    color: var(--pm-ink);
    border-color: var(--pm-lima-dark);
    background: var(--pm-white);
  }

  /* El apartado que se esta leyendo: se marca al hacer scroll. */
  .pm-guide__toc a.is-on {
    color: var(--pm-ink);
    background: var(--pm-white);
    border-inline-start-width: 3px;
    border-color: var(--pm-lima-dark);
    font-weight: 500;
  }

  .pm-guide__toc a.is-on::before { color: var(--pm-ink) }

  .pm-guide__body {
    display: grid;
    gap: var(--pm-space-8);
    max-width: var(--pm-measure);
  }

  .pm-guide__sec { scroll-margin-block-start: var(--pm-space-9); }

  .pm-guide__h {
    margin-block: 0 var(--pm-space-4);
    font-family: var(--pm-font-display);
    font-size: var(--pm-fs-h2);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--pm-navy);
  }

  .pm-guide__sec p {
    margin-block: 0 var(--pm-space-4);
    font-size: var(--pm-fs-body);
    line-height: 1.65;
    color: var(--pm-gray-700);
    text-wrap: pretty;
  }

  .pm-guide__sec p:last-child { margin-block-end: 0; }

  .pm-guide__sub {
    margin-block: var(--pm-space-6) var(--pm-space-3);
    font-family: var(--pm-font-display);
    font-size: var(--pm-fs-h3);
    line-height: 1.3;
    color: var(--pm-ink);
  }

  .pm-guide__sec > .pm-guide__sub:first-of-type { margin-block-start: var(--pm-space-4); }

  .pm-guide__fig { margin: var(--pm-space-5) 0 0; }

  .pm-guide__fig img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: var(--pm-border);
    border-radius: var(--pm-radius-md);
  }

  .pm-guide__fig figcaption {
    margin-block-start: var(--pm-space-3);
    color: var(--pm-gray-500);
  }

}

@layer utilidades {

  /* Segunda seccion oscura seguida: mismo comportamiento de widget, tono
     distinto, para que no se lean como un solo bloque interminable. */
  .pm-tec-alt { background: var(--pm-navy-dark); }

  /* El video del banquillo es de 360x202 nativos: estirarlo a 900 lo destroza.
     Se limita a su tamano real y se centra. */
  .pm-pack__vid video { max-inline-size: 420px; margin-inline: auto; }

  .pm-pack__vid { display: grid; justify-items: center; }

  .pm-pack__vid figcaption { text-align: center; }
}