/*==========================================================
INTRODUCCIÓN
==========================================================*/

.intro-service{
    padding:50px 0;
    background:#fff;
}

.intro-container{
    width:100%;
    padding-left:clamp(30px,6vw,140px);
    padding-right:clamp(30px,6vw,140px);
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:center;
}


/*------------------------------------
Etiqueta
------------------------------------*/

.section-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#84BD00;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
}

/*------------------------------------
Título
------------------------------------*/

.intro-content h2{
    font-size:40px;
    line-height:1.15;
    color:#08141B;
    margin-bottom:24px;
    font-weight:700;
}

/*------------------------------------
Texto
------------------------------------*/

.intro-content p{
    font-size:18px;
    line-height:1.7;
    color:#5F6B73;
    margin-bottom:15px;
}

/*------------------------------------
Características
------------------------------------*/

.intro-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:45px;
}

.intro-feature{
    text-align:center;
}

.feature-icon{
    width:72px;
    height:72px;
    margin:auto;
    margin-bottom:18px;
    border-radius:50%;
    border:2px solid rgba(132,189,0,.20);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#84BD00;
    font-size:30px;
    transition:.35s;
}

.intro-feature:hover .feature-icon{
    background:#84BD00;
    color:#fff;
    transform:translateY(-5px);
}

.intro-feature h4{
    font-size:18px;
    margin-bottom:10px;
    color:#08141B;
}

.intro-feature p{
    font-size:14px;
    line-height:1.6;
    margin:0;
}

/*------------------------------------
Video
------------------------------------*/

.intro-video{
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.18);
    background:#08141B;
}

.intro-video video{
    width:100%;
    height:100%;
    object-fit:cover;
}

/*------------------------------------
Overlay
------------------------------------*/

.video-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.25),
        rgba(0,0,0,.05)
    );
    pointer-events:none;
}

.intro-video:hover .video-overlay{
    background:rgba(0,0,0,.45);
}

/*====================================
VIDEO CARD
=====================================*/

.video-card{
    position:absolute;
    left:25px;
    bottom:25px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:16px 22px;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:18px;
    box-shadow:
        0 18px 40px rgba(0,0,0,.25);
    z-index:10;
    transition:.35s;
}

.video-card:hover{
    transform:translateY(-5px);
}

.video-card-icon{
    width:54px;
    height:54px;
    border-radius:50%;
    background:#84BD00;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:22px;
    flex-shrink:0;
}

.video-card-text{
    display:flex;
    flex-direction:column;
}

.video-card-text span{
    color:white;
    font-size:18px;
    font-weight:700;
}

.video-card-text small{
    color:rgba(255,255,255,.88);
    font-size:13px;
    margin-top:4px;
}

/*=====================================
ANIMACIÓN TARJETA
======================================*/

.video-card.fade-out{

    opacity:0;

    transform:translateY(10px);

}

.video-card.fade-in{

    opacity:1;

    transform:translateY(0);

}

.video-card{

    transition:

        opacity .45s ease,

        transform .45s ease;

}

.video-card-icon{

    transition:.35s;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:992px){

.intro-container{
    grid-template-columns:1fr;
}

.intro-video{
    order:-1;
    min-height:420px;
}

.intro-features{
    grid-template-columns:repeat(3,1fr);
}
}

@media(max-width:768px){
.intro-service{
    padding:30px 0;
}

.intro-content h2{
    font-size:36px;
}

.intro-content p{
    font-size:16px;
}

.intro-features{
    grid-template-columns:1fr;
    gap:35px;
}

.intro-video{
    min-height:320px;
}

.video-overlay h4{
    font-size:24px;
}

.video-overlay p{
    font-size:15px;
}

.video-play{
    width:70px;
    height:70px;
    font-size:24px;
}

}
@media(max-width:768px){

.video-card{

    left:15px;

    right:15px;

    bottom:85px;

}

.video-action{

    left:15px;

    right:15px;

    justify-content:center;

    bottom:18px;

}

}


/*==========================================================
COMPONENTES DEL SERVICIO
==========================================================*/

.service-components{
    padding:30px 0;
}

.components-container{
    width:min(92%,1400px);
    margin:auto;
}

/*------------------------------------
TIMELINE
------------------------------------*/

.components-timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
}

