/* facm-tokens.css — Base visual FACM compartida por todo el sitio público.
   Look & feel "Mi Trámite Invalidez (Oficios)" — Fase 1.

   Se carga como el PRIMER <link> del <head> (ver app/(publico)/layout.jsx),
   antes que el theme Flatsome y que valida-doc.css/FormularioContacto.module.css,
   para que cualquier hoja de estilos del sitio pueda usar estas variables.

   No reemplaza colores existentes de forma masiva: define el vocabulario
   común y se aplica puntualmente donde el look & feel lo requiere (ver
   core-src/style/app.css servido en /core/style/app.css, valida-doc.css,
   y los estilos inline puntuales en content/*.html). Los colores semánticos
   (éxito/error/advertencia) quedan aparte y no se tocan salvo que se pida. */

:root {
  /* Identidad FACM (Brandbook) */
  --facm-primary: #521c68;       /* púrpura oscuro — texto principal, identidad fuerte */
  --facm-primary-hover: #43154f; /* variante más oscura para hover/active de botones sólidos */
  --facm-secondary: #dc23a7;     /* magenta — acentos, CTAs, highlights de marca */

  /* --facm-primary-solid — Tanda 2.2: token nuevo para el caso de uso
     "fondo sólido de un botón/píldora con TEXTO BLANCO fijo encima"
     (ej. .botonEnviar, el círculo del launcher con el panel abierto),
     separado de --facm-primary porque ese token también se usa como
     COLOR DE TEXTO (títulos, links) -- en modo Oscuro --facm-primary
     se aclara para poder leerse como texto sobre fondo oscuro (abajo),
     lo que lo vuelve inservible como fondo sólido con texto blanco
     encima (blanco sobre lila claro da ~2:1, hallazgo real de la
     Tanda 2.1, resuelto puntualmente en su momento con un override
     de color). Con este token, cualquier componente que use
     "background:var(--facm-primary-solid);color:#fff" funciona en
     los 3 modos sin overrides por componente. En Claro/Alto
     Contraste vale lo mismo que --facm-primary (ningún cambio de
     apariencia ahí, --facm-primary YA es suficientemente oscuro para
     texto blanco en esos dos modos) -- solo diverge en Oscuro. */
  --facm-primary-solid: var(--facm-primary);

  /* Texto y fondo */
  --facm-text: #2b2430;
  --facm-text-muted: #6d6673;
  --facm-background: #ffffff;
  --facm-surface: #ffffff;
  --facm-border: #d8cfe0;

  /* Estados semánticos (se mantienen reconocibles: rojo/verde/ámbar) */
  --facm-error: #b91c1c;
  --facm-success: #1b5e20;
  --facm-warning: #8a5200;

  /* Foco visible — magenta de marca: distinguible del error (rojo) y del
     éxito (verde), con contraste suficiente sobre fondos claros y sobre
     el púrpura primario de botones/superficies oscuras. */
  --facm-focus: #dc23a7;

  /* Links — nuevo token (antes no existía): color del texto de enlaces.
     Igual a --facm-primary en modo normal (no cambia nada existente,
     el subrayado/hover ya los da cada contexto); en modo alto contraste
     se redefine junto al resto de la paleta. */
  --facm-link: var(--facm-primary);

  /* Radios y espaciados reutilizables */
  --facm-radius-sm: 6px;
  --facm-radius: 10px;
  --facm-radius-pill: 999px;
  --facm-space-xs: 4px;
  --facm-space-sm: 8px;
  --facm-space-md: 16px;
  --facm-space-lg: 24px;
  --facm-space-xl: 40px;

  /* Tanda 3 — Tamaño de texto. Multiplicador, NO un tamaño absoluto:
     cada selector que participa de esta preferencia envuelve su PROPIO
     valor existente en "calc(<valor> * var(--facm-font-scale))" (ver
     selectores puntuales en app.css/menu.css/FormularioContacto.module.css/
     valida-doc.css) -- nunca se toca html/body/*, así que el header,
     nav, logo, íconos, SVG, imágenes de etapas y logos de Ecosistema
     (que no referencian este token) quedan exactamente igual sin
     necesitar ninguna exclusión explícita: por construcción, SOLO
     escala lo que un selector puntual decide envolver en calc().
     Independiente de --facm-contrast/data-theme/data-contrast (token
     separado, atributo separado, localStorage separado -- ver
     app/(publico)/layout.jsx). 1 = Normal (sin cambio, valor por
     defecto). */
  --facm-font-scale: 1;

  /* Microtanda "Hero + Header responden a Tamaño de texto" (diagnóstico
     previo, aprobado solo para Hero): token INDEPENDIENTE de
     --facm-font-scale, exclusivo para el título/subtítulo del Hero
     desktop (#carousel-lg). No lo usa ningún otro selector del sitio.
     Escala más moderada que el token global (1.05/1.10 vs 1.125/1.25):
     medido en vivo que el Hero ya es tipografía grande (47.6px el
     título en Normal) y el factor global habría dado saltos mayores
     sin necesidad real de más -- se probó específicamente 1.05/1.10 en
     los 7 anchos de la matriz responsive (390-1920) sin cambiar la
     cantidad de líneas de ningún slide ni producir overflow, antes de
     fijar estos valores. El Header/nav quedó explícitamente EXCLUIDO
     de esta tanda (diagnóstico: el breakpoint 1295px no tiene margen
     para un escalado perceptible sin arriesgar overlap con el
     launcher ♿ con el spacing original de los <li> -- resuelto en la
     microtanda siguiente reduciendo ese spacing SOLO cuando el token
     de abajo está activo, ver --facm-nav-font-scale). */
  --facm-hero-font-scale: 1;

  /* Microtanda "Escalado real del menú del Header" -- token propio,
     independiente de --facm-font-scale y de --facm-hero-font-scale.
     Normal (1, valor por defecto de :root) deja el nav BYTE-A-BYTE
     igual que antes de esta tanda: el selector que lo aplica (ver
     menu.css) está scopeado a [data-font-size="large"/"xlarge"], así
     que en Normal (sin ese atributo) ni siquiera matchea -- no hace
     falta que este valor sea "neutro", el nav de Normal sigue
     gobernado por las reglas preexistentes sin tocar.
     1.12/1.18 (no 1.125/1.25, el factor global): medido en el ancho
     crítico real del breakpoint (1295px) que con el spacing original
     de los <li> ni 1.04 cabe con margen real -- estos valores SÍ
     caben, pero solo combinados con el padding/margin reducido que
     esta misma microtanda aplica junto al token (ver menu.css),
     nunca solos. */
  --facm-nav-font-scale: 1;
}
/* +12.5% de referencia visual (no una regla matemática estricta --
   cada selector puntual puede apartarse un poco si el resultado se ve
   mejor, mismo criterio que ya usa el resto del proyecto con sus
   porcentajes de contraste "de referencia"). */
