@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · persianashostafrancs.es
   Arquetipo T01 Taller · semilla sal=0
   Prefijo de clases: phf-
   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: 184;
  --c-brand:  #295B2C;
  --c-accent: #696921;

  /* 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(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(0.15 0 0);

  /* Superficies (alto-contraste) */
  --c-surface:   oklch(1 0 0);
  --c-surface-2: oklch(0.945 0.030 var(--h));
  --c-ink:       oklch(0.145 0.012 var(--h));
  --c-ink-soft:  oklch(from var(--c-ink) 0.485 calc(c * .8) h);
  --c-ink-soft-claro: oklch(from var(--c-ink) 0.485 calc(c * .8) h);
  --c-band-ink-soft: oklch(0.846 .02 184);                /* texto secundario sobre fondo oscuro */
  --c-band:      oklch(0.145 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.96:1 con la superficie y 5.96: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.432 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.432 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.572 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.514 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.654 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 (dura) ─────────────────────────────────── */
  --sh-card:5px 5px 0 var(--c-ink);
  --sh-btn:4px 4px 0 var(--c-ink);
  --sh-hover:2px 2px 0 var(--c-ink);

  /* ── RITMO (base 6px · densidad compacta ×0.82) ───────── */
  --w-container:1140px;
  --sp-1:5px; --sp-2:10px; --sp-3:15px; --sp-4:25px;
  --sp-5:39px; --sp-6:64px;
  --sp-section:clamp(44px, 3.7vw, 88px);
  --sp-block:var(--sp-4);
  --sp-gap:15px;
  --card-pad:20px;

  /* ── TIPOGRAFÍA (escala modular ×1.2) ────────────────────────── */
  --ff-head:'Barlow Condensed', system-ui, sans-serif;
  --ff-body:'Barlow', system-ui, sans-serif;
  --fw-head:700; --fw-body:400; --fw-strong:700;
  --fs-h1:clamp(25.7px, 4.6vw, 35.7px);
  --fs-h2:clamp(21.8px, 3.0vw, 27.6px);
  --fs-h3:19.6px;
  --fs-body:16.4px;
  --fs-small:13.3px;
  --tt-head:uppercase; --ls-head:0.01em;
  --lh-head:1.05; --lh-body:1.6;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:10px 20px;
  --btn-fw:800;
  --btn-tt:uppercase; --btn-ls:0.04em;
  --eyebrow:block;
  --icon-sw:1.5;
  --h-img-service:148px;
  --h-img-hero:256px;

  /* ── 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(0.15 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: box / frame / link
   ────────────────────────────────────────────────────────────────── */
/* hero:H6 servicios:S5 ventajas:V3
   proceso:P3 resenas:R3 faq:F3
   zonas:Z3 contacto:CT3 footer:FO1
   etiqueta:punto-texto numeracion:sin iconos:Tabler */

/* 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 punto-texto */
.phf-eyebrow{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--c-ink-soft);font-size:var(--fs-small)}
.phf-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c-accent)}

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

