/* ==========================================================
   INICIO DESTACADOS — FASE 1
   Promociones + Productos principales + Colecciones
   Estética: Demhill fina, ligera y editorial
========================================================== */

.inicio-destacados,
.inicio-destacados * {
    box-sizing: border-box;
}

.inicio-destacados {
    --vino: #7d0d2f;
    --vino-2: #9b2446;
    --texto: #241d1b;
    --muted: #786d68;
    --linea: rgba(72, 49, 43, .10);
    --crema: #fbf8f5;
    --crema-2: #f6f0eb;
    --radio: 14px;
    background: #fff;
    color: var(--texto);
    padding: 54px 0 64px;
}

.id-wrap {
    width: min(1380px, calc(100% - 56px));
    margin: 0 auto;
}

.id-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin: 42px 0 18px;
}

.id-section-head--promo { margin-top: 0; }
.id-section-head--collections { margin-top: 48px; }

.id-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--vino);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.id-section-head h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 2vw, 33px);
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -.015em;
}

.id-link-all {
    color: var(--vino);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity .2s ease;
}
.id-link-all:hover { opacity: .68; }
.id-link-all span { margin-left: 7px; }

/* ---------- Promociones ---------- */
.id-promos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.id-promo {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--crema);
    isolation: isolate;
}

.id-promo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(251,248,245,.99) 0%, rgba(251,248,245,.94) 43%, rgba(251,248,245,.40) 68%, rgba(251,248,245,.02) 100%);
}

.id-promo__photo,
.id-card__photo,
.id-collection__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-size: cover;
    transform: scale(1.001);
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

.id-promo:hover .id-promo__photo,
.id-card:hover .id-card__photo,
.id-collection:hover .id-collection__photo {
    transform: scale(1.035);
}

/* Fondos de demostración si aún no hay fotografías asignadas en Datos.js */
.id-photo-fallback {
    background-color: #e9dfd7;
    background-image:
        linear-gradient(120deg, rgba(255,255,255,.08), rgba(55,35,25,.08)),
        radial-gradient(circle at 75% 30%, rgba(255,255,255,.9), transparent 20%),
        linear-gradient(135deg, #d9ccc1 0%, #f2eae4 45%, #c9b7a9 100%);
}
.id-photo-fallback::before {
    content: "";
    position: absolute;
    inset: 16% 6% 12% 58%;
    border-radius: 4px;
    border-left: 8px solid rgba(102,73,58,.25);
    border-right: 8px solid rgba(102,73,58,.18);
    background: rgba(255,255,255,.2);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}

.id-promo__content {
    width: 58%;
    padding: 30px 26px 26px;
}

.id-promo__title {
    margin: 0 0 13px;
    max-width: 210px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    line-height: 1.08;
    font-weight: 400;
}

.id-promo__discount {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 10px;
}
.id-promo__discount strong {
    color: var(--vino);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    line-height: 1;
    font-weight: 400;
}
.id-promo__discount small {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.id-promo__text {
    margin: 0 0 18px;
    color: #5e5550;
    font-size: 12px;
    line-height: 1.5;
}

.id-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 17px;
    border-radius: 6px;
    background: var(--vino);
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: transform .2s ease, background .2s ease;
}
.id-btn:hover { background: var(--vino-2); transform: translateY(-1px); }

/* ---------- Productos principales ---------- */
.id-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.id-card {
    position: relative;
    height: 270px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    background: #e9dfd7;
    text-decoration: none;
    color: #fff;
    isolation: isolate;
    box-shadow: 0 10px 30px rgba(34, 22, 18, .08);
    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s cubic-bezier(.22,.61,.36,1),
        border-color .35s ease;
}

.id-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10) 0%, transparent 26%),
        linear-gradient(180deg, transparent 44%, rgba(16,11,9,.12) 63%, rgba(16,11,9,.82) 100%);
}

.id-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    opacity: .7;
    transition: opacity .35s ease, box-shadow .35s ease;
}

.id-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 20px 42px rgba(34, 22, 18, .16);
}

.id-card:hover::after {
    opacity: 1;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.15),
        inset 0 -90px 120px rgba(125,13,47,.06);
}

