:root{
    --ink:#12151a;
    --ink-soft:#1b202a;
    --card:#1a1e27;
    --canvas:#f5f1e6;
    --parchment:#eae3d2;
    --brass:#ad8b4c;
    --brass-light:#cdb47f;
    --rust:#9a5142;
    --muted:#a49c8a;
    --line: rgba(173,139,76,.22);

    --font-display:'Fraunces', serif;
    --font-body:'Public Sans', sans-serif;
    --font-mono:'Space Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
    background:var(--ink);
    color:var(--canvas);
    font-family:var(--font-body);
    font-weight:300;
    overflow-x:hidden;
}

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

.container{ width:min(90%,1300px); margin:auto; }

a{ color:inherit; }

/* ---------- SCROLL PROGRESS ---------- */

.progress-rail{
    position:fixed;
    top:0; left:0;
    width:100%;
    height:2px;
    background:transparent;
    z-index:1100;
}

.progress-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--brass),var(--rust));
    transition:width .1s linear;
}

/* ---------- TAG / TICKET SIGNATURE ---------- */

.tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--brass-light);
    padding:6px 14px 6px 10px;
    border:1px dashed var(--line);
    border-radius:2px;
    position:relative;
    background:rgba(173,139,76,.05);
}

.tag::before{
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--brass);
    flex-shrink:0;
}

.tag[data-rotate]{ transform:rotate(-1.5deg); }

.tag.ref{
    position:absolute;
    top:14px;
    right:14px;
    background:rgba(18,21,26,.85);
    backdrop-filter:blur(4px);
}

.tag.attr{
    margin-top:18px;
    color:var(--brass-light);
}

.tag.pin{
    position:absolute;
    bottom:-16px;
    left:26px;
    background:var(--ink);
    transform:rotate(-4deg);
}

/* ---------- NAVIGATION ---------- */

.site-nav{
    position:fixed;
    top:2px;
    width:100%;
    z-index:1000;
    background:rgba(18,21,26,.9);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transition:.35s;
}

.nav-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:82px;
    gap:24px;
}

.logo{
    display:flex;
    gap:8px;
    align-items:baseline;
    font-family:var(--font-display);
    font-size:1.7rem;
    text-decoration:none;
    color:var(--canvas);
    flex-shrink:0;
}

.logo em{ color:var(--brass-light); font-style:italic; }

#primaryNav{ display:flex; gap:34px; margin-left:auto; }

#primaryNav a{
    text-decoration:none;
    font-size:.92rem;
    letter-spacing:.3px;
    color:var(--canvas);
    position:relative;
    padding-bottom:4px;
}

#primaryNav a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:0%; height:1px;
    background:var(--brass);
    transition:.3s;
}

#primaryNav a:hover::after{ width:100%; }

.lang-switch{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-mono);
    font-size:.78rem;
    flex-shrink:0;
}

.lang-sep{ color:var(--line); }

.lang-btn{
    background:none;
    border:none;
    color:var(--muted);
    cursor:pointer;
    padding:4px 2px;
    letter-spacing:1px;
    transition:.25s;
}

.lang-btn:hover{ color:var(--brass-light); }

.lang-btn.is-active{
    color:var(--brass-light);
    font-weight:700;
}

.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:34px; height:34px;
    background:none;
    border:none;
    cursor:pointer;
}

.nav-toggle span{
    display:block;
    height:1px;
    background:var(--canvas);
    width:100%;
}

/* ---------- HERO ---------- */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:150px 8% 100px;
}

.hero-inner{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
}

.hero h1{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(2.6rem,5.4vw,4.4rem);
    line-height:1.05;
    margin:22px 0 24px;
}

.hero h1 em{ font-style:italic; color:var(--brass-light); }

.hero-text{
    font-size:1.05rem;
    color:var(--muted);
    max-width:480px;
    margin-bottom:34px;
    line-height:1.7;
}

.hero-buttons{ display:flex; gap:15px; flex-wrap:wrap; margin-bottom:50px; }

