@layer reset, base, layout, components, sections, variants, skin, state;
/* ═══════════════════════════════════════════════════════════════
   tema.css · reparacionpersianascastelldefels.com
   Arquetipo T05 Guardia · semilla sal=0
   Prefijo de clases: rcd-
   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: 140;
  --c-brand:  #0F3E02;
  --c-accent: #733D00;

  /* 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) .30 calc(c * .45) 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 (oscura) */
  --c-surface:   oklch(0.175 0.018 var(--h));
  --c-surface-2: oklch(0.225 0.022 var(--h));
  --c-ink:       oklch(0.94 0.006 var(--h));
  --c-ink-soft:  oklch(from var(--c-ink) 0.62 calc(c * .8) h);
  --c-ink-soft-claro: oklch(from var(--c-ink) 0.62 calc(c * .8) h);
  --c-band-ink-soft: oklch(0.878 .02 140);                /* texto secundario sobre fondo oscuro */
  --c-band:      var(--c-brand);
  --c-band-ink:  oklch(1 0 0);
  --c-line:      color-mix(in oklch, var(--c-ink) 22%, transparent);
  --c-focus:     oklch(from var(--c-accent) .62 .19 h);
  --c-error:     oklch(0.68 .19 27);

  /* ── CTA DE LLAMADA (R24) ─────────────────────────────────────
     Header, menú móvil y barra inferior. Elegido por el generador para
     contrastar 12.04:1 con la superficie y 13.37:1 con su texto.
     Candidato: neutro. Para cambiarlo: regenerar con --cta. */
  --c-cta:       oklch(0.85 0.02 140);
  --c-cta-ink:   oklch(0.15 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.68 c h);
  --c-brand-text-claro: oklch(from var(--c-brand) 0.68 c h);
  --c-brand-text-oscuro: oklch(from var(--c-brand) 0.7 c h);   /* sobre banda y heroes oscuros */
  --c-accent-text: oklch(from var(--c-accent) 0.639 c h);
  --c-accent-text-oscuro: oklch(from var(--c-accent) 0.719 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 compacta ×0.82) ───────── */
  --w-container:1080px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:20px;
  --sp-5:33px; --sp-6:53px;
  --sp-section:clamp(37px, 3.7vw, 82px);
  --sp-block:var(--sp-4);
  --sp-gap:12px;
  --card-pad:16px;

  /* ── TIPOGRAFÍA (escala modular ×1.414) ────────────────────────── */
  --ff-head:'Roboto Slab', Georgia, serif;
  --ff-body:'Roboto Flex', 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.015em;
  --lh-head:1.14; --lh-body:1.6;

  /* ── COMPONENTES ─────────────────────────────────────────────── */
  --btn-pad:8px 16px;
  --btn-fw:800;
  --btn-tt:none; --btn-ls:0;
  --eyebrow:none;
  --icon-sw:1.25;
  --h-img-service:123px;
  --h-img-hero:213px;

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

/* ── VARIANTES ACTIVAS ─────────────────────────────────────────────
   base.css define todos los layouts. Estas clases en <body> activan
   los de esta web. Vocabulario de clases: panel / inner / cta
   ────────────────────────────────────────────────────────────────── */
/* hero:H3 servicios:S2 ventajas:V2
   proceso:P3 resenas:R3 faq:F3
   zonas:Z2 contacto:CT4 footer:FO2
   etiqueta:ninguna numeracion:01 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 ninguna */
.rcd-eyebrow{display:none}

