@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Chivo&family=MuseoModerno:wght@100;700&display=swap');

/*
================================
  orden de las reglas de estilo:
  de lo general a lo particular,
  de arriba hacia abajo,
  de celular a tablet,
  de tablet a escritorio
================================
*/



/* "reseteo" selector universal */
*,
*::after,
*::before
 {
  /* para que el ancho de las cajas
     se calcule hasta los bordes y NO
     sólo por sus contenidos */
  box-sizing: border-box;

  margin: 0;
  padding: 0;
  border: 0;
  outline-color: transparent;
}


/* ----------------
   reglas generales
   ---------------- */

html {
  /* scroll suave */
  scroll-behavior: smooth;
  /* para que el encabezado quede visible siempre */
  scroll-padding-block-start: 5em;
}

  /* animaciones */

  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }
  }

  body {
  /* tipografía general del proyecto */
  font-family: 'Chivo';
  }

  #main {
    max-width: 1000px;
    margin: auto;
  }

/* selector múltiple */
h1,
h2,
h3,
h4,
h5,
h6 { /* redefine los márgenes inferiores para que midan el tamaño de la tipografía */
  margin-block-end: 1em;
}

h1 {
  font-size: 40pt;
}

p {
  margin-block-end: 1em;
  text-align: justify;
}

/* TODOS los vínculos */
a {
  /* elimina los subrayados */
  text-decoration: none;
}

/* TODAS las listas */
ul,
ol {
  list-style: none; /* elimina bullets, números etc. */
}

/* TODAS las imágenes */
img {
  max-width: 100%;
  height: auto;
}


/* selector múltiple */
h1,
h2,
h3,
h4,
h5,
h6,
p { /* redefine los márgenes inferiores para que midan el tamaño de la tipografía */
  margin-block-end: 1em;
}

/* TODOS los vínculos */
a {
  /* elimina los subrayados */
  text-decoration: none;
}

/* TODAS las listas */
ul,
ol {
  list-style: none; /* elimina bullets, números etc. */
}

/* TODAS las imágenes */
img {
  /* para que NO midan más que la etiqueta que las contiene */
  max-width: 100%;
  /* opcional, evita deformaciones en navegadores antiguos */
  height: auto;
}

.contenedora {
  width: min(50rem, 100%); /* limita el ancho a 800px */
  padding: 1rem; /* relleno igual a un renglón */
}

/* lo que tienen en común el encabezado y el pie */
header,
footer {
  background-color: #242ee0;
  color: hsl(0, 0%, 97%);
}

#footer {
  margin: auto;
  margin-block-start: 4em;
}

.columnaredes {
  margin-left: 1em;
}

/* ----------
   encabezado
   ---------- */

header {
  position: sticky;
  /* distancia 0 del borde */
  top: 0;
  /* capa superior arriba de casi todo */
  z-index: 8000;
}

/* caja que "limita" al logo y al menu */
header .contenedora {
  display: flex; /* caja flexible */
  /* si los elementos "hijos" no caben en una fila,
     van a la fila siguiente */
  flex-wrap: wrap;
  
  /* elementos "hijos" separados en la horizontal */
  justify-content: space-between;
  
  /* elementos "hijos" centrados en la vertical */
  align-items: center;

  margin: 0em 1em;
}

#logo {
  display: flex; /* caja flexible */
  align-items: center; /* hijos centrados en la vertical */
  /* sale del fondo pero no parece */
  position: relative;
  /* capa superior, arriba de todo */
  z-index: 9999;
}

/* ----
   menu
   ---- */

/* botón "hamburguesa" */
.menu-btn {
  background: hsl(0 0% 100% / 0.25);
  border-radius: 50%;
  box-shadow: -5px 5px 5px hsl(180 100% 4% / 0.2);
  padding: .75rem;
  width: 3rem;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 0.3s ease-out; /* anima el "hover" */
  /* fijo, no "scrolea", no genera scroll */
  position: fixed;
  /* emplazamiento 1 renglón del borde superior */
  top: 1em;
  /* emplazamiento 1 renglón del borde derecho */
  right: 1em;
  /* en capa superior, casi arriba de todo */
  z-index: 9000;
}

/* cada barra de la "hamburguesa" */
.menu-btn .btn-linea {
  width: 25px;
  height: 3px;
  margin: 4px 0 4px 0;
  background: hsl(0 0% 90%);
  transition: all 0.3s ease-out;
  /* capa superior, pero no parece */
  position: relative;
  /* capa superior, casi arriba de todo */
  z-index: 9000;
}

