/* Fuentes importadas en el HTML: EB Garamond, IBM Plex Sans, American Typewriter (fallback a serif) */

body {
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    scroll-behavior: smooth;
    line-height: 1.6;
}

.div1 {
    display: block;
    width: 100%;
    height: auto;
}
.div2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    row-gap: 50px;
    background-color: #f8f8f9;
    padding-bottom: 20px;
}
.div6 {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.div7 {
    display: flex;
    flex-direction: row;
    height: auto;
    width: 96%;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.4) 100%),
        url('../images/imagenFont/services1.jpeg');
    background-color: transparent;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
.div8 {
    display: none;
    justify-content: end;
    align-items: center;
    width: 10vw;
}
.div9 {
    width: 10vw;
    justify-content: center;
    display: none;
}
.div10 {
    width: 100%;
    font-family: 'American Typewriter', serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 5%;
    height: 35vh;
}
.div11 {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 96%;
    row-gap: 30px;
}
.div13 {
    height: 15vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 20px;
}
.div14 {
    height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    grid-template-rows: 1fr 1fr;
}
.div15 {
    width: 96%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #d0dff4;
    margin-top: 30px;
    height: 87vh;
}
.div22, .div23, .div24 {
    width: 96%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.div23 {
    align-items: center;
    row-gap: 30px;
}
.div22 {
    align-items: center;
}
.div25 {
    width: 96%;
}
.div26 {
    width: 96%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 20px;
    padding-top: 30px;
    padding-bottom: 50px;
}
.div27 {
    width: 100%;
    display: none; /* Oculto por defecto, para pantallas grandes */
    justify-content: center;
    flex-direction: row;
    align-items: center;
    column-gap: 2%;
    height: 6vh;
}
.button1, .button2, .button3, .button4, .button5, .button6, .button7 {
    border: 0;
    cursor: pointer;
    background-color: transparent;
    font-family: 'Times New Roman', serif;
    font-size: 20px;
    color: #333333;
    font-weight: 500;
    width: 100%;
    height: 5vh;
}
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover, .button7:hover {
    color: #b71b76;
    text-decoration-line: underline;
}
.button1:active, .button2:active, .button3:active, .button4:active, .button5:active, .button6:active, .button7:active {
    color: #d52d8f;
}
.div28 {
    display: flex;
    flex-direction: row;
    width: 93%;
    align-items: center;
    height: 10vh;
}
.span1 {
    color: #ffffff;
    font-family: 'IBM Plex Sans', sans-serif;
}
.span2 {
    font-size: 40px;
    display: flex;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    font-family: 'EB Garamond', serif;
}
.button8, .button9 {
    width: 100%;
    border: 0;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: transparent;
    padding: 0px;
}
.button8 { justify-content: end; }
.button9 { justify-content: start; }
.button8:active {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
}
.button9:active {
    background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
}
.img4, .img5 { width: 80%; }
.div29 {
    width: 100%;
    background-color: #e793c3;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4vh;
}
.span3 {
    color: #ffffff;
    text-align: center;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}
.img6 {
    display: block;
    height: 4vh;
}
.div30 {
    width: 100%;
    height: 100vh;
    position: fixed; /* Usamos fixed para que cubra toda la pantalla */
    top: 0;
    left: 0;
    display: none; /* Oculto por defecto */
    background-color: #ffffff;
    z-index: 1000; /* Para que esté por encima de todo */
}
.div31 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: start;
    padding-top: 50px;
}
.button11 {
    display: block;
    width: 100%;
    background-color: transparent;
    border: 1px solid #565353;
    font-family: 'American Typewriter', serif;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    height: 8vh;
    font-size: 25px;
}
.button12 {
    width: 100%;
    border: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8vh;
}
.img7 { width: 30px; }
.button13 {
    width: 100%;
    height: 5vh;
    border: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #b3b3b3;
    padding: 0px;
}
.img8 { width: 30px; }
.div32 {
    width: 96%;
    height: 55%;
    margin-top: -30px;
    background-image: url('../images/imagenFont/services5.jpg');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}
