/*
 * Landing de viajes corporativos · portal.seemexico.com
 *
 * UN SOLO TEMA, CLARO, a propósito: es la cara de la marca. La banda azul
 * noche del portal y el pie son parte del diseño, no un modo oscuro.
 *
 * Mismas tipografías y colores que el portal de clientes (IBM Plex y la paleta
 * de tokens.css de allá): la página y el producto que enseña tienen que
 * sentirse de la misma familia.
 *
 * Sin estilos en línea en el HTML: la política de seguridad de vercel.json
 * solo admite hojas de este mismo sitio y la de Google Fonts.
 */
:root {
  --noche: #0f1730;
  --tinta: #111832;
  --texto: #4a5170;
  --suave: #6a728f;
  --gris: #f3f4f8;
  --blanco: #ffffff;
  --acento: #2f55d4;
  --acento-encima: #2446b8;
  --ciruela: #a5327f;
  --borde: #e3e6ef;
  --borde-campo: #c9cfe0;
  --filete: #d9deea;
  --error: #b42318;
  --texto-noche: #c5cbe3;
  --etiqueta-noche: #b8c0dc;
  --pie-apagado: #8d96b8;
  --pie-enlace: #dfe3f1;
  --filete-noche: #27325a;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ancho: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (max-width: 960px) { html { scroll-padding-top: 64px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-encima); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p, figure { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

h1 {
  font-size: clamp(40px, 6.4vw, 80px);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(32px, 4.3vw, 56px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h3 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); }

.contenedor { width: min(var(--ancho), 100% - 48px); margin-inline: auto; }
.saltar {
  position: absolute; left: 12px; top: -80px; z-index: 20;
  background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.saltar:focus { top: 12px; color: #fff; }

.etiqueta {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--texto);
}
.entrada { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: var(--texto); }
.nota { font-size: 14px; color: var(--suave); }

/* ---- Botones ---- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 28px; border-radius: 999px;
  font: 600 17px/1.2 var(--sans); border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.boton-principal { background: var(--acento); color: #fff; }
.boton-principal:hover { background: var(--acento-encima); color: #fff; }
.boton-principal:disabled { opacity: .7; cursor: progress; }
.boton-secundario { background: #fff; color: var(--tinta); border-color: var(--borde-campo); }
.boton-secundario:hover { border-color: var(--tinta); color: var(--tinta); }
.boton-chico { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.boton-ancho { width: 100%; }
@media (prefers-reduced-motion: reduce) { .boton { transition: none; } }

/* ---- Barra ---- */
.barra {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
}
.barra-dentro { height: 76px; display: flex; align-items: center; gap: 40px; }
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--tinta); font-weight: 600; font-size: 18px; letter-spacing: -0.01em;
}
.marca:hover { color: var(--tinta); }
.simbolo { width: 46px; height: 22px; flex: none; }
.nav-escritorio { display: flex; gap: 28px; font-size: 15px; }
.nav-escritorio a, .enlace-whatsapp { color: var(--texto); }
.nav-escritorio a:hover, .enlace-whatsapp:hover { color: var(--tinta); }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 15px; }
.boton-menu {
  display: none; width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: var(--tinta); cursor: pointer;
  align-items: center; justify-content: center;
}
.solo-movil { display: none; }
.menu-movil { border-top: 1px solid var(--borde); background: #fff; padding: 4px 24px 12px; }
.menu-movil a { display: block; padding: 13px 0; font-size: 17px; color: var(--tinta); border-bottom: 1px solid var(--borde); }
.menu-movil a:last-child { border-bottom: 0; }
@media (min-width: 961px) { .menu-movil { display: none; } }
@media (max-width: 960px) {
  .nav-escritorio, .enlace-whatsapp { display: none; }
  .boton-menu { display: inline-flex; }
  .barra-dentro { height: 64px; gap: 12px; }
  .barra-acciones { gap: 4px; }
}
@media (max-width: 520px) {
  .solo-escritorio { display: none; }
  .solo-movil { display: inline; }
  .marca { font-size: 17px; }
  .simbolo { width: 40px; height: 19px; }
}

/* ---- Portada ---- */
.portada { padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 8vw, 104px); text-align: center; }
.portada-texto { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.portada-texto .entrada { max-width: 760px; }
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
.dispositivos-marco { margin-top: clamp(36px, 5vw, 56px); display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* Las proporciones salen del diseño a 1200 px: laptop de 980×610 y teléfono de 250×500. */
.dispositivos { position: relative; width: 100%; aspect-ratio: 1200 / 640; }
.laptop {
  position: absolute; left: 3.33%; top: 0; width: 81.67%; height: 95.3%;
  background: var(--tinta); border-radius: clamp(12px, 1.8vw, 22px); padding: 1.17%;
  box-shadow: 0 40px 80px -40px rgba(17, 24, 50, .45);
}
.laptop img { width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: clamp(6px, .8vw, 10px); }
.telefono {
  position: absolute; right: 1.67%; bottom: 0; width: 20.83%; height: 78.1%;
  background: var(--tinta); border-radius: clamp(18px, 3.2vw, 38px); padding: .83%;
  box-shadow: 0 30px 60px -30px rgba(17, 24, 50, .5);
}
.telefono img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: clamp(14px, 2.6vw, 30px); }
@media (max-width: 720px) {
  .acciones { flex-direction: column; align-self: stretch; }
  .acciones .boton { width: 100%; }
  .dispositivos { aspect-ratio: auto; display: flex; justify-content: center; }
  .laptop { display: none; }
  .telefono { position: relative; right: auto; width: min(279px, 78%); height: auto; aspect-ratio: 279 / 579; padding: 8px; border-radius: 40px; }
  .telefono img { border-radius: 33px; }
}

/* ---- El globo de la portada (globo.js) ----
 *
 * Su centro va en el borde de arriba de la laptop: la mitad de abajo queda
 * detrás del producto, como un horizonte, y la de arriba detrás del titular.
 * Un halo blanco bajo el texto lo mantiene legible: ahí el globo casi
 * desaparece y se nota alrededor. Sin JavaScript no hay globo y la portada
 * queda igual que antes.
 */
.portada { position: relative; overflow: hidden; }
.portada-texto { position: relative; z-index: 1; }
.portada-texto::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: min(820px, 115%); height: 110%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .72), rgba(255, 255, 255, .45) 55%, rgba(255, 255, 255, 0));
}
.dispositivos-marco { position: relative; }
.dispositivos, .dispositivos-marco figcaption { position: relative; z-index: 1; }
.globo {
  /* En celular, más ancho que la pantalla: se sale por los lados y se siente más grande. */
  --d: clamp(420px, 108vw, 1180px);
  position: absolute; left: 50%; top: 0; z-index: 0;
  width: var(--d); height: var(--d);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---- Confianza ---- */
.confianza { background: var(--gris); padding: 56px 0; }
.confianza-frase {
  font-size: 20px; line-height: 1.45; font-weight: 500; letter-spacing: 0;
  text-align: center; color: var(--tinta);
}
.logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 32px; align-items: center; margin-top: 32px; }
.logos li { display: flex; justify-content: center; }
.logos img { width: auto; max-width: 100%; height: 34px; object-fit: contain; }
@media (max-width: 1100px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; } }
@media (max-width: 520px) {
  .confianza { padding: 40px 0; }
  .confianza-frase { font-size: 17px; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .logos img { height: 30px; }
}

/* ---- La banda del portal ---- */
.banda-portal { background: var(--noche); padding: clamp(72px, 9vw, 120px) 0; }
.centrado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.banda-portal h2 { color: #fff; max-width: 940px; }
.banda-portal .entrada { color: var(--texto-noche); max-width: 700px; }
.etiqueta-noche { color: var(--etiqueta-noche); display: inline-flex; align-items: center; gap: 12px; }
.chip { background: var(--ciruela); color: #fff; padding: 5px 10px; border-radius: 6px; font-size: 12px; letter-spacing: 0.12em; }
.captura-ancha { margin-top: clamp(12px, 2vw, 22px); width: 100%; }
.captura-ancha img { width: 100%; border-radius: clamp(10px, 1.5vw, 18px); border: 1px solid var(--filete-noche); }
.captura-ancha figcaption {
  margin-top: 14px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--pie-apagado);
}
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; width: 100%; margin-top: clamp(12px, 2vw, 22px); text-align: left; }
.tres h3 { color: #fff; margin-bottom: 10px; }
.tres p { color: var(--texto-noche); }
@media (max-width: 820px) { .tres { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Secciones ---- */
.seccion { padding: clamp(72px, 9vw, 120px) 0; }
.fondo-gris { background: var(--gris); }
.centrado-texto { text-align: center; margin-inline: auto; max-width: 900px; }

/* ---- Lo que hace el portal: rejilla de tarjetas ---- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 310px; gap: 24px; margin-top: 56px; }
.tarjeta { background: var(--gris); border-radius: 22px; padding: 36px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tarjeta .icono { width: 30px; height: 30px; color: var(--acento); flex: none; }
.tarjeta h3 { margin-top: 8px; }
.tarjeta p { color: var(--texto); }
.tarjeta-a { grid-column: span 2; grid-row: span 2; padding: 40px; }
.tarjeta-a h3 { font-size: 26px; }
.tarjeta-b { grid-row: span 2; }
.recorte { margin-top: auto; flex: none; border-radius: 14px; border: 1px solid #dde1ec; background: #fff; overflow: hidden; }
.recorte img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.recorte-viaje { height: 400px; }
.recorte-viaje img { object-position: center top; }
.recorte-cuenta { height: 380px; }
.tarjeta-oscura { grid-column: span 2; background: var(--tinta); padding: 44px; justify-content: center; }
.tarjeta-oscura .icono { color: #fff; }
.tarjeta-oscura h3 { color: #fff; font-size: 30px; line-height: 1.2; }
.tarjeta-oscura p { color: var(--texto-noche); font-size: 18px; max-width: 620px; }
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .tarjeta-a, .tarjeta-b, .tarjeta-oscura { grid-column: span 2; grid-row: auto; }
  .recorte-viaje { height: 360px; }
  .recorte-cuenta { height: 280px; }
}
/* En el celular no se reduce la captura entera hasta que no se lea: se acerca
   a la parte que cuenta —el viaje abierto, el saldo—, como en la propuesta. */
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .tarjeta, .tarjeta-a, .tarjeta-b, .tarjeta-oscura { grid-column: auto; padding: 24px; }
  .tarjeta-a h3 { font-size: 22px; }
  .tarjeta-oscura h3 { font-size: 26px; }
  .tarjeta-oscura p { font-size: 17px; }
  .recorte { margin-top: 6px; }
  .recorte-viaje { height: 220px; }
  .recorte-viaje img { width: 640px; max-width: none; height: auto; object-fit: fill; margin-top: -44px; }
  .recorte-cuenta { height: 190px; }
  .recorte-cuenta img { width: 540px; max-width: none; height: auto; object-fit: fill; margin: -8px 0 0 -24px; }
}

/* ---- Dos columnas: ejecutivo, reservas, cierre ---- */
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; }
.columna-titulo { display: flex; flex-direction: column; gap: 22px; }
.frase { margin-top: 14px; font-size: 26px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--tinta); }
.puntos li { display: flex; flex-direction: column; gap: 6px; padding: 26px 0; border-top: 1px solid var(--filete); }
.puntos li:first-child { border-top: 0; padding-top: 0; }
.puntos li:last-child { padding-bottom: 0; }
.puntos h3, .datos h3 { font-size: 20px; }
.puntos p, .datos p { color: var(--texto); }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.datos li { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--filete); }
@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr; gap: 40px; }
  .frase { font-size: 22px; }
}
@media (max-width: 640px) { .datos { grid-template-columns: 1fr; gap: 20px; } }

