/* ========================================================================= Pawmily — Tipografías auto-hospedadas Servirlas desde el propio dominio evita dos conexiones externas (fonts.googleapis.com para el CSS y fonts.gstatic.com para los archivos) en la ruta crítica: cada una cuesta DNS, TLS y una ida y vuelta antes de que el navegador pueda pintar el primer texto. Ambas son variables: un archivo cubre todo el rango de pesos. Subconjunto latin, que incluye los acentos y la eñe del español. ========================================================================= */ @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400 700; /* Fuente variable: un archivo, todos los pesos. */ font-display: swap; /* El texto se ve desde el primer pintado. */ src: url("../fonts/fredoka-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/nunitosans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================= Pawmily — Sistema de diseño ========================================================================= */ :root { /* --------------------------------------------------------------------- Color La paleta de marca es fija. Un dato que condiciona todo su uso: #C58B58 es un tono medio y NO alcanza contraste legible con nada — 2,76:1 con el crema, 2,74:1 con el marrón oscuro. Nunca lleva texto encima. Vive en el logo, las ilustraciones y el grafismo. Para texto y botones se usa --pw-ink-brand, derivado del mismo color hacia el oscuro de marca: 4,94:1 sobre crema. Se lee como el mismo marrón, pero cumple. --------------------------------------------------------------------- */ --pw-brand: #c58b58; /* Solo grafismo. Jamás bajo texto. */ --pw-ink-brand: #8f6342; /* Texto de acento, precios, botón primario. */ --pw-ink: #6b4933; /* Texto principal. 7,12:1 sobre el fondo. */ --pw-bg: #fdf0df; /* Fondo de página. */ --pw-surface: #fff8ed; /* Tarjetas y bloques. */ /* Derivados para bordes, sombras y estados. Todos parten del mismo pigmento: un gris neutro sobre esta paleta se ve sucio. */ --pw-line: #ecd9bf; --pw-line-strong: #dcc0a0; --pw-ink-soft: #83644c; /* Texto secundario. 4,81:1 sobre el fondo de página y 5,11:1 sobre crema. El tono anterior (#8a6b52) se quedaba en 4,34 sobre #fdf0df y no pasaba AA. */ --pw-ink-deep: #4a3121; /* Titulares y footer. */ /* Estados. Derivados del pigmento cálido para no romper la familia. */ --pw-success: #4f7a4a; --pw-success-bg: #eaf2e6; --pw-danger: #a33f2f; --pw-danger-bg: #fbeae4; --pw-focus: #3d6fd4; /* Único frío del sistema: debe destacar. */ /* --------------------------------------------------------------------- Tipografía --------------------------------------------------------------------- */ --pw-font-display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif; --pw-font-body: "Nunito Sans", ui-sans-serif, "Segoe UI", system-ui, sans-serif; /* Escala fluida. clamp() evita media queries para el tamaño y mantiene la proporción entre 360 px y 1440 px. */ --pw-text-xs: 0.78rem; --pw-text-sm: 0.875rem; --pw-text-base: 1rem; --pw-text-lg: clamp(1.06rem, 1rem + 0.3vw, 1.19rem); --pw-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --pw-text-2xl: clamp(1.5rem, 1.32rem + 0.9vw, 2rem); --pw-text-3xl: clamp(1.9rem, 1.6rem + 1.5vw, 2.75rem); --pw-text-4xl: clamp(2.3rem, 1.8rem + 2.5vw, 3.75rem); --pw-leading-tight: 1.12; --pw-leading-snug: 1.32; --pw-leading-body: 1.65; /* --------------------------------------------------------------------- Espaciado — escala de 4 px --------------------------------------------------------------------- */ --pw-1: 0.25rem; --pw-2: 0.5rem; --pw-3: 0.75rem; --pw-4: 1rem; --pw-5: 1.25rem; --pw-6: 1.5rem; --pw-8: 2rem; --pw-10: 2.5rem; --pw-12: 3rem; --pw-16: 4rem; --pw-20: 5rem; --pw-24: 6rem; /* Ritmo vertical entre secciones. Generoso, como pide el brief. */ --pw-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); /* --------------------------------------------------------------------- Radios — el rasgo formal de la marca. El brief pide 12-20px; los contenedores grandes van más allá para sostener el carácter «bubble» del logo a escala de página. --------------------------------------------------------------------- */ --pw-r-sm: 10px; --pw-r: 14px; --pw-r-md: 18px; --pw-r-lg: 24px; --pw-r-xl: 32px; --pw-r-full: 999px; /* --------------------------------------------------------------------- Sombra — tintada con el pigmento de marca, nunca negro. Cada nivel lleva desplazamiento y desenfoque: un halo sin offset es decoración, no profundidad. --------------------------------------------------------------------- */ --pw-shadow-sm: 0 1px 2px rgba(107, 73, 51, 0.06), 0 2px 6px rgba(107, 73, 51, 0.05); --pw-shadow: 0 2px 4px rgba(107, 73, 51, 0.06), 0 6px 16px rgba(107, 73, 51, 0.08); --pw-shadow-lg: 0 4px 8px rgba(107, 73, 51, 0.07), 0 16px 36px rgba(107, 73, 51, 0.11); /* --------------------------------------------------------------------- Movimiento — un solo vocabulario. Salida exponencial: arranca rápido y se asienta, que es como se mueven las cosas con peso. --------------------------------------------------------------------- */ --pw-ease: cubic-bezier(0.16, 1, 0.3, 1); --pw-ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --pw-fast: 140ms; --pw-base: 260ms; --pw-slow: 480ms; /* Anchos */ --pw-max: 1240px; --pw-max-text: 68ch; /* Medida de lectura dentro de 65-75ch. */ --pw-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --pw-header-h: 64px; } @media (min-width: 900px) { :root { --pw-header-h: 80px; } } /* Sin animaciones para quien las ha desactivado en su sistema. */ @media (prefers-reduced-motion: reduce) { :root { --pw-fast: 1ms; --pw-base: 1ms; --pw-slow: 1ms; } }