/* Tena 1.1: tactile backgrounds and service illustrations. */
body {
  background-color: var(--ink);
  background-image: url('grain.svg'), url('contours.svg'), linear-gradient(120deg, #111111, #151c18 44%, #111111 84%);
  background-size: 180px 180px, 1440px 1200px, 100% 1800px;
}
.commercial-hero { isolation: isolate; }
.commercial-hero::before {
  content: ''; position: absolute; z-index: -1; inset: 0 -56px; pointer-events: none;
  background-image: linear-gradient(#73beb00b 1px, transparent 1px), linear-gradient(90deg, #73beb00b 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse at 70% 46%, #000 10%, transparent 77%);
}
.site-header { background-image: url('grain.svg'); }
.marquee {
  background-image: url('grain.svg'), repeating-linear-gradient(135deg, #11111104 0 1px, transparent 1px 7px);
}
.service-panel, .more-services, .floating-label { background-image: url('grain.svg'); }
.service-scene::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('grain.svg'), radial-gradient(#11111117 .8px, transparent .8px);
  background-size: 180px 180px, 12px 12px;
}
.scene-branding, .scene-digital {
  background-image: radial-gradient(ellipse at 0% 0%, #b2dbcb55, transparent 65%), linear-gradient(130deg, #73beb0, #69ad9c);
}
.scene-redes, .scene-diseno, .scene-web {
  background-image: radial-gradient(ellipse at 25% 15%, #f4f2ecb3, transparent 78%), linear-gradient(150deg, #dce4dd, #cbd7cd);
}
.scene-audiovisual {
  background-color: #192e25;
  background-image: radial-gradient(ellipse at 50% 55%, #315744, transparent 75%);
}
.scene-audiovisual::before {
  background-image: url('grain.svg'), linear-gradient(#73beb00b 1px, transparent 1px), linear-gradient(90deg, #73beb00b 1px, transparent 1px);
  background-size: 180px 180px, 38px 38px, 38px 38px;
}
.scene-topline { font-size: 9px; }
.scene-note { font-size: 8px; }
.service-illustration {
  position: absolute; left: 4%; top: 12%; width: 92%; height: 77%; overflow: visible;
}
.service-illustration text { font-family: Montserrat, Arial, sans-serif; }
.service-illustration .identity-board,
.service-illustration .identity-card,
.service-illustration .content-calendar,
.service-illustration .social-campaign,
.service-illustration .personal-business-card,
.service-illustration .generated-proposal { transition: translate .7s var(--ease); }
.service-panel:hover .identity-board,
.service-panel:hover .content-calendar,
.service-panel:hover .personal-business-card { translate: 0 -6px; }
.service-panel:hover .identity-card,
.service-panel:hover .social-campaign,
.service-panel:hover .generated-proposal { translate: 0 4px; }
.brand-construction { stroke-dasharray: 600; animation: identity-draw 6s ease-in-out infinite; }
.studio-light-beams { animation: lights-breathe 7s ease-in-out infinite; }
.record-dot { animation: record-blink 2.4s ease-in-out infinite; }
.clapper-top { transform-origin: 430px 304px; animation: slate-action 12s ease-in-out infinite; }
.timeline-wave { transform-box: fill-box; transform-origin: center; animation: wave 2.2s ease-in-out infinite; animation-delay: var(--delay); }
.timeline-playhead { animation: editing-playhead 10s linear infinite; }
.proposal-flow { animation: workflow-dash 4s linear infinite; }
.service-panel[hidden] .service-illustration * { animation-play-state: paused; }
.solutions-section {
  background-image: url('grain.svg'), repeating-linear-gradient(0deg, #11111103 0 1px, transparent 1px 5px);
}
.solution-card:nth-child(2) { background-image: url('grain.svg'); }
.studio-mark {
  background-color: var(--ink);
  color: var(--mint);
  background-image: url('grain.svg'), radial-gradient(#73beb021 .7px, transparent .7px), radial-gradient(ellipse at 60% 45%, #263c31, #171b17 80%);
  background-size: 180px 180px, 9px 9px, auto;
}
.studio-mark > img { opacity: 1; }
.studio-mark > span:not(.studio-coordinate), .studio-mark > .studio-coordinate { color: var(--mint); }
.studio-mark > .studio-frame { border-color: #73beb040; }
.contact-section {
  background-image: url('grain.svg'), radial-gradient(#11111118 .65px, transparent .65px), radial-gradient(ellipse at 86% 20%, #b3d6c9, transparent 76%);
  background-size: 180px 180px, 8px 8px, auto;
}
.site-footer { background-image: url('grain.svg'); }
@keyframes identity-draw { 0%, 100% { stroke-dashoffset: 0; opacity: .7; } 45% { stroke-dashoffset: 120; opacity: .3; } }
@keyframes lights-breathe { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes record-blink { 0%, 45%, 100% { opacity: 1; } 60%, 80% { opacity: .35; } }
@keyframes slate-action { 0%, 8%, 100% { transform: rotate(0); } 3% { transform: rotate(-12deg); } }
@keyframes editing-playhead { from { transform: translateX(-215px); } to { transform: translateX(210px); } }
@keyframes workflow-dash { to { stroke-dashoffset: -44; } }
@media(max-width:850px) and (min-width:651px) {
  .service-illustration { left: 1%; width: 98%; top: 17%; height: 68%; }
}
@media(max-width:650px) {
  .commercial-hero::before { inset-inline: -20px; background-size: 56px 56px; }
  .service-illustration { top: 14%; left: 3%; width: 94%; height: 76%; }
  .scene-topline { font-size: 8px; }
  .scene-note { font-size: 7px; }
}
@media(prefers-reduced-motion:reduce) {
  .service-illustration, .service-illustration * { animation: none !important; transition: none !important; }
}