/* cada barra, transformacion para formar la "X" */
.menuVisible .menu-btn .btn-linea {
  transform: rotate(180deg);
}
/* Las tres barras para formar la "X" */
.menuVisible .menu-btn .btn-linea:nth-child(1) {
  transform: rotate(45deg) translate(4px, 6px);
}
.menuVisible .menu-btn .btn-linea:nth-child(2) {
  opacity: 0;
}
.menuVisible .menu-btn .btn-linea:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -6px);
}

/* menú propiamente dicho */
nav ul {
  background-color: hsl(210 92% 10% / 95%);
  display: grid;
  place-items: center;
  place-content: center;

  /* sale del fondo, queda fijo */
  position: fixed;
  /* emplazamiento,
  estirado en toda la ventana */
  inset: 0;
  /* capa superior, arriba de casi todo */
  z-index: 8000;
  /* escondido "a la derecha" */
  translate: 100%;
  
  transition: all .6s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
}

/* el menu cuando "nav" tiene la clase "menuVisible" */
.menuVisible ul {
  background-color: hsl(210 92% 30% / 95%);
  transition: all .4s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
  
  /* se muestra */
  translate: 0;
}

/* cada vínculo del menu */
nav ul li a {
  border-bottom: solid 3px hsl(0 0% 100% / 0.1);
  color: white;
  display: block;
  font-size: 1.5rem;
  margin-block-end: .5rem;
  width: min(70vw, 20rem); /* el valor menor entre el 40% del ancho de la ventana del navegador y 240px */
  text-align: center;
  
  padding: .5rem;
  text-decoration: none;
}

nav ul li a:hover {
  border-bottom: solid 3px hsl(0 0% 100% / 0.5);
  transition: all .3s;
}

/* ----------------
   cuerpo principal
   ---------------- */

/* galeria de imagenes */

.galeria {
  padding: 0 1em 2em 1em;
  width: min(75em, 100%);
  margin-inline: auto;
}

.las-imagenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
  gap: .25em;
}


.galeria figure {
  border-radius: 5px;
  
  aspect-ratio: 1; /* para que "figure" sea un cuadrado*/
  
  /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
  position: relative;
  /* para ocultar lo que "excede" sus límites */
  overflow: hidden;
}

.galeria img {
  /* para que la imagen "llene" la etiqueta "img" aun con otras porporciones */
  object-fit: cover;
  object-position: left center;
  width: 100%;
  height: 100%;
  /* display: block; /* para que "desaparezca" el espacio que queda debajo de la imagen */
}

.galeria figcaption {
  background-color: black;
  /* mix-blend-mode: hard-light; */
  color: white;
  padding: .5em;
  line-height: 1em;
  text-transform: uppercase;
  font-weight: 700;
  
  /* para superponer el epígrafe sobre la foto */
  position: absolute;
  /* estirar para que ocupe todo figure */
  inset: 0;
  /* mover para que se vea apenas el "titulo" de la foto */
  transform: translateY(calc(100% - 2em));
  
  transition: all .6s ease;
}

/* propiedades de figcaption SÓLO cuando
 el cursor se coloca encima de "figure" */
.galeria figure:hover figcaption {
  background-color: #ff4d1d;
  transition: all .3s ease;

  /* emplazamiento, 0 del borde superior */
  transform: translateY(0);
  /* grid */
  display: grid;
  /* texto centrado */
  text-align: center;
  place-items: center;
  place-content: center;
  /* relleno en linea 2 renglones */
  padding-inline: 2em;
}

.galeria figcaption span {
  display: block;
  font-size: .75em;
  color: #ddd;
  margin-block-start: .5em;
  text-transform: none;
}

.galeria figcaption a {
  display: inline-block;
  margin-block-start: .5em;
  background-color: hsl(209 100% 35% / 0.5);
  color: hsl(0 0% 90% / 0.85);
  padding: .25em 1em;
  border-radius: 2em;
}

.galeria figcaption a::after {
  content: " →";
}

.galeria figcaption a:hover {
  background-color: #ff4d1d;
  box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
  color: hsl(0 0% 90%);
}

/* scrool de ganadores */
div.scroll-container {
  overflow:scroll;
  white-space: nowrap;
}

div.scroll-container img {
  padding: 5px;
}

footer h2{
  font-family: 'MuseoModerno';
  padding-top: 1em;
  padding-left: .5em;
}

.contenedorcolumnas{
  display: flex;
  flex-wrap: wrap;
  margin: 0em 1em;
  gap: 1.5em;
}

