/* ==========================================================================
   ARMONÍA ZEN — Sistema de diseño editorial
   Inspiración: Mouli · Aman · Six Senses · Soho House · Design Hotels
   ========================================================================== */

:root {
    /* Paleta */
    --forest: #0B2219;
    --moss: #143328;
    --ivory: #F4EFE6;
    --gold: #CBB77C;
    --beige: #D8CCB5;

    --ivory-soft: rgba(244, 239, 230, 0.72);
    --ivory-faint: rgba(244, 239, 230, 0.42);
    --gold-line: rgba(203, 183, 124, 0.35);

    /* Tipografía */
    --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --display: 'Playfair Display', 'Cormorant Garamond', serif;
    --sans: 'Inter', 'Manrope', -apple-system, sans-serif;

    /* Movimiento */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --slow: 1.1s cubic-bezier(0.22, 1, 0.36, 1);

    /* Métrica */
    --gutter: clamp(24px, 6vw, 120px);
    --section-y: clamp(90px, 14vh, 200px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--sans);
    background: var(--forest);
    color: var(--ivory);
    overflow-x: hidden;
    font-weight: 300;
    line-height: 1.7;
}

img { display: block; max-width: 100%; }

::selection { background: var(--gold); color: var(--forest); }

/* Tipografía utilitaria ----------------------------------------------------- */

.eyebrow {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
    display: inline-block;
}

.display {
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.01em;
}

.serif {
    font-family: var(--serif);
    font-weight: 400;
}

.lead {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.85;
    color: var(--ivory-soft);
    font-weight: 300;
}

.text-block p { margin-bottom: 1.4em; color: var(--ivory-soft); }
.text-block p:last-child { margin-bottom: 0; }

/* Botones ------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.9em;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ivory);
    padding: 1.15em 2.4em;
    border: 1px solid var(--gold-line);
    background: transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.6s var(--ease), border-color 0.6s var(--ease);
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
    z-index: -1;
}

.btn:hover { color: var(--forest); border-color: var(--gold); }
.btn:hover::after { transform: scaleX(1); }

.btn--solid { background: var(--gold); color: var(--forest); border-color: var(--gold); }
.btn--solid::after { background: var(--ivory); }
.btn--solid:hover { color: var(--forest); }

.link-underline {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    position: relative;
    padding-bottom: 6px;
    display: inline-block;
}

.link-underline::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s var(--ease);
}

.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */

.preloader {
    position: fixed;
    inset: 0;
    background: var(--forest);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 28px;
    transition: opacity 1s var(--ease), visibility 1s var(--ease);
}

.preloader.hidden { opacity: 0; visibility: hidden; }

.preloader__mark {
    font-family: var(--display);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    letter-spacing: 0.4em;
    color: var(--ivory);
    text-indent: 0.4em;
    opacity: 0;
    animation: fadeUp 1.2s var(--ease) 0.2s forwards;
}

.preloader__line {
    width: 0;
    height: 1px;
    background: var(--gold);
    animation: lineGrow 1.6s var(--ease) 0.6s forwards;
}

@keyframes lineGrow { to { width: 180px; } }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: clamp(20px, 3vw, 38px) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: padding 0.5s var(--ease), background 0.6s var(--ease),
                backdrop-filter 0.6s var(--ease), border-color 0.6s var(--ease);
    border-bottom: 1px solid transparent;
}

.site-header.scrolled {
    padding-top: clamp(14px, 1.6vw, 20px);
    padding-bottom: clamp(14px, 1.6vw, 20px);
    background: rgba(11, 34, 25, 0.65);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--gold-line);
}

.brand {
    font-family: var(--display);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    letter-spacing: 0.34em;
    color: var(--ivory);
    text-decoration: none;
    text-indent: 0.34em;
    transition: font-size 0.5s var(--ease);
    z-index: 110;
}

.site-header.scrolled .brand { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }

.header-right {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 32px);
}

.nav {
    display: flex;
    gap: clamp(22px, 2.4vw, 44px);
    align-items: center;
}

.nav a {
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ivory-soft);
    text-decoration: none;
    transition: color 0.4s var(--ease);
    position: relative;
}

.nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -7px;
    width: 100%; height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s var(--ease);
}

.nav a:hover { color: var(--ivory); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta {
    margin-left: 8px;
    padding: 0.85em 1.7em;
    border: 1px solid var(--gold-line);
    color: var(--ivory) !important;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--gold); color: var(--forest) !important; border-color: var(--gold); }

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 110;
}
.menu-toggle span {
    width: 26px; height: 1px;
    background: var(--ivory);
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    position: fixed;
    inset: 0;
    background: var(--forest);
    z-index: 105;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
.mobile-nav.open { opacity: 1; visibility: visible; }
.mobile-nav a {
    font-family: var(--display);
    font-size: 1.8rem;
    color: var(--ivory);
    text-decoration: none;
    letter-spacing: 0.04em;
}

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

.hero {
    position: relative;
    height: 100vh;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: -10% 0;
    background-size: cover;
    background-position: center;
    z-index: -2;
    will-change: transform;
}

.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(11, 34, 25, 0.55) 0%,
        rgba(11, 34, 25, 0.35) 45%,
        rgba(11, 34, 25, 0.85) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    max-width: 920px;
    padding: 0 var(--gutter);
}

.hero__title {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(3.4rem, 11vw, 8.5rem);
    line-height: 0.98;
    letter-spacing: 0.06em;
    color: var(--ivory);
    margin: 24px 0 28px;
}

.hero__subtitle {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    color: var(--beige);
    margin-bottom: 26px;
    font-weight: 400;
}

.hero__text {
    max-width: 620px;
    margin: 0 auto 40px;
    color: var(--ivory-soft);
    font-size: clamp(0.98rem, 1.2vw, 1.1rem);
    line-height: 1.85;
}

.hero__actions {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero__scroll {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--ivory-faint);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}
.hero__scroll-line {
    width: 1px; height: 50px;
    background: linear-gradient(var(--gold), transparent);
    animation: scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse {
    0%, 100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; }
    50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

/* ==========================================================================
   SECCIONES BASE
   ========================================================================== */

.section { padding: var(--section-y) var(--gutter); }
.section--moss { background: var(--moss); }
.section--ivory { background: var(--ivory); color: var(--forest); }
.section--ivory .lead,
.section--ivory .text-block p { color: rgba(11, 34, 25, 0.72); }
.section--ivory .eyebrow { color: var(--moss); }

.section-head {
    max-width: 760px;
    margin: 0 auto clamp(50px, 7vw, 90px);
    text-align: center;
}
.section-head .display {
    font-size: clamp(2.2rem, 5vw, 4rem);
    margin-top: 22px;
}

/* Esencia — editorial 50/50 ------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(40px, 7vw, 120px);
    max-width: 1480px;
    margin: 0 auto;
}
.split--reverse .split__media { order: 2; }

.split__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}
.split__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}
.split__media:hover img { transform: scale(1.05); }

.split__tag {
    position: absolute;
    bottom: 0; right: 0;
    background: var(--gold);
    color: var(--forest);
    padding: 22px 30px;
    font-family: var(--display);
    line-height: 1.1;
}
.split__tag strong { display: block; font-size: 1.8rem; font-weight: 500; }
.split__tag span { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }

.split__body .display {
    font-size: clamp(2rem, 4vw, 3.4rem);
    margin: 22px 0 30px;
}

/* Colecciones — bandas editoriales full-width ------------------------------- */

.collections { padding: 0; }

.band {
    position: relative;
    min-height: clamp(440px, 70vh, 760px);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.band__media {
    position: absolute;
    inset: -8% 0;
    background-size: cover;
    background-position: center;
    z-index: -2;
    will-change: transform;
    transition: transform 1.6s var(--ease);
}
.band:hover .band__media { transform: scale(1.04); }
.band__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(11, 34, 25, 0.82) 0%,
        rgba(11, 34, 25, 0.45) 50%,
        rgba(11, 34, 25, 0.2) 100%);
}
.band--right { justify-content: flex-end; text-align: right; }
.band--right .band__media::after {
    background: linear-gradient(270deg,
        rgba(11, 34, 25, 0.82) 0%,
        rgba(11, 34, 25, 0.45) 50%,
        rgba(11, 34, 25, 0.2) 100%);
}

.band__content {
    position: relative;
    z-index: 2;
    max-width: 540px;
    padding: clamp(40px, 6vw, 90px) var(--gutter);
}
.band__index {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 0.3em;
}
.band__title {
    font-family: var(--display);
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    margin: 16px 0 22px;
    color: var(--ivory);
}
.band__text {
    color: var(--ivory-soft);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 30px;
    max-width: 460px;
}
.band--right .band__text { margin-left: auto; }

/* Espacios Zen — galería parallax ------------------------------------------- */

.spaces-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(14px, 1.6vw, 26px);
    max-width: 1600px;
    margin: 0 auto;
}
.space {
    position: relative;
    overflow: hidden;
}
.space img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease);
}
.space:hover img { transform: scale(1.06); }
.space::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(11,34,25,0.7));
    opacity: 0;
    transition: opacity 0.6s var(--ease);
}
.space:hover::after { opacity: 1; }
.space__label {
    position: absolute;
    left: 28px; bottom: 24px;
    z-index: 2;
    font-family: var(--serif);
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    color: var(--ivory);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.space:hover .space__label { opacity: 1; transform: translateY(0); }

.space--tall { grid-column: span 4; grid-row: span 2; aspect-ratio: 3/4; }
.space--wide { grid-column: span 8; aspect-ratio: 16/9; }
.space--half { grid-column: span 4; aspect-ratio: 4/5; }
.space--full { grid-column: span 12; aspect-ratio: 21/9; }

/* Productos destacados — editorial ------------------------------------------ */

.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 56px);
    max-width: 1480px;
    margin: 0 auto;
}
.product {
    position: relative;
}
.product__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    margin-bottom: 22px;
    background: var(--moss);
}
.product__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}
.product:hover .product__media img { transform: scale(1.06); }

.product__quick {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px;
    display: flex;
    justify-content: center;
    transform: translateY(101%);
    transition: transform 0.6s var(--ease);
}
.product:hover .product__quick { transform: translateY(0); }
.product__quick button {
    width: 100%;
    background: rgba(11, 34, 25, 0.72);
    backdrop-filter: blur(10px);
    border: 1px solid var(--gold-line);
    color: var(--ivory);
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1.05em;
    cursor: pointer;
    transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.product__quick button:hover { background: var(--gold); color: var(--forest); }

.product__cat {
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
}
.product__name {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ivory);
    margin: 10px 0 8px;
}
.product__price {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--beige);
}

/* Ofertas del mes ------------------------------------------------------------ */

.offer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
    max-width: 1480px;
    margin: 0 auto;
}
.offer-card { position: relative; display: flex; flex-direction: column; }
.offer-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    margin-bottom: 16px;
    background: var(--moss);
}
.offer-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.offer-card:hover .offer-card__media img { transform: scale(1.06); }
.offer-card__ribbon {
    position: absolute; top: 12px; left: 12px;
    background: var(--gold); color: var(--forest);
    font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 2px;
}
.offer-card__cat { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; display: block; }
.offer-card__name { font-family: var(--display); font-size: 1.25rem; color: var(--ivory); margin-bottom: 8px; line-height: 1.2; }
.offer-card__price { display: flex; align-items: baseline; gap: 9px; margin-bottom: 16px; }
.offer-card__price-orig { font-size: 0.85rem; color: var(--ivory-faint); text-decoration: line-through; }
.offer-card__price-now { font-family: var(--serif); font-size: 1.25rem; color: var(--gold); }
.offer-card__add {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; background: rgba(255,255,255,0.06); border: 1px solid var(--gold-line);
    color: var(--ivory); font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
    padding: 13px; cursor: pointer; margin-top: auto;
    transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.offer-card__add:hover { background: var(--gold); color: var(--forest); border-color: var(--gold); }
@media (max-width: 1024px) { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .offer-grid { grid-template-columns: 1fr; } }

/* Rituales — revista -------------------------------------------------------- */

.rituals {
    max-width: 1100px;
    margin: 0 auto;
}
.ritual {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: baseline;
    padding: clamp(40px, 5vw, 64px) 0;
    border-top: 1px solid var(--gold-line);
}
.ritual:last-child { border-bottom: 1px solid var(--gold-line); }
.ritual__num {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 0.2em;
}
.ritual__title {
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 500;
    margin-top: 14px;
    color: var(--ivory);
}
.ritual__text { color: var(--ivory-soft); font-size: 1.05rem; line-height: 1.9; }

/* Blog editorial ------------------------------------------------------------ */

.journal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(30px, 4vw, 70px);
    max-width: 1400px;
    margin: 0 auto;
}
.entry { display: block; text-decoration: none; }
.entry__media {
    overflow: hidden;
    aspect-ratio: 16/10;
    margin-bottom: 26px;
}
.entry__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.5s var(--ease);
}
.entry:hover .entry__media img { transform: scale(1.05); }
.entry__meta {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
}
.entry__title {
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-weight: 500;
    color: var(--ivory);
    line-height: 1.18;
    margin-bottom: 12px;
}
.entry__excerpt { color: var(--ivory-soft); font-size: 1rem; line-height: 1.8; }

/* Newsletter / CTA cierre --------------------------------------------------- */

.invite {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.invite .display { font-size: clamp(2.2rem, 5vw, 4rem); margin: 22px 0 24px; }
.newsletter {
    display: flex;
    gap: 0;
    max-width: 480px;
    margin: 38px auto 0;
    border-bottom: 1px solid var(--gold-line);
}
.newsletter input {
    flex: 1;
    background: none;
    border: none;
    padding: 1em 0;
    color: var(--ivory);
    font-family: var(--sans);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}
.newsletter input::placeholder { color: var(--ivory-faint); }
.newsletter input:focus { outline: none; }
.newsletter button {
    background: none;
    border: none;
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0 8px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: var(--forest);
    padding: clamp(70px, 9vw, 130px) var(--gutter) 40px;
    border-top: 1px solid var(--gold-line);
}
.footer-quote {
    font-family: var(--display);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 500;
    text-align: center;
    color: var(--ivory);
    max-width: 900px;
    margin: 0 auto clamp(60px, 8vw, 100px);
    line-height: 1.2;
}
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    max-width: 1480px;
    margin: 0 auto;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--gold-line);
}
.footer-col h4 {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 22px;
}
.footer-col a {
    display: block;
    color: var(--ivory-soft);
    text-decoration: none;
    font-size: 0.92rem;
    margin-bottom: 12px;
    transition: color 0.4s var(--ease);
}
.footer-col a:hover { color: var(--ivory); }
.footer-col .brand-foot {
    font-family: var(--display);
    font-size: 1.6rem;
    letter-spacing: 0.3em;
    color: var(--ivory);
}
.footer-bottom {
    max-width: 1480px;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--ivory-faint);
    letter-spacing: 0.05em;
}

/* ==========================================================================
   CARRITO
   ========================================================================== */

.cart-panel {
    position: fixed;
    top: 0; right: 0;
    width: min(420px, 100vw);
    height: 100%;
    background: var(--moss);
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.7s var(--ease);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--gold-line);
}
.cart-panel.open { transform: translateX(0); }
.cart-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-bottom: 1px solid var(--gold-line);
}
.cart-panel__head h3 {
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}
.cart-close { background: none; border: none; color: var(--ivory); font-size: 1.6rem; cursor: pointer; }
.cart-items { flex: 1; overflow-y: auto; padding: 20px 30px; }
.cart-empty { color: var(--ivory-faint); text-align: center; margin-top: 40px; font-size: 0.95rem; }
.cart-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--gold-line);
}
.cart-line__name { font-family: var(--serif); font-size: 1.1rem; }
.cart-line__price { color: var(--beige); font-size: 0.9rem; }
.cart-line__remove { background: none; border: none; color: var(--ivory-faint); cursor: pointer; font-size: 0.78rem; letter-spacing: 0.1em; }
.cart-line__remove:hover { color: var(--gold); }
.cart-panel__foot { padding: 30px; border-top: 1px solid var(--gold-line); }
.cart-total { display: flex; justify-content: space-between; margin-bottom: 22px; font-family: var(--serif); font-size: 1.2rem; }
.cart-panel__foot .btn { width: 100%; justify-content: center; }