.timeline-line{
    position:absolute;
    left:11%;
    right:11%;
    top:48px;
    height:3px;
    background:

    repeating-linear-gradient(
        to right,
        #84BD00 0,
        #84BD00 6px,
        transparent 6px,
        transparent 12px
    );

    opacity:.45;
    z-index:0;
}

/*------------------------------------
CARD
------------------------------------*/

.component-card{
    position:relative;
    background:#fff;
    border-radius:20px;
    padding:45px 30px;
    text-align:center;
    box-shadow:
        0 15px 45px rgba(0,0,0,.08);
    transition:.35s;
    z-index:2;
}

.component-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 25px 55px rgba(0,0,0,.12);
}

/*------------------------------------
NUMERO
------------------------------------*/

.step-number{
    position:absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%);
    width:38px;
    height:38px;
    border-radius:50%;
    background:#84BD00;
    color:#fff;
    font-weight:700;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:
        0 8px 20px rgba(132,189,0,.4);
    transition:.35s;
}

.component-card:hover .step-number{
    transform:translateX(-50%) scale(1.12);
}

/*------------------------------------
ICONO
------------------------------------*/

.component-icon{
    width:90px;
    height:90px;
    margin:auto;
    margin-bottom:25px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#10212C;
    font-size:48px;
}

.component-card:hover .component-icon{
    color:#84BD00;
}

/*------------------------------------
TEXTOS
------------------------------------*/

.component-card h3{
    font-size:24px;
    color:#08141B;
    margin-bottom:18px;
    line-height:1.25;
}

.component-card p{
    color:#66737B;
    line-height:1.8;
    font-size:15px;
}

/*------------------------------------
RESPONSIVE
------------------------------------*/

@media(max-width:1100px){
.components-timeline{
grid-template-columns:repeat(2,1fr);
}

.timeline-line{
display:none;
}
}

@media(max-width:768px){
.service-components{
padding:30px 0;
}

.components-timeline{
grid-template-columns:1fr;
gap:45px;
}

.section-header h2{
font-size:34px;
}

.section-header p{
font-size:16px;
}

.component-card{
padding:40px 25px;
}

}

/* =========================================================
   RESULTADOS QUE HABLAN POR SÍ SOLOS
   ALCON DRONES S.A.S.
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --results-green: #84BD00;
    --results-green-light: #A8D63A;

    --results-dark: #08141B;
    --results-text: #17242D;
    --results-muted: #687780;

    --results-border: #E2E8EB;
    --results-circle-bg: #E8ECEE;

}


/* =========================================================
   SECCIÓN PRINCIPAL
========================================================= */

.results-section {

    width: 100%;

    background: #ffffff;

    padding: 30px 20px;

    overflow: hidden;

    box-sizing: border-box;

}


/* =========================================================
   CONTENEDOR
========================================================= */

.results-container {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    box-sizing: border-box;

}


/* =========================================================
   ENCABEZADO
========================================================= */

.results-header {

    text-align: center;

    margin-bottom: 45px;

}


/* =========================================================
   ETIQUETA SUPERIOR
========================================================= */

.results-header .section-label {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color: var(--results-green);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* Línea izquierda */

.results-header .section-label::before {

    content: "";

    display: block;

    width: 45px;

    height: 2px;

    background: var(--results-green);

}


/* =========================================================
   TÍTULO
========================================================= */

.results-header h2 {

    margin: 0 auto;

    max-width: 750px;

    color: var(--results-dark);

    font-size: 40px;

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -0.5px;

}


/* =========================================================
   CONTENEDOR DE INDICADORES
========================================================= */

.indicators-grid {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    align-items: stretch;

    border: 1px solid var(--results-border);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 15px 45px rgba(8, 20, 27, 0.06);

    overflow: hidden;

}


/* =========================================================
   INDICADOR
========================================================= */

.indicator {

    position: relative;

    min-width: 0;

    padding: 55px 25px 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    box-sizing: border-box;

}


/* =========================================================
   SEPARADORES
========================================================= */

.indicator:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 60px;

    right: 0;

    width: 1px;

    height: calc(100% - 120px);

    background: var(--results-border);

}


/* =========================================================
   CÍRCULO
========================================================= */

