/* =====================================================================
   MyTaxiB2B — web publica
   ---------------------------------------------------------------------
   Reescritura completa del CSS de la home.

   Lo anterior era un tema verde azulado con anchos fijos: en movil la
   pagina desbordaba a lo ancho, el menu no colapsaba (los cinco enlaces
   se salian de la pantalla), las cuatro columnas de servicios seguian
   siendo cuatro a 390 px y el pie se quedaba sin estilos, con los
   enlaces en el azul por defecto del navegador.

   Ahora: movil primero, rejillas que se recolocan solas, tipografia
   fluida y una paleta de noche con el verde de la marca. Todos los
   recursos son propios — el CSP del sitio bloquea cualquier CDN.
   ===================================================================== */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Noche. El fondo no es negro puro: un negro azulado tiene mas
     profundidad bajo la foto del hero y no aplasta las sombras. */
  --ink-900: #070b16;
  --ink-800: #0c1322;
  --ink-700: #131c31;
  --ink-600: #1d2942;
  --ink-500: #2c3b5c;

  /* Claro, en marfil templado: el blanco puro junto al azul noche
     produce un contraste que cansa a media pagina. */
  --paper:   #ffffff;
  --ivory:   #f8f7f4;
  --line:    #e7e4de;
  --line-dark: rgba(255, 255, 255, .12);

  --text:       #10141f;
  --text-soft:  #56607a;
  --text-dim:   #8b93a7;
  --on-dark:       #ffffff;
  --on-dark-soft:  rgba(255, 255, 255, .72);
  --on-dark-dim:   rgba(255, 255, 255, .52);

  /* Rojo de la marca, el mismo `--logo-red` de los paneles: la web
     publica y el producto eran de dos colores distintos. */
  --brand:       #1de159;
  --brand-soft:  #6df09a;
  --brand-deep:  #0a7a30;
  /* El texto que va encima de un relleno de marca. El verde es demasiado
     luminoso para llevar blanco: en blanco daria 1,8:1. */
  --brand-ink:   #04210f;
  --blue:        #2563eb;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(7, 11, 22, .05);
  --shadow:    0 12px 30px -12px rgba(7, 11, 22, .18);
  --shadow-lg: 0 40px 80px -32px rgba(7, 11, 22, .45);

  --wrap: 1200px;
  --header-h: 68px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* `clip` y no `hidden`: hidden convierte al elemento en un contenedor de
     scroll y rompe la cabecera pegajosa; clip solo recorta. Hace falta
     porque el cajon del menu, cerrado, esta aparcado a la derecha fuera de
     la pantalla y sin esto la pagina se puede arrastrar de lado. */
  overflow-x: clip;
}

body {
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--paper);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--brand); color: var(--brand-ink); }

:focus-visible {
  outline: 2px solid var(--brand-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: .7rem 1.2rem;
  background: var(--ink-900);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------- tipografia */
h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }

/* El acento en cursiva es lo unico que no es Space Grotesk. Se usa con
   cuentagotas: dos o tres palabras por pagina, no titulares enteros. */
.serif {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.01em;
}

.eyebrow {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Sobre fondo claro va el verde oscuro; el de marca solo sobre noche. */
  color: var(--brand-deep);
}
.eyebrow--dark { color: var(--brand-soft); }

.section {
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
.section--ivory { background: var(--ivory); }
.section--dark  { background: var(--ink-900); color: var(--on-dark); }

.section__head { max-width: 680px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title {
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.1rem);
  margin-block: .55rem .9rem;
}
.section__text {
  font-size: clamp(1rem, .96rem + .2vw, 1.12rem);
  color: var(--text-soft);
}
.section--dark .section__text { color: var(--on-dark-soft); }

/* ------------------------------------------------------------ botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--brand) 0%, #16c94e 100%);
  color: var(--brand-ink);
  box-shadow: 0 10px 24px -10px rgba(29, 225, 89, .8);
}
.btn--primary:hover { box-shadow: 0 16px 32px -12px rgba(29, 225, 89, .95); }

.btn--light { background: #fff; color: var(--ink-900); box-shadow: var(--shadow); }

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, .06);
}
.btn--ghost:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12); }

.btn--sm { padding: .58rem 1.1rem; font-size: .88rem; }
.btn--lg { padding: 1rem 1.9rem; font-size: 1rem; }

/* ------------------------------------------------------------- topbar */
.topbar {
  background: var(--ink-900);
  color: var(--on-dark-dim);
  font-size: .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 36px;
}
.topbar__claim {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__tel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--on-dark-soft);
  font-weight: 500;
  transition: color .2s var(--ease);
}
.topbar__tel svg { width: 15px; height: 15px; }
.topbar__tel:hover { color: #fff; }

@media (max-width: 560px) {
  /* En movil solo cabe una cosa, y el telefono vale mas que el claim. */
  .topbar__claim { display: none; }
  .topbar__in { justify-content: center; }
}

/* ----------------------------------------------------------- cabecera */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
}

/* Transparente sobre el hero oscuro; de cristal en cuanto se hace scroll,
   porque mas abajo las secciones son claras y no se leeria nada.
   ---------------------------------------------------------------------
   El cristal va en un pseudoelemento y no en la cabecera a proposito: un
   elemento con `backdrop-filter` pasa a ser el bloque contenedor de sus
   hijos `position: fixed`, y eso dejaba el cajon del menu movil atrapado
   dentro de la franja de 68 px de la cabecera en lugar de ocupar la
   pantalla. Costo un rato encontrarlo. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7, 11, 22, .88);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -30px rgba(0, 0, 0, .9);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.site-header.is-scrolled::before { opacity: 1; }

.header__in {
  position: relative; /* por encima del cristal */
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--header-h);
}

