/* ==========================================================================
   FORMS PREMIUM v2 — AURA TRAVEL "Zenith"
   Spotlight · Solid Card · Gold Bar · High-Conversion
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,400&display=swap');

/* ══════════════════════════════════════════════════════
   0. SPOTLIGHT OVERLAY — oscurece el sitio al abrir form
   ══════════════════════════════════════════════════════ */
.aura-spotlight-overlay {
  position: fixed;
  inset: 0;
  background: rgb(2 3 8 / 0%);
  pointer-events: none;
  z-index: 10;
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.aura-spotlight-overlay.active {
  background: rgb(2 3 8 / 78%);
  pointer-events: none;
}

.inline-form-container {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  margin: 0;
  position: relative;
  z-index: 20;
  transition:
    max-height 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease,
    box-shadow 0.4s ease;
}

.inline-form-container.active {
  max-height: 6000px;
  opacity: 1;
  padding: 2rem !important;
  border: 1px solid rgb(255 255 255 / 12%) !important;
  background: rgb(14 16 30 / 60%) !important;
  backdrop-filter: blur(20px) !important;
  margin-bottom: 0;
  overflow: visible;
}

/* ══════════════════════════════════════════════════════
   2. TARJETA SÓLIDA DE ALTO CONTRASTE
   ══════════════════════════════════════════════════════ */
.aura-premium-form {
  display: grid;
  gap: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;

  /* ━━ CRISTAL MONOLÍTICO — se hereda del contenedor padre typo-menu ━━ */
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 2rem 2.5rem 2.5rem;

  /* Barra de color izquierda por división */
  border-left: 4px solid var(--division-color, #F59E0B);
  box-shadow: none;
  transition: none;
}

/* Shimmer sutil en el formulario desactivado para evitar sobrecarga */
.aura-premium-form::before {
  display: none;
}

/* Rim light ámbar en la unión tarjeta-formulario desactivado */
.aura-premium-form::after {
  display: none;
}

.aura-premium-form > * {
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════
   2. CABECERA DEL FORMULARIO POR DIVISIÓN
   ══════════════════════════════════════════════════════ */
.form-division-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgb(245 158 11 / 20%);
}

.form-division-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(245 158 11 / 10%);
  border: 1px solid rgb(245 158 11 / 30%);
  font-size: 1.4rem;
  flex-shrink: 0;
}

.form-division-title {
  font-family: Inter, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--aura-gold, #F59E0B);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.form-division-subtitle {
  font-family: Inter, sans-serif;
  font-size: 0.8rem;
  color: rgb(203 213 225 / 50%);
  letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════════════
   3. GRID DE CAMPOS — 2 COLUMNAS INTELIGENTE
   ══════════════════════════════════════════════════════ */
.form-smart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-smart-grid .field-full {
  grid-column: 1 / -1;
}

.form-smart-grid .field-third {
  grid-column: span 1;
}

@media (width <= 768px) {
  .form-smart-grid {
    grid-template-columns: 1fr;
  }

  .form-smart-grid .field-full {
    grid-column: 1;
  }
}

/* ══════════════════════════════════════════════════════
   4. CAMPO CON FLOATING LABEL
   ══════════════════════════════════════════════════════ */
.float-field {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Icono interior */
.float-field .field-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(203 213 225 / 35%);
  font-size: 1rem;
  pointer-events: none;
  transition: color 0.3s ease;
  z-index: 2;
  line-height: 1;
}

/* Indicador de validez */
.float-field .field-valid-icon {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: #10B981;
  font-size: 0.85rem;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

/* Control base */
.float-control {
  width: 100%;
  background: rgb(255 255 255 / 3%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 10px;
  padding: 1.35rem 2.8rem 0.55rem;
  color: #CBD5E1;
  font-family: Inter, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  appearance: none;
}

.float-control::placeholder {
  color: transparent;
}

/* Select custom arrow */
select.float-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F59E0B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

select.float-control option {
  background: #0D1117;
  color: #CBD5E1;
}

/* Label flotante */
.float-label {
  position: absolute;
  left: 2.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: Inter, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(203 213 225 / 40%);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  white-space: nowrap;
}

/* Estado: field activo o con valor */
.float-control:focus + .float-label,
.float-control:not(:placeholder-shown) + .float-label,
.float-control.has-value + .float-label,
select.float-control:valid + .float-label {
  top: 0.55rem;
  transform: translateY(0);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--aura-gold, #F59E0B);
}

/* Para select: forzar estado flotado cuando tiene valor seleccionado */
select.float-control + .float-label {
  top: 0.55rem;
  transform: translateY(0);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: rgb(203 213 225 / 40%);
}

/* Línea de foco animada */
.float-field::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--aura-gold, #F59E0B), transparent);
  border-radius: 0 0 10px 10px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.float-field:focus-within::after {
  width: 100%;
  left: 0;
}

/* Estado foco del control */
.float-control:focus {
  border-color: rgb(245 158 11 / 40%);
  background: rgb(245 158 11 / 4%);
  box-shadow: 0 0 0 3px rgb(245 158 11 / 6%), 0 4px 20px rgb(0 0 0 / 30%);
  color: #ffffff;
}

/* Icono con foco */
.float-field:focus-within .field-icon {
  color: var(--aura-gold, #F59E0B);
}

/* Campo válido */
.float-control:valid:not(:placeholder-shown) {
  border-color: rgb(16 185 129 / 25%);
}

.float-control:valid:not(:placeholder-shown) ~ .field-valid-icon {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════
   5. SEPARADOR DORADO DE SECCIÓN
   ══════════════════════════════════════════════════════ */
.form-section-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0;
}

.form-section-divider span {
  font-family: Inter, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(245 158 11 / 60%);
  white-space: nowrap;
}

.form-section-divider::before,
.form-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(245 158 11 / 20%), transparent);
}

/* ══════════════════════════════════════════════════════
   6. CHIPS DE SELECCIÓN VISUAL
   ══════════════════════════════════════════════════════ */
.chips-label {
  font-family: Inter, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgb(203 213 225 / 50%);
  margin-bottom: 0.6rem;
  display: block;
}

.chips-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 100px;
  background: rgb(255 255 255 / 3%);
  color: rgb(203 213 225 / 60%);
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  position: relative;
}

.chip-option:hover {
  border-color: rgb(245 158 11 / 40%);
  color: var(--aura-gold, #F59E0B);
  background: rgb(245 158 11 / 6%);
  transform: translateY(-1px);
}

.chip-option:active {
  transform: scale(0.96) translateY(0);
}

.chip-option input[type="radio"],
.chip-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.chip-option.selected,
.chip-option:has(input:checked) {
  border-color: var(--aura-gold, #F59E0B) !important;
  color: #0F172A !important;
  background: var(--aura-gold, #F59E0B) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgb(245 158 11 / 40%), inset 0 1px 0 rgb(255 255 255 / 20%) !important;
  transform: translateY(-2px) scale(1.02);
}

.chip-icon {
  font-size: 1rem;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════
   7. CTA DEL FORMULARIO
   ══════════════════════════════════════════════════════ */
.form-cta-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 5%);
  flex-wrap: wrap;
}

.form-trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  color: rgb(203 213 225 / 35%);
  letter-spacing: 0.05em;
}

.form-trust-badge svg {
  color: rgb(245 158 11 / 50%);
  flex-shrink: 0;
}

.typographic-divisions-section {
    position: relative;

    /* Azul profundo con titanio — limpio, sin brillos extraños */
    background:
        /* Glow titanio centrado — sutil, sin tonos amarillos */
        radial-gradient(ellipse at 50% 50%, rgb(148 163 184 / 9%) 0%, transparent 60%),
        /* Dot matrix titanio — visible pero discreto */
        radial-gradient(circle at 50% 50%, rgb(203 213 225 / 7%) 1px, transparent 1.5px) 0 0 / 8px 8px,
        radial-gradient(circle at 50% 50%, rgb(203 213 225 / 7%) 1px, transparent 1.5px) 4px 4px / 8px 8px,
        /* BASE: Azul profundo + titanio — original AURA */
        linear-gradient(135deg, #0A1128 0%, #030B1C 100%) !important;
    overflow: visible;
    padding: 4rem 0 5rem !important;
    z-index: 2;
}

.btn-form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 2.25rem;
  background: linear-gradient(135deg, rgb(245 158 11 / 15%) 0%, rgb(245 158 11 / 8%) 100%);
  border: 1px solid rgb(245 158 11 / 50%);
  border-radius: 100px;
  color: var(--aura-gold, #F59E0B);
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.btn-form-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--aura-gold, #F59E0B), #D97706);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 100px;
}

.btn-form-submit:hover::before {
  opacity: 1;
}

.btn-form-submit:hover {
  color: #0F172A;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgb(245 158 11 / 35%);
}

.btn-form-submit span,
.btn-form-submit svg {
  position: relative;
  z-index: 1;
}

/* Pulso dorado cuando el form está completo */
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(245 158 11 / 40%); }
  50% { box-shadow: 0 0 0 8px rgb(245 158 11 / 0%); }
}

.btn-form-submit.ready {
  animation: goldPulse 2s infinite;
}

/* ══════════════════════════════════════════════════════
   8. CHIPS ESPECÍFICAS POR DIVISIÓN
   ══════════════════════════════════════════════════════ */

/* Aeropuerto — Azul cielo */
.division-aeropuerto .chip-option.selected,
.division-aeropuerto .chip-option:has(input:checked) {
  border-color: #06B6D4 !important;
  color: #0F172A !important;
  background: #06B6D4 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgb(6 182 212 / 45%) !important;
}

/* Corporativo — Azul corporativo */
.division-corporativo .chip-option.selected,
.division-corporativo .chip-option:has(input:checked) {
  border-color: #3B82F6 !important;
  color: #FFFFFF !important;
  background: #3B82F6 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgb(59 130 246 / 40%) !important;
}

/* Eventos — Púrpura */
.division-eventos .chip-option.selected,
.division-eventos .chip-option:has(input:checked) {
  border-color: #8B5CF6 !important;
  color: #FFFFFF !important;
  background: #8B5CF6 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgb(139 92 246 / 40%) !important;
}

/* Salud — Verde esmeralda */
.division-salud .chip-option.selected,
.division-salud .chip-option:has(input:checked) {
  border-color: #10B981 !important;
  color: #0F172A !important;
  background: #10B981 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgb(16 185 129 / 40%) !important;
}

/* Turismo — Dorado */
.division-turismo .chip-option.selected,
.division-turismo .chip-option:has(input:checked) {
  border-color: var(--aura-gold, #F59E0B) !important;
  color: #0F172A !important;
  background: var(--aura-gold, #F59E0B) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgb(245 158 11 / 40%) !important;
}

/* ══════════════════════════════════════════════════════
   9. MENSAJE DE CONFIRMACIÓN INLINE
   ══════════════════════════════════════════════════════ */
.form-success-msg {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  animation: fadeInUp 0.5s ease;
}

.form-success-msg.visible {
  display: flex;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.success-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(16 185 129 / 15%);
  border: 1px solid rgb(16 185 129 / 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.form-success-msg h4 {
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #CBD5E1;
}

.form-success-msg p {
  font-size: 0.85rem;
  color: rgb(203 213 225 / 50%);
}

/* ══════════════════════════════════════════════════════
   10. BARRA DE COLOR POR DIVISIÓN (borde izquierdo)
   ══════════════════════════════════════════════════════ */
.division-aeropuerto  { border-left-color: #06B6D4; }
.division-corporativo { border-left-color: #3B82F6; }
.division-eventos     { border-left-color: #8B5CF6; }
.division-salud       { border-left-color: #10B981; }
.division-turismo     { border-left-color: #F59E0B; }

/* Icono de cabecera adaptado al color de división */
.division-aeropuerto  .form-division-icon { background: rgb(6 182 212 / 10%);   border-color: rgb(6 182 212 / 30%);   }
.division-aeropuerto  .form-division-title { color: #06B6D4; }
.division-corporativo .form-division-icon { background: rgb(59 130 246 / 10%);  border-color: rgb(59 130 246 / 30%);  }
.division-corporativo .form-division-title { color: #93C5FD; }
.division-eventos     .form-division-icon { background: rgb(139 92 246 / 10%);  border-color: rgb(139 92 246 / 30%);  }
.division-eventos     .form-division-title { color: #C4B5FD; }
.division-salud       .form-division-icon { background: rgb(16 185 129 / 10%);  border-color: rgb(16 185 129 / 30%);  }
.division-salud       .form-division-title { color: #6EE7B7; }
.division-turismo     .form-division-icon { background: rgb(245 158 11 / 10%); border-color: rgb(245 158 11 / 30%); }
.division-turismo     .form-division-title { color: #F59E0B; }

/* ══════════════════════════════════════════════════════
   11. TYPO-ITEM ACTIVO — borde dorado con glow
   ══════════════════════════════════════════════════════ */
.typo-item.active {
  background: rgb(11 15 25 / 92%) !important;
  border-bottom: 1px solid rgb(245 158 11 / 5%) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 0 0 1px rgb(245 158 11 / 15%) !important;
}

/* El panel completo (typo-menu) cuando hay un form abierto
   mantiene su geometría externa constante */
.typo-menu:has(.inline-form-container.active) {
  border-radius: 16px;
  border-bottom-color: rgb(255 255 255 / 8%);
  box-shadow:
    0 40px 100px rgb(0 0 0 / 60%),
    0 0 0 1px rgb(255 255 255 / 8%);
}

/* ══════════════════════════════════════════════════════
   12. INPUTS — mayor contraste sobre fondo sólido #07080F
   ══════════════════════════════════════════════════════ */
.float-control {
  background: rgb(255 255 255 / 5%) !important;
  border-color: rgb(255 255 255 / 12%) !important;
  color: #E2E8F0 !important;
}

.float-control:focus {
  background: rgb(255 255 255 / 8%) !important;
  border-color: rgb(245 158 11 / 50%) !important;
  box-shadow:
    0 0 0 3px rgb(245 158 11 / 8%),
    0 4px 24px rgb(0 0 0 / 40%) !important;
  color: #FFFFFF !important;
}

/* Chips sobre fondo sólido — más visibles */
.chip-option {
  background: rgb(255 255 255 / 4%) !important;
  border-color: rgb(255 255 255 / 12%) !important;
  color: rgb(203 213 225 / 70%) !important;
}

/* ══════════════════════════════════════════════════════
   13. CTA — variante sólida por división
   ══════════════════════════════════════════════════════ */
.division-aeropuerto  .btn-form-submit { border-color: rgb(6 182 212 / 50%);   color: #06B6D4;  }
.division-aeropuerto  .btn-form-submit:hover { box-shadow: 0 8px 32px rgb(6 182 212 / 30%); }
.division-aeropuerto  .btn-form-submit::before { background: linear-gradient(135deg, #06B6D4, #0891B2); }

.division-corporativo .btn-form-submit { border-color: rgb(59 130 246 / 50%);  color: #93C5FD; }
.division-corporativo .btn-form-submit:hover { box-shadow: 0 8px 32px rgb(59 130 246 / 30%); }
.division-corporativo .btn-form-submit::before { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }

.division-eventos     .btn-form-submit { border-color: rgb(139 92 246 / 50%);  color: #C4B5FD; }
.division-eventos     .btn-form-submit:hover { box-shadow: 0 8px 32px rgb(139 92 246 / 30%); }
.division-eventos     .btn-form-submit::before { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }

.division-salud       .btn-form-submit { border-color: rgb(16 185 129 / 50%);  color: #6EE7B7; }
.division-salud       .btn-form-submit:hover { box-shadow: 0 8px 32px rgb(16 185 129 / 30%); }
.division-salud       .btn-form-submit::before { background: linear-gradient(135deg, #10B981, #059669); }

/* ══════════════════════════════════════════════════════
   14. SECCIÓN — elevar sobre overlay cuando hay form activo
   ══════════════════════════════════════════════════════ */
.typographic-divisions-section {
  position: relative;
  z-index: 15; /* sobre el overlay */
}

/* ══════════════════════════════════════════════════════
   15. RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (width <= 768px) {
  .aura-premium-form {
    padding: 1.5rem 1.25rem 1.25rem;
    border-left-width: 3px;
  }

  .form-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-form-submit {
    justify-content: center;
  }
}

/* ━━ CRO CONCIERGE BADGE ━━ */
.form-cro-badge {
  font-family: Inter, sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--aura-gold, #F59E0B);
  border: 1px solid rgb(245 158 11 / 30%);
  padding: 4px 10px;
  border-radius: 4px;
  background: rgb(245 158 11 / 5%);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

@media (width <= 768px) {
  .form-division-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .form-cro-badge {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ━━ SUB-BLOQUES CONDICIONALES AEROPUERTO ━━ */
.aero-conditional-block {
  display: none !important;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 0;
}

.aero-conditional-block.visible {
  display: grid !important;
  padding: 1rem 0;
}

@media (width <= 768px) {
  .aero-conditional-block {
    grid-template-columns: 1fr;
  }
}