/* LOS ALTILLOS · assets/la-system.css · capa de sistema del sitio (fase 1, 30/9/2026)
Lleva el lenguaje de la home (home.css, ux/home-redesign/DESIGN-SPEC-v2.md) a todas las páginas menos la home.
Guía: ux/site-redesign/SYSTEM.md. Se encola con prioridad 98: después del CSS de cada plantilla y antes de ux-mobile/ux-pages.
Especificidad: todo va bajo :where(main) (0 puntos). Una regla de acá con un atributo (0,1,0) le gana a una regla de
plantilla de una clase (por orden) y pierde con una de dos clases (.x .x-card). Así cada plantilla puede pisarla desde su CSS.
Tipos en px: la raíz es 12 px en escritorio y 16 px en móvil (main.css / bloque 26 / ux-mobile.css). */

/* 1 · TOKENS DEL SISTEMA */
:root {--la-graphite:#1D2025;--la-body:#3B4046;--la-secondary:#6A7077;--la-hairline:#E4E4E0;--la-hairline-dk:#CFCDC7;--la-surface:#FFFFFF;--la-offwhite:#F5F4F1;--la-stone:#ECEAE5;--la-accent:#C7081D;--la-accent-dk:#A10717;--la-on-dark:#C9CCD1;--la-r:12px;--la-r-sm:8px;--la-max:1280px;--la-gutter:24px;--la-sec:64px;--la-ease:180ms ease;--la-h1:clamp(34px,1.5vw + 26px,50px);--la-h2:clamp(28px,1.1vw + 21px,40px);--la-h3:20px;--la-read:17px;--la-lead:19px}
@media (max-width: 1023px) {:root {--la-sec:56px}}
@media (max-width: 719px) {:root {--la-gutter:16px;--la-sec:40px;--la-h1:32px;--la-h2:28px;--la-h3:18px;--la-read:16px;--la-lead:17px}}

/* 2 · REMAPEO DE LOS TOKENS DE main.css (solo dentro de <main>: cabecera y pie quedan como están)
Las plantillas escriben sus colores con estas variables o con alias locales (--x-ink:var(--color-text),
--x-navy:var(--color-bg-dark), --x-blue:var(--color-secondary)…): con esto pasan solas a grafito, hueso y filete cálido.
--color-text-subtle va a #62676E (no #6A7077): muchas plantillas lo usan sobre piedra (--color-bg-tertiary) y así llega a 4,7:1 (fase 3). */
#la-main {--color-bg:#FFFFFF;--color-bg-secondary:#F5F4F1;--color-bg-tertiary:#ECEAE5;--color-bg-dark:#1D2025;--color-secondary:#1D2025;--color-secondary-dark:#111316;--color-secondary-light:#3B4046;--color-text:#1D2025;--color-text-muted:#3B4046;--color-text-subtle:#62676E;--color-border:#E4E4E0;--color-border-dark:#CFCDC7;--color-steel:#CFCDC7;--color-steel-light:#F5F4F1;--color-steel-dark:#8C8F94;--shadow-sm:0 1px 2px rgba(29,32,37,.04);--shadow-md:0 2px 8px rgba(29,32,37,.06);--shadow-lg:0 8px 24px rgba(29,32,37,.08);--shadow-glow:0 0 0 transparent;--radius-sm:8px;--radius-md:8px;--radius-lg:12px;--radius-xl:12px}
/* hub /steel-framing/ (steel-framing.css usa .lahome con tokens propios) */
#la-main .lahome {--la-blue:#1D2025;--la-blue-2:#111316;--la-red:#C7081D;--la-red-dark:#A10717;--la-text:#1D2025;--la-muted:#3B4046;--la-soft:#F5F4F1;--la-soft-2:#ECEAE5;--la-border:#E4E4E0;--la-shadow:0 2px 8px rgba(29,32,37,.06);--la-shadow-soft:0 1px 2px rgba(29,32,37,.04);--la-radius:12px}

/* 3 · BASE: títulos, lectura, foco */
:where(main) :is(h1, h2) {color:var(--la-graphite)}
:where(main) h3 {color:var(--la-graphite)}
:where(main) a:focus-visible, :where(main) summary:focus-visible, :where(main) button:focus-visible {outline:2px solid var(--la-accent);outline-offset:3px}
/* Enlaces del texto corrido: grafito subrayado, rojo al pasar (como en la home). Solo <a> sin clase. */
:where(main) :is([class*="-prose"], [class*="-callout"], [class*="-faq__a"], [class*="-faq-item__a"], [class*="-table-wrap"], .la-content, .lact-body) a:not([class]) {color:var(--la-graphite);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:currentColor}
:where(main) :is([class*="-prose"], [class*="-callout"], [class*="-faq__a"], [class*="-faq-item__a"], [class*="-table-wrap"], .la-content, .lact-body) a:not([class]):hover {color:var(--la-accent)}
:where(main) :is([class*="-prose"], .la-content, .lact-body) :is(p, li) {color:var(--la-body)}
:where(main) :is([class*="-prose"], .la-content, .lact-body) strong {color:var(--la-graphite)}

/* 4 · MIGAS */
:where(main) :is([class$="-breadcrumbs"], [class$="-breadcrumb"], [class*="-breadcrumb "], [class*="-breadcrumb__inner"], [class*="-bc__i"]) {color:var(--la-secondary);font-size:14px;line-height:1.5}
:where(main) :is([class$="-breadcrumbs"], [class$="-breadcrumb"], [class*="-breadcrumb "], [class*="-breadcrumb__inner"], [class*="-bc__i"]) a {color:var(--la-body);text-decoration:underline;text-decoration-color:var(--la-hairline-dk);text-underline-offset:3px}
:where(main) :is([class$="-breadcrumbs"], [class$="-breadcrumb"], [class*="-breadcrumb "], [class*="-breadcrumb__inner"], [class*="-bc__i"]) a:hover {color:var(--la-accent);text-decoration-color:currentColor}
:where(main) :is([class$="-breadcrumbs"], [class$="-breadcrumb"], [class*="-breadcrumb "], [class*="-breadcrumb__inner"], [class*="-bc__i"]) :is([aria-current], [class*="__current"], [class*="__cur"]) {color:var(--la-graphite);font-weight:600}

/* 5 · HERO CLARO (todas las familias)
Superficie hueso, H1 grafito, bajada en texto, antetítulo rojo con filete. Velos, lavados y tramas navy se apagan. */
:where(main) :is([class$="-hero"], [class*="-hero "]) {background-color:var(--la-offwhite);color:var(--la-body);min-height:0}
/* sin foto de fondo, salvo los hubs de 5b (su foto pasa al panel) */
:where(main) :is([class$="-hero"], [class*="-hero "]):where(:not(.ladw-hero, .lacr-hero, .lacm-hero, .lais-hero, .lapm-hero, .larv-hero, .laar-hero, .lacomp-hero, .lawf-hero, .lahome-hero, .p1-hero, .p2-hero)) {background-image:none}
:where(main) :is([class$="-hero"], [class*="-hero "])::after {display:none}
:where(main) :is([class*="-hero__overlay"], [class*="-hero__ov"], [class*="-hero__wash"], .p1-hero__grid, .p2-hero__grid, .p4-hero__grid, .p5-hero__gr, .p4-hero__deco, .p5-hero__dc, .p1-hero__overlay, .p2-hero__overlay) {display:none}
:where(main) :is([class*="-hero__inner"], [class*="-hero__text"], [class*="-hero__in"]) {color:var(--la-body)}
:where(main) :is([class$="-hero"], [class*="-hero "]) :is([class$="-tags"], [class*="-tags "]) li {background:var(--la-surface);border:1px solid var(--la-hairline-dk);color:var(--la-graphite)}
:where(main) :is([class$="-hero"], [class*="-hero "]) h1 {color:var(--la-graphite);font-family:var(--font-display);font-weight:400;font-size:var(--la-h1);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
:where(main) :is([class$="-hero"], [class*="-hero "]) h1 span {color:inherit}
:where(main) :is([class*="-hero__sub"], [class*="-hero__def"], [class*="-hero__lead"]) {color:var(--la-body);font-size:var(--la-lead);line-height:1.6;text-wrap:pretty}
:where(main) :is([class*="-hero__sub"], [class*="-hero__def"], [class*="-hero__lead"]) :is(strong, b) {color:var(--la-graphite)}
:where(main) :is([class*="-hero__sub"], [class*="-hero__def"], [class*="-hero__lead"]) a {color:var(--la-graphite);text-decoration:underline;text-underline-offset:3px}
/* insignia / antetítulo del hero → antetítulo rojo de la home */
:where(main) :is([class*="-hero__badge"], [class*="-hero__eyebrow"], [class*="-hero__ey"]) {display:flex;align-items:center;gap:10px;width:auto;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:var(--la-accent);font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.1em;text-transform:uppercase}
:where(main) :is([class*="-hero__badge"], [class*="-hero__eyebrow"], [class*="-hero__ey"])::before {content:"";flex:none;width:20px;height:2px;background:var(--la-accent)}
:where(main) :is([class*="-hero__badge"], [class*="-hero__eyebrow"], [class*="-hero__ey"]) > :is(svg, span:empty, i) {display:none}
/* cifras / confianza / ficha del hero */
:where(main) :is([class*="-hero__meta"], [class*="-hero__mi"], [class*="-hero__trust"]) {color:var(--la-body);border-color:var(--la-hairline-dk)}
:where(main) :is([class*="-hero__meta-item"], [class*="-hero__mi"], [class*="-hero__trust-item"]) {color:var(--la-graphite);font-size:15px;font-weight:600}
:where(main) :is([class*="-hero__meta-item"], [class*="-hero__mi"], [class*="-hero__trust-item"]) svg {stroke:var(--la-accent);color:var(--la-accent)}
:where(main) :is([class$="-hero"], [class*="-hero "]) :is([class$="-meta"], [class*="-meta "]) li {color:var(--la-graphite);border-color:var(--la-hairline-dk)}
:where(main) :is([class$="-hero"], [class*="-hero "]) :is([class$="-meta"], [class*="-meta "]) li > span:first-child {color:var(--la-secondary)}
:where(main) :is([class$="-hero"], [class*="-hero "]) :is([class$="-meta"], [class*="-meta "]) li a {color:var(--la-graphite);text-decoration-color:var(--la-hairline-dk)}
/* botones del hero: el fantasma blanco pasa a borde grafito */
:where(main) :is([class$="-hero"], [class*="-hero "]) :is([class*="-btn-ghost"], [class*="-btn--ghost"], [class*="-btn-outline"], [class*="-btn--outline"], [class*="-btn--white"]) {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;background:transparent;border:1.5px solid var(--la-graphite);border-radius:var(--la-r-sm);color:var(--la-graphite);font-size:16px;font-weight:700;line-height:1.2;box-shadow:none}
:where(main) :is([class$="-hero"], [class*="-hero "]) :is([class*="-btn-ghost"], [class*="-btn--ghost"], [class*="-btn-outline"], [class*="-btn--outline"], [class*="-btn--white"]):hover {background:var(--la-graphite);border-color:var(--la-graphite);color:#fff}
:where(main) :is([class$="-hero"], [class*="-hero "]) :is([class*="-btn-ghost"], [class*="-btn--ghost"], [class*="-btn-outline"], [class*="-btn--outline"], [class*="-btn--white"]) svg {stroke:currentColor}

/* 5a · Hero con <img> de fondo (guías, precios, países: .x-hero > img.x-hero__image + .x-hero__overlay + .x-shell > .x-hero__grid)
Escritorio: la foto pasa a un panel redondeado a la derecha y la ficha (2.º hijo de la grilla) queda encima, como la etiqueta de la home.
El panel se alinea con el borde del .x-shell (1200 px + 32 px, igual en las 33 plantillas): otra caja → --la-hero-max / --la-hero-pad en el hero.
Móvil/tablet: texto y ficha primero; la foto va al final del hero en 16:9. Sin CLS: todo es layout estático. */
:where(main) :is([class$="-hero"], [class*="-hero "]) > :is([class*="-shell"], [class*="-hero__inner"], [class*="-container"], [class*="-wrap"]) {position:relative;z-index:1}
@media (min-width: 1024px) {
:where(main) :is([class$="-hero"], [class*="-hero "]):has(> img[class*="-hero__im"]) {padding-block:48px 56px}
:where(main) :is([class$="-hero"], [class*="-hero "]):has(> img[class*="-hero__im"]) > [class*="-shell"] {width:100%}
:where(main) :is([class$="-hero"], [class*="-hero "]):has(> img[class*="-hero__im"]) > [class*="-shell"] > [class*="-layout"] {grid-template-columns:minmax(0,1fr)}
:where(main) :is([class$="-hero"], [class*="-hero "]) > img[class*="-hero__im"] {min-height:0;position:absolute;inset:40px max(var(--la-hero-pad, 32px), calc((100% - var(--la-hero-max, 1200px)) / 2 + var(--la-hero-pad, 32px))) 48px auto;z-index:0;width:min(440px, 36%);height:calc(100% - 88px);object-fit:cover;border-radius:16px;box-shadow:none}
:where(main) :is([class$="-hero"], [class*="-hero "]):has(> img[class*="-hero__im"]) [class*="-hero__grid"] {grid-template-columns:minmax(0,1fr) min(440px, 36vw);column-gap:56px;align-items:center}
:where(main) :is([class$="-hero"], [class*="-hero "]):has(> img[class*="-hero__im"]) [class*="-hero__grid"] > :nth-child(2) {margin:24px 28px;box-shadow:0 8px 24px rgba(29,32,37,.14)}
/* sin grilla (hubs de país, caja .x-shell o .x-wrap): el texto no pisa la foto */
:where(main) :is([class$="-hero"], [class*="-hero "]):has(> img[class*="-hero__im"]) > [class*="-shell"]:not(:has([class*="-hero__grid"])) > * {max-width:calc(100% - min(440px, 36vw) - 56px)}
:where(main) :is([class$="-hero"], [class*="-hero "]):has(> img[class*="-hero__im"]) > [class*="-wrap"]:not(:has([class*="-hero__grid"])) > * {max-width:calc(100% - min(440px, 36vw) - 56px)}
}
@media (max-width: 1023px) {
:where(main) :is([class$="-hero"], [class*="-hero "]):has(> img[class*="-hero__im"]) {display:flex;flex-direction:column;padding-bottom:32px}
:where(main) :is([class$="-hero"], [class*="-hero "]) > img[class*="-hero__im"] {min-height:0;position:static;order:2;z-index:0;width:calc(100% - 2 * var(--la-gutter));max-width:720px;height:auto;aspect-ratio:16 / 9;margin:28px auto 0;object-fit:cover;border-radius:var(--la-r)}
}

/* 5b · Hero de hub con foto como fondo CSS (drywall, cielorrasos, modular, aislación, placas, revestimientos,
ampliaciones, comparativas, wood frame, /steel-framing/ y los pilares p1/p2 con foto en style=""): la misma foto pasa a un panel redondeado (::before hereda la imagen).
Caja del hero = la del .x-wrap del hub (1200 px + 24 px); si el hub cambia su caja, declara --la-hub-max / --la-hub-pad en su .x-hero. */
:where(main) :is(.ladw-hero, .lacr-hero, .lacm-hero, .lais-hero, .lapm-hero, .larv-hero, .laar-hero, .lacomp-hero, .lawf-hero, .lahome-hero, .p1-hero, .p2-hero) {position:relative;display:flex;flex-direction:column;justify-content:center;min-height:0;background-color:var(--la-offwhite);background-size:0 0;background-repeat:no-repeat}
:where(main) :is(.ladw-hero, .lacr-hero, .lacm-hero, .lais-hero, .lapm-hero, .larv-hero, .laar-hero, .lacomp-hero, .lawf-hero, .lahome-hero, .p1-hero, .p2-hero)::before {content:"";z-index:0;background-image:inherit;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--la-stone);border-radius:16px}
:where(main) :is(.ladw-hero, .lacr-hero, .lacm-hero, .lais-hero, .lapm-hero, .larv-hero, .laar-hero, .lacomp-hero, .lawf-hero, .lahome-hero, .p1-hero, .p2-hero) > [class*="-hero__inner"] {width:100%;max-width:var(--la-hub-max, 1200px);margin-inline:auto;padding:56px var(--la-hub-pad, 24px) 64px}
@media (min-width: 1024px) {
:where(main) :is(.ladw-hero, .lacr-hero, .lacm-hero, .lais-hero, .lapm-hero, .larv-hero, .laar-hero, .lacomp-hero, .lawf-hero, .lahome-hero, .p1-hero, .p2-hero) {min-height:540px}
:where(main) :is(.ladw-hero, .lacr-hero, .lacm-hero, .lais-hero, .lapm-hero, .larv-hero, .laar-hero, .lacomp-hero, .lawf-hero, .lahome-hero, .p1-hero, .p2-hero)::before {position:absolute;top:40px;bottom:48px;right:max(var(--la-hub-pad, 24px), calc((100% - var(--la-hub-max, 1200px)) / 2 + var(--la-hub-pad, 24px)));left:auto;width:calc((min(100%, var(--la-hub-max, 1200px)) - 2 * var(--la-hub-pad, 24px)) * .4)}
:where(main) :is(.ladw-hero, .lacr-hero, .lacm-hero, .lais-hero, .lapm-hero, .larv-hero, .laar-hero, .lacomp-hero, .lawf-hero, .lahome-hero, .p1-hero, .p2-hero) > [class*="-hero__inner"] > * {max-width:calc(60% - 48px)}
}
@media (max-width: 1023px) {
:where(main) :is(.ladw-hero, .lacr-hero, .lacm-hero, .lais-hero, .lapm-hero, .larv-hero, .laar-hero, .lacomp-hero, .lawf-hero, .lahome-hero, .p1-hero, .p2-hero)::before {position:relative;inset:auto;order:2;width:calc(100% - 2 * var(--la-gutter));max-width:720px;margin:0 auto 40px;aspect-ratio:16 / 10}
:where(main) :is(.ladw-hero, .lacr-hero, .lacm-hero, .lais-hero, .lapm-hero, .larv-hero, .laar-hero, .lacomp-hero, .lawf-hero, .lahome-hero, .p1-hero, .p2-hero) > [class*="-hero__inner"] {padding:32px var(--la-gutter) 28px}
}

/* 6 · SECCIONES Y CABECERA DE SECCIÓN (antetítulo rojo + H2 grafito + bajada) */
:where(main) :is([class$="-section--gray"], [class*="-section--gray "], [class$="-section--alt"], [class*="-section--alt "], [class$="-sec--alt"], [class$="-section--soft"]) {background-color:var(--la-offwhite)}
:where(main) :is([class$="-eyebrow"], [class*="-eyebrow "], [class*="__eyebrow"], .la-eyebrow) {display:flex;align-items:center;gap:10px;padding:0;background:none;border:0;color:var(--la-accent);font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.1em;text-transform:uppercase}
:where(main) :is([class$="-eyebrow"], [class*="-eyebrow "], [class*="__eyebrow"], .la-eyebrow)::before {content:"";flex:none;width:20px;height:2px;background:currentColor}
:where(main) :is([class$="-section-h2"], [class*="-section-h2 "], [class$="-section-title"], [class$="-s-title"], [class$="-hub__title"], [class$="-h2"], [class*="-h2 "], .lahx__h2, :where(.la-section__header) h2) {color:var(--la-graphite);font-family:var(--font-display);font-weight:400;font-size:var(--la-h2);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
:where(main) [class*="-h2--small"] {font-size:clamp(24px,.6vw + 20px,30px)}
:where(main) :is([class$="-section-sub"], [class*="-section-sub "], [class$="-section-lead"], [class$="-hub__sub"], .lahx__intro, :where(.la-section__header) p) {color:var(--la-body);font-size:18px;line-height:1.6;max-width:68ch;text-wrap:pretty}
:where(main) :is([class$="-h3"], [class*="-h3 "]) {color:var(--la-graphite);font-family:var(--font-body);font-weight:700;line-height:1.3;letter-spacing:-.005em}
/* variantes sobre fondo oscuro */
:where(main) :is([class*="-h2--light"], [class*="-section-h2--light"]) {color:#fff}
:where(main) :is([class*="-eyebrow--light"]) {color:var(--la-on-dark)}
:where(main) [class*="-prose"] {color:var(--la-body)}

/* 7 · BOTONES: primario rojo plano, secundario con borde grafito */
:where(main) :is([class*="-btn-red"], [class*="-btn--red"], [class*="-btn--primary"], [class*="-btn-primary"], .la-btn--primary) {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border:1.5px solid var(--la-accent);border-radius:var(--la-r-sm);background:var(--la-accent);color:#fff;box-shadow:none;font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;transform:none;transition:background-color var(--la-ease),border-color var(--la-ease)}
:where(main) :is([class*="-btn-red"], [class*="-btn--red"], [class*="-btn--primary"], [class*="-btn-primary"], .la-btn--primary):hover {background:var(--la-accent-dk);border-color:var(--la-accent-dk);color:#fff;box-shadow:none;transform:none}
:where(main) :is([class*="-btn-outline"], [class*="-btn--outline"], [class*="-btn--secondary"], [class*="-btn-secondary"], .la-btn--secondary) {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border:1.5px solid var(--la-graphite);border-radius:var(--la-r-sm);background:transparent;color:var(--la-graphite);box-shadow:none;font-size:16px;font-weight:700;line-height:1.2;text-decoration:none}
:where(main) :is([class*="-btn-outline"], [class*="-btn--outline"], [class*="-btn--secondary"], [class*="-btn-secondary"], .la-btn--secondary):hover {background:var(--la-graphite);border-color:var(--la-graphite);color:#fff}
:where(main) :is([class$="-btn--ghost"], [class*="-btn--ghost "]) {border:1.5px solid var(--la-graphite);border-radius:var(--la-r-sm);background:transparent;color:var(--la-graphite);box-shadow:none}
:where(main) :is([class$="-btn--ghost"], [class*="-btn--ghost "]):hover {background:var(--la-graphite);color:#fff}
:where(main) :is([class$="-btn"], [class*="-btn "]) {border-radius:var(--la-r-sm);box-shadow:none}

/* 8 · TARJETAS: blanco, filete de 1 px, radio 12, sin sombra pesada ni borde de color arriba.
No toca las variantes (x-card--algo): esas quedan en la plantilla. */
:where(main) :is([class$="-card"], [class*="-card "]):where(:not([class*="-card--"])) {background-color:var(--la-surface);border:1px solid var(--la-hairline);border-radius:var(--la-r);box-shadow:none}
:where(main) :is([class$="-card"], [class*="-card "]):where(:not([class*="-card--"])):hover {border-color:var(--la-hairline-dk);box-shadow:0 8px 24px rgba(29,32,37,.06);transform:none}
:where(main) :is([class*="-card__title"], [class$="-card__t"]) {color:var(--la-graphite);font-family:var(--font-body);font-weight:700;line-height:1.3}
:where(main) h3:is([class*="-card__title"], [class$="-card__t"]) {font-size:18px}
:where(main) :is([class*="-card__desc"], [class*="-card__text"], [class*="-card__excerpt"]) {color:var(--la-body);font-size:15px;line-height:1.6}
:where(main) :is([class*="-card__cat"], [class*="-card__kind"]) {color:var(--la-accent)}
:where(main) :is([class*="-card__cta"], [class*="-card__read"], [class*="-card__link"]) {color:var(--la-accent);font-weight:700}

/* 9 · TABLAS: filas con filete, cabecera grafito sobre piedra */
:where(main) :is([class*="-table-wrap"], [class*="-table__wrap"]) {border:1px solid var(--la-hairline);border-radius:var(--la-r);background:var(--la-surface);box-shadow:none}
:where(main) :is([class*="-table"], [class*="-tabla"], .la-content, .lact-body) thead tr th {background:var(--la-stone);color:var(--la-graphite);font-weight:700;border-bottom:1px solid var(--la-hairline-dk)}
:where(main) :is([class*="-table"], [class*="-tabla"], .la-content, .lact-body) :is(td, tbody th) {border-color:var(--la-hairline)}
:where(main) :is([class*="-table"], [class*="-tabla"], .la-content, .lact-body) caption {color:var(--la-secondary)}

/* 10 · NOTAS / CALLOUTS: hueso con filete a la izquierda (grafito; rojo en advertencias y citas). Solo -callout y .la-note:
las -note de cada plantilla (pies de figura, avisos) quedan como las dibuja su CSS.
Cierre (-callout--final): blanco con filete y regla roja a la izquierda, como en las guías; así la banda grafito de la página
queda libre para un solo bloque. Una plantilla que quiera su cierre en grafito lo declara con dos clases (ej. .lacl). */
:where(main) :is([class$="-callout"], [class*="-callout "], .la-note):where(:not([class*="--final"], [class*="--dark"])) {background-color:var(--la-offwhite);border-radius:0 var(--la-r) var(--la-r) 0;box-shadow:none}
:where(main) :is([class$="-callout"], [class*="-callout "]):where(:not([class*="--"])) {border-left-color:var(--la-graphite)}
:where(main) [class*="-callout--final"] {background-color:var(--la-surface);border:1px solid var(--la-hairline);border-left:4px solid var(--la-accent);border-radius:0 var(--la-r) var(--la-r) 0;box-shadow:none;color:var(--la-graphite)}
:where(main) [class*="-callout--final"] :is(strong, a) {color:var(--la-graphite)}
:where(main) [class*="-pull"] {border-left-color:var(--la-accent)}

/* 11 · PREGUNTAS FRECUENTES (<details>): filas con filete y chevrón rojo, como la home */
:where(main) :is([class*="-faq__item"], [class$="-faq-item"], [class*="-faq-item "]) {background:transparent;border:0;border-bottom:1px solid var(--la-hairline-dk);border-radius:0;box-shadow:none}
:where(main) :is([class*="-faq__item"], [class$="-faq-item"], [class*="-faq-item "])[open] {border-color:var(--la-hairline-dk);box-shadow:none}
:where(main) :is([class*="-faq__item"], [class$="-faq-item"], [class*="-faq-item "]) > summary {position:relative;display:flex;align-items:center;min-height:56px;padding:14px 40px 14px 0;cursor:pointer;list-style:none}
:where(main) :is([class*="-faq__item"], [class$="-faq-item"], [class*="-faq-item "]) > summary::-webkit-details-marker {display:none}
:where(main) :is([class*="-faq__item"], [class$="-faq-item"], [class*="-faq-item "]) > summary::after {content:"";position:absolute;top:50%;right:8px;width:10px;height:10px;margin-top:-7px;border:0;border-right:2px solid var(--la-accent);border-bottom:2px solid var(--la-accent);border-radius:0;background:none;transform:rotate(45deg);transition:transform var(--la-ease)}
:where(main) :is([class*="-faq__item"], [class$="-faq-item"], [class*="-faq-item "])[open] > summary::after {content:"";margin-top:-2px;background:none;transform:rotate(-135deg)}
:where(main) :is([class*="-faq__q"], [class*="-faq-item__q"]) {color:var(--la-graphite);font-family:var(--font-body);font-size:18px;font-weight:700;line-height:1.4}
:where(main) :is([class*="-faq__item"], [class$="-faq-item"], [class*="-faq-item "]) > summary:hover :is([class*="-faq__q"], [class*="-faq-item__q"]) {color:var(--la-accent)}
:where(main) :is([class*="-faq__a"], [class*="-faq-item__a"]) {padding-inline:0;color:var(--la-body);font-size:16px;line-height:1.65;max-width:72ch}
:where(main) [class*="-faq__a"] {padding-bottom:18px}

/* 12 · ÍNDICE (TOC) */
:where(main) :is([class$="-toc"], [class*="-toc "]) {background:var(--la-surface);border:1px solid var(--la-hairline);border-radius:var(--la-r);box-shadow:none}
:where(main) :is([class*="-toc__label"], [class*="-toc__summary"], [class*="-toc__title"]) {color:var(--la-graphite)}
:where(main) [class*="-toc__list"] a {color:var(--la-body)}
:where(main) [class*="-toc__list"] a:hover {color:var(--la-accent)}
:where(main) [class*="-toc__list"] a:is(.is-active, [aria-current]) {border-left-color:var(--la-accent);background:var(--la-offwhite);color:var(--la-graphite)}

/* 13 · CHIPS, PÍLDORAS Y ETIQUETAS */
:where(main) :is([class$="-chips"], [class*="-chips "]) > li {border-color:var(--la-hairline-dk);border-radius:999px;background:var(--la-surface);color:var(--la-body)}
:where(main) :is([class$="-pill"], [class*="-pill "], [class*="-card__tag"], .la-tag, .la-badge) {border-color:var(--la-hairline-dk);border-radius:999px}

/* 14 · GUÍAS RELACIONADAS Y "EN TU PAÍS" (template-parts/hub-relacionadas.php, en-tu-pais.php: .lahx-) */
:where(main) .lahx {padding-block:var(--la-sec);border-top-color:var(--la-hairline)}
:where(main) .lahx__wrap {max-width:var(--la-max);padding-inline:var(--la-gutter)}
:where(main) .lahx-rel__card {border:1px solid var(--la-hairline);border-radius:var(--la-r);box-shadow:none}
:where(main) .lahx-rel__card:hover {border-color:var(--la-hairline-dk);box-shadow:0 8px 24px rgba(29,32,37,.06);transform:none}
:where(main) :is(.lahx-rel__link, .lahx-pais__link, [class*="lahx-paises"] a) {color:var(--la-graphite)}
:where(main) :is(.lahx-rel__card, .lahx-paises > li):hover :is(.lahx-rel__link, a) {color:var(--la-accent);text-decoration:none}
:where(main) .lahx-rel__tipo {color:var(--la-accent)}
/* relacionados de los posts */
:where(main) .lact-related-card {border-radius:var(--la-r)}
:where(main) .lact-related-card:hover {transform:none;box-shadow:0 8px 24px rgba(29,32,37,.06)}
:where(main) .lact-related-card:hover .lact-related-card__title {color:var(--la-accent)}

/* 15 · BANDAS OSCURAS → grafito (el único tono oscuro); CTA de los posts */
:where(main) :is([class*="-section--dark"], [class*="-section--navy"], [class*="-sec--dark"], [class$="-cta-band"], .lact-cta) {background-color:var(--la-graphite);background-image:none}
:where(main) .lact-cta::before {display:none}
:where(main) .lact-cta {border-radius:var(--la-r)}
:where(main) .lact-cta__eyebrow {color:var(--la-on-dark)}
:where(main) .lact-cta__text {color:var(--la-on-dark)}

/* 16 · IMÁGENES DE CONTENIDO: radio 12 */
:where(main) :is([class*="-figure"], .la-content figure, .lact-body figure) img {border-radius:var(--la-r)}

/* 17 · MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion: reduce) {:where(main) * {transition:none !important;animation:none !important}}

/* 18 · MÓVIL */
@media (max-width: 719px) {
:where(main) :is([class$="-eyebrow"], [class*="-eyebrow "], [class*="__eyebrow"], .la-eyebrow, [class*="-hero__badge"], [class*="-hero__eyebrow"], [class*="-hero__ey"]) {font-size:12px}
:where(main) :is([class$="-section-sub"], [class*="-section-sub "], [class$="-section-lead"], [class$="-hub__sub"], .lahx__intro, :where(.la-section__header) p) {font-size:16px}
:where(main) :is([class*="-faq__q"], [class*="-faq-item__q"]) {font-size:17px}
:where(main) :is([class*="-faq__a"], [class*="-faq-item__a"]) {font-size:15px}
:where(main) :is([class*="-btn-red"], [class*="-btn--red"], [class*="-btn--primary"], [class*="-btn-primary"], [class*="-btn-outline"], [class*="-btn--outline"], [class*="-btn--secondary"]) {padding-inline:20px}
}