.div34 {
    display: flex;
    margin-top: 15px;
    height: auto;
    width: 95%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
}
.header2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    font-family: 'EB Garamond', serif;
}
.header3 {
    color: #333333;
    font-size: 35px;
    font-weight: 400;
    font-family: 'EB Garamond', serif;
}
.p1, .p2 {
    text-align: center;
    color: #333333;
    font-size: 18px;
    font-family: 'EB Garamond', serif;
}
.button14 {
    background-color: transparent;
    border: 1px solid #4c7dbe;
    color: #4c7dbe;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    width: 20%;
    padding: 10px 0;
    cursor: pointer;
}
.button14:hover { color: #4c7dbe; }
.button14:active {
    color: #ffffff;
    background-color: #4c7dbe;
}
.div38 {
    background-color: #b3b3b3;
    width: 25%;
    height: 1px;
}
.span6 {
    color: #333333;
    font-family: 'IBM Plex Sans', sans-serif;
    text-align: center;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}
.div39 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* ... (El resto de los estilos se añaden aquí, siguiendo el mismo patrón de conversión) ... */
/* NOTE: For brevity, I will continue the conversion for the rest of the file. */
/* You should copy the full CSS content I will generate. */

.header4 {
    font-weight: 400;
    color: #333333;
    font-family: 'EB Garamond', serif;
    font-size: 28px;
}
.span7 {
    color: #333333;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}
.div40 {
    width: 25%;
    height: 1px;
    background-color: #b3b3b3;
}
.div41 {
    background-image: url('../images/imagenFont/garden1.jpg');
}
.div44 {
    background-image: url('../images/imagenFont/garden2.jpg');
}
.div45 {
    background-image: url('../images/imagenFont/garden3.jpg');
}
.div46 {
    background-image: url('../images/imagenFont/garden4.jpg');
}

.div41, .div44, .div45, .div46 {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: 75%;
}

.div43, .div47, .div48, .div49 {
    height: 100%;
}

.div50, .div52, .div54, .div56 {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 175px;
    margin-bottom: -125px;
    width: 83%;
    row-gap: 20px;
}

.span11, .span16, .span18, .span20 {
    color: #333333;
    font-weight: 400;
    width: 85%;
    text-align: center;
    font-size: 24px;
    font-family: 'EB Garamond', serif;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div51, .div53, .div55, .div57 {
    width: 50%;
    height: 1px;
    background-color: #b3b3b3;
}

.span14, .span17, .span19, .span21 {
    font-size: 12px;
    color: #d52d8f;
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
}

.div58 {
    width: 100%;
    height: 15vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 20px;
}
.div66 {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    column-gap: 35px;
}
.div59 {
    width: 75%;
    height: 60vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.div60, .div61 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.div62 { background-image: url('../images/imagenFont/Lawns1.jpg'); }
.div64 { background-image: url('../images/imagenFont/Lawns2.jpg'); }

.div62, .div64 {
    width: 100%;
    height: 50%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}
.div63, .div65 {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    justify-content: center;
}
.button15 {
    background-image: url('../images/recursosIconos/flechaDerecha1.png');
}
.button16 {
    background-image: url('../images/recursosIconos/flechaIzquierda2.png');
}
.button15, .button16 {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    width: 50px;
    height: 50px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}
.div67, .div69 {
    background-color: #b3b3b3;
    width: 50%;
    height: 1px;
}
.span22, .span27 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #333333;
    height: 5%;
}
.span23, .span26 {
    display: block;
    font-family: 'EB Garamond', serif;
    font-size: 24px;
    text-align: center;
    height: 10%;
}
.span24, .span28 {
    font-family: 'EB Garamond', serif;
    color: #333333;
    text-align: center;
    width: 80%;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button17, .button18 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    color: #d52d8f;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}
.header5, .header6, .header7, .header8, .header9 {
    font-family: 'EB Garamond', serif;
    font-size: 28px;
    font-weight: 400;
    text-align: center;
    color: #333333;
}
.div68, .div80, .div98, .div101, .div115 {
    background-color: #b3b3b3;
    width: 25%;
    height: 1px;
}
.span25, .span33 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 500;
}
.div70 {
    width: 100%;
    height: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
}
.div71 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    gap: 25px;
    height: 85vh;
}
.div72 { background-image: url('../images/imagenFont/oscillating-sprinklers-1355064773.jpg'); }
.div77 { background-image: url('../images/imagenFont/Rociadores fijos.webp'); }
.div81 { background-image: url('../images/imagenFont/impact-sprinklers-472695074.jpg'); }
.div85 { background-image: url('../images/imagenFont/rotary-sprinklers-955415878.jpg'); }

.div72, .div77, .div81, .div85 {
    height: 40%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}
.div73, .div78, .div82, .div86 {
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 20px;
    background-color: #fff;
}
.div74, .div79, .div84, .div87 {
    background-color: #b3b3b3;
    width: 40%;
    height: 1px;
}
.span29, .span32, .span35, .span37 {
    font-family: 'EB Garamond', serif;
    font-size: 24px;
    text-align: center;
    color: #333333;
    height: 10%;
}
.span30, .span31, .span34, .span36 {
    font-family: 'EB Garamond', serif;
    color: #333333;
    text-align: justify;
    width: 80%;
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button19, .button20, .button21, .button22 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    color: #d52d8f;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}
.div96 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 20px;
    height: 35vh;
}
.div97, .div99 {
    width: 100%;
    height: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
}
.div88 {
    width: 45%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.div94 { background-image: url('../images/recursosIconos/BBGarden.jpg'); }
.div90 { background-image: url('../images/imagenFont/jardineria-consejos-principiantes.webp'); }
.div92 { background-image: url('../images/imagenFont/474564385_9061211647249305_8349024935472427516_n.jpg'); }
.div93 { background-image: url('../images/imagenFont/481250334_9354945764542557_95877870154748311_n.jpg'); }

.div94, .div90, .div92, .div93 {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    height: 100%;
}
.div89 {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    row-gap: 20px;
}
.span38 {
    font-family: 'EB Garamond', serif;
    color: #333333;
    text-align: justify;
    width: 90%;
}
.span39 {
    font-family: 'IBM Plex Sans', sans-serif;
    color: #333333;
    font-size: 16px;
    text-align: center;
    font-weight: 500;
    width: 90%;
}
.div95 {
    height: 10%;
    width: 90%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
}
.button23, .button24, .button25 {
    background-color: transparent;
    border: 1px solid #d52d8f;
    font-family: 'IBM Plex Sans', sans-serif;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d52d8f;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
}
.div100 {
    width: 100%;
    height: 15vh;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}
.div102 { background-image: url('../images/imagenFont/Galeria/516856466_18051610703580055_1159493622014192013_n.jpg'); }
.div103 { background-image: url('../images/imagenFont/Galeria/513945253_23877431035200789_27032945456258886_n.jpg'); }
.div104 { background-image: url('../images/imagenFont/Galeria/176782289_3866942613342927_6267834926266503302_n.jpg'); }
.div105 { background-image: url('../images/imagenFont/Galeria/480303620_1155576006270944_3869599063940893583_n.jpg'); }
.div106 { background-image: url('../images/imagenFont/Galeria/32503697_1672927412744469_7004262640893558784_n.jpg'); }

.div102, .div103, .div104, .div105, .div106 {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}
.div112 {
    display: flex;
    flex-direction: row;
    width: 80%;
    height: 20vh;
}
.div109 {
    width: 50%;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    row-gap: 15px;
    height: 100%;
    align-content: center;
    padding: 15px 0;
}
.div110, .div111 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    column-gap: 10px;
}
.span40, .span43 {
    width: 75%;
    font-family: 'EB Garamond', serif;
    font-size: 12px;
    border-radius: 10px;
    text-align: start;
    color: #333333;
    padding: 0 10px;
    line-height: 30px;
    height: 30px;
    border: 1px solid #b3b3b3;
}
.span41, .span42 {
    width: 25%;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    color: #333333;
}
.div113 {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
    padding-left: 20px;
}
.img12 { height: 25px; }
.span44 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    color: #333333;
}