/* ========================================================================== Tokens — el ÚNICO sitio donde se definen colores del proyecto. ========================================================================== Regla: ningún componente escribe un color a mano. Si hace falta un tono nuevo, se añade aquí y se usa por variable. Así el día que se retoque la identidad se toca un archivo, no veinte. Paleta: atardecer de poniente sobre tierra árida. El naranja es color de ACCIÓN (botones, enlaces, acentos), nunca fondo grande y saturado. Los fondos son arena y ocre; el texto, gris carbón. Contrastes MEDIDOS (no estimados) sobre las tres superficies claras --sup #fdf6ec / --sup-2 #f6e8d5 / --sup-3 #efdcc3: --tinta 14.4 / 12.8 / 11.5 --tinta-2 7.6 / 6.8 / 6.1 --tinta-3 6.3 / 5.6 / 5.0 --accion 5.8 / 5.1 / 4.6 --agave-txt 6.2 / 5.5 / 5.0 --mar 9.1 / 8.1 / 7.3 --s1 6.4/5.7/5.2 --s2 6.2/5.5/5.0 --s3 6.0/5.3/4.8 --s4 6.1/5.4/4.9 --s5 5.8/5.2/4.6 Todos por encima del 4.5:1 de WCAG AA para texto normal. ========================================================================== */ :root{ /* ---------- paleta base ---------- */ --naranja: #a8400e; /* acción: enlaces, botones, acentos */ --naranja-vivo: #ef7d33; /* solo para rellenos y degradados */ --naranja-claro: #ffb27a; --naranja-pastel: #ffdfc2; --terracota: #9d3d22; /* hover de acción */ --ocre: #e4c79c; --arena: #fdf6ec; --arena-2: #f6e8d5; --agave: #6f8f66; /* secundario: relleno */ --agave-txt: #445f3d; /* secundario: texto (más oscuro por contraste) */ --agave-osc: #35492f; --mar: #14495e; /* contraste puntual */ --carbon: #2a2320; /* ---------- superficies ---------- */ --fondo: var(--arena); --sup: #fdf6ec; --sup-2: var(--arena-2); --sup-3: #efdcc3; --linea: rgba(120, 74, 40, .18); --linea-2: rgba(120, 74, 40, .34); --sombra: 0 1px 2px rgba(90,55,30,.06), 0 6px 18px rgba(90,55,30,.08); --sombra-alta:0 2px 6px rgba(90,55,30,.10), 0 18px 40px rgba(90,55,30,.14); /* ---------- texto ---------- */ --tinta: var(--carbon); --tinta-2: #5d4c42; --tinta-3: #6a584c; /* ---------- roles de interacción ---------- */ --accion: var(--naranja); --accion-hover: var(--terracota); --accion-sup: rgba(168, 64, 14, .10); --accion-bor: rgba(168, 64, 14, .38); --foco: var(--mar); /* ---------- escala de la nota ---------- Dos versiones: la de texto es más oscura para leerse sobre arena; la de relleno es la viva, que va en barras e iconos (no lleva texto). */ --s5:#2c6e33; --s5-f:#4a9d52; /* excelente */ --s4:#4a6614; --s4-f:#8ab433; /* bueno */ --s3:#7d5807; --s3-f:#d9a52b; /* regular */ --s2:#98430f; --s2-f:#ef7d33; /* malo */ --s1:#a92a1f; --s1-f:#d94436; /* no salgas */ /* ---------- avisos ---------- */ --peligro-txt:#8f2018; --peligro-sup:rgba(217,68,54,.10); --peligro-bor:rgba(217,68,54,.38); --ojo-txt: #7a5405; --ojo-sup: rgba(217,165,43,.14); --ojo-bor: rgba(180,130,20,.40); --info-txt: #10465a; --info-sup: rgba(20,73,94,.07); --info-bor: rgba(20,73,94,.24); --ok-txt: #2c6e33; --ok-sup: rgba(74,157,82,.14); --ok-bor: rgba(74,157,82,.36); /* ---------- tipos del mapa (los lee mapa.js) ---------- */ --tipo-playa: #a8400e; --tipo-cala: #9d3d22; --tipo-pueblo: #6f8f66; --tipo-faro: #14495e; --tipo-salinas: #a8628f; --tipo-mirador: #7d6a5d; --tipo-ruta: #8a7040; /* ---------- cielo del hero ---------- */ --cielo: linear-gradient(180deg, #ffe9d2 0%, #ffd9b6 34%, #ffc79c 62%, #f9b184 84%, var(--arena) 100%); } /* -------------------------------------------------------------------------- Alias de compatibilidad. Las páginas ya usaban estos nombres. En vez de reescribir cientos de reglas, se reapuntan aquí: el color se sigue definiendo en un solo sitio y cambiar la identidad sigue siendo tocar este archivo y nada más. -------------------------------------------------------------------------- */ :root{ --bg: var(--fondo); --panel: var(--sup); --panel-solid: var(--sup); --line: var(--linea); --line-2: var(--linea-2); --text: var(--tinta); --muted: var(--tinta-2); --dim: var(--tinta-3); --sea: var(--accion); --sand: var(--ocre); } /* ========================================================================== Decoración de pita/ágave ========================================================================== Las siluetas son SVG propios en /img/. Se usan como máscara para poder teñirlas con los tokens: así una misma silueta sirve en cualquier color sin duplicar archivos. ========================================================================== */ /* Separador: línea partida con una penca de pie en el hueco. Nada de rotar el
: al girar 90 grados un elemento que ocupa todo el ancho, su caja visual se vuelve enorme y se come el diseño. */ .sep-agave{ border:0;height:36px;margin:38px 0;position:relative; } .sep-agave::before{ content:;position:absolute;left:0;right:0;top:50%;height:1px; background: linear-gradient(90deg,transparent,var(--linea-2)) left center/calc(50% - 24px) 1px no-repeat, linear-gradient(90deg,var(--linea-2),transparent) right center/calc(50% - 24px) 1px no-repeat; } .sep-agave::after{ content:;position:absolute;left:50%;top:0;width:24px;height:36px; transform:translateX(-50%); background:var(--agave);opacity:.6; -webkit-mask:url('../img/agave-penca.svg') center/contain no-repeat; mask:url('../img/agave-penca.svg') center/contain no-repeat; } /* decoración de esquina: la roseta asomando */ .deco-esquina{ position:absolute;pointer-events:none;z-index:0; background:var(--agave-osc);opacity:.13; -webkit-mask:url('../img/agave-planta.svg') no-repeat center/contain; mask:url('../img/agave-planta.svg') no-repeat center/contain; } .deco-quiote{ position:absolute;pointer-events:none;z-index:0; background:var(--agave-osc);opacity:.11; -webkit-mask:url('../img/agave-quiote.svg') no-repeat center/contain; mask:url('../img/agave-quiote.svg') no-repeat center/contain; } /* patrón de fondo, muy tenue */ .patron-agave{ position:relative; } .patron-agave::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:var(--agave-osc); -webkit-mask:url('../img/agave-patron.svg') repeat 0 0/220px 220px; mask:url('../img/agave-patron.svg') repeat 0 0/220px 220px; opacity:.05; } .patron-agave > *{position:relative;z-index:1} @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }