/* =========================================================
   ANDI ROSSI NUTRICIÓN DEPORTIVA
   MOBILE.CSS
   Solo modifica pantallas de hasta 900px
   ========================================================= */


/* Botón exclusivo para móvil: oculto en escritorio */
.hero-mobile-cta {
    display: none;
}


@media (max-width: 900px) {

    /* =====================================================
       SEGURIDAD GENERAL MOBILE
       ===================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 28px;
        padding-right: 28px;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .site-header {
        width: 100%;
    }

    .site-header .header-inner {
        position: relative;
        width: 100%;
    }

    .site-header .main-nav {
        display: none !important;

        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 28px;
        padding: 32px 24px;

        background: #F8F4F0;
        border-bottom: 1px solid rgba(31, 62, 77, 0.08);

        z-index: 1000;
    }

    .site-header .main-nav.open {
        display: flex !important;
    }

    .site-header .menu-toggle {
        display: block !important;
        flex-shrink: 0;
    }

    .site-header .header-cta {
        display: none !important;
    }

    .site-header .brand {
        flex-shrink: 1;
        min-width: 0;
    }

    .site-header .header-logo {
        display: block;
        max-width: 100%;
        height: auto;
    }


    /* =====================================================
       HERO — ESTRUCTURA
       ===================================================== */

    .hero {
        width: 100%;
        overflow: visible;
    }

    .hero-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 0 !important;

        column-gap: 0 !important;
        row-gap: 0 !important;
    }

    .hero-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding: 34px 0 0 0 !important;
    justify-content: flex-start !important;
}


    /* =====================================================
       HERO — CREDENCIAL
       ===================================================== */

    .hero-credential {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 14px 10px !important;

    margin-top: 0 !important;
    margin-bottom: 18px !important;

    font-size: 10.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.065em !important;
    text-align: center !important;

    white-space: nowrap !important;
}


    /* =====================================================
       HERO — NOMBRE
       ===================================================== */

    .hero-name {
        display: flex !important;
        align-items: baseline !important;

        gap: 10px !important;

        width: 100%;
        max-width: 100%;

        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }


    /* =====================================================
       HERO — TÍTULO
       ===================================================== */

    .hero-title {
        width: 100%;
        max-width: 100%;

        margin-top: 0 !important;
        margin-bottom: 14px !important;
    }

    .mobile-break {
        display: block;
    }


    /* =====================================================
       HERO — DESCRIPCIÓN
       ===================================================== */

    .hero-description {
        width: 100%;
        max-width: 100%;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /* =====================================================
       HERO — BOTÓN MOBILE
       ===================================================== */

    .hero-mobile-cta {
        display: inline-flex !important;

        align-items: center;
        justify-content: center;

        justify-self: start;
        align-self: start;

        width: fit-content !important;
max-width: 100% !important;

        margin-top: 18px;
        margin-bottom: 24px;

        padding: 13px 22px;

        background: #1F3E4D;
        color: #FAF7F2;

        border-radius: 10px;

        font-weight: 600;
        line-height: 1.2;

        text-decoration: none;
        white-space: nowrap;
    }


    /* =====================================================
       HERO — FOTO
       ===================================================== */

    .hero-photo {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
        min-height: 410px !important;

        margin: 0 !important;

        grid-column: 1 !important;
    }

}
/* =====================================================
   SOBRE MÍ — MOBILE
   ===================================================== */

@media (max-width: 900px) {

    #sobre-mi {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;

        padding: 64px 0 72px !important;

        overflow: visible !important;
    }

    #sobre-mi .split-grid {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        gap: 34px !important;
        align-items: stretch !important;
    }

    /* Primero aparece el contenido */
    #sobre-mi .section-copy {
        order: 1;

        display: block !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;

        position: static !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    #sobre-mi .eyebrow {
    display: block !important;

    margin: 0 !important;
    padding-bottom: 18px !important;

    color: #4F7584;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.15em;
}

    #sobre-mi .section-copy h2 {
        margin: 0 0 22px !important;

        font-size: clamp(2rem, 8.8vw, 2.55rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.035em !important;
    }

    #sobre-mi .section-copy p {
        width: 100%;
        max-width: none;

        margin: 0 0 15px;

        font-size: 1rem;
        line-height: 1.7;
    }

    #sobre-mi .section-copy p:last-child {
        margin-bottom: 0;
    }

    /* La fotografía aparece debajo del texto */
    #sobre-mi .placeholder-photo {
        order: 2;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 5;

        margin: 0 !important;

        position: relative !important;
        inset: auto !important;
    }
}
/* =====================================================
   CONSULTAS — MOBILE
   ===================================================== */

