:root{--navy:#082b49;--ice:#e5f3f8;--line:#819baa}.shell{width:min(1400px,calc(100% - 64px));margin:auto}.topbar{height:84px;background:#faf9f6;border:0;box-shadow:none}.navrow{height:84px}.logo{display:flex;flex-direction:column}.logo strong{font:36px/.9 Georgia,serif;letter-spacing:-.04em}.logo strong span{font-size:21px;margin-left:3px;color:#447796}.logo small{font:700 9px Arial,sans-serif;letter-spacing:.35em;margin-top:9px}.nav-links{gap:42px;font-size:13px}.nav-links a{font-weight:400;color:var(--navy)}.pill,.primary{background:var(--navy);color:#fff;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.18em}.pill{padding:15px 28px}.hero{background:#faf9f6}.hero-grid{display:grid;grid-template-columns:47% 53%;min-height:535px}.hero-copy{padding:60px 52px 40px 0}.eyebrow,.section-head,.brand-head{font-size:10px;font-weight:700;letter-spacing:.28em}.hero h1{font:64px/.92 Georgia,serif;letter-spacing:-.045em;margin:22px 0 15px}.lead{font:18px/1.35 Georgia,serif;margin:0 0 18px}.primary{display:inline-block;padding:15px 38px}.benefits{display:flex;gap:30px;margin-top:38px}.benefits span{display:flex;align-items:center;gap:10px;font-size:27px}.benefits small{font-size:9px;line-height:1.3;letter-spacing:.18em}.hero-photo{position:relative;overflow:hidden}.hero-photo img{object-position:center}.hero-photo em{position:absolute;top:34px;left:40%;font:italic 27px/1 Georgia,serif;transform:rotate(-8deg);text-align:center}.services{background:var(--ice);padding:25px 0 30px}.section-head,.brand-head{display:flex;align-items:center;gap:18px;margin-bottom:20px}.section-head i,.brand-head i{width:44px;border-top:1px solid var(--navy)}.section-head small{margin-left:auto;font-size:9px;letter-spacing:.25em}.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.service{background:#fff;display:grid;grid-template-rows:158px 1fr;min-width:0}.service>img{height:158px}.service>div{display:flex;flex-direction:column;padding:15px 17px;min-height:245px}.service b,.service strong{font-size:10px;letter-spacing:.18em}.service h2{font:19px/1.06 Georgia,serif;margin:9px 0 13px;min-height:43px}.service h2 small{font:700 10px Arial,sans-serif}.service p{font-size:12px;line-height:1.35;margin:0}.service strong{margin-top:auto}.process{display:grid;grid-template-columns:43% 57%;background:#faf9f6}.process-photo{height:310px;position:relative;overflow:hidden}.process-photo img{object-position:center}.process-photo em{position:absolute;left:33%;top:33px;font:italic 31px/1 Georgia,serif;transform:rotate(-8deg)}.process-photo p{position:absolute;right:8%;bottom:28px;width:47%;font-size:12px;line-height:1.4}.process-steps{padding:25px 5%}.process-steps ol{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:10px 0 0;list-style:none}.process-steps li{display:flex;flex-direction:column;text-align:center;align-items:center;position:relative}.process-steps li:not(:last-child)::after{content:'›';position:absolute;right:-18px;top:22px;font-size:28px}.process-steps li>b{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--navy);border-radius:50%;font:17px Georgia,serif}.process-steps li>strong{font-size:9px;letter-spacing:.15em;margin:13px 0 8px}.process-steps li>small{font-size:9px;line-height:1.35}.projects{background:#fff;padding:25px 0 22px}.project-head{margin-bottom:12px}.project-head small{margin-left:auto}.project-head>a{background:var(--navy);color:#fff;border-radius:999px;padding:12px 23px;font-size:9px;letter-spacing:.15em}.project-grid{display:grid;grid-template-columns:repeat(5,1fr) 1.45fr;gap:7px}.project-grid article{display:flex;flex-direction:column;background:#faf9f6}.project-grid article img{height:128px}.project-grid article b{font-size:11px;margin:10px 11px 0}.project-grid article small{font-size:9px;margin:2px 11px 10px;color:#60798a}.project-grid aside{background:var(--ice);padding:21px 28px}.project-grid aside h2{font:27px/1 Georgia,serif;margin:0}.project-grid aside i{display:block;width:38px;border-top:1px solid var(--navy);margin:14px 0}.project-grid aside p{font-size:11px;line-height:1.4}.project-grid aside a{display:inline-block;background:var(--navy);color:#fff;border-radius:7px;padding:12px 14px;font-size:8px;font-weight:700;letter-spacing:.12em}.brands{background:#faf9f6;padding:19px 0 24px}.brand-head{margin-bottom:22px}.brand-head small{margin-left:auto;text-align:right;font-size:8px;letter-spacing:.2em}.brand-row{display:flex;align-items:center;justify-content:space-between;overflow:hidden}.brand-row b{font:600 16px Arial,sans-serif;white-space:nowrap;padding:0 20px;border-right:1px solid #9db0bb}.brand-row b:first-child{padding-left:0}.brand-row b:last-child{border:0;padding-right:0}footer{background:linear-gradient(#062b4bdc,#062b4bf0),url('/assets/ref-footer.png') center/cover;color:#fff;padding:32px 0 21px}.footer-grid{display:grid;grid-template-columns:1.35fr 1fr .75fr 1.15fr;gap:42px;align-items:center}.footer-brand{height:105px;display:flex;flex-direction:column;justify-content:space-between}.footer-brand>.logo strong{font-size:34px}.footer-brand>.logo small{font-size:8px}.footer-brand>small{font-size:7px}.footer-grid>p{font:20px/1.08 Georgia,serif;border-left:1px solid #ffffff88;padding-left:40px}.values{font-size:9px;line-height:1.45;letter-spacing:.26em;border-left:1px solid #ffffff88;padding-left:40px}.footer-actions{height:102px;display:flex;flex-direction:column;justify-content:space-between}.footer-actions>a{border:1px solid #fff;border-radius:999px;text-align:center;padding:14px;font-size:9px;font-weight:700;letter-spacing:.17em}.footer-actions nav{display:flex;justify-content:space-between;font-size:8px}.footer-actions nav a{color:#fff}
@media(max-width:900px){.shell{width:calc(100% - 34px)}.topbar{height:72px}.navrow{height:72px}.logo strong{font-size:27px}.nav-links{display:none;top:72px;background:#faf9f6}.pill{display:none}.menu{display:block}.hero-grid{grid-template-columns:1fr}.hero-copy{padding:42px 0}.hero-photo{min-height:430px}.service-grid{grid-template-columns:repeat(2,1fr)}.process{grid-template-columns:1fr}.process-photo{height:360px}.project-grid{grid-template-columns:repeat(2,1fr)}.project-grid aside{grid-column:span 2}.brand-row{overflow-x:auto;justify-content:flex-start}.brand-row b{flex:none}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.shell{width:calc(100% - 24px)}.logo strong{font-size:23px}.logo small{font-size:7px}.hero-copy{padding:32px 0}.hero h1{font-size:48px}.lead{font-size:16px}.benefits{gap:14px;justify-content:space-between}.benefits span{font-size:20px}.benefits small{font-size:7px}.hero-photo{min-height:330px}.hero-photo em{left:auto;right:20px}.section-head small{display:none}.service-grid{grid-template-columns:1fr}.service{grid-template-rows:220px 1fr}.service>img{height:220px}.service>div{min-height:230px}.process-photo{height:390px}.process-photo p{width:58%;right:5%}.process-steps{padding:28px 20px}.process-steps ol{grid-template-columns:1fr 1fr;gap:30px}.process-steps li:nth-child(2)::after{display:none}.project-head>a{margin-left:auto}.project-head small{display:none}.project-grid{grid-template-columns:1fr}.project-grid article img{height:230px}.project-grid aside{grid-column:auto}.brand-head small{display:none}.footer-grid{grid-template-columns:1fr}.footer-grid>p,.values{border:0;padding-left:0}.footer-brand{height:120px}.footer-actions{gap:24px}}
.process-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,transparent 35%,rgba(250,249,246,.72) 66%,rgba(250,249,246,.94) 100%)}.process-photo em,.process-photo p{z-index:1}.process-photo em{text-shadow:0 1px 7px #fff}.service>img,.project-grid article img{image-rendering:auto}
.labs-visual{position:relative;height:158px;margin:0;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 78% 18%,#197fb4 0,transparent 29%),linear-gradient(135deg,#031f38 0%,#073f66 58%,#0b5d89 100%);perspective:700px}
.labs-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 24%,rgba(166,224,251,.13) 48%,transparent 68%);transform:translateX(-120%);animation:labsSweep 6s ease-in-out infinite}
.labs-visual::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(159,218,245,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(159,218,245,.06) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
.labs-browser{position:absolute;z-index:3;left:8%;top:14%;width:70%;height:68%;overflow:hidden;border:1px solid rgba(196,234,251,.68);border-radius:5px;background:#eefaff;box-shadow:0 15px 30px rgba(0,15,29,.34);transform:rotateY(5deg) rotateX(2deg);animation:browserFloat 5.2s ease-in-out infinite}
.browser-bar{height:18%;display:flex;align-items:center;gap:3px;padding:0 5%;background:#dff3fb;color:#315d73}.browser-bar i{width:3px;height:3px;border-radius:50%;background:#5aa8ca}.browser-bar small{margin-left:auto;font:500 4px Arial,sans-serif;letter-spacing:.08em}
.browser-page{position:relative;height:82%;overflow:hidden;padding:8% 8%;color:#fff;background:linear-gradient(120deg,#063452,#0873a3)}
.page-label{display:block;font:700 4px Arial,sans-serif;letter-spacing:.2em;color:#8edcf7}.browser-page strong{display:block;margin-top:4%;font:10px/.9 Georgia,serif;letter-spacing:-.02em}.browser-page strong em{font-weight:400;color:#9de5ff}.page-button{position:absolute;left:8%;bottom:10%;padding:3px 6px;border:1px solid rgba(197,238,253,.7);border-radius:20px;font:700 4px Arial,sans-serif;letter-spacing:.12em}.page-wave{position:absolute;right:-12%;bottom:-38%;width:67%;aspect-ratio:1;border:1px solid rgba(130,218,252,.5);border-radius:50%;box-shadow:0 0 0 9px rgba(92,192,232,.10),0 0 0 18px rgba(92,192,232,.07);animation:wavePulse 3.4s ease-in-out infinite}
.labs-phone{position:absolute;z-index:5;right:8%;bottom:10%;width:21%;height:58%;overflow:hidden;border:2px solid #b7e7f8;border-radius:9px;background:linear-gradient(160deg,#0a6b9b,#042c4a);box-shadow:0 12px 23px rgba(0,13,26,.42);transform:rotateY(-8deg) rotateZ(3deg);animation:phoneFloat 4.4s ease-in-out infinite}
.phone-island{position:absolute;left:34%;top:4%;width:32%;height:5%;border-radius:10px;background:#bceaf8}.phone-mark{position:absolute;left:50%;top:31%;transform:translateX(-50%);font:italic 16px Georgia,serif;color:#ddf7ff;text-shadow:0 0 12px #70d5ff}.labs-phone i{position:absolute;left:18%;height:3%;border-radius:8px;background:rgba(201,238,250,.6)}.labs-phone i:nth-of-type(1){width:64%;bottom:25%}.labs-phone i:nth-of-type(2){width:48%;bottom:17%}.labs-phone i:nth-of-type(3){width:33%;bottom:9%}
.labs-cursor{position:absolute;z-index:7;left:45%;top:54%;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#fff;color:#07517b;font:700 8px Arial,sans-serif;box-shadow:0 0 0 5px rgba(125,215,250,.16),0 4px 9px rgba(0,28,46,.35);animation:cursorTour 5.2s cubic-bezier(.45,0,.25,1) infinite}
.labs-caption{position:absolute;z-index:6;left:8%;bottom:4%;font:700 4px Arial,sans-serif;letter-spacing:.2em;color:#bceaff}
.labs-orbit{position:absolute;z-index:1;border:1px solid rgba(141,218,250,.22);border-radius:50%;animation:orbitBreathe 4s ease-in-out infinite}.orbit-a{right:-9%;top:-33%;width:62%;aspect-ratio:1}.orbit-b{right:19%;bottom:-50%;width:49%;aspect-ratio:1;animation-delay:-1.3s}.labs-spark{position:absolute;z-index:2;width:3px;height:3px;border-radius:50%;background:#c8f3ff;box-shadow:0 0 8px #7bdcff;animation:sparkDrift 3.8s ease-in-out infinite}.spark-a{left:8%;top:18%}.spark-b{right:6%;top:29%;animation-delay:-1.7s}
@keyframes labsSweep{0%,58%,100%{transform:translateX(-120%)}78%{transform:translateX(120%)}}
@keyframes browserFloat{0%,100%{transform:rotateY(5deg) rotateX(2deg) translateY(0)}50%{transform:rotateY(-1deg) rotateX(0) translateY(-4px)}}
@keyframes phoneFloat{0%,100%{transform:rotateY(-8deg) rotateZ(3deg) translateY(0)}50%{transform:rotateY(4deg) rotateZ(-1deg) translateY(-6px)}}
@keyframes cursorTour{0%,17%{left:45%;top:54%}42%,57%{left:28%;top:68%}76%,90%{left:74%;top:33%}100%{left:45%;top:54%}}
@keyframes wavePulse{50%{transform:scale(1.09);opacity:.65}}
@keyframes orbitBreathe{50%{transform:scale(1.08);border-color:rgba(160,229,255,.48)}}
@keyframes sparkDrift{0%,100%{transform:translate(0,0);opacity:.25}50%{transform:translate(9px,-12px);opacity:1}}
footer{background:linear-gradient(#062b4be8,#062b4bf3),url('/assets/ref-process.png') center 72%/cover}
.hero-photo em{left:22%;text-align:left}
@media(max-width:560px){.hero-photo em{left:18px;right:auto;top:24px;font-size:23px;text-align:left}}
.hero-photo em{left:50%;right:auto;top:11%;width:72%;transform:translateX(-50%) rotate(-8deg);text-align:center}
@media(max-width:560px){.hero-photo em{left:50%;right:auto;top:10%;width:82%;font-size:23px;transform:translateX(-50%) rotate(-8deg);text-align:center}}
@media(max-width:560px){.labs-visual{height:220px}.labs-browser{left:7%;top:12%;width:72%;height:70%;border-radius:8px}.browser-bar{gap:5px}.browser-bar i{width:5px;height:5px}.browser-bar small{font-size:6px}.page-label{font-size:6px}.browser-page strong{font-size:17px}.page-button{padding:5px 9px;font-size:6px}.labs-phone{right:7%;bottom:9%;width:22%;height:60%;border-radius:13px}.phone-mark{font-size:23px}.labs-cursor{width:20px;height:20px;font-size:11px}.labs-caption{font-size:6px}}
@media(prefers-reduced-motion:reduce){.labs-visual *,.labs-visual::before{animation:none!important}}
.web-apps-video,.creators-video,.content-ugc-video,.social-media-video,.brand-strategy-video{display:block;width:100%;height:158px;object-fit:cover;background:#062b49}
@media(max-width:560px){.web-apps-video,.content-ugc-video,.social-media-video,.brand-strategy-video{height:220px}.creators-home{grid-template-rows:auto 1fr;overflow:hidden}.creators-video{display:block;width:100%!important;max-width:100%;height:auto!important;aspect-ratio:16/9!important;object-fit:contain!important;object-position:center center!important;transform:none!important}}

/* Pluma azul animada junto al nombre, como en Labs. */
.logo strong{display:flex;align-items:center;white-space:nowrap}
.logo .logo-feather{display:block;flex:none;width:44px;height:44px;margin-left:6px;object-fit:contain;transform-origin:50% 85%;animation:studioFeatherHop 2.8s cubic-bezier(.35,.1,.25,1) infinite;filter:drop-shadow(0 3px 7px rgba(31,147,220,.38))}
@keyframes studioFeatherHop{0%,34%,100%{transform:translateY(0) rotate(0)}48%{transform:translateY(-7px) rotate(-5deg)}59%{transform:translateY(-4px) rotate(4deg)}70%{transform:translateY(0) rotate(0)}78%{transform:translateY(-2px) rotate(-2deg)}86%{transform:translateY(0) rotate(0)}}
@media(max-width:560px){.logo .logo-feather{width:36px;height:36px;margin-left:3px}}
@media(prefers-reduced-motion:reduce){.logo .logo-feather{animation:none!important}}

/* El movimiento del fondo sigue los puntos y órbitas de Web & Apps. */
.hero{position:relative;overflow:hidden}
.hero-bubbles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero-bubble{position:absolute;left:var(--x);top:var(--y);display:block;width:var(--size);height:var(--size);border:1px solid rgba(59,143,185,.32);border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.8),rgba(84,178,220,.28) 70%);box-shadow:0 0 10px rgba(78,170,214,.22);animation:studioBubbleRise var(--duration) linear var(--delay) infinite}
.hero-orbit{position:absolute;display:block;border:1px solid rgba(69,151,194,.25);border-radius:50%;animation:studioOrbitPulse 4s ease-in-out infinite}
.hero-orbit.orbit-one{width:190px;height:190px;right:7%;top:17%}
.hero-orbit.orbit-two{width:110px;height:110px;right:17%;top:30%;animation-delay:1s}
@keyframes studioBubbleRise{0%{transform:translateY(30px);opacity:0}15%{opacity:.58}85%{opacity:.30}100%{transform:translate3d(var(--drift),-85px,0);opacity:0}}
@keyframes studioOrbitPulse{50%{transform:scale(1.05);border-color:rgba(69,151,194,.48);box-shadow:0 0 22px rgba(98,188,231,.10)}}
@media(max-width:560px){.hero-orbit{display:none}.hero-bubble{max-width:7px;max-height:7px}}
@media(prefers-reduced-motion:reduce){.hero-bubble,.hero-orbit{animation:none!important;opacity:.28}}

/* Un matiz azul suave en toda la página, conservando el contraste de marca. */
:root{--ice:#e7f4fa}
body{background:#f2f9fc}
.topbar,.hero,.process,.brands{background:#f2f9fc}
.services{background:#e7f4fa}
.projects{background:#f8fcfe}
.project-grid article{background:#f3f9fc}
.process-photo::after{background:linear-gradient(90deg,transparent 0%,transparent 35%,rgba(242,249,252,.72) 66%,rgba(242,249,252,.94) 100%)}
@media(max-width:900px){.nav-links{background:#f2f9fc}}

/* Texto blanco con contraste y burbujas más perceptibles en la portada. */
.hero-copy{position:relative;isolation:isolate;color:#fff;background:linear-gradient(145deg,rgba(11,67,102,.70) 0%,rgba(8,43,73,.70) 74%)}
.hero-copy .primary{background:#fff;color:#082b49}
.hero-bubble{border-color:rgba(187,235,255,.72);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.96),rgba(111,205,247,.46) 70%);box-shadow:0 0 15px rgba(122,217,255,.65),inset 0 0 2px rgba(255,255,255,.85)}
.hero-orbit{border-color:rgba(179,226,250,.48)}
@keyframes studioBubbleRise{0%{transform:translateY(30px);opacity:0}15%{opacity:.88}85%{opacity:.60}100%{transform:translate3d(var(--drift),-85px,0);opacity:0}}
@keyframes studioOrbitPulse{50%{transform:scale(1.06);border-color:rgba(197,237,255,.76);box-shadow:0 0 26px rgba(127,213,255,.30)}}
@media(max-width:900px){.hero-copy{padding-left:20px;padding-right:20px}}
@media(max-width:560px){.hero-copy{margin-left:-12px;margin-right:-12px;padding:32px 12px}.hero-bubble{max-width:9px;max-height:9px}}
@media(prefers-reduced-motion:reduce){.hero-bubble,.hero-orbit{opacity:.48}}

/* La fotografía y el degradado forman una sola portada continua. */
.hero{isolation:isolate}
.hero-grid{position:relative;isolation:isolate;width:100%;max-width:none;min-height:535px;grid-template-columns:47% 53%}
.hero-grid::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,36,59,.87) 0%,rgba(8,48,76,.82) 36%,rgba(10,54,80,.30) 68%,transparent 100%)}
.hero-photo{position:absolute;inset:0;z-index:0;min-height:0}
.hero-photo img{object-position:center 46%}
.hero-copy{grid-column:1;z-index:2;min-height:535px;padding-left:max(32px,calc((100vw - 1400px)/2));background:transparent}
.hero-photo em{left:auto;right:8%;top:11%;width:27%;transform:rotate(-8deg);text-align:center}
.hero-bubbles{z-index:3}
.hero::after{content:"";position:absolute;inset:auto 0 0;z-index:4;height:36px;pointer-events:none;background:linear-gradient(180deg,transparent,#e7f4fa)}
@media(max-width:900px){.hero-grid{display:block;min-height:750px}.hero-copy{min-height:750px;width:100%;padding:70px 24px 115px}.hero-photo{height:100%;min-height:0}.hero-photo img{object-position:59% center}.hero-grid::before{background:linear-gradient(180deg,rgba(6,36,59,.84) 0%,rgba(7,42,65,.78) 52%,rgba(7,42,65,.50) 82%,rgba(7,42,65,.25) 100%)}}
@media(max-width:560px){.hero-grid{min-height:780px}.hero-copy{min-height:780px;margin:0;padding:68px 16px 120px}.hero-photo em{display:none}}

/* Encuadre completo del portátil sin perder la transición con el degradado. */
.hero-photo{background:linear-gradient(90deg,#164c6b 0%,#3d7897 56%,#b6d1de 100%)}
.hero-photo img{position:absolute;right:0;top:0;width:auto;height:100%;max-width:none;object-fit:contain;object-position:right center;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%)}
@media(max-width:900px){
 .hero-grid,.hero-copy{min-height:max(760px,calc(420px + 67vw))}
 .hero-photo{background:linear-gradient(180deg,#082b49 0%,#0b4162 55%,#bcd7e4 100%)}
 .hero-photo img{left:0;right:auto;top:auto;bottom:0;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:center bottom;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%)}
 .hero-copy{padding-top:55px;padding-bottom:calc(67vw + 35px)}
 .hero-grid::before{background:linear-gradient(180deg,rgba(6,36,59,.88) 0%,rgba(7,42,65,.84) 50%,rgba(7,42,65,.70) 68%,rgba(7,42,65,.06) 100%)}
}
@media(max-width:560px){
 .hero-grid,.hero-copy{min-height:760px}
 .hero-copy{padding:52px 16px calc(67vw + 35px)}
 .hero-photo img{height:104vw;object-fit:cover;object-position:50% bottom;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%)}
 .hero-grid::before{background:linear-gradient(180deg,rgba(6,36,59,.82) 0%,rgba(7,42,65,.70) 47%,rgba(7,42,65,.42) 65%,rgba(7,42,65,.05) 100%)}
 .hero-copy .eyebrow,.hero-copy h1,.hero-copy .lead,.hero-copy .benefits{text-shadow:0 2px 8px rgba(0,24,45,.65)}
}

/* Cabecera y portada comparten un azul luminoso sin corte visible. */
.topbar,.hero{background:#397594}
.topbar .logo,.topbar .logo small,.topbar .nav-links a,.topbar .menu{color:#fff}
.topbar .pill{background:#fff;color:#0a3551}
.hero-photo{background:linear-gradient(90deg,#397594 0%,#6ba4bb 56%,#bfd6e1 100%)}
.hero-grid::before{background:linear-gradient(90deg,rgba(8,48,73,.14) 0%,rgba(8,48,73,.22) 40%,rgba(8,48,73,.12) 70%,transparent 100%)}
@media(max-width:900px){
 .topbar .nav-links{background:#397594}
 .hero-photo{background:linear-gradient(180deg,#397594 0%,#4e8dab 55%,#bfd7e3 100%)}
 .hero-grid::before{background:linear-gradient(180deg,transparent 0%,rgba(8,48,73,.12) 48%,rgba(8,48,73,.18) 68%,rgba(8,48,73,.03) 100%)}
}

/* El cielo continúa de la cabecera a la portada sin reiniciar la imagen. */
.topbar,.hero{background-color:#2676ad;background-image:url('/assets/studio-sky-v1.png');background-repeat:no-repeat;background-size:auto calc(535px + 84px)}
.topbar{background-position:center top}
.hero{background-position:center -84px}
.hero-photo{background:transparent}
.hero-grid::before{background:linear-gradient(90deg,rgba(9,53,87,.27),rgba(9,53,87,.14) 48%,transparent 78%)}
.hero-copy .eyebrow,.hero-copy h1,.hero-copy .lead,.hero-copy .benefits{text-shadow:0 2px 9px rgba(0,31,63,.58)}
@media(max-width:900px){
 .topbar,.hero{background-size:auto calc(max(760px,420px + 67vw) + 72px)}
 .hero{background-position:center -72px}
 .hero-photo{background:transparent}
 .hero-grid::before{background:linear-gradient(180deg,rgba(6,46,79,.09) 0%,rgba(6,46,79,.24) 56%,rgba(6,46,79,.16) 76%,transparent 100%)}
}
@media(max-width:560px){.topbar,.hero{background-size:auto 832px}}

/* La cabecera acompaña al contenido al desplazarse. */
.topbar{position:relative;top:auto}

/* La fotografía queda quieta; cada proyecto anima solo una señal de su actividad. */
.project-media{position:relative;display:block;height:128px;overflow:hidden;background:#dcecf3}
.project-media>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.project-cue{position:absolute;z-index:2;display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 3px 12px rgba(7,40,61,.14);color:#123950;font:700 9px/1 Arial,sans-serif;letter-spacing:.07em;white-space:nowrap;pointer-events:none}
.commerce-cue{left:9px;bottom:9px}.commerce-cue i{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#397594;color:#fff;font:700 11px Arial,sans-serif;font-style:normal}
.social-cue{right:9px;bottom:9px}.social-cue i{color:#b64552;font:19px/12px Georgia,serif;font-style:normal;transform-origin:center 60%}
.web-cue{left:9px;bottom:9px;flex-direction:column;align-items:flex-start;gap:5px;border-radius:8px}.web-cue i{display:block;width:100%;height:2px;background:#397594;transform-origin:left center}
.rec-cue{right:9px;top:9px;gap:5px}.rec-cue i{width:7px;height:7px;border-radius:50%;background:#dc4242;box-shadow:0 0 0 2px rgba(220,66,66,.15)}
.wellness-cue{right:9px;bottom:9px;padding:5px 9px 5px 5px}.wellness-cue svg{width:25px;height:25px;transform:rotate(-90deg);fill:none;stroke:#b9d6e4;stroke-width:3}.wellness-cue .wellness-progress{stroke:#287fa7;stroke-linecap:round;stroke-dasharray:88;stroke-dashoffset:70}
@keyframes cartConfirm{0%,12%{opacity:0;transform:translateY(7px)}22%,68%{opacity:1;transform:translateY(0)}82%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes socialBeat{0%,38%,58%,100%{transform:scale(1)}45%,52%{transform:scale(1.22)}}
@keyframes webLoad{0%,12%{transform:scaleX(.08)}65%,88%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
@keyframes recBlink{0%,48%,100%{opacity:1}49%,65%{opacity:.25}}
@keyframes wellnessFill{0%,14%{stroke-dashoffset:70}75%,88%{stroke-dashoffset:18}100%{stroke-dashoffset:70}}
.project-media.is-visible .commerce-cue{animation:cartConfirm 7s ease-in-out infinite}
.project-media.is-visible .social-cue i{animation:socialBeat 5.5s ease-in-out infinite}
.project-media.is-visible .web-cue i{animation:webLoad 7s ease-in-out infinite}
.project-media.is-visible .rec-cue i{animation:recBlink 3.4s step-end infinite}
.project-media.is-visible .wellness-progress{animation:wellnessFill 8s ease-in-out infinite}
@media(max-width:560px){.project-media{height:230px}.project-cue{font-size:11px;padding:9px 11px}}
@media(prefers-reduced-motion:reduce){.project-cue,.project-cue *{animation:none!important;opacity:1!important;transform:none!important}}

/* El pie retoma el cielo de la portada con contraste para el texto blanco. */
footer{background-color:#2879ac;background-image:linear-gradient(180deg,rgba(9,58,103,.28),rgba(9,58,103,.48)),url('/assets/studio-sky-v1.png');background-position:center,center top;background-size:cover;background-repeat:no-repeat;text-shadow:0 1px 4px rgba(4,35,67,.38)}