@import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: "Inter", sans-serif;
   transition: background-color 0.3s ease;
}

html {
   scrollbar-width: thin;
}

body {
   background-color: var(--color-fondoPrincipal);
}

body.--modalOpen {
   overflow: hidden;
}

.container {
   --margin-container: 1.25rem;
   padding-top: 1.56rem;
   padding-left: var(--margin-container);
   width: 100%;
}

.main {
   padding-bottom: 60px;
}

@media (min-width: 64rem) {
   .container {
      --margin-container: 2.9rem;
   }

   .main {
      padding-bottom: 0;
   }

}

@media (min-width: 80rem) {
   .container {
      --margin-container: 3.2rem;
   }
}

/* - Estilos de slider - */

img[data-light-mode][data-dark-mode] {
   opacity: 100%;
   transition: opacity 0.3ms ease;
}

.slider {
   width: 100%;
   height: fit-content;
}

.slider__container {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   width: 100%;
   height: fit-content;
}

.slider__gallery {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   scrollbar-width: none;
   width: 100%;
}

.slider__gallery::-webkit-scrollbar {
  display: none;
}

#slider-principal .slider__gallery{
   aspect-ratio: 60 / 29;
   width: auto;   
}

.slider__gallery::-webkit-scrollbar {
  display: none;
}

.slider__img-container {
   flex: 1 0 100%;
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   scroll-margin-top: 60px;
}

#slider-principal .slider__img-container {
   aspect-ratio: 60 / 29;
}

.slider__img-container img {
   display: block;
   object-position: center;
   object-fit: cover;
   width: 100%;
   height: 100%;
}

.slider__nav{
   display: flex;
   position: absolute;
   gap: 2.5vw;
   bottom: 5%;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;
}

.slider__nav-button {
   width: 3.5vw;
   aspect-ratio: 3/1;
   background-color: #d2d2d2;
   border-radius: 50px;
   opacity: 0.65;
}

.slider__nav-button.slider__nav-button--active {
   opacity: 0.85;
   background-color: #f3f2f2;
}

.slider__nav-button:hover {
   opacity: 0.85;
   background-color: #f3f2f2;
}

/* - Estilos de galerias - */
.card-galery {
   width: 100%;
   --totalCards-container: 2;
   --gap-galery: 10px;
   margin-bottom: var(--margin-container);
   scroll-margin-top: 20px;
}

.card-gallery__title {
   color: var(--color-textoPrincipal);
   font-weight: 500;
   font-size: var(--texto-xxl-mobile);
   margin-bottom: 10px;
}

.card-gallery__items {
   width: 100%;
   display: flex;
   flex-direction: row;
   overflow-x: auto;
   gap: var(--gap-galery);
   scrollbar-width: none;
   padding-right: var(--margin-container);
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
}


@media (min-width: 35rem) {
   .card-galery {
      --totalCards-container: 3;
      --gap-galery: 15px;
      /* margin-bottom: clamp(2.2rem, -0.2rem + 5vw, 3rem); */
   }
}

@media (min-width: 48rem) {
   .container {
      --margin-container: clamp(2rem, -4rem + 12.5vw, 4rem);
   }

   .card-galery {
      --totalCards-container: 3;
      --gap-galery: 15px;
      margin-bottom: clamp(2.2rem, -0.2rem + 5vw, 3rem);
   }

   .card-gallery__title {
      margin-bottom: 1rem;
   }
}

@media (min-width: 64rem) {
   .container {
      --margin-container: clamp(3.3rem, -7.5rem + 16.875vw, 6rem);
   }

   #slider-principal .slider__gallery{
      height: min(80vh, calc(100vw * (9 / 16)));  
   }

   .card-galery {
      --totalCards-container: 4;
      --gap-galery: clamp(1.6rem, 1.2rem + 0.625vw, 1.7rem);
      scroll-margin-top: 80px;
   }

   .card-gallery__items {
      scrollbar-width: thin;
   } 
   .card-gallery__title {
      margin-bottom: 1.2rem;
   }

   .card-galery {
      margin-bottom: 2.5rem;
   }
}


@media (min-width: 80rem) {
   .container {
      --margin-container: 6rem;
   }

   .card-galery {
      --totalCards-container: 4;
      --gap-galery: 1.7rem;
   }
}

