/* =========================================================================
   Phoenix Private Flights — Empty Legs
   Visual redesign: aeronautical "boarding pass" aesthetic.

   Loaded as the LAST stylesheet of the page so it wins over the inline
   <style> blocks without needing !important everywhere. The exceptions are
   transform rules, which must override #phoenix-site .reveal { ... !important }
   from the visibility guard.
   ========================================================================= */

#phoenix-site {
  --el-gold: #c99a2e;
  --el-gold-bright: #f2c84b;
  --el-ivory: #f8f6f0;
  --el-navy: #020b18;
  --el-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Without this, the vertical scrollbar only appears once the page grows
   taller than the viewport -- which happens the instant an FAQ answer below
   opens. That reflow narrows the whole page by the scrollbar's width, so
   every line of text visibly jumps left. Reserving the gutter up front means
   the page is always the same width, open or closed. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* -------------------------------------------------------------------------
   1. Hero — cinematic, with a faint navigation-chart grid

   Scoped to [data-phx-page="empty-legs"]: the card styles further down are
   deliberately generic so the homepage can load this file for visual parity,
   and the homepage's own hero must not be touched.
   ------------------------------------------------------------------------- */

#phoenix-site[data-phx-page="empty-legs"] .hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 96px;
  background:
    radial-gradient(118% 88% at 79% 6%, rgba(201, 154, 46, 0.24) 0%, rgba(201, 154, 46, 0) 54%),
    radial-gradient(96% 76% at 6% 102%, rgba(41, 92, 150, 0.26) 0%, rgba(41, 92, 150, 0) 62%),
    linear-gradient(168deg, #08172c 0%, #04101f 46%, var(--el-navy) 100%);
}

/* Sectional-chart grid, faded out toward the edges. */
#phoenix-site[data-phx-page="empty-legs"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(201, 154, 46, 0.06) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(201, 154, 46, 0.06) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(74% 76% at 52% 38%, #000 0%, transparent 82%);
  mask-image: radial-gradient(74% 76% at 52% 38%, #000 0%, transparent 82%);
}

/* Warm horizon line where the hero meets the board. */
#phoenix-site[data-phx-page="empty-legs"] .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201, 154, 46, 0) 0%,
    rgba(201, 154, 46, 0.75) 50%,
    rgba(201, 154, 46, 0) 100%);
}

#phoenix-site[data-phx-page="empty-legs"] .hero .container {
  position: relative;
  z-index: 1;
}

#phoenix-site[data-phx-page="empty-legs"] .hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 3.4px;
}

#phoenix-site[data-phx-page="empty-legs"] .hero .eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 154, 46, 0), var(--el-gold));
}

#phoenix-site[data-phx-page="empty-legs"] .hero h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.5px;
  background: linear-gradient(180deg, #ffffff 0%, #efe6d2 58%, #cbb488 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#phoenix-site[data-phx-page="empty-legs"] .hero p {
  max-width: 620px;
  color: rgba(248, 246, 240, 0.62);
  font-size: 17px;
  line-height: 1.75;
}

/* -------------------------------------------------------------------------
   2. Board canvas
   ------------------------------------------------------------------------- */

#phoenix-site .empty-section {
  position: relative;
  padding: 54px 0 104px;
  background:
    radial-gradient(78% 42% at 50% 0%, rgba(201, 154, 46, 0.10) 0%, rgba(201, 154, 46, 0) 68%),
    linear-gradient(180deg, #fbfaf6 0%, var(--el-ivory) 34%, #f2efe6 100%);
}

#phoenix-site .empty-layout {
  gap: 26px;
}

#phoenix-site .empty-heading .section-title {
  font-size: clamp(28px, 3.3vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.4px;
}

#phoenix-site .empty-heading .section-description {
  max-width: 640px;
  color: rgba(2, 11, 24, 0.6);
  line-height: 1.7;
}

