@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: "Mofia";
  src: url("../fonts/Mofia.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
  STRANGEHUMAN Landing — style.css
  ==============================================
  Tokens extraídos del frame Figma:
    Fondo body:        #000000
    Color primario:    #1E1E1E  (botón, borde form)
    Texto botón:       #F4F4F4
    Texto / bordes:    #FFFFFF
    Separador TY:      #B00043 (definido inline en HTML)

  TIPOGRAFÍA:
    Primaria:  Akkurat Pro (licencia comercial — NO disponible en Google Fonts).
               Se usa 'Roboto' (cargada via Google Fonts en index.html) como fallback.
               Para activar Akkurat Pro, añadir @font-face o la importación
               correspondiente al <head> de index.html.

    Botones:   Avenir Next Medium (licencia comercial — NO disponible en Google Fonts).
               Se usa 'Roboto', Arial como fallback.
               Para activar Avenir Next, añadir @font-face o la importación
               correspondiente al <head> de index.html.
*/

/* === Variables de diseño === */
:root {
  /* Fuentes — las comerciales se declaran como referencia; los fallbacks son los activos */
  --font-poppins: 'Poppins', 'Roboto', Arial, sans-serif;
  --font-primary: 'Poppins', 'Roboto', Arial, sans-serif;
  --font-mofia: 'Mofia', 'Poppins', 'Roboto', Arial, sans-serif;
  --font-button: 'Mofia', 'Poppins', 'Roboto', Arial, sans-serif;

  /* Paleta */
  --color-bg: #000000;
  --color-primary: #1E1E1E;
  --color-btn-text: #F4F4F4;
  --color-accent: #B00043;
}

/* === Reset general === */
* {
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* === Fondo fijo del body === */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  z-index: -1;
}

body {
  color: var(--color-primary);
  background-color: var(--color-bg);
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: var(--font-primary);
}

body:has(#section-email:not(.d-none)),
body:has(#section-ty:not(.d-none)) {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

h2 {
  font-size: 80px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
}

a {
  text-decoration: none;
}

.form-label {
  color: var(--color-primary);
}

/* === Sección email (step 1) === */
.section-email {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  background-color: var(--color-bg);
  background-image: url("../img/bg-strangehuman.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.section-email-content {
  position: absolute;
  top: 44.5%;
  right: 12.1%;
  width: min(40vw, 565px);
}

.section-email .name-img {
  width: 100%;
  margin: 0 0 3.2rem;
}

.section-email .name-img img {
  display: block;
  width: 100%;
  height: auto;
}

.section-email .form-control {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: 0;
  font-family: var(--font-primary);
  height: 35px;
}

.section-email label {
  color: var(--color-primary) !important;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 400;
}

/* === Sección form (step 2) === */
.section-form img {
  padding: 0 50px;
  margin: 0 auto;
  display: block;
}

/* === Sección thank-you (step 3) === */
.section-ty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  width: 100%;
  padding: 0;
  background-color: var(--color-bg);
  background-image: url("../img/bg-form-ty.webp");
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  overflow-x: hidden;
  overflow-y: auto;
}

.section-ty .container-fluid {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 100%;
  margin-top: 12%;
}

.section-ty .row {
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
}

.section-ty .row>[class*="col-"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 680px;
  margin-left: 0;
  text-align: center;
}

.section-ty figure {
  margin: 0 0 2rem;
}

.section-ty p {
  font-family: var(--font-primary);
  text-align: center;
  font-size: 25px;
  color: var(--color-primary);
}

.section-ty a {
  text-decoration: none;
  color: var(--color-primary);
}

.section-ty p.ty-text-small {
  font-size: 20px;
}

.section-ty img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.section-ty .ty-logo-img {
  width: 610px;
  aspect-ratio: 1767/229;
}

@media (min-width: 769px) {
  .section-ty .ty-logo-img {
    margin-top: 200px;
  }
}

.section-ty .ty-tour-img {
  width: 610px;
  aspect-ratio: 1767/194;
}

.section-ty .text-description {
  color: var(--color-primary);
  text-align: center;
  font-family: var(--font-poppins);
  font-size: 31px;
  font-style: normal;
  font-weight: 500;
  line-height: 35px;
  letter-spacing: 0;
  text-transform: uppercase;
  width: auto;
  min-width: 254.505px;
  max-width: min(92vw, 520px);
  height: auto;
}

.city-name-wrap {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.city-date-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  margin-top: 3px;
  margin-bottom: 9px;
}

.city-date {
  color: var(--color-primary);
  font-family: var(--font-mofia);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
}

.sold-out-stamp {
  --sold-out-rotation: -10.115deg;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 165px;
  height: 54px;
  padding: 0 26px;
  border-radius: 7px;
  background-color: #c83d43;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  font-family: var(--font-mofia);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(var(--sold-out-rotation));
  pointer-events: none;
  user-select: none;
}

.sold-out-stamp--overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(var(--sold-out-rotation));
}

.sold-out-stamp--city-date {
  min-width: 53px;
  height: 20px;
  padding: 0 12px;
  border-radius: 5px;
  font-size: 9px;
}

.city-item.is-sold-out .btn-country {
  opacity: 0.55;
  cursor: not-allowed;
}

/* === Formulario de email === */

.section-form {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-bg);
  background-image: url("../img/bg-form-ty.webp");
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  overflow: hidden;
}

.section-form .container-fluid,
.section-form .form-container,
.section-form .row {
  min-height: 100vh;
}

.section-form .container-fluid {
  display: flex;
  align-items: center;
  padding: 0 clamp(2rem, 7vw, 8rem);
}

.section-form .form-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.section-form .row {
  display: grid;
  grid-template-columns: minmax(300px, 480px) minmax(280px, 400px);
  align-items: center;
  justify-content: center;
  column-gap: clamp(3rem, 8vw, 8rem);
  margin: 0 auto;
  width: 100%;
}

.section-form .row>[class*="col-"] {
  width: auto;
  max-width: none;
  padding: 0;
}

.section-form .row>[class*="col-"]:first-child {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.section-form .row>[class*="col-"]:last-child {
  align-self: start;
}

.section-form figure {
  margin: 0;
}

.section-form img {
  width: min(42vw, 520px);
  height: auto;
  padding: 0;
  margin: 0;
}

.section-form #registration-form {
  width: 100%;
  padding-top: 42%;
  padding-bottom: 10%;
  padding-left: 20%;
}

.section-form #registration-form>.mb-3 {
  margin-bottom: 0.55rem !important;
}

