@import url(pinta-010.css);
@import url(pinta-curs.css);
/*@import url(pinta-bott-css);*/
@import url(pinta-qer.css);
@import url(con-resp.css);
@import url(vidrios.css);


body {
          background-color: #0a0c11 !important;
          padding: 15px;
}

/**/
.vazirmatn-titulo {
          font-family: "Vazirmatn", sans-serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: normal;

}

.span-enc-1 {
          color: #858688;
}

.p-enc-2 {
          color: #abadb3;
}

/**/

.izdadcha {
          position: relative;
          overflow: hidden;
          display: inline-block;
          text-decoration: none;
          color: #333;
          font-size: 40px;
          line-height: 46px;
          padding: 0 0 6px;
}

.izdadcha:after {
          content: "";
          position: absolute;
          bottom: 0;
          left: -100%;
          width: 100%;
          height: 3px;
          background: gold;
          transition: left .8s;
}

.izdadcha:hover:after {
          left: 0;
}

.izdadcha-hov:hover {
          color: gold;
}



.caja {
          display: inline-block;
          position: relative;
          color: #ecd5d5;
          text-decoration: none;
          font-size: 40px;
          line-height: 46px;
          padding: 6px;
}

.caja:before,
.caja:after {
          content: "";
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          box-sizing: border-box;
          transform: scale(0);
          transition: 0.5s;
}

.caja:before {
          border-bottom: 2px solid red;
          border-left: 2px solid red;
          transform-origin: 0 100%;
}

.caja:after {
          border-top: 2px solid red;
          border-right: 2px solid red;
          transform-origin: 100% 0%;
}

.caja:hover:after,
.caja:hover:before {
          transform: scale(1);
}

/*
.enc-2-ind {
          color:  #3498db !important;
}*/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/* Sección bienvenida */

.cta-button {
          background-color: #2980b9;
          color: white;
          padding: 15px 30px;
          text-decoration: none;
          border-radius: 5px;
          font-weight: bold;
          font-size: 1.1rem;
          display: inline-block;
          margin-top: 20px;
          /* Espaciado por encima del botón */
}

.cta-button:hover {
          background-color: #1f618d;
          /* Color de hover más oscuro */
          transform: scale(1.05);
          /* Efecto sutil de ampliación */
          transition: transform 0.2s ease-in-out, background-color 0.3s ease;
          /* Transición suave */
}

@media (max-width: 768px) {

          .cta-button {
                    padding: 12px 24px;
                    /* Reducir el tamaño del botón */
          }
}

#cta {
          margin-top: 30px;
          background-color: #2980b9;
          color: white;
          padding: 50px 20px;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
}

#cta h2 {
          font-size: 2rem;
}

#cta p {
          margin: 20px 0;
}

.cta-button {
          background-color: #fff;
          color: #2980b9;
          padding: 15px 30px;
          text-decoration: none;
          border-radius: 5px;
          font-weight: bold;
}

.cta-button:hover {
          background-color: #f4f4f4;
}

/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/*

p {
          font-size: 1.4rem;
          margin: 0 0 24px 0;
}*/


.parallas,
.main-1,
.texto {
          margin: 0 auto;
}

.parallax {
          background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          height: 30rem;
          max-width: 100%;
          position: relative;
}

.texto-interior {
          color: #fff;
          font-size: 2rem;
          font-weight: bold;
          left: 10%;
          position: absolute;
          text-align: center;
          top: 40%;
          width: 80%;
}

.img-uno {
          background-image: url("../img/parax2.jpg");
}

.img-dos {
          background-image: url("../img/parax1.jpg");
}



/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/* recursos */

/* Contenedor de las tarjetas */
.tarjetas-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          /* Tres columnas en pantallas grandes */
          gap: 20px;
          justify-items: center;
          padding: 20px;
}

/* Estilo de cada tarjeta */
.tarjeta {
          background-color: #9eb6ea;
          border: 3px solid white;
          border-radius: 8px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          overflow: hidden;
          width: 100%;
          max-width: 300px;
          text-align: center;
          padding: 20px;
          transition: transform 0.3s ease;
}

.tarjeta img {
          width: 100%;
          height: auto;
          border-radius: 8px;
}

.tarjeta h3 {
          font-size: 1.5rem;
          margin: 15px 0;
}

.tarjeta p {
          color: #777;
          font-size: 1rem;
}

/* Efecto hover en las tarjetas */
.tarjeta:hover {
          transform: translateY(-10px);
}

/* Media Queries para adaptabilidad */
@media (max-width: 1024px) {
          .tarjetas-container {
                    grid-template-columns: repeat(2, 1fr);
                    /* Dos columnas en tabletas */
          }
}

