@import 'https://unpkg.com/open-props@beta.5' layer(library);
@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  :where(:not(dialog)) {
    margin: 0;
  }
}
@layer base {
  :root {
    color-scheme: dark;
    font-family: "Poppins", sans-serif;
    --palette-hue: 249;
    --palette-hue-rotate-by: 0;
    --palette-chroma: 0;
    --black: black;
    --extend-font-size-fluid-4: clamp(3.5rem, 4.333vw, 4.5rem);
    --surface-1: #1D1D1B;
    --surface-invert: #ffffff;
    --text-1: #ffffff;
    --text-invert: #1D1D1B;
    --brand: var(--red);
    --space-xxs: var(--size-1);
    --space-xs: var(--size-2);
    --space-sm: calc(var(--size-1) + var(--size-2));
    --space-md: var(--size-3);
    --space-lg: var(--size-7);
    --radius-sm: var(--radius-2);
    --radius-md: var(--radius-3);
    --radius-lg: var(--radius-round);
    --border-thin: var(--border-size-1);
    --timing-function-slow-ease: var(--ease-1);
    --timing-function-fast-ease-in-out: var(--ease-in-out-4);
    --button-link-font-size: var(--font-size-1);
    --button-link-font-weight: var(--font-weight-7);
    --button-link-block-size: 3.25em;
    --button-link-min-inline-size: 7em;
    --button-link-border: var(--border-size-1) solid currentColor;   
    --button-link-text: white;
    --button-link-hover-face: color-mix(in oklch, white, transparent 80%);
    --button-link-primary-text: white;
    --button-link-primary-face: var(--red);
    --button-link-primary-border: none;
    --button-link-primary-hover-face: color-mix(
      in oklch,
      var(--black),
      transparent 20%
    );
    --button-link-border-radius: var(--radius-round);
    --nav-logo-inline-size: var(--size-12);
    --icon-btn-block-size: var(--size-8);
    --icon-btn-inline-size: var(--size-8);
    --highlight-text: var(--red);
    --body-font-size: var(--font-size-1);
    --body-font-weight: var(--font-weight-4);
    --headline1-font-weight: var(--font-weight-7);
    --headline1-font-size: var(--font-size-fluid-3);
    @media (width >= 700px) {
      --headline1-font-size: var(--extend-font-size-fluid-4);
    }
    --nav-link-font-size: var(--font-size-1);
    @media (width < 1056px) {
      --nav-link-font-size: var(--font-size-2);
    }
    --nav-block-size: 100px;
    @media (width < 1056px) {
      --nav-block-size: 80px;
    }
  }
body {
    -webkit-font-smoothing: antialiased;
    background-color: var(--surface-invert);
    color: var(--text-1);
    font-size: var(--body-font-size);
    min-block-size: 100dvb;
  }
}
html {  
  scroll-behavior: smooth;
}
@layer App {
  .nav {
    display: grid;
    place-items: center;
    z-index: 1000;
  }
  .nav-container {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    place-items: center;
    min-block-size: var(--nav-block-size);
    inline-size: min(100%, 1656px);
    gap: var(--space-md); 
    @media (width >=1056px) {
      padding-inline: var(--space-lg);
      grid-template-columns: 1fr 1fr 1fr;
    }
  @media (width < 1056px) {
      padding-inline-start: var(--space-md);
      padding-inline-end: var(--space-sm);      
    }
  }
  .logo-wrapper {
    justify-self: start;
    inline-size: var(--nav-logo-inline-size);
  }
  .logo-img {
    inline-size: 100%;
    block-size: auto;
    display: block;
    object-fit: cover;
    cursor:auto;
    user-select: none;
  }
  .menu-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: subgrid;
    place-items: center;
    grid-column: 2/-1;
    z-index: 2000;

    @media (width < 1056px) {
      align-content: space-between;
      background-color: white;
      gap: var(--space-lg);
      grid-auto-flow: row;
      inset: 0;
      padding-block-end: var(--space-lg);
      place-items: start stretch;
      position: absolute;
      overflow-y: auto;     
      z-index: 2000;
      transition: opacity 0.3s var(--timing-function-slow-ease),
        scale 0.5s var(--timing-function-slow-ease),
        display 0.5s var(--timing-function-slow-ease) allow-discrete;

      @starting-style {
        opacity: 0;
        scale: 0;
      }    

      .nav:not(.open) & {
        display: none;
        opacity: 0;
        scale: 0.6;
      }
    }
  }

  .mobile-wrapper {
    display: grid;
    gap: var(--space-md);
  }
  .mobile-mobile-head {
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    min-block-size: var(--nav-block-size);
    padding-inline-start: var(--space-md);
    padding-inline-end: var(--space-sm);
    justify-content: space-between;
    
    @media (width >=1056px) {
      display: none;      
    }
  } 

  .menu {
    z-index: 10000000;
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
    /*gap: var(--space-lg);*/
    list-style: none;
    padding: 0;

    @media (width > 1055px) and (width < 1300px) {
      grid-auto-flow: column;
      gap: 1px;
      margin-right: -5px;      
      font-size: smaller;     
    }
   
    @media (width < 1056px) {
      z-index: 10000000;
      grid-auto-flow: row;
      gap: var(--space-md);
      padding-inline: var(--space-md);     
    }      
  }
  @media (width < 1056px) {
    #logo-audiovisuales {
      display: none;
      }
    }
    @media (max-width: 1173px) {
      .menu p {
        display: none;        
      }      
    }
    @media (max-width: 1056px) {
      .menu .logo-img {
        display: none;        
      }  
    }

  .nav-link {
    z-index: 2000;
    padding: 0 20px;
    text-wrap: nowrap;
    display: block;
    color: var(--text-invert);
    text-decoration: none;
    padding-block: var(--space-sm);
    font-size: smaller;
    &:hover {      
      background-color: #1D1D1B;
      color: white;
      border: none;      
      text-align: left;
      text-decoration: none;      
      cursor: pointer;
      border-radius: 30px; /* Forma cilíndrica */
      transition: background-color 0.3s ease, transform 0.3s ease;
    }

    @media (width < 1056px) {
      padding-block: var(--space-sm);
    }
  }
  .nav-link p {
    background-color: red
  }
  .menu p  {
    color: #1D1D1B ;
    background-color:white;
    &:hover {      
      background-color: white;
      color: #1D1D1B
  }}

  /*****    idiomas   *******/
