/* ================================================
   LEVEL TECH — PRE-PORTAFOLIO
   Acordeón 5 columnas
   Depende de: core.css (variables globales)
   Ubicación: 05-Portafolio/pre-portafolio/
================================================ */

/* --navbar-h: altura real del navbar global = 60px fija.
   --acc-gap: margen perimetral del acordeón. */
:root {
    --navbar-h: 0px; /* sobreescrita por core.js con valor real medido */
    --acc-gap: clamp(1rem, 1.8vw, 1.8rem);
}

body {
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-body);
}

/* ══════════════════════════════════════
   WRAPPER
══════════════════════════════════════ */
.accordion-wrapper {
    position: fixed;
    top: calc(var(--navbar-h) + var(--acc-gap));
    left: var(--acc-gap);
    right: var(--acc-gap);
    bottom: var(--acc-gap);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: clip;
    border-radius: 20px;
    /* Reposo: borde verde LT */
    border: 2px solid var(--color-green);
    cursor: none;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Al hover: borde toma el color de la columna activa */
.accordion-wrapper:has(.acc-col:hover) {
    border-color: var(--col-color, var(--color-green));
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

/* ══════════════════════════════════════
   DIVISORES
══════════════════════════════════════ */
.acc-divider {
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.accordion-wrapper:has(.acc-col:hover) .acc-divider {
    opacity: 0;
}

/* ══════════════════════════════════════
   COLUMNA
══════════════════════════════════════ */
.acc-col {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: hidden;
    cursor: none;
    transition: flex 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    will-change: flex;
}

.accordion-wrapper:has(.acc-col:hover) .acc-col {
    flex: 0.35;
}

.acc-col:hover {
    flex: 3.5 !important;
    box-shadow: inset 0 0 0 1.5px var(--col-color);
}

/* ── Fondo ── */
.acc-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* background-image y background-size vienen del inline del HTML.
       background-position se define por columna más abajo. */
}

/* ── Overlay oscuro ── */
.acc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
    transition: opacity 0.5s ease;
}

.acc-col:hover .acc-overlay {
    opacity: 0.15;
}

/* ── ::before — haz de color, solo zona inferior (no llega al número) ── */
.acc-col::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Altura pequeña + radio vertical corto = glow confinado al borde inferior */
    height: 22%;
    background: radial-gradient(
        ellipse 90% 100% at 50% 100%,
        var(--col-color) 0%,
        transparent 100%
    );
    z-index: 3;
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.55s ease;
}

.acc-col:hover::before {
    opacity: 0.85;
}

/* ── ::after — gradiente negro solo para legibilidad del texto ── */
.acc-col::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.55s ease;
}

.acc-col:hover::after {
    opacity: 1;
}

/* ══════════════════════════════════════
   NÚMERO — marca de agua arriba-derecha
══════════════════════════════════════ */
.acc-number {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 5vw, 6.5rem);
    line-height: 1;
    color: var(--color-white);
    opacity: 0.15;
    z-index: 5;
    pointer-events: none;
    transition:
        opacity 0.4s ease,
        transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
    user-select: none;
    letter-spacing: -0.02em;
}

.acc-col:hover .acc-number {
    opacity: 0;
    transform: translateY(-8px) scale(0.92);
}

/* ══════════════════════════════════════
   LABEL COLAPSADO — abajo, 2 líneas
   font-size adaptivo para que no se corte nunca.
══════════════════════════════════════ */
.acc-label-collapsed {
    position: absolute;
    bottom: 2rem;
    left: 0;
    width: 100%;
    padding: 0 0.75rem;
    z-index: 5;
    opacity: 1;
    transition:
        opacity 0.3s ease,
        transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    text-align: center;
}

.acc-label-collapsed .label-line {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.8vw, 2rem);
    letter-spacing: 0.12em;
    color: var(--color-white);
    text-transform: uppercase;
    transition: color 0.35s ease;
    display: block;
    line-height: 1.25;
    white-space: nowrap;
    overflow: visible;
}

.acc-col:hover .acc-label-collapsed .label-line {
    color: var(--col-color);
    font-size: clamp(0.72rem, 0.9vw, 1rem);
    letter-spacing: 0.08em;
}

.acc-col:hover .acc-label-collapsed {
    opacity: 0;
    transform: translateY(10px);
}

/* ══════════════════════════════════════
   CONTENIDO EXPANDIDO
══════════════════════════════════════ */
.acc-content-expanded {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3rem clamp(1.8rem, 2.5vw, 3rem);
    z-index: 6;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.4s ease 0.2s,
        transform 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.15s;
    pointer-events: none;
    will-change: opacity, transform;
}

.acc-col:hover .acc-content-expanded {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Tag pill */
.acc-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--col-color);
    border: 1px solid var(--col-color);
    padding: 0.3rem 0.85rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

/* Título */
.acc-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 3vw, 4rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--color-white);
    margin-bottom: 0.9rem;
}

/* Descripción */
.acc-desc {
    font-family: var(--font-body);
    font-size: clamp(0.8rem, 0.9vw, 0.95rem);
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    max-width: 320px;
    margin-bottom: 1.8rem;
}

/* CTA */
.acc-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--col-color);
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, gap 0.25s ease;
    letter-spacing: 0.02em;
}

.acc-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--col-glow);
    gap: 0.9rem;
}

.acc-cta i {
    font-size: 0.78rem;
    transition: transform 0.25s ease;
}

