/* Sistema de diseño público de Fabrilo (estética "lujo oscuro").
   Compartido por todas las páginas SSR (landing, tienda, proyectos, blog, etc.).
   El configurador y el admin tienen su propia identidad y NO usan esta hoja. */
:root{
  --noir:#0c0d09; --noir-2:#12140d; --noir-3:#181b11;
  --cream:#ece8da; --cream-2:#b4b3a2; --muted:#9b998a;
  --acc:#8fb83a; --acc-bright:#acd451; --acc-deep:#5e7f1f;   /* verde del logo + variantes */
  --wood:#5c3f22; --wood-2:#3e2a16;
  --steel-a:#eef1f3; --steel-b:#9aa3a8;
  --header:#f6f4ec; --header-2:#ece9dd; --header-ink:#1b1a13;
  --line:rgba(143,184,58,.24); --line-soft:rgba(236,232,218,.1);
  --maxw:1180px; --ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Jost",system-ui,sans-serif; background:var(--noir); color:var(--cream); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; font-weight:300; letter-spacing:.01em}
body::before{content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::after{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 60% at 70% -5%, rgba(143,184,58,.12), transparent 55%)}
h1,h2,h3{font-family:"Bodoni Moda",serif; font-weight:400; line-height:1.04; letter-spacing:-.01em}
a{color:inherit; text-decoration:none}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 1.8rem; position:relative; z-index:2}
.kicker{display:inline-flex; align-items:center; gap:.9rem; font-family:"Jost",sans-serif; font-weight:500;
  font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--acc)}
.kicker::before{content:""; width:32px; height:1px; background:var(--acc)}

/* NAV */
.nav-shell{position:fixed; inset:0 0 auto 0; z-index:50; background:var(--header); border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 22px -16px rgba(0,0,0,.5); transition:box-shadow .4s, background .4s}
.nav-shell.shrink{background:var(--header-2); box-shadow:0 12px 32px -16px rgba(0,0,0,.55)}
/* franja superior negra (utility bar) */
.topbar{background:var(--noir)}
.tb-inner{max-width:var(--maxw); margin:0 auto; padding:.55rem 1.8rem; display:flex; align-items:center; justify-content:space-between;
  font-family:"Jost",sans-serif; font-weight:400; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cream-2)}
.tb-inner .l,.tb-inner .r{display:inline-flex; align-items:center; gap:.6rem}
.tb-inner .dot{width:6px; height:6px; border-radius:50%; background:var(--acc)}
.tb-inner .r{color:var(--acc-bright)}
@media (max-width:640px){ .topbar{display:none} }
.nav{max-width:var(--maxw); margin:0 auto; padding:1.25rem 1.8rem; display:flex; align-items:center; justify-content:space-between}
.brand{display:inline-flex; align-items:center; gap:.75rem}
.brand img{width:46px; height:46px; object-fit:contain; display:block; flex:none}
.brand .wm{display:flex; flex-direction:column; justify-content:center; line-height:1}
.brand .wm b{font-family:"Jost",sans-serif; font-weight:500; font-size:1.05rem; letter-spacing:.32em; text-transform:uppercase; display:block; line-height:1; color:var(--header-ink)}
.brand .wm small{font-family:"Jost",sans-serif; font-weight:500; font-size:.5rem; letter-spacing:.36em; text-transform:uppercase; color:var(--acc-deep); margin-top:4px; line-height:1}
.nav-links{display:flex; align-items:center; gap:2.4rem}
.nav-links a{font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--header-ink); position:relative; transition:color .3s}
.nav-links a:hover{color:var(--acc-deep)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--acc); transition:width .35s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--acc-deep)}
.nav-links a.active::after{width:100%}
.nav-right{display:flex; align-items:center; gap:1.6rem}
.nav-login{font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--header-ink)}
.nav-login:hover{color:var(--acc-deep)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.7rem; cursor:pointer; font-family:"Jost",sans-serif;
  font-weight:500; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; padding:.92rem 1.7rem; border:1px solid var(--acc);
  transition:transform .3s var(--ease), background .35s, color .35s; position:relative}