.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 34, 25, 0.6);
    backdrop-filter: blur(4px);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-trigger {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ivory);
    font-size: 1.3rem;
    line-height: 1;
    position: relative;
    z-index: 110;
    transition: transform 0.35s var(--ease);
}
.cart-trigger:hover { transform: translateY(-2px); }
.cart-badge {
    position: absolute;
    top: -8px;
    right: -11px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--forest);
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* WhatsApp flotante --------------------------------------------------------- */

.wa-float {
    position: fixed;
    bottom: 28px; right: 28px;
    z-index: 90;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--forest);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    transition: transform 0.5s var(--ease);
}
.wa-float:hover { transform: translateY(-4px) scale(1.05); }
.wa-float svg { width: 26px; height: 26px; }

/* Notificación -------------------------------------------------------------- */

.toast {
    position: fixed;
    bottom: 40px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    visibility: hidden;
    background: var(--ivory);
    color: var(--forest);
    padding: 16px 32px;
    z-index: 300;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    transition: transform 0.6s var(--ease), opacity 0.6s var(--ease), visibility 0s linear 0.6s;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.6s var(--ease), opacity 0.6s var(--ease), visibility 0s linear 0s;
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition-duration: 0.01ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .nav { display: none; }
    .menu-toggle { display: flex; }
    .split, .split--reverse .split__media { grid-template-columns: 1fr; }
    .split--reverse .split__media { order: 0; }
    .products { grid-template-columns: repeat(2, 1fr); }
    .journal { grid-template-columns: 1fr; }
    .space--tall, .space--wide, .space--half { grid-column: span 6; aspect-ratio: 4/5; grid-row: auto; }
    .space--full { grid-column: span 12; }
}

@media (max-width: 640px) {
    .ritual { grid-template-columns: 1fr; gap: 14px; }
    .products { grid-template-columns: 1fr; }
    .space--tall, .space--wide, .space--half, .space--full { grid-column: span 12; aspect-ratio: 4/5; }
    .hero__actions { flex-direction: column; align-items: center; }
    .hero__actions .btn { width: 100%; max-width: 320px; justify-content: center; }
    .band__content { padding: 50px var(--gutter); }
    .band--right { text-align: left; }
    .band--right .band__media::after {
        background: linear-gradient(90deg, rgba(11,34,25,0.82), rgba(11,34,25,0.3));
    }
    .band--right .band__text { margin-left: 0; }
    .footer-grid { flex-direction: column; }
}

/* ==========================================================================
   PÁGINAS INTERNAS — componentes compartidos
   ========================================================================== */

/* Page hero (cabecera de página interna) */
.page-hero {
    position: relative;
    min-height: clamp(380px, 56vh, 600px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: var(--gutter);
    padding-bottom: clamp(50px, 7vw, 90px);
}
.page-hero__media {
    position: absolute;
    inset: -8% 0;
    background-size: cover;
    background-position: center;
    z-index: -2;
    will-change: transform;
}
.page-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,34,25,0.45) 0%, rgba(11,34,25,0.4) 40%, rgba(11,34,25,0.9) 100%);
}
.page-hero__inner { position: relative; z-index: 2; max-width: 900px; }
.page-hero__title {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(2.8rem, 8vw, 6rem);
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--ivory);
    margin: 20px 0 22px;
}
.page-hero__text {
    max-width: 620px;
    color: var(--ivory-soft);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.85;
}

/* Filtros del catálogo */
.shop-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(11, 34, 25, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--gold-line);
    padding: 22px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ivory-soft);
    background: transparent;
    border: 1px solid var(--gold-line);
    padding: 0.7em 1.3em;
    cursor: pointer;
    transition: color 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.pill:hover { color: var(--ivory); border-color: var(--gold); }
.pill.active { background: var(--gold); color: var(--forest); border-color: var(--gold); }

.shop-tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.shop-search {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--gold-line);
    color: var(--ivory);
    font-family: var(--sans);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    padding: 0.6em 0;
    width: 200px;
    transition: border-color 0.4s var(--ease);
}
.shop-search::placeholder { color: var(--ivory-faint); }
.shop-search:focus { outline: none; border-bottom-color: var(--gold); }
.shop-sort {
    background: transparent;
    border: 1px solid var(--gold-line);
    color: var(--ivory-soft);
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.7em 1em;
    cursor: pointer;
}
.shop-sort option { background: var(--moss); color: var(--ivory); }

.shop-count {
    color: var(--ivory-faint);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0 var(--gutter) 30px;
}
.shop-empty {
    text-align: center;
    color: var(--ivory-faint);
    font-family: var(--serif);
    font-size: 1.4rem;
    padding: 80px var(--gutter);
}

/* Editorial alternating rows (piedras / plantas) */
.feature-rows { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(70px, 9vw, 150px); }
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: center;
}
.feature-row--reverse .feature-row__media { order: 2; }
.feature-row__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.feature-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.feature-row__media:hover img { transform: scale(1.05); }
.feature-row__index { font-family: var(--serif); font-size: 1rem; color: var(--gold); letter-spacing: 0.3em; }
.feature-row__title { font-family: var(--display); font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 500; margin: 14px 0 8px; color: var(--ivory); }
.feature-row__sub { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--beige); margin-bottom: 24px; }
.feature-row__text { color: var(--ivory-soft); font-size: 1.05rem; line-height: 1.9; margin-bottom: 22px; }
.feature-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 28px; }
.feature-meta span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); border-left: 1px solid var(--gold-line); padding-left: 12px; }
.feature-row__price { font-family: var(--serif); font-size: 1.3rem; color: var(--beige); margin-bottom: 22px; }

/* Care / usage tips grid */
.tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 50px);
    max-width: 1300px;
    margin: 0 auto;
}
.tip { border-top: 1px solid var(--gold-line); padding-top: 26px; }
.tip__num { font-family: var(--serif); font-size: 1rem; color: var(--gold); letter-spacing: 0.2em; }
.tip__title { font-family: var(--display); font-size: 1.5rem; font-weight: 500; margin: 12px 0 12px; color: var(--ivory); }
.tip__text { color: var(--ivory-soft); font-size: 0.98rem; line-height: 1.8; }

/* FAQ accordion */
.faq { max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gold-line); }
.faq-q {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: 30px 50px 30px 0;
    position: relative;
    font-family: var(--display);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 500;
    color: var(--ivory);
    transition: color 0.4s var(--ease);
}
.faq-q:hover { color: var(--gold); }
.faq-q::after {
    content: '+';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    color: var(--gold);
    font-family: var(--sans);
    font-weight: 300;
    transition: transform 0.5s var(--ease);
}
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(135deg); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s var(--ease), padding 0.6s var(--ease);
}
.faq-a p { color: var(--ivory-soft); font-size: 1.02rem; line-height: 1.9; padding-bottom: 0; }
.faq-item.open .faq-a { max-height: 320px; padding-bottom: 30px; }

/* Values grid (nosotros) */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gold-line); max-width: 1300px; margin: 0 auto; border: 1px solid var(--gold-line); }
.value { background: var(--forest); padding: clamp(34px, 4vw, 56px); }
.value__index { font-family: var(--serif); color: var(--gold); letter-spacing: 0.2em; font-size: 0.9rem; }
.value__title { font-family: var(--display); font-size: 1.6rem; font-weight: 500; margin: 14px 0 12px; color: var(--ivory); }
.value__text { color: var(--ivory-soft); font-size: 0.98rem; line-height: 1.8; }

/* Contacto */
.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(40px, 6vw, 100px);
    max-width: 1280px;
    margin: 0 auto;
}
.form-field { margin-bottom: 28px; }
.form-field label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--gold-line);
    color: var(--ivory);
    font-family: var(--sans);
    font-size: 1rem;
    padding: 0.7em 0;
    transition: border-color 0.4s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.form-field select option { background: var(--moss); }
