/*=============================================
Divino Punto — Rediseño Home
Paleta y tipografía tomadas del mockup (Claude Design).
Mobile-first: el "card" de 430px queda centrado y hace
letterbox en pantallas anchas hasta que se construya la
versión desktop.
=============================================*/

:root{
    --dp-cream: #efe8dc;
    --dp-cream-2: #f6f1e8;
    --dp-bg-outer: #d9d2c4;
    --dp-ink: #2b2521;
    --dp-gold: #a98a5c;
    --dp-gold-dark: #8f7043;
    --dp-border: #ddd0b8;
    --dp-muted: #8a7f71;
    --dp-taupe: #d9cfc0;
    --dp-taupe-2: #b7ac9a;
    --dp-footer-border: #40382f;
    --dp-footer-muted: #7a7060;
}

body.dp-home{
    margin:0;
    background:var(--dp-bg-outer);
    font-family:'Jost',sans-serif;
    color:var(--dp-ink);
}

.dp-home *{ box-sizing:border-box; }
/* Ojo: sin color aquí a propósito — un selector ".dp-home a" tiene más
   especificidad CSS que clases sueltas como ".dp-btn-pill", así que un
   color puesto aquí le "gana" al color real del botón (pasó exactamente
   eso: texto dorado sobre fondo dorado, invisible). Cada componente
   define su propio color de link explícitamente. */
.dp-home a{ text-decoration:none; }
.dp-home ::-webkit-scrollbar{ display:none; }
.dp-hscroll{ scrollbar-width:none; }

.dp-shell{
    width:430px;
    max-width:100%;
    margin:0 auto;
    background:var(--dp-cream);
    min-height:100vh;
    overflow:hidden;
    position:relative;
}

.dp-serif{ font-family:'Cormorant Garamond',serif; }

/* HEADER */
.dp-header{
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:20px 20px 14px;
}
.dp-header .dp-star{ width:28px; height:28px; flex:none; }
.dp-header .dp-wordmark{ font-size:19px; font-weight:400; letter-spacing:0.20em; padding-left:0.20em; }

/* HERO — pantalla completa (menos el header) */
.dp-hero{
    position:relative; width:100%; margin-bottom:8px; background:var(--dp-taupe); overflow:hidden;
    height:calc(100vh - 72px);
    height:calc(100svh - 72px);
}

/* Slider de fondo propio (crossfade con CSS) — ocupa todo el hero, detrás
   del overlay/texto. Sin librería externa ni listeners de resize. */
.dp-hero-slider{ position:absolute; inset:0; z-index:1; }
.dp-hero-slide{
    position:absolute; inset:0; width:100%; height:100%;
    background-color:var(--dp-taupe); background-size:cover; background-position:center;
    opacity:0; transition:opacity 900ms ease;
}
.dp-hero-slide--active{ opacity:1; }

.dp-hero__overlay{
    position:absolute; inset:0; pointer-events:none; z-index:2;
    background:linear-gradient(0deg, rgba(24,18,12,0.82) 0%, rgba(24,18,12,0.35) 45%, rgba(24,18,12,0.05) 70%);
}
.dp-hero__content{ position:absolute; left:22px; right:22px; bottom:28px; z-index:3; }
.dp-hero__eyebrow{ font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:var(--dp-taupe); margin-bottom:10px; }
.dp-hero__title{ font-weight:500; font-size:38px; line-height:1.08; color:var(--dp-cream-2); margin-bottom:14px; }
.dp-hero__desc{ font-size:13.5px; color:var(--dp-taupe); line-height:1.5; max-width:320px; margin-bottom:20px; }
.dp-btn-pill{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--dp-gold); color:var(--dp-cream-2);
    padding:14px 26px; border-radius:100px; font-size:13px; letter-spacing:0.08em;
    border:none; cursor:pointer;
}
.dp-btn-pill:hover{ background:var(--dp-gold-dark); color:var(--dp-cream-2); }

/* SECTION HEADING */
.dp-section-head{ padding:26px 20px 6px; display:flex; align-items:baseline; justify-content:space-between; }
.dp-section-head h2{ margin:0; font-style:italic; font-size:22px; font-weight:500; }
.dp-section-head .dp-see-all{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dp-gold); cursor:pointer; }
.dp-section-sub{ padding:0 20px; font-size:12px; color:var(--dp-muted); margin:-4px 0 18px; }