.idioms {
    z-index: 10000;
    padding-bottom: 11px;
    display: grid;
    grid-auto-flow: column;
    /*gap: var(--space-md);*/
    @media (width < 1056px) {
      grid-auto-flow: column;
      /*padding-inline: var(--space-md);*/
    }
    @media (width >=1056px) {
      justify-self: start;
    }
}
.idioms p {   
    color: #000000;
    font-size: smaller;
    text-align: center;
    line-height: 27px;
    margin-right: 0.5rem;
    transition: 0.3s;    
}
.sp, .en {
    cursor: pointer;
    opacity: 1;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#en_lang {
    display: none;
  }  
/* Language */
.active-lang {
  /*display: flex !important;*/
  transition: display .5s;
}
.active-flag {  
  transition: all .5s;
  opacity: 1 !important;
}
@media (width >=1056px) {
  .idioms .logo-img {
    display: none;
  }
}
/*****    redes sociales menu de arriba   *****/
.actions {
    display: grid;
    grid-auto-flow: column;
    gap: var(--space-md);
    padding-bottom: 11px;

    @media (width < 1056px) {
      grid-auto-flow: row;
      padding-inline: var(--space-md);
    }
    @media (width >=1056px) {
      justify-self: end;
    }
}
.social-icons {
    display: flex;
}
.social-icons a {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #000000;    
    color: #fff;
    text-align: center;
    line-height: 27px;
    margin-right: 0.5rem;
    transition: 0.3s;
}
#face:hover {  
    background: #1877F2; 
}
#tw:hover {
    background-color: grey; 
}
#ig:hover {
    background-color: #E1306C;
}
#you:hover {
    background-color: #FF0000; 
}
#mail:hover {
    background-color: blue; 
}
/****   boton hamburguesa   *****/
  .icon-btn {
   z-index: 1000;
    position: absolute;
    right: 20px;
    color: var(--text-invert);
    inline-size: var(--icon-btn-inline-size);
    block-size: var(--icon-btn-block-size);
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);

    @media (width >=1056px) {
      display: none;
    }
  }
  @media (width < 1200px) and (width > 1056px) {
    .social-icons a {      
      width: 20px;
      height: 20px;
      border-radius: 50px;      
      text-align: center;
      line-height: 20px;
      margin-right: 0.2rem;
      transition: 0.3s;   
    }  
  }

  /****   boton central   *****/
  .button-link {    
    text-decoration: none;
    font-size: x-large;   
    font-weight: var(--button-link-font-weight);
    padding-inline: var(--space-md);
    padding-block: var(--space-md);
    border-radius: var(--button-link-border-radius);
    block-size: var(--button-link-block-size);
    transition: background-color 0.2s var(--timing-function-slow-ease);
    color: var(--button-link-text);   
    background-color: #1a1a1a;
    min-inline-size: var(--button-link-min-inline-size);
    display: inline-grid;
    place-items: center;
    font-weight: var(--headline5-font-weight);
    white-space: nowrap;
    text-overflow: ellipsis;
    /*&:hover {
      background-color: var(--button-link-hover-face);
    }
    &.primary {
      color: var(--button-link-primary-text);
      background-color: var(--button-link-primary-face);
      border: var(--button-link-primary-border);
      &:hover {
        background-color: var(--button-link-primary-hover-face);
      }
    }*/
  }

  /* Main */
  .hero {
    block-size: max(490px, calc(90dvb - var(--nav-block-size)));
    display: grid;
    gap: var(--space-lg);
    inline-size: 100%;
    background-image: url("./img/tb06.jpg");    
    background-repeat: no-repeat;
    background-size: cover;
  }
  .hero-content {
    block-size: 100%;
    display: grid;
    gap: var(--space-md);
    grid-template-rows: 1fr auto 1fr;
    place-items: end center;
    padding: var(--space-md);
    overflow: hidden;    
  }
  .hero-content h1 {
    font-size: 3.4rem;     
    line-height: 1.2;   
    font-weight: var(--headline5-font-weight);
    text-align: center;
    display: inline-grid;
    inline-size: 100%;
    white-space: nowrap;
    color: white;
  }
  .heading {
    position: absolute;    
    margin-left: 10px;
    padding: 6px 35px;
    background-color: #1D1D1B;
    color: white;
    border: none;      
    text-decoration: none;     
    border-radius: 30px; /* Forma cilíndrica */      
}
  h2 {    
      font-family: "Poppins", sans-serif;
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 1.2;
      text-align: left;
      /*padding: 0 0.1rem;*/
      color: #ffffff;
  }  
  /*.button-link  {
      margin-top: 50px;
  }*/

  .hero-header {
    grid-row: 2/3;
    display: grid;
    place-items: center;
    gap: var(--space-lg);
  }
  .scroll-btn {
    inline-size: var(--icon-btn-inline-size);
    block-size: var(--icon-btn-block-size);
    display: inline-grid;
    color: var(--text-invert);
    grid-row: 3/-1;
    border: var(--border-thin) solid var(--surface-invert);
    padding: 15px;
    border-radius: var(--radius-lg);
    transition: background-color 0.2s var(--ease-1), color 0.2s var(--ease-1);
    &:hover {
      background-color: var(--surface-1);
      color: var(--text-1);
    }
  }
}