.btn-primary{
    background:var(--brass);
    color:var(--ink);
    text-decoration:none;
    padding:15px 28px;
    border-radius:3px;
    font-weight:600;
    font-size:.92rem;
    transition:.3s;
    display:inline-block;
}

.btn-primary:hover{ background:var(--brass-light); transform:translateY(-2px); }

.btn-outline{
    border:1px solid var(--line);
    color:var(--canvas);
    text-decoration:none;
    padding:15px 28px;
    border-radius:3px;
    font-size:.92rem;
    transition:.3s;
    display:inline-block;
}

.btn-outline:hover{ border-color:var(--brass); color:var(--brass-light); }

.hero-facts{
    display:flex;
    gap:36px;
    padding-top:28px;
    border-top:1px dashed var(--line);
    max-width:500px;
}

.fact{ display:flex; flex-direction:column; gap:4px; }
.fact strong{ font-family:var(--font-display); font-size:1.6rem; color:var(--brass-light); }
.fact span{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.5px; color:var(--muted); text-transform:uppercase; }

.hero-visual{ position:relative; }

.frame{
    position:relative;
    border:1px solid var(--line);
    padding:14px;
}

.frame img{ width:100%; height:520px; object-fit:cover; }

.corner{
    position:absolute;
    width:16px; height:16px;
    border:1.5px solid var(--brass);
}

.corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.corner.tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.corner.bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* ---------- TICKER ---------- */

.ticker{
    overflow:hidden;
    border-top:1px dashed var(--line);
    border-bottom:1px dashed var(--line);
    padding:16px 0;
}

.ticker-track{
    display:flex;
    width:max-content;
    animation:scroll 34s linear infinite;
}

.ticker-track span{
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--muted);
    padding:0 26px;
    border-right:1px dashed var(--line);
    white-space:nowrap;
}

@keyframes scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

/* ---------- SECTIONS ---------- */

.section{ padding:110px 8%; }

.section-title{ text-align:center; margin-bottom:64px; display:flex; flex-direction:column; align-items:center; gap:18px; }

.section-title h2{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(2.2rem,5vw,3.4rem);
}

/* ---------- COLLECTION ---------- */

.collection-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
    transition:.4s;
}

.card:hover{ transform:translateY(-6px); border-color:var(--brass); }

.card-media{ position:relative; overflow:hidden; }

.card-media img{
    width:100%; height:420px;
    object-fit:cover;
    transition:.6s;
}

.card:hover .card-media img{ transform:scale(1.05); }

.card-content{ padding:26px; }

.card-content h3{
    font-family:var(--font-display);
    font-weight:500;
    font-size:1.7rem;
    margin-bottom:10px;
}

.card-content p{ color:var(--muted); font-size:.92rem; line-height:1.6; margin-bottom:16px; }

.fabric-note{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--brass-light);
}

/* ---------- CRAFT ---------- */

.craft{ background:var(--ink-soft); }

.craft-content{ max-width:820px; margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:26px; }

.pull-quote{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:500;
    font-size:clamp(1.5rem,3.4vw,2.3rem);
    line-height:1.4;
    color:var(--canvas);
}

.craft-body{ color:var(--muted); line-height:1.8; max-width:600px; }

.craft-tags{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px; }

/* ---------- ABOUT ---------- */

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-image img{ border-radius:4px; border:1px solid var(--line); }

.about-content h2{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(2.2rem,5vw,3.2rem);
    margin:16px 0 20px;
}

.about-content p{ color:var(--muted); line-height:1.8; margin-bottom:16px; }

.about-content .btn-outline{ margin-top:10px; }

/* ---------- TESTIMONIALS ---------- */

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.testimonial{
    background:var(--card);
    border:1px solid var(--line);
    padding:34px;
    border-radius:4px;
}

.testimonial.featured{ border-color:var(--brass); }

.testimonial p{
    font-family:var(--font-display);
    font-style:italic;
    font-size:1.15rem;
    line-height:1.5;
}