/* Numeración del proceso — variante 01 */
.rcd-step{counter-increment:paso}
.rcd-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 A · clasico-premium «Entre el pinar y el mar» (web-direccion-arte)
   Tokens de color del generador (#0F3E02 + #733D00) con superficies claras
   de la paleta 3 «Pinar de la Pineda». Fuentes del brief. Solo tokens + @layer skin.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Fraunces'; src: url('/fonts/titular-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/titular-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('/fonts/texto-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('/fonts/texto-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root{
  --ff-head: 'Fraunces', 'Source Serif 4', serif;
  --ff-body: 'Onest', 'Albert Sans', sans-serif;
  --fw-head: 600; --fw-body: 400; --fw-strong: 600;

  /* superficies claras de la paleta 3 (el generador proponía un tema oscuro) */
  --c-surface:   #F3FAF2;           /* fondo de la paleta */
  --c-surface-2: #EEEADC;           /* arena de la platja (v--suave) */
  --c-ink:       #141C12;           /* 16,4:1 sobre el fondo */
  --c-ink-soft:  #3E4A3A;           /* 8,8:1 */
  --c-ink-soft-claro: #3E4A3A;
  --c-band:      #152212;           /* pinar de noche */
  --c-band-ink:  #F3FAF2;           /* 15,6:1 */
  --c-band-ink-soft: #CBD6C6;
  --c-line:      color-mix(in oklch, #141C12 16%, transparent);
  --c-focus:     #733D00;
  --c-cta: var(--c-brand); --c-cta-ink: #FFFFFF;
  --c-brand-soft: #DCE8D8;
  --c-brand-text: #0F3E02; --c-brand-text-claro: #0F3E02; --c-brand-text-oscuro: #B9D3AE;
  --c-accent-text: #733D00; --c-accent-text-oscuro: #D8BE9E;  /* corteza; en lo oscuro, arena tostada (9,3:1) */
  /* colores fijos del tema A (antes escritos a mano en las reglas; mismos valores) */
  --c-papel: #F3FAF2; --c-papel-hover: #DCE8D8; --c-pinar: #0F3E02; --c-corteza: #733D00; --c-blanco: #fff;
  --c-mascara: #000;  /* opaco de las máscaras (fundido del corte en móvil) */
  --c-fc-mar: #CFE0DA; --c-fc-ola: #7FA3A0; --c-fc-tierra: #E4DDC9; --c-fc-castillo: #CDBF9E;

  --r-btn: 4px; --r-card: 4px; --r-input: 4px; --r-img: 4px;
  --bw-card: 1px; --bw-btn: 1px;
  --sh-card: none; --sh-btn: none; --sh-hover: none;

  --w-container: 1180px;
  --sp-4: 24px; --sp-5: 40px; --sp-6: 64px;
  --sp-section: clamp(64px, 7.5vw, 116px);
  --sp-gap: 24px; --card-pad: 28px;

  --fs-hero: clamp(2.6rem, 1.2rem + 4.2vw, 4.5rem);
  --fs-h1: var(--fs-hero);
  --fs-h2: clamp(2rem, 1.3rem + 2vw, 3.1rem);
  --fs-h3: 1.4rem;
  --fs-body: 17.5px; --fs-small: 14px;
  --ls-head: -0.012em; --lh-head: 1.08; --lh-body: 1.66;
  --btn-pad: 15px 26px; --btn-fw: 600;
  --icon-sw: 1.5;
}

@layer skin {
  body { font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink); background: var(--c-surface); }
  main :is(h1, h2, h3), .rcd-footer :is(h2, h3, h4) { font-family: var(--ff-head); font-weight: var(--fw-head); letter-spacing: var(--ls-head); line-height: var(--lh-head); }
  /* Corrección v1: sin guion automático en los titulares («plan-tean») */
  main :is(h1, h2, h3), .rcd-footer :is(h2, h3, h4) { hyphens: manual; }
  main h2 { font-size: var(--fs-h2); }
  main h3 { font-size: var(--fs-h3); }
  main a:not(.rcd-btn) { color: var(--c-accent-text); text-underline-offset: .22em; text-decoration-thickness: 1px; }
  .rcd-v--oscura a:not(.rcd-btn) { color: var(--c-accent-text-oscuro); }

  /* Recurso característico: la palabra en cursiva de corteza + el filete fino de etiqueta */
  .rcd-v-cursiva { font-style: italic; font-weight: 400; color: var(--c-accent-text); }
  :is(.rcd-hv--sangre, .rcd-v--oscura) .rcd-v-cursiva { color: var(--c-accent-text-oscuro); }
  .rcd-eyebrow { display: flex; align-items: center; gap: .75rem; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
    color: var(--c-accent-text); margin: 0 0 var(--sp-3); }
  .rcd-eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; flex: none; }
  .rcd-v-cab--centro .rcd-eyebrow { justify-content: center; }
  .rcd-v-cab--centro .rcd-eyebrow::after { content: ""; width: 2.25rem; height: 1px; background: currentColor; flex: none; }
  .rcd-hv--sangre .rcd-eyebrow { color: var(--c-accent-text-oscuro); }

  .rcd-btn--secondary { color: var(--c-brand-text); border-color: color-mix(in oklch, var(--c-brand) 55%, transparent); }

  /* Hero a sangre con velo de pinar (de izquierda a derecha) */
  .rcd-hv--sangre { min-height: min(88vh, 780px); align-items: center; }
  .rcd-hv--sangre .rcd-hv-media img { object-position: var(--foco, 50% 50%); }
  .rcd-hv--sangre::after { background:
      linear-gradient(90deg, oklch(0.19 0.035 140 / .95) 0%, oklch(0.19 0.035 140 / .84) 42%, oklch(0.19 0.035 140 / .34) 78%, oklch(0.19 0.035 140 / .2) 100%),
      linear-gradient(to top, oklch(0.19 0.035 140 / .6) 0%, transparent 40%); }
  .rcd-hv--sangre .rcd-hv-texto { max-width: var(--w-container); }
  @media (max-width: 699px) {
    .rcd-hv--sangre::after { background: linear-gradient(to bottom, oklch(0.19 0.035 140 / .9) 0%, oklch(0.19 0.035 140 / .82) 100%); }
    .rcd-eyebrow::before { width: 1.25rem; }
    .rcd-hv--sangre .rcd-eyebrow { font-size: .72rem; letter-spacing: .12em; }
    /* Corrección v1: la CTA del hero sube por encima del aviso de cookies a 360 (texto íntegro) */
    .rcd-hv--sangre { padding-top: var(--sp-4); }
    .rcd-hv--sangre h1 + p { font-size: 1rem; line-height: 1.5; margin-top: var(--sp-2); }
    .rcd-hv--sangre .rcd-hv-acciones { margin-top: var(--sp-4); }
  }
  .rcd-hv--sangre h1 { max-width: 15ch; }
  :is(.rcd-hv--sangre, .rcd-v--oscura) .rcd-btn--secondary { color: var(--c-blanco); border-color: oklch(1 0 0 / .6); }
  .rcd-hv--sangre .rcd-btn--primary { background: var(--c-papel); color: var(--c-pinar); border-color: var(--c-papel); }
  .rcd-hv--sangre .rcd-btn--primary:hover { background: var(--c-papel-hover); color: var(--c-pinar); border-color: var(--c-papel-hover); }
  .rcd-x-credenciales { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
  .rcd-x-credenciales li { border: 1px solid oklch(1 0 0 / .38); border-radius: 999px; padding: .45rem 1rem; font-size: .92rem; color: oklch(0.95 0 0); }
  .rcd-x-credenciales strong { font-weight: 600; color: var(--c-blanco); }

  /* Cifras finas en serif */
  /* Corrección crítica v1: la cifra nunca parte palabra. Se corta solo en los espacios y el cuerpo
     se ajusta al ancho real de su columna (cqi), con un tope de 3,4rem. */
  .rcd-v-cifras--fina { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
  .rcd-v-cifras--fina > li { container-type: inline-size; min-width: 0; padding-inline: .5rem; }
  .rcd-v-cifras--fina strong { font-family: var(--ff-head); font-weight: 400; font-style: italic; color: var(--c-accent-text);
    font-size: clamp(1.6rem, 14cqi, 3.4rem); line-height: 1.05; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
  .rcd-v-cifras > li + li { border-left: 1px solid var(--c-line); }
  @media (max-width: 699px) { .rcd-v-cifras > li + li { border-left: 0; } }

  /* Servicios: tarjetas numeradas con filete superior, sin caja */
  .rcd-v-numeradas { gap: var(--sp-5) var(--sp-4); }
  .rcd-v-numeradas > li { background: transparent; border: 0; border-top: 1px solid var(--c-ink); border-radius: 0; padding: var(--sp-4) 0 0; }
  .rcd-v-numeradas > li::before { content: counter(v-num, decimal-leading-zero); border: 0; width: auto; height: auto; place-items: start;
    font-family: var(--ff-head); font-style: italic; font-weight: 400; font-size: 1.6rem; color: var(--c-accent-text); }
  .rcd-v-numeradas a { margin-top: auto; font-weight: 600; }

  /* Foto de costa en arco */
  .rcd-x-foto-costa img { aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--foco, 50% 50%); width: 100%; height: auto; max-height: 640px; }
  .rcd-v-check { gap: var(--sp-6); align-items: center; }
  /* Corrección v1: la foto en arco sube a lo alto de su columna y acompaña al texto al desplazar */
  @media (min-width: 900px) {
    .rcd-v-check > .rcd-x-foto-costa { align-self: start; position: sticky; top: calc(var(--hdr-h, 96px) + var(--sp-4)); }
  }
  main .rcd-v-check p, main .rcd-v-cab p { margin: .9em 0 0; }
  .rcd-v-check ul { margin: var(--sp-4) 0; padding: 0; list-style: none; display: grid; gap: .7rem; border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }
  .rcd-v-check li::before { border-color: var(--c-accent-text); border-width: 0 0 2px 2px; }

  /* Banda de urgencia: titular grande en serif sobre el pinar */
  .rcd-v--oscura .rcd-v-aviso h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); max-width: 20ch; }
  /* Corrección v1: medida de lectura y aire bajo el titular */
  .rcd-v-aviso p { max-width: 65ch; }
  .rcd-v-aviso h2 + p { margin-top: var(--sp-4); }
  .rcd-v-aviso p + p { margin-top: var(--sp-3); }
  .rcd-v--oscura .rcd-btn--primary { background: var(--c-papel); color: var(--c-pinar); border-color: var(--c-papel); }
  .rcd-v--oscura .rcd-btn--primary:hover { background: var(--c-papel-hover); color: var(--c-pinar); border-color: var(--c-papel-hover); }

  /* Pasos: número en serif cursiva, línea fina */
  .rcd-v-pasos h3 { font-size: 1.3rem; }

  /* Niveles: tarjetas de filete; la destacada en pinar */
  .rcd-v-nivel { border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); padding: var(--card-pad); }
  .rcd-v-nivel--destacado { border-color: var(--c-brand); box-shadow: inset 0 3px 0 var(--c-brand); }
  .rcd-v-niveles + p { margin-top: var(--sp-5); }

  /* Preguntas: filetes finos */
  .rcd-faq-item { border-bottom: 1px solid var(--c-line); }
  .rcd-faq-q { font-family: var(--ff-head); font-weight: 600; font-size: 1.2rem; }

  /* ── ELEMENTO ORIGINAL · rcd-f-corte «De la arena al pinar» ─────────────── */
  .rcd-f-corte { overflow: hidden; }
  .rcd-f-corte-dibujo { margin: 0 calc(var(--sp-4) * -1) var(--sp-4); }
  .rcd-f-corte-svg { display: block; width: 100%; height: auto; }
  .rcd-f-corte-mar { fill: var(--c-fc-mar); }
  .rcd-f-corte-ola { fill: none; stroke: var(--c-fc-ola); stroke-width: 1.5; stroke-linecap: round; }
  .rcd-f-corte-tierra { fill: var(--c-fc-tierra); }
  .rcd-f-corte-linea { fill: none; stroke: var(--c-ink); stroke-width: 1.5; }
  .rcd-f-corte-casa { fill: var(--c-papel); stroke: var(--c-ink); stroke-width: 1; }
  .rcd-f-corte-lamas line { stroke: var(--c-ink); stroke-width: .7; opacity: .55; }
  .rcd-f-corte-tronco { stroke: var(--c-corteza); stroke-width: 2; }
  .rcd-f-corte-copa { fill: var(--c-pinar); }
  .rcd-f-corte-castillo path { fill: var(--c-fc-castillo); stroke: var(--c-ink); stroke-width: 1; }
  .rcd-f-corte-hito line { stroke: var(--c-corteza); stroke-width: 1; stroke-dasharray: 3 3; }
  .rcd-f-corte-hito circle { fill: var(--c-corteza); }
  .rcd-f-corte-hito text { fill: var(--c-blanco); font: italic 400 15px var(--ff-head); }
  .rcd-f-corte-tramos { list-style: none; padding: 0; margin: 0; counter-reset: tramo; display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
  .rcd-f-corte-tramo { counter-increment: tramo; border-top: 1px solid var(--c-ink); padding-top: var(--sp-3); }
  .rcd-f-corte-tramo h3 { font-size: 1.2rem; margin: .2rem 0 .5rem; }
  .rcd-f-corte-tramo > p { font-size: .98rem; color: var(--c-ink-soft); margin: 0 0 .8rem; }
  .rcd-f-corte-agente { display: flex; align-items: center; gap: .5rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--c-accent-text); margin: 0; }
  .rcd-f-corte-agente::before { content: counter(tramo); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--c-corteza); color: var(--c-blanco); font: italic 400 .95rem var(--ff-head); letter-spacing: 0; }
  .rcd-f-corte-barrios { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .9rem; font-weight: 600; }
  .rcd-f-corte-fuera { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--c-surface-2); border-radius: var(--r-card); display: grid; gap: var(--sp-3); }
  .rcd-f-corte-fuera p { margin: 0; font-family: var(--ff-head); font-size: 1.25rem; }
  /* Corrección v1: el «·» vive en el hueco ANTES de cada municipio; el de comienzo de línea cae
     fuera de la lista y queda recortado (decorativo), así nunca cuelga un punto al final de línea */
  .rcd-f-corte-fuera ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; clip-path: inset(-.5rem 0); }
  .rcd-f-corte-fuera ul li { position: relative; }
  .rcd-f-corte-fuera ul li + li::before { content: "·"; position: absolute; left: -.7rem; transform: translateX(-50%); color: var(--c-accent-text); }
  .rcd-f-corte-fuera .rcd-btn { justify-self: start; }
  @media (max-width: 699px) { .rcd-f-corte-dibujo { margin-inline: calc(var(--sp-3) * -1); } }
  /* Corrección v1: en móvil el corte conserva 160 px de alto y se recorre en horizontal */
  @media (max-width: 767px) {
    .rcd-f-corte-dibujo { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--c-corteza) transparent; }
    .rcd-f-corte-svg { width: 768px; max-width: none; height: 160px; }
  }

  /* Corrección v1: aviso de cookies compacto (≤90 px a 360): texto y botón en la misma fila */
  .rcd-cookies { --sp-3: 8px; }
  .rcd-cookies p { flex: 1 1 0; min-width: 0; margin: 0; line-height: 1.35; }
  .rcd-cookies .rcd-btn { flex: none; }
  @media (max-width: 699px) {
    .rcd-cookies { --fs-small: 12.5px; }
    .rcd-cookies .rcd-btn { padding: 10px 14px; min-height: 44px; }
  }

  /* ── LABORATORIO · rcd-x-revela (carta «revelado») ──────────────────────
     Sin JS o con movimiento reducido: todo visible. El JS solo añade clases. */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rcd-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes rcd-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    .rcd-x-revela.rcd-revela-si .rcd-f-corte-linea { stroke-dasharray: 1; animation: rcd-traza 1.6s var(--ease) both; }
    .rcd-x-revela.rcd-revela-si .rcd-f-corte-tramo { animation: rcd-sube .6s var(--ease) both; }
    .rcd-x-revela.rcd-revela-si .rcd-f-corte-tramo:nth-child(2) { animation-delay: .1s; }
    .rcd-x-revela.rcd-revela-si .rcd-f-corte-tramo:nth-child(3) { animation-delay: .2s; }
    .rcd-x-revela.rcd-revela-si .rcd-f-corte-tramo:nth-child(4) { animation-delay: .3s; }
    .rcd-x-revela.rcd-revela-si .rcd-f-corte-tramo:nth-child(5) { animation-delay: .4s; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AJUSTES CON TODAS LAS PÁGINAS (web-diseno, modo corregir, 2026-10-08)
   Sustituye los dos bloques que dejaron los constructores de /reparacion y /metalicas.
   Solo @layer skin, sin !important; no toca menú, formulario, jerarquía ni textos.
   ═══════════════════════════════════════════════════════════════════════════ */
@property --corte-fundido { syntax: '<length>'; inherits: false; initial-value: 64px; }
@layer skin {

  /* 1 · NUMERACIÓN DE #servicios y #otros: un único aspecto para todas las páginas.
     El número es siempre el del servicio en la home (01-05). Lo pinta el contador de la lista; si el
     <li> trae value="N" (subpáginas: se salta el servicio de la propia página), el contador sigue al
     atributo. En /reparacion el número forma parte del H3 aprobado (R37): ese ::before no se pinta y el
     <span class="rcd-v-num"> del H3 lleva exactamente el mismo aspecto, el mismo hueco y la misma medida. */
  .rcd-v-numeradas > li[value="1"] { counter-set: v-num 1; }
  .rcd-v-numeradas > li[value="2"] { counter-set: v-num 2; }
  .rcd-v-numeradas > li[value="3"] { counter-set: v-num 3; }
  .rcd-v-numeradas > li[value="4"] { counter-set: v-num 4; }
  .rcd-v-numeradas > li[value="5"] { counter-set: v-num 5; }
  .rcd-v-numeradas > li::before,
  .rcd-v-numeradas--en-h3 .rcd-v-num { display: block; font-family: var(--ff-head); font-style: italic; font-weight: 400;
    font-size: 1.6rem; line-height: 1.2; letter-spacing: 0; color: var(--c-accent-text); }
  .rcd-v-numeradas--en-h3 > li::before { content: none; }
  .rcd-v-numeradas--en-h3 .rcd-v-num { margin-bottom: var(--sp-2); }
  .rcd-v-numeradas > li > p:only-of-type { margin: 0; }

  /* 2 · #otros con 4 tarjetas: 2 + 2 en tableta y 4 en fila en escritorio (antes 3 + 1 a 1280) */
  @media (min-width: 700px) {
    .rcd-v-numeradas:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1100px) {
    .rcd-v-numeradas:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-4); }
  }

  /* 3 · Bloques intro sin columna lateral: composición editorial de dos columnas. El titular (y su
     entradilla) a la izquierda, fijo al desplazar; la prosa a la derecha, a 65-75 caracteres por línea.
     Así no queda la segunda columna vacía y la lectura no se estira a 86 caracteres. */
  .rcd-intro-grid:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 900px) {
    .rcd-intro > .rcd-container:has(> .rcd-intro-grid > .rcd-prose:only-child) {
      display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--sp-6); align-items: start; }
    .rcd-intro > .rcd-container:has(> .rcd-intro-grid > .rcd-prose:only-child) > :is(.rcd-head, .rcd-v-cab) {
      margin: 0; position: sticky; top: calc(var(--hdr-h, 96px) + var(--sp-4)); border-top: 1px solid var(--c-ink); padding-top: var(--sp-4); }
    .rcd-intro > .rcd-container:has(> .rcd-intro-grid > .rcd-prose:only-child) > :is(.rcd-head, .rcd-v-cab) h2 {
      font-size: clamp(2rem, 1rem + 1.9vw, 2.75rem); text-wrap: balance; }
    .rcd-intro-grid > .rcd-prose:only-child { max-width: 39rem; }
  }

  /* 4 · Aire de los subtítulos: H3 en la prosa y en zonas; H2 de legales y 404 */
  .rcd-prose > h3 { margin: var(--sp-5) 0 var(--sp-2); }
  .rcd-prose > h3 + p { margin-top: 0; }
  .rcd-prose > :is(ul, ol) + p { margin-top: var(--sp-3); }
  .rcd-container > :is(.rcd-v-cab, .rcd-head) ~ h3 { margin: var(--sp-5) 0 var(--sp-3); font-size: 1.15rem; }
  .rcd-container > :is(.rcd-v-cab, .rcd-head) + h3 { margin-top: 0; }
  .rcd-v-zonas + p { margin-top: var(--sp-5); }
  .rcd-container > .rcd-v-cab + p:has(> strong:only-child) { margin-top: 0; }
  /*   legales y 404: medida de lectura de 65-75 caracteres y H2 con aire arriba */
  :is(.rcd-legal, .rcd-error404) > .rcd-container.rcd-prose { max-width: calc(36rem + 2 * var(--sp-4)); }
  :is(.rcd-legal, .rcd-error404) .rcd-prose > h2 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); margin: var(--sp-6) 0 var(--sp-3); }
  :is(.rcd-legal, .rcd-error404) .rcd-prose > h3 { font-size: 1.2rem; }
  :is(.rcd-legal, .rcd-error404) .rcd-prose > h2 + p { margin-top: 0; }
  :is(.rcd-legal, .rcd-error404) .rcd-prose > p + p { margin-top: var(--sp-3); }
  :is(.rcd-legal, .rcd-error404) .rcd-prose h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.6rem); margin-bottom: var(--sp-4); }

  /* 5 · Listas dentro de la prosa: viñeta visible en corteza */
  main .rcd-prose :is(ul, ol):not([class]) { list-style: disc outside; padding-left: 1.3em; margin: var(--sp-3) 0; display: grid; gap: .45rem; }
  main .rcd-prose ol:not([class]) { list-style-type: decimal; }
  main .rcd-prose :is(ul, ol):not([class]) > li { display: list-item; padding-left: .2em; }
  main .rcd-prose :is(ul, ol):not([class]) > li::marker { color: var(--c-accent-text); }

  /* 6 · 404: botones con hueco entre ellos (apilados a 360 y en fila en escritorio) */
  .rcd-error404 p:has(> .rcd-btn) { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

  /* 7 · H1 del hero: medida más ancha para que los H1 largos de las subpáginas queden en 3 líneas a 1280
     (antes 15ch: /reparacion, /instalacion y /motorizacion en 4). El velo se alarga con él. */
  @media (min-width: 900px) {
    .rcd-hv--sangre h1 { max-width: 19ch; text-wrap: balance; }
    .rcd-hv--sangre::after { background:
      linear-gradient(90deg, oklch(0.19 0.035 140 / .95) 0%, oklch(0.19 0.035 140 / .86) 50%, oklch(0.19 0.035 140 / .4) 84%, oklch(0.19 0.035 140 / .24) 100%),
      linear-gradient(to top, oklch(0.19 0.035 140 / .6) 0%, transparent 40%); }
  }

  /* 8 · MIGAS DE PAN (.rcd-migas: nav[aria-label] > ol > li > a). Discretas, en la fuente del texto,
     con la barra en cursiva de corteza; sirven sobre fondo claro y dentro del hero oscuro. */
  .rcd-migas { font-size: .875rem; line-height: 1.4; color: var(--c-ink-soft); padding-block: var(--sp-2); }
  .rcd-migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .55rem; }
  .rcd-migas li { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
  .rcd-migas li + li::before { content: "/" / ""; font-family: var(--ff-head); font-style: italic; font-size: 1.05em; color: var(--c-accent-text); }
  main .rcd-migas a { display: inline-flex; align-items: center; min-height: 28px; color: inherit; text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in oklch, currentColor 45%, transparent); }
  main .rcd-migas a:hover { text-decoration-color: currentColor; }
  .rcd-migas [aria-current] { color: var(--c-ink); font-weight: 600; text-decoration: none; }
  /*   Antes de un hero a sangre (las 5 subpáginas): la miga va encima de la foto, alineada con el
       contenedor, sin sumar una franja clara entre la cabecera y el hero. */
  main:has(> .rcd-migas + .rcd-hv--sangre) { position: relative; }
  main > .rcd-migas:has(+ .rcd-hv--sangre) { position: absolute; z-index: 1; top: 0; inset-inline: 0; margin-inline: auto;
    width: min(100% - 2 * var(--sp-3), var(--w-container)); padding: var(--sp-3) 0 0; color: var(--c-band-ink-soft); }
  main > .rcd-migas:has(+ .rcd-hv--sangre) li + li::before { color: var(--c-accent-text-oscuro); }
  main > .rcd-migas:has(+ .rcd-hv--sangre) [aria-current] { color: var(--c-blanco); }
  main > .rcd-migas + .rcd-hv--sangre { padding-top: 52px; }
  @media (min-width: 900px) { main > .rcd-migas + .rcd-hv--sangre { padding-top: 76px; } }
  :is(.rcd-hv--sangre, .rcd-v--oscura) .rcd-migas { color: var(--c-band-ink-soft); margin: 0 0 var(--sp-3); padding: 0; }
  :is(.rcd-hv--sangre, .rcd-v--oscura) .rcd-migas li + li::before { color: var(--c-accent-text-oscuro); }
  :is(.rcd-hv--sangre, .rcd-v--oscura) .rcd-migas [aria-current] { color: var(--c-blanco); }

  /* 9a · Corte en móvil: se ve que sigue. Fundido en el borde derecho que desaparece al llegar al final
     (scroll-driven, mejora progresiva) y arranque con imán en cada tramo. */
  @media (max-width: 767px) {
    .rcd-f-corte-dibujo { scroll-snap-type: x proximity;
      -webkit-mask-image: linear-gradient(to right, var(--c-mascara) calc(100% - 64px), transparent);
              mask-image: linear-gradient(to right, var(--c-mascara) calc(100% - 64px), transparent); }
    .rcd-f-corte-svg { scroll-snap-align: start; }
    .rcd-f-corte .rcd-v-cab { margin-bottom: var(--sp-4); }
  }
  @supports (animation-timeline: scroll()) {
    @keyframes rcd-corte-fin { 0%, 85% { --corte-fundido: 64px; } 100% { --corte-fundido: 0px; } }
    @media (max-width: 767px) {
      .rcd-f-corte-dibujo { animation: rcd-corte-fin linear both; animation-timeline: scroll(self inline);
        -webkit-mask-image: linear-gradient(to right, var(--c-mascara) calc(100% - var(--corte-fundido)), transparent);
                mask-image: linear-gradient(to right, var(--c-mascara) calc(100% - var(--corte-fundido)), transparent); }
    }
  }

  /* 9b · Pie: listas en columna en móvil (antes «Instalación de persianas  Mosquiteras» parecía un solo
     enlace) y más separación entre enlaces en escritorio; títulos del pie con más presencia. */
  .rcd-footer-title { font-family: var(--ff-body); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-band-ink-soft); }
  @media (max-width: 699px) {
    .rcd-footer--fo4 .rcd-footer-grid ul:not(.rcd-footer-legal) { flex-direction: column; align-items: center; row-gap: 0; }
  }
  @media (min-width: 700px) {
    .rcd-footer--fo4 .rcd-footer-grid ul { column-gap: var(--sp-5); }
  }

  /* 9c · Final de la home: banda arena en #dudas (corta los tres claros seguidos) y menos aire entre
     coste, dudas y contacto en escritorio. */
  #coste.rcd-v + #dudas.rcd-v { background: var(--c-surface-2); }
  @media (min-width: 900px) {
    #coste.rcd-v:has(+ #dudas) { padding-bottom: var(--sp-5); }
    #coste.rcd-v + #dudas.rcd-v { padding-block: var(--sp-6); }
    #coste.rcd-v + #dudas.rcd-v + .rcd-v { padding-top: var(--sp-6); }
  }

  /* 10 · Hero y aviso de cookies: las dos acciones del hero quedan por encima del aviso.
     Escritorio: menos aire arriba (el H1 ya va en 3 líneas). Móvil: botones lado a lado, con el texto
     completo en dos líneas si hace falta, y H1 y entradilla un punto más compactos. */
  @media (min-width: 900px) { .rcd-hv--sangre { min-height: min(78vh, 720px); padding-top: clamp(40px, 4.5vw, 64px); } }
  @media (max-width: 699px) {
    .rcd-hv--sangre { align-items: start; }
    .rcd-hv--sangre h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 2.4rem); margin-bottom: var(--sp-2); }
    .rcd-hv--sangre .rcd-eyebrow { margin-bottom: var(--sp-2); }
    .rcd-hv--sangre h1 + p { font-size: 1rem; line-height: 1.4; }
    .rcd-hv--sangre .rcd-hv-acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
    .rcd-hv--sangre .rcd-hv-acciones .rcd-btn { min-height: 52px; padding: 8px 10px; font-size: .95rem; line-height: 1.2; text-align: center; text-wrap: balance; }
  }
}