[data-font-size="large"] {
  --facm-font-scale: 1.125;
  --facm-hero-font-scale: 1.05;
  --facm-nav-font-scale: 1.12;
}
/* +25% de referencia visual. */
[data-font-size="xlarge"] {
  --facm-font-scale: 1.25;
  --facm-hero-font-scale: 1.10;
  --facm-nav-font-scale: 1.18;
}

/* ===================================================================
   VISUAL — ESCALA DE GRISES — [data-visual="grayscale"] sobre <html>
   Tanda 4 / Panel de Accesibilidad — preferencia independiente de
   Contraste (Claro/Oscuro/Alto contraste) y de Tamaño de texto: puede
   coexistir con cualquiera de esas dos, ninguna toca este atributo ni
   viceversa.

   filter (no variables de color, a diferencia de Alto Contraste): un
   filtro es lo único que también desatura imágenes/logos/mapas reales
   (PNG/JPG/iframes), que ningún token CSS puede cubrir. La regla del
   PRD "Alto Contraste no usa filtros CSS" es específica de ESE modo
   (necesita tokens exactos para cumplir WCAG con precisión) -- no
   aplica acá: Escala de grises es, por definición, un efecto de
   filtro (igual que el modo Grayscale nativo de iOS/Android/Windows,
   que también desatura fotos e iconos a propósito).

   filter EN <html>, nunca en <body>: verificado con CDP (scroll real +
   getBoundingClientRect) que filter en <body> rompe position:fixed del
   launcher/#top-link/overlays de modal (todos hijos directos de body,
   tan alto como todo el documento) -- se desprenden del viewport al
   scrollear. filter en <html> NO tiene ese problema: el elemento raíz
   está explícitamente exceptuado en el spec de Filter Effects de crear
   containing block para descendientes fixed/absolute (confirmado en
   Chromium) -- por eso el header sticky, el launcher y los modales
   siguen fijos al viewport igual que sin el filtro. */
