/* ============================
   Puntos de venta
   ============================ */

.puntos_hero {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem 4rem;
    box-sizing: border-box;
}

.puntos_hero picture,
.puntos_hero img {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block;
    border-radius: 16px;
}

/* ---------- Locations card ---------- */
.puntos_locations {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem 4rem;
    box-sizing: border-box;
}

.locations_card {
    width: 100%;
    max-width: 1200px;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    box-sizing: border-box;
    color: #fff;
    /* Placeholder background — el usuario lo reemplazará con su imagen */
    background: linear-gradient(135deg, #2c8499 0%, #6a4870 45%, #b2244d 100%);
    display: flex;
    flex-direction: column;
    gap: 3rem;
    position: relative;
}

/* ---------- Page wrapper + decorative background layer ---------- */
.puntos_page {
    position: relative;
    overflow: hidden;
}

.puntos_page .puntos_hero,
.puntos_page .puntos_locations,
.puntos_page .call_to_action {
    position: relative;
    z-index: 1;
}

.page_decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.bg_decor {
    position: absolute;
    user-select: none;
    pointer-events: none;
    opacity: 0.55;
}

.bg_decor_1 {
    /* sparkle a la derecha, a la mitad de la altura de la página */
    right: -3%;
    top: 50%;
    width: clamp(220px, 26vw, 380px);
    transform: translateY(-50%);
}

.bg_decor_2 {
    /* curva S grande a la izquierda, a la mitad de la altura */
    left: -6%;
    top: 50%;
    width: clamp(260px, 32vw, 460px);
    transform: translateY(-50%);
}

.bg_decor_3 {
    /* diamante pequeño como acento, ligeramente arriba a la derecha */
    right: 12%;
    top: 35%;
    width: clamp(50px, 6vw, 90px);
}

/* ---------- Section titles ---------- */
.block_title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 1.5rem;
    color: #fff;
    font-size: 2.25rem;
    font-weight: 700;
    font-style: italic;
    text-align: center;
}

.block_title .star {
    width: 20px;
    height: auto;
    flex-shrink: 0;
}

.block_title .star_left {
    align-self: flex-start;
    margin-top: -0.25rem;
}

.block_title .star_right {
    align-self: flex-end;
    margin-bottom: -0.25rem;
}

/* ---------- Plazas comerciales ---------- */
.plazas_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem 2rem;
    justify-items: center;
}

.plazas_grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plazas_grid li {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #fff;
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.plazas_grid li::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("../../assets/images/puntos-venta/stars.png") no-repeat center / contain;
    flex-shrink: 0;
}

/* ---------- Supermercados ---------- */
.markets_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem 1.5rem;
    align-items: start;
}

.market {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.market_label {
    display: inline-block;
    background: #FFA800;
    color: #fff;
    font-weight: 700;
    font-style: italic;
    font-size: 1.15rem;
    padding: 0.4rem 1.5rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.market ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.market li {
    font-size: 1.02rem;
    line-height: 1.85;
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.market li::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("../../assets/images/puntos-venta/stars.png") no-repeat center / contain;
    flex-shrink: 0;
}

/* ============================
   Tablet
   ============================ */
@media (max-width: 1024px) {
    .locations_card {
        padding: 2.5rem 1.75rem;
        gap: 2.5rem;
    }

    .block_title {
        font-size: 1.85rem;
    }

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

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

/* ============================
   Mobile
   ============================ */
@media (max-width: 768px) {
    .puntos_hero {
        margin-bottom: 1rem;
    }

    .puntos_hero picture,
    .puntos_hero img {
        border-radius: 0;
    }

    .puntos_locations {
        padding: 1.25rem 0.75rem 3rem;
    }

    .locations_card {
        padding: 2rem 1.25rem;
        border-radius: 18px;
        gap: 2.25rem;
    }

    .bg_decor {
        opacity: 0.4;
    }

    .bg_decor_1 {
        right: -20%;
        width: clamp(160px, 55vw, 260px);
    }

    .bg_decor_2 {
        left: -25%;
        width: clamp(200px, 65vw, 320px);
    }

    .bg_decor_3 {
        right: 4%;
        top: 32%;
        width: clamp(40px, 10vw, 60px);
    }

    .block_title {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
        gap: 10px;
    }

    .block_title .star {
        width: 24px;
    }

    /* Plazas: una sola columna visual, alineada a la izquierda dentro de un bloque centrado */
    .plazas_grid {
        grid-template-columns: 1fr;
        gap: 0;
        justify-items: stretch;
        max-width: 240px;
        margin: 0 auto;
    }

    .plazas_grid ul {
        width: 100%;
    }

    .plazas_grid li {
        justify-content: flex-start;
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Supermercados */
    .markets_grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .market {
        align-items: center;
    }

    .market_label {
        font-size: 1rem;
        padding: 0.35rem 1.4rem;
    }

    .market ul {
        width: 100%;
        max-width: 240px;
        margin: 0 auto;
        text-align: left;
    }

    .market li {
        justify-content: flex-start;
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

@media (max-width: 380px) {
    .block_title {
        font-size: 1.35rem;
    }

    .block_title .star {
        width: 20px;
    }
}