/* ===================================================== VARIABLES GLOBALES (Custom Properties de CSS) ===================================================== */ :root { /* :root representa el elemento raíz del documento (equivale a ). Aquí definimos "variables" reutilizables en todo el archivo. */ --azul-marino: #0F1B2D; /* Color principal oscuro: header, footer, textos fuertes. */ --fondo-claro: #FAFAF8; /* Fondo general de la página, blanco roto. */ --ambar: #F2A93B; /* Acento principal: botones, detalles destacados. */ --verde: #2E9E82; /* Acento secundario: enlaces al pasar el mouse. */ --texto: #1A1A1A; /* Color de texto por defecto. */ --gris-borde: #E3E1DC; /* Color para bordes sutiles de tarjetas. */ --fuente-titulo: 'Space Grotesk', sans-serif; /* Fuente para todos los encabezados (h1, h2, h3). */ --fuente-texto: 'Inter', sans-serif; /* Fuente para párrafos y texto de cuerpo. */ --fuente-etiqueta: 'IBM Plex Mono', monospace; /* Fuente monoespaciada, solo para las etiquetas pequeñas de categoría. */ } /* ===================================================== RESET Y BASE ===================================================== */ * { margin: 0; /* Quita márgenes por defecto de todos los elementos. */ padding: 0; /* Quita rellenos por defecto. */ box-sizing: border-box; /* El ancho/alto de cada elemento incluye su padding y borde. */ } html { scroll-behavior: smooth; /* Al hacer clic en un enlace tipo "#seccion", el scroll se desliza suavemente en vez de saltar de golpe. */ } body { font-family: var(--fuente-texto); /* Usa la variable de fuente de texto definida arriba. */ color: var(--texto); background-color: var(--fondo-claro); line-height: 1.6; /* Espaciado entre líneas de texto, mejora la legibilidad. */ } h1, h2, h3 { font-family: var(--fuente-titulo); /* Todos los encabezados usan la fuente de titulares. */ line-height: 1.2; /* Los títulos necesitan menos espacio entre líneas que el texto normal. */ } img { max-width: 100%; /* Ninguna imagen podrá ser más ancha que su contenedor (evita que "se desborden"). */ display: block; /* Quita el pequeño espacio fantasma que los navegadores añaden bajo las imágenes por defecto. */ } a { text-decoration: none; /* Quita el subrayado por defecto de los enlaces. */ color: inherit; /* El enlace hereda el color del texto que lo rodea, en vez del azul por defecto. */ } .etiqueta { font-family: var(--fuente-etiqueta); /* Etiquetas de categoría en fuente monoespaciada: refuerzan la identidad "técnica" del sitio. */ font-size: 0.75rem; /* rem = relativo al tamaño de fuente raíz; 0.75rem ≈ 12px. */ color: var(--verde); margin-bottom: 8px; } /* ===================================================== BOTONES (clase reutilizable) ===================================================== */ .boton { display: inline-block; /* Permite aplicar padding como si fuera un bloque, pero sigue fluyendo como texto en línea. */ background-color: var(--ambar); color: var(--azul-marino); padding: 12px 24px; border-radius: 4px; /* Esquinas levemente redondeadas (no todo-redondeado, para que combine con el estilo "técnico"). */ font-weight: 600; /* Semi-negrita. */ transition: transform 0.2s ease; /* Anima suavemente cualquier cambio de "transform" (lo usamos en :hover) durante 0.2 segundos. */ } .boton:hover { transform: translateY(-2px); /* Al pasar el mouse, el botón sube 2px, dando sensación de "elevación" interactiva. */ } .boton--outline { background-color: transparent; /* Fondo transparente en vez de ámbar sólido. */ border: 2px solid var(--ambar); color: var(--ambar); } /* ===================================================== HEADER / NAV ===================================================== */ .header { background-color: var(--azul-marino); position: sticky; /* "sticky" hace que el header se quede fijo arriba al hacer scroll, una vez llega a esa posición. */ top: 0; /* Necesario junto con sticky: indica que se pega cuando llega al borde SUPERIOR. */ z-index: 100; /* Asegura que el header quede POR ENCIMA de otros elementos (como el slider) al hacer scroll. */ } .header__contenedor { max-width: 1100px; /* Ancho máximo del contenido, para que en pantallas grandes no se estire de borde a borde. */ margin: 0 auto; /* margen 0 arriba/abajo, "auto" izquierda/derecha -> centra el bloque horizontalmente. */ display: flex; align-items: center; /* Centra verticalmente el logo, el menú y el botón hamburguesa. */ justify-content: space-between; /* Logo a la izquierda, menú a la derecha, con espacio entre ambos. */ padding: 18px 20px; } .header__logo { font-family: var(--fuente-titulo); font-weight: 700; color: white; font-size: 1.3rem; } .header__logo span { color: var(--ambar); /* Solo el símbolo "&" del logo se pinta de ámbar, como detalle de marca. */ } .header__nav ul { display: flex; /* Coloca los
  • en fila en vez de uno debajo del otro. */ list-style: none; gap: 30px; /* Espacio entre cada opción del menú. */ } .header__nav a { color: white; font-weight: 500; transition: color 0.2s ease; } .header__nav a:hover { color: var(--ambar); /* Cambia de color al pasar el mouse, dando retroalimentación visual. */ } .header__toggle { display: none; /* Oculto por defecto: solo se muestra en pantallas pequeñas (ver media query al final). */ flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; } .header__toggle span { width: 24px; height: 2px; background-color: white; /* Cada span es una línea blanca; 3 líneas = ícono de "hamburguesa". */ } /* ===================================================== SLIDER ===================================================== */ .slider { position: relative; /* Necesario para poder posicionar las flechas y los puntos DENTRO de este contenedor con "absolute". */ overflow: hidden; /* Oculta cualquier parte del slider__track que se salga del área visible (las otras 2 diapositivas). */ height: 70vh; /* Altura del slider = 70% de la altura visible de la pantalla. */ } .slider__track { display: flex; /* Coloca las 3 .slide en una sola fila horizontal, una al lado de otra. */ height: 100%; transition: transform 0.5s ease-in-out; /* Anima el desplazamiento del track cuando JS cambie su "transform: translateX(...)". */ } .slide { min-width: 100%; /* Cada diapositiva ocupa el 100% del ancho del slider (así solo se ve una a la vez). */ background-size: cover; /* La imagen de fondo cubre todo el espacio disponible sin deformarse. */ background-position: center; /* Centra la imagen dentro de su contenedor. */ display: flex; align-items: center; /* Centra verticalmente el contenido de texto dentro de la diapositiva. */ position: relative; } .slide::after { /* ::after crea un elemento "virtual" superpuesto, sin necesidad de agregarlo en el HTML. */ content: ""; /* Obligatorio para que ::after se renderice, aunque esté vacío. */ position: absolute; inset: 0; /* Atajo que equivale a top:0; right:0; bottom:0; left:0 (cubre todo el elemento padre). */ background: linear-gradient(90deg, rgba(15,27,45,0.85), rgba(15,27,45,0.2)); /* Degradado oscuro de izquierda a derecha, para que el texto blanco sea legible sobre la foto. */ } .slide__contenido { position: relative; z-index: 2; /* Por encima del degradado (::after), para que el texto sea visible. */ max-width: 500px; padding: 0 60px; color: white; } .slide__contenido h1 { font-size: 2.4rem; margin: 10px 0 16px; } .slide__contenido p { margin-bottom: 20px; opacity: 0.9; } .slider__flecha { position: absolute; top: 50%; /* Ubica el borde superior del botón a la mitad de la altura del slider. */ transform: translateY(-50%); /* Sube el botón la mitad de SU PROPIA altura, logrando un centrado vertical perfecto. */ background: rgba(255,255,255,0.2); color: white; border: none; width: 44px; height: 44px; border-radius: 50%; /* 50% de border-radius sobre un elemento cuadrado = círculo perfecto. */ cursor: pointer; font-size: 1.2rem; z-index: 3; } .slider__flecha--izq { left: 20px; } /* Pega la flecha izquierda al borde izquierdo del slider. */ .slider__flecha--der { right: 20px; } /* Pega la flecha derecha al borde derecho. */ .slider__puntos { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); /* Centra horizontalmente el grupo de puntos, sin importar cuántos haya. */ display: flex; gap: 10px; z-index: 3; } .slider__puntos button { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,0.5); cursor: pointer; } .slider__puntos button.activo { /* Clase que JavaScript añade/quita para marcar el punto de la diapositiva ACTUAL. */ background: var(--ambar); } /* ===================================================== SECCIONES GENERALES ===================================================== */ .seccion { padding: 70px 20px; /* Espacio interno arriba/abajo generoso, para separar visualmente cada bloque. */ } .seccion--alterna { background-color: #F1EEE6; /* Fondo ligeramente distinto, para alternar el ritmo visual entre secciones. */ } .seccion__contenedor { max-width: 1100px; margin: 0 auto; /* Mismo patrón de centrado que usamos en el header. */ } .seccion__titulo { font-size: 1.8rem; margin-bottom: 30px; } /* ===================================================== TARJETAS (cards) DE ARTÍCULOS / ANUNCIOS ===================================================== */ .grid-cards { display: grid; /* CSS Grid: sistema de rejilla, ideal para organizar tarjetas de tamaño similar. */ grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual ancho ("1fr" = una fracción del espacio disponible). */ gap: 24px; /* Espacio entre tarjetas, tanto horizontal como vertical. */ } .grid-cards--dos { grid-template-columns: repeat(2, 1fr); /* Modificador: mismo sistema pero con 2 columnas, usado en la sección de "más anuncios". */ } .card { background-color: white; border: 1px solid var(--gris-borde); /* Borde sutil en vez de sombra genérica: más discreto y coherente con el estilo editorial. */ border-radius: 6px; overflow: hidden; /* Recorta la imagen interna para que respete las esquinas redondeadas de la tarjeta. */ } .card__cuerpo { padding: 20px; } .card__cuerpo h3 { font-size: 1.1rem; margin-bottom: 8px; } .card--anuncio { border-color: var(--ambar); /* Las tarjetas publicitarias tienen el borde en ámbar, para distinguirlas sutilmente del contenido editorial. */ } /* ===================================================== ANUNCIO GRANDE (banner destacado) ===================================================== */ .anuncio-grande { display: grid; grid-template-columns: 1fr 1fr; /* 2 columnas iguales: imagen a un lado, texto al otro. */ background-color: var(--azul-marino); border-radius: 8px; overflow: hidden; } .anuncio-grande img { height: 100%; object-fit: cover; /* La imagen llena todo el espacio de su columna sin deformarse, recortando lo que sobre. */ } .anuncio-grande__texto { padding: 40px; color: white; display: flex; flex-direction: column; /* Apila etiqueta, título, texto y botón en columna (uno debajo del otro). */ justify-content: center; /* Centra verticalmente ese bloque de texto dentro de la columna. */ } .anuncio-grande__texto h3 { font-size: 1.5rem; margin-bottom: 12px; } .anuncio-grande__texto p { margin-bottom: 20px; opacity: 0.85; } /* ===================================================== VIDEO ===================================================== */ .seccion__contenedor--video { display: grid; grid-template-columns: 1.2fr 1fr; /* La columna del video es un poco más ancha que la del texto. */ gap: 40px; align-items: center; } .video { width: 100%; border-radius: 8px; } /* ===================================================== GALERÍA DE IMÁGENES ===================================================== */ .galeria { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales para las 4 fotos de la galería. */ gap: 16px; } .galeria img { aspect-ratio: 1 / 1; /* Fuerza que cada imagen sea cuadrada, sin importar sus proporciones originales. */ object-fit: cover; /* Recorta la imagen para llenar ese cuadrado sin deformarla. */ border-radius: 6px; } /* ===================================================== FOOTER ===================================================== */ .footer { background-color: var(--azul-marino); color: white; padding: 60px 20px 20px; } .footer__contenedor { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1.5fr; /* 3 columnas de distinto ancho: "sobre nosotros" más ancha, enlaces angosta, boletín intermedia. */ gap: 40px; margin-bottom: 40px; } .footer__col h4 { font-family: var(--fuente-titulo); margin-bottom: 16px; } .footer__col ul { list-style: none; } .footer__col li { margin-bottom: 8px; } .footer__col a:hover { color: var(--ambar); } .footer__form { display: flex; gap: 8px; margin-top: 12px; } .footer__form input { flex: 1; /* El input ocupa todo el espacio disponible, dejando que el botón mantenga su tamaño natural. */ padding: 10px; border: none; border-radius: 4px; } .footer__form button { background-color: var(--ambar); border: none; padding: 10px 16px; border-radius: 4px; font-weight: 600; cursor: pointer; } .footer__copy { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.15); /* Línea divisoria sutil entre las columnas y el texto de copyright. */ font-size: 0.85rem; opacity: 0.7; } /* ===================================================== RESPONSIVE: pantallas medianas y pequeñas ===================================================== */ @media (max-width: 900px) { /* Esta regla SOLO se aplica cuando el ancho de la ventana es 900px o menor. */ .header__nav { position: absolute; top: 100%; /* Justo debajo del header. */ left: 0; width: 100%; background-color: var(--azul-marino); display: none; /* Oculto por defecto en móvil; JS le agrega la clase "abierto" para mostrarlo. */ } .header__nav.abierto { display: block; /* JavaScript alterna esta clase al hacer clic en el botón hamburguesa. */ } .header__nav ul { flex-direction: column; /* En móvil, el menú se apila verticalmente en vez de en fila. */ padding: 20px; gap: 16px; } .header__toggle { display: flex; /* Se muestra el botón hamburguesa solo en este breakpoint. */ } .grid-cards, .grid-cards--dos { grid-template-columns: 1fr; /* Las tarjetas pasan de varias columnas a 1 sola columna (apiladas). */ } .anuncio-grande, .seccion__contenedor--video { grid-template-columns: 1fr; /* Las secciones de 2 columnas también se apilan en móvil. */ } .galeria { grid-template-columns: repeat(2, 1fr); /* La galería pasa de 4 a 2 columnas en pantallas medianas. */ } .footer__contenedor { grid-template-columns: 1fr; /* El footer también se apila en una sola columna. */ } .slide__contenido h1 { font-size: 1.6rem; /* Reducimos el tamaño del titular del slider para que quepa en pantallas pequeñas. */ } }