/* ==========================================================================
   Landing Expectativa — Destino Castilla (P0-1)
   CSS con alcance por sección. Se encola SOLO en page-expectativa.php.
   No toca :root ni el chrome global. Reutiliza el patrón del pre-lanzamiento
   (hero banner-lanzamiento + banda + formulario) adaptado a captacion:
   - sin bloque de fecha/lugar
   - formulario centrado en una sola columna
   - modal de exito sin QR ("un asesor te contactara")
   Referencia: Figma "1. Landing Expectativa" (d/m-Expectativa 1).
   ========================================================================== */

/* Título de la banda en MAYÚSCULAS (Figma "MI FUTURO. MI DESTINO"). El skin
   castilla.css lo deja en font-size 36px pero sin text-transform; se fuerza aquí
   (esta hoja carga después del skin y solo en las páginas hero de captación). */
.content-lanza-info h3 { text-transform: uppercase; }

/* ----- Banda "Mi futuro. Mi destino" : monograma detras de la foto -------- */
.expectativa-banda__media {
  position: relative;
}

.expectativa-banda__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 24px;
  display: block;
}

/* Monograma "Ð" (primary/base #a6a64f) que asoma por la esquina superior de la
   foto (Figma). Se pinta con mask (isotipo vectorial) para un borde nítido y el
   color exacto de marca. */
.expectativa-banda__monogram {
  position: absolute;
  z-index: 0;
  top: -40px;
  right: -18px;
  width: 132px;
  height: 132px;
  pointer-events: none;
  background-color: #a6a64f;
  -webkit-mask: url(../../images/isotipo-castilla.svg) no-repeat center / contain;
  mask: url(../../images/isotipo-castilla.svg) no-repeat center / contain;
}

/* ----- Seccion del formulario: encabezado (logo + titulo) ----------------- */
.expectativa-form {
  background-color: #FFFFFF;
  padding-top: 60px;
}

.expectativa-form__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 1112px;
  margin: 0 auto;
  padding: 0 24px;
}

.expectativa-form__logo {
  width: 64px;
  height: auto;
  display: block;
}

/* h2.__ para ganar a castilla.css `.content-form-invitacion h2` (var(--h2-lanzamiento)=#14142B). */
h2.expectativa-form__title {
  text-transform: uppercase;
  color: #55542c; /* Figma: primary/800 (olive), no el navy #14142B */
  margin: 0;
}

/* ----- Seccion del formulario: campos (una sola columna, centrado) -------- */
.expectativa-form__form {
  width: 100%;
  max-width: 430px;
  margin: 36px auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
}

/* Labels flotantes (portado de mariscal.css, scoped a expectativa). */
.expectativa-form .input-group {
  position: relative;
  margin-bottom: 30px;
}