/* 11 · Respuesta al toque (R28, :active): enlaces del texto y logo. El teléfono de la topbar es del
   menú (R24: solo base.css); su :active lo retiró web-diseno el 2026-10-08 y queda para base.css.
   La regla de enlaces de la línea 195 (skin) anulaba la de base.css; aquí el toque cambia el fondo
   (velo del propio color del enlace) y engorda el subrayado. Sin cambio de tamaño: no mueve nada. */
@layer skin {
  :is(main, .rcd-footer) a:not([class]):active,
  .rcd-logo:active {
    background-color: color-mix(in oklch, currentColor 10%, transparent);
    border-radius: 2px;
  }
  :is(main, .rcd-footer) a:not([class]):active { text-decoration-thickness: 3px; }
  .rcd-logo:active { opacity: .8; }
}

/* 12 · CTA DEL HERO SIEMPRE POR ENCIMA DEL AVISO DE COOKIES (crítica de subpáginas, vuelta 1).
   Pantallas bajas reales (portátil 1366x768 con barra del navegador = 657 px útiles, 1280x720, iPhone SE,
   360x640): el hero se compacta en función del ALTO de la pantalla, no del texto (R37: texto íntegro).
   El aviso de cookies (base.css, @layer state) solo se ajusta con sus tokens y con lo que state no fija. */
