:root {
  --ink: #1b2330;
  --ink-2: #232d3c;
  --ink-3: #2c3848;
  --cream: #c8bcad;
  --cream-2: #d8cfc2;
  --paper: #ffffff;
  --bg: #ffffff;
  --text: #1b2330;
  --muted: #6b7682;
  --muted-light: #aab2bf;
  --line: #e9ebef;
  --emerald: #1aa35a;
  --amber: #f0a93a;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --maxw: 1280px;
  --sh-sm: 0 2px 12px rgba(27, 35, 48, 0.06);
  --sh: 0 24px 60px rgba(27, 35, 48, 0.14);
}
html, body, div, header, footer, section, nav, main, aside, article, details, summary,
a, button, input, textarea, select, label, ul, ol, li, img, svg, figure, figcaption,
h1, h2, h3, h4, h5, p, span, strong, small, table, thead, tbody, tr, th, td, form {
  box-sizing: border-box;
}
html, body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
.wrap { width: min(var(--maxw), 92vw); margin: 0 auto; }
.sec { padding: 92px 0; }
.sec-sm { padding: 60px 0; }
.sec-dark { background: var(--ink); color: #fff; }
.sec-cream { background: var(--cream); color: var(--ink); }
.sec-paper { background: #fff; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
h1 { font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 500; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 500; }
h3 { font-size: 1.2rem; }
.kicker { font-family: var(--body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
.sec-dark .kicker { color: var(--muted-light); }
.lead { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--muted); line-height: 1.75; max-width: 60ch; }
.sec-dark .lead { color: #b9c1cd; }
.muted { color: var(--muted); }
.center { text-align: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--body); font-weight: 600; font-size: 0.92rem; padding: 14px 28px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; transition: all .2s ease; letter-spacing: 0.01em; }
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: #fff; color: var(--ink); }
.btn-primary:hover { background: var(--cream-2); }
.btn-emerald { background: var(--emerald); color: #fff; }
.btn-emerald:hover { filter: brightness(1.08); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-line { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: 0.84rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(4px); }

.topbar { background: var(--ink-2); color: #cfd6e0; font-size: 0.8rem; text-align: center; padding: 9px 0; letter-spacing: 0.04em; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; }
.topbar a:hover { color: #fff; }

header.nav { position: sticky; top: 0; z-index: 50; background: var(--ink); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 0; gap: 20px; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 0.92rem; color: #d4d9e1; }
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; }
.lockup { display: flex; align-items: center; gap: 11px; justify-content: center; }
.lockup img { width: 40px; height: 40px; }
.wordmark { font-family: var(--display); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.02em; color: #fff; line-height: 1; }
.wordmark b { color: #5fe39b; font-weight: 600; }
.wordmark small { display: block; font-family: var(--body); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.24em; color: var(--muted-light); text-transform: uppercase; margin-top: 3px; }
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.nav-ic { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: #fff; position: relative; transition: background .2s; }
.nav-ic:hover { background: rgba(255,255,255,0.1); }
.cart-count { position: absolute; top: 2px; right: 2px; background: var(--emerald); color: #fff; font-size: 0.62rem; font-weight: 700; min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 999px; }

.hero { position: relative; min-height: 82vh; display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--ink); }
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,26,36,0.86) 0%, rgba(20,26,36,0.5) 45%, rgba(20,26,36,0.15) 100%); }
.hero .wrap { position: relative; z-index: 2; padding: 80px 0; }
.hero .kicker { color: rgba(255,255,255,0.7); }
.hero h1 { margin: 22px 0 0; max-width: 16ch; }
.hero .lead { color: #d6dbe3; margin-top: 22px; max-width: 46ch; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 40px; margin-top: 52px; flex-wrap: wrap; }
.hero-meta .n { font-family: var(--display); font-size: 2rem; font-weight: 500; }
.hero-meta .l { font-size: 0.84rem; color: #aab2bf; margin-top: 2px; }

.brandstrip { background: var(--cream); padding: 22px 0; }
.brandstrip .label { text-align: center; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: #6e6557; margin-bottom: 16px; }
.brandstrip .logos { display: flex; align-items: center; justify-content: center; gap: 54px; flex-wrap: wrap; }
.brandstrip .logos img { height: 34px; width: auto; object-fit: contain; opacity: 0.55; filter: grayscale(1) contrast(0.8); mix-blend-mode: multiply; }

.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.sec-head .t h2 { margin-top: 12px; }

.col-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.col-tile { position: relative; border-radius: 8px; overflow: hidden; min-height: 230px; display: flex; align-items: flex-end; padding: 22px; color: #fff; grid-column: span 2; }
.col-tile.big { grid-column: span 3; min-height: 320px; }
.col-tile.wide { grid-column: span 3; }
.col-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s ease; background: #2a3442; }
.col-tile:hover img { transform: scale(1.06); }
.col-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,26,36,0.1) 30%, rgba(20,26,36,0.8)); }
.col-tile .ct { position: relative; z-index: 2; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; }
.col-tile .nm { font-family: var(--display); font-weight: 500; font-size: 1.3rem; }
.col-tile .ct small { display: block; font-size: 0.78rem; color: #c8cfd9; font-family: var(--body); margin-top: 2px; }
.col-tile .ar { width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,0.16); display: grid; place-items: center; backdrop-filter: blur(4px); flex-shrink: 0; transition: background .2s; }
.col-tile:hover .ar { background: var(--emerald); }

.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.proj-card { border-radius: 8px; overflow: hidden; position: relative; aspect-ratio: 3 / 3.4; box-shadow: var(--sh-sm); }
.proj-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.proj-card:hover img { transform: scale(1.05); }
.proj-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; background: linear-gradient(180deg, transparent, rgba(20,26,36,0.85)); }
.proj-card .cap b { font-family: var(--display); font-weight: 500; font-size: 1.1rem; }
.proj-card .cap span { display: block; font-size: 0.82rem; color: #cdd4dd; }

.statement { max-width: 760px; margin: 0 auto; text-align: center; }
.statement h2 { margin-bottom: 22px; }
.statement p { color: #4a4536; font-size: 1.08rem; line-height: 1.8; max-width: 56ch; margin: 0 auto 10px; }

.feature-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.feature-row .it { background: #fff; padding: 30px 26px; }
.feature-row .ic { width: 44px; height: 44px; border-radius: 10px; background: #f1f4f3; color: var(--emerald); display: grid; place-items: center; margin-bottom: 16px; }
.feature-row h3 { font-weight: 600; margin-bottom: 6px; }
.feature-row p { font-size: 0.92rem; color: var(--muted); }
.sec-dark .feature-row { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); }
.sec-dark .feature-row .it { background: var(--ink); }
.sec-dark .feature-row .ic { background: rgba(255,255,255,0.06); color: #5fe39b; }
.sec-dark .feature-row p { color: #aab2bf; }

.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 4px; font-family: var(--display); font-weight: 500; font-size: 1.1rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { color: var(--emerald); font-size: 1.3rem; transition: transform .2s; }
.faq details[open] summary .chev { transform: rotate(45deg); }
.faq details p { padding: 0 4px 22px; color: var(--muted); line-height: 1.7; }

footer.foot { background: var(--ink); color: #97a1af; padding: 70px 0 30px; text-align: center; }
footer.foot .flogo { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 20px; }
footer.foot .flogo img { width: 60px; height: 60px; }
footer.foot .flogo .wordmark { font-size: 1.7rem; }
footer.foot .addr { color: #b9c1cd; line-height: 1.7; }
footer.foot h4 { color: #fff; font-family: var(--display); font-weight: 500; font-size: 1rem; margin: 28px 0 8px; }
footer.foot .socials { display: flex; justify-content: center; gap: 14px; margin-top: 26px; }
footer.foot .socials a { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); display: grid; place-items: center; color: #fff; transition: all .2s; }
footer.foot .socials a:hover { background: #fff; color: var(--ink); }
footer.foot .fbottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.82rem; color: #788494; }
.foot-nav { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 22px; font-size: 0.9rem; }
.foot-nav a:hover { color: #fff; }

.wsp { position: fixed; bottom: 24px; right: 24px; width: 58px; height: 58px; border-radius: 999px; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px rgba(37,211,102,0.5); z-index: 60; transition: transform .2s; }
.wsp:hover { transform: scale(1.08); }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(140px); background: var(--ink); color: #fff; padding: 14px 24px; border-radius: 6px; font-weight: 500; box-shadow: var(--sh); z-index: 95; transition: transform .35s ease; }
.toast.show { transform: translateX(-50%) translateY(0); }

.page-hero { background: var(--ink); color: #fff; padding: 64px 0 56px; }
.page-hero .kicker { color: var(--muted-light); }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0 10px; }
.page-hero .lead { color: #b9c1cd; }

.toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.chips { display: flex; gap: 9px; flex-wrap: wrap; }
.chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 500; cursor: pointer; color: var(--ink); font-size: 0.88rem; transition: all .15s; }
.chip:hover { border-color: var(--ink); }
.chip.activo { background: var(--ink); color: #fff; border-color: var(--ink); }
.buscador { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 11px 15px; }
.buscador input { border: none; outline: none; width: 100%; font-size: 0.95rem; background: transparent; font-family: var(--body); color: var(--ink); }

.grid-prod { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card-prod { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s, transform .2s; }
.card-prod:hover { box-shadow: var(--sh); transform: translateY(-3px); border-color: #d6dae0; }
.card-prod .thumb { aspect-ratio: 1 / 1; position: relative; background: #f4f6f7; display: grid; place-items: center; overflow: hidden; }
.card-prod .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .4s ease; mix-blend-mode: multiply; }
.card-prod:hover .thumb img { transform: scale(1.05); }
.card-prod .badge { position: absolute; top: 11px; left: 11px; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--ink); z-index: 1; }
.badge-top { background: var(--ink); color: #fff; }
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body .marca { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald); }
.card-body h3 { font-family: var(--body); font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.precio { font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--ink); margin-top: auto; }
.precio small { font-size: 0.7rem; font-weight: 500; color: var(--muted); font-family: var(--body); }

.overlay { position: fixed; inset: 0; background: rgba(27,35,48,0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 80; padding: 20px; }
.overlay.show { display: flex; }
.modal { background: #fff; border-radius: 10px; width: min(540px, 96vw); max-height: 92vh; overflow: auto; box-shadow: var(--sh); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 1; }
.modal-head strong { font-family: var(--display); font-weight: 600; }
.modal-body { padding: 22px; display: grid; gap: 16px; }
.cerrar { cursor: pointer; border: none; background: #f4f6f7; width: 38px; height: 38px; border-radius: 8px; font-size: 1.1rem; color: var(--ink); }

.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(430px, 100vw); background: #fff; box-shadow: -30px 0 70px rgba(27,35,48,0.22); transform: translateX(106%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 90; display: flex; flex-direction: column; }
.drawer.show { transform: translateX(0); }
.drawer-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.drawer-head strong { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.drawer-body { padding: 16px 20px; overflow: auto; flex: 1; display: grid; gap: 12px; align-content: start; }
.drawer-foot { padding: 18px 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.cart-line { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; align-items: center; }
.cart-line img { width: 54px; height: 54px; border-radius: 6px; object-fit: contain; background: #f4f6f7; }
.cart-line .nm { font-weight: 600; color: var(--ink); font-size: 0.88rem; line-height: 1.2; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.qty button { width: 28px; height: 28px; border: none; background: #fff; cursor: pointer; font-weight: 700; color: var(--ink); }
.qty span { width: 30px; text-align: center; font-weight: 600; font-size: 0.88rem; }

.field { display: grid; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--ink); }
.input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; font-size: 0.95rem; font-family: var(--body); outline: none; background: #fff; color: var(--ink); }
.input:focus { border-color: var(--ink); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.app-shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }
.side { background: var(--ink); color: #aab2bf; padding: 24px 18px; display: flex; flex-direction: column; gap: 5px; position: sticky; top: 0; height: 100vh; }
.side .lockup { justify-content: flex-start; margin-bottom: 24px; }
.side a { padding: 12px 14px; border-radius: 6px; font-weight: 500; display: flex; align-items: center; gap: 11px; color: #aab2bf; font-size: 0.93rem; transition: all .15s; }
.side a svg { width: 18px; height: 18px; }
.side a.activo, .side a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.side .sep { margin-top: auto; font-size: 0.78rem; color: #6f7a89; padding: 12px 14px; line-height: 1.5; }
.main-area { padding: 32px 40px; background: #f6f7f9; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head h2 { font-size: 1.6rem; font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 22px; position: relative; }
.kpi .ic { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #f1f4f3; color: var(--emerald); }
.kpi .l { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.kpi .v { font-family: var(--display); font-size: 1.8rem; font-weight: 600; color: var(--ink); margin-top: 8px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.panel-head { padding: 17px 22px; border-bottom: 1px solid var(--line); font-weight: 600; font-family: var(--display); display: flex; justify-content: space-between; align-items: center; }
table.tabla { width: 100%; border-collapse: collapse; }
table.tabla th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 13px 20px; border-bottom: 1px solid var(--line); }
table.tabla td { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
table.tabla tr:hover td { background: #fafbfc; }
.pill { font-size: 0.74rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; text-transform: capitalize; display: inline-block; }
.st-nuevo, .st-pendiente { background: #e0f2fe; color: #0369a1; }
.st-contactado, .st-confirmado { background: #ede9fe; color: #6d28d9; }
.st-cotizado, .st-enviado { background: #fef3c7; color: #b45309; }
.st-ganado, .st-entregado { background: #dcfce7; color: #15803d; }
.st-perdido, .st-cancelado { background: #fee2e2; color: #b91c1c; }
.sel-estado { border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-size: 0.82rem; font-family: var(--body); background: #fff; color: var(--ink); cursor: pointer; }
.embudo { display: grid; gap: 12px; padding: 20px 22px; }
.embudo-row { display: grid; grid-template-columns: 120px 1fr 40px; gap: 14px; align-items: center; }
.barra { height: 15px; border-radius: 999px; background: #eef1f3; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--emerald); border-radius: 999px; transition: width .6s ease; }

@media (max-width: 980px) {
  .nav-grid { grid-template-columns: auto 1fr; }
  .nav-links { display: none; }
  .lockup { justify-content: flex-start; }
  .col-grid { grid-template-columns: 1fr 1fr; }
  .col-tile, .col-tile.big, .col-tile.wide { grid-column: span 1; }
  .proj-grid, .feature-row { grid-template-columns: 1fr; }
  .grid-prod { grid-template-columns: 1fr 1fr; }
  .app-shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .side .sep { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .hero-meta { gap: 26px; }
}
@media (max-width: 560px) {
  .grid-prod, .kpis { grid-template-columns: 1fr; }
  .sec { padding: 60px 0; }
  .feature-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
  .reveal.in { opacity: 1; transform: none; }
  .hero img.bg { animation: kenburns 20s ease-out both; }
}
@keyframes kenburns { from { transform: scale(1.09); } to { transform: scale(1); } }

body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

header.nav { transition: box-shadow .3s ease, background .3s ease; }
header.nav.scrolled { box-shadow: 0 10px 36px rgba(7, 11, 18, 0.4); background: rgba(20, 26, 36, 0.94); backdrop-filter: blur(10px); }

.precio, .hero-meta .n, .kpi .v, .stat .n, .qty span, .embudo-row strong, table.tabla td { font-variant-numeric: tabular-nums; }

a:focus-visible, button:focus-visible, .input:focus-visible, summary:focus-visible, .chip:focus-visible {
  outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 4px;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.card-prod:active, .col-tile:active, .proj-card:active { transform: translateY(0); }

.col-tile { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); }
.col-tile:hover { box-shadow: inset 0 0 0 1px rgba(95,227,155,0.4); }

.hero-meta > div { position: relative; padding-left: 16px; }
.hero-meta > div::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--emerald); border-radius: 2px; opacity: 0.7; }

.link-arrow { position: relative; }
.btn-primary, .btn-emerald, .btn-dark, .btn-outline, .btn-line { position: relative; overflow: hidden; }
.col-tile .nm, .proj-card .cap b { letter-spacing: -0.01em; }

.pop { animation: popin .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes popin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; } .reveal { opacity: 1; transform: none; } }

.scrollbar { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--emerald), #5fe39b); z-index: 100; }
.backtop { position: fixed; bottom: 24px; left: 24px; width: 48px; height: 48px; border-radius: 999px; background: var(--ink); color: #fff; border: 1px solid rgba(255,255,255,0.16); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background .2s ease; z-index: 60; box-shadow: var(--sh-sm); }
.backtop.show { opacity: 1; transform: none; pointer-events: auto; }
.backtop:hover { background: var(--ink-2); }

.breadcrumb { font-size: 0.85rem; color: var(--muted); display: flex; gap: 8px; align-items: center; margin-bottom: 26px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { opacity: 0.5; }
.pd { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: start; }
.pd-gallery { background: #f4f6f7; border: 1px solid var(--line); border-radius: 14px; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; position: relative; }
.pd-gallery img { width: 100%; height: 100%; object-fit: contain; padding: 40px; mix-blend-mode: multiply; }
.pd-gallery .badge { position: absolute; top: 16px; left: 16px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #fff; }
.pd-info .marca { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emerald); }
.pd-info h1 { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 8px 0 16px; letter-spacing: -0.02em; }
.pd-price { font-family: var(--display); font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-price .av { font-size: 0.82rem; font-weight: 600; margin-left: 12px; font-family: var(--body); }
.pd-desc { color: var(--muted); line-height: 1.8; margin: 18px 0 0; max-width: 52ch; }
.pd-actions { display: flex; gap: 12px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.pd-actions .qty { border: 1px solid var(--line); border-radius: 8px; }
.pd-actions .qty button { width: 40px; height: 46px; font-size: 1.1rem; }
.pd-actions .qty span { width: 40px; }
.pd-meta { display: grid; gap: 12px; margin-top: 30px; border-top: 1px solid var(--line); padding-top: 24px; }
.pd-meta .row { display: flex; justify-content: space-between; font-size: 0.92rem; }
.pd-meta .row b { color: var(--ink); }
.pd-meta .row span { color: var(--muted); }

.skeleton { background: linear-gradient(90deg, #eef1f3 25%, #f7f9fa 37%, #eef1f3 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-card { height: 330px; border: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

@media (max-width: 860px) { .pd { grid-template-columns: 1fr; gap: 30px; } }