/* ===========================================================================
   Tema de los pickers del formulario de contacto.

   Reemplaza la rueda propia (wheel-picker) por dos librerias maduras, ambas
   servidas desde el sitio, sin CDN:
     - Choices.js  -> el select de Industria, con buscador
     - flatpickr   -> Fecha y Hora

   Las dos traen su CSS base en css/vendor/. Este archivo solo las viste con
   el lenguaje visual del formulario: pildoras translucidas sobre azul, foco
   cyan, Poppins, y las animaciones de apertura.
   =========================================================================== */

/* --- variables del tema, para no repetir los colores de marca --- */
:root {
    --fp-bg: #0b1a3a;
    --fp-bg-soft: rgba(255, 255, 255, 0.07);
    --fp-border: rgba(255, 255, 255, 0.15);
    --fp-cyan: #46d6ff;
    --fp-cyan-soft: rgba(143, 240, 255, 0.22);
    --fp-green: #8fe63f;
    --fp-text: #ffffff;
    --fp-muted: rgba(255, 255, 255, 0.55);
}

/* ===========================================================================
   Choices.js  —  campo Industria
   =========================================================================== */
.contact-form .choices { width: 100%; margin-bottom: 0; overflow: visible; }
.contact-form .choices:focus { outline: none; }
/* El desplegable se sale del contenedor: sin esto queda recortado. Va con
   selector de tipo + clase porque Choices trae .choices{overflow:hidden}. */
.contact-form div.choices,
.contact-form div.choices .choices__inner { overflow: visible; }
.contact-form .choices.is-open { z-index: 20; }
/* Choices pisa el padding con .choices[data-type*="select-one"] .choices__inner,
   que suma un atributo y gana: hay que igualar esa especificidad. */
.contact-form .choices[data-type*="select-one"] .choices__inner {
    padding: 0 2.6vw 0 4.2%;
}

/* la pildora cerrada: misma forma que el resto de los inputs del formulario */
.contact-form .choices__inner {
    font-family: 'PoppinsRegular';
    font-size: 0.86vw;
    color: var(--fp-text);
    background-color: var(--fp-bg-soft);
    border: solid 1px var(--fp-border);
    border-radius: 100px;
    min-height: 38px;
    padding: 0 2.6vw 0 4.2%;
    display: flex;
    align-items: center;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.contact-form .choices:hover .choices__inner {
    background-color: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.3);
}
.contact-form .choices.is-focused .choices__inner,
.contact-form .choices.is-open .choices__inner {
    outline: none;
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgba(143, 240, 255, 0.75);
    box-shadow: 0 0 0 2px var(--fp-cyan-soft);
}
/* al abrir hacia abajo Choices cuadra las esquinas de abajo: no lo queremos */
.contact-form .choices.is-open .choices__inner { border-radius: 100px; }

.contact-form .choices__list--single { padding: 0; }
.contact-form .choices__list--single .choices__item { color: var(--fp-text); }
.contact-form .choices__placeholder { color: var(--fp-muted); opacity: 1; }

/* flecha propia, animada */
.contact-form .choices[data-type*="select-one"]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1.5vw;
    width: 9px;
    height: 9px;
    margin: -6px 0 0;
    border: none;
    border-right: 2px solid var(--fp-cyan);
    border-bottom: 2px solid var(--fp-cyan);
    transform: rotate(45deg);
    transition: transform 0.28s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}
.contact-form .choices[data-type*="select-one"].is-open::after {
    margin-top: -2px;
    transform: rotate(-135deg);
    border-color: var(--fp-green);
}

/* el desplegable */
.contact-form .choices__list--dropdown,
.contact-form .choices__list[aria-expanded] {
    margin-top: 8px;
    border: solid 1px rgba(143, 240, 255, 0.32);
    border-radius: 18px;
    background: linear-gradient(180deg, #10255a 0%, var(--fp-bg) 100%);
    box-shadow: 0 18px 44px rgba(2, 10, 34, 0.55);
    overflow: hidden;
    /* animacion de apertura */
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.22, .61, .36, 1);
}
.contact-form .choices__list--dropdown.is-active,
.contact-form .choices__list[aria-expanded].is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.contact-form .choices__list--dropdown .choices__list { max-height: 260px; }

/* El formulario centra el texto de sus hijos y Choices lo hereda: el campo y
   la lista tienen que volver a alinearse a la izquierda. */
.contact-form .choices,
.contact-form .choices__inner,
.contact-form .choices__list,
.contact-form .choices__list--single,
.contact-form .choices__list--single .choices__item,
.contact-form .choices__list--dropdown .choices__item { text-align: left; }

/* buscador dentro del desplegable */
/* El input del buscador venia con fondo blanco y texto blanco: ilegible.
   Se lo fuerza con selector de tipo para ganarle al tema del vendor. */