@layer skin {
  @media (min-width: 900px) {
    .rcd-cookies .rcd-btn { min-height: 44px; padding: 8px 22px; line-height: 1.2; }
  }
  @media (min-width: 900px) and (max-height: 820px) {
    .rcd-hv--sangre { padding-top: 32px; }
    main > .rcd-migas + .rcd-hv--sangre { padding-top: 52px; }
    .rcd-hv--sangre .rcd-eyebrow { margin-bottom: var(--sp-2); }
    .rcd-hv--sangre h1 { font-size: clamp(2.4rem, 8.5vh, var(--fs-hero)); margin-bottom: var(--sp-2); }
    .rcd-hv--sangre h1 + p { max-width: 46rem; line-height: 1.48; }
    .rcd-hv--sangre .rcd-hv-acciones { margin-top: 20px; }
    .rcd-hv--sangre .rcd-hv-acciones .rcd-btn { padding-block: 12px; }
  }
  @media (max-width: 699px) {
    .rcd-cookies { --fs-small: 12px; --sp-3: 6px; }
    .rcd-cookies p { line-height: 1.3; }
    .rcd-cookies .rcd-btn { padding: 8px 12px; }
  }
  @media (max-width: 699px) and (max-height: 780px) {
    main > .rcd-migas + .rcd-hv--sangre { padding-top: 44px; }
    .rcd-hv--sangre h1 { font-size: clamp(1.8rem, 5vh, 2.4rem); line-height: 1.04; }
  }
  /* Móvil muy bajo (≤700 px útiles: 360x640, iPhone SE): la llamada sube justo bajo el H1 y la entradilla
     (no enfocable) pasa debajo. El orden del DOM y del foco no cambia; el texto no se toca. */
  @media (max-width: 699px) and (max-height: 700px) {
    .rcd-hv--sangre .rcd-hv-texto { display: flex; flex-direction: column; }
    .rcd-hv--sangre .rcd-hv-acciones { order: 1; margin-top: var(--sp-2); }
    .rcd-hv--sangre h1 + p { order: 2; margin-top: var(--sp-3); }
    .rcd-hv--sangre .rcd-hv-texto > .rcd-x-credenciales { order: 3; }
  }
}

