@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianasripollet.cat
   Arquetipo T03 Curva · semilla sal=0
   Prefijo de clases: ppr-
   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: 6;
  --c-brand:  #C2185B;
  --c-accent: #1B3A4B;

  /* Derivados de marca (esquema: analogo) */
  --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 6);                /* 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 5.87:1 con la superficie y 5.87: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.471 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.471 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.651 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.333 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.613 c h);

  /* ── GEOMETRÍA (pill) ───────────────────────────── */
  --r-btn:999px; --r-card:20px; --r-input:14px; --r-img:16px;
  --bw-card:0; --bw-btn:0; --bw-line:1px;

  /* ── SOMBRAS (suave) ─────────────────────────────────── */
  --sh-card:0 8px 26px oklch(from var(--c-ink) l c h / .10);
  --sh-btn:none;
  --sh-hover:0 14px 34px oklch(from var(--c-ink) l c h / .16);

  /* ── RITMO (base 5px · densidad normal ×1.0) ───────── */
  --w-container:1200px;
  --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.618) ────────────────────────── */
  --ff-head:'Nunito Sans', system-ui, sans-serif;
  --ff-body:'Nunito Sans', system-ui, sans-serif;
  --fw-head:800; --fw-body:400; --fw-strong:700;
  --fs-h1:clamp(55.9px, 5.0vw, 132.9px);
  --fs-h2:clamp(36.3px, 3.3vw, 67.8px);
  --fs-h3:27.2px;
  --fs-body:17.0px;
  --fs-small:9.9px;
  --tt-head:none; --ls-head:-0.02em;
  --lh-head:1.16; --lh-body:1.62;

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

  /* ── MOVIMIENTO ──────────────────────────────────────────────── */
  --tr:.24s;
  --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: item / area / go
   ────────────────────────────────────────────────────────────────── */
/* hero:H2 servicios:S1 ventajas:V2
   proceso:P3 resenas:R4 faq:F3
   zonas:Z2 contacto:CT2 footer:FO1
   etiqueta:ninguna numeracion:01 iconos:Remix */

/* 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 ninguna */
.ppr-eyebrow{display:none}

/* Numeración del proceso — variante 01 */
.ppr-step{counter-increment:paso}
.ppr-step-num::before{content:counter(paso,decimal-leading-zero);font-family:var(--ff-head);font-size:var(--fs-h2);color:var(--c-brand-soft)}
}