.expectativa-form .input-group input {
  margin-bottom: 0;
  padding: 6px 20px; /* Figma Text Input: texto con inset de 20px */
  border: none;
  border-bottom: 2px solid #D9DBE9; /* Figma: Alias/Grayscale/Line, 2px */
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.expectativa-form .input-group > label {
  position: absolute;
  left: 20px; /* alinea con el inset del input */
  top: 4px;
  font-size: 15px; /* Figma: Desktop/Text Small */
  font-weight: 400;
  color: #6E7191;
  transition: all 0.2s ease;
  pointer-events: none;
}

.expectativa-form .input-group input:focus + label,
.expectativa-form .input-group input:not(:placeholder-shown) + label {
  top: -16px;
  font-size: 12px;
  color: #6E7191;
}

/* Dropdowns (Rango de ingresos / Numero de habitaciones). */
.expectativa-form .select-group {
  margin-bottom: 30px;
}

.expectativa-form select {
  width: 100%;
  border: none;
  border-bottom: 2px solid #D9DBE9; /* Figma: Alias/Grayscale/Line, 2px */
  background: transparent;
  color: #6E7191;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  padding: 6px 24px 6px 20px;
  appearance: none;
  -webkit-appearance: none;
  /* Chevron dorado secondary/base #B08524 (muestreado del Figma). */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23B08524" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 2px center;
  cursor: pointer;
}

/* Vacio = placeholder gris; relleno = valor en oscuro (Figma). */
.expectativa-form select:required:invalid {
  color: #6E7191;
}

.expectativa-form select:required:valid {
  color: #14142B;
}

.expectativa-form select option {
  color: var(--main-color);
}

/* Label del dropdown: solo visible en estado relleno, igual que los inputs.
   Especificidad (0,3,0) para ganarle a `.expectativa-form .input-group > label`. */
.expectativa-form .select-group > .select-group__label {
  position: absolute;
  left: 0;
  top: -16px;
  font-size: 12px;
  font-weight: 400;
  color: #6E7191;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.expectativa-form .select-group.is-filled > .select-group__label,
.expectativa-form .select-group > select:required:valid ~ .select-group__label {
  opacity: 1;
}

/* Boton "Enviar" : dorado (Figma secondary/base). */
.expectativa-form__form .box-buttom {
  margin-top: 8px;
}

.expectativa-form__form .btn-form {
  background-color: #B08524 !important;
  color: #FFFFFF !important;
  border-radius: 40px !important;
  padding: 15px 32px !important;
}

.expectativa-form__form .btn-form:hover {
  background-color: #9a721e !important;
}

/* ==========================================================================
   Modal de exito (sin QR / sin tarjeta)
   Figma: `d-Expectativa 2` (30135:89720) y `m-Expectativa 2` (30135:89749).
   Medidas tomadas del render a 1440x900 y 375x812:
   - card 1256x700 centrada (margenes 92 / 100)  ·  mobile 343x778 (margen 16)
   - marca de agua = monograma "D" #F7F7FC (images/fondo-modal-castilla.png)
   - X de cierre dorada 32px (22px en mobile) a 24px del borde
   - bloque de texto centrado reservando el alto del logo del componente
     (38px + 40px de gap) que en el diseno se pinta blanco sobre blanco
   ========================================================================== */

/* Scrim: en el Figma la pagina de atras queda a ~32% de #14142B. */
.modal-backdrop {
  --bs-backdrop-bg: #14142B;
  --bs-backdrop-opacity: 0.32;
}

.expectativa-modal .modal-dialog {
  max-width: none;
  margin: 16px;
  min-height: calc(100% - 32px);
}

.expectativa-modal .modal-content {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: #FFFFFF;
  background-image: url(../../images/fondo-modal-castilla.png);
  background-repeat: no-repeat;
  background-size: 726px 538px;
  background-position: -214px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expectativa-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
}

.expectativa-modal__close svg {
  display: block;
  width: 100%;
  height: 100%;
}

.expectativa-modal__body {
  width: 100%;
  max-width: 288px; /* fuerza el mismo corte de linea del Figma mobile */
  margin: 0 auto;
  /* 38px de logo + 40px de gap del componente: el logo no se pinta pero el
     bloque queda centrado igual que en el diseno. */
  padding-top: 78px;
  text-align: center;
}

.expectativa-modal__title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #14142B;
}

.expectativa-modal__text {
  margin: 24px 0 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #4E4B66;
}

/* ==========================================================================
   Desktop (>= 768px)
   ========================================================================== */
@media screen and (min-width: 768px) {
  .expectativa-banda__monogram {
    top: -56px;
    right: -24px;
    width: 176px;
    height: 176px;
  }

  /* Encabezado del form: logo + titulo en fila, centrado (Figma desktop). */
  .expectativa-form__head {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 48px; /* Figma nodo 30135:89727 */
    padding: 0;
  }

  .expectativa-form__logo {
    width: 64px; /* Figma textura 30135:89728 (64x68) */
  }

  .expectativa-form {
    padding-top: 80px;
  }

  /* ----- Modal: card 1256x700 centrada (Figma desktop 1440x900) ----------- */
  .expectativa-modal .modal-dialog {
    width: calc(100% - 184px);
    max-width: 1256px;
    margin: 100px auto;
    min-height: calc(100% - 200px);
  }

  .expectativa-modal .modal-content {
    align-self: center;
    height: 700px;
    max-height: 100%;
    background-size: 897px 811px;
    background-position: 180px -104px;
  }

  .expectativa-modal__close {
    width: 32px;
    height: 32px;
  }

  .expectativa-modal__body {
    max-width: 568px;
  }
}

/* ==========================================================================
   Pre-lanzamiento AM / PM / Público — formulario (Figma "Pre lanzamiento").
   Mismo tratamiento pulido que la Landing Expectativa (inputs underline +
   floating labels), pero scoped al layout de dos columnas del pre-lanzamiento
   (.prelanzamiento-form-box). El layout y el estilo de los <select> viven en
   css/castilla.css; aquí sólo el underline de los inputs de texto y los labels
   flotantes. Markup: template-parts/content-formulario-lanzamiento.php.
   ========================================================================== */
.prelanzamiento-form-box__form .input-group {
  position: relative;
  margin-bottom: 30px;
}

.prelanzamiento-form-box__form .input-group input {
  width: 100%;
  margin-bottom: 0;
  padding: 6px 0;
  border: none;
  border-bottom: 1px solid var(--gray);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.prelanzamiento-form-box__form .input-group > label {
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 16px;
  font-weight: 400;
  color: #6E7191;
  transition: all 0.2s ease;
  pointer-events: none;
}

.prelanzamiento-form-box__form .input-group input:focus + label,
.prelanzamiento-form-box__form .input-group input:not(:placeholder-shown) + label {
  top: -16px;
  font-size: 12px;
  color: #6E7191;
}

/* Label del dropdown: sólo visible en estado relleno, igual que los inputs.
   Especificidad (0,3,0) para ganarle a `.input-group > label`. */
.prelanzamiento-form-box__form .select-group > .select-group__label {
  position: absolute;
  left: 0;
  top: -16px;
  font-size: 12px;
  font-weight: 400;
  color: #6E7191;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.prelanzamiento-form-box__form .select-group.is-filled > .select-group__label,
.prelanzamiento-form-box__form .select-group > select:required:valid ~ .select-group__label {
  opacity: 1;
}

/* Botón "Confirmar asistencia": dorado (Figma secondary/base). */
.prelanzamiento-form-box__form .btn-form {
  background-color: #B08524 !important;
  color: #FFFFFF !important;
  border-radius: 40px !important;
  padding: 15px 32px !important;
}

.prelanzamiento-form-box__form .btn-form:hover {
  background-color: #9a721e !important;
}

.prelanzamiento-form-box__form .btn-form:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===========================================================================
   Fix fidelidad (demo): Formulario-horario usa el layout antiguo (Prado) con
   .content-form-invitacion + .box-line y NO las clases .expectativa-form /
   .prelanzamiento-form-box__form, por lo que sus labels caían debajo del campo.
   Se replica el floating-label (inputs y selects) SCOPEADO a la plantilla para
   no afectar otras pantallas ni el layout de 2 columnas.
   =========================================================================== */
.page-template-page-formulario-horario .content-form-invitacion .input-group {
  position: relative;
  margin-bottom: 30px;
}
.page-template-page-formulario-horario .content-form-invitacion .input-group input,
.page-template-page-formulario-horario .content-form-invitacion .input-group select {
  margin-bottom: 0;
  width: 100%;
  padding: 6px 20px;
  border: none;
  border-bottom: 2px solid #D9DBE9;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.page-template-page-formulario-horario .content-form-invitacion .input-group > label {
  position: absolute;
  left: 20px;
  top: 4px;
  font-size: 15px;
  font-weight: 400;
  color: #6E7191;
  transition: all 0.2s ease;
  pointer-events: none;
}
/* Inputs de texto: el label flota al enfocar o rellenar. */
.page-template-page-formulario-horario .content-form-invitacion .input-group input:focus + label,
.page-template-page-formulario-horario .content-form-invitacion .input-group input:not(:placeholder-shown) + label {
  top: -16px;
  font-size: 12px;
}
/* Selects (Día / Horario / Habitaciones): no soportan :placeholder-shown, el
   label queda siempre arriba. */
.page-template-page-formulario-horario .content-form-invitacion .input-group select + label {
  top: -16px;
  font-size: 12px;
}
.page-template-page-formulario-horario .content-form-invitacion .input-group select {
  appearance: none;
  -webkit-appearance: none;
  color: #14142B;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  padding: 6px 24px 6px 20px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23B08524" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 2px center;
  cursor: pointer;
}