/* 13 · Final de las subpáginas: banda arena en #otros (zonas arena · dudas claro · otros arena ·
   contacto claro) y 64 px entre dudas, otros y contacto en escritorio (antes 96 + 96 = 192 px vacíos
   sobre el mismo claro). Mismo criterio que el final de la home (9c). */
@layer skin {
  #dudas.rcd-v + #otros.rcd-v { background: var(--c-surface-2); }
  @media (min-width: 900px) {
    #dudas.rcd-v:has(+ #otros) { padding-bottom: var(--sp-6); }
    #dudas.rcd-v + #otros.rcd-v { padding-block: var(--sp-6); }
    #dudas.rcd-v + #otros.rcd-v + .rcd-section { padding-top: var(--sp-6); }
  }
}

/* 14 · Tercera intro editorial seguida (/metalicas, /instalacion, /mosquiteras, /motorizacion): otra
   composición para romper la serie «titular fijo a la izquierda + prosa». Aquí el titular va encima, a
   toda la medida y sin fijar, con el filete; la prosa corre en dos columnas de unos 60 caracteres. */
@layer skin {
  @media (min-width: 900px) {
    .rcd-intro + .rcd-intro + .rcd-intro > .rcd-container:has(> .rcd-intro-grid > .rcd-prose:only-child) { display: block; }
    .rcd-intro + .rcd-intro + .rcd-intro > .rcd-container:has(> .rcd-intro-grid > .rcd-prose:only-child) > :is(.rcd-head, .rcd-v-cab) {
      position: static; margin: 0 0 var(--sp-5); max-width: none; }
    .rcd-intro + .rcd-intro + .rcd-intro > .rcd-container:has(> .rcd-intro-grid > .rcd-prose:only-child) > :is(.rcd-head, .rcd-v-cab) h2 {
      font-size: var(--fs-h2); max-width: 24ch; }
    .rcd-intro + .rcd-intro + .rcd-intro .rcd-intro-grid > .rcd-prose:only-child { max-width: 39rem; }
  }
  @media (min-width: 1100px) {
    .rcd-intro + .rcd-intro + .rcd-intro .rcd-intro-grid > .rcd-prose:only-child { max-width: none; column-count: 2; column-gap: var(--sp-6); }
    .rcd-intro + .rcd-intro + .rcd-intro .rcd-prose > :first-child { margin-top: 0; }
    .rcd-intro + .rcd-intro + .rcd-intro .rcd-prose > h3 { break-after: avoid; }
    .rcd-intro + .rcd-intro + .rcd-intro .rcd-prose :is(p, li) { break-inside: avoid; }
  }
}

