@font-face {
  font-family: 'logo-title';
  src: url('/../src/fonts/Merriweather_48pt_SemiCondensed-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'logo-subtitle';
  src: url('/../src/fonts/CormorantGaramond-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ---------- BANNER ---------- */

.divider {
    height: 2px;
    width: 40%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgb(218, 218, 218);
}

.violetdot {
    color: rgb(111, 47, 170);
}

/* ------------------ STEP 1 ------------------------ */


.checkboxes {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Contenedor principal */
.custom-checkbox {
    margin-top: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

/* Ocultar el checkbox original */
.custom-checkbox input {
    display: none;
}

.custom-checkbox .text {
    margin-right: 4px;
}

/* Crear el cuadro personalizado */
.checkmark {
    height: 20px;
    width: 20px;
    background-color: #fafafa;
    border: 2px solid #ccc;
    border-radius: 4px;
    position: relative;
    transition: all 0.22s;
}

/* Estilo cuando está marcado */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #9521f3;
    border-color: #9521f3;
}

/* Crear el check (la palomita) - oculto por defecto */
.checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Mostrar el check cuando está marcado */
.custom-checkbox input:checked ~ .checkmark::after {
    display: block;
}

/* Selecciona solo los enlaces que tienen target="_blank" */
.custom-checkbox a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  background-image: url('https://img.icons8.com/material-outlined/24/000000/external-link.png');
  filter: invert(31%) sepia(94%) saturate(1445%) hue-rotate(240deg) brightness(91%) contrast(101%);
  background-size: contain;
  vertical-align: middle;
  transition: all 0.1s ease;
  transform: translateY(-1px);
}

/*
.custom-checkbox a[target="_blank"]:hover::after {
  transform: translate(1px, -1px);
  color: #8a41eb;
}*/


.i-button {
    /*background-color: #2196F3!important;
    background-color: #4d0763;*/    
    background-color: #8a41eb;
    color: white;
    border: none;
    transition: all 0.3s;
    width: fit-content;
    border-radius: 32px;
    padding-top: 14px;
    padding-bottom: 14px;    
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.i-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.i-button:hover {
    filter: brightness(1.2) saturate(1.06);
}

.hiperlink {
    color: #7226ec;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.1s;
}

.hiperlink:hover {
    filter: brightness(1.33) saturate(1.1);
    cursor: pointer;
}

.i-content .item {
    display: flex;       /* Alinea el punto y el texto en la misma fila */
    align-items: flex-start; /* Asegura que el punto se quede arriba si el texto es largo */
    gap: 10px;           /* El espacio exacto entre el punto y el texto */
    margin-bottom: 10px; /* Espacio entre cada punto de la lista */
}

.i-content .violetdot {
    color: rgb(111, 47, 170);       /* Tu color personalizado */
    flex-shrink: 0;      /* Importante: evita que el punto se aplaste si el texto es mucho */
}

.i-content .item p {
    margin: 0;           /* Quitamos márgenes por defecto del párrafo */
    line-height: 1.5;    /* Ajusta para que el texto se vea cómodo */
}

/* --------- INTERVIEW SECTION --------- */

.interview {
    /*background-color: blue;*/
    justify-content: center;
    width: 40%;
    margin: 0 auto;    
    margin-top: 32px;
    margin-bottom: 64px!important;
}

.i-advice {
    margin: 0 auto;
    width: 80%;
    margin-top: 24px;
    text-align: center;
    padding: 32px 16px;
    background-color: rgb(232, 217, 255);
    border: 2px dashed rgb(111, 47, 170);
    border-radius: 20px;
    font-size: 19px;
    color: #210057;
}

.i-title {
    margin-top: 32px;
    /*background-color: yellow;*/
    font-size: 32px;
    text-align: center;
}

.i-description {
    width: 90%;
    margin: 0 auto;
    margin-top: 22px;
    font-size: 18px;
}

.i-buttons span {
    color: #7226ec;
    text-decoration: none;
    font-weight: 700;
}

.i-buttons span:hover {
    filter: brightness(1.33) saturate(1.1);
    cursor: pointer;
}

.i-button-interview {    
    margin: 0 auto;        
    width: fit-content;
}

/*.i-button {
    background-color: #4d0763;
    color: white;
    width: fit-content;
    border-radius: 32px;
    padding-top: 14px;
    padding-bottom: 14px;    
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
    margin-top: 20px;
    cursor: pointer;
    transition: filter 0.1s ease-in-out;
}

.i-button:hover {
    filter: brightness(1.33) saturate(1.1);
}*/

.i-button-turno {
    text-decoration: none;
    margin: 0 auto;
    margin-top: 8px;
    width: 40%;
    text-align: center;
}

/* --------- FORM SECTION --------- */

.step-container {
    position: relative;
    width: 80%;
    max-width: 700px;
    /*height: 100vh;*/
    justify-content: left;
    margin: 0 auto;
    margin-top: 64px;
}

.form {
    justify-content: center;
    margin-bottom: 64px;
}

.form-content {
    width: 100%;
    max-width: 700px;
    height: auto;
    justify-content: left;
    margin: 0 auto;
    margin-top: 64px;
    background: linear-gradient(to right, rgb(253, 248, 254), rgb(250, 239, 251));
    border-radius: 16px;
    border: 4px solid white;
    padding-bottom: 32px;
}

.form-title {
    width: 100%;
    padding: 48px 0;
    text-align: center;
    align-content: center;
    font-size: 30px;    
    font-weight: 500;
}

.form-divider {
    width: 100%;
    height: 1px;
    background-color: rgb(206, 211, 224);
}

.form .f-name input,
.form .f-lastname input,
.form .f-country input,
.form .f-city input,
.form .f-email input,
.form .f-lastname input,
.form .f-birthdate input,
.form .f-date input,
.form .f-inumber input {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.f-row {
    width: 90%;
    justify-content: left;
    margin: 16px auto;
}

#s2NameLastname, #f-row2, #s2CountryCity {
    width: 90%;
    display: flex;
    flex-direction: row;
    margin-top: 16px;
}

.form .f-name {    
    width: 40%;
    display: flex;
    flex-direction: column;    
}

.form .f-lastname {
    width: 48%;
    display: flex;
    flex-direction: column;    
    margin-left: 10%;
}

.form .f-birthdate {
    width: 40%;
    display: flex;
    flex-direction: column;    
}

.form .f-email {
    width: 48%;
    display: flex;
    flex-direction: column;    
    margin-left: 10%;
}

.form .f-country {
    width: 30%;
    display: flex;
    flex-direction: column;    
}

.form .f-city {
    width: 58%;
    display: flex;
    flex-direction: column;    
    margin-left: 10%;    
} 

.form .f-message {
    display: flex;
    flex-direction: column;
}

.form .f-date {
    width: 40%;
}

.f-message textarea {
    resize: none;   /* Desactiva el ícono de redimensionamiento */ 
    overflow: auto; /* Asegura que aparezca scroll si el contenido excede */
}

.form .f-inumber {
    width: 30%;
    display: flex;
    flex-direction: column;    
    margin-left: 10%;
}


.f-session ul {
    margin: 0!important;
    padding: 0!important;
}

.f-options {
    list-style: none; /* quita viñetas */
    padding: 0;
}

.f-options li {
    margin: 8px 0;
}

.f-options input[type="radio"] { 
    position: absolute; 
    opacity: 0; /* invisible */ 
    width: 0; 
    height: 0; 
    margin-right: 8px;    
}

.f-options label {
    background-color: rgba(69, 11, 122, 0.2);
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #4d0763;
    border-radius: 6px;
    cursor: pointer;
    color: #000000;
    transition: all 0.3s ease;
    width: 60%;
}

/* Cuando el radio está seleccionado */
.f-options input[type="radio"]:checked + label {
    background-color: #4d0763;
    color: white;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);    
}

.f-options label:hover {
    background-color: #5d2e8a;
    color: white;
}

/* -------- INPUT RADIO HOURS --------- */

#f-row6 {
    margin-bottom: 16px;
}

#rowHoursTitle {
    display: flex;
    margin-bottom: -10px;
}

.f-hour-options {
    flex-wrap: wrap;
    list-style: none; /* quita viñetas */
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.f-hour-options input[type="radio"] { 
    position: absolute; 
    opacity: 0; /* invisible */ 
    width: 0; 
    height: 0; 
    margin-right: 8px;    
}

.f-hour-options label {
    background-color: rgba(69, 11, 122, 0.2);
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #4d0763;
    border-radius: 16px;
    cursor: pointer;
    color: #000000;
    transition: all 0.3s ease;
    width: fit-content;
}

/* Cuando el radio está seleccionado */
.f-hour-options input[type="radio"]:checked + label {
    background-color: #4d0763;
    color: white;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);    
}

.f-hour-options label:hover {
    background-color: #5d2e8a;
    color: white;
}

#fihour, #ftypeSession, #famount {
    display: none;
}

