/* --- Estilos para el Contenido Principal de la Página de Boilies --- */

/* Estilo para el título principal de la página (<h1>Nuestra Gama de Boilies</h1>) */
.contenido > h1 {
    font-family: 'Montserrat', sans-serif; /* Asegurando la fuente moderna */
    font-size: 2.2em; /* Tamaño de fuente prominente para el título principal */
    font-weight: 700; /* Un peso más bold para el título principal */
    color: var(--primary-color, #1a1a1a); /* Color oscuro principal, fallback a un negro suave */
    text-align: center; /* Centrado, como estaba antes */
    margin-top: 40px; /* Margen superior ajustado (original era 50px) */
    margin-bottom: 25px; /* Margen inferior aumentado para dar espacio al párrafo */
    letter-spacing: 0.5px; /* Espaciado entre letras sutil */
    line-height: 1.3;
    padding: 0 15px; /* Padding para evitar que el texto toque los bordes en pantallas pequeñas */
    /* font-variant: small-caps;  Eliminado para un look más estándar y moderno */
}

/* Estilo para el párrafo de introducción directamente bajo el div que sigue al h1 */
.contenido > h1 + div > p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem; /* Tamaño de fuente estándar y legible (original era 20px) */
    color: var(--dark-text, #454545); /* Color de texto oscuro pero no negro puro */
    line-height: 1.7; /* Altura de línea generosa para facilitar la lectura */
    text-align: left; /* Alineación a la izquierda para mejor legibilidad estándar */
    /* Si prefieres justificado: text-align: justify; pero asegúrate de que no cree ríos de espacio */
    max-width: 1200px; /* Ancho máximo para el párrafo para mejorar la legibilidad en pantallas anchas */
    margin-left: auto; /* Centrar el bloque de párrafo si tiene max-width */
    margin-right: auto; /* Centrar el bloque de párrafo si tiene max-width */
    margin-bottom: 30px; /* Espacio después del párrafo, antes de la rejilla de boilies */
    padding: 0 20px; /* Padding horizontal para que no toque los bordes */
}


/* --- Estilos para las Tarjetas de Boilies (Rejilla) --- */

/* Asegúrate de que la fuente 'Montserrat' esté cargada en tu HTML, 
   ya que la estamos aplicando a toda la tarjeta para un look moderno y consistente.
   Si 'Montserrat' no está disponible, se usará una fuente sans-serif genérica. */
.boilie-card {
    background-color: #fff; /* Fondo blanco para la tarjeta */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra más suave y moderna */
    overflow: hidden; /* Asegura que la imagen no se salga de los bordes redondeados */
    display: flex;
    max-width: 800px;    
    flex-direction: column; /* Apila imagen y contenido verticalmente */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    font-family: 'Montserrat', sans-serif; /* Aplicando la fuente principal a toda la tarjeta */
}

.boilie-card:hover {
    transform: translateY(-6px); /* Efecto de elevación sutil al pasar el mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada al hacer hover */
}

.boilie-card img {
    width: 100%;
    height: 220px; /* Altura fija para las imágenes */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
    display: block;
}

.boilies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas */
    gap: 30px; /* Espacio entre las tarjetas aumentado ligeramente */
    padding: 25px 15px; /* Padding alrededor de la rejilla */
    margin-top: 20px; /* Este margen es desde el elemento anterior, que ahora es el párrafo de intro */
}

.boilie-caption {
    padding: 20px 25px; /* Aumentado el padding horizontal para más aire */
    text-align: left;
    flex-grow: 1; /* Permite que la caption ocupe el espacio restante */
    display: flex;
    flex-direction: column;
}

.boilie-caption h3 {
    margin-top: 0;
    margin-bottom: 12px; /* Espacio después del título */
    font-size: 1.2em;  /* Tamaño de fuente moderno y legible para títulos */
    font-weight: 600; /* Peso semi-bold para buena jerarquía */
    color: var(--dark-text, #333); /* Usando la variable --dark-text si está definida, sino un gris oscuro */
    line-height: 1.35; /* Altura de línea para el título */
    letter-spacing: 0.3px; /* Ligero espaciado entre letras para modernidad */
}

.boilie-caption p {
    font-size: 0.9rem; /* Tamaño de fuente para párrafos, usando rem para accesibilidad */
    color: #505050; /* Color de texto para la descripción, un gris legible */
    line-height: 1.65; /* Altura de línea generosa para facilitar la lectura */
    margin-bottom: 20px; /* Espacio antes del botón */
    flex-grow: 1; /* Empuja el botón hacia abajo */
}

.boilie-button {
    display: inline-block;
    padding: 10px 20px; /* Padding del botón */
    background-color: var(--accent-color, #007bff); /* Usando --accent-color o un azul moderno */
    color: #fff; /* Texto del botón blanco */
    text-decoration: none;
    border-radius: 6px; /* Bordes ligeramente más redondeados */
    text-align: center;
    font-weight: 500; /* Peso medio para el texto del botón */
    transition: background-color 0.25s ease, transform 0.2s ease;
    margin-top: auto; /* Asegura que el botón esté al final */
    font-size: 0.85rem; /* Tamaño de fuente del botón */
    letter-spacing: 0.5px;
}

.boilie-button:hover {
    background-color: #0056b3; /* Un azul más oscuro para el hover (ajusta si usas variable) */
    /* Si --accent-color es #3498db, un tono más oscuro podría ser #287eb8 */
    /* Considera crear una variable --accent-color-dark para el hover */
    color: #fff;
    transform: translateY(-2px); /* Ligero levantamiento al pasar el mouse */
}

/* Ajustes responsivos */
@media screen and (max-width: 768px) { /* Ajustado el breakpoint para tabletas */
    .contenido > h1 {
        font-size: 1.8em; /* Reducir un poco el título principal en tabletas */
        margin-bottom: 20px;
    }
    .contenido > h1 + div > p {
        font-size: 0.95rem; /* Ligeramente más pequeño el párrafo de intro */
        padding: 0 15px;
    }
}

@media screen and (max-width: 620px) {
    .contenido > h1 {
        font-size: 1.6em; /* Título principal en móviles */
    }
    .contenido > h1 + div > p {
        font-size: 0.9rem; /* Párrafo de intro en móviles */
        text-align: left; /* Forzar izquierda en móvil si estaba justificado */
    }

    .boilies-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Ajuste para pantallas más pequeñas */
        gap: 20px;
        padding: 20px 10px;
    }
    .boilie-card img {
        height: 200px;
    }
    .boilie-caption {
        padding: 15px 20px;
    }
    .boilie-caption h3 {
        font-size: 1.15em;
    }
    .boilie-caption p {
        font-size: 0.85rem;
        line-height: 1.6;
    }
    .boilie-button {
        padding: 9px 18px;
        font-size: 0.8rem;
    }
}