#logosredes{
  padding: 4%;
  margin-inline-start: 1px;
}

/*main*/
main {
  margin: 0em 2em;
}

/* sección textos */

h1{
  font-family: 'MuseoModerno';
  font-weight: 'ExtraBold';
  text-align:center;
  line-height:normal;
  margin: 1rem;
  color:#242ee0;
}

#encabezadotexto{
  font-family: 'Chivo';
  font-size: 12pt;
  color:#242ee0;
  text-align:left;
  line-height:normal;
  margin: 1rem;
  padding: 0%;
}

.bajadatexto{
  padding: 2em;
  margin: 2em 0em;
  text-align: center;
  background-color: #000;
  color: #ffffff;
  border-radius: 10px;
  font-size: 12pt;
  line-height: 1.6;
  text-align: justify;
}

#tituloboton{
  padding: 1em;
  text-align: center;
  background-color: #ff4d1d;
  color: #f5f5f5;
  margin: auto;
  margin-top: 2em;
  margin-block-end: 3em;
}

h2,h3,h4{
  font-family: 'Chivo';
}

figcaption{
  font-family: 'Chivo';
}

/* footer */

.contenedorcolumnas{
    display: flex;
    flex-wrap: wrap;
}

.columnaredes:last-child p a {
  margin-bottom: 20px; 
  color: #fff; 
  font-size: 2em; 
  margin-right: 10px;
}

/* footer */

footer >p:last-child {
  margin-block-end: 0;
}



/* --------------------------
   media queries,
   para cambiar la apariencia
   en la medida en que el
   navegador se ensancha
   (mobile first)
   -------------------------- */

/* cambios a partir de los 600px */
@media(min-width: 605px) {

  /* el menú deja de ser fijo */
  header nav {
    /* para que esté en capa superior pero que no parezca */
    position: relative;
  }
    
  /* botón "hamburguesa" oculto */
  .menu-btn {
    display: none;
  }

  /* menu visible */
  header nav ul,
  header .menuVisible ul {
    /* caja flexible para menu horizontal*/
    display: flex;
    /* separación entre sus elementos */
    gap: 2em;

    /* para que esté en capa superior pero que no parezca */
    position: relative;

    /* elimina desplazamiento */
    translate: 0;

    /* elimina fondo */
    background-color: unset;
  }
    
  /* items de lista  que contienen los vínculos del menu */
  header nav ul li {
    min-width: 4em; /* que no midan menos de: */
  }

  /* vínculos del menu principal */
  header nav ul li a {
    color: white;
    font-family:'MuseoModerno' ;
    font-weight:510;
    font-size: 1.1rem;
    width: auto;
    text-align: center;
    display: block; /* para que sean "cajas" */
    margin-block-end: unset;
    border-block-end: unset;
  }
  
  /* cuando el cursor se posiciona sobre los vínculos */
  header nav ul li a:hover {
    background-color: #ff4d1d;
    color: white;
    border-block-end: unset;
  }
  
  #main {
    max-width: 1000px;
  }


  /* para que "artículo 1" y "artículo 2"
  queden uno al lado del otro */
  .textos > .articulos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }

  #galeria figcaption {
    font-size: 1em;
  }

  .infoT {
    display: flex;
    flex-wrap: wrap;
  }

  .infoT img {
    max-width: 80vw;
  }

  .infoT p {
    margin-left: 0;
    margin-top: 1em;
  }

  #galeria figcaption span {
    font-size: .6em;
  }
}



/* ----------
   INICIO PREGUNTAS FRECUENTES
   ---------- */

#preguntasfrecuentes{
  display: flex;
  gap: 1em;
}

#botonpregunta{
  width: 8%;
}


/* ----------
   FIN PREGUNTAS FRECUENTES
   ---------- */