/* "Updated on …" badge, now with a live-status dot. */
#phoenix-site .empty-updated {
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 9px 16px 9px 13px;
  border-color: rgba(201, 154, 46, 0.45);
  background: rgba(201, 154, 46, 0.09);
  font-size: 11px;
  letter-spacing: 1.5px;
}

#phoenix-site .empty-updated::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fbf7f;
  box-shadow: 0 0 0 3px rgba(63, 191, 127, 0.2);
  animation: phoenixElPulse 2.4s ease-in-out infinite;
}

@keyframes phoenixElPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(63, 191, 127, 0.2); }
  50%      { box-shadow: 0 0 0 6px rgba(63, 191, 127, 0.05); }
}

/* -------------------------------------------------------------------------
   3. Search — lives in the header, beside the logo

   The markup was lifted into .header-inner, so it rides along with the
   already-sticky header and stays reachable down the whole board.
   ------------------------------------------------------------------------- */

#phoenix-site .header-inner {
  gap: 20px;
}

#phoenix-site .header-inner .empty-search {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 440px;
  margin: 0;
}

#phoenix-site .header-inner .empty-search input {
  min-height: 50px;
  padding: 0 20px 0 50px;
  border-color: rgba(201, 154, 46, 0.42);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c99a2e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 18px 50%;
  background-size: 19px 19px;
  color: var(--el-ivory);
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

#phoenix-site .header-inner .empty-search input::placeholder {
  color: rgba(248, 246, 240, 0.5);
  font-weight: 600;
}

#phoenix-site .header-inner .empty-search input:focus {
  border-color: rgba(201, 154, 46, 0.95);
  background-color: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 4px rgba(201, 154, 46, 0.16);
}

/* -------------------------------------------------------------------------
   4. Board grid
   ------------------------------------------------------------------------- */

#phoenix-site .empty-board {
  gap: 20px;
}

/* -------------------------------------------------------------------------
   5. Card — boarding pass
   ------------------------------------------------------------------------- */

#phoenix-site .empty-leg-card {
  border-radius: 24px;
  padding: 28px 32px;
  border-color: rgba(201, 154, 46, 0.42);
  box-shadow:
    0 26px 60px rgba(2, 11, 24, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 0.5s var(--el-ease),
    box-shadow 0.5s ease,
    border-color 0.5s ease;
}

/* Beats the .reveal visibility guard, which pins transform with !important. */
#phoenix-site .empty-leg-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(201, 154, 46, 0.95);
  box-shadow:
    0 40px 84px rgba(2, 11, 24, 0.42),
    0 0 44px rgba(201, 154, 46, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* Aircraft cutout, lit from above. */
#phoenix-site .empty-leg-media img {
  height: 146px;
  transition: transform 0.6s var(--el-ease);
}

#phoenix-site .empty-leg-card:hover .empty-leg-media img {
  transform: translateY(-3px) scale(1.03) !important;
}

/* Departure chip. */
#phoenix-site .empty-leg-date {
  padding: 11px 18px;
  letter-spacing: 0.3px;
}

/* ---- Route: dotted flight path with the aircraft riding it ---- */

#phoenix-site .empty-leg-route {
  position: relative;
}

#phoenix-site .empty-leg-route strong {
  font-size: 36px;
}

#phoenix-site .empty-leg-plane {
  position: relative;
}

#phoenix-site .empty-leg-plane::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -32px;
  right: -32px;
  height: 0;
  border-top: 2px dotted rgba(201, 154, 46, 0.42);
  transform: translateY(-50%);
}

#phoenix-site .empty-leg-plane::after {
  position: relative;
  z-index: 1;
  /* Soft halo so the dotted path reads as passing *behind* the aircraft. */
  background: radial-gradient(circle at 50% 50%, #071627 52%, rgba(7, 22, 39, 0) 76%);
  transition: transform 0.55s var(--el-ease);
}

