:root{--bg:#000;--fg:#e6f7ff;--muted:#93a7b3;--pri:#63d132;--acc:#0a4a8a}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
.topbar{position:fixed;top:0;left:0;right:0;height:64px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:20;border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.02em}
.brand img{height:26px;border-radius:6px}
.brand2{display:flex;align-items:center;text-align:center;justify-content: center;gap:.6rem;font-weight:800;letter-spacing:.02em}
.brand2 img{height:160px;border-radius:6px}
.nav{display:flex;gap:.5rem}
.chip{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.35rem .7rem;font-weight:700}

/* ESTA ES LA REGLA CRÍTICA:
 * E l 'padding-top' debe ser 0 para eliminar el espacio.            **
 */
.hero{position:relative;min-height:70vh;display:grid;grid-template-rows:1fr auto auto;gap:.5rem;align-items:end;justify-items:center;padding-top:0}
.media{position:absolute;inset:0;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:contrast(1.05) brightness(1)}
/* soft top gradient to protect heads */
.mask{position:absolute;inset:0;/*background:linear-gradient(180deg,rgba(0,0,0,.6) 0%, transparent 30%);*/pointer-events:none}
.overlay{position:absolute;inset:0;background:radial-gradient(1200px 800px at 30% 30%,rgba(99,209,50,.25),transparent 60%), radial-gradient(900px 600px at 70% 60%,rgba(10,74,138,.25),transparent 60%);mix-blend-mode:screen}
.copy{position:relative;z-index:1;text-align:center;font-size:clamp(2rem,6vw,4rem);font-weight:1000;letter-spacing:-.02em;line-height:1}
.copy span{color:var(--pri)}
.subcopy{position:relative;z-index:1;color:var(--muted);text-align:center;font-size:clamp(1rem,2.5vw,1.25rem);margin-bottom:1rem}
.cta-bar{position:relative;z-index:2;display:flex;justify-content:center;gap:.6rem;padding:12px}
.btn{display:inline-block;border-radius:14px;padding:.7rem 1rem;font-weight:800;text-decoration:none}
.btn.primary{background:var(--pri);color:#000}
.btn.ghost{border:1px solid rgba(255,255,255,.2);color:var(--fg)}
.photoclips{padding:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.clip{position:relative;border-radius:16px;overflow:hidden;min-height:260px;background:#0b1b2b}
.clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:ken 8s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1) translateY(0)} to{transform:scale(1.08) translateY(-2%)}}
.foot{padding:2rem 1rem;color:var(--muted);text-align:center}

.photo-overlay{position:absolute;inset:0;display:grid;text-align:center;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;padding:18px;background:rgba(0,0,0,.35)}
.photo-overlay .cell{position:relative;border-radius:16px;overflow:hidden;background:#0b1b2b;display:grid;place-items:center}
.photo-overlay img{width:100%;height:100%;object-fit:contain;animation:ken 8s ease-in-out infinite alternate}

.unmute{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.6);z-index:30}
.unmute button{font-size:clamp(1rem,2.5vw,1.25rem);font-weight:900;border:none;border-radius:14px;padding:1rem 1.2rem;background:#63d132;color:#000;box-shadow:0 10px 30px rgba(0,0,0,.3)}

/* ESTA ES LA CORRECCIÓN: */
div.unmute[hidden]{display:none!important}

.unmute.fadeout{animation:fadeOut .25s ease forwards}
@keyframes fadeOut{to{opacity:0;visibility:hidden;pointer-events:none}}

.unmute.start{
    background:rgba(0,0,0,.8);
    /* Cambiado de 'grid' a 'flex' para apilar logo y botón */
    display: flex !important; /* Usamos !important para anular .unmute 'grid' */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem; /* Espacio entre el logo y el botón */
    place-items: unset !important; /* Anulamos 'place-items' */
}

/* Estilos para el logo en la pantalla de inicio */
.start-logo {
    display: flex;
    /* Se eliminan los estilos de texto y flex-direction */
    align-items: center;
    justify-content: center;
}
/* --- NUEVA REGLA PARA REDUCIR Y CENTRAR LOGO --- */

/* 1. Hacemos que el elemento <picture> se comporte como un bloque */
.start-logo picture {
    display: block;
    width: 25%;     /* Establece el ancho al 25% */
    height: auto;   /* Mantiene la proporción */
    /* El contenedor .start-logo ya tiene 'justify-content: center',
     *     así que centrará este bloque de 25% de ancho.
     */
}

/* 2. Hacemos que la <img> ocupe el 100% de su contenedor <picture> */
.start-logo img {
    width: 100%;    /* Rellena el <picture> */
    height: auto;   /* Mantiene la proporción */
}

/* --- ESTILOS PARA EL LOADER (MODIFICADOS) --- */

/* Contenedor del loader (CON MARGEN AUTOMÁTICO) */
.loader-container {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;

    /* --- LÍNEAS AÑADIDAS --- */
    margin-left: auto;
    margin-right: auto;
    /* ------------------------ */

    margin-bottom: 2rem;
}

/* Círculo de progreso SVG */
.loader-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 8px solid rgba(255, 255, 255, 0.2); /* DOBLE GROSOR DE BORDE */
    border-top: 8px solid var(--pri); /* DOBLE GROSOR DE BORDE */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Porcentaje de carga */
#loaderPercent {
position: relative;
z-index: 1;
font-size: 2.4rem; /* DOBLE TAMAÑO DE FUENTE: antes era 1.2rem */
font-weight: bold;
color: var(--fg);
}

/* --- AJUSTE AL CONTENEDOR DE INICIO PARA CENTRAR EL LOADER --- */
/* (Este es el que centra TODO el contenido del overlay) */
.unmute.start {
    /* Mantenemos estos para centrar horizontalmente */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* ESTO ES LO QUE CENTRA EL LOADER HORIZONTALMENTE */
    gap: 2rem;
    place-items: unset !important;
}

/* --- FIN DE ESTILOS PARA LOADER --- */

/* --- AJUSTE AL BOTÓN DE INICIO PARA CUANDO EL LOADER ESTÉ ACTIVO --- */
/* Cuando el botón de inicio está hidden, no debe ocupar espacio */
.unmute.start #startBtn[hidden] {
    display: none;
}