@media (min-width: 96rem) {
   .container {
      --margin-container: 6rem;
   }

   .card-galery {
      --totalCards-container: 5;
      --gap-galery: 1.7rem;
   }
}


/*- Estilos de tarjetas -*/

.card {
   background-color: var(--color-fondoSecundario);
   aspect-ratio: 77 / 98;
   flex: 0 0 calc((100% - (var(--gap-galery) * (var(--totalCards-container) - 1))) / var(--totalCards-container));
   min-width: 0 ;
   border-radius: 5px;
   padding: 0.65rem 0.6rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   scroll-snap-align: start;
}

.card__img-container {
   position: relative;
   aspect-ratio: 191 / 123;
   width: 100%;
   border-radius: 5px;
   overflow: hidden;
}

.card .card-progress {
   display: none;
}

.card.card--in-progress .card-progress {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--texto-xxs-mobile);
   z-index: 10;
   top: 7%;
   left: 5%;
   padding: 1% 5%;
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 100px;
}

.card-progress::before { 
   display: block;
   content: "";
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: var(--color-fondoBotones);
   margin-right: 5px;
}

.card__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.card.card--in-progress .card__img { 
   filter: brightness(85%);
}

.card__text-container {
   width: 100%;
   overflow: hidden;
}

.card__title-container {
   position: relative;
   width: 100%;
   overflow: hidden;
   margin: 0.48rem 0;   
}

.card__title {
   color: var(--color-textoPrincipal);
   font-size: var(--texto-s-mobile);
   font-weight: 600;
   white-space: nowrap;
   transition: transform 0.1s ease;
}

.card__title:hover {
   transform: translateX(var(--scroll));
   transition: transform var(--scrollVelocity) ease-in-out;
}

