/* =============================================================================
   LISTADO DE GUÍAS — /invertir-en-miami/ (+ /en/invest-in-miami/, /pt/investir-em-miami/)
   Figma "PFS | Entregas" (QP8dpaPwOHvXXXj8b6LV36), sección 2319:7065
   "Listado de guías": escritorio 1360 y móvil 390. Rediseño completo, 25-sep-2026.

   Medido con el visor embed a zoom 100% y DPR 2 (2 px de render por px de
   diseño): /nodes daba 429 con Retry-After de ~66 h. Los tamaños de letra salen
   de la altura de mayúscula ÷ 0,70 (capHeight 700/1000 de Host Grotesk).
   Colores muestreados en píxel: todos son tokens h26 que ya existen.

   Las tres páginas son HTML escrito a mano (ningún generador las reescribe:
   ver _generator-lib.js, INVPATH). Este fichero es SÓLO de estas tres páginas;
   todo va bajo .gl-page para no tocar nada más del sitio.
   ========================================================================== */

.gl-page{
  font-family:'Host Grotesk','Montserrat','Helvetica Neue',Arial,sans-serif;
  background:var(--h26-page,#f8fafc);
  color:var(--h26-navy,#072031);
}
.gl-page input,.gl-page button{ font-family:inherit; }
.gl-page .gl-wrap{ width:min(1280px, calc(100% - 80px)); margin-inline:auto; }
.gl-only-m{ display:none; }

/* ---------------------------------------------------------------- CABECERA
   El archivo monta la barra h26 TRANSPARENTE sobre la foto del hero en
   escritorio (como el home) y sobre banda opaca en móvil (como el buscador). */
.gl-page .h26-nav.gl-nav{ position:absolute; top:0; left:0; right:0; z-index:6; background:transparent; }
/* La barra en ESCRITORIO (≥901): una sola fila en todos los anchos, alineada
   a la misma columna de 1280 que el contenido de la página, con los enlaces
   CENTRADOS de verdad. Rejilla de 3 columnas — [logo | enlaces | acciones] —
   con las laterales a 1fr, así el bloque central queda en el centro exacto
   aunque logo (79) y acciones (~345) midan distinto; con space-between o con
   logo/acciones a flex:1 los enlaces caían 135 px a la izquierda del centro.
   minmax(max-content,1fr): si en un ancho estrecho las acciones no caben en
   su mitad, la columna crece en vez de montarse sobre los enlaces.
   Sustituye aquí la regla común de 901-1359 que partía la barra en 2-3 filas
   (styles.css: .h26-nav{height:auto;flex-wrap:wrap}). Sólo en esta página. */
@media (min-width: 1360px){
  .gl-page .h26-nav.gl-nav{
    display:grid; grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);
    align-items:center; column-gap:24px; row-gap:0; flex-wrap:nowrap;
    height:75px; padding:0 max(40px, calc((100% - 1280px) / 2));
  }
  /* grid-column + order EXPLÍCITOS: la regla común de 901-1359 reordena los
     hijos con `order`, y `order` también manda dentro de una rejilla (medido:
     sin esto los iconos caían a la izquierda de los enlaces a 1280). */
  .gl-page .h26-nav.gl-nav > .h26-nav__logo{ grid-column:1; order:0; justify-self:start; flex:none; width:79px; margin:0; }
  .gl-page .h26-nav.gl-nav > .h26-nav__links{ grid-column:2; order:0; justify-self:center; flex-wrap:nowrap; white-space:nowrap; width:auto; flex-basis:auto; margin:0; gap:18px; }
  .gl-page .h26-nav.gl-nav > .h26-nav__acts{ grid-column:3; order:0; justify-self:end; flex:none; width:auto; margin:0; gap:16px; }
  /* Para que los enlaces queden en el centro EXACTO dentro de 1280, cada
     lateral tiene que caber en (1280 − enlaces − 2×24) / 2 ≈ 322: enlaces a
     gap 18 (≈588) y acciones a gap 16 / iconos a 10 (≈323). */
  .gl-page .h26-nav.gl-nav .h26-nav__util{ gap:10px; }
  .gl-page .h26-nav.gl-nav .h26-nav__cta{ white-space:nowrap; }
  /* Iconos: el archivo los dibuja algo mayores y de trazo más grueso
     (corazón 14x12, chevrones de USD/ES más marcados) que la barra común. */
  .gl-page .h26-nav.gl-nav .h26-nav__util .h26-ico-heart{ width:15px; height:13px; }
  .gl-page .h26-nav.gl-nav .h26-nav__util .h26-ico-chev{ width:10px; height:5px; }
  .gl-page .h26-nav.gl-nav .h26-nav__util svg{ stroke-width:2; }
}
/* PT: "Pré-lançamentos" y "Falar com consultor" hacen la fila ~70 px más
   ancha que en ES; se aprietan huecos para seguir centrados (±12 px). */
@media (min-width: 1360px){
  html[lang="pt"] .gl-page .h26-nav.gl-nav{ column-gap:16px; }
  html[lang="pt"] .gl-page .h26-nav.gl-nav > .h26-nav__links{ gap:12px; }
  html[lang="pt"] .gl-page .h26-nav.gl-nav .h26-nav__util{ gap:8px; }
  html[lang="pt"] .gl-page .h26-nav.gl-nav > .h26-nav__acts{ gap:12px; }
}
/* Escritorios de 901 a 1359: los 7 enlaces + iconos + CTA necesitan ~1.358 px
   para ir en una fila CENTRADA dentro de la columna de contenido; por debajo
   o se montaban, o se partían en filas, o caían hasta 86 px fuera del centro
   (medido a 920-1280). Aquí la barra pasa a la versión compacta que el sitio
   ya usa en móvil —logo · CTA · cuenta · hamburguesa— con el cajón de
   navegación, que funciona a cualquier ancho (su CSS no está dentro de un
   @media y script.js no mira el ancho). Márgenes = los del contenido (40). */
@media (min-width: 901px) and (max-width: 1359px){
  .gl-page .h26-nav.gl-nav{
    display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center;
    height:75px; padding:0 40px; gap:0;
  }
  .gl-page .h26-nav.gl-nav > .h26-nav__logo{ flex:none; width:79px; order:0; }
  .gl-page .h26-nav.gl-nav > .h26-nav__links,
  .gl-page .h26-nav.gl-nav .h26-nav__util{ display:none; }
  .gl-page .h26-nav.gl-nav > .h26-nav__acts{ flex:none; width:auto; order:0; gap:16px; }
  .gl-page .h26-nav.gl-nav .h26-nav__cta{ white-space:nowrap; }
  .gl-page .h26-nav.gl-nav .h26-nav__acc{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:#fff; }
  .gl-page .h26-nav.gl-nav .h26-nav__acc svg{ width:24px; height:24px; }
  .gl-page .h26-nav.gl-nav .h26-burger{ display:flex; }
}

/* -------------------------------------------------------------------- HERO
   460 alto. Foto: assets/zona-aventura.jpg (la del archivo: se leen los
   rótulos "AVENTURA MALL" y "CMA"), centrada. Velo navy #031420 ajustado por
   mínimos cuadrados contra el render: 0,41 arriba → 0,93 abajo. */
.gl-hero{ position:relative; min-height:460px; display:flex; align-items:flex-end; color:#fff; isolation:isolate; }
.gl-hero__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--h26-deep,#031420); }
.gl-hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; }
.gl-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,20,32,.62) 0%, rgba(3,20,32,.58) 12%, rgba(3,20,32,.66) 22%, rgba(3,20,32,.76) 50%, rgba(3,20,32,.85) 75%, rgba(3,20,32,.94) 100%);
}
.gl-hero__in{ padding:120px 0 56px; }
.gl-crumb{ display:none; }
.gl-eyebrow{
  margin:0 0 10px; color:var(--h26-gold,#e5c179);
  font-size:13px; font-weight:600; line-height:16px; letter-spacing:.08em; text-transform:uppercase;
}
.gl-hero h1{ margin:0; color:#fff; font-size:48px; font-weight:700; line-height:56px; letter-spacing:-.96px; }
.gl-hero__sub{ margin:11px 0 0; max-width:680px; color:var(--h26-mist,#d1d8e5); font-size:16px; line-height:24px; font-weight:400; }

/* ----------------------------------------------------- PIEZAS COMPARTIDAS */
.gl-tag{
  display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:4px;
  background:var(--ivory,#f2f2f2); color:var(--h26-navy,#072031);
  font-size:11px; font-weight:600; line-height:1; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.gl-tag--gold{ background:var(--h26-gold,#e5c179); }
.gl-kicker{ margin:0; color:var(--h26-gold,#e5c179); font-size:11px; font-weight:600; line-height:14px; letter-spacing:.08em; text-transform:uppercase; }
.gl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 20px; border:0; border-radius:6px; box-sizing:border-box;
  background:var(--h26-blue,#3b82f6); color:#fff !important; text-decoration:none; cursor:pointer;
  font-size:14px; font-weight:600; line-height:18px; white-space:nowrap;
}
.gl-btn:hover{ background:var(--h26-blue-ink,#2f6fd0); }
.gl-btn--block{ display:flex; width:100%; }
.gl-more{ display:inline-flex; align-items:center; gap:8px; color:var(--h26-navy,#072031); font-size:14px; font-weight:600; line-height:18px; }
.gl-more svg{ width:10px; height:10px; flex:none; }
.gl-h2{ margin:0; color:var(--h26-navy,#072031); font-size:32px; font-weight:600; line-height:40px; letter-spacing:-.64px; }
.gl-sub{ margin:4px 0 0; color:var(--h26-navy,#072031); font-size:16px; line-height:24px; }

/* ------------------------------------------ DESTACADA + RECURSO EXCLUSIVO
   Fila a 48 del hero: tarjeta 895 (foto 440 + cuerpo) y tarjeta navy 360. */
.gl-top{ padding-top:48px; }
.gl-top__row{ display:grid; grid-template-columns:minmax(0,895fr) minmax(0,360fr); gap:25px; }
.gl-top__row > *{ min-width:0; }
.gl-feat{
  display:grid; grid-template-columns:440px minmax(0,1fr); min-height:371px;
  background:#fff; border:1px solid var(--h26-mist,#d1d8e5); border-radius:12px; overflow:hidden;
}
.gl-feat__img{ position:relative; display:block; overflow:hidden; }
.gl-feat__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gl-feat__body{ padding:32px; display:flex; flex-direction:column; align-items:flex-start; }
.gl-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.gl-feat__t{ margin:12px 0 0; font-size:32px; font-weight:600; line-height:40px; letter-spacing:-.64px; }
.gl-feat__t a{ color:inherit; text-decoration:none; }
.gl-feat__x{ margin:12px 0 0; color:var(--h26-grey,#565656); font-size:16px; line-height:24px; }
.gl-feat__meta{ margin:12px 0 0; display:flex; gap:10px; color:#64748b; font-size:13px; font-weight:500; line-height:18px; }
.gl-feat .gl-btn{ margin-top:24px; }

.gl-res{
  display:flex; flex-direction:column; padding:28px; border-radius:12px; box-sizing:border-box;
  background:var(--h26-navy,#072031); color:#fff;
}
.gl-res__t{ margin:12px 0 0; color:#fff; font-size:26px; font-weight:600; line-height:32px; letter-spacing:-.26px; }
.gl-res__x{ margin:14px 0 0; color:var(--h26-mist,#d1d8e5); font-size:15px; line-height:22px; }
.gl-res .gl-btn{ margin-top:auto; }
.gl-res__x + .gl-btn{ margin-top:auto; }

/* ------------------------------------------------------------ TODAS LAS GUÍAS */
.gl-all{ padding:48px 0 64px; }
.gl-all__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.gl-search{ position:relative; flex:0 0 320px; }
.gl-search svg{ position:absolute; left:16px; top:50%; width:12px; height:12px; transform:translateY(-50%); color:#64748b; pointer-events:none; }
.gl-search input{
  width:100%; height:44px; box-sizing:border-box; padding:0 14px 0 32px;
  border:1px solid var(--h26-mist,#d1d8e5); border-radius:6px; background:#fff;
  color:var(--h26-navy,#072031); font-size:14px; line-height:18px; outline:none;
}
.gl-search input::placeholder{ color:#64748b; opacity:1; }
.gl-search input:focus{ border-color:var(--h26-navy,#072031); }
.gl-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none; }
.gl-pill{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; box-sizing:border-box;
  border:1px solid var(--h26-mist,#d1d8e5); border-radius:6px; background:#fff;
  color:var(--h26-navy,#072031); font-size:14px; font-weight:500; line-height:18px; white-space:nowrap; cursor:pointer;
}
.gl-pill span{ color:#64748b; font-size:11px; font-weight:500; }
.gl-pill:hover{ background:var(--ivory,#f2f2f2); }
.gl-pill[aria-pressed="true"]{ background:var(--h26-navy,#072031); border-color:var(--h26-navy,#072031); color:#fff; }
.gl-pill[aria-pressed="true"] span{ color:rgba(255,255,255,.85); }

/* La rejilla. En "Todas" el archivo dibuja dos filas de anchos distintos:
   3 × 410 arriba y 392 / 392 / 447 abajo (la navy es más ancha). Con un
   filtro o una búsqueda activa pasa a 3 columnas iguales. */
.gl-grid{ display:flex; flex-wrap:wrap; gap:24px; margin-top:24px; }
.gl-grid > *{ flex:0 0 calc((100% - 48px) / 3); min-width:0; }
.gl-grid:not(.is-filtered) > .gl-card--r2{ flex-basis:calc((100% - 48px) * 392 / 1231); }
.gl-grid:not(.is-filtered) > .gl-cta{ flex-basis:calc((100% - 48px) * 447 / 1231); }
.gl-grid:not(.is-filtered) > .gl-card--x{ display:none; }
.gl-grid [hidden]{ display:none !important; }

.gl-card{
  display:flex; flex-direction:column; box-sizing:border-box;
  background:#fff; border:1px solid var(--h26-mist,#d1d8e5); border-radius:12px; overflow:hidden;
  color:var(--h26-navy,#072031); text-decoration:none;
}
.gl-card__img{ position:relative; flex:none; height:200px; overflow:hidden; background:var(--ivory,#f2f2f2); }
.gl-card__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.gl-card:hover .gl-card__img img{ transform:scale(1.03); }
.gl-card__body{ flex:1; display:flex; flex-direction:column; align-items:flex-start; padding:20px 20px 10px; }
.gl-card__t{ margin:12px 0 0; font-size:18px; font-weight:600; line-height:26px; letter-spacing:-.18px; }
.gl-card__x{
  margin:11px 0 0; color:var(--h26-grey,#565656); font-size:13px; line-height:20px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.gl-card .gl-more{ margin-top:auto; padding-top:20px; min-height:18.6px; }

.gl-cta{
  display:flex; flex-direction:column; padding:28px; box-sizing:border-box; min-height:425px;
  background:var(--h26-navy,#072031); border-radius:12px; color:#fff;
}
.gl-cta__t{ margin:12px 0 0; color:#fff; font-size:24px; font-weight:600; line-height:32px; letter-spacing:-.24px; }
.gl-cta__x{ margin:12px 0 0; color:var(--h26-mist,#d1d8e5); font-size:14px; line-height:22px; }
.gl-cta .gl-btn{ margin-top:auto; }

/* ------------------------------------------------------------ GUÍAS POR PAÍS */
.gl-pais{ background:#fff; padding:64px 0; }
.gl-pais .gl-eyebrow{ margin-bottom:8px; }
.gl-pais__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.gl-tabs{ display:flex; gap:8px; flex:none; }
.gl-tabs .gl-pill{ padding:0 14px; }
.gl-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:25px; margin-top:24px; }
.gl-row[hidden]{ display:none; }
.gl-row .gl-card{ min-height:425px; }

/* ------------------------------------------- ARTÍCULO (resumen + desplegable) */
.gl-art__card{ padding:32px; background:#fff; border:1px solid var(--h26-mist,#d1d8e5); border-radius:12px; }
.gl-art__t{ margin:0; font-size:24px; font-weight:600; line-height:32px; letter-spacing:-.24px; }
.gl-art__x{ margin:8px 0 0; color:var(--h26-grey,#565656); font-size:14px; line-height:22px; }
.gl-art__more{ margin-top:8px; padding:0; border:0; background:none; cursor:pointer; }
.gl-art__more svg{ width:9px; height:6px; transition:transform .15s ease; }
.gl-art__more[aria-expanded="true"] svg{ transform:rotate(180deg); }
.gl-art__body{ margin-top:24px; padding-top:24px; border-top:1px solid var(--h26-mist,#d1d8e5); font-size:16px; line-height:1.7; color:#1f2d3a; }
.gl-art__body h2{ font-size:24px; line-height:32px; margin:32px 0 12px; color:var(--h26-navy,#072031); }
.gl-art__body h3{ font-size:19px; line-height:26px; margin:24px 0 8px; color:var(--h26-navy,#072031); }
.gl-art__body a{ color:var(--h26-blue-ink,#2f6fd0); }

/* ----------------------------------------------------------- CIERRE (2 tarjetas) */
.gl-end{ padding:62px 0 64px; }
.gl-end__row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px; margin-top:52px; }
.gl-photo{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:330px;
  padding:37px 24px 26px; box-sizing:border-box; overflow:hidden; isolation:isolate;
  background:var(--h26-deep,#031420); color:#fff; text-decoration:none;
}
.gl-photo img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.gl-photo::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(3,20,32,.55) 0%, rgba(3,20,32,.25) 60%, rgba(3,20,32,.10) 100%), linear-gradient(0deg, rgba(3,20,32,.55) 0%, rgba(3,20,32,0) 45%); }
.gl-photo .gl-kicker{ letter-spacing:.3em; }
.gl-photo__t{ margin:14px 0 0; max-width:340px; color:#fff; font-size:40px; font-weight:700; line-height:47px; letter-spacing:-.8px; }
.gl-photo .gl-more{ color:#fff; }
.gl-photo .gl-more svg{ width:16px; }
.gl-proj{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  min-height:330px; padding:48px 60px; box-sizing:border-box;
  background:var(--h26-deep,#031420); color:#f8fafc;
}
/* 32, no 40: la mayúscula medida (27,5) incluía el "¿", que cuelga bajo la
   línea base. El ancho del texto en el archivo (454) cuadra con 32. */
.gl-proj__t{ margin:0; color:#f8fafc; font-size:32px; font-weight:600; line-height:40px; letter-spacing:-.64px; }
.gl-proj__x{ margin:12px 0 0; max-width:440px; color:#f8fafc; font-size:24px; line-height:32px; font-weight:400; }
.gl-proj .gl-btn{ margin-top:28px; height:58px; padding:0 28px; border-radius:4px; font-size:20px; line-height:24px; }

/* ================================================================== MÓVIL
   Marco "Listado de guías · Móvil" (390). Medianil 16, todo en una columna;
   las píldoras y las tarjetas por país se desplazan en horizontal. */
@media (max-width: 900px){
  .gl-only-d{ display:none; }
  .gl-only-m{ display:initial; }
  .gl-page .gl-wrap{ width:calc(100% - 32px); }
  .gl-page .h26-nav.gl-nav{ position:relative; background:var(--h26-deep,#031420); }

  .gl-hero{ min-height:360px; }
  .gl-hero__in{ padding:40px 0 36px; }
  .gl-crumb{ display:flex; gap:10px; margin:0 0 12px; font-size:14px; line-height:18px; color:var(--h26-mist,#d1d8e5); }
  .gl-crumb a{ color:inherit; text-decoration:none; }
  .gl-eyebrow{ font-size:12px; margin-bottom:10px; }
  .gl-hero h1{ font-size:36px; line-height:42px; letter-spacing:-.72px; }
  .gl-hero__sub{ margin-top:12px; font-size:16px; line-height:22px; }

  .gl-top{ padding-top:24px; }
  .gl-top__row{ grid-template-columns:1fr; gap:14px; }
  .gl-feat{ grid-template-columns:1fr; min-height:0; }
  .gl-feat__img{ height:200px; }
  .gl-feat__body{ padding:20px; }
  .gl-feat__t{ font-size:26px; line-height:30px; letter-spacing:-.52px; }
  .gl-feat .gl-btn{ width:100%; margin-top:20px; }
  .gl-res{ padding:20px; }
  .gl-res__t{ font-size:24px; line-height:32px; }
  .gl-res__x{ font-size:14px; line-height:22px; }
  .gl-res .gl-btn{ margin-top:20px; }

  .gl-all{ padding:36px 0 48px; }
  .gl-all__head{ display:block; }
  .gl-h2{ font-size:28px; line-height:34px; letter-spacing:-.56px; }
  .gl-sub{ font-size:14px; line-height:22px; }
  .gl-search{ margin-top:14px; }
  .gl-pills{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-16px; padding-right:16px; }
  .gl-pills::-webkit-scrollbar{ display:none; }
  .gl-grid{ gap:16px; margin-top:16px; }
  .gl-grid > *, .gl-grid:not(.is-filtered) > .gl-card--r2, .gl-grid:not(.is-filtered) > .gl-cta{ flex-basis:100%; }
  .gl-cta{ min-height:0; padding:28px; }
  .gl-cta .gl-btn{ margin-top:28px; }

  .gl-pais{ padding:40px 0; }
  .gl-pais__head{ display:block; }
  .gl-tabs{ margin-top:20px; flex-wrap:wrap; }
  .gl-row{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin-right:-16px; padding-right:16px; scrollbar-width:none; }
  .gl-row::-webkit-scrollbar{ display:none; }
  .gl-row[hidden]{ display:none; }
  .gl-row .gl-card{ flex:0 0 290px; min-height:450px; scroll-snap-align:start; }

  .gl-art{ padding-top:40px; }
  .gl-art__card{ padding:20px; }
  .gl-art__t{ font-size:20px; line-height:32px; }

  .gl-end{ padding:48px 0 48px; }
  .gl-end .gl-h2{ font-size:22px; line-height:30px; letter-spacing:-.22px; }
  .gl-end__row{ grid-template-columns:1fr; gap:24px; margin-top:24px; }
  .gl-photo{ min-height:168px; padding:24px; }
  .gl-photo__t{ margin-top:8px; font-size:24px; line-height:32px; letter-spacing:-.24px; }
  .gl-photo .gl-more{ color:var(--h26-gold,#e5c179); margin-top:12px; }
  .gl-proj{ min-height:0; padding:24px 20px; }
  .gl-proj__t{ font-size:20px; line-height:28px; letter-spacing:-.2px; }
  .gl-proj__x{ font-size:14px; line-height:20px; }
  .gl-proj .gl-btn{ margin-top:16px; height:43px; padding:0 12px; font-size:14px; line-height:18px; }
}