@keyframes animate-ratio {
  from {
    aspect-ratio: 16/9;
    clip-path: inset(0 0);
  }
  to {
    aspect-ratio: 2.5/6;
    clip-path: inset(120px 0 50px 0);
    padding-block-start: 120px;
    padding-block-end: 50px;
  }
}
@keyframes push-up {
  10%,
  90% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-200%);
  }
}
@media (max-width: 1045px) {
  .hero-content h1 {
    font-size: 2.4rem;     
    line-height: 1.2;  
    text-align: center;
  }
}
@media (max-width: 700px) {
  .hero {
    block-size: max(490px, calc(80dvb - var(--nav-block-size)));
    display: grid;
    /*gap: var(--space-lg);*/
    inline-size: 100%;   
    background-position: center;   
  }  
  .hero-content h1 {
    font-size: 1.4rem;     
    line-height: 1.5;    
  }
  .button-link {    
    text-decoration: none;
    font-size: medium;   
  }
}
@media (max-width: 430px) {
  .hero-content h1 {
    font-size: 1.1rem;     
    line-height: 1.5;   
  }
}

/******  programas *******/
.programas { 
  position: relative;
  top: 1px;
  padding-bottom: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
  width: 100%; 
}
.programas .flex-container {
  display: flex;
  justify-content: space-evenly;
}
.programas .flex-container img {
  width: 60%;
}
.programas .flex-container > div { 
  margin: 10px;  
  text-align: center;
  line-height: 35px;  
}
@media (max-width: 1000px) {
  .programas .flex-container img {
    width: 40%;
  }
}
@media (max-width: 885px) {
  .programas .flex-container > div { 
    margin: 1px;  
    text-align: center;
    line-height: 15px;  
  }
  .programas .flex-container {
    display: grid;
    row-gap: 8px;
    grid-template-rows: auto auto auto;
  }
  .programas .flex-container .mecenazgo img {
    width: 30%;
  }
}

/*****   recursos    *****/
.recursos {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;    
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  gap: 20px;
  max-width: 1300px;
}
.recursos h2 {
  position: absolute;
  left: 72px;
  font-size: 20px;
  font-weight: 400;
  color: #000000;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.rec {
  display: grid;
  padding-top: 50px;
  width: 90%;
  max-width: 1270px;
  gap: 5px;
}
.recursos .item {
  display: block;  
  font-size: 1.8em;
  color: #000000;
  text-decoration: none;  
}
.recursos .item:hover {
  transform: scale(1.003);
  color:rgba(0, 0, 0, 0.4)
}
@media (max-width: 600px) {
  .recursos {
    height: 60vh;
  }
  .recursos .item {
    font-size: 1.8em;
  }
  .recursos h2 {
    left: 32px;
    font-size: 15px;
    font-weight: 400;
  }
}

/*****  CONTACTO   *******/
.contacto {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;    
}
.contacto h2 {
  background-color: #ffffff;
  position: absolute;
  padding-top: 3px;
  left: 72px;
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  text-align: left;
  text-transform: uppercase; 
}
@media (max-width: 600px) { 
  .contacto h2 {
    font-weight: 400;
    font-size: 14px;
  }
  .contacto {
    padding-bottom: 39px;
  }
}