.card__title-blurred{
   position: absolute;
   background: linear-gradient(90deg, #00000000, var(--color-fondoSecundario) 80%);
   width: 20%;
   height: 100%;
   right: 0;
   top: 0;
   opacity: 1;
   transition: opacity 0.3s ease;
}

.card__title:hover + .card__title-blurred { 
   opacity: 0;
   transition: opacity 1s ease;
}

.card__description {
   color: var(--color-textoPrincipal);
   font-size: var(--texto-xs-mobile);
   font-weight: 400;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.card__button {
   font-size: var(--texto-xxs-mobile);
   color: var(--color-textoBotones);
   background-color: var(--color-fondoBotones);
   border: none;
   border-radius: 3.5px;
   width: 66%;
   align-self: center;
   padding: 2%;
   margin-top: 0.5rem;
   margin-bottom: clamp(0rem, -1.636rem + 7.273vw, 0.5rem);
   cursor: pointer;
}

.card.card--in-progress {
   filter: brightness(85%);
}

.card.card--in-progress.card--clickable {
   filter: brightness(100%);
}

.card.card--in-progress .card__button {
   filter: brightness(80%);
   cursor: auto;
}

.card.card--in-progress.card--clickable .card__button {
   filter: brightness(100%);
   cursor: pointer;
}

@media (min-width: 28rem) {
   .card__description {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
   }
}

@media (min-width: 48rem) {
   .card {
      padding: 0.75rem 0.7rem;
      border-radius: 0.4rem;
   }

   .card__button {
      margin: 0.5rem 0;
   }
}

@media (min-width: 64rem) {
   .card {
      padding: 0.75rem 0.7rem;
      border-radius: 0.45rem;
   }

   .card__button {
      margin: 0.6rem 0;
   }
}

@media (min-width: 55rem) {
   .card__description {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
   } 
}

@media (min-width: 96rem) {
   .card {
      max-width: 19.37rem;
   }
}


/* Estilos de navBar */
.header {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 20;
   background-color: var(--color-navbar);
   height: 60px;
   box-shadow: 0 -1px 5px 0 var(--color-sombras);
}

.navbar {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 100%;
   justify-content: center;
   padding: 0 5%;
   background-color: var(--color-navbar);
}

.navbar-title {
   display: none;
}

.navbar-listButtons {
   display: flex;
   flex-direction: row;
   list-style: none;
   width: 100%;
   height: 100%;
   justify-content: space-between;
   align-items: center;
   max-width: 470px;
}

.navbar-buttonContainer {
   display: flex;
   align-items: center;
   height: 100%;
   position: relative;
}

.navbar-button{
   display: flex;
   flex-direction: column;
   align-items: center;
   background: none;
   border: none;
   width: 55px;
   height: 100%;
   justify-content: center;
}

.navbar-imgContainer{
   width: 24px;
   height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.navbar-imgButton {
   color: var(--color-textoPrincipal);
   font-variation-settings: 'FILL' 0, 'wght' 400;
   transition: font-variation-settings 0.2s ease;
}

.navbar-buttonContainer:hover .navbar-imgButton {
   font-variation-settings: 'FILL' 1, 'wght' 600;
}

.navbar-textButton {
   border: none;
   background: none;
   font-size: var(--texto-xs-mobile);
   color: var(--color-textoPrincipal);
   font-weight: 400;
   transition: font-weight 0.2s ease;
   white-space: nowrap;
}

.navbar-buttonContainer:hover .navbar-textButton {
   font-weight: 600;
}

.navbar-optionMenu {
   position: absolute;
   display: flex;
   flex-direction: column;
   width: fit-content;
   background-color: var(--color-navbar);
   bottom: 100%;
   justify-content: center;
   padding: 0.8rem 0;
   left: 50%;
   transform: translate(-50%, 110%);
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   box-shadow: 0 0 5px 0 var(--color-sombras);
   z-index: -1;
   transition: transform 0.3s ease-in-out;
}

.navbar-optionMenu.active {
   transform: translate(-50%, 0%);
}

.navbar-optionMenu-button {
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
   background: none;
   border: none;
   padding: 0.4rem 1.4rem;
   gap: 0.6rem;
   color: var(--color-textoPrincipal);
}

.navbar-optionMenu-button:hover {
   background-color: var(--color-hoverBotones);
}

.navbar-optionMenu-imgContainer {
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.navbar-optionMenu-img {
   width: 100%;
   height: 100%;
}

svg.navbar-optionMenu-img path {
   stroke: currentColor;
   stroke-width: 8px;
}

.navbar-optionMenu-button p {
   white-space: nowrap;
   font-size: var(--texto-s-mobile);
}
   
#navbar-btnModo .navbar-imgContainer{
   position: relative;
   overflow: hidden;
   --transition-time: 0.4s;
   --animation-time: 0.6s
}

.navbar-img-theme {
   width: 100%;
   height: 100%;
   position: absolute;
}

#navbar-darkSymbol {
   font-variation-settings: 'FILL' 1;
   color: #8A96E5;
}

#navbar-dark2Symbol{
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Estilos boton animado de cambio de modo */
/* estilos boton modo claro */

#navbar-btnModo[data-theme="lightMode"] #navbar-lightSymbol {
   top: 0%;
   transform: rotate(0deg) translateY(0%);
   color: #FAE100;
}

#navbar-btnModo[data-theme="lightMode"] #navbar-darkSymbol {
   top: 100%;
   transform: rotate(-180deg);
}

#navbar-btnModo[data-theme="lightMode"] #navbar-dark2Symbol {
   top: 100%;
   transform: rotate(180deg);
   opacity: 1;
}

#navbar-btnModo[data-theme="lightMode"] .navbar-img-theme-circle {
   background-color: #284FA9;
   width: 75%;
   height: 75%;
   border-radius: 50%;
   transform: scale(1) rotate(0deg);
   box-shadow: inset -1px 2px 5px #0e1b3a;
   opacity: 1;
}

/* estilos boton modo oscuro */

#navbar-btnModo[data-theme="darkMode"] #navbar-lightSymbol {
   transform: rotate(180deg);
   top: 100%;
}

#navbar-btnModo[data-theme="darkMode"] #navbar-darkSymbol {
   transform: rotate(0deg) scale(100%);
   top: 0%;
   opacity: 1;
}

#navbar-btnModo[data-theme="darkMode"] #navbar-dark2Symbol {
   opacity: 0;
}

/* estilos boton modo oscuro 2 */

#navbar-btnModo[data-theme="darkMode2"] #navbar-lightSymbol {
   transform: rotate(180deg);
   top: 100%;
}

#navbar-btnModo[data-theme="darkMode2"] #navbar-darkSymbol {
   top: 0%;
   transform: scale(0.1);
   opacity: 0;
}

#navbar-btnModo[data-theme="darkMode2"] #navbar-dark2Symbol {
   top: 0%;
   transform: rotate(0deg);
}

