/* ===================================== ESTRUCTURA DE ESTILOS EDUTIC.AR ===================================== css/ │ ├─ estilos_edutic.css │ Base: reset + variables + estilos base (tipografía base, body, etc.) + accesibilidad global │ ├─ estilos_estructura_edutic.css │ Estructura: contenedores y layout, como: header, container, layout, grid. │ ├─ estilos_componentes_edutic.css │ Componentes: menú, formularios, botones, carrusel, tarjetas. │ └─ estilos_utilidades_edutic.css Utilidades: helpers rápidos, como: .texto-chico, .hidden, .hidden-mobile, .solo-desktop, etc. /* -------------------------------------------------- */ /* ==================== === RESET BÁSICO === ==================== */ /* Modelo de caja consistente */ *, *::before, *::after { box-sizing: border-box; } /* Eliminar márgenes por defecto */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd { margin: 0; } /* Quitar padding por defecto en listas */ ul, ol { padding: 0; list-style: none; } /* Imágenes fluidas por defecto */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* Formularios heredan fuente */ input, button, textarea, select { font: inherit; } /* Quitar estilos por defecto de botones */ button { background: none; border: none; cursor: pointer; } /* Evitar overflow horizontal raro */ html, body { overflow-x: hidden; } /* Scroll suave opcional */ html { scroll-behavior: smooth; } /* -------------------------------------------------- */ /* ======================================================= */ /* === DEFINO LAS VARIABLES GENERALES PARA LOS ESTILOS === SÓLO DEFINIR VARIABLES EN MINÚSCULAS */ /* ======================================================= */ :root{ /* === Paleta de Colores eduTIC === Generador de paleta clara y oscura a partir de un determinado color: https://www.color-hex.com/ */ --verde-muy-claro-grisado: #F0FACF; /* var(--verde-muy-claro-grisado); */ --verde-muy-claro: #E1FFAB; /* var(--verde-muy-claro); */ --verde-claro-grisado: #9BB271; /* var(--verde-claro-grisado); */ --verde-claro: #CCED5F; /* var(--verde-claro); */ --verde-lima: #B7E51D; /* var(--verde-lima); */ --verde-oscuro: #3F5F00; /* var(--verde-oscuro); */ --verde-muy-oscuro: #253900; /* var(--verde-muy-oscuro); */ --azul-claro: #3A62FF; /* var(--azul-claro); */ --azul: #0A2FFF; /* var(--azul); */ --azul-oscuro: #0B0E3F; /* var(--azul-oscuro); */ --blanco: #FFFFFF; /* var(--blanco); */ --gris-muy-claro: #F2F2F2; /* var(--gris-muy-claro); */ --gris: #909090; /* var(--gris); */ --gris-oscuro: #252525; /* var(--gris-oscuro); */ --gris-muy-oscuro: #0D0D0D; /* var(--gris-muy-oscuro); */ --negro: #000000; /* var(--negro); */ /* === Tipografía === */ --fontArial: Arial, Helvetica, sans-serif; /* === Tamaño de Letra === */ --font05rem8px: 0.50rem; /* var(--font05rem8px); ~8 px */ --font075rem12px: 0.75rem; /* var(--font075rem12px); ~12 px */ --font0875rem14px: 0.875rem; /* var(--font0875rem14px); ~14 px */ --font1rem16px: 1rem; /* var(--font1rem16px); ~16 px */ --font1125rem18px: 1.125rem; /* var(--font1125rem18px); ~18 px */ --font125rem20px: 1.25rem; /* var(--font125rem20px); ~20 px */ --font15rem24px: 1.5rem; /* var(--font15rem24px); ~24 px */ --font175rem28px: 1.75rem; /* var(--font175rem28px); ~28 px */ --font2rem32px: 2rem; /* var(--font2rem32px); ~32 px */ --font-menu-toggle: 1.75rem; /* o 28px: Símbolos ☰ y ✕ del Menú Hamburguesa */ /* Seteo para Formularios */ } /* -------------------------------------------------- */ /* === Descripción de los colores y significado === El azul representa el marco educativo y tecnológico, mientras que el verde simboliza orientación, acompañamiento y crecimiento. => Verde lima (color identidad / orientación) Hex: #B7E51D Uso recomendado: - Palabra TIC - Indicadores activos del carrusel - Botones destacados - Íconos importantes - Hover en elementos clave => Azul claro (base institucional) Hex: #3A62FF Uso recomendado: - Palabra edu - Encabezados (h1, h2) - Barra de navegación - Links principales => Verde oscuro (formación / acompañamiento) Hex: #3F5F00 Uso recomendado: - Subtítulos - Textos secundarios - Etiquetas o badges - Widgets laterales - Footer (Copyright) => Azul oscuro (texto fuerte) Hex: #0B0E3F Uso recomendado: - Texto principal - Footer (links) - Títulos en fondos claros => Gris claro (fondos neutros) Hex: #F2F2F2 Uso recomendado: - Fondo del header - Widgets - Secciones separadoras Ideas de uso: - Fondo: Blanco - Header: gris muy claro - Nav: azul / verde lima - Logo: Edu: azul claro / TIC: verde lima - Carrusel activo: verde lima / inactivo: gris - Texto general: azul oscuro - Widgets: fondo: gris muy claro - Footer: fondo: verde muy claro / letra: verde oscuro Ejemplo de uso de las variables: color: var(--verde-oscuro); // OJO las variables son CaseSensitive // */ /* -------------------------------------------------- */ /* ======================= === TIPOGRAFÍA BASE === ======================= */ /* --- BODY --- */ body { font-family: var(--fontArial); font-size: var(--font1rem16px); line-height: 1.5; margin: 0; padding: 0; } body a { text-decoration: underline; } body a:hover { color: var(--verde-muy-oscuro); /* verde muy oscuro */ text-decoration: underline; } /* === MAIN - CUERPO DE LA PÁGINA === */ main { padding-left: 1em; } /* genera un espacio antes o después de donde se coloque */ main .espacio-arriba { margin-top: 2.5rem; } main .espacio-abajo { margin-bottom: 2.5rem; } /* --- PÁRRAFO Y ENCABEZADOS --- */ main p { font-size: var(--font1rem16px); margin-bottom: 1.5em; /* DECÍA 1EM */ padding-left: 1em; color: var(--verde-muy-oscuro); } main h1, /* Otra forma de escribir esta lista: 'main :is(h1, h2, h3, h4, h5, h6)' */ main h2, main h3, main h4, main h5, main h6 { margin-bottom: 0.6em; line-height: 1.2; color: var(--azul-claro); } main h1{ font-size: var(--font15rem24px); } main h2 { font-size: var(--font125rem20px); } main h3 { font-size: var(--font1125rem18px); } /* --- BULLETS --- */ main ul, main ol { padding-left: 1.4em; main ul{ list-style: disc; } main ol { list-style: decimal; } /* ------------------------------------ */ /* --- CLASES TAMAÑOS DE TIPOGRAFÍA --- */ /* ------------------------------------ */ .font05rem8px { font-size: var(--font05rem8px); } .font075rem12px { font-size: var(--font075rem12px); } .font0875rem14px { font-size: var(--font0875rem14px); } .font1rem16px { font-size: var(--font1rem16px); } .font1125rem18px { font-size: var(--font1125rem18px); } .font125rem20px{ font-size: var(--font125rem20px); } .font15rem24px { font-size: var(--font15rem24px); } .font175rem28px { font-size: var(--font175rem28px); } .font2rem32px { font-size: var(--font2rem32px); } /* -------------------------------------------------- */ /* ====================================== === ACCESIBILIDAD – REDUCED MOTION === ====================================== */ @media (prefers-reduced-motion: reduce) { /* Desactiva las animaciones/transiciones */ * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Desactivar efecto flip de las tarjetas */ .tarjeta-inner { transform: none !important; } .tarjeta:hover .tarjeta-inner { transform: none !important; } } /* -------------------------------------------------- */