@font-face {
    font-family: 'Digital7Mono';
    src: url('fonts/digital-7-mono.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg: #000;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    background: var(--bg);
    margin: 0;
    overflow: hidden;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== STAGE ===== */
.stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    isolation: isolate;
    /* stacking context estable */
    /* Cubrir toda la pantalla en iOS (evita franja blanca bajo la barra del navegador) */
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ===== VIDEO FONDO REAL ===== */
.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* igual que background-size: cover */
    z-index: 0;
    pointer-events: none;
    /* iOS: forzar capa de composición para que el video se muestre */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* capa opcional para oscurecer un poco */
.stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35); /* ajustá intensidad */
    z-index: 1;
    pointer-events: none;
}


/* ===== PERSONA + TEXTOS ===== */
.hero-person {
    position: absolute;
    left: 50%;
    top: clamp(-70px, -30vh, 0px);
    transform: translateX(-50%);
    width: clamp(320px, 34vw, 680px);
    height: auto;
    z-index: 3;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 26px 70px rgba(0, 0, 0, .70));
}

/* contador centrado y estable */
.countdown {
    position: absolute;
    left: 50%;
    top: clamp(420px, 70vh, 760px);
    transform: translate(-50%, -50%);
    z-index: 4;

    width: min(980px, 92vw);
    text-align: center;

    font-family: 'Digital7Mono', sans-serif;
    font-weight: normal;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .95);
    font-size: clamp(44px, 7vw, 96px);
    line-height: 1;
    text-shadow: 0 0 24px rgba(255, 255, 255, .10);
}

/* textos arriba/abajo */
.texto-arriba {
    position: absolute;
    left: 50%;
    top:  clamp(10px, 2.5vh, 28px);
    transform: translateX(-50%);
    z-index: 4;

    width: clamp(220px, 22vw, 520px);
    height: auto;
    opacity: .95;
    user-select: none;
    -webkit-user-drag: none;
}

.texto-abajo {
    position: absolute;
    left: 50%;
    bottom:clamp(14px, 4vh, 40px);
    transform: translateX(-50%);
    z-index: 4;

    width: clamp(260px, 26vw, 640px);
    height: auto;
    opacity: .95;
    user-select: none;
    -webkit-user-drag: none;
}

/* ===== TABLET ===== */
@media (max-width: 1280px) {

    .hero-person {
        width: clamp(360px, 58vw, 760px);
        top: clamp(-40px, -6vh, -10px);
    }

    .countdown {
        top: clamp(380px, 66vh, 720px);
        font-size: clamp(44px, 10vw, 86px);
    }

    .texto-arriba {
        width: clamp(220px, 42vw, 520px);
    }

    .texto-abajo {
        width: clamp(260px, 60vw, 680px);
    }
}

@media (min-width: 481px) and (max-width: 1024px) {

    /* persona: nada de 135vw en tablet */
    .hero-person {
        top: -2vh;
        width: 80vw;
    }

    /* countdown: volver a centrado con top estable */
    .countdown {
    position: absolute;
    left: 50%;
    top: 68%;                 /* SIEMPRE centrado vertical */
    transform: translate(-50%, -50%);
    
    width: min(900px, 92vw);
    font-size: clamp(44px, 14vw, 120px);
}

    /* textos */
    .texto-arriba {
        width: min(520px, 55vw);
        top: 7vh;
    }

    .texto-abajo {
        width: min(720px, 80vw);
        bottom: 7vh;
    }

}

/* ===== MOBILE ===== */
@media (max-width: 480px) {

    .hero-person {
        top: 0vh;
        width: 135vw;
        left: 32vh;
        /* como lo venías usando, pero estable */
    }

    .texto-arriba {
        top: 67px !important;
        width: 86vw !important;
    }

    .texto-abajo {
        bottom: 9vh !important;
        width: 86vw !important;
    }

    .countdown {
        position: absolute;
    left: 50%;
    top: 70%;                 /* SIEMPRE centrado vertical */
    transform: translate(-50%, -50%);
    
    width: min(900px, 92vw);
    font-size: clamp(40px, 14.3vw, 70px);
    }
}

@media (orientation: landscape) and (max-height: 500px){
  /* Ajustes para que se vea igual en landscape (móvil) */
  .hero-person{
    width: min(520px, 45vw);
    top: -6vh;
  }

  .countdown{
    top: 68vh;
    font-size: clamp(40px, 20vw, 70px);
  }

  .texto-abajo{
    bottom: 2%;
    width: clamp(50px, 20vw, 600px);
  }

  .texto-arriba{
    width: min(520px, 55vw);
  }
}