/* ====== VARIABLES GLOBALES ====== */
:root{
  --banner-h: 128px;
  --navbar-h: 68px;
  --banner-x: 3%;
  --banner-y: 65%;
  --banner-scale-desktop: 2.7;
  --banner-x-mobile: 50%;
  --banner-y-mobile: 48%;
  --banner-scale-mobile: 1.10;
  --hero-min-h: 77vh;

  /* Hero/bloque de portada (por si lo usás) */
  --hero-min-h: 77vh;
}

@media (max-width: 768px){
  :root{
    --banner-h: 96px;   /* altura banner móvil */
    --navbar-h: 56px;

    /* afinado mobile del banner */
    --banner-x-mobile: 6%;
    --banner-y-mobile: 48%;
    --banner-scale-mobile: 1.15;
    --hero-min-h: 72vh;
  }
}

/* ===== BANNER STICKY ===== */
.banner-section{
  position: sticky !important;
  top: 0;
  height: var(--banner-h) !important;
  z-index: 1190 !important;
  overflow: hidden;
  isolation: isolate;
  background: #000; /* fallback mientras carga el video */
}

/* Si tenés navbar sticky, respetá el offset */
.custom-navbar{ position: sticky !important; top: var(--banner-h); z-index: 1200 !important; }
html{ scroll-padding-top: calc(var(--banner-h) + var(--navbar-h)); }

/* Capa de video del banner */
.banner-section .banner-video{ position:absolute; inset:0; z-index:0; }
.banner-section .video-bloque{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* foco + zoom escritorio */
  object-position: var(--banner-x) var(--banner-y);
  transform-origin: var(--banner-x) var(--banner-y);
  transform: scale(var(--banner-scale-desktop));
  display:block; background:#000;
}
@media (max-width:768px){
  .banner-section .video-bloque{
    object-position: var(--banner-x-mobile) var(--banner-y-mobile);
    transform-origin: var(--banner-x-mobile) var(--banner-y-mobile);
    transform: scale(var(--banner-scale-mobile));
  }
}

/* Máscara para legibilidad del texto */
.banner-video-mask{
  position: absolute; inset: 0; pointer-events: none; z-index:1;
  background:
    radial-gradient(120% 120% at 0% 50%, rgba(0,0,0,.40), transparent 60%),
    radial-gradient(120% 120% at 100% 50%, rgba(0,0,0,.40), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.28));
}