.contact-form .choices__list--dropdown input.choices__input,
.contact-form .choices input.choices__input--cloned {
    font-family: 'PoppinsRegular';
    font-size: 14px;
    color: var(--fp-text);
    background-color: rgba(255, 255, 255, 0.08);
    border: none;
    border-bottom: solid 1px rgba(255, 255, 255, 0.12);
    border-radius: 0;
    padding: 12px 16px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
.contact-form .choices__input--cloned::placeholder { color: var(--fp-muted); }

.contact-form .choices__list--dropdown .choices__item {
    font-family: 'PoppinsRegular';
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
    padding: 11px 16px;
    transition: background-color 0.16s ease, color 0.16s ease, padding-left 0.16s ease;
}
.contact-form .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: rgba(70, 214, 255, 0.16);
    color: #fff;
    padding-left: 22px;          /* el item activo se corre: da sensacion de foco */
}
.contact-form .choices__list--dropdown .choices__item--selectable.is-selected {
    color: var(--fp-green);
}
.contact-form .choices__list--dropdown .choices__item--selectable::after { display: none; }
.contact-form .choices__list--dropdown .has-no-results { color: var(--fp-muted); }

/* estado de error: main.js le pone la clase al select, el script la refleja
   en el contenedor visible, que es lo unico que el usuario ve */
.contact-form .choices.inputerror .choices__inner,
.contact-form .choices.contact-form-input-required .choices__inner {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.22);
}

/* ===========================================================================
   Industria  —  rueda vertical (Swiper)
   El item centrado es el elegido. La banda marca el centro y un degradado a
   los bordes da la sensacion de rueda que se pierde arriba y abajo.
   =========================================================================== */
.wheel-field { position: relative; width: 100%; }
.wheel-select { display: none !important; }

.wheel-trigger {
    position: relative;
    margin: 0;            /* .contact-form button le mete margen a todos */
    width: 100%;
    font-family: 'PoppinsRegular';
    font-size: 0.86vw;
    color: var(--fp-text);
    background-color: var(--fp-bg-soft);
    border: solid 1px var(--fp-border);
    border-radius: 100px;
    min-height: 38px;
    padding: 0 2.6vw 0 4.2%;
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.wheel-trigger:hover { background-color: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.3); }
.wheel-field.is-open .wheel-trigger,
.wheel-trigger:focus-visible {
    outline: none;
    background-color: rgba(255, 255, 255, 0.11);
    border-color: rgba(143, 240, 255, 0.38);
    box-shadow: 0 0 0 3px rgba(143, 240, 255, 0.10);
}
.wheel-value { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wheel-value.is-placeholder { color: var(--fp-muted); }

/* la flecha, que gira al abrir */
/* La flecha cuelga del boton, no del contenedor: el contenedor mide mas por
   el margen que .contact-form button le mete a todos los botones. */
.wheel-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1.5vw;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.45);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.45);
    transform: rotate(45deg);
    transition: transform 0.28s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}
.wheel-field.is-open .wheel-trigger::after { margin-top: -1px; transform: rotate(-135deg); border-color: rgba(255, 255, 255, 0.7); }

.wheel-pop {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 240px;
    border: solid 1px rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    /* translucido, pero con el fondo desenfocado: asi deja ver el formulario
       de atras sin que se lleguen a leer las etiquetas y compitan con la lista */
    background: linear-gradient(180deg, rgba(13, 30, 74, 0.70) 0%, rgba(7, 17, 46, 0.76) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: 0 12px 34px rgba(2, 10, 34, 0.42);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
    transform-origin: top center;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.22, .61, .36, 1);
}
.wheel-pop.is-open { opacity: 1; transform: translateY(0) scale(1); }

