/* Estilo para la sección del blog */
.blog-section {
    background-color: #E7E7E7; /* Color de fondo de la sección del blog */
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilo del título de la sección */
.blog-section h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #333;
}

/* Contenedor para las publicaciones del blog */
.blog-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Cuadrícula responsive */
    gap: 1.5rem;
}

/* Estilo para cada caja del blog */
.blog-box {
    background-color: #fff; /* Fondo blanco para las cajas */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

/* Imagen dentro de la caja del blog */
.blog-box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Contenido dentro de cada caja */
.blog-content {
    padding: 1rem;
}

/* Título de la publicación */
.blog-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0;
    color: #333;
}

/* Extracto de la publicación */
.blog-excerpt {
    font-size: 1rem;
    color: #555;
    margin: 1rem 0;
    line-height: 1.6;
}

/* Estilo para el enlace de "Leer más" */
.read-more {
    display: inline-block;
    font-size: 1rem;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.read-more:hover {
    text-decoration: underline;
}

/* Contenido completo del blog */
.blog-full-content {
    display: none; /* Oculta el contenido completo por defecto */
    padding: 1rem;
    background-color: #fff; /* Fondo blanco para el contenido completo */
    margin-top: 1rem;
}

/* Título del contenido completo */
.blog-full-content h3 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
}

/* Imagen dentro del contenido completo */
.blog-full-content img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

/* Oculta cajas cuando se expande un artículo */
.blog-box.hide {
    display: none;
}

/* Efecto hover en la caja del blog */
.blog-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Estilo para pantallas pequeñas */
@media (max-width: 768px) {
    .blog-box img {
        height: 150px;
    }
}

/* Botones de compartir */
.share-buttons {
    margin-top: 1rem;
    text-align: center;
}

/* Estilo para cada botón de compartir */
.share-button {
    display: inline-block;
    margin: 0 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: bold;
    transition: background-color 0.3s;
}

.share-button.facebook {
    background-color: #3b5998;
}

.share-button.instagram {
    background-color: #f2921d;
}

.share-button.linkedin {
    background-color: #0077b5;
}

.share-button:hover {
    opacity: 0.8;
}

/* Estilo para la sección del artículo */
section {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #E7E7E7;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Título del artículo */
h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #333;
    text-align: center;
}

/* Imagen del artículo */
img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 8px; /* Bordes redondeados */
}

/* Párrafos dentro del artículo */
p {
    font-size: 1.15rem; /* Ajuste para mejor legibilidad */
    margin-bottom: 2rem; /* Aumentado para mayor espaciado */
    color: #333;
    text-align: justify;
}

/* Negritas dentro del artículo */
strong {
    font-weight: bold;
    color: #007bff; /* Color azul similar al de Xataka */
}

/* Estilo para listas dentro del artículo */
ul {
    list-style-type: disc; /* Marcadores para listas */
    padding-left: 20px; /* Alineación de listas */
    margin-bottom: 2rem; /* Espaciado entre listas y párrafos */
}

li {
    margin-bottom: 1rem; /* Espacio entre ítems de la lista */
}

/* Clase de alineación */
.aline {
    text-align: justify;
    font-size: 1.15rem; /* Ajuste para mejor legibilidad */
    font-family: Arial, Helvetica, sans-serif;
}

.btn-ver-motos {
    margin: 30px auto; /* Centrar el botón horizontalmente */
    padding: 10px 20px; /* Tamaño más pequeño del botón */
    font-size: 1.2em; /* Texto más pequeño */
    background: linear-gradient(90deg, #56ab2f, #a8e063); /* Gradiente */
    color: #2c3e50; /* Color del texto */
    border: none; /* Sin borde */
    border-radius: 8px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar */
    transition: transform 0.3s ease, background 0.3s ease; /* Transiciones suaves */
    display: inline-block; /* Cambia a inline-block para que se ajuste al contenido */
    text-align: center; /* Centrar el texto del botón */
    text-decoration: none; /* Eliminar subrayado */
    width: auto; /* Ancho automático para que se ajuste al contenido */
    max-width: 300px; /* Ancho máximo para mantener un tamaño adecuado */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para profundidad */
}

.btn-ver-motos:hover {
    background: linear-gradient(90deg, #4caf50, #81c784); /* Cambiar gradiente en hover */
    transform: scale(1.05); /* Efecto de escalado al pasar el mouse */
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .btn-ver-motos {
        width: auto; /* Mantener el tamaño automático en móvil */
    }
}