/****  formulario nuevo   ******/
.form_contacto {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  font-family: 'Poppins', sans-serif;
  background-color: #fff;
  color: #000000;
}
.form-container {
  width: 80%;
  max-width: 1000px;
  padding: 20px;  
}
form {
  display: flex;
  flex-direction: column;  
}
label {
  margin-top: 15px;
  margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  color: #000000;
  background-color: white;
  border-radius: 20px; 
  font-size: 1rem;
}
textarea {
  resize: none;
}
.form_contacto button { 
  width: 170px;
  margin: 20px auto;
  padding: 10px;
  border: none;
  background-color: #333;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 25px;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #555;
}

                    
/******************   aportes   ********************/
.aportes {
  font-family: 'Poppins', sans-serif;  
  position: relative;
  top: 215px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 5px;
  width: 100%; 
}
.aportes h3 {
  color: #000000;
  font-size: 17px;
  font-weight:400;
}
.aportes .flex-container {
  display: flex;
  justify-content: space-evenly;
}
.aportes .flex-container img {
  width: 50%;
}
.aportes .flex-container > div { 
  margin: 10px;  
  text-align: center;
  line-height: 35px;  
}
.aportes .flex-container img:hover {
  transform: scale(1.1);
}
@media (max-width: 1000px) {
.aportes h3 {   
    font-size: 15px;
    font-weight:400;
  }
.aportes .flex-container img {
    width: 40%;
  }
}
@media (max-width: 885px) {
  .aportes .flex-container {
    display: grid;
    row-gap: 8px;
    grid-template-rows: auto auto auto;
  }
}

/****  audiovisuales   ****/
.cabecera {
  display: flex;
  align-items: center;
  margin: 0 35px 10px;
  font-family: 'Poppins', sans-serif;
  padding-top: 20px;
}
.cabecera .back-button {
  padding-top: 8px;
}
.cabecera h1 {
  font-weight: 300;
  color: black;
  font-size: 300%;
  padding-left: 15px;
}
.texto-audiovisuales { 
  position: absolute;
  max-width: 50%;
  padding-left: 55px;
  padding-top: 210px;  
}
@media (max-width: 1285px) {
  .texto-audiovisuales {
    position: absolute;
    text-align: left;
    max-width: 100%;
    padding-left: 55px;
    padding-right: 10px;
    padding-top: 240px;    
  }
}
@media (max-width:800px) {
  .texto-audiovisuales {    
    padding-top: 250px;
    padding-left: 20px;
    padding-right: 15px;  
  }
}
@media (max-width: 435px) {
  .texto-audiovisuales {
    padding-top: 250px;
  }
}
@media (max-width: 630px) {
  .cabecera {
      display: flex;
      align-items: center;
      margin: 0 35px;               
      padding-top: 0px;
  }
  .cabecera h1 {
      font-size: xx-large;
  }           
}
.videos {
  margin-top: 200px;
  padding-top: 20px;
  padding-bottom: 60px;
  background-color: rgb(216, 216, 216); 
}
.carousel-container {
  position: relative;
  max-width: 90%;
  margin: 20px auto;
  overflow: hidden;  
}
.carousel {
  display: flex;  
  align-items: center;
  justify-content: center; 
  width: 90%;
  margin: 0 auto;
}
.carousel-item {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: left;
  margin: 10px;
  background: #fff;  
  width: 300px;
  padding: 0px;
}
.carousel-item img {
  width: 100px;
  height: auto;
  margin-right: 15px;  
}
.info h3 { 
  position: relative; 
  left: 5px;
  top: 5px;
  color: #000;
}
.info p {
  font-size: 14px; 
  position: relative; 
  left: 5px;
  top: 85px;
  color: #333;
}
.gallery button { 
  position: absolute; 
  top: 50%;
  transform: translateY(-50%);
  background: none;  
  color: black;
  border: none;
  padding: 15px 15px;
  font-size: 45px;  
  cursor: pointer;  
  z-index: 1001;
}
.gallery button:hover {
  color:#acaaaa;
}
.izq {
  left: 20px;
}
.der {
  right: 20px; 
}
.carousel-track, .carousel-track-bis {  
  gap: 10px; 
  display: flex;
  justify-content: center; 
  flex-wrap: wrap;
  width: calc(300px * 18); 
  transition: transform 0.4s ease-in-out;
}
.carousel-track {
  width: calc(400px * 3); 
}
.carousel-track-bis {
  width: calc(400px * 3); 
  display: none; 
}
.carousel-track.active, .carousel-track-bis.active {
  display: flex; 
}

