/* =========================================================
   RESET + BASE
========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background: #ffffff;
    color: #333;
}

/* =========================================================
   SECCIÓN
========================================================= */
.section {
    width: 100%;
    padding: 5rem 0 2rem;
}

/* TITULO (SE MANTIENE) */
.title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    color: #38C0FF;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.bg-gray .title {
    color: #9a9a9a;
}
.bg-gray .title::before,
.bg-gray .title.title::after {
    background-color: #9a9a9a;
}

.title::before,
.title::after {
    content: "";
    flex: 1;
    height: 2.5px;
    background-color: #38C0FF;
}

/* =========================================================
   CARD BASE
========================================================= */
.card {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card a {
    display: block;
    width: 100%;
    height: 100%;
}

.card picture,
.card img {
    display: block;
    width: 100%;
    height: 100%;
}
.banner-card .iThBzS{
    overflow: hidden;
}
.banner-card img,
.card img {
    /* object-fit: cover; */
    transition: transform 0.3s ease;
}

/* =========================================================
   HOVER
========================================================= */
.banner-card:hover img,
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.banner-card:hover img,
.card:hover img {
    transform: scale(1.05);
}

/* =========================================================
   GRID TODO PLAYA (SECCIÓN ORIGINAL – NO SE TOCA)
========================================================= */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    width: 100%;
}

/* Mobile / Tablet */
@media (max-width: 899px) {

    .section {
        width: 100%;
        padding: 4rem 0 1rem;
    }

    .title {
        font-size: 1.5rem;
    }

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

    .item1 {
        grid-column: 1 / -1;
    }

    .item6 {
        grid-column: 1 / -1;
    }
}

/* Desktop Todo Playa */
@media (min-width: 900px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 260px);
        grid-template-areas:
            "item1 item2 item3 item4"
            "item1 item5 item6 item4";
    }

    .item1 { grid-area: item1; }
    .item2 { grid-area: item2; }
    .item3 { grid-area: item3; }
    .item4 { grid-area: item4; }
    .item5 { grid-area: item5; }
    .item6 { grid-area: item6; }
}

/* =========================================================
   FEATURED GRID – COMPLEMENTOS
========================================================= */

/* Mobile (SE MANTIENE) */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "item1 item2"
        "item3 item3"
        "item4 item5";
    gap: 15px;
}

.featured-grid .item-1 { grid-area: item1; }
.featured-grid .item-2 { grid-area: item2; }
.featured-grid .item-3 { grid-area: item3; }
.featured-grid .item-4 { grid-area: item4; }
.featured-grid .item-5 { grid-area: item5; }

/* =========================================================
   FEATURED GRID – DESKTOP (60% / 40% REAL)
========================================================= */
@media (min-width: 900px) {

  .featured-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columnas = control real */
    grid-template-rows: 260px 260px 260px;
    gap: 15px;
  }

  /* Fila 1 → 40 / 60 */
  .featured-grid .item-1 {
    grid-column: 1 / 3; /* 2/5 = 40% */
    grid-row: 1;
  }

  .featured-grid .item-2 {
    grid-column: 3 / 6; /* 3/5 = 60% */
    grid-row: 1;
  }

  /* Fila 2 → 100% */
  .featured-grid .item-3 {
    grid-column: 1 / 6; /* full */
    grid-row: 2;
  }

  /* Fila 3 → 60 / 40 */
  .featured-grid .item-4 {
    grid-column: 1 / 4; /* 3/5 = 60% */
    grid-row: 3;
  }

  .featured-grid .item-5 {
    grid-column: 4 / 6; /* 2/5 = 40% */
    grid-row: 3;
  }

}