/* ==========================================================================
   Airway Transfer — styles.css
   Diseño oscuro premium con acento dorado. Un único vehículo (sedán).
   ========================================================================== */

:root {
  --ink: #070b12;
  --carbon: #0a0e16;

  --gold: #c9a86a;
  --gold-soft: #e8d7b0;

  --text: #cbd5e1;
  --text-soft: #94a3b8;
  --text-dim: #64748b;

  --line: rgba(255, 255, 255, 0.08);
  --line-gold: rgba(201, 168, 106, 0.28);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-card: 0 24px 60px -25px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 0 0 1px rgba(201, 168, 106, 0.22), 0 26px 70px -22px rgba(201, 168, 106, 0.38);

  --shell: 1180px;
  --header-h: 76px;

  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------- Reset ---------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-sans);
  background-color: var(--ink);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

::selection {
  background: rgba(201, 168, 106, 0.35);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* -------------------------- Utilidades -------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.text-gold-gradient {
  background: linear-gradient(100deg, #f4e7c6 0%, #c9a86a 46%, #8a6d3b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Título solo para lectores de pantalla y rastreadores: mantiene la
   jerarquía h1 > h2 > h3 sin alterar el diseño visual. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--gold);
  color: #08101a;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}

.skip-link:focus {
  left: 0;
}

.eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(201, 168, 106, 0.85);
}

/* --------------------------- Botones --------------------------- */
.btn {
  --btn-pad-y: 0.85rem;
  --btn-pad-x: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
    border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}

.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform 0.25s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--gold {
  background: linear-gradient(135deg, #d8bd86 0%, #c9a86a 55%, #a8884c 100%);
  color: #0a0f18;
  box-shadow: 0 14px 34px -14px rgba(201, 168, 106, 0.7);
}

.btn--gold:hover {
  box-shadow: 0 20px 44px -14px rgba(201, 168, 106, 0.85);
}

.btn--gold:hover svg {
  transform: translateX(3px);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.02);
}

.btn--ghost:hover {
  border-color: rgba(201, 168, 106, 0.55);
  color: #fff;
  background: rgba(201, 168, 106, 0.08);
}

.btn--white {
  background: #fff;
  color: #0a0f18;
}

.btn--white:hover {
  background: #f1f5f9;
}

.btn--wa {
  background: #1faa55;
  color: #fff;
  box-shadow: 0 14px 32px -16px rgba(31, 170, 85, 0.9);
}

.btn--wa:hover {
  background: #178f47;
}

.btn--sm {
  --btn-pad-y: 0.6rem;
  --btn-pad-x: 1.1rem;
  font-size: 0.8rem;
}

.btn--lg {
  --btn-pad-y: 1rem;
  --btn-pad-x: 1.9rem;
  font-size: 0.95rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* ---------------------------- Header ---------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-scrolled {
  background: rgba(7, 11, 18, 0.84);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 12px;
  border: 1px solid var(--line-gold);
  background: rgba(10, 14, 22, 0.85);
  color: var(--gold);
  box-shadow: var(--shadow-glow);
  transition: transform 0.4s var(--ease);
}

.brand__mark svg {
  width: 1.3rem;
  height: 1.3rem;
}

.brand:hover .brand__mark {
  transform: rotate(-8deg);
}

.brand__type {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand__name {
  font-weight: 800;
  font-size: 1.02rem;
  color: #fff;
  letter-spacing: 0.02em;
}

.brand__sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav {
  display: none;
  align-items: center;
  gap: 1.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
}

.nav a {
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.25s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.35s var(--ease);
}

.nav a:hover {
  color: #fff;
}

.nav a:hover::after {
  width: 100%;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header__phone {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-soft);
  transition: color 0.25s var(--ease);
}

.header__phone svg {
  width: 1rem;
  height: 1rem;
  color: var(--gold);
}

.header__phone:hover {
  color: #fff;
}

.header__cta {
  display: none;
}

.menu-toggle {
  display: inline-grid;
  place-content: center;
  gap: 5px;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #e2e8f0;
  transition: transform 0.3s var(--ease);
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* -------------------------- Menú móvil -------------------------- */
.mobile-menu {
  border-top: 1px solid var(--line);
  background: rgba(7, 11, 18, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem) 1.75rem;
  animation: menuIn 0.28s var(--ease);
}

.mobile-menu[hidden] {
  display: none;
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu__nav a {
  padding: 0.9rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
  border-bottom: 1px solid var(--line);
}

.mobile-menu__nav a:last-child {
  border-bottom: 0;
}

.mobile-menu__foot {
  margin-top: 1rem;
}

/* ----------------------------- Hero ----------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: 3.5rem;
}

.hero__mesh {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(900px 500px at 12% -10%, rgba(201, 168, 106, 0.18), transparent 60%),
    radial-gradient(700px 450px at 92% 0%, rgba(56, 89, 138, 0.22), transparent 60%),
    radial-gradient(1100px 700px at 50% 125%, rgba(201, 168, 106, 0.09), transparent 60%);
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 18%, transparent 74%);
  mask-image: radial-gradient(ellipse at 50% 0%, black 18%, transparent 74%);
  pointer-events: none;
}

.hero__glow {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 720px;
  height: 720px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201, 168, 106, 0.14), transparent 62%);
  pointer-events: none;
}

.hero__layout {
  position: relative;
  display: grid;
  gap: 3rem;
  align-items: center;
}

.hero__copy {
  max-width: 40rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}

.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.16);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.16);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(74, 222, 128, 0.06);
  }
}

.hero__title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #fff;
}

.hero__lead {
  margin-top: 1.4rem;
  max-width: 34rem;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  color: var(--text-soft);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.2rem;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 5vw, 3rem);
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.stats dd {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-soft);
}

.stats dt {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ------------------------ Tarjeta hero ------------------------ */
.hero__card {
  position: relative;
}

.hero__card-glow {
  position: absolute;
  inset: -2rem;
  background: radial-gradient(circle at 70% 0%, rgba(201, 168, 106, 0.18), transparent 62%);
  filter: blur(18px);
  pointer-events: none;
}

.card-surface {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-gold);
  background: linear-gradient(165deg, rgba(20, 26, 37, 0.95), rgba(10, 14, 22, 0.98));
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.quickcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.quickcard__title {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
}

.quickcard__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--line-gold);
  color: var(--gold);
  background: rgba(201, 168, 106, 0.08);
}

.quickcard__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.quickcard__checks {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.quickcard__checks li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.quickcard__checks svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--gold);
}

/* -------------------------- Beneficios -------------------------- */
.benefits {
  border-block: 1px solid var(--line);
  background: rgba(10, 14, 22, 0.55);
  padding-block: 1.5rem;
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem;
}

.benefit {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-soft);
}

.benefit svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--gold);
}

