/* EstrategiaBrand — sistema y estilos. Tokens y decisiones: docs/02-sistema.md · motion: docs/04-motion.md */

/* ---------- Tipografías auto-alojadas (OFL-1.1) ---------- */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations"); 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: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2-variations"); 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; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/manrope-latin-wght-normal.woff2) format("woff2-variations"); 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: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations"); 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; }

/* ---------- Tokens ---------- */
:root {
	--c-alabastro: oklch(97.6% 0.007 88.6);      /* #F9F7F2 */
	--c-arena: oklch(92.3% 0.014 84.6);          /* #EAE5DB */
	--c-surface-high: oklch(95.3% 0.011 84.6);   /* #F3EFE7 */
	--c-line: oklch(87.5% 0.020 84.6);           /* #DCD5C7 */
	--c-line-strong: oklch(81.6% 0.021 84.6);    /* #C9C2B4 */
	--c-carbon: oklch(24.7% 0.006 179.1);        /* #1E2221 */
	--c-ink-2: oklch(38.5% 0.011 135);           /* #41453F */
	--c-muted: oklch(46.3% 0.007 153.6);         /* #565A57 */
	--c-quiet: oklch(54% 0.008 159.9);           /* #6B706D */
	--c-terracota: oklch(58.8% 0.157 34.3);      /* #C85237 — decorativo / texto grande */
	--c-terracota-deep: oklch(51.9% 0.139 34.7); /* #A9442C — botones y texto pequeño */
	--c-terracota-shadow: oklch(45.7% 0.116 33.9);
	--c-eucalipto: oklch(35.3% 0.027 165.8);     /* #2E4038 */
	--c-eucalipto-deep: oklch(31.2% 0.024 174.5);
	--c-amber: oklch(77.3% 0.133 75.4);          /* #E6A847 */
	--c-sage: oklch(84.9% 0.013 157);            /* #C7D0CA */
	--c-white: #fff;

	--f-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--t-display: clamp(3rem, 5vw + 1rem, 5.75rem);
	--t-h2: clamp(2.25rem, 3vw + 1rem, 3.5rem);
	--t-h3: clamp(1.375rem, 1vw + 1rem, 1.75rem);
	--t-lead: clamp(1.0625rem, .3vw + 1rem, 1.1875rem);
	--t-body: clamp(1rem, .15vw + .95rem, 1.0625rem);
	--t-small: .875rem;
	--t-kicker: .75rem;

	--rail: min(1240px, 100% - 2 * var(--gutter));
	--gutter: clamp(20px, 5vw, 56px);
	--section: clamp(88px, 12vh, 140px);
	--radius: 10px;
	--shadow-hard: 8px 8px 0 oklch(24.7% 0.006 179.1 / .07);

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--header-h: 84px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; color-scheme: light; }
body { margin: 0; background: var(--c-alabastro); color: var(--c-carbon); font-family: var(--f-body); font-size: var(--t-body); line-height: 1.7; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { /* grano a 4 % contra el banding */
	content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; color: var(--c-carbon); text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul[role="list"], ol { list-style: none; margin: 0; padding: 0; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--c-terracota-deep); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--c-terracota-deep); color: var(--c-white); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#main-content:focus { outline: none; }
mark.pending { background: oklch(77.3% 0.133 75.4 / .28); color: var(--c-carbon); padding: 0 .2em; border-radius: 3px; }

.section-rail { width: var(--rail); margin-inline: auto; }
.section-space { padding-block: var(--section); }

.eyebrow { display: flex; align-items: center; gap: 12px; font-size: var(--t-kicker); line-height: 1.6; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; color: var(--c-carbon); }
.eyebrow-accent { color: var(--c-terracota-deep); }
.section-tick { width: 20px; height: 2px; flex: none; background: var(--c-terracota); }
h2 { font-size: var(--t-h2); letter-spacing: -.035em; line-height: 1.12; margin-top: 18px; }
.h2-muted { color: var(--c-quiet); }
.accent { color: var(--c-terracota-deep); }
.section-lead { color: var(--c-quiet); font-size: var(--t-lead); line-height: 1.75; }

/* ---------- Botones y enlaces ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 52px; padding: 14px 22px; font-size: .9375rem; font-weight: 600; line-height: 1.2; border: 1px solid transparent; border-radius: 8px; transition: background-color .18s var(--ease-out), transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.button .icon { flex: none; transition: transform .18s var(--ease-out); }
.button:hover .icon { transform: translate(2px, -2px); }
.button:active { transform: translateY(1px) scale(.99); }
.button-primary { background: var(--c-terracota-deep); color: var(--c-white); border-color: var(--c-terracota-shadow); box-shadow: 0 4px 0 var(--c-terracota-shadow); }
.button-primary:hover { background: var(--c-terracota-shadow); transform: translateY(-2px); box-shadow: 0 6px 0 oklch(38% 0.1 34); }
.button-outline { background: var(--c-alabastro); border-color: var(--c-line-strong); color: var(--c-carbon); }
.button-outline:hover { background: var(--c-surface-high); border-color: var(--c-terracota-deep); }
.text-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: .9375rem; font-weight: 600; transition: color .18s; }
.text-link .icon { transition: transform .18s var(--ease-out); }
.text-link:hover .icon { transform: translate(2px, -2px); }
.text-link:hover, .text-link-accent { color: var(--c-terracota-deep); }
.text-link-green { color: var(--c-eucalipto); }
.skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 14px 18px; border-radius: 8px; background: var(--c-terracota-deep); color: var(--c-white); font-weight: 600; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

/* ---------- Cabecera ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; background: oklch(97.6% 0.007 88.6 / .82); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid oklch(24.7% 0.006 179.1 / .07); transition: background-color .2s, box-shadow .2s; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header.is-scrolled { background: oklch(97.6% 0.007 88.6 / .96); box-shadow: 0 6px 24px oklch(24.7% 0.006 179.1 / .06); }
.header-inner { width: min(1320px, 100% - 2 * var(--gutter)); height: var(--header-h); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--f-display); font-size: 1.375rem; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; color: var(--c-carbon); }
.brand-light { font-weight: 500; }
.brand-dot { color: var(--c-terracota); }
.brand-mark { width: 26px; display: grid; gap: 4px; transform: skew(-25deg); }
.brand-mark i { height: 5px; width: 24px; display: block; background: var(--c-terracota); }
.brand-mark i:nth-child(2) { width: 18px; background: var(--c-eucalipto); }
.desktop-nav { display: flex; gap: clamp(16px, 2vw, 32px); font-size: .875rem; font-weight: 500; color: var(--c-muted); }
.desktop-nav a { position: relative; padding: 14px 0; transition: color .18s; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--c-terracota); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
.desktop-nav a:hover { color: var(--c-carbon); }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="true"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-cta { min-height: 44px; padding: 10px 16px; font-size: .8125rem; gap: 12px; box-shadow: 0 3px 0 var(--c-terracota-shadow); }
.menu-toggle { display: none; width: 44px; height: 44px; place-items: center; border-radius: 8px; border: 1px solid var(--c-line-strong); }
.menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.mobile-nav { display: grid; padding: 8px var(--gutter) 24px; border-top: 1px solid var(--c-line); background: var(--c-alabastro); }
.mobile-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--c-line); font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.mobile-nav .mobile-nav-cta { color: var(--c-terracota-deep); border-bottom: 0; }

/* Selector de idioma */
.lang-selector { position: relative; }
.lang-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--c-line-strong); border-radius: 8px; background: var(--c-alabastro); font-size: .8125rem; font-weight: 700; transition: border-color .18s, background-color .18s; }
.lang-trigger:hover, .lang-trigger[aria-expanded="true"] { border-color: var(--c-terracota-deep); background: var(--c-surface-high); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 200px; max-height: min(70vh, 480px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--c-alabastro); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: 0 18px 48px oklch(24.7% 0.006 179.1 / .12); }
.lang-menu button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 12px; border-radius: 8px; font-size: .875rem; text-align: left; transition: background-color .15s; }
.lang-menu button:hover { background: var(--c-arena); }
.lang-menu button[aria-pressed="true"] { background: oklch(58.8% 0.157 34.3 / .1); }
.lang-menu-label { min-width: 34px; font-weight: 700; color: var(--c-terracota-deep); }
.lang-menu-name { color: var(--c-muted); }
.lang-check { margin-left: auto; color: var(--c-terracota-deep); visibility: hidden; }
.lang-menu button[aria-pressed="true"] .lang-check { visibility: visible; }
.lang-menu button[aria-pressed="true"] .lang-menu-name { color: var(--c-carbon); }