html[data-visual="grayscale"] {
  filter: grayscale(100%);
}

/* ===================================================================
   MODO ALTO CONTRASTE — [data-contrast="high"] sobre <html>
   Look & feel Mi Trámite Invalidez — última fase.

   No reemplaza los tokens normales (arriba): los redefine solo dentro
   de este scope. Todo elemento que YA usa var(--facm-*) (la mayoría de
   las correcciones de contraste de esta feature: bordes/placeholder de
   Contacto, color de error/resultado de Consulta Estado, títulos de
   Oficinas/FAQ, ícono hamburguesa, foco global de más abajo) responde
   automáticamente sin necesitar overrides adicionales. Lo que NO usa
   tokens (colores hardcodeados de Flatsome/legacy) se resuelve aparte
   en public/styles/high-contrast.css, valida-doc.css y
   FormularioContacto.module.css — ver el informe de diagnóstico.

   Paleta: negro/blanco puro para texto y fondo (máximo contraste,
   21:1); --facm-primary/--facm-secondary oscurecidos más allá de sus
   valores ya buenos en modo normal (identidad visual reconocible pero
   con margen extra); estados semánticos (error/success/warning)
   mantienen su familia de color — NO se colapsan a blanco y negro,
   para no perder su significado (WCAG 1.4.1). Todos los valores fueron
   calculados con la fórmula real de contraste WCAG, no estimados:
   texto/fondo 21:1, primary 15.56:1, secondary 10.33:1, error 7.33:1,
   warning 7.41:1, success 6.73:1, foco 4.79:1 (>=3:1 no-texto). */
[data-contrast="high"] {
  --facm-primary: #3a0e4d;
  --facm-primary-hover: #2a0a38;
  --facm-secondary: #7a0a5e;

  --facm-text: #000000;
  /* En alto contraste, un texto "apagado" es contradictorio con el
     propósito del modo -- se deja casi igual al texto principal en vez
     de mantener la distinción tenue de --facm-text-muted normal. */
  --facm-text-muted: #1a1a1a;
  --facm-background: #ffffff;
  --facm-surface: #ffffff;
  --facm-border: #000000;

  --facm-error: #b00020;
  --facm-success: #0b6b0b;
  --facm-warning: #7a4b00;

  --facm-focus: #d400aa;
  --facm-link: #000000;

  /* --fs-color-primary es el token PROPIO de Flatsome (wp-inline.css,
     :root) -- no es nuestro, pero varias reglas del theme SÍ lo usan
     (.btn, estados activos de dropdown, etc.). Redefinirlo aquí no
     modifica public/theme/ ni wp-inline.css: solo provee un valor de
     mayor prioridad para ese mismo nombre de variable dentro de este
     scope, aprovechando la cascada normal de custom properties. */
  --fs-color-primary: var(--facm-primary);
}

