/* Mari Chei — banner con identidad y lienzo menos blanco (2026-06).
 * Da al hero el mismo aire que el resto de la web (degradado navy→azul→coral
 * sobre foto en transparencia, como .home-inspiration-banner) y un tono suave
 * al lienzo para que las tarjetas blancas "floten" en vez de un muro blanco.
 * Se carga DESPUÉS de contrast.css (para ganar a su regla del aside). */

/* Banner principal: degradado de marca sobre foto del PROCESO DE ORIENTACIÓN
   (planificar la ruta: manos, portátil y notas). El degradado es más suave a la
   derecha para que la foto se vea, y oscuro a la izquierda para que el texto se
   lea. Foto Unsplash (permitida por CSP). */
.marichei-ai-hero {
  background:
    linear-gradient(105deg, rgba(13, 20, 40, 0.93) 0%, rgba(18, 59, 105, 0.72) 46%, rgba(236, 63, 104, 0.4) 100%),
    url("/assets/photos/1454165804606-c3d57bc86b40.webp");
  background-size: cover;
  background-position: center right;
  border: 0;
  border-radius: 22px;
  padding: 34px 36px;
  color: #fff;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.2);
}

/* Texto del banner en blanco (incluido el eyebrow y el aside) */
.marichei-ai-hero h1,
.marichei-ai-hero h2,
.marichei-ai-hero p,
.marichei-ai-hero strong,
.marichei-ai-hero small,
.marichei-ai-hero .eyebrow,
.marichei-ai-hero aside,
.marichei-ai-hero aside * { color: #fff !important; }

/* Gana a contrast.css (.marichei-ai-hero aside small => coral) por orden + especificidad */
.marichei-ai-hero aside small { color: #fff !important; }

/* Botones/chips del banner: un poco más separados (estaban muy juntos) */
.marichei-ai-hero-points {
  gap: 12px !important;
  margin-bottom: 6px !important;
}

/* Tarjeta "Mi Ruta" del banner: cristal OSCURO y más sólido (antes demasiado
   transparente). El fondo oscuro hace resaltar el texto blanco. */
.marichei-ai-hero aside {
  background: rgba(15, 23, 44, 0.46) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
/* CTA del aside: botón blanco sólido legible */
.marichei-ai-hero aside a {
  background: #fff !important;
  color: #101828 !important;
}

/* Pasos de la entrevista: la rejilla daba 4 columnas estrechas (~108px) y las
   palabras largas ("comprobaciones", "condiciones") se salían del cuadro.
   Pasan a 2×2 (≈225px cada uno) con altura automática: el texto cabe siempre. */
.marichei-ai-interview-map ol {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}
.marichei-ai-interview-map ol li {
  height: auto !important;
  min-height: 64px !important;
}

/* Lienzo menos blanco: leve brillo coral arriba + base gris-azulada suave.
   Las tarjetas internas siguen blancas y se leen como tarjetas "flotando". */
.marichei-ai-workspace {
  background:
    radial-gradient(1100px 380px at 82% -6%, rgba(236, 63, 104, 0.07), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #eef2f8 0%, #f4f6fb 100%);
}