.btn svg{width:15px; height:15px; transition:transform .3s var(--ease)}
.btn-acc{background:var(--acc); color:#10160a} .btn-acc:hover{background:var(--acc-bright); border-color:var(--acc-bright); transform:translateY(-2px)} .btn-acc:hover svg{transform:translateX(3px)}
.btn-line{background:transparent; color:var(--cream)} .btn-line:hover{background:rgba(143,184,58,.12); transform:translateY(-2px)}
.nav .btn{padding:.7rem 1.3rem}
.nav-burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.5rem}
.nav-burger span{width:24px; height:1px; background:var(--header-ink); transition:.25s}
.mobile-only{display:none}

/* HERO */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; padding:9rem 0 5.5rem; overflow:hidden}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:0 1.8rem; position:relative; z-index:2; width:100%}
.hero-copy{max-width:760px; margin:0 auto; text-align:center}
.hero-copy .kicker, .hero-copy h1, .hero-copy .lead, .hero-copy .hm{text-shadow:0 2px 26px rgba(8,9,6,.55)}
.hero-copy .lead{margin-left:auto; margin-right:auto}
.hero-copy .hero-cta{justify-content:center}
.hero-copy .hero-meta{justify-content:center}
/* Opción C — render a sangre completa de fondo + velo oscuro, texto centrado encima */
.hero-figure{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-figure .showcase{position:absolute; inset:0; aspect-ratio:auto; border:none; border-radius:0; box-shadow:none; background:#0c0d09}
.hero-figure .showcase::after{display:none}
.hero-figure .showcase-img{top:-10%; bottom:auto; height:120%; will-change:transform; backface-visibility:hidden}
.hero-figure .ct, .hero-figure .cap{display:none}
.hero-veil{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,9,6,.5), rgba(8,9,6,.42) 38%, rgba(8,9,6,.72))}
.hero-veil::after{content:""; position:absolute; inset:0; background:radial-gradient(72% 60% at 50% 46%, transparent, rgba(8,9,6,.58))}
.hero h1{font-size:clamp(3rem,6.6vw,5.6rem); font-weight:400; margin:1.8rem 0 1.6rem; letter-spacing:-.015em}
.hero h1 .em{font-style:italic; color:var(--acc-bright)}
.hero .lead{font-size:1.12rem; color:#dcd9cc; max-width:44ch; margin-bottom:2.4rem; font-weight:400}
.hero-cta{display:flex; flex-wrap:wrap; gap:1rem; align-items:center}
.hero-meta{display:flex; gap:0; margin-top:3.4rem}
.hm{padding-right:2.4rem; margin-right:2.4rem; border-right:1px solid var(--line)}
.hm:last-child{border:none; margin:0; padding:0}
.hm .n{font-family:"Bodoni Moda",serif; font-size:2.1rem; line-height:1; color:var(--cream)}
.hm .n .u{color:var(--acc)}
.hm .l{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:.5rem}
/* indicador de scroll (remate inferior del hero a sangre) */
.hero-scroll{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; width:26px; height:42px; border:1px solid rgba(236,232,218,.4); border-radius:14px; display:flex; justify-content:center; padding-top:7px; transition:border-color .3s}
.hero-scroll:hover{border-color:var(--acc)}
.hero-scroll span{width:3px; height:8px; border-radius:2px; background:var(--acc-bright); animation:scrolldot 1.9s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0; transform:translateY(-3px)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0; transform:translateY(11px)}}

/* hero showcase — recibe un render real, con marco de lujo + fallback */
.showcase{position:relative; aspect-ratio:1/1.18; border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(160deg,#13160d,#0b0c07); box-shadow:0 50px 90px -50px #000, inset 0 0 80px rgba(0,0,0,.6)}
.showcase .ct{position:absolute; z-index:3; width:14px; height:14px; border:1px solid var(--acc); opacity:.7}
.ct.tl{top:14px;left:14px;border-right:none;border-bottom:none}.ct.tr{top:14px;right:14px;border-left:none;border-bottom:none}
.ct.bl{bottom:14px;left:14px;border-right:none;border-top:none}.ct.br{bottom:14px;right:14px;border-left:none;border-top:none}
/* la imagen del render (object-fit:cover → llena el marco con cualquier proporción) */
.showcase-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; z-index:1}
/* viñeta sutil para fundir el render con el marco oscuro y dejar leer la leyenda */
.showcase::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.16), transparent 26%, transparent 70%, rgba(0,0,0,.5))}
.cap{position:absolute; z-index:3; left:0; right:0; bottom:6.5%; text-align:center; font-family:"Jost",sans-serif;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--cream-2)}
.cap b{color:var(--acc-bright); font-weight:500}
/* placeholder mientras no exista el render (no rompe la página) */
.showcase-ph{position:absolute; inset:0; z-index:2; display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:.85rem; text-align:center; padding:2rem;
  background:radial-gradient(80% 70% at 50% 38%, rgba(143,184,58,.08), transparent 70%)}
