.contenedor-imagen {
    width: 100%;
    height: 27rem; /* Ajusta la altura a lo que necesites */
    position: relative;
    overflow: hidden; /* Oculta cualquier parte de la imagen que sobresalga */
  }

  .contenedor-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen rellene todo el contenedor sin deformarse */
    object-position: left center; /* Desplaza la imagen a la izquierda y la centra verticalmente */
    position: absolute;
  }
  .topbar-one__info__item__location, .topbar-one__info__item__email, .topbar-one__info__item__telephone, .uno__social {
    display: flex;
    align-items: center;
    gap: 5px;
  }


    #sidebar-sticky {
        position: sticky;
        top: 30px;
        z-index: 100;
        background-color: #fff;
        padding-bottom: 20px;
        align-self: flex-start;        /* puedes dejarlo aquí también */
    }

    /* ←←← ESTO ES CLAVE ←←← */
    .barra_izquierda {
        align-self: flex-start;        /* Más importante que ponerlo en el sticky */
        position: relative;            /* A veces ayuda */
    }

    /* Opcional pero recomendado */
    .page-wrapper,
    .mx-5.mt-3.ancho_mobile {
        overflow: visible;
    }
    .barra_izquierda {
        position: -webkit-sticky;     /* Para Safari */
        position: sticky;
        top: 30px;
        align-self: flex-start;
        z-index: 100;
    }

    #sidebar-sticky {
        background: #fff;
        padding-bottom: 30px;
    }
    

.accordion-button:focus {
        border-color: #024e2a;
    }
    .accordion-button:not(.collapsed) {
        background-color: #9ac4b0;
    }
    .accordion-button {
        border: 1px solid #e5e5e5;
        transition: all 0.3s ease;
    }

    /* Cuando el acordeón está abierto (no collapsed) */
    .accordion-button:not(.collapsed) {
        background-color: #f8f9fa;
        color: #024e2a;
        border-color: #024e2a !important;           /* Borde verde oscuro */
        box-shadow: none;
    }

    /* Cuando se hace focus o click (el anillo de enfoque) */
    .accordion-button:focus {
        border-color: #024e2a !important;
        box-shadow: 0 0 0 0.25rem rgba(2, 78, 42, 0.25) !important; /* Verde con transparencia */
        outline: none;
    }

    /* Hover opcional (mejora la experiencia) */
    .accordion-button:hover {
        background-color: #f1f3f2;
        border-color: #024e2a;
    }


.how-it-works {
    /* max-width: 800px;
    margin: 0 auto; */
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    /* padding: 20px; */
    background: #f8f9fa;
    border-radius: 2rem;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    /* border-left: 5px solid #024e2a; */
    align-items: baseline;
}

.step:hover {
    background: #f1f5f3;
    transform: translateX(8px);
}

.step-number {
    font-size: 1.0rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #a0d2ac;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(2, 78, 42, 0.1);
    flex-shrink: 0;
}

.step-content h6 {
    margin-bottom: 6px;
    color: #000000;
    /* font-weight: 600; */
}

.step-content p {
    margin: 0;
    color: #555;
    font-size: 1.02rem;
}


/* Cómo funciona */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
                                    
body {
    font-family: 'Inter', system-ui, sans-serif;
}

.hero-bg {
    background: linear-gradient(135deg, #0f766e 0%, #0f766e 50%, #0d9488 100%);
}

.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}

.section-title {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.1;
}