#phoenix-site .empty-leg-card:hover .empty-leg-plane::after {
  transform: translateX(6px) !important;
}

/* ---- Price stub, separated by a ticket perforation ---- */

#phoenix-site .empty-leg-price {
  position: relative;
  gap: 12px;
  padding-left: 32px;
}

#phoenix-site .empty-leg-price::before {
  content: "";
  position: absolute;
  left: 0;
  top: -12px;
  bottom: -12px;
  border-left: 2px dashed rgba(201, 154, 46, 0.38);
}

#phoenix-site .empty-leg-price strong {
  font-size: 38px;
  background: linear-gradient(180deg, #ffffff 0%, #f0e2c0 52%, #d8bb7c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* CTA with a light sweep on hover. */
#phoenix-site .empty-leg-price .btn-small {
  position: relative;
  overflow: hidden;
  min-width: 176px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--el-gold-bright) 0%, #c88d02 100%);
  box-shadow: 0 14px 30px rgba(201, 154, 46, 0.28);
  transition: transform 0.35s var(--el-ease), box-shadow 0.35s ease;
}

#phoenix-site .empty-leg-price .btn-small::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.65s var(--el-ease);
}

#phoenix-site .empty-leg-price .btn-small:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 40px rgba(201, 154, 46, 0.38);
}

#phoenix-site .empty-leg-price .btn-small:hover::after {
  left: 120%;
}

/* Fine print. */
#phoenix-site .empty-leg-details {
  margin: 0 -32px -28px;
  padding: 15px 32px;
  font-size: 11.5px;
  letter-spacing: 0.2px;
}

/* -------------------------------------------------------------------------
   6. Booking modal submit

   This page never styled .lead-submit (only its size), so the button fell
   back to the browser's default grey chrome. Give it the same gold treatment
   as the card CTA.
   ------------------------------------------------------------------------- */

#phoenix-site .empty-booking-dialog .lead-submit {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--el-gold);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--el-gold-bright) 0%, #c88d02 100%);
  color: var(--el-navy);
  font-family: inherit;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(201, 154, 46, 0.28);
  transition: transform 0.35s var(--el-ease), box-shadow 0.35s ease;
}

#phoenix-site .empty-booking-dialog .lead-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(201, 154, 46, 0.38);
}

#phoenix-site .empty-booking-dialog .lead-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* -------------------------------------------------------------------------
   7. Empty state
   ------------------------------------------------------------------------- */

/* :not([hidden]) matters — a bare `display: grid` would override the
   `hidden` attribute the script uses to keep this out of the way. */
#phoenix-site .empty-no-results:not([hidden]) {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 8px 0 0;
  padding: 44px 24px;
  border: 1px dashed rgba(201, 154, 46, 0.45);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
  color: rgba(2, 11, 24, 0.58);
}

#phoenix-site .empty-no-results[hidden] {
  display: none !important;
}

#phoenix-site .empty-no-results::before {
  content: "\2708\FE0E";
  font-size: 28px;
  color: rgba(201, 154, 46, 0.75);
}

/* -------------------------------------------------------------------------
   7. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  #phoenix-site .empty-leg-price {
    padding-left: 0;
    padding-top: 22px;
  }

  /* Perforation turns horizontal once the stub wraps under the details. */
  #phoenix-site .empty-leg-price::before {
    left: -12px;
    right: -12px;
    top: 0;
    bottom: auto;
    border-left: 0;
    border-top: 2px dashed rgba(201, 154, 46, 0.38);
  }
}

@media (max-width: 760px) {
  #phoenix-site[data-phx-page="empty-legs"] .hero {
    padding: 52px 0 60px;
  }

  #phoenix-site[data-phx-page="empty-legs"] .hero h1 {
    font-size: clamp(28px, 8.4vw, 38px);
  }

  /* Logo + link stay on the first row; the search drops to its own line
     rather than squeezing all three across a phone-width header. */
  #phoenix-site[data-phx-page="empty-legs"] .header-inner {
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 0 14px;
  }

  /* Shrink the logo and the link enough that they share row one, instead of
     each claiming a row of their own and pushing the header very tall. */
  #phoenix-site[data-phx-page="empty-legs"] .header-inner .brand img {
    width: 132px;
    height: 58px;
  }

  #phoenix-site[data-phx-page="empty-legs"] .header-home-link {
    min-height: 36px;
    padding: 0 13px;
    font-size: 10px;
    letter-spacing: 1.2px;
  }

  #phoenix-site .header-inner .empty-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }

  #phoenix-site .header-inner .empty-search input {
    min-height: 46px;
    padding-left: 46px;
    background-position: 16px 50%;
    background-size: 17px 17px;
  }

  #phoenix-site .empty-leg-card {
    border-radius: 18px;
    padding: 14px 14px 12px;
  }

  #phoenix-site .empty-leg-media img {
    height: 92px;
  }

  #phoenix-site .empty-leg-route strong {
    font-size: 21px;
  }

  #phoenix-site .empty-leg-plane::before {
    left: -14px;
    right: -14px;
  }

  #phoenix-site .empty-leg-price strong {
    font-size: 24px;
  }

  #phoenix-site .empty-leg-details {
    margin: 0 -14px -12px;
    padding: 10px 14px;
  }

  /* A sticky bar plus a hover lift is noise on touch; keep it calm. */
  #phoenix-site .empty-leg-card:hover {
    transform: none !important;
  }
}

/* -------------------------------------------------------------------------
   8. Accessibility
   ------------------------------------------------------------------------- */

#phoenix-site .empty-search input:focus-visible,
#phoenix-site .empty-leg-price .btn-small:focus-visible {
  outline: 2px solid var(--el-gold-bright);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #phoenix-site .empty-updated::before,
  #phoenix-site .empty-leg-card,
  #phoenix-site .empty-leg-media img,
  #phoenix-site .empty-leg-plane::after,
  #phoenix-site .empty-leg-price .btn-small,
  #phoenix-site .empty-leg-price .btn-small::after {
    animation: none !important;
    transition: none !important;
  }

  #phoenix-site .empty-leg-card:hover,
  #phoenix-site .empty-leg-card:hover .empty-leg-media img,
  #phoenix-site .empty-leg-card:hover .empty-leg-plane::after {
    transform: none !important;
  }
}

/* =========================================================================
   9. Capa de producto (barra de filtros, urgencia, FAQ)

   Lo que sigue acompaña a assets/phoenix-empty-legs-pro.js: son elementos
   que ese script crea, así que no existen en el HTML de ninguna de las 9
   copias. Todo va scopeado a #phoenix-site para no salpicar el homepage,
   que carga esta misma hoja.
   ========================================================================= */

/* ---- Barra: contador + filtros por región + orden ---- */

#phoenix-site .empty-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 24px;
  padding: 16px 20px;
  border: 1px solid rgba(2, 11, 24, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 30px rgba(2, 11, 24, 0.05);
}

#phoenix-site .empty-toolbar__count {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(2, 11, 24, 0.78);
}

#phoenix-site .empty-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

#phoenix-site .empty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#phoenix-site .empty-chip {
  padding: 7px 14px;
  border: 1px solid rgba(2, 11, 24, 0.14);
  border-radius: 999px;
  background: transparent;
  color: rgba(2, 11, 24, 0.62);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#phoenix-site .empty-chip:hover {
  border-color: rgba(201, 154, 46, 0.6);
  color: var(--el-navy);
}

#phoenix-site .empty-chip.is-active {
  border-color: transparent;
  background: var(--el-navy);
  color: var(--el-ivory);
}

#phoenix-site .empty-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(2, 11, 24, 0.55);
}

#phoenix-site .empty-sort select {
  padding: 7px 12px;
  border: 1px solid rgba(2, 11, 24, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--el-navy);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