@media (max-width: 900px) {

    /* -------------------------------------------------
       ESTRUCTURA GENERAL
       ------------------------------------------------- */

    #consultas {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;

        padding: 56px 0 72px !important;

        overflow: hidden;
    }

    #consultas * {
        min-width: 0;
    }

    #consultas > .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 28px !important;
        padding-right: 28px !important;
    }


    /* -------------------------------------------------
       ENCABEZADO
       ------------------------------------------------- */

    #consultas .section-heading {
        width: 100%;
        max-width: none;

        margin: 0 0 38px !important;
        padding: 0 !important;
    }

    #consultas .section-heading .eyebrow {
        display: block;

        margin: 0 !important;
        padding-bottom: 16px !important;

        color: #4F7584;
    }

    #consultas .section-heading h2 {
        margin: 0 0 20px !important;

        font-size: clamp(2.15rem, 9vw, 2.65rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.035em !important;
    }

    #consultas .section-heading p {
        margin: 0;

        font-size: 1rem !important;
        line-height: 1.65 !important;
    }


    /* -------------------------------------------------
       TARJETAS PRINCIPALES
       ------------------------------------------------- */

    #consultas .service-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;

        gap: 26px !important;
    }

    #consultas .service-card {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 32px 24px 30px !important;

        border-radius: 24px !important;

        overflow: hidden;
    }

    #consultas .service-kicker {
        display: block;

        margin: 0 0 20px !important;
    }

    #consultas .service-card h3 {
        margin: 0 0 22px !important;

        font-size: 2rem !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em !important;
    }

    #consultas .service-card > p {
        margin: 0 0 28px !important;

        font-size: 1rem !important;
        line-height: 1.7 !important;
    }


    /* -------------------------------------------------
       BENEFICIOS E ÍCONOS
       ------------------------------------------------- */

    #consultas .service-benefits {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;

        margin: 0 0 28px !important;
        padding: 4px 0 !important;

        gap: 0 !important;

        border-top: 1px solid rgba(31, 62, 77, 0.12);
        border-bottom: 1px solid rgba(31, 62, 77, 0.12);
    }

    #consultas .service-benefit {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        align-items: center !important;

        width: 100% !important;

        gap: 16px !important;
        padding: 16px 0 !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(31, 62, 77, 0.10) !important;

        text-align: left !important;
    }

    #consultas .service-benefit:last-child {
        border-bottom: 0 !important;
    }

    #consultas .service-benefit img {
        display: block;

        width: 38px !important;
        height: 38px !important;

        margin: 0 !important;

        object-fit: contain;
    }

    #consultas .service-benefit span {
        width: 100%;

        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        font-weight: 600;

        text-align: left !important;
    }


    /* -------------------------------------------------
       PRECIO Y BOTÓN PRINCIPAL
       ------------------------------------------------- */

    #consultas .service-meta {
        display: flex !important;
        flex-direction: column !important;

        margin: 0 0 22px !important;
    }

    #consultas .service-meta strong {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    #consultas .service-meta span {
        margin-top: 8px;

        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

    #consultas .service-card > .button {
        width: 100% !important;
        max-width: none !important;

        min-height: 54px;

        margin: 0 !important;
    }


    /* -------------------------------------------------
       TÍTULO “OTRAS CONSULTAS”
       ------------------------------------------------- */

    #consultas .other-consultas-heading {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 58px auto 0 !important;
        padding: 0 28px !important;

        gap: 14px !important;

        text-align: center;
    }

    #consultas .other-consultas-line {
        flex: 1 1 auto;

        width: auto !important;
        min-width: 24px;
    }

    #consultas .other-consultas-heading span {
        flex: 0 0 auto;

        max-width: 130px;

        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        letter-spacing: 0.15em !important;

        text-align: center;
    }

    #consultas .other-consultas-subtitle {
        width: calc(100% - 56px) !important;
        max-width: 440px !important;

        margin: 18px auto 32px !important;
        padding: 0 !important;

        font-size: 1rem !important;
        line-height: 1.65 !important;
        font-weight: 400 !important;

        text-align: center !important;
    }


    /* -------------------------------------------------
       TARJETAS SECUNDARIAS
       ------------------------------------------------- */

    #consultas .secondary-services-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 28px !important;

        gap: 26px !important;
    }

    #consultas .secondary-service-card {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 30px 24px !important;

        border-radius: 24px !important;

        overflow: hidden;
    }

    #consultas .secondary-service-card h3 {
        width: 100%;

        margin: 0 0 18px !important;

        font-size: 1.75rem !important;
        line-height: 1.18 !important;
        letter-spacing: -0.025em !important;

        text-align: center !important;
        overflow-wrap: normal;
    }

    #consultas .secondary-service-description {
        width: 100%;

        margin: 0 0 22px !important;

        font-size: 1rem !important;
        line-height: 1.65 !important;

        text-align: center !important;
    }


    /* -------------------------------------------------
       OPCIONES DE SEGUIMIENTO
       ------------------------------------------------- */

    #consultas .followup-options {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;
    }

    #consultas .followup-option {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;

        padding: 24px 0 !important;

        border: 0 !important;
    }

    #consultas .followup-option + .followup-option {
        border-top: 1px solid rgba(31, 62, 77, 0.12) !important;
    }

    #consultas .followup-label {
        margin-bottom: 8px;
    }

    #consultas .followup-option strong {
        display: block;

        margin-bottom: 16px;

        font-size: 2rem !important;
        line-height: 1.2;
    }

    #consultas .secondary-button {
        width: 100% !important;
        max-width: 300px !important;

        min-height: 52px;

        margin: 0 auto 10px !important;
    }

    #consultas .followup-note {
        display: block;

        font-size: 0.9rem !important;
        line-height: 1.45 !important;

        text-align: center;
    }


    /* -------------------------------------------------
       NOTAS INFERIORES
       ------------------------------------------------- */

    #consultas .secondary-service-footnote {
        width: 100%;

        margin: 0 !important;
        padding: 24px 0 0 !important;

        border-top: 1px solid rgba(31, 62, 77, 0.12);

        font-size: 0.9rem !important;
        line-height: 1.55 !important;

        text-align: left !important;
    }


    /* -------------------------------------------------
       CONSULTA PUNTUAL
       ------------------------------------------------- */

    #consultas .single-service-price {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 20px 0 32px !important;
    }

    #consultas .single-service-label {
        margin-bottom: 8px;

        text-align: center;
    }

    #consultas .single-service-price strong {
        display: block;

        margin-bottom: 18px;

        font-size: 2rem !important;
        line-height: 1.2;
    }

    #consultas .single-service-price .secondary-button {
        margin-bottom: 0 !important;
    }
}
/* Prolonga la línea existente sobre el primer beneficio */

