* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
    font-family: "Kiona-Font";
    src: url("fonts/Kiona-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins-Font";
    src: url("fonts/Poppins-Regular.ttf") format("truetype");
}

body { font-family: 'Poppins-Font'; line-height: 1.6; }
h1 {
  font-family: 'Kiona-Font'
}
h2 {
  font-family: 'Kiona-Font'
}
p {
  font-family: 'Poppins-Font'
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Navbar */
.navbar { display: flex; justify-content: end; align-items: center; padding: 1rem 5%; background: #0F145B; color: white; position: fixed; width: 100%; top: 0; z-index: 1000; }
.logo { font-size: 1.5rem; font-weight: bold; height: 100px; }
.nav-menu { display: flex; list-style: none; gap: 2rem; background: #0F145B}
.nav-menu a { color: white; text-decoration: none; transition: color 0.3s; }
.nav-menu a:hover { color: #A3C7E9; }
.hamburger { display: none; flex-direction: column; cursor: pointer; }
.hamburger span { width: 25px; height: 3px; background: white; margin: 3px 0; transition: 0.3s; }

#about {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #0F145B;
  background-image: url(background_p1_1.svg);
  background-size:cover;
  color: white;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  max-width: 1200px;
  width: 100%;
  height: 80vh;
  align-items: center;
}

.hero-image {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  align-self: baseline;
}

.hero-bold {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: right;
  text-align: right;
}

.hero-bold h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 2rem;
  text-align: right;
}

.hero-bold p {
  font-size: 1rem;
  line-height: 1.6;
  text-align: right;
}

.hero-origin {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: center;
}
.hero-foot {
  grid-column: 2 / -1;
  grid-row: 4;
  text-align: right;
  font-weight: bold;
  color: white;
}

.hero-slicer {
  grid-column: 1 / -1;
  grid-row: 3;
  text-align: center;
  height: 250px;
}

.hero-origin h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.1em;
}

.region-origin {
  background-color: #8b4513;
}

#types_regular {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: white;
  background-image: url(background_p2_1.svg);
  background-size:cover;
  color: white;
}

.regular-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 4rem;
  max-width: 1200px;
  width: 100%;
  height: 80vh;
  align-items: center;
}

.regular-image {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.regular-text {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: left;
  text-align: left;
  align-self: baseline;
}

.regular-text h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.regular-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 500px;
  text-align: left;
}

#types_cocoa {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: white;
  background-image: url(background_p3.svg);
  background-size:cover;
  color: white;
}

.cocoa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 4rem;
  max-width: 1200px;
  width: 100%;
  height: 80vh;
  align-items: center;
}

.cocoa-image {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.cocoa-text {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: left;
  text-align: left;
  align-self: baseline;
}

.cocoa-text h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.cocoa-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 500px;
  text-align: left;
}

#contact {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: white;
  background-image: url(background_p4_1.svg);
  background-size:cover;
  color: white;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 4rem;
  max-width: 1200px;
  width: 100%;
  height: 80vh;
  align-items: center;
}

