.elementor-122 .elementor-element.elementor-element-8a3a609{--display:flex;}.elementor-122 .elementor-element.elementor-element-8a3a609:not(.elementor-motion-effects-element-type-background), .elementor-122 .elementor-element.elementor-element-8a3a609 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #003011 0%, #FFFFFF 100%);}.elementor-122 .elementor-element.elementor-element-aa064d5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-122 .elementor-element.elementor-element-84781fa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-122 .elementor-element.elementor-element-84781fa:not(.elementor-motion-effects-element-type-background), .elementor-122 .elementor-element.elementor-element-84781fa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}/* Start custom CSS for html, class: .elementor-element-06b8f6f */<style>
/* Contenedor principal del Hero de Nosotros */
/* Se establece un fondo oscuro base para contrastar los textos blancos, listo para que la imagen de fondo sea superpuesta */
.nosotros-hero-section {
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
   /* Fondo oscuro base */
}

/* Contenedor del contenido */
.nosotros-hero-content {
    max-width: 850px;
    text-align: center;
    z-index: 2;
}

/* Tipografía optimizada para contraste sobre fondos oscuros */
.nosotros-hero-title {
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.6);
}

.nosotros-hero-description {
    color: #E4E8EC;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 40px;
    text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.7);
}

/* Interfaz de Botones */
.nosotros-hero-actions {
    display: flex;
    justify-content: center;
}

.btn-primary-outline {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid #8CC63F; /* Borde verde claro corporativo */
    transition: all 0.3s ease;
}

.btn-primary-outline:hover {
    background-color: #8CC63F;
    color: #12181B;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(140, 198, 63, 0.3);
}

/* Comportamiento Responsivo */
@media (max-width: 768px) {
    .nosotros-hero-section {
        min-height: 60vh;
    }

    .nosotros-hero-title {
        font-size: 2.2rem;
    }
    
    .nosotros-hero-description {
        font-size: 1.1rem;
    }
    
    .nosotros-hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    
    .btn-primary-outline {
        width: 100%;
    }
}
</style>

<section class="nosotros-hero-section">
    <div class="nosotros-hero-content">
        <h1 class="nosotros-hero-title">Atención Prehospitalaria en Medellín</h1>
        <p class="nosotros-hero-description">Estabilizamos al paciente en el lugar de la emergencia, antes de su ingreso al hospital. Personal entrenado y protocolos clínicos estandarizados, con cobertura en Medellín y el Valle de Aburrá.</p>
        <div class="nosotros-hero-actions">
            <a href="#operacion" class="btn-primary-outline">Conocer el servicio</a>
        </div>
    </div>
</section>/* End custom CSS */