.contact-info-block { margin-bottom: 36px; }
.contact-info-block h4 { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.contact-info-block p, .contact-info-block a { color: var(--ivory-soft); font-size: 1.05rem; line-height: 1.7; text-decoration: none; display: block; }
.contact-info-block a:hover { color: var(--ivory); }

@media (max-width: 1024px) {
    .feature-row, .feature-row--reverse .feature-row__media { grid-template-columns: 1fr; }
    .feature-row--reverse .feature-row__media { order: 0; }
    .tips-grid { grid-template-columns: repeat(2, 1fr); }
    .values { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .tips-grid { grid-template-columns: 1fr; }
    .values { grid-template-columns: 1fr; }
    .shop-bar { flex-direction: column; align-items: flex-start; }
    .shop-search { width: 100%; }
}

/* ==========================================================================
   CATÁLOGO PREMIUM v2
   ========================================================================== */

:root {
    --sand:       #143328;
    --sage:       #7E9278;
    --sage-dark:  #F4EFE6;
    --warm-white: #0B2219;
    --warm-gold:  #CBB77C;
    --sage-line:  rgba(244,239,230,0.15);
    --sage-faint: rgba(244,239,230,0.65);
}

/* Wrapper que cambia el fondo a claro */
.catalog-body {
    background: var(--warm-white);
    color: var(--sage-dark);
}

/* ---- Barra de filtros ---- */
.cat-bar {
    position: sticky;
    top: 60px;
    z-index: 40;
    background: var(--warm-white);
    border-bottom: 1px solid var(--sage-line);
    box-shadow: 0 4px 30px rgba(0,0,0,0.2);
}

.cat-bar__row {
    padding: 0 var(--gutter);
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--sage-line);
}
.cat-bar__row::-webkit-scrollbar { display: none; }

.cat-tab {
    font-family: var(--sans);
    font-size: 0.69rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sage-faint);
    background: none;
    border: none;
    cursor: pointer;
    padding: 18px 22px;
    position: relative;
    white-space: nowrap;
    transition: color 0.35s var(--ease);
    flex-shrink: 0;
}
.cat-tab::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--sage-dark);
    transform: scaleX(0);
    transition: transform 0.4s var(--ease);
}
.cat-tab:hover { color: var(--sage-dark); }
.cat-tab.active { color: var(--sage-dark); font-weight: 500; }
.cat-tab.active::after { transform: scaleX(1); }

.cat-bar__sub {
    padding: 10px var(--gutter);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 48px;
    align-items: center;
}

.sub-pill {
    font-family: var(--sans);
    font-size: 0.67rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sage-faint);
    background: none;
    border: 1px solid var(--sage-line);
    padding: 0.48em 1em;
    cursor: pointer;
    border-radius: 100px;
    transition: all 0.3s var(--ease);
    white-space: nowrap;
}
.sub-pill:hover { color: var(--sage-dark); border-color: var(--sage); }
.sub-pill.active { background: var(--sage-dark); color: #fff; border-color: var(--sage-dark); }

.cat-bar__tools {
    padding: 12px var(--gutter);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    border-top: 1px solid var(--sage-line);
}

.cat-search {
    background: none;
    border: none;
    border-bottom: 1px solid var(--sage-line);
    color: var(--sage-dark);
    font-family: var(--sans);
    font-size: 0.85rem;
    padding: 0.45em 0;
    width: 200px;
    transition: border-color 0.4s var(--ease);
}
.cat-search::placeholder { color: var(--sage-faint); }
.cat-search:focus { outline: none; border-bottom-color: var(--sage-dark); }

.cat-sort {
    background: none;
    border: 1px solid var(--sage-line);
    color: var(--sage-faint);
    font-family: var(--sans);
    font-size: 0.69rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.55em 1em;
    cursor: pointer;
    border-radius: 2px;
}
.cat-sort option { background: var(--warm-white); color: var(--sage-dark); }

.cat-count {
    font-size: 0.67rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sage-faint);
    margin-left: auto;
}

/* ---- Grid de productos ---- */
.catalog-section {
    padding: clamp(40px,6vw,80px) var(--gutter);
    min-height: 60vh;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px,2vw,30px);
}

/* ---- Tarjeta premium ---- */
.pcard {
    background: var(--warm-white);
    border: 1px solid var(--sage-line);
    transition: box-shadow 0.55s var(--ease), transform 0.55s var(--ease);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.pcard:hover {
    box-shadow: 0 18px 55px rgba(0,0,0,0.3);
    transform: translateY(-5px);
}

.pcard__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--sand);
}
.pcard__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.3s var(--ease);
    display: block;
}
.pcard:hover .pcard__img img { transform: scale(1.08); }

