/* --- Page Header Banner --- */



.arn-page-header {

    position: relative;

    /* Altura del banner. Ajusta a 250px o 300px según prefieras */

    height: 300px; 

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background-color: #1a1a1a; /* Color de respaldo */

}



/* Imagen de fondo */

.arn-page-header__bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 0;

}



.arn-page-header__img {

    width: 100%;

    height: 100%;

    object-fit: cover; /* Asegura que cubra todo el espacio sin deformarse */

    object-position: center;

}



/* Overlay Oscuro */

.arn-page-header__overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    /* Capa negra con 60% de opacidad para que el texto resalte */

    background: rgba(0, 0, 0, 0.6); 

}



/* Contenido */

.arn-page-header__container {

    position: relative;

    z-index: 2; /* Encima del overlay */

    padding: 0 18px;

    text-align: center;

    max-width: 1200px;

    width: 100%;

}



.arn-page-header__title {

    margin: 0;

    color: #ffffff;

    font-size: 48px; /* Tamaño grande y legible */

    font-weight: 400; /* Estilo 'Light' como el resto de tu diseño */

    letter-spacing: -0.01em;

}

.arn-page-header__subtitle {

    margin: 0;

    color: #ffffff;

    font-size: 20px; /* Tamaño grande y legible */

    font-weight: 300; /* Estilo 'Light' como el resto de tu diseño */

    letter-spacing: -0.01em;

}




/* Responsividad */

@media (max-width: 720px) {

    .arn-page-header {

        height: 200px; /* Más bajo en móviles */

    }



    .arn-page-header__title {

        font-size: 27px;

    }

    .arn-page-header__subtitle {

        font-size: 14px;

    }

}



/* --- Quality Services Section --- */



.arn-quality {

    background-color: #ffffff;

    padding: 80px 0;

}



.arn-quality__container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 18px;

}



/* Header */

.arn-quality__header {

    text-align: center;

    margin-bottom: 60px;

}



.arn-quality__subtitle {

    display: block;

    font-size: 14px;

    color: var(--arn-color-primary); /* Azul corporativo */

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 12px;

    font-weight: 600;

}



.arn-quality__title {

    margin: 0;

    font-size: 42px;

    color: #111827;

    font-weight: 500; /* No muy grueso, según la imagen */

}



/* Grid Layout con Flexbox */
.arn-quality__grid {

display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 20px; /* Espacio entre tarjetas */

}


/* Estilo Base de la Tarjeta */

.arn-q-card {

background-color: #eff2f5; /* Gris claro suave como en la imagen */

padding: 32px 26px;

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

border-radius: 4px; /* Bordes ligeramente redondeados */

transition: transform 0.3s ease, box-shadow 0.3s ease;

width: 100%;

box-sizing: border-box;

min-height: 300px;

position: relative;

}


/* Elementos internos */

.arn-q-card__icon {

width: 44px;

height: 44px;

color: var(--arn-color-primary); /* #0b4d8a */

margin-bottom: 18px;

}


.arn-q-card__icon svg {

width: 100%;

height: 100%;

}


.arn-q-card__title {

margin: 0 0 12px 0;

font-size: 25px;

color: var(--arn-color-primary);

font-weight: 700;

}


.arn-q-card__desc {

    margin: 0 0 24px 0;

    font-size: 14px;

    line-height: 1.6;

    color: var(--arn-color-text-strong);

    flex-grow: 1; /* Empuja el enlace hacia abajo para alinearlos si el texto varía */

    max-height: 120px;

    overflow: hidden;

    position: relative;

}

.arn-q-card__desc::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 42px;

    background: linear-gradient(to bottom, rgba(239, 242, 245, 0), rgba(239, 242, 245, 1));

    pointer-events: none;

}

.arn-q-card__desc ul {

    margin: 0;

    padding-left: 18px;

    text-align: left;

}

.arn-q-card__desc li {

margin: 0 0 8px 0;

}

.arn-q-card.is-expanded {

transform: none;

box-shadow: 0 18px 40px rgba(0,0,0,0.14);

z-index: 30;

}

.arn-q-card.is-expanded:hover {

transform: none;

}

.arn-q-card.is-expanded .arn-q-card__desc {

max-height: none;

overflow: visible;

}

.arn-q-card.is-expanded .arn-q-card__desc::after {

display: none;

}

.arn-q-card__link {

font-size: 14px;

font-weight: 600;

color: var(--arn-color-primary);

text-decoration: none;

transition: color 0.2s;

}



.arn-q-card__link:hover {

color: var(--arn-color-primary-dark);

text-decoration: underline;

}



/* Responsividad */



@media (max-width: 900px) {

.arn-quality__grid {

grid-template-columns: repeat(2, minmax(0, 1fr));

}

.arn-q-card {

min-height: 360px;

}

}



@media (max-width: 600px) {

.arn-quality__grid {

grid-template-columns: 1fr;

}

.arn-q-card,

.arn-q-card--wide {

width: 100%;

}

.arn-q-card.is-expanded {

grid-column: auto;

}





.arn-quality__title {

font-size: 32px;

}

}



/* --- Why Choose Us Section --- */



.arn-why {

    background-color: #0B2038; /* Azul oscuro profundo */

    color: #ffffff;

    width: 100%;

}



.arn-why__grid {

    display: flex;

    min-height: 600px; /* Altura mínima para asegurar presencia */

}



/* Columna de Contenido */

.arn-why__content {

    flex: 1;

    padding: 80px 40px 80px 18px; /* Padding generoso */

    display: flex;

    justify-content: flex-end; /* Alinea el contenido interno hacia la derecha (cerca de la imagen) */

}



