@import url('https://fonts.googleapis.com/css2?family=Gasoek+One&family=Poppins:wght@400;600;700;800;900&display=swap');

:root{--teal:#025E73;--navy:#022840;--bg:#ffffff;--nav-h:72px;}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,'Helvetica Neue',sans-serif;
  overflow:hidden; /* sin scroll */
}

/* NAVBAR (intacto) */
.navbar{position:relative;z-index:5;width:100%;min-height:var(--nav-h);
  background:rgba(232,239,243,.95);border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:space-between;padding:14px 20px;flex-wrap:wrap;}
.brand{font-family:'Gasoek One',cursive;letter-spacing:0.11em;color:var(--teal);
  font-size:clamp(22px,2.6vw,36px);white-space:nowrap;text-decoration:none;}
.navlinks{display:flex;gap:28px;align-items:center;justify-content:flex-end;flex:1;flex-wrap:wrap;}
.navbtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border:0;border-radius:999px;padding:12px 22px;font-weight:900;letter-spacing:.06em;
  background:#f4f7f9;color:var(--teal);box-shadow:0 6px 16px rgba(0,0,0,.10),inset 0 0 0 3px rgba(2,40,64,.15);}
.navbtn.is-active{background:var(--teal);color:#e9f3f6;box-shadow:0 8px 20px rgba(2,94,115,.35);}
@media (max-width:900px){
  .navlinks{gap:14px}
  .navbtn{padding:10px 16px;font-size:.9rem}
}
@media (max-width:620px){
  .navbar{row-gap:10px;justify-content:center}
  .navlinks{order:2;width:100%;justify-content:center;flex-wrap:wrap}
  .navbtn{padding:8px 14px;font-size:.85rem}
  .brand{order:1;width:100%;text-align:left}
}

/* Contenido: ocupa alto restante y centra la cuadrícula */
.voces-main{
  height:calc(100vh - var(--nav-h));
  background:#000000;
  padding:0;
  display:grid;
  place-items:center; /* centra horizontal + vertical cuando sobra espacio */
}

.voces-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr); /* fijo 5x5 */
  gap:0;
  width:0;   /* será seteado por JS */
  height:0;  /* será seteado por JS */
  background:#000000;
  grid-auto-rows: var(--rowH, 1px);
}

.voces-card{position:relative;overflow:hidden;background:#000000;aspect-ratio:16/9;}
.voces-card > video{
  position:absolute; inset:0;
  
  width:100%; height:100%; display:block;
  -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translateZ(0);
}