/* Custom CSS específico de Suplementos GM. Tokens y utilidades base están en tailwind.css. */ html { scroll-behavior: smooth; } /* ─── Legal pages typography ──────────────────────────── Documento de texto largo, fácil de leer. */ .legal-prose { color: #2d3436; font-size: 15px; line-height: 1.65; } .legal-prose h2 { margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: #1a1d1f; } .legal-prose h2:first-child { margin-top: 0; } .legal-prose h3 { margin-top: 1.5rem; margin-bottom: 0.4rem; font-size: 1rem; font-weight: 700; color: #28b22e; } .legal-prose p { margin: 0.85rem 0; } .legal-prose ul, .legal-prose ol { margin: 0.85rem 0; padding-left: 1.5rem; } .legal-prose li { margin: 0.35rem 0; } .legal-prose strong { color: #1a1d1f; } .legal-prose a { color: #28b22e; text-decoration: underline; text-underline-offset: 2px; } .legal-prose a:hover { color: #1d8e23; } .legal-prose blockquote { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 3px solid #28b22e; background: #ecfdee; font-size: 0.93rem; border-radius: 0 0.5rem 0.5rem 0; } .legal-prose .legal-note { margin: 1.25rem 0; padding: 1rem; border: 1px solid #fde68a; background: #fffbeb; border-radius: 0.75rem; font-size: 0.9rem; color: #78350f; } /* ─── Brand logo sizing ───────────────────────────────── Tamaños explícitos en CSS para no depender de las variants responsive de Tailwind (sm: / lg:) que NO siempre están en el bundle compilado. Usamos `width: auto` con `max-height` para que el logo (cualquier ratio) nunca crezca más de lo querido en altura, y limitamos max-width para que un logo extremadamente horizontal no empuje la nav fuera del header. */ .brand-logo-nav { height: 40px; width: auto; max-width: 180px; object-fit: contain; display: block; } @media (min-width: 640px) { .brand-logo-nav { height: 44px; max-width: 220px; } } @media (min-width: 1024px) { .brand-logo-nav { height: 48px; max-width: 260px; } } .brand-logo-mobile-menu { height: 40px; width: auto; max-width: 160px; object-fit: contain; } .brand-logo-footer { height: 44px; width: auto; max-width: 200px; object-fit: contain; } .brand-logo-login { height: 56px; width: auto; max-width: 240px; object-fit: contain; } .brand-logo-admin { height: 40px; width: auto; max-width: 140px; object-fit: contain; } /* ─── Reglas defensivas para responsive en móvil ────── Previene los bugs más comunes que rompen el layout en pantallas chicas. Todo esto es seguro: solo aplica si el desarrollador olvidó algo. */ /* 1. Nada genera scroll horizontal por accidente. overflow-x: hidden tiene mejor soporte que clip en iOS Safari viejos. Solo en , no en , para preservar position: sticky en headers. */ body { overflow-x: hidden; min-width: 0; } /* 2. Imágenes y multimedia siempre responsive por default. */ img, video, iframe, svg { max-width: 100%; height: auto; } /* Excepción: los SVG decorativos del header/UI deben respetar sus tamaños */ header svg, button svg, a svg { height: revert; max-width: revert; } /* 3. Cualquier elemento marcado con .container o data-container es full-width con padding lateral seguro en móvil. */ [data-container], .container-page { width: 100%; max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { [data-container], .container-page { padding-left: 1.5rem; padding-right: 1.5rem; } } /* Aspect ratio fallback */ .aspect-square { aspect-ratio: 1 / 1; } /* Cart count badge oculto cuando 0 */ #cart-count.opacity-0 { opacity: 0; transform: scale(.5); transition: all .2s; } /* Cart button transition */ #cart-button { transition: background-color .2s, transform .18s ease-out; } /* Quitar marker en details */ details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } /* ─── Catálogo: layout responsive sin depender de Tailwind ─ Mobile (<1024px): flex column, todo apilado al 100% de ancho. Desktop (≥1024px): grid 260px + 1fr — sidebar izquierda, productos a la derecha. IMPORTANTE: definido en CSS custom porque Tailwind solo compila las clases que ya usaste en algún template. Si añades `lg:flex-row` nuevo, NO se genera (a menos que recompiles Tailwind). Aquí garantizamos que funcione sin recompilación. */ .catalog-layout { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; max-width: 72rem; margin-left: auto; margin-right: auto; padding: 1.5rem 1rem; } @media (min-width: 640px) { .catalog-layout { padding: 2.5rem 1.5rem; gap: 2.5rem; } } @media (min-width: 1024px) { .catalog-layout { display: grid; grid-template-columns: 260px 1fr; align-items: start; } } .catalog-sidebar { width: 100%; min-width: 0; } @media (min-width: 1024px) { .catalog-sidebar { position: sticky; top: 6rem; align-self: start; } } .catalog-main { width: 100%; min-width: 0; } /* ─── Carrito: layout responsive sin Tailwind ────────── Móvil: stack. Desktop: items izq (1fr) + resumen der (360px). `:not(.hidden)` para que la clase Tailwind `hidden` (display:none, usada antes de que JS detecte items en el carrito) tenga prioridad. */ .cart-layout:not(.hidden) { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; } @media (min-width: 1024px) { .cart-layout:not(.hidden) { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; } } .cart-main { min-width: 0; width: 100%; } .cart-aside { width: 100%; min-width: 0; } @media (min-width: 1024px) { .cart-aside { position: sticky; top: 6rem; } } /* ─── Filter sidebar panel ───────────────────────────── Móvil: oculto por defecto, visible cuando data-open="true". Desktop (lg+, >=1024px): siempre visible — el botón toggle se oculta. */ .filter-panel { display: none; } .filter-panel[data-open="true"] { display: block; } @media (min-width: 1024px) { .filter-panel { display: block !important; } } /* xs breakpoint helper para el logo brand text (no existe en tailwind por defecto) */ @media (min-width: 480px) { .xs\:inline { display: inline; } } /* ─── Navbar ─────────────────────────────────────────── */ .navlink { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 0.875rem; border-radius: 0.5rem; color: #2d3436; transition: color .15s, background-color .15s; } .navlink:hover { color: #28b22e; background-color: rgba(65, 210, 72, 0.08); } .navlink-active { color: #28b22e; background-color: #ecfdee; } .mobile-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.625rem; font-weight: 500; color: #2d3436; transition: background-color .15s; } .mobile-link:hover { background-color: #f5f6f7; } .mobile-link-active { background-color: #ecfdee; color: #1d8e23; font-weight: 600; } .mobile-link > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 2rem; font-size: 1.1rem; } /* ─── Dropdown panel animation ───────────────────────── */ [data-dropdown-panel] { opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; } [data-dropdown-panel][data-open="true"] { opacity: 1; transform: translateY(0); } /* ─── Mobile menu transitions ────────────────────────── */ [data-mobile-menu] [data-overlay] { opacity: 0; transition: opacity .25s ease-out; } [data-mobile-menu] [data-panel] { transition: transform .25s cubic-bezier(.16,1,.3,1); } /* ─── Anti-flash GSAP ────────────────────────────────── */ .js-anim [data-anim="fade-up"], .js-anim [data-anim="fade-in"], .js-anim [data-anim="scale-in"], .js-anim [data-anim-hero] { opacity: 0; will-change: transform, opacity; } .js-anim [data-anim="stagger"] > * { opacity: 0; will-change: transform, opacity; } /* ─── Header sticky scroll state ─────────────────────── */ [data-header] { transition: box-shadow .2s ease, border-color .2s ease; } [data-header][data-scrolled="true"] { box-shadow: 0 2px 12px rgba(0,0,0,0.06); } /* GPU compose hint para imágenes grandes */ [data-anim-hero] img, [data-anim="scale-in"] img { transform: translateZ(0); } /* ─── Product card ───────────────────────────────────── ESTRATEGIA RESPONSIVE EN 2 LAYOUTS DISTINTOS: 1) Móvil (<640px, 1 columna): Tarjeta HORIZONTAL — imagen pequeña fija a la izquierda (110×110px), info a la derecha (título, marca, precio, botón). Patrón "list view" como Mercado Libre/Amazon mobile. Garantiza imagen razonable. 2) sm+ (>=640px, 2/3/4 columnas): Tarjeta VERTICAL — imagen arriba (1:1), info abajo. Patrón clásico de catálogo en grid. min-width:0 sobre el card: clave para que en grids 2+ cols los items se puedan achicar bajo su contenido más ancho (precios largos). */ .product-card { min-width: 0; flex-direction: row; /* móvil: horizontal */ } @media (min-width: 640px) { .product-card { flex-direction: column; } } /* Marco de la imagen + fondo decorativo. */ .product-card-img-link { position: relative; flex-shrink: 0; background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #f5f6f7 60%, #eceeee 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; /* Móvil: ancho FIJO 120px a la izquierda */ width: 120px; aspect-ratio: 1 / 1; border-right: 1px solid #ececec; border-bottom: none; } @media (min-width: 640px) { .product-card-img-link { /* sm+: ocupa todo el ancho de la card, encima */ width: 100%; aspect-ratio: 1 / 1; border-right: none; border-bottom: 1px solid #ececec; } } .product-card-img-link::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 45% at 50% 50%, rgba(65,210,72,0.12) 0%, transparent 70%); pointer-events: none; z-index: 0; } .product-card-img { position: relative; z-index: 1; display: block; margin: 0 auto; /* La imagen escala dentro del marco sin estirarse, con padding visual. 85% / 85% deja un "aire" alrededor que respira el halo verde. */ max-width: 85%; max-height: 85%; width: auto; height: auto; object-fit: contain; transition: transform .5s ease; } .product-card-empty { position: relative; z-index: 1; font-size: 2.2rem; color: rgba(45, 52, 54, 0.25); line-height: 1; } @media (min-width: 640px) { .product-card-empty { font-size: 3rem; } } /* ─── Producto agotado ────────────────────────────────── Estilo visual claro para que el cliente vea de un vistazo qué está sin stock: imagen desaturada + overlay translúcido + sello rojo "Agotado" en diagonal sobre la foto. */ .product-card.is-out-of-stock { opacity: 0.85; } .product-card.is-out-of-stock .product-card-img { filter: grayscale(0.85) brightness(1.05); } .product-card.is-out-of-stock .product-card-img-link::after { /* veladura blanca semitransparente encima del producto */ content: ""; position: absolute; inset: 0; background: rgba(245, 246, 247, 0.55); pointer-events: none; z-index: 2; } /* Sello "AGOTADO" — banner rojo en diagonal sobre la foto */ .product-card-stamp { position: absolute; top: 12px; left: -28px; z-index: 3; display: inline-block; padding: 4px 36px; background: #dc2626; color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-18deg); box-shadow: 0 4px 10px rgba(220, 38, 38, 0.35); pointer-events: none; white-space: nowrap; } @media (min-width: 640px) { .product-card-stamp { top: 16px; font-size: 11px; padding: 5px 42px; } } /* ─── Product detail image (show.phtml) ───────────── Mismo principio que las cards pero a mayor tamaño: contenedor cuadrado con bg suave y producto centrado en object-contain con padding. La imagen NUNCA escala más allá de su tamaño nativo (con cld_image() pedimos c_limit a Cloudinary). */ .product-detail-img-frame { background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #f5f6f7 60%, #eceeee 100%); } .product-detail-img-frame::before { content: ""; position: absolute; inset: 18% 18% auto 18%; height: 50%; background: radial-gradient(60% 60% at 50% 50%, rgba(65,210,72,0.10) 0%, transparent 70%); pointer-events: none; z-index: 0; } .product-detail-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 16px; display: block; } @media (min-width: 640px) { .product-detail-img { padding: 28px; } } @media (min-width: 1024px) { .product-detail-img { padding: 40px; } } /* ─── Animaciones decorativas ────────────────────────── */ /* Flecha que "galopa" en CTAs (un pequeño bamboleo lateral) */ @keyframes gallop { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } .animate-gallop { display: inline-block; animation: gallop 1.6s ease-in-out infinite; } /* Rebote vertical del caballo en la banda decorativa */ @keyframes hoof-bounce { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } } .animate-hoof-bounce { animation: hoof-bounce 0.6s ease-in-out infinite; } /* ════════════════════════════════════════════════════════════ HERO con foto ecuestre full-bleed + overlay degradado ════════════════════════════════════════════════════════════ */ .hero-section { position: relative; isolation: isolate; overflow: hidden; background: #0f1213; } /* Foto cubre TODO el hero. Solo desplazo background-position para mover horizontalmente qué parte de la imagen se ve. */ .hero-photo { position: absolute; inset: 0; z-index: 0; background-image: url('/assets/hero-equestrian.jpg'); background-size: cover; background-position: center; } @media (min-width: 768px) { .hero-photo { /* 58% = corremos la foto a la izquierda lo justo para que el bolso con el logo GM entre completo (sin recorte por el borde derecho). */ background-position: 58% center; } } /* Overlay MÍNIMO — solo despinta cabecera y empalma galloping band abajo. La zona donde vive el texto queda LIMPIA, sin negro encima. Legibilidad del texto = text-shadow potente (más abajo). */ .hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, /* leve oscurecido bajo el header */ rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 70%, rgba(42, 20, 16, 0.85) 100% /* fade hacia la banda galopante */ ); } @media (min-width: 768px) { .hero-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 78%, rgba(42, 20, 16, 0.70) 100% ); } } /* Contenido (texto + botones) */ .hero-content { padding-top: 5rem; padding-bottom: 4rem; min-height: 32rem; /* asegura altura mínima para que la foto se vea bien */ display: flex; align-items: center; } @media (min-width: 640px) { .hero-content { padding-top: 6rem; padding-bottom: 5rem; min-height: 36rem; } } @media (min-width: 768px) { .hero-content { padding-top: 7rem; padding-bottom: 7rem; min-height: 38rem; } } @media (min-width: 1024px) { .hero-content { padding-top: 9rem; padding-bottom: 9rem; min-height: 42rem; } } /* Eyebrow con punto verde animado. Pill con backdrop-blur fuerte para que se lea sobre cualquier zona de la foto. */ .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #7ae882; padding: 0.45rem 0.95rem; background: rgba(10, 18, 12, 0.55); border: 1px solid rgba(65, 210, 72, 0.35); border-radius: 9999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); } .hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #41d248; box-shadow: 0 0 10px rgba(65, 210, 72, 0.9); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.6; } } /* Título con dos partes: marca (gradient text) + tagline (white sólido) */ .hero-title { margin-top: 1rem; font-weight: 900; line-height: 1.02; letter-spacing: -0.025em; } /* Marca: gradient text. Como background-clip:text NO admite text-shadow directamente sobre las letras gradientes, envolvemos el efecto con filter: drop-shadow() (que sí respeta el alpha del texto recortado). */ .hero-title-brand { display: block; font-size: clamp(2rem, 8vw, 4.2rem); background: linear-gradient(135deg, #41d248 0%, #c6ffdb 50%, #41d248 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 32px rgba(65, 210, 72, 0.35)); animation: gradient-shift 6s ease infinite; } .hero-title-tag { display: block; margin-top: 0.5rem; font-size: clamp(2rem, 8vw, 4rem); color: #ffffff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 32px rgba(0, 0, 0, 0.5); } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (min-width: 768px) { .hero-title-brand { font-size: clamp(3rem, 5.5vw, 4.5rem); } .hero-title-tag { font-size: clamp(2.6rem, 5vw, 4rem); } } .hero-desc { margin-top: 1.5rem; max-width: 32rem; font-size: 0.95rem; line-height: 1.6; color: #f1f5f4; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 12px rgba(0, 0, 0, 0.7); } @media (min-width: 640px) { .hero-desc { font-size: 1.05rem; } } /* CTAs */ .hero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .hero-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: 0.625rem; font-weight: 700; font-size: 0.95rem; color: #052f10; background: linear-gradient(135deg, #41d248, #28b22e); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 12px 30px -10px rgba(65, 210, 72, 0.7), 0 4px 12px rgba(65, 210, 72, 0.3); transition: transform .2s ease, box-shadow .2s ease; } .hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 16px 40px -10px rgba(65, 210, 72, 0.9), 0 6px 18px rgba(65, 210, 72, 0.45); } /* Liquid glass — efecto Apple/visionOS: - Triple gradient para simular refracción - backdrop-filter blur + saturate para que el color de la foto "pase" por el cristal - Inset highlights arriba/abajo que dan grosor al cristal - Sheen sutil con ::before */ .hero-btn-ghost { position: relative; display: inline-flex; align-items: center; padding: 0.85rem 1.5rem; border-radius: 9999px; font-weight: 600; font-size: 0.95rem; color: #ffffff; background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.14) 100% ); border: 1px solid rgba(255, 255, 255, 0.40); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 30px -10px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.18); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } /* Sheen brillante en la mitad superior — efecto cristal pulido */ .hero-btn-ghost::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, transparent 70% ); border-radius: inherit; } /* Reflejo lateral sutil que se mueve en hover */ .hero-btn-ghost::after { content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100% ); transform: skewX(-20deg); transition: left .65s ease; pointer-events: none; } .hero-btn-ghost:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 14px 40px -10px rgba(0, 0, 0, 0.65), 0 6px 14px rgba(0, 0, 0, 0.22); } .hero-btn-ghost:hover::after { left: 130%; } .hero-btn-ghost > * { position: relative; z-index: 1; } /* Strip de stats */ .hero-stats { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 1rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; backdrop-filter: blur(12px); max-width: 36rem; } @media (min-width: 640px) { .hero-stats { gap: 1rem; padding: 1.25rem 1.5rem; } } .hero-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; } .hero-stat-num { font-size: 1.4rem; font-weight: 900; color: #ffffff; line-height: 1; } .hero-stat-num span { color: #41d248; } @media (min-width: 640px) { .hero-stat-num { font-size: 1.7rem; } } .hero-stat-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.65); line-height: 1.3; } @media (min-width: 640px) { .hero-stat-label { font-size: 0.72rem; } } /* En el hero ahora desactivamos el .js-anim opacity:0 para hero-eyebrow-dot (que tiene su propia animación de pulse). El resto sí usa data-anim-hero. */ /* ─── Banda del caballo galopando (entre secciones) ───── */ /* * Conecta el hero (cálido, fotografía con tonos tierra/verde/dorado) con * el Body Builder (rojo-oscuro). Hace de transición usando un gradiente * que arranca en tonos cálidos oscuros tipo "tierra" y termina en * #1a0405 para empalmar exacto con el siguiente bloque. */ .galloping-band { position: relative; height: 7rem; overflow: hidden; border: none; background: linear-gradient(180deg, #2a1410 0%, /* dark warm brown — cierre del hero */ #20100c 35%, #1a0a07 65%, #1a0405 100% /* match exacto con el Body Builder */ ); --horse-h: 5.5rem; } @media (min-width: 768px) { .galloping-band { height: 10rem; --horse-h: 8rem; } } /* Halo verde sutil + spotlight cálido al centro (donde corre el caballo) */ .galloping-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 110% at 50% 50%, rgba(65, 210, 72, 0.14) 0%, rgba(65, 210, 72, 0.05) 45%, transparent 80% ), radial-gradient(80% 60% at 50% 50%, rgba(220, 130, 50, 0.08) 0%, transparent 70% ); pointer-events: none; } /* Pista cálida — toques dorados sutiles */ .galloping-track { position: absolute; inset-inline: 15%; bottom: 1.5rem; height: 1px; background: linear-gradient(to right, transparent, rgba(220, 170, 80, 0.25), rgba(122, 232, 130, 0.30), rgba(220, 170, 80, 0.25), transparent ); filter: blur(1px); } /* Polvo dorado-verdoso */ .galloping-dust span { position: absolute; width: 3px; height: 3px; border-radius: 9999px; background: rgba(180, 210, 130, 0.35); filter: blur(1.5px); } /* Contenedor que se mueve con scroll (left% se setea desde JS) */ .galloping-horse { position: absolute; top: 50%; transform: translateY(-50%); transition: left 100ms linear; will-change: left; } .galloping-horse img { height: 7rem; width: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18)); } @media (min-width: 768px) { .galloping-horse img { height: 10rem; } } /* Estela difusa detrás del caballo */ .galloping-trail { position: absolute; top: 50%; height: 8rem; transform: translateY(-50%); background: linear-gradient(to right, transparent, rgba(122, 232, 130, 0.3), transparent); filter: blur(20px); transition: left 100ms linear; pointer-events: none; }