.f-error {
    display: none;
    background-color: rgb(255, 206, 206);
    color: red;
    margin-top: 24px;
    font-size: 18px;
    font-weight: 700;
    padding-top: 12px;
    padding-bottom: 12px;
    width: 100%;
    text-align: center;
}

.f-error-date {
    display: none;
    background-color: rgb(255, 201, 201);
    background-color: rgb(231, 201, 255);
    background-color: rgb(255, 239, 204);
    color: rgb(117, 0, 0);
    color: rgb(41, 0, 117);
    color: rgb(119, 97, 0);
    border-top: #d8a600 1px solid;
    border-bottom: #d8a600 1px solid;
    margin-top: 24px;
    font-size: 18px;
    font-weight: 700;
    padding-top: 12px;
    padding-bottom: 12px;
    width: 100%;
    text-align: center;
}

/* --------------------- */

.asterisk {
    color: red;
    font-size: 18px;
    font-weight: bold;
    align-items: center;
}

.t-asterisk {
    width: 90%;
    color: #444;
    font-style: italic;
    margin: 0 auto;
}

.flatpickr-day{
    color: rgb(144, 100, 247)!important;
    font-weight: 600!important;
    background-color: rgb(247, 242, 255)!important;
}

.flatpickr-day.selected{
    color: rgb(255, 255, 255)!important;
    font-weight: 600!important;
    background-color: rgb(196, 160, 255)!important;
}

