* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;    
}
body, 
html {        
    margin: 0;    
    padding: 0;    
    font-style: normal;
    font-display: swap;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'Isidora Light';
    src: url('../fonts/Isidora-Light.woff2') format('woff2'),
        url('../fonts/Isidora-Light.woff') format('woff');
    font-weight: 300;
}

@font-face {
    font-family: 'Isidora Medium';
    src: url('../fonts/Isidora-Medium.woff2') format('woff2'),
        url('../fonts/Isidora-Medium.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'Isidora Sans SemiBold';
    src: url('../fonts/IsidoraSans-SemiBold.woff2') format('woff2'),
        url('../fonts/IsidoraSans-SemiBold.woff') format('woff');
    font-weight: 600;
}

@font-face {
    font-family: 'Isidora Bold';
    src: url('../fonts/Isidora-Bold.woff2') format('woff2'),
        url('../fonts/Isidora-Bold.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: 'Isidora Black';
    src: url('../fonts/Isidora-Black.woff2') format('woff2'),
        url('../fonts/Isidora-Black.woff') format('woff');
    font-weight: 900;
}

@font-face {
    font-family: 'Bobby Jones Condensed';
    src: url('../fonts/BobbyJones-Condensed.woff2') format('woff2'),
        url('../fonts/BobbyJones-Condensed.woff') format('woff');
    font-weight: normal;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    overflow-x: hidden;
}

section.inicio {
    background: url('../img/bg-pantalla-inicio.jpg?v3') no-repeat center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

.inicio-dots {
    background-image: radial-gradient(circle, #5ecece 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    height: 55%;
    left: 0;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%);
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.inicio-content {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 28px;
    justify-content: center;
    padding: 60px 20px 80px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.inicio-logo {
    max-width: 400px;
    width: 70%;
}

.inicio-sub {
    color: #1a1a1a;
    font: 2rem/1.4 'Bobby Jones Condensed';
}
.inicio-sub span {
    color: #ff501c;
}

.inicio-scroll {
    align-items: center;
    color: #ff501c;
    display: flex;
    flex-direction: column;
    font: 1rem/1 'Bobby Jones Condensed';
    gap: 8px;
    margin-top: 20px;
}
.inicio-scroll svg {
    animation: introArrow 1.4s ease-in-out infinite;
    color: #1a1a1a;
}

@keyframes introArrow {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

@media (max-width: 767px) {
    .inicio-logo { width: 85%; }
    .inicio-sub  { font-size: 1.1rem; }
}

        /* Contenedor con altura ajustable para controlar la velocidad del scroll */
        .video-scroll-container {
            position: relative;
            /* AJUSTA ESTE VALOR para controlar la velocidad */
            /* 500vh = rápido, 1000vh = moderado, 2000vh = lento */
            height: 2500vh;
            background: #faf6eb;
        }

        /* Video sticky que se mantiene fijo */
        .video-sticky {
            position: sticky;
            top: 0;
            width: 100%;
            height: 100vh;
            background: #faf6eb;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* El video */
        #scrollVideo {
            background-color: #faf6eb;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }


        /* Contenedor con altura ajustable para controlar la velocidad del scroll */
        .image-scroll-container {
            position: relative;
            /* AJUSTA ESTE VALOR para controlar la velocidad */
            /* Valores sugeridos: 500vh (rápido), 1000vh (moderado), 2000vh (lento) */
            height: 1500vh;
            background: #f7f3e7;
        }

        /* Canvas sticky que se mantiene fijo */
        .canvas-sticky {
            align-items: center;
            background: #f7f3e7;
            display: flex;
            height: 100vh;
            justify-content: center;
            overflow: hidden;
            position: sticky;
            top: 0;
            width: 100%;            
        }

        /* Canvas para renderizar las imágenes */
        #imageCanvas {
            max-width: 100%;
            max-height: 100%;
            display: block;
        }
        
        /* Animations */
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-10px);
            }
            60% {
                transform: translateX(-50%) translateY(-5px);
            }
        }

        @keyframes scroll-down {
            0% {
                opacity: 0;
                top: 10px;
            }
            30% {
                opacity: 1;
            }
            60% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                top: 30px;
            }
        }

        /* Loading indicator */
        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: #fbe8ac; /* fallback mientras cargan las capas */
            color: #000;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-end;
            padding: 0;
            overflow: hidden;
        }

        /* Capas de fondo para crossfade fluido */
        .loading-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0;
            transition: opacity 0.6s ease;
            z-index: 0;
        }

        /* Overlay oscuro sobre las capas de fondo */
        .loading::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1; /* por encima de .loading-bg (z:0) pero debajo de .loading-content (z:2) */
        }

        .loading-content {
            z-index: 2;
            max-width: 680px;
            padding: 3rem 4rem;
            text-align: left;
            margin: 0 auto;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            top: 50%;
        }

        .loading-stat {
            font-size: clamp(1rem, 2.5vw, 1.5rem);
            line-height: 1.6;
            margin-bottom: 2rem;
            opacity: 1;
            min-height: 80px;
            transition: opacity 0.35s ease, transform 0.35s ease;
            transform: translateY(0);
            letter-spacing: 0.01em;
        }
            .loading-fijo{
                font-size: 1.8rem;
                line-height: 1.4;
                letter-spacing: 0.01em;
                max-width: 400px;
                margin-bottom: 15px;
            }

        .loading-stat strong {
            color: #46d9ec;          /* dorado cálido en lugar del morado */
            display: block;
            margin-bottom: 0.5rem;
            font-size: 1.15em;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            font-weight: 700;
        }

        .loading-bar {
            width: 100%;
            max-width: 340px;
            height: 3px;
            background: #fff;
            border-radius: 2px;
            overflow: hidden;
            margin: 0;                /* sin auto, alineado a la izquierda */
        }

        .loading-progress {
            height: 100%;
            background: linear-gradient(to right, #e8c56d, #c49a2a);
            width: 0%;
            transition: width 0.3s ease;
        }

        .loading-details {
            font-size: 0.8rem;
            color: rgba(255,255,255,0.45);
            margin-bottom: 0.75rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .loading.hidden {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        /* === MOBILE (portrait) === */
        @media (max-width: 767px) {
            .loading {
                align-items: center;
                justify-content: flex-end;
                background-position: center top;  /* imagen centrada arriba en móvil */
            }

            .loading::before {
                /*background: linear-gradient(
                    to top,
                    rgba(0,0,0,0.92) 0%,
                    rgba(0,0,0,0.6) 55%,
                    rgba(0,0,0,0.1) 100%
                );*/
            }

            .loading-content {
                padding: 2rem 1.5rem 2.5rem;
                text-align: center;
                max-width: 100%;
                width: 90%;
            }

            .loading-stat {
                font-size: clamp(1.5rem, 4vw, 1.25rem);
            }

            .loading-bar {
                max-width: 100%;
                margin: 0 auto;
            }
        }

        @keyframes fadeInStat {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Rotate phone message for mobile */
        .rotate-phone {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: #2a759b;
            color: white;
            z-index: 999;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            text-align: center;
        }

        .rotate-phone.show {
            display: flex;
        }

        .rotate-icon {
            font-size: 4rem;
            margin-bottom: 1.5rem;
            animation: rotateAnimation 2s ease-in-out infinite;
        }
            .rotate-icon img {
                height: auto;
                max-width: 80px;                
            }

        .rotate-phone h2 {
            color: #fba358;
            font-size: 1.5rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .rotate-phone p {
            font-size: 1.1rem;
            color: #fbe8ac;
            max-width: 400px;
        }

        @keyframes rotateAnimation {
            0%, 100% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(90deg);
            }
        }

        @media (orientation: landscape) and (max-width: 1024px) {
            .rotate-phone {
                display: none !important;
            }
        }

        /* Progress bar superior */
        .progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(to right, #667eea, #764ba2);
            z-index: 100;
            width: 0%;
        }

section.bajada{
    background-color: #000;
    padding: 60px 0;
}   
    .ctn-bajada {
        max-width: 600px;
        margin: 0 auto;
        text-align: left;
    }    
        .ctn-bajada h2{
            border-bottom: #47D7EF 5px solid;
            color: #fff;
            font: 4.5rem/.9 "ivypresto-headline";
            font-weight: 500;
            padding-bottom: 10px;
            position: relative;
            width: fit-content;
        }
            .ctn-bajada h2 span{
                color: #F04F25;
                display: block;
                font-weight: 900;
            }
            .ctn-bajada i{
                background: url('../img/marca-titulo.png') no-repeat center;
                background-size: 100%;
                bottom: -25px;                
                content: '';
                height: 105px;
                left: -15px;
                position: absolute;
                width: 245px;
            }
        .ctn-bajada p{
            border-bottom: 1px solid #4d4d4d;
            border-top: 1px solid #4d4d4d;            
            color: #fff;
            font: 1.1rem / 1.3 'Isidora Medium';
            line-height: 1.6;
            margin-top: 3rem;            
            padding: 30px 0;
        }
            .ctn-bajada p span{
                display: block;
                font-family: 'Isidora Bold';
                text-transform: uppercase;
            }

section.section-title{
    margin: 50px auto;
}
    .box-title{

    }
        .ctn-box-title{
            margin: 0 auto;
            max-width: 900px;            
        }
            .ctn-box-title h3{
                font: 3rem/.9 "ivypresto-headline";
                font-weight: 400;
            }
        .cian{
            background-color: #47D7EF;
            padding: 10px 0;
        }
            .cian h3{                
                display: inline-block;
                font-weight: 800;
                position: relative;
                vertical-align: bottom;
            }
                .cian h3 img{
                    bottom: -30px;
                    position: absolute;
                    right: -30px;
                    width: 325px;                    
                }
                    .cian img.marca-seccion-3{
                        bottom: -35px;
                        position: absolute;
                        right: -30px;
                        width: 465px;                    
                    }
                    .cian img.marca-seccion-4{
                        bottom: -30px;
                        position: absolute;
                        right: -30px;
                        width: 215px;                   
                    }
                    .cian img.marca-seccion-5{
                        bottom: -25px;
                        position: absolute;
                        right: -30px;
                        width: 315px;                 
                    }
                    .cian img.marca-seccion-6{
                        bottom: -25px;
                        position: absolute;
                        right: -30px;
                        width: 480px;             
                    }
                    .cian img.marca-seccion-7{
                        bottom: -35px;
                        position: absolute;
                        right: -30px;
                        width: 225px;           
                    }
                    .cian img.marca-seccion-8{
                        bottom: -35px;
                        position: absolute;
                        right: -30px;
                        width: 245px;           
                    }
                    .cian img.marca-seccion-9{
                        bottom: -30px;
                        position: absolute;
                        right: -30px;
                        width: 365px;       
                    }
            .cian h4{
                display: inline-block;
                font: 1.1rem / 1.3 'Isidora Light';
                position: relative;
                vertical-align: bottom;
            }
                .cian h4 span{
                    font-family: 'Isidora Bold';
                }
                img.marca-seccion-1{
                    bottom: -15px;
                    position: absolute;
                    right: -25px;
                    width: 140px;
                }



/**** ESSALUD SECTION — CSS ****/

/* ── SECTION ─────────────────────────────── */
        .es-section {
            position: relative;
            height: 320vh;            
        }

        /* ── STICKY ──────────────────────────────── */
        .es-sticky {
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* ── HEADER ──────────────────────────────── */
        .es-header {
            flex-shrink: 0;
            align-items: flex-end;
            justify-content: center;
            padding: 1.3rem 2.5rem 0.9rem;
        }
            .es-header h2{
                color: #E5553F;
                font: 1.5rem / 1.1 'Isidora Bold', sans-serif;
                margin-bottom: 15px;
                text-align: center;
            }

        .es-eyebrow {
            display: block;
            font-size: 0.6rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #9a9080;
            margin-bottom: 0.2rem;
        }

        .es-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: #2c2620;
        }

        .es-note {
            font-size: 0.57rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #9a9080;
            display: block;
            text-align: center;
        }

        /* ── PANELS ──────────────────────────────── */
        .es-panels {
            display: flex;
            flex: 1;
            min-height: 0;
        }

        /* LEFT: patients */
        .panel-patients {
            flex: 1;
            margin: 0 auto;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .panel-subhdr {
            margin: 20px auto;
            position: relative;            
            pointer-events: none;            
            text-align: center;
            z-index: 4;
        }

        .panel-name {
            display: block;
            font-size: 0.57rem;
            letter-spacing: 0.17em;
            text-transform: uppercase;
            color: #9a9080;
            font: 0.8rem/1.1 'Isidora Medium';
        }

        .panel-big-num {
            display: block;
            font-size: 2rem;
            font-weight: 800;
            color: #e85858;
            line-height: 1.1;
            font: 1.9rem / 1.1 'Isidora Bold', sans-serif;
        }

        /* STAGE */
        .es-stage {
            position: absolute;
            inset: 0;
            top: 4.8rem;
        }

        /* FIGURE wrapper */
        .p-fig {
            position: absolute;
            top: 0; left: 0;
            filter: grayscale(1);
            will-change: transform, filter;
            transition: filter 0.7s ease;
        }
        .p-fig.lit { filter: none; }

        /* GROUP LABEL */
        .g-lbl {
            position: absolute;
            top: 0; left: 0;
            text-align: center;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease;
            white-space: nowrap;
            transform-origin: top center;
        }
        .g-lbl-name {
            display: block;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font: .7rem / 1.1 'Isidora Sans SemiBold';
        }
        .g-lbl-sub {
            display: block;
            font-size: 0.6rem;
            color: #9a9080;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-top: 2px;
            font: .7rem / 1.1 'Isidora Medium';
        }
        .g-lbl-count {
            display: block;
            font-size: 1.6rem;
            font-weight: 800;
            color: #e85858;
            margin-top: 3px;
            letter-spacing: -0.01em;
            font: 1.5rem / 1.1 'Isidora Bold', sans-serif;
        }

        /* RIGHT: atenciones */
        .panel-atenciones {            
            flex: 0 0 37%;
            display: flex;
            flex-direction: column;
            padding: 1rem 1.6rem 1.4rem;
            overflow: hidden;
            display: none;
        }

        .at-name {
            font-size: 0.57rem;
            letter-spacing: 0.17em;
            text-transform: uppercase;
            color: #9a9080;
            margin-bottom: 0.2rem;
        }

        .at-total {
            font-size: 1.55rem;
            font-weight: 800;
            color: #e85858;
            line-height: 1.1;
            margin-bottom: 0.9rem;
        }

        .at-bars {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 3.5px;
        }

        .at-row {
            display: flex;
            gap: 3px;
            flex-shrink: 0;
            height: 9px;
        }

        .at-seg {
            height: 100%;
            border-radius: 2px;
            opacity: 0.8;
            flex-shrink: 0;
        }

        /* SCROLL HINT */
        .es-scroll-hint {
            align-items: center;
            font-size: 0.56rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #9a9080;
            opacity: 1;
            transition: opacity 0.6s ease;
            pointer-events: none;
            margin: 0 auto;
            padding-bottom: 20px;
            text-align: center;
            width: 100%;
        }
        .es-scroll-hint.gone { /*opacity: 0;*/ }

        /* PROGRESS DOT TRACK */
        .group-track {
            position: absolute;
            bottom: 1.5rem;
            right: 1.5rem;
            display: flex;
            gap: 5px;
            align-items: center;
            z-index: 5;

            opacity: 0;
        }
        .track-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #9a9080;
            opacity: 0.3;
            transition: opacity 0.4s ease, background 0.4s ease;
        }
        .track-dot.lit {
            opacity: 1;
        }

        /* PROVIDER FILTER */
        .es-filter {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            padding: 0.55rem 1rem 0.75rem;
            flex-shrink: 0;
            flex-direction: column;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
        .es-filter.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .es-filter-label {
            font-size: 0.55rem;
            letter-spacing: 0.17em;
            text-transform: uppercase;
            color: #9a9080;
            white-space: nowrap;
        }
        .es-filter-btns {
            display: flex;
            gap: 0.35rem;
            flex-wrap: wrap;
            justify-content: center;
        }
        .es-filter-btn {
            font-size: 0.8rem;
            font-weight: 700;
            font-family: 'Isidora Bold', sans-serif;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #9a9080;
            background: transparent;
            border: 1.5px solid #c9c2b8;
            border-radius: 20px;
            padding: 0.22rem 0.7rem;
            cursor: pointer;
            transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
        }
        .es-filter-btn:hover {
            color: #2c2620;
            border-color: #2c2620;
        }
        .es-filter-btn.is-active {
            color: #fff;
            background: #e85858;
            border-color: #e85858;
        }

/* ══════════════════════════════════════════════════════
   DATOS SLIDER
══════════════════════════════════════════════════════ */
.datos-slider {
    padding: 60px 0;
}

.ds-inner {
    align-items: center;
    display: flex;
    margin: 0 auto;
    max-width: 960px;
    padding: 0 10px;
}

.ds-arrow {
    align-items: center;
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 10px 20px;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.ds-arrow:hover { color: #444; }

.ds-viewport {
    flex: 1;
    overflow: hidden;
}

.ds-slide {
    align-items: center;
    display: none;
    gap: 20px;
    padding: 10px 0;
}
.ds-slide.is-active {
    display: flex;
    animation: dsFadeIn 0.4s ease;
}

@keyframes dsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ds-text {
    flex: 0 0 50%;
    padding: 0;
    text-align: center;
}

.ds-text h3 {
    font: 2.8rem/1.1 "ivypresto-headline";
    font-weight: 500;
    margin-bottom: 20px;
}

.ds-text p {
    color: #333;
    font: 1rem/1.65 'Isidora Medium', sans-serif;
}
.ds-text p strong { 
    font-family: 'Isidora Bold', sans-serif;
    font-size: 1.3rem;
}

.ds-img {
    align-items: center;
    display: flex;
    flex: 0 0 50%;
    justify-content: center;
    padding: 10px 20px;
}
.ds-img img {
    max-height: 260px;
    max-width: 100%;
    object-fit: contain;
}

.ds-dots {
    display: none;
}

@media (max-width: 767px) {
    .datos-slider { padding: 40px 0; }
    .ds-inner { max-width: 100%; padding: 0 4px; }
    .ds-arrow { display: none; }
    .ds-slide { flex-direction: column; gap: 16px; }
    .ds-text { flex: none; padding: 0 16px; width: 100%; }
    .ds-text h3 { font-size: 2rem; margin-bottom: 14px; }
    .ds-text p { font-size: 1.2rem; }
    .ds-img { flex: none; padding: 0 20px; width: 100%; }
    .ds-img img { max-height: 200px; }

    .ds-dots {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-top: 16px;
        padding-bottom: 4px;
    }
    .ds-dot {
        background: #ccc;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        height: 8px;
        padding: 0;
        transition: background 0.25s, transform 0.25s;
        width: 8px;
    }
    .ds-dot.is-active {
        background: #f04f26;
        transform: scale(1.35);
    }

    .box-fuente p{
        padding: 0 10px;
    }
}

/* ══════════════════════════════════════════════════════
   CASOS · HISTORIAS HUMANAS
══════════════════════════════════════════════════════ */
.casos-section {
    padding: 50px 0 70px;
}

.casos-inner {
    align-items: center;
    display: flex;
    margin: 0 auto;
    max-width: 680px;
    padding: 0 10px;
}

.casos-arrow {
    align-items: center;
    background: none;
    border: none;
    color: #3b3a3a;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 10px 20px;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.casos-arrow:hover { color: #444; }

.casos-viewport {
    flex: 1;
    overflow: hidden;
}

.caso-card {
    background: #fff;
    box-shadow: 0px 0px 15px #e8e8e8;
    border: 1px solid #ddd;
    border-radius: 6px;
    display: none;
    flex-direction: column;
    min-height: 440px;
    overflow: hidden;
}
.caso-card.is-active {
    display: flex;
    animation: casosFadeIn 0.4s ease;
}

@keyframes casosFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.caso-top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 14px;
}

.caso-icon { 
    max-width: 75px;
}

.caso-num {
    background: url('../img/borde-caso.png') no-repeat center;
    background-size: 100%;    
    border-radius: 100px;
    color: #4D6FE0;
    font: 1.2rem/1 'Isidora Bold';
    padding: 12px 16px;
    white-space: nowrap;
}

.caso-meta {
    padding: 4px 20px 0;
}

.caso-name {
    font: 1.45rem/1.1 'Isidora Bold';
    color: #111;
    margin-bottom: 3px;
}

.caso-city {
    font: 0.9rem/1.3 'Isidora Medium';
    color: #555;
    margin-bottom: 14px;
}

.caso-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.caso-field {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.caso-field-label {
    font: 0.78rem/1 'Isidora Medium';
    color: #888;
}

.caso-field-value {
    font: 0.95rem/1.3 'Isidora Bold';
    color: #E5553F;
}

.caso-divider {
    border: none;
    border-top: 1px solid #e8e4dc;
    margin: 16px 20px;
}

.caso-body {
    flex: 1;
    padding: 0 20px 0;
}

.caso-text {
    color: #333;
    font: 0.9rem/1.7 'Isidora Medium';
}
.aviso-voz{
    color: #8d8d8d;
    font: 0.9rem/1.7 'Isidora Medium';
    margin-top: 12px;
    font-style: italic;
    font-weight: bold;
}
.caso-text strong { font-family: 'Isidora Bold', sans-serif; }

.caso-footer { padding: 20px 20px 24px; }

.caso-btn,
a.caso-btn-link {
    background: #111;
    border: none;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: 0.95rem/1 'Isidora Bold', sans-serif;
    padding: 14px 26px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.caso-btn:hover,
a.caso-btn-link:hover { background: #2a2a2a; }

/* ── Audio player ── */
.caso-audio-wrap {
    background: #eeecea;
    border-radius: 8px;
    margin-top: 12px;
    padding: 10px 12px;
}

.ap-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.ap-play-btn {
    align-items: center;
    background: #C94820;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 36px;
    justify-content: center;
    transition: background 0.2s;
    width: 36px;
}
.ap-play-btn:hover { background: #a83818; }

.ap-progress-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ap-range {
    -webkit-appearance: none;
    appearance: none;
    background: #ccc;
    border-radius: 2px;
    cursor: pointer;
    height: 4px;
    outline: none;
    width: 100%;
}
.ap-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #C94820;
    border-radius: 50%;
    cursor: pointer;
    height: 14px;
    transition: transform 0.15s;
    width: 14px;
}
.ap-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.ap-range::-moz-range-thumb {
    background: #C94820;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    height: 14px;
    width: 14px;
}

.ap-times {
    color: #888;
    display: flex;
    font-size: 0.68rem;
    justify-content: space-between;
    letter-spacing: 0.03em;
}

.ap-close-btn {
    align-items: center;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 4px;
    transition: color 0.2s;
}
.ap-close-btn:hover { color: #333; }

/* ── Mobile ── */
@media (max-width: 767px) {
    .casos-section { padding: 40px 0 60px; }
    .casos-inner { max-width: 100%; padding: 0 4px; }
    .casos-arrow { padding: 10px 12px; }
    .caso-num { font-size: 1.2rem; padding: 12px; }
    .caso-title-bar { font-size: 1rem; }
    .caso-text { font-size: 1rem; line-height: 1.65; }
    .box-texto{
        padding: 0 20px;
    }
}

        /* ══════════════════════════════════════════
           MOBILE
        ══════════════════════════════════════════ */
        @media (max-width: 767px) {
            .es-section {
                height: auto;
                padding-bottom: 2rem;
            }
            .es-sticky {
                position: relative;
                height: auto;
            }
            .es-header {
                padding: 1rem 1.2rem 0.75rem;
                flex-direction: column;
                align-items: flex-start;
                gap: 0.25rem;
            }
            .es-panels {
                flex-direction: column;
                overflow-x: scroll;
            }
            .panel-patients {
                flex: none;
                height: 70vmax;
                border-right: none;
                border-bottom: 1px solid rgba(0,0,0,0.07);
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x proximity;
            }
            .es-stage {
                position: relative;
                top: auto;
                inset: auto;
                min-width: 780px;
                height: calc(58vmax - 4.8rem);
            }
            .group-track { display: none; }
            .es-scroll-hint { display: none; }
        }

.box-texto{
    margin: 20px auto;
    max-width: 550px;
}
    .box-texto h4{
        font: 1.3rem/1.1 'Isidora Bold';
        margin: 80px 0 10px;
    }
    .box-texto h5{
        font: 1rem/1.1 'Isidora Bold';
        margin-bottom: 5px;
    }
        h5.gigantes{
            color: #E5553F;
            font: 1.5rem / 1.1 'Isidora Bold', sans-serif;
            margin-bottom: 36px;
            text-align: center;
        }
    .box-texto p{
        font: 1rem/1.65 'Isidora Medium', sans-serif;
        margin-bottom: 10px;
    }
        .box-texto p span{
            font-family: 'Isidora Bold';
        }

/* ══════════════════════════════════════════════════════
   GRÁFICO IFRAME EMBED
══════════════════════════════════════════════════════ */
.grafico-iframe-wrap {
    margin: 0 auto;
    max-width: 820px;
    padding: 0 24px 40px;
}

.grafico-iframe-wrap iframe {
    border: none;
    display: block;
    width: 100%;
}

/* ══════════════════════════════════════════════════════
   ESPERA · CARDS DE TIEMPOS
══════════════════════════════════════════════════════ */
.ec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 980px;
    margin: 40px auto 60px;
    padding: 0 24px;
}
.ec-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 28px;
}
.ec-card:nth-child(1),
.ec-card:nth-child(2) {
    /*border-bottom: 1.5px solid #e8e8e8;*/
}
.ec-card:nth-child(1),
.ec-card:nth-child(3) {
    /*border-right: 1.5px solid #e8e8e8;*/
}
.ec-region {
    font: 0.9rem/1 'Isidora Sans SemiBold';
    color: #111;
    letter-spacing: 0.02em;
}
.ec-body {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.ec-mapa {
    width: 140px;
    height: 140px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(1px 1px 2px #c2c2c2);
}
.ec-data {
    border-left: 1px solid #c2c2c2;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 10px;
}
.ec-servicio {
    font: 600 1.35rem/1.2 "ivypresto-headline";
    color: #1a1a1a;
}
.ec-num {
    font: 600 2.8rem/1 "ivypresto-headline";
    color: #F04F25;
    margin: 2px 0 4px;
}
.ec-desc {
    font: 0.87rem/1.45 'Isidora Medium';
    color: #1a1a1a;
}
.ec-desc strong {
    font-family: 'Isidora Sans SemiBold';
}
.ec-nota {
    font: 0.87rem/1.45 'Isidora Sans SemiBold';
    color: #F04F25;
    margin-top: 4px;
}
.ec-brecha {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 2px 0 4px;
}
.ec-brecha-metricas {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /*border-right: 2px solid #ccc;*/
    padding-right: 14px;
}
span.separador {
    background: #f04f26;
    display: block;
    height: 135px;
    position: relative;
    width: 1px;
}
    span.separador::after{
        background: #f04f26;
        content: '';
        height: 1px;
        right: 0;
        position: absolute;
        top: 0%;
        width: 13px;
    }
    span.separador::before{
        background: #f04f26;
        content: '';
        height: 1px;
        right: 0;
        position: absolute;
        bottom: 0%;
        width: 13px;
    }

.ec-brecha-fila {
    display: flex;
    flex-direction: column;
}
.ec-num-sm {
    font: 600 1.5rem/1 "ivypresto-headline";
    color: #F04F25;
}
.ec-br-label {
    font: 400 0.78rem/1.3 'Isidora Medium';
    color: #111;
    margin-bottom: 4px;
}
.ec-brecha-hosp {
    font: 0.82rem/1.45 'Isidora Medium';
    color: #1a1a1a;
    padding-top: 15%;
}
.ec-brecha-hosp strong {
    font-family: 'Isidora Bold', sans-serif;
}
@media (max-width: 680px) {
    .ec-grid { grid-template-columns: 1fr; padding: 0 16px; }
    .ec-card:nth-child(1),
    .ec-card:nth-child(3) { border-right: none; }
    .ec-card:nth-child(1),
    .ec-card:nth-child(2),
    .ec-card:nth-child(3) { border-bottom: 1.5px solid #e8e8e8; width: 90%;}
    .ec-mapa { width: 100px; height: 100px; }
    .ec-num { font-size: 2.2rem; }
    .ec-num-sm { font-size: 1.5rem; }

    .voz-section .voz-inner img{
        max-width: 330px;
    }
    .voz-section .voz-content{
        margin-left: 0;
        width: 100%;
    }

}

/* ══════════════════════════════════════════════════════
   VOZ FINAL · "EL SISTEMA QUE MERECEMOS"
══════════════════════════════════════════════════════ */
.voz-section {
    background: url('../img/bg-voz-section.jpg') repeat-x center top;
    background-position-y: 90px;
    margin: 60px auto 0;
}
    .voz-section .voz-audio-wrap{
        background-color: #fff;
    }
    .voz-section .ap-play-btn{
        background: #000;
    }
    .voz-section .ap-range::-webkit-slider-thumb {
        background: #000;
    }
.voz-hr {
    border: none;
    border-top: 1.5px solid #ddd;
    margin: 0;
}
.voz-inner {
    padding: 44px 0 0;
    position: relative;
    max-width: 475px;
    margin: 0 auto;
}
    .voz-inner img{
        display: inline-block;
        max-width: 350px;
        vertical-align: bottom;
    }
.voz-avatar {
    flex-shrink: 0;
}
.voz-ring-outer {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: #f5d0c8;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.voz-ring-inner {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: #b34237;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}
.voz-ring-inner img {
    width: 158px;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: bottom center;
}
.voz-content {
    display: inline-block;
    min-width: 0;
    vertical-align: bottom;
    max-width: 300px;
    margin-left: -190px;
    margin-bottom: 20px;
}
.voz-titulo {
    font: 600 2rem/1.2 "ivypresto-headline";
    color: #1a1a1a;
    margin-bottom: 8px;
}
.voz-meta {
    font: 600 0.82rem/1.5 'Isidora Sans SemiBold';
    color: #555;
    margin-bottom: 10px;
}
.voz-quote {
    background-color: #FFF5B2;
    border: 4px solid #000;
    font: 500 1.5rem / 1.4 'Bobby Jones Condensed';
    color: #1a1a1a;
    margin: 0 0 22px;
    padding: 10px;
}
    .voz-quote span{
        display: block;
        font-size: 1.1rem;
    }
.voz-audio-wrap {
    background: #eeecea;
    border-radius: 8px;
    max-width: 340px;
    padding: 10px 12px;
}
@media (max-width: 680px) {
    .voz-inner {
        flex-direction: column;
        gap: 24px;
        padding: 32px 0;
        text-align: center;
    }
    .voz-ring-outer { width: 150px; height: 150px; }
    .voz-ring-inner { width: 122px; height: 122px; }
    .voz-ring-inner img { width: 112px; }
    .voz-titulo { font-size: 1.5rem; }
    .voz-audio-wrap { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════
   MEDICAMENTOS · TOP 3
══════════════════════════════════════════════════════ */
.med-top3 {
    display: flex;
    justify-content: center;
    gap: 36px;
    max-width: 900px;
    margin: 48px auto;
    padding: 0 24px;
    flex-wrap: wrap;
}
.med-card {
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.med-icon {
    width: 130px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .med-icon img {
        height: 100%;
        max-width: 90px;
        object-fit: contain;
        width: 100%;
    }
.med-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 34px;
    height: 34px;
    background: #E5553F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 700 1rem/1 'Isidora Bold', sans-serif;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    z-index: 1;
}
.med-nombre {
    font: 700 1.1rem/1.2 'Isidora Bold', sans-serif;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 4px;
}
.med-pct {
    font: 900 2rem/1 "ivypresto-headline";
    color: #E5553F;
    line-height: 1;
}
.med-desc {
    font: 400 0.88rem/1.5 'Isidora Medium';
    color: #E5553F;
    text-align: center;
    max-width: 240px;
}
.med-desc strong {
    color: #E5553F;
    font-family: 'Isidora Bold', sans-serif;
    font-weight: 700;
}
@media (max-width: 680px) {
    .med-top3 { gap: 20px; }
    .med-card { min-width: 130px; max-width: none; }
    .med-pct { font-size: 2.8rem; }
    .med-icon { width: 90px; height: 90px; }
}

/* ══════════════════════════════════════════════════════
   SISTEMA DE SALUD · ORGANIZACIÓN
══════════════════════════════════════════════════════ */
.sistema-section {
    background: #fff;
    padding: 0 0 80px;
}
.sistema-inner {
    margin: 0 auto;
    max-width: 980px;
    padding: 0 24px;
}
.sistema-h2 {
    font: 2rem/1.2 "ivypresto-headline";
    font-weight: 900;
    margin-bottom: 40px;
    text-align: center;
}

/* MINSA top */
.sistema-minsa {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 520px;
    text-align: center;
}
.minsa-circle {
    align-items: center;
    border: 4px solid #47D7EF;
    border-radius: 50%;
    display: flex;
    height: 130px;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
    width: 130px;
}
.minsa-circle img {
    height: 90%;
    object-fit: contain;
    width: 90%;
}
.minsa-name {
    font: 2rem/1.2 "ivypresto-headline";
    font-weight: 900;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.minsa-desc {
    color: #444;
    font: 0.92rem/1.65 'Isidora Sans SemiBold';
    text-align: left;
}

/* Connector lines */
.sistema-connector-v {
    background: #5e5d5d;
    height: 30px;
    margin: 0 auto;
    width: 2px;
}
.sistema-connector-h {
    background: #5e5d5d;
    height: 2px;
    position: relative;
    width: 100%;
}
    .sistema-connector-h::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 40px;
        background: #5e5d5d;
    }
    .sistema-connector-h::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 40px;
        background: #5e5d5d;
    }

/* SUSALUD */
.sistema-susalud {
    align-items: center;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 16px;
    margin: 50px auto 0;
    max-width: 500px;
    padding: 18px 0;
}
.susalud-logo {
    flex-shrink: 0;
    height: 66px;
    width: auto;
}
.susalud-name {
    display: block;
    font: 1.05rem/1 'Isidora Bold';
    margin-bottom: 6px;
}
.susalud-desc {
    color: #444;
    font: 0.88rem/1.55 'Isidora Sans SemiBold';
}

/* Subsectores */
/* Carousel arrows: hidden on desktop, shown on mobile */
.ss-carousel-prev, .ss-carousel-next { display: none; }
.hint-mobile { display: none; }

.sistema-subsectores { padding-top: 28px; }
.subsectores-h3 {
    font: 1.4rem / 1 'Isidora Bold';
    max-width: 500px;
    margin: 0 auto 6px;
}
.subsectores-intro {
    color: #555;
    font: 0.92rem/1.5 'Isidora Sans SemiBold';
    margin: 0 auto 25px;
    max-width: 500px;
}

.subsectores-grid {
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding-bottom: 20px;
}

.subsector-btn {
    align-items: center;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    flex: 0 0 calc(33.33% - 14px);
    flex-direction: column;
    gap: 8px;
    max-width: 265px;
    padding: 20px 12px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.subsector-btn:hover { border-color: #47D7EF; }
.subsector-btn.is-active {
    background: #eaf9fc;
    border-color: #47D7EF;
}

.ss-icon { /*height: 70px;*/ width: 70px; }
.ss-icon img { height: 100%; object-fit: contain; width: 100%; }

.ss-name {
    color: #111;
    display: block;
    font: 0.88rem/1.2 'Isidora Bold', sans-serif;
}
.ss-desc {
    color: #666;
    display: block;
    font: 0.78rem/1.5 'Isidora Sans SemiBold';
}

/* Detail panel */
@keyframes ssFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ss-detail {
    animation: ssFadeIn 0.35s ease;
    border-radius: 10px;
    display: none;
    margin-top: 24px;
    padding: 32px 28px;
}
.ss-detail.is-open { display: block; }

.ss-detail-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 28px;
    text-align: center;
    display: none;
}
.ss-detail-icon { height: 80px; margin-bottom: 12px; width: 80px; }
.ss-detail-icon img { height: 100%; object-fit: contain; width: 100%; }

.ss-detail-name {
    display: block;
    font: 1.2rem/1.1 'Isidora Bold';
    margin-bottom: 4px;
}
.ss-detail-sub {
    color: #777;
    display: block;
    font: 0.82rem/1 'Isidora Medium', sans-serif;
    margin-bottom: 10px;
}
.ss-detail-desc {
    color: #555;
    font: 0.9rem/1.55 'Isidora Medium', sans-serif;
    max-width: 480px;
}

.ss-stats {
    display: flex;
    justify-content: center;
    padding-top: 24px;
}
.ss-stat {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    justify-content: end;
    max-width: 200px;
    padding: 0 10px;
    text-align: center;
}
    .ss-stat img{
        max-width: 100px;
    }
.ss-stat:last-child { border-right: none; }
.ss-num {
    display: block;
    font: 2.4rem/1 "ivypresto-headline";
    font-weight: 700;
}
.ss-lbl {
    color: #555;
    display: block;
    font: 0.78rem/1.4 'Isidora Bold';
}

/* Nota sobre aseguramiento */
.sistema-nota {
    border: 2px solid #F04F25;
    border-radius: 14px;
    margin: 40px auto;
    max-width: 600px;
    padding: 28px 28px 24px;
    position: relative;
    text-align: left;    
}
.nota-badge {
    background: #fff;
    border: 2px solid #F04F25;
    border-radius: 100px;
    color: #000;
    display: inline-block;
    font: 0.82rem/1 'Isidora Bold', sans-serif;
    left: 50%;
    padding: 6px 16px;
    position: absolute;
    top: -16px;
    transform: translateX(-50%);
    white-space: nowrap;
}
.sistema-nota p {
    color: #333;
    font: 0.95rem/1.7 'Isidora Sans SemiBold';
}
.sistema-nota p strong { font-family: 'Isidora Bold', sans-serif; }

@media (max-width: 767px) {
    .sistema-section { padding: 0 0 60px; }
    .sistema-h2 { font-size: 1.5rem; }
    .subsector-btn { flex: 0 0 calc(50% - 10px); max-width: none; }
    .ss-num { font-size: 1.8rem; }
    .ss-detail { padding: 24px 16px; }
    .sistema-nota { padding: 28px 18px 20px; }
    .sistema-nota p { font-size: 1rem; }
    .sistema-subsectores{
        padding-top: 0;
    }

    /* Carousel */
    .hint-desktop { display: none; }
    .hint-mobile  { display: inline; }

    .ss-carousel-wrap {
        align-items: center;
        display: flex;
        gap: 0;
    }
    .ss-carousel-prev, .ss-carousel-next {
        align-items: center;
        background: none;
        border: none;
        color: #333;
        cursor: pointer;
        display: flex;
        flex-shrink: 0;
        font-size: 2.6rem;
        line-height: 1;
        padding: 0 6px;
    }
    .ss-carousel-prev:disabled, .ss-carousel-next:disabled { opacity: 0.15; }

    .subsectores-grid {
        -ms-overflow-style: none;
        border-bottom: none !important;
        flex: 1;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        min-width: 0;
        overflow-x: scroll;
        padding-bottom: 8px !important;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .subsectores-grid::-webkit-scrollbar { display: none; }

    .subsector-btn {
        /*border: 1px solid #e0e0e0 !important;*/
        border-radius: 16px !important;
        /*box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;*/
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-height: 220px;
        padding: 32px 16px !important;
        scroll-snap-align: start;
    }
    .ss-icon { width: 120px; height: 120px; }

    .ss-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 8px;
        padding-top: 20px;
    }
    .ss-stat {
        max-width: none;
        padding: 0 4px;
    }
    .ss-stat:last-child { border-right: none; }
    .nota-badge{
        font-size: 1rem;
    }
    .ctn-box-title h3{
        font-size: 2.3rem;
        padding-left: 5px;
    }
    span.separador{
        height: 33vh;
    }
    .mapa-section#mapaTiempos{
        padding: 0 0 10px;
    }
    .box-flourish#establecimientos{
        padding: 0 0 24px;
    }
    .evz{        
        padding: 0 5px;
    }
    #evzTrack .evz-card{
        border: none;
        padding: 28px 5px 22px;
    }
    .grafico-iframe-wrap{
        padding: 0 5px 40px;
    }
    .brecha-section{
        padding: 40px 0 0;
    }
}

/* ══════════════════════════════════════════════════════
   MAYTÉ · CARD FIJO (entra por la derecha)
══════════════════════════════════════════════════════ */
.mayte-card-fixed {
    max-width: 400px;
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%) translateX(calc(100% + 48px));
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: calc(100% - 48px);
    z-index: 100;
}

.mayte-card-fixed.is-open {
    transform: translateY(-50%) translateX(0);
}

.mayte-card-fixed.is-peeking {
    cursor: pointer;
    transform: translateY(-50%) translateX(calc(100% - 20px));
}

.mayte-card-fixed.is-peeking .mayte-close {
    display: none;
}

.mayte-close {
    background: #000;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    height: 30px;
    line-height: 30px;
    padding: 0;
    position: absolute;
    right: -10px;
    text-align: center;
    top: -10px;
    width: 30px;
    z-index: 1;
}

.mayte-card {
    align-items: stretch;
    background: #E5553F;
    border-radius: 20px;
    color: #fff;
    /*display: flex;*/
    overflow: hidden;
    width: 100%;
}

.mayte-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    padding: 36px 24px 36px 40px;
}
    .mayte-card-body img{
        max-width: 120px;
        position: absolute;
        right: 23px;
        top: -34px;
    }

.mayte-titulo {
    font: 1.6rem/1 'Isidora Bold', sans-serif;
    margin-bottom: 16px;
}

.mayte-hr {
    border: none;
    border-top: 1.5px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 22px;
}

.mayte-texto {
    font: 1rem/1.75 'Isidora Sans SemiBold', sans-serif;
}
    .mayte-texto strong {
        font-family: 'Isidora Bold', sans-serif;
    }
    .mayte-texto a {
        color: #fff;
        text-decoration: underline;
    }

.mayte-ilustracion {
    align-items: flex-end;
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
    width: 180px;
}

.mayte-ilustracion img {
    display: block;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
    width: 100%;
}

@media (max-width: 600px) {
    .mayte-card-fixed {
        right: 8%;
        max-width: 85%;
        width: calc(100% - 24px);
    }   

    .mayte-card { flex-direction: column-reverse; }

    .mayte-card-body img{
        top: -51px;
    }

    .mayte-ilustracion {
        height: 160px;
        justify-content: flex-end;
        width: 100%;
    }

    .mayte-ilustracion img { width: 130px; }

    .mayte-card-body { padding: 24px 20px; }

    .mayte-titulo { font-size: 1.3rem; }
}

/* ══════════════════════════════════════════════════════
   MAPA · TIEMPOS DE ATENCIÓN
══════════════════════════════════════════════════════ */
.mapa-section {
    background: #fff;
    padding: 60px 0 80px;
}

.mapa-inner {
    margin: 0 auto;
    max-width: 900px;
    padding: 0 24px;
}

.mapa-titulo {
    color: #E5553F;
    font: 1.5rem/1.1 'Isidora Bold', sans-serif;
    /*margin-bottom: 36px;*/
    text-align: center;
}

.mapa-filtros {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
}

.mapa-filtro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 260px;
}

.mapa-label {
    color: #888;
    font: 0.78rem/1 'Isidora Sans SemiBold', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mapa-select {
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 1.5px solid #ddd;
    border-radius: 40px;
    color: #222;
    cursor: pointer;
    font: 1rem/1 'Isidora Sans SemiBold', sans-serif;
    outline: none;
    padding: 14px 40px 14px 20px;
    transition: border-color 0.2s;
    width: 100%;
}

.mapa-select:focus { border-color: #E5553F; }
.mapa-select:disabled { color: #aaa; cursor: default; }

.mapa-layout {
    align-items: flex-start;
    display: flex;
    gap: 32px;
}

.mapa-svg-wrap {
    flex: 0 0 65%;
}
#brechaSvgWrap{
    flex: 0 0 55%;
}
    #brechaSvgWrap.mapa-svg-wrap svg{
        height: 495px;
        margin: 0 auto;
        width: 70%;       
    }

.mapa-svg-wrap svg {
    display: block;
    height: 795px;
    width: 100%;
}

.mapa-svg-wrap svg path {
    cursor: default;
    fill: #e8e4de;
    stroke: #fff;
    stroke-width: 1.5;
    transition: fill 0.25s ease;
}

.mapa-svg-wrap svg path.mapa-clickable {
    cursor: pointer;
    fill: #dedad4;
}

.mapa-svg-wrap svg path.mapa-clickable:hover {
    fill: #d0c8c0;
}

.mapa-svg-wrap svg path.mapa-activa,
.mapa-svg-wrap svg path.mapa-activa:hover {
    cursor: pointer;
    fill: #E5553F;
}

.mapa-resultado {
    flex: 1;
    padding-top: 20px;
}

.mapa-placeholder {
    color: #aaa;
    font: 1rem/1.6 'Isidora Sans SemiBold', sans-serif;
}

.mapa-placeholder--small {
    font-size: 0.9rem;
    margin-top: 8px;
}

.mapa-res-esp {
    font: 2rem/1.1 "ivypresto-headline";
    font-weight: 700;
    margin-bottom: 6px;
}

.mapa-res-region {
    font: 1rem/1 "ivypresto-headline";
    font-weight: 700;
    margin-bottom: 20px;
}

.mapa-res-region-solo {
    font: 2rem/1.1 'Isidora Bold', sans-serif;
    margin-bottom: 12px;
}

.mapa-res-texto {
    color: #444;
    font: 0.95rem/1.65 'Isidora Sans SemiBold', sans-serif;
    margin-bottom: 20px;
}

.mapa-res-dias {
    color: #E5553F;
    font: 2.5rem/1 "ivypresto-headline";
    font-weight: 700;
}

.mapa-res-dias span {
    /*display: block;*/
    font: 2.5rem/1 "ivypresto-headline";
    font-weight: 700;
    margin-bottom: 4px;
}

@media (max-width: 680px) {
    .mapa-filtros { flex-direction: column; align-items: center; }
    .mapa-filtro { width: 100%; max-width: 320px; }
    .mapa-layout { flex-direction: column; gap: 0;}
    .mapa-svg-wrap { flex: none; width: 100%; }
    .mapa-svg-wrap svg { height: auto; }
    .mapa-res-dias span { font-size: 3.5rem; }
    .mapa-res-region{
        margin-bottom: 10px;
    }

    .box-fuente{
        padding: 0 0 30px !important;
    }
}

/* ══════════════════════════════════════════════════════
   BRECHA · ESPECIALISTAS POR REGIÓN
══════════════════════════════════════════════════════ */
.brecha-section {
    background: #fff;
    padding: 40px 0 80px;
}

.brecha-filtros {
    flex-wrap: wrap;
}

.brecha-right-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.brecha-resultado {
    padding-top: 20px;
}

.brecha-res-region {
    font: 2rem/1.1 'Isidora Bold', sans-serif;
    margin-bottom: 16px;
}

.brecha-res-carga {
    background: #f5f3f0;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 8px;
    display: none;
}

.brecha-res-carga-titulo {
    color: #888;
    font: 0.75rem/1 'Isidora Sans SemiBold', sans-serif;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.brecha-res-carga-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.brecha-res-carga-item:last-child { margin-bottom: 0; }

.brecha-res-carga-num {
    color: #E5553F;
    font: 1.6rem/1 "ivypresto-headline";
    font-weight: 700;
}

.brecha-res-carga-label {
    color: #555;
    font: 0.82rem/1.3 'Isidora Sans SemiBold', sans-serif;
    margin-top: 2px;
}

.brecha-res-hint {
    color: #aaa;
    font: 0.82rem/1.4 'Isidora Sans SemiBold', sans-serif;
    margin-top: 12px;
}

/* Tabla */
.brecha-tabla-wrap {
    margin-top: 24px;
    overflow-x: auto;
}

.brecha-tabla {
    border-collapse: collapse;
    font: 0.88rem/1.4 'Isidora Sans SemiBold', sans-serif;
    width: 100%;
}

.brecha-tabla th {
    background: #1a1a1a;
    color: #fff;
    font: 0.72rem/1 'Isidora Sans SemiBold', sans-serif;
    letter-spacing: 0.05em;
    padding: 10px 14px;
    text-align: left;
    text-transform: uppercase;
}

.brecha-tabla th:nth-child(n+3) {
    text-align: center;
}

.brecha-tabla td {
    border-bottom: 1px solid #eee;
    color: #333;
    padding: 10px 14px;
    text-align: center;
    transition: background 0.2s;
    vertical-align: middle;
}

.brecha-tabla td:nth-child(n+3) {
    text-align: center;
}

.brecha-tabla .brecha-area-cell {
    color: #888;
    font: 0.72rem/1 'Isidora Sans SemiBold', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brecha-tabla .brecha-total-cell {
    color: #E5553F;
    font-weight: 700;
}

.brecha-tabla .brecha-zero {
    color: #ccc;
}

.brecha-tabla tr.brecha-row-highlight td {
    background: #fff5f3;
}

.brecha-tabla tr.brecha-row-dimmed td {
    /*opacity: 0.35;*/
}

.brecha-tabla tr.brecha-row-highlight .brecha-total-cell {
    color: #E5553F;
    font-size: 1rem;
}

.brecha-fuente {
    color: #aaa;
    font: 0.73rem/1.5 'Isidora Sans SemiBold', sans-serif;
    margin-top: 12px;
    padding: 0 4px;
}

@media (max-width: 680px) {
    .brecha-filtros { flex-direction: column; align-items: center; }
    .brecha-tabla th, .brecha-tabla td { padding: 8px 10px; font-size: 0.8rem; }
}

/* ══════════════════════════════════════════════════════
   NIVELES · ATENCIÓN MINSA
══════════════════════════════════════════════════════ */
.niveles-section {
    background: #eeecea;
    margin: 0 auto 20px;
    padding: 60px 0 0;
}

.niveles-inner {
    margin: 0 auto;
    max-width: 820px;
    padding: 0 24px;
}

.niveles-header {
    margin-bottom: 28px;
    text-align: center;
}

.niveles-header h2 {
    font: 1.5rem / 1.1 'Isidora Bold', sans-serif;
    margin-bottom: 8px;
}

.niveles-hint {
    align-items: center;
    color: #555;
    display: inline-flex;
    font: 1rem/1 'Isidora Medium', sans-serif;
    gap: 6px;
}
.niveles-hint img { vertical-align: middle; }

.niveles-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 44px;
}

.nivel-btn {
    background: #fff;
    border: 1px solid #a6a6a6;
    border-radius: 100px;
    color: #111;
    cursor: pointer;
    flex: 1;
    font: 1rem / 1 'Isidora Bold';
    max-width: 124px;
    padding: 9px 10px;
    transition: background 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.nivel-btn.is-active,
.nivel-btn:hover {
    background: #111;
    color: #fff;
}

/* Dr. Pelado panel */
.niveles-dr[hidden] { display: none; }

.niveles-dr {
    align-items: flex-end;
    display: flex;
    gap: 32px;
    min-height: 340px;
    padding: 0;
}
.niveles-dr img{
    margin: 0 auto;
    max-width: 500px;
}

.niveles-dr-bubble {
    background: #fff;
    border: 3px solid #111;
    border-radius: 14px;
    flex: 1;
    font: 1.5rem/1.4 'Isidora Black', sans-serif;
    max-width: 440px;
    padding: 28px 32px;
    position: relative;
    text-transform: uppercase;
}
.niveles-dr-bubble::after {
    border-bottom: 16px solid transparent;
    border-left: 20px solid #111;
    border-top: 16px solid transparent;
    content: '';
    left: 100%;
    position: absolute;
    bottom: 44px;
}
.niveles-dr-bubble::before {
    border-bottom: 13px solid transparent;
    border-left: 17px solid #fff;
    border-top: 13px solid transparent;
    content: '';
    left: calc(100% - 3px);
    position: absolute;
    bottom: 47px;
    z-index: 1;
}

.niveles-dr-img {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.niveles-dr-img img {
    max-height: 300px;
    max-width: 260px;
    object-fit: contain;
}
.niveles-dr-img span {
    font: 1rem/1 'Isidora Bold', sans-serif;
    margin-top: 8px;
}

/* Nivel panels */
@keyframes npFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nivel-panel {
    animation: npFadeIn 0.35s ease;
    padding: 10px 0 50px;
}

.np-title {
    font: 2rem/1 'Isidora Black', sans-serif;
    margin-bottom: 14px;
    text-transform: uppercase;
}
.np-title em { font-style: normal; }

.np-subtitle {
    border-bottom: 2px solid #111;
    font: 1.1rem/1.2 'Isidora Bold', sans-serif;
    margin-bottom: 22px;
    padding-bottom: 14px;
}

.np-body {
    font: 1rem/1.7 'Isidora Medium', sans-serif;
    margin-bottom: 18px;
}
.np-body strong { font-family: 'Isidora Bold', sans-serif; }

.np-org-title {
    font: 1rem/1 'Isidora Bold', sans-serif;
    margin-bottom: 10px;
}

.np-dl { margin: 0; padding: 0; }
.np-dl-row {
    display: grid;
    font: 1rem/1.55 'Isidora Medium', sans-serif;
    gap: 0 12px;
    grid-template-columns: 90px 1fr;
    margin-bottom: 4px;
}
.np-dl dt { font-family: 'Isidora Bold', sans-serif; }
.np-dl dd { margin: 0; }

@media (max-width: 767px) {
    .niveles-section { padding: 40px 0 0; margin: 60px 0 40px;}
    .niveles-inner { padding: 0 16px; }
    .niveles-header h2 { font-size: 1.5rem; }
    .niveles-btns { gap: 8px; }
    .nivel-btn { font-size: 1.1rem; max-width: none; padding: 14px 8px; }
    .niveles-dr { flex-direction: column; align-items: center; min-height: auto; gap: 20px; }
    .niveles-dr-bubble { font-size: 1.2rem; max-width: 100%; padding: 20px 22px; }
    .niveles-dr-bubble::after,
    .niveles-dr-bubble::before { display: none; }
    .np-title { font-size: 1.6rem; }
    .np-dl-row { grid-template-columns: 76px 1fr; }
    .sistema-minsa{
        margin-bottom: 20px;
    }
    .sistema-susalud{
        margin-top: 70px;
    }
    .niveles-hint{
        margin-bottom: 20px;
    }
    .subsectores-grid{
        gap: 10px;
    }
    .ss-name,
    .ss-desc{
        font-size: 1rem;
    }
}

.titulo-flourish{
    color: #E5553F;
    font: 1.5rem / 1.1 'Isidora Bold', sans-serif;
    margin: 40px auto 10px;
    text-align: center;
}
.box-flourish{
    background: #fff;
    border-radius: 14px;
    margin: 0 auto 60px;
    max-width: 800px;
    padding: 0 28px 24px;
    position: relative;
    text-align: left;
}

/* ═══════════════════════════════════════════════════════
   ENFERMEDAD VS ESPECIALISTAS · VISUALIZACIÓN
═══════════════════════════════════════════════════════ */
.evz {
    margin: 20px auto 60px;
    max-width: 1040px;
    padding: 0 24px;
}

.evz-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 36px;
}

.evz-tab {
    background: #fff;
    border: 2px solid #111;
    border-radius: 100px;
    color: #111;
    cursor: pointer;
    font: 700 0.72rem/1 'Isidora Bold', sans-serif;
    letter-spacing: 0.04em;
    padding: 12px 22px;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.evz-tab:hover { background: #f0f0f0; }
.evz-tab.is-active { background: #111; color: #fff; }

.evz-slider {
    align-items: center;
    display: flex;
    gap: 12px;
}

.evz-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.evz-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

.evz-card {
    background: #fff;
    border: 1px solid #e0ddd8;
    border-radius: 16px;
    flex: 0 0 calc(50% - 12px);
    min-width: 0;
    overflow: hidden;
    padding: 28px 24px 22px;
    text-align: center;
}

.evz-region {
    color: #111;
    font: 1.1rem/1 'Isidora Bold';
    margin: 0 0 12px;
    text-transform: uppercase;
}

.evz-desc {
    color: #555;
    font: 0.85rem/1.55 'Isidora Medium';
    margin: 0 0 22px;
}

/* ── Ratio viz (cáncer, salud mental) ── */
.evz-viz {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 14px;
}

.evz-viz-side {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.evz-viz-side svg { display: block; }

.evz-fig-num {
    color: #111;
    font: 1.1rem/1 'Isidora Medium';
}

.evz-fig-label {
    color: #111;
    font: 0.68rem/1 'Isidora Medium';
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.evz-note {
    color: #999;
    font: 0.76rem/1.4 'Isidora Sans SemiBold', sans-serif;
    margin: 0;
}

/* ── Rate viz (salud materna) ── */
.evz-rate-wrap {
    margin-bottom: 14px;
    padding: 4px 0;
}

.evz-rate-big {
    color: #111;
    display: block;
    font: 1.2rem / 1 'Isidora Medium';
    margin-bottom: 8px;
}

.evz-rate-unit {
    color: #111;
    font: 0.68rem / 1 'Isidora Medium';
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.evz-rate-bar-outer {
    background: #f0ede8;
    border-radius: 100px;
    height: 8px;
    margin: 0 auto 8px;
    max-width: 280px;
    overflow: hidden;
}

.evz-rate-bar-inner {
    background: #E5553F;
    border-radius: 100px;
    height: 100%;
    transition: width 0.5s ease;
}

.evz-rate-context {
    color: #aaa;
    font: 0.74rem/1 'Isidora Sans SemiBold', sans-serif;
}

/* ── Multi viz (brecha múltiple) ── */
.evz-metrics {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 8px;
    text-align: left;
}

.evz-metric {
    border-left: 3px solid #E5553F;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 14px;
}

.evz-metric-val {
    color: #E5553F;
    font: 2.2rem/1 'Isidora Black', sans-serif;
}

.evz-metric-label {
    color: #555;
    font: 0.82rem/1.3 'Isidora Sans SemiBold', sans-serif;
}

/* ── Navigation arrows ── */
.evz-arrow {
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 2.6rem;
    line-height: 1;
    padding: 4px 6px;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.evz-arrow:hover:not(:disabled) { color: #111; }
.evz-arrow:disabled { cursor: default; opacity: 0.2; }

/* ── Page indicators ── */
.evz-pips {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

.evz-pip {
    background: #ccc;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    height: 8px;
    padding: 0;
    transition: background 0.2s;
    width: 8px;
}
.evz-pip.is-active { background: #E5553F; }

/* ── Dot proportion (salud materna) ── */
.evz-prop-wrap {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 6px;
}

.evz-prop-stat {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 640px) {
    .evz-tabs {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: visible;
        padding-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .evz-tab {         
        font-size: 0.8rem;
        padding: 12px 16px;
        width: 60%;
        margin: 0px auto; }
    .evz-arrow { display: none; }
    .evz-card { flex: 0 0 100%; }
    .evz-rate-big { font-size: 3.2rem; }
    .evz-region { font-size: 1.3rem; }
    .evz-viz-side svg { width: 160px; height: 160px; }
    .evz-prop-wrap svg { width: 160px; height: 160px; }



    .ctn-bajada h2{
        font: 3rem / .9 "ivypresto-headline";
    }
    .ctn-bajada p{
        font: 1.2rem / 1.6 'Isidora Medium';
        padding: 20px;
    }
    .cian h4{
        margin: 10px 0;
        padding-left: 5px;
    }

    .sistema-section .box-fuente,
    .ec-grid .box-fuente{
        padding: 0;
    }
    .mapa-section .box-fuente,
    .box-flourish .fuente-atendidos,
    #evz-section-viz .box-fuente,
    #brecha-section .box-fuente{
        padding: 20px 0 0;
    }

    .brecha-right-col{
        width: 100%;
    }
    .ec-body{
        flex-direction: column;
    }

    .box-texto p{
        font: 1.2rem / 1.8 'Isidora Medium', sans-serif;
    }
    .evz-desc{
        font-size: 1.2rem;
    }
    .evz-note,
    .caso-text{
        font-size: 1.1rem;
    }
    .box-fuente p,
    .footer-content ul li h4,
    .footer-content ul li p,
    .minsa-desc,
    .caso-city,
    .caso-field-label,
    .caso-field-value,
    .ec-desc,
    .ec-nota,
    .ec-brecha-hosp{
        font-size: 1rem;
    }
    

}

/* ============================================
   FOOTER
   ============================================ */
.footer-section {
    background: #0f0f0f;
    color: white;
    padding: 30px 40px;
    margin-top: 0;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.logo-comercio {
    display: block;
    margin: 0 auto 50px;
    max-width: 130px;
}

span.separador-logo {
    background-color: white;
    display: block;
    height: 1px;
    margin: 0 auto var(--spacing-md);
    max-width: 600px;
}

.footer-content ul {
    display: inline-block;
    list-style-type: none;
    margin: 0 30px 0;
    padding: 0;
    text-align: center;
    vertical-align: top;
}

.footer-content ul li {
    margin-bottom: 15px;
}

.footer-content ul li h4 {
    font: 0.9rem/1.3 'Isidora Bold';
    margin-bottom: 0;
}

.footer-content ul li p {
    font: 0.9rem/1.6 'Isidora Medium';
    font-weight: 300;
    margin: 0;
}

.box-fuente{
    padding: 0 170px;
}
    .box-fuente p{
        color: #333;
        font: 0.95rem/1.7 'Isidora Medium';
        letter-spacing: normal;
    }
        .box-fuente p span{
            font-family: 'Isidora Bold', sans-serif;
        }
    .fuente-atendidos{
        max-width: 820px;
        margin: 0 auto;
        margin-top: 30px;
        text-align: left;
        padding: 0;
    }
        .fuente-atendidos p{
            text-transform: none;
        }

/* ============================================
   BUSCADOR DE MEDICAMENTOS · DIGEMID
   ============================================ */

.digemid-section {
    background: #fff;
    padding: 0 0 80px;
}

/* ── Search card ── */
.digemid-card {
    background: #fbf5e9;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    margin: 30px auto 32px;
    max-width: 550px;
    padding: 28px 32px;
}

.digemid-card-label {
    color: #9a9080;
    display: block;
    font: 0.6rem/1 'Isidora Sans SemiBold', sans-serif;
    letter-spacing: 0.18em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Location filters row */
.digemid-filters {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 14px;
}
@media (max-width: 700px) {
    .digemid-filters { grid-template-columns: 1fr; }
}

.digemid-filter-group label {
    color: #71695b;
    display: block;
    font: 0.6rem/1 'Isidora Sans SemiBold', sans-serif;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.digemid-select-wrap {
    position: relative;
}
.digemid-select-wrap::after {
    color: #b0a898;
    content: '▾';
    font-size: 0.85rem;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.digemid-select-wrap select,
.digemid-search-row input {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #d8d0c4;
    border-radius: 6px;
    color: #1a1a1a;
    cursor: pointer;
    font: 0.88rem/1 'Isidora Medium', sans-serif;
    outline: none;
    padding: 10px 32px 10px 12px;
    transition: border-color 0.2s;
    width: 100%;
}
.digemid-select-wrap select:focus,
.digemid-search-row input:focus {
    border-color: #47D7EF;
    box-shadow: 0 0 0 2px rgba(71,215,239,0.15);
}
.digemid-select-wrap select:disabled {
    background: #f5f2ec;
    color: #b0a898;
    cursor: not-allowed;
}

/* Medicine search bar */
.digemid-search-row {
    position: relative;
}
.digemid-search-row .digemid-search-icon {
    color: #b0a898;
    left: 12px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.digemid-search-row input {
    font-size: 0.95rem;
    padding: 12px 12px 12px 38px;
}
.digemid-search-row input::placeholder {
    color: #b0a898;
}

/* Status bar */
.digemid-status {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-top: 14px;
    min-height: 18px;
}
.digemid-spinner {
    animation: digemidSpin 0.7s linear infinite;
    border: 2px solid #e8e3d8;
    border-radius: 50%;
    border-top-color: #47D7EF;
    flex-shrink: 0;
    height: 12px;
    width: 12px;
}
@keyframes digemidSpin { to { transform: rotate(360deg); } }
.digemid-dot-ok  { background: #47D7EF; border-radius: 50%; flex-shrink: 0; height: 7px; width: 7px; }
.digemid-dot-err { background: #E5553F; border-radius: 50%; flex-shrink: 0; height: 7px; width: 7px; }
.digemid-status-txt {
    color: #71695b;
    font: 0.75rem / 1.3 'Isidora Medium', sans-serif;
}

/* Results wrapper */
.digemid-results-wrap {
    margin: 0 auto;
    max-width: 820px;
    padding: 0 24px;
}
.digemid-results-hdr {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 12px;
}
.digemid-results-count {
    color: #9a9080;
    font: 0.78rem/1 'Isidora Medium', sans-serif;
}
.digemid-results-count strong {
    color: #E5553F;
    font-family: 'Isidora Bold', sans-serif;
}
.digemid-sort-note {
    color: #b0a898;
    font: 0.7rem/1 'Isidora Medium', sans-serif;
}

/* Table */
.digemid-table-wrap {
    border: 1px solid #e8e3d8;
    border-radius: 10px;
    overflow-x: auto;
}
.digemid-table {
    border-collapse: collapse;
    font: 0.82rem/1.45 'Isidora Medium', sans-serif;
    width: 100%;
}
.digemid-table thead th {
    background: #faf9f5;
    border-bottom: 1px solid #e8e3d8;
    color: #9a9080;
    font: 0.6rem/1 'Isidora Sans SemiBold', sans-serif;
    letter-spacing: 0.1em;
    padding: 10px 14px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.digemid-table tbody tr {
    border-bottom: 1px solid #f0ece4;
    transition: background 0.12s;
}
.digemid-table tbody tr:last-child { border-bottom: none; }
.digemid-table tbody tr:hover { background: #faf9f5; }
.digemid-table tbody td {
    padding: 11px 14px;
    vertical-align: top;
}

.dg-td-price {
    color: #E5553F;
    font: 1rem/1 'Isidora Black', sans-serif;
    white-space: nowrap;
}
.dg-td-price-best {
    background: rgba(229,85,63,0.08);
    border-radius: 5px;
    color: #c43520;
    padding: 2px 7px;
}
.dg-td-med strong {
    color: #1a1a1a;
    display: block;
    font-family: 'Isidora Bold', sans-serif;
    font-size: 0.87rem;
}
.dg-td-med span {
    color: #9a9080;
    display: block;
    font: 0.74rem/1.4 'Isidora Medium', sans-serif;
    margin-top: 2px;
}
.dg-td-loc {
    color: #9a9080;
    font: 0.76rem/1.5 'Isidora Medium', sans-serif;
}
.dg-td-loc strong { color: #444; }

.dg-tag {
    border-radius: 100px;
    display: inline-block;
    font: 0.6rem/1 'Isidora Sans SemiBold', sans-serif;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    text-transform: uppercase;
}
.dg-tag-pub  { background: rgba(71,215,239,0.12); color: #2a9fb5; }
.dg-tag-priv { background: rgba(229,85,63,0.1);  color: #E5553F; }

/* Empty / error state */
.digemid-empty {
    color: #9a9080;
    font: 0.88rem/1.6 'Isidora Medium', sans-serif;
    padding: 50px 20px;
    text-align: center;
}
.digemid-empty .dg-icon { font-size: 2rem; margin-bottom: 10px; }

/* Load more button */
.digemid-load-more-wrap { margin-top: 20px; text-align: center; }
.digemid-btn-more {
    background: transparent;
    border: 1px solid #d8d0c4;
    border-radius: 100px;
    color: #9a9080;
    cursor: pointer;
    font: 0.82rem/1 'Isidora Medium', sans-serif;
    padding: 10px 28px;
    transition: border-color 0.2s, color 0.2s;
}
.digemid-btn-more:hover {
    border-color: #E5553F;
    color: #E5553F;
}

/* ── Search input wrapper (for suggestions positioning) ── */
.digemid-search-input-wrap {
    flex: 1;
    position: relative;
}
.digemid-search-input-wrap input {
    width: 100%;
    box-sizing: border-box;
}

/* ── Suggestions dropdown ── */
.digemid-suggestions {
    background: #fff;
    border: 1px solid #d8d0c4;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    display: none;
    left: 0;
    list-style: none;
    margin: 4px 0 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
}
.digemid-suggestions.open {
    display: block;
    animation: dgSuggestIn 0.14s ease;
}
@keyframes dgSuggestIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.digemid-suggestions li {
    color: #1a1a1a;
    cursor: pointer;
    font: 0.86rem/1.4 'Isidora Medium', sans-serif;
    padding: 9px 14px;
    transition: background 0.1s;
}
.digemid-suggestions li:hover {
    background: #faf9f5;
    color: #E5553F;
}
.digemid-suggestions li mark {
    background: transparent;
    color: #E5553F;
    font-family: 'Isidora Bold', sans-serif;
}

/* Suggestion source badge */
.dg-suggest-badge {
    background: rgba(71,215,239,0.12);
    border-radius: 100px;
    color: #2a9fb5;
    float: right;
    font: 0.58rem/1 'Isidora Sans SemiBold', sans-serif;
    letter-spacing: 0.06em;
    margin-top: 2px;
    padding: 3px 7px;
    text-transform: uppercase;
}
.dg-suggest-badge-prod {
    background: rgba(229,85,63,0.10);
    color: #E5553F;
}


/* ── Sort controls row ── */
.digemid-sort-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.digemid-sort-label {
    color: #9a9080;
    font: 0.72rem/1 'Isidora Medium', sans-serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.digemid-sort-btn {
    align-items: center;
    background: #fff;
    border: 1px solid #d8d0c4;
    border-radius: 100px;
    color: #9a9080;
    cursor: pointer;
    display: inline-flex;
    font: 0.75rem/1 'Isidora Medium', sans-serif;
    gap: 5px;
    padding: 7px 14px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.digemid-sort-btn:hover {
    border-color: #E5553F;
    color: #E5553F;
}
.digemid-sort-btn.active {
    background: #E5553F;
    border-color: #E5553F;
    color: #fff;
}
.digemid-sort-btn.active svg {
    stroke: #fff;
}