/* ----------
   INICIO HISTORIA
   ---------- */

   #historia{
    font-family:'chivo';
    color: rgb(255, 255, 255);
    background-color: black;
     min-height: 100vh;
    
  }
  
  #negro{
    background-color: black;
    padding: .5em;
    margin-block-start: 4em;
  }

  #negroH {
    background-color: rgb(29, 29, 29);
  }
  
  .siam img {
    margin-block-start: 2em;
    max-width: 255px;
    min-height: 115px;
    border: solid .2em #464646;
    border-radius: 2%;
    margin-right: .5em;
  }
  
  .siam {
    margin: auto;
    display: flex;
    gap: .5em;
    align-items: flex-start;
  }
  
  .encabezadoH {
    padding-top: 2em;
    align-self:flex-start;
    display: grid;
    grid-template-rows: auto auto auto;
    align-items: end;
    gap: .3em;
    margin: left;
    margin-block-end: 70px;
  }
  
  .siam h1 {
    margin: 0;
    line-height: 1;
    color: #ffffff;
    text-align: left;
  }
  
  .siam h2 {
    font-size: 19.8pt;
    font-weight: lighter;
    margin: 0;
  }
  
  .inicios p {
    margin: 0;
    background-color: none;
    text-align: justify;
    font-weight: lighter;
    font-size: 12pt;
    line-height: 1.2;
  }
  
  .inicios {
    margin-block-start: 20px;
    max-width: 840px;
    padding: 1em;
    background-color: hsl(0, 0%, 27%);
    border-radius: .35em;
  }
  
  .inicios h3 {
    font-size: 1.5em;
    font-weight:normal;
    border-block-end: 4px solid hsl(0, 0%, 53%);
    margin-block-end: .3em;
  }
  
  .imagenes {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 98vw;
  }
  
  #galeria {
    margin-bottom: 1em;
  }
  
  #galeria figure {
    /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
    position: relative;
    /* para ocultar lo que "excede" sus límites */
    overflow: hidden;
  }
  
  #galeria img {
    object-fit: cover;
    object-position: left center;
    width: 100%;
    height: 100%;
  }
  
  
  /* propiedades de figcaption SÓLO cuando
   el cursor se coloca encima de "figure" */
   #galeria figure:hover figcaption {
    background-color: #030303c0;
    transition: all .3s ease;
  
    /* emplazamiento, 0 del borde superior */
    transform: translateY(0);
    /* grid */
    display: grid;
    /* texto centrado */
    text-align: center;
    place-items: center;
    place-content: center;
    /* relleno en linea 2 renglones */
    padding-inline: 2em;
  }
  
  #galeria figcaption {
    background-color: rgb(53, 53, 53);
    color: white;
    padding: .5em;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 700;
    
    /* para superponer el epígrafe sobre la foto */
    position: absolute;
    /* estirar para que ocupe todo figure */
    inset: 0;
    /* mover para que se vea apenas el "titulo" de la foto */
    transform: translateY(calc(100% - 2em));
    
    transition: all .6s ease;
    font-size: 14pt;
  }
  
  #galeria figcaption span {
    display: block;
    font-size: 10pt;
    color: #ffffff;
    margin-block-start: .5em;
    text-transform: none;
    font-weight: lighter;
  }
  
  #galeria figcaption a::after {
    content: " →";
  }
  
  #galeria figcaption a:hover {
    background-color: #ff4d1d;
    box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
    color: hsl(0 0% 90%);
  }
  
  .institutoT {
    margin-top: 5em;
    margin-bottom: 1em;
    border: solid #3b3b3b;
    border-radius: 4px;
    padding: 1em;
    background-image: linear-gradient(to right top, #3f3f3f, #1b1b1b);
    
  }
  
  .institutoT h3 {
    border-block-end: 4px solid hsl(0, 0%, 27%);
    padding-block-end: .35em;
    font-size: 1.5em;
    font-weight: normal;
  }
  
  .infoT{
    display: flex;
    align-items: flex-start;
  }
  
  .infoT img {
    max-width: 50vw;
  }
  
  .infoT p {
    text-align: justify;
  }

  

  
  /* ----------
     FIN HISTORIA
     ---------- */


/* ----------
   INICIO CONTACTO
   ---------- */

  #CONTACTO {
    background-color:#000;
  }

   #contenedoracontacto {
        font-family: 'MuseoModerno';
        color: rgb(255, 255, 255);
        background-color: black;
        min-height: 100vh;
        /* pie abajo siempre */
        width: min( 90rem, 100% );
        margin-inline: auto;
        /* altura mínima: altura del navegador */
        min-height: 100vh;
    }

    .contactotextos {
        padding-top: 1em;
        font-family: 'Chivo';
        color: rgb(255, 255, 255);
        line-height: 1.5;
        margin-block-start: 0;
        text-align: justify;
    }

    .contactotextos p {
      margin-left: 0;
      margin-right: 1.7em;
    }

    #negro{
        background-color: rgb(29, 29, 29);
        padding: .5em;
        margin-block-start: 4em;
    }
    
    .titulocontacto {
      display: block;
      color: #ffffff;
      margin-top: 1em;
      margin-bottom: 1em;
    }

    .cont img {
      max-width: 9em;
      border-radius: 50%;
      border: .25em solid rgb(253, 80, 0);
    }

    .cont {
      margin: auto;
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      gap: 1em;
    }

    .cont article {
      background-color: #6b5a5346;
      border-radius: 30em;
        /* caja flexible para que la imagen quede a la izquierda y los textos a la derecha */
      display: flex;
     /* separa sus elementos con una "calle" */
      gap: 1em;
      /* al convertir el artículo en "caja flexible", la imagen se estira... hay que corregirlo */
      align-items: flex-start;
      width: 550px;
    }

    .contenedoranovedades {
      padding: 1em;
      margin: auto;
      margin-block-start: 4em;
      background-color: #ff4d1d;
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: auto  1fr;
      max-width: 50em;
    }
    
    .contenedoranovedades .titulo {
      font-family: "museomoderno";
      font-size: 3.5em;
      line-height: 1em;
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 2;
      margin-bottom: .3em;
    }

    .contenedoranovedades h4 {
      padding: 1em;
    }

    .nombre {
      background-color: #ffffff;
      color: #000;
      max-width: 400px;
      height: 3em;
      font-size: 1em;
    }

    .tel {
      background-color: #ffffff;
      color: #000;
      max-width: 400px;
      height: 3em;
      font-size: 1em;
    }

    .email {
      background-color: #ffffff;
      color: #000;
      max-width: 400px;
      height: 3em;
      margin-left: 1em;
      font-size: 1em;
    }

    .enviar {
      background-color: #242ee0;
      color: #ffffff;
      max-width: 400px;
      height: 3em;
      margin-left: 1em;
      font-size: 1em;
      font-weight: bolder;
    }

