/* =========================================================
   MOBILE ONLY (cargado con media="(max-width: 768px)")
   Mantiene estilos base de desktop y los adapta a mobile.
   ========================================================= */

/* Variables (mismo set que desktop para coherencia) */
:root{
  --rosa: #ff55ff;
  --celeste: #55ffff;
  --negro: #000000;
  --blanco: #ffffff;
  --gris-suave: #d9d9d9;

  /* Altura aproximada del menú mobile (ajustable) */
  --menu-mobile-offset: 96px;
}

/* Reset básico mobile */
html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  color: var(--negro);
  display: block; /* anulamos el display:flex de desktop */
  min-height: 100vh;
}

/* ================================
   MENÚ / TABS ARRIBA EN UNA FILA
   ================================ */
.menu {
  position: sticky;
  top: 0;
  left: 0; right: 0;
  width: 100%;
  background-color: var(--rosa);
  z-index: 1000;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;                 /* << separa tabs sin que ocupen todo */
  padding: 6px 6px 10px 6px;
  box-sizing: border-box;
  overflow: visible;
}

/* 👇 Cuando lo ocultás, que NO deje hueco */
.menu.hidden {
  display: none !important;
  transform: none !important;
}


/* Botones de tab en mobile */
.menu button {
  border: none;
  background: transparent;
  color: var(--blanco);
  padding: 2px 8px 2px 8px;   /* altura más baja, un poco menos ancho */
  margin: 0;
  text-align: center;
  font-size: 10px;            /* tipografía un poco más chica */
  line-height: 1;
  cursor: pointer;

  flex: 0 0 auto;             /* evita que se estiren al ancho completo */
  min-width: auto;
}

/* Título visual dentro del botón */
.menu.tab h3 {
  font-family: 'Silkscreen', sans-serif;
  font-weight: 400;
  font-size: 13px;          /* un poco más chico */
  color: var(--blanco);
  margin: 0;
  white-space: nowrap;      /* evita cortar palabras */
}

/* Hover/activo */
.menu.tab .filter-button:hover h3 {
  color: var(--celeste);
}
.filter-button { color: var(--blanco); }
.filter-button-active {
  background-color: var(--blanco);
  color: var(--negro);
  border-radius: 4px;       /* opcional, podés poner 0 si querés recto */
}
.menu.tab .filter-button.filter-button-active h3 {
  color: var(--negro);
}

/* Ocultamos el hamburguesa en mobile (no lo necesitamos) */
.hamburger {
  display: block;             /* el JS lo pone en block/none según estado */
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1100;
  background: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* =======================================
   CONTENIDO: debajo del menú fijo
   ======================================= */
.mainContent {
  margin-left: 0 !important;
  padding-top: 0;   /* antes usábamos un offset; ya no hace falta */
  box-sizing: border-box;
}

/* Limpiamos anchos/posiciones heredadas del desktop */
.content {
  padding: 16px;
  max-width: 100%;
}

/* Tipografías: un pelín más compactas en mobile */
h1 {
  font-family: 'Silkscreen', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  margin: 8px 0 10px 0;
}

h2 {
  font-family: 'Silkscreen', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  margin-top: 22px;   /* espacio encima */
  margin-bottom: 8px; /* debajo más corto */
}

p {
  font-size: 16px;
  line-height: 1.5;
  margin: 6px 0;
}

/* Separador entre secciones (si lo usás) */
.section-separator {
  border: none;
  height: 1px;
  background: var(--gris-suave);
  width: 80%;
  max-width: 320px;
  margin: 18px 0;
}

/* =======================================
   LINKS DE CONTENIDO (home/cv/etc.)
   ======================================= */
.links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.links a {
  background-color: var(--rosa);
  color: var(--blanco);
  padding: 6px 10px;
  font-size: 15px;
  border-radius: 0;
  text-decoration: none;
  transition: background .25s ease;
}
.links a:hover {
  background-color: var(--celeste);
  color: var(--negro);
}

/* =======================================
   FOOTER RESPONSIVE
   ======================================= */
.footer {
  width: 100%;
  margin: 24px 0 20px 0;
  padding: 10px 12px;
  box-sizing: border-box;
}
.footer ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;   /* columna en mobile */
  gap: 10px;
  align-items: flex-start;
}
.footer li { margin: 0; }
.footer a {
  background-color: var(--celeste);
  color: var(--negro);
  padding: 8px 12px;
  font-size: 15px;
  border-radius: 0;
  text-decoration: none;
  transition: background .25s ease;
}
.footer a:hover {
  background-color: var(--rosa);
  color: var(--blanco);
}

/* =======================================
   IMÁGENES Y GALERÍAS
   ======================================= */
