/* Áreas de Experiencia
   Visual refresh aligned with approved Undernet wireframe.
*/
:root{
    --ae-bg:#071018;
    --ae-bg-2:#0a141d;
    --ae-panel:#0d1820;
    --ae-panel-2:#101c25;
    --ae-line:rgba(255,255,255,.14);
    --ae-text:#f4f4f4;
    --ae-muted:#bec7ce;
    --ae-orange:#ff7a00;
    --ae-orange-2:#f7941d;
    --ae-radius:8px;
}
html{scroll-behavior:smooth;}
body{background:var(--ae-bg);color:var(--ae-text);}
.ae-hero,.ae-section,.ae-detail,.ae-services,.ae-final-cta{color:var(--ae-text);}
.ae-hero-copy h1,.ae-section-heading h2,.ae-detail h2,.ae-services h2,.ae-final-cta h2{margin:0;color:#fff;line-height:1.08;letter-spacing:-.03em;}
.ae-hero .eyebrow,.ae-section .eyebrow,.ae-detail .eyebrow,.ae-services .eyebrow,.ae-final-cta .eyebrow{color:var(--ae-orange);}

/* HERO */
.ae-hero{position:relative;overflow:hidden;background:#08121a;border-bottom:1px solid var(--ae-line);}
.ae-hero-grid{position:relative;min-height:510px;display:grid;grid-template-columns:minmax(390px,.92fr) minmax(520px,1.08fr);align-items:stretch;}
.ae-hero-copy{align-self:center;padding:62px 34px 62px 0;position:relative;z-index:2;}
.ae-hero-copy .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;}
.ae-hero-copy .eyebrow::before{content:"";width:30px;height:2px;background:var(--ae-orange);}
.ae-hero-copy h1{max-width:650px;font-size:clamp(2.7rem,4.4vw,4.25rem);}
.ae-hero-copy h1 span{color:var(--ae-orange);}
.ae-hero-lead{max-width:650px;margin:20px 0 0;color:#d4dbe0;font-size:1.04rem;line-height:1.55;}
.ae-hero-visual{position:static;min-height:510px;margin-right:calc((100vw - 100%)/-2);background:
linear-gradient(90deg,
    #08121a 0%,
    rgba(8,18,26,.72) 11%,
    rgba(8,18,26,.16) 28%,
    rgba(8,18,26,.015) 46%,
    rgba(8,18,26,.015) 64%,
    rgba(8,18,26,.18) 79%,
    rgba(8,18,26,.58) 100%
),
url('/assets/img/areas-experiencia-hero-bogota.webp') center center/cover no-repeat;}
.ae-hero-message{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    bottom:auto;
    width:218px;
    padding:8px 10px 8px 14px;
    border-left:4px solid var(--ae-orange);
    background:rgba(4,10,15,.10);
    color:#fff;
    text-shadow:0 2px 16px rgba(0,0,0,.95);
    box-sizing:border-box;
    z-index:20;
    display:block;
    visibility:visible;
    opacity:1;
    pointer-events:none;
}
.ae-hero-message span,.ae-hero-message strong{
    display:block;
    font-size:1.03rem;
    line-height:1.18;
}
.ae-hero-message strong{font-weight:800;}

/* AREA SELECTOR */
.ae-section-intro{padding:38px 0 46px;background:
radial-gradient(circle at 50% 0,rgba(36,83,108,.16),transparent 55%),#071018;border-bottom:1px solid var(--ae-line);}
.ae-section-heading{max-width:850px;margin:0 auto 22px;}
.ae-section-heading-center{text-align:center;}
.ae-section-heading .eyebrow{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;}
.ae-section-heading h2{font-size:clamp(2rem,3vw,3rem);}
.ae-section-heading h2 span{color:var(--ae-orange);}
.ae-section-heading>p:last-child{margin:10px 0 0;color:#d2d9de;font-size:1rem;}
.ae-area-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.ae-area-card{position:relative;min-height:205px;display:flex;flex-direction:column;padding:20px 19px 17px;border:1px solid rgba(255,255,255,.17);border-radius:var(--ae-radius);background:linear-gradient(150deg,rgba(255,255,255,.018),rgba(0,0,0,.08)),rgba(7,17,24,.72);color:#fff;text-decoration:none;overflow:hidden;transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.ae-area-card:hover,.ae-area-card:focus-visible{transform:translateY(-3px);border-color:rgba(255,122,0,.78);background:rgba(13,27,37,.9);outline:none;}
.ae-area-card:nth-child(5),.ae-area-card:nth-child(6),.ae-area-card:nth-child(7){grid-column:span 1;}
.ae-area-card:nth-child(5){grid-column:1 / 2;}
.ae-area-card:nth-child(6){grid-column:2 / 3;}
.ae-area-card:nth-child(7){grid-column:3 / 5;}
.ae-card-icon{width:39px;height:39px;object-fit:contain;object-position:left center;margin-bottom:10px;position:relative;z-index:2;}
.ae-area-card h3{margin:0 0 7px;font-size:1.08rem;line-height:1.16;position:relative;z-index:2;}
.ae-card-desc{margin:0;color:#c4ccd1;font-size:.86rem;line-height:1.38;position:relative;z-index:2;}
.ae-card-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;position:relative;z-index:2;}
.ae-card-pills span{display:inline-flex;padding:4px 10px;border:1px solid rgba(255,255,255,.26);border-radius:5px;color:#e8ecef;font-size:.76rem;line-height:1;}
.ae-area-card small{margin-top:5px;color:#aeb7bd;font-size:.72rem;position:relative;z-index:2;}
.ae-card-link{margin-top:auto;padding-top:13px;color:var(--ae-orange);font-size:.82rem;font-weight:800;position:relative;z-index:2;}
.ae-area-card-vial::before{content:"";position:absolute;inset:0;background:
linear-gradient(90deg,rgba(5,14,20,.92) 0%,rgba(5,14,20,.78) 50%,rgba(5,14,20,.48) 100%),
url('/assets/img/areas-experiencia-seguridad-vial.webp') center/cover no-repeat;}
.ae-area-card-vial::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,11,16,.55));}


/* Post-deployment refinements */
.ae-area-card-vial .ae-card-desc,
.ae-area-card-vial .ae-card-pills,
.ae-area-card-vial small,
.ae-area-card-vial .ae-card-link{max-width:58%;}
@media (max-width:1280px){
    .ae-hero-message{right:12px;width:198px;}
}

/* DETAILS */
.ae-detail{scroll-margin-top:94px;padding:54px 0;background:#09131b;border-top:1px solid rgba(255,255,255,.08);}
.ae-detail-alt{background:#0b161e;}
.ae-detail-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.72fr);gap:42px;align-items:start;}
.ae-detail .eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:12px;}
.ae-detail h2{max-width:820px;font-size:clamp(2rem,3.2vw,3.05rem);}
.ae-detail-lead{max-width:850px;margin:15px 0 22px;color:#d0d7dc;font-size:1rem;line-height:1.58;}
.ae-framework-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.ae-framework-grid-two{grid-template-columns:repeat(2,minmax(0,1fr));}
.ae-framework-grid-three{grid-template-columns:repeat(3,minmax(0,1fr));}
.ae-framework{min-height:150px;padding:18px;border:1px solid var(--ae-line);border-radius:10px;background:rgba(255,255,255,.045);}
.ae-framework-badge{display:inline-flex;margin-bottom:14px;padding:5px 9px;border:1px solid rgba(255,122,0,.34);border-radius:999px;color:#ffae58;background:rgba(255,122,0,.07);font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;}
.ae-framework-badge-colombia{color:#f4f4f4;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);}
.ae-framework h3{margin:0 0 8px;color:#fff;font-size:1.4rem;}
.ae-framework p{margin:0;color:#c7cfd4;line-height:1.55;}
.ae-framework small{display:block;margin-top:10px;color:#a0aab0;line-height:1.45;}
.ae-framework a{display:inline-block;margin-top:14px;color:var(--ae-orange);font-weight:800;text-decoration:none;}
.ae-framework a:hover,.ae-framework a:focus-visible{text-decoration:underline;}
.ae-detail-aside{display:grid;gap:12px;position:sticky;top:96px;}
.ae-info-card{padding:17px;border:1px solid var(--ae-line);border-radius:10px;background:rgba(255,255,255,.04);}
.ae-info-label{display:block;margin-bottom:8px;color:var(--ae-orange);font-size:.7rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;}
.ae-info-card p{margin:0;color:#c9d0d4;line-height:1.52;}
.ae-info-card p+p{margin-top:9px;}
.ae-relation-card{border-left:3px solid var(--ae-orange);background:linear-gradient(135deg,rgba(255,122,0,.06),rgba(255,255,255,.02));}
.ae-service-links{display:flex;flex-wrap:wrap;gap:7px;}
.ae-service-links a{display:inline-flex;align-items:center;min-height:34px;padding:6px 10px;border:1px solid rgba(255,255,255,.16);border-radius:7px;color:#f3f3f3;text-decoration:none;font-size:.82rem;font-weight:750;}
.ae-service-links a:hover,.ae-service-links a:focus-visible{border-color:var(--ae-orange);color:#fff;outline:none;}
.ae-source-note{margin-top:20px;color:#8f9ba3;font-size:.71rem;line-height:1.45;}

/* SERVICES */
.ae-services{padding:48px 0 52px;background:#071018;border-top:1px solid var(--ae-line);}
.ae-services .ae-section-heading{margin-bottom:25px;}
.ae-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.ae-service-card{display:grid;grid-template-columns:55px 1fr;gap:18px;min-height:160px;padding:20px 28px;border-right:1px solid var(--ae-line);color:#fff;text-decoration:none;}
.ae-service-card:last-child{border-right:0;}
.ae-service-card img{width:48px;height:48px;object-fit:contain;}
.ae-service-card h3{margin:0 0 7px;font-size:1.18rem;}
.ae-service-card p{margin:0 0 14px;color:#c4ccd1;font-size:.9rem;line-height:1.45;}
.ae-service-card span{color:var(--ae-orange);font-size:.82rem;font-weight:800;}
.ae-service-card:hover h3,.ae-service-card:focus-visible h3{color:#ffb05b;}

/* CTA */
.ae-final-cta{position:relative;padding:42px 0;background:
linear-gradient(90deg,rgba(5,12,17,.94) 0%,rgba(5,12,17,.82) 42%,rgba(5,12,17,.42) 74%,rgba(5,12,17,.30) 100%),
url('/assets/img/areas-experiencia-retos-bogota.webp') center 53%/cover no-repeat;border-top:1px solid var(--ae-line);}
.ae-final-cta-inner{min-height:150px;display:flex;align-items:center;justify-content:space-between;gap:38px;}
.ae-final-cta .eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:10px;}
.ae-final-cta h2{max-width:760px;font-size:clamp(2rem,3vw,2.7rem);}
.ae-final-cta p:not(.eyebrow){max-width:680px;margin:10px 0 0;color:#d0d7dc;}
.ae-final-cta .button{min-width:170px;text-align:center;}

/* RESPONSIVE */
@media (max-width:1100px){
    .ae-hero-grid{grid-template-columns:1fr 1fr;}
    .ae-hero-message{right:10px;top:52%;bottom:auto;width:186px;}
    .ae-area-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .ae-area-card:nth-child(n){grid-column:auto;}
    .ae-detail-grid{grid-template-columns:1fr;}
    .ae-detail-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr));}
    .ae-detail-aside .ae-relation-card{grid-column:1/-1;}
}
@media (max-width:760px){
    .ae-hero-grid{display:block;min-height:auto;}
    .ae-hero-copy{padding:46px 0 32px;}
    .ae-hero-copy h1{font-size:clamp(2.25rem,10vw,3.2rem);}
    .ae-hero-visual{min-height:300px;margin:0 calc((100vw - 100%)/-2);background-position:62% center;}
    .ae-hero-message{display:none;}
    .ae-section-intro,.ae-detail,.ae-services{padding-top:44px;padding-bottom:44px;}
    .ae-area-grid{grid-template-columns:1fr;}
    .ae-area-card{min-height:190px;}
    .ae-area-card-vial .ae-card-desc,
    .ae-area-card-vial .ae-card-pills,
    .ae-area-card-vial small,
    .ae-area-card-vial .ae-card-link{max-width:68%;}
    .ae-framework-grid-two,.ae-framework-grid-three,.ae-detail-aside,.ae-services-grid{grid-template-columns:1fr;}
    .ae-framework-grid-three .ae-framework:last-child{grid-column:auto;}
    .ae-service-card{border-right:0;border-bottom:1px solid var(--ae-line);padding-left:0;padding-right:0;}
    .ae-service-card:last-child{border-bottom:0;}
    .ae-final-cta-inner{align-items:flex-start;flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .ae-area-card{transition:none;}
}