.showcase-ph svg{width:44px; height:44px; stroke:var(--acc); opacity:.85}
.showcase-ph .t{font-family:"Bodoni Moda",serif; font-style:italic; font-size:1.3rem; color:var(--cream)}
.showcase-ph .p{font-family:"Jost",sans-serif; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.9}
.showcase-ph code{font-family:ui-monospace,Menlo,monospace; color:var(--acc-bright); letter-spacing:0; text-transform:none; font-size:.76rem}
.showcase.no-img .showcase-img{display:none}
.showcase.no-img::after{display:none}
.showcase.no-img .cap{display:none}
.showcase.no-img .showcase-ph{display:flex}

/* divider */
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); margin:0 auto; max-width:var(--maxw)}

/* SECTIONS */
section.block{padding:7rem 0}
.sec-head{max-width:740px; margin:0 0 3.6rem; text-align:left}
.sec-head h2{font-size:clamp(2.1rem,4.4vw,3.4rem); margin:1.1rem 0 1rem; font-weight:400}
.sec-head h2 .em{font-style:italic; color:var(--acc-bright)}
.sec-head p{color:var(--cream-2); font-size:1.08rem; font-weight:300}
.sec-head .kicker{justify-content:flex-start}

.features{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.feat{padding:2.4rem 2rem; border-left:1px solid var(--line); position:relative}
.feat:first-child{border-left:none}
.feat .fn{color:var(--acc); margin-bottom:1.2rem; line-height:0}
.feat .fn svg{width:30px; height:30px}
.feat h3{font-size:1.5rem; margin-bottom:.6rem; font-weight:400}
.feat p{color:var(--cream-2); font-size:.96rem; font-weight:300}

/* proceso */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:2.6rem}
.pstep{text-align:center; padding:0 1rem}
.pstep .num{font-family:"Bodoni Moda",serif; font-size:3.4rem; color:var(--acc); line-height:1; margin-bottom:.8rem}
.pstep h3{font-size:1.4rem; margin-bottom:.5rem; font-weight:400}
.pstep p{color:var(--cream-2); font-size:.95rem; font-weight:300}

