:root { --ink:#171713; --paper:#f1eee8; --line:rgba(23,23,19,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:"Segoe UI",Arial,sans-serif; }
a { color:inherit; }
a:focus-visible { outline:3px solid #ff5c35; outline-offset:5px; }
.catalog-header { height:76px; padding:0 clamp(1.2rem,4vw,4rem); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.brand { font-weight:800; font-size:1rem; text-decoration:none; letter-spacing:-.04em; }
.brand span { color:#ff5c35; font-size:.55rem; vertical-align:top; margin-left:.15rem; }
.catalog-header p { margin:0; color:#77766f; }
.header-link { justify-self:end; text-decoration:none; }
.hero { min-height:clamp(520px,calc(100svh - 190px),640px); padding:clamp(3rem,7vw,6rem) clamp(1.2rem,7vw,7rem) 2.5rem; display:flex; flex-direction:column; justify-content:space-between; }
.kicker { margin:0; font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; }
.hero h1 { margin:2rem 0; font-size:clamp(3.2rem,8.4vw,9rem); line-height:.9; letter-spacing:-.075em; font-weight:600; }
.hero h1 em { font-family:Georgia,serif; font-weight:400; color:#77766f; }
.hero-foot { display:flex; align-items:end; justify-content:space-between; border-top:1px solid var(--line); padding-top:1.5rem; }
.hero-foot p { width:min(440px,70%); margin:0; color:#62615b; line-height:1.6; }
.hero-foot>span { font-size:2.3rem; line-height:.65; text-align:right; }
.hero-foot small { font-size:.55rem; letter-spacing:.18em; }
.collection { display:grid; grid-template-columns:repeat(2,1fr); }
.demo { min-height:640px; border-top:1px solid var(--line); overflow:hidden; }
.demo:nth-child(odd) { border-right:1px solid var(--line); }
.demo>a { position:relative; isolation:isolate; min-height:inherit; display:block; padding:clamp(1.4rem,4vw,3.5rem); text-decoration:none; overflow:hidden; }
.demo-copy { position:relative; z-index:2; }
.demo-copy>span { font-size:.68rem; letter-spacing:.15em; }
.demo h2 { margin:1.2rem 0 .7rem; font-size:clamp(2.5rem,5vw,5.5rem); line-height:.88; letter-spacing:-.065em; font-weight:600; }
.demo-copy p { margin:0; font-size:.78rem; opacity:.65; }
.open { position:absolute; z-index:3; left:clamp(1.4rem,4vw,3.5rem); bottom:2.2rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; border-bottom:1px solid; padding-bottom:.4rem; }
.mini-card { position:absolute; right:8%; bottom:8%; width:clamp(180px,24vw,330px); aspect-ratio:.72; transition:transform .6s cubic-bezier(.2,.8,.2,1); box-shadow:0 25px 50px rgba(0,0,0,.15); }
.demo a:hover .mini-card { transform:translateY(-15px) rotate(-2deg); }
.demo-editorial { background:radial-gradient(circle at 50% 15%,#221f1f,#0b0b0d 70%); color:#f1eee8; }
.demo-editorial .mini-card { display:block; background:#141417; border:1px solid #232327; border-radius:20px; padding:16% 12%; }
.demo-editorial .rail { display:none; }
.demo-editorial .mini-photo { width:44%; aspect-ratio:1; margin:0 auto; border-radius:50%; background:url("assets/mateo-varela.png") center/cover; filter:grayscale(.15); box-shadow:0 0 0 2px #ff7a3d,0 0 18px rgba(255,122,61,.5); }
.demo-editorial .mini-card b { position:absolute; left:12%; right:12%; bottom:12%; padding:.55rem 0; border-radius:99px; background:#ff7a3d; color:#101012; text-align:center; font-size:.6rem; letter-spacing:.05em; }
.demo-aurora { color:#e9e0c8; background:radial-gradient(circle at 50% 0%,#26210f,#08070a 65%); }
.demo-aurora .mini-card { border:1px solid #3a331d; border-radius:1.4rem; background:#111008; backdrop-filter:none; padding:14%; }
.demo-aurora .orb { position:absolute; width:26%; aspect-ratio:1; border-radius:50%; background:none; border:2px solid #d4af37; top:10%; left:37%; }
.demo-aurora .mini-card i { position:absolute; left:12%; right:12%; top:48%; height:14%; border-radius:99px; border:1px solid #3a331d; background:none; }
.demo-aurora .mini-card b { position:absolute; left:12%; right:12%; bottom:14%; padding:.55rem 0; border-radius:99px; background:linear-gradient(90deg,#e9c862,#d4af37); color:#161305; text-align:center; letter-spacing:.05em; font-size:.58rem; }
.demo-terracotta { color:#5c4230; background:radial-gradient(circle at 50% 15%,#ffd9ae,#f3e3d2 60%); }
.demo-terracotta .mini-card { background:#fffaf2; transform:none; border-radius:1.6rem; padding:14%; }
.demo-terracotta .sun { width:38%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#e0793f,transparent 70%); margin:4% auto 0; }
.demo-terracotta .mini-card b { position:absolute; left:12%; right:12%; top:46%; text-align:center; font:400 1.1rem Georgia; color:#4a3221; }
.demo-terracotta .mini-card i { position:absolute; left:12%; right:12%; bottom:12%; height:12%; border-radius:99px; background:#e0793f; }
.demo-brutal { background:radial-gradient(circle at 50% 0%,#241c16,#0c0906 65%); color:#e9e2d5; }
.demo-brutal .mini-card { background:#171310; border:1px solid #2c241c; border-radius:1.2rem; box-shadow:none; transform:none; padding:12%; }
.demo-brutal .mini-card::before { content:""; position:absolute; left:12%; top:12%; width:22%; aspect-ratio:1; border-radius:30%; background:#3a2f22; }
.demo-brutal .mini-card b { position:absolute; left:40%; top:14%; font-size:1rem; letter-spacing:0; }
.demo-brutal .mini-card i { position:absolute; left:12%; right:12%; bottom:12%; height:18%; display:flex; align-items:center; justify-content:center; border-radius:99px; background:#ff5a1f; color:#171310; font-style:normal; font-weight:800; font-size:.55rem; text-align:center; }
.demo-midnight { color:#c9c9d0; background:radial-gradient(circle at 50% 0%,#23232b,#0b0b10 65%); }
.demo-midnight .mini-card { background:#fff; border:0; border-radius:1.4rem; overflow:hidden; }
.demo-midnight .mini-card::before { content:""; position:absolute; inset:0 0 55% 0; background:linear-gradient(160deg,#3a3a44,#111114); }
.gold-line { display:none; }
.demo-midnight .mini-card b { position:absolute; left:10%; right:10%; bottom:26%; text-align:center; font:italic 400 1.05rem Georgia; color:#1c1c22; }
.demo-midnight .mini-card i { position:absolute; left:30%; right:30%; bottom:10%; height:9%; border-radius:99px; background:#c23b3b; font-style:normal; }
.demo-paper { background:#f7f5ef; }
.demo-paper .mini-card { background:#fff; padding:12%; box-shadow:0 15px 50px rgba(0,0,0,.08); }
.demo-paper .mini-card b { font:400 3rem Georgia; }
.demo-paper .mini-card i { position:absolute; left:12%; bottom:15%; font-size:.65rem; letter-spacing:.15em; text-decoration:none; }
.demo-paper .mini-card u { position:absolute; left:12%; right:12%; top:38%; height:1px; background:#111; }
.demo-mission { color:#101317; background:#c9cdd1; }
.demo-mission .mini-card { background:#e2e4e6; border:1px solid #8d9398; border-radius:12px; box-shadow:0 28px 60px rgba(25,32,38,.24); padding:10%; }
.demo-mission .mini-card b { position:absolute; right:10%; top:8%; padding:.35rem .5rem; color:#e8ebed; background:#111820; font-size:1.2rem; }
.demo-mission .mini-card i { position:absolute; left:10%; top:11%; font-style:normal; font-size:.55rem; font-weight:800; letter-spacing:.13em; }
.demo-mission .mission-orbit { position:absolute; width:44%; aspect-ratio:1; right:10%; top:31%; border:2px solid #111820; border-radius:50%; }
.demo-mission .mission-orbit::after { content:""; position:absolute; width:16%; aspect-ratio:1; left:-8%; top:42%; border-radius:50%; background:#f05a2b; }
.demo-mission .mini-card u { position:absolute; left:10%; width:42%; height:10%; border:2px solid #111820; text-decoration:none; }
.demo-mission .mini-card u:nth-of-type(1) { top:52%; }
.demo-mission .mini-card u:nth-of-type(2) { top:67%; }
.demo-mission .mini-card u:nth-of-type(3) { top:82%; }
.demo-corporate { color:#e8dfcc; background:#17352c; }
.demo-corporate .mini-card { width:clamp(260px,31vw,440px); aspect-ratio:1.75; right:6%; bottom:13%; padding:7%; color:#12231d; background:#efe9dc; border-radius:4px; transform:rotate(-3deg); }
.demo-corporate .mini-card b { font-size:clamp(.75rem,1.5vw,1.2rem); line-height:.9; letter-spacing:-.04em; }
.demo-corporate .mini-card i { position:absolute; left:7%; bottom:12%; font-style:normal; font-size:.48rem; line-height:1.6; letter-spacing:.12em; }
.demo-corporate .mini-qr { position:absolute; width:28%; aspect-ratio:1; right:7%; bottom:12%; background:url("assets/mateo-qr.svg") center/contain no-repeat; }
.demo-construction { color:#f4f7f8; background:#09151f; }
.demo-construction .mini-card { width:clamp(230px,26vw,360px); padding:8%; color:white; background:#0e1d29; border:1px solid #2b3d4b; border-radius:16px; }
.demo-construction .mini-card b { display:grid; place-items:center; width:42px; aspect-ratio:1; border:2px solid #ffc400; border-radius:50%; color:#ffc400; font-size:1.2rem; }
.demo-construction .mini-card i { position:absolute; left:8%; top:30%; color:#ffc400; font-style:normal; font-size:.56rem; font-weight:900; line-height:1.6; letter-spacing:.1em; }
.demo-construction .mini-card u { position:absolute; left:8%; width:54%; height:10%; border:1px solid #334755; border-radius:6px; text-decoration:none; }
.demo-construction .mini-card u:nth-of-type(1) { top:52%; }
.demo-construction .mini-card u:nth-of-type(2) { top:67%; }
.demo-construction .mini-qr { position:absolute; width:25%; aspect-ratio:1; right:8%; bottom:10%; background:white url("assets/mateo-qr.svg") center/85% no-repeat; border-radius:5px; }
.demo-steel { color:#c9c9d0; background:radial-gradient(circle at 50% 0%,#2a2a30,#0c0c10 65%); }
.demo-steel .mini-card { width:clamp(220px,26vw,320px); aspect-ratio:.85; right:8%; bottom:10%; padding:0; color:#1c1c22; background:#fff; border:0; border-radius:1.2rem; transform:none; overflow:hidden; }
.demo-steel .mini-card::before { content:""; position:absolute; inset:0 0 68% 0; background:#e9e9ea; }
.demo-steel .mini-card b { position:absolute; left:10%; top:8%; display:grid; place-items:center; width:22px; aspect-ratio:1; border:1px solid #1c1c22; border-radius:0; font-size:.55rem; }
.demo-steel .mini-card i { position:absolute; left:10%; bottom:24%; font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:0; color:#1c1c22; }
.demo-steel .mini-card u { position:absolute; left:10%; right:50%; bottom:10%; height:9%; border-radius:99px; background:#d64545; text-decoration:none; }
.demo-steel .mini-qr { position:absolute; width:18%; aspect-ratio:1; right:8%; bottom:10%; background:url("assets/mateo-qr.svg") center/contain no-repeat; }
.demo-lemaroc { background:#101710; color:#e7ece4; }
.demo-lemaroc .mini-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; padding:1rem; background:linear-gradient(160deg,#1b3217,#0e100e); border:1px solid rgba(108,191,52,.4); color:#f4f7f1; }
.demo-lemaroc .lemaroc-mark { width:42%; aspect-ratio:1; padding:.35rem; border:2px solid #6cbf34; border-radius:50%; background:#0e100e; }
.demo-lemaroc .lemaroc-mark img { width:100%; height:100%; object-fit:contain; }
.demo-lemaroc .mini-card b { font-size:clamp(.85rem,2vw,1.3rem); letter-spacing:.12em; }
.demo-lemaroc .mini-card i { color:#6cbf34; font-style:normal; font-size:clamp(.55rem,1.2vw,.8rem); letter-spacing:.3em; }
.catalog-toast { position:fixed; z-index:20; left:50%; bottom:1.5rem; transform:translate(-50%,20px); opacity:0; padding:.8rem 1rem; color:white; background:#171713; border-radius:99px; font-size:.75rem; transition:.2s; pointer-events:none; }
.catalog-toast.show { opacity:1; transform:translate(-50%,0); }
.clients-section { padding:clamp(4rem,8vw,8rem) clamp(1.2rem,5vw,5rem); color:#edf0ed; background:#111713; }
.clients-section>header { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:end; gap:2rem; margin-bottom:3rem; padding-bottom:1.5rem; border-bottom:1px solid #3b433e; }
.clients-section header p,.clients-section header span { margin:0; color:#879189; font-size:.65rem; text-transform:uppercase; letter-spacing:.13em; }
.clients-section header span { text-align:right; }
.clients-section h2 { margin:0; font-size:clamp(2.5rem,5vw,5rem); letter-spacing:-.06em; line-height:.9; }
.client-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid #3b433e; }
.client-item { min-height:150px; display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:1.5rem; padding:1.5rem; border-bottom:1px solid #3b433e; color:inherit; text-decoration:none; transition:background .25s; }
.client-item:nth-child(odd) { border-right:1px solid #3b433e; }
.client-item:hover { background:#1b241e; }
.client-item img { width:110px; height:76px; padding:.6rem; object-fit:contain; background:#fff; }
.client-item div { display:grid; gap:.45rem; }
.client-item b { font-size:1.05rem; }
.client-item span { color:#879189; font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; }
.client-item i { color:#d8a34b; font-style:normal; transition:transform .25s; }
.client-item:hover i { transform:translate(4px,-4px); }
footer { padding:2rem clamp(1.2rem,4vw,4rem); display:flex; justify-content:space-between; border-top:1px solid var(--line); color:#6b6a64; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
@media (max-width:760px) {
  .catalog-header { grid-template-columns:1fr 1fr; }
  .catalog-header p { display:none; }
  .hero { min-height:560px; padding-top:3rem; }
  .hero-foot p { width:78%; font-size:.85rem; }
  .collection { grid-template-columns:1fr; }
  .demo { min-height:560px; }
  .demo:nth-child(odd) { border-right:0; }
  .mini-card { width:210px; right:7%; }
  .clients-section>header { grid-template-columns:1fr; }
  .clients-section header span { text-align:left; }
  .client-grid { grid-template-columns:1fr; }
  .client-item:nth-child(odd) { border-right:0; }
  .client-item { grid-template-columns:90px 1fr auto; padding:1rem 0; }
  .client-item img { width:82px; height:62px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* Cabecera Kanvia: conserva la identidad del sitio al usar los reskins del catálogo. */
.catalog-header { grid-template-columns:auto 1fr auto; height:76px; padding:0 clamp(1.2rem,4vw,4rem); gap:2rem; background:#0B1220; color:#F5F6F8; border-bottom-color:rgba(255,255,255,.1); }
.catalog-header > div:first-child { display:flex; align-items:center; gap:18px; min-width:0; }
.catalog-header .brand { display:flex; align-items:center; gap:10px; font-size:1rem; }
.catalog-header .brand img.icon { height:26px; width:auto; display:block; }
.catalog-header .brand img.wordmark { height:13px; width:auto; display:block; }
.catalog-header > p { justify-self:center; color:#8D96AA; white-space:nowrap; }
.catalog-header .header-link { color:#8D96AA; white-space:nowrap; transition:color .25s; }
.catalog-header .header-link:hover { color:#FF6A00; }
.catalog-header > div:last-child { display:flex; justify-self:end; gap:1.5rem; align-items:center; }
@media (max-width:760px) {
  .catalog-header { grid-template-columns:1fr auto; height:auto; min-height:76px; gap:.8rem; padding:12px 1.2rem; }
  .catalog-header > div:first-child { gap:10px; }
  .catalog-header > div:first-child > .header-link { display:none; }
  .catalog-header > p { display:none; }
  .catalog-header > div:last-child { gap:1rem; }
  .catalog-header > div:last-child .header-link:first-child { display:none; }
  .catalog-header .brand img.wordmark { height:12px; }
}