.homeImage {
  width: 100%;
  height: auto;
  margin: 0 0 14px 0;
  float: none;            /* evita floats en mobile */
}

.fixedImage {
  float: left;            /* Para que el texto fluya a la derecha */
  margin-right: 25px;     /* Espacio entre la imagen y el texto */
  margin-bottom: 18px;    /* Espacio debajo por si el texto no llega */
  width: auto;            /* Mantener tamaño original */
  height: auto;
  max-width: none;        /* Evita que escale al 100% en mobile */
}

.contentImages img,
.contentImagesHome img {
  max-width: 100%;
  height: auto;
  float: none;
  margin: 0 0 12px 0;
}

/* Galería responsive si la usás */
#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

/* Iframe de video */
iframe {
  width: 100%;
  height: 220px; /* más bajo en mobile */
  border: none;
}

/* =======================================
   OVERLAY DE VIDEO
   ======================================= */
.video-overlay {
  display: none;              /* se muestra via JS */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.video-overlay iframe {
  width: 92%;
  max-width: 640px;
  height: 360px;
  border: none;
}
.close-overlay {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 32px;
  color: var(--blanco);
  cursor: pointer;
}

/* =======================================
   GOOGLE TRANSLATE (un detalle)
   ======================================= */
#google_translate_element a {
  color: var(--negro);
  background-color: var(--blanco);
}

/* --- FIX MENÚ MOBILE (forzar barra compacta y que no cubra toda la pantalla) --- */
@media (max-width: 768px) {
  .menu {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: var(--rosa) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 6px 10px 6px !important;
    box-sizing: border-box !important;
  }

  .menu.hidden {           /* cuando se oculta, que NO deje hueco */
    display: none !important;
    transform: none !important;
  }

  .menu button {
    border: 0 !important;
    background: transparent !important;
    color: var(--blanco) !important;
    padding: 2px 8px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    /* clave para que NO se estiren a todo el ancho */
    flex: 0 0 auto !important;
    min-width: auto !important;
    width: auto !important;
  }

  .menu.tab h3 {
    font-family: 'Silkscreen', sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    color: var(--blanco) !important;
    margin: 0 !important;
    white-space: nowrap !important;  /* evita corte raro */
  }

  /* activo / hover */
  .filter-button-active {
    background: var(--blanco) !important;
    color: var(--negro) !important;
    border-radius: 4px !important;
  }
  .menu.tab .filter-button.filter-button-active h3 {
    color: var(--negro) !important;
  }
  .menu.tab .filter-button:hover h3 {
    color: var(--celeste) !important;
  }

  /* el contenido NO se corre a la izquierda como en desktop */
  .mainContent { margin-left: 0 !important; }
}
/* Bloque para imágenes múltiples debajo del texto/homeImage */
.extra-images {
  clear: both;         /* ← fuerza que empiece debajo de cualquier float */
  margin-top: 12px;    /* espacio arriba del bloque */
  display: flex;       /* o grid, si preferís */
  gap: 10px;
  flex-wrap: wrap;
}

.extra-images img {
  max-width: 160px;    /* ajustá a gusto */
  height: auto;
}
/* Contenedor responsive para embeds 16:9 */
.embed {
  width: 100%;
  max-width: 960px;   /* ajustá a gusto */
  margin: 12px 0;
}

.embed-16x9 iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* fallback por si algún navegador viejo no respeta aspect-ratio */
.embed-16x9 {
  position: relative;
}
.embed-16x9 iframe {
  position: relative;
}
@supports not (aspect-ratio: 16/9) {
  .embed-16x9 {
    height: 0;
    padding-bottom: 56.25%;
  }
  .embed-16x9 iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(340px, 1fr)); /* 2 por fila en desktop */
  gap: 16px;
  align-items: start;
}

.instagram-grid .instagram-media {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;   /* pisa el min-width que mete Instagram */
  margin: 0 !important;
}

@media (max-width: 768px) {
  .instagram-grid {
    grid-template-columns: 1fr; /* 1 por fila en mobile */
    gap: 12px;
  }
}
.item-spacer {
  height: 8px; /* ajusta para más o menos espacio debajo de los Links */
}

/* --- Separador entre items (ej. discografía) --- */
.item-spacer {
  display: block;
  height: 12px;       /* ajustá este valor para más/menos espacio */
  width: 100%;
  clear: both;        /* asegura que el salto baje debajo de imágenes flotantes */
}
.dynamic-grid {
  display: grid;
  grid-gap: 10px; /* separación entre imágenes */
}

.dynamic-grid img {
  width: 100%;
  height: auto;
  display: block;
}