/* ===== Scope UGAM (evita contaminar global) ===== */
.ugam-scope{
  --verde-musgo:#3F5E33;
  --verde-suave:#88B77B;
  --verde-brillante:#8AC324;
  --crema-suave:#F5F5DC;
  --azul-oscuro:#2D375B;
  --blanco:#FFFFFF;
}

/* Layout base */
.ugam-scope .ugam-wrap{ width:min(1000px,94%); margin:32px auto 80px; }
.ugam-scope .underline{ color: #000; }
.ugam-scope .ugam-hr{ height:1px; background:var(--verde-suave); border:0; margin:22px 0; }

/* Secciones con IO (estado inicial) */
.ugam-scope .ugam-section{ margin:0px 0 -7px; opacity:0; transform:translateY(50px); }

/* Cajas y variaciones */
.ugam-scope .ugam-box,
.ugam-scope .ugam-boxi{ padding:16px 18px; background:var(--blanco); }
@media (max-width: 480px) {
  .ugam-scope .ugam-boxi.ugam-full-box {
    padding: 1.5rem 1rem;
  }
}
@media (max-width: 1024px) {
  .ugam-scope .ugam-full-box {
    padding: 1.5rem 2rem !important;
  }
}



.ugam-scope .ugam-box.ugam-call,
.ugam-scope .ugam-boxi{ background:#549F57; color:#fff; }
.ugam-scope .ugam-box h3,
.ugam-scope .ugam-boxi h3{ margin:.1rem 0 .4rem; font-size:1.15rem; color:var(--azul-oscuro); }
.ugam-scope .ugam-box.ugam-call h3,
.ugam-scope .ugam-boxi h3{ color:#fff; }
.ugam-scope .ugam-list li{ margin:.25rem 0; }

/* Objetivos */
.ugam-scope .ugam-section.objetivos{ position:relative; overflow:visible; padding:2rem 1rem; min-height:300px; }
.ugam-scope .ugam-objective-grid{
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:12px; position:relative;
}
.ugam-scope .ugam-objective-grid::before{
  content:''; position:absolute; top: 0px; bottom: 158px; left:50%; width:2px;
  background:var(--verde-suave); z-index:0;
}
.ugam-scope .ugam-objective-card{
  background:var(--blanco); padding:15px 20px; display:flex; flex-direction:column;
  align-items:flex-start; gap:12px; position:relative; z-index:1; height:auto;
}
.ugam-scope .ugam-icon{ width:60px; height:60px; object-fit:contain; flex-shrink:0; margin: auto;}
.ugam-scope .objetivo-texto{ text-align:justify; }
.ugam-scope .objetivo-titulo{ display:block; margin-bottom:.4rem; font-size:1.2rem; color:var(--azul-oscuro); font-weight:700; }
.ugam-scope .objetivo-parrafo{ margin:0; line-height:1.5; text-align:justify; color:var(--azul-oscuro); }

/* Líneas horizontales entre filas (desktop) */
@media (min-width:720px){
  .ugam-scope .ugam-objective-grid{ grid-template-columns:repeat(2,1fr); }
  .ugam-scope .ugam-objective-grid .ugam-objective-card:nth-child(5){ grid-column:span 2; }
  .ugam-scope .ugam-objective-grid .ugam-objective-card:nth-child(2)::after,
  .ugam-scope .ugam-objective-grid .ugam-objective-card:nth-child(4)::after{
    content:''; position:absolute; top:107%; right:0; width:200%; height:2px; background:var(--verde-suave); z-index:0;
  }
}
@media (max-width:1024px){
  .ugam-scope .ugam-objective-grid .ugam-objective-card:nth-child(4)::after{ right:4%; width:200%; }
}
@media (max-width:480px){
  .ugam-scope .ugam-objective-grid{ gap:24px; }
  .ugam-scope .ugam-objective-card{ padding:10px; height:auto!important; flex-direction:column!important; }
  .ugam-scope .ugam-objective-card p{ font-size:.9rem; margin-bottom:.5rem; }
  .ugam-scope .ugam-icon{ margin-bottom:8px; }
  .ugam-scope .ugam-objective-grid::before,
  .ugam-scope .ugam-objective-grid .ugam-objective-card:nth-child(2)::after,
  .ugam-scope .ugam-objective-grid .ugam-objective-card:nth-child(4)::after{ display:none; }
}


/* Molino decorativo */
.ugam-scope .ugam-bg-molino{
    position: absolute; width: 25vw; max-width: 300px; pointer-events: none; top: 40.5%;
    right: 99%; transform: translateX(0px); z-index: 0;}
.ugam-scope .ugam-bg-molino video{ width:100%; height:auto; object-fit:cover; display:block; }
@media (max-width:1024px){ .ugam-scope .ugam-bg-molino{ width:25vw; max-width:300px; top:40.5%; right:99%; } }
@media (max-width:768px){  .ugam-scope .ugam-bg-molino{ width:22vw; max-width:300px; right:20px; top: -2.5%; } }
@media (max-width:480px){  .ugam-scope .ugam-bg-molino{ width: 40vw; max-width:300px; right: -5px; top: 0%; z-index: -1;} }

/* Mariposa (respeta reduce-motion) */
@media (prefers-reduced-motion:reduce){ 
  .ugam-scope .butterfly{ 
    display:none!important; 
  } 
}

.ugam-scope .butterfly {
  position: fixed;
  width: 50px;   /* más pequeña */
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 100;
  animation: butterflyPerimeterZigzag 30s linear infinite;

}
@keyframes butterflyPerimeterZigzag {
  0%   { transform: translate(0vw, 0vh) rotate(45deg); }
  5%   { transform: translate(10vw, 2vh) rotate(45deg); }
  10%  { transform: translate(20vw, -2vh) rotate(45deg); }
  15%  { transform: translate(35vw, 3vh) rotate(45deg); }
  20%  { transform: translate(50vw, -3vh) rotate(45deg); }
  25%  { transform: translate(70vw, 2vh) rotate(45deg); }
  30%  { transform: translate(85vw, 0vh) rotate(45deg); }

  35%  { transform: translate(85vw, 20vh) rotate(135deg); }
  40%  { transform: translate(80vw, 40vh) rotate(135deg); }
  45%  { transform: translate(85vw, 60vh) rotate(135deg); }
  50%  { transform: translate(80vw, 80vh) rotate(135deg); }

  55%  { transform: translate(70vw, 82vh) rotate(225deg); }
  60%  { transform: translate(50vw, 78vh) rotate(225deg); }
  65%  { transform: translate(30vw, 82vh) rotate(225deg); }
  70%  { transform: translate(10vw, 78vh) rotate(225deg); }

  75%  { transform: translate(5vw, 60vh) rotate(315deg); }
  80%  { transform: translate(0vw, 40vh) rotate(315deg); }
  85%  { transform: translate(5vw, 20vh) rotate(315deg); }
  90%  { transform: translate(0vw, 10vh) rotate(315deg); }

  95%  { transform: translate(0vw, 5vh) rotate(405deg); }   /* Último tramo como parte del viaje */
  100% { transform: translate(0vw, 0vh) rotate(405deg); }  /* Misma posición y orientación que 0% */
}

/* Animaciones de entrada aplicadas al hacer visible */
@keyframes ugamFadeInLeft{ from{opacity:0; transform:translateX(-50px)} to{opacity:1; transform:translateX(0)} }
@keyframes ugamFadeInRight{from{opacity:0; transform:translateX(50px)}  to{opacity:1; transform:translateX(0)} }
@keyframes ugamFadeInUp{   from{opacity:0; transform:translateY(50px)}  to{opacity:1; transform:translateY(0)} }
@keyframes ugamFadeInDown{ from{opacity:0; transform:translateY(-50px)} to{opacity:1; transform:translateY(0)} }

.ugam-scope .ugam-section.visible.anim-left{  animation:ugamFadeInLeft 1s forwards; }
.ugam-scope .ugam-section.visible.anim-right{ animation:ugamFadeInRight 1s forwards; }
.ugam-scope .ugam-section.visible.anim-up{    animation:ugamFadeInUp 1s forwards; }
.ugam-scope .ugam-section.visible.anim-down{  animation:ugamFadeInDown 1s forwards; }

/* Estilo base (desktop / general) */
.ugam-scope .ai-heading {
  font-size: 1.8rem;
  text-align: left;
  margin-bottom: 1rem;
}

/* Estilo en pantallas pequeñas */
@media (max-width: 480px) {
  .ugam-scope .ai-heading {
    font-size: 1.5rem;
    text-align: left;
    margin-bottom: 1rem;
  }
}

.ugam-scope .ugam-full-box {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 1.5rem 1rem 1.5rem 18rem; /* Aumenta padding izquierdo */
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .ugam-scope .ugam-full-box {
    padding: 1.5rem 1rem; /* Menos padding en pantallas pequeñas */
  }
}


.ugam-scope .ugam-full-box p,
.ugam-scope .ugam-full-box ul,
.ugam-scope .ugam-full-box li {
  color: #fff;              /* Asegura color en el fondo verde */
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}

.ugam-scope .ugam-full-width {
  width: 90vw;
  margin-left: calc(-45vw + 50%);
  box-sizing: border-box;
  padding: 2rem;
  text-align: justify;
}

.ugam-scope .ugam-centered-box {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  text-align: justify;
  padding: 2rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.ugam-scope .ugam-warning-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  object-fit: contain;
  margin-top: 6px;
}

/* Imagen a la derecha */
.ugam-scope .ugam-centered-box.ugam-image-right {
  flex-direction: row-reverse;
}

/* Imagen más grande */
.ugam-scope .ugam-warning-icon.ugam-warning-large {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin-left: 1rem;
}

@media (max-width: 480px) {
  .ugam-scope .butterfly {
    width: 35px;
    height: 35px;
  }
}