/* ===========================================================================
   Kuma 2026 · responsive de las secciones generadas desde el Figma (.fx)

   El Figma solo tiene frames a 1366 y no hay diseñador: estas reglas son
   criterio propio, ESCRITO A MANO y aparte del CSS generado, para que
   regenerar una página no las pise. Principio: no reescribir el diseño, solo
   dejar que respire en pantallas más estrechas.

   Cómo funciona:
   1. Los tamaños del diseño son variables (--size-96, --font/texts/h2/desktop…)
      y las clases de Figma las leen con var(). Se redefinen por anchura y todo
      el sistema escala a la vez: relleno, huecos y tipografía.
   2. Las anchuras fijas en px (1248, 824, 613, 504, 294…) pasan a max-width:100%.
   3. Las rejillas de 4 y 5 columnas bajan a 2 y a 1. Las filas flex con hueco
      grande (64px) se apilan.
   4. Las diagonales y fondos absolutos se quedan: recortan con la sección.
   Verificado con capturas a 390, 768, 1024, 1366 y 1920 (ver figma/PLAN.md).
   =========================================================================== */

/* Contenedor de contenido: en vez de 1248 fijos, todo el ancho con margen. */
.fx [class~="max-w-[1248px]"] { padding-inline: 24px; }
@media (min-width: 1300px) { .fx [class~="max-w-[1248px]"] { padding-inline: 0; } }

/* Anchuras fijas de texto y tarjetas: nunca más anchas que la pantalla.
   Con min(px, vw) y no con max-width:100%: los padres son flex sin anchura
   (se miden por su contenido) y un porcentaje ahí no resuelve nada.
   SIEMPRE [class~="…"] (clase exacta): con *= "w-[1248px]" casa tambien con
   "max-w-[1248px]" y el contenedor perdio su maximo en escritorio (paso). */
/* solo el contenido en flujo: los fondos y diagonales absolutos (1692px, 1920px…) deben poder desbordar; la seccion los recorta */
/* en :where() (peso cero): si el elemento trae su propio max-w-[1248px], manda el suyo; si no, el 100% */
:where(.fx > :not([class~="absolute"])) { max-width: 100%; }
.fx [class~="w-[294px]"] { width: min(294px, calc(100vw - 32px)); }
/* Requisitos de la ficha de oposición: el Figma deja cada requisito en una línea
   centrada (whitespace-nowrap) y los largos se metían debajo de la foto. */
.fx [data-node-id="315:910"] > div { align-items: flex-start; }
.fx [data-node-id="315:910"] p { white-space: normal; text-align: left; max-width: 100%; }
/* ==== ANCHURAS (generado por figma/mcp/anchuras.py; no editar a mano) ====
   Anchuras fijas en flujo de las secciones generadas: nunca mas que la pantalla. */