/* Badges */
.pcard__badges {
    position: absolute;
    top: 14px; left: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
}
.pbadge {
    font-family: var(--sans);
    font-size: 0.6rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    padding: 5px 10px;
    display: inline-block;
    border-radius: 2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pbadge--sale    { background: rgba(110, 75, 45, 0.85); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.pbadge--hot     { background: rgba(47, 59, 50, 0.85); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.pbadge--artisan { background: rgba(203, 183, 124, 0.9); color: var(--sage-dark); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.pbadge--natural { background: rgba(132, 145, 135, 0.85); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.pbadge--wellness{ background: rgba(232,221,208,0.9); color: var(--sage-dark); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.pbadge--gift    { background: rgba(255,255,255,0.9); color: var(--sage-dark); border: 1px solid var(--sage-line); }

/* Wishlist btn */
.pcard__wish {
    position: absolute;
    top: 14px; right: 14px;
    width: 34px; height: 34px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--sage-faint);
    transition: all 0.4s var(--ease);
    box-shadow: 0 2px 10px rgba(0,0,0,0.09);
    opacity: 0;
    transform: scale(0.8);
    z-index: 2;
}
.pcard:hover .pcard__wish,
.pcard__wish.liked { opacity: 1; transform: scale(1); }
.pcard__wish.liked { color: #c97b6e; }

/* Overlay acción rápida */
.pcard__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 20px;
    background: linear-gradient(180deg, transparent 55%, rgba(47,59,50,0.55) 100%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    z-index: 1;
}
.pcard:hover .pcard__overlay { opacity: 1; }

.pcard__wa-quick, .pcard__qv-quick, .pcard__cart-quick {
    width: 100%;
    background: rgba(255,255,255,0.96);
    color: var(--sage-dark);
    border: none;
    font-family: var(--sans);
    font-size: 0.67rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 13px 16px;
    cursor: pointer;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.pcard__wa-quick:hover { background: #25D366; color: #fff; }
.pcard__qv-quick { background: rgba(47, 59, 50, 0.96); color: #fff; }
.pcard__qv-quick:hover { background: var(--warm-gold); color: var(--sage-dark); }
.pcard__cart-quick { background: var(--gold); color: var(--sage-dark); }
.pcard__cart-quick:hover { background: var(--warm-gold); }

/* Cuerpo de la tarjeta */
.pcard__body {
    padding: 20px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pcard__sub {
    font-size: 0.63rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sage);
    display: block;
    margin-bottom: 7px;
}
.pcard__name {
    font-family: var(--serif);
    font-size: 1.22rem;
    font-weight: 500;
    color: var(--sage-dark);
    margin-bottom: 7px;
    line-height: 1.22;
}
.pcard__desc {
    font-size: 0.86rem;
    color: var(--sage-faint);
    line-height: 1.72;
    margin-bottom: 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pcard__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid var(--sage-line);
    flex-wrap: wrap;
    gap: 8px;
}
.pcard__price {
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--sage-dark);
}
.pcard__price-orig {
    font-size: 0.85rem;
    color: var(--sage-faint);
    text-decoration: line-through;
    margin-right: 6px;
}
.pcard__price-sale { color: #7a3e1e; }
.pcard__foot-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pcard__link {
    font-family: var(--sans);
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--sage);
    text-decoration: none;
    position: relative;
    padding-bottom: 3px;
}
.pcard__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--sage);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease);
}
.pcard__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Botón de agregar al carrito, siempre visible (no depende del hover) */
.pcard__add {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--sage-line);
    background: #fff;
    color: var(--sage-dark);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pcard__add:hover { background: var(--sage-dark); color: #fff; border-color: var(--sage-dark); transform: scale(1.08); }

/* Estado vacío */
.catalog-empty {
    grid-column: 1 / -1;
    padding: 100px 0;
    text-align: center;
}
.catalog-empty h3 {
    font-family: var(--serif);
    font-size: 2rem;
    color: var(--sage-faint);
    margin-bottom: 10px;
}
.catalog-empty p { color: var(--sage-faint); font-size: 0.95rem; }

/* ---- Vistos recientemente ---- */
.recently-section {
    background: var(--sand);
    padding: clamp(40px,5vw,70px) var(--gutter);
}
.recently-section h2 {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage-faint);
    margin-bottom: 28px;
}
.recently-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.recently-item {
    display: block;
    text-decoration: none;
}
.recently-item__img {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--warm-white);
    margin-bottom: 10px;
}
.recently-item__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.recently-item:hover .recently-item__img img { transform: scale(1.06); }
.recently-item__name {
    font-family: var(--serif);
    font-size: 0.95rem;
    color: var(--sage-dark);
}
.recently-item__price {
    font-size: 0.8rem;
    color: var(--sage-faint);
}

/* ==========================================================================
   PÁGINA DE PRODUCTO INDIVIDUAL
   ========================================================================== */

.prod-body { background: var(--warm-white); color: var(--sage-dark); }

.prod-breadcrumb {
    padding: 18px var(--gutter);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--sage-faint);
    background: var(--warm-white);
    border-bottom: 1px solid var(--sage-line);
}
.prod-breadcrumb a { color: var(--sage-faint); text-decoration: none; transition: color 0.3s; }
.prod-breadcrumb a:hover { color: var(--sage-dark); }
.prod-breadcrumb span { margin: 0 8px; opacity: 0.4; }

.prod-detail {
    padding: clamp(40px,6vw,80px) var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px,7vw,100px);
    max-width: 1400px;
    margin: 0 auto;
}

/* Galería */
.prod-gallery { position: sticky; top: 90px; height: fit-content; }
.prod-gallery__main {
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--sand);
    margin-bottom: 10px;
    cursor: zoom-in;
}
.prod-gallery__main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.prod-gallery__main:hover img { transform: scale(1.06); }
.prod-gallery__thumbs { display: flex; gap: 8px; }
.prod-gallery__thumb {
    width: 76px; height: 94px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s, outline 0.3s;
    flex-shrink: 0;
}
.prod-gallery__thumb.active { opacity: 1; outline: 2px solid var(--sage-dark); outline-offset: 2px; }
.prod-gallery__thumb:hover { opacity: 0.85; }

/* Info */
.prod-info { padding-top: 6px; }
.prod-info__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.prod-info__name {
    font-family: var(--display);
    font-size: clamp(2rem,4.5vw,3.4rem);
    font-weight: 500;
    line-height: 1.08;
    color: var(--sage-dark);
    margin-bottom: 22px;
}
.prod-info__price {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.prod-info__price-orig {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--sage-faint);
    text-decoration: line-through;
}
.prod-info__price-main {
    font-family: var(--serif);
    font-size: clamp(1.8rem,3vw,2.4rem);
    color: var(--sage-dark);
}
.prod-info__price-sale { color: #7a3e1e; }
.prod-info__desc {
    font-size: 1.05rem;
    line-height: 1.95;
    color: var(--sage-faint);
    margin-bottom: 32px;
}
.prod-info__desc p {
    margin-bottom: 1.3em;
}
.prod-info__desc p:last-child {
    margin-bottom: 0;
}
.prod-info__desc em {
    font-style: italic;
}

/* Botones acción */
.prod-actions { display: flex; gap: 12px; margin-bottom: 36px; flex-wrap: wrap; }
.prod-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 1.15em 2.1em;
    border: none;
    cursor: pointer;
    transition: all 0.4s var(--ease);
    text-decoration: none;
}
.prod-btn--cart { background: var(--sage-dark); color: #fff; }
.prod-btn--cart:hover { background: #2f3b32; }
.prod-btn--wa { background: var(--warm-gold); color: var(--sage-dark); }
.prod-btn--wa:hover { background: #b89e78; }
.prod-btn--wish { background: none; border: 1px solid var(--sage-line); color: var(--sage-faint); padding: 1.15em; }
.prod-btn--wish:hover { border-color: var(--sage-dark); color: var(--sage-dark); }
.prod-btn--wish.liked { color: #c97b6e; border-color: #c97b6e; }

/* Características */
.prod-block {
    border-top: 1px solid var(--sage-line);
    padding-top: 28px;
    margin-bottom: 28px;
}
.prod-block h4 {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 18px;
}
.prod-features__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    list-style: none;
}
.prod-features__item { display: flex; flex-direction: column; }
.prod-features__label {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 3px;
}
.prod-features__val { font-size: 0.95rem; color: var(--sage-dark); }

/* Beneficios */
.prod-benefits__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.prod-benefit {
    background: var(--sand);
    color: var(--sage-dark);
    font-size: 0.76rem;
    letter-spacing: 0.07em;
    padding: 7px 14px;
    border-radius: 100px;
}

/* Bloque energético */
.prod-energy {
    background: var(--sage-dark);
    color: #fff;
    padding: clamp(26px,3vw,42px);
    margin-bottom: 28px;
}
.prod-energy__name {
    font-family: var(--display);
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    margin-bottom: 22px;
}
.prod-energy__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.prod-energy__item { border-left: 2px solid var(--warm-gold); padding-left: 14px; }
.prod-energy__label {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-gold);
    margin-bottom: 4px;
}
.prod-energy__val {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: rgba(244,239,230,0.9);
}

/* FAQ producto */
.prod-faq-item { border-bottom: 1px solid var(--sage-line); }
.prod-faq-q {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--serif);
    font-size: 1.12rem;
    color: var(--sage-dark);
    cursor: pointer;
    padding: 18px 38px 18px 0;
    position: relative;
    transition: color 0.3s var(--ease);
}
.prod-faq-q:hover { color: var(--sage); }
.prod-faq-q::after {
    content: '+';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: var(--sage);
    font-weight: 300;
    transition: transform 0.4s var(--ease);
}
.prod-faq-item.open .prod-faq-q::after { transform: translateY(-50%) rotate(135deg); }
.prod-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--ease), padding 0.5s var(--ease);
    font-size: 0.93rem;
    line-height: 1.85;
    color: var(--sage-faint);
}
.prod-faq-item.open .prod-faq-a { max-height: 200px; padding-bottom: 18px; }

/* Productos relacionados */
.related-section {
    background: var(--warm-white);
    padding: clamp(60px,8vw,100px) var(--gutter);
    border-top: 1px solid var(--sage-line);
}
.related-section__title {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage-faint);
    margin-bottom: 36px;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Responsive catálogo */
@media (max-width: 1280px) {
    .catalog-grid { grid-template-columns: repeat(3, 1fr); }
    .related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
    .prod-detail { grid-template-columns: 1fr; }
    .prod-gallery { position: static; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .recently-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .catalog-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pcard__body { padding: 14px 15px 18px; }
    .pcard__name { font-size: 1.08rem; }
    .cat-tab { padding: 15px 14px; font-size: 0.62rem; }
    .cat-bar__tools { flex-direction: column; align-items: flex-start; }
    .cat-search { width: 100%; }
    .prod-features__list { grid-template-columns: 1fr; }
    .prod-energy__grid { grid-template-columns: 1fr; }
    .recently-grid { grid-column: repeat(2, 1fr); }
    .related-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ---- PREMIUM UI ADDITIONS ---- */

/* Quick View Modal */
.qv-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
}
.qv-modal.open {
    opacity: 1;
    pointer-events: auto;
}
.qv-modal__bg {
    position: absolute;
    inset: 0;
    background: rgba(11, 34, 25, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.qv-modal__content {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    background: var(--warm-white);
    display: flex;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    transform: translateY(30px);
    transition: transform 0.5s var(--ease);
    border-radius: 4px;
    overflow: hidden;
}
.qv-modal.open .qv-modal__content {
    transform: translateY(0);
}
.qv-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--sage-faint);
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease;
}
.qv-modal__close:hover { color: var(--sage-dark); }
.qv-modal__img {
    flex: 1;
    background: var(--sand);
}
.qv-modal__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.qv-modal__info {
    flex: 1;
    padding: 50px 40px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
@media (max-width: 768px) {
    .qv-modal__content { flex-direction: column; overflow-y: auto; }
    .qv-modal__img { height: 40vh; flex: none; }
    .qv-modal__info { padding: 30px 20px; }
}

/* Image Zoom */
.prod-gallery__main-wrap {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}
.prod-gallery__main-wrap img {
    transition: transform 0.3s ease;
    transform-origin: center center;
}
.prod-gallery__main-wrap:hover img.zoomed {
    transform: scale(2.5);
}

/* Sticky Action Bar */
.sticky-action-bar {
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    background: rgba(11, 34, 25, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--sage-line);
    padding: 15px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 900;
    transition: bottom 0.5s var(--ease);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.05);
}
.sticky-action-bar.visible {
    bottom: 0;
}
.sticky-action-bar__info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.sticky-action-bar__img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 2px;
}
.sticky-action-bar__name {
    font-family: var(--serif);
    color: var(--sage-dark);
    font-size: 1.1rem;
    font-weight: 500;
}
.sticky-action-bar__price {
    font-family: var(--sans);
    color: var(--sage);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}