.acc-cta:hover i {
    transform: translateX(3px);
}

/* ══════════════════════════════════════
   BACKGROUND-POSITION por columna
   FIX: los inline styles solo traen background-image + background-size.
   La posición se controla aquí con mayor especificidad.
══════════════════════════════════════ */

/* Col 01 — Escáner Kodak (2752×1536): sujeto centro-izquierda */
.acc-col[data-index="0"] .acc-bg { background-position: 25% center; }

/* Col 02 — Pantalla interactiva (1536×1024, más cuadrada): centrar verticalmente */
.acc-col[data-index="1"] .acc-bg { background-position: center 35%; }

/* Col 03 — Impresora HP (2752×1536): sujeto centrado */
.acc-col[data-index="2"] .acc-bg { background-position: center center; }

/* Col 04 — Laptop (2752×1536): sujeto ligeramente a la derecha */
.acc-col[data-index="3"] .acc-bg { background-position: 58% center; }

/* Col 05 — Tóner (2752×1536): bajar ligeramente para alejar el sello del borde */
.acc-col[data-index="4"] .acc-bg { background-position: 68% 52%; }

/* ══════════════════════════════════════
   LAPTOP CORTA — desktop landscape, alto reducido
   Acordeón horizontal se mantiene, columnas ajustadas.
   Cae dentro del breakpoint desktop (landscape + ≥500px alto).
══════════════════════════════════════ */
@media (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) and (max-height: 780px) {

    :root { --acc-gap: clamp(0.8rem, 1.2vw, 1.4rem); }

    .accordion-wrapper:has(.acc-col:hover) .acc-col { flex: 0.4; }
    .acc-col:hover { flex: 3 !important; }

    .acc-number {
        font-size: clamp(2.5rem, 4vw, 4.5rem);
        top: 0.6rem;
        right: 0.6rem;
    }

    .acc-label-collapsed { bottom: 1.4rem; padding: 0 0.5rem; }
    .acc-label-collapsed .label-line { font-size: clamp(0.8rem, 1.3vw, 1.4rem); }

    .acc-content-expanded { padding: 2rem clamp(1.2rem, 2vw, 2rem); }
    .acc-title { font-size: clamp(1.8rem, 2.5vw, 3rem); margin-bottom: 0.6rem; }
    .acc-desc  { font-size: clamp(0.72rem, 0.85vw, 0.88rem); max-width: 260px; margin-bottom: 1.2rem; }
    .accordion-wrapper { border-radius: 14px; }
}

/* ══════════════════════════════════════
   MOBILE / TABLET PORTRAIT
   Negación del breakpoint desktop de 3 criterios.
   Tarjetas verticales apiladas con scroll.
   Tap → navega directo.
══════════════════════════════════════ */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {

    :root { --acc-gap: 0px; }

    .accordion-wrapper {
        position: fixed;
        top: var(--navbar-h);
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        border: none;
        border-radius: 0;
        background: var(--color-black);
        gap: 0;
        padding: .85rem;
        box-shadow: none;
        -webkit-overflow-scrolling: touch;
    }

    .acc-divider { display: none; }

    .acc-col {
        flex: none;
        width: 100%;
        height: clamp(100px, 20vh, 160px);
        border-radius: 14px;
        overflow: clip;
        transition: none;
        margin-bottom: .75rem;
        box-shadow: 0 0 0 2px var(--col-color);
    }

    .acc-col:last-child { margin-bottom: 0; }

    /* Neutralizar hover */
    .accordion-wrapper:has(.acc-col:hover) .acc-col { flex: none; }
    .acc-col:hover { flex: none !important; box-shadow: 0 0 0 2px var(--col-color); }
    .acc-col:hover .acc-overlay { opacity: 1; }
    .acc-col::before { opacity: 0.5; }
    .acc-col:hover::before { opacity: 0.5; }
    .acc-col::after { opacity: 1; height: 55%; }
    .acc-col:hover::after { opacity: 1; }

    .acc-number { display: none; }

    /* Label centrado vertical y horizontal */
    .acc-label-collapsed {
        inset: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: .35rem;
        padding: 0 1.5rem;
        bottom: auto;
        transform: none;
        opacity: 1 !important;
    }

    .acc-label-collapsed .label-line {
        display: inline;
        font-size: clamp(1.1rem, 4.5vw, 1.8rem);
        white-space: nowrap;
        color: var(--color-white);
        line-height: 1.2;
        letter-spacing: .1em;
    }

    /* Las 2 líneas en fila con espacio */
    .acc-label-collapsed .label-line + .label-line::before { content: ' '; }

    .acc-col:hover .acc-label-collapsed { opacity: 1; transform: none; }
    .acc-col:hover .acc-label-collapsed .label-line {
        font-size: clamp(1.1rem, 4.5vw, 1.8rem);
        color: var(--color-white);
    }

    .acc-content-expanded { display: none; }
    .acc-col:active { opacity: 0.82; }
}

/* ── Landscape mobile (≤499px alto) — tarjetas más compactas ── */
@media (orientation: landscape) and (max-height: 499px) {

    .accordion-wrapper { padding: .6rem .85rem; }

    .acc-col {
        height: clamp(70px, 28vw, 130px);
        margin-bottom: .55rem;
    }

    .acc-label-collapsed .label-line { font-size: clamp(1rem, 3.5vw, 1.4rem); }
}