/* ----------
   FIN CONTACTO
   ---------- */

/* ----------
   INICIO MANIFIESTO
   ---------- */

    .manifiesto {
        font-family: 'Chivo';
        margin-inline: auto;
        margin: 0;
        background-color: hsl(0, 0%, 97%);
        color: #242ee0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        min-height: 100vh;
        justify-content: space-between;
    }

    .imagen {
      display: flex;
      justify-content: center;
      margin-block-end: 1em;
    }

    .encabezado p{
        margin: auto;
        padding: 1em;
        text-align: justify;
        font-size: 11pt;
        max-width: 750px;
        background-color: #000;
        color: #f5f5f5;
        border-radius: 5px;

    }

/*main principios*/    

.h3{
    font-family: 'MuseoModerno';
    font-weight: 'ExtraBold';
    font-size: 20pt;
    text-align:left;
    border-block-end: 3px solid #000;
}

.checkicono{
    width: 2px;
}

.principiosfundamentales {
  margin: auto;
  margin-block-start: 2em;
}

.principio{
    background-color: #242ee0;
    padding: 0.5rem;
    margin: auto;
    margin-block-end: .8em;
    border-radius: 5px;
}

.principio p{
    color: #f5f5f5;
    font-size: 11pt;
}

.objetivos {
  display: flex;
  justify-content: center;
  margin-block-end: 2em;
}

.recomendacionfoto{
    width: 25%;
}

#anotate{
    height: 100%;
}


#formulario{
    display: flex;
    flex-wrap:nowrap;
    align-items: center;
    color: #cccccc;
    flex-direction: column;
    width: 70%;
}
.formulariocontenedora {
  background-color: #000000;
  display: flex;
}



#botoninscripcion{
    background-color: #ff4d1d;
    color: #f5f5f5;
    height: 0px;
    

}

#dudas{
    color: #f5f5f5;
    padding: 5%;
}

footer h2{
    font-family: 'MuseoModerno';
}

.contenedorcolumnas{
    display: flex;
    flex-wrap: wrap;
}

#logosredes{
    padding: 4%;
    margin-inline-start: 1px;
}