.sticky-action-bar__actions {
    display: flex;
    gap: 15px;
}
@media (max-width: 600px) {
    .sticky-action-bar { padding: 12px 15px; }
    .sticky-action-bar__info { display: none; }
    .sticky-action-bar__actions { width: 100%; justify-content: space-between; }
    .sticky-action-bar__actions .btn { flex: 1; text-align: center; justify-content: center; }
}

/* ==========================================================================
   PRODUCTO PREMIUM — ph- system
   Inspiración: Aesop · Muji · Rituals · Soho Home · Goop
   ========================================================================== */

/* ----- Variables locales ----- */
.prod-body {
    --ph-bg:      var(--forest);
    --ph-alt:     var(--moss);
    --ph-text:    var(--ivory);
    --ph-soft:    var(--ivory-soft);
    --ph-faint:   var(--ivory-faint);
    --ph-gold:    var(--gold);
    --ph-line:    var(--gold-line);
}

/* ----- Skeleton ----- */
.ph-skeleton {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px,5vw,80px);
    padding: clamp(80px,10vh,140px) var(--gutter) clamp(60px,8vh,100px);
    max-width: 1400px;
    margin: 0 auto;
}
.ph-skeleton__gallery { display: flex; flex-direction: column; gap: 10px; }
.ph-skeleton__info { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; }
.ph-skel-block {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
    background-size: 400% 100%;
    animation: skelShimmer 1.6s ease infinite;
    border-radius: 2px;
}
.ph-skel-main { aspect-ratio: 4/5; width: 100%; }
.ph-skel-thumbs { display: flex; gap: 8px; }
.ph-skel-thumbs .ph-skel-block { width: 74px; height: 90px; }
.ph-skel-cat { height: 14px; width: 100px; }
.ph-skel-title { height: 52px; width: 80%; }
.ph-skel-price { height: 36px; width: 140px; }
.ph-skel-btn { height: 52px; width: 100%; }
@keyframes skelShimmer { to { background-position: -400% 0; } }

/* ----- Breadcrumb ----- */
.ph-breadcrumb {
    padding: 16px var(--gutter);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ivory-faint);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--gold-line);
}
.ph-breadcrumb a { color: var(--ivory-faint); text-decoration: none; transition: color .3s; }
.ph-breadcrumb a:hover { color: var(--ivory); }
.ph-breadcrumb svg { opacity: .4; flex-shrink: 0; }
.ph-breadcrumb span { color: var(--ivory-soft); }

/* ----- Badges ----- */
.ph-info__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.prod-body .pbadge {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 1px solid;
}
.prod-body .pbadge--artesanal,
.prod-body .pbadge--artisan   { border-color: var(--gold-line); color: var(--gold); }
.prod-body .pbadge--natural   { border-color: rgba(126,146,120,.4); color: #7E9278; }
.prod-body .pbadge--especial  { background: var(--gold); color: var(--forest); border-color: var(--gold); }
.prod-body .pbadge--importado { border-color: var(--ivory-faint); color: var(--ivory-soft); }
.prod-body .pbadge--popular   { background: var(--moss); border-color: var(--ivory-faint); color: var(--ivory); }
.prod-body .pbadge--sale      { background: rgba(110, 75, 45, 0.9); color: #fff; border-color: rgba(255,255,255,0.15); }
.prod-body .pbadge--hot       { background: rgba(47, 59, 50, 0.9); color: #fff; border-color: rgba(255,255,255,0.15); }
.prod-body .pbadge--wellness  { background: rgba(232,221,208,0.95); color: var(--sage-dark); border-color: transparent; }
.prod-body .pbadge--gift      { background: rgba(255,255,255,0.95); color: var(--sage-dark); border-color: transparent; }

/* ----- HERO 50/50 ----- */
.ph-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px,5vw,80px);
    padding: clamp(60px,8vh,100px) var(--gutter) clamp(80px,10vh,140px);
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}

/* GALERÍA */
.ph-gallery { position: sticky; top: 90px; height: fit-content; }
.ph-gallery__zoom-wrap {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    cursor: crosshair;
    background: var(--moss);
}
.ph-gallery__zoom-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .06s linear;
    will-change: transform;
    transform-origin: 0 0;
    pointer-events: none;
    user-select: none;
}
.ph-gallery__lens {
    position: absolute;
    width: 120px; height: 120px;
    border: 1px solid rgba(203,183,124,.6);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    background: rgba(203,183,124,.05);
    backdrop-filter: invert(10%);
}
.ph-gallery__zoom-wrap:hover .ph-gallery__lens { opacity: 1; }
.ph-gallery__fullscreen {
    position: absolute;
    top: 14px; right: 14px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(11,34,25,.7);
    backdrop-filter: blur(8px);
    border: 1px solid var(--gold-line);
    color: var(--ivory);
    cursor: pointer;
    transition: background .3s;
}
.ph-gallery__fullscreen:hover { background: var(--gold); color: var(--forest); }
.ph-gallery__fullscreen svg { width: 16px; height: 16px; }
.ph-gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.ph-gallery__thumb {
    width: 74px; height: 90px;
    object-fit: cover;
    cursor: pointer;
    opacity: .55;
    transition: opacity .3s;
    flex-shrink: 0;
}
.ph-gallery__thumb.active { opacity: 1; outline: 1px solid var(--gold); outline-offset: 2px; }
.ph-gallery__thumb:hover { opacity: .85; }

/* INFO */
.ph-info { padding-top: 4px; }
.ph-info__cat { margin-bottom: 14px; }
.ph-info__name {
    font-family: var(--display);
    font-size: clamp(2rem,3.8vw,3.2rem);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--ivory);
    margin-bottom: 20px;
}

/* Social proof */
.ph-social-proof {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.ph-viewing, .ph-recent {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--ivory-faint);
}
.ph-viewing svg, .ph-recent svg { width: 13px; height: 13px; flex-shrink: 0; }
.ph-viewing { color: var(--gold); }

/* Precio */
.ph-info__price {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.ph-price-orig {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--ivory-faint);
    text-decoration: line-through;
}
.ph-price-main {
    font-family: var(--serif);
    font-size: clamp(1.8rem,2.8vw,2.6rem);
    color: var(--ivory);
    line-height: 1;
}
.ph-price-sale { color: #c97b6e; }

/* Stock */
.ph-stock { margin-bottom: 24px; }
.ph-stock__bar {
    height: 2px;
    background: rgba(255,255,255,.1);
    border-radius: 2px;
    margin-bottom: 7px;
    overflow: hidden;
}
.ph-stock__fill {
    height: 100%;
    background: var(--gold);
    border-radius: 2px;
    transition: width 1s var(--ease);
}
.ph-stock__label {
    font-size: 0.66rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ivory-soft);
}

/* Trust */
.ph-trust {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 28px;
    padding: 20px 0;
    border-top: 1px solid var(--gold-line);
    border-bottom: 1px solid var(--gold-line);
}
.ph-trust li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--ivory-soft);
}
.ph-trust svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--gold); }

/* Botones acción */
.ph-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.2em 2em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .2s;
    width: 100%;
    white-space: nowrap;
}
.ph-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.ph-btn--cart { background: var(--ivory); color: var(--forest); border-color: var(--ivory); }
.ph-btn--cart:hover { background: var(--gold); border-color: var(--gold); color: var(--forest); }
.ph-btn--buy { background: transparent; color: var(--ivory); border: 1px solid var(--ivory-faint); }
.ph-btn--buy:hover { background: var(--ivory); color: var(--forest); border-color: var(--ivory); }
.ph-btn--wa { background: transparent; border: 1px solid rgba(126,146,120,.5); color: #7E9278; }
.ph-btn--wa:hover { background: #7E9278; color: #fff; border-color: #7E9278; }
.ph-btn--sm { padding: .8em 1.5em; font-size: 0.7rem; width: auto; }
.ph-btn--lg { font-size: 0.82rem; padding: 1.35em 3em; width: auto; }
.ph-btn:active { transform: scale(.98); }

/* Secundarias */
.ph-secondary-actions {
    display: flex;
    gap: 14px;
    border-top: 1px solid var(--gold-line);
    padding-top: 18px;
}
.ph-icon-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ivory-faint);
    background: none;
    border: none;
    cursor: pointer;
    transition: color .3s;
    padding: 4px 0;
}
.ph-icon-btn svg { width: 15px; height: 15px; }
.ph-icon-btn:hover { color: var(--ivory); }
.ph-icon-btn.active { color: var(--gold); }
.ph-icon-btn.active svg { fill: var(--gold); }