/* ===================================================================
   MODO OSCURO — [data-theme="dark"] sobre <html> — Tanda 2.1
   (infraestructura, no acabado visual completo -- ver
   public/styles/dark-theme.css para los overrides puntuales de
   componentes legacy con color literal, y el informe de la tanda para
   el listado de componentes pendientes de Tanda 2.2).

   Mismo patrón que [data-contrast="high"] de arriba: redefine SOLO
   los tokens dentro de este scope, sin tocar :root. Todo lo que ya
   usa var(--facm-*) responde automáticamente sin overrides
   adicionales (p. ej. los links del header vía .nav-top-link, más
   abajo en menu.css).

   [data-theme="dark"] y [data-contrast="high"] son mutuamente
   excluyentes por construcción (ver el script de layout.jsx: siempre
   se quitan ambos atributos antes de aplicar el nuevo) -- nunca
   coinciden sobre el mismo <html>, así que no hace falta resolver
   aquí ningún empate entre ambos scopes.

   Paleta oscura institucional, NO negro puro: fondo con un tinte
   sutil hacia el morado de marca (no gris neutro genérico), superficie
   perceptiblemente más clara que el fondo para distinguir tarjetas/
   paneles. Morado y magenta de marca AUMENTADOS en luminosidad -- los
   valores normales (pensados para fondo blanco) se verían apagados/
   con contraste insuficiente tal cual sobre fondo oscuro. Estados
   semánticos (error/success/warning) también aclarados, mantienen su
   familia de color reconocible. Sin gradientes, sin azul genérico.

   Contraste calculado con la fórmula real WCAG (relative luminance,
   no estimado): texto/fondo 15.63:1, texto-muted/fondo 7.83:1,
   texto-muted/surface 5.71:1, primary(texto)/fondo 8.67:1,
   secondary/fondo 7.83:1, focus/fondo 7.09:1, border/fondo 4.32:1,
   border/surface 3.15:1 (>=3:1, 1.4.11), error/fondo 7.85:1,
   success/fondo 10.49:1, warning/fondo 9.83:1.

   --facm-primary-solid (Tanda 2.2) -- ÚNICO token de esta lista que
   NO es una versión más clara de su par en modo normal: acá
   --facm-primary se aclaró para servir como TEXTO legible sobre
   fondo oscuro, así que ya no sirve como fondo sólido con texto
   blanco (2.07:1, insuficiente). --facm-primary-solid se queda
   deliberadamente OSCURO (un morado intermedio, ni tan oscuro como
   para perderse contra el fondo, ni tan claro como para converger
   con --facm-primary) para que "background:var(--facm-primary-solid);
   color:#fff" siga funcionando iguial en los 3 modos. Contraste:
   blanco/primary-solid 5.68:1, primary-solid/fondo 3.15:1 (separación
   visual del fondo general -- por diseño no llega a 3:1 contra
   --facm-surface, ver informe de la tanda: es un morado saturado
   sobre un morado grisáceo, distinguible por matiz aunque la métrica
   de luminancia quede algo ajustada; documentado, no oculto). */
[data-theme="dark"] {
  --facm-primary: #c9a8e0;
  --facm-primary-solid: #8452a0;
  --facm-primary-hover: #d8bdec;
  --facm-secondary: #ff7fce;

  --facm-text: #f2eef5;
  --facm-text-muted: #b3a7bd;
  --facm-background: #1a1520;
  --facm-surface: #372c44;
  --facm-border: #8a7595;

  --facm-error: #ff8a80;
  --facm-success: #7fd99a;
  --facm-warning: #e8b95a;

  --facm-focus: #ff6ec7;
  --facm-link: var(--facm-primary);

  --fs-color-primary: var(--facm-primary);
}