.brand { flex: none; }
.brand img {
  width: auto;
  height: clamp(28px, 4.4vw, 36px);
}

.header__right {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: auto;
}

/* ---------------------------------------------------------- navegacion */
.nav__list { display: flex; align-items: center; gap: .35rem; }

.nav__link {
  position: relative;
  display: block;
  padding: .55rem .85rem;
  border-radius: var(--radius-pill);
  font-size: .93rem;
  font-weight: 500;
  color: var(--on-dark-soft);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: #fff; background: rgba(255, 255, 255, .1); }

.nav__toggle, .nav__close { display: none; color: #fff; padding: .4rem; }
.nav__toggle svg, .nav__close svg { width: 26px; height: 26px; }
.nav__cta { display: none; }

@media (min-width: 981px) {
  .nav { margin-left: auto; }
}

@media (max-width: 980px) {
  /* Cajon lateral. Antes no habia ninguno: los enlaces seguian en linea
     y se salian por la derecha de la pantalla. */
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 88vw);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 5.5rem 1.6rem 2rem;
    background: var(--ink-800);
    border-left: 1px solid var(--line-dark);
    box-shadow: var(--shadow-lg);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .35s var(--ease), visibility .35s;
    overflow-y: auto;
  }
  .nav.is-open { transform: none; visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav__link { padding: .95rem 1rem; font-size: 1.05rem; border-radius: var(--radius-sm); }

  .nav__close { display: block; position: absolute; top: 1.4rem; right: 1.4rem; }
  .nav__toggle { display: block; }
  .nav__cta { display: inline-flex; margin-top: 1.2rem; }
  .header__cta { display: none; }

  /* Velo: sin el, el contenido de detras sigue clicable y el cajon parece
     pegado encima de la pagina. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(7, 11, 22, .6);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  body.nav-abierto { overflow: hidden; }
}

/* ------------------------------------------------------------- idioma */
.lang { position: relative; }
.lang__current {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .7rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.lang__current:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); }
.lang__current img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.lang__current svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.lang.is-open .lang__current svg { transform: rotate(180deg); }

.lang__list {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  padding: .4rem;
  background: var(--ink-800);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.lang.is-open .lang__list { opacity: 1; visibility: visible; transform: none; }

.lang__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border-radius: 8px;
  font-size: .88rem;
  color: var(--on-dark-soft);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.lang__item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.lang__item.is-active { color: #fff; font-weight: 600; }
.lang__item img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

/* --------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  /* Se resta la cabecera pegajosa para que el hero llene la pantalla sin
     empujar el resto fuera. `svh` evita el salto de la barra del navegador
     movil al hacer scroll. */
  min-height: min(92svh, 860px);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  display: flex;
  align-items: center;
  background: var(--ink-900);
  color: var(--on-dark);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* La foto original es muy clara: sin bajarla, el texto blanco encima no
     se leia. Este era el defecto mas visible de la home anterior. */
  filter: saturate(.82) brightness(.74) contrast(1.05);
  transform: scale(1.02);
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 11, 22, .88) 0%, rgba(7, 11, 22, .38) 45%, rgba(7, 11, 22, .82) 100%),
    linear-gradient(100deg, rgba(7, 11, 22, .92) 0%, rgba(7, 11, 22, .45) 58%, rgba(7, 11, 22, .12) 100%);
}