.fx [class~="w-[344px]"] { width: min(344px, calc(100vw - 32px)); }
.fx [class~="w-[362px]"] { width: min(362px, calc(100vw - 32px)); }
.fx [class~="w-[400px]"] { width: min(400px, calc(100vw - 32px)); }
.fx [class~="w-[434px]"] { width: min(434px, calc(100vw - 32px)); }
.fx [class~="w-[501.6px]"] { width: min(501.6px, calc(100vw - 32px)); }
.fx [class~="w-[504px]"] { width: min(504px, calc(100vw - 32px)); }
.fx [class~="w-[506px]"] { width: min(506px, calc(100vw - 32px)); }
.fx [class~="w-[592px]"] { width: min(592px, calc(100vw - 32px)); }
.fx [class~="w-[600px]"] { width: min(600px, calc(100vw - 32px)); }
.fx [class~="w-[610px]"] { width: min(610px, calc(100vw - 32px)); }
.fx [class~="w-[611px]"] { width: min(611px, calc(100vw - 32px)); }
.fx [class~="w-[613px]"] { width: min(613px, calc(100vw - 32px)); }
.fx [class~="w-[718px]"] { width: min(718px, calc(100vw - 32px)); }
.fx [class~="w-[792px]"] { width: min(792px, calc(100vw - 32px)); }
.fx [class~="w-[822px]"] { width: min(822px, calc(100vw - 32px)); }
.fx [class~="w-[824px]"] { width: min(824px, calc(100vw - 32px)); }
.fx [class~="w-[828px]"] { width: min(828px, calc(100vw - 32px)); }
.fx [class~="w-[935.5px]"] { width: min(935.5px, calc(100vw - 32px)); }
.fx [class~="w-[1032px]"] { width: min(1032px, calc(100vw - 32px)); }
.fx [class~="w-[1036px]"] { width: min(1036px, calc(100vw - 32px)); }
.fx [class~="w-[1042px]"] { width: min(1042px, calc(100vw - 32px)); }
.fx [class~="w-[1240px]"] { width: min(1240px, calc(100vw - 32px)); }
.fx [class~="w-[1248px]"] { width: min(1248px, calc(100vw - 32px)); }
/* capas absolutas grandes: debajo del contenido en flujo (ver anchuras.py) */
.fx :is(.flex, .grid):has(> [class~="absolute"]) { isolation: isolate; }
.fx :is(.flex, .grid) > [class~="absolute"][class~="h-[1182px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="h-[1314px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="h-[1581.091px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="h-[1770px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="h-[1904.246px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="h-[309px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="h-[318px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="h-[335px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="h-[354px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="h-[380px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="h-[858px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="inset-0"], .fx :is(.flex, .grid) > [class~="absolute"][class~="w-[1132.977px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="w-[1133px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="w-[1240px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="w-[1366px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="w-[1692.697px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="w-[1920px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="w-[517px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="w-[552px]"], .fx :is(.flex, .grid) > [class~="absolute"][class~="w-[745px]"] { z-index: -1; }
/* ==== /ANCHURAS ==== */
/* la capa absoluta que contiene un formulario (calculadoras) no baja: se usa */
.fx :is(.flex, .grid) > [class~="absolute"]:has(form, input, select) { z-index: auto; }

/* Los elementos de 1366 fijos (velos, fondos) cubren SIEMPRE todo el ancho de la
   seccion: en pantallas mas anchas dejaban sin velo los logos de la derecha. */
.fx [class~="w-[1366px]"] { width: 100%; max-width: 100%; }

/* Fotos: al cambiar la caja de tamaño el contenido no se deforma. Figma pone
   object-cover en casi todas; en las que van con anchos en % no. */
.fx img:not([class*="object-contain"]) { object-fit: cover; }

/* ---- ≤ 1100: tablet ------------------------------------------------------ */
@media (max-width: 1100px) {
  .fx { --size-96: 64px; --size-64: 40px; --size-48: 32px; }
  .fx [class~="grid-cols-[repeat(4,minmax(0,1fr))]"] { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
  .fx [class~="grid-cols-[repeat(5,minmax(0,1fr))]"] { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  /* Figma fija col-1..col-4 en cada tarjeta: con 2 columnas declaradas, col-3 y
     col-4 crean columnas implicitas y aplastan las dos primeras. Fuera. */
  .fx [class*="grid-cols-"] > *, .fx [class*="grid-cols-"] > a[style*="contents"] > * { grid-column: auto !important; grid-row: auto !important; margin-inline: 0 !important; justify-self: center; width: auto; max-width: 100%; }
  .fx [class*="grid-cols-"] > *:not([class~="w-[294px]"]), .fx [class*="grid-cols-"] > a[style*="contents"] > *:not([class~="w-[294px]"]) { width: 100%; justify-self: stretch; justify-content: center; }
  .fx [class*="grid-cols-"] > a { display: block; }
  .fx [class*="grid-cols-"] > * > [class~="w-[294px]"], .fx [class*="grid-cols-"] > a[style*="contents"] > * > [class~="w-[294px]"] { width: min(294px, calc(100vw - 48px)); }
  /* capas invisibles del diseño (opacity-0): en escritorio no ocupan sitio visible,
     apiladas si; fuera del flujo */
  .fx [class~="opacity-0"] { display: none; }
  /* filas de dos columnas (texto + tarjeta, texto + foto): apiladas */
  .fx .flex[class*="gap-[var(--size-64"] { flex-direction: column; align-items: stretch; }
  .fx .flex[class*="gap-[var(--size-64"] > * { width: 100%; }
  /* fotos y tarjetas con ancho fijo */
  .fx [class~="w-[294px]"], .fx [class~="w-[400px]"], .fx [class~="w-[440px]"] { max-width: 100%; }
}

/* ---- ≤ 768: tablet vertical ---------------------------------------------- */
@media (max-width: 768px) {
  .fx [class~="grid-cols-[repeat(2,minmax(0,1fr))]"], .fx [class~="grid-cols-[repeat(3,minmax(0,1fr))]"], .fx[class~="grid-cols-[repeat(2,minmax(0,1fr))]"] { grid-template-columns: minmax(0, 1fr); }
  .fx[class~="grid-cols-[repeat(2,minmax(0,1fr))]"] > * { grid-column: auto !important; grid-row: auto !important; }
  /* filas flex de texto (cifras, iconos, pasos): que envuelvan */
  .fx div.flex:not([class~="flex-col"]) { flex-wrap: wrap; }
  /* salvo las de icono/punto + texto: el icono se queda a la izquierda y el texto envuelve a su lado */
  .fx div.flex:not([class~="flex-col"]):has(> [class*="size-["]) { flex-wrap: nowrap; }
  /* solo filas de 3+ columnas: en las de dos (punto + texto, icono + texto) el texto
     sigue al lado y crece con flex-grow */
  .fx div.flex:not([class~="flex-col"]):has(> :nth-child(3)) > [class*="flex-[1_0_0]"] { flex-basis: 100%; }
  /* y las de dos columnas iguales (texto + formulario, texto + tarjeta): apiladas */
  .fx div.flex:not([class~="flex-col"]):not(:has(> :not([class*="flex-[1_0_0]"]))) > [class*="flex-[1_0_0]"] { flex-basis: 100%; }
}

/* ---- ≤ 640: móvil -------------------------------------------------------- */
@media (max-width: 640px) {
  .fx { --size-96: 48px; --size-64: 32px; --size-48: 24px; --size-32: 20px;
        --font\/texts\/h2\/desktop: 28px; --font\/texts\/h1\/desktop: 34px;
        --font\/texts\/body-lg\/desktop: 18px; --font\/texts\/body-lg\/lineheight: 24px; }
  .fx [class~="max-w-[1248px]"] { padding-inline: 16px; }
  .fx [class~="grid-cols-[repeat(4,minmax(0,1fr))]"],
  .fx [class~="grid-cols-[repeat(5,minmax(0,1fr))]"],
  .fx [class~="grid-cols-[repeat(3,minmax(0,1fr))]"],
  .fx [class~="grid-cols-[repeat(2,minmax(0,1fr))]"],
  .fx[class~="grid-cols-[repeat(2,minmax(0,1fr))]"] { grid-template-columns: minmax(0, 1fr); }
  .fx[class~="grid-cols-[repeat(2,minmax(0,1fr))]"] > * { grid-column: auto !important; grid-row: auto !important; }
  /* tarjetas con alto fijo (h-[375px], cuerpos h-[147px]): el texto crece al estrecharse */
  .fx [class*="grid-cols-"] > div[class*="h-["], .fx [class*="grid-cols-"] > a[style*="contents"] > div[class*="h-["] { height: auto; }
  .fx [class*="grid-cols-"] div[class*="h-["]:has(> p) { height: auto; }
  /* titulares en una linea (whitespace-nowrap) que no caben */
  .fx p[class~="whitespace-nowrap"] { white-space: normal; }
  /* las tarjetas del zig-zag, sin el escalón */
  .fx [class*="grid-cols-"] > [class*="pt-[var(--size-32"], .fx [class*="grid-cols-"] > a[style*="contents"] > [class*="pt-[var(--size-32"] { padding-top: 0; }
  /* filas de cifras/iconos: apiladas */
  .fx .flex[class*="gap-[var(--size-24"]:not(.flex-col) { flex-wrap: wrap; }
  /* titulares: que no desborden */
  .fx p, .fx h1, .fx h2, .fx h3 { overflow-wrap: anywhere; }
  /* botones a todo el ancho */
  .fx [class~="min-w-[240px]"] { min-width: 0; width: 100%; }
  .fx a[style*="display:contents"] > [class~="min-w-[240px]"] { width: 100%; }
}

/* Cabecera y megamenús (fx-menu): los paneles cuelgan bajo la barra, por
   encima del contenido, y cerrados hasta que su botón los abre. Regla dura:
   `hidden` solo no basta, las clases de Tailwind (display:flex) le ganan. */
/* height:auto: el frame del Figma lleva size-full y, colgado de .cabecera, medía
   lo que la cabecera (132px) y recortaba las columnas (overflow-clip). */
.fx-mm { position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important; z-index: 50; background: #fff; box-shadow: 0 16px 32px rgba(11, 28, 40, .12); height: auto !important; }
/* (!important: el frame del Figma lleva la clase relative y la hoja de cada
   pagina, que carga despues, la volvia a poner en flujo y empujaba el hero) */
/* Items de la barra: subrayado azul al pasar, abierto o en la linea actual (Figma) */
.fx-mm-btn { position: relative; cursor: pointer; }
.fx-mm-btn::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: #3797ca; opacity: 0; transition: opacity .2s; }
.fx-mm-btn:hover::after, .fx-mm-btn[aria-expanded="true"]::after, .fx-mm-btn.fx-activo::after { opacity: 1; }
.fx-mm[hidden] { display: none !important; }

/* Cabecera y megamenús (fx-menu) */
@media (max-width: 1024px) {
  .fx-menu [class~="min-w-[96px]"] { min-width: 0; }
  .fx-mm { position: static; }
}
@media (max-width: 640px) {
  .fx-menu .fx-mm-btn { font-size: 14px; padding-inline: 8px; }
}
/* Megamenús en móvil: las columnas del Figma (2fr 1fr 1fr 1fr) se montaban unas
   sobre otras; en una sola columna, con márgenes de móvil y el panel con su
   propio scroll para que se vea hasta la franja de abajo (captura de Kuma). */
@media (max-width: 768px) {
  /* justify-content: el panel de Oposiciones va centrado en vertical (justify-center) y,
     al no caber, su primera columna (Por categoría) quedaba por encima del scroll */
  .fx-mm { max-height: 75dvh; overflow-y: auto !important; overscroll-behavior: contain; justify-content: flex-start !important; }
  .fx-mm [class~="px-[var(--size-64,64px)]"] { padding-inline: 20px; }
  .fx-mm [class*="grid-cols-"] { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; row-gap: 24px; }
  .fx-mm [class*="grid-cols-"] > * { grid-column: auto !important; grid-row: auto !important; }
  .fx-mm [class~="w-[501.6px]"] { width: 100%; height: auto; }
  .fx-mm [class~="whitespace-nowrap"] { white-space: normal; }
  .fx-mm div.flex:not([class~="flex-col"]):has(> [class*="flex-[1_0_0]"]) { flex-direction: column; align-items: stretch; }
  .fx-mm [class*="flex-[1_0_0]"] { flex: none; min-width: 0; }
  /* la cabecera del panel (Kuma Empleo · Ver todo) se queda arriba al hacer scroll */
  .fx-mm > div:first-child > [data-name="Menu Item"]:first-child { position: sticky; top: 0; z-index: 2; background-color: #fff; }
}
/* Iniciales de la línea en su círculo (FE, K, FS…): siempre en una línea. Con
   el white-space:normal de móvil, «FE» se partía en dos dentro del círculo. */
.fx [class~="rounded-[999px]"][class*="size-["] > p { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; }

/* ===========================================================================
   Añadido 2026-09-07 tras la revisión en móvil de Yaye (capturas a 390/490).
   =========================================================================== */

/* Prosa de las páginas compuestas y legales: el envoltorio del Figma lleva
   text-[0px] / leading-[0] (cada párrafo del diseño trae su tamaño), así que
   el HTML de la web anterior heredaba tamaño 0 y no se veía. */
.fx .fx-prosa { font-size: 16px; line-height: 1.55; color: var(--color\/text\/muted, #494b50); width: 100%; white-space: normal; }
.fx .fx-prosa p, .fx .fx-prosa ul, .fx .fx-prosa ol { margin: 0 0 16px; font-size: 16px; line-height: 1.55; }
.fx .fx-prosa ul, .fx .fx-prosa ol { padding-left: 22px; list-style: disc; }
.fx .fx-prosa ol { list-style: decimal; }
.fx .fx-prosa li { margin-bottom: 6px; }
.fx .fx-prosa h2 { font-size: 25px; line-height: 30px; font-weight: 700; color: var(--color\/text\/primary, #0b1c28); margin: 32px 0 12px; }
.fx .fx-prosa h3 { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--color\/text\/primary, #0b1c28); margin: 24px 0 8px; }
.fx .fx-prosa [id] { scroll-margin-top: 220px; }
/* destino del botón del hero («Encuentra tu formación»): que no quede bajo la cabecera fija */
#listado { scroll-margin-top: 120px; }
.fx .fx-prosa h2:first-child, .fx .fx-prosa h3:first-child, .fx .fx-prosa .fx-rotulo:first-child { margin-top: 0; }
.fx .fx-prosa .fx-rotulo { font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: #3797ca; font-weight: 700; margin: 32px 0 0; }
.fx .fx-prosa .fx-rotulo + h2 { margin-top: 6px; }
.fx .fx-prosa a { color: #3797ca; text-decoration: underline; }
.fx .fx-prosa a.fx-boton { display: inline-flex; padding: 12px 24px; border: 1px solid #3797ca; border-radius: 4px; text-decoration: none; font-weight: 600; color: #0b1c28; }
.fx .fx-prosa em { color: #3797ca; font-style: normal; }
.fx .fx-prosa b, .fx .fx-prosa strong { color: #0b1c28; }
.fx .fx-prosa img { max-width: 100%; height: auto; }

/* El contenido en flujo de cada sección por encima de sus capas absolutas
   (diagonales, velos): al estrecharse se solapaban con el texto y los botones. */
:where(.fx > :not([class~="absolute"])) { z-index: 1; }
/* y las capas absolutas de la propia sección (fondos, velos, diagonales, el logo
   de la línea) siempre debajo del contenido, esté anidado como esté: cada
   sección es su propio contexto de apilamiento y las capas van a z -1 */
/* (las capas grandes van a z -1 en el bloque ANCHURAS, generado) */

/* Nota: en las rejillas, muchas tarjetas van dentro de <a style="display:contents">
   (generar_pagina.py): el hijo de la rejilla es el div de dentro, no el <a>. Por
   eso cada regla de "> *" va duplicada con "> a[style*=contents] > *". */

/* Calculadoras (sueldos, FUNDAE): el Figma las coloca en una capa absoluta con
   anchura fija dentro de una sección de alto fijo; en pantallas estrechas la capa
   entra en flujo y la sección crece con ella. */
@media (max-width: 1100px) {
  .fx[style*="min-height"]:has(> [class~="absolute"] form) { min-height: 0 !important; padding-block: 32px; }
  .fx > [class~="absolute"]:has(form) { position: static !important; width: 100% !important; left: auto !important; top: auto !important; transform: none !important; padding-inline: 16px; }
  .fx > [class~="absolute"]:has(form) [class*="w-["]:not(img) { width: auto; max-width: 100%; }
  .fx > [class~="absolute"]:has(form) input, .fx > [class~="absolute"]:has(form) select { max-width: 100%; box-sizing: border-box; }
}

/* Barra de categorías en pantallas estrechas: UNA fila que se desplaza en
   horizontal, en vez de tres filas apiladas (captura de Yaye). */
@media (max-width: 1024px) {
  .fx-menu > div.flex { justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-inline: 8px; }
  .fx-menu > div.flex::-webkit-scrollbar { display: none; }
  .fx-menu .fx-mm-btn { flex: none; }
  .fx-menu .fx-mm-btn p { white-space: nowrap !important; }
}

@media (max-width: 768px) {
  /* textos en una línea del diseño (títulos de ciudades, CTAs): que envuelvan */
  .fx [class~="whitespace-nowrap"] { white-space: normal; }
  /* y que puedan encoger dentro de su fila (shrink-0 los dejaba a su ancho máximo, centrados y cortados por ambos lados) */
  .fx div.flex:not([class~="flex-col"]) > p[class~="shrink-0"], .fx div.flex:not([class~="flex-col"]) > div[class~="shrink-0"]:not([class*="size-["]):not([class*="w-["]) { flex-shrink: 1; min-width: 0; max-width: 100%; }
  .fx [class~="text-nowrap"] { white-space: normal; }
  /* filas con alto máximo (testimonios): al envolver, sin recorte */
  .fx [class*="max-h-["] { max-height: none; }
  /* ciudades (Home): dos por fila, con su proporción */
  .fx [class~="w-[310px]"][class~="h-[175px]"] { width: calc(50% - 8px); height: auto; aspect-ratio: 310 / 175; }
  /* logos de empresas (Home): centrados, dos por fila, sin desbordar */
  .fx div.flex:has(> [class~="h-[48px]"][class*="w-["]), .fx div.flex:has(> [class~="h-[32px]"][class*="w-["]) { justify-content: center; gap: 24px 32px; padding-inline: 16px; width: 100%; }
  .fx div.flex:has(> [class~="h-[48px]"][class*="w-["]) > *, .fx div.flex:has(> [class~="h-[32px]"][class*="w-["]) > * { max-width: calc(50% - 16px); }
  /* la imagen va absoluta a toda la caja: al estrecharla, que quepa, no que recorte */
  .fx div.flex:has(> [class~="h-[48px]"]) img[class], .fx div.flex:has(> [class~="h-[32px]"]) img[class] { object-fit: contain !important; }
  /* filas de rejilla con alto fijo (grid-rows-[_440px]) y tarjetas con alto fijo: a su contenido */
  .fx [class*="grid-rows-["] { grid-template-rows: none !important; grid-auto-rows: auto; }
  /* cuerpos de tarjeta con flex-[1_0_0] (base 0): con la tarjeta a su alto natural se
     aplastaban y el texto caía sobre la tarjeta siguiente (FP, ciclos) */
  .fx [class*="grid-cols-"] > * > [class~="flex-col"][class*="flex-[1_0_0]"], .fx [class*="grid-cols-"] > a[style*="contents"] > * > [class~="flex-col"][class*="flex-[1_0_0]"] { flex: none; }
  /* parrafos con flex-[1_0_0] dentro de tarjetas (cita del tercer testimonio): a su alto */
  .fx [class*="grid-cols-"] p[class*="flex-[1_0_0]"] { flex: none; }
  /* filas de tarjetas con alto fijo y texto dentro (testimonios de la ficha): a su contenido */
  .fx div.flex:not([class~="flex-col"]) > div[class*="h-["]:has(p) { height: auto; }
  .fx [class*="grid-cols-"] > [class*="h-["], .fx [class*="grid-cols-"] > a[style*="contents"] > [class*="h-["] { height: auto; min-height: 0; }
  /* fila de ciudades: dentro de una columna centrada no tenia anchura y el 50% de nada era nada */
  .fx div.flex:has(> [class~="w-[310px]"]) { width: 100%; }
  /* botones (a > div.flex): en una linea, con la flecha al lado */
  .fx a > div.flex:not([class~="flex-col"]) { flex-wrap: nowrap; }
  .fx a > div.flex > [class*="flex-[1_0_0]"] { flex-basis: auto; flex-grow: 0; }
  .fx-testimonios > div.flex { justify-content: center; }
  /* CTAs con relleno lateral fijo (px-[59px]) */
  .fx [class~="px-[59px]"] { padding-inline: 24px; }
}

@media (max-width: 640px) {
  /* tarjetas de la rejilla: la primera del Home traía su propio w-[294px] y
     con width:auto se estiraba a todo el ancho con la foto gigante */
  .fx [class*="grid-cols-"] > [class~="w-[294px]"], .fx [class*="grid-cols-"] > a[style*="contents"] > [class~="w-[294px]"] { width: min(294px, calc(100vw - 48px)); }
  /* cuerpo flex-[1_0_0] dentro de una tarjeta con alto fijo pasado a auto:
     la base 0 lo aplastaba y el texto se montaba sobre el enlace */
  .fx [class*="grid-cols-"] > div[class*="h-["] [class*="flex-[1_0_0]"], .fx [class*="grid-cols-"] > a[style*="contents"] > div[class*="h-["] [class*="flex-[1_0_0]"] { flex: none; }
  /* el zócalo absoluto (h-[353px]) de esa tarjeta, fuera */
  .fx [class*="grid-cols-"] > div[class*="h-["] > [class~="absolute"], .fx [class*="grid-cols-"] > a[style*="contents"] > div[class*="h-["] > [class~="absolute"] { display: none; }
}

/* ===========================================================================
   Revisión en móvil de toda la web (2026-10-08).
   =========================================================================== */

/* Cursiva del Figma: la familia sale como "Source Sans 3:Italic", que no existe,
   y las opiniones se veían en Times. */
.fx [class*="Source_Sans_3:Italic"] { font-family: "Source Sans 3", sans-serif; font-style: italic; }

/* Desplegables del formulario: flecha del navegador + chevron del Figma = dos flechas */
.fx select.bg-transparent { -webkit-appearance: none; appearance: none; cursor: pointer; }
/* el campo de texto largo ocupaba la mitad de su caja */
.fx div.flex > div:has(> textarea), .fx div.flex > div:has(> select) { flex: 1 1 auto; min-width: 0; }
.fx textarea { width: 100%; resize: vertical; }

@media (max-width: 1100px) {
  /* anchuras fijas del Figma (w-[434px], w-[613px]…) dentro de una caja más
     estrecha que la pantalla: nunca más que su caja (tarjetas de contacto,
     hero de la ficha de curso, CTA de la portada) */
  .fx [class*="w-["]:not(img):not([class~="absolute"]) { max-width: 100%; }
}

@media (max-width: 768px) {
  /* el CTA con relleno px-[59px] es la propia sección (.fx), no un hijo */
  .fx[class~="px-[59px]"] { padding-inline: 24px; }
  /* preguntas frecuentes: la pregunta envuelve y el + se queda dentro */
  .fx summary > p[class~="shrink-0"], .fx summary > div[class~="shrink-0"]:not([class*="size-["]) { flex-shrink: 1; min-width: 0; white-space: normal; }
}

/* El Centro · línea del tiempo (356:951): en escritorio va en zigzag a dos
   columnas con la línea en medio; en móvil cada etapa en una columna, primero
   el texto y luego las fotos, sin la línea. */
@media (max-width: 768px) {
  .fx [data-node-id="356:951"] > [class~="absolute"], .fx [data-node-id="356:951"] > div > [class~="absolute"] { display: none; }
  .fx [data-node-id="356:951"] > div:not([class~="absolute"]) { flex-direction: column; align-items: stretch; gap: 16px; padding-block: 32px; }
  .fx [data-node-id="356:951"] > div > div:not([class*="size-["]) { flex: none; width: 100%; padding-inline: 16px; }
  .fx [data-node-id="356:951"] > div > div:not([class*="size-["]) > div { flex: none; width: 100%; }
  .fx [data-node-id="356:951"] > div > div:has([class~="h-[318px]"]) { order: 2; }
  .fx [data-node-id="356:951"] > div > [class*="size-[48px]"] { align-self: flex-start; margin-left: 16px; }
  .fx [data-node-id="356:951"] [class~="h-[318px]"] { height: auto; aspect-ratio: 552 / 318; overflow: hidden; }
  .fx [data-node-id="356:951"] [class~="h-[318px]"] [class~="w-[552px]"], .fx [data-node-id="356:951"] [class~="h-[318px]"] [class~="w-[552px]"] > .flex-none { width: 100%; height: 100%; }
  .fx [data-node-id="356:951"] [class~="w-[517px]"] { width: 94%; height: 83%; }
}

/* Campos de formulario con la letra de la web (salían en Arial) */
.fx input, .fx textarea, .fx select { font-family: inherit; }

@media (max-width: 768px) {
  /* titulares H1: el interlineado del Figma (58.8px) es para 49px; con la letra
     reducida de móvil dejaba un hueco enorme entre líneas */
  .fx [class*="h1\\/lineheight"] { line-height: 1.15; }
  /* filas de varias columnas con alto fijo (ventajas de la ficha de oposición:
     Simulacros, Tutor IA, Método flexible, WhatsApp): una debajo de otra, no una
     sola visible y el resto fuera de la pantalla */
  .fx div.flex:not([class~="flex-col"])[class*="h-["]:has(> [class*="flex-[1_0_0]"] + [class*="flex-[1_0_0]"]) { flex-direction: column; height: auto; align-items: stretch; }
  .fx div.flex:not([class~="flex-col"])[class*="h-["]:has(> [class*="flex-[1_0_0]"] + [class*="flex-[1_0_0]"]) > * { flex: none; width: 100%; height: auto; }
  /* bloques flex-[1_0_0] (base 0) dentro de una columna: con la tarjeta a su
     alto natural se aplastaban a 1px y el texto caía encima de «Ver más»
     (áreas de InCompany) */
  .fx [class~="flex-col"] > [class*="flex-[1_0_0]"] { flex-basis: auto; }
  /* pasos numerados (01, 02…) de InCompany: título alineado con su texto */
  .fx [class*="grid-cols-"] p[class~="text-center"] + p, .fx div.flex:has(> p[class~="text-center"] + p:not([class~="text-center"])) > p[class~="text-center"] { text-align: left; }
  /* rejillas con columnas a medida del Figma (2fr 1fr 1fr 1fr…): en una columna.
     «Haz que tu perfil tenga más valor» (Formación para el empleo) quedaba en
     cuatro columnas de 60px con una letra por línea */
  .fx [class*="grid-cols-[_"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* tarjetas de icono + texto en las rejillas (FP: Sueldos al alza, La técnica
     tiene valor…): el texto ocupa la tarjeta en vez de quedarse en una columna
     estrecha centrada */
  .fx [class*="grid-cols-"] > div.flex:not([class~="flex-col"]):has(> [class*="size-["]), .fx [class*="grid-cols-"] > a[style*="contents"] > div.flex:not([class~="flex-col"]):has(> [class*="size-["]) { justify-content: flex-start; }
  .fx [class*="grid-cols-"] > div.flex:not([class~="flex-col"]):has(> [class*="size-["]) > :not([class*="size-["]), .fx [class*="grid-cols-"] > a[style*="contents"] > div.flex:not([class~="flex-col"]):has(> [class*="size-["]) > :not([class*="size-["]) { flex: 1 1 auto; min-width: 0; }
  /* listas con punto (div vacío de 8px) + texto: el punto quedaba solo en una
     línea y el texto debajo, a veces cortado por la derecha (Sueldos) */
  .fx div.flex:not([class~="flex-col"]):has(> div[class*="w-["][class*="h-["]:first-child:empty) { flex-wrap: nowrap; }
  .fx div.flex:not([class~="flex-col"]):has(> div[class*="w-["][class*="h-["]:first-child:empty) > :not(:first-child) { flex: 1 1 0; min-width: 0; white-space: normal; }
  /* preguntas frecuentes centradas (ficha de oposición): a la izquierda, con el + al final */
  .fx summary { justify-content: space-between; }
  .fx summary p { text-align: left; }
  /* botones a todo el ancho: nunca pegados al borde de la pantalla */
  .fx a > [class~="min-w-[240px]"] { max-width: calc(100vw - 32px); margin-inline: auto; }
  /* Oposiciones · lista de administraciones con dibujo: alineadas a la izquierda y a todo el ancho */
  .fx [data-node-id="180:1354"] a > div { justify-content: flex-start; }
  .fx [data-node-id="180:1354"] a > div > div:first-child { flex: 1 1 auto; min-width: 0; }
  .fx [data-node-id="180:1354"] a > div > div:first-child p { flex: 1 1 auto; white-space: normal; }
  .fx [data-node-id="180:1354"] a > div > div:not(:first-child) { flex: none; }
}

@media (max-width: 640px) {
  /* titular grande de una sola frase («El Método Kuma te acompaña…», 61px) */
  .fx [class*="texts\\/display\\/desktop"] { font-size: 40px; line-height: 1.1; }
  /* tarjetas de 294px en las rejillas: centradas, no pegadas a la izquierda */
  .fx [class*="grid-cols-"] > [class~="w-[294px]"], .fx [class*="grid-cols-"] > a[style*="contents"] > [class~="w-[294px]"], .fx [class*="grid-cols-"] > .fx-lista-tarjeta { justify-self: center; }
}

@media (max-width: 640px) {
  /* hojas de texto (legales y páginas de las escuelas): 48px de margen por
     lado dejaban la columna de texto en 230px */
  .fx [data-node-id="326:1497"] { padding: 28px 20px; }
  /* héroes claros con foto (Empleo, FP, Superior): en móvil la foto queda
     justo debajo del texto oscuro y se leía mal; la foto, más suave */
  .fx-empleo-0 [class~="absolute"][class~="inset-0"][class~="pointer-events-none"] img,
  .fx-fp-0 [class~="absolute"][class~="inset-0"][class~="pointer-events-none"] img,
  .fx-superior-0 [class~="absolute"][class~="inset-0"][class~="pointer-events-none"] img { opacity: .3; }
}

@media (max-width: 640px) {
  /* Política de cookies (Complianz): el nombre de cada servicio quedaba en una
     columna de 60px y se partía letra a letra («WooCo/mmerc/e») */
  .cmplz-service-header > div { grid-template-columns: minmax(0, 1fr) auto auto auto 25px !important; column-gap: 8px; }
  .cmplz-service-header h3 { overflow-wrap: normal; word-break: normal; }
}

@media (max-width: 768px) {
  /* botones sueltos a todo el ancho de la sección: con margen, no pegados al borde */
  .fx > a > div.flex:not([class~="flex-col"])[class~="border"] { width: calc(100% - 32px); margin-inline: auto; }
  /* preguntas frecuentes hechas con div (InCompany, Superior): la pregunta a la
     izquierda y el + al final de la fila */
  .fx a > div.flex:not([class~="flex-col"]):has(> [class*="size-["]) > p[class~="text-center"][class~="text-[13px]"] { text-align: left; flex: 1 1 auto; white-space: normal; }
}

/* ===========================================================================
   Revisión en móvil, segunda pasada (2026-10-08): texto pegado o cortado en
   el borde (captura de Kuma en la ficha de oposición).
   =========================================================================== */
@media (max-width: 640px) {
  /* tamaños de móvil: la hoja de cada página (fx-oposicion.css, fx-contacto.css…)
     carga después y volvía a poner en .fx los del escritorio (titulares a 39px,
     96px de aire); html .fx gana a .fx sin depender del orden */
  html .fx { --size-96: 48px; --size-64: 32px; --size-48: 24px; --size-32: 20px;
             --font\/texts\/h2\/desktop: 28px; --font\/texts\/h1\/desktop: 34px;
             --font\/texts\/body-lg\/desktop: 18px; --font\/texts\/body-lg\/lineheight: 24px; }
  /* ficha de oposición: «Así es el examen» y «Nuestra tasa de éxito» no tienen
     relleno lateral y el titular quedaba en x=0 */
  .fx.fx-oposicion-2, .fx.fx-oposicion-4 { padding-inline: 16px; }
  /* icono + texto dentro de tarjetas (dirección de El centro / Quiénes somos):
     el flex:none de las tarjetas dejaba el texto en una línea y salía de la pantalla */
  .fx [class*="grid-cols-"] div.flex:not([class~="flex-col"]) > p[class*="flex-[1_0_0]"] { flex: 1 1 0; min-width: 0; }
  /* Contacto: el texto de cada vía (w-[434px]) junto a su icono se salía de la tarjeta */
  .fx div.flex:not([class~="flex-col"]):has(> p[class~="w-[434px]"]) { max-width: 100%; }
  .fx div.flex:not([class~="flex-col"]) > p[class~="w-[434px]"] { width: auto; flex: 1 1 0; min-width: 0; }
}

/* Blog: la fila incompleta va centrada, no pegada a la izquierda; y si en tres columnas
   sobraría una tarjeta sola, las cuatro últimas van en dos filas de dos (un margen de 1px
   en la primera basta para que la tercera baje de fila). */
body:is(.blog, .category, .tag, .author, .date) .fx-lista .fx-lista-rejilla { display: flex; flex-wrap: wrap; justify-content: center; max-width: 930px; /* 3 × 294 + 2 × 24: tres tarjetas llenan la fila justas */ }
body:is(.blog, .category, .tag, .author, .date) .fx-lista .fx-lista-tarjeta { flex: 0 1 calc((100% - 48px) / 3); min-width: 270px; }
@media (min-width: 900px) {
  body:is(.blog, .category, .tag, .author, .date) .fx-lista .fx-lista-rejilla > a:nth-child(3n+1):nth-last-child(4) > .fx-lista-tarjeta { margin-inline: 2px; }
}
@media (max-width: 640px) {
  body:is(.blog, .category, .tag, .author, .date) .fx-lista .fx-lista-tarjeta { flex-basis: 100%; min-width: 0; }
}