:root {
            --takeoff-red: #ad0101;
            --takeoff-red-dark: #820000;
            --takeoff-blue: #003366;
            --takeoff-yellow: #ffcc66;
            --takeoff-bg: #f4f4f4;
            --takeoff-border: #e4e4e4;
            --takeoff-text: #333333;
        }

        html,
        body {
            background: var(--takeoff-bg);
            color: var(--takeoff-text);
            min-height: 100%;
        }

        /*
        |--------------------------------------------------------------------------
        | CABECERA
        |--------------------------------------------------------------------------
        */

        .takeoff-header {
            background: var(--takeoff-red);
            color: white;
            border-bottom: 4px solid var(--takeoff-blue);
        }

        .takeoff-header .navbar {
            background: transparent;
        }

        .takeoff-header .navbar-item,
        .takeoff-header .navbar-link {
            color: white;
        }

        .takeoff-brand {
            font-size: 1.45rem;
            font-weight: 700;
            letter-spacing: .2px;
        }

        .takeoff-subtitle {
            font-size: .75rem;
            opacity: .9;
        }

        /*
        |--------------------------------------------------------------------------
        | HERO
        |--------------------------------------------------------------------------
        */

        .search-intro {
            background:
                linear-gradient(
                    135deg,
                    var(--takeoff-blue) 0%,
                    #064f88 100%
                );

            color: white;
            padding: 2.2rem 1.5rem;
        }

        .search-intro h1 {
            color: white;
        }

        .search-intro p {
            color: rgba(255,255,255,.9);
        }

        /*
        |--------------------------------------------------------------------------
        | FILTROS
        |--------------------------------------------------------------------------
        */

        .filters-wrapper {
            margin-top: -1.5rem;
            position: relative;
            z-index: 10;
        }

        .filters-box {
            background: white;
            border-radius: 10px;
            box-shadow: 0 6px 24px rgba(0,0,0,.10);
            overflow: hidden;
        }

        .filters-title {
            background: var(--takeoff-yellow);
            color: var(--takeoff-blue);
            padding: .85rem 1.25rem;
            font-weight: 700;
            border-bottom: 1px solid #e7b44d;
        }

        .filters-body {
            padding: 1.25rem;
        }

        .filters-body .label {
            color: var(--takeoff-blue);
            font-size: .78rem;
            margin-bottom: .3rem;
        }

        .filters-body .input,
        .filters-body .select select {
            border-color: #d7d7d7;
            box-shadow: none;
        }

        .filters-body .input:focus,
        .filters-body .select select:focus {
            border-color: var(--takeoff-red);
            box-shadow: 0 0 0 .125em rgba(173,1,1,.10);
        }

        .button.is-takeoff {
            background: var(--takeoff-red);
            border-color: var(--takeoff-red);
            color: white;
            font-weight: 600;
        }

        .button.is-takeoff:hover {
            background: var(--takeoff-red-dark);
            border-color: var(--takeoff-red-dark);
            color: white;
        }

        .button.is-takeoff-blue {
            background: var(--takeoff-blue);
            border-color: var(--takeoff-blue);
            color: white;
        }

        .button.is-takeoff-blue:hover {
            background: #00274d;
            color: white;
        }

        /*
        |--------------------------------------------------------------------------
        | CABECERA RESULTADOS
        |--------------------------------------------------------------------------
        */

        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .results-count {
            color: #777;
            font-size: .9rem;
        }

        /*
        |--------------------------------------------------------------------------
        | TARJETAS
        |--------------------------------------------------------------------------
        */

        .trip-card {
            background: white;
            border-radius: 9px;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--takeoff-border);
            box-shadow: 0 3px 14px rgba(0,0,0,.07);
            transition:
                transform .15s ease,
                box-shadow .15s ease;
        }

        .trip-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(0,0,0,.11);
        }

        .trip-image-wrapper {
            height: 200px;
            position: relative;
            overflow: hidden;
            background: #ddd;
        }

        .trip-image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .provider-badge {
            position: absolute;
            top: .75rem;
            left: .75rem;
            background: rgba(0,51,102,.92);
            color: white;
            border-radius: 5px;
            padding: .3rem .55rem;
            font-size: .70rem;
            font-weight: 700;
        }

        .available-badge {
            position: absolute;
            top: .75rem;
            right: .75rem;
            background: white;
            color: #16803c;
            border-radius: 5px;
            padding: .3rem .55rem;
            font-size: .70rem;
            font-weight: 700;
        }

        .trip-content {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            padding: 1rem;
        }

        .trip-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--takeoff-blue);
            line-height: 1.25;
            margin-bottom: .4rem;
        }

        .trip-route {
            color: #777;
            font-size: .76rem;
            margin-bottom: .75rem;
            min-height: 2rem;
        }

        .trip-summary {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .5rem;
            padding: .65rem 0;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            margin-bottom: .7rem;
        }

        .summary-item {
            font-size: .76rem;
            color: #666;
        }

        .summary-item strong {
            display: block;
            color: #333;
            font-size: .84rem;
        }

        .trip-price-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: .7rem;
        }

        .price-label {
            color: #777;
            font-size: .72rem;
        }

        .trip-price {
            color: var(--takeoff-red);
            font-size: 1.45rem;
            font-weight: 800;
            line-height: 1;
        }

        .trip-description {
            display: none;
            background: #f8f8f8;
            border-left: 3px solid var(--takeoff-yellow);
            padding: .75rem;
            margin: .25rem 0 .9rem;
            font-size: .82rem;
            line-height: 1.55;
            color: #555;
        }

        .trip-actions {
            display: flex;
            gap: .5rem;
            margin-top: auto;
        }

        .trip-actions .button {
            flex: 1;
        }

        /*
        |--------------------------------------------------------------------------
        | RESPONSIVE
        |--------------------------------------------------------------------------
        */

        @media (max-width: 768px) {
            .filters-wrapper {
                margin-top: 0;
            }

            .search-intro {
                padding: 1.5rem 1rem;
            }

            .results-header {
                align-items: flex-start;
                flex-direction: column;
            }

            .trip-image-wrapper {
                height: 180px;
            }
        }