/* ============================================================================= impre[cx]o · M4 — base.css The shared design system. LOCKED foundation for every page agent. Type: Hedvig Letters Serif (display, single weight 400) + Newsreader (body, real italic + real weights). Self-hosted, zero external requests. Theme: día = "papel" (default, daylight gallery) · noche = "tinta" (token-cheap night). Toggled via [data-theme] on ; app.js respects prefers-color-scheme. Color: imp-* magenta system. The make-real gradient (cyan→magenta) is the ONE gradient with meaning — the viaje in color, rationed to arc moments. Rhythm: 8px base unit; every space snaps to the 4/8 scale (chk-rhythm-scale). Motion: hero = restrained ambient only; Apple-Vision scroll lives below the fold on cards; every animation has a prefers-reduced-motion branch (E4). Voice: single-weight display — hierarchy from size, case, tracking, colour, rhythm; NEVER font-weight or faux italic (font-synthesis:none). Governed by DESIGN_GATE_v1 + CONTENT_GATE_v1. Tokens are law (imp-* only). ============================================================================= */ /* ── @font-face — self-hosted, latin + latin-ext (es-MX: ñ á é í ó ú ¿ ¡) ── */ /* Display: Hedvig Letters Serif — one master (400), opsz baked; no italic, no bold. */ @font-face{ font-family:"Hedvig Letters Serif"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/HedvigLettersSerif-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Hedvig Letters Serif"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/HedvigLettersSerif-latinext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Body: Newsreader — variable roman (opsz 6..72, wght 400..600). Real weights. */ @font-face{ font-family:"Newsreader"; font-style:normal; font-weight:400 600; font-display:swap; src:url("../fonts/Newsreader-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Newsreader"; font-style:normal; font-weight:400 600; font-display:swap; src:url("../fonts/Newsreader-latinext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Body italic: Newsreader — REAL drawn italic (the whole italic strategy pays here). */ @font-face{ font-family:"Newsreader"; font-style:italic; font-weight:400 600; font-display:swap; src:url("../fonts/Newsreader-italic-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Newsreader"; font-style:italic; font-weight:400 600; font-display:swap; src:url("../fonts/Newsreader-italic-latinext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ============================================================================= 1. TOKENS — the single source of colour, type, rhythm. imp-* system only. ============================================================================= */ :root{ /* — brand magenta (the house carries magenta; cyan/yellow/ink are support cast) — */ --magenta:#E10075; /* Magenta Real — the hero colour, rationed */ --magenta-press:#C2185B; /* small magenta text on papel — AA on light */ --magenta-pure:#EC008C; /* registration + on-dark accent */ --magenta-night:#FF3D9A; /* AA-normal magenta on tinta (5.65:1) — DESIGN GATE fix */ --cyan:#00AEEF; /* the digital pole · Naiyel's seat */ --cyan-deep:#0098C7; /* focus rings, small cyan on light */ --yellow:#FFD200; /* spark only — never text */ /* — two worlds, one set of names. día = papel (default). — */ --paper:#FAF7F2; /* warm gallery light */ --paper-2:#F2ECE1; /* raised surface, insets */ --surface:#FFFFFF; /* card lift above paper */ --ink:#14121A; /* primary type — the physical world */ --ink-2:#1A1622; /* raised ink surfaces (dark bands) */ --text:var(--ink); /* semantic: primary text on current world */ --text-muted:#5A5560; /* secondary on papel (AA on paper) */ --on-dark:#FAF7F2; /* text colour when a section is ink-grounded */ --on-dark-muted:#B7B1BE; /* secondary on ink */ --line:rgba(20,18,26,.10); /* hairline on light */ --line-2:rgba(20,18,26,.06);/* softer hairline */ --accent-text:var(--magenta-press); /* the correct magenta for small text on current world */ --link:var(--magenta-press); /* — the ONE meaningful gradient: the viaje, cyan→magenta (digital→physical) — */ --grad-make-real:linear-gradient(135deg,var(--cyan),var(--magenta)); --grad-make-real-90:linear-gradient(90deg,var(--cyan),var(--magenta)); /* — type faces — */ --font-display:"Hedvig Letters Serif",Georgia,serif; --font-text:"Newsreader",Georgia,"Times New Roman",serif; --font-label:var(--font-display); /* single-weight labels ride the display face in versalitas */ /* — rhythm (8px base; snap all spacing to 4/8) — */ --u:8px; --maxw:1200px; --gutter:clamp(20px,5vw,72px); /* — ritmo de banda + costura · ADN §7 (ley founder 2026-07-29) — */ --band-py:clamp(40px,6vh,68px); /* respiro de banda: el piso de la casa arriba y abajo */ --band-py-tight:clamp(11px,1.5vh,20px);/* banda ceñida: SOLO cuando la anterior cierra con un objeto con aire propio */ --seam:clamp(56px,8vh,104px); /* alto de la costura — a la escala de los degradados propios de la casa (22-30% de banda) */ /* — los 5 tonos de día con los que una banda puede CERRAR (la paleta de fronteras) — */ --tone-paper:var(--paper); /* #FAF7F2 */ --tone-lino:var(--paper-2); /* #F2ECE1 */ --tone-carta:#F5EAD8; --tone-crema:#EFE4D3; --tone-ficha:#F3EBDD; --tone-surface:var(--surface); /* #FFFFFF — la card levantada, cuando una banda entera la toma */ /* — the modular type scale (major-third-ish; size + rhythm carry hierarchy) — */ --fs-hero:clamp(2.75rem,6vw,4.5rem); --fs-promise:clamp(1.75rem,3.2vw,2.5rem); --fs-h2:clamp(1.5rem,3.4vw,1.75rem); --fs-h3:clamp(1.25rem,2vw,1.375rem); --fs-intro:1.1875rem; /* 19px — entrada */ --fs-body:1.0625rem; /* 17px — cuerpo */ --fs-caption:0.8125rem; /* 13px */ --fs-label:0.75rem; /* 12px versalitas */ /* — motion — */ --ease:cubic-bezier(.22,.68,.16,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-1:.2s; --dur-2:.35s; --dur-3:.6s; /* — elevation (soft, warm, gallery — never a hard drop shadow) — */ --lift-1:0 1px 0 var(--line-2),0 10px 30px -24px rgba(20,18,26,.5); --lift-2:0 18px 48px -28px rgba(20,18,26,.45); --lift-mag:0 16px 40px -18px rgba(225,0,117,.42); --radius:14px; --radius-lg:20px; /* — ESCALERA DE APILAMIENTO — el orden de capas, declarado una vez. Dos escaleras, porque hay dos contextos y confundirlos es el bug clásico. RAÍZ (hijos directos de ; aquí el número SÍ es global): ground 0 · page 2 · footer 2 · chrome 40 · sticky 44 · persist 45 · skip 60 · modal 1000 El escalón que sostiene todo es `--z-page`: `main.page` abre contexto propio, así que CUALQUIER z-index de contenido (incluido el 1000 de una ficha) queda encerrado por debajo del header. Ese encierro es la razón de que los megas se lean. Medido: con `main.page{z-index:auto}` y un hijo en 41, el header pierde el hover por completo. DENTRO DEL HEADER (`.nav` abre contexto en 40; estos números ordenan SOLO entre sí y jamás pueden superar el 40 global): frost -1 · mega 10 · sheet 39 · search 60 Regla: todo panel del header lleva su escalón escrito. Un panel en `auto` depende del orden del documento, y el primer hermano posicionado que alguien agregue lo tapa. */ --z-ground:0; --z-page:2; --z-chrome:40; --z-sticky:44; --z-persist:45; --z-skip:60; --z-modal:1000; --z-nav-frost:-1; --z-nav-mega:10; --z-nav-sheet:39; --z-nav-search:60; font-synthesis:none; /* never faux bold, never faux italic — the single-weight law */ color-scheme:light; } /* — noche · Tinta — the night world. Same names, ink leads, magenta stays legible. — */ html[data-theme="tinta"]{ --paper:#14121A; --paper-2:#1A1622; --surface:#211C2B; --ink:#FAF7F2; /* ink and paper swap roles by name so components stay theme-agnostic */ --ink-2:#0F0D14; --text:#FAF7F2; --text-muted:#B7B1BE; --on-dark:#FAF7F2; --on-dark-muted:#B7B1BE; --line:rgba(250,247,242,.14); --line-2:rgba(250,247,242,.08); --accent-text:var(--magenta-night); /* AA on tinta */ --link:var(--cyan); --lift-1:0 1px 0 rgba(255,255,255,.04),0 12px 34px -24px rgba(0,0,0,.7); --lift-2:0 22px 54px -30px rgba(0,0,0,.65); color-scheme:dark; } /* ============================================================================= 2. RESET + ROOT SURFACE ============================================================================= */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden} html,body{min-height:100%} body{ background:var(--paper); color:var(--text); font-family:var(--font-text); font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-synthesis:none; overflow-x:clip; transition:background-color var(--dur-2) ease,color var(--dur-2) ease; } img,svg,video,canvas{max-width:100%;display:block} a{color:var(--link);text-decoration:none} ::selection{background:rgba(225,0,117,.16);color:var(--ink)} html[data-theme="tinta"] ::selection{background:rgba(255,61,154,.24);color:var(--paper)} /* real italic is a real cut of Newsreader — never a synthesized slant on Hedvig */ em,i,cite,.italic{font-family:var(--font-text);font-style:italic;font-synthesis:none} /* layout container — every page wraps content in .shell for one consistent measure */ .shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .shell-wide{max-width:1360px} .stack>*+*{margin-top:calc(var(--u)*2)} /* ============================================================================= 3. GROUND — the warm gallery spotlight + faint paper grain (the "banda" ground) Fixed, pointer-events off; every hero composes over this. ============================================================================= */ .ground{position:fixed;inset:0;z-index:var(--z-ground);pointer-events:none} .ground .vignette{ position:absolute;inset:0; background: radial-gradient(120% 92% at 66% 38%,rgba(255,255,255,.85),rgba(255,255,255,0) 46%), radial-gradient(140% 120% at 50% 122%,rgba(20,18,26,.05),rgba(20,18,26,0) 60%); } .ground .grain{ position:absolute;inset:0;opacity:.30;mix-blend-mode:multiply; background-image:radial-gradient(rgba(20,18,26,.045) 1px,transparent 1.4px); background-size:4px 4px; -webkit-mask-image:radial-gradient(120% 100% at 66% 42%,#000 30%,transparent 82%); mask-image:radial-gradient(120% 100% at 66% 42%,#000 30%,transparent 82%); } html[data-theme="tinta"] .ground .vignette{ background: radial-gradient(120% 92% at 66% 34%,rgba(58,44,74,.5),rgba(20,18,26,0) 52%), radial-gradient(140% 120% at 50% 122%,rgba(0,0,0,.4),rgba(0,0,0,0) 60%); } html[data-theme="tinta"] .ground .grain{opacity:.5;mix-blend-mode:screen; background-image:radial-gradient(rgba(250,247,242,.05) 1px,transparent 1.4px)} /* page content sits above the ground. PIEZA DE CARGA — no es un número suelto. `position:relative` + `z-index` abren aquí un contexto de apilamiento, y ese contexto es lo que mantiene TODO el contenido de página por debajo del header fijo (40), sin importar qué z-index se declare dentro: el 1000 de una ficha, el 9 de una tarjeta en hover, los 3/4/5 de un hero. `isolation:isolate` deja el encierro escrito de forma explícita, así que sigue en pie aunque alguien toque el número. Quitar ambos deja que el contenido perfore el header (medido: el hover del nav muere y los megas dejan de abrirse). */ .page{position:relative;z-index:var(--z-page);isolation:isolate} /* ============================================================================= 4. TYPE PRIMITIVES — hierarchy from size / case / tracking / colour / rhythm. NO font-weight lever on the display face. This is the single-weight system. ============================================================================= */ h1,.hero-h,.h1{ /* h1 elemento RESTAURADO 2026-07-15: una higiene lo amputó del selector (h2,.h2 conserva el patrón correcto) y los

sin clase cayeron a Newsreader */ font-family:var(--font-display);font-weight:400; font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.02em; color:var(--text);text-wrap:balance; } .promise{ font-family:var(--font-display);font-weight:400; font-size:var(--fs-promise);line-height:1.1;letter-spacing:-.01em; color:var(--text);text-wrap:balance; } h2,.h2{ font-family:var(--font-display);font-weight:400; font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.005em;color:var(--text); } h3,.h3{ font-family:var(--font-display);font-weight:400; font-size:var(--fs-h3);line-height:1.16;letter-spacing:-.005em;color:var(--text); } .intro,.lede{ font-family:var(--font-text);font-weight:400; font-size:var(--fs-intro);line-height:1.5;color:var(--text);max-width:60ch; } p,.body{font-family:var(--font-text);font-weight:400;font-size:var(--fs-body);line-height:1.6;color:var(--text);max-width:66ch} .body strong,p strong{font-weight:600;color:var(--text)} /* Newsreader has a REAL 600 — the one place strong is honest */ /* eyebrow / label — versalitas or caps, the workhorse that replaces bold */ .eyebrow,.label{ font-family:var(--font-label);font-weight:400; font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase; color:var(--text-muted);display:inline-flex;align-items:center;gap:10px; } .eyebrow i,.label i{ width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:0 0 auto; box-shadow:0 0 7px rgba(0,174,239,.55); } .caption,.meta{ font-family:var(--font-text);font-size:var(--fs-caption);line-height:1.45; letter-spacing:.01em;color:var(--text-muted);max-width:56ch; } /* the make-real accent — a single word/phrase can catch the gradient (rationed) */ .make-real{ background:var(--grad-make-real-90);-webkit-background-clip:text;background-clip:text; color:transparent;font-family:inherit; } /* one magenta word per major headline maximum */ .accent{color:var(--accent-text)} /* ============================================================================= 5. THE WORDMARK — sacred. lowercase, magenta cx, single weight. (L16) ============================================================================= */ .wordmark{ font-family:var(--font-display);font-weight:400; letter-spacing:-.01em;color:var(--text);line-height:1; font-feature-settings:"kern" 1,"liga" 1;font-synthesis:none; text-transform:lowercase;white-space:nowrap; } .wordmark .cx{color:var(--magenta-press);letter-spacing:.005em} html[data-theme="tinta"] .wordmark .cx{color:var(--magenta)} /* on ink, real magenta reads */ .on-ink .wordmark,.footer .wordmark{color:var(--on-dark)} .on-ink .wordmark .cx,.footer .wordmark .cx{color:var(--magenta-pure)} /* ============================================================================= 6. NAV — fixed, transparent at top, frosts on scroll. Mark left; families + Alta Manufactura + Eventos + Empresas + Trabajos reales + Cotizar right. ============================================================================= */ .nav{ position:fixed;top:0;left:0;right:0;z-index:var(--z-chrome);display:block; --nav-line:color-mix(in srgb,var(--ink) 11%,transparent); transition:box-shadow var(--dur-2) ease; } /* frost lives on a ::before, NOT on .nav — a backdrop-filter on .nav would make it the containing block for the position:fixed mobile sheet and trap it inside the bar. */ .nav::before{content:"";position:absolute;inset:0;z-index:var(--z-nav-frost); background:color-mix(in srgb,var(--paper) 72%,transparent); backdrop-filter:saturate(1.3) blur(8px);-webkit-backdrop-filter:saturate(1.3) blur(8px); transition:background var(--dur-2) ease} .nav-inner{ display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*2); /* content-box + hero's exact horizontal padding → nav content lines up with page content */ box-sizing:content-box;max-width:1360px;margin-inline:auto;padding-inline:clamp(20px,5vw,84px); } /* TIER 1 — utility strip (WHO axis): quiet, collapses on scroll */ .nav-tier1{overflow:hidden;max-height:54px;border-bottom:1px solid var(--nav-line); transition:max-height var(--dur-2) var(--ease),opacity var(--dur-2) ease,border-color var(--dur-2) ease} /* tier-1 layout (r14 · retícula rimada) — three zones: ES/EN toggle (left) · negocio links (center) · search box (right). BALANCE óptico, no geométrico: ambos tiers usan el MISMO flex `justify-content:space-between` heredado de .nav-inner, así el centro queda a media distancia de sus flancos → aire lateral IZQ = aire lateral DER en cada tier, y ambos tiers riman el mismo balance. (Reemplaza r10/r11/r11b: el grid `1fr auto 1fr` fijaba el centro al eje del viewport, y como el flanco derecho —buscador/botones— pesa más que el izquierdo —toggle/marca—, dejaba el aire izquierdo ~2× el derecho; medido a 1920: 220 vs 110.) El eje compartido cae en el centro óptico entre los flancos (~57px a la izq del centro de viewport); los dos centros quedan a ±2px de ese eje. El piso de aire ≥16px lo garantiza el `gap` base de .nav-inner (flex-gap = separación MÍNIMA aun con holgura cero). */ .nav-tier1 .nav-inner{padding-block:9px} .nav-aud{display:flex;align-items:center;gap:clamp(14px,2vw,30px)} .nav-aud a{position:relative;font-family:var(--font-label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--text-muted);white-space:nowrap;cursor:pointer;transition:color var(--dur-1) ease} /* affordance: a magenta rule that grows left→right on hover/focus (ruling r6 · tier-1 legibilidad) */ .nav-aud a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:1px; background:var(--magenta-press);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease)} .nav-aud a:hover,.nav-aud a:focus-visible{color:var(--ink)} .nav-aud a:hover::after,.nav-aud a:focus-visible::after{transform:scaleX(1)} .nav-aud a[aria-current="page"]{color:var(--magenta-press)} .nav-aud a[aria-current="page"]::after{transform:scaleX(1)} /* tier-1 search — house-styled search box (ruling r10; WIRED r12 · JS-enriched combobox). position:relative anchors the results panel BELOW the pill; size (min/max-width) + focus ring untouched. */ .nav-search-box{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:178px;max-width:224px; background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--nav-line);border-radius:999px; padding:6px 15px;transition:border-color var(--dur-1) ease,background var(--dur-1) ease,box-shadow var(--dur-1) ease} .nav-search-box:focus-within{border-color:var(--magenta-press);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--magenta-press) 16%,transparent)} .nav-search-box svg{width:14px;height:14px;stroke:var(--text-muted);fill:none;stroke-width:1.7;flex:0 0 auto} /* strip WebKit's native searchfield chrome — the native inset field + browser focus ring drew a second, misaligned outline INSIDE the pill and bit the placeholder's first glyph on click. outline stays none because the accessible focus indicator lives on the CONTAINER via .nav-search-box:focus-within (house ring). padding-left keeps the text/ placeholder born clear of the rounded border in every engine. r11 */ .nav-search-input{flex:1 1 auto;min-width:0;background:none;border:0;outline:none; appearance:none;-webkit-appearance:none;margin:0;padding:0 0 0 3px; font-family:var(--font-text);font-size:12.5px;letter-spacing:.005em;color:var(--text)} .nav-search-input::-webkit-search-decoration, .nav-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} /* the accessible focus indicator is the CONTAINER ring (.nav-search-box:focus-within); suppress the global cyan :focus-visible outline (§16) on the inner input so it never double-rings inside the pill. Same pattern as .naiyel .n-field input. r11 */ .nav-search-input:focus-visible{outline:none} .nav-search-input::placeholder{color:var(--text-muted);opacity:.9} /* tier-1 search RESULTS PANEL (r12) — position:fixed so it ESCAPES .nav-tier1's overflow:hidden + max-height:54px (the scroll-collapse clip); JS anchors top/right to the pill's right edge each open and closes it on scroll (when tier-1 collapses). Rides above the mega panels (which now carry their own written step, `--z-nav-mega`). Same paper/hairline/shadow language as the header. Closed by default; JS flips [data-open] on the box. The reduced-motion tail (§18) neutralises the transition to instant. Su escalón (`--z-nav-search`) ordena SOLO dentro del header: como vive en `.nav`, que abre contexto en 40, este panel se compone arriba de los megas y del sheet, y por debajo de todo lo que en la raíz supere 40 (`.mnav-sticky` 44, `.persist` 45, `.skip` 60, la ficha 1000). Un número más alto aquí no lo sube por encima del header; sube su lugar dentro de él. */ .nav-search-panel{position:fixed;z-index:var(--z-nav-search);width:min(400px,86vw); background:var(--surface);border:1px solid var(--nav-line);border-radius:var(--radius); box-shadow:var(--lift-2);padding:6px;max-height:min(70vh,520px);overflow-y:auto; opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none; transition:opacity var(--dur-1) ease,transform var(--dur-1) ease} .nav-search-box[data-open="true"] .nav-search-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} .nsr-item{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:10px;text-decoration:none;cursor:pointer} .nsr-item .nsr-t{font-family:var(--font-display);font-size:14.5px;letter-spacing:-.005em;color:var(--text);line-height:1.25} .nsr-item .nsr-k{font-family:var(--font-label);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)} .nsr-item:hover,.nsr-item[aria-selected="true"]{background:color-mix(in srgb,var(--magenta-press) 8%,transparent)} .nsr-item:hover .nsr-t,.nsr-item[aria-selected="true"] .nsr-t{color:var(--magenta-press)} .nsr-empty{padding:11px 12px 12px;font-family:var(--font-text);font-size:13px;line-height:1.5;color:var(--text-muted)} .nsr-empty a{color:var(--magenta-press);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--magenta-press) 40%,transparent)} .nsr-empty a:hover{border-bottom-color:var(--magenta-press)} /* TIER 2 — product row (WHAT axis): the confident bar */ /* tier-2 rides the EXACT SAME reticle as tier-1 (r14) — brand (left) · puertas (center) · actions (right), same inherited flex `space-between`. Los bordes de contenido (marca y botón derecho) rima con los de tier-1 (mismo max-width + padding en .nav-inner); el aire lateral de las puertas rima con el de los negocio-links de tier-1. */ .nav-tier2 .nav-inner{padding-block:13px} /* scroll: collapse the utility strip, frost the whole bar */ .nav.scrolled{box-shadow:var(--lift-1)} .nav.scrolled::before{background:color-mix(in srgb,var(--paper) 90%,transparent)} .nav.scrolled .nav-tier1{max-height:0;opacity:0;border-color:transparent;pointer-events:none} .nav.scrolled .nav-tier2 .nav-inner{padding-block:10px} .nav .brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto} .nav .wordmark{font-size:21px} .nav-links{display:flex;align-items:center;gap:calc(var(--u)*2);flex-wrap:nowrap} .nav-links a{ position:relative;font-family:var(--font-display);font-weight:400;font-size:14px; letter-spacing:-.005em;color:var(--text-muted);white-space:nowrap;padding:4px 0; transition:color var(--dur-1) ease; } .nav-links a:hover,.nav-links a:focus-visible{color:var(--text)} .nav-links a[aria-current="page"]{color:var(--text)} .nav-links a::after{ content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;border-radius:1px; background:var(--grad-make-real-90);transition:right var(--dur-2) var(--ease); } .nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a[aria-current="page"]::after{right:0} /* right rail rides at calc(--u*1) so its content stays inside the symmetric side track at 1280 — keeps the puertas on the true axis without touching their spacing (r11) */ .nav .right{display:flex;align-items:center;gap:calc(var(--u)*1)} /* mega-menu trigger (Familias) — has-dropdown */ .nav-mega{position:static} .nav-mega>a::before{content:"";} /* El escalón del mega va ESCRITO (`--z-nav-mega`), no heredado del orden del documento. Antes corría en `z-index:auto`, así que se componía arriba de la barra sólo porque era el último descendiente posicionado de `.nav`; el primer hermano con z-index positivo que alguien agregara dentro de tier-2 lo habría tapado en silencio. Con el escalón escrito el panel queda por encima del frost (-1) y del contenido en flujo de la barra, y por debajo del sheet móvil y del buscador — el mismo orden de siempre, ahora garantizado. */ .nav-mega-panel{ position:absolute;top:calc(100% + 12px);left:50%;right:auto;transform:translate(-50%,-6px); z-index:var(--z-nav-mega); min-width:min(720px,92vw);max-width:calc(100vw - 40px);background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-lg);box-shadow:var(--lift-2);padding:calc(var(--u)*3); display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*3); opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-1) ease,transform var(--dur-1) ease; } .nav-mega-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} .nav-mega:hover .nav-mega-panel,.nav-mega:focus-within .nav-mega-panel{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0); } /* megas: todos los paneles centrados bajo la FILA (contexto = .nav-links), estilo Stripe. El puente anti-gap vive en el ::before del PANEL (solo activo cuando el panel está visible). */ .nav-links{position:relative} .nav-mega-col .mega-h{font-family:var(--font-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px} .nav-mega-col a{display:block;font-family:var(--font-display);font-size:15px;color:var(--text);padding:7px 0;letter-spacing:-.005em} .nav-mega-col a:hover{color:var(--ink)} /* letras sólidas; el acento vive en líneas (ley r9) */ /* mega SLIM — item-only panels; the editorial lead rail is gone. Panels run narrower and shorter, and the "ver todo" link drops to a discrete foot line (ruling r6 · 2026-07-15) */ .nav-mega-panel.mega-slim.cols-2{grid-template-columns:1fr 1fr;min-width:min(500px,90vw)} .nav-mega-panel.mega-slim.cols-3{grid-template-columns:1fr 1fr 1fr;min-width:min(680px,92vw)} .mega-foot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:calc(var(--u)*-1.5);padding-top:10px} .mega-foot .mega-go{font-family:var(--font-label);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta-press);display:inline-flex;align-items:center;gap:7px;transition:gap var(--dur-1) ease} .mega-foot .mega-go:hover,.mega-foot .mega-go:focus-visible{gap:11px} /* glosa-per-item — each mega link carries a one-line plain-language gloss (cold-read law v2.2: the menu must say what lives inside, never just the family name). */ .nav-mega-col .mega-item{padding:6px 0} .mega-item .mi-t{display:block;font-family:var(--font-display);font-size:14.5px;line-height:1.25;color:var(--text);letter-spacing:-.005em} .mega-item .mi-g{display:block;font-family:var(--font-text);font-size:11.5px;line-height:1.34;color:var(--text-muted);margin-top:1px} .mega-item:hover .mi-t{color:var(--ink)} /* ============================================================================= 7. BUTTONS — primary (ink fill), magenta (rationed), ghost, link-arrow. ============================================================================= */ .btn{ --btn-py:12px;--btn-px:18px; display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--font-display);font-weight:400;font-size:15px;letter-spacing:-.005em; padding:var(--btn-py) var(--btn-px);border-radius:11px;border:1px solid transparent; cursor:pointer;white-space:nowrap;text-align:center; transition:transform var(--dur-1) ease,background var(--dur-1) ease,border-color var(--dur-1) ease,box-shadow var(--dur-1) ease; } .btn:active{transform:translateY(0)} /* ink fill: --ink is the dark world's primary in papel and swaps to light in tinta, so background:var(--ink)/color:var(--paper) self-corrects across both worlds. */ .btn-primary{background:var(--ink);color:var(--paper);box-shadow:var(--lift-1)} .btn-primary:hover{transform:translateY(-1px);box-shadow:var(--lift-2)} .btn-mag{background:linear-gradient(177deg,#E7318A 0%,#CE1E70 46%,#A9134F 100%);color:#FCEFF5;border-radius:999px; letter-spacing:.014em; box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -9px 18px -10px rgba(120,8,50,.55), 0 2px 5px rgba(120,8,50,.26),0 14px 30px -10px rgba(169,19,79,.5), 0 28px 52px -22px rgba(120,8,50,.4); transition:transform var(--dur-1) ease,box-shadow var(--dur-1) ease,background var(--dur-1) ease} .btn-mag:hover{background:linear-gradient(177deg,#F13E97 0%,#DA277C 46%,#B21657 100%); transform:translateY(-2px) scale(1.025); box-shadow:inset 0 1px 0 rgba(255,255,255,.36),inset 0 -9px 18px -10px rgba(120,8,50,.55), 0 4px 10px rgba(120,8,50,.30),0 20px 40px -12px rgba(169,19,79,.58), 0 36px 66px -26px rgba(120,8,50,.46)} .ed-cta .btn-lg{--btn-py:17px;--btn-px:30px;font-size:16.5px} /* outline pill — secondary action (Marketplace) beside the magenta primary */ .link-arrow{position:relative} .link-arrow::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.6px;border-radius:1px;background:var(--grad-make-real-90);transition:right var(--dur-2) var(--ease)} .link-arrow:hover{color:inherit} .link-arrow:hover::after,.link-arrow:focus-visible::after{right:0} .btn-line{background:transparent;color:var(--text);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:999px} /* "el botón que se enciende" — ley de sistema para TODO botón sin fondo (founder 2026-07-09): al hover el contorno se vuelve el gradiente make-real (anillo via mask) y el texto se enciende. */ .btn-line,.btn-ghost{position:relative;isolation:isolate} .btn-line::before,.btn-ghost::before{content:"";position:absolute;inset:-1px;border-radius:inherit; padding:1.5px;background:var(--grad-make-real-90); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude; opacity:0;transition:opacity var(--dur-1) ease;pointer-events:none} .btn-line:hover::before,.btn-line:focus-visible::before, .btn-ghost:hover::before,.btn-ghost:focus-visible::before{opacity:1} .btn-line:hover,.btn-line:focus-visible{border-color:transparent;transform:translateY(-1px); color:var(--ink)} /* el gradiente vive SOLO en el anillo; letras sólidas (founder r9) */ .pill{border-radius:999px} /* nav actions run a touch tighter than page buttons */ .nav .right .btn{--btn-py:9px;--btn-px:14px;font-size:13.5px} .btn-ghost{background:transparent;color:var(--text);border-color:var(--line)} .btn-ghost:hover,.btn-ghost:focus-visible{border-color:transparent;transform:translateY(-1px); color:var(--ink)} .btn-lg{--btn-py:15px;--btn-px:24px;font-size:16px} .btn-block{width:100%} .link-arrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-display);font-size:15px;color:var(--text);letter-spacing:-.005em; transition:gap var(--dur-1) ease,color var(--dur-1) ease; } .link-arrow .arr{color:var(--magenta-press);transition:transform var(--dur-1) ease} .link-arrow:hover{color:var(--ink)} /* letras sólidas; el gradiente vive en el subrayado */ .link-arrow:hover .arr{transform:translateX(4px)} /* "Así trabajamos →" — the trust micro-link that precedes every CTA */ .trabajamos-link{ display:inline-flex;align-items:center;gap:7px; font-family:var(--font-text);font-size:var(--fs-caption);color:var(--text-muted); border-bottom:1px solid var(--line);padding-bottom:1px;transition:color var(--dur-1) ease,border-color var(--dur-1) ease; } .trabajamos-link:hover{color:var(--magenta-press);border-color:color-mix(in srgb,var(--magenta) 45%,transparent)} /* ============================================================================= 8. CARDS — the surface primitive the Apple-Vision scroll animates. ============================================================================= */ .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:calc(var(--u)*3.25) calc(var(--u)*3); transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease); } .card:hover{transform:translateY(-3px);box-shadow:var(--lift-2);border-color:color-mix(in srgb,var(--ink) 16%,transparent)} .card .ci{font-family:var(--font-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta-press);margin-bottom:10px;display:flex;align-items:center;gap:9px} .card h3{margin-bottom:8px} .card .card-body{color:var(--text-muted);font-size:var(--fs-body);line-height:1.55} /* media frame — the slot where world-class AI media drops; premium CSS placeholder now */ .media-frame{ position:relative;width:100%;aspect-ratio:4/3;overflow:hidden; border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line-2); } .media-frame.tall{aspect-ratio:3/4} .media-frame.wide{aspect-ratio:16/9} .media-frame img,.media-frame video{width:100%;height:100%;object-fit:cover} /* the intentional "media coming" composition — soft make-real wash + macro-crop feel, so an unfilled slot still reads composed and expensive, never broken */ .media-frame.placeholder::before{ content:"";position:absolute;inset:0; background: radial-gradient(120% 90% at 30% 20%,rgba(0,174,239,.14),transparent 55%), radial-gradient(120% 100% at 82% 88%,rgba(225,0,117,.16),transparent 58%), var(--paper-2); } .media-frame.placeholder::after{ content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply; background-image:radial-gradient(rgba(20,18,26,.05) 1px,transparent 1.4px);background-size:5px 5px; } .media-frame .media-note{ position:absolute;left:12px;bottom:12px;z-index:2; font-family:var(--font-label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--text-muted);background:color-mix(in srgb,var(--surface) 82%,transparent); border:1px solid var(--line);border-radius:999px;padding:4px 10px;backdrop-filter:blur(4px); } /* ============================================================================= 9. SECTIONS + BANDS — light gallery default; ink band for the "how"/close. ============================================================================= */ .section{padding-block:clamp(56px,9vh,120px)} .section-tight{padding-block:clamp(40px,6vh,72px)} .band-ink{position:relative;z-index:2;background:var(--ink-2);color:var(--on-dark)} .band-ink .h1,.band-ink h2,.band-ink h3,.band-ink .promise,.band-ink .hero-h{color:var(--on-dark)} .band-ink p,.band-ink .body,.band-ink .intro{color:var(--on-dark-muted)} .band-ink .eyebrow{color:var(--on-dark-muted)} .band-paper-2{background:var(--paper-2)} .sec-head{margin-bottom:calc(var(--u)*5);max-width:34ch} .sec-head h2{margin-top:calc(var(--u)*1.5)} /* ============================================================================= 9.1 · RITMO DE BANDA — el respiro es un TOKEN, jamás un número por página. LEY (founder 2026-07-29). Toda banda respira `--band-py` arriba y abajo. Una banda solo se CIÑE (`--band-py-tight`) cuando la banda ANTERIOR cierra con un objeto que ya trae su propio aire — hoy únicamente el sobre de la carta. Por eso la excepción se declara por la PAREJA (`.rx-carta + …`) y nunca por la clase suelta: una banda ceñida que hereda otro vecino pega su título contra lo de arriba. Así nacieron los dos catches del founder — marketplace («CÓMO VA A FUNCIONAR», `.rx-g` con 15px tras el hero) y relieve («EL OFICIO», banda sin clase con 0px tras la rockola). ============================================================================= */ /* PISO, no techo. Los `:not()` van dentro de `:where()` para que la regla pese (0,1,0) y cualquier `.rx-*` de página la gane: si la subieran a (0,3,0) el piso aplastaría el `padding-top:clamp(124px,14vh,160px)` del hero, que es lo único que libra el nav fijo (NEFASTA C3.2). El piso solo viste a la banda que no declaró el suyo. */ .band:where(:not(.section)):where(:not(.section-tight)){padding-block:var(--band-py)} .band.rx-g,.band.rx-fams{padding-top:var(--band-py)} .rx-carta+.band.rx-g,.rx-carta+.band.rx-fams{padding-top:var(--band-py-tight)} /* ============================================================================= 9.2 · LA COSTURA — dos bandas de la MISMA paleta jamás se tocan con línea dura. LEY (founder 2026-07-29). La banda entrante nace con el tono con que cerró la saliente y lo disuelve sobre su propio respiro superior. El corte duro sobrevive SOLO donde es deliberado: la frontera con una banda NOCTURNA. Tres propiedades que hacen la regla segura y universal: · AUTO-ANULABLE — donde el encadenado ya era continuo, la costura pinta el mismo color sobre el mismo color y desaparece. No puede romper nada. · A PRUEBA DE HUECOS — sin tono declarado, `--seam-from` queda transparente y la costura es un no-op. Una clase nueva jamás rompe, solo no cose. · NUNCA PISA CONTENIDO — la costura solo cubre el respiro superior de su propia banda; donde `--seam` lo excede, el envoltorio se pinta encima. Verificado por pixel-diff: cada título de banda renderiza byte-idéntico con la costura encendida y apagada, a 1440 y a 390. La rampa es EASED, no lineal: una rampa lineal deja banda de Mach en los dos extremos y el ojo vuelve a leer una línea justo donde la queríamos borrar. ============================================================================= */ .band:not(:first-child){position:relative;--seam-h:var(--seam);--seam-from:transparent} .band:not(:first-child)::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--seam-h); pointer-events:none;z-index:0; background:linear-gradient(180deg, var(--seam-from) 0%, color-mix(in srgb,var(--seam-from) 58%,transparent) 36%, color-mix(in srgb,var(--seam-from) 20%,transparent) 68%, transparent 100%)} /* El contenido siempre por encima de la costura. `position:relative` A SECAS y SIN z-index: basta para que el envoltorio se pinte después del ::before (orden de árbol dentro de la misma capa) y, al no crear contexto de apilamiento, el modal de la carta (`position:fixed;z-index:1000`) sigue escapando por encima del nav. Poner `z-index:1` aquí lo encerraría y el lightbox quedaría debajo del chrome. Se excluyen los overlays que ya son absolutos por diseño (`.reg`, `.ed-grain`) y el `` de la ficha. */ .band:not(:first-child)>*:not(.reg):not(.ed-grain):not(dialog):not(script):not(style){position:relative} /* con qué tono CIERRA cada banda — la tabla de fronteras de la casa */ .rx-hero+.band,.rx-g+.band,.rx-f+.band,.rx-rieles+.band,.rx-mem+.band, .rx-fams+.band,.rx-busca+.band,.rx-cat+.band,.rx-cats+.band,.rx-map+.band, .rx-read+.band,.rx-entradas+.band,.rx-piso+.band, .rx-b-paper+.band,.rx-b-warm2+.band,.rx-b-cream2+.band{--seam-from:var(--tone-paper)} /* `.ed-hero` no cierra en papel puro: su propio ::before lo entinta. El tono real, MEDIDO en pixel (no inferido del token), es #F5EFE7. */ .ed-hero+.band{--seam-from:#F5EFE7} /* LA PORTADA. Sus escenas se llamaban `.section`/`.section-tight` y por eso vivían FUERA del sistema: las 4 fronteras de día nacían a filo (17.6 · 21.8 · 21.8 · 23.8 dE/px medidos a 1440). Hoy son bandas de pleno derecho. El collage del hero tampoco cierra en papel puro — su grano lo entinta —, así que su tono va MEDIDO en pixel, igual que `.ed-hero`. */ .hero-collage+.band{--seam-from:#F3EDE5} .s2+.band,.s3+.band,.s5+.band{--seam-from:var(--tone-paper)} .rx-carta+.band,.rx-b-warm+.band{--seam-from:var(--tone-carta)} .rx-cf+.band,.rx-ap+.band,.rx-hilo+.band,.rx-tintero+.band, .rx-cadencia+.band,.rx-b-cream+.band,.rx-puertas+.band{--seam-from:var(--tone-crema)} .lm+.band,.rx-arsenal+.band,.band-paper-2+.band{--seam-from:var(--tone-lino)} .rx-cap+.band,.rx-chat+.band{--seam-from:var(--tone-ficha)} .band-surface+.band{--seam-from:var(--tone-surface)} /* EL CORTE DURO DELIBERADO — la banda nocturna entra y sale a filo, sin degradado. `.rx-puertas` lleva `.band-ink` pero repinta su fondo en día, así que cose. */ .band-ink:not(.rx-puertas)+.band,.rx-b-ink+.band,.q-close+.band, .band+.band-ink:not(.rx-puertas),.band+.q-close,.band+.rx-b-ink, .band.seam-hard{--seam-h:0px} /* la pareja ceñida no cose: su respiro es menor que la costura y el tono ya venía continuo */ .rx-carta+.band.rx-g,.rx-carta+.band.rx-fams{--seam-h:0px} /* ============================================================================= 10. THE APPLE-VISION SCROLL — card reveal engine (below the fold only). app.js adds .in-view via IntersectionObserver; reduced-motion shows all. ============================================================================= */ .reveal{opacity:0;transform:translateY(22px); transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)} .reveal.in-view{opacity:1;transform:none} .reveal-stagger>*{opacity:0;transform:translateY(20px); transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)} .reveal-stagger.in-view>*{opacity:1;transform:none} .reveal-stagger.in-view>*:nth-child(2){transition-delay:.06s} .reveal-stagger.in-view>*:nth-child(3){transition-delay:.12s} .reveal-stagger.in-view>*:nth-child(4){transition-delay:.18s} .reveal-stagger.in-view>*:nth-child(5){transition-delay:.24s} .reveal-stagger.in-view>*:nth-child(6){transition-delay:.30s} /* scroll-linked contrast-shift beat: a section can cross-fade its register as it enters */ .beat{--beat:0;transition:none} /* ============================================================================= 11. HERO — self-contained one-screen still with restrained ambient motion. Fits 1440/768/375. The Apple-Vision scroll is NOT here. (§3 hero solution) ============================================================================= */ .hero{ position:relative;z-index:2; min-height:100svh;min-height:100dvh; display:grid;align-items:center; padding:clamp(96px,13vh,150px) var(--gutter) clamp(48px,7vh,80px); } .hero .shell{width:100%} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:clamp(28px,4vw,64px)} .hero-copy{max-width:38ch} .hero .promise .make-real,.hero .hero-h .make-real{font-family:inherit} /* the ONE meaningful gradient breathing under the wordmark/hero (≤8s, reduced-motion→still) */ .hero-breath{ position:absolute;z-index:-1;inset:auto; width:min(60vw,640px);aspect-ratio:1;border-radius:50%; filter:blur(46px);opacity:.5;pointer-events:none; background:radial-gradient(circle at 38% 34%,rgba(0,174,239,.55),transparent 62%), radial-gradient(circle at 66% 70%,rgba(225,0,117,.5),transparent 60%); animation:breath 8s var(--ease) infinite alternate; } @keyframes breath{ from{transform:translate3d(0,0,0) scale(1);opacity:.42} to{transform:translate3d(2%,-2%,0) scale(1.06);opacity:.56} } /* the object cluster — "la banda" — parallax drift (≤8s). Holds SVG silhouettes or media. */ .hero-stage{position:relative;aspect-ratio:1;width:100%;max-width:560px;margin-inline:auto} .hero-stage .drift{will-change:transform;transition:transform .1s linear} .hero-parallax{animation:drift 8s var(--ease) infinite alternate} @keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-10px,0)}} /* ============================================================================= 12. THE ACABADO BEFORE/AFTER — CSS/canvas compositor primitive (one chapter). Two layers + a draggable divider; app.js wires the handle. No photos faked. ============================================================================= */ .baf{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden; border:1px solid var(--line);background:var(--paper-2);touch-action:pan-y;user-select:none;isolation:isolate} .baf-layer{position:absolute;inset:0} .baf-after{clip-path:inset(0 0 0 var(--split,50%))} .baf-handle{ position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;transform:translateX(-1px); background:var(--grad-make-real);z-index:3;cursor:ew-resize; } .baf-handle::after{ content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--line); box-shadow:var(--lift-2); } .baf-tag{position:absolute;bottom:12px;z-index:4;font-family:var(--font-label);font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted); background:color-mix(in srgb,var(--surface) 84%,transparent);border:1px solid var(--line); border-radius:999px;padding:4px 10px;backdrop-filter:blur(4px)} .baf-tag.a{left:12px}.baf-tag.b{right:12px} /* ============================================================================= 13. THE PERSISTENT LAYER — WhatsApp lane + Naiyel seat. Fixed bottom-right. Naiyel: cyan, her own space, NEVER above the mark. WhatsApp: prefill/page. Suppressed at /empresas RFQ + /eventos urgency (add .suppress-naiyel on ). ============================================================================= */ .persist{ position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,26px);z-index:var(--z-persist); display:flex;flex-direction:column;align-items:flex-end;gap:12px; max-width:min(340px,calc(100vw - 28px)); } /* Naiyel seat — the in-page front-door agent (designed placeholder in M4) */ .naiyel{ display:none;position:relative; width:100%;background:var(--ink-2);color:var(--on-dark); border:1px solid rgba(0,174,239,.24);border-radius:var(--radius-lg); padding:14px 15px;box-shadow:var(--lift-2); transform-origin:bottom right; animation:naiyel-pop .28s var(--ease) both; } @keyframes naiyel-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}} .naiyel-x{position:absolute;top:8px;right:9px;width:22px;height:22px;border:0;cursor:pointer; background:transparent;color:var(--on-dark-muted);font-size:19px;line-height:1;border-radius:6px; display:flex;align-items:center;justify-content:center;transition:color var(--dur-1) ease} .naiyel-x:hover{color:var(--on-dark)} .naiyel .who{ font-family:var(--font-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--cyan);margin-bottom:7px;display:flex;align-items:center;gap:9px; } .naiyel .who b{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:0 0 auto; box-shadow:0 0 8px rgba(0,174,239,.85)} .naiyel .who b.live{animation:pulse 2.4s var(--ease) infinite} @keyframes pulse{0%,100%{box-shadow:0 0 8px rgba(0,174,239,.85)}50%{box-shadow:0 0 14px rgba(0,174,239,1)}} .naiyel .n-msg{font-family:var(--font-text);font-size:13.5px;line-height:1.45;color:var(--on-dark);margin-bottom:10px} .naiyel .n-field{display:flex;gap:8px;align-items:center;background:rgba(250,247,242,.06); border:1px solid rgba(250,247,242,.14);border-radius:11px;padding:8px 8px 8px 12px; transition:border-color var(--dur-1) ease,box-shadow var(--dur-1) ease} /* el foco vive en el CAMPO completo — un solo pill, nada recortado adentro */ .naiyel .n-field:focus-within{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(0,174,239,.30)} .naiyel .n-field input:focus-visible{outline:none} .naiyel .n-field input{flex:1;min-width:0;border:0;background:transparent;color:var(--on-dark); font-family:var(--font-text);font-size:13.5px;line-height:1.4;padding:5px 0} .naiyel .n-field input::placeholder{color:var(--on-dark-muted)} .naiyel .n-field button{flex:0 0 auto;border:0;cursor:pointer;background:var(--cyan);color:#04222c; width:30px;height:30px;border-radius:8px;font-size:15px;line-height:1; transition:transform var(--dur-1) ease,background var(--dur-1) ease} .naiyel .n-field button:hover{transform:translateY(-1px);background:#3cc4f5} /* Naiyel → WhatsApp handoff — discreet link inside the open seat (stage 2 wires context) */ .naiyel .n-wa{display:inline-block;margin-top:12px;font-family:var(--font-label);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted);text-decoration:none;transition:color var(--dur-1) ease} .naiyel .n-wa:hover,.naiyel .n-wa:focus-visible{color:var(--cyan)} /* Naiyel one-time greeting — discreet bubble above the collapsed seat; invisible until JS adds .show (stage 2 = per-session) */ .naiyel-hello{position:absolute;right:2px;bottom:calc(100% + 12px);z-index:46; display:inline-flex;align-items:center;gap:9px;white-space:nowrap;cursor:pointer; padding:9px 11px 9px 14px;border-radius:14px; background:var(--ink-2);color:var(--on-dark);border:1px solid rgba(0,174,239,.28); box-shadow:0 12px 32px -14px rgba(23,20,28,.55); font-family:var(--font-text);font-size:13px;line-height:1; opacity:0;transform:translateY(6px);pointer-events:none; transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)} /* La burbuja se muestra y NO intercepta el puntero (ruling founder 2026-07-29). Medido antes del arreglo a 390 y 430: la burbuja se posa encima del enlace «Una casa de Shiba Group Co.» del pie, con 2235 px² de solape, y durante sus 6.5 s de vida elementFromPoint sobre el centro del enlace devolvía .nh-txt, o sea el enlace quedaba muerto. Con pointer-events:none el clic atraviesa la burbuja y el enlace vuelve a responder; el chat se sigue abriendo por su propio botón .naiyel-toggle, que jamás estuvo tapado. La burbuja ya declaraba role="status", así que dejar de ser clicable alinea el comportamiento con lo que el markup siempre dijo que era. Falsable: devuelve el valor a auto y el enlace del holding se vuelve a morir en ambos anchos. */ .naiyel-hello.show{opacity:1;transform:none;pointer-events:none} .naiyel-hello::after{content:"";position:absolute;right:17px;bottom:-6px;width:11px;height:11px; background:var(--ink-2);border-right:1px solid rgba(0,174,239,.28);border-bottom:1px solid rgba(0,174,239,.28); transform:rotate(45deg)} .naiyel-hello .nh-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan); box-shadow:0 0 8px rgba(0,174,239,.85);flex:0 0 auto} .naiyel-hello .nh-txt{font-weight:500} .naiyel-hello .nh-x{border:0;background:transparent;color:var(--on-dark-muted);cursor:pointer; font-size:16px;line-height:1;padding:0 1px;border-radius:5px;transition:color var(--dur-1) ease} .naiyel-hello .nh-x:hover{color:var(--on-dark)} /* r11b · D1 — the desktop WhatsApp orb (.wa-lane) retired from the persistent stack: single front door = Naiyel. Its markup left the 60 live pages, so the orb rules are pruned here (used-vs-defined audited). The one WhatsApp exit now lives as a discreet handoff link inside the open seat (.naiyel .n-wa) on desktop and as the small .mnav-wa glyph in the mobile action bar. */ /* collapsed state on small screens — Naiyel folds to a tab (single launcher) */ .naiyel[hidden]{display:none} .naiyel-toggle{ align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;cursor:pointer; width:48px;height:48px;padding:0;font-size:0; background:var(--ink-2);color:var(--cyan);border:1px solid rgba(0,174,239,.28); border-radius:50%;box-shadow:var(--lift-2); } .naiyel-toggle b{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px rgba(0,174,239,.85);animation:breatheDot 2.2s ease-in-out infinite} @keyframes breatheDot{0%,100%{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:scale(1.12)}} @media (prefers-reduced-motion:no-preference){.eyebrow i{animation:breatheDot 2.6s ease-in-out infinite}} .naiyel-toggle:hover{transform:translateY(-2px) scale(1.05)} body.suppress-naiyel .naiyel,body.suppress-naiyel .naiyel-toggle{display:none} /* opens only on intent — the launcher pill stays as the persistent, calm entry (all viewports) */ body.naiyel-open .naiyel{display:block} /* ============================================================================= 14. FOOTER — ink band, three groups per SITE_MAP, one Cotizar, wordmark. ============================================================================= */ .footer{position:relative;z-index:var(--z-page);background:var(--ink-2);color:var(--on-dark); padding:clamp(56px,8vh,88px) 0} .footer .wordmark{font-size:23px} /* zone 1 — brand row: seal beside wordmark + promise + quiet delivery line + tiny © + mini CTA */ .footer .brand-seal .bs-x,.footer .brand-seal .bs-dot{fill:#E83B93} .footer .brand-seal .bs-ring,.footer .brand-seal .bs-c{stroke:none} .footer .brand-seal .bs-ring{fill:none;stroke:#FAF7F2;opacity:.9} .footer .brand-seal .bs-c{fill:#FAF7F2} .footer-strip{grid-column:1/-1;width:100%;max-width:none;margin:calc(var(--u)*5) 0 0;padding-top:calc(var(--u)*3);border-top:1px solid rgba(250,247,242,.10);font-family:var(--font-text);font-size:14px;line-height:1.7;color:var(--on-dark-muted);text-align:left} /* zone 2 — four link columns on one baseline; strong headers, calm 14/1.9 links. The columns are the footer's LAST row — the band's own bottom padding closes it with intention. */ .footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*4);align-items:start} .footer-col .fh{font-family:var(--font-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--on-dark);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(250,247,242,.12)} .footer-col a{display:block;font-family:var(--font-display);font-size:14px;line-height:1.9; color:var(--on-dark-muted);padding:0;letter-spacing:-.005em;transition:color var(--dur-1) ease} .footer-col a:hover{color:var(--cyan)} /* día/noche toggle lives in the nav */ .theme-toggle{ display:inline-flex;align-items:center;gap:9px;cursor:pointer; background:transparent;border:1px solid var(--line);border-radius:999px; padding:8px 13px;color:var(--text); font-family:var(--font-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase; transition:border-color var(--dur-1) ease,color var(--dur-1) ease; } .footer .theme-toggle{border-color:rgba(250,247,242,.18);color:var(--on-dark)} .theme-toggle:hover{border-color:var(--cyan);color:var(--cyan)} .theme-toggle .ico{width:15px;height:15px} /* ============================================================================= 15. FORMS — the conversation-first primitives (experience/message before qty). ============================================================================= */ .field{display:flex;flex-direction:column;gap:7px} .field label{font-family:var(--font-label);font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-muted)} .field input,.field textarea,.field select{ border:1px solid var(--line);background:var(--surface);border-radius:11px; padding:12px 14px;font-family:var(--font-text);font-size:15px;color:var(--text);width:100%; transition:border-color var(--dur-1) ease,box-shadow var(--dur-1) ease; } .field textarea{min-height:120px;resize:vertical;line-height:1.5} .field input::placeholder,.field textarea::placeholder{color:var(--text-muted)} .consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-caption);color:var(--text-muted)} .consent input{accent-color:var(--magenta-press);margin-top:3px;flex:0 0 auto} .consent a{color:var(--magenta-press);text-decoration:underline;text-underline-offset:2px} /* ============================================================================= 16. ACCESSIBILITY — focus-visible everywhere, skip link, sr-only. (E3/A5) ============================================================================= */ :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{ outline:2px solid var(--cyan-deep);outline-offset:2px;border-radius:6px; } html[data-theme="tinta"] :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline-color:var(--cyan)} .skip{position:fixed;left:12px;top:-64px;z-index:var(--z-skip);background:var(--ink);color:var(--paper); padding:10px 16px;border-radius:9px;font-family:var(--font-display);font-size:14px;transition:top var(--dur-1) ease} .skip:focus{top:12px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ============================================================================= 17. RESPONSIVE — 1440 / 768 / 375. The hero fits at 100% at every stop. ============================================================================= */ @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;gap:calc(var(--u)*5)} .hero-copy{max-width:60ch} .hero-stage{max-width:440px;order:-1} .nav-mega-panel{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr;gap:calc(var(--u)*4)} } @media (max-width:1180px){ /* two-tier collapses to the sheet: utility strip, product links + actions all move in. the five v2.2 puertas carry long labels ("Ideas por ocasión" ×4), so the desktop row needs a wide bar — below this the clean burger takes over instead of clipping. */ .nav-tier1{display:none} .nav-links{display:none} .nav-tier2 .right{display:none} /* below the fold the sheet takes over — tier-2 drops the desktop reticle back to the original flex row (brand · burger), untouched by the r11 grid above */ .nav-tier2 .nav-inner{display:flex;column-gap:calc(var(--u)*2)} } @media (max-width:768px){ .footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))} /* el launcher de Naiyel flota ARRIBA de la barra sticky (Naiyel · Marketplace · WhatsApp) */ .persist{bottom:calc(104px + env(safe-area-inset-bottom));right:12px;z-index:46} .naiyel-toggle{width:46px;height:46px} } @media (max-width:768px){ body.nv-kb .persist{bottom:auto;top:8px} body.nv-kb .naiyel{max-height:42vh;overflow:auto} } @media (max-width:520px){ .footer-grid{grid-template-columns:1fr 1fr;gap:calc(var(--u)*2.5) calc(var(--u)*3)} .footer .brand-seal .bs-x,.footer .brand-seal .bs-dot{fill:#E83B93} .footer .brand-seal .bs-ring,.footer .brand-seal .bs-c{stroke:none} .footer .brand-seal .bs-ring{fill:none;stroke:#FAF7F2;opacity:.9} .footer .brand-seal .bs-c{fill:#FAF7F2} .footer-strip{grid-column:1/-1;width:100%;max-width:none;margin:calc(var(--u)*5) 0 0;padding-top:calc(var(--u)*3);border-top:1px solid rgba(250,247,242,.10);font-family:var(--font-text);font-size:14px;line-height:1.7;color:var(--on-dark-muted);text-align:left} .persist{left:clamp(14px,3vw,28px);align-items:flex-end} } /* the mobile sheet nav (details/summary — no-JS-safe) */ .mnav{display:none;position:relative} @media (max-width:1180px){ .mnav{display:block} } .mnav summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px; font-family:var(--font-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);padding:8px 6px} .mnav summary::-webkit-details-marker{display:none} .mnav .bars{position:relative;width:20px;height:13px;flex:0 0 auto} .mnav .bars::before,.mnav .bars::after,.mnav .bars span{content:"";position:absolute;left:0;right:0;height:1.6px;background:var(--text);border-radius:2px;transition:transform var(--dur-1) var(--ease),top var(--dur-1) var(--ease)} .mnav .bars::before{top:0}.mnav .bars span{top:5.5px}.mnav .bars::after{top:11px} .mnav[open] .bars::before{top:5.5px;transform:rotate(45deg)} .mnav[open] .bars span{opacity:0} .mnav[open] .bars::after{top:5.5px;transform:rotate(-45deg)} .mnav-panel{position:fixed;inset:64px 0 0;z-index:var(--z-nav-sheet);background:var(--paper); padding:calc(var(--u)*3) var(--gutter) calc(var(--u)*6);overflow-y:auto; display:flex;flex-direction:column;gap:6px} .mnav-tag{font-family:var(--font-label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--text-muted);margin:calc(var(--u)*3) 0 calc(var(--u)*1)} .mnav-panel a{font-family:var(--font-display);font-size:17px;color:var(--text);padding:11px 12px;border-radius:10px;letter-spacing:-.005em} .mnav-panel a:hover{background:var(--surface);color:var(--magenta-press)} .mnav-lang{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--font-label);font-size:12px;letter-spacing:.14em;color:var(--text-muted)} .mnav-lang .on{color:var(--text)}.mnav-lang a{display:inline;padding:0;color:var(--magenta-press)} .mnav-sticky{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);display:none;gap:10px; padding:12px var(--gutter);background:color-mix(in srgb,var(--paper) 90%,transparent); backdrop-filter:blur(10px);border-top:1px solid var(--line)} /* r11b · D2 — the two doors (Naiyel primario · Marketplace) share the bar; .mnav-wa is the discreet WhatsApp glyph that closes it. Its inline style carries the quiet look (flex:0 0 auto · opacity ~.62 · color:var(--text)); base guarantees a dignified 44×44 touch target (min-width beats the inline 42px width, min-height sets the floor) and a small press-settle. Hierarchy = magenta fill vs outline vs bare icon. */ .mnav-wa{min-width:44px;min-height:44px;border-radius:10px; transition:opacity var(--dur-1) ease,color var(--dur-1) ease,transform var(--dur-1) ease} .mnav-wa:active{transform:translateY(1px)} @media (max-width:768px){ .mnav-sticky{display:flex} .mnav-sticky .btn{flex:1;white-space:nowrap} } @media (max-width:420px){ .mnav-sticky .btn{--btn-px:12px;font-size:14px} } /* ============================================================================= 18. REDUCED-MOTION — the honest floor. Every choreography degrades to a still. (E4 chk-reduced-motion: this CSS block + app.js gate must BOTH exist.) ============================================================================= */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .hero-breath,.hero-parallax{animation:none} .reveal,.reveal-stagger>*{opacity:1;transform:none;transition:none} body{transition:none} } /* ============================================================================= CRAFT-SLOT — designed "material sample" panel for media zones. A labeled swatch of the real material + technique (warm stock, a giant faded foil [cx] watermark, a Hedvig object title with a foil accent, magenta rule, spec line, registration marks). Honest catalogue sample, never a faked photo, never an empty frame. ============================================================================= */ .craft-slot{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius); background:linear-gradient(158deg,#fdfbf5,#f2ead9 72%,#eadfca);border:1px solid var(--line-2); display:flex;align-items:flex-end;isolation:isolate} .craft-slot.tall{aspect-ratio:3/4}.craft-slot.wide{aspect-ratio:16/10} html[data-theme="tinta"] .craft-slot{background:linear-gradient(158deg,#221d2d,#191521 72%,#141019);border-color:rgba(250,247,242,.08)} .craft-slot.m-crystal{background:linear-gradient(150deg,#eef3f6,#e3ebf0 60%,#d9e5ec)} .craft-slot.m-textile{background:linear-gradient(150deg,#f6f1ec,#efe6da 60%,#e6d8c6)} .craft-slot.m-ink{background:linear-gradient(150deg,#f4f1ec,#e8e2d7 60%,#ded6c8)} html[data-theme="tinta"] .craft-slot.m-crystal{background:linear-gradient(150deg,#1b2431,#161d28 60%,#121722)} html[data-theme="tinta"] .craft-slot.m-textile{background:linear-gradient(150deg,#241d16,#1b1610 60%,#14100a)} .craft-slot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(120% 90% at 82% 14%,rgba(225,0,117,.05),transparent 56%), radial-gradient(100% 100% at 6% 96%,rgba(176,132,74,.10),transparent 60%)} .craft-slot .cs-mark{position:absolute;right:-3%;top:44%;transform:translateY(-50%);z-index:1; font-family:var(--font-display);font-size:clamp(8rem,20vw,14rem);line-height:.8; background:linear-gradient(96deg,#c79a52,#f3dda0,#b98a3f);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent;opacity:.15;pointer-events:none;white-space:nowrap;letter-spacing:.01em} html[data-theme="tinta"] .craft-slot .cs-mark{opacity:.2} .craft-slot .cs-body{position:relative;z-index:2;padding:clamp(20px,3vw,36px);max-width:82%} .cs-kicker{font-family:var(--font-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:.5;display:block;margin-bottom:12px} .cs-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1.02;letter-spacing:-.01em;color:var(--ink);display:block} .cs-title .foil-w{background:linear-gradient(96deg,#7c4e22,#d5a457,#fff2cf,#c1913f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .cs-rule{display:block;width:48px;height:2px;background:var(--magenta);margin:15px 0 13px;border-radius:2px} .cs-spec{font-family:var(--font-text);font-style:italic;font-size:clamp(13px,1.1vw,15px);color:var(--ink);opacity:.72} .craft-slot .cs-reg{position:absolute;z-index:3;width:14px;height:14px;opacity:.34;border:1px solid var(--ink);border-radius:50%} .craft-slot .cs-reg::before,.craft-slot .cs-reg::after{content:"";position:absolute;background:var(--ink)} .craft-slot .cs-reg::before{left:50%;top:-4px;bottom:-4px;width:1px;transform:translateX(-.5px)} .craft-slot .cs-reg::after{top:50%;left:-4px;right:-4px;height:1px;transform:translateY(-.5px)} .craft-slot .cs-reg.tl{top:14px;left:14px}.craft-slot .cs-reg.br{bottom:14px;right:14px} /* real generated study photo dropped behind the foil label — object reads on the right, label on the scrim left */ .craft-slot .cs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .craft-slot.has-img::before{display:none} .craft-slot.has-img .cs-mark{display:none} .craft-slot.has-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(108deg,rgba(250,247,242,.92) 0%,rgba(250,247,242,.66) 34%,rgba(250,247,242,.14) 68%,rgba(250,247,242,0) 100%)} html[data-theme="tinta"] .craft-slot.has-img::after{background:linear-gradient(108deg,rgba(18,16,24,.94) 0%,rgba(18,16,24,.7) 34%,rgba(18,16,24,.16) 68%,rgba(18,16,24,0) 100%)} .craft-slot.has-img .cs-body{max-width:64%} /* proof-row: three craft samples side by side (was unstyled → stacked full-width) */ .proof-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);list-style:none;padding:0;margin:0} .proof-card{display:flex;flex-direction:column;gap:14px} @media (max-width:820px){.proof-row{grid-template-columns:1fr;gap:clamp(20px,4vw,28px)}} /* keep any craft sample from ever becoming a giant empty panel */ .craft-slot{max-height:min(56vh,440px)} .anima-media.craft-slot{max-height:min(72vh,560px)} /* ============================================================================= EDITORIAL HERO (.ed-*) — shared masthead system (promoted from the homepage so every page speaks the same casa-de-taller language). ============================================================================= */ .ed-hero{position:relative;background:var(--paper);color:var(--ink);min-height:100svh;min-height:100dvh; display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate; padding:clamp(132px,15vh,172px) clamp(20px,5vw,84px) clamp(40px,6vh,72px)} .ed-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(115% 85% at 80% 14%,rgba(225,0,117,.055),transparent 58%), radial-gradient(95% 80% at 8% 96%,rgba(176,132,74,.07),transparent 60%)} .ed-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:multiply} .ed-grain svg{width:100%;height:100%}.ed-grain rect{opacity:.05} .reg{position:absolute;z-index:3;width:19px;height:19px;pointer-events:none;opacity:.4; border:1px solid var(--ink);border-radius:50%} .reg::before,.reg::after{content:"";position:absolute;background:var(--ink)} .reg::before{left:50%;top:-5px;bottom:-5px;width:1px;transform:translateX(-.5px)} .reg::after{top:50%;left:-5px;right:-5px;height:1px;transform:translateY(-.5px)} .reg-tl{top:clamp(80px,10vh,104px);left:clamp(18px,3vw,40px)} .reg-tr{top:clamp(80px,10vh,104px);right:clamp(18px,3vw,40px)} .reg-bl{bottom:clamp(22px,4vh,40px);left:clamp(18px,3vw,40px)} .reg-br{bottom:clamp(22px,4vh,40px);right:clamp(18px,3vw,40px)} .ed-wrap{position:relative;z-index:2;width:100%;max-width:1360px;margin:0 auto} .ed-masthead{display:flex;align-items:center;gap:clamp(12px,2vw,26px);margin-bottom:clamp(26px,4.5vh,52px); font-family:var(--font-label);font-size:clamp(10.5px,.9vw,12.5px);letter-spacing:.24em; text-transform:uppercase;color:var(--ink);opacity:.6} .ed-masthead .mh-rule{flex:1;height:1px;background:currentColor;opacity:.45} .ed-lede{margin-top:clamp(22px,3.4vh,40px);max-width:none} .ed-eyebrow{font-family:var(--font-label);font-size:clamp(10.5px,.92vw,12.5px);letter-spacing:.16em; text-transform:uppercase;color:var(--magenta-press);line-height:1.9;max-width:none;width:100%; margin:0 0 clamp(18px,2.6vh,26px);padding-bottom:13px;border-bottom:1px solid rgba(20,18,26,.16)} .ed-h1{font-family:var(--font-display);font-weight:400;letter-spacing:-.022em;line-height:.96; color:var(--ink);margin:0;font-size:clamp(2.6rem,7.6vw,6.6rem);max-width:15ch} .ed-h1 .ln{display:block;overflow:hidden;padding-bottom:.3em;margin-bottom:-.22em} .ed-h1 .ln>span{display:block} /* hero split: headline left, signature piece right — a composition, not blank space */ .ed-hero-split .ed-split{display:grid;grid-template-columns:1.04fr .9fr;align-items:center;gap:clamp(30px,4.5vw,72px)} .ed-hero-split .ed-col-text{min-width:0} .ed-hero-split .ed-h1{font-size:clamp(2.25rem,5vw,4.6rem);max-width:15ch} .ed-col-media{position:relative;min-width:0} .ed-hero-img{display:block;width:100%;height:auto;max-height:56vh;object-fit:cover;border-radius:18px; box-shadow:0 44px 84px -44px rgba(48,32,12,.5),0 14px 26px -18px rgba(48,32,12,.34)} /* the process link stands on its own — never confused with shipping */ .ed-process{margin-top:clamp(20px,3vh,30px)} .ed-process a{font-family:var(--font-display);font-size:clamp(15px,1.15vw,17px);color:var(--ink); display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid color-mix(in srgb,var(--ink) 26%,transparent);padding-bottom:2px} .ed-process a:hover{border-color:var(--ink)} .ed-process .arr{color:var(--magenta-press)} .ed-ship{font-family:var(--font-label);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase; color:color-mix(in srgb,var(--ink) 45%,transparent);margin-top:clamp(16px,2.4vh,24px);max-width:38ch;line-height:1.5} /* lift the hero media so the persistent Naiyel/WhatsApp bubbles never sit on the image */ .ed-hero-split .ed-col-media{align-self:center;margin-top:0} @media(max-width:860px){ .ed-hero-split .ed-split{grid-template-columns:1fr;gap:clamp(22px,5vw,32px)} .ed-col-media{order:2;max-width:540px;margin:0 auto} .ed-hero-img{max-height:52vh} } .foil{font-style:normal;position:relative; background:linear-gradient(96deg,#7c4e22 0%,#c79351 24%,#eccd8b 44%,#f7e4b2 52%,#d3a458 62%,#a5702f 100%); background-size:230% 100%;background-position:0 50%;-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(110,74,26,.42))} .ed-diff{font-family:var(--font-text);font-style:italic;font-size:clamp(1.12rem,1.65vw,1.45rem); line-height:1.5;color:var(--ink);opacity:.84;max-width:33ch;margin:0 0 clamp(26px,4vh,38px)} .ed-cta{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);flex-wrap:wrap;margin-bottom:clamp(26px,4vh,36px)} .ed-trust{font-family:var(--font-label);font-size:clamp(10.5px,.85vw,12px);letter-spacing:.05em; color:var(--ink);opacity:.58;max-width:46ch;line-height:1.8} .ed-trust a{color:var(--magenta-press);white-space:nowrap;border-bottom:1px solid rgba(194,24,91,.3)} .ed-trust a:hover{border-color:var(--magenta-press)} /* the honest craft sample — our own card, letterpress + foil, drawn in CSS (no fake photo) */ .ed-sample{margin:0;display:flex;flex-direction:column;gap:15px;align-items:center} .ed-card{position:relative;width:min(100%,350px);aspect-ratio:1.62/1;border-radius:11px; background:linear-gradient(158deg,#fdfbf5 0%,#f4ecdc 62%,#ece1cd 100%); box-shadow:0 34px 64px -32px rgba(48,32,12,.42),0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(48,32,12,.07); display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,3vw,36px); transform:rotate(-2.6deg);transition:transform .55s cubic-bezier(.2,.7,.2,1)} .ed-sample:hover .ed-card{transform:rotate(0) translateY(-5px)} .ed-card::after{content:"";position:absolute;left:clamp(22px,3vw,36px);right:clamp(22px,3vw,36px); bottom:clamp(20px,2.6vw,30px);height:1px;background:rgba(48,32,12,.14);box-shadow:0 1px 0 rgba(255,255,255,.7)} .card-foil{font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2.15rem);letter-spacing:.005em; background:linear-gradient(96deg,#7c4e22,#d5a457,#fff2cf,#c1913f);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(110,74,26,.3))} .card-foil b{font-weight:400} .card-line{display:block;width:54px;height:2px;background:var(--magenta-press);margin:14px 0 12px;border-radius:2px;opacity:.9} .card-sub{font-family:var(--font-label);font-size:clamp(9.5px,.8vw,11px);letter-spacing:.22em; text-transform:uppercase;color:rgba(48,32,12,.5)} .ed-sample figcaption{font-family:var(--font-label);font-size:clamp(9.5px,.8vw,11px);letter-spacing:.15em; text-transform:uppercase;color:var(--ink);opacity:.5;text-align:center} .ed-specbar{display:flex;flex-wrap:wrap;align-items:center;margin-top:clamp(30px,5vh,58px); border-top:1px solid rgba(20,18,26,.18);padding-top:16px} .ed-specbar span{font-family:var(--font-label);font-size:clamp(10px,.92vw,12.5px);letter-spacing:.13em; text-transform:uppercase;color:var(--ink);opacity:.66;padding:2px clamp(11px,1.6vw,22px);position:relative;white-space:nowrap} .ed-specbar span:first-child{padding-left:0} .ed-specbar span:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:12px;background:rgba(20,18,26,.24)} @media (max-width:920px){ .ed-grid{grid-template-columns:1fr;gap:clamp(28px,5vh,44px)} .ed-sample{order:-1;align-items:flex-start} .reg-tr,.reg-br{display:none} } @media (prefers-reduced-motion:no-preference){ .ed-masthead,.ed-eyebrow,.ed-diff,.ed-cta,.ed-trust,.ed-sample,.ed-specbar{ opacity:0;transform:translateY(15px);animation:edUp .85s cubic-bezier(.2,.7,.2,1) forwards} .ed-h1 .ln>span{transform:translateY(105%);animation:edClip .9s cubic-bezier(.2,.7,.2,1) forwards} .ed-masthead{animation-delay:.04s}.ed-eyebrow{animation-delay:.12s} .ed-h1 .ln:nth-child(1)>span{animation-delay:.16s} .ed-h1 .ln:nth-child(2)>span{animation-delay:.26s} .ed-h1 .ln:nth-child(3)>span{animation-delay:.36s} .ed-sample{animation-delay:.42s}.ed-diff{animation-delay:.52s} .ed-cta{animation-delay:.6s}.ed-trust{animation-delay:.68s}.ed-specbar{animation-delay:.74s} .foil{animation:foilSheen 7s ease-in-out 1.4s infinite} .card-foil{animation:foilSheen 7s ease-in-out 2s infinite} } @keyframes edUp{to{opacity:1;transform:none}} @keyframes edClip{to{transform:none}} @keyframes foilSheen{0%,100%{background-position:0 50%}50%{background-position:100% 50%}} /* ============================================================================= FAMILIAS SHOWCASE (.fam) — the 8 real families as rich cards: number + foil mark, Hedvig name w/ a foil accent, tagline, and REAL subproduct chips from the ratified taxonomy (CONTENT_UNIVERSE L87 — list all, invent no ceilings). ============================================================================= */ .fam-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)} @media (max-width:860px){.fam-grid{grid-template-columns:1fr}} .fam{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--ink); padding:clamp(22px,2.6vw,34px);border-radius:var(--radius);background:var(--paper); border:1px solid var(--line-2);overflow:hidden;transition:border-color .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out)} .fam:hover{border-color:var(--magenta);transform:translateY(-3px);box-shadow:0 24px 48px -30px rgba(40,28,12,.4)} .fam::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--grad-make-real-90);opacity:0;transition:opacity .3s} .fam:hover::before{opacity:1} .fam-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px} .fam-num{font-family:var(--font-label);font-size:11px;letter-spacing:.22em;color:var(--ink);opacity:.42} .fam-mark{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.02em; background:linear-gradient(96deg,#7c4e22,#d5a457,#fff2cf,#c1913f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .fam-name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,2.5vw,1.95rem);line-height:1.05;letter-spacing:-.012em;margin:0 0 9px;color:var(--ink)} .fam-name .foil-w{background:linear-gradient(96deg,#7c4e22,#d5a457,#fff2cf,#c1913f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .fam-line{font-family:var(--font-text);font-style:italic;font-size:1.04rem;line-height:1.4;color:var(--ink);opacity:.74;margin:0 0 17px} .fam-subs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px} .fam-subs span{font-family:var(--font-label);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase; color:var(--ink);opacity:.82;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:5px 11px} .fam-cta{margin-top:auto;font-family:var(--font-label);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--magenta-press);display:inline-flex;align-items:center;gap:7px} .fam-cta .arr{transition:transform .3s var(--ease-out)} .fam:hover .fam-cta .arr{transform:translateX(4px)} /* small single-column mega dropdown (Empresas) */ .nav-mega-panel.nav-mega-sm{grid-template-columns:1fr;min-width:240px;left:0} /* ============================================================================= ACTIVENESS FLOOR — "el sitio que se siente impreso" (DESIGN_LANGUAGE_BRIEF §4). Material micro-behaviors on every interactive element: a foil catch, an ink settle, transitions that lock like registration. Alive, never a static museum. Reduced-motion honest: all motion gated; static states stay legible. ============================================================================= */ @media (prefers-reduced-motion:no-preference){ /* magenta link underline that draws in from the left (registration lock) */ .body a:not(.btn):not(.link-arrow),.intro a:not(.btn),.ed-trust a,.faq-a a{ background-image:linear-gradient(var(--magenta),var(--magenta));background-size:0% 1.5px; background-position:0 100%;background-repeat:no-repeat;transition:background-size .32s cubic-bezier(.2,.7,.2,1); text-decoration:none;padding-bottom:1px} .body a:not(.btn):not(.link-arrow):hover,.intro a:not(.btn):hover,.ed-trust a:hover,.faq-a a:hover{background-size:100% 1.5px} /* the magenta CTA catches a foil sheen sweep on hover */ .btn-mag{position:relative;overflow:hidden;isolation:isolate} .btn-mag::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%); transform:translateX(-120%);transition:transform .6s cubic-bezier(.2,.7,.2,1)} .btn-mag:hover::after{transform:translateX(120%)} /* the [cx] foil mark shimmers on card hover (fam + craft-slot) */ .fam:hover .fam-mark,.craft-slot:hover .cs-mark{filter:brightness(1.12) saturate(1.05)} /* link-arrow: the arrow steps forward, the label draws its own hairline */ .link-arrow .arr{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)} .link-arrow:hover .arr{transform:translateX(5px)} /* subproduct + technique chips settle up on hover (tactile) */ .fam-subs span{transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,color .25s} .fam-subs span:hover{transform:translateY(-2px);border-color:var(--magenta);color:var(--magenta-press)} /* material sample lifts + warms on hover */ .craft-slot{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s} .craft-slot:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(48,32,12,.4)} } /* tactile focus — a registration ring, honored with or without motion */ a:focus-visible,button:focus-visible,.fam:focus-visible,.door:focus-visible,.chip:focus-visible{ outline:2px solid var(--magenta);outline-offset:3px;border-radius:4px} /* the foil accent word carries a faint pressed edge everywhere it appears */ .foil,.foil-w{text-shadow:0 1px 0 rgba(110,74,26,.14)} /* ── language switch (ES/EN) — replaces the retired día/noche toggle, top-right ── */ .lang-sw{display:inline-flex;align-items:center;gap:1px;border:1px solid rgba(20,18,26,.16);border-radius:999px;padding:4px; font-family:var(--font-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1} .lang-sw .on{background:var(--ink);color:var(--paper);border-radius:999px;padding:5px 11px} .lang-sw a{color:color-mix(in srgb,var(--ink) 55%,transparent);padding:5px 11px;text-decoration:none;border-radius:999px;transition:color .2s ease,background .2s ease} .lang-sw a:hover{color:var(--ink);background:rgba(20,18,26,.06)} /* ── hero, alive: a gentle float + a slow foil shimmer (motion-safe) ── */ @media (prefers-reduced-motion: no-preference){ .ed-hero-img{animation:heroFloat 7.5s ease-in-out infinite;will-change:transform} @keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .ed-h1 .foil{animation:foilShimmer 6.5s ease-in-out infinite} @keyframes foilShimmer{0%,100%{background-position:0 50%}50%{background-position:100% 50%}} } /* ── nav seal-mark: sin fondo, cx + punto + aro hairline (ligero, no cansa) ── */ .brand{display:inline-flex;align-items:center;gap:11px} .brand-seal{width:32px;height:32px;flex:0 0 auto;display:block} .brand-seal .bs-ring{fill:none;stroke:var(--ink);stroke-width:6;opacity:.85} .brand-seal .bs-c{fill:var(--ink);font-family:var(--font-display),Georgia,serif} .brand-seal .bs-x{fill:var(--magenta)} .brand-seal .bs-dot{fill:var(--magenta)} .wordmark .wm-dot{color:var(--magenta)} /* seal on dark surfaces (footer / ink bands): ring + c go light, x + dots stay magenta */ .footer .brand-seal .bs-ring,.on-ink .brand-seal .bs-ring{stroke:var(--on-dark);opacity:.9} .footer .brand-seal .bs-c,.on-ink .brand-seal .bs-c{fill:var(--on-dark)} .footer .brand-seal .bs-x,.on-ink .brand-seal .bs-x,.footer .brand-seal .bs-dot,.on-ink .brand-seal .bs-dot{fill:var(--magenta-pure)} /* ============================================================================= r14 · NAV TIER-2 · piso de aire en anchos angostos (1181–~1280) Con el balance óptico (space-between) el aire derecho ya NO colapsa contra Marketplace como pasaba con el grid `1fr auto 1fr` (r13, retirado): el flex-gap base (16px) es la separación MÍNIMA garantizada y la holgura se reparte por igual a ambos lados. El único borde es ~1181px, donde marca(143) + puertas(629) + botones(261) + 2·16 apenas rebasa el ancho de contenido (~1063px). Se angosta SOLO el gap interno de las puertas en esa banda (jamás las corre del eje, jamás toca .nav-search-*) para conservar ≥16px de aire a cada lado hasta el colapso. ============================================================================= */ @media (min-width:1181px) and (max-width:1280px){ .nav-tier2 .nav-links{gap:clamp(11px,calc(4.04vw - 35.7px),16px)} } /* ============================================================================= ITEM d · 2026-07-29 · AFORDANCIA DEL CONTROL «BÚSQUEDA» DEL PIE El control abría un panel y se veía igual que los cuatro enlaces de su columna, así que prometía navegación. Ahora monta la MISMA lupa del buscador tier-1 (`.nav-search-box svg`: 24×24 de viewBox, 14×14 en pantalla, trazo 1.7) junto al rótulo. Cero cambio de comportamiento y cero cambio de rótulo, que es lo que pide el ruling. El color va por `currentColor` porque el pie es superficie oscura y el botón ya trae `--on-dark-muted` en su estilo inline. ============================================================================= */ .footer-search svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;flex:0 0 auto} /* ============================================================================= ITEM c · 2026-07-29 · EL PIE RESERVA LA ALTURA DEL GLOBO EN ANCHOS ANGOSTOS Medido en CDP sobre el workdir: a 360/390/430/520 el contenedor fijo `.persist` (340 px de ancho, 46 px de alto, borde inferior a 104 px + safe-area) se montaba sobre el enlace «Una casa de Shiba Group Co.» del `.footer-strip`. El solapamiento medía 166.48 × 11.44 px a 390, y el hit-test del centro del enlace devolvía `div.persist`, o sea que el enlace del holding NO era clicable en las 90 páginas. El pie ya reservaba 96 px, que alcanzan para la barra sticky (73–75 px) y se quedan 78 px cortos frente al globo. Arreglo de raíz: el pie reserva, el globo no se mueve. 104 (bottom) + 46 (alto del toggle) + 24 (holgura mínima de la casa) = 174 px, más la safe-area que el propio globo ya suma. Cae en las 90 sin tocar un solo HTML, así que el chrome conserva su hash único. Falsable: baja el 174 a 150 y la holgura se come el respiro; bájalo a 96 y el solapamiento vuelve exactamente donde estaba. ============================================================================= */ @media (max-width:768px){ .footer{padding-bottom:calc(174px + env(safe-area-inset-bottom))} }