@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

*,
*::after,
*::before
 {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline-color: transparent;
}


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

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: 6em;
}


@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 {
  font-family: Raleway;
  background-color: #fbfbfb;
}

h1,
h2,
h3,
h4,
h5,
h6,
p { 
  margin-block-end: 1em;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
  text-wrap: balance;
}

h2{
  color: #AE0060;
}

h3{
  color: #AE0060;
}

p {
  line-height: 1.6;
}


p,
li,
figcaption {
  text-wrap: pretty;
}


a {
  text-decoration: none;
}


ul,
ol {
  list-style: none; 
}


img {
  max-width: 100%;
  height: auto;
}

/* menu y encabezado */
.contenedora {
  width: min(70rem, 100%); /* limita el ancho a 800px */
  margin-inline: auto; 
  padding: 1rem; 
}

header,
footer {
  background-color: #5d0084;
  color: white;
  width: 100%;
}

header {
  box-shadow: 0 4px 2px hsl(0 0% 0% / 0.25); /* sombra difusa  */
  /* "pegado" al borde superior de la ventana */
  position: sticky;
  /* capa superior arriba de casi todo */
  z-index: 8000;
}

header .contenedora {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
  
#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;
}

#logo img {
  width: 6em;
  margin-inline-end:.75em;
}
#logo h3 {
  margin: 0;
  color: hsl(0 0% 90%);
  font-size: 1.5rem;
}
  
/* menu - boton 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" */

  /* capa superior, pero no parece */
  position: relative;
  /* en capa superior, casi arriba de todo */
  z-index: 9000;
}

.menu-btn .btn-linea {
  width: 25px;
  height: 3px;
  margin: 4px 0 4px 0;
  background: hsl(0 0% 90%);
  transition: all 0.3s ease-out;
}

.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: #f50f99;
  display: grid;
  place-items: center;
  place-content: center;
  position: fixed;
  inset: 0;
  z-index: 8000;
  translate: 100%; 
  transition: all .6s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
}

.menuVisible ul {
  background-color: hsla(299, 23%, 34%, 0.95);
  transition: all .3s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
  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;
}

/* footer */


footer {
  padding: 20px;
  background-color: #5d0084;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.918);
}

footer .redes{
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  margin: 1.4em;
}

 footer img{
  width: 11rem;
 }

 footer h3{
  font-size: 24px;
  text-align: center;
  color:rgb(255, 255, 255);
 }

 footer p{
  font-size: 18px;
  text-align: center;
 }

/* info taller */

#fotomain {
  position: relative;
  text-align: center;
  }
  
  #fotomain img {
  height: auto;
  max-width: 100%;
  }
  
  #fotomain h1, 
  #fotomain a{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  top: 7%; 
  background-color: hsla(271, 30%, 26%, 0.702);
  padding: 0.7rem;
  color: white;
  border-radius: 1rem;
  }
  
  .contenedora-info{
  background-color: #AE0060;
  width: min(70rem, 100%); 
  margin-inline: auto; 
  padding: 1rem; 
  color: #ffffff;
  border-radius: 1rem;
  }
  
  .contenedora-info h2{
  color: #ffffff;
  }

.botones {
    display: inline-block;
    padding: 8px 18px;
    background-color: #500e77;
    color: #ffffff;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.botones:hover{
    background-color: #7a1eaf;
}


/* parte del header */
  
@media(min-width: 50em) {
  
  header nav {
    position: unset;
  }

  /* 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: .40em;

    /* para que NO esté en capa superior */
    position: unset;

    /* elimina desplazamiento */
    translate: unset;

    /* 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 {
    background-color: #AE0060;
    border-radius: .50em;
    color: white;
    font-size: 1rem;
    width: auto;
    padding: .25em 1em;
    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: white;
    color: #500e77;
    border-block-end: unset;
  }
}