/* ========================================================= AleGa info — hoja de estilos principal Los colores se guardan en variables (:root) para poder cambiarlos en un solo lugar y usarlos en todas las páginas. ========================================================= */ /* :root es el elemento , o sea el antepasado de TODO. Las variables que se declaran aquí las puede leer cualquier regla de cualquier página que enlace esta hoja: por eso es el sitio donde se guarda la paleta. */ :root { color-scheme: dark; /* Le dice al navegador que la página es oscura: así pinta de oscuro las barras de scroll y los campos de formulario */ --fondo: #0e0e10; /* Grafito: el fondo de toda la página */ --fondo-alt: #131316; /* Un gris un pelo más claro, para separar secciones sin usar líneas */ --superficie: #17171a; /* Tarjetas y cajas: lo que se ve "encima" del fondo */ --texto: #ededed; /* Texto principal. No es blanco puro: el blanco puro sobre negro cansa la vista */ --texto-suave: #9a9aa0; /* Texto secundario (descripciones, pies de foto) */ --linea: #2a2a2e; /* El color de todos los bordes y separadores */ --acento: #c6f432; /* Verde lima (botones y detalles) */ --acento-hover: #b3e01f; /* El mismo lima un poco más apagado, para cuando el cursor está encima */ --acento-suave: #1f2610; /* Lima muy oscuro: sirve de fondo detrás de texto lima */ --sobre-acento: #0e0e10; /* Color del texto encima del lima (el lima es tan claro que pide texto oscuro) */ --rojo: #f87171; /* Para errores y para el botón de volver */ --rojo-hover: #ef4444; /* El rojo con el cursor encima */ --radio: 14px; /* El redondeo estándar de las esquinas. Una sola variable = todas las cajas redondean igual */ --ancho: 1080px; /* Hasta dónde se estira el contenido en pantallas grandes */ --titulos: "Geist", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Tipografía de los títulos. La lista es un plan B: si Geist no carga, se usa la siguiente que exista */ --sans: "Geist", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Tipografía del texto normal */ --mono: "Geist Mono", Consolas, ui-monospace, monospace; /* Tipografía de ancho fijo: todas las letras miden lo mismo, ideal para código y números */ } /* El asterisco significa "todos los elementos"; ::before y ::after son los dos trocitos extra que CSS puede inventar dentro de cada uno. border-box hace que width incluya el padding y el borde: si pides 200px de ancho, mide 200px en pantalla, no 200 + padding + borde. */ *, *::before, *::after { box-sizing: border-box; } /* Cuando un enlace salta a un #ancla, la página se desliza en vez de brincar */ html { scroll-behavior: smooth; } body { margin: 0; /* El navegador pone 8px de margen por su cuenta; sin esto quedaría una franja blanca al borde */ font-family: var(--sans); /* Tipografía por defecto; todo lo demás la hereda */ font-size: 16px; /* Tamaño base del texto */ line-height: 1.6; /* Separación entre renglones = 1.6 veces el tamaño de la letra */ color: var(--texto); /* Color del texto, heredado por todos los hijos */ background: var(--fondo); /* Fondo de la página entera */ -webkit-font-smoothing: antialiased; /* Suaviza el dibujo de las letras claras sobre fondo oscuro (solo en Chrome y Safari) */ } /* Evita que la página de fondo se mueva cuando la ventana de contacto está abierta. :has() mira hacia adentro: "un body que CONTENGA un dialog abierto". */ body:has(dialog[open]) { overflow: hidden; } /* max-width: la imagen nunca sobresale de su caja. height: auto mantiene la proporción al encogerla, para que no salga aplastada. */ img { max-width: 100%; height: auto; } /* Los títulos vienen con margen y con negrita exagerada de fábrica; aquí se quita el margen (lo pone el layout), se baja la negrita a 600, se juntan los renglones (1.15) y se juntan un poco las letras (letter-spacing negativo). */ h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; } p { margin: 0; } /* Igual que arriba: el aire entre párrafos lo decide el contenedor con gap */ a { color: inherit; }/* Los enlaces dejan de ser azules y toman el color del texto que los rodea */ /* = un trocito de código dentro de una frase */ code { font-family: var(--mono); /* Ancho fijo, para que se note que es código */ font-size: .88em; /* em = relativo a la letra de alrededor: siempre un 12% más pequeño que el texto donde esté */ background: var(--acento-suave); /* Fondo lima oscuro que lo resalta */ color: var(--acento); /* Letra lima */ padding: 2px 6px; /* Aire adentro: 2px arriba y abajo, 6px a los lados */ border-radius: 6px; /* Esquinas redondeadas */ } /* Centra el contenido y limita su ancho. Esta clase se repite en cada sección; es la que impide que el texto se estire de borde a borde en un monitor grande. */ .envoltura { width: 100%; /* Ocupa todo lo que pueda... */ max-width: var(--ancho); /* ...pero nunca más de 1080px */ margin: 0 auto; /* 0 arriba y abajo, "auto" a los lados = reparte el sobrante por igual, o sea centra */ padding: 0 24px; /* Aire a los lados para que el texto no toque el borde de la pantalla */ } /* --------------------------------------------------------- BOTONES (se usan con class, porque un id no se puede repetir) --------------------------------------------------------- */ /* .boton es la BASE: todo botón la lleva. Las variantes de abajo (--borde, --rojo, --pequeno) solo cambian lo que las diferencia. Así, si mañana cambia el redondeo, se cambia una vez aquí y no en seis sitios. */ .boton { display: inline-flex; /* flex por dentro (para alinear icono y texto), "inline" por fuera (no ocupa todo el ancho) */ align-items: center; /* Centra verticalmente lo que haya dentro */ justify-content: center; /* Centra horizontalmente lo que haya dentro */ gap: 8px; /* Separación entre el icono y el texto, si hay dos cosas */ padding: 12px 22px; /* Aire interior: 12px arriba/abajo, 22px a los lados */ border: 1px solid var(--acento); /* Borde: grosor, tipo de línea y color */ border-radius: 999px; /* Un número enorme = píldora. El navegador redondea hasta donde da la altura */ background: var(--acento); /* Relleno lima */ color: var(--sobre-acento); /* Texto oscuro, porque el lima es muy claro */ font: inherit; /*