/* ---------- VARIABLES + RESET (Mobile-First) ---------- */
:root {
  --bg: #000;
  --btn-bg: #222;
  --gap: 6px;
  --btn-size: 12vw;
  --max-btn: 60px;
  --circle: 35vw;
  --max-circle: 160px;
  font-size: 14px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../img/panta1366.jpg") center/cover no-repeat;
  background-position: center 0px;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

/* ---------- MARQUEE ---------- */
.marquee{
  transform: translateZ(0);
  backface-visibility: hidden;

  display:inline-flex;
  white-space:nowrap;
  align-items:center;
  font-size:25px;
  line-height:35px;
  will-change:transform;

  visibility:hidden;   /* CLAVE */
}
#marquee-contentinf {
  display:inline-flex;
  white-space:nowrap;
  margin:0;        /* elimina margen del h1 */
  padding:0;
  transform:translate3d(0,0,0);
}

.marquee-container {
  position: fixed; /* Posiciona el contenedor de marquee de forma fija */  
  top: 0; /* Coloca el marquee en la parte superior de la pantalla */  
  left: 0; /* Alinea a la izquierda */  
  right: 0; /* Alinea a la derecha */  
  height: 35px; /* Altura del contenedor */  
  overflow: hidden; /* Oculta el desbordamiento */  
  background-color: rgba(240, 240, 240, 0.8); /* Fondo semi-transparente para mejorar la visibilidad */  
  display: flex; /* Habilitar Flexbox */  
  align-items: center; /* Centrar verticalmente */  
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */  
  font-weight: bold;
  z-index: 100; /* Asegúrate de que está por encima de otros elementos */  
}

.marquee-inferior {  
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:35px;
  overflow:hidden;
  background-color:rgba(240,240,240,.8);
  font-weight:bold;
  font-size:14px;
  z-index:100;
}  

#marquee-content {  
  display: inline-block;
  animation: scroll-derecha 25s linear infinite; /* izq → der */
  padding-left: 100%; /* empieza fuera de la pantalla */
}

/* ---------- VIDEO CIRCLE ---------- */
.video-circle {
  position: absolute;
  top: 29%;
  left: 50%;
  width: var(--circle);
  height: var(--circle);
  max-width: var(--max-circle);
  max-height: var(--max-circle);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px solid #697593;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: black;
  z-index: 1;
}

.video-circle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contenedor-iconos {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  padding-top: 6rem; /* ← BAJA TODO */
}

.fila {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  width: 100%;
}

.lado {
  display: flex;
  gap: var(--gap);
}

.icono {
  display: block;
  width: var(--btn-size);
  height: var(--btn-size);
  max-width: var(--max-btn);
  max-height: var(--max-btn);
  background: var(--btn-bg) center / contain no-repeat;
  border-radius: 50%;
  transition: transform 0.15s;
  cursor: pointer;
}

.icono:active {
  transform: scale(0.92);
}

.homeAudio {  
  position: absolute; /* Mantén esto */  
  top: 80.5%;  
  left: 50%;  
  transform: translate(-50%, 40%); /* Asegúrate que esta línea está presente para centrarlo */  
  margin: 0; /* Verifica que no tenga márgenes que puedan afectar */
  z-index: 9999 !important;
  pointer-events: auto !important;
}  

.homeAudio audio {
  z-index: 10000 !important;
  pointer-events: auto;
  display: block;
}

/* ---------- TABLET ---------- */
@media (min-width: 600px) {
  :root {
    --btn-size: 10vw;
    --max-btn: 64px;
    --circle: 30vw;
    --max-circle: 180px;
    font-size: 15px;
  }
}

/* 5-6: 7 centrados */
.fila-5,
.fila-6 {
  display: flex;
  justify-content: center;
  gap: 2vw;
}

/* Agrandar iconos al pasar el mouse (PC) */
@media (hover: hover) {
  .icono:hover {
    transform: scale(1.18);
    transition: transform 0.20s ease-out;
  }
}

