/* =====================================================================
3K AdoptaDog 2026 — DESIGN TOKENS (fuente de verdad del sistema visual)
---------------------------------------------------------------------
Lo importan TODAS las páginas, ANTES de su hoja propia:
(ruta relativa según la página)
Fuentes (pegar en , antes de las hojas):
Reglas:
- Nadie redefine estos valores en otra hoja. Si falta un token, se pide al
Director de Arte (o se agrega AQUÍ con comentario), no se inventa un hex suelto.
- Este archivo SOLO declara variables (+ @keyframes compartidos y la regla
global de reduced-motion). No contiene estilos de componentes.
===================================================================== */
:root {
/* ------------------------------------------------------------------
1. COLOR — primitivos
------------------------------------------------------------------ */
/* Rojo navideño (marca) */
--c-red-50: #FDECEE;
--c-red-100: #F9D3D8;
--c-red-200: #F0A3AD;
--c-red-400: #D63A4E;
--c-red-500: #B5162B; /* rojo principal del flyer */
--c-red-600: #9E1225;
--c-red-700: #7E0F1E; /* rojo profundo */
--c-red-800: #6A0C19;
--c-red-900: #4A0711; /* noche (fondos de footer, preloader) */
/* Dorado del "3K" */
--c-gold-100: #FCF1D2;
--c-gold-200: #F7E1A0;
--c-gold-300: #F3CF6A;
--c-gold-500: #E3B341;
--c-gold-600: #D2A035;
--c-gold-700: #C8922A;
--c-gold-900: #7A5410; /* dorado legible como TEXTO sobre crema (AA) */
/* Crema / nieve */
--c-snow: #FFFFFF;
--c-cream-50: #FFFBF6;
--c-cream-100: #FFF6EE; /* crema de marca */
--c-cream-200: #FBE9DA;
--c-cream-300: #F3D9C4;
--c-cream-400: #E6C3A6;
/* Tinta (texto) — cálida, nunca negro puro */
--c-ink-900: #2B1216;
--c-ink-700: #5E3B40;
--c-ink-500: #86656A;
--c-ink-300: #BFA6A9;
/* Acentos propuestos (usar con moderación: máx. 1 acento por sección) */
--c-pine-700: #17473A; /* verde pino navideño: badges "abierto", éxito, detalles de árbol */
--c-pine-500: #2E7A5F;
--c-pine-100: #DCEFE6;
--c-teal-500: #22A39A; /* turquesa de las pañoletas AdoptaDog (fotos reales): chips "en adopción" */
--c-teal-100: #D5F1EE;
--c-cocoa-600: #7A4A2B; /* café huellita: ilustraciones, huellas del preloader sobre crema */
--c-blush-200: #F8D4CF; /* rosa nariz de perrito: fondos de stickers, hover suaves */
/* Estados */
--c-success: #1F8A55;
--c-warning: #B26A00;
--c-error: #C0182F;
--c-whatsapp: #1F8F4E;
/* ------------------------------------------------------------------
2. COLOR — semánticos (lo que usan los componentes)
------------------------------------------------------------------ */
--color-bg: var(--c-cream-100);
--color-bg-alt: var(--c-cream-50);
--color-bg-sunken: var(--c-cream-200);
--color-surface: var(--c-snow);
--color-surface-warm: var(--c-cream-50);
--color-bg-brand: var(--c-red-500);
--color-bg-brand-deep: var(--c-red-700);
--color-bg-night: var(--c-red-900);
--color-text: var(--c-ink-900);
--color-text-muted: var(--c-ink-700); /* AA sobre crema y blanco */
--color-text-subtle: var(--c-ink-500); /* solo ≥ 14px bold o textos legales */
--color-text-on-brand: var(--c-snow);
--color-text-on-brand-muted: rgba(255, 246, 238, .86);
--color-heading: var(--c-red-500);
--color-heading-accent: var(--c-gold-500); /* acento de H2 SOBRE ROJO */
--color-heading-accent-light: var(--c-red-700); /* acento de H2 SOBRE CREMA: usar con subrayado/marcador, ver DISENO.md */
--color-link: var(--c-red-500);
--color-link-hover: var(--c-red-700);
--color-border: #EED9CB;
--color-border-strong: var(--c-cream-400);
--color-border-on-brand: rgba(255, 255, 255, .22);
--color-focus: var(--c-gold-500); /* sobre rojo */
--color-focus-light: var(--c-red-700); /* sobre crema/blanco */
/* Gradientes de marca */
--grad-gold: linear-gradient(135deg, #F7DC86 0%, #E3B341 42%, #C8922A 100%);
--grad-gold-shine: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%); /* brillo que barre botones dorados */
--grad-red: linear-gradient(160deg, #C41C33 0%, #B5162B 38%, #7E0F1E 100%);
--grad-red-radial: radial-gradient(120% 90% at 85% 0%, #CF2139 0%, #B5162B 35%, #7E0F1E 75%, #560A15 100%);
--grad-night: radial-gradient(120% 100% at 50% 0%, #7E0F1E 0%, #4A0711 70%);
--grad-cream: linear-gradient(180deg, #FFFBF6 0%, #FFF6EE 60%, #FBE9DA 100%);
--grad-marker: linear-gradient(transparent 58%, rgba(243, 207, 106, .65) 58%, rgba(243, 207, 106, .65) 88%, transparent 88%); /* "subrayado plumón" dorado */
/* ------------------------------------------------------------------
3. TIPOGRAFÍA
Display: Fredoka (redondeada, amigable, "de animalitos"; acentos y ñ impecables)
Texto: Nunito (terminales redondeadas, muy legible en móvil, combina con Fredoka)
Acento: Caveat 700 (SOLO anotaciones a mano: "Camilo · en adopción", flechitas)
------------------------------------------------------------------ */
--font-display: "Fredoka", "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-body: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
--font-mono-num: "Fredoka", "Nunito", system-ui, sans-serif; /* números: usar con font-variant-numeric: tabular-nums */
--fw-regular: 400;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extra: 800;
--fw-black: 900; /* solo Nunito */
--fw-display: 700; /* Fredoka máx. 700 */
--fw-display-soft: 600;
/* Escala fluida (Utopia-style, 360px → 1440px; razón ~1.2 → ~1.333) */
--step--2: clamp(.75rem, .736rem + .062vw, .8rem); /* 12 → 12.8 legales, captions */
--step--1: clamp(.833rem, .811rem + .099vw, .9rem); /* 13.3 → 14.4 meta, labels */
--step-0: clamp(1rem, .958rem + .185vw, 1.125rem); /* 16 → 18 cuerpo */
--step-1: clamp(1.2rem, 1.133rem + .296vw, 1.4rem); /* 19 → 22 lead, H4 */
--step-2: clamp(1.44rem, 1.337rem + .459vw, 1.75rem); /* 23 → 28 H3 */
--step-3: clamp(1.728rem, 1.554rem + .773vw, 2.25rem); /* 28 → 36 H2 chico / precios */
--step-4: clamp(2.074rem, 1.765rem + 1.372vw, 3rem); /* 33 → 48 H2 */
--step-5: clamp(2.488rem, 1.984rem + 2.24vw, 4rem); /* 40 → 64 H2 destacado / CTA final */
--step-6: clamp(2.986rem, 2.148rem + 3.724vw, 5.5rem); /* 48 → 88 H1 hero */
--step-display: clamp(3.5rem, 2rem + 6.667vw, 8rem); /* 56 → 128 "3K", contadores gigantes */
--lh-tight: 1;
--lh-heading: 1.05;
--lh-snug: 1.25;
--lh-body: 1.6;
--ls-display: -.015em; /* Fredoka grande: apretar un poco */
--ls-heading: -.01em;
--ls-eyebrow: .14em; /* eyebrows en MAYÚSCULAS (Nunito 800) */
--ls-button: .01em;
--measure: 62ch; /* ancho máximo de párrafos */
--measure-narrow: 44ch;
/* ------------------------------------------------------------------
4. ESPACIADO (base 4px; fluido en los pasos grandes)
------------------------------------------------------------------ */
--space-3xs: .25rem; /* 4 */
--space-2xs: .5rem; /* 8 */
--space-xs: .75rem; /* 12 */
--space-s: 1rem; /* 16 */
--space-m: clamp(1.25rem, 1.167rem + .37vw, 1.5rem); /* 20 → 24 */
--space-l: clamp(1.5rem, 1.25rem + 1.111vw, 2.25rem); /* 24 → 36 */
--space-xl: clamp(2rem, 1.583rem + 1.852vw, 3.25rem); /* 32 → 52 */
--space-2xl: clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem); /* 40 → 72 */
--space-3xl: clamp(3.5rem, 2.5rem + 4.444vw, 6.5rem); /* 56 → 104 */
--space-section: clamp(4rem, 2.5rem + 6.667vw, 8.5rem); /* 64 → 136 padding vertical de sección */
--space-section-tight: clamp(3rem, 2rem + 4.444vw, 6rem);
--gutter: clamp(1rem, .667rem + 1.481vw, 2rem); /* 16 → 32 */
--container: 1200px;
--container-wide: 1360px;
--container-narrow: 760px;
--header-h: 64px;
--header-h-desktop: 76px;
--tap: 48px; /* objetivo táctil mínimo */
/* ------------------------------------------------------------------
5. RADIOS — todo redondito (coherente con Fredoka)
------------------------------------------------------------------ */
--radius-xs: 8px;
--radius-s: 12px;
--radius-m: 18px; /* inputs, chips grandes */
--radius-l: 26px; /* tarjetas */
--radius-xl: 36px; /* tarjetas destacadas, contenedores de imagen */
--radius-2xl: 48px; /* bloques de sección "isla" */
--radius-pill: 999px;
--radius-blob: 58% 42% 55% 45% / 48% 55% 45% 52%; /* máscara orgánica para fotos de perritos */
/* ------------------------------------------------------------------
6. SOMBRAS — cálidas (tinte rojo-vino, nunca gris)
------------------------------------------------------------------ */
--shadow-xs: 0 1px 2px rgba(74, 7, 17, .08);
--shadow-s: 0 4px 12px -4px rgba(74, 7, 17, .16);
--shadow-m: 0 12px 28px -12px rgba(74, 7, 17, .28);
--shadow-l: 0 24px 56px -20px rgba(74, 7, 17, .40);
--shadow-xl: 0 40px 90px -30px rgba(74, 7, 17, .55);
--shadow-sticker: 0 2px 0 rgba(74, 7, 17, .12), 0 8px 18px -8px rgba(74, 7, 17, .35); /* stickers con borde blanco */
--shadow-gold: 0 10px 24px -10px rgba(200, 146, 42, .85);
--shadow-press: 0 4px 0 var(--c-red-800); /* botón "galleta" rojo: borde inferior 3D */
--shadow-press-gold: 0 4px 0 var(--c-gold-900); /* botón "galleta" dorado */
--shadow-inset: inset 0 2px 6px rgba(74, 7, 17, .10);
/* ------------------------------------------------------------------
7. MOVIMIENTO
CSS: usar estos cubic-bezier. GSAP: equivalencias en comentario.
------------------------------------------------------------------ */
--ease-out: cubic-bezier(.22, 1, .36, 1); /* GSAP "power3.out"/"expo.out" — entradas */
--ease-out-soft: cubic-bezier(.25, .8, .25, 1); /* GSAP "power2.out" — hovers */
--ease-in-out: cubic-bezier(.65, 0, .35, 1); /* GSAP "power3.inOut" — cortinas, preloader */
--ease-back: cubic-bezier(.34, 1.56, .64, 1); /* GSAP "back.out(1.7)" — "saltito": stickers, chips, huellas */
--ease-bounce-soft: cubic-bezier(.5, 1.8, .4, .8); /* micro rebote en clic (usar en ≤ 200ms) */
--ease-linear: linear; /* marquees, rotaciones */
--dur-instant: 90ms;
--dur-fast: 160ms; /* hover color, focus */
--dur-base: 260ms; /* hover transform, toggles */
--dur-slow: 480ms; /* acordeones, menú */
--dur-enter: 800ms; /* reveals de scroll */
--dur-hero: 1100ms; /* intro del hero */
--dur-preloader-max: 1800ms; /* tope duro del preloader */
--stagger-xs: 40ms;
--stagger-s: 70ms;
--stagger-m: 110ms;
--reveal-distance: 32px; /* y inicial de los fade-up */
--hover-lift: -4px; /* translateY de tarjetas al hover */
--press-scale: .97;
/* ------------------------------------------------------------------
8. CAPAS
------------------------------------------------------------------ */
--z-below: -1;
--z-base: 1;
--z-raised: 10;
--z-sticky: 50; /* barra CTA móvil */
--z-header: 100;
--z-menu: 110;
--z-toast: 150;
--z-preloader: 1000;
--z-skip: 1100;
/* ------------------------------------------------------------------
9. MOTIVOS GRÁFICOS (SVG data-URI, usar como mask-image o background)
Uso recomendado: mask-image + background-color → se pintan con cualquier token.
.paw { -webkit-mask: var(--svg-paw) center/contain no-repeat; mask: var(--svg-paw) center/contain no-repeat; background: var(--c-gold-500); }
------------------------------------------------------------------ */
/* Huellita: 4 dedos ovalados + almohadilla de corazón redondeada (viewBox 24) */
--svg-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.4' cy='10.4' rx='2.2' ry='2.8' transform='rotate(-18 5.4 10.4)'/%3E%3Cellipse cx='18.6' cy='10.4' rx='2.2' ry='2.8' transform='rotate(18 18.6 10.4)'/%3E%3Cellipse cx='9.2' cy='5.5' rx='2.2' ry='2.9' transform='rotate(-6 9.2 5.5)'/%3E%3Cellipse cx='14.8' cy='5.5' rx='2.2' ry='2.9' transform='rotate(6 14.8 5.5)'/%3E%3Cpath d='M12 11.4c-3.1 0-6.4 4-6.4 6.8 0 1.8 1.4 2.8 3.2 2.5 1.3-.2 2.1-.9 3.2-.9s1.9.7 3.2.9c1.8.3 3.2-.7 3.2-2.5 0-2.8-3.3-6.8-6.4-6.8z'/%3E%3C/svg%3E");
/* Huesito: dos lóbulos dobles redondos unidos por barra (viewBox 32x16) */
--svg-bone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'%3E%3Cpath d='M7 1.5a3.5 3.5 0 0 0-3.2 4.9A3.5 3.5 0 1 0 7 12.2c.4-.4.9-.7 1.5-.7h15c.6 0 1.1.3 1.5.7a3.5 3.5 0 1 0 3.2-5.8A3.5 3.5 0 1 0 25 1.9c-.4.4-.9.6-1.5.6h-15c-.6 0-1.1-.2-1.5-.6A3.5 3.5 0 0 0 7 1.5z'/%3E%3C/svg%3E");
/* Copo redondeado: 6 brazos con trazo redondo y ramitas en V (viewBox 24, stroke) */
--svg-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7'/%3E%3Cpath d='M9.5 3.8 12 6l2.5-2.2M9.5 20.2 12 18l2.5 2.2M3.9 10.1l3-1.1-.6-3.2M20.1 13.9l-3 1.1.6 3.2M3.9 13.9l3 1.1-.6 3.2M20.1 10.1l-3-1.1.6-3.2'/%3E%3C/svg%3E");
/* Estrellita de 4 puntas (destello) */
--svg-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.9 6.2 5.8 11.1 12 12-6.2.9-11.1 5.8-12 12-.9-6.2-5.8-11.1-12-12C6.2 11.1 11.1 6.2 12 0z'/%3E%3C/svg%3E");
/* Corazón redondito */
--svg-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.3 3 4 6.9 4c2.2 0 3.6 1.2 5.1 3 1.5-1.8 2.9-3 5.1-3 3.9 0 6 4.3 4.5 7.7C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
/* Divisor ondulado (borde superior de sección): ola suave, 2 crestas por 1440px.
Uso: .section::before { height: var(--wave-h); mask: var(--svg-wave) bottom/100% 100% no-repeat; background: ; top: calc(var(--wave-h) * -1 + 1px) } */
--svg-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 48C120 18 240 6 360 22s240 52 360 52 240-38 360-54 240 2 360 28v82H0z'/%3E%3C/svg%3E");
/* Festón (scallop) tipo galleta/toldo navideño: semicírculos de 40px */
--svg-scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 0h40v0a20 20 0 0 1-40 0z'/%3E%3C/svg%3E");
--wave-h: clamp(28px, 4vw, 64px);
--scallop-size: 40px 20px;
/* Textura de grano sutil (encima de fondos rojos, opacity .06–.1, mix-blend-mode: overlay) */
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) {
:root { --header-h: var(--header-h-desktop); }
}
/* Movimiento reducido: los tokens de duración colapsan; JS además debe saltarse GSAP. */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-enter: 1ms; --dur-hero: 1ms;
--reveal-distance: 0px; --hover-lift: 0px; --press-scale: 1;
}
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- Keyframes compartidos (landing y subpáginas) ---------- */
@keyframes kf-fade-up { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: none; } }
@keyframes kf-pop { 0% { opacity: 0; transform: scale(.6) rotate(-8deg); } 70% { opacity: 1; transform: scale(1.06) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes kf-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes kf-tail-wag { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes kf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kf-spin { to { transform: rotate(360deg); } }
@keyframes kf-shine { from { background-position: -160% 0; } to { background-position: 260% 0; } }
@keyframes kf-snowfall { from { transform: translate3d(0, -10vh, 0) rotate(0); } to { transform: translate3d(var(--drift, 30px), 110vh, 0) rotate(240deg); } }
@keyframes kf-paw-stamp { 0% { opacity: 0; transform: scale(1.5) rotate(var(--r, 0deg)); } 60% { opacity: 1; transform: scale(.92) rotate(var(--r, 0deg)); } 100% { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); } }
@keyframes kf-marquee { to { transform: translateX(-50%); } }
@keyframes kf-preloader-failsafe { to { opacity: 0; visibility: hidden; } } /* el preloader se oculta solo si JS falla */