@import url(https://fonts.googleapis.com/css2?family=Lilita+One&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);

:root {
    --bordeau: #562130;
    --rojo: #f3bebe;
    --rojoClaro: #fd6e6e;
    --rojomarron: #8B0000;
   
    --verdeClaro: #4a8a65;
   
}


* {
    scroll-behavior: smooth;
}


header{
    background-color: white;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    background-image: url('../img/banner 1.avif');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    opacity: 0.9;
    
}


nav {
    text-transform: uppercase;
}

.sm-border-top {
    border-top: 2px solid white; /* Aplica el borde en tamaño small y abajo */
}

/* Oculta el borde en pantallas medianas y más grandes */
@media (min-width: 768px) { 
    .sm-border-top {
        border-top: none; /* Remueve el borde en pantallas medianas (md) y grandes (lg) */
    }
}

nav .btn {
    --bs-btn-color: color: var(--verdeClaro);
}

nav .btn:hover, nav .btn:active {
    color: white;
    background-color: var(--bordeau);
}

h1, h2, h3, nav {
    font-family: "Lilita One", sans-serif;
}

#banner {
    background-color: var(--verdeClaro);
    background-size: cover;
    background-position: top;
    height: 500px;
}

#banner h1 {
    color: var(--rojo);
    font-size: 6em;
    line-height: 100px;
    text-align: center;
    text-shadow: black 1px 1px 8px;
}

#banner p {
    font-size: large;
    text-align: center;
    color: white;
    margin-top: 30px;
}

@media (max-width: 768px) {
    #banner h1 {
        font-size: 4em; /* Reduce el tamaño del h1 en pantallas más pequeñas */
        line-height: 1.2em;
    }

    #banner p {
        font-size: medium; /* Reduce el tamaño del texto del párrafo en pantallas más pequeñas */
        padding: 0 10px; /* Agrega un pequeño padding para que no toque los bordes */
    }

    #banner {
        height: auto; /* Ajusta la altura automáticamente para que el contenido no se corte */
        padding-bottom: 20px; /* Agrega un pequeño espacio debajo del texto */
    }
}

.caja {
    background-color: #e8f5e9;/* Fondo semitransparente */
    padding: 20px; /* Espacio interno */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Borde borroso con sombra */
    backdrop-filter: blur(5px); /* Difumina el fondo detrás */
    width: 90%; /* Ajusta el ancho de la caja según tu preferencia */
    max-width: 850px; /* Ancho máximo para evitar que se expanda demasiado */
    margin: 0 auto; /* Centra la caja horizontalmente */
    margin-bottom: 15px;
}

.caja p{
    color: black;
}

.caja h2{
   color: var(--verdeClaro);
    text-shadow: rgb(166, 185, 148) 1px 1px 2px;
    text-align: center;
}

#segundaCaja {
    width: 100%; /* Ancho total de la sección */
    background-color: var(--rojo); /* Color de fondo, ajusta según tu variable */
    padding: 20px 0; /* Espacio interno */
}

.segundaCaja {
    display: flex; /* Usamos flexbox para el diseño en PC */
    flex-wrap: wrap; /* Permite que los artículos se ajusten en pantallas más pequeñas */
    justify-content: space-around; /* Espaciado entre los artículos */
    margin: 0 auto; /* Centra la caja horizontalmente */
}

.segundaCaja p{
    font-size: 18px;
}
.articuloCaja {
    width: calc(50% - 20px); /* Cada artículo ocupará el 50% menos el espacio entre ellos */
    margin: 15px; /* Margen entre artículos */
    box-sizing: border-box; /* Incluye padding y border en el cálculo de ancho */
}

h3 {
    font-size: 2em; /* Tamaño del h3 */
    color: #1565c0; /* Color para el h3 */
    text-align: center; /* Centrar el h3 */
}

@media (max-width: 768px) {
    .articuloCaja {
        width: 100%; /* En pantallas pequeñas, los artículos ocupan el 100% */
        margin: 10px 0; /* Espacio vertical entre los artículos */
    }
}


#plantas {
    background-color: #e8f5e9;/* Color de fondo verde claro */
    padding: 50px 0; /* Espacio interno arriba y abajo */
}

#plantas h2 {
    color: #2e7d32; /* Color del título */
}

#plantas p {
    color: #4caf50; /* Color del párrafo */
}

#plantas .btn {
    background-color: #81c784; /* Color de fondo del botón */
    color: #ffffff; /* Color del texto del botón */
    border: none; /* Sin borde */
    border-radius: 10px; /* Bordes redondeados */
    padding: 15px; /* Tamaño del botón */
    transition: background-color 0.3s ease; /* Transición suave al pasar el cursor */
}

#plantas .btn:hover {
    background-color: #66bb6a; /* Color de fondo al pasar el cursor */
    color: #ffffff; /* Mantener el color del texto */
}

#plantas .btn:focus {
    outline: none; /* Quita el borde al hacer clic */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Sombra ligera para destacar */
}




#scrollInicio {
    position: fixed;
    bottom: 60px; 
    right: 20px
}