/* ----------
   FIN MANIFIESTO
   ---------- */

   /* ----------
   INICIO ANOTATE
   ---------- */

   .form{
    display: block;
    max-width: 650px ;
    min-width: 350px;
    padding: 30px;
    margin: auto;
    margin-top: 50px;
    background: black;
    border-radius: 5px;
    margin-bottom: 50px;
  }
 
  #anotateformulario {
    width: 40%;
    margin: 0 auto; 
    margin-bottom: 10px;
    display: block; 
  }

  .tituloform{
    color: white;
    margin-bottom: 20px;
  }
  .cajasform{
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 2px;
    border: none;
    border-left: 10px solid #ff4d1d;
    transition: all .5s ease;
  }
  .cajasform:hover, .cajasform:focus{
    border-left: 10px solid   #ff4d1d;
  }
  .termino1{
    text-align: center;
    color:#cccccc;
  }
  .termino2{
    color:#cccccc;
    text-decoration: none;
    font-weight: bold;
  }
  .termino2:hover{
    color: #dbdbdb;
  }
  .btnform {
    width: 100%;
    padding: 15px;
    border-radius: 2px;
    border: none;
    margin: 20px 0;
    font-size: 15px;
    background:  #ff4d1d;
    color: white;
    cursor: pointer;
    transition: all .5s ease;
  }
  #subirimg{
    padding: 30px;
    color: #cccccc;
    display: flex;
    align-items: center;
    border: 2px solid  #ff4d1d ; 
  border-radius: 5px; 
  margin-bottom: 20px;
  }

  #update {
    color:#ff4d1d;
  }
  


  .headerform {
  background:  #ff4d1d;
  }
  
  #footerform {
  background:  #ff4d1d;
  }


 

  /* ----------
    FIN ANOTATE
   ---------- */

  /* ---------------------------
    INICIO PREGUNTAS FRECUENTES
   ---------------------------*/
   .contenedorafaqsgeneral{
    width:70%;
    margin: 100px auto;
  }
  
  .contenedorafaqs {
    box-shadow: 0 0 15px -1px rgba(0, 0, 0,.1);
    padding: 30px;
  }
  
  .contenedorafaqs .titulocontenedora {
    text-align: center;
    font-size: 24pt;
    margin-bottom: 30px;
  }
  
  .contenedorafaqs .itemfaq {
    box-shadow: 0 0 15px -1px rgba(0, 0, 0,.1);
    margin-bottom: 20px;
    border-radius: 10px; 
  }
  
  .contenedorafaqs .itemfaq .pregunta {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#ff4d1d;
    padding: 10px 10px 10px 10px;
    transition: .4s;
    color: #f5f5f5;
  
  }
  
  
  .formulariocontenedora{
    background-color: #000000;
    padding: 25px;
  
  }
  /*
  #anotate{
    width:30%;

  }
  */
  #formulario{
    display: flex;
    align-items: center;
/*    margin-left: 25px;
    flex-wrap:nowrap;
  */  
  }
  

  #botones{
    display:flex;
    justify-content:center;
    /*
    flex-wrap:nowrap;
    justify-content: space-between;
    margin-inline-start: 1rem;
    margin-inline-end: 5rem;
    margin-top: 0px;
    color: #f5f5f5;
    width: 10%;
   */
  }
  
  
  
  .headerfaqs {
    background-color:#242ee0;
  }
  
  
  #footerfaqs {
    background-color:#242ee0;
  }

    /* ---------------------------
    FIN PREGUNTAS FRECUENTES
   ---------------------------*/

   /* ----------
      INICIO EDICIONES ANTERIORES
      ---------- */

      #mainEA {
        margin: 0;
      }

      #galeriaEA {
        margin:auto;
        margin-bottom: 3em;
        margin-top: 3em;
      }

      #galeriaEA figure {
        /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
        position: relative;
        /* para ocultar lo que "excede" sus límites */
        overflow: hidden;
      }
      
      #galeriaEA img {
        object-fit: cover;
        object-position: left center;
        width: 100%;
        height: 100%;
      }
      
      
      /* propiedades de figcaption SÓLO cuando
       el cursor se coloca encima de "figure" */
       #galeriaEA figure:hover figcaption {
        background-color:#ff4e1dd0;
        transition: all .3s ease;
      
        /* emplazamiento, 0 del borde superior */
        transform: translateY(0);
        /* grid */
        display: grid;
        /* texto centrado */
        text-align: center;
        place-items: center;
        place-content: center;
        /* relleno en linea 2 renglones */
        padding-inline: 2em;
      }
      
      #galeriaEA figcaption {
        background-color:#ff4d1d;
        color: white;
        padding: .5em;
        line-height: 1em;
        text-transform: uppercase;
        font-weight: 700;
        
        /* para superponer el epígrafe sobre la foto */
        position: absolute;
        /* estirar para que ocupe todo figure */
        inset: 0;
        /* mover para que se vea apenas el "titulo" de la foto */
        transform: translateY(calc(100% - 2em));
        
        transition: all .6s ease;
        font-size: 17pt;
      }
      
      #galeriaEA figcaption span {
        display: block;
        font-size: 14pt;
        color: #ffffff;
        margin-block-start: .5em;
        text-transform: none;
        font-weight: lighter;
      }
      
      #galeriaEA figcaption a::after {
        content: " →";
      }
      
      #galeriaEA figcaption a:hover {
        background-color: #ff4d1d;
        box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
        color: hsl(0 0% 90%);
      }

      #galeriaEA {
        display: flex;
        flex-wrap: nowrap;
        gap: 1em;
      }

      .edicionbanner {
        margin-top: 0;
      }

    /* -------
    JURADOS
   ----------*/
   
   #titulojurados {
    text-align: center;
   }


   .jurados{
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 5px;
    width: 70%;
    margin: 50px auto;
   }

   .juradospersonas{
    display:flex;
    border-bottom: 2px solid #ff4d1d;
    margin-top: 20px;
    margin-bottom: 20px;
   
   }

   .infojurados {
    padding: 200px;
   }


   .botonjurados{
    color:#ff4d1d;
    font-size: 16pt;
    font-weight: 700;
    font-family: 'MuseoModerno';
    font-weight: 'ExtraBold';
    content:icon;
    margin-left: 20px;
    align-items: center;
   }