#phoenix-site .empty-sort select:focus-visible,
#phoenix-site .empty-chip:focus-visible {
  outline: 2px solid var(--el-gold-bright);
  outline-offset: 2px;
}

/* Filtro por región. Mismo patrón que .empty-leg-hidden, que ya usa
   !important: si no, el `display` de la tarjeta le gana. */
#phoenix-site .empty-leg-region-off {
  display: none !important;
}

/* ---- Cuánto falta para la salida ---- */

#phoenix-site .empty-leg-countdown {
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(248, 246, 240, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

#phoenix-site .empty-leg-countdown.is-soon {
  background: rgba(242, 200, 75, 0.16);
  color: var(--el-gold-bright);
}

/* Cinta de "última hora" en la esquina de la tarjeta. */
#phoenix-site .empty-leg-card.is-last-minute {
  border-color: rgba(242, 200, 75, 0.72);
}

#phoenix-site .empty-leg-flag {
  position: absolute;
  top: 0;
  right: 28px;
  padding: 5px 13px 6px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(135deg, var(--el-gold-bright) 0%, var(--el-gold) 100%);
  color: #1b1200;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(201, 154, 46, 0.35);
}

/* ---- Estados sin resultados ---- */

#phoenix-site .empty-none-card strong {
  font-size: 19px;
  color: var(--el-navy);
}

#phoenix-site .empty-none-card span {
  max-width: 46ch;
  line-height: 1.6;
}

#phoenix-site .empty-none-card .btn-small {
  margin-top: 6px;
}

#phoenix-site .empty-none-card--standalone {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 8px 0 0;
  padding: 52px 24px;
  border: 1px dashed rgba(201, 154, 46, 0.45);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
  color: rgba(2, 11, 24, 0.58);
}

#phoenix-site .empty-none-card--standalone::before {
  content: "\2708\FE0E";
  font-size: 30px;
  color: rgba(201, 154, 46, 0.75);
}

/* ---- Qué es un empty leg + preguntas ---- */

#phoenix-site .empty-info {
  /* Without an explicit width, a block with auto margins shrinks to fit
     its content instead of stretching to fill the grid area -- so its box
     was only as wide as the longest VISIBLE line. Opening an answer could
     reveal a wider line than any closed question, growing the box, and
     since it stays centered, growing shifts the left edge (and every line
     of text in it) further left. A fixed width removes that dependency. */
  width: 100%;
  margin: 72px auto 0;
  max-width: 860px;
  padding-top: 56px;
  border-top: 1px solid rgba(2, 11, 24, 0.10);
}

#phoenix-site .empty-info__title {
  margin: 0 0 14px;
  /* Los títulos del sitio son serif; sin esto el bloque quedaba en Arial y
     se leía como pegado de otra página. */
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--el-navy);
}

#phoenix-site .empty-info__lead {
  margin: 0 0 32px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(2, 11, 24, 0.62);
}

#phoenix-site .empty-info__list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(2, 11, 24, 0.10);
}

#phoenix-site .empty-faq {
  border-bottom: 1px solid rgba(2, 11, 24, 0.10);
}

#phoenix-site .empty-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  color: var(--el-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

#phoenix-site .empty-faq summary::-webkit-details-marker {
  display: none;
}

#phoenix-site .empty-faq summary:hover {
  color: var(--el-gold);
}

/* El "+" que gira al abrir. */
#phoenix-site .empty-faq summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--el-gold), var(--el-gold)) center/100% 2px no-repeat,
    linear-gradient(var(--el-gold), var(--el-gold)) center/2px 100% no-repeat;
  transition: transform 0.3s var(--el-ease);
}

#phoenix-site .empty-faq[open] summary::after {
  transform: rotate(135deg);
}

