* {
	margin: 0;
	padding: 0;
    /*outline: 1px solid red;*/
}

html, body {
	background-image: url('/IMAGENES/FondoEstrellado.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #f7f7f7;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    font-family: 'MiTipografiaPersonalizada', ;
}

.row::after {
    content: "";
    display: table;
    clear: both;
}

@font-face {
  font-family: 'Tipografia-StarJedi';
  src: url('../FONTS/Starjedi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tipografia-LemonMilk';
  src: url('../FONTS/LEMONMILK-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/*--------------------------------HEADER----------------------------------*/

#btn-menu {
    filter: drop-shadow(0 0 10px rgb(0, 0, 0));
}

#off-canvas {
    position: fixed; 
    top: 10px; 
    right: 10px; 
    z-index: 1050;
    max-width:15rem;
}

#off-canvas:focus,
#off-canvas:focus-visible,
#off-canvas:active {
    outline: none;
    box-shadow: none;
}

#fondo-menu {
    background-color:#05292e;
}

#img-menu {
    width: 15rem;
}

#off-canvas {
  width: 5rem;
}

@media (min-width: 900px) {
  #off-canvas {
    width: 13rem;
  }
}

#Titulo {
  font-family: 'Tipografia-StarJedi', sans-serif;
  font-size: clamp(0.2rem, 6vw, 10rem);
  margin-top: 0;
}

#SubTitulo {
    font-family: 'Tipografia-LemonMilk', sans-serif;
    margin-top: 2rem;
    margin-bottom: 0;
    font-size: clamp(0.2rem, 6vw, 3rem);
}

#header-logo {
    height: clamp(0.2, 7vw, 10rem);
}

#header-logo-covao {
    max-width: 75px; 
    height: auto;
    margin-left: 10px;
}

/*------------------------------------------------------------------------*/
/*--------------------------------MAIN------------------------------------*/

#Cohete {
    max-height: 50rem;
    height: auto;
}

#Trio {
    width: 55rem;
}

#texto {
    font-size: clamp(0.9rem, 2vw, 1.6rem);
}

#texto-oscuro {
    color: #05292e;
    font-size: clamp(0.9rem, 2vw, 1.8rem);
    margin-left: 1rem;
    margin-right: 1rem;
}

main {
    margin: 0;
    color: #f7f7f7;
}


#DW {
    color: #04c5b8;
}


#DW-Oscuro {
    color: #046462;
}

#Titulo-DW {
    color: #04c5b8;
    font-family: 'Tipografia-StarJedi', sans-serif;
    font-size: clamp(0.9rem, 2vw, 3rem);
}

#Titulo-Oscuro {
    color: #f7f7f7;
    font-family: 'Tipografia-StarJedi', sans-serif;
    font-size: clamp(0.9rem, 2.5vw, 3rem);
}

#btn-Menu {
    outline: none;
    box-shadow: none;
}

/*------------------------------------------------------------------------*/
/*------------------------------FOOTER------------------------------------*/

#DivFooter {
    background-color: #05292e;
}

#footerText {
    color: #f7f7f7;
}

/*------------------------------------------------------------------------*/
/*------------------------------CARRUSEL----------------------------------*/

#myCarousel {
    border-radius: 15px;
    overflow: hidden;
}

#altura-item {
    height: clamp(35rem, 40vw, 40rem);
}

.carousel-item {
  background: rgba(0, 0, 0, 0.447);
  border-radius: 15px;
  flex-direction: column;
  justify-content: center;
}

#texto-Carrusel {
    font-size: clamp(0.9rem, 2vw, 1.3rem);
}

#logo-DW {
    width: 20rem;
}

h2,h1 {
    font-size: clamp(0.5rem, 4vw, 2rem);
}

#carrusel-cont {
    min-height: 75vh;
}

.carousel-indicators button {
    background-color: #fff;
}

.linea-horizontal {
    border-bottom: 4px solid #00A69A;
    max-width: 75vh;
}

#btn-carrusel {
    background-color: #00A69A;
    color: #d6d6d6;
    font-size: clamp(0.9rem, 2vw, 1.5rem);
}

#btn-carrusel:hover {
    background-color: #06c1b5;
    color: #d6d6d6;
}



/*------------------------------------------------------------------------*/
/*-------------------------BOTONES CARRUSEL-------------------------------*/

.scroll {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.scroll div {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left var(--t, 15s) linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.scroll div span {
    display: inline-flex;
    margin: 10px;
    letter-spacing: 0.2rem;
    background: #111110;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    transition: 0.5s;
}

.scroll div span:hover {
    background: #00A69A;
    cursor: pointer;
}

#carrusel-btn {
    margin-top: 10%;
}

/*------------------------------------------------------------------------*/
/*--------------------------Plan de Estudios------------------------------*/

#Contenedor-PE {
    background-image: url('/IMAGENES/PlanDeEstudios.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.linea-horizontal-2 {
    border-bottom: 4px solid #026f6a;
    max-width: 75vh;
    width: 0;
    transition: width 0.8s ease;
}

.linea-horizontal-2.visible {
    width: 100%;
}

#btn-PE {
    background-color: #026f6a;
}

#Descargar {
    text-decoration: none;
    color: #d6d6d6;
    font-size: clamp(0.9rem, 2vw, 2rem);
}

#btn-PE:hover {
    background-color: #09928b;
    color: #d6d6d6;
}

@keyframes salto {
    0% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
    50% { transform: translateY(3px); }
    70% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

#btn-PE.salto-animacion {
    animation: salto 0.5s ease;
}



/*------------------------------------------------------------------------*/
/*---------------------------Hablidades Blandas---------------------------*/
#prev, #next {
    position: absolute;
    top: 45%; 
    transform: translateY(-45%);
    width: 60px; 
    height: 60px;
    background-color: rgba(0, 0, 0, 0.447); 
    border-radius: 50%; 
}

#next {
    left: 82rem;
}

#prev {
    left:-5rem;
}

/*------------------------------------------------------------------------*/
/*------------------------------Subareas----------------------------------*/

#Contenedor-subarea1 {
    background-image: url('/IMAGENES/Subarea1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#Contenedor-subarea2 {
    background-image: url('/IMAGENES/Subarea2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#contenedor-subareas {
    background-color: #f7f7f762;
}

#subarea1 {
    height: 100%;
    width: 100%;
}

#Divisor-Horizontal {
    height: 1rem;
    background-color: #05292e;
}


/*------------------------------------------------------------------------*/
/*--------------------------------chat------------------------------------*/

#chatSimulado {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: auto;
  padding-bottom: 3rem;
}

.mensaje {
    font-size: clamp(0.9rem, 2vw, 1.6rem);
    color: #05292e;
    max-width: 75%;
    padding: 1rem 2rem;
    margin: 1.5rem;
    border-radius: 15px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
    position: relative;
  
}

.mensaje.visible {
    opacity: 1;
    transform: translateY(0);
    background-color: #f7f7f7;
}

.izquierda {
    align-self: flex-start;
    border-top-left-radius: 0;
    text-align: start;
}

.derecha {
    align-self: flex-end;
    border-top-right-radius: 0;
    text-align: end;
}

.nombre {
    font-size: clamp(0.9rem, 3vw, 3rem);
    font-weight: bold;
    margin-bottom: 3px;
    color: #00A69A;
}