/* ---------- CONTACT ---------- */

.contact-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:50px;
    align-items:stretch;
}

.contact-details{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:4px;
    padding:40px;
    display:flex;
    flex-direction:column;
    gap:26px;
}

.detail-label{
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--brass-light);
    display:block;
    margin-bottom:8px;
}

.detail-row p{ color:var(--canvas); line-height:1.6; }
.detail-row a{ text-decoration:none; }
.detail-row a:hover{ color:var(--brass-light); }

.contact-buttons{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }

.hours-note{
    font-family:var(--font-mono);
    font-size:.68rem;
    color:var(--muted);
    opacity:.7;
    margin-top:6px;
}

.btn-whatsapp{
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:#25D366;
    color:#0b2013;
    text-decoration:none;
    padding:15px 28px;
    border-radius:3px;
    font-weight:600;
    font-size:.92rem;
    transition:.3s;
}

.btn-whatsapp:hover{ background:#2fe377; transform:translateY(-2px); }

/* ---------- WHATSAPP FLOAT BUTTON ---------- */

.whatsapp-float{
    position:fixed;
    right:22px;
    bottom:22px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#25D366;
    color:#0b2013;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    z-index:900;
    animation:pulse-whatsapp 2.6s ease-in-out infinite;
}

.whatsapp-float:hover{ transform:scale(1.06); }

@keyframes pulse-whatsapp{
    0%, 100%{ box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.5); }
    50%{ box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 10px rgba(37,211,102,0); }
}

@media (prefers-reduced-motion: reduce){
    .whatsapp-float{ animation:none; }
}

@media (max-width:768px){
    .whatsapp-float{ right:16px; bottom:16px; width:52px; height:52px; }
}

.contact-map{
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
    min-height:360px;
}

#mapFrame{ filter:grayscale(.35) contrast(1.05); }

/* ---------- FOOTER ---------- */

footer{
    text-align:center;
    padding:60px 20px;
    border-top:1px dashed var(--line);
}

footer h3{
    font-family:var(--font-display);
    color:var(--brass-light);
    font-size:2.2rem;
    margin-bottom:10px;
}

footer p{ color:var(--muted); font-size:.9rem; margin-bottom:6px; }
.footer-meta{ font-family:var(--font-mono); font-size:.72rem; margin-top:14px; }

/* ---------- SCROLL REVEAL ---------- */

.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
}

.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .ticker-track{ animation:none; }
}

/* ---------- TABLET ---------- */

@media (max-width:992px){
    .hero-inner{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; }
    .frame img{ height:360px; }
    .collection-grid{ grid-template-columns:repeat(2,1fr); }
    .testimonial-grid{ grid-template-columns:1fr; }
    .about-grid{ grid-template-columns:1fr; }
    .about-content{ text-align:center; }
    .contact-grid{ grid-template-columns:1fr; }
}

/* ---------- MOBILE ---------- */

@media (max-width:768px){

    .nav-toggle{ display:flex; }

    #primaryNav{
        position:absolute;
        top:100%; left:0;
        width:100%;
        flex-direction:column;
        gap:0;
        background:rgba(18,21,26,.98);
        border-top:1px solid var(--line);
        max-height:0;
        overflow:hidden;
        transition:.35s;
    }

    #primaryNav.open{ max-height:300px; }

    #primaryNav a{ padding:16px 8%; border-bottom:1px solid var(--line); }

    .hero{ padding-top:150px; }
    .hero-buttons{ justify-content:center; }
    .hero-facts{ justify-content:center; flex-wrap:wrap; gap:26px; }

    .collection-grid{ grid-template-columns:1fr; }
    .section{ padding:80px 6%; }
    .card-media img{ height:340px; }
}

@media (max-width:480px){
    .hero h1{ text-align:center; }
    .hero-content{ text-align:center; }
    .hero-facts{ border-top:none; justify-content:space-between; }
    .btn-primary, .btn-outline{ width:100%; text-align:center; }
}