/* =====================================================
   COLECCIÓN
===================================================== */

.collection-hero {

  height: 75vh;

  background-image:
    url('/assets/collection-hero.webp?v=1.0.8');

  background-size: cover;
  background-position: center;

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

}

/* =====================================================
   CONTROL DE ANCHO Y OVERFLOW
===================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

/* =====================================================
   HERO OVERLAY
===================================================== */

.collection-overlay {

  background: rgba(0, 0, 0, 0.18);

  padding: 60px;

  color: white;

  text-align: center;

  backdrop-filter: blur(2px);

}


.collection-overlay h1 {

  font-size: 3rem;

  font-weight: 300;

  max-width: 800px;

  margin-top: 20px;

}


/* =====================================================
   INTRO
===================================================== */

.collection-intro {

  padding: 120px 0 80px;

}


.collection-text {

  max-width: 850px;

  margin: auto;

  text-align: center;

}


.collection-text h2 {

  font-size: 2.5rem;

  font-weight: 300;

  margin-bottom: 25px;

}


.collection-text p {

  max-width: 700px;

  margin: auto;

}


/* =====================================================
   PRODUCTO
===================================================== */

.product-section {

  padding: 80px 0 140px;

}


.product-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 100px;

  align-items: start;

}


/* =====================================================
   GALERÍA
===================================================== */

.product-gallery {

  width: 100%;

}


.main-product-image {

  width: 100%;

  overflow: hidden;

}


.main-product-image img {

  width: 100%;

  height: 850px;

  object-fit: cover;

  display: block;

  transition: opacity 0.3s ease;

}


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

.thumbnail-gallery {

  display: flex;

  gap: 15px;

  margin-top: 20px;

}


.thumbnail {

  padding: 0;

  border: 1px solid transparent;

  background: none;

  cursor: pointer;

  opacity: 0.65;

  transition: 0.3s;

}


.thumbnail img {

  display: block;

  width: 110px;

  height: 140px;

  object-fit: cover;

}


.thumbnail:hover {

  opacity: 1;

}


.thumbnail.active-thumb {

  opacity: 1;

  border: 1px solid var(--black);

}


/* =====================================================
   INFORMACIÓN PRODUCTO
===================================================== */

.product-info {

  padding-top: 10px;

}


.product-info h2 {

  font-size: 2.7rem;

  font-weight: 300;

  margin: 20px 0;

  line-height: 1.2;

}


.product-description {

  max-width: 500px;

  margin-bottom: 35px;

  line-height: 1.8;

}


/* =====================================================
   DETALLES
===================================================== */

.product-details {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-bottom: 35px;

}


.product-details p {

  margin: 0;

}


/* =====================================================
   PRECIO
===================================================== */

.product-price {

  font-size: 1.5rem;

  margin-bottom: 35px;

  letter-spacing: 2px;

}


/* =====================================================
   TALLES
===================================================== */

.size-selector {

  margin-bottom: 35px;

}


.size-selector label {

  display: block;

  margin-bottom: 10px;

  letter-spacing: 1px;

}


.size-selector select {

  width: 220px;

  padding: 15px;

  border: 1px solid #d9d9d9;

  background: transparent;

  font-family: 'Josefin Sans', sans-serif;

  font-size: 0.95rem;

  color: var(--black);

  cursor: pointer;

}


/* =====================================================
   GUÍA DE TALLES
===================================================== */

.size-guide {

  border-top: 1px solid #ddd;

  padding-top: 30px;

  margin-bottom: 35px;

}


.size-guide h3 {

  font-size: 1.15rem;

  font-weight: 400;

  letter-spacing: 1px;

  margin-bottom: 15px;

}


.size-guide-intro {

  max-width: 550px;

  font-size: 0.9rem;

  line-height: 1.7;

  color: #666;

  margin-bottom: 25px;

}


/* =====================================================
   TABLA
===================================================== */

.size-table-wrapper {

  width: 100%;

  overflow-x: auto;

}


.size-table {

  width: 100%;

  max-width: 550px;

  border-collapse: collapse;

  font-size: 0.9rem;

}


.size-table th,
.size-table td {

  padding: 14px 12px;

  text-align: left;

  border-bottom: 1px solid #dedbd6;

}


.size-table th {

  font-weight: 400;

  letter-spacing: 1px;

  text-transform: uppercase;

  font-size: 0.75rem;

}


.size-table td:first-child {

  font-weight: 500;

}


/* =====================================================
   ACLARACIÓN
===================================================== */

.measurement-note {

  margin-top: 18px;

  max-width: 520px;

  font-size: 0.8rem;

  line-height: 1.6;

  color: #777;

}