/* Resplandor de marca: da color a la esquina sin teñir la foto entera. */
.hero__glow {
  position: absolute;
  z-index: -1;
  width: min(620px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 225, 89, .34) 0%, transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}
.hero__glow--1 { top: -18%; right: -12%; }
.hero__glow--2 { bottom: -28%; left: -16%; background: radial-gradient(circle, rgba(37, 99, 235, .3) 0%, transparent 68%); }

.hero__in {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
  width: 100%;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem .45rem .7rem;
  margin-bottom: 1.4rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(8px);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}
.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .22);
  animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .22); }
  50%      { box-shadow: 0 0 0 8px rgba(52, 211, 153, .05); }
}

.hero__title {
  font-size: clamp(2.5rem, 1.4rem + 5.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 600;
}
.hero__title .serif {
  display: block;
  font-size: 1.02em;
  background: linear-gradient(100deg, #fff 10%, var(--brand-soft) 60%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__text {
  max-width: 46ch;
  margin-top: 1.5rem;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  color: var(--on-dark-soft);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2.2rem;
}

/* Tres cifras bajo los botones. Sustituyen a la tarjeta flotante anterior,
   que en movil se montaba encima del titulo. */
.hero__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 5vw, 3rem);
  margin-top: 2.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero__cifra strong {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}
.hero__cifra span {
  font-size: .82rem;
  color: var(--on-dark-dim);
  letter-spacing: .04em;
}

/* En movil estrecho las tres cifras se partian 2 + 1, con el 24/7 solo en
   una segunda linea. Con la etiqueta un punto mas pequena caben las tres. */
@media (max-width: 480px) {
  .hero__cifras { gap: 1.1rem; }
  .hero__cifra span { font-size: .72rem; letter-spacing: .02em; }
}

/* Tarjeta de cristal del lado derecho: las tres promesas de servicio. */
.hero__card {
  display: none;
  padding: 1.9rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 100%);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}
.hero__card-title {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-soft);
  margin-bottom: 1.4rem;
}
.hero__punto {
  display: flex;
  gap: .9rem;
  padding-block: .95rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero__punto:first-of-type { border-top: 0; padding-top: 0; }
.hero__punto svg {
  width: 22px;
  height: 22px;
  flex: none;
  stroke: var(--brand-soft);
  stroke-width: 1.6;
  fill: none;
}
.hero__punto strong { display: block; font-size: .95rem; font-weight: 600; }
.hero__punto span { font-size: .85rem; color: var(--on-dark-dim); line-height: 1.5; }

@media (min-width: 1040px) {
  .hero__in { grid-template-columns: 1.15fr .85fr; }
  .hero__card { display: block; }
}

/* --------------------------------------------------------- servicios */
.rejilla {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  /* `auto-fit` con minimo: cuatro columnas en escritorio, dos en tablet y
     una en movil, sin escribir un breakpoint para cada caso. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.tarjeta {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tarjeta::after {
  /* Filo de color que aparece al pasar por encima. */
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.tarjeta:hover::after { transform: scaleX(1); }

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.3rem;
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(29, 225, 89, .12), rgba(37, 99, 235, .1));
  color: var(--brand);
}
.tarjeta__icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.tarjeta h3 { font-size: 1.12rem; margin-bottom: .6rem; }
.tarjeta p { font-size: .93rem; color: var(--text-soft); }