#consultas .service-benefit {
    padding-left: 16px !important;
}

#consultas .service-benefit:first-child {
    border-left: 1px solid rgba(31, 62, 77, 0.12) !important;
}
/* =====================================================
   ANTROPOMETRÍA — MOBILE
   ===================================================== */

@media (max-width: 900px) {

    #antropometria {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;

        padding: 52px 0 48px !important;

        overflow: visible !important;
    }

    #antropometria .split-grid {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        gap: 34px !important;
        align-items: stretch !important;
    }

    #antropometria .section-copy {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #antropometria .eyebrow {
        display: block;

        margin: 0 !important;
        padding-bottom: 16px !important;

        color: #4F7584;
    }

    #antropometria .section-copy h2 {
        margin: 0 0 22px !important;

        font-size: clamp(2.15rem, 9vw, 2.65rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.035em !important;
    }

    #antropometria .section-copy > p {
        margin: 0 0 18px !important;

        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    #antropometria .clean-list {
        margin: 14px 0 26px !important;
        padding: 0 !important;
    }

    #antropometria .clean-list li {
        padding-top: 9px !important;
        padding-bottom: 9px !important;

        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    #antropometria .anthro-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        width: fit-content !important;
        min-height: 52px;

        margin: 0 !important;
        padding: 0 24px !important;
    }

    #antropometria .placeholder-photo {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 4 / 5;

        margin: 0 !important;

        position: relative !important;
        inset: auto !important;
    }
}
/* =====================================================
   CÓMO TRABAJO — MOBILE
   ===================================================== */