/* Contenedor interno para limitar el ancho del texto */

.arn-why__content-inner {

    max-width: 600px; /* Ancho máximo de lectura */

    width: 100%;

}



.arn-why__tagline {

    display: block;

    font-size: 14px;

    font-weight: 600;

    color: #0ea5e9; /* Cyan / Celeste brillante */

    margin-bottom: 16px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.arn-why__title {

    font-size: 40px;

    line-height: 1.1;

    margin: 0 0 24px 0;

    font-weight: 600;

    color: #ffffff;

}



.arn-why__desc {

    font-size: 15px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 48px;

}



/* Lista de Items */

.arn-why__list {

    display: flex;

    flex-direction: column;

    gap: 32px;

}



.arn-why__item {

    display: flex;

    gap: 20px;

    align-items: flex-start;

}



/* Iconos circulares */

.arn-why__icon {

    flex: 0 0 auto;

    width: 48px;

    height: 48px;

    background-color: #ffffff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #0B2038; /* El icono toma el color del fondo oscuro */

}



.arn-why__icon svg {

    width: 24px;

    height: 24px;

}



.arn-why__text-group {

    flex: 1;

}



.arn-why__item-title {

    font-size: 18px;

    font-weight: 600;

    margin: 0 0 8px 0;

    color: #ffffff;

}



.arn-why__item-desc {

    font-size: 14px;

    line-height: 1.6;

    margin: 0;

    color: rgba(255, 255, 255, 0.7);

}



/* Columna de Imagen */

.arn-why__image-col {

    flex: 1;

    position: relative;

    min-height: 400px; /* Altura mínima en caso de poco contenido */

}



.arn-why__img {

    width: 100%;

    height: 100%;

    object-fit: cover; /* Cubre todo el espacio disponible */

    display: block;

}



/* Responsividad */



@media (max-width: 960px) {

    .arn-why__grid {

        flex-direction: column; /* Apilar verticalmente */

    }



    .arn-why__content {

        padding: 60px 24px;

        justify-content: center; /* Centrar contenido en móvil */

    }

    

    .arn-why__content-inner {

        max-width: 100%; /* Aprovechar todo el ancho */

    }



    .arn-why__title {

        font-size: 32px;

    }



    .arn-why__image-col {

        height: 300px; /* Altura fija para la imagen en móvil */

        min-height: auto;

    }

}



/* --- Contact Section --- */



.arn-contact {

    background-color: #ffffff;

    padding: 100px 0;

}



.arn-contact__container {

    max-width: 1000px; /* Ancho un poco más contenido para este diseño específico */

    margin: 0 auto;

    padding: 0 18px;

}



.arn-contact__wrapper {

    display: flex;

    align-items: center; /* Alinea verticalmente al centro */

    gap: 60px; /* Espacio generoso entre imagen y texto */

}



/* Columna Izquierda: Imagen */

.arn-contact__image-col {

    flex: 0 0 350px; /* Ancho fijo para la imagen */

    height: 350px;

    border-radius: 4px;

    overflow: hidden;

    box-shadow: 0 20px 40px rgba(0,0,0,0.1);

}



.arn-contact__img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top center; /* Enfocar rostros usualmente */

}



/* Columna Derecha: Contenido */

.arn-contact__content-col {

    flex: 1;

}



.arn-contact__title {

    margin: 0 0 24px 0;

    font-size: 42px;

    font-weight: 600;

    color: var(--arn-color-primary); /* Azul #0b4d8a */

    line-height: 1.1;

}



.arn-contact__text-block p {

    margin: 0 0 16px 0;

    font-size: 15px;

    line-height: 1.6;

    color: var(--arn-color-text-strong);

}



.arn-contact__text-block p:last-child {

    margin-bottom: 40px;

}



/* Info Grid (Teléfono / Email) */

.arn-contact__info-grid {

    display: flex;

    gap: 40px;

    margin-bottom: 40px;

}



.arn-contact__item {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.arn-contact__icon {

    width: 32px;

    height: 32px;

    color: var(--arn-color-primary);

    margin-bottom: 12px;

}



.arn-contact__icon svg {

    width: 100%;

    height: 100%;

}



.arn-contact__label {

    margin: 0 0 4px 0;

    font-size: 14px;

    font-weight: 500;

    color: var(--arn-color-primary);

}



.arn-contact__link {

    font-size: 15px;

    color: var(--arn-color-text-strong);

    text-decoration: none;

    transition: color 0.2s;

}



.arn-contact__link:hover {

    color: var(--arn-color-primary);

}



/* Redes Sociales */

.arn-contact__socials {

    display: flex;

    gap: 20px;

    align-items: center;

}



.arn-contact__social-link {

    display: inline-flex;

    color: var(--arn-color-primary);

    width: 24px;

    height: 24px;

    transition: transform 0.2s, color 0.2s;

}



.arn-contact__social-link:hover {

    transform: translateY(-2px);

    color: var(--arn-color-primary-dark);

}



.arn-contact__social-link svg {

    width: 100%;

    height: 100%;

}



/* Responsividad */



@media (max-width: 900px) {

    .arn-contact__wrapper {

        flex-direction: column;

        align-items: flex-start;

        gap: 40px;

    }



    .arn-contact__image-col {

        width: 100%; /* Imagen ancho completo en móvil */

        height: auto;

        aspect-ratio: 16/9; /* Proporción rectangular */

        flex: none;

        max-width: 500px;

    }

}



@media (max-width: 600px) {

    .arn-contact {

        padding: 60px 0;

    }



    .arn-contact__title {

        font-size: 32px;

    }



    .arn-contact__info-grid {

        flex-direction: column;

        gap: 24px;

    }

}