/*
 * Estilo de la landing del Home, replicado desde findair.net (BeTheme +
 * Customizer). Valores reales extraídos de wp-custom-css del sitio de
 * producción: fondo azul marino, tipografía Georama, botones con borde
 * degradado. Scoped a .landing-container para no afectar el resto del
 * sitio (que usa el tema/tipografía por defecto de WordPress).
 *
 * Georama-Medium.ttf y Georama-Regular.ttf comparten el mismo nombre de
 * familia interno ("Georama", confirmado con fc-scan) -- declararlas como
 * dos @font-face con alias distintos ('Georama-Medium'/'Georama-Regular')
 * puede confundir la resolución de fuente en algunos navegadores. Se
 * declaran como UNA sola familia 'Georama' con dos pesos, el patrón CSS
 * estándar para variantes de una misma tipografía.
 */
@font-face {
  font-family: 'Georama';
  src: url(../fonts/georama/Georama-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Georama';
  src: url(../fonts/georama/Georama-Medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/*
 * Fondo de ancho completo separado del contenido centrado: html/body
 * pintan todo el viewport, .landing-container solo limita el ANCHO del
 * contenido (max-width: 1080px) -- si el color solo viviera en
 * .landing-container, cualquier pantalla más ancha que 1080px deja el
 * fondo blanco de body visible a los lados (las "líneas verticales
 * blancas" reportadas).
 */
html,
body {
  background-color: #00217b;
  margin: 0;
}
.landing-container {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding: 36px;
  box-sizing: border-box;
}
.landing-container h1,
.landing-container h2,
.landing-container h3,
.landing-container strong {
  color: #ffffff;
  font-family: 'Georama', sans-serif;
  font-weight: 500;
  margin: 0 0 24px;
  line-height: 1.2;
}
/*
 * Tamaños calibrados por medición real de píxeles contra findair.net (misma
 * ventana 1440px): se midió la cap-height de la "F"/"S" inicial de h1, h2 y
 * h3 en ambas capturas. Resultado: los tres headings del original miden
 * ~60-62px de cap-height PRÁCTICAMENTE IGUAL entre sí -- no es una escala
 * descendente h1>h2>h3, es un tamaño de display uniforme (~86px de
 * font-size) para todos los headings de la landing.
 */
.landing-container h1 { font-size: 86px; }
.landing-container h2 { font-size: 86px; }
.landing-container h3 { font-size: 86px; }
/*
 * TODOS los párrafos de la landing (hero incluido) usan el mismo tamaño
 * grande: 48px, valor real de producción confirmado directamente (el CSS
 * original de findair.net en el Customizer de BeTheme usa 48px para el
 * texto de cuerpo de la landing).
 */
.landing-container p {
  color: #ffffff;
  font-family: 'Georama', sans-serif;
  font-weight: 400;
  line-height: 1.3;
  font-size: 48px;
  margin: 0 0 24px;
}
.landing-container img { max-width: 100%; height: auto; display: block; }
.landing-container .rounded-border img,
.landing-container img.rounded-border { border-radius: 8px; }

/*
 * flags.png (9561x1561, panorámica 6:1) y cerchio-blu.png (2897x2352,
 * ilustración con texto en anillo) son archivos fuente en resolución muy
 * alta -- sin un límite propio se muestran a todo el ancho del
 * contenedor (hasta ~1000px), mucho más grande de lo que pide el diseño
 * y con el detalle del texto de cerchio-blu percibiéndose recortado.
 */
.landing-container img.landing-flags-icon { max-width: 235px; margin-left: auto; margin-right: auto; }
.landing-container img.landing-cerchio-icon { max-width: 870px; margin-left: auto; margin-right: auto; }
.landing-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px;
  margin-top: 36px;
}
.landing-row > * { flex: 1 1 320px; }
.landing-row.reverse { flex-direction: row-reverse; }
.landing-container img.landing-logo { width: 395px; max-width: 60%; flex-shrink: 0; }
.landing-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
/*
 * El hero inicial (Found it!) NO es de dos columnas 50/50 como el resto de
 * filas: en el original el texto ocupa el ancho del contenedor arriba, y la
 * imagen mockup+mascota va debajo mucho más grande, desbordando hacia la
 * derecha más allá de los 1080px del contenedor (llega hasta el borde del
 * viewport). Confirmado por medición de píxeles: a 1680px de ventana el
 * bloque imagen mide ~775px de ancho real contra los ~500px que daría un
 * 50/50 dentro del contenedor.
 */
.landing-hero-text { max-width: 800px; }
.landing-hero-image {
  margin-top: 36px;
  display: flex;
  justify-content: flex-end;
  margin-right: -13vw;
}
.landing-container .landing-hero-image img { max-width: none; width: 46vw; min-width: 320px; }
@media (max-width: 960px) {
  .landing-hero-image { margin-right: 0; justify-content: center; }
  .landing-container .landing-hero-image img { width: 100%; max-width: 500px; }
}
.landing-container a.landing-button {
  display: inline-block;
  position: relative;
  background-color: transparent;
  color: #ffffff;
  font-family: 'Georama', sans-serif;
  font-weight: 500;
  font-size: 32px;
  text-decoration: none;
  padding: 14px 36px;
  border-radius: 18px;
}
.landing-container a.landing-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 3px;
  background: linear-gradient(to right, #f7a600, #009fe3);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.landing-container a.landing-button.alt::before {
  background: linear-gradient(to right, #f6e513, #ae3480);
}
.landing-bottom-buttons {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.landing-footer {
  text-align: center;
  font-size: 24px;
  color: #ffffff;
  font-family: 'Georama', sans-serif;
  font-weight: 400;
  margin-top: 60px;
}
.landing-footer h3 { font-size: 49px; font-weight: 700; margin-bottom: 12px; }
.landing-footer .powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
@media (max-width: 960px) {
  .landing-container h1,
  .landing-container h2,
  .landing-container h3 { font-size: 56px; }
  .landing-container p { font-size: 32px; }
  .landing-container a.landing-button { font-size: 22px; }
  .landing-container img.landing-logo { width: 300px; }
}
@media (max-width: 600px) {
  .landing-container { padding: 18px; }
  .landing-container h1,
  .landing-container h2,
  .landing-container h3 { font-size: 36px; }
  .landing-container p { font-size: 22px; }
  .landing-container a.landing-button { font-size: 18px; padding: 10px 24px; }
  .landing-hero-top { flex-direction: column; text-align: center; }
  .landing-container img.landing-logo { width: 200px; }
}