.section-form #registration-form .form-control,
.section-form #registration-form .form-select,
.section-form #registration-form .choices,
.section-form .phone-input-container {
  width: 100%;
}

.section-form .phone-input-container {
  height: 32px;
}

.section-form #form-field-ladaSelect {
  width: 64px;
  min-width: 64px;
}

.email-form {
  width: 290px;
  margin: 16% auto;
}

.email-form-container {
  width: 290px;
  margin: 0 auto;
}

/* === Contenedor de texto TY === */
.ty-text-container {
  margin: 0 auto;
  text-transform: uppercase;
}

.ty-text-container p {
  font-family: var(--font-primary);
  font-size: 42px;
  text-align: left;
}

/* === Steps del formulario === */
#registration-form .form-steps span {
  background: rgba(20, 38, 63, 0.5);
}

#registration-form .form-step-active {
  background: rgb(20, 38, 63) !important;
  width: 100% !important;
}

form {
  color: var(--color-primary);
}

form .form-text {
  color: var(--color-primary);
  font-family: var(--font-mofia);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.03;
  width: 501px;
  height: auto;
  margin-bottom: 1.35rem !important;
}

form label {
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 400;
}

.form-check-label {
  font-size: 12px;
}

.form-check-label a {
  color: var(--color-primary);
  text-decoration: underline;
}

.form-steps {
  margin-bottom: 20px;
}

.form-steps span {
  width: 60%;
  background: rgba(255, 255, 255, 0.3);
  height: 11px;
  border-radius: 10px;
  display: block;
}

.form-step-active {
  background: var(--color-primary) !important;
  width: 100% !important;
}

.section-form .btn-registro {
  margin-left: 0;
  margin-top: 1.2rem !important;
  margin-bottom: 0 !important;
}

/* === Botón principal === */
.btn-registro {
  background: var(--color-primary);
  color: var(--color-btn-text);
  align-content: center;
  text-align: center;
  font-weight: 500;
  margin: 0 auto;
  display: block;
  font-family: var(--font-button);
  width: max-content;
  font-size: 15px;
  padding: 0px 27.7px;
  height: 33.573px;
  border: none;
  border-radius: 0;
}