/* 15 · Jerarquía H1 > H2 en todos los anchos y altos (auditoría responsive completa, 2026-10-08).
   El H1 del hero se compacta según el alto de la pantalla (bloques 10 y 12) para que la CTA quede sobre
   el aviso de cookies; los H2 bajan en los mismos rangos para quedar siempre por debajo del H1.
   Móvil: H1 ≥ 28,8 px (1,8rem) → H2 entre 24,8 y 27,2 px (H3 sigue en 22,4 px).
   Escritorio bajo: H1 = max(38,4 px, 8,5vh) → H2 ≤ max(32 px, 6,5vh). Solo tokens y tamaños; el texto no cambia.
   Los tokens van fuera de capa, como el bloque :root de la propuesta A (una capa no los podría pisar). */
@media (max-width: 699px) {
  :root { --fs-h2: clamp(1.55rem, 1.15rem + 1.4vw, 1.7rem); }
}
@media (min-width: 900px) and (max-height: 820px) {
  :root { --fs-h2: clamp(2rem, min(1.3rem + 2vw, 6.5vh), 3.1rem); }
}
@layer skin {
  @media (max-width: 699px) {
    .rcd-v--oscura .rcd-v-aviso h2 { font-size: var(--fs-h2); }
  }
  @media (min-width: 900px) and (max-height: 820px) {
    .rcd-v--oscura .rcd-v-aviso h2 { font-size: clamp(2rem, min(1.2rem + 2.4vw, 6.5vh), 3.2rem); }
    .rcd-intro > .rcd-container:has(> .rcd-intro-grid > .rcd-prose:only-child) > :is(.rcd-head, .rcd-v-cab) h2 {
      font-size: clamp(2rem, min(1rem + 1.9vw, 6.5vh), 2.75rem); }
  }
}

