/* Iconos Disney: un castillo por parque. Reemplazan el glifo icomoon
   ".ci-icon-disney", que era el mismo icono para los tres.
   Los SVG son mascaras: heredan color y font-size del contexto. */
:root {
  /* Rutas absolutas a proposito: Chrome resuelve el url() de una custom
     property relativo a la hoja donde se USA la variable, no a esta. */
  --disney-castle-wdw: url("/img/disney-castle-wdw.svg"); /* Orlando    */
  --disney-castle-dlp: url("/img/disney-castle-dlp.svg"); /* Paris      */
  --disney-castle-dlc: url("/img/disney-castle-dlc.svg"); /* California */

  /* El castillo es angosto y pesa menos que los iconos vecinos, que
     llenan su caja. Unica perilla de tamano para todo el sitio. */
  --disney-castle-scale: 1.2;
}

.ci-icon-disney,
.ci-icon-disney-wdw,
.ci-icon-disney-dlp,
.ci-icon-disney-dlc {
  display: inline-block;
  width:  calc(1em * var(--disney-castle-scale));
  height: calc(1em * var(--disney-castle-scale));
  /* Se dibuja mas grande que 1em pero su huella de layout vuelve a 1em,
     si no la caja empuja el texto de al lado. Solo en vertical: en
     horizontal se comeria el espacio con el label. */
  margin-top:    calc((1 - var(--disney-castle-scale)) * .5em);
  margin-bottom: calc((1 - var(--disney-castle-scale)) * .5em);
  vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

/* apaga el glifo de icomoon, que si no queda pintado debajo de la mascara */
.ci-icon-disney::before,
.ci-icon-disney-wdw::before,
.ci-icon-disney-dlp::before,
.ci-icon-disney-dlc::before { content: none !important; }

/* ".ci-icon-disney" a secas = Orlando: DisneyResort/DisneyTickets ya
   significan Orlando en este codigo. */
.ci-icon-disney,
.ci-icon-disney-wdw { -webkit-mask-image: var(--disney-castle-wdw); mask-image: var(--disney-castle-wdw); }
.ci-icon-disney-dlp { -webkit-mask-image: var(--disney-castle-dlp); mask-image: var(--disney-castle-dlp); }
.ci-icon-disney-dlc { -webkit-mask-image: var(--disney-castle-dlc); mask-image: var(--disney-castle-dlc); }