.flatpickr-day.flatpickr-disabled{
    /*color: rgb(197, 197, 197)!important;*/
    color: rgb(230, 230, 230)!important; 
    background-color: white!important;
}

.flatpickr-day.nextMonthDay, 
.flatpickr-day.prevMonthDay {
    color: #a0a0a0!important;
    background-color: white!important;
}

.flatpickr-day.nextMonthDay.flatpickr-disabled,  
.flatpickr-day.prevMonthDay.flatpickr-disabled {
    color: rgb(230, 230, 230)!important;
}

/* ------------ STEP 3 ------------ */

.s3-title {
    width: 100%;
    margin-top: 48px;
    margin-bottom: 24px;
    text-align: center;
    align-content: center;
    font-size: 30px;    
    font-weight: 500;
}

.s3-description {
    width: 85%;
    margin: 0 auto;
    font-size: 18px;
}

.s3-base {
    margin-top: 32px;
    font-size: 22px;
}

.s3-base-amount {
    color: #7226ec;
    font-weight: 700;
}

.range-container {
  font-family: sans-serif;
  width: 85%;
  margin: 10px auto;
  text-align: left;
}

/* Estilo de la barra (el camino) */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  /* El degradado hace el truco: verde hasta el % actual, gris el resto */
  background: linear-gradient(to right, #6f2bbd 0%, #6f2bbd 50%, #dcc8ff 50%, #dcc8ff 100%);
  outline: none;
}