/* 16 · Móvil en horizontal y pantallas bajas (≤500 px de alto, ≤899 px de ancho: 667x375, 740x360).
   Precedente persianasvic.cat. Mismo rango que base.css (topbar fuera, aviso compacto y barra de 44 px).
   La CTA del hero queda sobre el aviso de cookies: el H1 corre a toda la medida (2 líneas en vez de 4)
   y baja de escala, las acciones suben bajo el H1 (orden visual; DOM, foco y texto sin cambios) y el
   aviso va en una sola fila (texto + botón). Los H2 bajan con el H1 para que el H1 siga por encima. */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  :root { --fs-h2: clamp(1.45rem, 1rem + 1.4vw, 1.6rem); }
}
@layer skin {
  @media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
    .rcd-hv--sangre { align-items: start; padding-top: var(--sp-3); }
    main > .rcd-migas:has(+ .rcd-hv--sangre) { padding-top: var(--sp-2); }
    main > .rcd-migas + .rcd-hv--sangre { padding-top: 36px; }
    .rcd-hv--sangre .rcd-eyebrow { margin-bottom: var(--sp-1); }
    .rcd-hv--sangre h1 { max-width: none; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 1.9rem); line-height: 1.04; margin-bottom: 0; text-wrap: balance; }
    .rcd-hv--sangre .rcd-hv-texto { display: flex; flex-direction: column; }
    .rcd-hv--sangre .rcd-hv-acciones { order: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
    .rcd-hv--sangre .rcd-hv-acciones .rcd-btn { min-height: 44px; padding: 6px 10px; font-size: .95rem; line-height: 1.2; text-align: center; }
    .rcd-hv--sangre h1 + p { order: 2; margin-top: var(--sp-3); font-size: 1rem; line-height: 1.4; }
    .rcd-hv--sangre .rcd-hv-texto > .rcd-x-credenciales { order: 3; }
    .rcd-v--oscura .rcd-v-aviso h2 { font-size: var(--fs-h2); }
    .rcd-cookies .rcd-container { flex-wrap: nowrap; }
    .rcd-cookies p { flex: 1 1 auto; max-width: none; line-height: 1.3; }
    .rcd-cookies .rcd-btn { flex: none; min-height: 44px; padding: 0 16px; }
  }
}

