/* ============================================================ TOKENS DE DISEÑO — PLANTILLA WEB + CATÁLOGO ------------------------------------------------------------ Este es el ÚNICO archivo que hay que tocar para re-marcar un sitio completo (web, catálogo y panel). Nada de color, fuente, radio, sombra o espacio se escribe a mano en los otros CSS: todos leen de aquí. Para adaptar a un cliente nuevo: 1. Cambiar el bloque "1. MARCA" (4 colores). 2. Cambiar las fuentes en "3. TIPOGRAFÍA" (y el de Google Fonts en cada HTML). 3. Si quiere esquinas más/menos redondeadas, "5. FORMA". Lo demás se deriva solo. Por qué TODO pasa por variable: así un cliente nuevo es cambiar cuatro colores y dos fuentes, no buscar hexadecimales sueltos en tres archivos. Si un componente nuevo necesita un color que no existe, se agrega aquí con nombre y se usa desde allá. ============================================================ */ :root { /* ---------- 1. MARCA (lo que cambia por cliente) ---------- */ /* Sacados del logotipo original (vector, no de una captura). El oro del logo es #EBD35F; los tonos de abajo son la escala que el cliente extrajo de la misma pieza. */ --marca-1: #806A42; /* principal: botones, links, acentos */ --marca-1-oscuro: #6E5A38; /* hover del principal */ --marca-2: #0D0305; /* oscuro: hero, navbar, footer */ --marca-3: #F2CA7E; /* acento: badges, ofertas, detalles */ /* El oro tal cual del logotipo. Va sobre fondo oscuro: sobre blanco no alcanza contraste para texto (1.5:1), por eso --marca-1 es una versión oscurecida que sí lo alcanza (5.2:1). */ --oro: #EBD35F; --oro-claro: #F2CA7E; --oro-medio: #BF9F63; --oro-hondo: #8C7549; --oro-sombra: #403120; /* Degradados derivados. Se usan en hero, precios y botones. */ --gradiente-marca: linear-gradient(135deg, var(--marca-1) 0%, var(--marca-2) 100%); --gradiente-acento: linear-gradient(135deg, var(--marca-3) 0%, var(--marca-1) 100%); /* Degradado metálico completo, para detalles y animaciones. */ --gradiente-oro: linear-gradient(100deg, var(--oro-sombra) 0%, var(--oro-hondo) 22%, var(--oro-claro) 46%, var(--oro) 58%, var(--oro-medio) 78%, var(--oro-sombra) 100%); /* ---------- 2. NEUTRALES (superficies y texto) ---------- */ --bg: #F2F4F8; /* fondo general de la página */ --surface: #FFFFFF; /* tarjetas, modales */ --surface-2: #F4F6FA; /* campos, chips */ --surface-3: #E8ECF3; /* hover de superficies */ --line: #E1E6EF; /* bordes */ --ink: #16202E; /* texto principal */ --ink-soft: #5A6678; /* texto secundario */ --ink-muted: #8B94A5; /* terciario, placeholders */ --ink-inverso: #FFFFFF; /* texto sobre fondos oscuros */ /* ---------- 3. TIPOGRAFÍA ---------- */ --fuente-titulos: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --fuente-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fuente-mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace; --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-fuerte: 700; /* Escala tipográfica fluida: crece con la pantalla sin media queries. */ --texto-xs: .75rem; --texto-sm: .875rem; --texto-base: 1rem; --texto-lg: 1.125rem; --texto-xl: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); --texto-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --texto-3xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); --texto-hero: clamp(2.2rem, 1.5rem + 3.4vw, 3.8rem); --alto-linea: 1.6; --alto-linea-titulo: 1.15; /* ---------- 4. ESPACIADO (escala de 4px) ---------- */ --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --ancho-maximo: 1200px; /* ancho del contenido centrado */ --ancho-lectura: 65ch; /* ancho cómodo para párrafos largos */ --gutter: clamp(1rem, 4vw, 2.5rem); /* margen lateral en móvil/escritorio */ /* ---------- 5. FORMA ---------- */ --radio-sm: 8px; --radio: 14px; --radio-lg: 22px; --radio-pill: 999px; --borde: 1px solid var(--line); /* ---------- 6. SOMBRAS ---------- */ --sombra-sm: 0 1px 2px rgba(16, 32, 46, .06), 0 1px 3px rgba(16, 32, 46, .08); --sombra: 0 4px 12px -2px rgba(16, 32, 46, .10), 0 2px 6px -2px rgba(16, 32, 46, .06); --sombra-lg: 0 18px 40px -16px rgba(16, 32, 46, .28); --sombra-marca: 0 10px 24px -10px color-mix(in srgb, var(--marca-1) 55%, transparent); /* ---------- 7. ESTADOS ---------- */ --exito: #16A34A; --alerta: #D97706; --peligro: #DC2626; --info: #2563EB; --oferta: #E11D48; --whatsapp: #25D366; /* color oficial: no se cambia por marca */ --whatsapp-oscuro: #1FB855; --exito-suave: color-mix(in srgb, var(--exito) 12%, white); --alerta-suave: color-mix(in srgb, var(--alerta) 12%, white); --peligro-suave: color-mix(in srgb, var(--peligro) 12%, white); --info-suave: color-mix(in srgb, var(--info) 12%, white); /* ---------- 8. MOVIMIENTO ---------- */ --trans-rapida: .15s ease; --trans: .25s ease; --trans-lenta: .45s cubic-bezier(.22, 1, .36, 1); /* ---------- 9. CAPAS (z-index) ---------- Centralizado a propósito: los "modales tapados por el menú" salen de inventar z-index sueltos en cada archivo. */ --z-base: 1; --z-sticky: 900; --z-header: 1000; --z-drawer: 1030; --z-bandeja: 1045; --z-modal: 1055; --z-toast: 1090; } /* ============================================================ MODO OSCURO (opcional) Se activa poniendo data-tema="oscuro" en . Solo cambia los neutrales: la marca se respeta tal cual. ============================================================ */ html[data-tema="oscuro"] { --bg: #0E141B; --surface: #151D27; --surface-2: #1B2531; --surface-3: #24303E; --line: #2A3644; --ink: #EAF0F7; --ink-soft: #A7B4C4; --ink-muted: #7C8AA0; --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4); --sombra: 0 4px 14px rgba(0, 0, 0, .45); --sombra-lg: 0 20px 44px rgba(0, 0, 0, .55); } /* ============================================================ BASE COMPARTIDA (web, catálogo y panel) Solo lo mínimo: reset suave, tipografía y utilidades que los tres proyectos usan igual. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--fuente-texto); font-size: var(--texto-base); line-height: var(--alto-linea); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-titulos); font-weight: var(--peso-fuerte); line-height: var(--alto-linea-titulo); color: var(--ink); margin: 0 0 var(--e-3); letter-spacing: -.01em; } p { margin: 0 0 var(--e-4); } a { color: var(--marca-1); text-decoration: none; transition: color var(--trans-rapida); } a:hover { color: var(--marca-1-oscuro); } img { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--marca-1) 55%, transparent); outline-offset: 2px; border-radius: var(--radio-sm); } /* Contenedor centrado estándar */ .contenedor { width: 100%; max-width: var(--ancho-maximo); margin-inline: auto; padding-inline: var(--gutter); } /* Utilidad para lectores de pantalla */ .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Salto al contenido (accesibilidad de teclado) */ .saltar-contenido { position: absolute; left: -9999px; background: var(--marca-2); color: var(--ink-inverso); padding: var(--e-3) var(--e-4); border-radius: var(--radio-sm); z-index: var(--z-toast); } .saltar-contenido:focus { left: var(--e-4); top: var(--e-4); }