/* ============================================================
   Secciones: Datos de DAG, Presencia y Reseñas
   Comparte la paleta y el lenguaje visual de index.css
   ============================================================ */

/* local-icons.css aplica fill a todo SVG; estos iconos deben verse de contorno
   (mismo ajuste que hace projects/css/pro_integral_solutions.css). */
.stat-card__icon .local-icon__svg,
.coverage-map__legend .local-icon__svg,
.reviews-button .local-icon__svg,
.review-modal__head .local-icon__svg,
.review-card__stars .local-icon.is-empty .local-icon__svg{
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------ Datos de DAG (sticky) */
.stats-section{
    position: relative;
    width: 100%;
    /* Alto extra: es el recorrido que consume el scroller pegajoso. */
    height: 280vh;
    margin-top: 4em;
}
.stats-sticky{
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5em, 4vh, 3em);
    padding: 2em 0;
    overflow: hidden;
}
.stats-heading{
    width: min(760px, 92%);
    text-align: center;
}
.stats-heading span{
    color: var(--primary-100);
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.stats-heading h3{
    margin: .35em 0;
    color: var(--text-100);
    font-size: clamp(1.9em, 5vw, 3em);
    letter-spacing: .03em;
}
.stats-heading p{
    margin: 0;
    color: var(--text-200);
    line-height: 1.6;
}
.stats-track{
    width: min(1180px, 92%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2em;
}
.stat-card{
    display: flex;
    flex-direction: column;
    gap: .6em;
    padding: 1.6em 1.4em;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 1em;
    background: linear-gradient(135deg, rgba(74,83,70,0.28), rgba(22,24,21,0.7));
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 18px 60px rgba(0,0,0,0.22);
    opacity: .3;
    transform: translateY(34px) scale(.95);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1),
                border-color .6s ease, box-shadow .6s ease;
}
.stat-card.is-seen{
    opacity: .72;
    transform: none;
}
.stat-card.is-active{
    opacity: 1;
    transform: translateY(-6px);
    border-color: rgba(0,186,150,0.55);
    box-shadow:
        0 22px 70px rgba(0,186,150,0.20),
        inset 0 1px 1px rgba(255,255,255,0.22);
}
.stat-card__icon{
    width: 3em;
    height: 3em;
    display: grid;
    place-items: center;
    border-radius: .75em;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,186,150,0.12);
}
.stat-card__icon .local-icon{
    color: var(--primary-100);
    font-size: 1.5em;
}
.stat-card__value{
    margin: .1em 0 0;
    font-family: 'Anton', 'Expletus Sans', sans-serif;
    font-size: clamp(2.4em, 5.5vw, 3.6em);
    line-height: 1;
    letter-spacing: .01em;
    color: var(--text-100);
    font-variant-numeric: tabular-nums;
}
.stat-card.is-active .stat-card__value{
    color: var(--primary-100);
}
.stat-card__affix{
    color: var(--primary-100);
    font-size: .6em;
    vertical-align: super;
}
.stat-card h4{
    margin: 0;
    font-size: 1.05em;
    color: var(--text-100);
    letter-spacing: .02em;
}
.stat-card__desc{
    margin: 0;
    color: var(--text-200);
    font-size: .92em;
    line-height: 1.55;
}
.stats-progress{
    width: min(1180px, 92%);
    height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,0.09);
    overflow: hidden;
}
.stats-progress__bar{
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-100), var(--primary-300));
    transition: width .15s linear;
}

