/* ==========================================================================
   Landing Masterclass Cezanne Cardona (page-evento-cezanne-cardona.php)
   Se carga después de evento-irene-vallejo-min.css y solo añade lo propio.
   ========================================================================== */

/* Hero: la foto tiene al autor a la derecha */
#hero-irene.cezanne {
  background-position: 70% center;
}

#hero-irene .event-location a {
  font-family: "Akatab", serif;
  font-size: 1em;
  color: #5F5C5C;
  font-weight: 300;
  text-decoration: underline;
}

#hero-irene .event-location a:hover {
  color: #007F85;
}

/* Logos: el de LMH es cuadrado con mucho aire alrededor */
#sobre-evento .event-logos img.logo-mdp {
  height: 4em;
}

#sobre-evento .event-logos img.logo-lmh {
  height: 9em;
  margin: -2.5em -1.5em;
}

/* Compra de boletas
   ========================================================================== */

/* Sin foto de fondo: la del landing de Irene es de otra sede */
#formulario-registro.masterclass {
  background-color: #065A63;
  padding: 7em 1em 8em;
}

@media (min-width: 64.0625em) {
  #formulario-registro.masterclass {
    padding: 10em 1em 11em;
  }
}

#formulario-registro.masterclass .form-overlay {
  display: none;
}

/* Dos columnas: a la izquierda la información, a la derecha el selector de
   boletas centrado en vertical. En móvil, una debajo de otra. */
#formulario-registro.masterclass .inwrap {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "info form"
    "donacion donacion";
  -webkit-column-gap: 4em;
  -moz-column-gap: 4em;
  column-gap: 4em;
  row-gap: 2em;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#formulario-registro.masterclass .form-info {
  grid-area: info;
  min-width: 0;
}

/* El h2 trae margen arriba del navegador: se quita para que el centrado sea real */
#formulario-registro.masterclass .form-info h2 {
  margin-top: 0;
}

#formulario-registro.masterclass .event-details {
  margin-bottom: 1.5em;
}

#formulario-registro.masterclass .form-container {
  grid-area: form;
  -ms-flex-item-align: center;
  align-self: center;
  min-width: 0;
  padding: 2.5em 2em;
  background-color: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
}

#formulario-registro.masterclass .event-location-info a {
  font-family: "Akatab", serif;
  font-size: 1.1em;
  font-weight: 300;
  color: #FFF;
  text-decoration: underline;
}

#formulario-registro.masterclass .event-location-info a:hover {
  opacity: .8;
}

#formulario-registro .mc-compra {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.25em;
}

#formulario-registro .mc-cantidad {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: .75em;
}

#formulario-registro .mc-cantidad label {
  font-family: "Akatab", serif;
  font-size: 1.1em;
  font-weight: 300;
  color: #FFF;
}

#formulario-registro .stepper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(255, 255, 255, .85);
  border: 1px solid #D1D1D1;
  border-radius: 2em;
  overflow: hidden;
}

#formulario-registro .stepper button {
  width: 2.5em;
  height: 2.5em;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Akatab", serif;
  font-size: 1.4em;
  line-height: 1;
  color: #007F85;
  -webkit-transition: background-color .3s ease;
  -o-transition: background-color .3s ease;
  transition: background-color .3s ease;
}

#formulario-registro .stepper button:hover {
  background-color: rgba(0, 127, 133, .12);
}

#formulario-registro .stepper input {
  width: 3em;
  border: 0;
  background: none;
  text-align: center;
  font-family: "Bitter", serif;
  font-size: 1.4em;
  color: #5F5C5C;
  outline: none;
  -moz-appearance: textfield;
}

#formulario-registro .stepper input::-webkit-outer-spin-button,
#formulario-registro .stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#formulario-registro p.mc-total {
  font-family: "Bitter", serif;
  font-size: 1.5em;
  font-weight: 400;
  color: #FFF;
  margin: 0;
}