.btn-registro-color {
  background: var(--color-primary);
  color: var(--color-bg);
  border: 1px solid var(--color-primary);
}

/* === Botón merch === */
.btn-merch {
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: 22px;
  border: none;
  padding: 18px 24px;
  font-weight: normal;
  font-size: 18px;
  font-family: var(--font-button);
}

/* === Botón pre-save === */
.btn-presave {
  background: var(--color-primary);
  color: var(--color-btn-text);
  align-content: center;
  text-align: center;
  font-weight: 500;
  margin: 0 auto;
  display: block;
  font-family: var(--font-button);
  font-size: 15px;
  padding: 0px 15px;
  border-radius: 3px;
  border: 1px solid var(--color-primary);
  width: 98.955px;
  height: 25.265px;
}

.btn-presave:hover,
.btn-presave:focus,
.btn-presave:active {
  background-color: var(--color-primary);
  color: var(--color-btn-text);
}

/* === Sección ciudades === */
.city-title {
  font-size: 45px;
  font-weight: 900;
  text-align: center;
  color: var(--color-primary);
  text-transform: uppercase;
}

.pais {
  text-align: center;
}

.pais img {
  width: 90px;
}

.pais p {
  color: var(--color-primary);
  font-size: 35px;
  text-transform: uppercase;
  line-height: 40px;
}

.pais button {
  font-size: 10px;
  border: none;
  border-radius: 16px;
  width: 111px;
  height: 27px;
  text-transform: uppercase;
}

.pais p.pais-l-title {
  font-size: 28px;
  line-height: 30px;
}

.pais a {
  color: var(--color-bg);
  text-decoration: none;
}

/* === Inputs y selects — Bootstrap override === */
.form-control,
.form-select {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: 0;
  font-family: var(--font-primary);
  height: 32px;
  font-size: 0.75rem;
}

.form-control:focus,
.form-select:focus {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.form-select option {
  background-color: var(--color-white);
  color: var(--color-primary);
}

select option:checked,
select option:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.section-form .form-select,
.section-form #form-field-Country,
.section-form #form-field-City {
  background: var(--color-white) !important;
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
}

/* === Checkboxes === */
.form-check-input {
  background-color: transparent;
  border-color: var(--color-primary);
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* === Contenedor de teléfono === */
.phone-input-container {
  border: 1px solid var(--color-primary);
  border-radius: 0px;
}

#form-field-ladaSelect {
  border-left: none !important;
  border-right: 1px solid var(--color-primary) !important;
  border-top: none !important;
  border-bottom: none !important;
  background: none;
  color: var(--color-primary);
  font-family: var(--font-primary);
}

#form-field-Phone {
  border: none !important;
}

/* === Choices.js === */
.choices__list--single .choices__item {
  font-family: var(--font-primary);
}

.choices__inner {
  background-color: var(--color-white) !important;
  border-radius: 0px;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  font-family: var(--font-primary);
}

.section-form .choices {
  position: relative;
}

.section-form .choices.is-open,
.section-form .choices.is-focused {
  z-index: 1000;
}

.choices,
.choices__list,
.choices__input,
.choices__input--cloned {
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  background-color: var(--color-white) !important;
  color: var(--color-primary);
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
  font-family: var(--font-primary);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: #CED3D8;
}

.section-form .choices,
.section-form .choices__inner,
.section-form .choices__list,
.section-form .choices__list--single,
.section-form .choices__list--dropdown,
.section-form .choices__list--dropdown .choices__list,
.section-form .choices__list[aria-expanded],
.section-form .choices__list[aria-expanded] .choices__list,
.section-form .choices__input,
.section-form .choices__input--cloned,
.section-form .choices__item,
.section-form .choices__placeholder,
.section-form .choices__item--choice,
.section-form .choices__item--selectable {
  background: var(--color-white) !important;
  background-image: linear-gradient(var(--color-white), var(--color-white)) !important;
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
}

.section-form .choices__list--dropdown,
.section-form .choices__list[aria-expanded] {
  z-index: 1001 !important;
  opacity: 1 !important;
  border: 1px solid var(--color-primary) !important;
  box-shadow: inset 0 0 0 9999px var(--color-white);
}