/* Foco visible homologado — Fase 5.
   Reemplaza el foco azul genérico heredado de Bootstrap (.form-control:focus
   en /core/style/app.css) y cubre los elementos interactivos que no tenían
   ningún indicador de foco propio (links del menú, "Ver Más", checkboxes,
   controles del carrusel, toggles de acordeón, etc.), sin tocar JS ni
   comportamiento. Los componentes que YA definen su propio :focus-visible
   (Valida DOC) ganan por especificidad de selector — esta regla es el piso
   común, no un reemplazo.

   Tanda 9 (APROBADO) — Homologación sitio completo: se agrega ":focus"
   junto a ":focus-visible" (mismo bloque de declaraciones, un solo
   indicador) para que el piso común también responda a click de mouse,
   no solo a teclado -- requerimiento explícito de esta tanda ("no
   depender exclusivamente de :focus-visible"). Cubre de una sola vez
   todo lo que NO tiene una regla más específica propia: el botón
   hamburguesa del header (<a aria-label="Menú">), los ítems del menú
   off-canvas mobile, #top-link ("volver arriba"), checkboxes sueltos
   (Home/Consulta Estado) y cualquier <a>/<button>/input/select/
   textarea/summary/[tabindex] sin estilo de foco propio en el resto
   del sitio. Los elementos con su PROPIA regla :focus-visible (menú
   principal, logo, botón Consultar Estado, panel de accesibilidad,
   acordeones, carrusel, Valida DOC, Contacto) fueron auditados y
   extendidos individualmente con el mismo criterio -- ver menu.css/
   app.css/valida-doc.css/FormularioContacto.module.css -- así que
   siguen ganando por especificidad y no dependen de este piso. */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
summary:focus,
summary:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
  outline: 3px solid var(--facm-focus);
  outline-offset: 2px;
}

/* ===================================================================
   Home — introducción de Consulta Estado (content/index.html)
   Bloques #text-3751602840 (desktop) y #text-1466499547 (mobile).
   Fase 7: reemplaza los <span> con tamaño/color inline heredados del
   pegado desde Word por clases limpias, con jerarquía, ancho de lectura
   y color de marca consistentes entre ambos bloques.
   =================================================================== */
.mt-hero-intro__title {
  color: var(--facm-primary);
  font-weight: 700;
  /* Tope del clamp 1.85rem -> 1.6rem (look & feel, Tanda 2 / T2.1): en
     pantallas grandes el título se veía con más peso del necesario junto
     al hero. El piso (1.35rem) no se toca -- sigue siendo cómodo para
     adultos mayores en cualquier ancho.
     Tanda 4 — Accesibilidad "Tamaño de texto": título excluido a
     propósito en Tanda 3 (encabezado con clamp(), no texto de lectura).
     Auditoría confirmó que el gap aplica a TODOS los títulos H1/H2
     principales del sitio, no solo a este -- se corrige reutilizando el
     mismo --facm-font-scale que ya usa el párrafo de abajo (.mt-hero-intro__text)
     y el H4 de Consulta Estado (app.css), envolviendo el clamp() completo
     sin tocar sus parámetros. En Normal (scale=1) el resultado es
     matemáticamente idéntico al valor anterior. */
  font-size: calc(clamp(1.35rem, 1.05rem + 1vw, 1.6rem) * var(--facm-font-scale, 1));
  line-height: 1.35;
  text-align: left;
  /* margin-bottom: --facm-space-md (16px) -> --facm-space-sm (8px)
     (Tanda 2 / T2.1), token ya existente, sin valores nuevos. */
  margin: 0 0 var(--facm-space-sm);
  max-width: 46ch;
}