/* ---------- S01 Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: max(680px, 100svh); padding: calc(var(--header-h) + 56px) 0 128px; background: var(--c-alabastro); }
.hero-art { position: absolute; inset: 0; z-index: -3; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, oklch(97.6% 0.007 88.6 / .96) 0%, oklch(97.6% 0.007 88.6 / .86) 28%, oklch(97.6% 0.007 88.6 / .3) 52%, oklch(97.6% 0.007 88.6 / 0) 74%), linear-gradient(0deg, var(--c-alabastro) 0%, transparent 22%, transparent 84%, oklch(97.6% 0.007 88.6 / .6) 100%); }
.hero-inner { width: var(--rail); margin-inline: auto; }
.hero-eyebrow { color: var(--c-terracota-shadow); }
.status-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--c-terracota); box-shadow: 0 0 0 5px oklch(58.8% 0.157 34.3 / .14); }
.hero h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.055em; font-weight: 600; margin: 28px 0; }
.h1-line { display: block; }
.h1-accent { color: var(--c-terracota); }
.hero-copy { max-width: 34rem; font-size: var(--t-lead); line-height: 1.75; color: var(--c-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-assurance { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 28px 0 0; padding: 0; list-style: none; font-size: var(--t-small); color: var(--c-muted); }
.hero-assurance li { display: flex; align-items: center; gap: 8px; }
.hero-assurance .icon { color: var(--c-terracota-deep); }
.growth-note { position: absolute; z-index: 3; right: 8%; bottom: 24%; width: 270px; margin: 0; padding: 18px 20px 12px; background: oklch(97.6% 0.007 88.6 / .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid oklch(58.8% 0.157 34.3 / .22); border-radius: 12px; box-shadow: 8px 8px 0 oklch(24.7% 0.006 179.1 / .06); transform: rotate(-4deg); }
.growth-note-head { display: flex; align-items: center; gap: 12px; font-size: .875rem; font-weight: 600; line-height: 1.45; }
.growth-note-head small { font-size: .8125rem; font-weight: 400; color: var(--c-muted); }
.growth-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 8px; background: oklch(58.8% 0.157 34.3 / .12); color: var(--c-terracota-deep); }
.mini-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c-eucalipto); margin-left: auto; }
.growth-chart { width: 100%; margin-top: 14px; }
.chart-caption { padding-top: 6px; font-size: .75rem; color: var(--c-muted); text-align: right; }
.hero-bottom { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid oklch(24.7% 0.006 179.1 / .1); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; color: var(--c-quiet); }
.hero-bottom a { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid oklch(24.7% 0.006 179.1 / .18); border-radius: 50%; color: var(--c-carbon); transition: background-color .18s, border-color .18s; }
.hero-bottom a:hover { background: var(--c-carbon); color: var(--c-alabastro); }

/* ---------- S02 Resultados ---------- */
.results { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 24px; padding-block: 56px 36px; border-bottom: 1px solid var(--c-line); }
.results-lead { margin-top: 12px; font-size: var(--t-body); line-height: 1.7; color: var(--c-quiet); }
.metric { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--c-line); }
.metric-value { display: flex; align-items: baseline; font-family: var(--f-display); font-size: clamp(2.75rem, 3vw + 1rem, 3.75rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.1; }
.metric-value > span { font-size: .6em; color: var(--c-terracota); }
.metric-value .icon { align-self: center; margin-left: 12px; color: var(--c-terracota); }
.metric-label { margin: 8px 0 2px; font-weight: 600; }
.metric small { font-size: .8125rem; color: var(--c-quiet); }
.metrics-disclaimer { grid-column: 1 / -1; margin-top: 8px; font-size: .8125rem; color: var(--c-quiet); text-align: right; }

/* ---------- Encabezados de sección ---------- */
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 48px; }
.section-heading > div { max-width: 40rem; }
.section-heading > .section-lead { max-width: 26rem; }

/* ---------- S03 Servicios ---------- */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.services-grid > li { display: flex; }
.service-card { width: 100%; display: flex; flex-direction: column; gap: 12px; min-height: 290px; padding: 28px 24px 22px; text-align: left; background: var(--c-arena); border: 1px solid var(--c-line); border-radius: var(--radius); transition: transform .2s var(--ease-out), background-color .2s, border-color .2s, box-shadow .2s var(--ease-out); }
.service-card:hover { transform: translateY(-4px); background: var(--c-surface-high); border-color: var(--c-terracota); box-shadow: 6px 6px 0 oklch(58.8% 0.157 34.3 / .16); }
.service-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.service-icon { color: var(--c-terracota-deep); }
.service-number { font-size: .75rem; font-weight: 600; color: var(--c-muted); }
.service-title { font-family: var(--f-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
.service-desc { font-size: .9375rem; line-height: 1.7; color: var(--c-muted); }
.service-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; font-size: .75rem; font-weight: 600; color: var(--c-muted); }
.service-bottom .icon { flex: none; transition: transform .2s var(--ease-out), color .2s; }
.service-card:hover .service-bottom .icon { transform: translate(2px, -2px); color: var(--c-terracota-deep); }
.service-featured { background: var(--c-eucalipto); border-color: var(--c-eucalipto-deep); color: var(--c-alabastro); }
.service-featured .service-title { color: var(--c-alabastro); }
.service-featured .service-desc, .service-featured .service-bottom, .service-featured .service-number { color: var(--c-sage); }
.service-featured .service-icon { color: var(--c-amber); }
.service-featured:hover { background: var(--c-eucalipto-deep); border-color: var(--c-amber); box-shadow: 6px 6px 0 oklch(24.7% 0.006 179.1 / .25); }
.service-featured:hover .service-bottom .icon { color: var(--c-amber); }
.services-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; }
.services-foot p { font-family: var(--f-display); font-size: clamp(1.125rem, .6vw + 1rem, 1.375rem); line-height: 1.4; letter-spacing: -.02em; color: var(--c-muted); }
.services-foot strong { color: var(--c-carbon); font-weight: 700; }