/* ---------------------------------------------------------- clientes */
.clientes { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: var(--ivory); border-block: 1px solid var(--line); }
.clientes__titulo {
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.8rem;
}
.clientes__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}
.clientes__logos img {
  height: clamp(26px, 4vw, 38px);
  width: auto;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.clientes__logos img:hover { filter: none; opacity: 1; }

/* -------------------------------------------------------------- banda */
.banda {
  padding-block: clamp(2.2rem, 5vw, 3rem);
  background: linear-gradient(120deg, #16c94e 0%, var(--brand) 55%, #3aeb75 100%);
  color: var(--ink-900);
  text-align: center;
}
.banda strong {
  display: block;
  font-size: clamp(1.05rem, .95rem + .8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.01em;
  max-width: 40ch;
  margin-inline: auto;
}
.banda span { display: block; margin-top: .5rem; font-size: .95rem; color: rgba(7, 11, 22, .72); }

.banda--oscura {
  position: relative;
  isolation: isolate;
  background: var(--ink-900);
  overflow: hidden;
}
.banda--oscura::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/img/banda.webp') center/cover;
  filter: brightness(.34) saturate(.55);
}
/* La foto tiene un coche blanco justo en el centro y las cifras se le
   montaban encima. Una segunda capa de tinte deja el texto siempre por
   delante sin tener que oscurecer la foto hasta hacerla desaparecer. */
.banda--oscura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at center, rgba(7, 11, 22, .82) 0%, rgba(7, 11, 22, .55) 60%, rgba(7, 11, 22, .8) 100%);
}
.banda--oscura strong { max-width: 52ch; font-weight: 500; }

/* -------------------------------------------------------- por que MTG */
.porque__in {
  display: grid;
  gap: clamp(2.2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .porque__in { grid-template-columns: .85fr 1.15fr; } }

.chips {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.chip {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .04);
  font-size: .92rem;
  font-weight: 500;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.chip:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .3); transform: translateX(4px); }
.chip svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--brand-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------- pasos */
/* Los pasos son cinco, y con `auto-fit` caian cuatro arriba y uno suelto
   debajo. Las columnas se declaran a mano para que las filas queden
   completas: 1, 2, 3 y por fin los cinco en linea. */
.pasos {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  counter-reset: paso;
}
@media (min-width: 560px)  { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.paso { position: relative; }
.paso__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brand), #16c94e);
  color: var(--brand-ink);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 8px 20px -8px rgba(29, 225, 89, .55);
}
/* La linea que une los pasos: solo cuando estan los cinco en fila, porque
   apilados la linea horizontal no une nada. */
@media (min-width: 1180px) {
  .paso:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 56px;
    right: -1.2rem;
    height: 1px;
    background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
  }
  .section--dark .paso:not(:last-child)::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, .22) 0%, transparent 100%);
  }
}
.paso h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.paso p { font-size: .9rem; color: var(--text-soft); }
.section--dark .paso p { color: var(--on-dark-dim); }
.paso a { color: var(--brand-deep); font-weight: 600; }
.section--dark .paso a { color: var(--brand-soft); }
.paso a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- cifras */
/* Cuatro cifras: o dos y dos, o las cuatro en linea. Con `auto-fit` salian
   tres arriba y una sola debajo en tableta. */
.cifras {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}
@media (min-width: 960px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cifra strong {
  display: block;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(160deg, #fff 30%, rgba(255, 255, 255, .55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cifra span {
  display: block;
  margin-top: .7rem;
  font-size: .88rem;
  letter-spacing: .05em;
  color: var(--on-dark-dim);
}

/* ------------------------------------------------------------- cierre */
.cierre {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  background: var(--ink-900);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.cierre::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 120vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 225, 89, .28) 0%, transparent 62%);
}
.cierre__title {
  font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.2rem);
  margin-block: .6rem 1rem;
}
.cierre__text {
  max-width: 54ch;
  margin-inline: auto;
  color: var(--on-dark-soft);
}
.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  margin-top: 2.2rem;
}

/* ---------------------------------------------------------------- pie */
.footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--ink-800);
  color: var(--on-dark-soft);
  font-size: .92rem;
  border-top: 1px solid var(--line-dark);
}
.footer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.footer__brand { grid-column: span 1; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer__logo { height: 38px; width: auto; margin-bottom: 1.1rem; }
.footer__desc { max-width: 34ch; color: var(--on-dark-dim); font-size: .9rem; }

.footer__title {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
}
.footer__list { display: grid; gap: .6rem; }
/* Los enlaces del pie salian en el azul por defecto del navegador porque
   nunca se les dio color. */
.footer__list a { color: var(--on-dark-soft); transition: color .2s var(--ease); }
.footer__list a:hover { color: #fff; }
.footer__muted, .footer__muted li { color: var(--on-dark-dim); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-dark);
  font-size: .85rem;
  color: var(--on-dark-dim);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__legal a { transition: color .2s var(--ease); }
.footer__legal a:hover { color: #fff; }

/* ------------------------------------------------------- paginas legales */
.legal-hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--ink-900);
  color: var(--on-dark);
}
.legal-hero h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  margin: .6rem 0 .8rem;
}
.legal-hero p {
  max-width: 62ch;
  color: var(--on-dark-soft);
}
.legal-fecha {
  margin-top: 1.2rem;
  font-size: .84rem;
  color: var(--on-dark-dim);
}

