/* =========================
   TIPOGRAFÍA
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;500&display=swap');


/* =========================
   PÁGINA
   ========================= */

body {
  margin: 0;
  min-height: 100vh;

  background: #A3B18A;

  font-family: 'Bebas Neue', sans-serif;

  color: #344E41;
}


/* =========================
   PÁGINA COMPLETA
   ========================= */

.pagina {
  width: 100%;
}


/* =========================
   ENCABEZADO
   ========================= */

.encabezado {
  text-align: center;

  padding-top: 50px;
  padding-bottom: 30px;

  color: #344E41;
}


/* TÍTULO PRINCIPAL */

.encabezado h1 {
  margin: 0;

  font-family: 'Bebas Neue', sans-serif;

  font-size: 36px;

  font-weight: 700;

  letter-spacing: 1px;
}


/* SUBTÍTULO */

.encabezado h2 {
  margin: 5px 0 0;

  font-family: 'Bebas Neue', sans-serif;

  font-size: 34px;

  font-weight: normal;

  letter-spacing: 1px;
}


/* =========================
   CONTENEDOR DE CARDS
   ========================= */

.contenedor {
  width: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 30px;

  padding: 0 20px 50px;

  box-sizing: border-box;
}


/* =========================
   CARDS
   ========================= */

.card {
  display: block;

  width: 320px;

  background: #A3B18A;

  border-radius: 20px;

  overflow: hidden;

  text-decoration: none;

  color: #344E41;

  box-shadow:
    0 8px 20px rgba(52, 78, 65, 0.35);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


/* =========================
   EFECTO HOVER
   ========================= */

.card:hover {
  transform: translateY(-8px);

  box-shadow:
    0 15px 30px rgba(52, 78, 65, 0.45);
}


/* =========================
   MINIATURAS
   ========================= */

.card img {
  width: 100%;

  height: 200px;

  object-fit: cover;

  display: block;
}


/* =========================
   INFORMACIÓN DE LAS CARDS
   ========================= */

.card-info {
  padding: 20px;
}


/* TÍTULO DE CADA CARD */

.card-info h2 {
  margin: 0 0 8px;

  color: #344E41;

  font-size: 32px;

  font-weight: normal;

  letter-spacing: 1px;
}


/* DESCRIPCIÓN */

.card-info p {
  margin: 0 0 15px;

  color: #344E41;

  font-size: 20px;
}


/* TEXTO DEL ENLACE */

.card-info span {
  color: #344E41;

  font-size: 18px;

  letter-spacing: 0.5px;
}


/* =========================
   BARRA DE NAVEGACIÓN
   ========================= */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 15px 30px;

  background: #344E41;

  box-shadow:
    0 4px 12px rgba(52, 78, 65, 0.35);
}


/* LOGO / NOMBRE */

.nav-logo {
  color: #A3B18A;

  font-size: 24px;

  letter-spacing: 1px;

  text-decoration: none;
}

.nav-logo:hover {
  color: #ffffff;
}


/* LISTA DE ENLACES */

.nav-links {
  display: flex;

  gap: 20px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.nav-links a {
  display: block;

  padding: 5px 12px;

  color: #A3B18A;

  font-size: 20px;

  letter-spacing: 1px;

  text-decoration: none;

  border-radius: 8px;

  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.nav-links a:hover {
  background: #52796F;

  color: #ffffff;
}

/* PÁGINA ACTUAL */

.nav-links a.activo {
  background: #A3B18A;

  color: #344E41;
}


/* =========================
   PÁGINA SOBRE MÍ
   ========================= */

.sobre-mi {
  max-width: 700px;

  margin: 0 auto;

  padding: 0 20px 60px;

  text-align: center;
}

.sobre-mi p {
  font-family: 'Poppins', sans-serif;

  font-size: 17px;

  line-height: 1.7;

  margin: 0 0 25px;
}

.enlaces-sobre-mi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 15px;

  margin-top: 40px;
}

.enlaces-sobre-mi a {
  padding: 10px 20px;

  background: #344E41;

  color: #A3B18A;

  font-size: 18px;

  letter-spacing: 1px;

  text-decoration: none;

  border-radius: 30px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.enlaces-sobre-mi a:hover {
  transform: translateY(-4px);

  box-shadow:
    0 8px 20px rgba(52, 78, 65, 0.45);
}


/* =========================
   PÁGINA GALERÍA
   ========================= */

.contenedor-galeria {
  width: 100%;
  max-width: 1000px;

  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 25px;

  padding: 0 20px 60px;

  box-sizing: border-box;
}

.foto {
  margin: 0;

  overflow: hidden;

  border-radius: 20px;

  box-shadow:
    0 8px 20px rgba(52, 78, 65, 0.35);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.foto:hover {
  transform: translateY(-8px);

  box-shadow:
    0 15px 30px rgba(52, 78, 65, 0.45);
}

.foto img {
  width: 100%;

  height: 260px;

  object-fit: cover;

  display: block;
}

.foto figcaption {
  padding: 15px;

  text-align: center;

  font-size: 22px;

  letter-spacing: 1px;
}

/* TARJETA ENLACE A FLICKR */

.foto-enlace {
  min-height: 300px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #344E41;

  color: #A3B18A;

  font-size: 24px;

  letter-spacing: 1px;

  text-align: center;

  text-decoration: none;

  padding: 20px;
}