/* ============================================================ ANNY — DESIGN SYSTEM / BASE ============================================================ Sistema centralizado de diseño. Los colores y tipografías se conectan con Elementor mediante .elementor-kit-13. No definir colores directamente en los componentes mientras exista una variable ANNY equivalente. ============================================================ */ /* ============================================================ 01 — TOKENS ANNY ============================================================ */ :root { /* -------------------------------------------------------- COLORES PRINCIPALES -------------------------------------------------------- */ --anny-primary: var(--e-global-color-primary, #A0522D); --anny-secondary: var(--e-global-color-secondary, #2E2620); --anny-text: var(--e-global-color-text, #4A4038); --anny-accent: var(--e-global-color-accent, #C99B6B); /* -------------------------------------------------------- COLORES PERSONALIZADOS -------------------------------------------------------- */ --anny-white: var(--e-global-color-b389dde, #FFFFFF); --anny-cream-light: var(--e-global-color-8e1e773, #FAF7F2); --anny-cream: var(--e-global-color-3b825ff, #F5F0E8); --anny-brown-dark: var(--e-global-color-aac4669, #1A1512); --anny-border: var(--e-global-color-6be1299, #E0D5C7); --anny-sage: var(--e-global-color-f2c9446, #9CA07F); /* -------------------------------------------------------- TIPOGRAFÍAS -------------------------------------------------------- */ --anny-font-heading: var( --e-global-typography-primary-font-family, "Cormorant Garamond" ); --anny-font-ui: var( --e-global-typography-secondary-font-family, "Raleway" ); --anny-font-body: var( --e-global-typography-text-font-family, "Raleway" ); --anny-font-accent: var( --e-global-typography-accent-font-family, "Raleway" ); /* -------------------------------------------------------- PESOS -------------------------------------------------------- */ --anny-weight-heading: var( --e-global-typography-primary-font-weight, 500 ); --anny-weight-ui: var( --e-global-typography-secondary-font-weight, 500 ); --anny-weight-body: var( --e-global-typography-text-font-weight, 400 ); --anny-weight-accent: var( --e-global-typography-accent-font-weight, 600 ); /* -------------------------------------------------------- TRANSICIONES -------------------------------------------------------- */ --anny-transition-fast: 180ms ease; --anny-transition: 300ms ease; --anny-transition-slow: 450ms cubic-bezier(.22, .61, .36, 1); /* -------------------------------------------------------- RADIOS -------------------------------------------------------- */ --anny-radius-sm: 4px; --anny-radius: 8px; --anny-radius-lg: 16px; /* -------------------------------------------------------- SOMBRAS -------------------------------------------------------- */ --anny-shadow-soft: 0 8px 30px rgba(26, 21, 18, .06); --anny-shadow-hover: 0 14px 40px rgba(26, 21, 18, .10); } /* ============================================================ 02 — BOX SIZING ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ============================================================ 03 — CONEXIÓN CON ELEMENTOR ============================================================ */ /* * Elementor define sus variables dentro de .elementor-kit-13. * * Estas variables ANNY heredan directamente esos valores. * * Así, si cambiás un color desde Elementor, * ANNY se actualiza automáticamente. */ .elementor-kit-13 { --anny-primary: var(--e-global-color-primary); --anny-secondary: var(--e-global-color-secondary); --anny-text: var(--e-global-color-text); --anny-accent: var(--e-global-color-accent); --anny-white: var(--e-global-color-b389dde); --anny-cream-light: var(--e-global-color-8e1e773); --anny-cream: var(--e-global-color-3b825ff); --anny-brown-dark: var(--e-global-color-aac4669); --anny-border: var(--e-global-color-6be1299); --anny-sage: var(--e-global-color-f2c9446); --anny-font-heading: var(--e-global-typography-primary-font-family); --anny-font-ui: var(--e-global-typography-secondary-font-family); --anny-font-body: var(--e-global-typography-text-font-family); --anny-font-accent: var(--e-global-typography-accent-font-family); --anny-weight-heading: var(--e-global-typography-primary-font-weight); --anny-weight-ui: var(--e-global-typography-secondary-font-weight); --anny-weight-body: var(--e-global-typography-text-font-weight); --anny-weight-accent: var(--e-global-typography-accent-font-weight); } /* ============================================================ 04 — BASE HTML ============================================================ */ html { scroll-behavior: smooth; line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--anny-white); color: var(--anny-text); font-family: var(--anny-font-body), sans-serif; font-size: 1rem; font-weight: var(--anny-weight-body); line-height: 1.7; } /* ============================================================ 05 — TÍTULOS ============================================================ */ h1, h2, h3, h4, h5, h6 { margin-block-start: 0; color: inherit; font-family: var(--anny-font-heading), sans-serif; font-weight: var(--anny-weight-heading); line-height: 1.2; } /* ============================================================ 06 — PÁRRAFOS ============================================================ */ p { margin-block-start: 0; margin-block-end: .9rem; } /* ============================================================ 07 — LINKS ============================================================ */ a { background-color: transparent; color: var(--anny-primary); text-decoration: none; transition: color var(--anny-transition-fast), background-color var(--anny-transition-fast), border-color var(--anny-transition-fast), opacity var(--anny-transition-fast); } a:hover { color: var(--anny-secondary); } a:focus-visible { color: var(--anny-primary); } /* ============================================================ 08 — IMÁGENES ============================================================ */ img { border-style: none; height: auto; max-width: 100%; } /* ============================================================ 09 — LABELS ============================================================ */ label { display: inline-block; line-height: 1; vertical-align: middle; } /* ============================================================ 10 — FORMULARIOS ============================================================ */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; } /* ============================================================ 11 — INPUTS ============================================================ */ input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], select, textarea { width: 100%; padding: .5rem 1rem; border: 1px solid var(--anny-border); border-radius: var(--anny-radius-sm); background-color: var(--anny-white); color: var(--anny-text); transition: border-color var(--anny-transition-fast), background-color var(--anny-transition-fast), color var(--anny-transition-fast), box-shadow var(--anny-transition-fast); } /* ============================================================ 12 — INPUTS / FOCUS ============================================================ */ input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, select:focus, textarea:focus { border-color: var(--anny-primary); } /* ============================================================ 13 — BOTONES BASE ============================================================ */ body:not(.woocommerce) [type="button"], body:not(.woocommerce) [type="reset"], body:not(.woocommerce) [type="submit"], body:not(.woocommerce) button { display:inline-block; padding:.5rem 1rem; border:1px solid var(--anny-primary); border-radius:var(--anny-radius-sm); background-color:transparent; color:var(--anny-primary); font-family:inherit; font-size:1rem; font-weight: var(--anny-weight-ui); text-align:center; transition: color var(--anny-transition), background-color var(--anny-transition), border-color var(--anny-transition), opacity var(--anny-transition), transform var(--anny-transition); } /* ============================================================ 14 — BOTONES / HOVER ============================================================ */ [type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover, button:hover { background-color: var(--anny-primary); border-color: var(--anny-primary); color: var(--anny-white); text-decoration: none; } /* ============================================================ 15 — BOTONES / FOCUS ============================================================ */ [type="button"]:focus, [type="reset"]:focus, [type="submit"]:focus, button:focus { outline: 2px solid var(--anny-accent); outline-offset: 3px; } /* ============================================================ 16 — BOTONES / FOCUS SIN TECLADO ============================================================ */ [type="button"]:focus:not(:focus-visible), [type="reset"]:focus:not(:focus-visible), [type="submit"]:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } /* ============================================================ 17 — BOTONES / DISABLED ============================================================ */ [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled, button:disabled { opacity: .5; cursor: not-allowed; } /* ============================================================ 18 — TABLAS ============================================================ */ table { background-color: transparent; border-collapse: collapse; border-spacing: 0; color: var(--anny-text); } table td, table th { border-color: var(--anny-border); } /* ============================================================ 19 — FIGCAPTION ============================================================ */ figcaption { color: var(--anny-text); } /* ============================================================ 20 — ELEMENTOS OCULTOS ============================================================ */ [hidden], template { display: none; }