/* Columna de lectura estrecha a proposito: un texto legal a todo lo ancho
   de una pantalla de 1440 px no lo lee nadie. */
.legal {
  max-width: 78ch;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 7vw, 5rem);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-soft);
}
.legal h2 {
  margin: 2.6rem 0 .9rem;
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  color: var(--text);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  margin: 1.8rem 0 .7rem;
  font-size: 1.02rem;
  color: var(--text);
}
.legal p { margin-bottom: 1rem; }
.legal ul {
  margin: 0 0 1.3rem;
  padding-left: 1.1rem;
  list-style: disc;
}
.legal li { margin-bottom: .55rem; }
.legal a { color: var(--brand-deep); font-weight: 500; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--text); font-weight: 600; }
.legal code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .88em;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .05em .35em;
}

.legal-datos,
.legal-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.6rem;
  font-size: .95rem;
}
.legal-datos th,
.legal-tabla th,
.legal-datos td,
.legal-tabla td {
  text-align: left;
  vertical-align: top;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
}
.legal-tabla thead th,
.legal-datos th {
  background: var(--ivory);
  color: var(--text);
  font-weight: 600;
}
.legal-datos th { width: 34%; }

/* Las tablas no se encogen hasta ser ilegibles: ruedan dentro de su caja. */
@media (max-width: 620px) {
  .legal-tabla { display: block; overflow-x: auto; white-space: nowrap; }
  .legal-datos th { width: 40%; }
}

.legal-nota {
  font-size: .88rem;
  color: var(--text-dim);
  border-left: 2px solid var(--line);
  padding-left: .9rem;
}

/* Dato del titular que aun no se ha rellenado. Chilla a proposito: publicar
   un aviso legal con el CIF a medias es peor que no publicarlo. */
.legal-pendiente {
  display: inline-block;
  padding: .1em .5em;
  border-radius: 5px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .04em;
}

.legal-aviso {
  margin-bottom: 2.4rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-sm);
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  font-size: .93rem;
  line-height: 1.6;
}
.legal-aviso strong { color: inherit; }

/* ------------------------------------------------- formularios publicos */
.form-pagina {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .form-pagina { grid-template-columns: minmax(0, 1.6fr) minmax(260px, .9fr); }
}

