/* ==========================================================
   DS COMPONENTS
   Design System v1.0
========================================================== */


/* ==========================================================
   1. VARIABLES
========================================================== */

:root{

    /* Colores */

    --dsc-primary:#1f4d82;
    --dsc-primary-hover:#183b63;
    --dsc-primary-light:#edf5fb;

    --dsc-secondary:#55b889;

    --dsc-text:#183b63;
    --dsc-text-light:#6d7d8f;

    --dsc-border:#dfe8f2;

    --dsc-white:#ffffff;

    /* Sombras */

    --dsc-shadow-sm:0 8px 25px rgba(15,44,80,.06);

    --dsc-shadow-md:0 18px 45px rgba(15,44,80,.10);

    --dsc-shadow-hover:0 28px 65px rgba(15,44,80,.16);

    /* Radios */

    --dsc-radius:26px;

    --dsc-radius-small:16px;

    --dsc-radius-circle:999px;

    /* Espaciados */

    --dsc-space-xs:8px;
    --dsc-space-sm:16px;
    --dsc-space-md:24px;
    --dsc-space-lg:40px;
    --dsc-space-xl:64px;

    /* Transiciones */

    --dsc-transition:.35s cubic-bezier(.2,.8,.2,1);
    

}


/* ==========================================================
   2. RESET
========================================================== */

.dsc-component,
.dsc-component *{

    box-sizing:border-box;

}


/* ==========================================================
   3. CARD
========================================================== */

.dsc-card{

    background:var(--dsc-white);

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

    border-radius:var(--dsc-radius);

    padding:42px;

    display:flex;

    flex-direction:column;

    height:100%;

    position:relative;

    overflow:hidden;

    box-shadow:var(--dsc-shadow-sm);

    transition:
        transform var(--dsc-transition),
        box-shadow var(--dsc-transition);

}

.dsc-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--dsc-shadow-hover);

}

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

.dsc-card__icon{

    width:82px;

    height:82px;

    border-radius:999px;

    background:var(--dsc-primary-light);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:32px;

    transition:
        background-color var(--dsc-transition),
        color var(--dsc-transition);

}

.dsc-card__icon--no-circle{

    background:transparent;

}

.dsc-card:hover .dsc-card__icon{

    background:var(--dsc-primary);

}
.dsc-card:hover .dsc-card__feature-icon{

    background:var(--dsc-primary);

}

.dsc-card:hover .dsc-card__feature-icon i,
.dsc-card:hover .dsc-card__feature-icon svg{

    color:#fff;

}

.dsc-card__icon i,
.dsc-card__icon svg{

    color:var(--dsc-primary);

    width:1em;

    height:1em;

    transition:
        color var(--dsc-transition),
        fill var(--dsc-transition);

}

.dsc-card:hover .dsc-card__icon i,
.dsc-card:hover .dsc-card__icon svg{

    color:#fff;

}

/* ---------- CONTENIDO ---------- */

.dsc-card__title{

    margin:0 0 18px;

    color:var(--dsc-text);

    font-size:30px;

    line-height:1.25;

    font-weight:700;

}

.dsc-card__description{

    margin:0;

    color:var(--dsc-text-light);

    font-size:18px;

    line-height:1.8;

}

/* ==========================================================
   BLOQUE DESTACADO
========================================================== */

.dsc-card__feature{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:36px;

    padding-top:28px;

    border-top:1px solid var(--dsc-border);

}

.dsc-card__feature-icon{

    width:58px;

    height:58px;

    border-radius:14px;

    background:var(--dsc-primary-light);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:all var(--dsc-transition);

}

.dsc-card__feature-icon i,
.dsc-card__feature-icon svg{

    font-size:28px;

    color:var(--dsc-primary);

    width:1em;

    height:1em;

}

.dsc-card__feature-content{

    display:flex;

    flex-direction:column;

}

.dsc-card__feature-value{

    font-size:38px;

    line-height:1;

    font-weight:700;

    color:var(--dsc-primary);

    margin-bottom:8px;

}

.dsc-card__feature-text{

    font-size:17px;

    line-height:1.5;

    color:var(--dsc-text);

}

.dsc-card__content{

    flex:1;

}