#navbar-btnModo[data-theme="darkMode2"] .navbar-img-theme-circle {
   background-color: #284FA9;
   width: 75%;
   height: 75%;
   border-radius: 50%;
   box-shadow: inset -1px 2px 5px #0e1b3a;
   transform: scale(1) rotate(0deg);
   opacity: 1;
}

/* Estilo con animacion de btn lig */
/* estilos boton modo claro */

#navbar-btnModo[data-theme="lightMode"][data-animate="on"] #navbar-lightSymbol {
   transition: all var(--transition-time) ease;
}

#navbar-btnModo[data-theme="lightMode"][data-animate="on"] #navbar-dark2Symbol {
   transition: all var(--transition-time) ease;
}

/* estilos boton modo oscuro */

#navbar-btnModo[data-theme="darkMode"][data-animate="on"] #navbar-lightSymbol {
   transition: all var(--transition-time) ease;
}

#navbar-btnModo[data-theme="darkMode"][data-animate="on"] #navbar-darkSymbol {
   transition: all var(--transition-time) ease;
}

/* estilos boton modo oscuro 2 */
@keyframes darkToDark2-dark2 {
   0% {
      opacity: 1;
      background-color: #8A96E5;
      width: 75%;
      height: 75%;
      transform: scale(0.1) rotate(0deg);
      border-radius: 50%;
      box-shadow: none;
   }

   40% {
      transform: scale(1.1) rotate(0deg);
      border-radius: 50%;
      background-color: #8A96E5;
   }

   45% {
      background-color: #8A96E5;
      transform: scale(1) rotate(0deg);
   }

   60% {
      box-shadow: none;
   }

   100% {
      background-color: #284FA9;
      width: 75%;
      height: 75%;
      border-radius: 50%;
      box-shadow: inset -1px 2px 5px #0e1b3a;
      transform: scale(1) rotate(0deg);
      opacity: 1;
   }
}

@keyframes darkToDark2-dark1 {
   0% { 
      transform: scale(1);
      opacity: 1;
   }

   40% {
      transform: scale(1);
   }

   45% {
      transform: scale(0.95);
      opacity: 1;
   }

   100% {
      transform: scale(0.1);
      opacity: 0;
   }
}


#navbar-btnModo[data-theme="darkMode2"][data-animate="on"] #navbar-darkSymbol {
   animation: darkToDark2-dark1 var(--animation-time) linear forwards;
}

#navbar-btnModo[data-theme="darkMode2"][data-animate="on"] .navbar-img-theme-circle {
   animation: darkToDark2-dark2 var(--animation-time) linear both;
}

@media (min-width: 48rem) {
   .header {
      height: 80px;
   }

   .navbar-listButtons {
      max-width: 490px;
   }

   .navbar-button{
      width: 70px;
   }

   .navbar-imgContainer {
      width: 29px;
      height: 29px;
      margin-bottom: 0.15rem;
   }

   .navbar-imgContainer .material-symbols-rounded {
      font-size: 29px;
   }

   .navbar-optionMenu-button {
      padding: 0.6rem 1.6rem;
   }
       
}

