@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

/* bienvenida.css: pantalla de bienvenida (se muestra una vez por visita, antes del Hero). La arma js/bienvenida.js.
   Va DESPUÉS de intro.css en index.html.
   Todo está medido sobre tu hoja de 1920x1080 (stage); el JS la escala para que entre en cualquier pantalla.
   Para mover una pieza, tocá solo las variables de ".bv" (apartado BV00). Los IDs son bienvenida/categoria/NN. */

/* ===== BV00 · Capa base y variables (posiciones en px sobre la hoja de 1920x1080) ===== */
/* bienvenida/base/01 */
.bv {
  /* Colores */
  --bv-naranja: #ff4d00;
  --bv-naranja-hover: #e04300;
  --bv-azul: #2563a8;          /* borde de la card de SoyAmbi */
  --bv-verde: #1d9a50;         /* borde de la card de AmbiMusic */
  --bv-verde-titulo: #1fb25a;  /* color de "MI WEB" y "QUE ES ESTO" */
  --bv-card-bg: #0a0a0b;
  --bv-font-titulo: 'Bungee', 'Space Grotesk', sans-serif;

  /* Izquierda: card del collage (con borde) */
  --bv-soy-x: 442;  --bv-soy-y: 347;
  /* Izquierda: card de texto "MI WEB" */
  --bv-miweb-x: 86; --bv-miweb-y: 620; --bv-miweb-w: 330; --bv-miweb-h: calc(910 - var(--bv-miweb-y));
  /* Izquierda: capa (logo + fantasma), esquina superior izquierda de la imagen */
  --bv-capa-soy-x: 55; --bv-capa-soy-y: 220;

  /* Derecha: card del collage (con borde) */
  --bv-musica-x: 1100; --bv-musica-y: 346;
  /* Derecha: card de texto "QUE ES ESTO" */
  --bv-que-x: 1521; --bv-que-y: 347; --bv-que-w: 330; --bv-que-h: 250;
  /* Derecha: capa (logo vertical + bebé) */
  --bv-capa-musica-x: 978; --bv-capa-musica-y: 320;

  /* Botones */
  --bv-btn-izq-y: 454;  /* botón izquierdo: arriba del logo */
  --bv-btn-der-y: 622;  /* botón derecho: 25 debajo de la card "QUE ES ESTO" (347 + 250 + 25) */

  /* Todo el contenido sube este valor (en px de la hoja) para quedar más centrado en la pantalla */
  --bv-sube: 50;

  position: fixed;
  inset: 0;
  z-index: 39; /* grain 40 > bienvenida 39 < nav 50 < intro 100: el grano pasa por encima, igual que en el resto de la web */
  overflow: hidden;
  background: #000;
  outline: none;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  color: var(--text-primary, #E9EDE9);
}

/* mientras está abierta no se scrollea la web */
/* bienvenida/base/02 */
html.bienvenida-abierta,
html.bienvenida-abierta body { overflow: hidden; }

/* el nav de arriba queda escondido mientras está abierta (no hay adónde ir) */
/* bienvenida/base/03 */
html.bienvenida-abierta .section-nav { visibility: hidden; pointer-events: none; }

/* ===== BV01 · Hoja de 1920x1080 (el JS le pone la escala en --bv-s) ===== */
/* bienvenida/hoja/01 */
.bv-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  margin: calc(-540px - var(--bv-sube) * 1px) 0 0 -960px;
  transform: scale(var(--bv-s, 1));
  transform-origin: 50% 50%;
}

/* bienvenida/hoja/02 */
.bv-lado {
  position: absolute;
  inset: 0;
  pointer-events: none; /* solo los botones reciben clic */
}

/* ===== BV02 · Textos sueltos y línea divisoria ===== */
/* bienvenida/texto-suelto/01 */
.bv-eyebrow {
  position: absolute;
  left: 51px;
  top: 150px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary, #9AA69E);
}

/* bienvenida/linea/01 */
.bv-linea {
  display: none; /* divisor quitado */
  position: absolute;
  left: 959px;
  top: 313px;
  width: 1px;
  height: 657px;
  background: var(--border-strong, rgba(233,237,233,.16));
}

