/* ── Inicio: columnas de luz (23-sep-2026) ───────────────────────────────
   Pedro pidió un Inicio distinto, sin ruido y con una tarjeta por función
   ("como lo hicimos al inicio"), más chico y más luxury, y luego "que se vea
   muy innovador". De tres opciones (editorial, columnas de luz, prisma)
   eligió esta: cuatro columnas altas, como frascos, cada una con un haz de
   su color desde arriba. La que tocas se ensancha y cuenta qué es.

   Va en su propio archivo y carga el último: quitar su <link> de index.html
   deja el Inicio sin estilos propios, pero no toca ninguna otra pantalla. */

body[data-vista="inicio"]{ --ambiente:rgba(122,78,255,.14) }

.in-inicio{
  max-width:1080px; padding:48px 40px 56px;
  animation:lx-rise .6s var(--curva-lx) both;
}

/* El saludo: mucho aire, dos líneas y nada más. */
.in-cabeza{ margin-bottom:34px }
.in-fecha{ margin:0 0 20px; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--tinta-tenue) }
.in-saludo{ margin:0; font-family:var(--display); font-weight:200; font-size:15px; letter-spacing:.01em; color:var(--tinta-media) }
.in-nombre{
  margin:2px 0 0; font-family:var(--display); font-weight:200;
  font-size:clamp(30px, 3.4vw, 38px); letter-spacing:-.03em; line-height:1.05; color:var(--tinta);
}

/* Las cuatro columnas. */
.in-rejilla{ display:flex; gap:10px; height:380px }

.in-tarjeta{
  --c:var(--c-lila);
  position:relative; overflow:hidden; flex:1; min-width:0;
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px 20px 18px; cursor:pointer;
  background:linear-gradient(180deg, rgba(var(--c),.10), rgba(238,237,245,.015) 55%);
  border:1px solid rgba(238,237,245,.07); border-radius:22px;
  transition:flex .8s var(--curva-lx), border-color .4s, background .4s;
  animation:lx-rise .6s var(--curva-lx) both;
}
.in-tarjeta.oro{ --c:var(--c-oro) } .in-tarjeta.turquesa{ --c:var(--c-turquesa) }
.in-tarjeta.lila{ --c:var(--c-lila) } .in-tarjeta.menta{ --c:var(--c-menta) }

/* El haz: una línea de luz que baja desde el borde de arriba. */
.in-tarjeta::before{
  content:''; position:absolute; top:0; left:50%; width:1px; height:58%; transform:translateX(-50%);
  background:linear-gradient(180deg, rgb(var(--c)), transparent); box-shadow:0 0 18px 2px rgba(var(--c),.55);
  opacity:.7; transition:opacity .5s, height .8s var(--curva-lx);
}
.in-tarjeta:hover, .in-tarjeta:focus-visible{ flex:1.9; border-color:rgba(var(--c),.3) }
.in-tarjeta:hover::before, .in-tarjeta:focus-visible::before{ opacity:1; height:70% }
.in-tarjeta:focus-visible{ outline:2px solid rgba(var(--c),.8); outline-offset:3px }

.in-orden{
  position:absolute; top:20px; left:20px; display:flex; align-items:center; gap:9px;
  font-size:9.5px; letter-spacing:.28em; color:var(--tinta-tenue); font-variant-numeric:tabular-nums;
}
.in-orden::before{ content:''; width:4px; height:4px; border-radius:50%; background:rgb(var(--c)); box-shadow:0 0 8px rgba(var(--c),.55) }

.in-tarjeta h3{ margin:0 0 6px; font-family:var(--display); font-weight:200; font-size:19px; letter-spacing:-.01em; line-height:1.15; color:var(--tinta) }

/* Qué es: aparece solo en la columna abierta. */
.in-tarjeta p{
  max-width:46ch; max-height:0; opacity:0; overflow:hidden; margin:0;
  font-size:12px; line-height:1.6; color:var(--tinta-media);
  transition:max-height .7s var(--curva-lx), opacity .5s, margin .5s;
}
.in-tarjeta:hover p, .in-tarjeta:focus-visible p{ max-height:80px; opacity:1; margin:0 0 14px }

.in-pie{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:12px; padding-top:13px;
  border-top:1px solid rgba(238,237,245,.05); font-size:11px;
}
.in-dato{ color:var(--tinta-tenue); min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.in-dato b{ font-weight:500; color:var(--tinta) }
.in-entrar{ flex:none; color:rgba(var(--c),.85); font-size:10px; letter-spacing:.2em; text-transform:uppercase }
.in-entrar span{ display:inline-block; transition:transform .3s var(--curva-lx) }
.in-tarjeta:hover .in-entrar span{ transform:translateX(3px) }

/* En el teléfono no hay "pasar el mouse": columnas apiladas, con su texto. */
@media (max-width:860px){
  .in-inicio{ padding:22px 18px 40px }
  .in-cabeza{ margin-bottom:28px }
  .in-fecha{ margin-bottom:16px }
  .in-nombre{ font-size:30px }
  .in-rejilla{ flex-direction:column; height:auto }
  .in-tarjeta{ min-height:0; padding:18px 18px 14px }
  .in-tarjeta:hover{ flex:1 }
  .in-tarjeta::before{ left:auto; right:32px; height:70% }
  .in-orden{ position:static; margin-bottom:12px }
  .in-pie{ flex-direction:row; align-items:center; justify-content:space-between; width:100% }
  .in-tarjeta h3{ font-size:17px }
  .in-tarjeta p{ max-height:none; opacity:1; margin:0 0 12px }
  .in-dato{ white-space:normal }
}
@media (prefers-reduced-motion:reduce){ .in-inicio, .in-tarjeta{ animation:none } .in-tarjeta{ transition:none } }