:root{
    --void: #0a0a0c;
    --void-2: #131015;
    --bone: #e9e3dc;
    --bone-dim: #a89f9a;
    --violet: #8a5cc4;
    --violet-deep: #4a2d70;
    --chrome: #c9cad2;
    --wine: #7a1c2b;
    --line: rgba(233,227,220,0.14);
  }

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

  html{scroll-behavior:smooth;}

  body{
    background:var(--void);
    color:var(--bone);
    font-family:'Oswald', sans-serif;
    font-weight:300;
    overflow-x:hidden;
    position:relative;
  }

  /* grain texture */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:200;
    pointer-events:none;
    opacity:0.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  ::selection{background:var(--violet-deep);color:var(--bone);}

  a{color:inherit; text-decoration:none;}

  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.35em;
    text-transform:uppercase;
    color:var(--violet);
  }

  h1, h2, h3, .gothic{
    font-family:'UnifrakturCook', cursive;
    font-weight:700;
    line-height:0.95;
  }

  /* ============ NAV ============ */
  nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.4rem 2.4rem;
    background:linear-gradient(to bottom, rgba(10,10,12,0.9), transparent);
    backdrop-filter:blur(2px);
  }
  .nav-mark{
    font-family:'UnifrakturCook', cursive;
    font-size:1.6rem;
    letter-spacing:0.02em;
  }
  .nav-links{
    display:flex;
    gap:2rem;
    font-family:'Space Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
  }
  .nav-links a{
    position:relative;
    color:var(--bone-dim);
    transition:color .3s;
  }
  .nav-links a:hover{color:var(--bone);}
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0; bottom:-4px;
    width:0; height:1px;
    background:var(--violet);
    transition:width .3s;
  }
  .nav-links a:hover::after{width:100%;}

  @media (max-width:720px){ .nav-links{display:none;} }

  /* ============ HERO ============ */
  .hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    padding:6rem 1.5rem 4rem;
    background:
      radial-gradient(ellipse 90% 60% at 50% 20%, rgba(138,92,196,0.18), transparent 70%),
      radial-gradient(ellipse 70% 50% at 50% 100%, rgba(122,28,43,0.12), transparent 70%),
      var(--void);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }

  .halo{
    position:absolute;
    top:8%;
    left:50%;
    transform:translateX(-50%);
    width:min(900px, 140vw);
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,224,150,0.16) 0%, rgba(138,92,196,0.09) 35%, transparent 65%);
    filter:blur(2px);
    animation:breathe 8s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes breathe{
    0%,100%{opacity:0.7; transform:translateX(-50%) scale(1);}
    50%{opacity:1; transform:translateX(-50%) scale(1.06);}
  }

  .hero-eyebrow{margin-bottom:1.4rem;}

  .hero h1{
    font-size:clamp(3.2rem, 13vw, 8.5rem);
    color:var(--bone);
    text-shadow:0 0 40px rgba(138,92,196,0.5), 0 0 90px rgba(138,92,196,0.25);
    position:relative;
    z-index:2;
  }

  .hero-sub{
    margin-top:1.6rem;
    max-width:36ch;
    font-family:'MedievalSharp', cursive;
    font-size:1.15rem;
    font-weight:400;
    color:var(--bone-dim);
    line-height:1.7;
    letter-spacing:0.02em;
    position:relative;
    z-index:2;
  }

  .hero-cta{
    margin-top:2.6rem;
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    justify-content:center;
    position:relative;
    z-index:2;
  }

  .btn{
    font-family:'Space Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    padding:0.95rem 1.8rem;
    border:1px solid var(--bone);
    color:var(--bone);
    transition:all .25s;
    display:inline-block;
  }
  .btn:hover{background:var(--bone); color:var(--void);}
  .btn.filled{background:var(--violet); border-color:var(--violet); color:var(--void);}
  .btn.filled:hover{background:var(--bone); border-color:var(--bone);}

  .scroll-cue{
    position:absolute;
    bottom:2rem;
    left:50%;
    transform:translateX(-50%);
    font-family:'Space Mono', monospace;
    font-size:0.65rem;
    letter-spacing:0.3em;
    color:var(--bone-dim);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
  }
  .scroll-cue span{
    width:1px; height:34px;
    background:linear-gradient(to bottom, var(--violet), transparent);
    animation:down 2s ease-in-out infinite;
  }
  @keyframes down{
    0%{transform:scaleY(0.3); transform-origin:top;}
    50%{transform:scaleY(1); transform-origin:top;}
    50.01%{transform-origin:bottom;}
    100%{transform:scaleY(0.3); transform-origin:bottom;}
  }

  /* ============ STITCH DIVIDER (signature) ============ */
  .stitch{
    position:relative;
    height:2.5rem;
    background:
      repeating-linear-gradient(100deg, transparent 0 26px, var(--line) 26px 27px),
      var(--void-2);
    border-top:1px dashed rgba(233,227,220,0.2);
    border-bottom:1px dashed rgba(233,227,220,0.2);
  }

  /* Loop variant: the original scrolling marquee */
  .stitch-loop::after{
    content:"⛓ MANIFIESTO / STOCK LIMITADO / A PEDIDO ⛓ MANIFIESTO / STOCK LIMITADO / A PEDIDO ⛓ MANIFIESTO / STOCK LIMITADO / A PEDIDO ⛓";
    position:absolute; inset:0;
    display:flex; align-items:center;
    white-space:nowrap;
    font-family:'Space Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.25em;
    color:var(--bone-dim);
    animation:marquee 26s linear infinite;
  }
  @keyframes marquee{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* Brand variant: static gothic wordmark, same font as the H1 */
  .stitch-brand{
    height:3.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .stitch-brand::after{
    content:"✝ BASSAURA ✝";
    font-family:'UnifrakturCook', cursive;
    font-weight:700;
    font-size:1.7rem;
    letter-spacing:0.04em;
    color:var(--bone);
    text-shadow:0 0 18px rgba(138,92,196,0.35);
  }

  /* Info variant: static caption line, text supplied per-instance via data-text */
  .stitch-info{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 1rem;
  }
  .stitch-info::after{
    content:attr(data-text);
    font-family:'Space Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:var(--bone-dim);
  }

  /* ============ STYLING & ALQUILER ============ */
  .styling{
    background:var(--void-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .styling-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:3rem;
    max-width:1080px;
    margin:0 auto;
  }
  .styling-text p{
    font-family:'MedievalSharp', cursive;
    font-size:1.08rem;
    line-height:1.85;
    color:var(--bone-dim);
  }
  .styling-text p + p{ margin-top:1.1rem; }
  .styling-services{
    background:var(--void);
    border:1px solid var(--line);
    padding:1.8rem;
    align-self:start;
  }
  .styling-services ul{
    list-style:none;
    margin-top:1rem;
  }
  .styling-services li{
    position:relative;
    padding-left:1.4rem;
    font-family:'MedievalSharp', cursive;
    font-size:0.98rem;
    color:var(--bone);
    line-height:1.6;
  }
  .styling-services li + li{ margin-top:0.9rem; }
  .styling-services li::before{
    content:"✦";
    position:absolute;
    left:0;
    color:var(--violet);
    font-size:0.75rem;
    top:0.3rem;
  }
  .styling-close{
    max-width:1080px;
    margin:3rem auto 0;
    text-align:center;
    padding-top:2.5rem;
    border-top:1px dashed var(--line);
  }
  .styling-close p{
    font-family:'MedievalSharp', cursive;
    font-size:1.15rem;
    color:var(--bone);
    max-width:52ch;
    margin:0 auto 1.8rem;
    line-height:1.7;
  }
  @media (max-width:820px){
    .styling-grid{ grid-template-columns:1fr; }
  }

  /* ============ SECTION SHELL ============ */
  section{
    padding:6rem 1.5rem;
    max-width:1240px;
    margin:0 auto;
  }
  .section-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-bottom:3.5rem;
  }
  .section-head h2{
    font-size:clamp(2.2rem, 6vw, 3.6rem);
    color:var(--bone);
    margin-top:0.6rem;
  }
  .section-head p{
    max-width:46ch;
    color:var(--bone-dim);
    font-family:'MedievalSharp', cursive;
    font-size:1.05rem;
    margin-top:1rem;
    line-height:1.7;
  }

  /* ============ MANIFESTO ============ */
  .manifesto{
    background:var(--void-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .manifesto-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
    max-width:1100px;
    margin:0 auto;
    padding:5rem 1.5rem;
  }
  .manifesto-grid img{
    width:100%;
    filter:grayscale(0.15) contrast(1.05);
    border:1px solid var(--line);
  }
  .manifesto-text .eyebrow{margin-bottom:1rem; display:block;}
  .manifesto-text h2{font-size:clamp(2rem,5vw,3rem); margin-bottom:1.2rem;}
  .manifesto-text p{
    color:var(--bone-dim);
    font-family:'MedievalSharp', cursive;
    line-height:1.85;
    font-size:1.08rem;
    max-width:48ch;
  }
  .manifesto-text p + p{margin-top:1rem;}
  @media (max-width:820px){
    .manifesto-grid{grid-template-columns:1fr;}
  }

  /* ============ GALLERY / PRODUCTS ============ */
  .gallery{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .piece{
    background:var(--void);
    position:relative;
    overflow:hidden;
  }
  .piece .frame{
    aspect-ratio:1;
    overflow:hidden;
    position:relative;
    cursor:zoom-in;
  }
  .piece img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    filter:grayscale(0.1) saturate(0.92) contrast(1.05);
    transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .5s;
  }
  .piece:hover img{transform:scale(1.06); filter:grayscale(0) saturate(1.1) contrast(1.08);}

  /* ============ LIGHTBOX (click to isolate + hover to zoom) ============ */
  .lightbox{
    position:fixed;
    inset:0;
    z-index:150;
    background:rgba(5,5,7,0.94);
    display:none;
    align-items:center;
    justify-content:center;
    padding:4rem 1.5rem;
  }
  .lightbox.active{ display:flex; }
  .lightbox-inner{
    position:relative;
    max-width:min(1100px, 92vw);
    max-height:86vh;
    overflow:hidden;
    border:1px solid var(--line);
    cursor:zoom-in;
  }
  .lightbox-inner img{
    display:block;
    max-width:min(1100px, 92vw);
    max-height:86vh;
    width:auto;
    height:auto;
    object-fit:contain;
    transform-origin:50% 50%;
    transition:transform .18s ease-out;
    will-change:transform;
  }
  .lightbox-inner.zoomed img{ transform:scale(2.2); }
  .lightbox-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:1rem 1.3rem;
    background:linear-gradient(to top, rgba(5,5,7,0.9), transparent);
    font-family:'Space Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--bone);
    pointer-events:none;
  }
  .lightbox-close{
    position:absolute;
    top:1.4rem; right:1.6rem;
    width:2.6rem; height:2.6rem;
    background:rgba(10,10,12,0.7);
    border:1px solid var(--line);
    color:var(--bone);
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
  }
  .lightbox-close:hover{ background:var(--violet); border-color:var(--violet); }

  .piece .tag{
    padding:1.1rem 1.2rem 1.4rem;
    border-top:1px solid var(--line);
  }
  .tag .num{
    font-family:'Space Mono', monospace;
    font-size:0.65rem;
    color:var(--violet);
    letter-spacing:0.2em;
  }
  .tag h3{
    font-family:'Oswald', sans-serif;
    font-weight:500;
    font-size:1.05rem;
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-top:0.4rem;
    color:var(--bone);
  }
  .tag .desc{
    font-family:'MedievalSharp', cursive;
    font-size:0.92rem;
    color:var(--bone-dim);
    margin-top:0.5rem;
    line-height:1.6;
  }
  .tag .meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:0.9rem;
    font-family:'Space Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.1em;
    color:var(--bone-dim);
  }
  .status{
    padding:0.25rem 0.55rem;
    border:1px solid var(--violet);
    color:var(--violet);
    text-transform:uppercase;
  }
  .status.sold{border-color:var(--wine); color:#c9576a;}

  .price{
    font-family:'Space Mono', monospace;
    font-size:1.15rem;
    letter-spacing:0.02em;
    color:var(--bone);
    margin-top:0.9rem;
    padding-top:0.9rem;
    border-top:1px dashed var(--line);
    display:flex;
    align-items:baseline;
    justify-content:space-between;
  }
  .price .amount::before{
    content:"AR$ ";
    color:var(--bone-dim);
    font-size:0.8rem;
  }
  .price .cuotas{
    font-size:0.65rem;
    letter-spacing:0.08em;
    color:var(--bone-dim);
    text-transform:uppercase;
  }

  @media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .gallery{grid-template-columns:1fr;} }

  /* ============ LOOKS CAROUSEL ============ */
  .looks{
    background:var(--void-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:5rem 0;
  }
  .looks-head{ text-align:center; padding:0 1.5rem 3rem;}

  .carousel{
    position:relative;
    max-width:1080px;
    margin:0 auto;
    padding:0 2rem;
  }
  .carousel-viewport{
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--void);
  }
  .carousel-track{
    display:flex;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .slide{
    flex:0 0 100%;
    position:relative;
  }
  .slide img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:contain;
    background:var(--void-2);
    display:block;
    filter:grayscale(0.15) contrast(1.05);
  }
  .slide .cap{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:1.4rem 1.8rem;
    background:linear-gradient(to top, rgba(10,10,12,0.92) 30%, transparent);
    font-family:'Space Mono', monospace;
    font-size:clamp(0.72rem, 1.6vw, 0.9rem);
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--bone);
    white-space:normal;
    line-height:1.5;
  }
  .slide .cap .idx{ color:var(--violet); margin-right:0.6em; }

  .car-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:2.6rem; height:2.6rem;
    background:rgba(10,10,12,0.7);
    border:1px solid var(--line);
    color:var(--bone);
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .25s, border-color .25s;
    z-index:5;
  }
  .car-btn:hover{ background:var(--violet); border-color:var(--violet); }
  .car-btn.prev{ left:0.6rem; }
  .car-btn.next{ right:0.6rem; }

  .dots{
    display:flex;
    justify-content:center;
    gap:0.5rem;
    margin-top:1.4rem;
  }
  .dots button{
    width:8px; height:8px;
    border-radius:50%;
    border:1px solid var(--bone-dim);
    background:transparent;
    padding:0;
    cursor:pointer;
    transition:background .25s, border-color .25s, transform .25s;
  }
  .dots button.active{
    background:var(--violet);
    border-color:var(--violet);
    transform:scale(1.25);
  }

  @media (max-width:560px){
    .car-btn{ width:2.2rem; height:2.2rem; font-size:1.1rem; }
    .carousel{ padding:0 1rem; }
    .slide img{ aspect-ratio:4/5; }
  }

  /* ============ FOOTER / CONTACT ============ */
  footer{
    background:var(--void);
    padding:6rem 1.5rem 3rem;
    text-align:center;
    position:relative;
  }
  footer .gothic{
    font-size:clamp(2.4rem, 9vw, 5rem);
    color:var(--bone);
    margin-bottom:1.4rem;
  }
  footer p.lead{
    color:var(--bone-dim);
    max-width:40ch;
    margin:0 auto 2.2rem;
    font-family:'MedievalSharp', cursive;
    font-size:1.1rem;
    line-height:1.75;
  }
  .contact-row{
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:3.5rem;
  }
  .foot-bottom{
    border-top:1px solid var(--line);
    padding-top:1.6rem;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    align-items:center;
    font-family:'Space Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.12em;
    color:var(--bone-dim);
    text-transform:uppercase;
  }

  /* reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  /* focus visibility */
  a:focus-visible, .btn:focus-visible{
    outline:2px solid var(--violet);
    outline-offset:3px;
  }