/* CATEGORIES */
.dp-cat-scroll{
    display:flex; gap:14px; padding:0 20px 8px; overflow-x:auto;
    -webkit-overflow-scrolling:touch; cursor:grab; user-select:none;
}
.dp-cat-scroll.dp-dragging{ cursor:grabbing; }
.dp-cat-item{ flex:none; width:104px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.dp-cat-circle{
    width:88px; height:88px; border-radius:50%; overflow:hidden;
    border:1px solid var(--dp-border); background:#e2d9c9;
    display:flex; align-items:center; justify-content:center;
}
.dp-cat-circle i{ font-size:26px; color:var(--dp-gold); }
.dp-cat-circle img{ width:100%; height:100%; object-fit:cover; }
.dp-cat-name{ font-size:12px; text-align:center; letter-spacing:0.02em; color:var(--dp-ink); }

/* PARALLAX CAROUSEL (piezas destacadas / artesanos destacados) */
.dp-carousel-wrap{ overflow:visible; padding:6px 0 10px 20px; touch-action:pan-y; }
.dp-carousel-track{ display:flex; will-change:transform; }

/* Product cards */
.dp-pcard{ flex:none; width:190px; margin-right:16px; }
.dp-pcard__media{ position:relative; width:190px; height:260px; border-radius:8px; overflow:hidden; background:#e2d9c9; }
.dp-pcard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dp-pcard__like{
    position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
    background:rgba(43,37,33,0.55); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:transform 160ms cubic-bezier(0.34,1.56,0.64,1);
}
.dp-pcard__body{ padding-top:12px; display:flex; flex-direction:column; gap:5px; }
.dp-pcard__artisan{ font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dp-gold); }
.dp-pcard__name{ font-size:13.5px; line-height:1.3; color:var(--dp-ink); }
.dp-pcard__price{ font-size:14px; font-weight:500; margin-bottom:4px; color:var(--dp-ink); }
.dp-pcard__price del{ font-weight:400; color:var(--dp-muted); margin-left:6px; font-size:12px; }
.dp-pcard__actions{ display:flex; gap:8px; }
.dp-pcard__actions > *{ flex:1; text-align:center; font-size:11px; letter-spacing:0.03em; border-radius:100px; padding:9px 0; cursor:pointer; }
.dp-btn-outline{ color:var(--dp-ink); border:1px solid var(--dp-border); background:transparent; }
.dp-btn-dark{ color:var(--dp-cream-2); background:var(--dp-ink); border:none; }

/* Artisan cards (same carousel mechanic, different content) */
.dp-acard{ flex:none; width:250px; margin-right:16px; }
.dp-acard__media{ position:relative; width:250px; height:320px; border-radius:8px; overflow:hidden; background:var(--dp-ink); }
.dp-acard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dp-acard__scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(24,18,12,0.88) 0%, rgba(24,18,12,0.15) 60%); }
.dp-acard__content{ position:absolute; left:18px; right:18px; bottom:18px; color:var(--dp-cream-2); }
.dp-acard__eyebrow{ font-size:10px; letter-spacing:0.26em; text-transform:uppercase; color:#c7a877; margin-bottom:8px; }
.dp-acard__quote{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; line-height:1.25; margin-bottom:8px; }
.dp-acard__name{ font-size:11.5px; color:var(--dp-taupe-2); }

/* ARTISAN SPOTLIGHT single (fallback si solo hay 1) */
.dp-spotlight{ margin:34px 20px 0; border-radius:6px; overflow:hidden; background:var(--dp-ink); }
.dp-spotlight__media{ width:100%; aspect-ratio:16/11; background:var(--dp-taupe) center/cover no-repeat; }
.dp-spotlight__body{ padding:24px 22px 28px; color:var(--dp-cream-2); }
.dp-spotlight__eyebrow{ font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:#c7a877; margin-bottom:10px; }
.dp-spotlight__quote{ font-family:'Cormorant Garamond',serif; font-size:24px; font-style:italic; margin-bottom:10px; }
.dp-spotlight__name{ font-size:12.5px; color:var(--dp-taupe-2); }

/* NEWSLETTER */
.dp-newsletter{
    margin:34px 20px 0; padding:30px 22px; border:1px solid var(--dp-border); border-radius:6px;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
}
.dp-newsletter .dp-star{ width:36px; height:36px; }
.dp-newsletter h3{ margin:0; font-style:italic; font-size:20px; font-weight:500; }
.dp-newsletter p{ margin:0; font-size:12px; color:var(--dp-muted); line-height:1.5; }
.dp-newsletter form{ display:flex; gap:8px; width:100%; margin-top:6px; }
.dp-newsletter input[type=email]{
    flex:1; background:var(--dp-cream-2); border:1px solid var(--dp-border); border-radius:100px;
    padding:12px 16px; font-size:12.5px; color:var(--dp-ink); font-family:inherit;
}
.dp-newsletter input[type=email]::placeholder{ color:#a89d8d; }
.dp-newsletter button{
    flex:none; width:44px; height:44px; border-radius:50%; background:var(--dp-gold); border:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* FOOTER */
.dp-footer{ margin-top:40px; background:var(--dp-ink); color:var(--dp-cream); padding:34px 20px 26px; display:flex; flex-direction:column; gap:22px; }
.dp-footer__brand{ display:flex; align-items:center; gap:10px; }
.dp-footer__brand .dp-star{ width:26px; height:26px; }
.dp-footer__brand span{ font-size:15px; letter-spacing:0.20em; }
.dp-footer__desc{ font-size:12px; color:var(--dp-taupe-2); line-height:1.6; }
.dp-footer__links{ display:flex; flex-direction:column; gap:14px; }
.dp-footer__links a{
    font-size:12.5px; color:var(--dp-taupe); display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--dp-footer-border); padding-bottom:14px;
}
.dp-footer__copy{ font-size:10px; letter-spacing:0.1em; color:var(--dp-footer-muted); margin-top:8px; }

/* BOTTOM NAV */
.dp-bottom-space{ height:110px; }
.dp-bottom-nav{
    position:fixed; left:50%; bottom:22px;
    background:rgba(20,16,12,0.97); border-radius:100px;
    padding:12px 20px; display:flex; align-items:center; gap:22px;
    box-shadow:0 14px 30px -10px rgba(0,0,0,0.45); z-index:50;
    transform:translateX(-50%) translateY(140px);
    opacity:0; pointer-events:none;
    transition:transform 320ms ease, opacity 320ms ease;
}
.dp-bottom-nav.dp-nav-visible{
    transform:translateX(-50%) translateY(0);
    opacity:1; pointer-events:auto;
}
.dp-bottom-nav i{ font-size:19px; color:#efe8dc; line-height:1; }

/* BARRA DE BÚSQUEDA — fija, justo debajo del header, se oculta al hacer scroll */
.dp-search-overlay{
    position:fixed; left:0; right:0; top:0; z-index:60;
    background:var(--dp-cream); padding:16px 20px;
    box-shadow:0 8px 20px -8px rgba(0,0,0,0.25);
    transform:translateY(-100%);
    transition:transform 220ms ease;
}
.dp-search-overlay.dp-search-open{ transform:translateY(0); }
.dp-search-overlay .dp-search-row{ display:flex; gap:8px; max-width:430px; margin:0 auto; }
.dp-search-overlay input.inputSearch{
    flex:1; border:1px solid var(--dp-border); border-radius:100px;
    padding:10px 16px; font-family:inherit; font-size:13px; background:var(--dp-cream-2); color:var(--dp-ink);
}
.dp-search-overlay .btnSearch{
    flex:none; background:var(--dp-gold); color:var(--dp-cream-2); border:none;
    padding:10px 20px; border-radius:100px; font-size:13px; letter-spacing:0.05em; cursor:pointer;
}
.dp-bottom-nav a{ position:relative; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.dp-bottom-nav a.dp-active{ background:rgba(239,232,220,0.16); }
.dp-bottom-nav svg{ width:19px; height:19px; }
.dp-bottom-nav .dp-dot{ position:absolute; top:2px; right:4px; width:7px; height:7px; border-radius:50%; background:var(--dp-gold); }

@media (min-width:431px){
    .dp-shell{ box-shadow:0 0 60px rgba(0,0,0,0.12); }
}