/* ===== TEXTO: entra -> queda en el CENTRO -> sale ===== */
.banner-marquee{
  position: absolute;
  inset: 0;                       /* ocupa todo el banner */
  display: grid;
  place-items: center;            /* centro perfecto (X/Y) */
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  /* desvanecer bordes para entrada/salida suave */
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.banner-line{
  display: inline-block;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(.9rem, 2.3vw, 1.1rem);
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  animation: bannerSweep 7s ease-in-out infinite;
  will-change: transform, opacity;
}
/* entra desde izq -> PAUSA en centro -> sale a der */
@keyframes bannerSweep{
  0%   { transform: translateX(-120%); opacity: 0; }
  22%  { transform: translateX(  0%); opacity: 1; } /* llegó al centro */
  78%  { transform: translateX(  0%); opacity: 1; } /* pausa */
  100% { transform: translateX(120%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .banner-line{ animation: none; }
}

/* Ocultar cualquier bloque de redes si quedara en el HTML del banner */
.banner-section .banner-bubble-wrapper,
.banner-section .social-bubble{ display: none !important; }

/* ====== HERO / BLOQUE DE PORTADA (si lo usás) ====== */
/* Fondo sólido con círculos */
.bloque-fondo {
  background-color: var(--primario, #1e1e1e);
  position: relative;
  z-index: 1;
  min-height: var(--hero-min-h);
  display: grid;                 /* centrado vertical + horizontal */
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.bloque-fondo .decor-circulo { display: block !important; position:absolute; border-radius:50%; opacity:.06; z-index:0; pointer-events:none; }
/* Esquinas superiores */
.bloque-fondo .esquina-1 { width:300px; height:300px; background:var(--secundario, #512e5f); top:-120px; left:-120px; }
.bloque-fondo .esquina-2 { width:280px; height:280px; background:var(--terciario, #3498db);  top:-120px; right:-120px; }
/* ocultar inferiores */
.bloque-fondo .esquina-3, .bloque-fondo .esquina-4 { display:none !important; }
/* laterales */
.bloque-fondo .costado-izq { width:380px; height:380px; background:var(--sexto, #9b59b6);  top:50%; left:-190px;  transform:translateY(-50%); }
.bloque-fondo .costado-der { width:380px; height:380px; background:var(--septimo, #94ba7e); top:50%; right:-190px; transform:translateY(-50%); }
/* extras */
.bloque-fondo .extra-1 { width:200px; height:200px; background:var(--octavo, #e74c3c); top:25%; left:20%; }
.bloque-fondo .extra-2 { width:160px; height:160px; background:var(--noveno, #16a085); bottom:20%; right:25%; }
.bloque-fondo .extra-3 { width:100px; height:100px; background:var(--decimo, #e67e22); top:60%; left:50%; transform:translateX(-50%); }

/* Contenido por delante */
.contenido-bloque,
.bloque-video-container,
.logo-bloque { position: relative; z-index: 1; }

/* Texto */
.contenido-bloque h3 {
  font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 1rem;
  text-transform: uppercase; color: var(--secundario);
}
.contenido-bloque h1 {
  font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; color: #000;
}
.contenido-bloque p {
  font-size: 1.2rem; max-width: 700px; margin: 0 auto 2rem; color: #35633f;
}

/* Botón */
.btn-bloque {
  padding: .8rem 1.8rem; border:1px solid #fff; border-radius:999px;
  background: transparent; color:#fff; font-size:1rem; text-decoration:none;
  transition: .3s ease;
}
.btn-bloque:hover { background:#fff; color:#000; }

/* VIDEO del BLOQUE (full-bleed) */
.bloque-video-container{
  width: 100vw; max-width: none;
  position: relative; overflow: hidden; border-radius: 1rem;
  left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
}
/* Nota: este .video-bloque es genérico; el del banner se controla arriba con scope */
.video-bloque{
  width: 100%;
  max-width: 700px;           /* en el bloque, no en el banner */
  aspect-ratio: 16/9;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 0 25px rgba(255,255,255,.1);
  display: block;
  object-fit: cover;
  background: #000;
}
.bloque-video-container iframe,
.bloque-video-container video {
  width: 100% !important; height: 100% !important; display: block; border: 0;
}

/* Logo */
.logo-bloque{ display:flex; justify-content:center; margin: 1rem 0 2rem; }
.logo-img-bloque{ height:200px; width:200px; border-radius:50%; object-fit:cover; transition: transform .5s ease; }
.logo-img-bloque:hover{ transform: scale(1.1); }

/* ===== Responsive hero ===== */
@media (max-width: 768px) {
  .contenido-bloque h1 { font-size: 1.9rem; }
  .contenido-bloque p  { font-size: 1.25rem; }
  .video-bloque { max-width: 92%; object-fit: contain; }
  .logo-img-bloque { height: 150px; width: 150px; }

  .bloque-fondo .decor-circulo { opacity: 0.045; }
  .bloque-fondo .esquina-1 { width:200px; height:200px; top:-100px; left:-100px; }
  .bloque-fondo .esquina-2 { width:190px; height:190px; top:-100px; right:-100px; }
  .bloque-fondo .costado-izq { width:260px; height:260px; left:-130px; }
  .bloque-fondo .costado-der { width:260px; height:260px; right:-130px; }
  .bloque-fondo .extra-1 { width:140px; height:140px; top:28%; left:14%; }
  .bloque-fondo .extra-2 { width:110px; height:110px; bottom:18%; right:18%; }
  .bloque-fondo .extra-3 { width:80px;  height:80px;  top:62%; }
}

/* Reset/basics */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin:0 !important; padding:0 !important; background: var(--primario); }