/* --------------------------- Secciones --------------------------- */
.section {
  position: relative;
  padding-block: clamp(4rem, 9vw, 6.5rem);
}

.section--soft {
  background: rgba(10, 14, 22, 0.5);
  border-block: 1px solid rgba(255, 255, 255, 0.05);
}

.section--reserva {
  overflow: hidden;
}

.section__mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(201, 168, 106, 0.14), transparent 62%);
  pointer-events: none;
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head--split {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: none;
}

.section__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}

.section__lead {
  margin-top: 1.1rem;
  font-size: 1rem;
  color: var(--text-soft);
}

.section__lead--sm {
  margin-top: 0;
  max-width: 26rem;
  font-size: 0.92rem;
}

.section__lead strong {
  color: #e2e8f0;
}

/* ------------------------- Grid y cards ------------------------- */
.grid {
  display: grid;
  gap: 1.25rem;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(15, 20, 29, 0.7);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
    background-color 0.35s var(--ease);
}

.card--hover:hover {
  transform: translateY(-4px);
  border-color: var(--line-gold);
  background: rgba(20, 26, 37, 0.85);
}

.icon-box {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  border: 1px solid var(--line-gold);
  background: rgba(201, 168, 106, 0.07);
  color: var(--gold);
}

.icon-box svg {
  width: 1.4rem;
  height: 1.4rem;
}

.card__title {
  margin-top: 1.4rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.card__text {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--text-soft);
  flex: 1;
}

.card__tag {
  margin-top: 1.4rem;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------------------------- Aviso ---------------------------- */
.notice {
  display: flex;
  gap: 0.9rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-gold);
  background: rgba(201, 168, 106, 0.06);
  font-size: 0.88rem;
  color: var(--text-soft);
}

.notice svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  margin-top: 2px;
  color: var(--gold);
}