/* ---------- MÓVIL COMPLETO (≤ 899px) ---------- */
@media (max-width: 899px) {
  /* 2. Tamaño de iconos */
  :root {
    --btn-size: clamp(50px, 12vw, 80px);
  }

  /* Aplicamos el nuevo tamaño a todos los iconos */
  .icono,
  .icono.chico,
  .icono.mediano {
    width: var(--btn-size);
    height: var(--btn-size);
  }

  .homeAudio {  
    position: absolute; /* Mantén esto */  
    top: 77.5%;  
    left: 50%;  
    transform: translate(-50%, 40%); /* Asegúrate que esta línea está presente para centrarlo */  
    margin: 0; /* Verifica que no tenga márgenes que puedan afectar */
    z-index: 9999 !important;
    pointer-events: auto !important;
  }  

  /* 1. Posicionamiento general */
  .contenedor-iconos {
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
    top: 0; /* ← se corrige */
    padding-top: 2rem;
  }
  .video-circle { top: 22.5%; }

  .logo-boink {
    position: absolute;
    top: 33%;                 /* centro vertical */
    left: 50%;                /* centro horizontal */
    transform: translate(-50%, 50%); /* desplazado hacia abajo del círculo */
    z-index: 2;               /* encima del fondo, debajo del video */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-img {
    width: 280px;   /* ← cambiá aquí el ancho que quieras */
    height: auto;   /* ← cambiá aquí el alto que quieras */
    max-width: 90vw; /* no salga de la pantalla */
    max-height: 30vh;
    object-fit: contain;
  }
  /* Titulo centrado debajo del logo */
  #logo-titulo {
    position: absolute;
    top: 27%;
    left: 50%;
    transform: translate(-50%, 50%); /* más abajo que el anterior */
    z-index: 9999;
    height: 100px;
    width: 200px;          /* ← el ancho manda acá */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;      /* ← CLAVE */
  }
  .titulo-img {
    height: 100px;     /* ← OBLIGATORIO */
    width: 200px;
    object-fit: contain; /* o scale-down */
  }

  /* 3. Fila 1: separación entre iconos */
  .fila-1 {
    gap: clamp(1rem, .5vw, 3rem);   /* ← ajustalo a tu gusto */
  }

  /* 4. Filas 2-4: 2+2 con hueco central */
  .fila-2 .lado.izq,
  .fila-3 .lado.izq,
  .fila-4 .lado.izq {
    margin-right: clamp(2rem, 40vw, 10rem); /* ← separación de lados */
  }

  .fila-2 .lado,
  .fila-3 .lado,
  .fila-4 .lado {
    gap: clamp(1rem, 2vw, 1rem);
  }

  /* 5. Filas 5-6: 7 centrados */
  .fila-5,
  .fila-6 {
    display: flex;
    justify-content: center;
    gap: 3.8vw;
  }

  /* 6. Fila 7: 4 separados, lados más cerca */
  .fila-7 {
    display: flex;
    justify-content: space-between;
    padding: 0 2vw;
    gap: 1.2rem;
  }
  .fila-7 .lado {
    gap: 2vw;                /* separación DENTRO de cada lado */
  }
  .fila-1 { margin-top: .5rem; }
  .fila-2 { margin-top: -.5rem; }
  .fila-3 { margin-top: -.5rem; }
  .fila-4 { margin-top: -.5rem; }
  .fila-5 { margin-top: 5rem; }
  .fila-6 { margin-top: .5rem; }
  .fila-7 { margin-top: .5rem; }
  .fila-7 .icono {
    width: var(--btn-size);
    height: var(--btn-size);
  }
  .icono-reloj {
    position: relative;
  }
  #circle {  
    position: absolute; /* Asegura que el texto esté sobre la imagen */  
    top: 55%; /* Centro verticalmente */  
    left: 50%; /* Centro horizontalmente */  
    transform: translate(-50%, -50%); /* Centra el texto en relación a su propio tamaño */  
    color: red; /* Cambia el color del texto según sea necesario */  
    font-size: 2.7em;  
    font-weight: bold;  
    font-family: Arial;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 4); /* Sombra del texto */  
  }

  #mensaje-inicial {
    font-size: clamp(18px, 5vw, 24px); /* grande y responsive */
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    letter-spacing: 1px;
    margin: 10px auto;
    user-select: none;
    display: inherit;
    white-space: nowrap;     /* ⛔ nunca bajar de línea */
    max-width: none;         /* sin límite de ancho */

    position: absolute;
    top: 86.5%;
    left: 50%;
    transform: translate(-50%, 40%); /* más abajo que el anterior */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;      /* ← CLAVE */
  }
}