#formulario-registro p.mc-total strong {
  font-weight: 600;
}

/* Mismo estilo de botón que el formulario de Irene */
#formulario-registro .mc-compra .btn-submit,
#formulario-registro .mc-donacion .btn-donar {
  font-family: "Alata", serif;
  font-weight: 400;
  font-size: 1em;
  background-color: #CC794D;
  color: #FFF;
  padding: 1.3em 1.5em;
  border-top-left-radius: 2.2em;
  border-top-right-radius: 2.2em;
  border: none;
  cursor: pointer;
  display: inline-block;
  position: relative;
  -webkit-transition: background-color .3s ease;
  -o-transition: background-color .3s ease;
  transition: background-color .3s ease;
}

#formulario-registro .mc-compra .btn-submit::after,
#formulario-registro .mc-donacion .btn-donar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 1px;
  background-color: #dd946d;
}

#formulario-registro .mc-compra .btn-submit:hover,
#formulario-registro .mc-donacion .btn-donar:hover {
  background-color: #007F85;
}

#formulario-registro .mc-compra .btn-submit:disabled {
  opacity: .7;
  cursor: default;
}

#formulario-registro p.mc-nota {
  font-size: .9em;
  margin: 0;
  color: rgba(255, 255, 255, .85);
}

#formulario-registro .mc-whatsapp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: .2em;
  width: 100%;
  padding: .9em 1em;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 1em;
  font-family: "Akatab", serif;
  color: #FFF;
  text-align: center;
  -webkit-transition: background-color .3s ease;
  -o-transition: background-color .3s ease;
  transition: background-color .3s ease;
}

#formulario-registro .mc-whatsapp span {
  font-size: .9em;
  font-weight: 300;
}

#formulario-registro .mc-whatsapp strong {
  font-size: 1em;
  font-weight: 600;
  text-decoration: underline;
}

#formulario-registro .mc-whatsapp:hover {
  background-color: rgba(255, 255, 255, .1);
}

#formulario-registro p.mc-aviso {
  background-color: #FFF;
  color: #3A3A3A;
  border-left: 4px solid #CC794D;
  border-radius: .75em;
  padding: .75em 1em;
  margin: 0 0 1.5em;
  text-align: left;
}

/* Banner de donaciones: ocupa las dos columnas, con el mismo fondo que el
   selector de boletas */
#formulario-registro .mc-donacion {
  grid-area: donacion;
  min-width: 0;
  margin-top: 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 1.5em;
  padding: 2.5em 2em;
  background-color: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 2em;
}

@media (min-width: 64.0625em) {
  #formulario-registro .mc-donacion {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2.5em;
    padding: 2.5em 3em;
  }
}

#formulario-registro .mc-donacion .text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

#formulario-registro .mc-donacion h3 {
  font-family: "Bitter", serif;
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.25;
  color: #FFF;
  margin: 0 0 .5em;
}

#formulario-registro .mc-donacion p {
  font-family: "Akatab", serif;
  font-weight: 300;
  line-height: 1.5;
  color: #FFF;
  margin: 0;
}

#formulario-registro .mc-donacion p.small {
  font-size: .85em;
  color: rgba(255, 255, 255, .75);
  margin-top: .75em;
}

/* En tablet y móvil el botón queda centrado bajo el texto */
#formulario-registro .mc-donacion .btn-donar {
  white-space: nowrap;
  -ms-flex-item-align: center;
  align-self: center;
}

@media (max-width: 64em) {
  #formulario-registro.masterclass .inwrap {
    grid-template-columns: minmax(0, 30em);
    grid-template-areas:
      "info"
      "form"
      "donacion";
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  #formulario-registro.masterclass .form-container {
    width: auto;
    max-width: none;
    margin: 0;
  }
}


@media (max-width: 48em) {
  #formulario-registro.masterclass .form-container,
  #formulario-registro .mc-donacion {
    padding: 2em 1.25em;
  }
}