.dsc-card__footer{

    margin-top:36px;

}

/* ---------- BOTÓN ---------- */

.dsc-card__button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--dsc-primary);

    text-decoration:none;

    font-weight:700;

    font-size:17px;

    transition:color var(--dsc-transition);

}

.dsc-card__button:hover{

    color:var(--dsc-primary-hover);

}

.dsc-card__arrow{

    transition:transform var(--dsc-transition);

}

.dsc-card:hover .dsc-card__arrow{

    transform:translateX(8px);

}


/* ==========================================================
   4. RESPONSIVE
========================================================== */
/* TABLET */
@media (max-width:1024px){

    .dsc-card{

        padding:34px;

    }
    .dsc-card__title{

        font-size:26px;

    }
  
}

/* MÓVIL */
@media (max-width:767px){

    .dsc-card{

        padding:28px;

        border-radius:22px;

    }

    .dsc-card__icon{

        width:70px;

        height:70px;

        margin-bottom:24px;

    }

    .dsc-card__icon i{

        font-size:28px;

    }

    .dsc-card__title{

        font-size:23px;

    }

    .dsc-card__description{

        font-size:16px;

        line-height:1.7;

    }
.dsc-card__feature{

    gap:14px;

}

.dsc-card__feature-icon{

    width:50px;

    height:50px;

}

.dsc-card__feature-value{

    font-size:28px;

}

.dsc-card__feature-text{

    font-size:15px;

}

}
/* ==========================================================
   TIMELINE
========================================================== */

.dsc-timeline{
    display:flex;
    flex-direction:column;
    gap:30px; 
     position:relative;

    --timeline-offset:8px; /* posición de la línea */
    --timeline-gap:60px; /* distancia línea → tarjeta */
    --dsc-marker-color:var(--dsc-primary);
}

.dsc-timeline__title{
    margin:0;
    font-size:38px;
    color:var(--dsc-text);
}

.dsc-timeline__event{

    margin-left:var(--timeline-gap);
    display:grid;
    grid-template-columns:110px 1fr 220px;

    align-items:center;
    gap:30px;
    padding:32px;
    background:#fff;
    border:1px solid var(--dsc-border);
    border-radius:24px;
    box-shadow:var(--dsc-shadow-sm);

}

.dsc-timeline__date{

    text-align:center;
    border-right:1px solid var(--dsc-border);
    padding-right:25px;

}

.dsc-timeline__date .day{

    display:block;
    font-size:48px;
    font-weight:700;
    color:var(--dsc-primary);
    line-height:1;

}

.dsc-timeline__date .month{

    display:block;
    margin-top:8px;
    font-size:20px;
    font-weight:700;
    color:var(--dsc-primary);

}

.dsc-timeline__content h3{

    margin:0 0 10px;
    font-size:32px;
    color:var(--dsc-text);

}

.dsc-timeline__content p{

    margin:0 0 15px;
    color:var(--dsc-text-light);

}

.dsc-timeline__badge{

    display:inline-block;
    padding:8px 16px;
    border-radius:999px;
    background:var(--dsc-primary-light);
    color:var(--dsc-primary);
    font-size:14px;
    font-weight:600;

}

.dsc-timeline__actions{

    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:20px;

}

.dsc-timeline__status{

    color:#2eb872;
    font-weight:700;

}

.dsc-timeline__actions a{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 22px;
    border:2px solid var(--dsc-primary);
    border-radius:12px;
    color:var(--dsc-primary);
    text-decoration:none;
    font-weight:700;

}

.dsc-timeline::before{

    content:"";
    position:absolute;
    left:var(--timeline-offset);
    top:70px;
    bottom:0;
    width:3px;
    background:#dfe8f2;

}

.dsc-timeline__marker{

    width:18px;
    height:18px;
    background:var(--dsc-marker-color);
    border:4px solid var(--dsc-border);
    border-radius:50%;
    box-sizing:border-box;
    position:relative;
    left:var(--timeline-offset);
    transform:translateX(-50%);
    z-index:2;
    margin-bottom:-24px;

}

/* ==========================================================
   TARJETA DE CIFRAS
========================================================== */

