:root {
  /* ===== FONTS ===== */
  --base-font-family: 'Geologica', sans-serif;
  /* ===== COLORS ===== */
  --bs-body-color: #4d4d4d;
  --bs-bg-color: #f2f2f2;
  --bs-pantone-345: #90d5ac;
  --bs-pantone-266: #673aaf;
  --bs-pantone-1775-c: #ef907b;
  --base-color-afiliados: #00bed6;
  --navbar-height: 90px;
}
html,
body {
  background-color: var(--bs-bg-color);
  color: var(--bs-body-color);
  font-family: var(--base-font-family);
  font-weight: 300;
}
.ospe-30-aniversario strong {
  font-weight: 500;
}
body.ospe-30-aniversario {
  padding-top: 90px;
}

.ospe-30-aniversario .container {
  max-width: 1200px;
}

.ospe-30-aniversario .navbar {
  background-color: #fff;
  height: var(--navbar-height);
}

.ospe-30-aniversario .logo {
  display: block;
  width: 200px;
}

.ospe-30-aniversario .main {
  background-color: #fff;
}

.ospe-30-aniversario .hero {
  width: 100%;
  background: #000;
}

.ospe-30-aniversario .hero-video {
  position: relative;
  width: 100%;
  /* Truco del aspect-ratio: 16:9 en mobile para que el alto sea automático y proporcional */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.ospe-30-aniversario .hero iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ospe-30-aniversario .slogan {
  background-color: var(--base-color-afiliados);
  font-size: 3rem;
  padding-block: 25px;
  text-align: center;
}

.ospe-30-aniversario .shape {
  padding-left: 0;
}

.ospe-30-aniversario .shape img {
  display: block;
  width: 90%;
}

.ospe-30-aniversario .manifiesto {
  font-size: 1.25rem;
  line-height: 1.875rem;
}

.ospe-30-aniversario .manifiesto .highlight {
  color: #006580;
}

.ospe-30-aniversario footer {
  background-color: var(--base-color-afiliados);
  padding-block: 2rem;
}

.ospe-30-aniversario footer .social {
  color: #fff;
  display: flex;
  gap: 1rem;
  justify-content: center;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}
.ospe-30-aniversario footer .social a,
.ospe-30-aniversario footer .social .fa-stack-2x {
  color: #fff;
}
.ospe-30-aniversario footer .social .fa-inverse {
  color: var(--base-color-afiliados);
}
.ospe-30-aniversario .social a:hover .fa-circle {
  color: #6a4899;
}

@media (max-width: 500px) {
  .ospe-30-aniversario .slogan div {
    width: 150px;
    text-align: left;
    line-height: 1;
    padding-left: 15px;
  }
}

@media (min-width: 768px) {
  .ospe-30-aniversario .hero {
    /* Alto total del viewport menos los 90px del navbar */
    height: calc(100vh - var(--navbar-height));
    /* Nota opcional: puedes usar 100dvh en vez de 100vh para mejor soporte en móviles avanzados */
  }

  .ospe-30-aniversario .hero-video {
    width: 100%;
    height: 100%;
    aspect-ratio: auto; /* Rompemos el aspect-ratio fijo de mobile */
  }

  .ospe-30-aniversario .hero-video iframe {
    width: 100vw;
    height: calc(100vh - var(--navbar-height));

    /* Forzamos al iframe a comportarse como un 'cover' mediante transformaciones */
    min-width: 100%;
    min-height: 100%;
    object-fit: cover; /* Funciona en iframes modernos, pero por si acaso reforzamos: */

    /* Ajuste de escala para asegurar que cubra todo sin deformar */
    transform: scale(1.35);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.35);
  }
  .ospe-30-aniversario .slogan {
    font-size: 4rem;
  }
}