.id-card__photo {
    filter: saturate(.92) contrast(1.02);
    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        filter .55s ease;
}

.id-card:hover .id-card__photo {
    transform: scale(1.065);
    filter: saturate(1) contrast(1.04);
}

.id-card__body {
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 20px 19px;
}

.id-card__body > div {
    min-width: 0;
}

.id-card__title {
    display: inline-block;
    position: relative;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(21px, 1.65vw, 25px);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -.015em;
    text-shadow: 0 2px 16px rgba(0,0,0,.24);
}

.id-card__title::after {
    content: "";
    display: block;
    width: 26px;
    height: 1px;
    margin-top: 9px;
    background: rgba(255,255,255,.72);
    transform-origin: left center;
    transition: width .35s ease, background .35s ease;
}

.id-card:hover .id-card__title::after {
    width: 44px;
    background: #171311;
}

.id-card__meta {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.72);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .13em;
    text-transform: uppercase;
    transition: color .3s ease, transform .3s ease;
}

.id-card:hover .id-card__meta {
    color: rgba(255,255,255,.95);
    transform: translateX(2px);
}

.id-card__arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 5px 18px rgba(0,0,0,.10);
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .35s cubic-bezier(.22,.61,.36,1);
}

.id-card:hover .id-card__arrow {
    background: rgba(255,255,255,.96);
    color: var(--vino);
    border-color: rgba(255,255,255,.96);
    transform: translateX(3px);
}

.id-card:focus-visible {
    outline: 2px solid var(--vino);
    outline-offset: 3px;
}

/* ---------- Colecciones ---------- */
.id-collections {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.id-collection {
    position: relative;
    display: block;
    height: 270px;
    overflow: hidden;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #ece4de;
    text-decoration: none;
    color: #fff;
    isolation: isolate;
}
.id-collection:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(34, 22, 18, .12);
    transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1);
}
.id-collection::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    background: linear-gradient(
        180deg,
        rgba(251,248,245,0) 0%,
        rgba(251,248,245,.52) 40%,
        rgba(251,248,245,.90) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.id-collection__body {
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 14px;
    padding: 18px 18px 21px;
}


.id-collection__title {
    display: inline-block;
    position: relative;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(21px, 1.65vw, 25px);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -.015em;
    color: #171311;
    text-shadow: none;
}

/* Línea editorial: nace corta y al pasar el mouse recorre casi todo el ancho de la tarjeta */
.id-collection__body::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 10px;
    height: 1px;
    background: rgba(23,19,17,.52);
    transform: scaleX(.085);
    transform-origin: left center;
    transition: transform .58s cubic-bezier(.22,.61,.36,1), background .35s ease;
    pointer-events: none;
}

.id-collection:hover .id-collection__body::after {
    transform: scaleX(1);
    background: rgba(23,19,17,.72);
}

.id-collection__arrow {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(23,19,17,.30);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.36);
    color: #171311;
    font-size: 16px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 14px rgba(34,22,18,.08);
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .35s cubic-bezier(.22,.61,.36,1);
}

.id-collection:hover .id-collection__arrow {
    background: rgba(255,255,255,.88);
    color: var(--vino);
    border-color: rgba(23,19,17,.18);
    transform: translateX(3px);
}

/* Tonos distintos para los placeholders sin foto */
.id-tone-cortinas .id-photo-fallback,
.id-tone-riplefold .id-photo-fallback { filter: sepia(.05) brightness(1.03); }
.id-tone-roller .id-photo-fallback,
.id-tone-screen .id-photo-fallback { filter: sepia(.12) saturate(.74) brightness(.98); }
.id-tone-persianas .id-photo-fallback,
.id-tone-venecianas .id-photo-fallback { filter: sepia(.22) saturate(.60) brightness(.80); }
.id-tone-alfombras .id-photo-fallback,
.id-tone-residenciales .id-photo-fallback { filter: sepia(.30) saturate(.67) brightness(.93); }
.id-tone-blackout .id-photo-fallback { filter: sepia(.08) saturate(.55) brightness(.72); }
.id-tone-verticales .id-photo-fallback { filter: sepia(.04) saturate(.48) brightness(1.08); }
.id-tone-corporativas .id-photo-fallback { filter: sepia(.13) saturate(.55) brightness(.88); }
.id-tone-personalizadas .id-photo-fallback { filter: sepia(.18) saturate(.70) brightness(.96); }

