@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianaslescorts.es
   Arquetipo T01 Taller · semilla sal=0
   Prefijo de clases: plc-
   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: 241;
  --c-brand:  #86BDE6;
  --c-accent: #9E3B22;

  /* Derivados de marca (esquema: tetrada) */
  --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(0.15 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(0.15 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 241);                /* 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.77:1 con la superficie y 6.77:1 con su texto.
     Candidato: accent. Para cambiarlo: regenerar con --cta. */
  --c-cta:       var(--c-accent);
  --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.535 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.535 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.775 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.487 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.627 c h);

  /* ── GEOMETRÍA (recortada) ───────────────────────────── */
  --r-btn:0; --r-card:0; --r-input:0; --r-img:0;
  --bw-card:1px; --bw-btn:2px; --bw-line:1px;

  /* ── SOMBRAS (dura-color) ─────────────────────────────────── */
  --sh-card:6px 6px 0 var(--c-accent);
  --sh-btn:4px 4px 0 var(--c-accent);
  --sh-hover:2px 2px 0 var(--c-accent);

  /* ── RITMO (base 8px · densidad compacta ×0.82) ───────── */
  --w-container:1320px;
  --sp-1:7px; --sp-2:13px; --sp-3:20px; --sp-4:33px;
  --sp-5:52px; --sp-6:85px;
  --sp-section:clamp(59px, 3.7vw, 88px);
  --sp-block:var(--sp-4);
  --sp-gap:20px;
  --card-pad:26px;

  /* ── TIPOGRAFÍA (escala modular ×1.618) ────────────────────────── */
  --ff-head:'Chivo', system-ui, sans-serif;
  --ff-body:'Chivo', 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.10; --lh-body:1.6;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:13px 26px;
  --btn-fw:800;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:block;
  --icon-sw:1.25;
  --h-img-service:197px;
  --h-img-hero:341px;

  /* ── 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(0.15 0 0);
    --c-accent-ink:oklch(1 0 0);
    --c-band-ink:oklch(1 0 0);
    --c-brand-lo-ink:oklch(0.15 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: unit / band / do
   ────────────────────────────────────────────────────────────────── */
/* hero:H3 servicios:S2 ventajas:V3
   proceso:P1 resenas:R2 faq:F2
   zonas:Z3 contacto:CT1 footer:FO3
   etiqueta:texto numeracion:sin iconos:Phosphor */

/* 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 */
.plc-eyebrow{color:var(--c-brand-text);font-weight:var(--fw-strong);font-size:var(--fs-small)}

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

