/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ───────────────────────────────────────────────── */
:root {
    --bg:      #fafafa;
    --text:    #000000;
    --font:    'Times New Roman', Times, serif;
    --size:    14px;
    --leading: 16px;
    --s:       5px;
    --m:       25px;
    --l:       50px;
}

/* ── Base ────────────────────────────────────────────────────── */
html, body {
    font-family: var(--font);
    font-size: var(--size);
    line-height: var(--leading);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
::selection { background: #F316B0; color: #000; }
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure { display: none !important; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0; right: 0;
    padding: var(--m);
    z-index: 10;
}

/* ── Proyectos ───────────────────────────────────────────────── */
.proyectos {
    padding: var(--m);
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* ── Slider ──────────────────────────────────────────────────── */
.proyecto__slider {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.proyecto__slide {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    pointer-events: none;
}

.proyecto__slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

.proyecto__slide img,
.proyecto__slide video {
    display: block;
    max-height: 600px;
    width: auto;
    max-width: 100%;
    height: auto;
}

/* ── Texto ───────────────────────────────────────────────────── */
.proyecto__num     { display: block; margin-bottom: var(--s); }
.proyecto__counter { margin-top: var(--s); }
.proyecto__texto   { margin-top: var(--s); }
.proyecto__titulo,
.proyecto__cliente { display: block; }
.proyecto__desc    { margin-top: var(--s); max-width: 500px; }
.proyecto__link    { margin-top: var(--s); }
.proyecto__link a  { text-decoration: underline; }

/* ── Video controls ──────────────────────────────────────────── */
.proyecto__media-wrap { position: relative; display: inline-block; }
.video-controls {
    position: absolute;
    bottom: 10px; right: 10px;
    font-family: var(--font);
    font-size: var(--size);
}
.video-controls span { cursor: pointer; }

/* ── About inline ────────────────────────────────────────────── */
.about-inline { padding: var(--l) var(--m) var(--m); }
.about-inline p + p { margin-top: 5px; }

/* ── Link transition ─────────────────────────────────────────── */
#jc-transition {
    position: fixed;
    inset: 0;
    background: #F316B0;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font);
    font-size: var(--size);
    line-height: var(--leading);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#jc-transition.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Idle overlay ────────────────────────────────────────────── */
#jc-idle {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font);
    font-size: var(--size);
    line-height: var(--leading);
    z-index: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

#jc-idle.is-visible { opacity: 1; }

/* ── Splash ──────────────────────────────────────────────────── */
#jc-splash {
    position: fixed;
    inset: 0;
    background: #fafafa;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font);
    font-size: var(--size);
    line-height: var(--leading);
    z-index: 1000;
    pointer-events: none;
    transition: background 0.6s ease, opacity 0.5s ease;
}

#jc-splash.bg-gone {
    background: transparent;
}

#jc-splash.is-hiding {
    opacity: 0;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    html, body { overflow-x: hidden; }

    .site-header { position: static; padding: 10px; }

    .proyectos {
        padding: 10px;
        padding-top: 25px;
        gap: var(--l);
    }

    .proyecto__slider { display: block; width: 100%; }

    .proyecto__slide img,
    .proyecto__slide video {
        max-height: none;
        width: 100%;
        height: auto;
    }

    .proyectos { gap: 100px; }

    .about-inline { padding: var(--l) 10px; }
}