.dsc-stats-card{

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:40px 32px;
    min-width:300px;

    background:#fff;
    border:1px solid var(--dsc-border);
    border-radius:24px;
    box-shadow:var(--dsc-shadow-sm);

    text-align:center;

    transition:.3s ease;

}

.dsc-stats-card__content{

    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;

}

.dsc-stats-card:hover{

    transform:translateY(-4px);
    box-shadow:var(--dsc-shadow-md);

}

/* ICONO */

.dsc-stats-card__icon{

    width:72px;
    height:72px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:28px;

    background:var(--dsc-primary-light);
    border-radius:50%;

}

.dsc-stats-card__icon i,
.dsc-stats-card__icon svg{

    font-size:32px;
    color:var(--dsc-primary);

}

.dsc-stats-card__icon svg{

    width:32px;
    height:32px;
    fill:currentColor;

}

/* CIFRA */

.dsc-stats-card__number{

      display:inline-flex;
    align-items:baseline;
    justify-content:center;
    gap:4px;

    margin-bottom:18px;

    font-size:52px;
    font-weight:700;
    line-height:1;

    color:var(--dsc-primary);

}

/* SEPARADOR */

.dsc-stats-card__divider{

    width:70px;
    height:2px;

    margin-bottom:20px;

    background:var(--dsc-border);

}

/* DESCRIPCIÓN */

.dsc-stats-card__label{

    font-size:18px;
    line-height:1.5;
    color:var(--dsc-text-light);

}

/* ==========================================================
   NEWS TICKER
========================================================== */

.dsc-news-ticker{
    width:100%;
    overflow:hidden;
    background:#000;
    color:#fff;
    padding:12px 0;
    display:flex;
    align-items:center;
    box-sizing:border-box;
}

.dsc-news-ticker__track{
    width:100%;
    overflow:hidden;
}

.dsc-news-ticker__text{
    display:inline-block;
    white-space:nowrap;
    padding-left:100%;
    animation-name:dsc-news-ticker-scroll;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-duration:var(--ticker-speed,25s);
}

.dsc-news-ticker__item{
	color:inherit;
	text-decoration:none;
    transition:color .3s ease;
}

.dsc-news-ticker__item:hover{
	text-decoration:underline;
}

.dsc-news-ticker__separator{
	display:inline-block;
	margin:0 40px;
	opacity:.6;
}

.dsc-news-ticker--pause:hover .dsc-news-ticker__text{
    animation-play-state:paused;
}

@keyframes dsc-news-ticker-scroll{

    0%{
        transform:translate3d(0,0,0);
    }

    100%{
        transform:translate3d(-100%,0,0);
    }

}

@media (max-width:768px){

    .dsc-news-ticker{
        padding:10px 0;
    }

    .dsc-news-ticker__text{
        font-size:14px;
    }

}

/* Tablet */
@media (max-width:1024px){

    .dsc-news-ticker__text{
        animation-duration:calc(var(--ticker-speed,25s) * 0.80);
    }

}

/* Móvil */
@media (max-width:767px){

    .dsc-news-ticker__text{
        animation-duration:calc(var(--ticker-speed,25s) * 0.65);
    }

}

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