/* ═══════════ BRIEF · Propuesta B «El poble de Les Corts» · editorial-calido ═══════════ */
@font-face{font-family:'Lora';src:url('/fonts/titular-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('/fonts/titular-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/texto-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  --ff-head:'Lora',Georgia,serif; --ff-body:'Hanken Grotesk',system-ui,sans-serif;
  --fw-head:600; --fw-strong:600; --ls-head:-0.01em; --lh-head:1.1; --lh-body:1.65;
  --fs-hero:clamp(2.6rem,5.6vw,4.5rem); --fs-h1:clamp(2.6rem,5.6vw,4.5rem);
  --fs-h2:clamp(1.9rem,3.2vw,2.8rem); --fs-h3:1.3rem; --fs-body:18px; --fs-small:.875rem;
  --r-btn:2px; --r-card:2px; --r-input:2px; --r-img:2px;
  --sh-card:none; --sh-btn:none; --sh-hover:none;
  --w-container:1180px; --btn-fw:600;
  /* papel crema y tinta cálida; el celeste es el de las persianas pintadas del antiguo pueblo; la teja, la de sus tejados */
  --c-surface:oklch(0.975 0.012 80); --c-surface-2:oklch(0.945 0.02 78);
  --c-ink:oklch(0.25 0.025 50); --c-band:oklch(0.27 0.03 45);
  --c-line:color-mix(in srgb,var(--c-ink) 16%,transparent);
}
@layer skin{
  .plc-hv h1{letter-spacing:-.015em}
  .plc-v-cursiva,.plc-hv h1 em{font-style:italic;font-weight:400;color:var(--c-accent-text)}
  .plc-eyebrow{font-family:var(--ff-head);font-style:italic;font-weight:400;font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--c-accent-text)}
  .plc-v--oscura .plc-eyebrow{color:var(--c-brand)}
  .plc-v--marca .plc-eyebrow{color:var(--c-ink)}
  @media (max-width:899px){.plc-hv--revista .plc-hv-media{order:2;aspect-ratio:4/3;max-height:280px;width:100%}}
  .plc-btn--primary{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-surface)}
  .plc-btn--primary:hover{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink)}
  .plc-v--oscura .plc-btn--primary{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-ink)}
  .plc-v--oscura .plc-v-revisar>li{color:var(--c-ink)}
  .plc-v--marca .plc-btn--primary{background:var(--c-ink);color:var(--c-surface)}
  .plc-v--tinte{background:color-mix(in srgb,var(--c-brand) 14%,var(--c-surface))}
  .plc-hv--revista .plc-hv-media{border-right:6px solid var(--c-brand)}
  .plc-hv-confianza li{font-family:var(--ff-head);font-style:italic}
  .plc-v-edificio{border-top:1px solid var(--c-ink);padding-top:var(--sp-3)}
  .plc-v-edificio h3{font-family:var(--ff-head)}
  .plc-v-opcion{border-color:var(--c-line)}
  .plc-v-opcion--cambiar{border-color:var(--c-accent)}
  .plc-v-check li::before{border-color:var(--c-accent)}
  .plc-faq-q{font-family:var(--ff-head)}
  /* Laboratorio · PFX-x-ficha (carta ficha): servicios como fichas de taller con número de orden */
  .plc-x-ficha .plc-v-numeradas > li{border:2px solid var(--c-ink);border-radius:var(--r-card);background:var(--c-surface);position:relative;padding-top:calc(var(--card-pad) + .6rem)}
  .plc-x-ficha .plc-v-numeradas > li::before{content:"Orden nº " counter(v-num,decimal-leading-zero);width:auto;height:auto;display:inline-block;position:absolute;top:-.85rem;left:var(--sp-3);padding:.15rem .6rem;background:var(--c-brand);color:var(--c-ink);border:2px solid var(--c-ink);font-family:var(--ff-body);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:0}
  .plc-x-ficha .plc-v-numeradas h3{font-family:var(--ff-head)}
  .plc-x-ficha .plc-v-numeradas a{color:var(--c-accent-text);font-weight:600}

  /* Logo de cabecera y de pie (corrección, revisión de 10 min, segunda vuelta): el usuario pidió
     el icono (monograma «PC» en círculo) a la izquierda del texto «Persicorts», en una sola línea
     horizontal (lockup), como en el resto de la red, para que se vea más grande — la versión
     anterior (escudo vertical recortado por el viewBox) seguía sin convencer. images/logo.svg
     (cabecera, una sola línea) y images/logo-footer.svg (pie, con «Persianas Les Corts» como
     subtítulo bajo el nombre: hay más alto libre) se reconstruyeron con viewBox 0 0 300 80
     (relación 3,75:1), mismo icono y mismos colores. .plc-logo img tiene `max-width: min(180px,
     44vw)` (base.css, no se toca): a 48px de alto, 48×3,75 = 180px — llena justo ese tope en vez
     de sobrarle hueco, así el lockup se ve sensiblemente más grande que el escudo anterior
     (que a 48px de alto solo ocupaba ~100px de los 180px disponibles).
     Selector sin el ancestro de cabecera ni de pie (corrección, R24: esos selectores están
     reservados a base.css para el menú): plc-logo img/svg aparece una sola vez en header.php y
     una sola vez en footer.php, con el mismo marcado (un <img> dentro de a de clase plc-logo),
     así que esta regla sin ancestro llega a las dos y el resultado visual es idéntico al de
     antes. */
  .plc-logo img, .plc-logo svg { height: 48px; }

  /* Migas de pan (nav.plc-breadcrumb): única regla para las 5 subpáginas, unificada en modo corregir */
  .plc-breadcrumb{padding:var(--sp-2) 0;border-bottom:1px solid var(--c-line)}
  .plc-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-family:var(--ff-body);font-size:var(--fs-small);color:var(--c-ink-soft)}
  .plc-breadcrumb li+li::before{content:"›";margin:0 .5em;color:var(--c-accent-text)}
  .plc-breadcrumb a{color:var(--c-ink-soft);text-decoration:underline;text-decoration-color:var(--c-line)}
  .plc-breadcrumb a:hover{color:var(--c-accent-text)}
  .plc-breadcrumb [aria-current="page"]{color:var(--c-ink);font-weight:var(--fw-strong)}

  /* Contacto ct4 en escritorio (corrección, revisión de 10 min): el bloque de la izquierda
     (plc-head: «Contacto» + título + párrafo, seguido del teléfono en plc-contact-data) es
     mucho más corto que el formulario de la derecha; con la rejilla de base.css cada columna
     crecía solo con su propio contenido y quedaba un hueco grande debajo del teléfono. Aquí
     el propio .plc-container pasa a ser la rejilla de 2 columnas: cabecera y teléfono
     comparten la columna izquierda, uno debajo del otro (fila 1 y 2), y el formulario ocupa
     las dos filas de la columna derecha (grid-row 1/span 2) a su misma altura — así las dos
     columnas siempre terminan a la vez, sea cual sea su contenido. El teléfono se centra en
     el espacio que le sobra para no quedar pegado arriba. No se toca el marcado (sigue siendo
     plc-head + plc-contact-grid > plc-contact-data + form: .plc-contact-grid pasa a
     «display:contents», una caja transparente que no cambia el DOM ni el orden de lectura,
     solo deja que sus dos hijos entren en la rejilla del contenedor). Por debajo de 900px no
     se toca nada: sigue en una sola columna (regla de base.css). */
  @media (min-width: 900px) {
    .plc-contacto--ct4 > .plc-container {
      display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr;
      column-gap: var(--sp-5);
    }
    .plc-contacto--ct4 .plc-head { grid-column: 1; grid-row: 1; }
    .plc-contacto--ct4 .plc-contact-grid { display: contents; }
    .plc-contacto--ct4 .plc-contact-data {
      grid-column: 1; grid-row: 2;
      display: flex; flex-direction: column; justify-content: center;
    }
    .plc-contacto--ct4 .plc-form { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  }
}

