/* CONTENEDOR GENERAL */
.proc-section {
    position: relative;
    padding: 40px 0;
}

/* MAPA */
.proc-map {
    position: relative;
    width: 1220px;
    min-height: 740px; /* ajustable según tu diagrama */
    margin: 0 auto;
     transform-origin: top center;
}
/* Wrapper que habilita scroll horizontal */
.proc-scroll-wrapper{
  width: 100%;
  overflow: hidden;
}


/* >= 1440px: centrado sin scroll */
@media (min-width: 1440px){
  .proc-scroll-wrapper{ overflow-x: hidden; }
  .proc-map{ margin: 0 auto; transform: scale(0.85); }
}

/* < 1440px y >= 992px: aparece scroll horizontal */
@media (max-width: 1439px) and (min-width: 992px){
  .proc-scroll-wrapper{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

}

/* CAJA INFO */
.proc-info {
    position: absolute;
    top: 0px;
    left: 0;
       width: 460px;
    height: 190px;
    background: #F6F4E8;
    border-radius: 12px;
    z-index: 20;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Sombra sutil */
    display: flex;
    align-items: center;
    justify-content: flex-start;
        padding: 10px 40px 30px 40px;
}
/* Contenedor interno con icono + texto */
.proc-info-inner {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Contenedor del icono */
.proc-info-icon {
    width: 100px;
    height: 100px;
    margin-right: 25px;  /* Espaciado entre icono y texto */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .proc-info-icon svg, */
.proc-info-icon img {
    width: 100px;
    height: auto;
    display: block;
}

.proc-info-title, .proc-info-title b {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #2C5904;
}
.proc-info-title br {
    display: none;
}
.proc-info-desc {
    font-size: 11px;
    line-height: normal;
    margin: 0;
    font-weight: 500;
    color: #000;
}

/* HOTSPOTS */
.proc-hotspot {
    position: absolute;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: center;
    z-index: 10;
}

.proc-hotspot-icon svg,
.proc-hotspot-icon img {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* TÍTULO DEL HOTSPOT */
.proc-hotspot-title {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #2C5904;
    white-space: nowrap;
        position: relative;
}
.proc-hotspot--1 .proc-hotspot-title {
    color: #C28A00;
    font-size: 14px;
    line-height: 1.15;
}
/* RING SUAVE */
.proc-hotspot .proc-hotspot-title::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 10px;
    /* border: 2px solid rgba(114, 179, 68, 0.4); */
    opacity: 0;
    transition: opacity .2s ease;
}

.proc-hotspot .proc-hotspot-title:hover::after {
    opacity: 1;
}

.proc-hotspot.is-active .proc-hotspot-title::after {
    opacity: 1;
    /* border-color: rgba(114, 179, 68, 0.9); */
}

/* -------- POSICIONES (EJEMPLO) -------- */
/* AJUSTAS ESTO A OJO */

.proc-hotspot--1 { top: 234px; left: 0; }
.proc-hotspot--2 { top: 233px; left: 110px; }
.proc-hotspot--3 { top: 230px; left: 224px;}
.proc-hotspot--4 { top: 239px; left: 350px; }
.proc-hotspot--5 { top: 170px; left: 465px; }
.proc-hotspot--6 { top: 134px; left: 600px; }
.proc-hotspot--7 { top: 30px; left: 775px; }
.proc-hotspot--8 { top: 40px; left: 930px; }
.proc-hotspot--9 { top: 233px; left: 720px; }
.proc-hotspot--10 { top: 229px; left: 850px; }
.proc-hotspot--11 { top: 214px; left: 1050px; }
.proc-hotspot--12 { top: 430px; left: 100px; }
.proc-hotspot--13 { top: 431px; left: 207px; }
.proc-hotspot--13 img{ width: 79%; }
.proc-hotspot--14 { top: 433px; left: 330px; }
.proc-hotspot--15 { top: 430px; left: 460px; }
.proc-hotspot--16 { top: 452px; left: 851px; }
.proc-hotspot--17 { top: 565px; left: 333px; }
.proc-hotspot--18 { top: 688px; left: 315px; }
.proc-hotspot--19 { top: 635px; left: -17px; }
/* ... hasta el 20 */
svg.f1 {
    top: 355px;
    left: 33px;
    width: 16px;
    height: auto;
}
svg.f2 {
    left: 520px;
    top: 0;
    width: 670px;
    height: auto;
}
svg.f3 {
    left: 560px;
    top: 352px;
    width: 584px;
    height: auto;
}
svg.f4 {
    left: 532px;
    top: 348px;
    width: 584px;
    height: auto;
}
svg.f5 {
    left: 270px;
    top: 348px;
    width: 828px;
    height: auto;
}
svg.f6 {
  left: 100px;
    top: 731px;
    width: 218px;
    height: auto;
    z-index: 99;
}
svg.f7 {
    left: 142px;
    top: 538px;
    width: 180px;
    height: auto;
}
svg.f8 {
    left: 260px;
    top: 352px;
    width: 125px;
    height: auto;
}
svg.f9 {
    left: 146px;
    top: 348px;
    width: 16px;
    height: auto;
}
svg.f10 {
    left: 421px;
    top: 568px;
    width: 40px;
    height: auto;
}
svg.f11 {
    left: 421px;
    top: 460px;
    width: 40px;
    height: auto;
}
svg.f11-1 {
    left: 303px;
    top: 460px;
    width: 26px;
    height: auto;
}
svg.f12 {
       top: 276px;
    left: 83px;
    width: 23px;
    height: auto;
}
svg.f13 {
    top: 276px;
    left: 200px;
    width: 23px;
    height: auto;
}
svg.f14 {
    top: 276px;
    left: 315px;
    width: 23px;
    height: auto;
}
svg.f15 {
    top: 276px;
    left: 433px;
    width: 23px;
    height: auto;
}
svg.f16 {
    top: 290px;
    left: 598px;
    width: 110px;
    height: auto;
}
svg.f17 {
       top: 250px;
    left: 598px;
    width: 66px;
    height: auto;
}
svg.f18 {
       top: 276px;
    left: 818px;
    width: 23px;
    height: auto;
}
svg.f19 {
    top: 276px;
    left: 1013px;
    width: 23px;
    height: auto;
}
svg.f20 {
     top: 173px;
    left: 843px;
    width: 150px;
    height: auto;
}
svg.f21 {
    top: 514px;
    left: 612px;
    width: 230px;
    height: auto;
}
svg.f22 {
    top: 583px;
    left: 561px;
    width: 31px;
    height: auto;
}
svg.f23 {
    top: 587px;
    left: 930px;
    width: 85px;
    height: auto;
}
svg.f24 {
     top: 707px;
    left: 450px;
    width: 35px;
    height: auto;
}
div.text1 {
    top: 375px;
    left: 658px;
    color: #E84E1B;
    font-weight: 500;
}
div.text2 {
    top: 522px;
    left: 640px;
    color: #3E661A;
    font-weight: 500;
}
div.text3 {
       top: 508px;
    left: 1000px;
    color: #81C559;
    font-weight: 500;
}
div.text4 {
      top: 454px;
    left: 638px;
    color: #3E661A;
    font-weight: 500;
    background: #C2EB16;
    padding: 8px 18px;
    line-height: 1.2;
    border-radius: 10px;
    text-align: center;
}
div.text5 svg {
    width: 50px;
    height: auto;
}
div.text5 {
       top: 556px;
    left: 1028px;
    color: #3E661A;
    font-weight: 500;
    background-color: #FBD340;
    line-height: 1.2;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 9px;
    font-size: 15px;
}
div.text6 {
    top: 697px;
    left: 490px;
    color: #3E661A;
    font-weight: 500;
    line-height: 1.9;
}

.line-red.position-absolute {
    background: red;
    height: 2px;
    width: 100%;
        top: 305px;
    left: 0;
}

/* ===============================
   ESTADOS VISUALES HOTSPOTS
================================ */

/* Transiciones suaves */
.proc-hotspot,
.proc-hotspot * {
    transition: 
        opacity .25s ease,
        filter .25s ease,
        transform .25s ease;
}

/* Cuando hay foco activo */
.proc-map.is-hovering .proc-hotspot{
    opacity: 0.35;
    filter: blur(0.5px);
}

/* Activo y preview SIEMPRE nítidos */
.proc-hotspot.is-active,
.proc-hotspot.is-preview {
    opacity: 1 !important;
    filter: none !important;
    z-index: 15;
}


/* ===============================
   ADAPTACIÓN RESPONSIVE SIN SCROLL
================================ */



/* Escalado progresivo */
@media (max-width: 1600px) {
    .proc-map {
        transform: scale(0.95);
    }
}

@media (max-width: 1440px) {
    .proc-map {
        transform: scale(0.9);
    }
}

@media (max-width: 1280px) {
    .proc-map {
        transform: scale(0.85);
    }
    .sos-slider{
            height: 800px !important;
    }
}

/* Límite: tablet ya no muestra este diagrama */
@media (max-width: 991px) {
    .sos-slider{
            height: 1200px !important;
    }
    .proc-section {
        display: none;
    }
    .proc-mobile-hotspot--1 {
        top: 0;
        bottom: auto;
        left: 67px;
    }
    svg.f1 {
        bottom: auto;
        top: 38px;
        left: 5%;
        height: auto;
        width: auto;
    }
    .proc-mobile-hotspot--2 {
        top: 0;
        bottom: auto;
        left: 211px;
    }
    svg.f2 {
        left: auto;
        top: 50px;
        right: 185px;
        width: auto;
        height: auto;
    }
    svg.f3 {
        left: 324px;
        top: 55px;
        width: auto;
        height: auto;
    }
    svg.f4 {
    left: 28px;
    top: 120px;
    width: auto;
    height: auto;
    }
    .proc-mobile-hotspot--3 {
    top: 193px;
    bottom: auto;
    left: 60px;
    }
    .proc-mobile-hotspot--4 {
    top: 205px;
    bottom: auto;
    left: 220px;
    }
    svg.f5 {
    left: auto;
    top: 240px;
    right: 177px;
    width: auto;
    height: auto;
    }
    svg.f6 {
    top: 260px;
    left: 25px;
    bottom: auto;
    width: auto;
    height: auto;
    z-index: 99;
    }
    svg.f7 {
    top: 314px;
    left: 112px;
    bottom: auto;
    width: auto;
    height: auto;
    }
    svg.f8 {
    left: 34px;
    top: 315px;
    width: auto;
    height: auto;
    }
    .proc-mobile-hotspot--5 {
    top: 355px;
    bottom: auto;
    left: 65px;
    }
    .proc-mobile-hotspot--6 {
    top: 356px;
    bottom: auto;
    left: 200px;
    }
     svg.f9 {
            left: 196px;
        top: 480px;
        width: auto;
        height: auto;
    }
    svg.f10{
             left: 186px;
        top: 514px;
        width: auto;
        height: auto;
    }
    .proc-mobile-hotspot--9 {
    top: 615px;
    bottom: auto;
    left: 55px;
    }
    svg.f11 {
        left: 87px;
        top: 567px;
        width: auto;
        height: auto;
    }
    .proc-mobile-hotspot--10 img {
    width: 122px;
    }
    .proc-mobile-hotspot--10 {
    top: 600px;
    bottom: auto;
    left: 200px;
    }
        svg.f11-1 {
        left: 142px;
        top: 646px;
        width: 50px;
        height: auto;
    }
     svg.f12 {
        left: 87px;
        top: 567px;
        width: auto;
        height: auto;
    }
        svg.f12 {
        left: 122px;
        top: 710px;
        width: auto;
        height: auto;
    }
    div.text1 {
    top: 736px;
    left: 59px;
    color: #E84E1B;
    font-size: 14px;
    font-weight: 500;
    }
    .proc-mobile-hotspot--8 {
    top: 829px;
    bottom: auto;
    left: 216px;
}
.proc-mobile-hotspot--7 {
    top: 818px;
    bottom: auto;
    left: 53px;
}
      svg.f13 {
        left: 35px;
        top: 503px;
        width: auto;
        height: auto;
    }
    div.text4 {
    top: 974px;
    left: 201px;
    font-size: 13px;
    color: #3E661A;
    font-weight: 500;
    background: #C2EB16;
    padding: 4px 8px;
    line-height: 1.2;
    border-radius: 10px;
    text-align: center;
    }
    div.text3 {
    top: 1021px;
    font-size: 15px;
    left: 203px;
    color: #81C559;
    font-weight: 500;
    }
    .proc-mobile-hotspot--11 img {
    width: 94px;
}
.proc-mobile-hotspot--11 {
    top: 974px;
    bottom: auto;
    left: 83px;
}
.proc-mobile-hotspot--16 img {
    width: 125px;
}
.proc-mobile-hotspot--16 {
    top: 1100px;
    bottom: auto;
    left: 208px;
}
    .proc-mobile-hotspot--15 {
        top: 1177px;
        bottom: auto;
        left: 74px;
    }
    div.text2 {
    font-size: 15px;
    top: 1126px;
    width: 95px;
    left: 77px;
    color: #3E661A;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    }
       svg.f14 {
        left: 87px;
        top: 1161px;
        width: auto;
        height: auto;
    }
       svg.f15 {
        left: 284px;
        top: 1227px;
        width: auto;
        height: auto;
    }
    div.text5 {
    top: 1257px;
    left: 256px;
    color: #3E661A;
    font-weight: 500;
    background-color: #FBD340;
    line-height: 1.2;
    border-radius: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    font-size: 13px;
    }
    svg.f16 {
        left: 47px;
        top: 1040px;
        width: auto;
        height: auto;
    }
    div.text6 {
    top: 1412px;
    left: 77px;
    color: #3E661A;
    font-weight: 500;
    line-height: 1.95;
    }
    svg.f17{
             left: 118px;
        top: 1352px;
        width: auto;
        height: auto;
    }
    svg.f18{
             left: 139px;
        top: 1432px;
        width: auto;
        height: auto;
    }
     .proc-mobile-hotspot--17{
               top: 1371px;
        bottom: auto;
        left: 245px;
    }
     svg.f19{
              left: 187px;
        top: 1336px;
        width: auto;
        height: auto;
    }
    .proc-mobile-hotspot--18{
      top: 1552px;
        bottom: auto;
        left: 62px;
    }
    .proc-mobile-hotspot--12{
      top: 1517px;
        bottom: auto;
        left: 238px;
    }
    .proc-mobile-hotspot--13{
     top: 1783px;
        bottom: auto;
        left: 237px;
    }
     .proc-mobile-hotspot--14{
             top: 1641px;
        bottom: auto;
        left: 244px;
    }
     .proc-mobile-hotspot--19{
        top: 1724px;
        bottom: auto;
        left: 55px;
    }
       svg.f20{
               left: 113px;
        top: 1677px;
        width: auto;
        height: auto;
    }
        svg.f21 {
        left: 282px;
        top: 1484px;
        width: auto;
        height: auto;
    }
        svg.f22 {
              left: 282px;
        top: 1747px;
        width: auto;
        height: auto;
    }
       svg.f23 {
              left: 82px;
        top: 1747px;
        width: auto;
        height: auto;
    }
    .proc-mobile-map svg {
    z-index: -1;
    }
}





/* ===============================
   MOBILE PROCESOS
================================ */

.proc-mobile {
    padding: 20px 0;
}

.proc-mobile-map {
    position: relative;
    width: 370px;
    min-height: 1950px;
    transform-origin: top center;
    margin: auto;
}

/* HOTSPOTS MOBILE */
.proc-mobile-hotspot {
    position: absolute;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: center;
}

.proc-mobile-icon svg,
.proc-mobile-icon img {
    height: auto;
    display: block;
    margin: 0 auto;
}

.proc-mobile-title {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #2C5904;
    line-height: 1.2;
}

/* ===============================
   MODAL
================================ */

.proc-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.proc-modal.is-open {
    display: block;
}

.proc-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.proc-modal-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: #F6F4E8;
    width: calc(100% - 40px);
    max-width: 360px;
    padding: 24px 20px;
    border-radius: 14px;
    text-align: center;
    opacity: 0;
    transition: all .25s ease;
}

.proc-modal.is-open .proc-modal-box {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.proc-modal-close {
    position: absolute;
        top: 1px;
    right: 4px;
    border: none;
    background: transparent;
    color: #2C5904;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
}

.proc-modal-icon svg,
.proc-modal-icon img {
    width: 90px;
    height: auto;
    margin-bottom: 12px;
}

.proc-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #2C5904;
    margin-bottom: 8px;
}

.proc-modal-desc {
    font-size: 14px;
    line-height: 1.4;
    color: #000;
}




/* ===============================
   SLIDER SOS
================================ */

.sos-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
        height: 1200px;
}

.sos-slider-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* SLIDE */
.sos-slide {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}

.sos-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* COLUMNAS */
.sos-slide-img,
.sos-slide-content {
    width: 50%;
}

.sos-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CONTENIDO */
.sos-slide-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .sos-slide-content-inner {
    max-width: 420px;
} */

.sos-slide-title {
    font-size: 3.5rem;
    margin-bottom: 12px;
}

.sos-slide-desc {
    font-size: 1.7rem;
    line-height: normal;
    margin: 0;
}

/* CONTROLES */
.sos-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sos-controls button {
    border-radius: 50%;
    border: none;
    background: transparent;
        cursor: pointer;
}


@media (max-width: 600px) {
    .sos-slider {
        height: 280px;
    }
    .sos-slide-title {
    font-size: 15px;
    margin-bottom: 5px;
    }
    .sos-slide-desc {
    font-size: 10px;
    }
    .sos-controls button svg {
        width: 32px;
    }
}