.elementor-128 .elementor-element.elementor-element-8a3a609{--display:flex;}.elementor-128 .elementor-element.elementor-element-8a3a609:not(.elementor-motion-effects-element-type-background), .elementor-128 .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-128 .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-128 .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-128 .elementor-element.elementor-element-84781fa:not(.elementor-motion-effects-element-type-background), .elementor-128 .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 */
/* Start custom CSS for html, class: .elementor-element-38208bc *//* Contenedor principal de la sección de información (Fondo estrictamente blanco) */
.prehospitalaria-info-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    background-color: #FFFFFF;
}

/* Columna Izquierda: Imagen */
.prehospitalaria-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 450px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 84, 166, 0.08);
}

.prehospitalaria-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.prehospitalaria-image-wrapper:hover .prehospitalaria-img {
    transform: scale(1.03);
}

/* Columna Derecha: Contenido */
.prehospitalaria-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Nota: Si .section-title ya es global en tu CSS, puedes omitir esta regla para no duplicarla */
.section-title {
    color: #009245; /* Verde oscuro corporativo */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
}

.prehospitalaria-desc {
    color: #2C2C2C; /* Gris oscuro para legibilidad sobre fondo blanco */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Grid interno para características operativas */
.prehospitalaria-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 8px;
}

.prehospitalaria-item {
    border-left: 3px solid #00AEEF; /* Acento azul corporativo */
    padding-left: 20px;
    background: rgba(0, 174, 239, 0.02);
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 16px;
    border-radius: 0 8px 8px 0;
}

/* Nota: Si .item-title y .item-text son globales, puedes omitirlos */
.item-title {
    color: #0054A6; /* Azul oscuro corporativo */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.item-text {
    color: #2C2C2C;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Comportamiento Responsivo */
@media (max-width: 992px) {
    .prehospitalaria-info-section {
        grid-template-columns: 1fr;
        gap: 32px;
        margin: 60px auto;
    }

    .prehospitalaria-image-wrapper {
        min-height: 300px;
    }
}/* End custom CSS */