/* ---------- Diálogos ---------- */
.agency-dialog { width: min(640px, 100% - 32px); max-height: 88dvh; margin: auto; padding: clamp(28px, 4vw, 40px); overflow-y: auto; color: var(--c-carbon); background: var(--c-alabastro); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 10px 10px 0 oklch(24.7% 0.006 179.1 / .1); }
.agency-dialog[open] { display: flex; flex-direction: column; gap: 16px; animation: dialog-in .22s var(--ease-out); }
.agency-dialog[open] > * { flex-shrink: 0; }
.agency-dialog::backdrop { background: oklch(24.7% 0.006 179.1 / .55); backdrop-filter: blur(3px); animation: fade-in .22s var(--ease-out); }
.agency-dialog h2 { margin: 0; padding-right: 40px; font-size: clamp(1.5rem, 1vw + 1.1rem, 1.875rem); letter-spacing: -.03em; line-height: 1.25; }
.agency-dialog p { color: var(--c-muted); line-height: 1.75; }
.agency-dialog .button { align-self: flex-start; }
.dialog-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-carbon); transition: background-color .15s; }
.dialog-close:hover { background: var(--c-arena); }
.agency-dialog { position: fixed; }
.dialog-icon { color: var(--c-terracota-deep); }
.dialog-tags { color: var(--c-terracota-deep) !important; font-size: .875rem; font-weight: 600; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.small-note { font-size: .8125rem !important; color: var(--c-quiet) !important; }
.privacy-copy { display: grid; gap: 12px; }
.privacy-copy p:not(.small-note) { color: var(--c-ink-2); }
.case-dialog { width: min(760px, 100% - 32px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- S04 Portafolio ---------- */
.portfolio-section { background: var(--c-surface-high); border-block: 1px solid oklch(24.7% 0.006 179.1 / .04); }
.portfolio-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 32px; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-tabs button { min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 8px; font-size: .875rem; font-weight: 600; color: var(--c-muted); transition: background-color .18s, color .18s, border-color .18s; }
.filter-tabs button:hover { color: var(--c-carbon); background: var(--c-arena); }
.filter-tabs button[aria-pressed="true"] { color: var(--c-terracota-deep); background: oklch(58.8% 0.157 34.3 / .1); border-color: var(--c-terracota-deep); }
.demo-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.project-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.project-industry { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.project-caption h3 { margin: 6px 0; font-size: var(--t-h3); letter-spacing: -.035em; }
.project-caption p:last-child { color: var(--c-muted); font-size: .9375rem; }
.project-index { font-size: .875rem; font-weight: 600; color: var(--c-muted); }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.project-tags li { padding: 5px 10px; border: 1px solid oklch(24.7% 0.006 179.1 / .1); border-radius: 5px; background: var(--c-alabastro); font-size: .75rem; font-weight: 600; color: var(--c-muted); }
.portfolio-disclaimer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-line); font-size: .8125rem; line-height: 1.7; color: var(--c-muted); }

/* Propuestas visuales */
.mockups-section { margin-top: clamp(64px, 8vw, 96px); }
.mockups-heading { margin-bottom: 32px; max-width: 40rem; }
.mockups-heading h3 { margin: 16px 0 12px; font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.5rem); letter-spacing: -.035em; line-height: 1.15; }
.mockups-heading p { color: var(--c-muted); }
.mockups-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mockups-grid > li { display: flex; }
.mockup-card { width: 100%; display: flex; flex-direction: column; padding: 18px; text-align: left; background: var(--c-arena); border: 1px solid var(--c-line); border-radius: var(--radius); transition: transform .2s var(--ease-out), border-color .2s, box-shadow .2s var(--ease-out); }
.mockup-card:hover { transform: translateY(-4px); border-color: var(--c-terracota); box-shadow: 6px 6px 0 oklch(58.8% 0.157 34.3 / .16); }
.mockup-preview { display: block; margin-bottom: 16px; overflow: hidden; border-radius: 8px; background: #FBFAF7; border: 1px solid var(--c-line); }
.mockup-frame { min-height: 136px; padding: 12px; }
.mockup-frame-bar { display: flex; gap: 4px; margin-bottom: 14px; }
.mockup-frame-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-line-strong); }
.mockup-info { display: grid; gap: 4px; }
.mockup-info strong { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 600; }
.mockup-style { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-terracota-deep); }
.mockup-desc { margin-top: 6px; font-size: .875rem; line-height: 1.65; color: var(--c-muted); }
.mockup-preview-large { overflow: hidden; border-radius: 10px; background: #FBFAF7; border: 1px solid var(--c-line); }
.mockup-preview-large .mockup-frame { min-height: 200px; padding: 18px; }
.mockup-editorial-body { display: grid; gap: 8px; }
.me-line { height: 6px; width: 70%; border-radius: 2px; background: var(--c-terracota); }
.me-line.wide { width: 100%; }
.me-block { height: 40px; width: 50%; border-radius: 3px; background: var(--c-eucalipto); }
.mockup-minimal-body { display: grid; gap: 10px; place-items: start; }
.mm-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--c-amber); }
.mm-line { height: 5px; width: 85%; border-radius: 2px; background: var(--c-line-strong); box-shadow: 0 9px 0 var(--c-line), 0 18px 0 var(--c-line); }
.mockup-bold-body { display: grid; gap: 8px; }
.mb-block { height: 30px; width: 80%; border-radius: 3px; background: var(--c-terracota); }
.mb-block.alt { width: 60%; background: var(--c-eucalipto); }
.mb-line { height: 5px; width: 90%; border-radius: 2px; background: var(--c-line-strong); }
.mockup-grid-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mockup-grid-body span { height: 36px; border: 1px solid var(--c-line); border-radius: 3px; background: oklch(77.3% 0.133 75.4 / .27); }
.mockup-brutalist-body { display: grid; gap: 7px; padding-top: 4px; }
.br-tag { width: fit-content; padding: 3px 5px; border: 2px solid var(--c-carbon); font-family: var(--f-display); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.br-block { height: 34px; width: 75%; margin-left: auto; background: var(--c-carbon); }
.br-line { height: 6px; width: 100%; background: var(--c-carbon); }
.br-line.short { width: 45%; }
.mockup-glass-body { display: grid; gap: 8px; min-height: 90px; padding: 12px; border-radius: 6px; background: linear-gradient(135deg, oklch(58.8% 0.157 34.3 / .19), oklch(77.3% 0.133 75.4 / .19)); }
.gl-card { height: 30px; border-radius: 6px; background: oklch(100% 0 0 / .6); border: 1px solid oklch(100% 0 0 / .8); box-shadow: 0 4px 10px oklch(24.7% 0.006 179.1 / .1); }
.gl-card.alt { width: 60%; background: oklch(97.6% 0.007 88.6 / .8); }
.gl-line { height: 5px; width: 80%; border-radius: 99px; background: oklch(100% 0 0 / .67); }
.mockup-split-body { position: relative; min-height: 90px; overflow: hidden; border-radius: 6px; }
.sp-left { position: absolute; inset: 0 50% 0 0; background: var(--c-terracota); }
.sp-right { position: absolute; inset: 0 0 0 50%; background: var(--c-eucalipto); }
.sp-line { position: absolute; top: -10%; left: 50%; width: 3px; height: 120%; background: var(--c-amber); transform: translateX(-50%) rotate(8deg); }
.mockup-magazine-body { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: start; }
.mg-cap { font-family: Georgia, serif; font-size: 30px; font-weight: 700; line-height: .8; color: var(--c-terracota); }
.mg-col { height: 50px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--c-line-strong) 0 3px, transparent 3px 7px); }
.mockup-dark-body { display: grid; gap: 8px; min-height: 90px; padding: 12px; border-radius: 6px; background: var(--c-carbon); }
.dk-glow { height: 28px; width: 70%; border-radius: 6px; background: linear-gradient(90deg, var(--c-terracota), var(--c-amber)); box-shadow: 0 0 14px oklch(58.8% 0.157 34.3 / .6); }
.dk-line { height: 5px; width: 90%; border-radius: 99px; background: #4A4E4D; }
.dk-line.short { width: 55%; background: var(--c-amber); }


/* ---------- S05 Proceso ---------- */
.process { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(48px, 7vw, 96px); }
.process .section-lead { margin: 24px 0 16px; }
.media-card { margin: 32px 0 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--shadow-hard); }
.media-card img { width: 100%; }
.process-steps { position: relative; align-self: start; }
.process-steps::before, .process-steps::after { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 1px; background: var(--c-line); }
.process-steps::after { background: var(--c-terracota); transform-origin: top; transform: scaleY(1); }
.process-step { position: relative; display: flex; align-items: flex-start; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--c-line); }
.process-step:first-child { padding-top: 0; }
.step-number { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--c-terracota-deep); border-radius: 8px; background: var(--c-alabastro); font-size: .875rem; font-weight: 700; color: var(--c-terracota-deep); }
.process-step h3 { margin-bottom: 6px; font-size: 1.375rem; font-weight: 600; letter-spacing: -.03em; }
.process-step p { color: var(--c-muted); }

/* ---------- S06 Citas ---------- */
.testimonials { background: var(--c-eucalipto); color: var(--c-alabastro); border-block: 1px solid var(--c-eucalipto-deep); }
.testimonial-inner { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(40px, 6vw, 72px); align-items: center; }
.testimonials .eyebrow { color: var(--c-amber); }
.testimonials .section-tick { background: var(--c-amber); }
.testimonials h2 { color: var(--c-alabastro); }
.testimonials h2 .accent { color: var(--c-amber); }
.testimonials .section-lead { margin-top: 20px; color: var(--c-sage); }
.testimonial-pending { display: inline-block; margin-top: 18px; padding: 8px 12px; border: 1px solid oklch(50% 0.025 160); border-radius: 6px; font-size: .8125rem; color: var(--c-sage); }
.quote-icon { margin-bottom: 14px; color: var(--c-amber); }
.quote-block .demo-label { margin-bottom: 18px; color: var(--c-sage); }
.quote { margin: 0; }
.quote:not([hidden]) { animation: fade-in .25s var(--ease-out); }
.quote blockquote { margin: 0; min-height: 9.5em; font-family: var(--f-display); font-size: clamp(1.375rem, 1.1vw + 1rem, 1.75rem); font-weight: 500; line-height: 1.5; letter-spacing: -.03em; color: var(--c-alabastro); }
.quote-person { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.person-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--c-terracota-deep); color: var(--c-white); font-size: .8125rem; font-weight: 700; }
.quote-person strong { display: block; font-size: .9375rem; font-weight: 600; }
.quote-person small { display: block; max-width: 34ch; margin-top: 2px; font-size: .8125rem; line-height: 1.6; color: var(--c-sage); }
.quote-controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.quote-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid oklch(50% 0.025 160); border-radius: 50%; color: var(--c-alabastro); transition: background-color .18s, border-color .18s; }
.quote-controls button:hover { background: var(--c-terracota-deep); border-color: var(--c-terracota-deep); }
.quote-count { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--c-sage); }
.testimonials :focus-visible { outline-color: var(--c-amber); }