.notice strong {
  color: #fff;
}

/* --------------------------- Vehículo --------------------------- */
.vehicle {
  display: grid;
  gap: 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: rgba(15, 20, 29, 0.7);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  align-items: center;
}

.vehicle__media {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 30%, rgba(201, 168, 106, 0.12), transparent 68%),
    rgba(7, 11, 18, 0.7);
  padding: 2rem 1.25rem;
  overflow: hidden;
}

.vehicle__car {
  width: 100%;
  max-width: 26rem;
  color: var(--gold-soft);
  opacity: 0.9;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6));
}

.vehicle__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(7, 11, 18, 0.9);
  border: 1px solid var(--line-gold);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.vehicle__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.3rem);
  font-weight: 600;
  color: #fff;
}

.vehicle__desc {
  margin-top: 0.75rem;
  font-size: 0.92rem;
  color: var(--text-soft);
}

.specs {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

.spec {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.spec:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.spec dt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.spec dt svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--gold);
}

.spec dd {
  font-size: 0.92rem;
  font-weight: 600;
  color: #e2e8f0;
  text-align: right;
}

.spec dd small {
  font-weight: 400;
  color: var(--text-dim);
}

/* ---------------------------- Tarifas ---------------------------- */
.pricing {
  display: grid;
  gap: 1.5rem;
}

.pricing__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: rgba(15, 20, 29, 0.7);
  padding: clamp(1.6rem, 3vw, 2.25rem);
}

.pricing__card--featured {
  border-color: var(--line-gold);
  background: linear-gradient(170deg, rgba(201, 168, 106, 0.08), rgba(15, 20, 29, 0.85) 55%);
  box-shadow: var(--shadow-card);
}

.pricing__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pricing__title {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 600;
  color: #fff;
}

.pricing__list {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.15rem;
  flex: 1;
}

.pricing__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.09);
  font-size: 0.88rem;
  color: var(--text-soft);
}

.pricing__list li:last-child {
  border-bottom: 0;
}

.pricing__price {
  flex: none;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--gold-soft);
  white-space: nowrap;
}

.pricing__note {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.pricing__strip {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.75rem;
  padding: 1.15rem 1.4rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.pricing__strip div {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
}

.pricing__strip svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--gold);
}

/* ----------------------------- Pasos ----------------------------- */
.steps {
  display: grid;
  gap: 2rem;
}

.step {
  text-align: center;
  padding: 0 1rem;
}

.step__num {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-inline: auto;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  background: var(--carbon);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
  box-shadow: var(--shadow-glow);
}

.step h3 {
  margin-top: 1.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.step p {
  margin-top: 0.65rem;
  font-size: 0.88rem;
  color: var(--text-soft);
  max-width: 20rem;
  margin-inline: auto;
}

/* ---------------------------- Reserva ---------------------------- */
.booking {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.booking__form {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: rgba(15, 20, 29, 0.8);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-card);
}

.booking__section-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.15rem;
}

.booking__section-title:not(:first-child) {
  margin-top: 2rem;
}

.booking__section-num {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border-radius: 50%;
  background: rgba(201, 168, 106, 0.14);
  border: 1px solid var(--line-gold);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold);
}

.booking__section-title h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.form__row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.field {
  display: block;
}

.field__label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.field__input {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 11, 18, 0.75);
  color: #f1f5f9;
  font-size: 0.92rem;
  color-scheme: dark;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field__input::placeholder {
  color: #4b5a6e;
}

.field__input:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.field__input:focus {
  outline: none;
  border-color: rgba(201, 168, 106, 0.7);
  box-shadow: 0 0 0 4px rgba(201, 168, 106, 0.12);
}

.field__input.is-invalid {
  border-color: rgba(248, 113, 113, 0.75);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.1);
}

.field__help {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  color: var(--text-dim);
}

.field__error {
  display: block;
  min-height: 1.05rem;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #f87171;
}

.form__note {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  text-align: center;
  color: var(--text-dim);
}

.form__privacy {
  margin-top: 1rem;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.form__feedback {
  margin-top: 1rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.form__feedback[hidden] {
  display: none;
}

.form__feedback.is-success {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
  color: #bbf7d0;
}

.form__feedback.is-error {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
  color: #fecaca;
}

/* --------------------------- Resumen --------------------------- */
.booking__aside {
  position: static;
}

.summary {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-gold);
  background: linear-gradient(170deg, rgba(20, 26, 37, 0.95), rgba(10, 14, 22, 0.98));
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-glow);
}