.wheel-body { position: relative; padding: 4px 0; }
/* banda del centro: marca cual es el item elegido */
.wheel-band {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 34px;
    margin-top: -17px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.035);
    border-top: solid 1px rgba(255, 255, 255, 0.10);
    border-bottom: solid 1px rgba(255, 255, 255, 0.10);
    pointer-events: none;
    z-index: 2;
}
.wheel-swiper {
    height: 102px;                       /* 3 items de 34px */
    /* la perspectiva es lo que convierte la lista en un tambor: los items
       giran sobre el eje X y se hunden hacia el fondo (lo hace GSAP) */
    perspective: 620px;
    perspective-origin: 50% 50%;
    /* los extremos se desvanecen: da la ilusion de rueda */
    /* con solo 3 filas el degrade tiene que abrir mucho antes, si no se come
       a los dos vecinos y queda una sola linea legible */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.wheel-swiper .swiper-wrapper { transform-style: preserve-3d; }
/* Los nombres largos ("Aerolineas, aeropuertos y servicios aereos") no entran
   en una linea: se achica un punto la tipografia, se cierra el interletrado y
   se deja que caiga en dos lineas bien pegadas, centradas en el alto del item.
   Todo alineado a la izquierda contra el mismo margen. */
.wheel-item {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 0 16px;
    font-family: 'PoppinsRegular';
    font-size: 13px;
    letter-spacing: -0.15px;
    line-height: 1.16;
    color: rgba(255, 255, 255, 0.34);
    cursor: pointer;
    overflow: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
}
.wheel-item.swiper-slide-active { color: #fff; }
.wheel-item.swiper-slide-next, .wheel-item.swiper-slide-prev { color: rgba(255, 255, 255, 0.62); }

/* error: main.js marca el select oculto, el script lo refleja aca */
.wheel-field.inputerror .wheel-trigger,
.wheel-field.contact-form-input-required .wheel-trigger {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.22);
}

@media screen and (max-width: 800px) {
    .wheel-trigger { font-size: 15px; padding: 0 40px 0 18px; }
    .wheel-trigger::after { right: 18px; }
    .wheel-pop { position: fixed; top: 50%; left: 50%; width: min(92vw, 340px); transform: translate(-50%, -46%) scale(0.985); }
    .wheel-pop.is-open { transform: translate(-50%, -50%) scale(1); }
    .wheel-swiper { height: 108px; perspective: 680px; }
    .wheel-item { height: 36px; font-size: 13.5px; letter-spacing: -0.1px; padding: 0 18px; }
    .wheel-band { height: 36px; margin-top: -18px; }
}

@media (prefers-reduced-motion: reduce) {
    .wheel-pop, .wheel-item, .wheel-trigger::after { transition: none; }
}


/* El formulario pinta todos sus <button> con el degradado verde del boton
   ENVIAR. El disparador de la rueda y el boton Listo tambien son <button>, asi
   que hay que sacarles ese fondo con un selector que le gane en especificidad. */
.contact-form .wheel-trigger {
    background-image: none;
    text-transform: none;
    box-shadow: none;
}
.contact-form .wheel-trigger {
    background-color: var(--fp-bg-soft);
    color: var(--fp-text);
    font-weight: 400;
    letter-spacing: 0;
}
.contact-form .wheel-trigger { margin: 0; }
.contact-form .wheel-trigger:hover { background-color: rgba(255, 255, 255, 0.11); }
.contact-form .wheel-field.is-open .wheel-trigger,
.contact-form .wheel-trigger:focus-visible {
    background-color: rgba(255, 255, 255, 0.11);
    box-shadow: 0 0 0 3px rgba(143, 240, 255, 0.10);
}

/* ===========================================================================
   flatpickr  —  campos Fecha y Hora
   =========================================================================== */
.flatpickr-calendar {
    font-family: 'PoppinsRegular';
    background: linear-gradient(180deg, #10255a 0%, var(--fp-bg) 100%);
    border: solid 1px rgba(143, 240, 255, 0.32);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(2, 10, 34, 0.55);
    padding: 6px 6px 2px;
    width: 320px;
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }

.flatpickr-months { padding-top: 6px; }
.flatpickr-months .flatpickr-month { color: #fff; fill: #fff; height: 40px; }
.flatpickr-current-month { font-size: 15px; padding-top: 8px; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
    color: #fff;
    font-weight: 600;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--fp-bg); color: #fff; }
.flatpickr-current-month input.cur-year { color: #fff; font-weight: 600; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--fp-cyan);
    padding: 10px;
    transition: transform 0.2s ease, fill 0.2s ease;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--fp-green); }
.flatpickr-months .flatpickr-prev-month:hover { transform: translateX(-2px); }
.flatpickr-months .flatpickr-next-month:hover { transform: translateX(2px); }

span.flatpickr-weekday { color: rgba(255, 255, 255, 0.5); font-weight: 500; font-size: 11px; letter-spacing: 0.6px; }
.flatpickr-day {
    color: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 12px;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(.22, .61, .36, 1);
}
.flatpickr-day:hover { background: rgba(70, 214, 255, 0.18); color: #fff; transform: scale(1.06); }
.flatpickr-day.today { box-shadow: inset 0 0 0 1px rgba(143, 240, 255, 0.65); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: linear-gradient(135deg, var(--fp-green) 0%, var(--fp-cyan) 100%);
    color: #04122e;
    font-weight: 600;
    transform: scale(1.06);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: rgba(255, 255, 255, 0.22); }
.flatpickr-day.flatpickr-disabled:hover { background: none; transform: none; }

/* reloj */
.flatpickr-time { border-top: solid 1px rgba(255, 255, 255, 0.12); height: 48px; line-height: 48px; max-height: 48px; }
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: #fff; font-size: 17px; font-weight: 600; }
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover { background: rgba(70, 214, 255, 0.16); }
.flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--fp-cyan); }
.flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--fp-cyan); }

/* en mobile el calendario va centrado como una hoja, no colgado del input */
@media screen and (max-width: 800px) {
    .contact-form .choices__inner { font-size: 15px; padding: 0 40px 0 18px; }
    .contact-form .choices[data-type*="select-one"]::after { right: 18px; }
    .contact-form .choices__list--dropdown .choices__list { max-height: 44vh; }

    .flatpickr-calendar.open {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: min(92vw, 340px);
        z-index: 100000;
    }
    .flatpickr-day { height: 42px; line-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-form .choices__list--dropdown,
    .contact-form .choices__list[aria-expanded],
    .contact-form .choices__list--dropdown .choices__item,
    .flatpickr-day { transition: none; }
    .flatpickr-calendar.animate.open { animation: none; }
}