/* ---------- Paleta (tomada de la pieza del hero) ---------- */
:root {
  --branca-negro: #000000;
  --branca-dorado: #a88253;
  --branca-dorado-claro: #cbab7b;
  --branca-texto: #ffffff;
  --branca-texto-suave: rgba(255, 255, 255, 0.55);
  --branca-borde: var(--branca-dorado);
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--branca-negro);
  color: var(--branca-texto);
  overflow-x: hidden;
  overflow-x: clip;
}

html {
  overflow-x: hidden;
  overflow-x: clip;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero ---------- */
/* Pieza única entregada por el cliente: banner + advertencia MinSal + titular + logos */
.hero {
  position: relative;
  width: 100%;
  background: var(--branca-negro);
  z-index: 1;
  overflow: hidden;
}

.hero__bg {
  display: block;
  width: 100%;
  height: auto;
}

/* Titular y logo del festival: ninguno de los dos venía incluido en la pieza
   plana del cliente (hero-bg.jpg), se superponen en la posición del mockup
   de referencia. Cada capa lleva la posición y el desplazamiento de
   paralaje (JS, main.js); la imagen interior solo ocupa el 100% de la capa. */
.hero__capa {
  position: absolute;
  height: auto;
  will-change: transform;
}

.hero__capa img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__capa--titulo {
  left: 18.5%;
  top: 19.3%;
  width: 48.2%;
  z-index: 2;
}

.hero__capa--bamba {
  left: 50.9%;
  top: 55.9%;
  width: 21.6%;
  z-index: 1;
}

/* ---------- Formulario ---------- */
main {
  position: relative;
  z-index: 2;
  background: var(--branca-negro);
}

.content {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

.content__intro {
  text-align: center;
  margin-bottom: 1.75rem;
}

.content__kicker {
  color: var(--branca-dorado);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.content__titulo {
  color: var(--branca-texto);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 0.5rem;
}

#form-container {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--branca-dorado);
  color: var(--branca-texto);
}

#trusarchform {
  width: 100%;
}

/* Solo selectores estables (ta-upm-*): las clases hasheadas cambian en cada
   build del form de TrustArc. */

#trusarchform .ta-upm-modal-content,
#trusarchform .ta-upm-modal-header,
#trusarchform .ta-upm-modal-body,
#trusarchform .ta-upm-modal-footer,
#trusarchform .ta-upm-form {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--branca-texto) !important;
}

/* Best-effort: dos columnas como en la pieza de referencia. Ajustar contra
   el DOM real una vez cargue el widget en producción. */
#trusarchform .ta-upm-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

#trusarchform .ta-form-logo {
  display: none !important;
}

#trusarchform .ta-upm-label {
  color: var(--branca-texto) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.02em;
}

#trusarchform .ta-upm-required {
  color: var(--branca-dorado) !important;
}

/* Campos de texto, email y fecha */
#trusarchform .ta-upm-input,
#trusarchform .ta-upm-date-picker-input-container,
#trusarchform .react-datepicker__input-container input {
  background: transparent !important;
  color: var(--branca-texto) !important;
  border: 1.5px solid var(--branca-borde) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

#trusarchform .ta-upm-input:focus,
#trusarchform .react-datepicker__input-container input:focus,
#trusarchform .ta-upm-select__control--is-focused {
  border-color: var(--branca-dorado-claro) !important;
  outline: none !important;
}

#trusarchform .react-datepicker__input-container {
  background: transparent !important;
}

#trusarchform .ta-upm-input::placeholder,
#trusarchform .ta-upm-date-picker-input-container::placeholder {
  color: var(--branca-texto-suave) !important;
}

/* Selects */
#trusarchform .ta-upm-select__control {
  background: transparent !important;
  border: 1.5px solid var(--branca-borde) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

#trusarchform .ta-upm-select__single-value,
#trusarchform .ta-upm-select__placeholder,
#trusarchform .ta-upm-select__input,
#trusarchform .ta-upm-select__indicator {
  color: var(--branca-texto) !important;
}

#trusarchform .ta-upm-select__indicator-separator {
  background-color: var(--branca-texto-suave) !important;
}

/* El desplegable y el calendario sí van en blanco, para que se lean */
#trusarchform .ta-upm-select__menu,
.ta-upm-select__menu,
.react-datepicker {
  background: #fff !important;
  color: #1e293b !important;
  border-radius: 16px !important;
  overflow: hidden;
}

#trusarchform .ta-upm-select__option,
.ta-upm-select__option {
  color: #1e293b !important;
}

/* Checkboxes y textos legales: ocupan las dos columnas del grid */
#trusarchform .ta-upm-checkbox-container,
#trusarchform .ta-upm-checkbox-message,
#trusarchform .ta-upm-static-text-container,
#trusarchform .ta-upm-static-text-details,
#trusarchform .ta-upm-error-message {
  color: var(--branca-texto-suave) !important;
  font-size: 0.8rem !important;
}

#trusarchform .ta-upm-checkbox-styled {
  border-color: var(--branca-borde) !important;
}

#trusarchform a {
  color: var(--branca-texto) !important;
  text-decoration: underline !important;
}

/* Los enlaces legales vienen con azul inline desde el editor de TrustArc */
#trusarchform a span,
#trusarchform .ta-upm-static-text-details span[style],
#trusarchform .ta-upm-checkbox-message span[style] {
  color: var(--branca-texto) !important;
}

/* Campos ocultos por configuración del form (ej. Jurisdiction) */
#trusarchform .ta-upm-field-hidden {
  display: none !important;
}

/* Botones: fila completa, centrado */
#trusarchform .ta-upm-button-container {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

#trusarchform .ta-upm-button {
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
  border-radius: 50px !important;
  padding: 12px 48px !important;
}

#trusarchform .ta-upm-button__primary {
  background: var(--branca-dorado) !important;
  color: var(--branca-negro) !important;
  border: 1.5px solid var(--branca-dorado) !important;
}

#trusarchform .ta-upm-button__secondary {
  background: transparent !important;
  color: var(--branca-dorado) !important;
  border: 1.5px solid var(--branca-dorado) !important;
}

/* ---------- Footer ---------- */
footer {
  background-color: var(--branca-dorado);
  padding: 1.75rem 1rem;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.footer__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--branca-negro);
  width: 28px;
  height: 28px;
}

.footer__icono svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  #trusarchform .ta-upm-form {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 2rem 1.25rem 4rem;
  }
}