/* ---------- SOLO PARA PC (≥ 900px) ---------- */
@media (min-width: 900px) {
  :root {
    --btn-size: 57px;   /* ← tamaño del ícono en PC */
    --max-btn: 57px;    /* ← límite del tamaño del icono */
  }

  /* Logo centrado debajo del círculo */
  .logo-boink {
    position: absolute;
    top: 40.5%;                 /* centro vertical */
    left: 50%;                /* centro horizontal */
    transform: translate(-50%, 50%); /* desplazado hacia abajo del círculo */
    z-index: 2;               /* encima del fondo, debajo del video */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-img {
    width: 400px;   /* ← cambiá aquí el ancho que quieras */
    height: auto;   /* ← cambiá aquí el alto que quieras */
    max-width: 90vw; /* no salga de la pantalla */
    max-height: 30vh;
    object-fit: contain;
  }

  /* Titulo centrado debajo del logo */
  #logo-titulo {
    position: absolute;
    top: 37.2%;
    left: 50%;
    transform: translate(-50%, 50%); /* más abajo que el anterior */
    z-index: 9999;
    height: 100px;
    width: 200px;          /* ← el ancho manda acá */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;      /* ← CLAVE */
  }
  .titulo-img {
    height: 100px;     /* ← OBLIGATORIO */
    width: 200px;
    object-fit: contain; /* o scale-down */
  }

  /* 1. Fila 1 bien arriba */
  .fila-1 {
    margin-top: -28.5rem;  /* sube más la fila */
    gap: 1.6rem;
  }
  .fila-2 { margin-top: -1rem; }
  .fila-3 { margin-top: -3.5rem; }
  .fila-4 { margin-top: -3.5rem; }

  /* 2. Fila 2, 3 y 4: separar lados */
  .fila-2 .lado.izq,
  .fila-3 .lado.izq,
  .fila-4 .lado.izq {
    margin-right: 2.5rem;   /* ← separa izquierda de derecha */
  }

  .fila-2 .lado.der,
  .fila-3 .lado.der,
  .fila-4 .lado.der {
    margin-left: 10.1rem;    /* ← separa derecha de izquierda */
  }

  /* 3. Ajustar separación DENTRO de cada lado (opcional) */
  .fila-2 .lado,
  .fila-3 .lado,
  .fila-4 .lado {
    gap: 1.2rem;
  }

  .fila-5 { 
    margin-top: 24.5rem;  /* antes 5rem → baja más */ 
    gap: 1.7rem;
  }
  .fila-6 { 
    margin-top: .4rem;  /* antes 1rem → mucho mejor */ 
    gap: 1.7rem;
  }
  .fila-7 { 
    margin-top: .4rem;  /* antes 1.4rem → baja más */ 
    gap: 1.7rem;
  }
  .fila-8 { 
    margin-top: .4rem;  /* antes 1.4rem → baja más */ 
    margin-left: -13.5rem;   /* ← separa izquierda de derecha */
    gap: .7rem;
  }
  .icono-reloj {
    position: relative;
  }
  #circle {  
    position: absolute; /* Asegura que el texto esté sobre la imagen */  
    top: 55%; /* Centro verticalmente */  
    left: 50%; /* Centro horizontalmente */  
    transform: translate(-50%, -50%); /* Centra el texto en relación a su propio tamaño */  
    color: red; /* Cambia el color del texto según sea necesario */  
    font-size: 2.7em;
    font-family: Arial;
    font-weight: bold;  
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 4); /* Sombra del texto */  
  }  
  #mensaje-inicial {
    display: none;
  ]
}
.icono {
  z-index: 9999;  /* iconos siempre encima */
  pointer-events: auto;
}

.fila, .contenedor-iconos {
  z-index: 9990;
}
.circle-inf {
  border-radius:50%;
  object-fit: cover;
  vertical-align: middle;
}