/* --------------------------------------------------------- Presencia */
.coverage-section{
    width: min(1180px, 92%);
    margin: 0 auto;
    padding: 6em 0 2em;
}
.coverage-heading{
    max-width: 760px;
    margin: 0 auto 2.5em;
    text-align: center;
}
.coverage-heading span{
    color: var(--primary-100);
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.coverage-heading h3{
    margin: .35em 0;
    color: var(--text-100);
    font-size: clamp(1.9em, 5vw, 3em);
}
.coverage-heading p{
    margin: 0;
    color: var(--text-200);
    line-height: 1.65;
}
.coverage-body{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 1.5em;
    align-items: start;
}
.coverage-map{
    /* En escritorio el mapa acompaña al listado mientras se hace scroll. */
    position: sticky;
    top: clamp(1.5rem, 10vh, 6rem);
    align-self: start;
    padding: 1.2em;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 1em;
    background: linear-gradient(135deg, rgba(74,83,70,0.24), rgba(22,24,21,0.66));
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.mx-map__svg{
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.mx-map__state{
    fill: rgba(255,255,255,0.055);
    stroke: rgba(255,255,255,0.16);
    stroke-width: .9;
    stroke-linejoin: round;
    transition: fill .45s ease, stroke .45s ease, filter .45s ease;
}
/* Estados con presencia: apagados hasta que la sección entra en pantalla. */
.mx-map__state.is-active{
    stroke: rgba(255,255,255,0.32);
    stroke-width: 1.3;
}
.coverage-map.is-live .mx-map__state.is-active{
    fill: var(--primary-100);
    /* Contorno claro: mantiene la separación entre estados vecinos encendidos. */
    stroke: rgba(255,255,255,0.75);
    /* 'backwards' en vez de 'forwards': al terminar suelta la propiedad y
       .is-current puede repintar el estado por el que va el scroll. */
    animation: state-lights-up .9s cubic-bezier(.2,.8,.2,1) backwards;
}
.coverage-map.is-live .mx-map__state.is-current{
    fill: var(--primary-300);
    stroke: #ffffff;
    stroke-width: 1.6;
    filter: drop-shadow(0 0 6px rgba(0,149,229,0.75));
}
@keyframes state-lights-up{
    0%{ fill: rgba(255,255,255,0.055); }
    55%{ fill: #8ff5e2; }
    100%{ fill: var(--primary-100); }
}
.coverage-map__legend{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2em;
    margin: 1em 0 0;
    padding: 0;
    color: var(--text-200);
    font-size: .85em;
}
.coverage-map__legend li{
    display: flex;
    align-items: center;
    gap: .5em;
}
.legend-dot{
    width: .7em;
    height: .7em;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
}
.legend-dot--active{
    background: var(--primary-100);
    border-color: var(--primary-100);
}
.coverage-panel{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.coverage-counts{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8em;
}
.coverage-counts div{
    padding: 1em;
    border-radius: .8em;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,186,150,0.08);
    text-align: center;
}
.coverage-counts strong{
    display: block;
    font-family: 'Anton', 'Expletus Sans', sans-serif;
    font-size: 2em;
    line-height: 1;
    color: var(--primary-100);
    font-variant-numeric: tabular-nums;
}
.coverage-counts span{
    color: var(--text-200);
    font-size: .85em;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.coverage-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .8em;
}
.coverage-state{
    padding: 1.1em 1.2em;
    border-radius: .8em;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    transition: border-color .4s ease, background .4s ease,
                transform .4s ease, box-shadow .4s ease;
}
.coverage-state:hover{
    border-color: rgba(0,186,150,0.45);
    background: rgba(0,186,150,0.06);
}
/* El estado por el que va el scroll: mismo color que en el mapa. */
.coverage-state.is-current{
    border-color: var(--primary-300);
    background: rgba(0,149,229,0.1);
    transform: translateX(6px);
    box-shadow: 0 10px 34px rgba(0,149,229,0.18);
}
.coverage-state__head{
    display: flex;
    align-items: center;
    gap: .5em;
}
.coverage-state__head .local-icon{
    color: var(--primary-100);
    font-size: 1em;
    transition: color .4s ease;
}
.coverage-state.is-current .coverage-state__head .local-icon{
    color: var(--primary-300);
}
.coverage-state__head h4{
    margin: 0;
    font-size: 1em;
    color: var(--text-100);
}
.coverage-state__cities{
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    margin-top: .6em;
}
.coverage-state__cities span{
    padding: .25em .7em;
    border-radius: 2em;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-200);
    font-size: .82em;
}
.coverage-more{
    margin: 0;
    color: var(--text-200);
    font-size: .9em;
    font-style: italic;
    text-align: right;
}

/* ---------------------------------------------------------- Reseñas */
.reviews-section{
    width: min(1180px, 92%);
    margin: 0 auto;
    padding: 6em 0 4em;
}
.reviews-heading{
    max-width: 760px;
    margin: 0 auto 2.5em;
    text-align: center;
}
.reviews-heading span{
    color: var(--primary-100);
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.reviews-heading h3{
    margin: .35em 0 .6em;
    color: var(--text-100);
    font-size: clamp(1.9em, 5vw, 3em);
}
.reviews-score{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3em;
}
.reviews-score__stars{
    display: flex;
    gap: .15em;
    color: #f5b301;
    font-size: 1.2em;
}
.reviews-score p{
    margin: 0;
    color: var(--text-200);
}
.reviews-score strong{
    color: var(--text-100);
    font-size: 1.15em;
}
.reviews-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1em;
    /* stretch (por defecto) + min-height: todas las tarjetas miden lo mismo. */
    align-items: stretch;
}
.review-card{
    display: flex;
    flex-direction: column;
    gap: .8em;
    padding: 1.3em;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 1em;
    background: linear-gradient(135deg, rgba(74,83,70,0.26), rgba(22,24,21,0.68));
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 16px 50px rgba(0,0,0,0.18);
    transition: .35s ease;
}
.review-card:hover{
    border-color: rgba(0,186,150,0.5);
    transform: translateY(-4px);
    box-shadow: 0 18px 56px rgba(0,186,150,0.16);
}
.review-card.is-collapsed{
    display: none;
}
.reviews-grid.is-expanded .review-card.is-collapsed{
    display: flex;
    animation: review-in .5s ease both;
}
@keyframes review-in{
    from{ opacity: 0; transform: translateY(18px); }
    to{ opacity: 1; transform: none; }
}
.review-card__top{
    display: flex;
    align-items: center;
    gap: .8em;
}
.review-card__avatar{
    width: 3em;
    height: 3em;
    flex: 0 0 3em;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: rgba(0,186,150,0.16);
    border: 1px solid rgba(0,186,150,0.35);
    color: var(--primary-100);
    font-weight: 700;
    letter-spacing: .04em;
}
.review-card__avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.review-card__who h4{
    margin: 0;
    font-size: 1em;
    color: var(--text-100);
}
.review-card__who span{
    color: var(--text-200);
    font-size: .85em;
}
.review-card__stars{
    display: flex;
    gap: .12em;
    color: #f5b301;
}
.review-card__stars .local-icon.is-empty{
    color: rgba(255,255,255,0.22);
}
.review-card__comment{
    margin: 0;
    color: var(--text-100);
    font-size: .95em;
    line-height: 1.6;
    flex: 1;
    /* Tope de seguridad por si alguien deja un comentario larguísimo. */
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-card__service{
    align-self: flex-start;
    padding: .25em .8em;
    border-radius: 2em;
    background: rgba(0,186,150,0.12);
    border: 1px solid rgba(0,186,150,0.28);
    color: var(--primary-100);
    font-size: .78em;
    font-weight: 600;
    letter-spacing: .04em;
}
.reviews-empty{
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-200);
}
.reviews-actions{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8em;
    margin-top: 2.2em;
}
.reviews-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 2.9em;
    padding: 0 1.5em;
    border-radius: .6em;
    border: 2px solid var(--primary-100);
    background: var(--primary-100);
    color: var(--bg-100);
    font-family: inherit;
    font-size: 1em;
    font-weight: 700;
    transition: .3s ease;
}
.reviews-button:hover{
    background: transparent;
    color: var(--primary-100);
}
.reviews-button--ghost{
    background: rgba(0,186,150,0.1);
    border-color: rgba(0,186,150,0.4);
    color: var(--primary-100);
}
.reviews-button--ghost:hover{
    background: var(--primary-100);
    color: var(--bg-100);
}
.reviews-button .local-icon{
    transition: transform .3s ease;
}
.reviews-button.is-open .local-icon{
    transform: rotate(180deg);
}

/* ------------------------------------------------ Modal del formulario */
.review-modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.review-modal[hidden]{
    display: none;
}
.review-modal__box{
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.6em;
    border-radius: 1em;
    border: 1px solid rgba(255,255,255,0.14);
    background: var(--bg-100);
    box-shadow: 0 30px 90px rgba(0,0,0,0.5);
}
.review-modal__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2em;
}
.review-modal__head h4{
    margin: 0;
    color: var(--primary-100);
    font-size: 1.3em;
}
.review-modal__head button{
    background: transparent;
    border: none;
    color: var(--text-200);
    font-size: 1.3em;
    display: flex;
    transition: .3s ease;
}
.review-modal__head button:hover{
    color: var(--primary-100);
}
.review-form{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.review-field{
    display: flex;
    flex-direction: column;
    gap: .25em;
}
.review-field > span{
    color: var(--text-200);
    font-size: .88em;
}
.review-field input,
.review-field select,
.review-field textarea{
    padding: .55em;
    border: none;
    border-bottom: 2px solid var(--text-200);
    background: transparent;
    color: var(--text-100);
    font-family: inherit;
    font-size: .95em;
    transition: .3s ease;
    border-radius: 0;
}
.review-field textarea{
    resize: vertical;
    min-height: 6em;
}
.review-field input:focus,
.review-field select:focus,
.review-field textarea:focus{
    outline: none;
    border-bottom-color: var(--primary-100);
}
.review-field select option{
    background: var(--bg-100);
    color: var(--text-100);
}
.review-field__count{
    align-self: flex-end;
    color: var(--text-200);
    font-size: .78em;
}
/* Estrellas en orden inverso: así el hover ilumina de izquierda a derecha. */
.review-rating{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .2em;
    margin-top: .3em;
}
.review-rating input{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.review-rating label{
    color: rgba(255,255,255,0.2);
    font-size: 1.6em;
    cursor: pointer;
    display: flex;
    transition: color .2s ease, transform .2s ease;
}
.review-rating label:hover,
.review-rating label:hover ~ label,
.review-rating input:checked ~ label{
    color: #f5b301;
}
.review-rating label:hover{
    transform: scale(1.12);
}
.review-rating input:focus-visible + label{
    outline: 2px solid var(--primary-100);
    outline-offset: 2px;
    border-radius: .2em;
}
.review-hp{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.review-form__feedback{
    margin: 0;
    min-height: 1.2em;
    font-size: .9em;
    color: var(--accent-100);
}
.review-form__feedback.is-ok{
    color: var(--primary-100);
}
.reviews-button[disabled]{
    opacity: .6;
    cursor: progress;
}

/* --------------------------------------------------------- Responsive */
/* Alto uniforme de las reseñas sólo donde la rejilla tiene varias columnas;
   en una sola columna cada tarjeta manda y el mínimo estorbaría. */
@media (min-width: 1025px){
    .review-card{
        min-height: 21rem;
    }
}
@media (min-width: 821px) and (max-width: 1024px){
    .review-card{
        min-height: 18rem;
    }
}

@media (max-width: 1024px){
    .coverage-body{
        grid-template-columns: 1fr;
    }
    /* Sin dos columnas el mapa ya no acompaña al listado. */
    .coverage-map{
        position: static;
    }
    .reviews-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px){
    .stats-section{
        height: auto;
        margin-top: 2em;
        padding: 4em 0 2em;
    }
    .stats-sticky{
        position: relative;
        height: auto;
        justify-content: flex-start;
        gap: 1.4em;
        overflow: visible;
    }
    .stats-progress{
        display: none;
    }
    .stats-track{
        grid-template-columns: 1fr;
        gap: .8em;
    }
    .stat-card{
        padding: 1.1em;
        gap: .35em;
    }
    .stat-card__icon{
        width: 2.4em;
        height: 2.4em;
    }
    .stat-card__icon .local-icon{
        font-size: 1.2em;
    }
    .stat-card__value{
        font-size: 2.2em;
    }
    .stat-card__desc{
        font-size: .85em;
    }
    .coverage-section,
    .reviews-section{
        padding-top: 4em;
    }
    .reviews-grid{
        grid-template-columns: 1fr;
    }
    .coverage-more{
        text-align: center;
    }
}

@media (max-width: 420px){
    .stat-card__desc{
        display: none;
    }
    .reviews-actions .reviews-button{
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce){
    .stats-section{
        height: auto;
        padding: 4em 0;
    }
    .stats-sticky{
        position: relative;
        height: auto;
        overflow: visible;
    }
    .stats-progress{
        display: none;
    }
    .stat-card{
        opacity: 1;
        transform: none;
        transition: none;
    }
    .coverage-map{
        position: static;
    }
    .coverage-map.is-live .mx-map__state.is-active{
        animation: none;
        fill: var(--primary-100);
    }
    .coverage-state.is-current{
        transform: none;
    }
    .reviews-grid.is-expanded .review-card.is-collapsed{
        animation: none;
    }
}