/* ================================================================ 1. COLORES, MEDIDAS Y AJUSTES GENERALES Cambiá estos valores para modificar el fondo, los colores globales, los bordes redondeados y el ancho máximo del contenido. ================================================================ */ :root { --container: 1280px; /* Montserrat 800. La familia ya se descarga con ese peso incluido (ver el de Google Fonts), así que no cuesta un byte extra. Antes acá decía "Sifonn Pro", que no está en el proyecto ni en Google Fonts: los títulos caían a Montserrat normal y la jerarquía título/cuerpo no existía. */ --font-title: Montserrat, sans-serif; --peso-title: 800; --font-detail: Montserrat, sans-serif; --font-text: Montserrat, sans-serif; /* Progreso de scroll del header (0 = arriba del todo, 1 = header ya achicado). Lo actualiza app.js en cada cuadro mientras se hace scroll. */ --scroll-progress: 0; /* Mismo progreso para el desenfoque, escalonado para cuidar el scroll móvil. */ --blur-progress: 0; --blur-max: 34px; /* ---- Escalas ---------------------------------------------------------- Todo el CSS sale de acá. Antes había 27 tamaños de fuente, 46 paddings y 11 radios distintos: valores que no eran decisiones sino acumulación. Si algo necesita un valor intermedio, casi siempre conviene elegir el paso de al lado antes que inventar uno nuevo. */ --space-1: .25rem; --space-2: .375rem; --space-3: .5rem; --space-4: .75rem; --space-5: 1rem; --space-6: 1.25rem; --space-7: 1.5rem; --space-8: 2rem; --space-9: 2.5rem; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --radius-round: 50%; /* Escalera de elevación. Referencian var(--shadow), que cambia por tema: las custom properties se resuelven al usarse, así que siguen al tema. */ --elev-1: 0 1px 2px var(--shadow); --elev-2: 0 6px 18px var(--shadow); --elev-3: 0 12px 30px var(--shadow); --elev-4: 0 22px 60px var(--shadow); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; --font-scale: 1; --fs-2xs: calc(.75rem * var(--font-scale, 1)); --fs-xs: calc(.8125rem * var(--font-scale, 1)); --fs-sm: calc(.875rem * var(--font-scale, 1)); --fs-base: calc(.9375rem * var(--font-scale, 1)); --fs-md: calc(1rem * var(--font-scale, 1)); --fs-lg: calc(1.125rem * var(--font-scale, 1)); --fs-xl: calc(1.375rem * var(--font-scale, 1)); --fs-2xl: calc(1.75rem * var(--font-scale, 1)); /* ---- Paleta orgánica (Fase A del rediseño neumórfico) ------------------- El tema lo fija un script inline en el . Si ese script no llega a correr (JS desactivado, error, CSP), sin estos valores acá var(--bg) y var(--text) quedaban inválidos y la página entera perdía color. Esta es la paleta clara, que oficia de red de contención. Familia cromática: EdTech de tres colores. Índigo para lo formal e institucional, naranja para plataformas y categorías, verde jade para la acción (CTAs, chat, foco de inputs). Los NOMBRES de las variables funcionales (--orange, --blue, --purple…) se mantienen a propósito aunque el matiz haya cambiado de familia: los usan ~40 reglas y el rol de cada una (naranja = plataformas, --blue = formal, violeta = alternativas…) sigue siendo el mismo. Renombrarlas sería una segunda refactorización sin ganancia. Lo que sí cambió es el color que hay detrás del nombre. */ --bg: #F7F5FF; --surface: #FFFFFF; --surface-soft: #EEECFB; --line: rgba(27, 24, 48, .14); --text: #1B1830; --muted: #5C5680; --orange: #F97316; /* naranja: plataformas / categorías */ --green: #16A34A; /* verde */ --blue: #4F46E5; /* índigo: formal / institucional */ --purple: #9333EA; /* violeta */ --teal: #0D9488; /* verde azulado */ --accent: #059669; /* verde jade: acción (CTAs, chat) */ /* Corazón de "Me interesa" marcado: es la única señal roja del sitio, a propósito, porque un corazón guardado se lee rojo en todos lados. */ --fav-rojo: #E11D48; --shadow: rgba(40, 34, 90, .14); /* Tinta de los badges. El color puro sobre su propio tinte al 16% daba ~2.5:1 (ilegible al sol); estos son el mismo matiz con la luminancia corregida para pasar 4.5:1. El fondo sigue siendo el color puro tinteado. */ --orange-ink: #B23A0B; --green-ink: #0F6B33; --blue-ink: #4F46E5; --purple-ink: #8D31E1; --teal-ink: #0A766D; --accent-ink: #047854; /* Texto sobre relleno saturado claro. */ --on-accent: #1B1830; /* El relleno violeta usa el índigo, que es oscuro: lleva texto claro. */ --purple-fill: #4F46E5; --on-purple: #FFFFFF; /* Borde de controles de formulario: --line queda en ~1.3:1 y la norma pide 3:1. */ --line-strong: rgba(27, 24, 48, .48); /* WCAG 2.1 - 1.4.11 Contraste de elementos no textuales: frontera de los campos de formulario (>=3:1 contra el fondo donde se apoyan). Token aparte de --line-strong porque ese se usa además en adornos (subrayados, separadores) que no tienen requisito de contraste. */ --control-line: rgba(27, 24, 48, .52); /* WCAG 2.1 - 1.4.3 Contraste mínimo: tinta oscura para rellenos vivos (verde, naranja, teal). Con blanco encima daban 2.8-3.8:1. */ --on-vivid: #14121F; /* Acción sólida (chip activo, botones primarios, skip link, contadores): par relleno/tinta con >=4.5:1 en cada tema. --accent a secas daba 4.47:1 en claro y 2.98:1 en oscuro. */ --accion-fill: #4F46E5; --accion-ink: #FFFFFF; /* Texto sobre --muted (badge de compatibilidad baja). */ --on-muted: #FFFFFF; } html[data-theme="dark"] { --bg: #09101c; --surface: #121c2f; --surface-soft: #1e293b; --line: rgba(255, 255, 255, 0.08); --text: #f1f5f9; --muted: #94a3b8; --accent: #818cf8; --accent-ink: #818cf8; --fav-rojo: #FB7185; --on-accent: #09101c; --shadow: rgba(0, 0, 0, 0.4); --purple: #a855f7; --orange: #fb923c; --green: #4ade80; --blue: #818cf8; --teal: #2dd4bf; --orange-ink: #fdba74; --green-ink: #86efac; --blue-ink: #93c5fd; --purple-ink: #e9d5ff; --teal-ink: #5eead4; --badge-orange: color-mix(in srgb, #fb923c 24%, transparent); --badge-green: color-mix(in srgb, #22c55e 24%, transparent); --badge-blue: color-mix(in srgb, #3b82f6 24%, transparent); --badge-purple: color-mix(in srgb, #a855f7 24%, transparent); --badge-teal: color-mix(in srgb, #14b8a6 24%, transparent); --purple-fill: #d8b4fe; --on-purple: #09101c; --line-strong: rgba(255, 255, 255, 0.2); --control-line: rgba(255, 255, 255, .36); --accion-fill: #818cf8; --accion-ink: #09101c; --on-vivid: #14121F; --on-muted: #09101c; } html[data-theme="light"] { --bg: #fdfaf5; --surface: #ffffff; --surface-soft: #f3f0ea; --line: rgba(0, 0, 0, 0.08); --text: #1f1d1a; --muted: #6b6863; --accent: #6366f1; --accent-ink: #4338ca; --on-accent: #ffffff; --shadow: rgba(0, 0, 0, 0.04); --orange-ink: #b23a0b; --green-ink: #0f6b33; --blue-ink: #1d4ed8; --purple-ink: #6d28d9; --teal-ink: #0f766e; --badge-orange: #ffedd5; --badge-green: #dcfce7; --badge-blue: #dbeafe; --badge-purple: #f3e8ff; --badge-teal: #ccfbf1; --purple-fill: #5b21b6; --on-purple: #ffffff; --line-strong: rgba(0, 0, 0, 0.15); --control-line: rgba(27, 24, 48, .52); --accion-fill: #4F46E5; --accion-ink: #ffffff; --on-vivid: #14121F; --on-muted: #ffffff; } /* 2. BASE DE LA PÁGINA: tipografía, fondo y comportamiento global. */ * { box-sizing: border-box; } /* El canal de la barra de scroll se reserva siempre. Así, cuando la bienvenida bloquea el scroll (abajo), esconder la barra no corre el contenido ~15px y vuelve a correrlo al soltarlo. */ html { scrollbar-gutter: stable; } /* Mientras la bienvenida cubre la pantalla no hay nada que scrollear: es un overlay fijo. Sin esto la rueda seguía moviendo el catálogo por detrás y, al tocar "Ver carreras", el usuario aterrizaba a mitad de la grilla con el header todavía expandido, como si el sitio hubiera saltado solo. */ html.bienvenida-abierta, html.bienvenida-abierta body { overflow: hidden; } body { margin: 0; min-width: 320px; /* Reserva el alto del header expandido (lo mide app.js). El valor de reserva es solo por si el JS no llega a correr. */ padding-top: var(--hero-alto, 130px); background: var(--bg); color: var(--text); font-family: var(--font-text); line-height: 1.5; transition: background-color var(--dur-slow) ease, color var(--dur-slow) ease; } button, input, select { font: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Con el header fijo y 35 filtros antes de los resultados en el orden del DOM, sin esto no había forma de saltearlos con el teclado. Solo se ve al enfocarlo. */ .skip-link { position: absolute; left: .5rem; top: -100px; z-index: 100; padding: .7rem 1rem; border-radius: var(--radius-sm); color: var(--accion-ink); background: var(--accion-fill); font-weight: 700; text-decoration: none; } .skip-link:focus { top: .5rem; } /* #7 Accesibilidad de foco: anillo visible y de alto contraste para todo elemento navegable por teclado. Usa la variable de acento del tema, así respeta claro/oscuro. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ================================================================ 2b. SUPERFICIES (plano) El sitio no usa relieve. Una pieza se distingue del fondo por su color de superficie (--surface contra --bg) y por el borde de 1px de --line, no por sombras. Los estados (hover, activo, elegido) se dicen con fondo y con color de tinta, nunca con volumen ni con la pieza levantándose. La única sombra que queda en el sitio es la escalera --elev-*, y va solo en lo que de verdad flota por encima de la página: la ventana del chat y su burbuja. Ahí la sombra no es decoración — es lo que separa la capa flotante del contenido que quedó abajo. Acá había un par de clases utilitarias, .neu-raised y .neu-pressed, que aplicaban el relieve. No las usaba ningún elemento del HTML, así que se fueron junto con el efecto. ================================================================ */ /* ================================================================ 3. ENCABEZADO / PORTADA Incluye el degradado superior, el título principal y el texto. ================================================================ */ .hero { /* Fijo arriba siempre. Una sola fila: logo a la izquierda, buscador al medio y el toggle de tema a la derecha. Al hacer scroll la fila no se reordena, solo se achica un poco (--scroll-progress, lo actualiza js/main.js) y el fondo pasa a vidrio esmerilado (blur) con borde inferior. */ /* Fijo (no sticky): al achicarse, su alto ya no empuja al contenido, así que no se reflota la página entera en cada cuadro. El espacio que ocuparía expandido lo reserva el padding-top del body (--hero-alto, lo mide main.js). */ position: fixed; top: 0; left: 0; right: 0; z-index: 40; contain: layout; /* Header bajo a propósito: al abrir la página tiene que verse el catálogo. Con la fila única (logo + buscador + toggle) alcanza con ~123px. */ --hero-pad-top: 1.75rem; --hero-pad-bottom: 1.75rem; --hero-pad-compacto: 1rem; /* Ancho del logo y del buscador: se achican con el scroll. Se anima el ANCHO (no un transform) para que el alto del header baje de verdad: el alto de la imagen sigue al ancho por su proporción. */ --logo-w-expandido: 250px; --logo-w-compacto: 190px; --logo-w: min(100%, calc(var(--logo-w-expandido) - var(--scroll-progress) * (var(--logo-w-expandido) - var(--logo-w-compacto)))); --bar-gap: 1.5rem; --search-w-expandido: 640px; --search-w-compacto: 480px; --search-w: calc(var(--search-w-expandido) - var(--scroll-progress) * (var(--search-w-expandido) - var(--search-w-compacto))); /* El padding incorpora env(safe-area-inset-top) para no chocar con el notch/status bar en iOS */ padding: calc(var(--hero-pad-top) + env(safe-area-inset-top, 0px) - var(--scroll-progress) * (var(--hero-pad-top) - var(--hero-pad-compacto))) 1.5rem calc(var(--hero-pad-bottom) - var(--scroll-progress) * (var(--hero-pad-bottom) - var(--hero-pad-compacto))); text-align: center; /* El fondo se vuelve TRANSLÚCIDO al achicarse: si quedara opaco, el backdrop-filter no tendría nada para desenfocar y no se vería el efecto. */ background: linear-gradient(180deg, color-mix(in srgb, var(--surface) calc((1 - var(--scroll-progress)) * 100%), transparent), color-mix(in srgb, var(--bg) calc((1 - var(--scroll-progress)) * 100%), transparent)), color-mix(in srgb, var(--surface) calc(var(--scroll-progress) * 55%), transparent); /* Blur + saturate emula el "vidrio esmerilado" de iOS en vez de un blur plano. Va sobre --blur-progress, que sigue al scroll sin escalones. */ backdrop-filter: blur(calc(var(--blur-progress) * var(--blur-max))) saturate(calc(1 + var(--blur-progress) * .8)); -webkit-backdrop-filter: blur(calc(var(--blur-progress) * var(--blur-max))) saturate(calc(1 + var(--blur-progress) * .8)); border-bottom: 1px solid color-mix(in srgb, var(--line) calc(var(--scroll-progress) * 100%), transparent); } /* La fila del header: tres columnas con las laterales iguales (1fr) para que el buscador quede centrado de verdad y no corrido por el ancho del logo, como pasaría con flex. El max-width de las laterales en 0 deja que se achiquen sin desbordar: el logo se reduce con su max-width:100% antes que pisar el buscador. */ .hero-content { width: min(100%, var(--container)); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--search-w)) minmax(0, 1fr); align-items: center; gap: var(--bar-gap); } .brand-link { position: relative; display: block; border: 0; background: transparent; outline-offset: 7px; text-decoration: none; justify-self: start; width: var(--logo-w); max-width: 100%; } .brand-link:focus-visible { outline: 2px solid var(--accent); } /* El width/height del HTML reserva la proporción antes de que cargue la imagen (evita que la página salte); acá se lo deja fluido dentro del botón. */ .brand-logo { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--radius-sm); } /* Botón para alternar modo claro / oscuro: tercera columna de la fila, siempre centrado verticalmente (antes era absoluto y perseguía el borde del header). */ .btn-theme-toggle { justify-self: end; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 1; width: 40px; height: 40px; border-radius: var(--radius-round); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--elev-1); transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); } @media (max-width: 600px) { .btn-theme-toggle { width: 38px; height: 38px; } } .btn-theme-toggle:hover { background: var(--surface-soft); border-color: var(--line-strong); transform: scale(1.06); } .btn-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-theme-toggle svg { width: 20px; height: 20px; display: block; flex-shrink: 0; margin: auto; } html[data-theme="dark"] .theme-icon-sun { display: block; color: #facc15; } html[data-theme="dark"] .theme-icon-moon { display: none; } html[data-theme="light"] .theme-icon-sun { display: none; } html[data-theme="light"] .theme-icon-moon { display: block; color: #6366f1; } /* (Se fueron .hero-bajada y .theme-hint: la bajada ahora vive solo en la portada de bienvenida y .theme-hint no la usaba ningún elemento.) */ /* Montserrat 800 en tamaños de título: el tracking negativo evita que se vea suelta y apelmazada, que es lo que pasa con las geométricas pesadas. */ h1, h2, .section-tab-texto strong { font-family: var(--font-title); font-weight: var(--peso-title); letter-spacing: -.015em; } .card-title, .curso-title, .platform-name { font-family: var(--font-title); font-weight: 700; letter-spacing: -.01em; } /* 4. BUSCADOR Y BOTONES DEL ENCABEZADO. */ .search-container { /* Ocupa la columna del medio del header (su ancho lo capa la grilla con --search-w). Fila: el buscador se estira y el botón de filtros (solo en celular) va al lado. */ width: 100%; display: flex; align-items: center; gap: .5rem; /* Ancla la lupa (ver ::before). */ position: relative; } /* Lupa SIN tocar el HTML: un no admite pseudo-elementos, así que el ícono lo pone el contenedor y el input le hace lugar con el padding izquierdo. Va como MÁSCARA y no como background-image porque el color de un SVG embebido en un data-URI queda incrustado ahí adentro: con mask el color sale de una variable del tema y sigue a claro/oscuro y al foco sin duplicar el ícono. */ .search-container::before { content: ''; position: absolute; left: 1.05rem; top: 50%; z-index: 1; width: 18px; height: 18px; margin-top: -9px; background: var(--muted); --icono-lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E"); -webkit-mask: var(--icono-lupa) center / contain no-repeat; mask: var(--icono-lupa) center / contain no-repeat; /* Si no, el click sobre la lupa no enfoca el input que hay debajo. */ pointer-events: none; transition: background var(--dur-base) ease; } .search-container:has(.search-input:focus)::before { background: var(--accent); } /* El buscador es el caso de manual del hundido: parece un pozo tallado en la superficie, que es exactamente lo que es un campo donde se escribe. */ .search-input { flex: 1; min-width: 0; /* El padding izquierdo le deja lugar a la lupa. El text-align explícito evita que herede el center del header y centre el placeholder. */ width: 100%; padding: .9rem 1.2rem .9rem 2.9rem; color: var(--text); background: var(--surface); text-align: left; /* WCAG 2.1 - 1.4.11: la frontera del campo es lo que lo identifica. */ border: 1px solid var(--control-line); /* Se redondea hasta quedar en forma de píldora al achicarse. */ border-radius: calc(12px + var(--scroll-progress) * 987px); /* Sin sombra: ni la proyectada que crecía con el scroll ni el hundido que la reemplazó. El campo se lee por su borde de --line-strong, que es además lo que cumple el 3:1 que pide la norma para controles. */ box-shadow: none; transition: box-shadow var(--dur-base) ease, border-color var(--dur-base) ease; } /* En foco, borde de acento más un halo. El halo es un anillo plano, no una sombra de profundidad: no desplaza ni difumina, solo rodea. El anillo de teclado lo sigue poniendo :focus-visible. */ .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } /* ---- Dropdown de autocompletado en vivo ---- */ .search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: min(380px, 60vh); overflow-y: auto; background: var(--surface); /* WCAG 2.1 - 1.4.11: frontera del panel de sugerencias. */ border: 1px solid var(--control-line); border-radius: var(--radius-md); box-shadow: var(--elev-3); z-index: 60; padding: var(--space-2) 0; -webkit-overflow-scrolling: touch; } .search-dropdown[hidden] { display: none !important; } .search-dropdown-group-title { padding: var(--space-2) var(--space-4); font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-soft); margin: 0; } .search-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 44px; color: var(--text); text-decoration: none; cursor: pointer; font-size: var(--fs-sm); line-height: 1.3; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; } .search-dropdown-item:hover, .search-dropdown-item.is-selected { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-ink); } .search-dropdown-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .search-dropdown-item-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-dropdown-item-sub { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* (Se quitó .search-dropdown-ficha-link: el enlace "Ficha ↗" dentro de las sugerencias no era válido para un role="option" —interacción anidada— y la ficha se alcanza desde la tarjeta del resultado.) */ .mobile-filter-button { min-height: 42px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .62rem .85rem; color: var(--text); background: var(--surface-soft); font-family: var(--font-detail); font-size: var(--fs-base); letter-spacing: .035em; } .mobile-filter-button:hover { border-color: var(--accent); color: var(--accent-ink); } /* Solo aparece en celular (ver breakpoints). No se encoge: es el único acceso a los filtros y tiene que sobrevivir a que el buscador se angoste. */ .mobile-filter-button { display: none; flex-shrink: 0; align-items: center; gap: .35rem; white-space: nowrap; } /* El texto se oculta por opacidad (no display): ocultarlo durante el scroll reflotaba el layout del botón en el mismo frame y contribuía a que el header se viera bugueado al bajar rápido. Al desvanecer, el botón conserva su ancho. */ .mobile-filter-texto { display: inline; transition: opacity var(--dur-base) ease; } /* ================================================================ 5. ESTRUCTURA DEL CATÁLOGO En computadora: columna izquierda con los filtros y los resultados a la derecha. El Copiloto ya no vive en esta columna: es una burbuja flotante (ver §10). ================================================================ */ .catalog-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "tabs tabs" "sidebar results"; gap: 2.25rem; width: min(100% - 3rem, var(--container)); margin: 0 auto; padding: 1.5rem 0 5rem; } /* Sin position:sticky a propósito: la columna de filtros es más alta que la ventana, y un sticky sobre un bloque más alto que el viewport deja su parte de abajo —los filtros— fuera de alcance para siempre. */ .catalog-side { grid-area: sidebar; display: flex; flex-direction: column; gap: var(--space-7); min-width: 0; align-self: start; } /* En las secciones que no usan filtros (plataformas, formaciones, oficios, secundario) la columna izquierda quedaría vacía: se colapsa para que los resultados usen todo el ancho. */ .catalog-side:has(#filtersSidebar[hidden]) { display: none; } .catalog-layout:has(#filtersSidebar[hidden]) { grid-template-columns: 1fr; grid-template-areas: "tabs" "results"; } .results-area { grid-area: results; min-width: 0; } /* El header queda fijo arriba (~117px ya compactado), así que cualquier salto a la grilla —el skip link y el "Ver mis resultados" del copiloto— tiene que frenar antes o las primeras tarjetas quedan tapadas. */ #cardContainer { scroll-margin-top: 110px; } /* ================================================================ 6. PANEL DE FILTROS Estilos de los filtros laterales y de sus opciones. ================================================================ */ /* El panel es plano, como todo lo demás: fondo de --surface y borde de --line. */ .filters-sidebar { align-self: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .filters-heading { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .8rem; border-bottom: 1px solid var(--line); } .filters-heading h2 { margin: 0; font-size: var(--fs-md); } .close-filters-button { display: none; padding: 0; color: var(--muted); background: none; border: 0; font-size: var(--fs-xl); line-height: 1; } .filter-group { padding: 1rem; border-bottom: 1px solid var(--line); } .filter-group h3 { margin: 0 0 .55rem; color: var(--text); font-family: var(--font-detail); font-size: var(--fs-md); font-weight: 400; letter-spacing: .045em; } .filter-options { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; } .filter-options-inline { gap: .12rem; } /* El padding horizontal va en TODAS las opciones, no solo en la activa: si se lo pusiera únicamente a la elegida, la lista entera se correría cada vez que cambiás de filtro. */ .filter-option { width: 100%; min-height: 30px; padding: .28rem .5rem; border: 0; border-radius: var(--radius-sm); color: var(--muted); background: transparent; text-align: left; font-size: var(--fs-sm); /* Los nombres largos (sectores, sobre todo) envuelven en dos líneas. El line-height y el display van explícitos porque algunos navegadores no heredan el line-height del body a través de `button { font: inherit }`, y las líneas terminaban pisándose. */ display: block; height: auto; line-height: 1.35; overflow-wrap: anywhere; transition: color var(--dur-base) ease, background-color var(--dur-base) ease; } .filter-option:hover { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 9%, transparent); } /* El elegido se tiñe. El fondo y la tinta de acento sostienen solos el estado; antes los acompañaba un hundido suave que se fue con el resto del relieve. */ .filter-option.active { color: var(--accent-ink); font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); } /* La marca usa --accent-ink y no --accent a propósito: --accent puro sobre este fondo teñido da 2.5:1 en modo claro. --accent-ink es el MISMO verde con la luminancia corregida, así que la marca ya es verde (antes era celeste) y además se ve. */ /* WCAG 2.1 - 1.4.1 Uso del color: el elegido no se distingue SOLO por el tinte; el tilde es una señal de forma además del color y la negrita. */ .filter-option.active::before { content: '✓'; display: inline-block; width: .8rem; font-weight: 700; color: var(--accent-ink); } .filter-option:not(.active)::before { content: ''; display: inline-block; width: .8rem; } .filter-options-compact { max-height: 186px; overflow-y: auto; scrollbar-width: thin; } .duration-range { display: grid; grid-template-columns: 1fr auto 1fr 30px; align-items: center; gap: .35rem; margin-top: .8rem; color: var(--muted); } .duration-range input { min-width: 0; width: 100%; min-height: 34px; padding: .42rem .35rem; /* WCAG 2.1 - 1.4.11 */ border: 1px solid var(--control-line); border-radius: var(--radius-xs); color: var(--text); background: var(--bg); font-size: var(--fs-2xs); } .duration-range input:focus { border-color: var(--accent); } .duration-range button { height: 34px; border: 0; border-radius: var(--radius-xs); color: var(--on-accent); background: var(--blue); font-weight: 800; } .clear-filters-button { width: calc(100% - 2rem); min-height: 38px; margin: 1rem; padding: .55rem; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--muted); background: transparent; font-size: var(--fs-xs); } .clear-filters-button:hover { border-color: var(--accent); color: var(--accent-ink); } /* 7. BARRA SOBRE LOS RESULTADOS: cantidad encontrada, selector de orden y las tres formas de explorar el catálogo (Carreras / Instituciones / Por área). */ /* Banner hacia la guía de títulos (/titulos/): es el acceso llamativo a las diferencias entre licenciatura, tecnicatura, profesorado y posgrado. Solo se muestra en Educación Formal: las otras secciones tienen su propio encabezado y el banner no aplica. */ .banner-titulos { display: none; align-items: center; gap: .85rem; margin: 0 0 1.1rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); text-decoration: none; transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease; } body[data-seccion="formal"] .banner-titulos { display: flex; } .banner-titulos:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); } .banner-titulos-icono { display: inline-flex; flex: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); color: var(--accent-ink); } .banner-titulos-icono svg { width: 22px; height: 22px; } .banner-titulos-texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .banner-titulos-texto strong { font-family: var(--font-title); font-size: var(--fs-base); } .banner-titulos-texto > span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.35; } .banner-titulos-corto { display: none; } .banner-titulos-cta { margin-left: auto; flex: none; color: var(--accent-ink); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; } /* En celular la franja se vuelve una píldora compacta: sin ícono ni bajada, con el título corto y el CTA reducido a la flecha. Sigue siendo llamativa pero no ocupa media pantalla. */ @media (max-width: 600px) { body[data-seccion="formal"] .banner-titulos { display: inline-flex; gap: .35rem; padding: .5rem .9rem; border-radius: var(--radius-pill); margin: 0 0 .85rem; } .banner-titulos-icono { display: none; } .banner-titulos-texto { flex-direction: row; align-items: center; } .banner-titulos-texto strong { font-size: var(--fs-sm); } .banner-titulos-texto > span { display: none; } .banner-titulos-largo { display: none; } .banner-titulos-corto { display: inline; } .banner-titulos-cta { margin-left: 0; font-size: var(--fs-sm); } .banner-titulos-cta-texto { display: none; } } .results-toolbar { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; } .results-toolbar-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .results-toolbar-bottom { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .results-count { margin: 0; color: var(--muted); font-size: var(--fs-base); font-weight: 600; } /* El ícono recuerda en qué sección está parado el usuario (la barra solo se ve en Educación Formal; las plataformas tienen su propio encabezado). Se dibuja con una máscara para que herede el color del texto, igual que el resto de los íconos SVG de línea del sitio. */ .results-count::before { content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .4em; vertical-align: -.14em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E") center / contain no-repeat; } /* Selector persistente de vista: se queda en el medio y el "Ordenar por" se pega a la derecha. Al activar "Por área" o "Instituciones" el sort se oculta (no hay carreras que ordenar), pero el selector sigue siempre visible. */ .vistas-switcher { margin-inline: auto; display: inline-flex; align-items: center; gap: .2rem; padding: .25rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-soft); } .vistas-switcher-btn { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-2xs); font-weight: 700; line-height: 1; padding: .5rem .85rem; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background var(--dur-base) ease, color var(--dur-base) ease; } .vistas-switcher-btn:hover, .vistas-switcher-btn:focus-visible { color: var(--accent-ink); } .vistas-switcher-btn.is-active, .vistas-switcher-btn[aria-pressed="true"] { /* WCAG 2.1 - 1.4.3: blanco sobre --accent daba 4.47:1 en claro y 2.98:1 en oscuro. El par --accion-* mantiene el índigo y pasa en los dos temas. */ background: var(--accion-fill); color: var(--accion-ink); } /* WCAG 2.1 - 1.4.1 Uso del color: el estado activo no queda solo en el tinte. */ .vistas-switcher-btn.is-active::before { content: '✓'; margin-right: .3rem; font-weight: 700; } .sort-control { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; } /* El borde fuerte y la flecha nativa del navegador se quedan intactos: son lo que dice "esto se abre", y eso no se negocia por estética. */ .sort-control select { min-height: 38px; padding: .5rem .6rem; /* WCAG 2.1 - 1.4.11 */ border: 1px solid var(--control-line); border-radius: var(--radius-sm); color: var(--text); background: var(--surface); transition: border-color var(--dur-base) ease; } .sort-control select:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); } .sort-control select:focus { border-color: var(--accent); } /* ================================================================ 8. TARJETAS DE CARRERAS Y CURSOS Cambiá aquí el tamaño, color, bordes y distribución de cada tarjeta. ================================================================ */ .results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1rem; } /* Borde izquierdo azul: marca que la tarjeta es de Educación Formal, en paralelo al borde naranja de las tarjetas de plataformas. */ /* Sin min-height: forzaba aire muerto en las tarjetas de título corto y desalineaba la grilla. Ahora cada una mide lo que su contenido pide. */ /* --- Familia de cards --------------------------------------------------------- .card, .platform-card y .curso-card son la MISMA pieza en distintas secciones. Se tratan juntas a propósito: si solo una cambiara de tratamiento, cambiar de pestaña mostraría media interfaz rediseñada. Planas: fondo de --surface, borde de 1px y nada más. El color de categoría no va en un borde grueso a la izquierda sino en la marca chica de --card-tono (ver ::before más abajo). */ .card, .platform-card, .curso-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color var(--dur-base) ease; } /* La marca de categoría: una barrita corta pegada al borde izquierdo, a la altura de la primera línea de contenido. Dice lo mismo que decía el borde de 4px (a qué sección pertenece esta card) ocupando una fracción del peso visual. */ .card::before, .platform-card::before, .curso-card::before { content: ''; position: absolute; left: 0; top: var(--space-6); width: 3px; height: 26px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--card-tono, var(--accent)); } /* En hover la card no se levanta: se le enciende el borde con el color de su categoría, que es la misma señal sin movimiento. */ .card:hover, .platform-card:hover, .curso-card:hover { border-color: color-mix(in srgb, var(--card-tono, var(--accent)) 45%, var(--line)); } .card { display: flex; flex-direction: column; padding: var(--space-6); --card-tono: var(--seccion, var(--blue)); } .card-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Los badges se quedan SIN relieve, y es una decisión, no un olvido. Dos razones: (1) las sombras neumórficas se derivan de --surface, pero un badge no es --surface sino un tinte del color funcional; ponerle sombras de otro material encima rompe justo la ilusión que el efecto busca — deja de parecer extruído y parece pegoteado. (2) Son seis pastillas de 20px dentro de una card que YA tiene relieve: sumarles otro par de sombras a cada una convierte el interior de la card en ruido y compite con la jerarquía. El color funcional ya los separa del fondo con 4.6:1 o más, que es lo que importa. */ .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .65rem; border-radius: var(--radius-pill); color: var(--text); background: var(--surface-soft); border: 1px solid var(--line); font-family: var(--font-text); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; } .badge-categoria { color: var(--blue-ink); background: var(--badge-blue); border-color: color-mix(in srgb, var(--blue-ink) 35%, transparent); } .badge-publica { color: var(--green-ink); background: var(--badge-green); border-color: color-mix(in srgb, var(--green-ink) 35%, transparent); } .badge-privada { color: var(--purple-ink); background: var(--badge-purple); border-color: color-mix(in srgb, var(--purple-ink) 35%, transparent); } .badge-modalidad { color: var(--teal-ink); background: var(--badge-teal); border-color: color-mix(in srgb, var(--teal-ink) 35%, transparent); } .badge-arancelada { color: var(--orange-ink); background: var(--badge-orange); border-color: color-mix(in srgb, var(--orange-ink) 35%, transparent); } .badge-fuente { color: var(--purple-ink); background: var(--badge-purple); border-color: color-mix(in srgb, var(--purple-ink) 35%, transparent); } .badge-match { /* WCAG 2.1 - 1.4.3: con blanco encima el degradado daba 3.77:1; con tinta oscura queda 4.91:1 en el extremo más claro y 7.29:1 en el más oscuro. */ color: var(--on-vivid); background: linear-gradient(135deg, #059669, #10b981); border-color: rgba(52, 211, 153, 0.6); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } .card-title { margin: var(--space-3) 0 var(--space-2); font-size: 1.0625rem; line-height: 1.35; overflow-wrap: anywhere; } .card-info { color: var(--muted); font-size: var(--fs-xs); display: flex; flex-direction: column; gap: .35rem; margin-bottom: auto; } .card-institucion-row { margin: 0; font-size: var(--fs-sm); color: var(--text); display: inline-flex; align-items: center; gap: .45rem; } .card-institucion-row .meta-svg { color: var(--accent-ink); width: 16px; height: 16px; } .card-facultad-row { margin: 0; font-size: var(--fs-2xs); color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; } .card-facultad-row .meta-svg { color: var(--muted); width: 14px; height: 14px; } .card-meta-row { margin: .25rem 0 0; font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; } .card-meta-row span { display: inline-flex; align-items: center; gap: .3rem; } .card-meta-row .meta-svg { color: var(--muted); width: 14px; height: 14px; } .card-meta-sep { color: var(--line-strong); font-weight: 700; opacity: .5; } /* Iconos vectoriales en tarjetas y botones */ .meta-svg { width: 14px; height: 14px; max-width: 14px; max-height: 14px; display: inline-block; flex-shrink: 0; vertical-align: -2px; } .badge .meta-svg { width: 13px; height: 13px; max-width: 13px; max-height: 13px; color: currentColor; vertical-align: -1px; } .btn-svg { width: 14px; height: 14px; display: inline-block; flex-shrink: 0; vertical-align: -1px; transition: transform var(--dur-fast) ease, fill var(--dur-fast) ease, stroke var(--dur-fast) ease; } .card-cta-group { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); } .card-cta-group .card-link-ben { margin-top: 0; } .card-link-oficial { font-size: var(--fs-2xs); color: var(--muted); text-decoration: none; font-weight: 600; padding: .35rem .6rem; border-radius: var(--radius-xs); background: var(--surface-soft); transition: color var(--dur-fast), background var(--dur-fast); } .card-link-oficial:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 15%, var(--surface)); } .card-link { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) 0; margin-top: auto; color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 700; text-decoration: none; line-height: 1.3; } .card-link:hover { color: var(--purple-ink); } .card-info a.link-institucion { color: inherit; text-decoration: none; } .card-info a.link-institucion:hover { text-decoration: underline; color: var(--accent-ink); } .instituciones-list a.link-institucion { color: var(--accent-ink); text-decoration: none; } .instituciones-list a.link-institucion:hover { text-decoration: underline; } .card-link-muted { color: var(--muted); min-height: 32px; display: inline-flex; align-items: center; } .card-link-ben { color: var(--purple-ink); margin-top: auto; } .card-link-ben:hover { color: var(--accent-ink); } .empty-state { grid-column: 1 / -1; padding: 3rem 1rem; color: var(--muted); text-align: center; font-size: var(--fs-base); } /* Ilustración de los estados vacíos. Va por mask-image y no background-image: dentro de un data-URI, currentColor no tiene de quién heredar y se resolvía a negro, así que en tema oscuro el ícono era invisible. Con máscara, el color lo aporta background-color y sí acompaña al tema. */ .empty-state::before { content: ""; display: block; width: 72px; height: 72px; margin: 0 auto 1.1rem; background-color: currentColor; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%229%22%2F%3E%3Cline%20x1%3D%2236%22%20y1%3D%2236%22%20x2%3D%2254%22%20y2%3D%2254%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%2238%22%20x2%3D%2214%22%20y2%3D%2238%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%2244%22%20x2%3D%2220%22%20y2%3D%2244%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%2250%22%20x2%3D%2212%22%20y2%3D%2250%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%229%22%2F%3E%3Cline%20x1%3D%2236%22%20y1%3D%2236%22%20x2%3D%2254%22%20y2%3D%2254%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%2238%22%20x2%3D%2214%22%20y2%3D%2238%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%2244%22%20x2%3D%2220%22%20y2%3D%2244%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%2250%22%20x2%3D%2212%22%20y2%3D%2250%22%2F%3E%3C%2Fsvg%3E"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; opacity: .85; } .results-suggest { grid-column: 1 / -1; margin: 0 0 .25rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); font-size: var(--fs-base); } .results-suggest strong { color: var(--orange-ink); } .cargar-mas { display: block; margin: 1.5rem auto 0; min-height: 44px; padding: .7rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--accent-ink); font-family: var(--font-text); font-size: var(--fs-base); font-weight: 700; cursor: pointer; transition: border-color var(--dur-base) ease, color var(--dur-base) ease, background-color var(--dur-base) ease; } .cargar-mas:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } /* ================================================================ 8b. SECCIONES PRINCIPALES: EDUCACIÓN FORMAL vs PLATAFORMAS ONLINE Es la primera decisión del usuario. Cada sección tiene su color e ícono, y --seccion tiñe todo lo que depende de dónde está parado. ================================================================ */ /* --seccion es el relleno/borde; --seccion-ink es su tinta legible. Van siempre en pareja, igual que los badges. */ body[data-seccion="formal"] { --seccion: var(--blue); --seccion-ink: var(--blue-ink); } body[data-seccion="plataformas"] { --seccion: var(--orange); --seccion-ink: var(--orange-ink); } body[data-seccion="formaciones-alternativas"] { --seccion: var(--purple); --seccion-ink: var(--purple-ink); } body[data-seccion="oficios-tecnicos"] { --seccion: var(--green); --seccion-ink: var(--green-ink); } body[data-seccion="secundario"] { --seccion: var(--teal); --seccion-ink: var(--teal-ink); } .section-tabs { grid-area: tabs; display: flex; flex-wrap: wrap; gap: .6rem; width: 100%; margin: 0 0 var(--space-7); } /* Ícono arriba y texto abajo (antes iban lado a lado): en la columna de resultados cada pestaña tiene ~165px y compartir el ancho con el ícono le dejaba al texto unos 110px, con "Formaciones Alternativas" partida y saliéndose de la tarjeta. Apiladas entran las cinco en una sola fila y sin cortes. */ .section-tab { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: .75rem .85rem; text-align: left; /* Plano: ni borde ni relieve. La pestaña se despega del fondo por su propia superficie (--surface contra --bg) y nada más. El borde sigue declarado en 1px pero transparente para que la geometría no salte cuando la activa sí lo pinta. */ border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--surface); color: var(--muted); box-shadow: none; transition: border-color var(--dur-base) ease, color var(--dur-base) ease, background-color var(--dur-base) ease; } /* Hover SOLO en las que no están elegidas. Sin relieve que aumentar, el hover se nota por la superficie: un escalón de fondo, sin movimiento. */ .section-tab:not(.is-active):hover { background: var(--surface-soft); } .section-tab-icon { display: inline-flex; line-height: 1; color: var(--muted); transition: color var(--dur-base) ease; } .section-tab-icon .tab-svg { width: 26px; height: 26px; display: block; } .section-tab-texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .section-tab-texto strong { font-family: var(--font-title); font-size: var(--fs-base); line-height: 1.2; color: var(--text); } .section-tab-texto small { font-size: var(--fs-2xs); line-height: 1.3; overflow-wrap: anywhere; } /* INERTES por ahora: la pestaña activa pasó a pintarse con --accent (pedido de Fase B), no con el color de su sección. Se dejan porque son el camino de vuelta de una línea si preferís recuperar el código de color por sección: alcanza con cambiar --accent-ink por --tono-ink y --accent por --tono en .section-tab.is-active. El color por sección SIGUE vivo en el resto de la interfaz (--seccion en body). */ .section-tab-formal.is-active { --tono: var(--blue); --tono-ink: var(--blue-ink); } .section-tab-plataformas.is-active { --tono: var(--orange); --tono-ink: var(--orange-ink); } .section-tab-formaciones.is-active { --tono: var(--purple); --tono-ink: var(--purple-ink); } .section-tab-oficios.is-active { --tono: var(--green); --tono-ink: var(--green-ink); } .section-tab-secundario.is-active { --tono: var(--teal); --tono-ink: var(--teal-ink); } /* Sin relieve, el estado activo lo sostienen el fondo teñido y la tinta de acento del título y el ícono. El borde de acento se queda — es el único contorno que pinta alguna pestaña, así que no compite con nada. El tiñe sube de 10% a 14%: era el relieve lo que hacía de piso del estado y ya no está. */ .section-tab.is-active { border-color: var(--tono); background: color-mix(in srgb, var(--tono) 14%, var(--surface)); box-shadow: none; transform: none; } .section-tab.is-active .section-tab-texto strong { color: var(--tono-ink); } .section-tab.is-active .section-tab-icon { color: var(--tono-ink); } .section-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ================================================================ 8c. TARJETAS DE PLATAFORMAS ONLINE Una tarjeta por plataforma (no por curso): quién es, qué enseña y un botón que lleva a su sitio oficial a ver el catálogo completo. ================================================================ */ .platforms-section h2 { margin: 0 0 .4rem; font-size: var(--fs-xl); color: var(--orange-ink); } .platforms-intro { margin: 0 0 1.4rem; color: var(--muted); font-size: var(--fs-base); } /* WCAG 2.1 - 1.3.1: los contenedores de tarjetas son