:root { --color-primario: #FF6B35; --color-primario-hover: #E85D2C; --color-texto-sobre-primario: #1B2430; --color-tinta: #1B2430; --color-tinta-suave: #3C4655; /* Oscurecido para cumplir contraste AA (~4.7:1 sobre blanco) en texto chico. */ --color-tinta-tenue: #6B7686; --color-fondo: #FFFFFF; /* Crema cálido (no gris neutro): da la calidez coral a todo el fondo de página. */ --color-fondo-alt: #FCF0E6; --color-borde: #E7E2DE; --color-cbc-tint: #FFF1EA; /* Tint violáceo para la vía de capacitación laboral (contrapunto al coral del CBC). */ --color-it-tint: #EFEAFB; --color-oscuro: #1B2430; --color-oscuro-hover: #3C4655; /* Pills de estado del panel del profesor (calco del Claude Design). */ --estado-aprobado-bg: #E3F5EA; --estado-aprobado-text: #1E7A46; --estado-rechazado-bg: #FCE4E8; --estado-rechazado-text: #C1273C; /* Tintes de las opciones del examen (correcta / incorrecta elegida / selección). */ --examen-correcta-bg: #E3F5EA; --examen-incorrecta-bg: #FCE4E8; --examen-seleccion-bg: #FFF1EA; --fuente-titulo: 'Fraunces', Georgia, serif; --fuente-cuerpo: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Velo sobre la imagen de fondo (body::after) y degradé del footer: como cambian entre claro y oscuro, viven en variables. */ --velo-fondo: rgba(247, 245, 243, 0.72); --footer-degrade: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 30%, #EAE5DF 72%, #DED8D1 100%); --sombra-suave: rgba(27, 36, 48, 0.14); } /* ---------- Tema oscuro ---------- Redefine sólo las variables: como casi todo el CSS ya las usa, el sitio se da vuelta solo. El coral de la marca se mantiene (contrasta bien en oscuro). El hero y la ilustración de la bifurcación ya eran oscuros, así que no cambian. Se activa con data-tema="oscuro" en (lo pone el script del ). */ :root[data-tema="oscuro"] { --color-texto-sobre-primario: #1B2430; --color-tinta: #E7EAEE; --color-tinta-suave: #C3C9D1; --color-tinta-tenue: #97A0AC; --color-fondo: #171E27; --color-fondo-alt: #202A36; --color-borde: #2E3945; --color-cbc-tint: #2A1F18; --color-it-tint: #1E262F; --color-oscuro: #2E3945; --color-oscuro-hover: #3C4A59; --estado-aprobado-bg: rgba(46, 168, 101, 0.22); --estado-aprobado-text: #6FE3A4; --estado-rechazado-bg: rgba(232, 69, 92, 0.22); --estado-rechazado-text: #FF95A8; --examen-correcta-bg: rgba(46, 168, 101, 0.16); --examen-incorrecta-bg: rgba(232, 69, 92, 0.16); --examen-seleccion-bg: rgba(255, 107, 53, 0.14); --velo-fondo: rgba(15, 20, 27, 0.82); --footer-degrade: linear-gradient(180deg, #1B222C 0%, #171E27 45%, #10151C 100%); --sombra-suave: rgba(0, 0, 0, 0.45); color-scheme: dark; } * { box-sizing: border-box; } html { /* Reserva el espacio de la barra de scroll: evita el salto horizontal al pasar de una página larga a una corta. */ scrollbar-gutter: stable; } /* Transición entre páginas (Chrome/Edge): el resto de la página cambia instantáneo; solo la grilla de cursos hace un fundido suave. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } ::view-transition-old(grid-cursos), ::view-transition-new(grid-cursos) { animation-duration: 300ms; } body { margin: 0; font-family: var(--fuente-cuerpo); color: var(--color-tinta); background: var(--color-fondo-alt); display: flex; flex-direction: column; min-height: 100vh; } /* Imagen de fondo (desenfocada) fija detrás de todo. El header, el footer y la tarjeta de contenido son opacos, así solo se ve en los laterales. */ body::before { content: ""; position: fixed; inset: -16px; z-index: -2; background-image: url('../img/fondo.jpg'); background-size: cover; background-position: center; filter: blur(3px) saturate(0.85) brightness(1.03); } /* Capa de tinte blanco cálido para que la imagen quede como marca de agua. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--velo-fondo); } /* En el panel del profesor y en editar curso el fondo va crema plano, tal cual el mock del Claude Design: se oculta la foto desenfocada (y su velo) para que la tarjeta blanca del
flote sobre el crema. La nav y el footer reales se mantienen. */ body:has(.panel-profesor-page)::before, body:has(.editar-curso-page)::before, body:has(.examen-page)::before, body:has(.panel-profesor-page)::after, body:has(.editar-curso-page)::after, body:has(.examen-page)::after { display: none; } h1, h2, h3 { font-family: var(--fuente-titulo); } /* Una sola fila siempre: nada se apila sobre nada. Si no entra, el media query de abajo pasa todo al menú hamburguesa. */ .navbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px clamp(16px, 4vw, 32px); background: var(--color-fondo); border-bottom: 1px solid var(--color-borde); flex-wrap: nowrap; /* Header adherido arriba que se oculta al bajar y reaparece al subir. */ position: sticky; top: 0; z-index: 1000; transition: transform 0.3s ease; } .navbar-oculto { transform: translateY(-100%); } .navbar .logo { display: flex; align-items: center; text-decoration: none; } /* Logo del header, calcado del diseño: triangulito con el degradado de marca más el nombre en la tipografía de títulos. */ .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; } .logo-marca { height: 30px; width: auto; display: block; } .logo-nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.15rem; color: var(--color-tinta); } .nav-toggle { display: none; background: none; border: 1px solid var(--color-borde); border-radius: 6px; font-size: 1.25rem; line-height: 1; padding: 0.4rem 0.6rem; cursor: pointer; color: var(--color-tinta); } /* Switch de tema claro/oscuro: pastilla con sol y luna fijos y una perilla que se desliza. La posición de la perilla la maneja data-tema (ver más abajo). */ .tema-switch { flex: none; position: relative; width: 58px; height: 30px; padding: 0; border: 1px solid var(--color-borde); border-radius: 999px; background: var(--color-fondo-alt); cursor: pointer; display: inline-flex; align-items: center; transition: border-color 0.18s ease; } .tema-switch:hover { border-color: var(--color-tinta-tenue); } .tema-switch-icono { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--color-tinta-tenue); pointer-events: none; } .tema-switch-sol { left: 8px; } .tema-switch-luna { right: 8px; } .tema-switch-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-fondo); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease; } /* Modo oscuro: la perilla se corre a la derecha (sobre la luna). */ :root[data-tema="oscuro"] .tema-switch-knob { transform: translateX(28px); } .navbar nav { display: flex; align-items: center; flex-wrap: nowrap; /* Los links arrancan pegados al logo; el margen del buscador es lo que empuja los accesos de cuenta a la derecha (igual que el diseño). */ justify-content: flex-start; gap: 22px; flex: 1 1 auto; min-width: 0; } .navbar nav a, .navbar nav span { margin-left: 0; white-space: nowrap; text-decoration: none; color: var(--color-tinta-suave); } /* Buscador de cursos: borde izquierdo fijo (mismo padding de siempre) y se alarga hacia la derecha. margin-right: auto lo mantiene anclado a la izquierda; es lo único que se encoge si falta lugar. */ /* Va DESPUÉS de los links, con aire a los lados: el margen empuja los accesos de cuenta al extremo derecho sin necesidad de un margin-left inventado. */ .nav-buscador { display: flex; flex: 1 1 380px; min-width: 160px; margin: 0 44px; position: relative; } .nav-buscador input { flex: 1; min-width: 0; padding: 0.55rem 1.1rem; border: 1px solid var(--color-borde); border-right: none; border-radius: 999px 0 0 999px; font: inherit; font-size: 0.9rem; } .nav-buscador input:focus { outline: 2px solid var(--color-primario); outline-offset: 1px; } .nav-buscador button { border: 1px solid var(--color-borde); border-left: none; border-radius: 0 999px 999px 0; background: var(--color-fondo-alt); padding: 0 0.8rem; cursor: pointer; font-size: 0.9rem; } /* Desplegable de resultados en vivo del buscador. */ .nav-buscador-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14); padding: 6px; max-height: min(70vh, 460px); overflow-y: auto; } .nav-buscador-item { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--color-tinta) !important; text-decoration: none; } .nav-buscador-item:hover, .nav-buscador-item:focus { background: var(--color-fondo-alt); } .nav-buscador-item-img { flex: 0 0 auto; width: 52px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--color-fondo-alt); display: flex; align-items: center; justify-content: center; } .nav-buscador-item-img img { width: 100%; height: 100%; object-fit: cover; } .nav-buscador-item-ph { font-size: 1.1rem; } .nav-buscador-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nav-buscador-item-tit { font-weight: 600; font-size: 0.9rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-buscador-item-desc { font-size: 0.8rem; color: var(--color-tinta-suave); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nav-buscador-vacio { margin: 0; padding: 12px 10px; font-size: 0.85rem; color: var(--color-tinta-suave); } .nav-buscador-ensena { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 11px 12px; border-top: 1px solid var(--color-borde); border-radius: 0 0 10px 10px; color: var(--color-primario) !important; font-weight: 600; font-size: 0.88rem; text-decoration: none; } .nav-buscador-ensena:hover { background: var(--color-fondo-alt); } .nav-buscador-ensena-ic { color: var(--color-primario); } .nav-registrarme { color: var(--color-texto-sobre-primario) !important; } /* Links de texto del nav (Cursos, Rutas, etc., que no tienen clase): al pasar el mouse cambian al coral de la marca. Los botones tienen su propio estilo. */ .navbar nav a:not([class]):hover { color: var(--color-primario); } /* "Ingresar": botón con contorno, al lado del "Registrarme" naranja. Mismo alto y radio que el primario; queda como par visual. */ .navbar .nav-ingresar { padding: 0.5rem 1.1rem; border: 1px solid var(--color-borde); border-radius: 8px; font-weight: 700; font-size: 0.9rem; color: var(--color-tinta); transition: border-color 0.18s ease, background 0.18s ease; } .navbar .nav-ingresar:hover { border-color: var(--color-tinta-tenue); background: var(--color-fondo-alt); color: var(--color-tinta); } /* Menú de perfil */ .perfil-menu { position: relative; flex: none; } .perfil-boton { display: flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--color-borde); border-radius: 999px; padding: 0.2rem 0.7rem 0.2rem 0.25rem; cursor: pointer; font: inherit; font-size: 0.9rem; color: var(--color-tinta-suave); } .perfil-boton:hover { border-color: var(--color-tinta-tenue); } .perfil-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--color-primario); color: var(--color-texto-sobre-primario); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; } .perfil-lista { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 210px; background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: 10px; box-shadow: 0 8px 24px rgba(27, 36, 48, 0.14); padding: 0.4rem; z-index: 1500; } .perfil-lista a, .perfil-lista .link-button { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; margin: 0; border-radius: 6px; text-decoration: none; color: var(--color-tinta); font-size: 0.95rem; } .perfil-lista a:hover, .perfil-lista .link-button:hover { background: var(--color-fondo-alt); } /* Menú de desborde (⋯) del header: agrupa Ayuda / Apuntes / Empresas / Contacto, que antes vivían sólo en el footer. Reusa el look del desplegable de perfil. */ .mas-menu { position: relative; flex: none; } .mas-boton { background: none; border: 1px solid var(--color-borde); border-radius: 8px; font-size: 1.05rem; line-height: 1; padding: 0.44rem 0.7rem; cursor: pointer; color: var(--color-tinta); } .mas-boton:hover { background: var(--color-fondo-alt); } .mas-lista { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 210px; background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: 12px; box-shadow: 0 8px 24px rgba(27, 36, 48, 0.18); padding: 0.5rem; z-index: 1500; } .mas-lista a { display: block; padding: 0.55rem 0.65rem; border-radius: 6px; text-decoration: none; color: var(--color-tinta); font-size: 0.9rem; } .mas-lista a:hover { background: var(--color-fondo-alt); } .perfil-separador { border-top: 1px solid var(--color-borde); margin: 0.3rem 0; } .link-button { background: none; border: none; color: var(--color-tinta-suave); cursor: pointer; font: inherit; padding: 0; } /* Hasta 1024px el header completo pasa al menú hamburguesa: con el buscador y el perfil ya no entra todo en una fila prolija en anchos intermedios. */ @media (max-width: 1024px) { .navbar { flex-wrap: wrap; } .nav-toggle { display: block; order: 1; } .navbar nav { display: none; width: 100%; order: 2; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 1rem; } .navbar nav.nav-abierto { display: flex; } .navbar nav a, .navbar nav span, .navbar nav .link-button { margin-left: 0; margin-top: 0; } /* Los links de texto del menú: filas full-width con una línea divisoria, para que quede parejo y demarcado. */ .navbar nav > a:not(.nav-ingresar):not(.nav-registrarme) { width: 100%; box-sizing: border-box; padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--color-borde); } /* "Ingresar" y "Registrarme": botones full-width, mismo ancho y centrados, así dejan de verse de distintos tamaños. */ .navbar .nav-ingresar, .navbar .nav-registrarme { width: 100%; box-sizing: border-box; text-align: center; margin-top: 0.75rem; } /* El switch de tema, en su propia fila separada. */ .navbar nav .tema-switch { margin-top: 0.85rem; } .nav-buscador { width: 100%; max-width: none; flex: none; margin: 0.25rem 0 0; } .perfil-menu, .notif-menu { margin: 0.75rem 0 0; width: 100%; } /* En el menú colapsado, los desplegables se muestran en línea. El prefijo .navbar sube la especificidad para ganarle a la regla base de .notif-lista que aparece más abajo en el archivo. */ .navbar .perfil-lista, .navbar .notif-lista { position: static; width: 100%; max-width: none; box-shadow: none; border: none; border-left: 2px solid var(--color-borde); border-radius: 0; margin: 0.25rem 0 0 0.75rem; padding: 0; } .perfil-lista a, .perfil-lista .link-button { margin-top: 0; } /* En el menú colapsado, el "⋯" no tiene sentido: se oculta el botón y sus links (Ayuda, Apuntes, Empresas, Contacto) aparecen directo como filas del desplegable, igual que Cursos/Rutas. El !important le gana a [hidden]. */ .navbar .mas-menu { width: 100%; order: 3; } .navbar .mas-boton { display: none; } .navbar .mas-lista { display: block !important; position: static; width: 100%; min-width: 0; box-shadow: none; border: none; border-radius: 0; padding: 0; margin: 0; } .navbar .mas-lista a { width: 100%; box-sizing: border-box; padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--color-borde); font-size: 1rem; } } .inline-form { display: inline; } main { max-width: 1240px; width: 100%; margin: 1.5rem auto; padding: 2rem; flex: 1 0 auto; background: var(--color-fondo); border-radius: 12px; box-shadow: 0 1px 4px rgba(27, 36, 48, 0.08); } footer { flex: none; /* Blanco arriba que se funde a un gris cálido al final de la página. */ background: var(--footer-degrade); border-top: 1px solid var(--color-borde); padding: 1.5rem 2rem 2rem; text-align: center; color: var(--color-tinta-tenue); } /* Banner oscuro con brillos coral y violeta, tomados del triángulo del logo. */ /* Hero de la home, calcado del diseño: el texto arriba y las dos vías (CBC / laboral) como tarjetas DENTRO del degradado, no en una sección aparte. */ .hero { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); text-align: left; padding: clamp(24px, 4vw, 44px); margin-bottom: 32px; border-radius: 18px; overflow: hidden; color: white; background: radial-gradient(ellipse at 80% -10%, rgba(255, 107, 53, 0.35), transparent 55%), radial-gradient(ellipse at 5% 110%, rgba(124, 58, 237, 0.35), transparent 50%), linear-gradient(135deg, #26303E 0%, #1B2430 55%, #151C26 100%); } .hero-texto { max-width: 640px; } /* Bandera del hero: triangulito de marca + rótulo, arriba del título. */ .hero-eyebrow { display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.72rem; font-weight: 700; color: #FFB88C; margin: 0 0 14px; } .hero-tri { width: 16px; height: 16px; flex: none; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: linear-gradient(160deg, #FFC24D 0%, #FF6B35 45%, #E8455C 75%, #7C3AED 100%); } .hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0 0 12px; color: white; line-height: 1.15; } .hero-bajada { max-width: 520px; margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; line-height: 1.55; } /* Las dos vías, adentro del hero. */ .hero-caminos { display: flex; flex-wrap: wrap; gap: 16px; } .camino { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; border-radius: 14px; padding: 20px 22px; color: var(--color-tinta); transition: transform 0.15s ease; } .camino:hover { transform: translateY(-3px); } .camino-cbc { background: var(--color-cbc-tint); } .camino-it { background: var(--color-it-tint); } .camino-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--color-primario); display: flex; align-items: center; justify-content: center; } .camino-ic-oscuro { background: var(--color-oscuro); } .camino strong { font-family: var(--fuente-titulo); font-size: 1.15rem; } .camino-desc { font-size: 0.9rem; color: var(--color-tinta-suave); line-height: 1.4; } .camino-cta { font-weight: 700; font-size: 0.88rem; color: var(--color-primario-hover); margin-top: 4px; } .camino-cta-oscuro { color: var(--color-tinta); } @media (max-width: 768px) { .hero { padding: 2rem 1.5rem; gap: 1.5rem; } .hero h1 { font-size: 1.75rem; } } .boton { display: inline-block; font-weight: 700; text-decoration: none; padding: 0.6rem 1.1rem; border-radius: 8px; font-size: 0.9rem; } .boton-primario { background: var(--color-primario); color: var(--color-texto-sobre-primario); } .boton-primario:hover { background: var(--color-primario-hover); } .boton-oscuro { background: var(--color-oscuro); color: white; } .boton-oscuro:hover { background: var(--color-oscuro-hover); } .pills { display: flex; gap: 0.5rem; margin: 1rem 0; } .pill { text-decoration: none; font-size: 0.85rem; font-weight: 500; color: var(--color-tinta-suave); background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: 999px; padding: 0.4rem 0.9rem; } .pill-activo { background: var(--color-oscuro); color: white; border-color: var(--color-oscuro); } /* Segunda fila de filtros (materias del CBC): puede tener muchas, que envuelvan. */ .pills-materias { flex-wrap: wrap; gap: 0.4rem; margin-top: -0.3rem; } .pills-materias .pill { font-size: 0.78rem; padding: 0.3rem 0.75rem; } /* Materia del curso arriba del título, en la card de la home. */ .card-materia { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-primario); margin: 0 0 0.3rem; } /* Reserva el alto de una fila de cards aunque el filtro devuelva pocos cursos o ninguno: la página no cambia de tamaño al cambiar de filtro. */ .cursos { min-height: 30rem; } .grid-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 1fr; gap: 20px; margin-top: 1.5rem; view-transition-name: grid-cursos; } /* Card de curso — Dirección "Ascenso": portada oscura con el triángulo del logo. */ .card-curso { display: flex; flex-direction: column; background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .card-curso:hover { border-color: var(--color-tinta); box-shadow: 0 10px 28px rgba(27, 36, 48, 0.14); transform: translateY(-3px); } .card-portada { position: relative; height: 120px; flex: none; overflow: hidden; background: radial-gradient(ellipse at 82% -20%, rgba(255, 107, 53, 0.5), transparent 60%), radial-gradient(ellipse at 0% 120%, rgba(124, 58, 237, 0.42), transparent 55%), linear-gradient(135deg, #26303E 0%, #1B2430 60%, #151C26 100%); } .card-portada img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Triángulo del logo como marca en la portada sin imagen. */ .card-tri { position: absolute; left: 1.1rem; bottom: 0.9rem; width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid rgba(255, 255, 255, 0.16); transition: border-bottom-color 0.18s ease; } .card-curso:hover .card-tri { border-bottom-color: rgba(255, 107, 53, 0.55); } .card-cat { position: absolute; top: 0.7rem; left: 0.7rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; color: white; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px); padding: 0.15rem 0.6rem; border-radius: 999px; } /* Badge de cuotas de Mercado Pago sobre la portada, abajo a la izquierda (el de categoría vive arriba). Fondo claro para que el logo azul de MP se lea. */ .badge-cuotas { position: absolute; left: 0.7rem; bottom: 0.7rem; display: inline-flex; align-items: center; gap: 0.35rem; max-width: calc(100% - 1.4rem); padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); font-size: 0.7rem; font-weight: 700; line-height: 1.1; color: #1B2430; } /* Especificidad extra: dentro de .card-portada hay un `img { width:100%; height:100% }` que si no le ganamos estira el logo a toda la portada. */ .badge-cuotas .badge-cuotas-logo { height: 0.9rem; width: auto; flex: none; display: block; object-fit: contain; } .badge-cuotas-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-cuerpo { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0.9rem 1rem 1rem; } .card-estrellas { color: #C77800; font-size: 0.8rem; font-weight: 700; margin: 0 0 0.3rem; } .card-estrellas span { color: var(--color-tinta-tenue); font-weight: 500; } .card-cuerpo h3 { font-size: 1.02rem; color: var(--color-tinta); margin: 0 0 0.35rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-desc { margin: 0; font-size: 0.85rem; color: var(--color-tinta-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-pie { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.85rem; } .card-pie .precio { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.1rem; color: var(--color-tinta); } .card-meta { font-size: 0.75rem; color: var(--color-tinta-tenue); text-align: right; } @media (prefers-reduced-motion: reduce) { .card-curso, .card-tri { transition: none; } .card-curso:hover { transform: none; } } .form-page { max-width: 480px; margin: 0 auto; } /* Encabezado del form de contacto: título a la izquierda, icono de Instagram en el extremo opuesto. */ .form-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .form-encabezado h1 { margin: 0; } /* Nombre + Apellido lado a lado, como el mock; se apilan si no entran. */ .form-fila { display: flex; gap: 12px; flex-wrap: wrap; } .form-fila .campo { flex: 1 1 180px; min-width: 0; } .form-fila .campo input { width: 100%; } /* Aclaración chica bajo el intro del form de contacto general: deriva a los otros dos formularios (profesores, empresas) sin robarle peso al principal. */ .form-nota { font-size: 0.9rem; color: var(--color-tinta-tenue); margin-bottom: 1.5rem; } .campo { margin-bottom: 1rem; display: flex; flex-direction: column; } /* Captcha (Cloudflare Turnstile): el widget trae su propio tamaño; solo le damos aire arriba y abajo respecto del resto del form. */ .campo-captcha { margin-top: 0.25rem; } .campo-captcha .cf-turnstile { margin-bottom: 0.25rem; } .campo input, .campo textarea, .campo select { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--color-borde); border-radius: 8px; font: inherit; background: var(--color-fondo); color: var(--color-tinta); } /* Un checkbox NO es un campo de texto: la regla de arriba lo estiraba al 100% con padding de input, y quedaba como una caja ancha arriba del texto en vez de una casilla al lado. Se lo devuelve a su tamaño y se alinea con el label. */ .campo-check label { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; line-height: 1.3; } .campo-check input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; padding: 0; border-radius: 4px; accent-color: var(--color-primario); cursor: pointer; } /* Red de seguridad global: ningún control de formulario debe forzar el ancho del layout. Sin esto, un