/* ============================================================= MCR AGENCY — GLOBAL CSS Consolidación de todos los módulos en un solo archivo. Se inyecta inline en vía template-parts/head.php ============================================================= ORDEN DE CARGA: 1. Tokens (variables + fuentes) 2. Reset 3. Components (botones, cards, marquee, nav) 4. Footer 5. Home 6. About 7. Services 8. Talent 9. Portfolio 10. Press 11. Contact 12. Blog 13. Legal / Page default 14. Cookies (popup) ============================================================= */ /* ====== tokens.css ====== */ /* ============================================================= MCR AGENCY — DESIGN SYSTEM v1.0 Tokens, Tipografía y Reset ============================================================= */ /* ------------------------------------------------------------- 1. FONT FACES ------------------------------------------------------------- */ @font-face { font-family: "Tusker Grotesk"; src: url("./fonts/TuskerGrotesk-6700Bold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Tusker Grotesk"; src: url("./fonts/TuskerGrotesk-5700Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Tusker Grotesk"; src: url("./fonts/TuskerGrotesk-5600Semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT"; src: url("./fonts/HelveticaNeueBold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT"; src: url("./fonts/HelveticaNeueMedium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT"; src: url("./fonts/HelveticaNeueRoman.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* ------------------------------------------------------------- 2. DESIGN TOKENS ------------------------------------------------------------- */ :root { /* --- COLOR · BASE --- */ --mcr-black: #0f0f0f; /* fondo base — nunca usar #000 puro */ --mcr-surface-1: #171717; /* superficie elevada sutil */ --mcr-surface-2: #1e1e1e; /* card/panel */ --mcr-surface-3: #232323; /* hover/active sobre surface */ --mcr-surface-4: #2e2e2e; /* border sutil, divisores */ /* --- COLOR · MARCA --- */ --mcr-purple: #6700f2; /* color de marca — único */ --mcr-purple-600: #5500cc; /* hover */ --mcr-purple-400: #8833ff; /* hover inverso, highlights */ --mcr-purple-200: #c7a8ff; /* tint sobre foto, glows */ --mcr-purple-glow: rgba(103, 0, 242, 0.35); /* shadows, glows */ /* --- COLOR · ACENTO EDITORIAL --- */ --mcr-accent: #00df82; /* uso raro, solo editorial */ --mcr-accent-glow: rgba(0, 223, 130, 0.25); /* --- COLOR · TEXTO --- */ --mcr-text: #ffffff; /* texto principal */ --mcr-text-muted: #a8a8a8; /* secundario */ --mcr-text-dim: #8a8a8a; /* terciario, legal — AA incluso sobre surface-3 */ /* --- COLOR · ESTADOS --- */ --mcr-border: rgba(255, 255, 255, 0.08); --mcr-border-hover: rgba(255, 255, 255, 0.18); --mcr-overlay: rgba(15, 15, 15, 0.72); /* --- TIPOGRAFÍA · FAMILIAS --- */ --font-display: "Tusker Grotesk", "Arial Narrow", sans-serif; --font-body: "Helvetica Neue LT", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; /* --- TIPOGRAFÍA · ESCALA DISPLAY (Tusker) --- Uso: headlines editoriales, hero, póster. Condensada, masiva. Pareja visual: display-1 grueso (800) + display-2 menos grueso (700) al lado */ --fs-display-1: clamp(3.5rem, 8vw, 8rem); /* 56px → 128px */ --fs-display-2: clamp(2.75rem, 6vw, 6rem); /* 44px → 96px */ --fs-display-3: clamp(2rem, 4.5vw, 4.5rem); /* 32px → 72px */ /* --- TIPOGRAFÍA · ESCALA HEADING (Tusker) --- */ --fs-h1: clamp(2.5rem, 4vw, 4rem); /* 40px → 64px */ --fs-h2: clamp(2rem, 3vw, 3rem); /* 32px → 48px */ --fs-h3: clamp(1.5rem, 2.25vw, 2.25rem); /* 24px → 36px */ --fs-h4: clamp(1.25rem, 1.75vw, 1.75rem); /* 20px → 28px */ /* --- TIPOGRAFÍA · ESCALA UI (Helvetica) --- */ --fs-h5: 1.125rem; /* 18px */ --fs-h6: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px — lead paragraph */ --fs-base: 1rem; /* 16px — body */ --fs-sm: 0.875rem; /* 14px — ui labels */ --fs-xs: 0.75rem; /* 12px — tags, legal */ /* --- TIPOGRAFÍA · LINE-HEIGHT --- Tusker es condensado y tiene mucha altura interna — por eso los line-heights son intencionalmente amplios vs otras fuentes */ --lh-tight: 1.055; /* display — un poco más de aire para evitar recortes */ --lh-snug: 1.16; /* heading — respiración ligera entre líneas */ --lh-normal: 1.5; /* body */ --lh-relaxed: 1.7; /* lectura larga */ /* --- TIPOGRAFÍA · TRACKING --- */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.12em; /* eyebrow, uppercase labels */ /* --- SPACING · escala de 4px --- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --space-11: 12rem; /* 192 */ /* --- LAYOUT --- */ --container-max: 1440px; --container-wide: 1600px; --gutter-desktop: 2rem; --gutter-mobile: 1.25rem; /* --- RADIOS --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; /* --- BORDERS --- */ --border-width: 1px; --border-thick: 2px; /* --- SHADOWS --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 40px var(--mcr-purple-glow); --shadow-glow-accent: 0 0 40px var(--mcr-accent-glow); /* --- MOTION · MCR v2 --- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-press: 120ms; --duration-fast: 160ms; --duration-base: 220ms; --duration-enter: 360ms; --duration-slow: 420ms; --duration-section: 640ms; --duration-slower: 640ms; --motion-distance-sm: 8px; --motion-distance-md: 18px; --motion-distance-lg: 28px; --mcr-focus: #b896ff; /* --- Z-INDEX --- */ --z-base: 1; --z-content: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 500; --z-modal: 1000; } /* ------------------------------------------------------------- 3. RESET / BASE ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--mcr-black); color: var(--mcr-text); font-family: var(--font-body); font-size: var(--fs-base); font-weight: 400; line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--duration-base) var(--ease-out); } button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; outline: none; } ul, ol { list-style: none; } ::selection { background: var(--mcr-purple); color: var(--mcr-text); } /* Utilidad accesible global. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } /* ------------------------------------------------------------- 4. TIPOGRAFÍA · CLASES UTILITARIAS ------------------------------------------------------------- */ /* DISPLAY — Tusker, uso editorial (hero, posters) */ .mcr-display-1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; padding-block: 0.15em; /* evita cortes por overflow de Tusker */ } .mcr-display-2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-2); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; padding-block: 0.15em; } .mcr-display-3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-3); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; padding-block: 0.1em; } /* HEADINGS — Tusker para H1–H4, Helvetica para H5–H6 */ .mcr-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; } .mcr-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; } .mcr-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; } .mcr-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--tracking-normal); text-transform: uppercase; } .mcr-h5 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h5); line-height: var(--lh-snug); letter-spacing: var(--tracking-normal); } .mcr-h6 { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-h6); line-height: var(--lh-snug); letter-spacing: var(--tracking-normal); text-transform: uppercase; } /* BODY */ .mcr-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--mcr-text); } .mcr-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--mcr-text); } .mcr-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--mcr-text-muted); } /* EYEBROW — etiqueta arriba de secciones */ .mcr-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); line-height: 1; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--mcr-purple-400); } /* LABEL — UI */ .mcr-label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); line-height: 1; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mcr-text-muted); } /* STAT — números de métricas */ .mcr-stat { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 6vw, 6rem); line-height: 0.95; letter-spacing: var(--tracking-tight); color: var(--mcr-text); padding-block: 0.08em; } .mcr-stat-label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); line-height: 1.3; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mcr-text-muted); } /* COLOR HELPERS */ .text-purple { color: var(--mcr-purple); } .text-purple-light { color: var(--mcr-purple-400); } .text-accent { color: var(--mcr-accent); } .text-muted { color: var(--mcr-text-muted); } .text-dim { color: var(--mcr-text-dim); } /* ------------------------------------------------------------- 5. LAYOUT · CONTAINER & GRID ------------------------------------------------------------- */ .mcr-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter-mobile); } @media (min-width: 768px) { .mcr-container { padding-inline: var(--gutter-desktop); } } .mcr-container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter-mobile); } @media (min-width: 768px) { .mcr-container-wide { padding-inline: var(--gutter-desktop); } } .mcr-section { padding-block: var(--space-8); } @media (min-width: 768px) { .mcr-section { padding-block: var(--space-10); } } .mcr-section-lg { padding-block: var(--space-9); } @media (min-width: 768px) { .mcr-section-lg { padding-block: var(--space-11); } } /* ====== components.css ====== */ /* ============================================================= MCR AGENCY — COMPONENTS Botones, Cards, Badges, Nav, Footer, Forms ============================================================= */ /* ------------------------------------------------------------- BOTONES ------------------------------------------------------------- */ .mcr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.875rem 1.75rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); line-height: 1; letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-pill); cursor: pointer; transition: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); position: relative; white-space: nowrap; border: var(--border-width) solid transparent; } .mcr-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Primario — morado */ .mcr-btn--primary { background: var(--mcr-purple); color: var(--mcr-text); } .mcr-btn--primary:hover:not(:disabled) { background: var(--mcr-purple-400); box-shadow: var(--shadow-glow); transform: translateY(-1px); } /* Secundario — outline blanco */ .mcr-btn--secondary { background: transparent; color: var(--mcr-text); border-color: var(--mcr-text); } .mcr-btn--secondary:hover:not(:disabled) { background: var(--mcr-text); color: var(--mcr-black); } /* Ghost — solo texto con arrow */ .mcr-btn--ghost { background: transparent; color: var(--mcr-text); padding: 0.5rem 0; border-radius: 0; } .mcr-btn--ghost:hover:not(:disabled) { color: var(--mcr-purple-400); } .mcr-btn--ghost::after { content: "→"; transition: transform var(--duration-base) var(--ease-out); } .mcr-btn--ghost:hover::after { transform: translateX(4px); } /* Tamaños */ .mcr-btn--sm { padding: 0.625rem 1.25rem; font-size: var(--fs-xs); } .mcr-btn--lg { padding: 1.125rem 2.25rem; font-size: var(--fs-base); } /* ------------------------------------------------------------- BADGES / TAGS ------------------------------------------------------------- */ .mcr-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.375rem 0.75rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-sm); background: var(--mcr-surface-2); color: var(--mcr-text); border: var(--border-width) solid var(--mcr-border); line-height: 1; } .mcr-badge--purple { background: var(--mcr-purple); color: var(--mcr-text); border-color: transparent; } .mcr-badge--accent { background: transparent; color: var(--mcr-accent); border-color: var(--mcr-accent); } .mcr-badge--outline { background: transparent; border-color: var(--mcr-border-hover); color: var(--mcr-text-muted); } /* Dot indicator (para badges con señal) */ .mcr-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ------------------------------------------------------------- CARDS ------------------------------------------------------------- */ .mcr-card { background: var(--mcr-surface-2); border: var(--border-width) solid var(--mcr-border); border-radius: var(--radius-lg); padding: var(--space-5); transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .mcr-card:hover { border-color: var(--mcr-border-hover); } /* Card de creador (roster) */ .mcr-creator-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--mcr-surface-2); border: var(--border-width) solid var(--mcr-border); aspect-ratio: 3 / 4; cursor: pointer; transition: border-color var(--duration-base) var(--ease-out); } .mcr-creator-card:hover { border-color: var(--mcr-purple); } .mcr-creator-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); } .mcr-creator-card:hover .mcr-creator-card__image { transform: scale(1.05); } .mcr-creator-card__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0) 40%, rgba(15, 15, 15, 0.85) 80%, rgba(15, 15, 15, 0.95) 100% ); } .mcr-creator-card__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-4); } .mcr-creator-card__top { display: flex; justify-content: space-between; align-items: flex-start; } .mcr-creator-card__bottom { display: flex; flex-direction: column; gap: var(--space-2); } .mcr-creator-card__name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h4); line-height: 1; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--mcr-text); } .mcr-creator-card__meta { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-xs); color: var(--mcr-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 500; } .mcr-creator-card__platforms { display: flex; gap: var(--space-2); margin-top: var(--space-2); } .mcr-creator-card__platform { width: 16px; height: 16px; opacity: 0.7; } /* Card de caso (portfolio) */ .mcr-case-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--mcr-surface-2); border: var(--border-width) solid var(--mcr-border); aspect-ratio: 16 / 10; cursor: pointer; transition: border-color var(--duration-base) var(--ease-out); } .mcr-case-card:hover { border-color: var(--mcr-purple); } .mcr-case-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); } .mcr-case-card:hover .mcr-case-card__image { transform: scale(1.04); } .mcr-case-card__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 15, 15, 0.1) 0%, rgba(15, 15, 15, 0.9) 100% ); } .mcr-case-card__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-5); gap: var(--space-2); } .mcr-case-card__meta { display: flex; gap: var(--space-3); align-items: center; font-size: var(--fs-xs); color: var(--mcr-purple-400); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-weight: 700; margin-bottom: var(--space-2); } .mcr-case-card__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); line-height: 0.95; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--mcr-text); } .mcr-case-card__result { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--mcr-accent); font-weight: 700; } /* ------------------------------------------------------------- FORMS ------------------------------------------------------------- */ .mcr-input, .mcr-textarea, .mcr-select { width: 100%; padding: 0.875rem 1.25rem; background: var(--mcr-surface-2); border: var(--border-width) solid var(--mcr-border); border-radius: var(--radius-md); color: var(--mcr-text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.4; transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); } .mcr-input::placeholder, .mcr-textarea::placeholder { color: var(--mcr-text-dim); } .mcr-input:hover, .mcr-textarea:hover, .mcr-select:hover { border-color: var(--mcr-border-hover); } .mcr-input:focus, .mcr-textarea:focus, .mcr-select:focus { border-color: var(--mcr-purple); background: var(--mcr-surface-3); } .mcr-textarea { min-height: 120px; resize: vertical; font-family: var(--font-body); } .mcr-field { display: flex; flex-direction: column; gap: var(--space-2); } .mcr-field__label { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--mcr-text-muted); } /* ------------------------------------------------------------- NAVBAR ------------------------------------------------------------- */ .mcr-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); padding: var(--space-4) 0; transition: background-color var(--duration-base) var(--ease-out), backdrop-filter var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); border-bottom: var(--border-width) solid transparent; } .mcr-nav--scrolled { background: rgba(15, 15, 15, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--mcr-border); } .mcr-nav__inner { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } .mcr-nav__logo { display: flex; align-items: center; flex-shrink: 0; } .mcr-nav__logo svg { height: 28px; width: auto; display: block; fill: var(--mcr-text); } .mcr-nav__links { display: none; gap: var(--space-6); align-items: center; } @media (min-width: 1024px) { .mcr-nav__links { display: flex; } } .mcr-nav__link { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mcr-text-muted); transition: color var(--duration-base) var(--ease-out); position: relative; } .mcr-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--mcr-purple); transform: scaleX(0); transform-origin: right center; transition: transform var(--duration-base) var(--ease-out); } .mcr-nav__link--active { color: var(--mcr-text); } .mcr-nav__link--active::after { transform: scaleX(1); transform-origin: left center; } @media (hover: hover) and (pointer: fine) { .mcr-nav__link:hover { color: var(--mcr-text); } .mcr-nav__link:hover::after { transform: scaleX(1); transform-origin: left center; } } /* ------------------------------------------------------------- NAV — estilos mobile (toggle + menú desplegable) El resto del nav vive en components.css ------------------------------------------------------------- */ .mcr-nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 0; cursor: pointer; } .mcr-nav__toggle span { display: block; width: 100%; height: 2px; background: var(--mcr-text); transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); } .mcr-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mcr-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mcr-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 1024px) { .mcr-nav__toggle { display: none; } } .mcr-nav__backdrop { position: fixed; inset: 0; background: rgba(15, 15, 15, 0.62); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-enter) var(--ease-out), visibility 0s linear var(--duration-enter); z-index: 1; } .mcr-nav__mobile { position: absolute; z-index: 2; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--gutter-mobile) var(--space-6); max-height: calc(100dvh - 72px); overflow-y: auto; background: rgba(15, 15, 15, 0.98); border-top: var(--border-width) solid var(--mcr-border); border-bottom: var(--border-width) solid var(--mcr-border); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, -10px, 0); clip-path: inset(0 0 100% 0); transition: opacity var(--duration-enter) var(--ease-out), transform var(--duration-enter) var(--ease-drawer), clip-path var(--duration-enter) var(--ease-drawer), visibility 0s linear var(--duration-enter); } .mcr-nav__mobile.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); transition-delay: 0s; } .mcr-nav.is-menu-open .mcr-nav__backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .mcr-nav__mobile-link { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); text-transform: uppercase; color: var(--mcr-text); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--mcr-border); opacity: 0; transform: translate3d(0, 8px, 0); --mcr-nav-delay: 0ms; transition: color var(--duration-base) var(--ease-out) 0ms, opacity var(--duration-enter) var(--ease-out) var(--mcr-nav-delay), transform var(--duration-enter) var(--ease-out) var(--mcr-nav-delay); } .mcr-nav__mobile.is-open .mcr-nav__mobile-link { opacity: 1; transform: translate3d(0, 0, 0); } .mcr-nav__mobile.is-open .mcr-nav__mobile-link:nth-child(2) { --mcr-nav-delay: 25ms; } .mcr-nav__mobile.is-open .mcr-nav__mobile-link:nth-child(3) { --mcr-nav-delay: 50ms; } .mcr-nav__mobile.is-open .mcr-nav__mobile-link:nth-child(4) { --mcr-nav-delay: 75ms; } .mcr-nav__mobile.is-open .mcr-nav__mobile-link:nth-child(5) { --mcr-nav-delay: 100ms; } .mcr-nav__mobile.is-open .mcr-nav__mobile-link:nth-child(6) { --mcr-nav-delay: 125ms; } .mcr-nav__mobile.is-open .mcr-nav__mobile-link:nth-child(7) { --mcr-nav-delay: 150ms; } .mcr-nav__mobile.is-open .mcr-nav__mobile-link:nth-child(8) { --mcr-nav-delay: 175ms; } .mcr-nav__mobile-link.is-current { color: var(--mcr-purple-400); } .mcr-nav__mobile-link--cta { color: var(--mcr-purple-400); border-bottom: none; margin-top: var(--space-2); } body.mcr-nav-open { overflow: hidden; } @media (min-width: 1024px) { .mcr-nav__mobile, .mcr-nav__backdrop { display: none; } } /* ------------------------------------------------------------- FOOTER ------------------------------------------------------------- */ .mcr-footer { background: var(--mcr-black); border-top: var(--border-width) solid var(--mcr-border); padding-top: var(--space-9); padding-bottom: var(--space-5); } .mcr-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); } @media (min-width: 768px) { .mcr-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .mcr-footer__col-title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--mcr-text-muted); margin-bottom: var(--space-4); } .mcr-footer__list { display: flex; flex-direction: column; gap: var(--space-3); } .mcr-footer__link { color: var(--mcr-text); font-size: var(--fs-sm); transition: color var(--duration-base) var(--ease-out); } .mcr-footer__link:hover { color: var(--mcr-purple-400); } .mcr-footer__bottom { margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--border-width) solid var(--mcr-border); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--mcr-text-dim); } /* ------------------------------------------------------------- PATTERNS — USO DEL GARABATO COMO FIRMA ------------------------------------------------------------- */ /* Garabato como background decorativo detrás de texto hero. Posicionado a la DERECHA para no encimarse con texto izquierdo. */ .mcr-garabato-bg { position: relative; isolation: isolate; overflow: hidden; } .mcr-garabato-bg::before { content: ""; position: absolute; top: 50%; right: -5%; transform: translateY(-50%); width: min(55%, 700px); aspect-ratio: 600 / 415; background-image: url("./img/garabato-clean.svg"); background-repeat: no-repeat; background-position: center right; background-size: contain; opacity: 0.18; z-index: -1; pointer-events: none; } /* Garabato como marca de agua en esquina */ .mcr-garabato-corner { position: relative; isolation: isolate; } .mcr-garabato-corner::after { content: ""; position: absolute; top: var(--space-5); right: var(--space-5); width: 120px; height: 80px; background-image: url("./img/garabato-clean.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.35; z-index: -1; pointer-events: none; } /* ------------------------------------------------------------- HERO EDITORIAL — tipografía masiva con mezcla de pesos Cada línea en bloque separado para evitar encimados de Tusker ------------------------------------------------------------- */ .mcr-hero-headline { font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; font-size: var(--fs-display-1); display: flex; flex-direction: column; gap: 0.11em; /* respiración ligera entre líneas */ } .mcr-hero-headline__line { display: block; padding-block: 0.08em; } .mcr-hero-headline__bold { font-weight: 800; } .mcr-hero-headline__light { font-weight: 700; color: var(--mcr-text-muted); } .mcr-hero-headline__accent { font-weight: 800; color: var(--mcr-purple); } /* ------------------------------------------------------------- MARQUEE — cintillo de marcas/clientes ------------------------------------------------------------- */ .mcr-marquee { overflow: hidden; width: 100%; position: relative; padding-block: var(--space-5); border-top: var(--border-width) solid var(--mcr-border); border-bottom: var(--border-width) solid var(--mcr-border); mask-image: linear-gradient( 90deg, transparent 0%, #000 10%, #000 90%, transparent 100% ); -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 10%, #000 90%, transparent 100% ); } .mcr-marquee__track { display: flex; gap: var(--space-8); width: max-content; animation: mcr-scroll 80s linear infinite; } .mcr-marquee__item { display: flex; align-items: center; height: 64px; color: var(--mcr-text-muted); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); flex-shrink: 0; } /* Logos SVG dentro del marquee: altura constante, normalizados a blanco */ /* para consistencia visual sobre fondo oscuro. */ .mcr-marquee__item img { height: 56px; width: auto; max-width: 220px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.75; transition: opacity var(--duration-fast) var(--ease-out); } .mcr-marquee__item:hover img { opacity: 1; } /* Fallback textual: oculto por defecto, el onerror del lo activa */ .mcr-marquee__fallback { display: none; color: var(--mcr-text-muted); } @keyframes mcr-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--space-8) / 2)); } } /* ------------------------------------------------------------- DIVIDERS ------------------------------------------------------------- */ .mcr-divider { height: var(--border-width); background: var(--mcr-border); border: none; margin-block: var(--space-7); } .mcr-divider--thick { height: 2px; background: var(--mcr-purple); } /* ------------------------------------------------------------- FILTER CHIPS — para catálogo de creadores ------------------------------------------------------------- */ .mcr-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.625rem 1.125rem; background: var(--mcr-surface-2); border: var(--border-width) solid var(--mcr-border); border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); color: var(--mcr-text-muted); cursor: pointer; transition: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); white-space: nowrap; } .mcr-chip:hover { color: var(--mcr-text); border-color: var(--mcr-border-hover); } .mcr-chip--active { background: var(--mcr-purple); border-color: var(--mcr-purple); color: var(--mcr-text); } /* ------------------------------------------------------------- STATS GROUP — cifras clave en home ------------------------------------------------------------- */ .mcr-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); } @media (min-width: 768px) { .mcr-stats { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .mcr-stats { grid-template-columns: repeat(6, 1fr); } } .mcr-stat-item { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--mcr-purple); } .mcr-stat-item .mcr-stat { margin-bottom: var(--space-2); } /* ------------------------------------------------------------- GRID HELPERS ------------------------------------------------------------- */ .mcr-grid { display: grid; gap: var(--space-5); } .mcr-grid-2 { grid-template-columns: repeat(1, 1fr); } .mcr-grid-3 { grid-template-columns: repeat(1, 1fr); } .mcr-grid-4 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .mcr-grid-2 { grid-template-columns: repeat(2, 1fr); } .mcr-grid-3 { grid-template-columns: repeat(2, 1fr); } .mcr-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .mcr-grid-3 { grid-template-columns: repeat(3, 1fr); } .mcr-grid-4 { grid-template-columns: repeat(4, 1fr); } } /* ------------------------------------------------------------- UTILS ------------------------------------------------------------- */ .mcr-flex { display: flex; } .mcr-flex-col { display: flex; flex-direction: column; } .mcr-items-center { align-items: center; } .mcr-justify-between { justify-content: space-between; } .mcr-gap-2 { gap: var(--space-2); } .mcr-gap-3 { gap: var(--space-3); } .mcr-gap-4 { gap: var(--space-4); } .mcr-gap-5 { gap: var(--space-5); } .mcr-mt-3 { margin-top: var(--space-3); } .mcr-mt-4 { margin-top: var(--space-4); } .mcr-mt-5 { margin-top: var(--space-5); } .mcr-mt-6 { margin-top: var(--space-6); } .mcr-mb-3 { margin-bottom: var(--space-3); } .mcr-mb-4 { margin-bottom: var(--space-4); } .mcr-mb-5 { margin-bottom: var(--space-5); } .mcr-mb-6 { margin-bottom: var(--space-6); } /* ====== footer.css ====== */ /* ============================================================= MCR AGENCY — HEADER LOGO + FOOTER V2 Prefix: .mcr-footer-v2__*, .mcr-nav__logo-img Estilos adicionales globales — cargados en todas las páginas. ============================================================= */ /* ------------------------------------------------------------- HEADER — logo 50% más grande De 28px → 42px de altura ------------------------------------------------------------- */ .mcr-nav__logo-img { height: 42px; width: auto; display: block; } /* En mobile, reducimos un poco para que respire */ @media (max-width: 640px) { .mcr-nav__logo-img { height: 34px; } } /* ------------------------------------------------------------- FOOTER V2 — contenedor ------------------------------------------------------------- */ .mcr-footer-v2 { position: relative; background: var(--mcr-black); color: var(--mcr-text); overflow: hidden; isolation: isolate; border-top: var(--border-width) solid var(--mcr-border); } /* Garabato decorativo en esquina inferior derecha */ .mcr-footer-v2::before { content: ""; position: absolute; bottom: -20%; right: -15%; width: min(55%, 700px); aspect-ratio: 600 / 415; background-image: url("./img/garabato-clean.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.04; z-index: 0; pointer-events: none; transform: rotate(-8deg); } .mcr-footer-v2__inner { position: relative; z-index: 1; padding-top: var(--space-9); padding-bottom: var(--space-6); } /* ------------------------------------------------------------- MARQUEE SUPERIOR ------------------------------------------------------------- */ .mcr-footer-v2__marquee { position: relative; overflow: hidden; padding-block: var(--space-4); border-bottom: var(--border-width) solid var(--mcr-border); background: var(--mcr-surface-1); mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); } .mcr-footer-v2__marquee-track { display: inline-flex; align-items: center; gap: var(--space-5); white-space: nowrap; animation: mcr-footer-marquee 35s linear infinite; will-change: transform; } .mcr-footer-v2__marquee-item { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--mcr-text); padding-block: 0.05em; } .mcr-footer-v2__marquee-sep { color: var(--mcr-purple); font-size: 0.5em; flex-shrink: 0; line-height: 1; } @keyframes mcr-footer-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ------------------------------------------------------------- GRID ASIMÉTRICO: lead dominante | columnas secundarias ------------------------------------------------------------- */ .mcr-footer-v2__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-bottom: var(--space-8); } @media (min-width: 768px) { .mcr-footer-v2__grid { grid-template-columns: 1.5fr 1fr; gap: var(--space-9); align-items: start; } } @media (min-width: 1024px) { .mcr-footer-v2__grid { grid-template-columns: 1.75fr 1fr; } } /* ------------------------------------------------------------- COLUMNA LEAD — dominante izquierda ------------------------------------------------------------- */ .mcr-footer-v2__lead { display: flex; flex-direction: column; gap: var(--space-4); } .mcr-footer-v2__eyebrow { display: inline-block; color: var(--mcr-purple-400); margin-bottom: var(--space-2); } .mcr-footer-v2__email { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 4rem); line-height: 0.95; letter-spacing: var(--tracking-tight); text-transform: lowercase; color: var(--mcr-text); text-decoration: none; padding-block: 0.08em; transition: color var(--duration-base) var(--ease-out); word-break: break-word; display: inline-block; max-width: 100%; } .mcr-footer-v2__email:hover { color: var(--mcr-purple-400); } .mcr-footer-v2__phone { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-base); color: var(--mcr-text-muted); text-decoration: none; letter-spacing: var(--tracking-wide); transition: color var(--duration-base) var(--ease-out); align-self: flex-start; } .mcr-footer-v2__phone:hover { color: var(--mcr-text); } /* Redes sociales — formato editorial */ .mcr-footer-v2__social { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-5); border-top: var(--border-width) solid var(--mcr-border); } .mcr-footer-v2__social-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--mcr-border); text-decoration: none; color: var(--mcr-text); transition: padding-left var(--duration-base) var(--ease-out); } .mcr-footer-v2__social-link:hover { padding-left: var(--space-2); } .mcr-footer-v2__social-num { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); color: var(--mcr-text-dim); min-width: 2ch; } .mcr-footer-v2__social-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--mcr-text); padding-block: 0.05em; transition: color var(--duration-base) var(--ease-out); } .mcr-footer-v2__social-link:hover .mcr-footer-v2__social-name { color: var(--mcr-purple-400); } .mcr-footer-v2__social-arrow { font-family: var(--font-body); font-size: 1.25rem; color: var(--mcr-text-dim); transition: color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .mcr-footer-v2__social-link:hover .mcr-footer-v2__social-arrow { color: var(--mcr-purple-400); transform: translate(2px, -2px); } /* ------------------------------------------------------------- COLUMNAS SECUNDARIAS ------------------------------------------------------------- */ .mcr-footer-v2__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .mcr-footer-v2__col { display: flex; flex-direction: column; gap: var(--space-3); } .mcr-footer-v2__col-title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--mcr-purple-400); margin: 0; padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--mcr-border); } .mcr-footer-v2__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .mcr-footer-v2__link { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); color: var(--mcr-text-muted); text-decoration: none; transition: color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); display: inline-block; } .mcr-footer-v2__link:hover { color: var(--mcr-text); transform: translateX(3px); } /* Oficinas — formato "Ciudad · País" */ .mcr-footer-v2__offices { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .mcr-footer-v2__offices li { display: flex; align-items: baseline; gap: var(--space-3); justify-content: space-between; padding-block: var(--space-1); } .mcr-footer-v2__office-city { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); color: var(--mcr-text); } .mcr-footer-v2__office-country { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); color: var(--mcr-purple-400); } /* ------------------------------------------------------------- FIRMA VISUAL — MCR masivo (recortado para efecto editorial) ------------------------------------------------------------- */ .mcr-footer-v2__signature { position: relative; overflow: hidden; margin-block: var(--space-6); padding-top: var(--space-6); border-top: var(--border-width) solid var(--mcr-border); height: clamp(100px, 18vw, 240px); display: flex; align-items: center; justify-content: center; } .mcr-footer-v2__signature-text { font-family: var(--font-display); font-weight: 800; /* Se escala para ocupar ancho completo del contenedor */ font-size: clamp(7rem, 28vw, 22rem); line-height: 0.8; letter-spacing: -0.08em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--mcr-border-hover); text-stroke: 1px var(--mcr-border-hover); padding-block: 0.08em; transition: -webkit-text-stroke-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out); user-select: none; white-space: nowrap; } /* Hover sutil: la firma se pinta */ .mcr-footer-v2:hover .mcr-footer-v2__signature-text { color: var(--mcr-purple); -webkit-text-stroke-color: var(--mcr-purple); text-stroke-color: var(--mcr-purple); } /* ------------------------------------------------------------- META BOTTOM — copyright + legal links ------------------------------------------------------------- */ .mcr-footer-v2__meta { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--border-width) solid var(--mcr-border); font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); } @media (min-width: 768px) { .mcr-footer-v2__meta { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } } .mcr-footer-v2__meta-copyright { color: var(--mcr-text-dim); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .mcr-footer-v2__meta-sep { color: var(--mcr-border-hover); } .mcr-footer-v2__meta-entity { color: var(--mcr-text-muted); } .mcr-footer-v2__meta-links { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } .mcr-footer-v2__meta-link { color: var(--mcr-text-muted); text-decoration: none; transition: color var(--duration-base) var(--ease-out); } .mcr-footer-v2__meta-link:hover { color: var(--mcr-purple-400); } /* ------------------------------------------------------------- REDUCE MOTION ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .mcr-footer-v2__marquee-track { animation: none; } .mcr-footer-v2__social-link, .mcr-footer-v2__link, .mcr-footer-v2__signature-text { transition-property: color, opacity; transition-duration: 160ms; } } /* ------------------------------------------------------------- MOTION REVEAL — progressive enhancement El contenido es visible por default. JS solo aplica el estado pending a elementos que aún no entraron al viewport. ------------------------------------------------------------- */ .home-reveal, [data-mcr-reveal] { opacity: 1; transform: none; } .home-reveal.mcr-reveal--pending, [data-mcr-reveal].mcr-reveal--pending { opacity: 0; transform: translate3d(0, var(--mcr-reveal-distance, var(--motion-distance-md)), 0); transition: opacity var(--duration-section) var(--ease-out), transform var(--duration-section) var(--ease-out); transition-delay: var(--mcr-reveal-delay, 0ms); } .home-reveal.mcr-reveal--pending.is-visible, [data-mcr-reveal].mcr-reveal--pending.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } [data-mcr-reveal="clip"].mcr-reveal--pending { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path var(--duration-section) var(--ease-out); } [data-mcr-reveal="clip"].mcr-reveal--pending.is-visible { clip-path: inset(0 0 0 0); } /* ============================================================= MCR STAGE 07 — shared runtime layers Page-specific legacy blocks moved to their page modules. ============================================================= */ /* ====== cookies.css ====== */ /* ============================================================= MCR AGENCY — COOKIES (cookies.css) Banner/popup de consentimiento. Aparece en la esquina inferior izquierda la primera vez. JS controla .is-visible y .is-configuring (panel expandido de preferencias). Se reabre desde el footer con [data-cookie-settings="open"]. ============================================================= */ /* ------------------------------------------------------------- Contenedor principal ------------------------------------------------------------- */ .cookie-banner { position: fixed; left: var(--space-5); bottom: var(--space-5); z-index: var(--z-modal); width: min(440px, calc(100vw - var(--space-5) * 2)); max-height: calc(100vh - var(--space-5) * 2); overflow: hidden; pointer-events: none; /* Estado oculto por defecto */ opacity: 0; transform: translateY(24px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base); visibility: hidden; } .cookie-banner.is-visible { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s linear 0s; } /* ------------------------------------------------------------- Card ------------------------------------------------------------- */ .cookie-banner__content { position: relative; background: var(--mcr-surface-2); border: 1px solid var(--mcr-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-lg); max-height: calc(100vh - var(--space-5) * 2); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Scrollbar sutil */ .cookie-banner__content::-webkit-scrollbar { width: 6px; } .cookie-banner__content::-webkit-scrollbar-track { background: transparent; } .cookie-banner__content::-webkit-scrollbar-thumb { background: var(--mcr-surface-4); border-radius: 3px; } /* ------------------------------------------------------------- Header ------------------------------------------------------------- */ .cookie-banner__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .cookie-banner__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mcr-purple); color: var(--mcr-text); font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1; flex-shrink: 0; box-shadow: var(--shadow-glow); } .cookie-banner__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--mcr-text); letter-spacing: 0.01em; } /* ------------------------------------------------------------- Texto ------------------------------------------------------------- */ .cookie-banner__text { margin: 0 0 var(--space-4) 0; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.55; color: var(--mcr-text-muted); } .cookie-banner__text a { color: var(--mcr-text); text-decoration: underline; text-decoration-color: var(--mcr-purple); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--duration-fast) var(--ease-out); } .cookie-banner__text a:hover { color: var(--mcr-purple-400); } /* ------------------------------------------------------------- Acciones (botonera principal) ------------------------------------------------------------- */ .cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .cookie-banner__actions--main { /* Visible en estado inicial — se oculta al entrar en modo configurar */ transition: opacity var(--duration-fast) var(--ease-out); } .cookie-banner.is-configuring .cookie-banner__actions--main { display: none; } .cookie-banner__btn { flex: 1 1 auto; justify-content: center; min-width: 0; white-space: nowrap; } .cookie-banner__btn--sm { flex: 0 0 auto; } /* ------------------------------------------------------------- Panel de preferencias (oculto por defecto) ------------------------------------------------------------- */ .cookie-banner__preferences { display: none; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--mcr-border); } .cookie-banner.is-configuring .cookie-banner__preferences { display: block; animation: cookieFadeIn var(--duration-base) var(--ease-out); } @keyframes cookieFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Cuando está configurando, el texto inicial también se oculta para dar espacio */ .cookie-banner.is-configuring .cookie-banner__text { display: none; } /* ------------------------------------------------------------- Fila de preferencia (Esenciales, Analíticas, Preferencias) ------------------------------------------------------------- */ .cookie-banner__pref { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--mcr-border); } .cookie-banner__pref:last-of-type { border-bottom: none; margin-bottom: var(--space-3); } .cookie-banner__pref-content { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .cookie-banner__pref-name { font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; color: var(--mcr-text); letter-spacing: 0.01em; } .cookie-banner__pref-desc { font-family: var(--font-body); font-size: 0.75rem; line-height: 1.5; color: var(--mcr-text-muted); } /* ------------------------------------------------------------- Toggle (switch iOS-style) ------------------------------------------------------------- */ .cookie-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; margin-top: 2px; } .cookie-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .cookie-toggle__slider { position: absolute; inset: 0; cursor: pointer; background: var(--mcr-surface-4); border: 1px solid var(--mcr-border); border-radius: var(--radius-pill); transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .cookie-toggle__slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--mcr-text); border-radius: 50%; transition: transform var(--duration-base) var(--ease-out), background var(--duration-fast) var(--ease-out); } .cookie-toggle input:checked + .cookie-toggle__slider { background: var(--mcr-purple); border-color: var(--mcr-purple); } .cookie-toggle input:checked + .cookie-toggle__slider::before { transform: translateX(18px); background: #ffffff; } .cookie-toggle input:focus-visible + .cookie-toggle__slider { outline: 2px solid var(--mcr-purple-400); outline-offset: 2px; } .cookie-toggle input:disabled + .cookie-toggle__slider { opacity: 0.7; cursor: not-allowed; } .cookie-toggle input:disabled:checked + .cookie-toggle__slider { background: var(--mcr-purple-600); } /* ------------------------------------------------------------- Responsive — ancho completo en mobile, anclado al fondo ------------------------------------------------------------- */ @media (max-width: 640px) { .cookie-banner { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: auto; } .cookie-banner__content { padding: var(--space-4); } .cookie-banner__actions { flex-direction: column; } .cookie-banner__btn { width: 100%; } } /* ------------------------------------------------------------- Reduced motion ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cookie-banner, .cookie-banner__preferences { transform: none !important; transition-property: opacity, visibility !important; transition-duration: 160ms !important; animation: none !important; } .cookie-toggle__slider, .cookie-toggle__slider::before { transition: none !important; animation: none !important; } } /* ============================================================= MCR INTERACTION SYSTEM v2.1 — stages 1–3 Focus, press feedback, motion primitives, touch fallbacks. ============================================================= */ [hidden] { display: none !important; } /* Skip link: aparece solo al recibir foco de teclado. */ .mcr-skip-link { position: fixed; top: var(--space-3); left: var(--space-3); z-index: 9999; padding: 0.75rem 1rem; background: var(--mcr-text); color: var(--mcr-black); font-weight: 700; transform: translateY(calc(-100% - var(--space-5))); transition: transform var(--duration-fast) var(--ease-out); } .mcr-skip-link:focus-visible { transform: translateY(0); } #main:focus { outline: none; } /* Targets compactos pero no microscópicos (WCAG 2.2 AA: 24x24px mínimo). */ :where(.mcr-nav__link, .mcr-footer-v2__link, .mcr-footer-v2__meta-link, .mcr-legal__aside-link) { min-height: 24px; display: inline-flex; align-items: center; } /* Focus visible: nunca depende solo del color de marca oscuro. */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--mcr-focus) !important; outline-offset: 4px; } :where(input, textarea, select):focus-visible { outline-offset: 2px; } /* Motion composable para botones; el pointer magnetic usa estas variables. */ .mcr-btn { --mcr-btn-x: 0px; --mcr-btn-y: 0px; --mcr-btn-lift: 0px; --mcr-btn-scale: 1; transform: translate3d(var(--mcr-btn-x), calc(var(--mcr-btn-y) - var(--mcr-btn-lift)), 0) scale(var(--mcr-btn-scale)); } @media (hover: hover) and (pointer: fine) { .mcr-btn--primary { will-change: transform; } } .mcr-btn--primary:hover:not(:disabled) { --mcr-btn-lift: 1px; transform: translate3d(var(--mcr-btn-x), calc(var(--mcr-btn-y) - var(--mcr-btn-lift)), 0) scale(var(--mcr-btn-scale)); } html.mcr-input-pointer .mcr-btn:active:not(:disabled), html.mcr-input-pointer .mcr-chip:active, html.mcr-input-pointer .mcr-nav__toggle:active { --mcr-btn-scale: 0.97; transform: translate3d(var(--mcr-btn-x, 0px), var(--mcr-btn-y, 0px), 0) scale(0.97); transition-duration: var(--duration-press); } /* Estado de botón de envío sin layout shift. */ .mcr-btn.is-loading { cursor: progress; opacity: 0.78; } /* Links editoriales: underline que entra desde la izquierda. */ :where(.home-cta__email, .contact-direct__email, .mcr-footer-v2__email) { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: transparent; transition: color var(--duration-base) var(--ease-out), text-decoration-color var(--duration-base) var(--ease-out); } @media (hover: hover) and (pointer: fine) { :where(.home-cta__email, .contact-direct__email, .mcr-footer-v2__email):hover { text-decoration-color: currentColor; } } /* Hover motion únicamente donde existe un puntero real. */ @media (hover: none), (pointer: coarse) { .mcr-btn--primary:hover:not(:disabled), .home-diff__item:hover, .talent-card:hover, .talent-cta-split__card:hover, .case__highlight:hover, .kit:hover, .press-award:hover, .press-article:hover, .blog-card:hover, .post-nav__item:hover { transform: none; } .mcr-creator-card:hover .mcr-creator-card__image, .mcr-case-card:hover .mcr-case-card__image, .about-member:hover .about-member__photo img, .about-office:hover .about-office__image img, .service__figure:hover img, .talent-card--aaa:hover .talent-card__image, .talent-card--mid:hover .talent-card__image, .talent-card--rising:hover .talent-card__image, .case:hover .case__image, .contact-office:hover .contact-office__thumb img, .blog-card:hover .blog-card__image { transform: none; } .mcr-btn--ghost:hover::after, .mcr-footer-v2__social-link:hover .mcr-footer-v2__social-arrow, .mcr-footer-v2__link:hover, .press-article:hover .press-article__read, .blog-card:hover .blog-card__read { transform: none; } } /* Microprofundidad solo desktop: content/media no salta de layout. */ @media (hover: hover) and (pointer: fine) { :where(.mcr-case-card, .talent-card, .press-article, .blog-card, .case__highlight, .kit) { transition-timing-function: var(--ease-out); } :where(.mcr-case-card, .talent-card, .press-article, .blog-card):hover { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24); } } /* Honeypot de formularios: fuera del flujo visual, disponible al backend. */ .mcr-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .contact-form__status--error { border-color: #ff6b6b; } /* Reduced motion: conserva feedback de color/opacity y elimina desplazamiento. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .home-reveal.mcr-reveal--pending, [data-mcr-reveal].mcr-reveal--pending { opacity: 1; transform: none; clip-path: none; transition: opacity 160ms linear; } .mcr-btn { --mcr-btn-x: 0px !important; --mcr-btn-y: 0px !important; --mcr-btn-lift: 0px !important; --mcr-btn-scale: 1 !important; transform: none !important; } .mcr-nav__mobile, .mcr-nav__mobile-link { transform: none; clip-path: none; transition-property: opacity, visibility, color; } } /* Acciones iniciadas por teclado no esperan coreografías. */ html.mcr-input-keyboard .mcr-nav__mobile, html.mcr-input-keyboard .mcr-nav__mobile-link, html.mcr-input-keyboard .mcr-nav__toggle span { transition-duration: 0ms; } /* ============================================================= FIXES MOBILE v2.0.2 — defensivos para prevenir overflow horizontal en headlines grandes en viewports estrechos. ============================================================= */ /* Prevenir overflow horizontal global en el body */ html, body { overflow-x: hidden; max-width: 100vw; } /* Todos los headlines grandes: permitir romper palabras largas en mobile */ .mcr-hero-headline, .mcr-h1, .mcr-h2, .press-hero__headline, .press-awards__headline, .press-articles__headline, .press-cta__headline, .press-quotes__headline, .home-cases__headline, .home-brands__headline, .home-team__headline, .about-hero__headline, .services-hero__headline, .talent-hero__headline, .portfolio-hero__headline, .contact-hero__headline { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } /* Mobile: reducir tamaños de display grandes y normalizar padding lateral */ @media (max-width: 640px) { :root { --fs-display-1: clamp(2.5rem, 10vw, 3.75rem); --fs-display-2: clamp(2rem, 8vw, 3rem); --fs-h1: clamp(1.85rem, 7vw, 2.75rem); --fs-h2: clamp(1.5rem, 6vw, 2.25rem); } /* Todos los contenedores: padding consistente en mobile */ .mcr-container, .mcr-container-wide { padding-left: 20px; padding-right: 20px; } /* Headlines específicos que suelen desbordar: forzar tamaños safe */ .press-hero__headline, .press-awards__headline, .press-articles__headline, .press-quotes__headline, .press-cta__headline { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; } /* Cuando el press-hero__headline usa max-width: 14ch, se vuelve estrecho. En mobile, lo quitamos para que aproveche el ancho disponible */ .press-hero__headline { max-width: none; } /* Press awards y article cards: una columna y padding reducido */ .press-awards__grid, .press-articles__grid { grid-template-columns: 1fr !important; gap: 16px; } .press-award, .press-article { padding: 24px 20px; } .press-article__title { font-size: 1.125rem; line-height: 1.3; } /* Stats en hero: que respiren bien en 2 cols */ .press-hero__stats { gap: 16px; } } /* ============================================================= MCR v2.2.4 — TYPOGRAPHY / REVEAL SAFETY HOTFIX Los títulos nunca dependen de clip-path para seguir siendo legibles. ============================================================= */ /* Un poco más de aire en títulos editoriales y cards. */ .mcr-display-1, .mcr-display-2, .mcr-display-3, .mcr-h1, .mcr-h2, .mcr-h3, .mcr-h4, .mcr-hero-headline { text-wrap: balance; } /* Si un heading conserva data-mcr-reveal="clip" en páginas secundarias, degradarlo a un reveal por desplazamiento, nunca a contenido recortado. */ :where(h1, h2, h3, h4, h5, h6)[data-mcr-reveal="clip"].mcr-reveal--pending { clip-path: none; opacity: 1; transform: translate3d(0, 12px, 0); transition: transform var(--duration-section) var(--ease-out); } :where(h1, h2, h3, h4, h5, h6)[data-mcr-reveal="clip"].mcr-reveal--pending.is-visible { clip-path: none; opacity: 1; transform: translate3d(0, 0, 0); } /* ============================================================= MCR v2.2.5 — GUIDED SECTION SCROLL Soft native section snapping. Desktop/fine-pointer only. `proximity` deliberately avoids wheel/touch hijacking and lets oversized sections scroll naturally before snapping onward. ============================================================= */ html.mcr-guided-scroll [data-mcr-snap] { scroll-margin-top: 80px; } @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { html.mcr-guided-scroll { scroll-snap-type: y proximity; } html.mcr-guided-scroll [data-mcr-snap] { scroll-snap-align: start; scroll-snap-stop: normal; } } /* Minimal chapter rail. Only injected on curated pages with enough chapters. */ .mcr-scroll-guide { --mcr-guide-progress: 0; position: fixed; z-index: calc(var(--z-nav) - 1); top: 50%; right: clamp(14px, 1.8vw, 30px); display: none; flex-direction: column; gap: 2px; padding: 10px 0; transform: translateY(-50%); isolation: isolate; } .mcr-scroll-guide::before, .mcr-scroll-guide::after { content: ""; position: absolute; z-index: -1; right: 0; top: 16px; width: 1px; height: calc(100% - 32px); background: rgba(255, 255, 255, 0.12); transform-origin: top center; } .mcr-scroll-guide::after { background: var(--mcr-purple-200); transform: scaleY(var(--mcr-guide-progress)); transition: transform 360ms var(--ease-out); } .mcr-scroll-guide__item { position: relative; display: grid; grid-template-columns: 22px 34px; align-items: center; min-width: 56px; min-height: 28px; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, 0.44); text-align: right; cursor: pointer; transition: color var(--duration-fast) var(--ease-out); } .mcr-scroll-guide__num { font-family: var(--font-body); font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; } .mcr-scroll-guide__line { justify-self: end; display: block; width: 10px; height: 1px; background: currentColor; transform-origin: right center; transition: width var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } .mcr-scroll-guide__label { position: absolute; top: 50%; right: calc(100% + 12px); max-width: 180px; padding: 6px 9px; background: rgba(15, 15, 15, 0.9); border: 1px solid rgba(255, 255, 255, 0.09); color: var(--mcr-text); font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 1.15; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(6px, -50%, 0); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility 0s linear var(--duration-fast); } .mcr-scroll-guide__item.is-active { color: var(--mcr-purple-200); } .mcr-scroll-guide__item.is-active .mcr-scroll-guide__line { width: 30px; } @media (hover: hover) and (pointer: fine) { .mcr-scroll-guide__item:hover, .mcr-scroll-guide__item:focus-visible { color: var(--mcr-text); } .mcr-scroll-guide__item:hover .mcr-scroll-guide__label, .mcr-scroll-guide__item:focus-visible .mcr-scroll-guide__label { opacity: 1; visibility: visible; transform: translate3d(0, -50%, 0); transition-delay: 0s; } } @media (min-width: 1180px) and (hover: hover) and (pointer: fine) { html.mcr-guided-scroll .mcr-scroll-guide { display: flex; } } @media (prefers-reduced-motion: reduce) { html.mcr-guided-scroll { scroll-snap-type: none !important; } .mcr-scroll-guide { display: none !important; } }