/* ---------- RESET Y BASE ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; font-size: 17px; background: #111; overflow: hidden; height: 100vh; }

/* ---------- VIDEO ---------- */
#myVideo {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  object-fit: cover; z-index: 0;
}
#video-fallback { position: fixed; inset: 0; background: #111; z-index: 0; }

/* ---------- OVERLAY Y CONTENIDO ---------- */
#overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
}
#content {
  pointer-events: all;
  width: 100%;
  max-height: 35vh;
  overflow: visible;
  background: linear-gradient(to top, rgba(255,0,80,0.92) 0%, rgba(255,0,80,0.45) 100%);
  color: #ff0000;
  padding: clamp(8px,2vh,20px) clamp(10px,2vw,20px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(4px,1vh,10px);
}
#content h1 {
  font-family: Arial Black, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.2rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  color: #ff0000;
  text-shadow: 0 0 6px rgba(255,255,255,0.5);
  line-height: 1.1;
}
#content p {
  color: #ff0000; font-weight: 600; font-size: clamp(0.75rem,2vw,1.2rem);
  text-shadow: 0 0 8px rgba(255,255,255,0.56), 0 1px 3px rgba(255,255,255,0.35);
}
#content a { color: #ff0000; text-decoration: underline dotted; text-underline-offset: 3px; }

/* ---------- BOTONES Y BARRAS ---------- */
#bottom-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#bottomidm-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }

#myBtn {
  font-size: clamp(13px, 1.5vw, 18px);
  font-weight: 900;
  text-transform: uppercase;
  padding: clamp(5px, 1vh, 10px) clamp(8px, 1.5vw, 14px);
  border: 3px solid #ff0000;
  background: rgba(247, 0, 70, 0.7);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, text-shadow 0.2s;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

#myBtn:hover,
#myBtn:focus-visible {
  background: #ff0000;
  color: rgba(255, 255, 255, 0.7);  /* un poco más visible al interactuar */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  outline: none;
}

/* Social bar e idiomas unificados */
#social-bar, #traduccion-bar {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#social-bar a, #traduccion-bar a {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,0,0,0.35); border: 2px solid #ff0000; border-radius: 6px;
  transition: background 0.2s, transform 0.15s; text-decoration: none; color: #ff0000;
}
#social-bar a {
  width: clamp(28px,4vw,38px); height: clamp(28px,4vw,38px);
}
#traduccion-bar a {
  width: clamp(18px,4vw,25px); height: clamp(18px,4vw,25px);
}
#social-bar a:hover, #social-bar a:focus-visible,
#traduccion-bar a:hover, #traduccion-bar a:focus-visible {
  background: #ff0000; transform: scale(1.12); outline: none;
}
#social-bar a svg { width: clamp(14px,2vw,20px); height: clamp(14px,2vw,20px); }
#traduccion-bar a svg { width: clamp(12px,2.3vw,18px); height: clamp(12px,2.3vw,18px); }

/* ---------- ENLACES GENERALES ---------- */
.general-link {
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px;
  background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: #ff0000; text-shadow: 0 0 6px rgba(255,255,255,0.5);
}
.general-link:hover, .general-link:focus-visible {
  text-shadow: 0 0 10px rgba(255,255,255,0.8); outline: none;
}