.contact-image {
  grid-column: 1;
  grid-row: 2 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.contact-text {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: left;
  text-align: left;
  align-self: baseline;
}

.contact-text h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.contact-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 500px;
  text-align: left;
}
/* Sections */
section { padding: 80px 0; }
h2 { text-align: center; margin-bottom: 3rem; font-size: 2.5rem; color: #2b1e16; }
.about-grid, .types-grid, .recipes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.coffee-card, .recipe-card { background: #f8f4f0; padding: 2rem; border-radius: 10px; text-align: center; transition: transform 0.3s; }
.coffee-card:hover { transform: translateY(-10px); }
.regular { border-top: 5px solid #8b4513; }
.cocoa { border-top: 5px solid #d2691e; }

/* Form */
.contact-form { max-width: 600px; margin: 0 auto; display: grid; gap: 1rem; font-size: 1.2rem;}
.form-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
input, textarea { padding: 1rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; }
textarea { height: 120px; grid-column: 1/-1; }
button { padding: 1rem 2rem; background: #0F145B; color: white; border: none; border-radius: 5px; font-size: 1.1rem; cursor: pointer; transition: background 0.3s; }
button:hover { background: #4A4E83; }

/* Footer */
footer { background: #2b1e16; color: white; text-align: center; padding: 2rem; }

/* Responsive */
@media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-menu { position: fixed; left: -100%; top: 70px; flex-direction: column; background: #0F145B; width: 100%; text-align: center; transition: 0.3s; padding: 2rem 0; }
    .nav-menu.active { left: 0; }
    .about-grid, .types-grid { grid-template-columns: 1fr; }
    .hero-content h1 { font-size: 2rem; }
    h2 { font-size: 2rem; }
    .form-group { grid-template-columns: 1fr; }
    .navbar { display: flex; justify-content: end; align-items: center; padding: 1rem 5%; background: #0F145B; color: white; position: fixed; width: 100%; top: 0; z-index: 1000; }
}

.logo-link {
    display: inline-block;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.logo-link:hover {
    transform: scale(1.05);
}

.logo-svg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none; /* Evita interferir con el link padre */
}

.coffee-svg {
  width: 50%;
  height: 50%;
  

}


.swiper {
      width: 100%;
      height: 100%;
      --swiper-theme-color: white;
      color: white;
      border-radius: 15px !important;
      overflow: hidden; 

}

.swiper-slide {
  text-align: center;
  background: #0D1251;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-content {
  display: grid;
  grid-template-columns: 40% 60%; /* Columna flexible + imagen fija */
  height: 100%;
  width: 100%;
  
}

.text-column {
  color: white !important; /* Color de fechas/texto */
  text-align: right;
  padding-right: 10%;
  padding-top: 5%;


}

.image-column img {
  width: auto;
  height: auto;

}

/* Responsive logo */
@media (max-width: 768px) {
    .logo-svg {
        width: 25%;
        height: 25%;
    }
    .coffee-svg {
      width: 40%;
      height: 40%;

    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: 1fr auto;
      gap: 0.5rem;
      max-width: 1200px;
      width: 100%;
      height: 80vh;
      align-items: center;
    }

    .hero-bold {
      grid-column: 1;
      grid-row: 2;
      display: flex;
      flex-direction: column;
      justify-content: right;
      font-weight: 500;
      text-align: right;
    }
    .hero-bold h1 {
      font-size: clamp(1.5rem, 5vw, 4rem);
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 1rem;
      text-align: right;
    }

    .hero-origin h1 {
      font-size: clamp(1rem, 4vw, 3rem);
      font-weight: 700;
      margin: 0;
      letter-spacing: 0.1em;
      padding-top: 50px;
    }

    .hero-bold p {
      font-size: 0.7rem;
      line-height: 1.6;
      max-width: 500px;
      text-align: right;
    }
    .hero-image {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      justify-content: center;
      align-self: baseline;

    }
    .hero-origin {
      grid-column: 1;
      grid-row: 3;
    }
    .hero-slicer {
      grid-column: 1 / -1;
      grid-row: 4;
      text-align: center;
      height: 160px;
    }
    .hero-foot {
      grid-column: 1 / -1;
      grid-row: 5;
      text-align: right;
      color: white !important; /* Color de fechas/texto */
      font-weight: bold;
    }
    .slide-content {
      display: grid;
      grid-template-columns: 10% 60%; /* Columna flexible + imagen fija */
      height: 100%;
      width: 100%;
      
    }

    .text-column {
      color: white !important; /* Color de fechas/texto */
      text-align: justify;
      padding-right: 30%;
    }
    .text-column h1{
      font-size: clamp(1rem, 4vw, 3rem);
    }
    .text-column p{
      font-size: 0.6rem;
    }

    .hero-foot p {
      font-size: 0.6rem;
      color: white;
      padding: 15px;
    }

    .image-column {
      opacity: 0

    }

    .swiper {
      width: 100%;
      height: 100%;
      --swiper-theme-color: white;
      color: white;
      border-radius: 15px !important;
      overflow: hidden; 

    }
    .swiper-slide {
      text-align: center;
      background: #0D1251;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .slide-content {
      display: grid;
      grid-template-columns: 15% 100%; /* Columna flexible + imagen fija */
      height: 100%;
      width: 100%;
      
    }

    .regular-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: 1fr auto;
      gap: 0rem;
      max-width: 1200px;
      width: 100%;
      height: 80vh;
      align-items: center;
    }

    .regular-image {
      grid-column: 1;
      grid-row: 2;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .regular-text {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      justify-content: left;
      text-align: left;
      align-self: baseline;
      text-align: justify;
    }

    .regular-text h1 {
      font-size: clamp(1.5rem, 5vw, 4rem);
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 1rem;
    }

    .regular-text p {
      font-size: 0.7rem;
      line-height: 1.6;
      max-width: 500px;
      text-align: left;
    }
    .regular-svg {
      width: 100%;
        
    }
    .contact-image {
      width: 100%;
    }
    .contact-us h1 {
      font-size: clamp(1.5rem, 5vw, 4rem);
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 1rem;
    }

    .contract-letter {
        font-size: 0.7rem;
    }
    .contact-form { max-width: 600px; margin: 0 auto; display: grid; gap: 1rem; font-size: 0.7rem;}

}


.carousel {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  anchor-name: --carousel;

  > .carousel__slide {
    scroll-snap-align: center;
  }
}

.carousel--scroll-buttons {
  &::scroll-button(*) {
    position: fixed;
    position-anchor: --carousel;
    position-visibility: always;
    font-family: "Material Symbols Outlined";
  }

  &::scroll-button(right) {
    position-area: inline-end center;
    content: 'arrow_forward' / 'Next';
  }

  &::scroll-button(left) {
    position-area: inline-start center;
    content: 'arrow_back' / 'Previous';
  }
}