@media (min-width: 64rem) {
   .header {
      position: fixed;
      height: 60px;
      bottom: auto;
      top: 0;
      box-shadow: 0 1px 5px 0 var(--color-sombras);
   }

   .main {
      margin-top: 60px;
   }

   .navbar {
      justify-content: space-between;
      padding: 0 1.4rem;
   }

   .navbar-title {
      display: flex;
      flex-direction: row;
      align-items: center;
   }

   .navbar-title p {
      color: var(--color-textoPrincipal);
   }

   .navbar-listButtons {
      max-width: fit-content;
      gap: 0.8rem;
   }

   .navbar-listButtons :last-child {
      order: 1;
   }

   .navbar-listButtons :nth-child(4) { /*boton ir a*/
      position: static;
   }


   .navbar-buttonContainer {
       order: 2;
   }

   .navbar-button{
      width: fit-content;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
   }

   .navbar-imgContainer {
      width: 24px;
      height: 24px;
      margin-bottom: 0;
   }

   .navbar-imgContainer .material-symbols-rounded {
      font-size: 24px;
   }

   .navbar-listButtons :nth-child(4) .navbar-imgContainer { /*botin ir a*/
      transform: translateY(0.04rem);
      width: 20px;
   } 

   .navbar-buttonContainer:first-child .navbar-imgContainer { /*boton sobre mi*/
      width: 20px;
   } 

   .navbar-listButtons :nth-child(3) .navbar-imgContainer{ 
      width: 18px;
   }

   .navbar-listButtons :nth-child(3) .navbar-imgContainer .material-symbols-rounded { /*boton contacto*/
      font-size: 20px;
   } 

   .navbar-listButtons :nth-child(2) .navbar-imgContainer .material-symbols-rounded { /*boton proyectos*/
      font-size: 22px;
   } 

   .navbar-textButton {
      border-right: 1px solid var(--color-bordeNavbarButton);
      padding-right: 0.8rem;
   }

   .navbar-listButtons :nth-child(4) .navbar-textButton { /*boton ir a*/
      border-right: none;
      padding: 0;
   }
   

   .navbar-optionMenu {
      bottom: auto;
      top: 100%;
      border-radius: 0;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
   }
   
   #navbar-goToMenu {
      transform: translateY(-110%);
      left: auto;
      right: 0;
   }

   #navbar-goToMenu.active {
      transform: translateY(0%);
   }

   #navbar-contactMenu {
      transform: translate(-50%, -110%);
   }

   #navbar-contactMenu.active {
      transform: translate(-50%, 0%);
   }

   .navbar-optionMenu-button {
      padding: 0.6rem 1.6rem;
   }

   .slider__nav {
      bottom: 4.5%;
      gap: 1.5vw;
   }
       
   .slider__nav-button {
      flex: 0 0 2.5rem
   }

   /* Estilos boton animado de cambio de modo */
   /* estilos boton modo claro */

   #navbar-btnModo[data-theme="lightMode"] #navbar-lightSymbol {
      left: 0%;
      top: auto;
      transform: rotate(0deg) translateY(0%);
   }

   #navbar-btnModo[data-theme="lightMode"] #navbar-darkSymbol {
      left: 100%;
      top: auto;
      transform: rotate(180deg);
   }

   #navbar-btnModo[data-theme="lightMode"] #navbar-dark2Symbol {
      left: -100%;
      top: auto;
      transform: rotate(-180deg);
   }

   #navbar-btnModo[data-theme="lightMode"] .navbar-img-theme-circle {
      transform: scale(1) rotate(0deg);
   }

   /* estilos boton modo oscuro */

   #navbar-btnModo[data-theme="darkMode"] #navbar-lightSymbol {
      transform: rotate(-180deg);
      left: -100%;
      top: auto;
   }

   #navbar-btnModo[data-theme="darkMode"] #navbar-darkSymbol {
      transform: rotate(0deg) scale(100%);
      left: 0%;
      top: auto;
   }


   /* estilos boton modo oscuro 2 */

   #navbar-btnModo[data-theme="darkMode2"] #navbar-lightSymbol {
      transform: rotate(-180deg);
      left: 100%;
      top: auto;
   }

   #navbar-btnModo[data-theme="darkMode2"] #navbar-darkSymbol {
      left: 0%;
      top: auto;
      transform: scale(0.1);
      opacity: 0;
   }

   #navbar-btnModo[data-theme="darkMode2"] #navbar-dark2Symbol {
      left: 0%;
      top: auto;
      transform: rotate(0deg);
   }

   .navbar-buttonContainer:last-child .navbar-imgContainer {
      border-radius: 50%;
   }
}

/* modal visor pdf */

.modal {
   position: fixed;
   width: 100%;
   height: 100dvh;
   top: 0;
   left: 0;
   z-index: 20;
   transition: transform 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

.modal[aria-modal="false"]{
   transform: translate(100%);
}

.modal[hidden]{
   display: none;
}

.modal[aria-modal="true"]{
   transform: translate(0);
}

.modal__content {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   overflow: auto;
}

#pdf-modal .modal__content{
   background-color: var(--color-fondoPDFVisor);
}

#proyect-modal .modal__content{
   background-color: var(--color-fondoPrincipal);
   
}

.pdf {
   position: relative;
   height: 70vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow: auto;
   background-color: var(--color-fondoPDFVisor);
}

.pdf__buttons-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 1rem 1rem;
}

