/* flots · css/paginas/bienvenida.css
   Bienvenida (/bienvenida) — Bienvenida (1440) y MBienvenida (390).
   Desktop: padding 72/96; grilla 1fr + 520 px (gap 96). Columna izquierda: logo arriba, textos al
   medio y CTA abajo (como el justify-content: space-between del diseño); tarjeta blanca a la derecha
   con el alto completo. Tablet (≤1199): una columna. Celular (≤767): MBienvenida. */

/* =========================== Desktop =========================== */
.bienv-marco{
  position:relative;
  width:100%;
  max-width:1440px;
  margin-inline:auto;
}
.bienv-idioma{
  position:absolute;
  top:36px;
  right:72px;
  z-index:5;
}

.bienv{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 520px;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "logo  tarjeta"
    "intro tarjeta"
    "cta   tarjeta";
  column-gap:96px;
  row-gap:40px;
  min-height:calc(100vh - var(--alto-banner));
  padding:72px var(--gutter);
  /* El artboard no fija interlineado: se usa el "normal" de la fuente (como el diseño). */
  line-height:normal;
}
/* Cargando / error / sin proyecto: una sola columna */
.bienv.bienv-simple{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:40px;
  min-height:0;
}

.bienv-logo{
  grid-area:logo;
  justify-self:start;
  align-self:start;
  display:inline-flex;
  text-decoration:none;
  color:var(--ink);
}

.bienv-intro{
  grid-area:intro;
  align-self:center;
  display:flex;
  flex-direction:column;
  gap:32px;
  min-width:0;
}
.bienv-h1{ line-height:.92; letter-spacing:-0.045em; }
.bienv-texto{
  max-width:520px;
  margin:0;
  font-size:20px;
  line-height:1.55;
  color:var(--text-body);
}
.bienv-firma{ margin:0; font-size:17px; color:var(--muted); }

.bienv-cta.btn{
  grid-area:cta;
  justify-self:start;
  align-self:end;
  height:56px;
  padding:0 40px;
}

/* ---------- Tarjeta ---------- */
.bienv-tarjeta{
  grid-area:tarjeta;
  display:flex;
  flex-direction:column;
  gap:32px;
  min-width:0;
  padding:48px;
  background:var(--surface);
}
.bienv-seccion{ display:flex; flex-direction:column; min-width:0; }
.bienv-seccion-pasos{ gap:4px; }
.bienv-seccion-contacto{ gap:10px; }
.bienv-h2{ margin:0; font-size:22px; font-weight:500; line-height:normal; }
.bienv-seccion-pasos .bienv-h2{ margin-bottom:12px; }

.bienv-pasos{ margin:0; padding:0; list-style:none; }
.bienv-pasos li{
  display:grid;
  grid-template-columns:40px minmax(0, 1fr);
  padding:18px 0;
  border-top:1px solid var(--line-list);
  font-size:17px;
}
.bienv-pasos li:first-child{ border-top-color:var(--ink); }
.bienv-pasos li:last-child{ border-bottom:1px solid var(--line-list); }
.bienv-num{ color:var(--accent); }

.bienv-reglas{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--text-body);
}
.bienv-contacto{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin:6px 0 0;
  padding:0;
  list-style:none;
  font-size:15px;
}
.bienv-contacto a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.bienv-contacto a:hover{ color:var(--muted); }

.bienv-vacio{ align-items:flex-start; padding:0; text-align:left; }
.bienv-vacio .vacio-texto{ max-width:520px; }

/* =========================== Tablet =========================== */
@media (max-width: 1199px){
  .bienv-idioma{ top:20px; right:var(--gutter); }
  .bienv{
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto;
    grid-template-areas:
      "logo"
      "intro"
      "tarjeta"
      "cta";
    row-gap:40px;
    min-height:0;
    padding-top:56px;
    padding-bottom:64px;
  }
  .bienv-intro{ align-self:start; }
  .bienv-tarjeta{ max-width:720px; }
}

/* =========================== Celular (MBienvenida) =========================== */
@media (max-width: 767px){
  .bienv.bienv-celu{
    display:flex;
    flex-direction:column;
    gap:24px;
    padding:16px 20px 48px;
  }
  .bienv-celu .bienv-intro{ gap:24px; }
  /* 56 px a 390 (MBienvenida) y un poco menos en pantallas de 360 */
  .bienv-celu .bienv-h1{ font-size:clamp(46px, 14.4vw, 56px); letter-spacing:-0.05em; }
  .bienv-celu .bienv-texto{ font-size:17px; }
  .bienv-celu .bienv-firma{ font-size:15px; }

  /* Las dos secciones pasan a ser dos tarjetas blancas separadas */
  .bienv-celu .bienv-tarjeta{ gap:24px; max-width:none; padding:0; background:none; }
  .bienv-celu .bienv-seccion{ padding:20px; background:var(--surface); }
  .bienv-celu .bienv-seccion-pasos{ gap:6px; }
  .bienv-celu .bienv-seccion-pasos .bienv-h2{ margin-bottom:8px; }
  .bienv-celu .bienv-seccion-contacto{ gap:8px; }
  .bienv-celu .bienv-h2{ font-size:19px; }
  .bienv-celu .bienv-pasos li{ grid-template-columns:32px minmax(0, 1fr); padding:16px 0; font-size:16px; }
  .bienv-celu .bienv-pasos li:last-child{ border-bottom:0; }
  .bienv-celu .bienv-reglas{ font-size:15px; }
  .bienv-celu .bienv-contacto{ font-size:15px; }

  .bienv-celu .bienv-cta.btn{ width:100%; height:56px; padding:0 20px; }
}