/* ═══════════ BRIEF · Propuesta B «Bajo los arcos» · cálido-cercano ═══════════ */
@font-face{font-family:'Rubik';src:url('/fonts/titular-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url('/fonts/texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url('/fonts/texto-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  --ff-head:'Rubik',system-ui,sans-serif; --ff-body:'Rubik',system-ui,sans-serif;
  --fw-head:700; --fw-body:400; --fw-strong:600;
  --tt-head:none; --ls-head:-0.025em; --lh-head:1.06; --lh-body:1.65;
  --fs-hero:clamp(2.6rem,5.2vw,4.3rem); --fs-h1:clamp(2.6rem,5.2vw,4.3rem);
  --fs-h2:clamp(1.9rem,3.2vw,2.75rem); --fs-h3:1.3rem; --fs-body:17.5px; --fs-small:.9rem;
  --r-btn:999px; --r-card:18px; --r-input:12px; --r-img:18px;
  --sh-card:0 1px 2px oklch(0.3 0.03 180 / .06),0 8px 24px oklch(0.3 0.03 180 / .07); --sh-btn:none; --sh-hover:0 6px 18px oklch(0.3 0.05 180 / .14);
  --w-container:1200px; --btn-fw:600; --btn-tt:none; --btn-ls:0;
  /* blanco de cal + verde bosque clásico de marca + bronce oscuro para cifras, sello y dovelas. Sin bandas negras */
  --c-surface:oklch(0.988 0.004 85); --c-surface-2:color-mix(in srgb,var(--c-brand) 9%,oklch(0.988 0.004 85));
  --c-ink:oklch(0.25 0.03 190); --c-band:oklch(0.36 0.07 182); --c-band-ink:oklch(1 0 0);
  --c-line:color-mix(in oklch,var(--c-ink) 13%,transparent);
  --oro-claro:color-mix(in srgb,var(--c-accent) 38%,oklch(0.988 0.004 85));
}
@layer skin{
  :is(h1,h2,h3){font-family:var(--ff-head);letter-spacing:var(--ls-head);hyphens:manual;overflow-wrap:break-word}
  .phf-hv h1{max-width:15ch}
  .phf-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.88rem;letter-spacing:.02em;color:var(--c-brand-text)}
  .phf-eyebrow::before{content:"";width:.95rem;height:1.15rem;clip-path:url(#phf-arco);background:var(--c-accent)}
  .phf-v--marca .phf-eyebrow{color:var(--c-brand-ink)}
  .phf-btn--primary{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink)}
  .phf-btn--primary:hover{background:var(--c-brand-lo);border-color:var(--c-brand-lo);color:var(--c-brand-lo-ink)}
  .phf-v--marca .phf-btn--secondary{background:var(--c-surface);border-color:var(--c-surface);color:var(--c-ink)}
  .phf-v--marca .phf-btn--secondary:hover{background:transparent;color:var(--c-brand-ink);border-color:currentColor}
  /* Corrección crítica auditar-responsive (1280px): --c-brand-text sobre --c-brand-soft solo da 3.69:1
     con esta semilla (el 4.6:1 previsto en el comentario de --c-brand-text no se cumple en este tono).
     Se usa --c-ink (ya 4.5:1+ garantizado sobre toda superficie clara) solo en :hover y solo en los
     contextos de fondo claro donde se ha medido (hero, .phf-v normal/suave, contacto) — nunca en
     .phf-v--marca (ya tiene su propio hover correcto, 7.99:1) ni en .phf-cta (fondo de marca: base.css
     ya resuelve su :hover con --c-brand-ink, 2,72:1 si se sobreescribe aquí). Lista positiva, mismo
     patrón que barnapersianasbarcelona.com/web/css/tema.css (línea 334), para que una subpágina nueva
     con otro envoltorio de fondo oscuro no vuelva a heredar este color por descuido. */
  :is(.phf-hv, .phf-v:not(.phf-v--marca), .phf-contacto) .phf-btn--secondary:hover{color:var(--c-ink)}
  /* Recurso característico: el arco de herradura de la antigua plaza de toros como marco de foto */
  .phf-hv--revista .phf-hv-media{border:0;padding:0;aspect-ratio:4/5;max-height:600px;position:relative}
  .phf-hv--revista .phf-hv-media::after{content:"";position:absolute;inset:-14px -14px 0;z-index:-1;clip-path:url(#phf-arco);
    background:linear-gradient(to bottom,transparent 58%,var(--c-brand) 58%),repeating-conic-gradient(from -90deg at 50% 38%,var(--c-brand) 0 6deg,var(--oro-claro) 6deg 12deg)}
  .phf-hv--revista .phf-hv-media img{clip-path:url(#phf-arco);border-radius:0;object-position:var(--foco,50% 40%)}
  .phf-v-check img{clip-path:url(#phf-arco);border-radius:0;width:min(100%,430px);height:auto;aspect-ratio:4/5;object-fit:cover;justify-self:center;margin-inline:auto}
  .phf-hv-datos strong,.phf-v-cifras strong{color:var(--c-accent-text)}
  .phf-v-cab h2{max-width:24ch}
  .phf-v-nivel{border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--sh-card);border:1px solid var(--c-line)}
  .phf-v-nivel--destacado{border:2px solid var(--c-brand)}
  .phf-v-edificio{background:var(--c-surface);border-radius:var(--r-card);padding:var(--card-pad,1.5rem);box-shadow:var(--sh-card)}
  /* R40 bloques llenos (informe-cierre 2026-10-28): div.phf-v-edificios tiene 4 módulos; el auto-fit de
     base.css (minmax 320px) cae en 3 columnas a partir de ~1230px de ventana (contenedor a 1200px), y deja
     el 4.º módulo solo en una fila con un 68% de hueco. Única sección que usa esta clase (home): se fija a
     2 columnas desde 1000px, donde ya encajaban así de forma natural (2×2, sin huecos). */
  @media (min-width:1000px){.phf-v-edificios{grid-template-columns:repeat(2,minmax(0,1fr))}}
  /* R40 bloques llenos (informe-cierre 2026-10-28): div.phf-v-sintomas se reutiliza con 2, 3, 4 o 6 artículos
     según la página; con 4 encaja justo en el auto-fit de base.css (minmax 260px → 4 columnas a 1200px). Con
     6 (motorizacion y reparacion) esas mismas 4 columnas dejan 2 sueltos en la última fila (50% de hueco).
     :has() limita el ajuste solo a los bloques con exactamente 6 hijos, sin tocar los de 2, 3 o 4. */
  @media (min-width:1000px){.phf-v-sintomas:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
  .phf-v-edificio h3::before{content:"";display:block;width:1.6rem;height:1.9rem;margin-bottom:.6rem;clip-path:url(#phf-arco);background:repeating-conic-gradient(from -90deg at 50% 38%,var(--c-brand) 0 12deg,var(--oro-claro) 12deg 24deg)}
  .phf-v-zonas li span{border-radius:999px}
  /* Foto suelta dentro de una sección .phf-v (sin marco de arco): mismo radio y sombra que el resto de fotos
     y tarjetas de la propuesta (18px, --sh-card), para que no quede un rectángulo de esquina viva.
     Corrección crítica visual home vuelta 1 (v-edificios, PHF index.php línea ~178). */
  .phf-v-foto{display:block;width:100%;height:auto;border-radius:var(--r-img);box-shadow:var(--sh-card);margin-bottom:var(--sp-4)}
  /* R40 bloques llenos (informe-cierre 2026-10-28): ul.phf-chips (3 píldoras) en la columna de texto del
     hero (mosquiteras y reparacion) cabe en una sola fila con flex-wrap a 1024px (cada una en su línea,
     sin hueco) pero a 1280/1440px la columna es lo bastante ancha para que entren las dos primeras juntas
     y la tercera quede sola en la fila siguiente, con un 57-60% de hueco a su lado. Ninguna página usa
     3 chips fuera del hero: se fuerza una píldora por línea siempre, el mismo resultado que ya se veía a
     1024px, sin afectar a phf-badges (4 elementos, otra clase, no tiene este hueco). */
  .phf-hv-texto .phf-chips{flex-direction:column;align-items:flex-start}
}

/* ── Elemento original · PFX-f-arcos «Cinco oficios bajo los arcos» ── */
@layer skin{
  .phf-f-arcos{position:relative}
  .phf-f-arcos-defs{position:absolute;width:0;height:0;overflow:hidden}
  .phf-f-arcos-cab{max-width:46rem}
  .phf-f-arcos-lista{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:var(--sp-4) var(--sp-3);grid-template-columns:1fr}
  /* 2 columnas solo desde 480px: por debajo, con el contenedor a 2*sp-3, la columna bajaba a ~138px
     y no entraba el texto más largo (crítico responsive 320px, cierre 2026-10-24) */
  @media (min-width:480px){.phf-f-arcos-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (min-width:1000px){.phf-f-arcos-lista{grid-template-columns:repeat(5,minmax(0,1fr))}}
  .phf-f-arco{position:relative;display:flex;flex-direction:column}
  .phf-f-arco-marco{position:relative;aspect-ratio:3/4;margin-bottom:var(--sp-3)}
  .phf-f-arco-marco::before{content:"";position:absolute;inset:0;clip-path:url(#phf-arco);
    background:linear-gradient(to bottom,transparent 60%,var(--c-brand) 60%),repeating-conic-gradient(from -90deg at 50% 38%,var(--c-brand) 0 7.5deg,var(--oro-claro) 7.5deg 15deg)}
  /* R40 bloques llenos (informe-cierre 2026-10-28): a 82% de ancho la foto quedaba en 271/360 y 295/390 px
     (75-76%), por debajo del 84% que exige «fotos a todo el ancho del módulo» en móvil. Insets de 9% a 6%:
     la foto ocupa 88% del marco (pasa el umbral con margen) y el borde del arco sigue visible alrededor. */
  .phf-f-arco-marco img{position:absolute;left:6%;right:6%;top:8%;width:88%;height:92%;object-fit:cover;object-position:var(--foco,50% 50%);clip-path:url(#phf-arco);border-radius:0;transition:transform var(--tr) var(--ease)}
  .phf-f-arco h3{margin:0 0 .35rem;font-size:1.2rem;text-align:center}
  .phf-f-arco h3 a{color:var(--c-ink);text-decoration:none}
  .phf-f-arco h3 a::after{content:"";position:absolute;inset:0}
  .phf-f-arco h3 a:hover,.phf-f-arco h3 a:focus-visible{color:var(--c-brand-text);text-decoration:underline;text-underline-offset:.2em}
  .phf-f-arco p{margin:0;text-align:center;font-size:.95rem;color:var(--c-ink-soft)}
  @media (prefers-reduced-motion:no-preference){.phf-f-arco:hover .phf-f-arco-marco img{transform:translateY(-4px)}}
}
/* Icono del teléfono del header en móvil/tablet con estilo de botón b3 (píldora): SIN ARREGLO en este archivo.
   Causa raíz en base.css (sistema, protegido, no se toca aquí): la regla del estilo de botón b3 que añade
   padding horizontal a todos los botones vive en la capa "variants", y la regla que fija el botón de llamada
   del header a 44 por 44 con padding cero (solo icono) vive en la capa "components", declarada antes; como
   "variants" se declara después, su padding gana siempre por ORDEN DE CAPA (no por especificidad), y base.css
   no excluye al botón de llamada de esa regla de b3 ni expone ninguna variable que el skin pueda fijar sin
   escribir el propio selector del menú. Cualquier regla aquí que vuelva a apuntar a la clase del botón de
   llamada del header (con o sin @media) reintroduce la violación de R24 (tema.css no puede redefinir clases
   del menú) que ya se quitó dos veces (incidencia de sistema 2026-10-24, pendiente de que mantenimiento
   corrija base.css). El icono queda descentrado/recortado en ≤1099px hasta esa corrección de sistema. */
/* Móvil: el arco del hero cede sitio para que el H1 y la llamada entren en la primera pantalla */
@layer skin{@media (max-width:699px){
  .phf-hv--revista .phf-hv-media{width:min(62%,15rem);margin:0 auto var(--sp-3)}
  .phf-hv--revista .phf-hv-media::after{inset:-9px -9px 0}
  .phf-hv--revista{padding-top:var(--sp-4)}
}}