.summary__eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.summary__title {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
}

.summary__list {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.summary__list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.summary__list dt {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.summary__list dd {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e2e8f0;
  text-align: right;
  word-break: break-word;
}

.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-gold);
}

.summary__total span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.summary__total strong {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-soft);
}

.summary__note {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.summary .btn {
  margin-top: 1.35rem;
}

.summary__pulse {
  animation: pricePulse 0.6s var(--ease);
}

@keyframes pricePulse {
  0% {
    transform: scale(0.94);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---------------------------- Footer ---------------------------- */
.footer {
  border-top: 1px solid var(--line);
  background: rgba(7, 11, 18, 0.9);
  padding-block: 3.5rem 1.75rem;
}

.footer__inner {
  display: grid;
  gap: 2.5rem;
}

.footer__desc {
  margin-top: 1rem;
  max-width: 22rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.footer__col h2 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.footer__col ul {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.footer__col li {
  font-size: 0.88rem;
  color: var(--text-soft);
}

.footer__col a {
  transition: color 0.25s var(--ease);
}

.footer__col a:hover {
  color: var(--gold);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--text-dim);
}

.footer__legal {
  color: rgba(201, 168, 106, 0.7);
}

/* ------------------------- Animación reveal ------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------- Breakpoints --------------------------- */
@media (min-width: 640px) {
  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form__row .field:only-child {
    grid-column: 1 / -1;
  }

  .pricing__strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .nav {
    display: flex;
  }

  .header__cta {
    display: inline-flex;
  }

  .header__phone {
    display: inline-flex;
  }

  .menu-toggle {
    display: none;
  }

  .benefits__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .section__head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }

  .vehicle {
    grid-template-columns: 1.05fr 1fr;
    gap: 2.5rem;
  }

  .pricing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .step {
    padding: 0;
  }

  .step:not(:last-child) {
    position: relative;
  }
}

@media (min-width: 1024px) {
  .hero__layout {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
  }

  .hero {
    padding-top: calc(var(--header-h) + 4rem);
    padding-bottom: 5rem;
  }

  .booking {
    grid-template-columns: 1.35fr 0.9fr;
    gap: 2rem;
  }

  .booking__aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

/* -------------------------- Reduced motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------- Print --------------------------- */
@media print {
  .header,
  .mobile-menu,
  .footer,
  .hero__card,
  .quickcard__head {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ============================================================
   Tarjetas de aeropuertos (reemplaza la antigua sección tarifas)
   ============================================================ */

.airports {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.airport {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.4rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(15, 20, 29, 0.7);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
    background-color 0.35s var(--ease);
}

.airport:hover {
  transform: translateY(-3px);
  border-color: var(--line-gold);
  background: rgba(20, 26, 37, 0.85);
}

.airport__head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.airport__code {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 3.1rem;
  height: 3.1rem;
  padding-inline: 0.4rem;
  border-radius: 12px;
  border: 1px solid var(--line-gold);
  background: rgba(201, 168, 106, 0.08);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.airport__name {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.airport__full {
  margin-top: 0.25rem;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-dim);
}

.airport__city {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.notice--center {
  justify-content: center;
}

.notice--center p {
  max-width: 52rem;
}

.services {
  margin-bottom: 0;
}

/* Ajustes del resumen: la cotización se muestra como texto, no como cifra */
.summary__total strong {
  font-size: 1.35rem;
}

@media (min-width: 560px) {
  .airports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .airports {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* ==========================================================================
   Página de ruta: traslado-santa-fe-ezeiza.html
   Componentes propios de la landing por ruta. No modifica nada existente.
   ========================================================================== */

/* ------------------------- Enlaces en texto ------------------------- */
.link-gold {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 106, 0.42);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}

.link-gold:hover {
  color: var(--gold-soft);
  text-decoration-color: currentColor;
}

/* -------------------------- Migas de pan -------------------------- */
.breadcrumb {
  margin-bottom: 1.5rem;
  font-size: 0.76rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-dim);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  opacity: 0.5;
}

.breadcrumb a {
  color: var(--text-soft);
  transition: color 0.25s var(--ease);
}

.breadcrumb a:hover {
  color: var(--gold);
}

.breadcrumb [aria-current="page"] {
  color: var(--gold);
  font-weight: 600;
}

/* ----------------------- Tabla de tiempos ----------------------- */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(15, 20, 29, 0.7);
  box-shadow: var(--shadow-card);
}

.table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table caption {
  padding: 1.15rem 1.35rem 0.35rem;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.table thead th {
  padding: 0.85rem 1.35rem;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-gold);
}

.table tbody th,
.table tbody td {
  padding: 0.95rem 1.35rem;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--line);
}

.table tbody th {
  font-weight: 500;
  color: var(--text-soft);
}

.table tbody th strong {
  font-weight: 700;
  color: #fff;
}

.table tbody td {
  color: var(--text-soft);
  white-space: nowrap;
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* ---------------------- Preguntas frecuentes ---------------------- */
.faq {
  display: grid;
  gap: 1rem;
}

.faq__item {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(15, 20, 29, 0.7);
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
}

.faq__item h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

.faq__item p {
  margin-top: 0.65rem;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.faq__item p strong {
  color: #e2e8f0;
}

/* ------------------------- Panel de reserva ------------------------- */
.cta-panel {
  max-width: 34rem;
  margin-inline: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-gold);
  background: linear-gradient(165deg, rgba(20, 26, 37, 0.95), rgba(10, 14, 22, 0.98));
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.cta-panel .form__note {
  margin-top: 1rem;
  text-align: center;
}

@media (min-width: 768px) {
  .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* ------------------ Enlace a la guía de cada ruta ------------------
   Se usa en las tarjetas de aeropuertos de index.html para llevar a la
   landing de ruta correspondiente sin cambiar el diseño de la tarjeta. */
.airport__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}

.airport__link svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.airport__link:hover {
  color: var(--gold-soft);
}

/* ==================================================================
   Flechas "business class" — trazo fino y despegue en hover
   Un único SVG (viewBox 24: línea 5→19 + chevron 12 5 19 12 12 19,
   trazo de 1.5 px con remates redondeados) para:
     · las 6 tarjetas de aeropuerto de index.html,
     · los botones de acción de todo el sitio,
     · las landings de ruta.
   El tamaño se define por contexto: la flecha de la tarjeta manda
   (1.25rem) y en los botones hereda 1.05em del botón.
   ================================================================== */
.airport-arrow {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Ojo: el color de reposo NO se fija acá. Si se fijara, la flecha de
     los botones dorados perdería el color oscuro del botón. El color en
     reposo se declara solo en el contexto de la tarjeta (más abajo). */
  transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
  will-change: transform;
}

/* Empuja el enlace al pie de la tarjeta: así las seis flechas quedan
   alineadas aunque el nombre del aeropuerto ocupe dos líneas. */
.airport__link {
  margin-top: auto;
  gap: 0.45rem;
}

.airport__city {
  margin-top: 0;
}

.airport__link .airport-arrow {
  color: rgba(255, 255, 255, 0.45);
}

/* Cuando el usuario pasa el cursor por la tarjeta —o enfoca el enlace con
   el teclado— la flecha toma el dorado de la marca y se desplaza 5 px en
   diagonal hacia arriba y la derecha, simulando un despegue. */
.airport:hover .airport-arrow,
.airport__link:hover .airport-arrow,
.airport__link:focus-visible .airport-arrow {
  color: #dfb15b;
  transform: translate(5px, -5px);
  filter: drop-shadow(0 0 4px rgba(223, 177, 91, 0.5));
}

/* Botones: misma flecha fina, con un despegue más corto para no romper
   la silueta del pill ni chocar con el borde. */
.btn .airport-arrow {
  width: 1.05em;
  height: 1.05em;
  transition: transform 0.3s ease;
}

.btn:hover .airport-arrow,
.btn:focus-visible .airport-arrow {
  transform: translate(3px, -3px);
}

@media (prefers-reduced-motion: reduce) {
  .airport-arrow {
    transition: color 0.2s linear;
  }

  .airport:hover .airport-arrow,
  .airport__link:hover .airport-arrow,
  .airport__link:focus-visible .airport-arrow,
  .btn:hover .airport-arrow,
  .btn:focus-visible .airport-arrow {
    transform: none;
  }
}