@media (max-width: 600px) {
          .tarjetas-container {
                    grid-template-columns: 1fr;
                    /* Una columna en móviles */
          }
}

/* Estilo del botón */
.btn-ciclo {
          background-color: #3498db;
          color: white;
          border: none;
          padding: 10px 20px;
          font-size: 1rem;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s ease;
}

.btn-ciclo:hover {
          background-color: #2980b9;
}

/**/
/**/
/**/
/**/
/**/
/**/
/**/
 
/* index */

/* Estilos de la sección responsiva */
.responsive-p {
          padding: 20px;
          width: 90%;
          margin-left: 4%;
          margin-top: 20px;
          /* Maxima anchura de la sección */
          text-align: center;
}

/* Estilos para el párrafo */
.responsive-p p {
          font-size: 1.2rem;
          line-height: 1.6;
          color: #ffffff;
          margin: 0;
}

/* Hacer el texto más pequeño en pantallas pequeñas */
@media (max-width: 600px) {
          .responsive-p p {
                    font-size: 1rem;
                    /* Reducir tamaño del texto en pantallas pequeñas */
          }

          .responsive-p {
                    width: 90%;
                    margin-left: 4%;
                    padding: 15px;
                    /* Menos padding en pantallas pequeñas */
          }
}

@media (max-width: 400px) {
          .responsive-p {
                    width: 95%;
                    margin-left: 1.5%;
                    padding: 10px;
                    /* Aún menos padding en pantallas más pequeñas */
          }

          .responsive-p p {
                    font-size: 0.9rem;
                    /* Hacer el texto aún más pequeño */
          }
}

/*------ idiomas -------*/

/* Inicialmente, ocultamos los divs */
/* Estilo inicial: ocultamos todos los divs excepto el de español */
.eng,
.por {
    display: none;
}

.esp {
    display: block;
}


button.ingles,
button.espanol,
button.portugues {
          display: inline;
         /* padding: 10px 20px;*/
          border: none;
          font-family: raleway;
          font-size: 5px;
          font-weight: 200;
       /*   color: white;*/
          background-color: transparent; 
          margin-left: 5px;
}
/*
button.ingles:hover,
button.espanol:hover {
          background-color: #999;
          color: red;
}
*/


#idiomas { 
          height: 40px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
}



/* ../css/tarjetas */
/*body {
  background: #444;
  color: #fff;
}*/

.cards__flex {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
 
 .card {
   flex-basis: 300px;
   margin: 0.5em;
   position: relative;
   background: #000;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
 .card__titulo {
   position: absolute;
   color: #fff;
   margin: auto;
   top: calc(300px - 4em);
   padding: 0.5em 1.5em;
   background: rgba(4, 4, 4, 0.8);
 }
 
 .card__texto {
   padding: 0 2em;
   }
 
 .card__saber-mas {
   margin-top: auto;
   text-decoration: img;
   text-align: right;
   background-color: #586057;
  /*background: linear-gradient(to right, #0727ec 0%, #1f47df73 50%, #13f0ac87 100%); */
   padding: 0.5em;
   color: #fff;
   transition: background-color 0.3s;
 }
 
 .card__saber-mas:hover {
   background-color: darkgoldenrod;
 }
 
 
 .card__figure {
   overflow: hidden;
   height: 300px;
   margin: 0;
 }
 .card__img {
 /*  filter: grayscale(100%);*/
   transition: filter 0.5s, transform 0.3s;
 }
 
 .card__img:hover {
   transform: scale(1.05);
   /*filter: grayscale(0);*/
 }
 
 /* Lightbox */
 .lightbox {
   position: relative;
   max-width: 80vw;
 }
 
 .lightboxes:target {
   transform: scale(1);
   opacity: 1;
 }
 
 .lightboxes {
   position: fixed;
   inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgba(0, 0, 0, 0.8);
   height: 100dvh;
   width: 100dvw;
   transform: scale(0);
   opacity: 0;
   transition: opacity 1s, transform 0.2s;
 }
 .lightbox__img {
   max-width: 80dvw;
   border-radius: 1em 0;
 }
 .lightbox__desc {
   color: white;
   position: absolute;
   bottom: 0;
   padding: 1em;
   background-color: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(3px);
 }
 
 .lightbox__cerrar {
   position: absolute;
   top: -1em;
   right: -1em;
   color: black;
   background-color: white;
   width: 2em;
   height: 2em;
   text-align: center;
   text-decoration: none;
   border-radius: 50%;
   line-height: 2em;
   font-weight: bold;
   text-transform: uppercase;
   box-shadow: 0 0 4px 2px black;
   transition: transform 0.3s;
   z-index: 666;
 }
 
 .lightbox__cerrar:hover {
   transform: rotate(1turn);
 }

 /* ../css/letras-rojas */
 /*
* {
  box-sizing: border-box;
}
*/
/*
body {
  background-color: black;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-family: system-ui;
}
*/
.wall-of-text {
  --clr: white;
  --clr-2: rgb(239, 68, 68);

  /*border: 14px solid rgba(148 163 184 / 0.5);*/
 /* width: min(calc(100% - 2rem), 600px); */
  width: 100%;
  /*padding: 2rem;*/
  /*outline: 1px solid rgba(255 255 255 / 0.5);*/
  /*outline-offset: -14px;*/
}
svg {
  width: 100%;
  height: auto;
}
svg > text {
  color: var(--clr);
  translate: var(--x, -50%) var(--y, -50%);
  font-size: var(--f-size, 2rem);
  font-weight: var(--f-weight, 400);
  text-transform: var(--t);
}
#word-1 {
  /* Every */ /*ciclope*/
  --clr: var(--clr-2);
  --f-weight: 800;
  --f-size: 4rem;
  --x: 140px;
  --y: 70px;
  --t: uppercase;
}

#word-2 {
  /* line */ /*comunidad*/
  --x: 180px;
  --y: 143px;
  --f-size: 3.5rem;
  --f-weight: 300;
  --t: uppercase;
}