/* 17 · Hero de /mosquiteras en escritorio (crítica final, vuelta 1): la malla plisada está en el centro
   de la foto (44-58 % del ancho) y quedaba bajo el velo y el texto. Solo en ese hero, desde 900 px: el
   texto corre hasta 50 % + 110 px, la foto ocupa el tramo derecho (desde 50 % + 120 px) con la malla
   centrada en él, y el velo de pinar queda bajo el texto y se funde en el borde de la foto.
   Móvil: la llamada del hero en una sola línea (columna a su medida). 404: el segundo botón, secundario. */
@layer skin {
  @media (min-width: 900px) {
    .rcd-hv--sangre:has(img[src*="mosquitera-plisada"]) { background: oklch(0.19 0.035 140); }
    .rcd-hv--sangre:has(img[src*="mosquitera-plisada"]) .rcd-hv-media { inset-inline-start: calc(50% + 120px); }
    .rcd-hv--sangre .rcd-hv-media img[src*="mosquitera-plisada"] { object-position: 52% 50%; }
    .rcd-hv--sangre:has(img[src*="mosquitera-plisada"])::after { background:
      linear-gradient(90deg, oklch(0.19 0.035 140 / .96) 0%, oklch(0.19 0.035 140 / .9) calc(50% + 110px), oklch(0.19 0.035 140 / 0) calc(50% + 230px)),
      linear-gradient(to top, oklch(0.19 0.035 140 / .55) 0%, transparent 35%); }
    .rcd-hv--sangre:has(img[src*="mosquitera-plisada"]) .rcd-hv-texto {
      padding-inline-end: calc(min(var(--w-container) / 2, 50% - var(--sp-3)) - 110px); }
    /* Las migas van encima del tramo liso de pinar: su fondo real es ese color (no la foto) */
    main > .rcd-migas:has(+ .rcd-hv--sangre img[src*="mosquitera-plisada"]) ol { width: fit-content; background: oklch(0.19 0.035 140); }
  }
  @media (max-width: 699px) {
    .rcd-hv--sangre .rcd-hv-acciones { grid-template-columns: max-content minmax(0, 1fr); }
    .rcd-hv--sangre .rcd-hv-acciones .rcd-btn { padding-inline: 8px; font-size: .9rem; }
  }
  .rcd-error404 .rcd-btn--call { background: transparent; color: var(--c-brand-text); border-color: color-mix(in oklch, var(--c-brand) 55%, transparent); box-shadow: none; }
  .rcd-error404 .rcd-btn--call:hover { background: var(--c-brand-soft); transform: none; }
}