/* landing -- pieza publica de marca (DESIGN.md > Landing publica). Mosaico editorial de bloques de color pleno. Solo tokens. */
body { background: var(--color-surface); }
.l-barra { display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-sm) var(--spacing-lg); background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.l-barra__logo { width: 345px; max-width: 345px; height: auto; display: block; } /* 345 px de archivo = ~300 px visibles */
.l-barra__programa { height: 40px; width: auto; display: block; }
.l-barra__fin { margin-left: auto; }
.l-interno { max-width: 1120px; margin: 0 auto; padding: 0 var(--spacing-lg); }

/* Hero en mosaico */
.l-hero { display: grid; grid-template-columns: 2fr 1fr; }
.l-hero__texto { background: var(--color-ja-navy); color: var(--color-surface); padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl) max(var(--spacing-2xl), calc((100vw - 1120px) / 2 + var(--spacing-lg))); display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-md); }
.l-hero__texto .eyebrow { color: var(--color-ja-yellow); margin: 0; }
/* Titulo por la escala (DESIGN.md, Landing): display 48px desde 900px, headline-lg 36px de 400 a 899px, headline-md 28px
   por debajo. break-word es la red: el titulo es contenido editable y una palabra larga no desplaza la pagina. */
.l-hero h1 { color: var(--color-surface); font-size: 48px; line-height: 1.05; margin: 0; overflow-wrap: break-word; }
.l-hero__bajada, .l-hero__bajada p { color: var(--color-ja-ice); font-size: 20px; line-height: 1.5; max-width: 44ch; margin: 0; }
.l-hero__cta { margin-top: var(--spacing-sm); }
.l-mosaico { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
.l-celda { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--spacing-md); color: var(--color-ja-navy); min-width: 0; }
.l-celda--yellow { background: var(--color-ja-yellow); }
.l-celda--pale { background: var(--color-ja-pale-blue); }
.l-celda--ice { background: var(--color-ja-ice); }
.l-celda--teal { background: var(--color-ja-teal); }
.l-celda--aqua { background: var(--color-ja-aqua); }
.l-celda--surface { background: var(--color-surface); align-items: center; justify-content: center; }
.l-celda--surface img { width: 78%; height: auto; }
.l-cifra { font: 800 44px/1 var(--font-display); margin: 0 0 var(--spacing-xs); }
.l-cifra__txt { font-size: 16px; line-height: 1.3; margin: 0; font-weight: 600; }

/* Botones: el primario sobre navy es amarillo (button-primary-on-dark) */
.btn--sobre-oscuro { background: var(--color-ja-yellow); color: var(--color-ja-navy); }
.btn--sobre-oscuro:hover { background: var(--color-surface); color: var(--color-ja-navy); }
.sobre-oscuro :focus-visible, .l-cierre :focus-visible, .l-hero__texto :focus-visible { outline-color: var(--color-surface); }

/* Secciones */
.l-seccion { padding: var(--spacing-3xl) 0; }
.l-seccion--ice { background: var(--color-ja-ice); color: var(--color-ja-navy); }
.l-seccion h2 { font-size: 32px; margin-bottom: var(--spacing-md); }
.l-seccion p { max-width: 70ch; font-size: 18px; line-height: 1.6; }
.l-titulo-filete { border-left: 1px solid var(--color-ja-navy); padding-left: var(--spacing-md); }
.l-seccion .eyebrow { margin-bottom: var(--spacing-sm); }
.l-seccion .gap { max-width: 70ch; font-size: 14px; }

.l-pasos { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--spacing-xl); }
.l-paso { padding: var(--spacing-xl); min-width: 0; }
.l-paso--navy { background: var(--color-ja-navy); color: var(--color-surface); }
.l-paso--cerulean { background: var(--color-ja-cerulean); color: var(--color-surface); }
.l-paso--yellow { background: var(--color-ja-yellow); color: var(--color-ja-navy); }
.l-paso h3 { font-size: 24px; color: inherit; margin-bottom: var(--spacing-sm); }
.l-paso p { color: inherit; font-size: 16px; margin: 0 0 var(--spacing-md); }
.l-paso__n { font: 800 14px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 var(--spacing-sm); }
.l-paso--navy .l-paso__n, .l-paso--cerulean .l-paso__n { color: var(--color-ja-yellow); }
.l-paso__cuando { font-weight: 700; margin: 0; }
.l-lista { padding-left: 1.2em; font-size: 20px; line-height: 1.6; max-width: 60ch; }
.l-lista li { margin-bottom: var(--spacing-sm); }

.l-aliados { border-top: 1px solid var(--color-line); }
.l-aliados__fila { display: flex; flex-wrap: wrap; gap: var(--spacing-xl); align-items: flex-start; margin-top: var(--spacing-lg); }
.l-aliado { min-width: 200px; }
.l-aliado__rotulo { font: 700 14px/1.3 var(--font-display); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 var(--spacing-sm); }
.l-aliado__nombre { font: 700 20px/1.3 var(--font-display); margin: 0; }
.l-aliado img { width: 345px; max-width: 100%; height: auto; display: block; }

.l-cierre { background: var(--color-ja-navy); color: var(--color-surface); padding: var(--spacing-3xl) 0; }
.l-cierre h2 { color: var(--color-surface); font-size: 36px; }
.l-cierre p { color: var(--color-surface); font-size: 18px; max-width: 60ch; }
.l-cierre .gap { background: var(--color-ja-navy); border-left-color: var(--color-ja-yellow); color: var(--color-ja-ice); }
.l-cierre .gap strong { color: var(--color-ja-yellow); }


@media (max-width: 899px) {
  .l-barra { flex-wrap: wrap; }
  .l-hero { grid-template-columns: minmax(0, 1fr); }
  .l-hero__texto { min-width: 0; }
  .l-cifra__txt { overflow-wrap: anywhere; }
  .l-hero__texto { padding: var(--spacing-xl) var(--spacing-lg); }
  .l-hero h1 { font-size: 36px; }
  .l-mosaico { grid-template-columns: repeat(3, 1fr); }
  .l-celda { aspect-ratio: 1; padding: var(--spacing-sm); }
  .l-cifra { font-size: 32px; }
  .l-cifra__txt { font-size: 14px; }
  .l-pasos { grid-template-columns: 1fr; }
}
@media (max-width: 399px) { .l-hero h1 { font-size: 28px; } }
/* Logo: la misma regla que .topbar__logo (DESIGN.md, Layout > Logo). Ancho de imagen = el menor entre 345px y el ancho
   util de la barra; se achica entero, sin deformar, y nunca usa el padding de la barra. */
@media (max-width: 899px) { .l-barra__logo { flex: 0 1 345px; min-width: 0; max-width: 100%; } }

/* sin atributos style en el HTML (CSP): espaciados de seccion como clases */
.l-seccion--sin-pie { padding-bottom: 0; }
.l-interno--arriba { padding-top: var(--spacing-md); }