.mt-hero-intro__text {
  color: var(--facm-text);
  /* Tanda 3 — Tamaño de texto: párrafo de lectura real (la
     introducción de Home), participa de la preferencia. calc() con
     --facm-font-scale=1 (Normal) da exactamente 1rem, igual que
     antes -- no hace falta una regla aparte por tamaño. El título de
     arriba (.mt-hero-intro__title) NO participa a propósito: ya usa
     un clamp() con piso generoso (1.35rem) y es un encabezado, no
     texto de lectura -- crecer también ahí se veía desproporcionado
     frente al párrafo. */
  font-size: calc(1rem * var(--facm-font-scale, 1));
  line-height: 1.6;
  text-align: left;
  max-width: 62ch;
  margin: 0 0 var(--facm-space-sm);
}

.mt-hero-intro__text:last-child {
  margin-bottom: 0;
}

/* Variante para el bloque mobile (#text-1466499547), que en el original
   usaba text-align: justify en vez de left — se mantiene esa diferencia
   intencional entre ambos bloques. */
.mt-hero-intro__title--justify,
.mt-hero-intro__text--justify {
  text-align: justify;
}

/* ===================================================================
   Bloque introductorio — micro-tanda "editorial centrado" (look & feel).
   Solo la variante DESKTOP (#text-3751602840): la mobile (#text-1466499547)
   no se toca, conserva su ancho natural y padding actual, como se pidió.
   =================================================================== */

/* El .col-inner real mide 1050px (Flatsome) -- el texto, con los
   max-width en ch de arriba (46ch=~673px título, 62ch=~567px párrafos),
   quedaba pegado al borde izquierdo con ~480px de vacío a la derecha.
   760px dentro de ese contenedor deja ~145px de margen simétrico por
   lado (proporción medida, no al azar) -- ancho de lectura editorial
   sin llegar a ocupar los 1050px completos. margin:0 auto centra el
   CONTENEDOR; el texto adentro sigue alineado a la izquierda (no se
   toca text-align de .mt-hero-intro__title/__text). */
#text-3751602840 {
  max-width: 760px;
  margin: 0 auto;
}
/* Título (46ch) y párrafos (62ch) tenían anchos distintos entre sí. Se
   retira el tope en ch SOLO dentro de este contenedor para que los tres
   compartan la misma columna que ya define #text-3751602840 arriba, en
   vez de que cada uno recorte por su cuenta a un ancho más angosto.
   Selector con el ID real del bloque desktop: no alcanza a la variante
   mobile, que usa las mismas clases pero cuelga de otro contenedor. */
#text-3751602840 .mt-hero-intro__title,
#text-3751602840 .mt-hero-intro__text {
  max-width: none;
}

/* Acento institucional muy sutil: solo un border-left de marca, sin
   fondo, sin sombra, sin convertirse en tarjeta -- acompaña el bloque
   completo (título + párrafos), no un elemento individual. Se aplica a
   AMBAS variantes (desktop y mobile) porque el ancho/centrado de arriba
   es exclusivo de desktop, pero el acento en sí se pidió evaluar en
   los dos. var(--facm-primary) (púrpura), no --facm-secondary
   (magenta) -- pedido explícito de no llamar demasiado la atención. */
#text-3751602840,
#text-1466499547 {
  border-left: 3px solid var(--facm-primary, #521c68);
  padding-left: var(--facm-space-lg, 24px);
}

/* ===================================================================
   Home — título "Estado de Trámite", variante desktop (content/index.html,
   #text-1057575971) — look & feel, Tanda 2 / T2.3.

   Después del título (<h1><span id="largeTitle">...) el bloque trae un
   <hr /> y un <p> </p> vacío (espaciador heredado del page builder, sin
   texto) antes de la grilla de tarjetas -- medido en ~105.7px de hueco
   entre el título y la primera tarjeta, bastante más que en la variante
   mobile (#text-715781800, ~40.3px, que no tiene ese <p> vacío). Se
   acortan los márgenes del <hr/> y del <p> vacío sin quitar ningún
   elemento del HTML (piden explícitamente no tocar estructura/DOM).
   Selector con el id del contenedor porque <hr>/<p> no tienen uno propio
   -- no afecta otros <hr>/<p> del sitio. La variante mobile no se toca:
   su hueco ya era razonable (no había nada "excesivo" que medir). */