/* ---------- S07 Contacto ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 7vw, 96px); align-items: start; }
.contact-copy h2 { font-size: clamp(2.5rem, 3.6vw + 1rem, 4.25rem); line-height: 1.08; letter-spacing: -.045em; }
.contact-copy h2 > span { display: block; }
.contact-copy .section-lead { margin-top: 24px; }
.contact-benefits { display: grid; gap: 12px; margin-top: 28px; font-weight: 500; color: var(--c-ink-2); }
.contact-benefits li { display: flex; align-items: center; gap: 10px; }
.contact-benefits .icon { flex: none; color: var(--c-terracota-deep); }
.whatsapp-contact { display: flex; align-items: flex-start; gap: 14px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--c-line); }
.whatsapp-contact > .icon { flex: none; color: var(--c-eucalipto); }
.whatsapp-title { font-weight: 600; }
.whatsapp-contact small { display: block; font-size: .8125rem; color: var(--c-quiet); }
.contact-form-panel { padding: clamp(24px, 3.5vw, 40px); background: var(--c-arena); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--shadow-hard); }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form h3, .form-success h3 { font-size: clamp(1.5rem, 1vw + 1.1rem, 1.875rem); letter-spacing: -.035em; }
.form-intro { margin-top: -10px; color: var(--c-muted); font-size: .9375rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { font-size: .875rem; font-weight: 600; color: var(--c-ink-2); }
.field legend { margin-bottom: 10px; padding: 0; }
.field small { font-weight: 400; color: var(--c-muted); }
.req { color: var(--c-terracota-deep); }
.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; font-size: 1rem; color: var(--c-carbon); background: var(--c-white); border: 1px solid var(--c-line-strong); border-radius: 7px; transition: border-color .18s, box-shadow .18s; }
.contact-form select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23565A57' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form ::placeholder { color: #7D817E; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--c-terracota-deep); box-shadow: 0 0 0 3px oklch(58.8% 0.157 34.3 / .15); outline: none; }
.contact-form.was-validated :invalid:not(fieldset) { border-color: var(--c-terracota-deep); }
.service-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-white); font-size: .875rem; font-weight: 500; color: var(--c-muted); cursor: pointer; transition: background-color .18s, color .18s, border-color .18s; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip:hover { border-color: var(--c-terracota-deep); }
.chip:has(input:checked) { color: var(--c-terracota-deep); background: oklch(58.8% 0.157 34.3 / .1); border-color: var(--c-terracota-deep); }
.chip:has(input:focus-visible) { outline: 2px solid var(--c-terracota-deep); outline-offset: 2px; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; line-height: 1.6; color: var(--c-muted); }
.consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-terracota-deep); }
.consent a { color: var(--c-terracota-deep); text-decoration: underline; text-underline-offset: 2px; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-error { padding: 12px 14px; border: 1px solid oklch(51.9% 0.139 34.7 / .4); border-radius: 7px; background: oklch(58.8% 0.157 34.3 / .07); font-size: .9375rem; color: var(--c-terracota-shadow); }
.submit-button { width: 100%; min-height: 54px; }
.submit-busy, .is-sending .submit-idle { display: none; }
.is-sending .submit-busy { display: inline-flex; align-items: center; gap: 10px; }
.submit-idle { display: inline-flex; align-items: center; gap: 14px; }
.submit-button[disabled] { cursor: wait; opacity: .8; }
.form-security { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .8125rem; color: var(--c-muted); }
.form-success { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; min-height: 480px; }
.form-success:focus { outline: none; }
.form-success p { color: var(--c-muted); }
.success-mark { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--c-eucalipto); color: var(--c-white); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pie ---------- */
.site-footer { padding-top: 64px; background: var(--c-carbon); color: var(--c-arena); }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1fr auto; gap: 40px; padding-bottom: 48px; }
.site-footer .brand { color: var(--c-alabastro); }
.site-footer .brand-mark i:nth-child(2) { background: var(--c-amber); }
.footer-brand p { margin-top: 18px; font-size: .9375rem; color: #A8ABA8; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 4px 24px; font-size: .9375rem; color: #C7CAC7; }
.footer-legal-links { display: grid; align-content: start; gap: 4px; font-size: .9375rem; color: #A8ABA8; }
.footer-links a, .footer-legal-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; transition: color .18s; }
.footer-links a:hover, .footer-legal-links a:hover { color: var(--c-amber); }
.footer-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .16em; color: #A8ABA8; }
.footer-social > div { display: flex; gap: 10px; margin-top: 14px; }
.social-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #3A3E3D; border-radius: 8px; color: #C7CAC7; transition: background-color .18s, border-color .18s, color .18s; }
.social-btn:hover { background: var(--c-terracota-deep); border-color: var(--c-terracota-deep); color: var(--c-white); }
.footer-social small { display: block; margin-top: 10px; font-size: .75rem; color: #9A9D9A; }
.site-footer :focus-visible { outline-color: var(--c-amber); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; border-top: 1px solid #2E3231; font-size: .8125rem; color: #9A9D9A; }
.footer-bottom > span:last-child { display: flex; align-items: center; gap: 10px; }
.footer-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-amber); }

/* ---------- Legales y error ---------- */
.legal-page { min-height: 70dvh; padding: calc(var(--header-h) + 64px) 0 96px; }
.legal-container { width: min(820px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.legal-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9375rem; font-weight: 600; color: var(--c-terracota-deep); }
.legal-header { margin: 24px 0 36px; padding-bottom: 28px; border-bottom: 1px solid var(--c-line); }
.legal-header h1 { margin-bottom: 14px; font-size: clamp(2rem, 2.5vw + 1rem, 3rem); letter-spacing: -.04em; line-height: 1.12; }
.legal-intro { color: var(--c-muted); }
.legal-notice { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--c-amber); border-radius: 8px; background: oklch(77.3% 0.133 75.4 / .1); font-size: .9375rem; color: #6B5320; }
.legal-body section { margin-bottom: 32px; }
.legal-body h2 { margin: 0 0 12px; font-size: 1.3125rem; letter-spacing: -.02em; }
.legal-body p { margin-bottom: 12px; color: var(--c-ink-2); }
.legal-body a { color: var(--c-terracota-deep); text-decoration: underline; }
.legal-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-line); font-size: .875rem; color: var(--c-quiet); }
.error-page { max-width: 640px; margin: 0 auto; padding: calc(var(--header-h) + 96px) var(--gutter) 120px; text-align: center; }
.error-page .eyebrow { justify-content: center; }
.error-page h1 { margin: 16px 0; font-size: clamp(2.25rem, 3vw + 1rem, 3.25rem); letter-spacing: -.04em; }
.error-page p { margin-bottom: 28px; color: var(--c-muted); }