/* Estilo del círculo (el "thumb") para Chrome, Safari, Edge */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6f2bbd; /* Color verde */
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.2); /* Se agranda un poco al pasar el mouse */
}

/* El número que cambia */
.value-display {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

.range-info {
    width: 85%;
    margin: 0 auto;
    margin-top: 25px;
    color: #333;
    font-style: italic;
    text-align: justify;
}

.range-labels {
    display: flex;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 400;
    color: #7e748f;
    font-style: italic;
}

.s3-contacto {
    width: 80%;
    margin: 0 auto;
    margin-top: 32px;
    text-align: center;
}

.s3-contacto .mail {
    font-weight: 800;
    color: #6f2bbd;
}

.s3-button-next-container {
    width: 85%;
    margin: 0 auto;
    margin-top: 16px;
    text-align: center;
}

.s3-button-next {
    /*background-color: #2196F3!important;
    background-color: #4d0763;*/ 
    border: none;   
    background-color: #8a41eb;
    color: white;
    transition: all 0.3s;
    width: fit-content;
    border-radius: 16px;
    padding-top: 14px;
    padding-bottom: 14px;    
    padding-left: 24px;
    padding-right: 24px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.s3-button-next:hover {
    filter: brightness(1.2);
}

/* --- Currency Selector --- */

.s3-currency-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 85%;
  margin: 0 auto;
}

.s3-currency-label {
    font-size: 17px;
}

.s3-custom-select {
  position: relative;
  width: 300px;
  cursor: pointer;
  user-select: none;
}

.s3-select-trigger {
  display: flex;
  align-items: center;
  padding: 10px;
  padding-right: 32px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  gap: 10px;
}

.s3-options {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: none; /* Oculto por defecto */
  z-index: 10;
}

.s3-custom-select.open .s3-options {
  display: block;
}

.s3-option {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.s3-option:hover {
  background-color: #f0f0f0;
}

.s3-option img, .s3-select-trigger img {
  width: 20px;
  height: auto;
  border-radius: 2px;
}

.dropdown-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333; 
    display: inline-block;
    vertical-align: middle;
}

/* ---------------- STEP 4 ------------------ */

.s4-title {
    width: 100%;
    margin-top: 48px;
    margin-bottom: 24px;
    text-align: center;
    align-content: center;
    font-size: 30px;    
    font-weight: 500;
}

.s4-summary-container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s4-sum {
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

.s4-sumtext {
    color: #7226ec;
    font-weight: 700;
}

.s4-epilogue {
    width: 85%;
    margin: 0 auto;
    margin-top: 32px;
}

.s4-error-date {
    display: none;
    color: red;
    width: 70%;
    margin: 0 auto;
    margin-top: 32px;
    font-weight: 700;
    text-align: center;
}

.form .f-submit {
    text-align: center;
}

.form .f-button {
    position: relative;
    padding: 12px 24px;
    background-color: #981bff;
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 18px;
    font-family: "Nunito";
    font-weight: 600;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 140px;
    margin: 0 auto;
    margin-top: 48px;
}

/* El círculo del spinner */
.s4-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

/* Animación de rotación */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Modificamos el estado disabled */
.form .f-button:disabled {
    cursor: not-allowed;
    /* Creamos un degradado más largo que el botón */
    background: linear-gradient(-45deg, #ffa0ea, #b07fff, #832be9, #f0baff);
    background-size: 400% 400%;
    /* Aplicamos la animación de movimiento de fondo */
    animation: gradientLoading 1.5s ease infinite alternate;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: scale(0.90); /* Se hace un pelín más pequeño al procesar */
    transition: all 0.5s ease;
}

/* Definimos la animación del fondo */
@keyframes gradientLoading {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* ---------------- STEP 5 ------------------ */

.hidden {
    display: none!important;
}

.s5-title {
    width: 100%;
    margin-top: 48px;
    margin-bottom: 24px;
    text-align: center;
    align-content: center;
    font-size: 30px;    
    font-weight: 500;
}

.s5-p-container {
    width: 85%;
    margin: 0 auto;
}

.s5-p-container a {
    text-decoration: none;
}

.s5-p1 {
    font-size: 21px;
}

.s5-amount {
    color: #7226ec;
    font-weight: 700;
}

.s5-x-container {
    display: flex;
    align-items: center;
    border-radius: 16px;
    padding: 24px 0;
    justify-content: space-between;
}

.s5-x-container.mp {
    background-color: rgba(0, 162, 255, 0.075);
    border: 2px solid rgba(6, 72, 158, 0.048);
}

.s5-x-container.kf {
    background-color: rgba(182, 25, 255, 0.11);
    border: 2px solid rgba(153, 0, 255, 0.11);
}

.s5-x-container img{
    margin-left: 24px;
    width: 25%;
    height: 25%;
}

.s5-x-btn {
    margin-right: 24px;
    padding: 8px 16px;
    border-radius: 8px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    transition: filter 0.3s ease;
}

.s5-x-btn.mp {
    background-color: rgb(50, 163, 255);
}

.s5-x-btn.kf {
    background-color: rgb(156, 50, 255);
}

.s5-x-btn:hover {
    filter: brightness(1.05) contrast(1.1);
}

.s5-note {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 15px;
    text-align: justify;
    color: #333;
    font-style: italic;
}

.s5-epilogue {
    margin-top: 32px;
    font-size: 17.5px;
}

.s5-epilogue .mail {
    font-weight: 800;
    color: #6f2bbd;
}

.s5-epilogue2 {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.s5-thanks {
    width: 100%;
    text-align: center;
    font-size: 24px;
    margin-top: 18px;
}

/* ------------ MOBILE ---------- */ 

@media (max-width: 767px) {
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden!important;
    }

    /* ---------------- STEP 0 ---------------- */
    .form-content {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    /* ---------------- STEP 1 ---------------- */

    /* Crear el cuadro personalizado */
    .checkmark {
        height: 20px;
        width: 32px;
    }

    /* ---------------- STEP 2 ---------------- */

    #s2NameLastname, #f-row2, #s2CountryCity {
        display: flex;
        flex-direction: column;
    }

    .form .f-name {
        width: 94%; 
    }

    .form .f-lastname {
        margin: 0;
        margin-top: 8px;
        width: 94%;
    }


    .form .f-birthdate {
        width: 94%;
        display: flex;
        flex-direction: column;    
    }

    .form .f-email {
        width: 94%; 
        margin-left: 0px!important;
        margin-top: 16px;
    }

    .form .f-country {
        width: 94%;
        margin-left: 0px!important;
    }

    .form .f-city {
        width: 94%;
        margin-left: 0px!important;
        margin-top: 16px;
    } 

    .f-options label {
        background-color: rgba(69, 11, 122, 0.2);
        display: inline-block;
        padding: 10px 20px;
        border: 2px solid #4d0763;
        border-radius: 6px;
        cursor: pointer;
        color: #000000;
        transition: all 0.3s ease;
        width: 80%;
    }

    .form .f-date {
        width: 94%;
    }
    
    /* ---------------- STEP 3 ---------------- */
    
    /* ---------------- STEP 4 ---------------- */
    
    /* ---------------- STEP 5 ---------------- */

    .s5-mp-container img{
        margin-left: 24px;
        width: 45%;
        height: 45%;
    }

}


.form-content {
    position: absolute;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.visible {
    opacity: 1;
    z-index: 100;
    transform: translateY(0) translateY(0);
    pointer-events: auto;
}

.invisible {
    opacity: 0;
    z-index: -100;
    transform: translateX(0) translateY(30px);
    pointer-events: none;
}

.back-button {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 17px;
    font-weight: 700;
    color: #333333;
    cursor: pointer;
}

.back-button:hover {
    filter: brightness(1.8) saturate(2);
}

.back-btn {
    all: unset;
}

.back-btn:focus {
  outline: 2px solid rgb(0, 0, 0);
}