.indicator-circle {

    position: relative;

    width: 150px;

    height: 150px;

    flex: 0 0 150px;

    margin: 0 auto 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    transition:
        transform .35s ease,
        filter .35s ease;

}


/* =========================================================
   SVG
========================================================= */

.indicator-circle svg {

    position: absolute;

    inset: 0;

    width: 150px;

    height: 150px;

    display: block;

    overflow: visible;

    transform: rotate(-90deg);

}


/* =========================================================
   CÍRCULO BASE
========================================================= */

.indicator-circle .bg {

    fill: none;

    stroke: var(--results-circle-bg);

    stroke-width: 10;

}


/* =========================================================
   CÍRCULO DE PROGRESO
========================================================= */

.indicator-circle .progress {

    fill: none;

    stroke-width: 10;

    stroke-linecap: round;

    stroke-dasharray: 395.84;

    stroke-dashoffset:
        calc(
            395.84 -
            (395.84 * var(--value)) / 100
        );

    transition:
        stroke-dashoffset 1.4s cubic-bezier(
            .22,
            .61,
            .36,
            1
        );

}


/* =========================================================
   CONTENIDO CENTRAL DEL CÍRCULO
========================================================= */

.indicator-content {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    pointer-events: none;

}


/* =========================================================
   NÚMERO PRINCIPAL
========================================================= */

.indicator-content .counter,

.indicator-content .large-number {

    display: block;

    margin: 0;

    color: var(--results-dark);

    font-size: 38px;

    font-weight: 700;

    line-height: .95;

    letter-spacing: -1px;

    white-space: nowrap;

}


/* =========================================================
   UNIDAD
========================================================= */

.indicator-content small {

    display: block;

    margin-top: 6px;

    color: var(--results-muted);

    font-size: 15px;

    font-weight: 500;

    line-height: 1;

}


/* =========================================================
   INFORMACIÓN DEL INDICADOR
========================================================= */

.indicator-info {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* =========================================================
   TÍTULO DEL INDICADOR
========================================================= */

.indicator-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: 100%;

    margin-bottom: 12px;

}


/* =========================================================
   ICONO FONT AWESOME
========================================================= */

.indicator-title i {

    flex: 0 0 auto;

    color: var(--results-green);

    font-size: 24px;

    line-height: 1;

    transition:
        transform .3s ease;

}


/* =========================================================
   H4
========================================================= */

.indicator-title h4 {

    margin: 0;

    color: var(--results-dark);

    font-size: 21px;

    font-weight: 700;

    line-height: 1.2;

}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.indicator-info p {

    width: 100%;

    max-width: 235px;

    margin: 0 auto;

    color: var(--results-muted);

    font-size: 15px;

    font-weight: 400;

    line-height: 1.65;

}


/* =========================================================
   HOVER
========================================================= */

.indicator:hover .indicator-circle {

    transform: scale(1.04);

}


.indicator:hover .indicator-title i {

    transform: scale(1.12);

}


/* =========================================================
   ANIMACIÓN DE ENTRADA
========================================================= */

.indicator {

    opacity: 0;

    transform: translateY(25px);

    animation: resultsFadeUp .7s ease forwards;

}


.indicator:nth-child(1) {

    animation-delay: .05s;

}


.indicator:nth-child(2) {

    animation-delay: .15s;

}


.indicator:nth-child(3) {

    animation-delay: .25s;

}


.indicator:nth-child(4) {

    animation-delay: .35s;

}