@media screen and (max-width: 768px) {
  .carousel {
    width: 100%;
  }
  .carousel-item {
    width: 100%;
  }
  .carousel-track {
    flex-wrap: wrap;
    display: flex;
    width: calc(300px * 1); 
  }
}
@media screen and (max-width: 480px) {
  .carousel-item {    
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: left;
      margin: 10px;
      background: #fff;
      border: 1px solid #ccc;
      width: 300px;
      padding: 0px;
    }    
    .carousel-item img {
      width: 100px;
      height: auto;
      margin-right: 15px;  
    }    
}
.gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    position: relative; 
}
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
}
.card {  
    display: flex;
    flex-direction: row;
    align-items: left;
    margin: 10px;
    background: #fff;
    border: 1px solid #ccc;
    width: 300px;
    height: 130px;
    padding: 0;
}
.card img {
    align-items: left;    
    width: auto; 
    height: 129px; 
    object-fit: cover;
}
.card-content {   
    display: flex;
    flex-direction: row;  
    padding-left: 0px;
    width: 100%; 
}
.card-content h3 {    
    margin: 10px ;
    font-size: 0.9em;
    color: #000;   
}
.card-content .flag {
    position: absolute; 
    margin: 95px 70px 0 250px;
    font-size: 1em;
}
.card-content h4 {
    position: absolute;    
    margin: 99px 70px 0 110px;
    font-size: 0.8em;
    color: #555;  
}
@media (max-width:450px) {
    .card {
      margin: 10px;    
      width: 290px;
      height: 130px;      
    }
    .card-content .flag {
      position: absolute;
      right: 18px;
      font-size: 1em;
    }    
    .izq {
      left: 5px;
    }
    .der {
      right: 5px;
    }
  }

/*****  seccion de  textos  ****/
.cabecera {
  display: flex;
  align-items: center;
  margin: 40px 35px;
  font-family: 'Poppins', sans-serif;  
}
.cabecera .back-button {
  padding-top: 8px;
}
.cabecera h1 {
  font-weight: 300;
  color: black;
  font-size: 300%;
  padding-left: 15px;
}
.cabecera p {  
  color: #000;
  font-weight: 300;
  font-size: small;
  font-family: 'Poppins', sans-serif;
}
.texto-secciontextos { 
  position: absolute;
  max-width: 50%;
  padding-left: 55px;
  padding-top: 250px;  
}
@media (max-width: 1285px) {
  .texto-secciontextos {
    position: absolute;
    text-align: left;
    max-width: 100%;
    padding-left: 55px;
    padding-right: 10px;
    padding-top: 240px;    
  }
}
@media (max-width:800px) {
  .texto-secciontextos {    
    padding-top: 360px;
    padding-left: 20px;
    padding-right: 15px;  
  }
}
@media (max-width: 435px) {
  .texto-secciontextos {
    padding-top: 400px;
  }
}
/* Contenedor de las tarjetas */
.cards-container { 
  position: relative; 
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 100%;
  margin-top: 250px;  
  padding: 30px 120px;
}
/* Diseño de las tarjetas */
.cards2 {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.cards2:hover {
  transform: scale(1.005);
}
/* Icono de la izquierda */
.card-icon {
  background-color: #000000;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-decoration: none;
}
.card-icon img {
  width: 35px;
  height: 35px;
}
/* Texto de las tarjetas */
.card-text {
  padding: 15px;
  flex-grow: 1;
}
.card-text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}
.card-text strong {
  display: block;
  margin-top: 5px;
  font-size: 0.7rem;
  color: #666;
}

@media (max-width: 600px) { 
  .cards-container {
    margin-top: 330px;
  } 
}

/****   seccion  organizaciones  (comparte cards con textos linea 1082)  ******/

.region {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;    
}
.region h2 {  
  position: absolute;
  padding-top: 3px;
  left: 92px;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  background-color: rgb(216, 216, 216);
  padding: 2px 8px;
  text-align: left;
  text-transform: uppercase; 
}
.region .line_contact {
  text-align: right;
  padding: 0 1px;
  height: 50px;
  width: 100%;
}
.org-icon {
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-decoration: none;
  cursor: default;
}
.org-icon img { 
  height: 55px;
}
.card-red-social {
  padding-right: 30px; 
  justify-content: flex-start;
  align-self: auto;
  gap: 10px;
}
.card-red-social #instagram-org {
  width: 28px;
  color: #E1306C;
}
.card-red-social #facebook-org {
  width: 30px;
  color: blue;
}
.card-red-social #www-org {
  width: 28px;
  color: rgb(216, 216, 216);
}
.card-red-social #twitter-org {
  width: 28px;
  color: black;
}
/* Responsivo */
@media (max-width: 967px) {
  .card-red-social {
    padding-right: 15px; 
  }
  .card-red-social #instagram-org {    
   width: 27px;
  }
}
@media (max-width: 918px) {
  .cards2 {      
    flex-direction: row;
    text-align: left;   
    height: 150px;
  }  
  .card-text p {
      font-size: 0.8rem;
  }
  .card-text strong {
      font-size: 0.6rem;
  }
  .region h2 {
    font-weight: 400;
    font-size: 14px; 
  }  
}
@media (max-width: 768px) { 
  .cards-container {
    padding: 20px 85px;
  }
  .card-red-social {    
    text-align: right;
    padding-right: 23px; 
  }
  .card-text p {
      font-size: 0.6rem;
  }
  .card-text strong {
      font-size: 0.5rem;
  }
  .org-icon img {
      width: 65px;
      height: 50px;
  }
  .region h2 {
    left: 22px;
    font-weight: 400;
    font-size: 14px;
  }
}
@media (max-width: 600px) {
  .region h2 {
    left: 20px;
    font-weight: 400;
    font-size: 14px;
  }
  .cabecera h1  {
    font-size: 30px;
  }  
}
@media (max-width: 480px) {
  .cards-container {
    padding: 20px 55px;
  }
  .cards2 {      
    flex-direction: row;
    text-align: left;
    /*width: 110%;*/    
  }  
  .card-text p {
    font-size: 0.6rem;
  }
  .card-text strong {
    font-size: 0.6rem;
  }
  .org-icon {     
      height: 80%;   
  }
  .card-text {
      padding: 10px;
  }
}
@media (max-width: 433px) {
  .cards-container {
    margin-top: 380px;
  }  
}