@media (max-width: 900px) {

    .process {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;

        padding: 52px 0 48px !important;
    }

    .process > .container {
        width: 100%;
        max-width: 100%;

        padding-left: 28px !important;
        padding-right: 28px !important;
    }


    /* Encabezado */

    .process .section-heading {
        width: 100%;
        max-width: none;

        margin: 0 0 28px !important;
        padding: 0 !important;
    }

    .process .eyebrow {
        display: block;

        margin: 0 !important;
        padding-bottom: 16px !important;
    }

    .process .section-heading h2 {
        margin: 0 !important;

        font-size: clamp(2.15rem, 9vw, 2.65rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.035em !important;
    }


    /* Pasos */

    .process .process-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100%;

        gap: 0 !important;
    }

    .process .process-grid article {
        width: 100%;

        margin: 0 !important;
        padding: 24px 0 26px !important;

        border-top: 1px solid rgba(31, 62, 77, 0.18) !important;
    }

    .process .process-grid article > span {
        display: block;

        margin: 0 0 12px !important;

        line-height: 1.2;
    }

    .process .process-grid article h3 {
        margin: 0 0 12px !important;

        font-size: 1.35rem !important;
        line-height: 1.3 !important;
    }

    .process .process-grid article p {
        margin: 0 !important;

        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .process .process-grid article:last-child {
        padding-bottom: 0 !important;
    }
}
/* =====================================================
   EXPERIENCIAS — MOBILE
   ===================================================== */

@media (max-width: 900px) {

    #experiencias {
        padding-top: 52px !important;
    }

    #experiencias .section-heading {
        margin-top: 0 !important;
        margin-bottom: 36px !important;
        padding-top: 0 !important;
    }
}
/* =====================================================
   CONTACTO — MOBILE
   ===================================================== */

@media (max-width: 900px) {

    #contacto {
        width: 100%;

        padding: 44px 0 34px !important;
    }

    #contacto .contact-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: calc(100% - 40px) !important;
        max-width: 560px !important;

        margin: 0 auto !important;
        padding: 38px 24px !important;

        gap: 28px !important;

        border-radius: 28px !important;

        overflow: hidden;
    }

    #contacto .contact-copy,
    #contacto .contact-action {
        width: 100% !important;
        min-width: 0 !important;
    }

    #contacto .contact-copy h2 {
        max-width: 100%;

        overflow-wrap: normal;
    }

    #contacto .contact-action {
        display: flex;
    }

    #contacto .contact-whatsapp {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 0 16px !important;

        gap: 12px !important;

        font-size: 0.98rem !important;
        text-align: center !important;
        white-space: nowrap;
    }

    #contacto .contact-whatsapp .whatsapp-icon {
        flex: 0 0 auto;
    }


    /* Reduce el espacio superior del footer */

    .site-footer {
        padding-top: 32px !important;
    }
}
/* Cierre de Experiencias y división con Contacto */

@media (max-width: 900px) {

    #experiencias {
        padding-bottom: 30px !important;

        border-bottom: 1px solid rgba(31, 62, 77, 0.14);
    }
}
/* =====================================================
   COMPENSACIÓN DEL HEADER EN ENLACES INTERNOS
   ===================================================== */