/* ===== BV03 · Cards de collage (borde de color + esquinas redondeadas) ===== */
/* bienvenida/collage/01 */
.bv-collage {
  position: absolute;
  width: 394px;   /* 366 de imagen + 14 de borde por lado */
  height: 570px;  /* 542 de imagen + 14 de borde por lado */
  box-sizing: border-box;
  border: 14px solid var(--bv-azul);
  border-radius: 24px;
  overflow: hidden;
  background: #000;
}
/* bienvenida/collage/02 */
.bv-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* bienvenida/collage/03 */
.bv-collage--soy { left: calc(var(--bv-soy-x) * 1px); top: calc(var(--bv-soy-y) * 1px); }
/* bienvenida/collage/04 */
.bv-collage--musica {
  left: calc(var(--bv-musica-x) * 1px);
  top: calc(var(--bv-musica-y) * 1px);
  border-color: var(--bv-verde);
}

/* ===== BV04 · Cards de texto ===== */
/* bienvenida/card-texto/01 */
.bv-texto {
  position: absolute;
  box-sizing: border-box;
  border-radius: 10px;
  background: var(--bv-card-bg);
}
/* bienvenida/card-texto/02 */
.bv-titulo {
  font-family: var(--bv-font-titulo);
  font-size: 28px;
  font-weight: 400; /* Bungee ya es gruesa */
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--bv-verde-titulo);
}
/* bienvenida/card-texto/03 */
.bv-texto p + p { margin-top: 1.1em; }
/* bienvenida/card-texto/04 */
.bv-texto p {
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--text-primary, #E9EDE9);
}
/* bienvenida/card-texto/05 */
.bv-texto--soy {
  left: calc(var(--bv-miweb-x) * 1px);
  top: calc(var(--bv-miweb-y) * 1px);
  width: calc(var(--bv-miweb-w) * 1px);
  height: calc(var(--bv-miweb-h) * 1px);
  padding: calc((712 - var(--bv-miweb-y)) * 1px) 24px 0; /* el texto no se mueve cuando cambia la card */
  text-align: right;
}
/* bienvenida/card-texto/06 */
.bv-texto--soy .bv-titulo { margin-bottom: 26px; }
/* bienvenida/card-texto/07 */
.bv-texto--musica {
  left: calc(var(--bv-que-x) * 1px);
  top: calc(var(--bv-que-y) * 1px);
  width: calc(var(--bv-que-w) * 1px);
  height: calc(var(--bv-que-h) * 1px);
  padding: 26px 26px 0;
  text-align: left;
}
/* bienvenida/card-texto/08 */
.bv-texto--musica .bv-titulo { margin-bottom: 22px; }

/* ===== BV05 · Capas decorativas (logo + fantasma / logo vertical + bebé) ===== */
/* bienvenida/capa/01 */
.bv-capa {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none; /* no bloquea nada de lo que tiene debajo */
}
/* bienvenida/capa/02 */
.bv-capa--soy {
  left: calc(var(--bv-capa-soy-x) * 1px);
  top: calc(var(--bv-capa-soy-y) * 1px);
  width: 498px;
}
/* bienvenida/capa/03 */
.bv-capa--musica {
  left: calc(var(--bv-capa-musica-x) * 1px);
  top: calc(var(--bv-capa-musica-y) * 1px);
  width: 643px;
}

/* ===== BV06 · Botones (mismo estilo que "Volver a noticias") ===== */
/* bienvenida/boton/01 */
.bv-btn {
  position: absolute;
  display: inline-block;
  padding: .85em 1.7em;
  border-radius: 4px;
  background: var(--bv-naranja);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), background-color .25s;
}
/* bienvenida/boton/02 */
.bv-btn:hover,
.bv-btn:focus-visible {
  background: var(--bv-naranja-hover);
  transform: translateY(-3px);
  outline: none;
}
/* bienvenida/boton/03 */
.bv-btn--izq { left: 86px; top: calc(var(--bv-btn-izq-y) * 1px); }   /* alineado al borde izquierdo de la card "MI WEB" */
/* bienvenida/boton/04 */
.bv-btn--der { left: 1851px; top: calc(var(--bv-btn-der-y) * 1px); translate: -100% 0; }  /* alineado al borde derecho de la card "QUE ES ESTO" */

/* ===== BV07 · Menos movimiento ===== */
/* bienvenida/reduced-motion/01 */
@media (prefers-reduced-motion: reduce) {
  .bv-btn { transition: none; }
  .bv-btn:hover { transform: none; }
}