@keyframes resultsFadeUp {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   TABLET
   769px - 1100px
========================================================= */

@media (max-width: 1100px) {

    .results-section {

        padding: 70px 20px;

    }


    .results-header h2 {

        font-size: 36px;

    }


    .indicators-grid {

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

    }


    .indicator {

        padding: 45px 25px 40px;

    }


    /* Quitar separador vertical de la columna derecha */

    .indicator:nth-child(2)::after {

        display: none;

    }


    /* Crear separador horizontal */

    .indicator:nth-child(1)::before,
    .indicator:nth-child(2)::before {

        content: "";

        position: absolute;

        left: 25px;

        right: 25px;

        bottom: 0;

        height: 1px;

        background: var(--results-border);

    }


    .indicator:not(:last-child)::after {

        top: 50px;

        height: calc(100% - 100px);

    }


    .indicator:nth-child(2)::after,
    .indicator:nth-child(4)::after {

        display: none;

    }

}


/* =========================================================
   TABLET PEQUEÑA
   600px - 768px
========================================================= */

@media (max-width: 768px) {

    .results-section {

        padding: 60px 16px;

    }


    .results-header {

        margin-bottom: 35px;

    }


    .results-header .section-label {
        letter-spacing: 1.5px;
    }


    .results-header .section-label::before {
        width: 30px;
    }


    .results-header h2 {

        font-size: 32px;

        line-height: 1.2;

    }


    .indicators-grid {

        border-radius: 14px;

    }


    .indicator {

        padding: 40px 20px;

    }


    .indicator-circle {

        width: 140px;

        height: 140px;

        flex-basis: 140px;

    }


    .indicator-circle svg {

        width: 140px;

        height: 140px;

    }


    .indicator-content .counter,
    .indicator-content .large-number {

        font-size: 35px;

    }


    .indicator-title h4 {

        font-size: 19px;

    }

}


/* =========================================================
   MÓVIL
   Hasta 599px
========================================================= */

@media (max-width: 599px) {

    .results-section {
        padding: 30px 15px;
    }


    .results-header {
        margin-bottom: 30px;
    }


    .results-header .section-label {
        letter-spacing: 1.2px;
        gap: 8px;
    }


    .results-header .section-label::before {
        width: 25px;
    }


    .results-header h2 {

        max-width: 95%;
        font-size: 28px;
        line-height: 1.18;

    }


    /* Una sola columna */

    .indicators-grid {

        grid-template-columns: 1fr;

        border-radius: 14px;

    }


    /* =====================================================
       INDICADORES
    ===================================================== */

    .indicator {

        padding: 35px 20px 38px;

    }


    /* =====================================================
       CÍRCULO MÓVIL
    ===================================================== */

    .indicator-circle {

        width: 130px;

        height: 130px;

        flex-basis: 130px;

        margin-bottom: 28px;

    }


    .indicator-circle svg {

        width: 130px;

        height: 130px;

    }


    /* El radio visual continúa siendo proporcional */

    .indicator-circle .bg,
    .indicator-circle .progress {

        stroke-width: 9;

    }


    /* =====================================================
       NÚMERO
    ===================================================== */

    .indicator-content .counter,
    .indicator-content .large-number {

        font-size: 32px;

    }


    .indicator-content small {

        font-size: 13px;

    }


    /* =====================================================
       TÍTULO
    ===================================================== */

    .indicator-title {

        gap: 8px;

        margin-bottom: 10px;

    }


    .indicator-title i {

        font-size: 21px;

    }


    .indicator-title h4 {

        font-size: 18px;

    }


    /* =====================================================
       DESCRIPCIÓN
    ===================================================== */

    .indicator-info p {

        max-width: 270px;

        font-size: 14px;

        line-height: 1.6;

    }


    /* =====================================================
       SEPARADORES MÓVILES
    ===================================================== */

    .indicator:not(:last-child)::after {

        display: none;

    }


    .indicator:not(:last-child)::before {

        content: "";

        position: absolute;

        left: 30px;

        right: 30px;

        bottom: 0;

        height: 1px;

        background: var(--results-border);

    }

}


/* =========================================================
   MÓVIL PEQUEÑO
   Hasta 380px
========================================================= */

@media (max-width: 380px) {

    .results-section {

        padding-left: 10px;

        padding-right: 10px;

    }


    .results-header h2 {

        font-size: 25px;

    }


    .results-header .section-label {

        font-size: 9px;

    }


    .indicator {

        padding-left: 15px;

        padding-right: 15px;

    }


    .indicator-circle {

        width: 120px;

        height: 120px;

        flex-basis: 120px;

    }


    .indicator-circle svg {

        width: 120px;

        height: 120px;

    }


    .indicator-content .counter,
    .indicator-content .large-number {

        font-size: 29px;

    }


    .indicator-title h4 {

        font-size: 17px;

    }

}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .indicator {

        animation: none;

        opacity: 1;

        transform: none;

    }


    .indicator-circle {

        transition: none;

    }


    .indicator-title i {

        transition: none;

    }


    .indicator-circle .progress {

        transition: none;

    }

}