.form-rejilla {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.form-campo { display: block; }
/* El mensaje y las notas ocupan la fila entera: un textarea de 240 px de
   ancho invita a escribir tres palabras. */
.form-campo--ancho { grid-column: 1 / -1; }

.form-etiqueta {
  display: block;
  margin-bottom: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
}
.form-etiqueta em {
  font-style: normal;
  color: var(--brand);
  margin-left: .15rem;
}

.form-campo input,
.form-campo select,
.form-campo textarea {
  display: block;
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: inherit;
  font-size: .98rem;
  color: var(--text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-campo textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

/* Prefijo y número en la misma casilla de la rejilla. */
.form-telefono {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: .5rem;
}
.form-telefono select { padding-right: .4rem; text-overflow: ellipsis; }

.form-campo input:focus,
.form-campo select:focus,
.form-campo textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 225, 89, .13);
}

.form-campo.tiene-error input,
.form-campo.tiene-error select,
.form-campo.tiene-error textarea { border-color: #dc2626; }

/* Los aeropuertos, puertos y estaciones del pais elegido. Pueden ser muchos
   —Espana tiene mas de 40— asi que la lista tiene su propio scroll en lugar
   de empujar el boton de enviar fuera de la pantalla. */
.form-parents__lista {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  padding: .5rem;
}
.form-parents__opcion {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .5rem;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  cursor: pointer;
}
.form-parents__opcion:hover { background: rgba(0, 0, 0, .04); }
/* Ancho automatico: sin esto hereda el width:100% de arriba y la casilla
   se estira hasta ocupar la fila entera. */
.form-parents__opcion input { width: auto; display: inline-block; padding: 0; }

.form-pista {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--text-dim);
}
.form-error {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: #b91c1c;
}
.form-error--suelto { margin: -.6rem 0 .6rem; }

/* El cebo no se pinta ni se tabula, pero sigue en el DOM: un `display:none`
   lo delataria a cualquier robot que mire el estilo. */
.form-cebo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-consentimiento {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: 1.6rem 0 1.4rem;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.form-consentimiento input { margin-top: .25rem; flex: none; }
.form-consentimiento a { color: var(--brand-deep); font-weight: 600; }
.form-consentimiento a:hover { text-decoration: underline; }
.form-consentimiento.tiene-error { color: #b91c1c; }

.form-enviar { width: 100%; }
@media (min-width: 560px) { .form-enviar { width: auto; min-width: 240px; } }

.form-aviso {
  margin-bottom: 1.6rem;
  padding: .95rem 1.2rem;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  color: #991b1b;
  font-size: .92rem;
}

.form-gracias {
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ivory);
  text-align: center;
}
.form-gracias__icono {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
}
.form-gracias__icono svg { width: 28px; height: 28px; }
.form-gracias h2 { font-size: 1.4rem; margin-bottom: .6rem; }
.form-gracias p { color: var(--text-soft); max-width: 44ch; margin: 0 auto 1.6rem; }

.form-lateral { display: grid; gap: 1rem; }

.form-tarjeta {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ivory);
}
.form-tarjeta h2 { font-size: 1rem; margin-bottom: .8rem; }
.form-tarjeta ul { display: grid; gap: .7rem; }
.form-tarjeta li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.form-tarjeta li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
.form-tarjeta p { font-size: .92rem; margin: 0; }
.form-tarjeta a { color: var(--brand-deep); font-weight: 600; }
.form-tarjeta a:hover { text-decoration: underline; }

.form-tarjeta--contacto p a { font-size: 1.15rem; }
.form-tarjeta--nota { background: var(--paper); }

/* ----------------------------------------------------- aviso de cookies */
.cookies {
  position: fixed;
  z-index: 250;
  left: clamp(.8rem, 3vw, 1.5rem);
  right: clamp(.8rem, 3vw, 1.5rem);
  bottom: clamp(.8rem, 3vw, 1.5rem);
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(12, 19, 34, .96);
  backdrop-filter: blur(10px);
  color: var(--on-dark-soft);
  box-shadow: var(--shadow-lg);
  animation: cookies-entra .35s var(--ease) both;
}
@keyframes cookies-entra {
  from { opacity: 0; transform: translateY(14px); }
}

.cookies--fuera {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.cookies__texto strong {
  display: block;
  color: #fff;
  font-size: .95rem;
  margin-bottom: .2rem;
}
.cookies__texto p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.55;
}
.cookies__texto a { color: #fff; text-decoration: underline; }

.cookies__botones { flex: none; }
.cookies__ok {
  background: #fff;
  color: var(--ink-900);
}

/* ------------------------------------------------ WhatsApp flotante */
.wa-flotante {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .4);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.wa-flotante:hover {
  transform: scale(1.07);
  box-shadow: 0 12px 26px rgba(37, 211, 102, .5);
}

@media (max-width: 620px) {
  .cookies {
    flex-direction: column;
    align-items: stretch;
    gap: .9rem;
  }
  .cookies__ok { width: 100%; }
}

/* ------------------------------------------------------------ entrada */
/* Aparicion al entrar en pantalla. Empieza visible: si el JavaScript no
   llega a ejecutarse, el contenido se ve igual en lugar de quedarse en
   blanco para siempre. */
.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* Un bloque por pais elegido en el alta de proveedor (revision del 29/09:
   puede trabajar en varios). La cruz quita el pais y sus aeropuertos. */
.form-parents__pais {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .5rem .6rem .6rem;
  margin: 0 0 .6rem;
}
.form-parents__pais legend {
  font-weight: 600;
  font-size: .9rem;
  padding: 0 .35rem;
}
.form-parents__quitar {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .25rem;
  color: #6b7280;
}
.form-parents__quitar:hover { color: #dc2626; }