body {width: 5400px;height: 3840px;margin: 0;overflow: auto;display: grid;grid-template-columns: repeat(5, 1fr);grid-template-rows: repeat(2, 1fr);}

.pantalla {width: 1080px;height: 1920px;display: flex;justify-content: center;align-items: center;}
.container {position: relative;width: 100%;height: 100%;overflow: hidden !important;display: flex;flex-direction: column;align-items: center;}
.container video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: -1;}

.fondoAzul {position: relative;height: 112.313rem;width: 54rem;top: 3.25rem;z-index: 2;background: linear-gradient(90deg, #2795DDdc 0%, #03619Edc 100%);border-radius: 4.688rem;border: 0.30rem solid white;display: flex;justify-content: center;text-align: center;}
.fondoAzul2{position: relative;height: 100rem;width: 54rem;top: 7rem;z-index: 2;background: linear-gradient(90deg, #2795DDdc 0%, #03619Edc 100%);border-radius: 4.688rem;border: 0.30rem solid white;display: flex;justify-content: center;text-align: center; overflow: visible;}
.fondoAzul3 {position: relative;height: 105rem;width: 54rem;top: 7rem;z-index: 2;background: linear-gradient(90deg, #2794dddc 0%, #03619Edc 100%);border-radius: 4.688rem;border: 0.30rem solid white;display: flex;justify-content: center;text-align: center; align-items:center; flex-direction:column;}
.fondoVerde {position: relative;height: 105rem;width: 54rem;top: 7rem;z-index: 2;background: linear-gradient(122deg, #58DA78dc 0%, #4AC77Edc 16%, #03619Edc 100%);border-radius: 4.688rem;border: 0.30rem solid white;display: flex;justify-content: center;text-align: center; align-items:center; flex-direction:column;overflow: hidden}
.fondoBlanco {position: relative;width: 100%;height: 100%;overflow: hidden !important;display: flex;flex-direction: column;align-items: center;background-image: url(../images/fondo-efecto-sombras.png);background-size: cover;background-repeat: no-repeat;background-position: center;}

.ActMed, .pulso {animation: zoomBlink 1.5s ease-out forwards;}
@keyframes zoomBlink {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  40% {
    transform: scale(1.05); 
    opacity: 1;
  }

  60% {
    transform: scale(1);
    opacity: 1;
  }

  80% {
    transform: scale(1.02); 
    opacity: 0.8;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Contenedor universal */
.graficas {position: relative;display: flex;justify-content: center;width: 100%;margin-bottom: 23%;gap: 5rem;margin-top: 2rem;z-index: 1000;}
.chart-wrapper {flex: 1;text-align: center;position: relative;}
.chart {position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;text-align: center;margin: 0 auto;}
.chart svg {position: absolute;top: 0; left: 0;width: 100%; height: 100%;z-index: 1;transform: rotate(-90deg);}
.circle-bg {fill: none;stroke-width: 8;opacity: 0.3;}
.circle-progress {fill: none;stroke-width: 8;stroke-dasharray: 251.2;stroke-linecap: butt;stroke-dashoffset: 251.2;}
.chart h1, .chart h2, .chart p {position: relative;z-index: 2;margin: 0;}
.chart h2 {margin-top: 4rem;margin-bottom: 6rem;}
/* ------VARIANTES DE COLOR ------------------------- */
.amarillo .circle-bg {stroke: #D9D9D9;}
.amarillo .circle-progress {stroke: #F9B108ec;}
.amarillo .percentage {fill: #ffffff;}

.azul .circle-bg {stroke: #D9D9D9;}
.azul .circle-progress {stroke: #08E1F9ec;}
.azul .percentage {fill: #ffffff;}

.rosa .circle-bg {stroke: #D9D9D9;}
.rosa .circle-progress {stroke: #FFACBEec;}
.rosa .percentage {fill: #ffffff;}

.verde .circle-bg {stroke: #D9D9D9;}
.verde .circle-progress {stroke: #58DA78 ;}
.verde .percentage {fill: #ffffff;}

/* ------VARIANTES DE TAMAÑOS ------------------------- */
.chart-grande {width: 54rem; height: 59rem}
.chart-pequeña {width: 35rem; height: 35rem;}

.chart-text {position: relative;z-index: 2;display: flex;flex-direction: column;align-items: center;gap: 12rem;}
.chart-text2{position: relative;z-index: 2;display: flex;flex-direction: column;align-items: center;gap: 0;}

/* visitantes x destino y zona */
.fondoAzul2 {transition: background-color 1s ease;}
.fondoAzul2.blanco {background-color: #69baefb9;}
.contenidoP2, .contenidoP3 {transition: opacity 1s ease;opacity: 0;position: absolute;top: 0;left: 0;width: 100%;}
.contenidoP2.visible, .contenidoP3.visible {opacity: 1;position: relative;}

/*webcams */
.ventanas {position: relative;display: flex;justify-content: center;align-items: center;margin-bottom: 3rem;}
.ventanas img {display: block;max-width: 100%;height: auto;position: relative;z-index: 3;}
.ventanas video {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 28rem;height: 49rem;object-fit: cover;z-index: 1;}
.persiana {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 27rem;
  height: 49rem;
  z-index: 2;
  background: repeating-linear-gradient(
    to top,
    #ffffff 0,
    #ffffff 1.2rem,
    rgba(255, 255, 255, 0.7) 1.2rem,
    rgba(255, 255, 255, 0.7) 2.4rem
  );
}

/* Subida con resistencia */
.persiana.subir {
  animation: subirPersiana 2s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

/* Bajada con resistencia */
.persiana.bajar {
  animation: bajarPersiana 2s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

@keyframes subirPersiana {
  0%   { clip-path: inset(0 0 0 0); }
  20%  { clip-path: inset(0 0 20% 0); }
  60%  { clip-path: inset(0 0 80% 0); }
  100% { clip-path: inset(0 0 100% 0); }
}

@keyframes bajarPersiana {
  0%   { clip-path: inset(0 0 100% 0); opacity: 0.9; }
  40%  { clip-path: inset(0 0 60% 0); opacity: 0.95; }
  80%  { clip-path: inset(0 0 20% 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}





/* avisos */
.información {margin-right: 5rem;margin-left: 5rem; display: flex;flex-direction: column;align-items: flex-start;text-align: left;}
.contenido img[alt="Logo atención"] {animation: bounceIn 1.5s ease-out forwards;}
@keyframes bounceIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  60% {
    transform: scale(1.2);
    opacity: 1;
  }

  80% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.información p {opacity: 0;transform: translateY(20px);animation: slideUpFade 1.2s ease-out forwards;}
.información p:nth-child(1) {animation-delay: 0.5s;}
.información p:nth-child(2) {animation-delay: 1s;}
.información p:nth-child(3) {animation-delay: 1.5s}
.slideUpFade {animation: slideUpFade 1.2s ease-out forwards;}
@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Agenda */
.bloque-eventos {display: flex;flex-direction: column;gap: 2rem;flex: 1;}
.evento {flex: 1;display: flex;border-radius: 1.563rem;}
.barraVertical {height: 20.5rem;flex: 0 0 1rem;display: flex;flex-direction: column;gap: 0;margin: 0;}
.info {height: 19rem;background: white;flex: 1 1 auto;display: flex;flex-direction: column;justify-content: space-around;padding: 0.75rem;text-align: left;border-radius: 1.563rem;overflow: hidden;}
.info h5 {padding-left: 1.5rem;margin-left: 0.5rem;align-self: flex-start;margin-top: 0; margin-bottom: 0;}
.info span {padding-left: 1.5rem;margin-left: 0.5rem;align-self: flex-start;margin-top: 0.7rem;}
.grupo {animation: zoomBlink 1.5s ease-out forwards;animation-delay: 0.5s;opacity: 0;}
@keyframes zoomBlink {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  40% {
    transform: scale(1.3);
    opacity: 1;
  }

  60% {
    transform: scale(1);
    opacity: 1;
  }

  80% {
    transform: scale(1.1);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Folia project */
.retoHC {display: flex;justify-content: space-between;align-items: center;gap: 2rem;margin-top: 0;margin: 5rem;}
.reto {display: flex;flex: 1;flex-direction: column;gap: 0;text-align: left;}
.reto h3 {margin-bottom: -2rem;margin-top: 0;}
.hojitas {flex-shrink: 0;margin-top: 5rem;}

/* Reuniones 2 */
.contenido-reuniones2 h2{margin-top: 0; margin-bottom: 0;}
.contenido-reuniones2 h1:first-of-type{margin-bottom:5rem;}
.contenido-reuniones2 h1:last-of-type {margin-top: 6rem;}

/* Evento */
.contenido-evento h1,
.contenido-evento h2 {margin: 0; padding: 0; line-height: 1.1; }
.contenido-evento h2:first-of-type {margin-bottom: 3rem;}
.contenido-evento h2:nth-of-type(2) {margin-bottom: 0.15rem;}
.contenido-evento h1 {margin-top:-1rem;}
.white-card {background-color: var(--bs-white);display:block; text-align: left; padding: 2rem;}
.white-card h2 {line-height: 3.5rem;}

/* Alegria */
.h2-number{font-size:16rem;font-family:'Flowers Of Nineties';font-style:italic;font-weight:700;line-height:0%;margin:0;padding-top:4rem;}
.manrope-aforo{font-family: 'Manrope';font-size:3rem;font-style: normal;font-weight: 700;margin-bottom:6rem;}
.h2-person{font-size:6rem;font-family:'Flowers Of Nineties';font-style:italic;font-weight:400;padding-top:2rem;}
.h2-number-2{font-size:12rem;font-style:italic;margin:0;}
.yellow-font{color:var(--bs-amarillo);}
.h2-reuniones{font-family:'Manrope'; font-size:2rem;font-weight:700; margin:0; margin-top:-2rem;}
.h2-grafica{font-size:3rem;font-family:'Flowers Of Nineties';font-style:italic;font-weight:400;}
.titulo {margin-top:5rem}
.titulo h2 {font-family:'Flowers Of Nineties'; font-style:italic; font-weight: 400;}
.p-manrope-xs{font-size:2rem;font-family:'Manrope';font-weight:700; line-height:95%;}
.alegria .circle-bg{stroke:#D9D9D9;}
.alegria .circle-progress{stroke:#08e1f9ec;}
.alegria .percentage{fill:#08E1F9;}
.chart2{position:relative;width:35rem;height:35rem;}
.chart2 svg{width:100%;height:100%;transform:rotate(-90deg);}
.chart2 p,.chart2 h2{position:absolute;left:50%;transform:translateX(-50%);text-align:center;width:100%;pointer-events:none;}
.chart2 p{top:18%;}
.chart2 h2{bottom:23%;}
.chart2 text.percentage{font-size:1.8rem;font-weight:bold;fill:#08E1F9;transform:rotate(90deg);transform-origin:center;}
.aforo{transform:translateY(-1rem);}
.reuniones-grafica{display:flex;align-items:center;justify-content:flex-start;gap:12rem;margin-top: 10rem;}
.reuniones{width:8rem;text-align:center;transform:translateX(10rem) translateY(-0.5rem);display:flex;flex-direction:column;align-items:center;}
.grafica-alegria{flex-shrink:0;transform:translateX(6rem);}


/*Animación borde fondoAzul*/
/* .fondoAzulAnimado { --border-glow-width: 0.30rem; position: relative; height: 112.313rem; width: 54rem; top: 3.25rem; background: linear-gradient(90deg, #2795DDdc 0%, #03619Edc 100%); border-radius: 4.688rem; border: var(--border-glow-width) solid white; display: flex; justify-content: center; text-align: center; z-index:1; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.fondoAzulAnimado::after, .fondoAzulAnimado::before { --angle: 0deg; content: ""; position: absolute; inset: 0; background-image: conic-gradient(from var(--angle), transparent 50%, rgba(255, 255, 255, 0.661)); z-index: -1; padding: var(--border-glow-width); border-radius: inherit; animation: 10s spin linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.fondoAzulAnimado::before { filter: blur(1.5rem); }
@keyframes spin {
  from {
      --angle: 0deg;
  }
  to {
      --angle: 360deg;
  }
} */

/*Animación glow+pulso para gráficas*/
.chart .circle-progress { filter: drop-shadow(0 0 0 #FFACBE); transition: filter 1s ease-in-out; }
@keyframes glowPulseRosa {
    0%   { filter: drop-shadow(0 0 0 #FFACBE); }
    50%  { filter: drop-shadow(0 0 3px #FFACBE); }
    100% { filter: drop-shadow(0 0 0 #FFACBE); }
}
.rosa .circle-progress.glow { animation: glowPulseRosa 2s ease-in-out infinite; }

/* Para verde */
@keyframes glowPulseVerde {
    0%   { filter: drop-shadow(0 0 0 #58DA78); }
    50%  { filter: drop-shadow(0 0 3px #58DA78); }
    100% { filter: drop-shadow(0 0 0 #58DA78); }
}
.verde .circle-progress.glow { animation: glowPulseVerde 2s ease-in-out infinite; }

/* Para amarillo */
@keyframes glowPulseAmarillo {
    0%   { filter: drop-shadow(0 0 0 #F9B108ec); }
    50%  { filter: drop-shadow(0 0 3px #F9B108ec); }
    100% { filter: drop-shadow(0 0 0 #F9B108ec); }
}
.amarillo .circle-progress.glow { animation: glowPulseAmarillo 2s ease-in-out infinite; }

/* Para azul */
@keyframes glowPulseAzul {
    0%   { filter: drop-shadow(0 0 0 #08E1F9ec); }
    50%  { filter: drop-shadow(0 0 3px #08E1F9ec); }
    100% { filter: drop-shadow(0 0 0 #08E1F9ec); }
}
.azul .circle-progress.glow { animation: glowPulseAzul 2s ease-in-out infinite; }
/*Fin animación glow+pulso para gráficas*/

/* ------------------------------------------------------------------------------------------- */