@media (max-width: 1050px) {
    .id-wrap { width: min(100% - 36px, 1100px); }
    .id-promos { grid-template-columns: 1fr; }
    .id-promo { min-height: 220px; }
    .id-promo__content { width: 50%; }
    .id-products { grid-template-columns: repeat(2, 1fr); }
    .id-collections { grid-template-columns: repeat(2, 1fr); }
    .id-collection { height: 270px; }
}

@media (max-width: 620px) {
    .inicio-destacados { padding: 36px 0 44px; }
    .id-wrap { width: calc(100% - 24px); }
    .id-section-head { align-items: flex-start; margin-top: 34px; }
    .id-section-head h2 { font-size: 25px; }
    .id-link-all { margin-top: 4px; font-size: 10px; }
    .id-promos { gap: 13px; }
    .id-promo { min-height: 264px; }
    .id-promo__content { width: 68%; padding: 23px 18px 20px; }
    .id-promo__title { font-size: 19px; }
    .id-promo__discount strong { font-size: 36px; }
    .id-products { grid-template-columns: 1fr 1fr; gap: 10px; }
    .id-card { height: 205px; border-radius: 13px; }
    .id-card:hover { transform: none; }
    .id-card__body { padding: 15px 14px 14px; }
    .id-card__title { font-size: 18px; }
    .id-card__title::after { margin-top: 7px; }
    .id-card__meta { margin-top: 6px; font-size: 8px; letter-spacing: .10em; }
    .id-card__arrow { width: 32px; height: 32px; font-size: 14px; }
    .id-collections { gap: 10px; }
    .id-collection { height: 205px; border-radius: 10px; }
    .id-collection__body { padding: 13px 13px 18px; }
    .id-collection__title { font-size: 18px; }
    .id-collection__arrow { width: 32px; height: 32px; font-size: 14px; }
}

/* =========================================================
   ALTURA DE COLECCIONES — MISMA ESCALA QUE PRODUCTOS
   Selector reforzado para evitar que una regla antigua/global la reduzca.
========================================================= */
.inicio-destacados #IdColecciones > .id-collection {
    height: 270px !important;
    min-height: 270px !important;
}

@media (max-width: 900px) {
    .inicio-destacados #IdColecciones > .id-collection {
        height: 270px !important;
        min-height: 270px !important;
    }
}

@media (max-width: 620px) {
    .inicio-destacados #IdColecciones > .id-collection {
        height: 205px !important;
        min-height: 205px !important;
    }
}


/* =========================================================
   AJUSTE LAPTOP — ANCHO ÚTIL Y PROPORCIÓN
   Mantiene desktop grande y móvil sin cambios.
   ========================================================= */
@media (min-width: 1060px) and (max-width: 1440px) {
    .id-wrap {
        width: calc(100% - 24px);
        max-width: none;
    }

    .id-promos {
        gap: 14px;
    }

    .id-products,
    .id-collections {
        gap: 12px;
    }

    .id-card,
    .inicio-destacados #IdColecciones > .id-collection {
        height: clamp(250px, 22.5vw, 292px) !important;
        min-height: clamp(250px, 22.5vw, 292px) !important;
    }

    .id-card__body {
        padding: 19px 17px 17px;
    }

    .id-collection__body {
        padding: 16px 16px 19px;
    }

    .id-card__title,
    .id-collection__title {
        font-size: clamp(20px, 1.7vw, 24px);
    }
}

/* AJUSTE PROPORCIONAL LAPTOP / TABLET — 2026-09-16 */
@media (min-width: 981px) and (max-width: 1440px) {
    .id-wrap {
        width: calc(100% - 24px);
        max-width: none;
    }
    .id-products,
    .id-collections { gap: 12px; }
}

@media (min-width: 761px) and (max-width: 980px) {
    .id-wrap {
        width: calc(100% - 20px);
        max-width: none;
    }
}