/* ---------- S04 Portafolio: 8 proyectos conceptuales ---------- */
.portfolio-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 28px; }
.project { grid-column: span 2; min-width: 0; }
.project-lead { grid-column: span 3; }
.project-visual { --pbg: #E8D6CE; position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; padding: 9% 8% 0; overflow: hidden; text-align: left; background: var(--pbg); border: 1px solid oklch(24.7% 0.006 179.1 / .08); border-radius: var(--radius); }
.project-lead .project-visual { aspect-ratio: 16 / 11; }
.project-velocity .project-visual { --pbg: #E5E6CB; }
.project-habitat .project-visual { --pbg: #D7DCD6; }
.project-fintia .project-visual { --pbg: #CCD4D1; }
.project-nomada .project-visual { --pbg: #E8D6CE; }
.project-lumen .project-visual { --pbg: #D3E6E2; }
.project-terra .project-visual { --pbg: #E3DCC1; }
.project-atlas .project-visual { --pbg: #DDD7CD; }
.project-kinetik .project-visual { --pbg: #F0D3C5; }
.browser-frame { display: block; overflow: hidden; border-radius: 8px 8px 0 0; background: #FBFAF7; box-shadow: 10px 10px 0 oklch(24.7% 0.006 179.1 / .09); transform: rotate(-2deg) translateY(6px); transform-origin: 50% 100%; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.project:nth-child(even) .browser-frame { transform: rotate(2deg) translateY(6px); }
.project-visual:hover .browser-frame, .project-visual:focus-visible .browser-frame { transform: rotate(0) translateY(-6px); box-shadow: 14px 14px 0 oklch(24.7% 0.006 179.1 / .12); }
.browser-toolbar { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 10px; background: #ECEAE3; color: #81817F; }
.browser-toolbar > span { display: flex; gap: 4px; }
.browser-toolbar i { width: 5px; height: 5px; border-radius: 50%; background: #B0B0AA; }
.browser-toolbar small { font-size: 9px; }
.project-open { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid oklch(24.7% 0.006 179.1 / .22); border-radius: 50%; background: oklch(97.6% 0.007 88.6 / .85); color: var(--c-carbon); transition: background-color .18s, color .18s, transform .25s var(--ease-out); }
.project-visual:hover .project-open { background: var(--c-carbon); color: var(--c-alabastro); transform: rotate(45deg); }
.project-hint { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: oklch(24.7% 0.006 179.1 / .88); color: var(--c-white); font-size: .75rem; font-weight: 700; opacity: 0; transform: translateY(-4px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.project-visual:hover .project-hint, .project-visual:focus-visible .project-hint { opacity: 1; transform: none; }
.project-metric { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; padding: 10px 14px; background: oklch(24.7% 0.006 179.1 / .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid oklch(100% 0 0 / .14); border-radius: 8px; }
.project-metric strong { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; line-height: 1.15; letter-spacing: -.04em; color: var(--c-amber); }
.project-metric strong.is-word { font-size: 1.0625rem; letter-spacing: -.02em; }
.project-metric span { max-width: 18ch; font-size: .75rem; line-height: 1.35; color: var(--c-sage); }
.project-title { color: var(--c-muted); font-size: .9375rem; }
.project-kpi { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--c-carbon); color: var(--c-sage); font-size: .75rem; font-weight: 600; }
.project-kpi strong { color: var(--c-amber); font-size: .875rem; }
.project-kpi + .project-tags { margin-top: 12px; }

/* ---------- Maquetas: 1cqw = 1 % del ancho de la web ficticia ---------- */
.site { position: relative; isolation: isolate; contain: layout paint; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; text-align: left; }
.site .s { position: absolute; inset: 0; font-family: var(--f-body); font-size: 1.4cqw; line-height: 1.25; }
.site b { font-weight: 700; }
.site i, .site em { font-style: normal; }
.site picture, .site img { display: block; }
.m-nav { position: absolute; z-index: 4; left: 5cqw; right: 5cqw; top: 3.2cqw; display: flex; align-items: center; gap: 3cqw; font-size: 1.3cqw; white-space: nowrap; }
.m-nav b { margin-right: auto; font-size: 1.9cqw; letter-spacing: -.02em; }
.m-nav small { font-size: 1.2cqw; font-weight: 400; }
.site [class$="-copy"] { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1.8cqw; }

/* Velocity · e-commerce deportivo */
.site-velocity { background: #EFEDE6; color: #121212; }
.m-cart { padding: .6cqw 1.4cqw; border: 1px solid #121212; border-radius: 99px; }
.v-copy { left: 5cqw; top: 12.5cqw; width: 44cqw; }
.v-tag { font-size: 1.15cqw; font-weight: 800; letter-spacing: .16em; }
.v-h { font-family: var(--f-display); font-size: 8.4cqw; font-weight: 800; line-height: .9; letter-spacing: -.065em; }
.v-p { max-width: 30cqw; font-size: 1.45cqw; color: #4a4a4a; }
.v-sizes { display: flex; gap: .8cqw; }
.v-sizes i { display: grid; place-items: center; width: 3.8cqw; height: 3.8cqw; border: 1px solid #cfccc3; border-radius: 50%; font-size: 1.15cqw; font-weight: 700; }
.v-sizes .on { background: #121212; border-color: #121212; color: #fff; }
.v-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.5cqw 2.6cqw; border-radius: 99px; background: #121212; color: #fff; font-size: 1.35cqw; font-weight: 700; }
.v-cta em { color: #D4F04A; }
.v-disc { position: absolute; right: -4cqw; top: 6cqw; width: 50cqw; height: 50cqw; border-radius: 50%; background: #D4F04A; }
.v-photo { position: absolute; z-index: 1; right: 5cqw; top: 13cqw; width: 44cqw; overflow: hidden; border-radius: 1.6cqw; box-shadow: 1.5cqw 1.5cqw 0 #121212; transform: rotate(-3deg); }
.v-photo img { width: 100%; height: auto; }
.v-badge { position: absolute; z-index: 3; right: 6cqw; top: 10cqw; padding: .8cqw 1.4cqw; border-radius: .5cqw; background: #121212; color: #D4F04A; font-size: 1.2cqw; font-weight: 800; letter-spacing: .1em; transform: rotate(8deg); }
.v-ticker { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; gap: 2.4cqw; padding: 1.4cqw 5cqw; background: #121212; color: #EFEDE6; font-size: 1.1cqw; font-weight: 800; letter-spacing: .14em; white-space: nowrap; }

/* Hábitat · arquitectura */
.site-habitat { background: #F4F1EA; color: #2E3B33; }
.h-left { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 44cqw; display: flex; flex-direction: column; gap: 2cqw; padding: 3.2cqw 4cqw 3cqw 5cqw; }
.h-left .m-nav { position: static; }
.h-left .m-nav b { font-family: Georgia, serif; font-weight: 400; font-size: 2.1cqw; }
.h-kicker { margin-top: 3.4cqw; font-size: 1.1cqw; font-weight: 700; letter-spacing: .2em; color: #8A7A5C; }
.h-h { font-family: Georgia, "Times New Roman", serif; font-size: 6.3cqw; font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.h-h em { font-style: italic; color: #8A6A3E; }
.h-list { display: grid; margin-top: auto; }
.h-list i { display: flex; gap: 2cqw; padding: 1.1cqw 0; border-top: 1px solid #D9D1C2; font-size: 1.4cqw; }
.h-list small { color: #8A7A5C; font-size: 1.1cqw; }
.h-cta { font-size: 1.35cqw; font-weight: 700; text-decoration: underline; text-underline-offset: .5cqw; }
.h-right { position: absolute; right: 0; top: 0; bottom: 0; width: 56cqw; }
.h-photo, .h-photo img { width: 100%; height: 100%; }
.h-photo img { object-fit: cover; object-position: 60% center; }
.h-cap { position: absolute; left: 2.5cqw; bottom: 2.5cqw; padding: .8cqw 1.4cqw; background: rgba(244, 241, 234, .92); font-family: Georgia, serif; font-size: 1.2cqw; font-style: italic; }

/* Fintia · SaaS financiero */
.site-fintia { background: #0C1211; color: #EAF0EE; }
.f-glow { position: absolute; inset: 0; background: radial-gradient(45% 55% at 78% 45%, rgba(200, 82, 55, .42), transparent 70%), radial-gradient(30% 35% at 95% 90%, rgba(230, 168, 71, .32), transparent 70%); }
.site-fintia .m-nav span { color: #9FB0AB; }
.f-btn { padding: .7cqw 1.6cqw; border-radius: 99px; background: #EAF0EE; color: #0C1211 !important; font-weight: 700; }
.f-copy { left: 5cqw; top: 14cqw; width: 45cqw; }
.f-pill { align-self: flex-start; padding: .6cqw 1.4cqw; border: 1px solid rgba(255, 255, 255, .2); border-radius: 99px; font-size: 1.15cqw; color: #C8D3CF; }
.f-h { font-family: var(--f-display); font-size: 5.3cqw; font-weight: 700; line-height: 1.02; letter-spacing: -.045em; }
.f-h em { background: linear-gradient(90deg, #E6A847, #E07A5A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-p { max-width: 36cqw; font-size: 1.45cqw; color: #9FB0AB; }
.f-ctas { display: flex; gap: 1.2cqw; }
.f-ctas i { padding: 1.3cqw 2.2cqw; border: 1px solid rgba(255, 255, 255, .25); border-radius: 99px; font-size: 1.3cqw; font-weight: 700; }
.f-ctas .on { background: #E6A847; border-color: #E6A847; color: #0C1211; }
.f-dash { position: absolute; z-index: 2; right: 5cqw; top: 13cqw; width: 38cqw; display: flex; flex-direction: column; gap: 1cqw; padding: 2.4cqw; border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.6cqw; background: rgba(255, 255, 255, .06); }
.f-dash-t { font-size: 1.15cqw; color: #9FB0AB; }
.f-num { font-family: var(--f-display); font-size: 3.6cqw; letter-spacing: -.04em; }
.f-bars { display: flex; align-items: flex-end; gap: .9cqw; height: 13cqw; margin-top: 1cqw; }
.f-bars i { flex: 1; height: var(--h); border-radius: .4cqw .4cqw 0 0; background: linear-gradient(180deg, #E6A847, rgba(230, 168, 71, .2)); }
.f-bars i:last-child { background: linear-gradient(180deg, #E07A5A, #C85237); }
.f-card { position: absolute; z-index: 3; right: 30cqw; bottom: 5cqw; width: 16cqw; display: flex; flex-direction: column; gap: .5cqw; padding: 1.6cqw; border-radius: 1.2cqw; background: #EAF0EE; color: #0C1211; box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .45); font-size: 1.1cqw; }
.f-card b { font-family: var(--f-display); font-size: 2.6cqw; }
.f-prog { height: .6cqw; overflow: hidden; border-radius: 99px; background: #D5DEDB; }
.f-prog i { display: block; width: 98%; height: 100%; background: #2E8B6E; }

/* Nómada · café de especialidad */
.site-nomada { background: #2A1C15; color: #F3E6D3; }
.site-nomada .m-nav span { color: #CDB89C; }
.n-copy { left: 5cqw; top: 13cqw; width: 46cqw; }
.n-kicker { font-size: 1.15cqw; font-weight: 700; letter-spacing: .2em; color: #E6A847; }
.n-h { font-family: var(--f-display); font-size: 5.9cqw; line-height: 1; letter-spacing: -.045em; }
.n-h em { font-family: Georgia, serif; font-style: italic; font-weight: 400; color: #E6A847; }
.n-notes { display: flex; gap: .8cqw; }
.n-notes i { padding: .6cqw 1.3cqw; border-radius: 99px; background: rgba(243, 230, 211, .1); font-size: 1.15cqw; }
.n-freq { align-self: flex-start; display: inline-flex; padding: .5cqw; border-radius: 99px; background: #3B2A21; }
.n-freq i { padding: .9cqw 1.8cqw; border-radius: 99px; font-size: 1.2cqw; }
.n-freq .on { background: #F3E6D3; color: #2A1C15; font-weight: 700; }
.n-cta { align-self: flex-start; padding: 1.5cqw 2.6cqw; border-radius: .8cqw; background: #E6A847; color: #2A1C15; font-size: 1.35cqw; font-weight: 800; }
.n-bag { position: absolute; z-index: 2; right: 12cqw; top: 11cqw; width: 25cqw; height: 40cqw; border-radius: 1.2cqw 1.2cqw 1.6cqw 1.6cqw; background: linear-gradient(90deg, #D6C6AB, #EFE4D1 40%, #D3C2A6); box-shadow: 2cqw 3cqw 5cqw rgba(0, 0, 0, .45); transform: rotate(4deg); }
.n-bag-top { position: absolute; left: 0; right: 0; top: 0; height: 4cqw; border-radius: 1.2cqw 1.2cqw 0 0; background: repeating-linear-gradient(90deg, #C9B89B 0 .6cqw, #D9CBB3 .6cqw 1.2cqw); }
.n-label { position: absolute; left: 2.5cqw; right: 2.5cqw; top: 11cqw; bottom: 7cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; border-radius: .6cqw; background: #C85237; color: #F3E6D3; }
.n-label b { font-size: 2.2cqw; letter-spacing: .18em; }
.n-label i { font-family: Georgia, serif; font-size: 4.4cqw; font-style: italic; }
.n-label small { font-size: 1.05cqw; letter-spacing: .1em; }
.n-bean { position: absolute; z-index: 3; width: 4.4cqw; height: 3cqw; border-radius: 50%; background: #6B4228; box-shadow: inset -.5cqw -.4cqw 0 rgba(0, 0, 0, .25); }
.n-bean::after { content: ""; position: absolute; left: 50%; top: 15%; bottom: 15%; width: .35cqw; border-radius: 99px; background: #3B2415; transform: translateX(-50%) rotate(12deg); }
.n-bean.b1 { right: 39cqw; bottom: 9cqw; transform: rotate(-20deg); }
.n-bean.b2 { right: 6cqw; bottom: 17cqw; transform: rotate(35deg); }
.n-bean.b3 { right: 8cqw; top: 13cqw; transform: rotate(-50deg); }
.n-stamp { position: absolute; z-index: 3; right: 5cqw; bottom: 4cqw; display: grid; place-items: center; width: 11cqw; height: 11cqw; border: 1px dashed #E6A847; border-radius: 50%; color: #E6A847; font-size: 1cqw; font-weight: 800; line-height: 1.4; letter-spacing: .1em; text-align: center; transform: rotate(-12deg); }

/* Lumen · clínica dental */
.site-lumen { background: #F4F8F7; color: #12312D; }
.site-lumen .s::before { content: ""; position: absolute; right: -12cqw; top: -16cqw; width: 64cqw; height: 64cqw; border-radius: 50%; background: radial-gradient(circle, #D5EEE9, transparent 65%); }
.site-lumen .m-nav span { color: #4B6A65; }
.site-lumen .m-nav small { color: #5B7A75; }
.l-dot { display: inline-block; width: 1.5cqw; height: 1.5cqw; margin-right: .8cqw; vertical-align: -.1cqw; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #9FE3D6, #2F7D74); }
.l-btn { padding: .8cqw 1.8cqw; border-radius: 99px; background: #12312D; color: #fff !important; font-weight: 700; }
.l-copy { left: 5cqw; top: 14cqw; width: 44cqw; }
.l-kicker { align-self: flex-start; padding: .6cqw 1.3cqw; border-radius: 99px; background: #DCEFEB; color: #2F7D74; font-size: 1.2cqw; font-weight: 700; }
.l-h { font-family: var(--f-display); font-size: 6.5cqw; font-weight: 600; line-height: .98; letter-spacing: -.05em; }
.l-p { max-width: 34cqw; font-size: 1.5cqw; color: #4B6A65; }
.l-trust { display: flex; flex-wrap: wrap; gap: 1.4cqw; font-size: 1.2cqw; font-weight: 600; color: #2F7D74; }
.l-book { position: absolute; z-index: 2; right: 5cqw; top: 12cqw; width: 36cqw; display: flex; flex-direction: column; gap: 1.8cqw; padding: 2.6cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 3cqw 6cqw rgba(18, 49, 45, .12); }
.l-book > b { font-size: 1.9cqw; }
.l-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8cqw; }
.l-days i { display: grid; place-items: center; padding: 1cqw 0; border: 1px solid #DCE7E4; border-radius: 1cqw; font-size: 2cqw; font-weight: 700; line-height: 1.1; }
.l-days small { font-size: .95cqw; font-weight: 600; color: #6F8A85; }
.l-days .on { background: #2F7D74; border-color: #2F7D74; color: #fff; }
.l-days .on small { color: #CFEEE8; }
.l-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw; }
.l-slots i { padding: .9cqw 0; border-radius: 99px; background: #F1F6F5; font-size: 1.25cqw; text-align: center; }
.l-slots .on { background: #12312D; color: #fff; }
.l-cta { padding: 1.5cqw; border-radius: 1cqw; background: #2F7D74; color: #fff; font-size: 1.45cqw; font-weight: 700; text-align: center; }

/* Terra Olivo · aceite gourmet */
.site-terra { background: #EEE9DA; color: #2F3A20; }
.t-mast { position: absolute; z-index: 3; left: 5cqw; right: 5cqw; top: 3cqw; display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.6cqw; border-bottom: 1px solid #2F3A20; font-size: 1.15cqw; }
.t-mast b { font-family: Georgia, serif; font-size: 1.8cqw; font-weight: 400; letter-spacing: .1em; }
.t-copy { left: 5cqw; top: 13.5cqw; width: 42cqw; }
.t-kicker { font-size: 1.15cqw; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8A6A2A; }
.t-h { font-family: Georgia, serif; font-size: 7.4cqw; font-weight: 400; line-height: .92; letter-spacing: -.04em; }
.t-h em { font-style: italic; color: #6F8034; }
.t-p { max-width: 34cqw; font-size: 1.45cqw; line-height: 1.5; color: #55603F; }
.t-cta { align-self: flex-start; padding: 1.4cqw 2.6cqw; border: 1px solid #2F3A20; font-size: 1.2cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.t-sun { position: absolute; right: 10cqw; top: 14cqw; width: 34cqw; height: 34cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #E9C46A, #C9973A); }
.t-bottle { position: absolute; z-index: 2; right: 20.5cqw; top: 9.5cqw; width: 13cqw; height: 46cqw; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(1.5cqw 2cqw 2cqw rgba(47, 58, 32, .35)); }
.t-cap { width: 4.2cqw; height: 4cqw; border-radius: .5cqw .5cqw .2cqw .2cqw; background: linear-gradient(90deg, #8C6A26, #D9B25A, #8C6A26); }
.t-neck { width: 3.6cqw; height: 7cqw; background: linear-gradient(90deg, #1E2A14, #3F5426 45%, #1E2A14); }
.t-body { position: relative; flex: 1; width: 100%; border-radius: 4cqw 4cqw 1.2cqw 1.2cqw; background: linear-gradient(90deg, #1A2410, #3D5224 40%, #2A3818 70%, #18200E); }
.t-label { position: absolute; left: 1.2cqw; right: 1.2cqw; top: 9cqw; height: 17cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw; border-block: .4cqw solid #B08A3A; background: #F3EEDF; color: #2F3A20; }
.t-label b { font-family: Georgia, serif; font-size: 1.9cqw; font-weight: 400; letter-spacing: .15em; }
.t-label small { font-size: .9cqw; letter-spacing: .2em; }
.t-label i { font-family: Georgia, serif; font-size: .9cqw; font-style: italic; }
.t-leaf { position: absolute; z-index: 3; width: 9cqw; height: 2.6cqw; border-radius: 100% 0; background: linear-gradient(90deg, #5E7330, #8FA352); }
.t-leaf.l1 { right: 31cqw; bottom: 9cqw; transform: rotate(-25deg); }
.t-leaf.l2 { right: 7cqw; bottom: 13cqw; transform: rotate(20deg); }
.t-leaf.l3 { right: 11cqw; top: 13cqw; transform: rotate(-60deg); opacity: .85; }

/* Atlas · despacho legal */
.site-atlas { background: #F6F4EE; color: #141414; }
.site-atlas .s::after { content: "§"; position: absolute; left: 38cqw; bottom: -9cqw; font-family: Georgia, serif; font-size: 34cqw; line-height: 1; color: rgba(122, 46, 42, .06); }
.site-atlas .m-nav { padding-bottom: 1.6cqw; border-bottom: 1px solid #141414; }
.site-atlas .m-nav b { font-family: Georgia, serif; font-weight: 400; letter-spacing: .2em; }
.site-atlas .m-nav small { font-family: var(--f-body); letter-spacing: 0; color: #666; }
.a-copy { left: 5cqw; top: 13cqw; width: 50cqw; gap: 2.2cqw; }
.a-kicker { font-size: 1.2cqw; font-weight: 700; letter-spacing: .06em; color: #7A2E2A; }
.a-h { font-family: Georgia, serif; font-size: 6.7cqw; font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.a-h em { font-style: italic; color: #7A2E2A; }
.a-cta { align-self: flex-start; padding: 1.6cqw 2.8cqw; background: #141414; color: #F6F4EE; font-size: 1.35cqw; font-weight: 700; }
.a-areas { position: absolute; z-index: 2; right: 5cqw; top: 14.5cqw; width: 33cqw; display: grid; border-top: 1px solid #141414; }
.a-areas span { display: flex; align-items: baseline; gap: 1.6cqw; padding: 1.7cqw 0; border-bottom: 1px solid #CFCAC0; font-family: Georgia, serif; font-size: 2.1cqw; }
.a-areas small { font-family: var(--f-body); font-size: 1.05cqw; font-weight: 700; color: #7A2E2A; }
.a-areas em { margin-left: auto; font-size: 1.6cqw; color: #7A2E2A; }
.a-quote { position: absolute; z-index: 2; right: 5cqw; bottom: 5cqw; width: 33cqw; font-family: Georgia, serif; font-size: 1.5cqw; font-style: italic; color: #555; }

/* Kinetik · fitness boutique */
.site-kinetik { background: #0F0F0F; color: #F5F5F0; }
.site-kinetik .m-nav b { font-weight: 900; font-style: italic; letter-spacing: .02em; }
.site-kinetik .m-nav span { color: #AAA; }
.k-btn { padding: .8cqw 1.8cqw; border-radius: .4cqw; background: #FF5A1F; color: #0F0F0F !important; font-weight: 800; }
.k-stripes { position: absolute; right: -8cqw; top: 0; bottom: 0; width: 46cqw; background: repeating-linear-gradient(-55deg, #FF5A1F 0 2.2cqw, transparent 2.2cqw 4.6cqw); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); opacity: .9; }
.k-h { position: absolute; z-index: 2; left: 5cqw; top: 11.5cqw; font-family: var(--f-display); font-size: 10cqw; font-style: italic; font-weight: 800; line-height: .86; letter-spacing: -.06em; }
.k-out { color: transparent; -webkit-text-stroke: .22cqw #F5F5F0; }
.k-p { position: absolute; z-index: 2; left: 5cqw; top: 32.5cqw; width: 40cqw; font-size: 1.55cqw; color: #C9C9C2; }
.k-sched { position: absolute; z-index: 2; left: 5cqw; top: 39cqw; display: flex; gap: 1cqw; }
.k-sched i { display: flex; flex-direction: column; padding: 1cqw 1.6cqw; border: 1px solid #333; border-radius: .6cqw; font-size: 1.4cqw; font-weight: 700; }
.k-sched small { font-size: 1cqw; color: #999; }
.k-sched .on { border-color: #FF5A1F; color: #FF5A1F; }
.k-cta { position: absolute; z-index: 2; left: 5cqw; bottom: 5cqw; padding: 1.6cqw 2.8cqw; border-radius: .4cqw; background: #FF5A1F; color: #0F0F0F; font-size: 1.5cqw; font-weight: 800; }
.k-badge { position: absolute; z-index: 2; right: 9cqw; bottom: 7cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 17cqw; height: 17cqw; border-radius: 50%; background: #F5F5F0; color: #0F0F0F; font-size: 1.2cqw; font-weight: 700; transform: rotate(-8deg); }
.k-badge b { font-family: var(--f-display); font-size: 6cqw; font-weight: 800; line-height: 1; }

/* «Antes»: plantilla genérica y anticuada, a propósito */
.site-before { background: #fff; color: #333; }
.site-before .s { font-family: Arial, Helvetica, sans-serif; }
.ob-top { display: flex; align-items: center; justify-content: space-between; height: 3cqw; padding: 0 2cqw; background: #333; color: #CCC; font-size: 1.1cqw; }
.ob-head { display: flex; align-items: center; gap: 2cqw; padding: 1.6cqw 2cqw; border-bottom: .4cqw solid var(--old); background: linear-gradient(#fff, #E9E9E9); }
.ob-head b { font-family: "Times New Roman", serif; font-size: 2.6cqw; color: var(--old); white-space: nowrap; }
.ob-nav { margin-left: auto; overflow: hidden; font-size: 1.15cqw; color: #555; white-space: nowrap; text-overflow: ellipsis; }
.ob-banner { position: relative; display: flex; align-items: center; justify-content: center; height: 26cqw; background: linear-gradient(135deg, var(--old), #99A9AA); }
.ob-photo, .ob-ph { position: absolute; inset: 0; }
.ob-photo img { width: 100%; height: 100%; object-fit: fill; filter: saturate(.5) contrast(.85) brightness(.85); }
.ob-ph { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 1cqw, transparent 1cqw 2cqw); }
.ob-banner-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; color: #fff; text-align: center; text-shadow: .2cqw .2cqw .2cqw #000; }
.ob-banner-copy > b { font-family: "Times New Roman", serif; font-size: 3.5cqw; }
.ob-banner-copy > span { font-size: 1.4cqw; font-style: italic; }
.ob-btns { display: flex; gap: .8cqw; font-style: normal !important; }
.ob-btns i { padding: .7cqw 1.4cqw; border: 1px solid #C49000; border-radius: .4cqw; background: linear-gradient(#FDD835, #F9A825); color: #333; font-size: 1.15cqw; font-weight: 700; text-shadow: none; }
.ob-btns i:nth-child(2) { border-color: #8E0000; background: linear-gradient(#E53935, #B71C1C); color: #fff; }
.ob-btns i:nth-child(3) { border-color: #0D3B10; background: linear-gradient(#43A047, #1B5E20); color: #fff; }
.ob-banner > .ob-arrow { position: absolute; z-index: 1; left: 0; top: 50%; display: grid; place-items: center; width: 3cqw; height: 5cqw; background: rgba(0, 0, 0, .4); color: #fff; font-size: 2.6cqw; transform: translateY(-50%); }
.ob-banner > .ob-arrow ~ .ob-arrow { left: auto; right: 0; }
.ob-dots { position: absolute; z-index: 1; left: 50%; bottom: 1cqw; color: #fff; font-size: 1.1cqw; letter-spacing: .3em; transform: translateX(-50%); }
.ob-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; padding: 2cqw; }
.ob-cols > div { display: flex; flex-direction: column; gap: .8cqw; padding: 1.4cqw; border: 1px solid #DDD; background: #F7F7F7; box-shadow: .3cqw .3cqw .6cqw rgba(0, 0, 0, .15); }
.ob-cols b { font-family: "Times New Roman", serif; font-size: 1.6cqw; color: var(--old); }
.ob-lines { height: 4cqw; background: repeating-linear-gradient(180deg, #BBB 0 .35cqw, transparent .35cqw 1cqw); }
.ob-cols i { font-size: 1.1cqw; color: #06C; text-decoration: underline; }
.ob-strip { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2cqw; background: #FF0; color: #C00; font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 1.3cqw; font-weight: 700; text-align: center; }

/* ---------- Comparador antes / después ---------- */
.case-dialog { width: min(900px, 100% - 32px); }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.case-industry { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-terracota-deep); }
.comparison { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; touch-action: pan-y; }
.comparison-after, .comparison-before { position: absolute; inset: 0; isolation: isolate; }
.comparison-after { z-index: 1; }
.comparison-before { z-index: 2; }
.comparison-before { clip-path: inset(0 calc(100% - var(--compare)) 0 0); }
.comparison .site { height: 100%; }
.comparison-divider { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--compare); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px oklch(24.7% 0.006 179.1 / .2); pointer-events: none; }
.comparison-divider > span { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; gap: 2px; width: 48px; height: 48px; border-radius: 50%; background: var(--c-terracota-deep); color: var(--c-white); box-shadow: 0 6px 18px oklch(24.7% 0.006 179.1 / .3); transform: translate(-50%, -50%); }
.comparison-range { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.comparison:has(.comparison-range:focus-visible) .comparison-divider > span { outline: 3px solid var(--c-carbon); outline-offset: 2px; box-shadow: 0 0 0 7px #fff, 0 6px 18px oklch(24.7% 0.006 179.1 / .3); }
.cmp-tag { position: absolute; z-index: 3; top: 12px; padding: 5px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; pointer-events: none; }
.cmp-before { left: 12px; background: oklch(100% 0 0 / .92); color: #333; }
.cmp-after { right: 12px; background: var(--c-carbon); color: var(--c-white); }
.compare-label { margin-top: -6px; font-size: .8125rem !important; text-align: center; color: var(--c-quiet) !important; }
.case-explanation { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.case-col { padding: 16px 18px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-high); }
.case-col-after { border-color: oklch(35.3% 0.027 165.8 / .28); background: oklch(35.3% 0.027 165.8 / .06); }
.case-col-title { margin-bottom: 6px; font-size: .75rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-carbon) !important; }
.case-col p { font-size: .9375rem; }
.case-col ul { display: grid; gap: 6px; margin-top: 12px; font-size: .875rem; font-weight: 600; color: var(--c-ink-2); }
.case-col li { display: flex; align-items: center; gap: 8px; }
.case-col-before .icon { flex: none; color: var(--c-terracota-deep); }
.case-col-after .icon { flex: none; color: var(--c-eucalipto); }

@media (max-width: 980px) {
	.portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.project, .project-lead { grid-column: span 1; }
	.project-lead .project-visual { aspect-ratio: 5 / 4; }
}
@media (max-width: 700px) {
	.portfolio-grid { grid-template-columns: 1fr; gap: 44px; }
	.project-metric { right: 10px; bottom: 10px; padding: 8px 12px; }
	.project-metric strong { font-size: 1.25rem; }
	.project-metric strong.is-word { font-size: 1rem; }
	.case-explanation { grid-template-columns: 1fr; }
	.cmp-tag { top: 8px; padding: 4px 8px; }
	.cmp-before { left: 8px; }
	.cmp-after { right: 8px; }
}


/* ---------- Páginas interiores: servicios, índice y «Quiénes somos» ---------- */
.page-hero { padding-block: calc(var(--header-h) + clamp(32px, 5vw, 64px)) clamp(40px, 5vw, 72px); background: linear-gradient(180deg, var(--c-surface-high), var(--c-alabastro)); border-bottom: 1px solid var(--c-line); }
.page-hero h1 { max-width: 18ch; margin: 22px 0 22px; font-size: clamp(2.5rem, 3.6vw + 1rem, 4.5rem); line-height: 1.05; letter-spacing: -.045em; }
.page-hero h1 .h2-muted { display: block; }
.page-lead { max-width: 44rem; font-size: var(--t-lead); line-height: 1.75; color: var(--c-muted); }
.page-hero-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: oklch(58.8% 0.157 34.3 / .12); color: var(--c-terracota-deep); }
.page-tags { align-self: center; font-size: .8125rem; font-weight: 600; color: var(--c-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 28px; padding: 0; list-style: none; font-size: .8125rem; color: var(--c-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 10px; color: var(--c-line-strong); }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs a:hover { color: var(--c-terracota-deep); }
.es-only { margin-top: 16px; padding: 10px 14px; border: 1px solid var(--c-amber); border-radius: 8px; background: oklch(77.3% 0.133 75.4 / .1); font-size: .9375rem; color: #6B5320; max-width: 44rem; }
.page-section { padding-block: clamp(56px, 7vw, 96px); }
.page-section > h2, .page-band h2 { margin: 0 0 28px; font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem); }
.page-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.page-split h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 1vw + 1rem, 2rem); }
.page-h2-gap { margin-top: 40px !important; }
.page-text { color: var(--c-ink-2); font-size: var(--t-lead); line-height: 1.75; }
.page-card { padding: clamp(24px, 3vw, 36px); background: var(--c-arena); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--shadow-hard); }
.check-list { display: grid; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; color: var(--c-ink-2); }
.check-list .icon { flex: none; margin-top: 3px; color: var(--c-terracota-deep); }
.page-band { padding-block: clamp(56px, 7vw, 96px); background: var(--c-eucalipto); color: var(--c-alabastro); }
.page-band h2 { color: var(--c-alabastro); }
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.steps-row li { padding: 24px; border: 1px solid oklch(50% 0.025 160); border-radius: 12px; }
.steps-row .step-number { background: transparent; border-color: var(--c-amber); color: var(--c-amber); }
.steps-row h3 { margin: 18px 0 8px; font-size: 1.25rem; color: var(--c-alabastro); }
.steps-row p { color: var(--c-sage); }
.page-narrow { max-width: 860px; }
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface-high); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 20px; font-family: var(--f-display); font-size: 1.125rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; color: var(--c-terracota-deep); transition: transform .2s var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { padding: 0 20px 20px; color: var(--c-ink-2); line-height: 1.75; }
.service-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.service-links a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 18px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-arena); font-weight: 600; transition: border-color .18s, transform .18s var(--ease-out); }
.service-links a:hover { border-color: var(--c-terracota); transform: translateY(-2px); }
.service-links a > .icon:last-child { margin-left: auto; color: var(--c-muted); }
.services-index .service-title { margin: 0; }
.beliefs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.beliefs li { padding: 24px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-arena); }
.beliefs h3 { margin: 18px 0 8px; font-size: 1.25rem; }
.beliefs p { color: var(--c-muted); }
.contact-list { display: grid; gap: 12px; margin-top: 4px; }
.contact-list li { display: flex; align-items: center; gap: 12px; }
.contact-list .icon { color: var(--c-terracota-deep); }
.contact-list a { text-decoration: underline; text-underline-offset: 3px; }
.page-split .media-card { margin-top: 0; }
.cta-band { padding-block: clamp(56px, 7vw, 88px); background: var(--c-carbon); color: var(--c-alabastro); }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-band h2 { margin: 0 0 10px; color: var(--c-alabastro); font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem); }
.cta-band p { max-width: 40rem; color: #A8ABA8; }
.services-foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer-services { display: grid; align-content: start; gap: 4px; font-size: .9375rem; color: #A8ABA8; }
.footer-services .footer-kicker { margin-bottom: 6px; }
.footer-services a { min-height: 34px; display: inline-flex; align-items: center; transition: color .18s; }
.footer-services a:hover { color: var(--c-amber); }
.footer-contact { display: grid; gap: 6px; margin-top: 18px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: #C7CAC7; }
.footer-contact a:hover { color: var(--c-amber); }
@media (max-width: 980px) {
	.page-split, .cta-band-inner { grid-template-columns: 1fr; display: grid; }
	.steps-row, .beliefs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.steps-row, .beliefs { grid-template-columns: 1fr; }
}

/* ---------- Motion (docs/04-motion.md) ---------- */
/* M1 · entrada del hero, CSS puro. H1 y párrafo quedan fuera. */
.enter { animation: rise .7s var(--ease-out) both; animation-delay: calc(120ms + var(--d, 0) * 80ms); }
.growth-note.enter { animation: rise-note .7s var(--ease-out) both, float-note 1.6s var(--ease-io) 2 alternate; animation-delay: 360ms, 1.06s; }
.growth-line { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.2s var(--ease-out) .5s both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes rise-note { from { opacity: 0; transform: translateY(16px) rotate(-4deg); } to { transform: rotate(-4deg); } }
@keyframes float-note { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-8px) rotate(-2deg); } }
@keyframes draw { from { stroke-dashoffset: 1; } }

/* M3 · revelado al entrar en viewport: solo si hay JS. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* M4 · progreso del proceso ligado al scroll donde exista scroll-driven nativo. */
@supports (animation-timeline: view()) {
	.process-steps::after { animation: grow-y linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
	@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
	html { scroll-behavior: auto; }
	.js .reveal { opacity: 1; transform: none; }
	.process-steps::after { animation: none !important; transform: scaleY(1); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.desktop-nav { gap: 18px; font-size: .8125rem; }
	.header-cta { padding-inline: 12px; }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.service-card { min-height: 250px; }
	.growth-note { right: 4%; bottom: 20%; width: 240px; }
	.footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
	.desktop-nav, .header-cta { display: none; }
	.menu-toggle { display: grid; }
	.results { grid-template-columns: repeat(3, 1fr); }
	.results-intro { grid-column: 1 / -1; }
	.metric:first-of-type { border-left: 0; padding-left: 0; }
	.portfolio-grid, .process, .testimonial-inner, .contact { grid-template-columns: 1fr; }
	.mockups-grid { grid-template-columns: repeat(2, 1fr); }
	.section-heading { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 700px) {
	:root { --header-h: 68px; }
	.brand { font-size: 1.1875rem; }
	.hero { min-height: auto; padding-bottom: 150px; }
	.hero-art img { object-position: 78% center; opacity: .55; }
	.hero-shade { background: linear-gradient(180deg, oklch(97.6% 0.007 88.6 / .55), oklch(97.6% 0.007 88.6 / .9) 70%, var(--c-alabastro)); }
	.hero h1 { max-width: none; }
	.hero-actions .button { width: 100%; }
	.growth-note { position: relative; right: auto; bottom: auto; width: min(280px, 100%); margin: 40px 0 0 var(--gutter); }
	.hero { flex-direction: column; align-items: stretch; }
	.hero-bottom { flex-wrap: wrap; justify-content: center; text-align: center; }
	.hero-bottom > span { display: none; }
	.results { grid-template-columns: 1fr; gap: 28px; }
	.metric { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid var(--c-line); }
	.metric:first-of-type { padding-top: 20px; }
	.metrics-disclaimer { text-align: left; }
	.services-grid, .mockups-grid, .form-row, .case-explanation { grid-template-columns: 1fr; }
	.service-card { min-height: 0; }
	.services-foot { flex-direction: column; align-items: flex-start; }
	.footer-top { grid-template-columns: 1fr; gap: 32px; }
	.footer-bottom { flex-direction: column; }
}
@media (min-width: 1600px) {
	.growth-note { right: 12%; }
}