/* ----- STICKY BAR ----- */
.ph-sticky {
    position: fixed;
    top: -80px;
    left: 0; right: 0;
    z-index: 200;
    background: rgba(11,34,25,.92);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--gold-line);
    transition: top .45s var(--ease);
    box-shadow: 0 4px 30px rgba(0,0,0,.3);
}
.ph-sticky.visible { top: 0; }
.ph-sticky__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px var(--gutter);
    max-width: 1400px;
    margin: 0 auto;
}
.ph-sticky__thumb { width: 44px; height: 54px; object-fit: cover; flex-shrink: 0; }
.ph-sticky__name { font-family: var(--serif); font-size: 1.1rem; color: var(--ivory); }
.ph-sticky__price { font-size: 0.78rem; color: var(--gold); letter-spacing: .06em; margin-top: 2px; }
.ph-sticky__actions { margin-left: auto; display: flex; gap: 10px; }

/* ----- STORYTELLING ----- */
.ph-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
    background: var(--moss);
}
.ph-story__img-col { overflow: hidden; }
.ph-story__img-wrap { height: 100%; min-height: 540px; overflow: hidden; }
.ph-story__img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 8s linear;
}
.ph-story:hover .ph-story__img-wrap img { transform: scale(1.04); }
.ph-story__text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(60px,8vw,120px) clamp(50px,6vw,100px);
}
.ph-story__text-col .eyebrow { margin-bottom: 28px; }
.ph-story__body { font-family: var(--serif); font-size: clamp(1.05rem,1.4vw,1.25rem); line-height: 2; color: var(--ivory-soft); }
.ph-story__body p { margin-bottom: 1.5em; }
.ph-story__body p:last-child { margin-bottom: 0; }

/* ----- SECTION HEADER ----- */
.ph-sec-head { margin-bottom: clamp(40px,5vw,70px); }
.ph-sec-head--center { text-align: center; }
.ph-sec-head .eyebrow { margin-bottom: 14px; }
.ph-sec-head .display { font-size: clamp(2rem,3.5vw,3rem); color: var(--ivory); }
.ph-gold-rule {
    width: 60px; height: 1px;
    background: var(--gold);
    margin: 24px auto 0;
}

/* ----- BENEFICIOS ----- */
.ph-benefits-sec {
    padding: clamp(80px,10vw,140px) var(--gutter);
    background: var(--forest);
}
.ph-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2px;
    border: 1px solid var(--gold-line);
}
.ph-benefit-card {
    padding: clamp(30px,4vw,50px) 30px;
    border-right: 1px solid var(--gold-line);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background .4s;
}
.ph-benefit-card:last-child { border-right: none; }
.ph-benefit-card:hover { background: rgba(203,183,124,.05); }
.ph-benefit-icon {
    width: 40px; height: 40px;
    border: 1px solid var(--gold-line);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ph-benefit-icon svg { width: 20px; height: 20px; color: var(--gold); }
.ph-benefit-card__text { font-size: 0.9rem; color: var(--ivory-soft); letter-spacing: .04em; line-height: 1.6; }

/* ----- ENERGÍA STRIP ----- */
.ph-energy-strip {
    background: var(--gold);
    padding: clamp(30px,4vw,50px) var(--gutter);
}
.ph-energy-strip__inner { max-width: 1000px; margin: 0 auto; }
.ph-energy-strip .eyebrow { color: var(--forest); margin-bottom: 20px; display: block; }
.ph-energy-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap: 0;
}
.ph-energy-item { border-left: 1px solid rgba(11,34,25,.2); padding: 0 28px 0 28px; }
.ph-energy-item:first-child { border-left: none; padding-left: 0; }
.ph-energy-label { font-size: 0.6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(11,34,25,.6); margin-bottom: 4px; }
.ph-energy-val { font-family: var(--serif); font-size: 1.1rem; color: var(--forest); }

/* ----- FICHA TÉCNICA ----- */
.ph-specs-sec {
    padding: clamp(80px,10vw,140px) var(--gutter);
    background: var(--moss);
}
.ph-specs-sec__inner { max-width: 900px; }
.ph-specs-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--gold-line); }
.ph-spec-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--gold-line);
    align-items: baseline;
}
.ph-spec-label {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ivory-faint);
}
.ph-spec-val { font-size: 0.95rem; color: var(--ivory); font-family: var(--serif); }

/* ----- ESPACIOS ----- */
.ph-spaces-sec {
    padding: clamp(80px,10vw,140px) var(--gutter);
    background: var(--forest);
}
.ph-spaces-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 240px);
    gap: 3px;
}
.ph-space-card {
    position: relative;
    overflow: hidden;
    background: var(--moss);
    background-size: cover;
    background-position: center;
    cursor: default;
}
.ph-space-card:first-child { grid-row: span 2; }
.ph-space-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11,34,25,.85) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    transition: background .4s;
}
.ph-space-card:hover .ph-space-card__overlay { background: linear-gradient(to top, rgba(11,34,25,.9) 0%, rgba(11,34,25,.2) 100%); }
.ph-space-card__overlay span {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ivory);
    transition: transform .4s var(--ease);
}
.ph-space-card:hover .ph-space-card__overlay span { transform: translateY(-4px); }
.ph-space-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform .8s var(--ease);
    z-index: -1;
}
.ph-space-card { background-attachment: local; }
.ph-space-card:hover { background-size: 108%; }

/* ----- RITUAL ----- */
.ph-ritual-sec {
    padding: clamp(80px,10vw,140px) var(--gutter);
    background: var(--moss);
}
.ph-ritual-sec__inner { max-width: 760px; }
.ph-ritual-steps { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
.ph-ritual-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--gold-line);
    align-items: start;
}
.ph-ritual-step:first-child { border-top: 1px solid var(--gold-line); }
.ph-ritual-num {
    font-family: var(--serif);
    font-size: 2.6rem;
    color: var(--gold-line);
    line-height: 1;
    padding-top: 4px;
}
.ph-ritual-text h4 {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}
.ph-ritual-text p { font-size: 0.95rem; color: var(--ivory-soft); line-height: 1.7; }

/* ----- GALERÍA MASONRY ----- */
.ph-masonry-sec { background: var(--forest); overflow: hidden; }
.ph-masonry {
    columns: 4;
    column-gap: 3px;
    line-height: 0;
}
.ph-masonry-item {
    break-inside: avoid;
    margin-bottom: 3px;
    overflow: hidden;
    display: block;
    cursor: pointer;
}
.ph-masonry-item img {
    width: 100%;
    display: block;
    line-height: 0;
    transition: transform .6s var(--ease), filter .6s;
    filter: brightness(.9);
}
.ph-masonry-item:hover img { transform: scale(1.04); filter: brightness(1.05); }

/* ----- TESTIMONIOS ----- */
.ph-testimonials {
    padding: clamp(80px,10vw,140px) var(--gutter);
    background: var(--moss);
}
.ph-testimonials__wrap {
    position: relative;
    overflow: hidden;
    max-width: 760px;
    margin: 0 auto;
}
.ph-testimonials__track {
    display: flex;
    transition: transform .6s var(--ease);
}
.ph-testimonial {
    min-width: 100%;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}
.ph-testimonial__stars { color: var(--gold); font-size: 1rem; letter-spacing: 4px; }
.ph-testimonial__text {
    font-family: var(--serif);
    font-size: clamp(1.05rem,1.8vw,1.3rem);
    line-height: 1.9;
    color: var(--ivory-soft);
    font-style: italic;
}
.ph-testimonial__author { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ph-testimonial__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--forest);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif);
    font-size: 1rem;
    flex-shrink: 0;
}
.ph-testimonial__author strong { display: block; font-size: 0.82rem; letter-spacing: .1em; color: var(--ivory); }
.ph-testimonial__author span { font-size: 0.72rem; color: var(--ivory-faint); letter-spacing: .08em; }
.ph-testimonials__dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.ph-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ivory-faint);
    border: none;
    cursor: pointer;
    transition: background .3s, transform .3s;
}
.ph-dot.active { background: var(--gold); transform: scale(1.3); }
.ph-testimonials__arrow {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    background: none;
    border: 1px solid var(--gold-line);
    color: var(--ivory-soft);
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    transition: border-color .3s, color .3s;
}
.ph-testimonials__arrow:hover { border-color: var(--gold); color: var(--gold); }
.ph-testimonials__arrow--prev { left: 0; }
.ph-testimonials__arrow--next { right: 0; }