.desplegable{

    color:#000000;
    padding: 40px;
    text-align:justify;
    margin-left: 0cm;
    margin-right: 0cm;
    font-size: 10pt;
}

#bajadatitulo {
  font-size: 20pt;
  color: #f5f5f5;
  background-color: #242ee0;
  text-align: center;
  padding: 0%;
  margin-top: 0%;
}

#titulo{
  padding: 0%;
  margin-top: 0%;
}





/*-----------------
PARTICIPANTES
------------------*/
#titulonominados{
  display: block;
  margin:auto
}

#catalogonominados{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex-basis: content;
  gap: 3em;
}
.nominado{
  display: block;
    border-radius: auto;
    background-color: #1b1b1b;
    color: #cccccc;
    padding: 1em;
    padding-block-start: 2em;
    margin-left: 2em;
    margin-right: 0em;
    margin-block-end: 2em;
}

.botonnominados{
  background-color: #ff4d1d;
  color: #000000;
  padding: 0.5em;
}



/* ----------
    INICIO CALENDARIO
    ---------- */
    .encabezadoC p{
      font-size: 15pt;
      text-align: center;
      color:#ff4d1d
    }

    .cal {
      margin: 0;
    }
  
  .CALENDARIO {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    background-color: #ff4d1d;
    margin-block-end: 2em;
  }
  
  .wrapper {
    background: #ffffff;
    max-width: 1150px;
    border-radius: 10px;
  }
  
  .wrapper header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px 10px;
  }
  
  header .current-date {
    font-size: 1.45rem;
    font-weight: 500;
  }
  
  header .icons span {
    height: 38px;
    width: 38px;
    margin: 0 1px;
    font-size: 1.9rem;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.356);
  }
  
  header .icons span:hover {
    background-color:#ff4d1d
  }
  
  header .icons span:last-child {
    margin-right: -10px;
  }
  
  .calendar {
    padding: 20px;
  }
  
  .calendar ul {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
  }
  
  .calendar .days {
    margin-bottom: 20px;
  }
  
  .calendar .weeks li {
    font-weight: 500;
  }
  
  .calendar ul li {
    position: relative;
    width: calc(100% / 7);
  }
  
  .calendar .days li {
    cursor: pointer;
    margin-top: 30px;
    z-index: 1;
  }
  
  .days .inactive {
    color: #cccccc;
  }
  
  .calendar .days li::before {
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
  
  }
  
  .days li:hover::before {
    background: #5a5aff;
  }
  
  .days .active {
    color: #f5f5f5;
  }
  
  .days .active::before {
    background-color: #5a5aff;
  }
  
  /* ----------
      FIN CALENDARIO
      ---------- */

  /* ----------
      MINI FORMULARIO
      ---------- */

  
    .contenedoraminiform{
        display: flex;
        flex-wrap:wrap;   
        margin: 0 auto;
        margin-bottom: 20px;
        background-color:#1b1b1b;
        max-width: 350px;
        border-radius: 5pxpre
      
    }
    
    #anotateminiform {
    width: 7em;
    margin-left: 0 auto;
    margin-top: 15px;
    }

  
    
    #miniform {
        color: aliceblue;
        margin-left: 20px;
        margin-right: 30px;
        margin-top: 15px;
        width: 10em;
    }
    
    #botonesminiform {
        display: flex;
        align-content:baseline;
        justify-content:start;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 70%;
    }

    .btnminiform {
      background-color: #ff4d1d;
      color: #ffffff;
      border-radius: 2px;
      margin-inline: 2px;
    }

    #botoninscripcionminiform{
      margin-left: 0px;
      margin-right: 10px; 
    }
    
    #dudasminiform{
      margin-left: 10px;
      
    }
    
    #imgminiform {
      max-width: 100%; 
      height: auto;
  }

    #dudasminiform #h4{
        margin:0;
        padding: 0;
        margin-left: 0px;
    }

    /* ----------
      FIN MINI FORMULARIO
      ---------- */

