@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianaslabarceloneta.es
   Arquetipo T04 Reticula · semilla sal=0
   Prefijo de clases: plb-
   Generado por generador-temas.py — NO editar a mano.
   Para cambiar el diseño, regenerar con otra sal y actualizar el registro.
   ═══════════════════════════════════════════════════════════════ */

/* Tipos registrados: permiten animar e interpolar tokens sin JS */
@property --h { syntax:'<number>'; inherits:true; initial-value:0; }

:root{
  /* ── SEMILLA CROMÁTICA ─────────────────────────────────────────
     Solo se declaran dos colores reales. Todo lo demás se deriva en
     el navegador con oklch() relativo, color-mix() y contrast-color().
     Cambiar --c-brand recalcula la web entera manteniendo contrastes. */
  --h: 29;
  --c-brand:  #B3261E;
  --c-accent: #1B2F4B;

  /* Derivados de marca (esquema: triada) */
  --c-brand-hi:   oklch(from var(--c-brand) calc(l + .10) c h);
  --c-brand-lo:   oklch(from var(--c-brand) calc(l - .12) c h);
  --c-brand-lo-ink: oklch(1 0 0);   /* texto del botón principal en :hover */
  --c-brand-soft: oklch(from var(--c-brand) calc(l + .34) calc(c * .30) h);
  --c-brand-ink:  oklch(1 0 0);   /* calculada con WCAG: contrast-color() de Chrome elegía blanco a 4,42:1 sobre naranjas medios */
  --c-accent-ink: oklch(1 0 0);

  /* Superficies (clara) */
  --c-surface:   oklch(1 0 0);
  --c-surface-2: oklch(0.968 0.004 var(--h));
  --c-ink:       oklch(0.19 0.02 var(--h));
  --c-ink-soft:  oklch(from var(--c-ink) 0.53 calc(c * .8) h);
  --c-ink-soft-claro: oklch(from var(--c-ink) 0.53 calc(c * .8) h);
  --c-band-ink-soft: oklch(0.86 .02 29);                /* texto secundario sobre fondo oscuro */
  --c-band:      oklch(0.22 0.012 var(--h));
  --c-band-ink:  oklch(1 0 0);
  --c-line:      color-mix(in oklch, var(--c-ink) 12%, transparent);
  --c-focus:     oklch(from var(--c-accent) .62 .19 h);
  --c-error:     oklch(0.55 .19 27);

  /* ── CTA DE LLAMADA (R24) ─────────────────────────────────────
     Header, menú móvil y barra inferior. Elegido por el generador para
     contrastar 6.54:1 con la superficie y 6.54:1 con su texto.
     Candidato: brand. Para cambiarlo: regenerar con --cta. */
  --c-cta:       var(--c-brand);
  --c-cta-ink:   oklch(1 0 0);

  /* ── MARCA Y ACENTO COMO TEXTO (R25) ──────────────────────────
     Cuando el color de marca o de acento se usa para LETRA (cifras, etiquetas,
     fechas, marcas), se usa esta versión: misma tonalidad, claridad ajustada
     para 4.6:1 contra --c-surface, --c-surface-2 y --c-brand-soft. */
  --c-brand-text:  oklch(from var(--c-brand) 0.461 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.461 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.641 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.303 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.623 c h);

  /* ── GEOMETRÍA (micro) ───────────────────────────── */
  --r-btn:3px; --r-card:4px; --r-input:3px; --r-img:3px;
  --bw-card:1px; --bw-btn:1px; --bw-line:1px;

  /* ── SOMBRAS (borde-base) ─────────────────────────────────── */
  --sh-card:0 2px 0 var(--c-line);
  --sh-btn:none;
  --sh-hover:0 4px 0 var(--c-brand);

  /* ── RITMO (base 5px · densidad normal ×1.0) ───────── */
  --w-container:1260px;
  --sp-1:5px; --sp-2:10px; --sp-3:15px; --sp-4:25px;
  --sp-5:40px; --sp-6:65px;
  --sp-section:clamp(45px, 4.5vw, 88px);
  --sp-block:var(--sp-4);
  --sp-gap:15px;
  --card-pad:20px;

  /* ── TIPOGRAFÍA (escala modular ×1.414) ────────────────────────── */
  --ff-head:'Geist', system-ui, sans-serif;
  --ff-body:'Geist', system-ui, sans-serif;
  --fw-head:700; --fw-body:400; --fw-strong:700;
  --fs-h1:clamp(39.4px, 4.8vw, 73.5px);
  --fs-h2:clamp(28.8px, 3.1vw, 45.2px);
  --fs-h3:23.4px;
  --fs-body:16.7px;
  --fs-small:11.3px;
  --tt-head:none; --ls-head:-0.025em;
  --lh-head:1.12; --lh-body:1.62;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:10px 20px;
  --btn-fw:800;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:block;
  --icon-sw:2;
  --h-img-service:150px;
  --h-img-hero:260px;

  /* ── MOVIMIENTO ──────────────────────────────────────────────── */
  --tr:.12s;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* Fallback para navegadores sin contrast-color(): tinta calculada con luminancia WCAG real */
@supports not (color: contrast-color(red)){
  :root{
    --c-brand-ink:oklch(1 0 0);
    --c-accent-ink:oklch(1 0 0);
    --c-band-ink:oklch(1 0 0);
    --c-brand-lo-ink:oklch(1 0 0);
    --c-cta-ink:oklch(1 0 0);
  }
}

/* ── VARIANTES ACTIVAS ─────────────────────────────────────────────
   base.css define todos los layouts. Estas clases en <body> activan
   los de esta web. Vocabulario de clases: tile / shell / action
   ────────────────────────────────────────────────────────────────── */
/* hero:H2 servicios:S1 ventajas:V4
   proceso:P1 resenas:R4 faq:F1
   zonas:Z3 contacto:CT2 footer:FO1
   etiqueta:texto numeracion:sin iconos:Feather */

/* Etiqueta y numeración en @layer variants: así las reglas de contraste de
   base.css (fondos de banda, @layer state) pueden ajustarlas. */
@layer variants {
/* Etiqueta de sección — variante texto */
.plb-eyebrow{color:var(--c-brand-text);font-weight:var(--fw-strong);font-size:var(--fs-small)}

/* Numeración del proceso — variante sin */
.plb-step-num{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   BRIEF B · «La pizarra» · calido-cercano (+ carta «fondo-papel»)
   Tokens de color: generador-temas.py (--marca #B3261E --acento #1B2F4B); piel: web-direccion-arte
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Bricolage Grotesque';src:url('/fonts/titular-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Lexend';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lexend';src:url('/fonts/texto-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  --mask-on:#000; --mask-off:#0000;
  --ff-head:'Bricolage Grotesque',system-ui,sans-serif; --ff-body:'Lexend',system-ui,sans-serif;
  --fw-head:800; --fw-strong:600; --ls-head:-0.025em; --lh-head:1.04; --lh-body:1.65;
  --fs-hero:clamp(2.5rem,1.2rem + 4vw,4.4rem); --fs-h2:clamp(1.85rem,1.2rem + 1.9vw,2.8rem); --fs-h3:1.18rem; --fs-body:17px; --fs-small:.84rem;
  --c-surface:oklch(0.975 0.013 85);           /* papel */
  --c-surface-2:oklch(0.945 0.022 82);         /* papel tostado */
  --c-ink:oklch(0.26 0.04 258); --c-ink-soft:oklch(0.45 0.03 258); --c-ink-soft-claro:oklch(0.45 0.03 258);
  --c-band:oklch(0.29 0.035 245);              /* pizarra */
  --c-band-ink:oklch(0.97 0.015 85); --c-band-ink-soft:oklch(0.88 0.02 85);
  --c-tiza:oklch(0.96 0.02 85);
  --c-line:color-mix(in oklch,var(--c-ink) 22%,transparent);
  --r-btn:6px; --r-card:6px; --r-input:6px; --r-img:6px;
  --bw-card:2px; --sh-card:5px 5px 0 color-mix(in oklch,var(--c-ink) 85%,transparent); --sh-hover:7px 7px 0 var(--c-ink);
  --btn-pad:.9rem 1.4rem; --btn-fw:600; --card-pad:1.5rem; --w-container:1180px;
  --sp-section:clamp(60px,7vw,104px);
}
@layer skin{
  body{font-size:var(--fs-body);background-color:var(--c-surface);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
  h1,h2,h3{font-family:var(--ff-head);font-weight:var(--fw-head);letter-spacing:var(--ls-head)}
  h3{letter-spacing:-.01em}
  .plb-btn{border-radius:var(--r-btn);border:2px solid var(--c-ink);box-shadow:3px 3px 0 var(--c-ink);font-weight:600}
  .plb-btn--primary{border-color:var(--c-ink)}
  .plb-btn--secondary{background:var(--c-surface);color:var(--c-ink)}
  @media (prefers-reduced-motion:no-preference){.plb-btn{transition:transform .15s,box-shadow .15s}.plb-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--c-ink)}}
  .plb-eyebrow{font-weight:600;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-brand-text);display:inline-block}
  /* RECURSO: el trazo de tiza (subrayado y cifras rodeadas a mano) */
  .plb-x-tiza{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13c40-7 95-9 150-5 16 1 30 3 44 5' fill='none' stroke='%23e9584d' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M12 18c50-4 100-5 160-1' fill='none' stroke='%23e9584d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") bottom/100% .32em no-repeat;padding-bottom:.08em}
  /* hero: hoja de papel sobre la foto de la calle */
  .plb-hv--sangre{min-height:min(88vh,780px);align-items:center}
  .plb-hv--sangre::after{background:linear-gradient(90deg,oklch(0.2 0.03 250 / .55) 0%,oklch(0.2 0.03 250 / .15) 60%,transparent 100%)}
  .plb-x-hoja{background:var(--c-surface);color:var(--c-ink);max-width:40rem;padding:clamp(1.5rem,4vw,2.8rem);border:2px solid var(--c-ink);border-radius:var(--r-card);box-shadow:8px 8px 0 var(--c-ink)}
  .plb-hv--sangre .plb-x-hoja :is(h1,p,.plb-eyebrow){color:var(--c-ink)}
  .plb-hv--sangre .plb-x-hoja .plb-eyebrow{color:var(--c-brand-text-claro)}
  .plb-hv--sangre .plb-x-hoja .plb-hv-texto>p,.plb-hv--sangre .plb-x-hoja>p{color:var(--c-ink-soft)}
  .plb-hv--sangre .plb-x-hoja .plb-hv-datos{border-top:2px dashed var(--c-line)}
  .plb-hv--sangre .plb-x-hoja .plb-hv-datos span{color:var(--c-ink-soft)}
  .plb-hv--sangre .plb-x-hoja .plb-btn--secondary{color:var(--c-ink);background:var(--c-surface);border-color:var(--c-ink)}
  .plb-hv-datos strong{color:var(--c-brand-text-claro)}
  /* síntomas: fichas con borde grueso y número rodeado con tiza */
  .plb-v-sintomas{border:0;gap:1.2rem}
  @media (min-width:900px){.plb-v-sintomas{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .plb-v-sintomas>*{border:2px solid var(--c-ink);border-radius:var(--r-card);margin:0;background:var(--c-surface);box-shadow:var(--sh-card)}
  .plb-x-num{font-family:var(--ff-head);font-weight:800;font-size:1.5rem;width:2.7rem;height:2.7rem;display:grid;place-items:center;margin:0 0 .6rem;color:var(--c-brand-text);
    border:2.5px solid var(--c-brand);border-radius:52% 48% 55% 45% / 48% 55% 45% 52%;transform:rotate(-4deg)}
  .plb-v-sintomas a{color:var(--c-ink)}
  .plb-v-cab h2+p{margin-top:.8rem}
  /* foto con marco de papel */
  .plb-x-foto-papel{border:10px solid oklch(1 0 0);box-shadow:6px 6px 0 var(--c-ink);transform:rotate(-1.2deg);border-radius:2px}
  .plb-v-check li::before{border-color:var(--c-brand)}
  /* pasos con número de tiza */
  .plb-v-pasos>li::before{background:transparent;color:var(--c-brand-text);border:2.5px solid var(--c-brand);border-radius:52% 48% 55% 45% / 48% 55% 45% 52%;font-family:var(--ff-head);font-size:1.3rem}
  .plb-v-pasos>li::after{height:0;border-top:2.5px dashed var(--c-line);background:none}
  .plb-v--marca .plb-btn--secondary{background:var(--c-surface);color:var(--c-ink);border-color:var(--c-ink)}
  .plb-v--marca .plb-btn--secondary:hover{background:var(--c-surface);text-decoration:none}
  .plb-v-aviso h2{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem)}
  .plb-v-zonas li span{border:2px solid var(--c-ink);border-radius:var(--r-btn);background:var(--c-surface);font-weight:600}
  .plb-faq-item{border-bottom:2px dashed var(--c-line)}
}
/* ═══ LABORATORIO · plb-x-comanda: niveles como comandas de bar ═══ */
@layer skin{
  .plb-x-comanda{border:0;border-radius:0;background:oklch(1 0 0);box-shadow:0 1px 0 var(--c-line),4px 6px 14px oklch(0.3 0.03 70 / .12);
    padding:1.6rem 1.5rem 2.6rem;position:relative;
    -webkit-mask:conic-gradient(from -45deg at bottom,var(--mask-off),var(--mask-on) 1deg 89deg,var(--mask-off) 90deg) 50% / 18px 100%;
            mask:conic-gradient(from -45deg at bottom,var(--mask-off),var(--mask-on) 1deg 89deg,var(--mask-off) 90deg) 50% / 18px 100%;
    background-image:repeating-linear-gradient(transparent 0 31px,oklch(0.85 0.03 240 / .5) 31px 32px)}
  .plb-x-comanda:nth-child(1){transform:rotate(-.8deg)} .plb-x-comanda:nth-child(3){transform:rotate(.7deg)}
  .plb-x-comanda.plb-v-nivel--destacado{background-color:oklch(0.985 0.03 95)}
  .plb-x-comanda-num{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-ink-soft);margin:0;border-bottom:2px dashed var(--c-line);padding-bottom:.5rem}
  .plb-x-comanda h3{font-size:1.5rem}
  .plb-x-comandas .plb-v-niveles{gap:var(--sp-5);padding-block:.4rem}
}
/* ═══ ELEMENTO ORIGINAL · plb-f-pizarra «La pizarra del bar» (servicios) ═══ */
@layer skin{
  .plb-f-pizarra{background:var(--c-surface-2)}
  .plb-f-pizarra-marco{border:14px solid oklch(0.46 0.045 60);border-radius:8px;box-shadow:inset 0 0 0 2px oklch(0.36 0.04 60),8px 10px 0 var(--c-ink);
    background:var(--c-band)}
  .plb-f-pizarra-tabla{padding:clamp(1.6rem,5vw,3.6rem);color:var(--c-tiza);
    background:radial-gradient(60% 40% at 20% 20%,oklch(1 0 0 / .05),transparent 70%),radial-gradient(50% 50% at 85% 75%,oklch(1 0 0 / .04),transparent 70%)}
  .plb-f-pizarra-cab{text-align:center;max-width:44rem;margin:0 auto var(--sp-5)}
  .plb-f-pizarra-cab .plb-eyebrow{color:oklch(0.82 0.1 30)}
  .plb-f-pizarra-cab h2{color:var(--c-tiza);margin:.3rem 0 0}
  .plb-f-pizarra-tiza{width:min(260px,60%);height:24px;display:block;margin:.5rem auto 0;fill:none;stroke:oklch(0.72 0.14 28);stroke-width:3;stroke-linecap:round}
  .plb-f-pizarra-lista{list-style:none;margin:0 auto;padding:0;max-width:56rem;display:grid;gap:1.6rem}
  .plb-f-pizarra-linea{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:.8rem}
  .plb-f-pizarra-linea h3{margin:0;font-size:clamp(1.2rem,1rem + .8vw,1.6rem)}
  .plb-f-pizarra-linea h3 a{color:var(--c-tiza);text-decoration:none}
  .plb-f-pizarra-linea h3 a:hover{text-decoration:underline;text-decoration-color:oklch(0.72 0.14 28);text-underline-offset:.2em}
  .plb-f-pizarra-puntos{border-bottom:3px dotted oklch(0.96 0.02 85 / .55);transform:translateY(-.3em)}
  .plb-f-pizarra-nota{margin:0;font-weight:600;color:oklch(0.85 0.09 75);font-size:.98rem;text-align:right}
  .plb-f-pizarra-detalle{grid-column:1 / -1;margin:.25rem 0 0;color:var(--c-band-ink-soft);font-size:.95rem}
  .plb-f-pizarra-pie{text-align:center;margin:var(--sp-5) 0 0;color:var(--c-tiza);display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center}
  .plb-f-pizarra-pie .plb-btn{box-shadow:3px 3px 0 oklch(0 0 0 / .5);border-color:oklch(0.2 0.03 250)}
  @media (max-width:639px){.plb-f-pizarra-marco{border-width:9px}.plb-f-pizarra-linea{grid-template-columns:1fr}.plb-f-pizarra-puntos{display:none}.plb-f-pizarra-nota{text-align:left}}
}
@layer skin{h1,h2,h3{hyphens:manual;text-wrap:balance}}
@layer skin{
  .plb-x-hoja .plb-hv-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
  .plb-x-hoja .plb-hv-datos small{display:block;font-size:var(--fs-small);color:var(--c-ink-soft);line-height:1.35;margin-top:.2rem}
  @media (max-width:599px){.plb-x-hoja .plb-hv-datos strong{font-size:1.2rem}.plb-x-hoja .plb-hv-datos small{font-size:.76rem}}
}
@layer skin{.plb-hv--sangre .plb-x-hoja{--c-ink-soft:oklch(0.45 0.03 258);--c-brand-text:var(--c-brand-text-claro)}
  .plb-hv--sangre .plb-x-hoja .plb-hv-datos small{color:oklch(0.45 0.03 258)}}
/* ═══ CORRECCIÓN · crítica visual de la home, vuelta 1 (2026-10-14) ═══ */
@layer skin{
  /* 1 · Pasos: el número ya va en el H3 aprobado; el círculo de tiza queda como marca (flecha y, al final, visto bueno) */
  .plb-v-pasos>li::before{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5h12.5M12.5 7l5.5 5.5-5.5 5.5' fill='none' stroke='%23B3261E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/1.3rem no-repeat}
  .plb-v-pasos>li:last-child::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.8l4.6 4.4L19 7.5' fill='none' stroke='%23B3261E' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  /* 2 · Aire tras las rejillas y en comunidades */
  :is(.plb-v-sintomas,.plb-v-niveles,.plb-v-zonas)+p{margin-top:clamp(1.6rem,1.2rem + 1vw,2.2rem);max-width:46rem}
  .plb-v-check h2+p{margin-top:1rem}
  .plb-v-check ul{margin-block:1.4rem 0}
  .plb-v-check ul+.plb-btn{margin-top:1.8rem}
  /* 3 · Detalle de la pizarra legible a todos los anchos */
  .plb-f-pizarra-detalle{font-size:1rem}
  /* 4 · Hero: H1 y botones dentro de la primera pantalla (sin tocar el texto) */
  .plb-hv--sangre{min-height:0;align-items:start;padding-block:clamp(1rem,3vw,2.2rem) clamp(2rem,5vw,4rem)}
  .plb-x-hoja{max-width:50rem}
  .plb-x-hoja h1{margin-bottom:.9rem}
  .plb-x-hoja h1+p{margin-top:0}
  .plb-x-hoja .plb-hv-acciones{margin-top:1.3rem}
  @media (min-width:900px) and (max-height:860px){.plb-hv--sangre{--fs-hero:clamp(2.5rem,1.2rem + 3.4vw,3.9rem)}}
  @media (max-width:599px){
    .plb-hv--sangre{--fs-hero:clamp(2.1rem,1.4rem + 3vw,2.5rem)}
    .plb-x-hoja{padding:1.15rem 1.1rem 1.3rem;box-shadow:5px 5px 0 var(--c-ink)}
    .plb-x-hoja .plb-hv-texto>p,.plb-x-hoja>p{font-size:1rem;line-height:1.55}
    .plb-x-hoja h1{margin-bottom:.7rem}
    .plb-x-hoja .plb-hv-acciones{margin-top:1rem}
  }
  /* 6 · Sin franja de papel bajo el pie (el hueco de la barra fija y del aviso toma el color del pie) */
  body{background-image:linear-gradient(var(--c-band),var(--c-band)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:100% 240px,auto;background-position:bottom,0 0;background-repeat:no-repeat,repeat}
  .plb-field.plb-field--mensaje textarea{min-height:6lh}
  /* Enlaces de la pizarra: zona de toque de 44 px sin mover la línea; párrafo del aviso a medida de lectura */
  .plb-f-pizarra-linea h3 a{display:inline-block;padding-block:.65rem;margin-block:-.65rem}
  .plb-v-aviso p{max-width:62ch}
}
/* ═══ CORRECCIÓN · crítica visual de la home, vuelta 2 (2026-10-14) · ritmo titular→texto ═══
   Una sola escala para todas las piezas: H3 de ficha→texto = --ritmo-h3; H2 de banda→texto = --ritmo-h2. */
:root{--ritmo-h3:.55rem;--ritmo-h2:.9rem}
@layer skin{
  :is(.plb-v-sintomas,.plb-v-pasos,.plb-v-nivel) h3{margin-bottom:0}
  :is(.plb-v-sintomas,.plb-v-pasos,.plb-v-nivel) h3+p{margin-top:var(--ritmo-h3)}
  .plb-v-nivel h3+p{margin-top:calc(var(--ritmo-h3) - var(--sp-2))} /* la comanda ya separa con gap */
  .plb-v-aviso h2{margin-bottom:0}
  .plb-v-aviso h2+p{margin-top:var(--ritmo-h2)}
}
/* ═══ CORRECCIÓN · subpáginas (instalación, reparación, motorización) · 2026-10-14 ═══
   Misma escala de ritmo de la home: --ritmo-h3 (titular de ficha→texto), --ritmo-h2 (banda→texto),
   --ritmo-p (párrafo→párrafo o lista) y --ritmo-bloque (rejilla→párrafo de cierre). */
:root{--ritmo-p:1rem;--ritmo-bloque:clamp(1.6rem,1.2rem + 1vw,2.2rem);--fs-h3-fila:clamp(1.35rem,1.05rem + .9vw,1.75rem)}
@layer skin{
  /* 1 · Pasos: nunca se salen del contenedor y la línea de tiza no apunta a la nada al final de una fila */
  .plb-v-pasos{overflow-x:clip}
  @media (min-width:900px) and (max-width:1199px){
    .plb-v-pasos:has(>li:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
    .plb-v-pasos:has(>li:nth-child(5))>li:nth-child(3n)::after{display:none}
  }
  @media (min-width:1200px){
    .plb-v-pasos:has(>li:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
  }
  /* 2 · (el número del paso ya no se pinta: ::before con content:"" de la vuelta 1 vale para todas las páginas) */
  /* 3 · Aire: párrafos y listas seguidos dentro de filas, cabeceras y check */
  :is(.plb-v-fila>div,.plb-v-cab,.plb-v-check>div) :is(p,ul)+:is(p,ul){margin-top:var(--ritmo-p)}
  :is(.plb-v-fila>div,.plb-v-cab,.plb-v-check>div)>.plb-eyebrow+:is(h2,h3){margin-top:.35rem}
  .plb-v-fila h3{margin-bottom:0}
  .plb-v-fila h3+:is(p,ul){margin-top:var(--ritmo-h3)}
  .plb-v-fila :is(p,ul)+h3{margin-top:clamp(1.6rem,1.2rem + 1vw,2.1rem)}
  :is(.plb-v-pasos,.plb-v-filas)+p{margin-top:var(--ritmo-bloque);max-width:46rem}
  :is(.plb-v-filas,.plb-v-filas+p)+.plb-v-cab{margin-top:clamp(3rem,2rem + 3vw,5rem)}
  /* Listas con marcador de tiza (base.css quita list-style a todos los ul) */
  :is(.plb-v-fila,.plb-v-cab,.plb-v-nivel) ul:not([class]){padding-left:0;list-style:none}
  :is(.plb-v-fila,.plb-v-cab,.plb-v-nivel) ul:not([class])>li{position:relative;padding-left:1.35rem}
  :is(.plb-v-fila,.plb-v-cab,.plb-v-nivel) ul:not([class])>li+li{margin-top:.4rem}
  :is(.plb-v-fila,.plb-v-cab,.plb-v-nivel) ul:not([class])>li::before{content:"";position:absolute;left:0;top:.72em;width:.75rem;height:0;border-top:2.5px solid var(--c-brand);border-radius:2px;transform:rotate(-6deg)}
  .plb-v-nivel ul:not([class]){gap:0}
  /* Comandas: sin «Comanda n.º» en el texto, el filete discontinuo pasa bajo el H3; la 4.ª también va girada */
  .plb-x-comanda:not(:has(.plb-x-comanda-num)) h3{border-bottom:2px dashed var(--c-line);padding-bottom:.6rem}
  .plb-x-comanda:not(:has(.plb-x-comanda-num)) h3+:is(p,ul){margin-top:calc(var(--ritmo-h2) - var(--sp-2))}
  .plb-x-comanda:nth-child(4){transform:rotate(-.5deg)}
  /* 4 · H3 de las filas con su escala (nunca del tamaño de un H2) */
  .plb-v-fila h3{font-size:var(--fs-h3-fila);line-height:1.12}
  /* Filas y check sin foto: sin media columna vacía; ficha de texto a dos columnas (titular | texto) */
  @media (min-width:900px){
    .plb-v-filas:not(:has(img)){gap:0}
    .plb-v-fila:not(:has(img)){grid-template-columns:1fr;padding-block:clamp(1.6rem,2.5vw,2.4rem)}
    .plb-v-fila:not(:has(img))+.plb-v-fila:not(:has(img)){border-top:2px dashed var(--c-line)}
    .plb-v-fila:not(:has(img))>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:var(--sp-6);align-items:start}
    .plb-v-fila:not(:has(img))>div>*{grid-column:2;max-width:46rem}
    .plb-v-fila:not(:has(img))>div>h3{grid-column:1;grid-row:1 / span 6;margin:0}
    .plb-v-fila:not(:has(img))>div>h3+:is(p,ul){margin-top:0}
    .plb-v-check:not(:has(img)){grid-template-columns:1fr}
    .plb-v-check:not(:has(img))>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--sp-6);align-items:start}
    .plb-v-check:not(:has(img))>div>*{grid-column:1}
    .plb-v-check:not(:has(img))>div>ul:first-of-type{grid-column:2;grid-row:1 / span 12;position:sticky;top:7rem;margin:0;padding:1.5rem 1.5rem 1.5rem 1.4rem;background:var(--c-surface);border:2px solid var(--c-ink);border-radius:var(--r-card);box-shadow:var(--sh-card)}
    .plb-v-check:not(:has(img))>div>ul:first-of-type+p{margin-top:var(--ritmo-p)}
  }
}
/* ═══ CORRECCIÓN · web-corrector 2026-10-14 · aviso de cookies compacto en móvil (no tapa la llamada a la acción del hero a 360 px) ═══
   Solo estilo: texto y botón en una fila, menos relleno. Se sigue mostrando con transform (base.css).
   Va en @layer state porque el aviso de base.css está en esa capa (mismo nivel, sin !important). */
@layer state{
  @media (max-width:599px){
    .plb-cookies{padding:.55rem 0}
    .plb-cookies .plb-container{flex-wrap:nowrap;gap:.75rem}
    .plb-cookies p{line-height:1.35}
    .plb-cookies .plb-btn{flex:none;min-height:44px;padding:.45rem .85rem}
  }
}
/* ═══ CORRECCIÓN · crítica visual FINAL, vuelta 1 (2026-10-15) ═══
   1 · R37: datos del hero sin cifra (solo <span>) en una columna por debajo de 600 px: ninguna palabra se parte.
   2 · Hero móvil: franja de foto visible sobre la hoja (la foto queda arriba; la hoja la monta 2.5rem) y botones bajo el H1. */
@layer skin{
  /* los botones suben bajo el H1 en todos los anchos (solo visual: el orden del DOM no cambia y el párrafo no tiene enlaces),
     para que la CTA quede en la primera pantalla con la franja de foto (móvil) y con la hoja más estrecha (escritorio) */
  .plb-x-hoja{display:flex;flex-direction:column;align-items:stretch}
  .plb-x-hoja>.plb-eyebrow{align-self:flex-start}
  .plb-x-hoja .plb-hv-acciones{order:1;margin-top:.4rem}
  .plb-x-hoja>p:not(.plb-eyebrow){order:2;margin-top:1.3rem}
  .plb-x-hoja>ul{order:3}
  @media (max-width:599px){
    .plb-x-hoja>p:not(.plb-eyebrow){margin-top:1.1rem}
    .plb-x-hoja .plb-hv-datos:not(:has(strong)){grid-template-columns:1fr;gap:.45rem;padding-top:.8rem;margin-top:1rem}
    .plb-x-hoja .plb-hv-datos:not(:has(strong)) li{display:flex;align-items:baseline;gap:.55rem}
    .plb-x-hoja .plb-hv-datos:not(:has(strong)) li::before{content:"";flex:none;width:.7rem;height:0;border-top:2.5px solid var(--c-brand);border-radius:2px;transform:translateY(-.3em) rotate(-6deg)}
    .plb-hv--sangre{--franja:150px;padding-top:var(--franja)}
    .plb-hv--sangre .plb-hv-media{inset:0 0 auto 0;height:calc(var(--franja) + 2.5rem)}
    .plb-hv--sangre::after{inset:0 0 auto 0;height:calc(var(--franja) + 2.5rem);background:linear-gradient(to bottom,transparent 55%,oklch(0.2 0.03 250 / .25) 100%)}
  }
}
/* 3 · Hero a ≥900 px: la foto va a la derecha de la hoja (no detrás), así el sujeto no queda tapado;
   a la izquierda, papel tostado. La hoja monta 8rem sobre la foto. */
@layer skin{
  @media (min-width:900px){
    .plb-hv--sangre{--hoja-w:46rem;--monta:8rem;background:var(--c-surface-2);overflow:clip}
    .plb-hv--sangre .plb-x-hoja{max-width:var(--hoja-w)}
    .plb-hv--sangre .plb-hv-media,.plb-hv--sangre::after{inset:0 0 0 auto;width:auto;
      left:calc(max(var(--sp-3), (100% - var(--w-container)) / 2) + var(--hoja-w) - var(--monta))}
    .plb-hv--sangre::after{background:linear-gradient(90deg,oklch(0.2 0.03 250 / .35) 0%,transparent 35%)}
  }
}