.modal__button {
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #5d5d5d8a;
   border: none;
   border-radius: 0.2rem;
   padding: 0.15rem;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;   
   -webkit-tap-highlight-color: transparent;
   outline: none;
   text-decoration: none;
   width: 1.95rem;
   height: 1.95rem;
}

#pdf-button-close {
   display: none;
}

.modal__button:-moz-focusring {
   outline: none;
}

.modal__button .material-symbols-rounded {
   color: white;
   font-size: 1.65rem;
}

.pdf__buttons-options-container {
   display: flex;
   flex-direction: row;
   gap: 0.75rem;
}

.pdf__container {
   width: 100%;
   height: 100%;
   overflow: auto;   
   box-sizing: border-box;
   touch-action: pan-x pan-y;
   scrollbar-width: thin;
}

.pdf__canvas {
   display: block;
   margin: 20px auto; 
   flex-shrink: 0;
   max-width: none !important;
}

.modal__text-container {
   color: var(--color-textoPrincipal);
   padding: 1.3rem;
   background-color: var(--color-fondoPrincipal);
   padding-bottom: 1rem;
   z-index: 10;
   display: flex;
   flex-direction: column;
}

#pdf-modal .modal__text-container {
   height: 30vh;
   box-shadow: 0 -1px 4px 0px var(--color-sombras);
}

.modal__title {
   font-size: var(--texto-l-mobile);
   margin-bottom: 0.4rem;
   font-weight: 550;
   line-height: 1.3;
   max-height: calc(1.4em * 2);
   overflow: hidden;
}

#pdf-modal .modal__title:hover { 
   max-height: calc(1.6 em * 2);
   overflow-y: auto;
   scrollbar-width: thin;
}

#proyect-modal .modal__title {
   font-size: var(--texto-xl-mobile);
}

.modal__description-container {
   scrollbar-width: thin;
   overflow-y: auto;
   height: 100%;
}

.modal__description {
   font-size: var(--texto-m-mobile);
}

@media (min-width: 64rem) {

   body.--modalOpen {
      overflow: auto;
   }

   .modal {
      transition: opacity 0.3s ease;
      pointer-events: all;
   }

   .modal[aria-modal="false"] {
      transform: none;
      opacity: 0;
   }

   .modal[aria-modal="true"] {
      transform: none;
      opacity: 1;
   }

   .modal[aria-modal="false"] .modal__content{
      transform: scale(0.01)
   }

   .modal[aria-modal="true"] .modal__content{
      transform: scale(1);
   }

   .modal__content {
      width: 90%;
      height: 90%;
      flex-direction: row;
      transition: transform 0.3s ease;
      border-radius: 8px;
      overflow: hidden;
   }

   .pdf {
      position: relative;
      order: 2 ;
      flex: 3;
      height: 100%;
   }

   .pdf__buttons-container {
      justify-content: end;
   }

   #pdf-modal .modal__text-container {
      order: 1;
      flex: 1;
      height: 100%;
   }

   .modal__title {
      max-height: calc(1.4em * 3);
   }

   .modal__title:hover { 
      max-height: calc(1.6 em * 4);
   }

   .modal__backdrop{
      width: 100vw;
      height: 100vh;
      position: fixed;
      background: #0000007b;
      z-index: -1;
   }

   #pdf-button-close {
      display: block;
   }

   #pdf-button-back {
      display: none;
   }
}

/* modal visor de proyectos */

#slider-proyects {
   position: relative;
}

#slider-proyects .slider__gallery {
   aspect-ratio: 2.5 / 2;
   /* max-height: 60vh; */
   width: auto;
}

#slider-proyects .slider__button-container{
   position: absolute;
   display: flex;
   padding: 1rem 1rem;
   justify-content: space-between;
   top: 0;
   left: 0;
   z-index: 10;
}

#proyectM-button-close {
   display: none;
}

#slider-proyects .slider__img-container {
   position: relative;
   aspect-ratio: 2.5 / 2;
}

#slider-proyects .slider__img-container .modal__button{
   position: absolute;
   margin: 1rem 1rem 0 0;
   top: 0;
   right: 0;
}

/* tags */
.tag-container {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   padding-bottom: 1rem;
}

