/* ========================================================================== TASS — base.css Variables globales, reset y tipografía base. La paleta de color es provisional y fue tomada directamente de los colores del logotipo oficial de TASS (café/espresso, arena, azul y verde). Ajustar aquí cuando exista un manual de marca definitivo. ========================================================================== */ :root { /* Colores de marca (tomados del logotipo TASS) */ --color-espresso: #46311F; /* texto "TASS" del logotipo */ --color-sand: #C7A57C; /* línea divisoria del logotipo */ --color-water: #2E6F8E; /* gota de agua del logotipo */ --color-leaf: #6E9C46; /* hoja del logotipo (uso muy limitado) */ /* Colores base del sitio */ --color-ink: #201C19; --color-paper: #FFFFFF; --color-off-white: #F6F4F1; --color-linen: #FAF7F2; /* fondo base unificado de Inicio (Hero/Servicios/Estadísticas/Acerca), docs/TASS-VISUAL-SYSTEM.md */ --color-graphite: #6B655D; --color-border: #E3DFD9; /* Placeholders de imagen pendiente */ --color-placeholder-bg: #F0EDE8; --color-placeholder-border: #C9C2B8; --color-placeholder-text: #8A8377; /* Tipografía (Manrope vía Google Fonts, ver de cada página; conserva la misma pila de sistema como respaldo si la fuente no carga). */ --font-base: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-base: 16px; /* Espaciado */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; /* Layout */ --container-max: 1200px; --radius-sm: 4px; --radius-md: 8px; /* Sistema de animaciones (ver sección al final de este archivo) */ --ease-elegant: cubic-bezier(0.22, 1, 0.36, 1); --duration-base: 650ms; --duration-slow: 650ms; --reveal-distance: 22px; --stagger-step: 90ms; } /* Reset básico */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; } ul, ol { list-style: none; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } html { scroll-behavior: smooth; } body { font-family: var(--font-base); font-size: var(--font-size-base); color: var(--color-ink); background-color: var(--color-paper); line-height: 1.6; } h1, h2, h3, h4 { color: var(--color-espresso); font-weight: 600; } h1 { font-size: clamp(2.625rem, 1.6rem + 4.2vw, 4.5rem); line-height: 1.08; letter-spacing: -0.025em; } h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.125rem); line-height: 1.15; letter-spacing: -0.022em; } h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.25; letter-spacing: -0.015em; } h4 { line-height: 1.25; } p { color: var(--color-ink); } /* Contenedor general */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-sm); } /* Utilidades */ .text-center { text-align: center; } .section { padding: var(--space-xl) 0; } .section--alt { background-color: var(--color-off-white); } .section__header { max-width: 700px; margin: 0 auto 2.75rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* Texto marcado como provisional (pendiente de validar mensaje final) */ .is-provisional { position: relative; } .provisional-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-water); background-color: #EAF2F5; border-radius: var(--radius-sm); padding: 2px 8px; margin-bottom: var(--space-xs); } /* Texto de dato pendiente (contacto, cifras, etc.) */ .data-pending { color: var(--color-placeholder-text); font-style: italic; } /* ========================================================================== Sistema de animaciones y microinteracciones Reglas base compartidas por todo el sitio. Solo anima opacity/transform (rendimiento). Las clases .reveal* se activan por scroll mediante IntersectionObserver (ver main.js). Las clases .hero-reveal* se ejecutan al cargar la página porque el encabezado siempre está sobre el pliegue. ========================================================================== */ @keyframes tass-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes tass-fade-up { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: translateY(0); } } /* ---------- Revelado al hacer scroll ---------- */ .reveal, .reveal-up, .reveal-left, .reveal-right { opacity: 0; transition: opacity var(--duration-base) var(--ease-elegant), transform var(--duration-base) var(--ease-elegant); } .reveal-up { transform: translateY(var(--reveal-distance)); } .reveal-left { transform: translateX(calc(-1 * var(--reveal-distance))); } .reveal-right { transform: translateX(var(--reveal-distance)); } .reveal.is-visible, .reveal-up.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translate(0, 0); } /* Entrada progresiva de grids/tarjetas: agregar [data-reveal-group] al contenedor y .reveal-up (u otra variante) a cada hijo directo. */ [data-reveal-group] > :nth-child(1) { transition-delay: calc(var(--stagger-step) * 0); } [data-reveal-group] > :nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); } [data-reveal-group] > :nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); } [data-reveal-group] > :nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); } [data-reveal-group] > :nth-child(5) { transition-delay: calc(var(--stagger-step) * 4); } [data-reveal-group] > :nth-child(6) { transition-delay: calc(var(--stagger-step) * 5); } /* ---------- Encabezados fotográficos (hero): imagen → título → subtítulo ---------- */ .hero-reveal { animation: tass-fade-in var(--duration-slow) var(--ease-elegant) both; } /* Título del hero: fade-up de revelado (delay 160ms, termina a los 810ms en desktop / 710ms en móvil) + destello en loop que lo recorre después (arranca a los 900ms, con margen de sobra). Técnica del destello: dos capas de fondo recortadas al texto (-webkit-background-clip:text) — una franja diagonal semitransparente que se desliza (solo background-position, sin reflow) sobre una capa sólida en currentColor (mismo color que ya pinta cada página vía `color`, así esta regla compartida no rompe el hero de insumos-y-servicios.html, que también usa .hero-reveal__title). El ciclo (tass-title-shine, 9500ms, infinite) = 4500ms de recorrido (0%→47.37% del keyframe) + ~5000ms de pausa en silencio con la franja ya aparcada fuera del texto (47.37%→100%, mismo valor todo el tramo, sin cambio visual); al reiniciar el ciclo el salto ocurre entre dos posiciones igualmente fuera de pantalla, así que es invisible. Entre recorridos el título se ve exactamente con su color sólido de siempre. */ .hero-reveal__title { background-image: linear-gradient( 115deg, transparent 0%, transparent 45%, rgba(246, 244, 241, 0.09) 47.5%, rgba(246, 244, 241, 0.4) 50%, rgba(246, 244, 241, 0.09) 52.5%, transparent 55%, transparent 100% ), linear-gradient(currentColor, currentColor); background-repeat: no-repeat, no-repeat; background-size: 300% 100%, 100% 100%; background-position: 140% 0, 0 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: tass-fade-up var(--duration-base) var(--ease-elegant) 160ms both, tass-title-shine 9500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 900ms infinite; } @keyframes tass-title-shine { 0% { background-position: 140% 0, 0 0; } 47.37% { background-position: -40% 0, 0 0; } 100% { background-position: -40% 0, 0 0; } } .hero-reveal__subtitle { animation: tass-fade-up var(--duration-base) var(--ease-elegant) both; animation-delay: 320ms; } .hero-reveal__cta { animation: tass-fade-up var(--duration-base) var(--ease-elegant) both; animation-delay: 460ms; } /* ---------- Accesibilidad: prefers-reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-up, .reveal-left, .reveal-right { transition: none; opacity: 1; transform: none; } .hero-reveal, .hero-reveal__title, .hero-reveal__subtitle, .hero-reveal__cta { animation: none; opacity: 1; transform: none; } .hero-reveal__title { background-image: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; } } /* ---------- Móvil: desplazamientos más cortos y sutiles, secciones más compactas ---------- */ @media (max-width: 700px) { :root { --reveal-distance: 14px; --duration-base: 550ms; --space-xl: 5.25rem; } }