.seccion-zufos{
   background-image: url("./sitio_imgs/imagen_1.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   margin: 0;
	position: relative;
}

.seccion-programas{
   display:flex;
   justify-content:center;  /* centro horizontal */
   align-items:center;      /* centro vertical */
   min-height:800px;
	margin-bottom: 0;
}

.seccion-refom{
   background-image: url("./sitio_imgs/imagen_3.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   margin: 0;
	position: relative;
}

.seccion-informa{
   background-image: url("./sitio_imgs/imagen_3.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   margin: 0;
}

.seccion-contacto{
   background-image: url("./sitio_imgs/Fondo_Azul.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   margin: 0;
}

.mapa-wrapper {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: auto;
  overflow: visible;
}

.mapa-base {
  width: 100%;
  display: block;
}

.mapa-zufos {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.mapa-zufos a {
  transition: transform .25s ease;
  transform-origin: center;
}

.mapa-zufos a:hover path{
  overflow: visible; 
  transform: scale(1.06) translateY(-2px);
}

/* opcional: texto reacciona un poco más */
.mapa-zufos a:hover .texto-zona {
  fill: #fff;
  transition: 0.3s ease;
}

/* SOLO ZONAS DE COLOR */
.zona {
   cursor: pointer;
   fill-opacity: 0.9;
   transition: transform .25s ease, filter .25s ease;
   transform-origin: center;
   overflow: visible;
}

.zona:hover {
  filter: brightness(1.25);
  transform: scale(1.06) translateY(-2px);
  transition: 0.3s ease;	
}

/* COLORES */
.norte    { fill: #5d6f8f; }
.sur      { fill: #b68c2d; }
.hacienda { fill: #4ea3b3; }
.centro { fill: #c87137ff; }
.industrial { fill: #88381F; }
.universidad {fill: #489F8C; }
.don-pascual {fill: #B76952; }

.mapa-zufos a {
  text-decoration: none;
}

.texto-zona{
   fill:#ffffff;
   font-size: 2px; 
   cursor:pointer;
   transition:
      fill .25s ease,
      filter .25s ease;
   transform-box:fill-box;
   transform-origin:center;}

.texto-zona:hover{
   fill:#00D5FF;
   filter:
      drop-shadow(0 2px 2px rgba(0,0,0,.45))
      drop-shadow(0 0 4px #00D5FF);
}

.grupo-zona {
    transition: 0.25s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.grupo-zona:hover {
  transform: scale(1.06) translateY(-2px);
}

.grupo-zona:hover .zona {
  filter: brightness(1.25);
}

.mapa-zufos a:hover .grupo-zona {
   transform: scale(1.06) translateY(-2px);
	transition: 0.3s ease;
}

.industrial {
	cursor: pointer;
}

.industrial:hover {
   transform: scale(1.06) translateY(-2px);
   transition: 0.3s ease;
}

#capa-industrial path {
    fill: #bfbfbf;
    opacity: 0.6;
    transition: 0.3s ease;
}

#capa-industrial a:hover {
  transform: scale(1.06) translateY(-2px);
    transition: 0.3s ease;
}

#capa-industrial path:hover {
   filter: brightness(1.25);
	transform: scale(1.06) translateY(-2px);
   /*transform: scale(1.04);*/
   opacity: 1;
}

/******************** MAPA REFOM *************************/

/* CONTENEDOR */
.mapa-contenedor{
   position: relative;
   width: 100%;
   max-width: 990px;
   aspect-ratio: 4 / 3;
   margin: 0 auto;
	overflow: visible !important;
}

.mapa-contenedor a {
	text-decoration: none !important;
}

.mapa-zonas{
   position: absolute;
   top: 0;
   left: 0;
   width: 900px;
   height: 800px;
   display: block;
	overflow: visible !important;
}

.zona-inactiva{
   pointer-events: none;
   transform: none !important;
   filter: none !important;
   opacity: 1 !important;
}

.mapa-img{
   width: 900px;
   height: 800px;
   max-width: none;
}

.ocote-los-canos { fill: #BFBFBF; }

/* ZONAS CLICKABLES */
.mapa-zonas path{
   stroke: none;         
   cursor: pointer;
   pointer-events: all;
   transition: fill .25s ease, transform .25s ease, filter .25s ease;
   transform-box: fill-box;
   transform-origin: center;
	overflow: visible;
}

/* HOVER LIMPIO */
.mapa-zonas path:hover{
	overflow: visible;
   fill: rgba(0,0,0,0.25);
   transform: scale(1.02);
   filter: brightness(1.1);
}

.mapa-zonas{
   overflow: visible !important;
}

/* TEXTO SVG */
.texto-refom{
   fill: white;
   font-size: 12px;
   text-anchor: middle;
   dominant-baseline: middle;
	cursor:pointer;
   pointer-events:all;
   transition:
      fill .25s ease,
      filter .25s ease;
   transform-box:fill-box;
   transform-origin:center;
}

.texto-refom:hover{
   filter:
      drop-shadow(0 2px 2px rgba(0,0,0,.45))
      drop-shadow(0 0 4px #00D5FF);
}

/* Base */
.zona-hover path{
   fill: #a0a0a0;
   transition: transform .35s ease, filter .35s ease, opacity .35s ease, fill .35s ease;
   transform-origin: center;
	overflow: visible;
}

/* Efecto general al pasar por el mapa */
.mapa-zonas:hover .zona-hover{
   opacity: .35;
	overflow: visible !important;
}

/* ACTIVA */
.zona-link.activa .zona-hover:hover path{
   fill: #09CEB2;
   transform: scale(1.12);
   filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
   opacity: 1 !important;
   cursor: pointer;
}

/* PRÓXIMAMENTE */
.zona-link.proximamente .zona-hover:hover path{
   fill: #2F8CB7;
   transform: scale(1.08);
   filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
   opacity: 1 !important;
   cursor: not-allowed;
}

/* INACTIVA */
.zona-inactiva path{
   fill: #555555;
   pointer-events: none;
   opacity: .6;
}

.card-link{
   display: flex;
   flex-direction: column;
   align-items: center;
   text-decoration: none;
	color: #4A5FA3;
}

.card-wrapper-refom{
   position: absolute;
   bottom: 15%;
   right: 190px;
   text-align: center;
}

.gif-esquinasufom{
   position: relative;
   width: 220px !important;
   height: auto;
   bottom: 35%;
   right: 7px;
   z-index: 5;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
	pointer-events: auto; 
}

.gif-esquinasufom:hover{
/*    transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0,0,0,0.3);
 */
   transform: scale(1.05);
   filter: brightness(1.5);
}

.card-wrapper{
   position: absolute;
   text-align: center;
   bottom: 15%;
   left: 305px;
}

.gif-esquina{
   position: relative;
	display: block;
	width: 220px !important;
   height: auto;
   bottom: 26%;
   left: 12px;
   z-index: 5;
   transition: transform 0.3s ease, filter 0.3s ease;
	pointer-events: auto; 
}

.gif-esquina:hover{
   transform: scale(1.05);
   filter: brightness(1.5);
}

.card-linkrefom{
   display: flex;
   flex-direction: column;
   align-items: center;
   text-decoration: none;
	color: #4A5FA3;
}

@media (max-width: 992px){
   .card-flip{
      position: relative;
      right: auto;
      margin: 20px auto;
      text-align: center;
   }
}

@media (max-width:480px){
	.gif-esquinasufom{
      position: relative;
      width: 90px !important;
      height: auto;
      bottom: -25px;
      right: 47px;
      z-index: 5;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
	   pointer-events: auto; 
   }

   .card-wrapper{
      position: absolute;
		width: 90px !important;
		height: auto;
      text-align: center;
      bottom: 95px;
      left: 345px;
      z-index: 5;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
	   pointer-events: auto; 
	}

   .mapa-zufos {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 500px;
      height: 600px;
      display: block;
   	overflow: visible !important;
   }
   
	.mapa-base {
     position: relative;
     width: 100%;
     max-width: 700px;
     margin: auto;
     overflow: visible;
   }

   .mapa-zonas{
      position: absolute;
      top: 20px;
      left: 20px;
      width: 500px;
      height: 600px;
      display: block;
   	overflow: visible !important;
   }
}

@media (max-width:768px){
   .seccion-zufos{
		background-position: right center;
      height: 420px;
   }

	.gif-esquinasufom{
      position: relative;
      width: 70px !important;
      height: auto;
      bottom: -25px;
      right: 47px;
      z-index: 5;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
	   pointer-events: auto; 
   }

   .card-wrapper{
      position: absolute;
		width: 90px !important;
		height: auto;
      text-align: center;
      bottom: 95px;
      left: 345px;
      z-index: 5;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
	   pointer-events: auto; 
	}

   .mapa-zufos {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 500px;
      height: 600px;
      display: block;
   	overflow: visible !important;
   }
   
	.mapa-base {
     position: relative;
     width: 100%;
     max-width: 500px;
     margin: auto;
     overflow: visible;
   }

   .mapa-zonas{
      position: absolute;
      top: 20px;
      left: 20px;
      width: 500px;
      height: 600px;
      display: block;
   	overflow: visible !important;
   }
}

@media (max-width:600px){

	.gif-esquinasufom{
      position: relative;
      width: 70px !important;
      height: auto;
      bottom: -25px;
      right: 47px;
      z-index: 5;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
	   pointer-events: auto; 
   }

   .card-wrapper{
      position: absolute;
		width: 90px !important;
		height: auto;
      text-align: center;
      bottom: 95px;
      left: 345px;
      z-index: 5;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
	   pointer-events: auto; 
	}

   .mapa-zufos {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 500px;
      height: 600px;
      display: block;
   	overflow: visible !important;
   }
   
	.mapa-base {
     position: relative;
     width: 100%;
     max-width: 500px;
     margin: auto;
     overflow: visible;
   }

   .mapa-zonas{
      position: absolute;
      top: 20px;
      left: 20px;
      width: 500px;
      height: 600px;
      display: block;
   	overflow: visible !important;
   }
}