.section-form .choices__list--dropdown .choices__item,
.section-form .choices__list[aria-expanded] .choices__item {
  display: block;
  box-shadow: inset 0 0 0 9999px var(--color-white);
}

.section-form .choices__list--dropdown .choices__item--selectable.is-highlighted,
.section-form .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: #CED3D8 !important;
  background-color: #CED3D8 !important;
  color: var(--color-primary) !important;
}

.section-form,
.section-form .container-fluid,
.section-form .form-container,
.section-form #registration-form {
  overflow: visible;
}

.section-form .choices {
  overflow: visible;
}

.section-form .choices__list--dropdown,
.section-form .choices__list[aria-expanded] {
  position: static !important;
  inset: auto !important;
  display: none;
  width: 100% !important;
  margin-top: 0;
  background: var(--color-white) !important;
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-primary) !important;
  border-top: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.section-form .choices__list--dropdown.is-active,
.section-form .choices__list[aria-expanded="true"] {
  display: block;
}

.section-form .choices__list--dropdown .choices__list {
  max-height: 260px;
  overflow-y: auto;
  background: var(--color-white) !important;
  background-color: var(--color-white) !important;
}

.choices[data-type*=select-one]::after,
.choices[data-type*=select-one].is-open::after {
  border-color: var(--color-primary) transparent transparent;
}

/* === Botón de fondos === */
.btn-fondos {
  width: 350px;
}

/* === Páginas de agradecimiento === */
.ty-page,
.ty-page-evento {
  color: var(--color-primary);
  text-align: center;
  height: 800px;
}

.ty-page p,
.ty-page-evento p {
  font-size: 18px;
  font-family: var(--font-primary);
}

.ty-page p.ty-page-title {
  font-size: 45px;
  line-height: 50px;
  text-transform: uppercase;
  font-family: var(--font-primary);
}

.ty-page-evento {
  margin-top: 300px;
}

.ty-page-evento img {
  width: 360px;
}

.ty-page-evento p.ty-page-evento-title {
  font-size: 70px;
  text-transform: uppercase;
  text-align: center;
  width: 500px;
  margin: 0 auto;
}

.ty-page img {
  width: 600px;
}

.ty-page .btn {
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: 16px;
  border: none;
  padding: 18px 24px;
  width: 294px;
  font-weight: bold;
  font-family: var(--font-button);
}

/* === Fecha (date picker) === */
#form-field-Birthdate[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  border-radius: 50%;
  padding: 4px;
}

/* === Visibilidad por dispositivo === */
.v-desktop {
  display: block;
}

.v-mobil {
  display: none;
}

.city-container .form-steps {
  display: none !important;
}

/* === Pais section extra === */
.pais button,
.btn-pais {
  font-size: 10px;
  border: none;
  border-radius: 16px;
  width: 111px;
  height: 27px;
  text-transform: uppercase;
  background-color: var(--color-primary);
  font-family: var(--font-button);
}

.pais a {
  color: var(--color-bg);
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 27px;
}

.btn-ty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #1E1E1E;
  background: #F4F4F4;
  width: 422px;
  height: 67px;
  margin-top: 39px;
}

.btn-ty span {
  color: #1E1E1E;
  font-family: var(--font-poppins);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.48px;

}

.btn-ty .btn-ty-uppercase {
  text-transform: uppercase;
}

.text-general-ty {
  color: #1E1E1E;
  text-align: center;
  font-family: Mofia;
  font-size: 95px;
  font-style: normal;
  font-weight: 400;
  line-height: 74px;
  width: 770px;
  height: 147px;
}

.cities-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.btn-country {
  background-color: var(--color-btn-text);
  color: var(--color-bg);
  border: 1px solid var(--color-primary);
  width: 126px;
  height: 32px;
  text-transform: uppercase;
  font-family: var(--font-primary);
  font-size: 12px;
}

/* === Toggle de contraseña === */
.toggle-password-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  min-width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.toggle-password-btn:hover {
  opacity: 1;
}

.toggle-password-btn img {
  width: 20px !important;
  height: 20px !important;
  display: block;
  max-width: 20px;
  padding: 0;
  margin: 0;
}

.toggle-password-btn:focus {
  outline: none;
  opacity: 1;
}