/*-----------------
ERROR
------------------*/

#imagenerror{
  width: 30%;
  margin: auto;
}

#botoneserror{
  display: b;
}

.error{
  margin: auto;
  text-align: center;
}

.botonerror{
  color: #dbdbdb;
  display: block;
  padding-left: 1em;
  padding: 0.5em;

}

#botonpalabra{
  text-align: center;
  background-color: #242ee0;
  color:#f5f5f5;
  padding: 0.5em;
  margin-left: 2em;
  margin-right: 2em;
}

/*-----------------
ACTUALIDAD
------------------*/

#tituloactualidad {
  text-align: center;

}

#seccion-superior {
  text-align: center;
  margin: 20px;
}

#seccion-superior img {
  max-width: 100%;
  height: auto;
  max-height: 150px; 
}

#seccion-superior p {
  margin-top: 10px;
  color: #f5f5f5;
  background-color: #000;
  border-radius: 5px;
  padding: .5em;
  font-size: 11pt;

}

#contenedoractual {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-start;
}


.info-box-actual {
  width: 30%;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.info-box-actual img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.toggle-button-actual, .link-button-actual {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background-color:#000000;
  color: white;
  border: none;
  cursor: pointer;
}

.toggle-button-actual:hover, .link-button-actual:hover {
  background-color:#000000;
}

.link-box-actual {
  width: 100%;
  margin: 20px;
  text-align: center;
}
.video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}

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

@media (max-width:600px) {

  h1 {
    font-size: 30pt;
  }

  main {
    margin: 1em;
  }

  /*ED.ANTERIORES*/

  #galeriaEA figcaption {
    font-size: 25pt;
  }

  #galeriaEA figcaption span {
    font-size: 15pt;
  } 

  #galeriaEA {
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .edicionbanner {
    margin-block-end: 2em;
  }

  /*ED.ANTERIORES/

  /CALENDARIO*/
    
  .encabezadoC h1 {
    font-size: 13vw;
    text-align: center;
  }
  .encabezadoC p {
    font-size: 13pt;
    text-align: center;
    padding-left: 0;
    margin-left: 0;
  }
  .CALENDARIO {
    min-height: 60vh;
    margin-bottom: 2em;
  }
  .wrapper {
    width: 450px;
  }

  /*MANIFIESTO*/
  .encabezado p {
    margin: auto;
    text-align: justify;
  }

  /*CONTACTO*/
  .cont {
    margin: 1em;
    display: flex;
    flex-wrap: wrap;
  }

  .contactotextos {
    padding-top: .3em;
  }

  .contactotextos h3 {
    margin-block-end: .3em;
  }

  .contactotextos p {
    line-height: 1.5;
    font-size: 10pt;
    display: flex;
    flex-wrap: wrap;
  }

  .cont img {
    max-width: 5em;
  }

  .cont article {
    border-radius: 55px;
  }

  .contenedoranovedades .titulo {
    font-size: 38pt;
  }

  /*HISTORIA*/
  .siam {
    flex-wrap: wrap;
  }

  .siam img {
    margin-block-start: 0;
    max-width: 345px;
    margin-right: 1em;
  }

  .encabezadoH {
    padding-top: .8em;
    align-items: center;
    margin-block-end: 30px;
  }

  .siam h1 {
    text-align: center;
  }

  .siam h2 {
    text-align: center;
    font-size: 15pt;
  }

  .inicios {
    margin-block-start: 10px;
  }

  .institutoT {
    margin-top: 3em;
  }

  #galeria figcaption {
    font-size: 9pt;
    
  }

  #galeria figcaption span {
    font-size: 6pt;
  }

  .infoT {
    display: flex;
    flex-wrap: wrap;
  }

  .infoT img {
    max-width: 81vw;
    margin-block-end: .5em;
  }

  /*ACTUALIDAD*/ 
  #contenedoractual {
    display: flex;
    flex-wrap: wrap;
  }

  .info-box-actual {
    width: 310px ;
  }

  .link-box-actual {
    margin: 0;
  }

  /*PREGUNTAS FRECUENTES*/
  .contenedorafaqs .titulocontenedora {
    font-size: 13pt;
  }
}