/* ═══════════════════════════════════════════════════════════════
   Propuesta B · «La nota de la escalera» · dirección calido-cercano (web-direccion-arte)
   Fuentes del brief (Lexend 700 + Mulish 400/600), papeles del color (frambuesa protagonista amable:
   botones píldora, banda de cifras; petróleo #1B3A4B para los títulos y la banda oscura del elemento original),
   forma cercana (radio 22 px en tarjetas y fotos, píldora en botones, sombra muy suave),
   carta «columna-estrecha» (PFX-x-columna) y elemento original PFX-f-nota.
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Lexend';src:url('/fonts/titular-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Mulish';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Mulish';src:url('/fonts/texto-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  --ff-head:'Lexend',system-ui,sans-serif; --ff-body:'Mulish',system-ui,sans-serif;
  --fw-head:700; --fw-body:400; --fw-strong:600; --btn-fw:600;
  /* Papeles: blanco y rosa claro #FDF4F7 alternos; tinta vino #2A0E1A en el texto; títulos en petróleo #1B3A4B;
     frambuesa #C2185B en botones, palabra clave y banda de cifras */
  --c-surface:#FFFFFF; --c-surface-2:#FDF4F7; --c-ink:#2A0E1A; --c-ink-soft:#5C4651; --c-ink-soft-claro:#5C4651;
  --c-band:#1B3A4B; --c-band-ink:#FFFFFF; --c-band-ink-soft:#D5E2E9;
  --c-line:#EBD9E0; --c-brand-soft:#FBE3EC;
  --c-brand-text:#AD1651; --c-brand-text-claro:#AD1651; --c-brand-text-oscuro:#F7B3CD;
  --c-accent-text:#1B3A4B; --c-accent-text-oscuro:#BFE0EF;
  --c-cta:#C2185B; --c-cta-ink:#FFFFFF;
  --petroleo:#1B3A4B;
  --r-btn:999px; --r-card:22px; --r-input:14px; --r-img:22px;
  --bw-card:1px; --bw-btn:2px;
  --sh-card:0 10px 30px rgb(42 14 26 / .08); --sh-hover:0 16px 36px rgb(42 14 26 / .12); --sh-btn:none;
  --w-container:1160px; --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:40px; --sp-6:64px;
  --sp-section:clamp(60px,7vw,104px); --card-pad:clamp(22px,2.4vw,30px); --sp-gap:20px;
  --fs-hero:clamp(2.4rem,1.3rem + 3.6vw,4.1rem); --fs-h1:var(--fs-hero); --fs-h2:clamp(1.75rem,1.2rem + 1.7vw,2.6rem); --fs-h3:1.2rem;
  --fs-body:17.5px; --fs-small:.9rem; --tt-head:none; --ls-head:-.025em; --lh-head:1.1; --lh-body:1.68;
  --btn-pad:15px 28px; --btn-tt:none; --btn-ls:0;
  --icon-sw:1.75;
}
@layer skin{
  body{background:var(--c-surface)}
  :is(h1,h2){letter-spacing:var(--ls-head);line-height:var(--lh-head);color:var(--petroleo)}
  h3{font-family:var(--ff-head);font-weight:700;letter-spacing:-.01em;line-height:1.22;color:var(--petroleo)}
  .ppr-v--oscura :is(h2,h3),.ppr-v--marca :is(h2,h3),.ppr-contacto--ct3 .ppr-head h2,.ppr-contacto--ct3 .ppr-contact-data h3{color:#fff}
  .ppr-hv h1{hyphens:manual;overflow-wrap:normal}
  .ppr-v-cab h2+p{margin-top:var(--sp-3)}
  .ppr-eyebrow{display:block;font-family:var(--ff-body);font-size:.95rem;font-weight:600;color:var(--c-brand-text);margin-bottom:.5rem}
  .ppr-eyebrow::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--c-brand);margin-right:.55em;vertical-align:.05em}
  .ppr-v--oscura .ppr-eyebrow{color:var(--c-brand-text-oscuro)}
  .ppr-v--marca .ppr-eyebrow{color:#fff}
  /* Botones píldora */
  .ppr-btn{border-radius:999px;font-weight:600}
  .ppr-btn--primary{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
  .ppr-btn--primary:hover{background:#9E1149;border-color:#9E1149}
  .ppr-btn--secondary{background:transparent;color:var(--petroleo);border-color:var(--petroleo)}
  .ppr-btn--secondary:hover{background:var(--petroleo);color:#fff}
  :is(.ppr-v--oscura,.ppr-v--marca) .ppr-btn--primary{background:#fff;color:var(--c-ink);border-color:#fff}
  .ppr-v-destacada{color:var(--c-brand-text)}
  /* Hero con tarjeta: foto de la escalera con radio grande y la tarjeta de «tu persianista del barrio» */
  .ppr-hv--tarjeta{background:linear-gradient(180deg,var(--c-surface-2),var(--c-surface))}
  .ppr-hv--tarjeta h1{max-width:15ch}
  .ppr-hv--tarjeta .ppr-hv-media img{aspect-ratio:4/5;border-radius:var(--r-img);object-position:var(--foco,50% 50%)}
  .ppr-hv--tarjeta .ppr-hv-flotante{border:0;border-radius:18px;box-shadow:0 18px 40px rgb(27 58 75 / .18)}
  .ppr-hv-flotante h2{font-size:1.1rem;color:var(--petroleo)}
  .ppr-hv-flotante p{margin:.2rem 0 0;color:var(--c-ink-soft)}
  .ppr-hv-flotante strong{color:var(--c-brand-text)}
  .ppr-hv-checks{list-style:none;padding:0;margin:var(--sp-4) 0 0;display:grid;gap:.45rem}
  .ppr-hv-checks li{position:relative;padding-left:1.9rem;font-weight:600}
  .ppr-hv-checks li::before{content:"";position:absolute;left:0;top:.25em;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--c-brand-soft)}
  .ppr-hv-checks li::after{content:"";position:absolute;left:.38rem;top:.55em;width:.45rem;height:.25rem;border-left:2px solid var(--c-brand-text);border-bottom:2px solid var(--c-brand-text);transform:rotate(-45deg)}
  /* Banda de cifras en frambuesa, sin números inventados */
  .ppr-v--marca{background:var(--c-brand)}
  .ppr-v--marca:has(.ppr-v-cifras){padding-block:clamp(36px,4.5vw,56px)}
  .ppr-v-cifras strong{font-size:clamp(1.6rem,1rem + 1.8vw,2.4rem);font-weight:700;color:#fff}
  .ppr-v-cifras span{opacity:1;color:#FFE6EF;font-size:.98rem}
  /* Servicios: tarjetas blandas numeradas con el número en círculo frambuesa suave */
  .ppr-v-numeradas>li{border:1px solid var(--c-line);box-shadow:var(--sh-card)}
  .ppr-v-numeradas>li::before{border:0;border-radius:50%;background:var(--c-brand-soft);color:var(--c-brand-text);width:2.6rem;height:2.6rem;font-family:var(--ff-head)}
  .ppr-v-numeradas a{color:var(--c-brand-text);font-weight:600;margin-top:auto}
  @media (prefers-reduced-motion:no-preference){.ppr-v-numeradas>li{transition:box-shadow .2s ease}.ppr-v-numeradas>li:hover{box-shadow:var(--sh-hover)}}
  /* Pasos: círculos petróleo unidos por línea de puntos */
  .ppr-v-pasos>li::before{background:var(--petroleo);color:#fff;font-family:var(--ff-head)}
  .ppr-v-pasos>li::after{background:none;border-top:2px dotted var(--c-brand);height:0}
  /* Galería con radio grande y pie de foto */
  .ppr-v-galeria{gap:14px}
  .ppr-v-galeria figcaption{font-weight:600}
  /* Niveles: tarjeta destacada con borde frambuesa */
  .ppr-v-nivel{box-shadow:var(--sh-card);border-color:var(--c-line)}
  .ppr-v-nivel--destacado{border:2px solid var(--c-brand)}
  .ppr-v-nivel h3{color:var(--petroleo)}
  /* Zonas en píldoras suaves */
  .ppr-v-zonas li span{background:var(--c-surface-2);border-color:var(--c-line);font-weight:600}
  .ppr-faq-item{border-bottom:1px solid var(--c-line)}
  .ppr-faq-mark{color:var(--c-brand-text)}
}

/* ── LABORATORIO · PFX-x-columna (carta «columna-estrecha») ─────────────────
   Una sección de lectura en columna estrecha centrada, como un artículo del periódico local, con capitular frambuesa y firma. */
@layer skin{
  .ppr-x-columna .ppr-x-columna-art{max-width:40rem;margin-inline:auto}
  .ppr-x-columna-art h2{margin-bottom:var(--sp-4)}
  .ppr-x-columna-art p{font-size:1.12rem;line-height:1.75}
  .ppr-x-columna-art h2+p::first-letter{float:left;font-family:var(--ff-head);font-weight:700;font-size:3.6em;line-height:.9;margin:.06em .12em 0 0;color:var(--c-brand-text)}
  .ppr-x-columna-firma{font-weight:600;color:var(--petroleo);text-align:right;font-style:italic}
}

/* ── ELEMENTO ORIGINAL · PFX-f-nota «La nota de la escalera» ─────────────────
   La CTA de mitad de página es el anuncio de papel del portal con tiras recortables: cada tira es un enlace tel:
   real (con aria-label), en vertical, separadas por un troquel de puntos. Papel con dos tiras de cinta de carrocero.
   Solo CSS; sin JS. Movimiento solo con prefers-reduced-motion: no-preference. */
@layer skin{
  .ppr-f-nota-grid{display:grid;gap:var(--sp-6);align-items:center}
  .ppr-f-nota-texto>p:not(.ppr-eyebrow){color:var(--c-band-ink-soft);font-size:1.08rem}
  .ppr-f-nota-texto .ppr-btn{margin-top:var(--sp-3)}
  .ppr-f-papel{position:relative;background:#FFFDF8;color:var(--c-ink);max-width:25rem;justify-self:center;width:100%;
    padding:2.6rem 1.8rem 0;border-radius:3px;box-shadow:0 22px 40px rgb(0 0 0 / .35);transform:rotate(-1.6deg)}
  .ppr-f-papel::before,.ppr-f-papel::after{content:"";position:absolute;top:-14px;width:96px;height:30px;background:rgb(236 222 190 / .92);
    box-shadow:0 1px 2px rgb(0 0 0 / .15)}
  .ppr-f-papel::before{left:-18px;transform:rotate(-32deg)}
  .ppr-f-papel::after{right:-18px;transform:rotate(30deg)}
  .ppr-f-papel-titulo{font-family:var(--ff-head);font-weight:700;font-size:clamp(1.9rem,1.4rem + 1.4vw,2.5rem);line-height:1.02;letter-spacing:-.03em;
    color:var(--c-brand-text);margin:0 0 .8rem;text-transform:uppercase}
  .ppr-f-papel-txt{margin:0 0 .8rem;font-size:1.02rem}
  .ppr-f-papel-firma{margin:0 0 1.4rem;font-weight:600;color:var(--petroleo)}
  .ppr-f-tiras{list-style:none;margin:0 -1.8rem;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:2px dashed #B9A7AE}
  .ppr-f-tiras li{border-right:2px dashed #B9A7AE;background:#FFFDF8}
  .ppr-f-tiras li:last-child{border-right:0}
  .ppr-f-tiras a{display:flex;align-items:center;justify-content:center;min-height:9.5rem;padding:.6rem 0;writing-mode:vertical-rl;transform:rotate(180deg);
    font-family:var(--ff-head);font-weight:700;font-size:1rem;letter-spacing:.02em;color:var(--petroleo);text-decoration:none}
  .ppr-f-tiras a:hover{color:var(--c-brand-text);text-decoration:underline}
  .ppr-f-tiras a:focus-visible{outline:3px solid var(--c-brand);outline-offset:-4px}
  /* Una tira ya medio arrancada: se ve que otros vecinos ya han llamado */
  .ppr-f-tira--suelta{transform:rotate(6deg) translate(4px,10px);transform-origin:top left;box-shadow:2px 6px 10px rgb(0 0 0 / .18)}
  @media (prefers-reduced-motion:no-preference){
    .ppr-f-tiras li:not(.ppr-f-tira--suelta){transition:transform .2s ease}
    .ppr-f-tiras li:not(.ppr-f-tira--suelta):hover{transform:translateY(5px)}
  }
  @media (min-width:900px){.ppr-f-nota-grid{grid-template-columns:1.1fr .9fr}}
  @media (max-width:420px){.ppr-f-papel{padding-inline:1.3rem}.ppr-f-tiras{margin-inline:-1.3rem}.ppr-f-tiras a{font-size:.92rem}}
}
/* Ajustes tras la primera captura: el papel es claro aunque esté en la banda oscura */
@layer skin{
  .ppr-f-papel{--c-brand-text:#AD1651}
  .ppr-f-papel-titulo{color:#AD1651}
  .ppr-x-columna-art h2+p::first-letter{margin-top:.1em}
}
/* Ajustes tras la crítica (estrés R37 y ritmo) */
@layer skin{
  .ppr-f-nota{overflow-x:clip}
  .ppr-f-tiras{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ppr-f-tiras a{overflow-wrap:anywhere;text-align:center}
  .ppr-f-tira--suelta{transform:translateY(8px)}
  @media (max-width:699px){
    .ppr-f-papel{transform:none}
    .ppr-f-papel::before{left:6px}.ppr-f-papel::after{right:6px}
  }
  .ppr-v-galeria figure{display:flex;flex-direction:column}
  .ppr-v-galeria img{height:auto;flex:1 1 auto;min-height:0}
  @media (min-width:900px){.ppr-v-galeria>:first-child img{aspect-ratio:auto}}
  .ppr-v--oscura .ppr-v-zonas li span{background:transparent;border-color:rgb(255 255 255 / .35);color:#fff}
}

  /* ajuste parecido: hero en espejo en escritorio (foto a la izquierda, tarjeta flotante hacia el texto) */
  @media (min-width:900px){
    .ppr-hv--tarjeta .ppr-hv-grid{grid-template-columns:.85fr 1.15fr;gap:clamp(40px,5vw,80px)}
    .ppr-hv--tarjeta .ppr-hv-media{order:-1}
    .ppr-hv--tarjeta .ppr-hv-media .ppr-hv-flotante{left:auto;right:calc(var(--sp-4) * -1)}
  }

/* ── Reseña real única (R29) · includes/resenas.php con VARIANTE_RESENAS r2 ─────────────────
   Una sola reseña de Google: sin media ni recuento (no se pinta la r4), la tarjeta ocupa el ancho de lectura
   como una nota de vecina, en papel rosa claro, con las comillas y las estrellas en frambuesa.
   En escritorio, cabecera a la izquierda y nota a la derecha; en móvil, una debajo de otra. */
@layer skin{
  .ppr-resenas{background:var(--c-surface)}
  .ppr-resenas .ppr-head p a{color:var(--c-brand-text);font-weight:600;text-underline-offset:.2em}
  .ppr-resenas .ppr-grid{grid-template-columns:minmax(0,1fr)}
  .ppr-resenas .ppr-card{background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--r-card);
    box-shadow:var(--sh-card);padding:clamp(24px,3.2vw,40px);max-width:46rem}
  .ppr-resenas .ppr-card:only-child{grid-column:1/-1;width:100%}
  .ppr-resenas .ppr-stars{color:var(--c-brand-text);font-size:1.25rem;letter-spacing:.12em;margin-bottom:var(--sp-3)}
  .ppr-resenas--r2 .ppr-review-text{font-family:var(--ff-body);font-weight:400;font-size:clamp(1.08rem,1rem + .35vw,1.2rem);
    line-height:1.72;color:var(--c-ink);margin-bottom:var(--sp-4)}
  .ppr-resenas--r2 .ppr-review-text::before,.ppr-resenas--r2 .ppr-review-text::after{color:var(--c-brand-text);font-family:var(--ff-head);font-weight:700}
  .ppr-resenas .ppr-review-meta{color:var(--c-ink-soft);font-size:.95rem;flex-wrap:wrap}
  .ppr-resenas .ppr-avatar{background:var(--petroleo);color:var(--c-band-ink);font-family:var(--ff-head);font-weight:700}
  @media (min-width:900px){
    .ppr-resenas .ppr-container{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,5vw,80px);align-items:start}
    .ppr-resenas .ppr-head{margin:0;position:static}
    .ppr-resenas .ppr-card{max-width:none}
  }
}

/* ── Subpáginas (composición R23 de las 5 subpáginas, web-diseno 2026-10-15) ─────────────────
   Migas en el hero; botones y marcas de lista legibles sobre las bandas petróleo y frambuesa;
   aire entre tabla y texto en la comparativa. Solo piel: no toca menú, formulario ni marcado. */
@layer skin{
  .ppr-migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:0 0 var(--sp-3);padding:0;font-size:.9rem;color:var(--c-ink-soft)}
  .ppr-migas li+li::before{content:"›";margin-right:.5rem;color:var(--c-brand-text)}
  .ppr-migas a{color:var(--c-ink-soft);text-underline-offset:.2em;display:inline-block;min-height:24px}
  :is(.ppr-v--oscura,.ppr-v--marca) .ppr-btn--secondary{background:transparent;color:var(--c-band-ink);border-color:var(--c-band-ink)}
  :is(.ppr-v--oscura,.ppr-v--marca) .ppr-btn--secondary:hover{background:var(--c-band-ink);color:var(--c-ink)}
  .ppr-v--oscura .ppr-v-check li::before{border-color:var(--c-brand-text-oscuro)}
  .ppr-v--marca .ppr-v-check li::before{border-color:var(--c-band-ink)}
  .ppr-v-check ul{margin:var(--sp-3) 0 0}
  .ppr-v-check .ppr-btn{margin-top:var(--sp-4)}
  .ppr-v-check h2+p{margin-top:var(--sp-3)}
  .ppr-table-wrap+.ppr-prose{margin-top:var(--sp-4)}
  .ppr-signal-mark{color:var(--c-brand-text)}
  @media (min-width:900px){.ppr-v-sintomas:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
}

/* ── Corrección tras auditar-responsive de la home (web-diseno, 2026-10-15) ─────────────────
   1) Títulos del pie fo4 y de cualquier banda oscura en blanco: la regla general de h1/h2/h3 en petróleo no aplica sobre petróleo.
   2) La tira «medio arrancada» ya no se desplaza (se montaba sobre la vecina en el papel girado): el arranque se dibuja
      dentro de su propia caja (papel más viejo y sombra interior), sin transform; el papel gira 1° en vez de 1,6°
      para que las cajas de las tiras no se pisen.
   3) Titulares sin guionado automático (se partía «Ro-ser»): los saltos van entre palabras; break-word de base.css sigue de red. */
@layer skin{
  .ppr-footer :is(h2,h3),.ppr-footer .ppr-footer-title{color:var(--c-band-ink)}
  .ppr-contacto--ct3 :is(h2,h3):not(.ppr-form *){color:var(--c-band-ink)}
  .ppr-f-tiras li.ppr-f-tira--suelta{transform:none;box-shadow:inset 4px 0 6px -4px rgb(0 0 0 / .22);background:#F4ECDD}
  @media (min-width:700px){.ppr-f-papel{transform:rotate(-1deg)}}
  :is(h1,h2,h3){hyphens:manual}
}

/* ── Mejoras de la crítica visual de la home (web-diseno, 2026-10-15) ─────────────────
   1) Tira arrancada: más corta (≈37 %) y con el borde inferior en dientes; sin transform.
   2) Punto frambuesa en las listas de los niveles de precio.
   3) Aire entre los párrafos de la columna.
   4) Separación entre los textos y los chips de las zonas.
   5) Galería en móvil: la primera foto a todo el ancho (1 + 2 + 2, sin hueco).
   6) La reserva inferior del body (aviso de cookies y barra móvil) se ve en petróleo, como el pie.
   7) Corte entre el contacto ct3 y el pie fo4 (pie un tono más hondo y filete) y textarea más bajo. */
:root{ --petroleo-hondo:#16303F; --filete-oscuro:rgb(255 255 255 / .15); }
@layer skin{
  .ppr-f-tiras li.ppr-f-tira--suelta{align-self:start;
    clip-path:polygon(0 0,100% 0,100% 94%,88% 100%,75% 93%,62% 99%,50% 92%,38% 99%,25% 93%,12% 100%,0 94%)}
  .ppr-f-tira--suelta a{min-height:0;height:5.9rem;padding-block:.4rem .9rem;font-size:.9rem;line-height:1.15}

  .ppr-v-nivel ul{list-style:none;padding-left:0}
  .ppr-v-nivel li{position:relative;padding-left:1.15rem}
  .ppr-v-nivel li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--c-brand)}

  .ppr-x-columna-art p+p{margin-top:1em}

  .ppr-v-zonas+p{margin:1.35rem 0 .5rem}

  @media (max-width:899px){
    .ppr-v-galeria>:first-child{grid-column:1/-1}
    .ppr-v-galeria>:first-child img{aspect-ratio:3/2}
  }

  html{background:var(--petroleo-hondo)}
  body{background:var(--c-surface) content-box}

  .ppr-footer--fo4{background:var(--petroleo-hondo);border-top:1px solid var(--filete-oscuro)}
  .ppr-field.ppr-field--mensaje textarea{min-height:180px}
}

/* ── Ajustes de estilo de las subpáginas (web-diseno, 2026-10-15) ─────────────────
   Reglas por pieza, no por id; solo piel, sin tocar marcado, menú ni formulario.
   1) Foto + lista (v-check): aire entre párrafos y entre la lista y el párrafo que la sigue.
   2) Cierre en prosa tras una rejilla de tarjetas (niveles, síntomas, tarjetas): separado de la rejilla y,
      si la cabecera de la sección va centrada, centrado bajo ella.
   3) Medida de lectura: señales en dos columnas desde 900 px, calendario de mantenimiento y aviso limitados a ~64ch (≈75 caracteres).
   4) Señales de alarma: la «!» en un círculo frambuesa suave, del tamaño del H3.
   5) Listas de las tarjetas laterales con el punto frambuesa de los niveles de precio.
   6) Cabecera de sección: más aire entre el H2 y la entradilla, y entre párrafos de la entradilla.
   7) Prosa con títulos (legales): ritmo vertical entre bloque, H2 y su texto. */
@layer skin{
  .ppr-v-check>div>p+p{margin-top:1em}
  .ppr-v-check ul+p{margin-top:var(--sp-4)}

  :is(.ppr-v-niveles,.ppr-v-sintomas,.ppr-grid,.ppr-v-numeradas)+.ppr-prose{margin-top:var(--sp-5)}
  .ppr-v-cab--centro~.ppr-prose{margin-inline:auto;text-align:center;max-width:60ch}

  :is(.ppr-signal>div,.ppr-tl-item>div,.ppr-v-aviso>div>p){max-width:64ch}
  .ppr-v-aviso>div>p+p{margin-top:.8em}

  .ppr-signal{align-items:start;column-gap:var(--sp-3)}
  .ppr-signal-mark{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;
    background:var(--c-brand-soft);color:var(--c-brand-text);font-family:var(--ff-head);font-weight:700;font-size:1.3rem;line-height:1}
  .ppr-signal h3{margin-top:.35rem}
  .ppr-signal h3+p{margin-top:.35rem}
  @media (min-width:900px){.ppr-signals{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-5)}}

  .ppr-card>ul:not([class]){margin-top:var(--sp-3);display:grid;gap:.45rem}
  .ppr-card>ul:not([class])>li{position:relative;padding-left:1.15rem}
  .ppr-card>ul:not([class])>li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--c-brand)}

  .ppr-head h2+p{margin-top:var(--sp-3)}
  .ppr-head p+p{margin-top:.8em}

  /* 7) Texto corrido con títulos (páginas legales): el H2 se separa del bloque anterior y se acerca al suyo */
  .ppr-prose>:not(h1,h2,h3)+:is(h2,h3){margin-top:clamp(2rem,1.6rem + 1.2vw,2.75rem)}
  .ppr-prose>:is(h2,h3)+*{margin-top:.6em}
  .ppr-prose>:is(p,ul,ol)+:is(p,ul,ol){margin-top:.9em}
}

/* ── Mejoras de la crítica visual final (web-diseno, 2026-10-15) ─────────────────
   Reglas por pieza, solo piel; sin tocar marcado, textos, menú ni formulario (R26, R37).
   1) Foto + lista con texto largo (6 párrafos o más en la columna, p. ej. /reparacion #reparar-primero):
      en escritorio la foto ya no flota centrada en un hueco de ~1.000 px: va arriba, en 4:5, y se queda fija
      bajo la cabecera mientras se lee el texto; la columna de texto gana ancho. Sin animación. Móvil sin cambios.
   2) Garantías (S17, /motorizacion #marcas-garantia): dos columnas desde 900 px, alineadas arriba, en vez de
      cuatro de alturas muy distintas.
   3) Contacto ct3: en escritorio el teléfono pasa a la derecha de la cabecera (columna vacía) con la cifra
      en grande; el formulario queda debajo a todo el ancho, igual que antes. El grupo contenedor solo deja
      de pintar caja (display:contents en un div sin semántica); el orden del HTML no cambia. */
@layer skin{
  @media (min-width:900px){
    .ppr-v-check:has(>div>p:nth-of-type(6)){grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start}
    .ppr-v-check:has(>div>p:nth-of-type(6))>picture{position:sticky;top:calc(var(--hdr-h,96px) + var(--sp-4))}
    .ppr-v-check:has(>div>p:nth-of-type(6)) img{aspect-ratio:4/5}

    .ppr-guarantees{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-5);row-gap:var(--sp-5);align-items:start}

    .ppr-contacto--ct3 .ppr-container{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:var(--sp-5);align-items:end}
    .ppr-contacto--ct3 .ppr-contact-grid{display:contents}
    .ppr-contacto--ct3 .ppr-head{grid-column:1;margin-bottom:var(--sp-5)}
    .ppr-contacto--ct3 .ppr-contact-data{grid-column:2;margin-bottom:var(--sp-5);display:block;justify-self:end;
      padding-left:var(--sp-4);border-left:1px solid var(--filete-oscuro)}
    .ppr-contacto--ct3 .ppr-contact-data p{margin-top:var(--sp-1);font-family:var(--ff-head);font-weight:700;font-size:clamp(1.9rem,1.2rem + 1.4vw,2.6rem);line-height:1.1;white-space:nowrap}
    .ppr-contacto--ct3 .ppr-form{grid-column:1/-1}
  }
}