#word-3 {
  /* of */ /*en linea para*/
  --x: 285px;
  --y: 180px;
  --f-size: 2rem;
  --f-weight: 300;
}
#word-4 {
  /* code */ /*developers*/
  --x: 295px;
  --y: 295px;
  --f-size: 6.4rem;
  --f-weight: 600;
}
#word-5 {
  /* brings */
  --x: 0px;
  --y: 338px;
  --f-size: 2rem;
  --f-weight: 300;
}
#word-6 {
  /* you */
  --x: 80px;
  --y: 342px;
  --f-size: 4rem;
  --f-weight: 600;
  --t: uppercase;
  --clr: var(--clr-2);
}
#word-7 {
  /* closer */
  --x: 225px;
  --y: 342px;
  --f-size: 2rem;
  --f-weight: 300;
}
#word-8 {
  /* to */
  --x: 316px;
  --y: 352px;
  --f-size: 2rem;
  --f-weight: 300;
}
#word-9 {
  /* launching */
  --x: 356px;
  --y: 380px;
  --f-size: 4rem;
  --f-weight: 300;
}
#word-10 {
  /* your */
  --x: 430px;
  --y: 430px;
  --f-size: 2.5rem;
  --f-weight: 300;
}
#word-11 {
  /* vision */
  --x: 495px;
  --y: 495px;
  --f-size: 5rem;
  --f-weight: 600;
  --t: uppercase;
  --clr: var(--clr-2);
}
#word-12 {
  /* stay */
  --x: 5px;
  --y: 720px;
  --f-size: 3rem;
  --f-weight: 300;
}
#word-13 {
  /* focused */
  --x: 70px;
  --y: 795px;
  --f-size: 5rem;
}
#word-14 {
  /* build */
  --x: 2px;
   --y: 855px;
  --f-size: 2.6rem;
  --f-weight: 300;
  --t: uppercase;
}
#word-14:first-letter {
  font-size: 5rem;
}
#word-15 {
  /* smarter */
  --x: 130px;
  --y: 855px;
  --f-size: 2.6rem;
  --f-weight: 300;
  --t: uppercase;
}
#word-16 {
  /* & */
  --x: 380px;
    --y: 855px;
  --f-size: 10rem;
  --f-weight: 600;
  --clr: var(--clr-2);
}
#word-17 {
  /* watch */
  --x: 550px;
  --y: 845px;
  --f-size: 5rem;
  --f-weight: 600;
  --t: uppercase;
}
#word-18 {
  /* your */
  --x: 550px;
  --y: 880px;
  --f-size: 2rem;
}
#word-19 {
  /* goals */
  --x: 220px;
  --y: 940px;
  --f-size: 4.9rem;
  --f-weight: 600;
  --clr: var(--clr-2);
}
#word-20 {
  /* take */
  --x: 420px;
  --y: 958px;
  --f-size: 3.2rem;
  --f-weight: 300;
}
#word-21 {
  /* shape */
  --x: 550px;
  --y: 968px;
  --f-size: 4rem;
  --f-weight: 600;
  --t: uppercase;
}

#word-22 {
  /* ! */
  --x: 790px;
  --y: 968px;
  --f-size: 9rem;
  --f-weight: 600;
}

.h6, h6{
	    font-size: 9rem;
  /*font-size: 200px;*/
  font-weight: bold;
  /*margin-bottom: 10px;*/
  background-color: white;
		color: black;
		padding: 0.5rem 1rem;
		display: inline-block;
		transform: rotate(-4deg);
	}