@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;
}


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


h1,
h2,
h3,
h4,
h5,
h6 {
  color: hsl(327, 85%, 69%);
  line-height: 1.1;
  text-wrap: balance;
}


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;
  vertical-align: middle;
}

/* 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;
}
.custom-section h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.custom-button {
  background-color: #f36db7;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}

.custom-button:hover {
  background-color: #d34593;
}


@media (min-width: 40em) {
  .custom-section {
    flex-direction: column; /* Cambia a disposición vertical en pantallas pequeñas */
    align-items: center; /* Centra el contenido horizontalmente */
    padding: 20px;
  }

  .content {
    max-width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
    padding: 15px;
  }

  .custom-section h2 {
    font-size: 1.5rem;
  }

  .custom-button {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}


body {
  background-color: #fae0f6;
  margin: 0;
  padding: 0;
  color: #333;
}

h2 {
  color: #AE0060;
}

h3 {
  color: #AE0060;
}

h1 {
  text-align: center;
  padding: 20px 0;
  color: hsl(298, 86%, 28%);
  margin-bottom: 20px;
  text-decoration: underline hsl(298, 86%, 28%);
  margin: 1rem;
}

section {
  margin-top: 40px;
  margin-right: 60px;
  margin-left: 60px;
  margin-bottom: 60px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 3px solid  hsl(298, 86%, 28%);
  padding: 2rem;
}




/* Recursos adicionales */

.resource-links {
  margin-top: 20px;
}

.resource-links a {
  display: inline-block;
  margin-top: 10px;
  font-weight: bold;
}

.resource-links h3 {
  font-size: 1.2em;
  margin-bottom: 5px;
  color: hsl(308, 96%, 18%);
}

.boton {
  background-color: #AE0060;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 50px;
  transition: background-color 0.3s ease;
}

.boton:hover {
  background-color: hsl(327, 62%, 55%);
}

/* Estilo para los párrafos */
p {
  line-height: 1.6;
}

/* Estilo para las listas con números */
ol {
  list-style-type: decimal;
  margin-left: 20px;
}


/* footer */


footer {
  padding: 20px;
  color: white;
  background-color: #5d0084;
  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;
 }



 /* 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;
    }
  }