/*****   seccion de entrevistas con audios   ****/
.entrevistas  {
  padding-top: 30px;  
  color: black;
}
.cabecera-entrevistas {
  display: flex;
  align-items: center;
  margin: 0 35px 10px;
  font-family: 'Poppins', sans-serif;
  padding-top: 20px;
}
.cabecera-entrevistas .back-button {
  padding-top: 8px;
}
.cabecera-entrevistas h1 {
  font-weight: 300;
  color: black;
  font-size: 300%;
  padding-left: 15px;
}
.left-entrevistas {
  display: flex;
  flex-direction: column;
  align-items: left;
  margin: 0 95px 10px;
  font-family: 'Poppins', sans-serif;
  padding-top: 20px;
}
.left-entrevistas h2 {
  font-size: 20px;
  font-weight: bold;                    
  margin-bottom: 15px;
  color: black;                    
}
.left-entrevistas p {  
  color: #000;
  font-weight: 300;
  font-size: small;
  font-family: 'Poppins', sans-serif;
}
.puntos-entrevistas {
  display: flex;
  flex-direction: column;
  align-items: left;
  margin: 0 55px 10px;
  font-family: 'Poppins', sans-serif;
  padding-top: 20px;
}
.puntos-entrevistas ul {
  list-style-type: none;
  width: 50%;
}
.puntos-entrevistas li {  
  font-weight: 300;
  font-size: small;
  margin-bottom: 20px;
}
.puntos-entrevistas li::before {
  content: "›";
  margin-right: 10px;
  color: #000;
  /*font-size: 20px;*/
}

.audios {
  background-color: rgb(231, 231, 231);
  padding-top: 40px;
  padding-bottom: 40px;  
}
.carousel-item-entrevistas {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: left;
  margin: 10px;
  background: #fff;
  border: 1px solid #ccc;
  width: 300px;
  padding: 0px;
}
.carousel-item-entrevistas:hover {
  background: rgb(17, 17, 20);
  color: #ccc;
  cursor: pointer;
  .inter h3, .inter p {
    color: #ccc;
  }
}
.carousel-item-entrevistas img {
  width: 100px;
  height: auto;
  margin-right: 15px;  
}
.inter h3 {  
  position: relative;
  font-size: smaller;
  left: 5px;
  top: 7px;
  color: #000;
}
.inter p { 
  font-size: 14px;  
  position: relative; 
  left: 5px;
  top: 40px;
  color: #333;
}
/* Estilos Responsive */
@media (max-width: 918px) {  
  .left-entrevistas {
      margin:  0 45px;
  }  
  .left-entrevistas h2 {
      font-size: 18px;
  }
  .puntos-entrevistas {
      margin:  0 8px;                       
  }
  .puntos-entrevistas ul {    
      width: 100%;
  }
  .puntos-entrevistas li {      
      font-weight: 300;
      font-size: small;
      text-align: left
  }
}
@media screen and (max-width: 768px) {
  .cabecera-entrevistas h1 {    
    font-size: 30px;
    padding-left: 15px;
  }
  .carousel-item-entrevistas {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .carousel-item-entrevistas  {    
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: left;
    margin: 10px;
    background: #fff;
    border: 1px solid #ccc;
    width: 300px;
    padding: 0px;
  }    
  .carousel-item-entrevistas  img {
    width: 100px;
    height: auto;
    margin-right: 15px;  
  }  
}

/********    aca se agrego el nuevo codigo del popup de entrevistas con audios *****/
.popup {
  display: none; 
  position: fixed;
  z-index: 100000; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black; 
}
.popup-content {
  width: 100%;
  height: 75%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: white;
}
.popup-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.popup-center-text {
  font-size: 32px;
  margin-bottom: 10px;
}
.close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 36px;
  font-weight: bold;
  cursor: pointer;
}
.play-stop-btn {
  margin-top: 350px;
  padding: 10px 20px;
  background-color: white;
  color: black;
  border: none;
  cursor: pointer;
  font-size: 18px;
}
.progress-bar {  
  margin-top: 20px;
  width: 80%;  
}
.progress-bar input[type="range"] {   
  -webkit-appearance: none;
  width: 100%;
  height: 2px; /* Ajusta la altura a un tercio de la original */
  background: #ddd;
  border-radius: 5px;
  outline: none;
}
.progress-bar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}
.progress-bar input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #555;
  border-radius: 50%;
  cursor: pointer;
}

