/* =========================================================
   Line Columns — Hoja de estilos
   ========================================================= */

/* ── Layout base ── */
.lc-wrapper {
    --lc-cols:      3;
    --lc-gap:       12px;
    --lc-color:     #0a0a0a;
    --lc-font-size: 1rem;

    display:               grid;
    grid-template-columns: repeat( var(--lc-cols), 1fr );
    gap:                   var(--lc-gap);
    width:                 100%;
}

.lc-column {
    display:        flex;
    flex-direction: column;
    gap:            var(--lc-gap);
}

.lc-line {
    display:     block;
    color:       var(--lc-color);
    font-size:   var(--lc-font-size);
    line-height: 1.4;
    word-break:  break-word;
}

.lc-empty {
    color:      #888;
    font-style: italic;
    font-size:  0.9rem;
}

/* ── Tablet (<= 768 px) ── */
@media (max-width: 768px) {
    .lc-wrapper                       { grid-template-columns: repeat(2, 1fr); }
    .lc-wrapper[data-tablet-cols="1"] { grid-template-columns: 1fr; }
}

/* ── Movil (<= 480 px) ── */
@media (max-width: 480px) {
    .lc-wrapper { grid-template-columns: 1fr !important; }
}

/* =========================================================
   Animaciones — se aplican a .lc-column
   Estado inicial: ocultas. JS añade .lc-animate al entrar
   en el viewport.
   ========================================================= */

.lc-anim-fade  .lc-column,
.lc-anim-slide .lc-column,
.lc-anim-pop   .lc-column,
.lc-anim-blur  .lc-column {
    opacity: 0;
    animation-fill-mode: both;
    animation-play-state: paused;
}

/* — Fade — */
.lc-anim-fade .lc-column {
    animation-name: lc-fade-in;
    animation-duration: 0.6s;
    animation-timing-function: ease;
}
@keyframes lc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* — Slide up — */
.lc-anim-slide .lc-column {
    transform: translateY(30px);
    animation-name: lc-slide-up;
    animation-duration: 0.55s;
    animation-timing-function: cubic-bezier(.22,.68,0,1.2);
}
@keyframes lc-slide-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* — Pop — */
.lc-anim-pop .lc-column {
    transform: scale(0.75);
    animation-name: lc-pop;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(.34,1.56,.64,1);
}
@keyframes lc-pop {
    from { opacity: 0; transform: scale(0.75); }
    to   { opacity: 1; transform: scale(1); }
}

/* — Blur in — */
.lc-anim-blur .lc-column {
    filter: blur(10px);
    animation-name: lc-blur-in;
    animation-duration: 0.65s;
    animation-timing-function: ease;
}
@keyframes lc-blur-in {
    from { opacity: 0; filter: blur(10px); }
    to   { opacity: 1; filter: blur(0); }
}

/* Activar cuando JS añade .lc-animate */
.lc-anim-fade  .lc-column.lc-animate,
.lc-anim-slide .lc-column.lc-animate,
.lc-anim-pop   .lc-column.lc-animate,
.lc-anim-blur  .lc-column.lc-animate {
    animation-play-state: running;
}

/* — None — */
.lc-anim-none .lc-column {
    opacity:   1;
    animation: none;
}