@-ms-viewport{width:device-width;}
:root{
  --fucsia:#bf0c8e;
  --turquesa:#8addd2;
  --grisClaro:#eaeaea;
  --grisOscuro:#b3b3b3;
  --naranja:#ff6600;
  --naranjaOscuro:#d15808;
  --morado:#572263;
  --lila:#fde4ef;
  --verde:#8cd813;
}

.noButton{
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 12px 24px;
  border: 1px solid #ffffff;
  font: normal normal 20px Roboto;
  color: #000;
  text-decoration: none;
}

.button{
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 12px 24px;
  box-shadow:inset 0px 1px 3px 0px #ffffff;
  background:linear-gradient(to bottom, #bf0c8e 5%, #eb008d 100%);
  background-color:#bf0c8e;
  border-radius:5px;
  border:1px solid #ffffff;
  color:#ffffff;
  text-decoration:none;
  text-shadow:0px -1px 0px #800080;
}

.button:hover,
.button:focus {
  background:linear-gradient(to bottom, #eb008d 5%, #bf0c8e 100%);
  background-color:#eb008d;
  color: #ffffff;
  text-decoration: none;
}

.button:active {
    top:1px;
}

select {border-radius:5px;background:white;border: thin solid black}
input {border-radius:5px;border: thin solid black}
a{text-decoration:none;cursor:pointer;outline:none;}
a:visited {text-decoration: none;}
body {background:var(--grisOscuro);margin: 0 auto 0 auto;font-family:Roboto, sans-serif;}
#menu{z-index:102;position: -webkit-sticky;position: sticky;top: 0;overflow: auto;max-height: 80vh;margin:auto;width:100%;}

.menu2{
  width:100%;
  max-width:800px;
  background:linear-gradient(to bottom, #bf0c8e 5%, #eb008d 100%);
  background-color:#bf0c8e;
  margin:auto;
  border:thin var(--morado) solid;
  border-bottom:0;
  box-sizing: border-box;
}

div{overflow:auto}
.ancho{width:100%}
.center{text-align:center}
.left{text-align:left}
.right{text-align:right}
.bold{font-weight:bold}
h1{font-size:50px;font-family:Lato, sans-serif;font-weight:900;color:var(--fucsia);margin:0}

.descTitle{font-size:20px;font-family:Lato, sans-serif;font-weight:900;}
h2{font-size:16px;font-weight:400;}
.shadow{text-shadow: 0px 0px #000000, 0 0 0.0em black, 0 0 0.2em black;}
.white-shadow{text-shadow: 1px 1px 1px #FFFFFF;}
.de{font-size:40px;}
.superGrande{font-size:50px}
.grande{font-size:35px}
.mediano{font-size:25px}
.chico{font-size:20px}
.micro{font-size:15px}

.topliltit{margin-top:2%;padding:1;font-size:20px;color:#fff}
.topbigtit{padding:1;font-size:35px;color:#fff}

.float{position:relative;float:left;}
.socialTop{margin-top:3.8%;}

/* --- NUEVOS ESTILOS PARA EL MENU SOCIAL (Flexbox) --- */
#social {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Mantenemos el float del padre, pero flexbox organiza lo de adentro */
}

/* Estilo base para los enlaces de los iconos (Desktop 50px) */
.social-icon-link {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 8px; /* Espacio horizontal entre iconos */
  flex-shrink: 0; /* Evita que se aplasten si falta espacio */
}

/* La imagen siempre llena el contenedor del enlace */
.social-icon-img {
  width: 100%;
  height: auto;
  display: block;
}
/* ---------------------------------------------------- */


#rol {
  background-image: url('https://limateens.com/images/rol.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#brochure {
  background-image: url('https://limateens.com/images/brochure.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#whatsapp{z-index:1000;position:fixed; bottom:2%;right:2%;}
.botonera{margin-top:4%;width:100%;text-align:center;}
.logButton {background:var(--turquesa);border:thin black solid;width:40%;margin:2.6%;padding:2%;cursor:pointer;float:left;position:relative;}
.logButton *{float:left;position:relative;}
.logButton div{width:86%;border:0;padding:0;margin:0;}
.logButton picture{width:9.5%;margin-top:1%}
.logButton picture>img{width:100%;height:auto;}

.cancelButton{background:white;border:thin black solid;width:40%;margin:2.6%;padding:2%;cursor:pointer}
.saveButton{background:var(--turquesa);border:thin black solid;width:40%;margin:2.6%;padding:2%;cursor:pointer}
#temporada {margin:4% 0 2% 0}
#hamburger{padding-bottom:0%;width:60%;margin:auto;}
#hamburger div{border-radius: 2px}
#horariosDiv{max-width:95%}
.hamwhite{width:100%;padding-bottom:10%;background:white}
.ham{width:100%;padding-bottom:15%;}
.cursor{cursor:pointer}

.texto-con-contorno {
  color: white; 
  text-shadow: 
      -1px -1px 0 black,
      1px -1px 0 black,
      -1px 1px 0 black,
      1px 1px 0 black;
}

.lazy-background {
  border-top: thin var(--morado) solid;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.lazy-fotitos{width:50%;padding-bottom:90%;}
.lazy-chics {width:100%;padding-bottom:70%;}
#portada {width:100%;}

.divShadow{
  box-shadow: 1px 1.3px 4px -9px rgba(0,0,0,0.47);
  -webkit-box-shadow: 1px 1.3px 4px -9px rgba(0,0,0,0.47);
  -moz-box-shadow:1px 1.3px 4px -9px  rgba(0,0,0,0.47);
}

.no-detect {
  user-select: none;
  touch-action: manipulation; 
}

.lazy-title{font-size:20px;font-family:Lato, sans-serif;font-weight:900;text-align:right;padding:0.5% 2% 0.5%;width:60%;margin:2% 0;position:absolute;color:var(--fucsia);border-bottom-right-radius:5px;border-top-right-radius:5px;border:thin rgba(255,255,255) solid;border-left:0;background:rgba(140,216,19,1);}
.lazyBtn{width:42%;margin:100% 0 0 24%;position:absolute;}
.lazyDesc{width:98%;padding:1%;position:absolute;bottom:0;background: rgb(140,216,19);background: rgb(140,216,19);background: linear-gradient(90deg, rgba(140,216,19,1) 0%, rgba(140,216,19,1) 89%, rgba(128,198,18,1) 100%);}

#sesion.visible {background-image:url("images/sesion-de-fotos.webp");background-size: 100% auto;}
#autoestima.visible {background-image:url("images/autoestima2.webp");background-size: 100% auto;}
#desfiles.visible {background-image: url("images/desfiles.webp");background-size: 100% auto;}
#maquillaje.visible {background-image: url("images/modelolt1.webp");background-size: 100% auto;}
#peinado.visible {background-image: url("images/alumnaslt1.webp");background-size: 100% auto;}
#chics.visible {background-image: url("images/chicasteen1.webp");background-size: 100% auto;}

.celular{margin-left:1%;width:250px;}
.twingo {width:198.4px;margin:0.1%;}

.lds-facebook {display: inline-block;position: relative;width: 80px;height: 80px;}
.lds-facebook div {display: inline-block;position: absolute;left: 8px;width: 16px;background: var(--fucsia);animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;}
.lds-facebook div:nth-child(1) {left: 8px;animation-delay: -0.24s;}
.lds-facebook div:nth-child(2) {left: 32px;animation-delay: -0.12s;}
.lds-facebook div:nth-child(3) {left: 56px;animation-delay: 0;}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.iframe-container iframe{position: absolute;top:0;left: 0;width: 100%;height: 100%;}

.iframe-container {
  position: relative;
  width: 100%; 
  height: 0; 
  padding-bottom: 56.25%; 
}

@media (max-aspect-ratio: 4/3) {
  .iframe-container {
    padding-bottom: 75%; 
  }
}

@keyframes lds-facebook {0% {top: 8px;height: 64px;}50%, 100% {top: 24px;height: 32px;}}

/* --- MEDIA QUERIES --- */

@media screen and (max-width: 800px) {
  h1{font-size:6vw;}
  h2{font-size:2vw}
  .de{font-size:5vw;}
  .grande{font-size:30px}
  .mediano{font-size:25px}
  .chico{font-size:17px}
  .micro{font-size:14px}
  .logButton picture{margin-top:1%}
  .lazy-title{font-size:3vw}
  .topliltit{margin-top:2%;padding:1;font-size:17px}
  .topbigtit{padding:1;font-size:30px}
}

@media screen and (max-width: 450px) {
  h1{font-size:7.5vw;}
  h2{font-size:4vw}
  .de{font-size:5vw;}
  .grande{font-size:6vw}
  .mediano{font-size:5vw}
  .chico{font-size:4vw}
  .micro{font-size:3vw}
  
  /* Ajuste ligero al margen superior en móvil */
  .socialTop{margin-top:3.2%;} 
  
  /* REDIMENSIONAR ICONOS EN MÓVIL */
  /* Aquí hacemos que midan 38px en celulares para que no se vean enormes */
  .social-icon-link {
    width: 28px;
    height: 28px;
    margin: 0 5px; /* Reducimos también el margen */
  }

  .logButton picture{margin-top:6%}
  .lazy-fotitos{width:100%;margin:0;padding-bottom:180%;}
  .lazy-title{width:48%;font-size:5vw}
  .button{font-size:5vw}
  .noButton{font-size:5vw}
  .celular{width:60%;}
  .twingo{width:49.8%;}
  .topliltit{padding:1;font-size:4vw}
  .topbigtit{padding:1;font-size:5vw}
}