/*
 * ====================================================================
 * TU BIBLIOTECA DE ICONOS PERSONALIZADOS
 * ====================================================================
 */

/*
 * 1. CLASE BASE
 * Esta clase 'p-icon' (icono personal) prepara el escenario.
 * Le dice a CUALQUIER icono personal cómo debe comportarse.
 */
.p-icon {
  display: inline-block;
  
  /* --- CONTROL DE TAMAÑO --- */
  /* Usamos 'em' para que el icono escale con el 'font-size' del texto,
     igual que un icono de fuente. */
  width: 1em;
  height: 1em;
  
  /* --- CONTROL DE MÁSCARA (LA FORMA) --- */
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  /* Prefijo para compatibilidad con Safari/Chrome */
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  /* --- ¡LA MAGIA DEL COLOR! --- */
  /* * 'currentColor' es una variable especial de CSS.
   * Significa: "Usa el color que esté definido en la propiedad 'color' de CSS".
   * Si pones el texto en rojo (color: red), el icono se pondrá rojo.
   * ¡Exactamente como funciona IcoFont!
   */
  background-color: currentColor; 
}


/*
 * 2. CLASES ESPECÍFICAS
 * Aquí le decimos a cada clase qué archivo SVG debe cargar.
 */

.p-icon-teatro {
  /* Ruta al SVG. Como el CSS y el SVG están en la MISMA carpeta,
     solo necesitamos poner el nombre del archivo. */
  mask-image: url('personal/teatro.svg');
  -webkit-mask-image: url('personal/teatro.svg');
}

.p-icon-danza {
  mask-image: url('personal/danza.svg');
  -webkit-mask-image: url('personal/danza.svg');
}

.p-icon-ballet {
  mask-image: url('personal/ballet.svg');
  -webkit-mask-image: url('personal/ballet.svg');
}

.p-icon-musica {
  mask-image: url('personal/musica.svg');
  -webkit-mask-image: url('personal/musica.svg');
}

.p-icon-pintura {
  mask-image: url('personal/pintura.svg');
  -webkit-mask-image: url('personal/pintura.svg');
}

.p-icon-meditacion {
  mask-image: url('personal/meditacion.svg');
  -webkit-mask-image: url('personal/meditacion.svg');
}

.p-icon-talleres {
  mask-image: url('personal/talleres.svg');
  -webkit-mask-image: url('personal/talleres.svg');
}

.p-icon-paquetes {
  mask-image: url('personal/paquetes.svg');
  -webkit-mask-image: url('personal/paquetes.svg');
}
.p-icon-discapacidad {
  mask-image: url('personal/discapacidad.svg');
  -webkit-mask-image: url('personal/discapacidad.svg');
}
.p-icon-ascensores {
  mask-image: url('personal/ascensores.svg');
  -webkit-mask-image: url('personal/ascensores.svg');
}
.p-icon-banos {
  mask-image: url('personal/banos.svg');
  -webkit-mask-image: url('personal/banos.svg');
}
.p-icon-asiento {
  mask-image: url('personal/asiento.svg');
  -webkit-mask-image: url('personal/asiento.svg');
}
.p-icon-home {
  mask-image: url('personal/home.svg');
  -webkit-mask-image: url('personal/home.svg');
}
.p-icon-fundacion {
  mask-image: url('personal/fundacion.svg');
  -webkit-mask-image: url('personal/fundacion.svg');
}
.p-icon-tca {
  mask-image: url('personal/tca.svg');
  -webkit-mask-image: url('personal/tca.svg');
}
.p-icon-escuelas {
  mask-image: url('personal/escuelas.svg');
  -webkit-mask-image: url('personal/escuelas.svg');
}
.p-icon-calendar {
  mask-image: url('personal/calendar.svg');
  -webkit-mask-image: url('personal/calendar.svg');
}
.p-icon-heart {
  mask-image: url('personal/heart.svg');
  -webkit-mask-image: url('personal/heart.svg');
}
.p-icon-phone {
  mask-image: url('personal/phone.svg');
  -webkit-mask-image: url('personal/phone.svg');
}
/*Fundacion*/
 .p-icon-fundacion-1 {
  mask-image: url('personal/fib-b-01.svg');
  -webkit-mask-image: url('personal/fib-b-01.svg');
} 
.p-icon-fundacion-2 {
  mask-image: url('personal/fib-b-02.svg');
  -webkit-mask-image: url('personal/fib-b-02.svg');
} 
.p-icon-fundacion-3 {
  mask-image: url('personal/fib-b-03.svg');
  -webkit-mask-image: url('personal/fib-b-03.svg');
} 
.p-icon-fundacion-4 {
  mask-image: url('personal/fib-b-04.svg');
  -webkit-mask-image: url('personal/fib-b-04.svg');
} 



/*
 * EJEMPLO: Si mañana agregas "cine.svg" a la misma carpeta,
 * simplemente añades esto:
 *
 * .p-icon-cine {
 * mask-image: url('cine.svg');
 * -webkit-mask-image: url('cine.svg');
 * }
 *
 */