/* ============================================================ LÍNEA CONTINUA — Design Tokens (theme.css) Fuente de verdad de la identidad visual. Colores muestreados de logo.jpeg e isologo.jpeg. Uso: importar este archivo en todas las páginas (cliente + admin). ============================================================ */ /* ---------- Fuentes (Google Fonts, cargar en ) ---------- Fredoka -> títulos (redondeada, bold, ecoa "linea") Nunito -> cuerpo (legible, cálida, redondeada) Pacifico -> acento script puntual (ecoa "continua"), usar POCO ------------------------------------------------------------ */ :root { /* ---- Colores de marca (crudos) ---- */ --brand-olive: #A5953A; /* mostaza — color dominante */ --brand-olive-dark: #7E7129; /* hover / texto sobre crema */ --brand-olive-deep: #5C531E; --brand-cream: #F4F1E2; /* marfil */ --brand-cream-soft: #FBFAF3; /* casi blanco cálido */ --brand-sage: #7B9572; /* verde salvia (letra C) */ --brand-sage-dark: #5E7657; --brand-rose: #D99A9A; /* rosa palo (letra L) */ --brand-rose-dark: #C07E7E; --brand-gold: #C2A24C; /* dorado / latón (estrellas) */ --brand-ink: #2B2818; /* tinta cálida oscura */ /* ---- Roles semánticos (LIGHT — default) ---- */ --color-bg: var(--brand-cream); --color-surface: var(--brand-cream-soft); --color-surface-2: #EFEBD8; --color-text: var(--brand-ink); --color-muted: #6B6449; --color-primary: var(--brand-olive); --color-primary-hover: var(--brand-olive-dark); --color-on-primary: var(--brand-cream); --color-secondary: var(--brand-sage); --color-accent: var(--brand-rose); --color-highlight: var(--brand-gold); --color-border: rgba(43, 40, 24, 0.14); --color-border-strong: rgba(43, 40, 24, 0.28); --color-success: #5E7657; --color-danger: #B0483F; --color-focus: var(--brand-olive-dark); /* ---- Tipografía ---- */ --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif; --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --font-script: "Pacifico", cursive; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.625rem; --text-2xl: 2.25rem; --text-3xl: 3.25rem; --leading-tight: 1.15; --leading-body: 1.6; /* ---- Espaciado (escala 4px) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem; /* ---- Radios (redondeado = marca) ---- */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; /* ---- Sombras (cálidas, suaves) ---- */ --shadow-sm: 0 1px 2px rgba(43,40,24,0.08); --shadow: 0 6px 18px rgba(43,40,24,0.10); --shadow-lg: 0 14px 40px rgba(43,40,24,0.16); --transition: 180ms ease; } /* ---------- DARK MODE ---------- Se activa por preferencia del sistema, salvo que se fuerce data-theme="light". También forzable con data-theme="dark". ------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #1E1B12; --color-surface: #2A2619; --color-surface-2: #35301F; --color-text: var(--brand-cream); --color-muted: #B4AC8C; --color-primary: #C6B24A; --color-primary-hover: #D8C55E; --color-on-primary: #23200F; --color-secondary: #93AE89; --color-accent: #E0AAAA; --color-highlight: #D4B75E; --color-border: rgba(244, 241, 226, 0.16); --color-border-strong: rgba(244, 241, 226, 0.30); --color-focus: #D8C55E; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 6px 18px rgba(0,0,0,0.45); --shadow-lg: 0 14px 40px rgba(0,0,0,0.55); } } :root[data-theme="dark"] { --color-bg: #1E1B12; --color-surface: #2A2619; --color-surface-2: #35301F; --color-text: var(--brand-cream); --color-muted: #B4AC8C; --color-primary: #C6B24A; --color-primary-hover: #D8C55E; --color-on-primary: #23200F; --color-secondary: #93AE89; --color-accent: #E0AAAA; --color-highlight: #D4B75E; --color-border: rgba(244, 241, 226, 0.16); --color-border-strong: rgba(244, 241, 226, 0.30); --color-focus: #D8C55E; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 6px 18px rgba(0,0,0,0.45); --shadow-lg: 0 14px 40px rgba(0,0,0,0.55); } /* ============================================================ BASE / RESET mínimo ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-tight); font-weight: 600; margin: 0 0 var(--sp-3); color: var(--color-text); } h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } a { color: var(--color-primary-hover); text-decoration-thickness: 1px; text-underline-offset: 2px; } :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* ============================================================ COMPONENTES BASE reutilizables ============================================================ */ /* Marca / wordmark */ .lc-wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } .lc-wordmark .dot { color: var(--color-accent); } .lc-wordmark .continua { font-family: var(--font-script); font-weight: 400; } /* Botones */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); padding: 0.7em 1.4em; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; transition: transform var(--transition), background var(--transition), box-shadow var(--transition); text-decoration: none; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow); } .btn-secondary { background: var(--color-secondary); color: #fff; } .btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); } .btn-ghost:hover { background: var(--color-surface-2); } /* Tarjetas */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); transition: box-shadow var(--transition), transform var(--transition); } .card:hover { box-shadow: var(--shadow); } /* Badges / chips */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); font-weight: 700; padding: 0.25em 0.7em; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-muted); } .badge-sage { background: color-mix(in srgb, var(--color-secondary) 22%, transparent); color: var(--color-secondary); } .badge-rose { background: color-mix(in srgb, var(--color-accent) 26%, transparent); color: var(--color-accent); } .badge-gold { background: color-mix(in srgb, var(--color-highlight) 26%, transparent); color: var(--brand-olive-dark); } /* Inputs */ .field { display: block; margin-bottom: var(--sp-4); } .field > label { display: block; font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--sp-1); } .input { width: 100%; font-family: var(--font-body); font-size: var(--text-base); padding: 0.65em 0.9em; color: var(--color-text); background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); } /* Precio */ .price { font-family: var(--font-display); font-weight: 600; color: var(--color-primary-hover); } /* ============================================================ SVG "línea continua" — animación de trazo continuo ============================================================ */ .lc-line path { stroke: var(--color-primary); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: lc-draw 3.2s ease-in-out infinite alternate; } @keyframes lc-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .lc-line path { animation: none; stroke-dashoffset: 0; } }