/* === ESTILOS GENERALES Y RESET === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Raleway', sans-serif;
  color: #fff;
  overflow-x: hidden;
  background: none;
  position: relative;
  min-height: 100vh;
}

/* Videos de fondo */
.background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  background-size: cover;
}

/* Mostrar video desktop por defecto */
#background-video-desktop { display: block; object-position: center; }
#background-video-mobile  { display: none;  object-position: center; }

@media (max-width: 600px) {
  #background-video-desktop { display: none; }
  #background-video-mobile  { display: block; }
}

/* Hero */
.hero {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

.logo {
  width: clamp(150px, 100vw, 450px);
  margin-top: 5vh;
  margin-bottom: 10vh;
}

.main-text__level1,
.main-text__level2 {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 200;
  text-transform: uppercase;
  line-height: 1.3;
}
.main-text__level1 { margin-bottom: 2vh; }
.main-text__level2 { margin-bottom: 8vh; }

.social-links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: 3vh;
}

.social-links img {
  height: clamp(32px, 0.8vw, 56px);
  width: auto;
}

.location {
  font-size: clamp(0.8rem, 0.6vw, 1rem);
  font-weight: 100;
  margin-top: 1vh;
  color: #fff;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .logo {
    width: 80vw;
    margin-top: 0.2vh;
    margin-bottom: 20vh;
  }
  .main-text__level1 {
    font-size: clamp(0.7rem, 4vw, 1.2rem);
    margin-bottom: 2.2rem;
  }
  .main-text__level2 {
    font-size: clamp(0.7rem, 4vw, 1.2rem);
    margin-bottom: 10vh;
  }
  .social-links {
    gap: clamp(2.5rem, 8vw, 4rem);
    margin-bottom: 3vh;
  }
  .location {
    font-size: clamp(0.7rem, 3vw, 0.9rem);
    margin-bottom: 1vh;
  }
}

/* Secciones de contenido */
section {
  padding: 4rem 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

section h2 {
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
}

section p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #f5f5f5;
}

section ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

section ul li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: #f5f5f5;
}

/* Footer */
.footer {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: rgba(0, 0, 0, 0.75);
  padding: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__col {
  font-size: 0.9rem;
  line-height: 1.4;
}
.footer a {
  color: #fff;
  text-decoration: underline;
}

/* ===== Fix fuerte para páginas legales (privacidad / términos) ===== */
:root{
  --legal-text:#111;
  --legal-bg:#fff;
}

body.page{
  background:var(--legal-bg) !important;
  color:var(--legal-text) !important;
}

/* Si envolvés el contenido en .doc */
.page .doc,
.page .doc *{
  color:var(--legal-text) !important;
  background:var(--legal-bg) !important;
}
.page .doc a{
  color:var(--legal-text) !important;
  text-decoration: underline;
}

/* Fallback por si aún no usás .doc (se activará cuando el body tenga class="page") */
.page section,
.page section *{
  color:var(--legal-text) !important;
  background:var(--legal-bg) !important;
}

/* === Contacto: links en celeste claro sobre fondo oscuro (sin subrayado) === */
.contact a {
  color: #9fdcff;
  text-decoration: none;            /* quitar subrayado */
}
.contact a:hover,
.contact a:focus {
  color: #e6f6ff;
  text-decoration: none;            /* mantener sin subrayado en hover/focus */
}
.contact a:focus-visible {
  outline: 2px solid currentColor;  /* accesibilidad sin subrayado */
  outline-offset: 2px;
}