/* ── Elemento original · PFX-f-linea «La línea de Les Corts» ── */
@layer skin{
  .plc-f-linea-cab{max-width:46rem}
  .plc-f-linea ol{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:var(--sp-4);position:relative}
  .plc-f-linea ol::before{content:"";position:absolute;left:.7rem;top:.6rem;bottom:.6rem;width:6px;background:var(--c-ink);border-radius:3px}
  .plc-f-linea ol > li{position:relative;padding-left:2.6rem}
  .plc-f-linea ol > li::before{content:"";position:absolute;left:0;top:.2rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--c-surface);border:5px solid var(--c-ink);box-sizing:border-box}
  .plc-f-linea ol > li.plc-f-linea-centro::before{background:var(--c-accent);border-color:var(--c-ink);width:1.9rem;height:1.9rem;left:-.2rem;top:0}
  .plc-f-linea h3{margin:0;font-family:var(--ff-head);font-size:1.25rem}
  .plc-f-linea li p{margin:.2rem 0 0;font-size:.95rem}
  .plc-f-linea-enlaces{margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:2px dashed var(--c-ink)}
  .plc-f-linea-enlaces h3{font-family:var(--ff-head);font-style:italic;font-weight:400;margin:0 0 .5rem}
  .plc-f-linea-enlaces ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
  .plc-f-linea-enlaces li{padding:.3rem .8rem;border:2px solid var(--c-ink);border-radius:999px;font-weight:600;font-size:.95rem}
  @media (min-width:900px){
    .plc-f-linea ol{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3)}
    .plc-f-linea ol::before{left:.6rem;right:.6rem;top:.55rem;bottom:auto;width:auto;height:6px}
    .plc-f-linea ol > li{padding-left:0;padding-top:2.6rem}
    .plc-f-linea ol > li::before{top:0;left:0}
    .plc-f-linea ol > li.plc-f-linea-centro::before{top:-.2rem;left:-.2rem}
  }
}

/* ── R40 · Bloques llenos a 1280px (corrección) ──────────────────────────
   auditar-responsive.py detectaba 6 rejillas con un número de módulos que no
   es múltiplo de las columnas reales a 1280px (contenedor ~1180px, columnas
   de base.css): la última fila quedaba con un hueco grande. Causa: el número
   de módulos de cada bloque frente al ancho mínimo de columna de base.css
   (repeat(auto-fit, minmax(…))); no se toca base.css (R22) ni el número de
   módulos (son contenido aprobado, R37): se ajusta la rejilla de cada
   instancia por su id de sección.
   - Resto de 1 módulo (4/3, 5/4, 5/4): el último ocupa toda la fila.
   - Resto de 2 módulos (6/4, 6/4): los 2 últimos ocupan 2 columnas cada uno
     y llenan la fila entre los dos.
   - /servicios (5 módulos en 3 columnas): se amplía el mínimo de columna
     para que a este ancho queden 2 columnas (resto 1) y el 5º ocupe la fila. */
@layer skin{
  #edificios .plc-v-edificios > :last-child{grid-column:1/-1}
  #servicios .plc-v-numeradas{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
  #servicios .plc-v-numeradas > :last-child{grid-column:1/-1}
  #motor-sin-cambiar .plc-v-sintomas > :last-child{grid-column:1/-1}
  #seguridad .plc-v-revisar > :last-child{grid-column:1/-1}
  /* span:2 solo con el contenedor ya en varias columnas (≥1100px, punto de corte ya existente
     en el tema): por debajo, con 1 sola columna, un span fijo de 2 fuerza una columna implícita
     y desborda la pantalla en móvil. */
  @media (min-width:1100px){
    #tipos .plc-v-materiales > :nth-last-child(-n+2){grid-column:span 2}
    #visita .plc-v-revisar > :nth-last-child(-n+2){grid-column:span 2}
  }
}