/* ============================================================
   FOOTER — Mobile first
   Base = móvil (.responsive-footer visible, .desktop-footer oculto)
   ============================================================ */

.entry-footer {display: none;}

.site-footer {
    --ff: 'Boston';
    --c-text: var(--black);
    --lh: 1.3;
    --gap: 24px;
    --gap-lg: 48px;
	
	margin-top: 70px;

    /* Ocultamos la versión desktop por defecto (móvil) */
    & .desktop-footer { display: none; }

    /* Todos los footers comparten esta base, sea cual sea su clase */
    & .footer-widgets div {
        & .responsive-footer,
        & .desktop-footer {
            background-color: var(--yellow);
            padding: 4.375rem 3rem;
			margin: 0;

            /* Reset general: de aquí heredan todos los hijos */
            p, a, ul {
                font-family: var(--ff);
                font-style: normal;
                font-weight: 400;
                color: var(--c-text);
                line-height: var(--lh);
                margin: 0;
                text-decoration: none;
            }

            & br { display: none; }

            & .pick-up-logo {
                margin-bottom: var(--gap-lg);

                & img { width: auto; height: 96px; }
            }

            & .title-subtitle { display: none; }
            & .only-subtitle  { margin-bottom: var(--gap-lg); }
            & .only-title     { margin-bottom: 30px; }

            & .widget_nav_menu ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            & strong {
                font-size: 20px;
                margin-bottom: var(--gap);
                /* font-family, color, line-height: del reset */
            }

            & p { font-size: 20px; }

            & .contact-form {
                & h3 {
                    font-weight: 700;
                    font-size: 24px;
                    line-height: 1.2;
                    margin: 0;
                }

                & .subtitle { font-size: 20px; }

                & .first-row {
                    display: grid;
                    gap: var(--gap);
                    margin-bottom: var(--gap);
                }

                & .second-row { margin-bottom: var(--gap); }

                & strong { margin-bottom: var(--gap); }

                & a, & strong {
                    font-weight: 700;
                    font-size: 20px;
                }

                & input, & textarea {
                    opacity: .4;
                    border: none;
                    border-bottom: 2px solid var(--black);
                    background: transparent;
                    font-family: var(--ff);
                    font-size: 14px;
                    line-height: var(--lh);
                    color: var(--c-text);
                    width: 100%;
                    height: 25px;
                    border-radius: 0;
					
					&:focus {outline: none;}
                }

                & button {
                    background-color: var(--black);
                    border: none;
                    border-radius: 24px;
                    display: flex;
                    align-items: center;
                    padding: 0 2.063rem;
                    height: 49px;
                    width: 175px;

                    & input {
                        font-family: var(--ff);
                        font-weight: 700;
                        font-size: 20px;
                        color: var(--yellow);
                        opacity: 1;
                        padding: 0;
						cursor: pointer;
                    }

                    & .wpcf7-spinner { display: none; }
                }
            }

            & .rrss-row {
                margin-top: var(--gap-lg);
                height: 43px;
                margin-bottom: var(--gap);

                & div {
                    display: flex;
                    justify-content: center;
                }
            }

            & .menu-menu-de-privacidad-container {
                display: flex;
                justify-content: center;
                text-align: center;
                margin-bottom: var(--gap);
            }
        }
    }
}


/* ============================================================
   TABLET (768px – 1024px) — solo lo que cambia
   ============================================================ */

@media (min-width: 768px) and (max-width: 1280px) {
    .site-footer {
        & .footer-widgets div {
            & .responsive-footer {
                padding: 3.125rem 3rem 10rem;

                & .title-subtitle {
                    display: block;
                    margin-bottom: 48px;
                }
                & .only-subtitle { display: none; }
                & .only-title    { display: none; }

                & .pick-up-logo {
                    margin-bottom: 60px;

                    & img { width: 425px; height: auto; }
                }

                & p { font-size: 23px; }

                & strong { font-size: 24px; }

                & .contact-form {
                    & h3 { font-size: 32px; margin-bottom: 48px; }
                    & .subtitle { font-size: 23px; }
                    & strong { font-size: 24px; margin-bottom: 48px; }
                    & input, & textarea { font-size: 23px; height: 30px; }

                    & .first-row {
                        grid-template-columns: 1fr 1fr;
                        margin-bottom: 48px;
                    }
                    & .second-row { margin-bottom: 48px; }
                }

                & .widget_nav_menu ul a { font-size: 23px; }

                & .menu-menu-de-privacidad-container { margin-bottom: 48px; }

                & .rrss-row {
                    margin-top: 80px;
                    margin-bottom: 48px;            
                }
            }
        }
    }
}


/* ============================================================
   DESKTOP (≥1025px) — solo lo que cambia
   ============================================================ */

@media (min-width: 1281px) {
    .site-footer {
        & .footer-widgets div {
            & .desktop-footer {
                display: flex;   /* sin !important: la base ya era display:none
                                    pero este selector es más específico por
                                    la media query... ver nota 👇 */
                padding: 5rem 5rem 4.375rem;
                /* background-color: var(--yellow) → ya viene de la base */

                & .title-subtitle {
                    display: block;
                    margin-top: 50px;
                    margin-bottom: 24px;
                }
                & .only-subtitle { display: none; }
                & .only-title    { display: none; }

                & .first-column {
                    padding-left: 1.875rem;

                    & .wp-image-44 {
                        width: 425px;
                        height: auto;
                        margin-bottom: 85px;
                    }
                }

                & .rrss-row { margin-bottom: 40px; height: auto; & div {justify-content: start;}}

                & .menu-menu-de-privacidad-container {
                    justify-content: start;
                    text-align: start;
                    margin-bottom: 35px;

                    & ul li a { font-size: 23px; }
                }

                & strong { font-size: 24px; }
                & p      { font-size: 23px; }

                & .contact-form {
                    & h3 { font-size: 32px; margin-bottom: 30px; }
                    & .subtitle { font-size: 23px; }
                    & strong { font-size: 24px; }
                    & input, & textarea { font-size: 23px; height: 35px; }

                    & .first-row {
                        grid-template-columns: 1fr 1fr;
                        margin-bottom: 35px;
                    }
                    & .second-row { margin-bottom: 50px; }
                }
            }

            /* En desktop la versión responsive se oculta */
            & .responsive-footer { display: none; }
        }
    }
}