/* ---- Facturación ---- */
.fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; margin-top: 12px; text-align: left; }
.fichas li { background: #fff; border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 8px; }
.fichas h3 { font-size: 21px; }
.fichas p { color: var(--texto); }
@media (max-width: 820px) { .fichas { grid-template-columns: 1fr; gap: 12px; } .fichas li { padding: 24px; } }

/* ---- Cómo empezar ---- */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 56px; }
.pasos li { display: flex; flex-direction: column; gap: 12px; }
.numero {
  width: 44px; height: 44px; border: 1.5px solid var(--acento); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 500 16px var(--mono); color: var(--acento);
}
.pasos h3 { margin-top: 8px; font-size: 23px; }
.pasos p { color: var(--texto); }
@media (max-width: 820px) { .pasos { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; } }

/* ---- Preguntas ---- */
.preguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 72px; margin-top: 56px; }
.preguntas div { display: flex; flex-direction: column; gap: 8px; }
.preguntas dt { font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--tinta); }
.preguntas dd { color: var(--texto); }
@media (max-width: 820px) { .preguntas { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; } }

/* ---- Formulario ---- */
/* La oferta del mes: una línea con peso propio, sin volverse un anuncio. */
.oferta {
  align-self: flex-start; margin-top: 4px; padding: 10px 16px; border-radius: 12px;
  background: #eef2fd; color: var(--tinta); font-weight: 600; font-size: 17px;
}
.alterno { margin-top: 8px; font-size: 17px; color: var(--texto); }
.alterno a { font-weight: 600; }
.formulario { background: var(--gris); border-radius: 24px; padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 500; color: var(--tinta); }
.opcional { color: var(--texto); font-weight: 400; }
.campo input {
  height: 48px; width: 100%; border: 1px solid var(--borde-campo); border-radius: 12px;
  padding: 0 14px; font: 400 16px var(--sans); color: var(--tinta); background: #fff;
}
.campo input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(47, 85, 212, .18); }
.campo input:user-invalid { border-color: var(--error); }
/* La trampa para bots: fuera de la vista y del teclado, pero en el formulario. */
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso-datos { font-size: 13px; color: var(--texto); }
.estado-envio { font-size: 15px; color: var(--texto); }
.estado-envio:empty { display: none; }
.estado-envio.error { color: var(--error); }
.gracias-caja { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.gracias-caja h3 { font-size: 24px; }
.gracias-caja p { color: var(--texto); }
@media (max-width: 640px) { .formulario { padding: 24px; } }

/* ---- Pie ---- */
.pie { background: var(--noche); color: var(--etiqueta-noche); padding: 72px 0 56px; }
.pie-columnas { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 48px; }
.pie-marca p + p { margin-top: 14px; font-size: 15px; line-height: 1.55; }
.marca-pie { color: #fff; font-size: 17px; }
.simbolo-fondo { background: #fff; border-radius: 8px; padding: 6px 7px; display: inline-flex; }
.simbolo-fondo svg { width: 40px; height: 19px; }
.pie-titulo {
  margin-bottom: 14px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--pie-apagado);
}
.pie ul { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.pie a { color: var(--pie-enlace); }
.pie a:hover { color: #fff; }
.pie-legal {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--filete-noche);
  display: flex; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--pie-apagado);
}
@media (max-width: 900px) {
  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .pie-legal { flex-direction: column; gap: 8px; }
}
@media (max-width: 520px) { .pie-columnas { grid-template-columns: 1fr; gap: 32px; } .pie { padding: 56px 0 48px; } }