/* ========================================================================== TASS — insumos-servicios-shared.css Reglas genéricas compartidas por insumos.html y servicios.html: profundidad del CTA final y líneas de transición entre secciones. Ninguna de estas reglas depende del contenido de una página en particular (Insumos o Servicios), por eso viven en un solo archivo en vez de duplicarse en insumos.css y servicios.css. Ninguna de las dos páginas usa ya hero fotográfico (ambas empiezan directamente con su encabezado editorial); la clase .page-photo-hero que vivía aquí se retiró por quedar sin uso. La imagen assets/img/hero/tass-insumos-servicios-hero(.jpg|-900w.jpg) NO se borró del proyecto — sigue intacta y en uso por products-services.css, el CSS de la página antigua insumos-y-servicios.html. Selector compartido: en ambas páginas. ========================================================================== */ /* ---------- CTA: profundidad sutil (sin tocar layout.css) ---------- */ .page-services .cta-section { position: relative; overflow: hidden; background-image: radial-gradient(circle at 12% 15%, rgba(199, 165, 124, 0.14), transparent 55%), linear-gradient(180deg, rgba(32, 28, 25, 0.18) 0%, rgba(32, 28, 25, 0) 35%, rgba(32, 28, 25, 0.22) 100%); } /* ---------- Transición suave de .section--alt (alternativa page-scoped, sin tocar base.css) ---------- */ .page-services .section--alt { position: relative; background-image: linear-gradient(to bottom, var(--color-paper), transparent 48px), linear-gradient(to top, var(--color-paper), transparent 48px); background-repeat: no-repeat; background-position: top, bottom; background-size: 100% 48px, 100% 48px; } /* ---------- Línea central difuminada entre secciones (mismo efecto que Sustrato Hidropónico) ---------- */ .page-services main .section + .section { position: relative; } .page-services main .section + .section::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleX(0.5); width: min(60%, 480px); height: 1px; background: linear-gradient(to right, transparent, var(--color-sand), transparent); opacity: 0; transition: opacity var(--duration-slow) var(--ease-elegant), transform var(--duration-slow) var(--ease-elegant); } .page-services main .section + .section.is-visible::before { opacity: 1; transform: translateX(-50%) scaleX(1); } @media (prefers-reduced-motion: reduce) { .page-services main .section + .section::before { transition: none; opacity: 1; transform: translateX(-50%); } }