/* ============ HERO CAROUSEL ============ */
.pe-hero {
    position: relative;
    background: var(--color-bg);
    overflow: hidden;
}
.pe-hero__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pe-hero__track::-webkit-scrollbar { display: none; }
.pe-hero__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-height: clamp(420px, 56vh, 600px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.pe-hero__slide-content {
    padding: var(--space-12) var(--container-padding-x) var(--space-12) clamp(2rem, 5vw, 6rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
}
.pe-hero__eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-accent-deep);
    margin: 0;
}
.pe-hero__title {
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    line-height: 0.96;
    letter-spacing: var(--tracking-tighter);
    margin: 0;
    max-width: 18ch;
}
.pe-hero__subtitle {
    font-size: var(--fs-md);
    color: var(--color-text-soft);
    max-width: 38ch;
    line-height: var(--lh-snug);
    margin-bottom: var(--space-4);
}
.pe-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.pe-hero__visual {
    position: relative;
    height: 100%;
    min-height: 380px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.pe-hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.04), rgba(0,0,0,0.04));
    pointer-events: none;
}
.pe-hero__slide--coral .pe-hero__visual { background-image: url("../img/hero/hero-1.jpg"); }
.pe-hero__slide--mint  .pe-hero__visual { background-image: url("../img/hero/hero-2.jpg"); }
.pe-hero__slide--sand  .pe-hero__visual { background-image: url("../img/hero/hero-3.jpg"); }

.pe-hero__dots {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-2);
    z-index: 2;
}
.pe-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(31, 26, 24, 0.30);
    cursor: pointer;
    border: 0;
    padding: 0;
    transition: background var(--tr-fast), width var(--tr-fast);
}
.pe-hero__dot.is-active {
    background: var(--color-text);
    width: 28px;
    border-radius: var(--radius-pill);
}

@media (max-width: 880px) {
    .pe-hero__slide { grid-template-columns: 1fr; min-height: auto; }
    .pe-hero__slide-content { padding: var(--space-10) var(--container-padding-x); order: 2; }
    .pe-hero__visual { order: 1; min-height: 260px; padding: var(--space-6); }
    .pe-hero__visual img { max-width: 56%; }
    .pe-hero__title { font-size: clamp(2rem, 8vw, 3rem); }
}

/* ============ PROMO STRIP (3 cards) ============ */
.pe-promo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.pe-promo__card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-lg);
    min-height: 220px;
    color: var(--color-text);
    background: var(--color-bg-soft);
    overflow: hidden;
    position: relative;
    transition: transform var(--tr-base);
}
.pe-promo__card:hover { transform: translateY(-4px); color: var(--color-text); }
.pe-promo__card--coral { background: #FDEDE9; }
.pe-promo__card--mint  { background: #EFF7F4; }
.pe-promo__card--sand  { background: #F8F1E8; }
.pe-promo__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    margin-bottom: var(--space-2);
    color: var(--color-text-soft);
}
.pe-promo__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-4);
}
.pe-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text);
    transition: gap var(--tr-fast);
}
.pe-promo__card:hover .pe-promo__cta { gap: var(--space-3); }

@media (max-width: 880px) { .pe-promo { grid-template-columns: 1fr; } }

/* ============ PRODUCT GRID ============ */
.pe-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
@media (max-width: 1024px) { .pe-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .pe-products { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }

/* Product placeholder (skeleton sutil, sin shimmer cursi) */
.pe-product-placeholder {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.pe-product-placeholder__img {
    aspect-ratio: 4/5;
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
}
.pe-product-placeholder__bar {
    height: 12px;
    background: var(--color-bg-soft);
    border-radius: 3px;
}
.pe-product-placeholder__bar--short { width: 40%; }

/* ============ CATEGORÍAS TILES ============ */
.pe-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.pe-cat-tile {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    color: var(--color-text);
    background: var(--color-bg-soft);
    transition: transform var(--tr-base);
    display: block;
}
.pe-cat-tile:hover { color: var(--color-text); transform: translateY(-4px); }
.pe-cat-tile__bg {
    position: absolute;
    inset: 0;
    transition: transform var(--tr-slow);
}
.pe-cat-tile:hover .pe-cat-tile__bg { transform: scale(1.04); }
.pe-cat-tile__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6);
    background: linear-gradient(to top, rgba(31, 26, 24, 0.55), transparent);
    color: var(--color-bg);
    z-index: 1;
}
.pe-cat-tile__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    margin: 0 0 var(--space-1);
    letter-spacing: var(--tracking-tight);
    color: var(--color-bg);
}
.pe-cat-tile__cta {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    opacity: 0.9;
}

.pe-cat-tile--1 .pe-cat-tile__bg { background: url("../img/cats/cat-1.jpg") center/cover no-repeat; }
.pe-cat-tile--2 .pe-cat-tile__bg { background: url("../img/cats/cat-2.jpg") center/cover no-repeat; }
.pe-cat-tile--3 .pe-cat-tile__bg { background: url("../img/cats/cat-3.jpg") center/cover no-repeat; }
.pe-cat-tile--4 .pe-cat-tile__bg { background: linear-gradient(135deg, #F5EFE8, #C9B193); }
.pe-cat-tile--5 .pe-cat-tile__bg { background: linear-gradient(135deg, #EDF1E5, #A8B587); }
.pe-cat-tile--6 .pe-cat-tile__bg { background: linear-gradient(135deg, #F2E8DC, #B98D5F); }

@media (max-width: 760px) { .pe-cats { grid-template-columns: 1fr 1fr; } }

/* ============ LIFESTYLE BANNER ============ */
.pe-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-bg-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 360px;
    align-items: center;
}
.pe-banner__visual {
    background: linear-gradient(135deg, var(--color-brand-coral), var(--color-brand-mint-deep));
    height: 100%;
    min-height: 360px;
}
.pe-banner__content {
    padding: var(--space-12) clamp(2rem, 5vw, 5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.pe-banner__eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-accent-deep);
}
.pe-banner__title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tighter);
    max-width: 18ch;
    margin: 0;
}
.pe-banner__subtitle {
    font-size: var(--fs-md);
    color: var(--color-text-soft);
    max-width: 38ch;
    margin: 0;
}

@media (max-width: 880px) {
    .pe-banner { grid-template-columns: 1fr; }
    .pe-banner__visual { order: 1; min-height: 200px; }
    .pe-banner__content { order: 2; padding: var(--space-8); }
}

/* ============ TRUST BAND ============ */
.pe-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.pe-trust__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
}
.pe-trust__icon {
    color: var(--color-accent-deep);
    flex-shrink: 0;
}
.pe-trust__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-1);
}
.pe-trust__sub {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 0;
}

@media (max-width: 760px) {
    .pe-trust { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}