/* =====================================================
   BOTÓN COMPRA
===================================================== */

.product-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  margin-top: 5px;

}


.product-btn i {

  font-size: 1.1rem;

}


/* =====================================================
   NOTA COMPRA
===================================================== */

.purchase-note {

  margin-top: 18px;

  max-width: 420px;

  font-size: 0.9rem;

  line-height: 1.7;

  opacity: 0.7;

}


/* =====================================================
   COMBO ESPECIAL
===================================================== */

.combo-section {

  padding: 120px 0 140px;

  background: var(--soft-gray);

}


.combo-grid {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 100px;

  align-items: center;

}


/* =====================================================
   IMAGEN COMBO
===================================================== */

.combo-image {

  width: 100%;

  overflow: hidden;

}


.combo-image img {

  width: 100%;

  height: 650px;

  object-fit: cover;

  display: block;

}


/* =====================================================
   INFORMACIÓN COMBO
===================================================== */

.combo-info {

  max-width: 500px;

}


.combo-info h2 {

  font-size: 2.7rem;

  font-weight: 300;

  margin: 20px 0;

  line-height: 1.2;

}


.combo-description {

  line-height: 1.8;

  margin-bottom: 35px;

}


.combo-details {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-bottom: 35px;

}


.combo-details p {

  margin: 0;

}


/* =====================================================
   PRECIO COMBO
===================================================== */

.combo-price-label {

  font-size: 0.75rem;

  letter-spacing: 2px;

  margin-bottom: 8px;

  opacity: 0.65;

}


.combo-price {

  font-size: 1.7rem;

  letter-spacing: 2px;

  margin-bottom: 30px;

}


/* =====================================================
   BOTÓN COMBO
===================================================== */

.combo-btn {

  width: 100%;

  max-width: 420px;

}


/* =====================================================
   PRÓXIMAMENTE
===================================================== */

.future-section {

  padding: 140px 0;

  background: var(--soft-gray);

}


.future-box {

  max-width: 850px;

  margin: auto;

  text-align: center;

}


.future-box h2 {

  font-size: 2.5rem;

  font-weight: 300;

  margin: 20px 0;

}


.future-box p {

  max-width: 650px;

  margin: auto;

  line-height: 1.8;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {


  /* HERO */

  .collection-hero {

    min-height: 100svh;

    background-image:
      url('/assets/phone3.webp');

    background-position: center;

  }


  .collection-overlay {

      padding: 30px 20px;
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    box-sizing: border-box;

  }


  .collection-overlay h1 {

    font-size: 2rem;

    line-height: 1.25;

  }


  /* INTRO */

  .collection-intro {

    padding: 100px 0 60px;

  }


  .collection-text h2 {

    font-size: 2rem;

  }


  /* PRODUCTO */

  .product-section {

    padding: 70px 0 100px;

  }


  .product-grid {

    grid-template-columns: 1fr;

    gap: 60px;

  }


  .main-product-image img {

    height: 550px;

  }


  .thumbnail-gallery {

    justify-content: center;

  }


  .thumbnail img {

    width: 85px;

    height: 110px;

  }


  .product-info h2 {

    font-size: 2.2rem;

  }


  .size-selector select {

    width: 100%;

  }


  .size-table {

    min-width: 400px;

     min-width: 0;

  }


  /* =================================================
     COMBO MOBILE
  ================================================= */

  .combo-section {

    padding: 80px 0 100px;

  }


  .combo-grid {

    grid-template-columns: 1fr;

    gap: 50px;

  }


  .combo-image img {

    height: 500px;

  }


  .combo-info {

    max-width: 100%;

  }


  .combo-info h2 {

    font-size: 2.2rem;

  }


  .combo-price {

    font-size: 1.5rem;

  }


  .combo-btn {

    width: 100%;

  }


  /* PRÓXIMAMENTE */

  .future-section {

    padding: 100px 0;

  }


  .future-box h2 {

    font-size: 2rem;

  }

}

@media (max-width: 768px) {

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .collection-overlay {
        width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        box-sizing: border-box;
    }

    .product-grid,
    .combo-grid {
        width: 100%;
        max-width: 100%;
    }

    .product-gallery,
    .product-info,
    .combo-image,
    .combo-info {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .main-product-image,
    .combo-image {
        width: 100%;
        max-width: 100%;
    }

    .main-product-image img,
    .combo-image img {
        width: 100%;
        max-width: 100%;
    }

    .size-table-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    .size-table {
        width: 100%;
        min-width: 0;
    }
}