/* ----- RELACIONADOS ----- */
.ph-related-sec {
    padding: clamp(80px,10vw,140px) var(--gutter);
    background: var(--forest);
}
.ph-related-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.ph-related-scroll::-webkit-scrollbar { display: none; }
.ph-rel-card {
    flex: 0 0 calc(25% - 15px);
    min-width: 220px;
    scroll-snap-align: start;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: opacity .3s;
}
.ph-rel-card:hover { opacity: .85; }
.ph-rel-card__img {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--moss);
}
.ph-rel-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ph-rel-card:hover .ph-rel-card__img img { transform: scale(1.05); }
.ph-rel-card__sub { font-size: 0.62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.ph-rel-card__name { font-family: var(--serif); font-size: 1.05rem; color: var(--ivory); line-height: 1.3; }
.ph-rel-card__price { font-size: 0.82rem; color: var(--ivory-soft); }

/* ----- EDUCATIVO ----- */
.ph-edu-sec {
    padding: clamp(80px,10vw,140px) var(--gutter);
    background: var(--moss);
}
.ph-edu-sec__inner { max-width: 860px; }
.ph-edu-content { margin-top: 10px; display: flex; flex-direction: column; gap: 28px; }
.ph-edu-block h4 {
    font-size: 0.65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}
.ph-edu-block p { font-size: 0.95rem; color: var(--ivory-soft); line-height: 1.85; }

/* ----- FAQ ----- */
.ph-faq-sec {
    padding: clamp(80px,10vw,140px) var(--gutter);
    background: var(--forest);
}
.ph-faq-sec__inner { max-width: 800px; }
.ph-faq-item { border-bottom: 1px solid var(--gold-line); }
.ph-faq-q {
    width: 100%;
    background: none;
    border: none;
    color: var(--ivory);
    text-align: left;
    padding: 20px 40px 20px 0;
    font-size: 0.95rem;
    letter-spacing: .04em;
    cursor: pointer;
    position: relative;
    transition: color .3s;
    font-family: var(--sans);
    line-height: 1.5;
}
.ph-faq-q:hover { color: var(--gold); }
.ph-faq-q::after {
    content: '+';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--gold);
    font-weight: 300;
    transition: transform .4s var(--ease);
}
.ph-faq-item.open .ph-faq-q::after { transform: translateY(-50%) rotate(135deg); }
.ph-faq-a {
    max-height: 0;
    overflow: hidden;
    font-size: 0.9rem;
    color: var(--ivory-soft);
    line-height: 1.8;
    transition: max-height .5s var(--ease), padding .4s;
}
.ph-faq-item.open .ph-faq-a { max-height: 300px; padding-bottom: 20px; }

/* ----- CTA FINAL ----- */
.ph-cta-final {
    position: relative;
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}
.ph-cta-final__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: transform 12s linear;
    filter: brightness(.35) saturate(.7);
}
.ph-cta-final:hover .ph-cta-final__bg { transform: scale(1); }
.ph-cta-final__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11,34,25,.6) 0%, rgba(11,34,25,.3) 100%);
}
.ph-cta-final__inner {
    position: relative;
    z-index: 2;
    padding: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.ph-cta-final__title { font-size: clamp(2rem,4vw,3.4rem); color: var(--ivory); max-width: 760px; }
.ph-cta-final__text { font-size: 1rem; color: var(--ivory-soft); max-width: 520px; line-height: 1.8; }

/* ----- LIGHTBOX ----- */
.ph-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(5,15,10,.97);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility .4s;
}
.ph-lightbox.open { opacity: 1; visibility: visible; }
.ph-lightbox__stage {
    max-width: min(90vw, 900px);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ph-lightbox__stage img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    transition: opacity .3s;
}
.ph-lightbox__close {
    position: absolute;
    top: 20px; right: 24px;
    background: none;
    border: 1px solid var(--gold-line);
    color: var(--ivory);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .3s;
}
.ph-lightbox__close:hover { border-color: var(--gold); color: var(--gold); }
.ph-lightbox__close svg { width: 18px; height: 18px; }
.ph-lightbox__nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: none;
    border: 1px solid var(--gold-line);
    color: var(--ivory);
    width: 52px; height: 52px;
    font-size: 1.6rem;
    cursor: pointer;
    transition: border-color .3s, color .3s;
    display: flex; align-items: center; justify-content: center;
}
.ph-lightbox__nav:hover { border-color: var(--gold); color: var(--gold); }
.ph-lightbox__prev { left: 20px; }
.ph-lightbox__next { right: 20px; }
.ph-lightbox__counter {
    position: absolute;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    font-size: 0.68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ivory-faint);
}

/* ----- SHARE PANEL ----- */
.ph-share-panel {
    position: fixed;
    inset: 0;
    background: rgba(5,15,10,.7);
    backdrop-filter: blur(8px);
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s;
}
.ph-share-panel.open { opacity: 1; visibility: visible; }
.ph-share-panel__box {
    background: var(--moss);
    border: 1px solid var(--gold-line);
    padding: 40px;
    max-width: 360px;
    width: 90%;
    position: relative;
}
.ph-share-panel__title {
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--ivory);
    margin-bottom: 24px;
}
.ph-share-panel__links { display: flex; flex-direction: column; gap: 12px; }
.ph-share-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--gold-line);
    color: var(--ivory-soft);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: border-color .3s, color .3s;
}
.ph-share-link:hover { border-color: var(--gold); color: var(--ivory); }
.ph-share-panel__close {
    position: absolute;
    top: 14px; right: 14px;
    background: none;
    border: none;
    color: var(--ivory-faint);
    cursor: pointer;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
}
.ph-share-panel__close svg { width: 16px; height: 16px; }

/* ----- SCROLL REVEAL ph-specific ----- */
.ph-story, .ph-benefits-sec, .ph-specs-sec, .ph-spaces-sec,
.ph-ritual-sec, .ph-testimonials, .ph-related-sec, .ph-edu-sec, .ph-faq-sec {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.ph-story.in, .ph-benefits-sec.in, .ph-specs-sec.in, .ph-spaces-sec.in,
.ph-ritual-sec.in, .ph-testimonials.in, .ph-related-sec.in, .ph-edu-sec.in, .ph-faq-sec.in {
    opacity: 1;
    transform: none;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 1100px) {
    .ph-masonry { columns: 3; }
    .ph-rel-card { flex: 0 0 calc(33% - 14px); }
}

@media (max-width: 900px) {
    .ph-hero { grid-template-columns: 1fr; gap: 32px; }
    .ph-gallery { position: static; }
    .ph-story { grid-template-columns: 1fr; }
    .ph-story__img-wrap { min-height: 320px; max-height: 420px; }
    .ph-spaces-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
    .ph-space-card:first-child { grid-row: auto; }
    .ph-specs-list { grid-template-columns: 1fr; }
    .ph-masonry { columns: 2; }
    .ph-rel-card { flex: 0 0 calc(50% - 10px); }
    .ph-testimonial { padding: 0 20px; }
    .ph-testimonials__arrow { display: none; }
}

@media (max-width: 600px) {
    .ph-skeleton { grid-template-columns: 1fr; }
    .ph-spaces-grid { grid-template-columns: 1fr; }
    .ph-benefits-grid { grid-template-columns: 1fr 1fr; }
    .ph-benefit-card { border-right: none; border-bottom: 1px solid var(--gold-line); }
    .ph-masonry { columns: 2; }
    .ph-rel-card { flex: 0 0 calc(70% - 10px); }
    .ph-actions { gap: 8px; }
    .ph-spec-item { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
    .ph-sticky__name { display: none; }
    .ph-sticky__price { display: none; }
    .ph-sticky__thumb { display: none; }
    .ph-sticky__actions { width: 100%; }
    .ph-sticky__actions .ph-btn { flex: 1; }
}