/* Responsive popup de entrevistas */
@media screen and (max-width: 768px) {
  .popup-content {
    width: 90%;
    height: 70%;
  }
  .close {
    font-size: 28px;
    right: 20px;
  }
  .popup-center-text {
    font-size: 24px;
  }
  .play-stop-btn {
    font-size: 16px;
  }
}

/****    galeria o muestra virtual de imagenes  ****/
.galeria {
  margin: 1px 40px;
}
.galeria .cabecera {
    display: flex;
    align-items: center;
    margin: 0 35px 10px;
    font-family: 'Poppins', sans-serif;
    padding-top: 20px;
}
.galeria .cabecera .back-button {
    padding-top: 8px;
}
.galeria .cabecera h1 {
    font-weight: 300;
    color: black;
    font-size: 300%;
    padding-left: 15px;
}
.galeria .construccion {
    display: flex;
    align-items: center;
    margin: 0 75px 10px;
    font-family: 'Poppins', sans-serif;
    padding-top: 20px;
}
.galeria .construccion h2 {                     
    padding-left: 15px;             
    color: gray;
    font-size: 130%;
    font-weight: 600;
}
@media (max-width: 550px) {
  .galeria .cabecera h1  {
        font-size: 36px;
    }
}
.muestravirtual {
  position: relative; /* Habilita posicionamiento relativo para el contenedor */
  display: inline-block; /* Ajusta el tamaño al contenido (opcional) */
  display: flex;               /* Utiliza flexbox para centrar */
  justify-content: center;     /* Centra horizontalmente */
  align-items: center;         /* Centra verticalmente */
  height: 100%;                /* Opcional, ajusta según el diseño */
  text-align: center;          /* Asegura que el contenido dentro del contenedor esté centrado */
}
.muestravirtual img {
  max-width: 90%;            /* Hace que la imagen sea responsive */
  height: auto;               /* Mantiene la proporción de la imagen */
  display: block;             /* Elimina el espacio en línea por defecto */
  margin: 0 auto;             /* Centra horizontalmente en caso de fallos */
}
.imagen-responsive {
  max-width: 90%; /* Hace que la imagen sea responsive */
  height: auto; /* Mantiene las proporciones */
  display: block; /* Elimina espacio extra debajo de la imagen */
}
.icono-centro {
  cursor: pointer;
  position: absolute; /* Permite colocar el SVG sobre la imagen */
  top: 50%; /* Centra verticalmente */
  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta el origen al centro */
  /*pointer-events: none; /* Opcional: evita que el SVG interfiera con eventos de usuario */
}

.icono-entrevista_popup {
  cursor: pointer;
  position: absolute; /* Permite colocar el SVG sobre la imagen */
  top: 50%; /* Centra verticalmente */
  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta el origen al centro */
  /*pointer-events: none; /* Opcional: evita que el SVG interfiera con eventos de usuario */
}

