/*[04] INICIO - estructura general del sitio*/
/*aqui iran estilos de barra superior, contenedores, secciones y grids*/
/*por ahora dejamos este archivo preparado*/
/*deapues aqui agregaremos clases como .barra-superior, .contenedor, y .grid*/

/* [11] INICIO - Diseño de la barra superior */
/* Este bloque acomoda la barra superior, la marca, el menú y el botón */

/* Esta clase diseña toda la barra superior */
.barra-superior {
  /* Define el color de fondo de la barra */
  background-color: #111827;

  /* Define el color del texto dentro de la barra */
  color: white;

  /* Agrega espacio interno arriba/abajo y a los lados */
  padding: 16px 24px;

  /* Coloca los elementos en una misma fila */
  display: flex;

  /* Centra verticalmente los elementos */
  align-items: center;

  /* Separa la marca, el menú y el botón */
  justify-content: space-between;

  /* Agrega separación entre elementos cuando la pantalla sea pequeña */
  gap: 20px;

  /* Redondea un poco las esquinas de la barra */
  border-radius: 14px;

  /* Agrega espacio debajo de la barra */
  margin-bottom: 24px;
}

/* Esta clase acomoda el icono y el texto de la marca */
.marca {
  /* Coloca el icono y el texto en fila */
  display: flex;

  /* Centra verticalmente el icono y el texto */
  align-items: center;

  /* Agrega separación entre el icono y el texto */
  gap: 10px;

  /* Hace que la marca se vea más fuerte */
  font-weight: bold;
}

/* Esta clase diseña el pequeño icono textual de la marca */
.marca-icono {
  /* Define el fondo del icono */
  background-color: #22c55e;

  /* Define el color del texto del icono */
  color: #052e16;

  /* Agrega espacio interno al icono */
  padding: 8px 10px;

  /* Redondea las esquinas del icono */
  border-radius: 10px;

  /* Hace el texto más pequeño */
  font-size: 14px;
}

/* Esta clase diseña el texto del nombre del proyecto */
.marca-texto {
  /* Define el tamaño del texto de la marca */
  font-size: 18px;
}

/* Esta clase acomoda los enlaces del menú superior */
.menu-superior {
  /* Coloca los enlaces en una misma fila */
  display: flex;

  /* Agrega separación entre enlaces */
  gap: 18px;
}

/* Esta regla diseña los enlaces dentro del menú superior */
.menu-superior a {
  /* Quita el subrayado de los enlaces */
  text-decoration: none;

  /* Define el color de los enlaces */
  color: #d1d5db;

  /* Define el tamaño del texto */
  font-size: 15px;
}

/* Esta regla cambia el color del enlace cuando pasas el mouse encima */
.menu-superior a:hover {
  /* Hace que el enlace se vea blanco al pasar el mouse */
  color: white;
}

/* [11] FIN - Diseño de la barra superior */

/* [13] INICIO - Diseño del contenedor principal */
/* Este bloque acomoda el contenido principal debajo de la barra superior */

/* Esta clase centra el contenido y evita que ocupe toda la pantalla */
.contenedor-principal {
  /* Define el ancho del contenido en porcentaje */
  width: 90%;

  /* Limita el ancho máximo para que no se estire demasiado en pantallas grandes */
  max-width: 1100px;

  /* Centra el contenedor horizontalmente */
  margin: 0 auto;
}