@media (max-width: 900px) {

    #inicio,
    #sobre-mi,
    #consultas,
    #antropometria,
    #experiencias,
    #contacto {
        scroll-margin-top: 76px !important;
    }
}
/* =====================================================
   HERO UNIFICADO — MOBILE
   Nueva estructura Hero + Sobre mí
   ===================================================== */

@media (max-width: 900px) {

    /* -------------------------------------------------
       ESTRUCTURA GENERAL
       ------------------------------------------------- */

    .hero {
        width: 100% !important;
        padding: 32px 0 60px 0 !important;
        overflow: visible !important;
    }

    .hero-unified {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        padding-left: 28px !important;
        padding-right: 28px !important;

        gap: 0 !important;
    }

    /*
       Convertimos el contenido en elementos
       independientes para poder intercalar
       la foto entre la descripción y los párrafos.
    */

    .hero-unified-copy {
        display: contents !important;
    }


    /* -------------------------------------------------
       1. CREDENCIAL
       ------------------------------------------------- */

    .hero-credential {
        order: 1 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 18px 0 !important;
        padding: 12px 10px !important;

        font-size: 10.5px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.065em !important;

        text-align: center !important;
        white-space: nowrap !important;
    }


    /* -------------------------------------------------
       2. NOMBRE
       ------------------------------------------------- */

    .hero-name {
        order: 2 !important;

        display: flex !important;
        align-items: baseline !important;

        width: 100% !important;

        margin: 0 0 16px 0 !important;

        gap: 10px !important;
    }


    /* -------------------------------------------------
       3. TÍTULO PRINCIPAL
       ------------------------------------------------- */

    .hero-title {
    order:3 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 14px 0 !important;
    font-size:clamp(1.65rem,6.8vw,2rem) !important;
    line-height:1.12 !important;
}


    /* -------------------------------------------------
       4. DESCRIPCIÓN
       ------------------------------------------------- */

    .hero-description {
        order: 4 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 30px 0 !important;

        font-size: 1rem !important;
        line-height: 1.65 !important;
    }


    /* -------------------------------------------------
       5. FOTO
       ------------------------------------------------- */

    .hero-unified-photo {
        order: 5 !important;

        width: 100% !important;
        height: auto !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 0 30px 0 !important;
    }

    .hero-unified-photo .about-photo {
        width: 100% !important;
        max-width: 330px !important;

        height: auto !important;
        aspect-ratio: 330 / 480 !important;

        object-fit: cover !important;
        object-position: center 55% !important;

        display: block !important;

        border-radius: 14px !important;

        border: 1px solid rgba(79, 117, 132, 0.45) !important;

        box-shadow:
            0 0 0 5px rgba(79, 117, 132, 0.10) !important;
    }


    /* -------------------------------------------------
       6. TEXTO SOBRE MÍ
       ------------------------------------------------- */

    .hero-about-copy {
        order: 6 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
    }

    .hero-about-copy p {
        width: 100% !important;

        margin: 0 !important;

        font-size: 1rem !important;
        line-height: 1.7 !important;
        font-weight: 500 !important;
    }

    .hero-about-copy p + p {
        margin-top: 14px !important;
    }


    /* -------------------------------------------------
       7. CTA
       ------------------------------------------------- */

    .hero-mobile-cta {
        order: 7 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: fit-content !important;
        max-width: 100% !important;

        margin: 24px 0 30px 0 !important;
        padding: 13px 22px !important;

        background: #1F3E4D !important;
        color: #FAF7F2 !important;

        border-radius: 10px !important;

        font-weight: 600 !important;
        line-height: 1.2 !important;

        text-decoration: none !important;
        white-space: nowrap !important;
    }


    /* -------------------------------------------------
       PILARES
       ------------------------------------------------- */

    /*
       En desktop agregamos 30px para separar
       la línea del Hero. En mobile no necesitamos
       ese margen adicional.
    */

    .pillars {
        margin-top: 0 !important;
    }
}
/* =========================================
   FONDO GENERAL - MOBILE
   ========================================= */

@media (max-width: 900px) {
    html,
    body {
        background-color: #F8F4F0 !important;
    }
}