.S2{
  margin-bottom: 0;
  margin-top: 0;
}

.S4{
  margin-bottom: 100px;
}


.S2 h2{
    width: 100%;
}

.divisor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.textos h3{
  font-size: calc(60*((0.873px*0.2) + (0.045vw*0.8)));
  margin-bottom: calc(1*((0.873px*0.2) + (0.045vw*0.8)));
}

.textos h4{
  font-size: calc(20*((0.873px*0.2) + (0.045vw*0.8)));
  margin-top: 0;
  margin-bottom: calc(30*((0.873px*0.2) + (0.045vw*0.8)));
  font-style: italic;
}

.formacion{
  margin-bottom: 0;
  margin-top: calc(30*((0.873px*0.2) + (0.045vw*0.8)));
}

.textos ul{
  margin-top: calc(5*((0.873px*0.2) + (0.045vw*0.8)));
  font-size: calc(20*((0.873px*0.2) + (0.045vw*0.8)));
  font-style: italic;
  
}

.textos li{
  list-style: inside;
}

.divisor .textos {
  width: 50%;
}

#persona-1 {
  position: relative;
  width: 50%;   /* 🔹 Ajusta el ancho a mano */
  aspect-ratio: 1/1; /* opcional para mantener proporción */
}

#persona-1 .portal {
  position: absolute;
  inset: 0;
  z-index: 0; /* detrás */
}

#persona-1 .roman {
  position: absolute;
  inset: 0;
  z-index: 1; /* encima */
}


.S3{
  margin-top: 0;
  margin-bottom: 0;
}

/* Estilos Generales de la Sección */
.S3-video-section {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Estilo base para ambos contenedores */
.video-contenedor {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
}

.video-contenedor video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === LÓGICA DE PANTALLAS (Media Queries) === */

/* A. PANTALLAS GRANDES (Ordenador: 992px o más) */

.video-desktop {
  display: block; /* Se muestra el horizontal */
  aspect-ratio: 16 / 9; /* Proporción panorámica */
}

.video-mobile {
  display: none; /* Se oculta el vertical */
}


/* B. PANTALLAS PEQUEÑAS (Móvil/Tablet: Menos de 992px) */
@media (max-width: 991.98px) {
    .video-desktop {
        display: none; /* Se oculta el horizontal */
    }

    .video-mobile {
        display: block; /* Se muestra el vertical */
        max-width: 450px; /* Límite para que en tablets no ocupe toda la pantalla */
        aspect-ratio: 9 / 16; /* Proporción vertical (Tik-Tok style) */
    }
}



@media (max-width: 992px) {
  .S2{
    margin-top: 120px;
  }

  .S3{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
  }

  .S2 h2{
    display: none;
  }

  .divisor {
    flex-direction: column;
    align-content: center;
  }

  .divisor .textos {
    width: 90%;
  }

  #persona-1 {
    position: relative;
    width: 120%;   /* 🔹 Ajusta el ancho a mano */
    aspect-ratio: 1/1; /* opcional para mantener proporción */
  }

  .textos{
    align-content: center;
  }

  .textos h3{
    font-size: 40px;
    margin-bottom: calc(1*((0.873px*0.2) + (0.045vw*0.8)));
    margin-top: 0;
  }

  .S4{
    margin-top: 0;
  }


  .textos h4{
    font-size: 20px;
    display: block;
  }

  .textos p{
    font-size: 110%;
  }

  .textos ul{
    font-size: 110%;
  }

  .formacion{
    margin-top: 30px;
  }

  div.roman,
  div.portal{
    transform: translateX(-70px);
  }

  
}