/* Smooth expand/collapse for the answer, driven entirely by the native
   [open] attribute -- no JS involved. <details> normally shows/hides its
   content with display:none, which can't be transitioned at all, so the
   answer is kept in a grid row that's 0fr tall (visually collapsed, height
   0) and animated open to 1fr (its natural height). The inner wrapper clips
   it to that animated height and clamps the reflow to just this element. */
#phoenix-site .empty-faq .empty-faq__answer {
  display: grid !important;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.38s var(--el-ease),
    opacity 0.28s ease;
}

#phoenix-site .empty-faq[open] .empty-faq__answer {
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows 0.38s var(--el-ease),
    opacity 0.42s ease 0.06s;
}

#phoenix-site .empty-faq__answer-inner {
  overflow: hidden;
  min-height: 0;
}

#phoenix-site .empty-faq p {
  margin: 0;
  padding: 0 2px 24px;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(2, 11, 24, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  #phoenix-site .empty-faq .empty-faq__answer {
    transition: none !important;
  }
}

/* ---- Teléfono ---- */

@media (max-width: 760px) {
  #phoenix-site .empty-toolbar {
    align-items: stretch;
    gap: 14px;
    padding: 14px 16px;
  }

  #phoenix-site .empty-toolbar__controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* Las regiones se deslizan de costado en vez de apilarse en tres
     renglones y empujar las tarjetas fuera de la pantalla. */
  #phoenix-site .empty-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  #phoenix-site .empty-chips::-webkit-scrollbar {
    display: none;
  }

  #phoenix-site .empty-chip {
    flex: none;
  }

  #phoenix-site .empty-sort {
    justify-content: space-between;
  }

  #phoenix-site .empty-sort select {
    flex: 1;
    margin-left: 10px;
  }

  #phoenix-site .empty-leg-flag {
    right: 18px;
  }

  #phoenix-site .empty-leg-countdown {
    margin-left: 8px;
  }

  #phoenix-site .empty-info {
    margin-top: 56px;
    padding-top: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #phoenix-site .empty-faq summary::after,
  #phoenix-site .empty-chip {
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   10. Arriba de la página: menos repetición, los vuelos más cerca

   El hero ya dice "Todos los tramos disponibles" y abajo el encabezado de
   sección repetía casi textual ("Tramos disponibles" + una bajada que decía
   lo mismo que la del hero). Entre las dos cosas había ~700px antes del
   primer vuelo. Se deja el hero como portada y del encabezado sobrevive solo
   la fecha de actualización, que sí aporta.

   Scopeado a [data-phx-page="empty-legs"] a propósito: el homepage carga
   esta misma hoja y tiene su propio .empty-heading, que no se toca.
   ------------------------------------------------------------------------- */

#phoenix-site[data-phx-page="empty-legs"] .hero {
  padding: 60px 0 64px;
}

#phoenix-site[data-phx-page="empty-legs"] .empty-heading .eyebrow,
#phoenix-site[data-phx-page="empty-legs"] .empty-heading .section-title,
#phoenix-site[data-phx-page="empty-legs"] .empty-heading .section-description {
  display: none;
}

#phoenix-site[data-phx-page="empty-legs"] .empty-heading {
  margin-bottom: 18px;
}

@media (max-width: 760px) {
  #phoenix-site[data-phx-page="empty-legs"] .hero {
    padding: 40px 0 44px;
  }
}

/* La fecha de actualización ahora vive dentro de la barra (la mueve el JS),
   así que el encabezado de sección queda sin nada que mostrar. */
#phoenix-site[data-phx-page="empty-legs"] .empty-heading {
  display: none;
}

#phoenix-site .empty-toolbar__summary {
  display: grid;
  gap: 7px;
  justify-items: start;
}

#phoenix-site .empty-toolbar .empty-updated {
  margin-top: 0;
  padding: 6px 12px 6px 10px;
  font-size: 10px;
  letter-spacing: 1.2px;
}

@media (max-width: 760px) {
  #phoenix-site .empty-toolbar__summary {
    gap: 6px;
  }
}