.tag-container__tech {
   display: flex;
   gap: 0.8rem;
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.tag-container__tech::-webkit-scrollbar {
   display: none;
}

.tag-container__tool {
   display: flex;
   gap: 0.8rem;
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.tag-container__tool::-webkit-scrollbar {
   display: none;
}

.tag {
   display: flex;
   align-items: center;
   padding: 0.2rem 0.5rem;
   border: solid 0.1rem;
   border-radius: 0.3rem;
   gap: 0.35rem;
   color: var(--color-textoSecundario);
}

.tag.--tech {
   background-color: var(--color-fondoTagTecno);
   border-color: var(--color-bordeTagTecno);
}

.tag.--tool {
   background-color: var(--color-fondoTagHerr);
   border-color: var(--color-bordeTagHerr);
}

.tag__img-container {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 1 / 1;
   width: 1.2rem;
}

.tag__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.tag p {
   font-size: var(--texto-xs-mobile);
   font-weight: 600;
   white-space: nowrap;
}

/* modificadores de estilo para propiedad generalDescription */
.--text-body {
   font-size: var(--texto-s-mobile);
   margin-bottom: 0.5rem;
}

.--text-bold{
   font-weight: 650;
}

.--estandar-ul li{
   margin-left: 35px;
}

.details {
   margin: 0.5rem 0;
}

.details[hidden]{
   display: block;
}

.details__title {
   font-size: var(--texto-l-mobile);
   font-weight: 500;
   display: flex;
   list-style: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: start;
   padding-bottom: 0.3rem;
   user-select: none;
   gap: 0.15rem   ;
   outline: none;
   -webkit-tap-highlight-color: transparent;
}

.details__title::-webkit-details-marker {
   display: none;
}

.details__title::after {
   content: "";
   width: 1.2em;
   height: 1.2em;
   background-image: url("../sources/img/dropdown-arrow.svg");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   transform: rotate(0deg);
   transition: transform 0.3s ease;
   filter: var(--color-flecha-dropdwan);
}

.details[hidden] .details__title::after {
  transform: rotate(-90deg);
}

.details__content {
   display: flex;
   flex-direction: column;
   max-height: var(--max-height);
   transition: max-height 0.45s ease-out;
   overflow: hidden;
}

.details[hidden] .details__content {
   max-height: 0px;
   transition-duration: 0.35s;
}

/* proyect-modal seccion de links */

.links__title {
   font-size: var(--texto-l-mobile);
   margin-bottom: 0.35rem;
}

.links__list-container {
   list-style: none;
}

.links__item {
   padding: 0.2rem;
   padding-left: 0.5rem;
}

.links__item.details {
   margin: 0;
}

.links__item-content {
   display: flex;
   gap: 0.3rem;
   align-items: center;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;   
   -webkit-tap-highlight-color: transparent;
   outline: none;
   text-decoration: none;
   color: var(--color-textoPrincipal);
   font-size: var(--texto-s-mobile);
}


.links__item-content img {
   width: var(--texto-xl-mobile);
   height: var(--texto-xl-mobile);
   filter: var(--color-linksIMGs);
}

.links .details__content {
   margin-left: 1rem;
}

.details__content .links__list-container {
   padding-left: 0.5rem;
} 

.details__content .links__item{
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 0.3rem;
   padding: 0.1rem;
}

.details__content .links__item::before {
   content: "▹";
}

@media (min-width: 64rem) {
   #proyect-modal .modal__content {
      height: fit-content;
      width: fit-content;
      max-width: 85vw;
   }

   #proyect-modal .slider {
      order: 2;
      display: flex;
      align-items: center;
      width: fit-content;
      height: fit-content;
   }

   #proyect-modal .modal__scroll-wrapper {
      width: 35%;
      position: relative;
      min-width: 365px;
      overflow: auto;
      scrollbar-width: thin;
      scrollbar-gutter: stable;
   }

   #proyect-modal .modal__text-container {
      position: absolute;
      order: 1;
      width: 100%;
      overflow-y: auto;
      min-width: 365px;
   }

   #slider-proyects .slider__gallery {
      max-height: 90vh;
   }

   #slider-proyects .slider__button-container {
      left: auto;
      right: 0;
   }

   #slider-proyects .slider__img-container .modal__button{
      margin-right: 3.95rem;
   }

   #proyectM-back-btn {
      display: none;
   }

   #proyectM-button-close{
      display: flex;
   }

}