/* Banner exclusivo de Nosotros. Hereda reset, tipografía y colores globales.
   Flexbox y medidas relativas mantienen texto e ilustración adaptables. */
.about-banner { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 95% 40%, #0a4378 0, transparent 55%), linear-gradient(110deg, #00172e, #031b30 65%, #06386a); }
.about-banner__container { width: min(88%, 75rem); margin-inline: auto; min-height: 29rem; padding-block: clamp(3rem, 6vw, 5.5rem); display: flex; align-items: center; gap: clamp(2rem, 4vw, 4rem); }
.about-banner__content { position: relative; z-index: 2; flex: 1 1 40rem; min-width: 0; }
.about-banner__eyebrow { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; text-transform: uppercase; font-weight: 800; font-size: .75rem; letter-spacing: .12em; color: var(--color-primary); }
.about-banner__eyebrow::before { content: ''; width: 1.3rem; height: .15rem; background: currentColor; }
.about-banner h1 { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 800; }
.about-banner h1 strong { display: block; color: var(--color-primary-light); font-weight: inherit; }
.about-banner__description { max-width: 35rem; margin-top: 1.3rem; font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.55; color: #b8c9da; }
.about-banner__benefits { display: flex; flex-wrap: wrap; gap: .65rem; list-style: none; margin-top: 1.8rem; }
.about-banner__benefits li { display: flex; align-items: center; gap: .45rem; padding: .5rem .75rem; border: .0625rem solid #208edf18; border-radius: 2rem; background: #05305899; font-size: .7rem; color: #c2d4e7; }
.about-banner__benefits span { color: #29b4ff; font-weight: 800; }
/* Ondas y círculos decorativos hechos con CSS, sin descargar imágenes. */
.about-banner::before { content: ''; position: absolute; z-index: -1; width: 24rem; height: 24rem; left: -17rem; top: -14rem; border: 4rem solid #006bdd20; border-radius: 50%; }
.about-banner::after { content: ''; position: absolute; z-index: -1; width: 90%; height: 14rem; right: -10%; bottom: -12rem; border-radius: 50%; border: 1.5rem solid #007cff60; box-shadow: 0 -1.5rem 0 #0055b935, 0 -3rem 0 #068dff15; transform: rotate(-9deg); }
.about-banner__art { position: relative; flex: 0 1 23rem; height: 21rem; }
.about-banner__orbit { position: absolute; inset: 5%; border: .0625rem solid #289bff38; border-radius: 50%; box-shadow: 0 0 0 2rem #067bff07, 0 0 4rem #008cff20; transform: rotate(-25deg); }
.about-banner__icon { position: absolute; display: flex; align-items: center; justify-content: center; width: 6rem; aspect-ratio: 1; border-radius: 50%; color: white; background: linear-gradient(135deg, #00c2ff, #0069ef 60%, #03329b); box-shadow: inset .15rem .15rem .4rem #8bdcff66, 0 .8rem 2rem #0005; }
.about-banner__icon svg { width: 60%; height: 60%; }
.about-banner__icon--globe { width: 8rem; top: 15%; left: 4%; }
.about-banner__icon--wifi { right: 5%; top: 0; }
.about-banner__icon--chat { right: 0; bottom: 15%; background: linear-gradient(135deg, #ffc149, #ff723a 65%, #ef4835); }
.about-banner__icon--people { left: 14%; bottom: 0; width: 5rem; background: linear-gradient(135deg, #ffb54b, #ff603c); }
@media (max-width: 62rem) { .about-banner__container { gap: 1.5rem; } .about-banner__art { flex-basis: 16rem; height: 18rem; } .about-banner__icon--globe { width: 6rem; } .about-banner__icon { max-width: 45%; } .about-banner__break { display: none; } }
@media (max-width: 40rem) { .about-banner__container { flex-direction: column; align-items: stretch; } .about-banner__content { flex-basis: auto; } .about-banner__art { flex: none; width: min(100%, 20rem); height: 15rem; align-self: center; } .about-banner__benefits { gap: .5rem; } }