/* =========================================================================== MEXAV 2026 — CSS público BASE (compartido por todas las páginas públicas) --------------------------------------------------------------------------- Alcance: SOLO la parte pública. Todo vive bajo la raíz `.mexav-public` (aplicada al del header público) para NO afectar al administrador. Este archivo contiene lo transversal: · Design tokens (paleta, tipografía, espaciado, radios, sombras, z-index) · Neutralización de reglas globales heredadas de code4you.css · Fondo de bloques MEXAV (sistema reutilizable, reemplazable por el arte) · Tipografía base, contenedores, utilidades y accesibilidad Los estilos específicos de cada página van en su propio archivo: · css/mexav-registro.css (pantalla de pre-registro) · css/mexav-home.css (landing) =========================================================================== */ /* ----------------------------------------------------------------------- 0. TIPOGRAFÍAS OFICIALES MEXAV (self-hosted; sin dependencias externas) DM Mono (monoespaciada — UI/cuerpo) + Munich (display — títulos). Archivos en /fonts. font-display:swap para no bloquear el render. ----------------------------------------------------------------------- */ @font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; } /* DM Sans (proporcional) — usada por las preguntas del FAQ Mobile. Self-hosted como el resto; licencia SIL OFL 1.1 en /fonts/DMSans-OFL.txt. Solo pesos verticales: el diseño no usa itálicas. */ @font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { /* OTF de un solo peso: se declara rango para usar el archivo tal cual en cualquier grosor (sin negrita sintética). */ font-family: "Munich"; src: url("../fonts/Munich.otf") format("opentype"); font-weight: 400 900; font-style: normal; font-display: swap; } /* ----------------------------------------------------------------------- 1. DESIGN TOKENS Reemplaza los valores por los oficiales cuando lleguen los assets/arte. ----------------------------------------------------------------------- */ .mexav-public { /* Paleta de bloques (identidad MEXAV) — valores EXACTOS del arte de Figma. Fuente: export 1:1 del propio archivo, muestreado del PNG sin pérdida (el archivo de Figma no define Variables). Ver Bloque 0. */ --mx-red: #ff4a1e; /* naranja-rojo de bloques / barras de color */ --mx-yellow: #f3b82e; /* amarillo base */ --mx-blue: #435aa8; /* azul base */ --mx-green: #2a5529; /* verde base */ /* Variantes de bloque para secciones específicas del diseño */ --mx-yellow-bright: #ffb827; /* fondo de la sección Ubicación */ --mx-blue-bright: #4160b2; /* azul brillante (títulos / acentos UI) */ /* Base y acentos */ --mx-black: #191413; /* negro cálido: superficie oscura dominante */ --mx-black-cool: #0b121a; /* negro frío: hero / sección FAQ */ --mx-black-pure: #000000; /* negro puro: timeline / botones sólidos */ --mx-white: #ffffff; --mx-ink: #16161a; /* texto sobre superficies claras */ --mx-muted: #5b5b62; /* texto secundario */ --mx-accent: #ef4123; /* indicador activo / detalles (naranja-rojo) */ /* Superficies */ --mx-surface: #ffffff; --mx-surface-veil: rgba(255, 255, 255, 0.94); /* card tipo vidrio (mesurado) */ --mx-line: rgba(12, 12, 13, 0.12); --mx-line-strong: rgba(12, 12, 13, 0.22); --mx-on-dark-veil: rgba(255, 255, 255, 0.08); /* Tipografías oficiales MEXAV (self-hosted arriba). Fallbacks de sistema por si un archivo no cargara. */ --mx-font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --mx-font-display: "Munich", "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif; --mx-font-body: var(--mx-font-mono); /* Escala de espaciado (ritmo de 4px) */ --mx-space-1: 0.25rem; --mx-space-2: 0.5rem; --mx-space-3: 0.75rem; --mx-space-4: 1rem; --mx-space-5: 1.5rem; --mx-space-6: 2rem; --mx-space-7: 3rem; --mx-space-8: 4rem; --mx-space-9: 6rem; /* Radios (identidad angular; casi sin redondeo) */ --mx-radius-sm: 2px; --mx-radius: 4px; --mx-radius-lg: 8px; /* Sombras (uso controlado, sin exceso) */ --mx-shadow-card: 0 24px 60px -24px rgba(0, 0, 0, 0.45); --mx-shadow-soft: 0 8px 24px -12px rgba(0, 0, 0, 0.35); /* Alturas de control de formulario (consistencia entre inputs/selects) */ --mx-control-h: 3.25rem; /* Anchos de contenedor */ --mx-container: 1200px; --mx-container-narrow: 880px; /* Franjas fijas */ --mx-header-h: 64px; /* Escala de z-index (evita el abuso de valores mágicos) */ --mx-z-bg: 0; --mx-z-content: 1; --mx-z-header: 100; --mx-z-menu: 110; /* Motion */ --mx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --mx-dur: 0.2s; } /* ----------------------------------------------------------------------- 2. SCOPE BASE ----------------------------------------------------------------------- */ .mexav-public { background-color: var(--mx-black); color: var(--mx-ink); font-family: var(--mx-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Evita el scroll horizontal en cualquier viewport. */ overflow-x: hidden; } /* Contenido por encima del fondo decorativo. */ .mexav-public .mexav-shell { position: relative; z-index: var(--mx-z-content); } /* Cinturón de seguridad anti-desbordes horizontales de elementos internos. */ .mexav-public img, .mexav-public svg, .mexav-public video { max-width: 100%; } /* ----------------------------------------------------------------------- 3. NEUTRALIZACIÓN DE GLOBALES HEREDADAS (code4you.css) code4you.css fuerza h1–h6 a amarillo + mayúsculas con !important a nivel global. Aquí se re-scopea SOLO para lo público, sin tocar el admin. ----------------------------------------------------------------------- */ .mexav-public h1, .mexav-public h2, .mexav-public h3, .mexav-public h4, .mexav-public h5, .mexav-public h6 { color: inherit !important; text-transform: none !important; font-family: var(--mx-font-display); line-height: 1.05; letter-spacing: 0.01em; margin: 0; } /* ----------------------------------------------------------------------- 4. TIPOGRAFÍA BASE PÚBLICA ----------------------------------------------------------------------- */ .mexav-public p { line-height: 1.6; } /* Los enlaces no imponen color a nivel global (cada componente define el suyo, evitando ganarle por especificidad a clases como .mexav-nav__link). */ .mexav-public a { text-decoration: none; transition: color var(--mx-dur) var(--mx-ease); } /* Utilidad de texto monoespaciado (etiquetas técnicas, eyebrows, nav). */ .mexav-public .mexav-mono { font-family: var(--mx-font-mono); letter-spacing: 0.04em; } /* ----------------------------------------------------------------------- 5. CONTENEDOR ----------------------------------------------------------------------- */ .mexav-container { width: 100%; max-width: var(--mx-container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); } .mexav-container--narrow { max-width: var(--mx-container-narrow); } /* ----------------------------------------------------------------------- 6. FONDO DE BLOQUES MEXAV Composición reutilizable en HTML/CSS puro (sin imágenes) que reproduce la retícula brutalista de la referencia. Es un LIENZO fijo tras el contenido; cuando llegue el arte definitivo puede sustituirse el contenido de `.mexav-bg` por un /background sin tocar el resto. ----------------------------------------------------------------------- */ .mexav-bg { position: fixed; inset: 0; z-index: var(--mx-z-bg); overflow: hidden; background-color: var(--mx-black); /* Arte OFICIAL del fondo (JPG escritorio / PNG móvil). Reemplazable por archivo sin reestructurar la página. */ background-image: url("../img/mexav/background-desktop.jpg"); background-size: cover; background-position: center top; background-repeat: no-repeat; pointer-events: none; } /* El mosaico CSS (`.mexav-bg__grid`) fue el placeholder provisional; con el arte oficial presente se oculta. Se conserva el markup por compatibilidad. */ .mexav-bg__grid { display: none; } @media (max-width: 767.98px) { .mexav-bg { background-image: url("../img/mexav/background-mobile.png"); } } /* ----------------------------------------------------------------------- 7. ACCESIBILIDAD ----------------------------------------------------------------------- */ /* Foco visible y consistente en toda la parte pública. */ .mexav-public a:focus-visible, .mexav-public button:focus-visible, .mexav-public input:focus-visible, .mexav-public select:focus-visible, .mexav-public textarea:focus-visible, .mexav-public [tabindex]:focus-visible { outline: 3px solid var(--mx-accent); outline-offset: 2px; } /* Salto al contenido (aparece solo con teclado). */ .mexav-skip-link { position: absolute; left: var(--mx-space-4); top: -100px; z-index: var(--mx-z-menu); background: var(--mx-black); color: var(--mx-white); padding: var(--mx-space-3) var(--mx-space-4); font-family: var(--mx-font-mono); border-radius: var(--mx-radius); transition: top var(--mx-dur) var(--mx-ease); } .mexav-skip-link:focus { top: var(--mx-space-4); } /* Contenido visible solo para lectores de pantalla. */ .mexav-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Respeto por usuarios que reducen movimiento. */ @media (prefers-reduced-motion: reduce) { .mexav-public *, .mexav-public *::before, .mexav-public *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ======================================================================= 8. HEADER PÚBLICO (barra negra + isotipo M/A + nav + franja técnica) Mobile-first: por defecto se ve el menú hamburguesa; a partir de 992px se muestra la navegación horizontal. ======================================================================= */ .mexav-header { position: sticky; top: 0; z-index: var(--mx-z-header); } .mexav-header__bar { position: relative; /* contexto para el panel móvil */ background: var(--mx-black); border-bottom: 1px solid var(--mx-on-dark-veil); } .mexav-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mx-space-4); min-height: var(--mx-header-h); } /* ---------- Isotipo M/A (provisional, HTML/CSS) ---------- */ .mexav-logo { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .mexav-logo__mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1.5px solid var(--mx-white); color: var(--mx-white); font-family: var(--mx-font-mono); font-weight: 700; font-size: 1rem; line-height: 1; transition: color var(--mx-dur) var(--mx-ease), border-color var(--mx-dur) var(--mx-ease); } .mexav-logo__mark--square { border-radius: var(--mx-radius-sm); } .mexav-logo__mark--circle { border-radius: 50%; } .mexav-logo:hover .mexav-logo__mark { border-color: var(--mx-accent); color: var(--mx-accent); } .mexav-logo:focus-visible { outline-offset: 4px; } /* ---------- Botón hamburguesa ---------- */ .mexav-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--mx-line-strong); border-color: var(--mx-on-dark-veil); border-radius: var(--mx-radius); cursor: pointer; } .mexav-nav__toggle-box { position: relative; width: 22px; height: 16px; } .mexav-nav__toggle-bar { position: absolute; left: 0; right: 0; height: 2px; background: var(--mx-white); transition: transform var(--mx-dur) var(--mx-ease), opacity var(--mx-dur) var(--mx-ease); } .mexav-nav__toggle-bar:nth-child(1) { top: 0; } .mexav-nav__toggle-bar:nth-child(2) { top: 7px; } .mexav-nav__toggle-bar:nth-child(3) { top: 14px; } .mexav-header--nav-open .mexav-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mexav-header--nav-open .mexav-nav__toggle-bar:nth-child(2) { opacity: 0; } .mexav-header--nav-open .mexav-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Lista de navegación ---------- */ .mexav-nav__list { list-style: none; margin: 0; padding: var(--mx-space-2) 0; /* Panel móvil por defecto */ position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; background: var(--mx-black); border-bottom: 1px solid var(--mx-on-dark-veil); box-shadow: var(--mx-shadow-soft); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity var(--mx-dur) var(--mx-ease), transform var(--mx-dur) var(--mx-ease), visibility var(--mx-dur) var(--mx-ease); } .mexav-header--nav-open .mexav-nav__list { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* `.mexav-public` en el selector asegura que el color gane a reglas heredadas del tema (Metronic/Bootstrap) sin recurrir a !important. */ .mexav-public .mexav-nav__link { position: relative; display: block; color: var(--mx-white); font-family: var(--mx-font-mono); font-size: 0.95rem; letter-spacing: 0.02em; /* Objetivo táctil cómodo en móvil */ padding: 0.85rem clamp(1rem, 4vw, 2.5rem); min-height: 44px; } .mexav-public .mexav-nav__link:hover { color: var(--mx-accent); } .mexav-nav__item + .mexav-nav__item .mexav-nav__link { border-top: 1px solid var(--mx-on-dark-veil); } .mexav-nav__link::after { content: ""; position: absolute; left: clamp(1rem, 4vw, 2.5rem); bottom: 0.5rem; width: 26px; height: 2px; background: var(--mx-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--mx-dur) var(--mx-ease); } .mexav-nav__link:hover::after, .mexav-nav__link.is-active::after { transform: scaleX(1); } /* ---------- Franja técnica ---------- */ .mexav-techstrip { background: #121214; border-bottom: 1px solid var(--mx-on-dark-veil); color: rgba(255, 255, 255, 0.55); font-family: var(--mx-font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; } .mexav-techstrip__inner { display: flex; align-items: center; gap: 0.6rem; height: 30px; white-space: nowrap; overflow: hidden; } .mexav-techstrip__sep { color: var(--mx-accent); } .mexav-techstrip__spacer { flex: 1 1 auto; } .mexav-techstrip__timecode { color: var(--mx-yellow); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; } /* ---------- Escritorio (>= 992px) ---------- */ @media (min-width: 992px) { .mexav-nav__toggle { display: none; } .mexav-nav__list { position: static; flex-direction: row; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .mexav-nav__item + .mexav-nav__item .mexav-nav__link { border-top: 0; } .mexav-nav__link { padding: 0.5rem 0; min-height: 0; } .mexav-nav__link::after { left: 0; right: 0; width: auto; bottom: 0; } } /* ---------- Franja técnica en móvil ---------- */ @media (max-width: 575.98px) { .mexav-techstrip__timecode, .mexav-techstrip__spacer { display: none; } .mexav-techstrip { font-size: 0.62rem; letter-spacing: 0.08em; } .mexav-techstrip__inner { justify-content: center; gap: 0.4rem; } } /* ======================================================================= 9. FOOTER PÚBLICO (patrocinadores + barra legal) Compartido por todas las páginas públicas (Home, Registro, futuras). El footer queda al fondo gracias al layout flex de .mexav-shell (min-vh-100 + main.flex-grow-1); NO usa position: fixed. ======================================================================= */ /* ---------- Sección de aliados y patrocinadores ---------- */ .mexav-sponsors { background: var(--mx-white); padding-block: clamp(2rem, 5vw, 4rem); } .mexav-sponsors__inner { text-align: center; } /* Una sola imagen horizontal: centrada, ancho amplio pero controlado, proporción original intacta y sin alturas fijas. */ .mexav-sponsors__image { display: block; width: 100%; max-width: 960px; height: auto; margin-inline: auto; object-fit: contain; } /* ---------- Barra legal ---------- */ .mexav-legal { background: var(--mx-black); color: rgba(255, 255, 255, 0.7); border-top: 1px solid var(--mx-on-dark-veil); } .mexav-legal__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mx-space-3); min-height: 52px; padding-block: 0.75rem; font-family: var(--mx-font-mono); font-size: 0.8rem; } .mexav-legal__copyright { letter-spacing: 0.04em; } .mexav-legal__nav { display: flex; gap: clamp(1rem, 3vw, 2rem); } .mexav-legal__link { color: rgba(255, 255, 255, 0.7); letter-spacing: 0.02em; } .mexav-legal__link:hover { color: var(--mx-white); } /* Barra legal en móvil: apilada y centrada, con aire táctil. */ @media (max-width: 575.98px) { .mexav-legal__inner { flex-direction: column; text-align: center; gap: 0.6rem; padding-block: 1rem; } .mexav-legal__nav { justify-content: center; flex-wrap: wrap; gap: 0.35rem 1.5rem; } }