Buscador de Vuelos Baratos — Widget WordPress + Ignav API
en cualquier página o entrada
OPCIÓN C — Plugin WPCode (más recomendado):
1. Instalá el plugin gratuito "WPCode — Insert Headers and Footers"
2. Creá un snippet de tipo HTML
3. Copiá el código del widget y guardá
4. Insertalo donde quieras con el shortcode que genera WPCode
TU API KEY: Conseguila gratis en https://ignav.com/signup
1000 búsquedas gratis, después $2 cada 1000 búsquedas exitosas
============================================================ */
* {
box-sizing: border-box;
}
#ignav-widget {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 780px;
margin: 0 auto;
padding: 0;
color: #1a1a1a;
}
#ignav-widget .iw-header {
margin-bottom: 1.25rem;
}
#ignav-widget .iw-header h2 {
font-size: 24px;
font-weight: 600;
color: #0d2d5e;
margin: 0 0 4px;
}
#ignav-widget .iw-header p {
font-size: 14px;
color: #666;
margin: 0;
}
#ignav-widget .iw-form {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 1.5rem;
margin-bottom: 1rem;
}
#ignav-widget .iw-trip-toggle {
display: flex;
gap: 4px;
margin-bottom: 1.25rem;
background: #f3f4f6;
border-radius: 8px;
padding: 3px;
width: fit-content;
}
#ignav-widget .iw-trip-btn {
padding: 6px 18px;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
background: transparent;
color: #666;
transition: all .15s;
}
#ignav-widget .iw-trip-btn.active {
background: #fff;
color: #0d2d5e;
box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
#ignav-widget .iw-row {
display: grid;
gap: 12px;
margin-bottom: 12px;
}
#ignav-widget .iw-row-2 { grid-template-columns: 1fr 1fr; }
#ignav-widget .iw-row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 600px) {
#ignav-widget .iw-row-2,
#ignav-widget .iw-row-4 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 420px) {
#ignav-widget .iw-row-2,
#ignav-widget .iw-row-4 {
grid-template-columns: 1fr;
}
}
#ignav-widget .iw-field label {
display: block;
font-size: 11px;
font-weight: 600;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 5px;
}
#ignav-widget .iw-field input,
#ignav-widget .iw-field select {
width: 100%;
height: 42px;
padding: 0 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
color: #1a1a1a;
background: #f9fafb;
outline: none;
transition: all .15s;
-webkit-appearance: none;
appearance: none;
}
#ignav-widget .iw-field input:focus,
#ignav-widget .iw-field select:focus {
border-color: #185FA5;
background: #fff;
box-shadow: 0 0 0 3px rgba(24, 95, 165, .08);
}
#ignav-widget .iw-btn-search {
width: 100%;
height: 48px;
background: #185FA5;
color: #fff;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background .15s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
#ignav-widget .iw-btn-search:hover { background: #0C447C; }
#ignav-widget .iw-btn-search:disabled { background: #9ca3af; cursor: not-allowed; }
#ignav-widget .iw-btn-search svg {
width: 18px;
height: 18px;
}
#ignav-widget .iw-filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 1rem;
}
#ignav-widget .iw-pill {
padding: 6px 14px;
border: 1px solid #e5e7eb;
border-radius: 20px;
font-size: 13px;
color: #555;
background: #fff;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
}
#ignav-widget .iw-pill:hover { border-color: #185FA5; color: #185FA5; }
#ignav-widget .iw-pill.active {
background: #EBF5FF;
border-color: #185FA5;
color: #0C447C;
font-weight: 500;
}
#ignav-widget .iw-results { display: flex; flex-direction: column; gap: 10px; }
#ignav-widget .iw-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1rem 1.25rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 16px;
transition: all .15s;
}
#ignav-widget .iw-card:hover {
border-color: #185FA5;
box-shadow: 0 2px 12px rgba(24, 95, 165, .08);
}
#ignav-widget .iw-route {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
#ignav-widget .iw-code {
font-size: 22px;
font-weight: 700;
color: #0d2d5e;
min-width: 48px;
}
#ignav-widget .iw-route-mid {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
max-width: 100px;
}
#ignav-widget .iw-route-line {
display: flex;
align-items: center;
width: 100%;
gap: 3px;
}
#ignav-widget .iw-line { flex: 1; height: 1px; background: #d1d5db; }
#ignav-widget .iw-dot { width: 5px; height: 5px; border-radius: 50%; background: #9ca3af; }
#ignav-widget .iw-route-dur { font-size: 11px; color: #9ca3af; }
#ignav-widget .iw-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: #6b7280;
}
#ignav-widget .iw-airline { font-size: 13px; color: #374151; margin-top: 2px; }
#ignav-widget .badge {
font-size: 11px;
font-weight: 500;
padding: 2px 8px;
border-radius: 4px;
}
#ignav-widget .badge-direct { background: #dcfce7; color: #166534; }
#ignav-widget .badge-stop { background: #fef9c3; color: #854d0e; }
#ignav-widget .iw-price-col { text-align: right; }
#ignav-widget .iw-price { font-size: 22px; font-weight: 700; color: #185FA5; line-height: 1.2; }
#ignav-widget .iw-price-sub { font-size: 11px; color: #9ca3af; margin-bottom: 8px; }
#ignav-widget .iw-btn-book {
padding: 8px 20px;
background: #185FA5;
color: #fff;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s;
white-space: nowrap;
}
#ignav-widget .iw-btn-book:hover { background: #0C447C; }
#ignav-widget .iw-state {
text-align: center;
padding: 2.5rem 1rem;
color: #9ca3af;
font-size: 14px;
}
#ignav-widget .iw-loading-dots span {
animation: iw-dot 1.4s infinite;
opacity: 0;
}
#ignav-widget .iw-loading-dots span:nth-child(2) { animation-delay: .2s; }
#ignav-widget .iw-loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes iw-dot { 0%,80%,100%{opacity:0} 40%{opacity:1} }
#ignav-widget .iw-footer {
font-size: 11px;
color: #d1d5db;
text-align: center;
margin-top: 1rem;
padding-top: .75rem;
border-top: 1px solid #f3f4f6;
}
#ignav-widget .iw-footer a { color: #9ca3af; text-decoration: none; }
#ignav-widget .iw-footer a:hover { color: #185FA5; }
#ignav-widget .iw-results-count {
font-size: 13px;
color: #6b7280;
margin-bottom: .75rem;
}