/* tarjetas genéricas (materiales / estilo / catálogos) */
.mat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem}
.mat{position:relative; border:1px solid var(--line); transition:border-color .4s, transform .4s var(--ease)}
.mat:hover{border-color:var(--acc); transform:translateY(-6px)}
.mat .sw-lg{height:150px; position:relative}
.m-nogal{background:repeating-linear-gradient(176deg,#5c3f22,#5c3f22 8px,#4a3119 8px,#4a3119 10px,#3a2613 10px,#3a2613 14px)}
.m-encino{background:repeating-linear-gradient(176deg,#b08a52,#b08a52 8px,#9c7740 8px,#9c7740 10px,#876531 10px,#876531 14px)}
.m-acero{background:linear-gradient(135deg,var(--steel-a),var(--steel-b)); position:relative}
.m-acero::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:5px; border-radius:5px; background:#2b2e30}
.m-piedra{background:linear-gradient(135deg,#3c3c3e,#1a1a1c)}
.mat .body{padding:1.3rem 1.4rem 1.5rem}
.mat .tag{font-family:"Jost",sans-serif; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acc)}
.mat h4{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.3rem; margin:.5rem 0 .4rem}
.mat p{font-size:.84rem; color:var(--muted); font-weight:300; line-height:1.5}

/* tu estilo (clásico / contemporáneo) */
.style-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
.style-card{position:relative; border:1px solid var(--line); overflow:hidden; transition:border-color .4s, transform .4s var(--ease)}
.style-card:hover{border-color:var(--acc); transform:translateY(-6px)}
.style-band{height:140px; position:relative}
.band-clasico{background:repeating-linear-gradient(176deg,#5c3f22,#5c3f22 8px,#4a3119 8px,#4a3119 10px,#3a2613 10px,#3a2613 14px)}
.band-contemporaneo{background:linear-gradient(135deg,#2a2c2e,#16171a)}
.band-contemporaneo::after{content:""; position:absolute; left:26px; right:26px; top:50%; height:1px; background:rgba(236,232,218,.2)}
.style-body{padding:1.5rem 1.6rem 1.7rem}
.style-card .tag{font-family:"Jost",sans-serif; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acc)}
.style-card h4{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.5rem; margin:.5rem 0 .5rem}
.style-card p{font-size:.92rem; color:var(--cream-2); font-weight:300; line-height:1.55}

/* foto editable desde el admin sobre los swatches CSS (estilo + materiales).
   Oculta hasta que carga; al mostrarse cubre el swatch por completo. */
.card-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; z-index:1}
.card-img.in{display:block}

/* quote band */
.quote{text-align:center; max-width:880px; margin:0 auto; padding:1rem 0}
.quote p{font-family:"Bodoni Moda",serif; font-style:italic; font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.35; color:var(--cream)}
.quote p .em{color:var(--acc-bright)}
.quote .by{margin-top:1.6rem; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}

/* CTA */
.cta{text-align:center; padding:6rem 2rem; border:1px solid var(--line); position:relative; overflow:hidden;
  background:radial-gradient(70% 120% at 50% 0%, rgba(143,184,58,.13), transparent 60%)}
.cta h2{font-size:clamp(2.2rem,4.8vw,3.6rem); margin-bottom:1.1rem; font-weight:400}
.cta h2 .em{font-style:italic; color:var(--acc-bright)}
.cta p{color:var(--cream-2); font-weight:300; max-width:46ch; margin:0 auto 2.4rem; font-size:1.08rem}

/* footer */
footer{border-top:1px solid var(--line); margin-top:6rem; padding:4rem 0 2.6rem}
.foot{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:2.4rem}
.foot-brand{display:inline-flex; align-items:center; gap:.85rem}
.foot-chip{display:grid; place-items:center; width:52px; height:52px; background:var(--cream); border-radius:12px; padding:7px; flex:none}
.foot-chip img{width:100%; height:100%; object-fit:contain; display:block}
.foot-brand .wm{display:flex; flex-direction:column; justify-content:center; line-height:1}
.foot-brand .wm b{font-family:"Jost",sans-serif; font-weight:500; font-size:1.15rem; letter-spacing:.3em; text-transform:uppercase; color:var(--cream); line-height:1}
.foot-brand .wm small{font-family:"Jost",sans-serif; font-weight:500; font-size:.55rem; letter-spacing:.34em; text-transform:uppercase; color:var(--acc); margin-top:6px; line-height:1}
.foot-cols{display:flex; gap:4rem; flex-wrap:wrap}
.foot-col h5{font-family:"Jost",sans-serif; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--acc); margin-bottom:1rem}
.foot-col a{display:block; font-size:.9rem; color:var(--cream-2); margin-bottom:.6rem; font-weight:300}
.foot-col a:hover{color:var(--cream)}
.foot-base{margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; color:var(--muted); font-size:.78rem; letter-spacing:.06em}

/* Proyectos (galería + detalle) */
.page-head{padding:9rem 0 0}
.page-head .wrap{max-width:760px}
.page-head h1{font-size:clamp(2.4rem,5.2vw,4rem); margin:1.1rem 0 1rem}
.page-head h1 .em{font-style:italic; color:var(--acc-bright)}
.page-head p{color:var(--cream-2); font-size:1.08rem; font-weight:300}
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.proj-card{position:relative; border:1px solid var(--line); overflow:hidden; transition:border-color .4s, transform .4s var(--ease); display:block; color:inherit}
.proj-card:hover{border-color:var(--acc); transform:translateY(-6px)}
.proj-card .ph{aspect-ratio:4/3; position:relative; overflow:hidden; background:linear-gradient(135deg,#13160d,#0b0c07)}
.proj-card .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.proj-card:hover .ph img{transform:scale(1.04)}
.proj-card .ph .noimg{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase}
.proj-card .pb{padding:1.1rem 1.3rem 1.4rem}
.proj-card .tag{font-family:"Jost",sans-serif; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acc)}
.proj-card h3{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.4rem; margin:.4rem 0 .2rem}
.proj-card .meta{font-size:.82rem; color:var(--muted)}
.empty-state{text-align:center; padding:4rem 1rem; color:var(--cream-2)}
.empty-state .ico{color:var(--acc); margin-bottom:1rem} .empty-state .ico svg{width:46px;height:46px}

/* Detalle de obra */
.obra-meta{display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; margin:1.4rem 0 0; color:var(--cream-2); font-size:.92rem}
.obra-meta .mk{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.15rem}
.obra-desc{max-width:760px; color:var(--cream-2); font-size:1.05rem; font-weight:300; margin-top:2rem; white-space:pre-line}
.obra-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2.6rem}
.obra-gallery a{display:block; border:1px solid var(--line); overflow:hidden; aspect-ratio:4/3; position:relative}
.obra-gallery a:first-child{grid-column:1/-1; aspect-ratio:16/9}
.obra-gallery img{width:100%; height:100%; object-fit:cover; display:block}
@media(max-width:920px){ .proj-grid{grid-template-columns:1fr 1fr} }
@media(max-width:540px){ .proj-grid{grid-template-columns:1fr} .obra-gallery{grid-template-columns:1fr} .obra-gallery a:first-child{aspect-ratio:4/3} }

/* Blog (lista) */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem}
.blog-card{position:relative; border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition:border-color .4s, transform .4s var(--ease); color:inherit}
.blog-card:hover{border-color:var(--acc); transform:translateY(-6px)}
.blog-card .ph{aspect-ratio:16/10; position:relative; overflow:hidden; background:linear-gradient(135deg,#13160d,#0b0c07)}
.blog-card .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.blog-card:hover .ph img{transform:scale(1.04)}
.blog-card .ph .noimg{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase}
.blog-card .bb{padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.blog-card .date{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--acc)}
.blog-card h3{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.45rem; line-height:1.12}
.blog-card p{font-size:.92rem; color:var(--cream-2); font-weight:300; line-height:1.5; flex:1}
.blog-card .tags{display:flex; gap:.4rem; flex-wrap:wrap}
.blog-tag{font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.18rem .6rem}

/* Artículo (detalle) */
.article{max-width:760px; margin:0 auto}
.article-cover{max-width:1000px; margin:2.4rem auto 0; border:1px solid var(--line); overflow:hidden; aspect-ratio:16/8}
.article-cover img{width:100%; height:100%; object-fit:cover; display:block}
.article-meta{display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center; color:var(--muted); font-size:.82rem; letter-spacing:.04em; margin-top:1.2rem}
.article-meta .dot{width:4px; height:4px; border-radius:50%; background:var(--acc)}
.article-body{margin-top:2.4rem; font-size:1.08rem; line-height:1.85; color:#dcd9cc; font-weight:300}
.article-body > *{margin-bottom:1.2rem}
.article-body h2{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.9rem; color:var(--cream); margin:2.4rem 0 1rem}
.article-body h3{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.45rem; color:var(--cream); margin:1.8rem 0 .8rem}
.article-body a{color:var(--acc-bright); text-decoration:underline; text-underline-offset:3px}
.article-body strong{color:var(--cream); font-weight:500}
.article-body ul,.article-body ol{padding-left:1.4rem} .article-body li{margin-bottom:.5rem}
.article-body blockquote{border-left:2px solid var(--acc); padding:.3rem 0 .3rem 1.4rem; font-style:italic; color:var(--cream-2); font-family:"Bodoni Moda",serif; font-size:1.25rem}
.article-body img{max-width:100%; height:auto; border:1px solid var(--line)}
.article-body code{font-family:ui-monospace,Menlo,monospace; background:var(--noir-3); padding:.1rem .4rem; border-radius:5px; font-size:.9em}
.article-body pre{background:var(--noir-3); padding:1rem 1.2rem; border-radius:10px; overflow:auto; border:1px solid var(--line)}
.article-body pre code{background:none; padding:0}
.article-body hr{border:none; height:1px; background:var(--line)}
@media(max-width:920px){ .blog-grid{grid-template-columns:1fr 1fr} }
@media(max-width:540px){ .blog-grid{grid-template-columns:1fr} }

/* Tienda (catálogo) */
.shop-filters{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2rem}
.shop-filter{font-family:"Jost",sans-serif; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; padding:.5rem 1rem; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--cream-2); cursor:pointer; transition:all .2s}
.shop-filter:hover{border-color:var(--acc); color:var(--cream)}
.shop-filter.active{background:var(--acc); border-color:var(--acc); color:#10160a}
.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.shop-card{position:relative; border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition:border-color .4s, transform .4s var(--ease); color:inherit}
.shop-card:hover{border-color:var(--acc); transform:translateY(-6px)}
.shop-card .ph{aspect-ratio:1/1; position:relative; overflow:hidden; background:linear-gradient(135deg,#13160d,#0b0c07)}
.shop-card .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.shop-card:hover .ph img{transform:scale(1.04)}
.shop-card .ph .noimg{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase}
.shop-card .badge-cust{position:absolute; top:.7rem; left:.7rem; z-index:2; font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; background:rgba(12,13,9,.78); color:var(--acc-bright); border:1px solid var(--line); padding:.25rem .55rem; border-radius:999px}
.shop-card .sb{padding:1.1rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.35rem; flex:1}
.shop-card .tag{font-family:"Jost",sans-serif; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--acc)}
.shop-card h3{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.3rem; line-height:1.15}
.shop-card .price{font-family:"Jost",sans-serif; font-weight:500; font-size:1.05rem; color:var(--cream); margin-top:auto}
.shop-card .price .ask{font-size:.82rem; color:var(--cream-2); font-weight:400}

/* Producto (detalle) */
.prod-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:2.6rem; align-items:start}
.prod-gallery{display:flex; flex-direction:column; gap:.8rem}
.prod-main{border:1px solid var(--line); overflow:hidden; aspect-ratio:1/1; background:linear-gradient(135deg,#13160d,#0b0c07)}
.prod-main img{width:100%; height:100%; object-fit:cover; display:block}
.prod-thumbs{display:flex; gap:.6rem; flex-wrap:wrap}
.prod-thumbs button{width:72px; height:72px; border:1px solid var(--line); padding:0; overflow:hidden; cursor:pointer; background:none; border-radius:6px}
.prod-thumbs button.active{border-color:var(--acc)}
.prod-thumbs img{width:100%; height:100%; object-fit:cover; display:block}
.prod-info .tag{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--acc)}
.prod-info h1{font-size:clamp(2rem,4vw,2.9rem); margin:.6rem 0 .8rem}
.prod-price{font-family:"Jost",sans-serif; font-weight:500; font-size:1.7rem; color:var(--cream); margin-bottom:1.2rem}
.prod-price .ask{font-size:1rem; color:var(--cream-2); font-weight:400}
.prod-desc{color:var(--cream-2); font-weight:300; white-space:pre-line; line-height:1.8}
.prod-specs{margin:1.6rem 0; border-top:1px solid var(--line); padding-top:1.2rem}
.prod-specs div{display:flex; gap:1rem; padding:.35rem 0; font-size:.92rem}
.prod-specs .k{color:var(--muted); min-width:110px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding-top:.15rem}
.prod-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem}
@media(max-width:920px){ .shop-grid{grid-template-columns:1fr 1fr} .prod-grid{grid-template-columns:1fr; gap:1.8rem} }
@media(max-width:540px){ .shop-grid{grid-template-columns:1fr} }

/* Modal "Pedir a medida" / cotización */
.modal-ov{position:fixed; inset:0; z-index:200; background:rgba(8,9,6,.72); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:1.4rem}
.modal-ov.show{display:flex}
.modal{background:var(--noir-2); border:1px solid var(--line); max-width:480px; width:100%; padding:2rem; position:relative; max-height:90vh; overflow:auto}
.modal h3{font-size:1.6rem; margin-bottom:.4rem} .modal h3 .em{font-style:italic; color:var(--acc-bright)}
.modal .sub{color:var(--cream-2); font-size:.9rem; margin-bottom:1.4rem; font-weight:300}
.modal label{display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:.9rem 0 .35rem}
.modal input,.modal textarea{width:100%; padding:.7rem .9rem; background:var(--noir-3); border:1px solid var(--line); color:var(--cream); font-family:"Jost",sans-serif; font-size:.95rem; border-radius:6px}
.modal input:focus,.modal textarea:focus{outline:none; border-color:var(--acc)}
.modal textarea{resize:vertical; min-height:90px}
.modal .x{position:absolute; top:1rem; right:1.1rem; background:none; border:none; color:var(--cream-2); font-size:1.5rem; cursor:pointer; line-height:1}
.modal .hp{position:absolute; left:-9999px}
.modal-msg{font-size:.86rem; margin-top:.8rem; min-height:1.2em}
.modal-msg.ok{color:var(--acc-bright)} .modal-msg.err{color:#e2a0a0}

/* Botón de carrito (header) */
.cart-btn{position:relative; background:none; border:none; cursor:pointer; color:var(--header-ink); display:inline-flex; padding:.3rem; transition:color .25s}
.cart-btn:hover{color:var(--acc-deep)}
.cart-btn svg{width:23px; height:23px}
.cart-count{position:absolute; top:-4px; right:-6px; min-width:17px; height:17px; padding:0 4px; background:var(--acc); color:#10160a; border-radius:999px; font-family:"Jost",sans-serif; font-size:.62rem; font-weight:600; display:flex; align-items:center; justify-content:center; line-height:1}

/* Cajón del carrito */
.cart-drawer{position:fixed; inset:0; z-index:120; pointer-events:none}
.cart-ov{position:absolute; inset:0; background:rgba(8,9,6,.6); opacity:0; transition:opacity .35s}
.cart-panel{position:absolute; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--noir-2); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column}
.cart-drawer.show{pointer-events:auto}
.cart-drawer.show .cart-ov{opacity:1}
.cart-drawer.show .cart-panel{transform:none}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:1.4rem 1.6rem; border-bottom:1px solid var(--line)}
.cart-head h3{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.5rem}
.cart-x{background:none; border:none; color:var(--cream-2); font-size:1.7rem; cursor:pointer; line-height:1}
.cart-items{flex:1; overflow:auto; padding:1rem 1.6rem}
.cart-empty{color:var(--cream-2); text-align:center; padding:3rem 0; font-weight:300}
.cart-row{display:grid; grid-template-columns:56px 1fr auto; gap:.9rem; padding:1rem 0; border-bottom:1px solid var(--line-soft)}
.cart-thumb{width:56px; height:56px; background:var(--noir-3); border:1px solid var(--line); overflow:hidden}
.cart-thumb img{width:100%; height:100%; object-fit:cover}
.cart-meta a{display:block; color:var(--cream); font-size:.95rem; line-height:1.25}
.cart-price{color:var(--muted); font-size:.82rem; margin:.15rem 0 .5rem}
.cart-qty{display:flex; align-items:center; gap:.5rem}
.cart-qty button{width:24px; height:24px; border:1px solid var(--line); background:none; color:var(--cream); cursor:pointer; border-radius:5px; line-height:1}
.cart-qty button:hover{border-color:var(--acc)}
.cart-qty span{min-width:1.4rem; text-align:center; font-size:.9rem}
.cart-del{width:auto !important; height:auto !important; border:none !important; color:var(--muted) !important; font-size:.74rem; margin-left:.4rem; text-decoration:underline}
.cart-line{font-weight:500; font-size:.95rem; color:var(--cream); white-space:nowrap}
.cart-foot{padding:1.3rem 1.6rem; border-top:1px solid var(--line)}
.cart-sub{display:flex; justify-content:space-between; font-size:1.05rem; margin-bottom:.4rem}
.cart-sub b{font-weight:500}
.cart-note{color:var(--muted); font-size:.78rem; margin:.4rem 0 1rem}

/* Checkout */
.checkout-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:2.4rem; align-items:start}
.checkout-form h3,.checkout-summary h3{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.4rem; margin-bottom:1.1rem}
.checkout-form label{display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:.9rem 0 .35rem}
.checkout-form input,.checkout-form textarea{width:100%; padding:.75rem .9rem; background:var(--noir-2); border:1px solid var(--line); color:var(--cream); font-family:"Jost",sans-serif; font-size:.95rem; border-radius:6px}
.checkout-form input:focus,.checkout-form textarea:focus{outline:none; border-color:var(--acc)}
.checkout-form textarea{resize:vertical}
.ck-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.checkout-summary{border:1px solid var(--line); padding:1.6rem; background:var(--noir-2); position:sticky; top:6rem}
.ck-item{display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; font-size:.92rem; color:var(--cream-2); border-bottom:1px solid var(--line-soft)}
.ck-item b{color:var(--cream); font-weight:500; white-space:nowrap}
.ck-line{display:flex; justify-content:space-between; padding:.55rem 0; font-size:.95rem; color:var(--cream-2)}
.ck-line b{color:var(--cream); font-weight:500}
.ck-line.total{border-top:1px solid var(--line); margin-top:.4rem; padding-top:.9rem; font-size:1.15rem}
.ck-line.total b{font-family:"Bodoni Moda",serif; font-size:1.5rem; color:var(--acc-bright)}
.ck-note{color:var(--muted); font-size:.78rem; margin-top:.9rem; line-height:1.5}
.checkout-done{max-width:560px; margin:1rem auto 0; text-align:center}
.done-ico{width:64px; height:64px; margin:0 auto 1.2rem; border-radius:50%; border:1.5px solid var(--acc); color:var(--acc-bright); display:grid; place-items:center}
.done-ico svg{width:32px; height:32px}
.checkout-done h2{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.6rem}
.done-num{color:var(--cream-2); margin-bottom:1.6rem}
.done-num b{color:var(--cream); font-family:ui-monospace,Menlo,monospace}
.done-bank{border:1px solid var(--line); padding:1.4rem 1.6rem; text-align:left; background:var(--noir-2)}
.done-bank h4{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.2rem; margin-bottom:.6rem}
.done-bankdata{white-space:pre-wrap; font-family:ui-monospace,Menlo,monospace; font-size:.88rem; color:var(--cream); background:var(--noir-3); padding:.9rem 1.1rem; border-radius:8px; margin:.8rem 0; border:1px solid var(--line)}
@media(max-width:820px){ .checkout-grid{grid-template-columns:1fr} .checkout-summary{position:static} }
@media(max-width:540px){ .ck-row{grid-template-columns:1fr} }

/* Contacto */
.contact-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:2.6rem; align-items:start}
.contact-side h3{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.4rem; margin-bottom:1.1rem}
.contact-line{display:flex; align-items:center; gap:.7rem; padding:.8rem 0; color:var(--cream-2); border-bottom:1px solid var(--line-soft); transition:color .25s; font-size:.95rem}
.contact-line:hover{color:var(--cream)}
.contact-line svg{width:20px; height:20px; color:var(--acc); flex:none}
.contact-side .muted-note{color:var(--muted); font-size:.82rem; margin-top:1.2rem; line-height:1.6}
@media(max-width:820px){ .contact-grid{grid-template-columns:1fr} }

/* Página institucional (Nosotros/FAQ/Legal) */
.pagina-body{max-width:760px}
.pagina-body h2{font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.7rem; color:var(--cream); margin:2rem 0 1rem}
.pagina-body h3{font-size:1.15rem; color:var(--cream); margin:1.6rem 0 .6rem; font-weight:400}

/* "próximamente" (páginas en construcción) */
.soon{min-height:72vh; display:grid; place-items:center; text-align:center; padding:11rem 0 6rem}
.soon .wrap{max-width:640px}
.soon h1{font-size:clamp(2.4rem,5vw,3.8rem); margin:1.3rem 0 1rem}
.soon h1 .em{font-style:italic; color:var(--acc-bright)}
.soon p{color:var(--cream-2); font-weight:300; font-size:1.05rem; margin-bottom:2rem}

/* reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.in{opacity:1; transform:none}
.d1{transition-delay:.12s} .d2{transition-delay:.24s} .d3{transition-delay:.36s}

@media (max-width:920px){
  .hero{padding:8rem 0 4.5rem; min-height:78vh}
  .hero-copy{max-width:none}
  .hero-figure .showcase-img{top:0; bottom:0; height:100%}
  .hero-scroll{display:none}
  .features{grid-template-columns:1fr} .feat{border-left:none; border-top:1px solid var(--line)} .feat:first-child{border-top:none}
  .steps{grid-template-columns:1fr; gap:2.4rem}
  .style-grid{grid-template-columns:1fr}
  .mat-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none} .nav-burger{display:flex}
  .nav-right .nav-login,.nav-right .btn-acc{display:none}
  .mobile-only{display:inline-flex}
  .nav.open .nav-links{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--header-2); border-top:1px solid rgba(0,0,0,.3); border-bottom:1px solid rgba(0,0,0,.3); padding:1.5rem 1.8rem; gap:1.3rem}
}
@media (max-width:540px){ .mat-grid{grid-template-columns:1fr} .hero-meta{flex-wrap:wrap; gap:1.4rem} .hm{border:none; padding:0; margin:0} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important} .reveal{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }