/* =========================================================
   FENIX TELECOM - Web institucional: paquete visual de imagenes
   Se carga despues de landing.css. Solo presentacion.

   Las 4 imagenes son banners completos (3:1) con logo, texto e iconos
   incluidos en el arte, asi que NO se recortan en escritorio ni se les
   pone overlay encima. En movil se reencuadran (3:2) hacia el sujeto
   principal con object-position propio, sin cortar rostros.
========================================================= */

/* Hero: sin foto oscura de datacenter; solo degradado azul cielo. */
.hero-section{
    min-height:auto;
    background-image:
        radial-gradient(circle at 12% -10%, rgba(255,255,255,.45), transparent 42%),
        linear-gradient(160deg, #0b3a7a 0%, #1e63c9 46%, #38bdf8 100%);
}

.hero-section::before{
    background:linear-gradient(90deg, rgba(7,22,36,.55) 0%, rgba(15,76,129,.28) 100%);
}

.hero-section .container{
    padding-top:56px;
    padding-bottom:110px;
}

/* Badges sobre el hero azul: texto blanco para que se lean bien. */
.hero-section .att-badge{
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.55);
    color:#fff;
}

/* Banner de fibra: se monta sobre el borde inferior del hero. */
.hero-visual{
    position:relative;
    z-index:2;
    margin-top:-72px;
    padding-bottom:40px;
    background:linear-gradient(180deg, transparent 0, transparent 72px, #fff 72px);
}

.banner-card{
    margin:0;
    overflow:hidden;
    border-radius:20px;
    background:#fff;
    border:1px solid var(--fenix-line);
    box-shadow:0 26px 64px rgba(15,60,120,.18);
}

.section-institucional .banner-card{
    margin-top:34px;
}

.banner-img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1086 / 362;
    object-fit:cover;
}

/* Secciones claras con mucho aire */
.section-institucional{
    padding:84px 0;
    background:#fff;
}

.section-institucional.soft-sky{
    background:linear-gradient(180deg, #eaf5ff 0%, #f6fbff 100%);
}

.section-institucional .section-copy{
    margin-bottom:0;
}

/* Sello ATT (recorte del arte oficial entregado, sin recolorear) */
.att-seal{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:10px;
    background:#fff;
}

.att-seal img{
    display:block;
    width:120px;
    height:auto;
}

@media (max-width:768px){
    .hero-section .container{
        padding-top:48px;
        padding-bottom:96px;
    }

    .hero-visual{
        margin-top:-60px;
        padding-bottom:24px;
    }

    .section-institucional{
        padding:56px 0;
    }

    .banner-card{
        border-radius:16px;
    }

    /* Deja libre el area del boton flotante de WhatsApp. */
    footer{
        padding-bottom:88px !important;
    }

    /* Reencuadre movil: 3:2 centrado en las personas / el producto. */
    .banner-img{
        aspect-ratio:3 / 2;
    }

    .banner-img--fibra{ object-position:74% 50%; }
    .banner-img--hogar{ object-position:79% 50%; }
    .banner-img--empresa{ object-position:92% 50%; }
    .banner-img--tecnico{ object-position:74% 50%; }
}