@media (max-width:767px){

     .dsc-timeline{
        --timeline-gap:30px;
    }

    .dsc-timeline__event{

        display:grid;

        grid-template-columns:80px 1fr;

        grid-template-areas:
            "date content"
            "date actions";

        gap:18px;

        align-items:start;

        padding:24px;

    }

    .dsc-timeline__date{

        grid-area:date;

        width:auto;

        min-width:auto;

        margin:0;

    }

    .dsc-timeline__content{

        grid-area:content;

        min-width:0;

    }

    .dsc-timeline__actions{

        grid-area:actions;

        width:100%;

        align-items:flex-start;

        justify-content:flex-start;

        margin-top:10px;

    }

    .dsc-timeline__actions a{

        width:100%;

        text-align:center;

    }

    .dsc-timeline__content h3{

        font-size:26px;

        margin-bottom:8px;

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

    .dsc-timeline{
    --timeline-gap:25px;
}
    .dsc-timeline__event{

        display:flex;
        flex-direction:column;
        gap:20px;
        padding:22px;

    }

    .dsc-timeline__date{

        width:100%;
        text-align:left;
        border-right:none;
        border-bottom:1px solid var(--dsc-border);
        padding-bottom:16px;

    }

    .dsc-timeline__content{

        width:100%;

    }

    .dsc-timeline__content h3{

        font-size:32px;
        line-height:1.2;
        word-break:break-word;

    }

    .dsc-timeline__actions{

        width:100%;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:12px;

    }

    .dsc-timeline__actions a{

        width:100%;
        text-align:center;

    }

   
}

/* ==========================================================
   THERMOMETER
========================================================== */

.dsc-thermometer{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.dsc-thermometer__title{
    margin:0;
    font-size:38px;
    line-height:1.2;
    color:var(--dsc-text);
}


/* ==========================================================
   TRACK
========================================================== */

.dsc-thermometer__track{
    position:relative;
    width:100%;
    padding:20px 40px 40px;
}


/* ==========================================================
   STEPS
========================================================== */

.dsc-thermometer__steps{
    position:relative;
    z-index:3;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    width:100%;
}

.dsc-thermometer__step{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;

    width:120px;

    text-align:center;
    cursor:pointer;
}


/* ==========================================================
   ICON
========================================================== */

.dsc-thermometer__step-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:54px;
    height:54px;

    background:transparent;
    border:none;
    border-radius:0;

    color:var(--dsc-primary);

    font-size:38px;

    position:relative;
    z-index:4;

    transition:
    transform 0.3s ease,
    filter 0.3s ease,
    color 0.3s ease;
}


/* ==========================================================
   STEP TITLE
========================================================== */

.dsc-thermometer__step-title{
    margin-top:10px;

    min-height:42px;
    max-height:42px;

    font-size:16px;
    line-height:1.3;
    font-weight:600;

    color:var(--dsc-text);

    text-align:center;

    overflow:hidden;
}


/* ==========================================================
   BAR
========================================================== */

.dsc-thermometer__bar{
    position:absolute;

    left:40px;
    right:40px;

    top:150px;

    height:12px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #55b889 0%,
        #8bcf75 25%,
        #e5d96a 50%,
        #f0a45c 75%,
        #d95c5c 100%
    );

    z-index:1;
}


/* ==========================================================
   INDICATOR
========================================================== */

.dsc-thermometer__indicator{
    position:absolute;

    left:0;
    top:0;

    width:0;
    height:100%;

    border-radius:999px;

    background:var(--dsc-secondary);

    transition:width 0.35s ease;
}

.dsc-thermometer__handle.is-dragging{
    transition:none;
}


/* ==========================================================
   HANDLE
========================================================== */

.dsc-thermometer__handle{
    position:absolute;

    top:130px;
    left:40px;

    width:52px;
    height:52px;

    transform:translateX(-50%);

    border-radius:50%;

    background:var(--dsc-white);

    border:1px solid #cfd6df;

    box-shadow:0 5px 12px rgba(0,0,0,0.18);

    z-index:5;

    cursor:grab;

    touch-action:none;

    transition:left 0.35s ease;
}

.dsc-thermometer__handle:active{
    cursor:grabbing;
}

/* ==========================================================
   HANDLE DURING DRAG
========================================================== */

.dsc-thermometer__handle.is-dragging{
    transition:none;
}

/* ==========================================================
   STEP STATES
========================================================== */

/* Step activo */

.dsc-thermometer__step--active .dsc-thermometer__step-icon{
    color:var(--dsc-primary) !important;

     transform:scale(1.18);

    filter:
        drop-shadow(0 0 5px rgba(31,77,130,0.35))
        drop-shadow(0 0 12px rgba(31,77,130,0.20));

    transition:
        transform 0.3s ease,
        filter 0.3s ease,
        color 0.3s ease;
}

.dsc-thermometer__step--active .dsc-thermometer__step-title{
    color:var(--dsc-primary) !important;
}


/* Steps completados */

.dsc-thermometer__step--completed{
    opacity:0.6;
    cursor:default;
}

.dsc-thermometer__step--completed .dsc-thermometer__step-icon{
    color:var(--dsc-secondary) !important;
}

.dsc-thermometer__step--completed .dsc-thermometer__step-title{
    color:var(--dsc-secondary) !important;
}