#text-1057575971 hr {
  margin-top: 8px;
  margin-bottom: 8px;
}
#text-1057575971 p {
  margin-bottom: 6px;
}

/* ===================================================================
   Tanda 4 — Accesibilidad "Tamaño de texto": títulos que nunca habían
   tenido ninguna regla de escalado (no eran una exclusión a propósito,
   simplemente no existía). Reutiliza --facm-font-scale (mismo token,
   ya definido arriba) -- en Normal (scale=1) todo queda IDÉNTICO al
   valor medido hoy (confirmado en vivo antes de este cambio).

   "Estado de Trámite" (#largeTitle desktop / #smallTitle mobile) NO
   necesita ninguna regla nueva -- verificado en vivo (getComputedStyle,
   los 3 estados) ANTES de escribir esta sección: su contenedor
   (#text-1057575971 / #text-715781800) ya tiene class="text", que Tanda
   3 (app.css, ".text{font-size:calc(15px*scale)}") ya escala. El 150%
   inline del span es relativo al <h1>/<p> padre, que a su vez hereda
   ese font-size ya escalado vía "h1{font-size:1.7em}" (Flatsome) -- el
   título YA sube exactamente ×1.125/×1.25 (38.25px -> 43.03px ->
   47.81px, medido) por esa cadena de herencia, sin agregar nada.
   Se intentó una regla explícita acá (calc(150%*scale) !important,
   necesaria por el style="" inline) y se detectó que DUPLICABA el
   escalado -- el 150% ya hereda de un padre escalado, y el calc()
   volvía a multiplicar por el mismo factor encima (efecto cuadrático:
   ×1.2656/×1.5625 en vez de ×1.125/×1.25). Se revirtió esa regla; no
   hacía falta. */

/* "Links de nuestro ecosistema" (content/index.html, #col-341621594):
   mismo caso -- 120% inline en el <span> dentro del <h1>, sin id/clase
   propios. Selector por ID del contenedor de columna (único en el
   sitio) + h1 span. Mismo motivo de !important que arriba. */
#col-341621594 h1 span {
  font-size: calc(120% * var(--facm-font-scale, 1)) !important;
}

/* "Oficinas" y "Preguntas Frecuentes": <h1> sin span ni font-size
   propio -- hereda el h1 base de Flatsome (public/theme/assets/css/flatsome.css):
   "h1{font-size:1.7em}" y "@media(max-width:549px){h1{font-size:1.4em}}"
   (confirmado con getComputedStyle: 27.2px/22.4px = 16px * 1.7/1.4,
   ningún otro factor de por medio). Se replican ambos valores y el
   mismo corte de 549px -- sin esto, el em quedaría relativo a un
   contexto distinto y ya no coincidiría con el valor original en
   Normal. Selectores por ID de columna (únicos en el sitio, uno por
   página): no afectan ningún otro <h1>. */
#col-1678706492 h1,
#col-1913812767 h1 {
  font-size: calc(1.7em * var(--facm-font-scale, 1));
}
@media (max-width: 549px) {
  #col-1678706492 h1,
  #col-1913812767 h1 {
    font-size: calc(1.4em * var(--facm-font-scale, 1));
  }
}

/* ===================================================================
   Footer — logo FACM (content/footer.html)
   Movido desde un <style> inline embebido en el fragmento HTML (Fase 9).
   Mismos breakpoints y valores que el original, sin cambios visuales.
   =================================================================== */
@media (max-width: 541px) and (max-height: 933px) {
  .logo_facm_footer {
    max-width: 50%;
  }
}

@media (min-width: 1024px) and (min-height: 1366px) {
  .logo_facm_footer {
    max-width: 60%;
  }
}

@media (min-width: 820px) and (max-height: 1181px) {
  .logo_facm_footer {
    max-width: 60%;
  }
}
