/* September 2026 refinements */
#servicios .service .service-top span:first-child { display: inline; width: auto; height: auto; border-radius: 0; background: none; color: inherit; font-size: .875rem; transform: none; }
#servicios .service-cta { display: inline-flex; width: fit-content; min-height: 48px; justify-content: center; padding: 13px 22px; border: 0; border-radius: 6px; background: #101010; color: #e1ff00; transition: background-color .2s, color .2s; }
#servicios .service-web .service-cta { background: #e1ff00; color: #101010; }
#servicios .service-cta:hover { background: #303030; color: #fff; }
#servicios .service-cta span { display: none; }
#agencia .about-copy h2 span { color: #e1ff00; background: #101010; padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.testimonials h2 { max-width: 850px; }
.testimonials-note { color: #aaa; margin: 20px 0 38px; }
.testimonials .steps article { display: flex; flex-direction: column; }
.testimonials .testimonial-label { font-size: .65rem; letter-spacing: .1em; }
.testimonials blockquote { margin: 0 0 24px; color: #ddd; font-size: 1rem; line-height: 1.7; }
.testimonials blockquote::before { content: '“'; }
.testimonials blockquote::after { content: '”'; }
.testimonials .testimonial-by { margin-top: auto; font-size: .8125rem; }
.testimonials .steps article:hover blockquote { color: #252525; }
.site-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: start; gap: 48px; padding: 64px 6% 34px; background: #101010; color: #e1ff00; }
.site-footer .footer-brand img { display: block; width: 117px; height: auto; }
.site-footer p { font-size: .875rem; color: #e1ff00; }
.site-footer h2 { font-size: 1.125rem; letter-spacing: 0; margin: 0 0 24px; }
.footer-contact, .footer-social { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-top: 16px; }
.site-footer a { overflow-wrap: anywhere; }
.footer-contact a, .footer-social a { padding: 6px 0; text-decoration: underline; text-underline-offset: 4px; }
.site-footer a:hover { color: #fff; }
.social-pending { color: #aaa; padding: 6px 0; font-size: .875rem; }
.site-footer .footer-copyright { grid-column: 1 / -1; border-top: 1px solid #414722; padding: 24px 70px 0 0; margin: 0; font-size: .75rem; }
.whatsapp-float { position: fixed; z-index: 90; bottom: max(24px, env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right)); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #e1ff00; color: #101010; box-shadow: 0 5px 20px #0004; border: 1px solid #101010; transition: transform .2s; }
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: translateY(-3px); }
.whatsapp-float:focus-visible { outline: 3px solid #101010; outline-offset: 4px; box-shadow: 0 0 0 7px #e1ff00; }
@media (max-width: 900px) { .site-footer { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .site-footer { grid-template-columns: 1fr; gap: 24px; } .site-footer h2 { margin-bottom: 10px; } .whatsapp-float { width: 52px; height: 52px; bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-float, #servicios .service-cta { transition: none; } }


/* Refinements: section labels, brand button, testimonials and footer. */
#servicios .service-brand .service-cta:hover,
#servicios .service-brand .service-cta:focus-visible { background: #fff; color: #101010; }
#portafolio .eyebrow, .testimonials > .eyebrow {
  font-size: 1.125rem; letter-spacing: 1px; text-transform: none;
}
.testimonials > .eyebrow, #testimonials-title span { color: #e1ff00; }
.testimonials .steps { margin-top: 38px; }
.site-footer .footer-contact a { color: #fff; }
@media (max-width: 760px) {
  #portafolio .eyebrow, .testimonials > .eyebrow { font-size: 1rem; }
}

.hero-backdrop video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-immersive .scene-pause:not([hidden]) { display: block !important; }
@media (max-width: 760px) { .hero-backdrop video { object-position: 60% center; } }


/* Compact hero playback control. */
.hero-immersive .scene-pause:not([hidden]) { display:grid !important; place-items:center; bottom:65px; width:46px; height:46px; padding:0; border-radius:50%; }
.scene-pause svg { display:block; }
.scene-pause:hover { background:#660ed3; border-color:#660ed3; }
.scene-pause:focus-visible { outline:2px solid #e1ff00; outline-offset:4px; }