/* Esta clase diseña la sección inicial de presentación */
.seccion-presentacion {
  /* Define un fondo blanco para separar esta sección del fondo general */
  background-color: white;

  /* Agrega espacio interno para que el contenido respire */
  padding: 40px;

  /* Redondea las esquinas de la sección */
  border-radius: 18px;

  /* Agrega una sombra suave para dar profundidad */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Esta regla diseña el título dentro de la sección de presentación */
.seccion-presentacion h1 {
  /* Agrega separación arriba y abajo del título */
  margin: 16px 0;

  /* Define el tamaño del título */
  font-size: 38px;

  /* Define el color del título */
  color: #111827;
}

/* Esta regla diseña el párrafo dentro de la sección de presentación */
.seccion-presentacion p {
  /* Define el tamaño del texto */
  font-size: 18px;

  /* Define el color del párrafo */
  color: #4b5563;

  /* Define el espacio entre líneas para que se lea mejor */
  line-height: 1.6;

  /* Limita el ancho del párrafo para que no se vea muy largo */
  max-width: 700px;
}

/* Esta clase agrupa botones o acciones principales */
.grupo-acciones {
  /* Agrega espacio arriba de los botones */
  margin-top: 24px;

  /* Coloca los botones en fila */
  display: flex;

  /* Agrega separación entre botones si después ponemos más */
  gap: 12px;
}

/* [13] FIN - Diseño del contenedor principal */

/* [16] INICIO - Diseño de la sección de tarjetas */
/* Este bloque separa visualmente la sección donde aparecen las tarjetas */

/* Esta clase diseña la sección que contiene la lista de tarjetas */
.seccion-tarjetas {
  /* Agrega espacio arriba para separarla de la sección de presentación */
  margin-top: 30px;
}

/* Esta regla diseña el título de la sección de tarjetas */
.seccion-tarjetas h2 {
  /* Agrega separación debajo del título */
  margin-bottom: 18px;

  /* Define el tamaño del título */
  font-size: 26px;

  /* Define el color del título */
  color: #111827;
}

/* [16] FIN - Diseño de la sección de tarjetas */

/* [18] INICIO - Diseño del grid de tarjetas */
/* Este bloque acomoda varias tarjetas en columnas */

/* Esta clase organiza las tarjetas en forma de cuadrícula */
.grid-tarjetas {
  /* Usa CSS Grid para acomodar varias tarjetas */
  display: grid;

  /* Crea columnas automáticas que se adaptan al tamaño de pantalla */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  /* Agrega separación entre cada tarjeta */
  gap: 20px;
}

/* [18] FIN - Diseño del grid de tarjetas */

/* [21] INICIO - Diseño de la sección del buscador */
/* Este bloque acomoda visualmente el buscador dentro de la página */

/* Esta clase diseña la sección completa del buscador */
.seccion-buscador {
  /* Agrega separación arriba para que no quede pegada a la presentación */
  margin-top: 30px;

  /* Define fondo blanco para separar visualmente la sección */
  background-color: white;

  /* Agrega espacio interno */
  padding: 24px;

  /* Redondea las esquinas de la sección */
  border-radius: 16px;

  /* Agrega una sombra suave */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Esta regla diseña el título dentro de la sección del buscador */
.seccion-buscador h2 {
  /* Agrega separación debajo del título */
  margin-bottom: 16px;

  /* Define el tamaño del título */
  font-size: 24px;

  /* Define el color del título */
  color: #111827;
}

/* Esta clase acomoda el input y el botón en una misma fila */
.barra-busqueda {
  /* Coloca el input y el botón en fila */
  display: flex;

  /* Agrega separación entre el input y el botón */
  gap: 12px;

  /* Centra verticalmente los elementos */
  align-items: center;
}

/* [21] FIN - Diseño de la sección del buscador */

/* [25] INICIO - Diseño responsive para pantallas pequeñas */
/* Este bloque adapta la interfaz para celulares y pantallas pequeñas */

/* Esta regla se activa cuando la pantalla mide 768px o menos */
@media (max-width: 768px) {
  /* Ajusta la barra superior para que sus elementos no se amontonen */
  .barra-superior {
    /* Cambia la barra de fila a columna */
    flex-direction: column;

    /* Alinea los elementos al centro */
    align-items: center;

    /* Centra el contenido horizontalmente */
    text-align: center;

    /* Reduce el espacio interno para pantallas pequeñas */
    padding: 18px;
  }

  /* Ajusta la marca del proyecto dentro de la barra */
  .marca {
    /* Centra la marca */
    justify-content: center;
  }

  /* Ajusta el menú superior */
  .menu-superior {
    /* Permite que los enlaces bajen si no caben */
    flex-wrap: wrap;

    /* Centra los enlaces */
    justify-content: center;

    /* Reduce un poco la separación entre enlaces */
    gap: 12px;
  }

  /* Ajusta el contenedor principal */
  .contenedor-principal {
    /* Usa más ancho en celular */
    width: 95%;
  }

  /* Ajusta la sección de presentación */
  .seccion-presentacion {
    /* Reduce el espacio interno */
    padding: 28px;
  }

  /* Ajusta el título principal de la presentación */
  .seccion-presentacion h1 {
    /* Reduce el tamaño del título */
    font-size: 30px;
  }

  /* Ajusta el párrafo de presentación */
  .seccion-presentacion p {
    /* Reduce un poco el tamaño del texto */
    font-size: 16px;
  }

  /* Ajusta el grupo de botones */
  .grupo-acciones {
    /* Cambia los botones de fila a columna */
    flex-direction: column;

    /* Hace que los botones ocupen todo el ancho disponible */
    align-items: stretch;
  }

  /* Ajusta la barra de búsqueda */
  .barra-busqueda {
    /* Cambia el input y el botón de fila a columna */
    flex-direction: column;

    /* Estira los elementos al ancho completo */
    align-items: stretch;
  }

  /* Ajusta el grid de tarjetas */
  .grid-tarjetas {
    /* Deja una sola columna en pantallas pequeñas */
    grid-template-columns: 1fr;
  }
}

/* [25] FIN - Diseño responsive para pantallas pequeñas */

/*[04 FIN - Estructura general del sitio]*/