@import url(reset.css);
/* Variables CSS (para consistencia de colores y fuentes) */
:root {
--primary-blue: #007bff; /* Azul vibrante */
--secondary-dark: #2c3e50; /* Gris oscuro para texto/fondos */
--accent-green: #28a745; /* Verde para acentos */
--text-light: #fefefe;
--text-dark: #333;
--background-light: #f4f7f6;
--card-background: #ffffff;
--border-color: #e0e0e0;
--font-family-sans: 'Arial', sans-serif;
--font-family-heading: 'Arial', sans-serif; /* Puedes importar una fuente de Google Fonts */
}
/* Reset Básico */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family-sans);
line-height: 1.6;
color: var(--text-dark);
background-color: var(--background-light);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Botones genéricos */
.btn {
display: inline-block;
padding: 12px 25px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease, color 0.3s ease;
border: none;
cursor: pointer;
text-align: center;
}
.btn-primary {
background-color: var(--primary-blue);
color: var(--text-light);
}
.btn-primary:hover {
background-color: #0056b3;
}
.btn-secondary {
background-color: transparent;
color: var(--primary-blue);
border: 2px solid var(--primary-blue);
margin-left: 15px;
}
.btn-secondary:hover {
background-color: var(--primary-blue);
color: var(--text-light);
}
.btn-dark {
background-color: var(--secondary-dark);
color: var(--text-light);
margin-top: 20px;
}
.btn-dark:hover {
background-color: #1a252f;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
margin-bottom: 20px;
color: var(--secondary-dark);
}
.hero-content h1.slogan-ciberseguridad {
font-family: 'Open Sans', sans-serif; /* Puedes elegir otra fuente de Google Fonts */
font-size: 1.2em; /* Hace la letra más pequeña que un h1 normal */
font-weight: 400; /* La hace más fina que la negrita predeterminada */
color: #555; /* Un color suave para que no sea tan dominante */
text-align: center; /* Centra el texto */
margin-top: 20px; /* Espaciado superior */
margin-bottom: 20px; /* Espaciado inferior */
line-height: 1.5; /* Espaciado entre líneas para mejor lectura */
max-width: 800px; /* Limita el ancho para que la frase no sea demasiado larga en una línea */
margin-left: auto; /* Centra el bloque si tiene un max-width */
margin-right: auto;
/* Opcional: si el fondo es oscuro, cambia el color a blanco o un tono claro */
color: #eee;
}
/* Importar la fuente 'Open Sans' de Google Fonts (añadir en la sección de tu HTML) */
/* */
/* Títulos de sección */
.section-tag {
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
color: #666;
}
.section-title {
font-size: 2.8em;
margin-bottom: 40px;
font-weight: 700;
}
.text-center {
text-align: center;
}
/* --- Hero Section --- */
.hero-section {
background-image: url('../styles/images/background.jpg'); /* Fondo oscuro relacionado con ciberseguridad */
background-size: cover;
background-position: center;
color: var(--text-light);
text-align: center;
padding: 150px 20px;
position: relative;
}
.hero-section::before { /* Superposición oscura para mayor legibilidad */
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6); /* Ajusta la opacidad */
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.hero-content h1 {
font-size: 3.5em;
margin-bottom: 20px;
color: var(--text-light);
}
.hero-content p {
font-size: 1.3em;
margin-bottom: 30px;
line-height: 1.5;
}
/* --- Features Section --- */
.features-section {
padding: 80px 0;
text-align: center;
}
.features-section h2 {
font-size: 2.5em;
margin-bottom: 60px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.feature-item {
background-color: var(--card-background);
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
text-align: center;
transition: transform 0.3s ease;
display: block;
}
.feature-item:hover {
transform: translateY(-5px);
}
.feature-item i {
font-size: 3.5em;
color: var(--primary-blue);
margin-bottom: 20px;
}
.feature-item h3 {
font-size: 1.5em;
margin-bottom: 15px;
color: var(--secondary-dark);
}
.feature-item p {
color: #666;
}
/* --- Latest Blog Section (similar a las tarjetas del ejemplo anterior) --- */
.latest-blog-section {
padding: 80px 0;
background-color: #f0f3f6; /* Un fondo ligeramente diferente */
text-align: center;
}
.latest-blog-section h2 {
font-size: 2.5em;
margin-bottom: 50px;
}
.blog-cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
justify-content: center;
}
.blog-card {
background-color: var(--card-background);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
text-align: left;
}
.blog-card img {
width: 50%;
height: 150px;
object-fit: cover;
display: block;
margin: 0 auto;
}
.blog-card h3 {
padding: 20px 20px 10px;
font-size: 1.3em;
margin-bottom: 5px;
line-height: 1.3;
color: var(--secondary-dark);
}
.blog-card .date {
color: #888;
font-size: 0.9em;
padding: 0 20px 10px;
}
.blog-card p {
padding: 0 20px 20px;
font-size: 1em;
color: #555;
flex-grow: 1; /* Permite que el párrafo crezca para alinear el botón */
}
.blog-card .read-more {
display: inline-block;
color: var(--primary-blue);
text-decoration: none;
font-weight: bold;
padding: 0 20px 20px;
transition: color 0.3s ease;
}
.blog-card .read-more:hover {
color: #0056b3;
}
.contact-feedback-container {
background-color: #ffffff;
border-left: 5px solid #4CAF50; /* Green accent bar */
border-radius: 5px;
padding: 25px 30px;
margin: 20px 0;
font-family: 'Roboto', sans-serif;
color: #333;
line-height: 1.6;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.contact-feedback-container .icon-wrapper {
margin-bottom: 15px;
}
.contact-feedback-container .icon-wrapper .fas {
font-size: 40px;
color: #4CAF50;
}
.contact-feedback-container .main-message {
font-size: 22px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 10px;
}
.contact-feedback-container p {
margin: 0 0 10px 0;
font-size: 16px;
max-width: 600px; /* Constrain width for better readability */
}
.contact-feedback-container .email-address a {
color: #007bff;
text-decoration: none;
font-weight: bold;
font-size: 17px;
}
.contact-feedback-container .email-address a:hover {
text-decoration: underline;
color: #0056b3;
}
/* For Font Awesome, you'd link it in your HTML like this: */
/* */
/* --- Blog Post Page Styles --- */
.blog-post-page {
padding: 60px 0;
}
.blog-post-detail {
background-color: var(--card-background);
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.post-detail-image {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 30px;
}
.post-title {
font-size: 2.5em;
margin-bottom: 15px;
color: var(--secondary-dark);
}
.post-date {
font-size: 0.95em;
color: #888;
margin-bottom: 30px;
}
.post-date i {
margin-right: 8px;
color: var(--primary-blue);
}
.post-content p {
margin-bottom: 1.5em;
line-height: 1.7;
font-size: 1.1em;
color: #444;
}
/* --- Blog List Page Styles --- */
.blog-list-page {
padding: 80px 0;
}
.blog-overview-section {
text-align: center;
}
.blog-overview-section .blog-cards-container {
margin-top: 50px;
}
/* --- BLOG SECTION STYLES (para replicar la imagen) --- */
.blog-page-content {
/* No hay padding superior/inferior en main, ya que el hero section lo maneja */
padding-top: 0;
padding-bottom: 0;
}
.blog-hero-section {
background-image: url('../assets/images/background_ladrillos_azules.png'); /* ¡Tu imagen de ladrillos! */
background-size: cover; /* Cubre todo el área */
background-position: center top; /* Ajusta la posición de la imagen de fondo */
background-repeat: no-repeat;
padding: 100px 0 160px; /* Ajusta el padding para dar espacio al contenido y debajo de las tarjetas */
position: relative; /* Para el ::before */
}
/* Superposición para darle ese tono azulado oscuro y semi-transparente */
.blog-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 50, 100, 0.4); /* Un azul oscuro con opacidad */
z-index: 1;
}
.blog-hero-content {
position: relative;
z-index: 2; /* Asegura que el contenido esté sobre la superposición */
color: var(--text-light); /* Texto blanco para el encabezado */
max-width: 1000px; /* Ancho para el texto del encabezado */
margin-left: 100px; /* Mueve el texto hacia la izquierda como en la imagen */
text-align: left; /* Alineación del texto */
}
.section-tag-small {
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px; /* Más pegado al título */
color: var(--accent-blue-light); /* Un azul claro para el tag */
font-weight: 600;
}
.blog-title {
font-family: var(--font-family-heading);
font-size: 3.5em; /* Tamaño grande para el título */
font-weight: 700;
color: var(--text-light); /* Color blanco */
margin-bottom: 0; /* No margin-bottom para no empujar demasiado */
}
/* --- Grid de Posts (se superpone al fondo) --- */
.blog-posts-grid-section {
position: relative; /* Para que las tarjetas se sitúen respecto a esta sección */
z-index: 3; /* Asegura que las tarjetas estén por encima de la sección hero */
margin-top: -100px; /* ¡Mueve las tarjetas hacia arriba para superponerse al fondo! */
padding-bottom: 80px; /* Espaciado debajo de las tarjetas */
}
.blog-cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
justify-content: center;
}
/* Estilos de la tarjeta individual del blog (ajustes para la imagen) */
.blog-card {
background-color: var(--card-background); /* Fondo blanco */
border-radius: 10px; /* Bordes más redondeados */
overflow: hidden; /* Asegura que la imagen no se salga */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
display: flex;
flex-direction: column;
text-align: left;
transition: transform 0.3s ease; /* Efecto hover */
}
.blog-card:hover {
transform: translateY(-5px); /* Pequeño levantamiento */
}
.blog-card img {
width: 50%;
height: 220px; /* Altura fija para las imágenes */
object-fit: cover; /* Recorta la imagen para cubrir el espacio */
display: block;
}
.blog-card .card-content {
padding: 20px;
flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
display: flex;
flex-direction: column;
}
.blog-card .card-content h3 {
font-size: 1.4em; /* Títulos un poco más grandes */
margin-bottom: 10px;
line-height: 1.3;
color: var(--secondary-dark);
font-weight: 600; /* Ligeramente más negrita */
}
.blog-card .card-content h3 a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
.blog-card .card-content h3 a:hover {
color: var(--primary-blue); /* Cambia de color al pasar el ratón */
}
.blog-card .card-content .date {
color: #888;
font-size: 0.9em;
margin-bottom: 15px;
text-transform: uppercase; /* Fechas en mayúsculas */
letter-spacing: 0.5px;
}
.blog-card .card-content .summary {
font-size: 1em;
color: #555;
line-height: 1.6;
margin-bottom: 20px; /* Espacio antes del botón o fin */
flex-grow: 1; /* Para que el texto ocupe el espacio y los botones se alineen abajo */
}
/* Responsive design */
@media (max-width: 992px) {
.news-card {
width: calc(50% - 20px); /* 2 columnas en tablets */
}
}
@media (max-width: 768px) {
.news-card {
width: 100%; /* 1 columna en móviles */
}
}
footer {
text-align: center;
padding: 20px;
margin-top: 40px;
background-color: #f0f0f0;
color: #555;
font-size: 0.9em;
}
/* Estilos para la página de detalle de noticia */
.full-content {
margin-top: 20px;
line-height: 1.8;
}
.full-content img {
max-width: 100%;
height: auto;
display: block;
margin: 15px auto;
border-radius: 5px;
}
/* Sección General de Noticias (para el título "Últimas Noticias del Blog") */
.latest-news-section h2 {
color: #333; /* Color oscuro para el título */
text-align: center; /* Centrar el título */
margin-bottom: 30px; /* Espacio debajo del título */
font-size: 2em; /* Tamaño de fuente más grande */
}
/* Contenedor de las tarjetas de noticias */
.news-cards-container {
display: flex; /* Usar Flexbox para organizar las tarjetas */
flex-wrap: wrap; /* Permitir que las tarjetas salten a la siguiente línea si no caben */
gap: 20px; /* Espacio entre las tarjetas (horizontal y vertical) */
justify-content: center; /* Centrar las tarjetas dentro del contenedor */
padding: 0 20px; /* Un poco de padding en los lados */
max-width: 1200px; /* Ancho máximo para el contenedor */
margin: 0 auto 40px auto; /* Centrar el contenedor y darle margen inferior */
}
/* Estilo para cada tarjeta individual de noticia */
.news-card {
background-color: #ffffff; /* Fondo blanco para la tarjeta */
border: 1px solid #e0e0e0; /* Borde sutil, similar al de "Ciberseguridad" */
border-radius: 10px; /* Bordes redondeados, un poco más que los 8px anteriores */
padding: 25px; /* Espaciado interno generoso */
width: calc(33.33% - 20px); /* Para 3 columnas: (100% / 3) - espacio entre ellas */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada pero suave, como en la imagen */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave al pasar el ratón */
display: flex; /* Usar flexbox dentro de la tarjeta para alinear contenido */
flex-direction: column; /* Apilar elementos verticalmente */
justify-content: space-between; /* Empuja el "Leer más" hacia abajo si hay espacio */
min-height: 250px; /* Altura mínima para que las tarjetas tengan un tamaño similar */
}
.news-card:hover {
transform: translateY(-8px); /* Efecto de "levantar" al pasar el ratón */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Sombra más intensa al pasar el ratón */
}
/* Estilos para los elementos dentro de la tarjeta */
.news-card h3 {
margin-top: 0;
font-size: 1.3em; /* Título de la noticia un poco más grande */
line-height: 1.3;
color: #333; /* Color del texto del título */
}
.news-card h3 a {
text-decoration: none; /* Quitar subrayado del enlace del título */
color: inherit; /* Que el color del enlace sea el del h3 */
display: block; /* Para que el enlace ocupe todo el espacio del título */
}
.news-card .date {
font-size: 0.85em;
color: #888; /* Color de fecha más claro */
margin-bottom: 15px; /* Más espacio debajo de la fecha */
}
.news-card p {
font-size: 0.95em; /* Texto del extracto un poco más grande */
line-height: 1.6;
color: #555; /* Color del texto del extracto */
flex-grow: 1; /* Permite que el párrafo ocupe el espacio disponible */
margin-bottom: 20px; /* Espacio antes del "Leer más" */
}
.news-card a.read-more { /* Le damos una clase específica al "Leer más" */
display: inline-block;
padding: 8px 0; /* Un poco de padding */
color: #007bff; /* Color del enlace principal */
text-decoration: none;
font-weight: bold;
border-bottom: 2px solid transparent; /* Para un efecto de subrayado al pasar el ratón */
transition: border-color 0.3s ease;
}
.news-card a.read-more:hover {
border-color: #007bff; /* Subrayado azul al pasar el ratón */
}
/* Estilos para el enlace "Ver todas las noticias" */
.view-all-link {
text-align: center;
margin-top: 40px;
margin-bottom: 50px; /* Más margen inferior para separarlo del footer */
}
.view-all-link a {
font-size: 1.1em;
color: #007bff;
text-decoration: none;
font-weight: bold;
}
.view-all-link a:hover {
text-decoration: underline;
}
.donation-section {
display: flex; /* Use flexbox for centering */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically (if the parent has a defined height) */
min-height: 50vh; /* Optional: Adjust this to center it vertically within a certain viewport height */
padding: 20px; /* Add some padding around the section */
box-sizing: border-box; /* Include padding in the element's total width and height */
}
.donation-card {
background-color: #ffffff; /* White background for the card */
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
padding: 40px; /* Internal padding within the card */
text-align: center; /* Center text and inline elements within the card */
max-width: 400px; /* Max width for the card */
width: 100%; /* Ensure it takes full width up to max-width */
}
.donation-title {
font-family: 'Lato', sans-serif; /* Example modern font */
font-size: 1.8em;
font-weight: 600;
color: #333;
margin-bottom: 15px;
}
.donation-text {
font-family: 'Open Sans', sans-serif; /* Example modern font */
font-size: 1em;
color: #555;
margin-bottom: 30px;
line-height: 1.5;
}
.paypal-button {
display: inline-flex; /* Use flexbox for icon and text alignment */
align-items: center; /* Vertically align icon and text */
background-color: #0070ba; /* PayPal blue */
color: #ffffff;
padding: 12px 25px;
border-radius: 5px;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 1.1em;
transition: background-color 0.3s ease;
}
.paypal-button:hover {
background-color: #005ea6; /* Darker blue on hover */
}
.paypal-icon {
width: 24px; /* Size of the PayPal icon */
height: 24px;
margin-right: 10px; /* Space between icon and text */
/* You might need to adjust this if your PayPal image is an SVG or requires specific styling */
}
body {
font-family: 'Arial', sans-serif; /* Fuente para el cuerpo del texto */
line-height: 1.6;
margin: 0;
padding: 0;
background-image: url("images/fondoarticulos.svg");
background-repeat: repeat;
background-size: 300px;
background-color: #ffffff;
/* Elimina 'display: flex;' y 'justify-content: center;' de aquí */
}
.document-container {
width: 100%;
max-width: 900px; /* Ancho para simular un documento */
margin: 20px auto;
background-color: #fff; /* Fondo blanco para el "documento" */
box-shadow: 0 0 15px rgba(0,0,0,0.08); /* Sombra suave para parecer un documento */
padding: 40px 60px; /* Más padding para los bordes */
box-sizing: border-box;
}
.main-title {
font-family: 'Roboto', sans-serif;
font-size: 2.5em;
color: #2c3e50; /* Un azul oscuro para el título principal */
text-align: center;
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 2px solid #eee;
}
.section {
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid #f0f0f0; /* Separador sutil entre secciones */
}
.section:last-of-type {
border-bottom: none; /* Sin borde en la última sección */
}
.section-heading {
font-family: 'Roboto', sans-serif;
font-size: 2em;
color: #007bff; /* Azul primario */
margin-top: 0;
margin-bottom: 25px;
}
.subsection-heading {
font-family: 'Roboto', sans-serif;
font-size: 1.5em;
color: #34495e; /* Un gris azulado para subtítulos */
margin-top: 30px;
margin-bottom: 15px;
}
.content-paragraph {
margin-bottom: 1.2em;
text-align: justify;
}
.config-item {
margin-bottom: 25px;
background-color: #f9f9f9;
padding: 15px;
border-left: 4px solid #5cb85c; /* Borde verde para parámetros */
border-radius: 4px;
}
.config-item strong {
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
color: #007bff;
display: block;
margin-bottom: 10px;
}
.config-item ul {
list-style: none;
padding-left: 20px;
margin: 0;
}
.config-item ul li {
margin-bottom: 8px;
position: relative;
}
.config-item ul li::before {
content: '§'; /* Símbolo para los puntos de la lista */
color: #5cb85c;
position: absolute;
left: -20px;
}
.config-item ul li strong {
display: inline; /* Para que el "Valor por defecto" sea en línea */
font-weight: 700;
color: #333;
}
.config-item ul li a {
color: #007bff;
text-decoration: none;
}
.config-item ul li a:hover {
text-decoration: underline;
}
.code-path {
font-family: 'Courier New', Courier, monospace;
background-color: #e9ecef;
padding: 2px 5px;
border-radius: 3px;
color: #c0392b; /* Rojo oscuro para rutas */
}
.highlight-value {
font-weight: bold;
color: #d35400; /* Naranja para valores destacados */
}
.highlight-status {
font-weight: bold;
color: #27ae60; /* Verde para 'On' / 'Habilitado' */
}
.highlight-recommendation {
font-weight: bold;
color: #2980b9; /* Azul para "Valor recomendado" */
}
.references {
margin-top: 60px;
border-top: 2px solid #eee;
padding-top: 30px;
}
.references-list {
list-style: none;
padding: 0;
}
.references-list li {
margin-bottom: 10px;
font-size: 0.95em;
}
.references-list li a {
color: #007bff;
text-decoration: none;
}
.references-list li a:hover {
text-decoration: underline;
}
/* CSS */
.image-container {
text-align: center; /* Centra la imagen horizontalmente */
/* Opcional: si quieres que el contenedor tenga un ancho máximo */
max-width: 900px; /* Ejemplo de ancho máximo del contenedor */
margin: 20px auto; /* Centrar el contenedor en la página */
}
.image-container img {
/* Ajusta estos valores para agrandar la imagen */
width: 90%; /* Porcentaje del ancho del contenedor */
/* O */
/* width: 700px; /* Ancho fijo en píxeles */
height: auto; /* Mantiene la proporción de la imagen, MUY IMPORTANTE */
display: block; /* Para que margin: auto funcione si la imagen se sale del text-align: center */
margin: 0 auto; /* Centra la imagen dentro del contenedor si esta no ocupa el 100% */
/* Si quieres que la imagen cubra completamente un área y se recorte lo necesario */
/* object-fit: cover; */
/* height: 400px; /* Una altura fija si usas object-fit: cover */
/* Otros estilos de borde/sombra si los usas */
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.form-group {
margin-bottom: 20px;
text-align: left;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 700;
color: #34495e;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 1em;
transition: border-color 0.3s;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #3498db;
outline: none;
}
textarea {
resize: vertical;
min-height: 120px;
}
button {
display: block;
width: 20%;
padding: 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 1.1em;
font-weight: 700;
cursor: pointer;
transition: background-color 0.3s ease;
margin-left: auto;
margin-right: auto;
}
button:hover {
background-color: #2980b9;
}
.message {
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
text-align: center;
font-weight: 700;
}
.message.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.message.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.message ul {
list-style: none;
padding: 0;
margin: 0;
}
.message li {
margin-bottom: 5px;
}
/* Estilos generales para el botón de hamburguesa (visible solo en móvil) */
.menu-toggle {
display: none; /* Oculto por defecto, se muestra en media query */
background: none;
border: none;
cursor: pointer;
padding: 10px;
font-size: 24px; /* Tamaño del icono */
color: #333; /* Color del icono */
z-index: 1001; /* Asegura que esté por encima del menú */
}
/* Estilos para el menú de navegación en móvil (oculto por defecto) */
.main-nav {
display: none; /* Oculta el menú por defecto en pantallas pequeñas */
/* Posicionamiento para que ocupe todo el ancho o parte del viewport */
position: absolute; /* O 'fixed' si quieres que se quede fijo al scrollear */
top: 60px; /* Ajusta este valor si tu header tiene una altura diferente */
left: 0;
width: 100%;
background-color: #f9f9f9; /* Color de fondo del menú desplegado */
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
z-index: 1000; /* Para que esté por encima del contenido principal */
padding: 10px 0;
text-align: center; /* Centra los elementos del menú */
transition: transform 0.3s ease-out; /* Para una animación suave */
transform: translateY(-100%); /* Oculto por encima de la pantalla */
}
.main-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.main-nav li {
padding: 10px 0;
border-bottom: 1px solid #eee; /* Separador entre elementos del menú */
}
.main-nav li:last-child {
border-bottom: none;
}
.main-nav a {
text-decoration: none;
color: #333;
font-size: 1.2em;
display: block; /* Para que el padding y el border-bottom funcionen en todo el li */
padding: 5px 0;
}
/* Estilos cuando el JavaScript añade la clase 'active' */
.main-nav.active {
display: block; /* Hace visible el menú */
transform: translateY(0); /* Lo baja a su posición normal */
}
/* Media Query para escritorio: */
@media (min-width: 768px) { /* Ajusta este breakpoint si tu diseño cambia en otro ancho */
.menu-toggle {
display: none; /* Oculta el botón de hamburguesa en escritorio */
}
.main-nav {
display: flex; /* O 'block' o 'grid' según cómo lo quieras en escritorio */
position: static; /* Restaura la posición normal */
top: auto;
left: auto;
width: auto;
background-color: transparent;
box-shadow: none;
padding: 0;
transform: translateY(0); /* Asegura que esté visible sin transform */
}
.main-nav ul {
display: flex; /* Para que los elementos del menú se alineen horizontalmente */
}
.main-nav li {
border-bottom: none; /* No hay separadores en escritorio */
margin-left: 20px; /* Espacio entre los elementos del menú */
padding: 0;
}
.main-nav a {
font-size: 1em; /* Tamaño de fuente normal en escritorio */
padding: 0;
}
}
/* Estilos para el efecto 'is-active' en el botón (opcional, si quieres animar la hamburguesa a una X) */
/* Esto requiere CSS adicional para transformar el icono de 'fa-bars' a una 'X' */
/* Puedes buscar "css hamburger menu to x animation" para ejemplos */
/* Media Query para responsividad: la imagen se hará más pequeña en pantallas chicas */
@media (max-width: 768px) {
.image-container img {
width: 100%; /* Asegura que la imagen no desborde en pantallas pequeñas */
}
}
/* Optional: Basic responsive adjustments */
@media (max-width: 480px) {
.donation-card {
padding: 30px 20px;
}
.donation-title {
font-size: 1.5em;
}
.paypal-button {
font-size: 1em;
padding: 10px 20px;
}
}
/* --- Media Queries para responsividad --- */
@media (max-width: 992px) {
.news-card {
width: calc(50% - 20px); /* 2 columnas en tablets */
}
}
@media (max-width: 768px) {
.news-card {
width: 90%; /* 1 columna en móviles, con algo de margen */
margin: 0 auto; /* Centrar la tarjeta */
}
.news-cards-container {
flex-direction: column; /* Apila las tarjetas verticalmente en pantallas pequeñas */
align-items: center; /* Centra los elementos apilados */
}
}
/* Media Queries para responsividad */
@media (max-width: 992px) {
.blog-hero-content {
margin-left: 50px;
}
.blog-title {
font-size: 3em;
}
}
@media (max-width: 768px) {
.blog-hero-section {
padding: 80px 0 120px;
}
.blog-hero-content {
margin-left: 20px; /* Más margen en móviles */
text-align: center; /* Centrar el texto en móviles */
margin-right: 20px; /* También margen derecho */
}
.blog-title {
font-size: 2.5em;
}
.blog-posts-grid-section {
margin-top: -80px; /* Ajusta el solapamiento */
}
.blog-cards-container {
grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
padding: 0 20px; /* Padding para las tarjetas */
}
.blog-card .card-content {
padding: 15px;
}
}
@media (max-width: 480px) {
.blog-hero-section {
padding: 60px 0 100px;
}
.blog-title {
font-size: 2em;
}
.section-tag-small {
font-size: 0.8em;
}
.blog-card img {
height: 180px;
}
}
/* Media Queries generales */
@media (max-width: 992px) {
.hero-content h1 {
font-size: 2.8em;
}
.hero-content p {
font-size: 1.1em;
}
.section-title {
font-size: 2.2em;
}
.features-section h2, .latest-blog-section h2 {
font-size: 2em;
}
}
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2.2em;
}
.hero-content p {
font-size: 1em;
}
.btn {
padding: 10px 20px;
}
.btn-secondary {
margin-left: 0;
margin-top: 15px;
display: block; /* Para que los botones del hero se apilen */
}
.feature-grid {
grid-template-columns: 1fr;
}
.blog-cards-container {
grid-template-columns: 1fr;
}
.contact-form-section {
padding: 30px;
}
.post-detail-image {
height: 250px;
}
.post-title {
font-size: 1.8em;
}
}
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
.hero-section {
padding: 100px 15px;
}
.hero-content h1 {
font-size: 1.8em;
}
.section-title {
font-size: 1.8em;
}
.feature-item h3 {
font-size: 1.3em;
}
.blog-card h3 {
font-size: 1.1em;
}
}
/* Estilos para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
.contenedor {
width: 100%; /* O un valor porcentual */
padding: 0 15px; /* Añadir un poco de padding lateral */
}
/* Ajusta otros elementos según sea necesario */
h1 {
font-size: 1.8em;
}
p {
font-size: 1em;
}
}