/* ==========================================================================
   TABLET REFIT — 681px a 1000px.

   El sitio tenía dos layouts y nada en el medio: el de escritorio y el
   "MOBILE REFIT" que vive dentro de @media (max-width: 680px). El iPad en
   vertical mide 820-834px de ancho, así que caía en tierra de nadie: se
   llevaba el menú hamburguesa (que arranca en 1000px) pero conservaba el
   layout de escritorio entero — grillas de dos columnas colapsadas a una
   pero con 60-70px de hueco entre filas, secciones de 120px de padding, y
   sobre todo la foto del hero en versión apaisada recortada a lo bruto
   contra una pantalla vertical.

   Este archivo va último en el documento para ganar por orden de cascada.
   Todo vive dentro del media query, así que escritorio y teléfono quedan
   exactamente como estaban.
   ========================================================================== */

@media (min-width: 681px) and (max-width: 1000px) {

  /* ---- 1. Header ---------------------------------------------------------
     El logo se declara en 410x140px: 18px más alto que la barra, que mide
     122px. En escritorio no se nota porque sobra ancho; acá el recorte
     quedaba a la vista. Se baja la barra y el logo a escala de tablet. */

  #phoenix-site .header,
  #phoenix-site .header-inner {
    height: 108px;
  }

  #phoenix-site .brand img {
    width: 300px;
    height: 100px;
  }

  #phoenix-site section,
  #phoenix-site footer {
    scroll-margin-top: 120px;
  }

  /* ---- 2. Hero -----------------------------------------------------------
     Es el mismo hero que el del teléfono, en grande: título y texto
     centrados arriba, botón centrado, y el avión ocupando la mitad de abajo
     de la pantalla.

     La primera pieza ya está en el HTML: el <source> del <picture> servía la
     foto apaisada (1672x941) a todo lo que superara 680px, y contra un
     viewport de 820x1180 el object-fit: cover la agranda hasta 2096px de
     ancho para tapar el alto — se veía un pedazo de fuselaje al azar. Ese
     corte pasó a 1000px, así que acá ya llega la foto vertical (941x1672),
     que es la que arma la composición del teléfono.

     El resto es el bloque de móvil (el @media (max-width: 680px) que está al
     final de index.html) con las medidas subidas a escala de tablet. */

  #phoenix-site .hero {
    height: 100vh;
    height: 100svh;
    min-height: 720px !important;
    overflow: hidden !important;
    background: #020b18 !important;
  }

  /* De caja centrada verticalmente a columna que arranca arriba: es lo que
     pone el texto en el tercio superior y le deja la mitad de abajo al avión. */
  #phoenix-site .hero-content {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 178px !important;
    padding-bottom: 0 !important;
  }

  #phoenix-site .hero-copy {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 4 !important;
  }

  /* En el teléfono el "PHOENIX PRIVATE FLIGHTS" de arriba del título no está:
     con el logo a 20px de distancia era repetir la marca dos veces. */
  #phoenix-site .hero-copy .eyebrow {
    display: none !important;
  }

  #phoenix-site .hero-copy h1 {
    max-width: none !important;
    font-size: clamp(38px, 6vw, 50px) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
    margin: 0 auto 18px !important;
    text-wrap: balance !important;
    text-shadow: 0 16px 44px rgba(0, 0, 0, 0.6) !important;
  }

  #phoenix-site .hero-copy .hero-text {
    max-width: 42ch !important;
    margin: 0 auto !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: rgba(248, 246, 240, 0.86) !important;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.65) !important;
  }

  #phoenix-site .hero-actions {
    margin-top: 26px !important;
    justify-content: center !important;
  }

  #phoenix-site .hero-actions .btn {
    width: min(100%, 320px) !important;
    min-height: 52px !important;
    padding-inline: 20px !important;
    justify-content: center !important;
    font-size: 11px !important;
    letter-spacing: 2.55px !important;
    box-shadow: 0 18px 42px rgba(201, 154, 46, 0.3) !important;
  }

  #phoenix-site .hero-slide img {
    opacity: 1 !important;
    transform: scale(1) !important;
    object-fit: cover !important;
  }

  /* La primera foto mira para el otro lado: espejada, el avión queda del lado
     que deja el texto libre. Los encuadres son los mismos del teléfono. */
  #phoenix-site .hero-slide:nth-child(1) picture {
    transform: scaleX(-1) !important;
  }

  #phoenix-site .hero-slide:nth-child(1) img {
    object-position: 58% center !important;
  }

  #phoenix-site .hero-slide:nth-child(2) img {
    object-position: 48% center !important;
  }

  #phoenix-site .hero-slide:nth-child(3) img {
    object-position: 55% center !important;
  }

  /* La sombra deja de ser lateral (venía pensada para el texto a la
     izquierda) y pasa a ser de arriba hacia abajo: oscurece donde va el
     texto y despeja el avión. */
  #phoenix-site .hero-shade {
    background:
      linear-gradient(180deg, rgba(2, 11, 24, 0.8) 0%, rgba(2, 11, 24, 0.5) 26%, rgba(2, 11, 24, 0.14) 48%, rgba(2, 11, 24, 0) 66%) !important;
  }

  #phoenix-site .hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      radial-gradient(118% 92% at 50% 46%, rgba(2, 11, 24, 0) 54%, rgba(2, 11, 24, 0.4) 78%, rgba(2, 11, 24, 0.74) 100%),
      linear-gradient(90deg, rgba(2, 11, 24, 0.52) 0%, rgba(2, 11, 24, 0.14) 14%, rgba(2, 11, 24, 0) 26%, rgba(2, 11, 24, 0) 74%, rgba(2, 11, 24, 0.14) 86%, rgba(2, 11, 24, 0.52) 100%) !important;
    opacity: 1 !important;
  }

  #phoenix-site .hero::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 140px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(2, 11, 24, 0) 0%, rgba(2, 11, 24, 0.62) 58%, var(--navy) 100%) !important;
  }

  /* Los puntos del carrusel, centrados abajo como en el teléfono.

     El centrado original era left: 50% + translateX(-50%), pero la animación
     de entrada del hero también anima transform y, con fill both, se queda
     con el valor final (translateY(0)) pisando el -50%: los puntos terminan
     arrancando en la mitad de la pantalla y saliéndose por la derecha. Acá
     se centran con left/right, que ninguna animación toca. */
  #phoenix-site .hero-control {
    display: flex !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 30px !important;
    width: auto !important;
    padding: 0 24px !important;
    transform: none !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #phoenix-site .slide-dot {
    width: 40px !important;
    height: 3px !important;
  }

  #phoenix-site .hero-caption {
    display: none !important;
  }

  /* El selector de idioma vive dentro del menú de escritorio, que a partir de
     1000px se esconde: en tablet quedaba sin forma de cambiar de idioma sin
     abrir el menú. Es la misma píldora flotante que ya usa el teléfono. */
  #phoenix-site .phoenix-language-floating,
  .phoenix-language-floating {
    display: flex;
    top: 38px;
    right: 100px;
    padding: 8px 12px;
    gap: 8px;
  }

  .phoenix-language-floating a {
    font-size: 10px;
  }

  /* ---- 3. Ritmo vertical -------------------------------------------------
     120px de padding por sección y grillas de dos columnas que a partir de
     1000px colapsan a una sola pero se quedan con el gap de escritorio:
     70px de aire muerto entre el título y el contenido que le sigue. */

  #phoenix-site .section-padding {
    padding: 78px 0;
  }

  /* Igual que en el teléfono: el hero cierra con su propio degradé, así que
     la sección siguiente arranca pegada y no con 110px de aire. */
  #phoenix-site .quote-section {
    padding: 52px 0 76px;
  }

  #phoenix-site .quote-header,
  #phoenix-site .services-layout,
  #phoenix-site .empty-grid,
  #phoenix-site .footer-grid {
    gap: 26px;
    align-items: start;
  }

  #phoenix-site .quote-header {
    margin-bottom: 30px;
  }

  #phoenix-site .service-list {
    gap: 18px;
  }

  #phoenix-site .section-title {
    font-size: clamp(32px, 4.6vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.6px;
  }

  #phoenix-site .section-description {
    font-size: 15.5px;
    line-height: 1.72;
  }

  #phoenix-site .service-card {
    padding: 26px;
  }

  #phoenix-site .footer {
    padding: 68px 0 32px;
  }

  /* ---- 3b. Formulario de cotización --------------------------------------
     Safari no deja que un input[type="date"] baje del ancho que necesita su
     control nativo ("dd/mm/aaaa" más el ícono de agenda): ignora el
     width: 100% y se pasa de su columna. Con el padding de escritorio, los
     dos campos de fecha se desbordaban unos 30px cada uno y el de ida
     terminaba montado encima del de vuelta.

     Es el mismo blindaje que ya usaba el teléfono desde los 680px para
     abajo: sacarle la apariencia nativa, permitirle achicarse (min-width: 0)
     y recortar lo que sobre. */

  #phoenix-site .field,
  #phoenix-site .field-control,
  #phoenix-site .field input,
  #phoenix-site .field select {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #phoenix-site .field input[type="date"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: block;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 18px;
    font-size: 15px;
    line-height: 56px;
    overflow: hidden;
  }

  #phoenix-site .field input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    line-height: 56px;
  }

  #phoenix-site .field input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: 0;
  }

  /* La tarjeta de empty legs se arregla en phoenix-empty-legs.css, que es la
     hoja que también cargan las páginas de /empty-legs. */

  /* ---- 4. Carrusel de aeronaves ------------------------------------------
     Era lo que directamente no se veía. Dos causas encadenadas:

     (a) El avión arranca la animación en translateX(18%) y el contenedor
         recorta lo que se sale (.fleet-slides tiene overflow: hidden). En
         escritorio 18% de 760px cae dentro de 1220px de ancho; en 820px el
         avión empezaba fuera de cuadro por la derecha.

     (b) La imagen se declara con opacity: 0 y quien la enciende es la propia
         animación. Si la animación no llega a correr —Safari la puede dejar
         pendiente cuando la sección todavía no entró en pantalla— el avión
         no aparece nunca. Acá el estado en reposo pasa a ser visible: la
         animación sigue haciendo su entrada, pero ya no es la única forma de
         que el avión exista.

     Además el avión medía 131px de alto (16vw) en una pantalla de 820px: la
     "previsualización" era una silueta diminuta. Sube a 190px. */

  #phoenix-site .fleet {
    padding: 68px 0 60px;
  }

  #phoenix-site .fleet-showcase-header {
    margin-bottom: 18px;
  }

  #phoenix-site .fleet-stage,
  #phoenix-site .fleet-slides {
    min-height: 330px;
  }

  #phoenix-site .fleet-plane-media {
    width: min(100%, calc(100% - 16px));
  }

  #phoenix-site .fleet-plane-media img {
    width: min(620px, 78vw);
    max-height: 190px;
    opacity: 1;
  }

  #phoenix-site .fleet-showcase-slide.is-active .fleet-plane-media img {
    animation: phoenixTabletFleetPass 3.2s cubic-bezier(0.2, 0.78, 0.22, 1) both;
  }

  #phoenix-site .fleet-nav {
    top: 40%;
    width: 42px;
    height: 42px;
    font-size: 30px;
  }

  #phoenix-site .fleet-plane-copy {
    margin-top: 12px;
  }

  #phoenix-site .fleet-tabs {
    width: min(560px, calc(100% - 44px));
    margin-top: 18px;
  }
}

/* Las animaciones van fuera del media query: los @keyframes no se heredan
   condicionalmente y así quedan disponibles para la regla que las llama. */

/* Misma entrada lateral del avión, arrancando desde 9% en vez de 18% para
   que el fuselaje no empiece fuera del recorte en pantallas angostas. */
@keyframes phoenixTabletFleetPass {
  0% {
    opacity: 0;
    transform: translateX(9%) scale(0.99);
  }
  18% {
    opacity: 1;
  }
  68% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(-2%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #phoenix-site .fleet-showcase-slide.is-active .fleet-plane-media img {
    animation: none;
  }
}