/***  modal de galeria de fotos  ***/
.modal {  
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  background: #000000;
  z-index: 80000000000; 
}
.modal-content { 
  position: relative;
  width: 80%;  
  max-width: 100%;
  background: #000000;
}
.slider {  
  position: relative;
  width: 100%;  
}
.slides {  
  display: flex;  
  transition: transform 0.5s ease-in-out; 
}
.slide {  
  width: 100%;  
  object-fit: contain;
  padding: 0 160px;
  
}
.slides i {
  z-index: 100000;
  position: fixed;
  top: 10%;
  right: 10%;
}
.popup-center-text {
  font-size: medium;
  color: white;
  z-index: 100000;
  position: fixed;
  top: 25%;
  right: 10%;
}
.controls button {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: black; 
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 24px;
  cursor: pointer;
  z-index: 1001;
}
.controls .prev {
  left: 15px;
}
.controls .next {
  right: 15px;
}
.cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 29px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #fff;
}
@media (max-width: 1000px) { 
.slide {  
    width: 100%;  
    object-fit: contain;
    padding: 0 100px;  
  }
.modal-content {    
    background: black;   
  }
.controls {
    position: relative;
    margin-top: 100px;
  }
}
@media (min-width: 800px) {
  .popup-center-text {
    font-size: x-large;
    color: white;      
  }
}
@media (max-width: 700px) {
  .controls button {    
    color: white;
    border: none;
    padding: 5px;
    font-size: 15px;
  }
  .slide {  
    width: 100%;  
    object-fit: contain;
    padding: 0 70px;  
} 
}
@media (max-width: 480px) {
  .modal-content {   
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .controls button {
    position: fixed;
    top: 80%;
    transform: translateY(-80%);
  }
  .controls .prev {
    left: 85px;
    font-size: 35px;   
  }
  .controls .next {
    right: 85px;
    font-size: 35px;     
  }
  .slide {
      display: block;
      margin: auto;
  }
  .controls {
      position: relative;
      margin-top: 10px;
  }
  .slide {  
      width: 100%;  
      object-fit: contain;
      padding: 0 20px;  
  }
  .modal-content { 
      
      width: 100%;  
      
      
}

}

/****   seccion sobre el proyecto    *****/
.proyecto {
  margin: 40px 80px;
}
.proyecto h1 {
  color: black;
  font-size: xx-large;
  font-weight: 300;
}
.proyecto .primera , .segunda , .tercera {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1px;
  grid-auto-rows: minmax(10px, auto);
  width: 75%;
}
.proyecto .primera, .segunda , .tercera {
  grid-column: 1;
  grid-row: 2 / 5;
  color: black;
  font-size: small;
}

.proyecto .cuarta img {
  max-width: 100%;
}

.proyecto .quinta {
  color: black;
  font-size: small;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 1px;
  grid-auto-rows: minmax(100px, auto);
}
.proyecto .quinta img {
  display: flexbox;
  align-content: center;
  justify-content: center;
  width: 50%;
}
.proyecto .autores {
  /*display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1px;
  grid-auto-rows: minmax(10px, auto);*/

  color: black;
  font-size: small;
  padding: 20px;
  overflow: hidden;
}


.autor {  
  display: grid;
  grid-template-columns: 1fr 4fr;
  /*gap: 10px; Espacio reducido entre la imagen y el texto */
  align-items: start;
  max-width: 100%;
  margin: 0 auto;  
}

.autor__imagen img {
  width: 160px;
  
}
.autor__texto h2 { 
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #333;
}
.autor__texto p {  
  font-size: small;
  margin-bottom: 15px;
  color: black;
}
@media (min-width: 1000px) {
  .autor {
      gap: 5px; /* Ajuste de la distancia a 15px */
  }
  .autor__texto {     
      max-width: 70%; /* Limitar el ancho del texto al 70% */
  }  
}

@media (max-width: 1000px) {
  .autor {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .autor__texto {
    text-align: left;
    max-width: 50%;
  }
}

.proyecto .fotos {                        
  height: 16em;
  width: 16em;                       
  text-align: center;
  color: #fff;                       
  box-shadow: 0 0 10px 2px #ccc;
  margin: auto;
}
@media screen and (max-width: 800px) {
  .proyecto {
    margin: 40px 30px;
  }
  .proyecto .primera {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    place-items: center;
    grid-gap: 1px;
    grid-row-gap: 1px;
    grid-auto-rows: minmax(10px, auto);
  }
  .proyecto .primera p {
    grid-column: 1;    
  }
  .proyecto .segunda { 
    width: 100%;  
    display: grid;
    place-items: center;
    grid-template-columns: repeat(1, 1fr);    
  }  
  .proyecto .segunda p {  
    grid-column: 2;
    grid-row: 2;    
  }
  .proyecto .tercera { 
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    place-items: center;
    grid-gap: 1px;
    grid-row-gap: 5px;
    grid-auto-rows: minmax(10px, auto);
  }
  .proyecto .cuarta img {
    display: none;
  } 
}
@media screen and (max-width: 800px) {
  .autor__texto {     
    max-width: 100%;    
}
.autor__imagen img {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  place-items: left;
  grid-gap: 1px;
  grid-row-gap: 5px;
  grid-auto-rows: minmax(10px, auto);
} 
  .proyecto .cuarta {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1px;
    grid-auto-rows: minmax(10px, auto);
  }
  .proyecto .cuarta p {
    grid-column: 1;
    grid-row: 1 / 5; 
  }  
}
@media screen and (max-width: 800px) {
  .proyecto .quinta {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1px;
    grid-auto-rows: minmax(10px, auto);
  }
  .proyecto .quinta p {
    grid-column: 1;
    grid-row: 1 / 5; 
    }  
}

/*******  footer   *******/
section footer {
  position: relative;
  top: 235px;
  background-color: #111; 
  color: white;
  display: flex;
  flex-direction: column;
  height: 24vh;
}
footer {
  margin-top: auto;
  background-color: #111; 
  padding: 1px;
}
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 20px auto;
}
.footer-logo {
  display: flex;
  align-items: center; 
}
.footer-logo img {
  height: 90px; 
  margin: 0 auto;
}
.footer-icons {
  display: flex;
  gap: 32px;  
}
.footer-icons a:hover {
  transform: scale(1.2); 
}
.footer-icons a {
  color: #fff;
}
.design {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: small
}
.design a {
  text-decoration: none;
  color: #fff;
}
@media (max-width: 777px) {
  section footer {
    height: 40vh;   
  }
  .footer-container  {
    display: grid;
    row-gap: 28px;
    grid-template-rows: auto auto ;   
  }
  .footer-logo img {
    width: 45%;
    height: auto;
  }
  .footer-icons {
    display: flex;
    gap: 21px;  
}
  .footer-icons, .footer-logo, .design {
    margin: 0 auto;
  }
}
@media (max-width: 500px) {
  section footer {
    height: 30vh;   
  }
}