:root {
--ink: #0b0d14;
--ink-soft: #171a25;
--paper: #f5f5f1;
--white: #ffffff;
--muted: #666b78;
--line: rgba(11, 13, 20, 0.12);
--cyan: #0b9fc4;
--cyan-dark: #087c9a;
--purple: #653a99;
--lime: #cdd52e;
--radius-sm: 14px;
--radius-md: 24px;
--radius-lg: 38px;
--shadow: 0 24px 70px rgba(11, 13, 20, 0.13);
--container: 1180px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--ink);
background: var(--paper);
font-family: "Segoe UI", Arial, sans-serif;
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
body.menu-open {
overflow: hidden;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
font: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 4px;
}
.skip-link {
position: fixed;
top: 8px;
left: 8px;
z-index: 200;
padding: 10px 16px;
color: var(--white);
background: var(--ink);
border-radius: 10px;
transform: translateY(-150%);
}
.skip-link:focus {
transform: translateY(0);
}
.container {
width: min(calc(100% - 40px), var(--container));
margin-inline: auto;
}
.narrow {
width: min(calc(100% - 40px), 820px);
margin-inline: auto;
}
.section {
padding: 104px 0;
}
.section--white {
background: var(--white);
}
.section--dark {
color: var(--white);
background:
radial-gradient(circle at 80% 10%, rgba(101, 58, 153, 0.38), transparent 32%),
radial-gradient(circle at 20% 90%, rgba(11, 159, 196, 0.26), transparent 30%),
var(--ink);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
color: var(--cyan-dark);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.eyebrow::before {
width: 28px;
height: 3px;
background: var(--lime);
border-radius: 99px;
content: "";
}
.section--dark .eyebrow,
.page-hero .eyebrow {
color: #8adcf0;
}
h1,
h2,
h3 {
margin: 0;
font-weight: 780;
line-height: 1.08;
letter-spacing: -0.035em;
}
h1 {
font-size: clamp(2.8rem, 6vw, 5.7rem);
}
h2 {
font-size: clamp(2.15rem, 4vw, 4rem);
}
h3 {
font-size: clamp(1.35rem, 2vw, 1.9rem);
}
.lead {
max-width: 720px;
margin: 24px 0 0;
color: var(--muted);
font-size: clamp(1.08rem, 1.5vw, 1.28rem);
}
.section--dark .lead,
.page-hero .lead {
color: rgba(255, 255, 255, 0.74);
}
.section-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 32px;
margin-bottom: 52px;
}
.section-heading__copy {
max-width: 760px;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--cyan-dark);
font-weight: 750;
}
.text-link::after {
content: "→";
transition: transform 180ms ease;
}
.text-link:hover::after {
transform: translateX(5px);
}
.btn {
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 22px;
border: 1px solid transparent;
border-radius: 999px;
font-weight: 780;
line-height: 1.2;
cursor: pointer;
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.btn:hover {
transform: translateY(-2px);
}
.btn--primary {
color: var(--white);
background: linear-gradient(135deg, var(--cyan), #087f9f);
box-shadow: 0 12px 32px rgba(11, 159, 196, 0.28);
}
.btn--secondary {
color: var(--white);
border-color: rgba(255, 255, 255, 0.38);
background: rgba(255, 255, 255, 0.08);
}
.btn--dark {
color: var(--white);
background: var(--ink);
}
.btn--lime {
color: var(--ink);
background: var(--lime);
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.93);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(18px);
}
.site-nav {
display: flex;
min-height: 82px;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.brand {
flex: 0 0 auto;
}
.brand img {
width: 202px;
height: auto;
}
.nav-links {
display: flex;
align-items: center;
gap: 8px;
}
.nav-links > a:not(.btn) {
padding: 10px 12px;
color: #3b3f4b;
border-radius: 10px;
font-size: 0.93rem;
font-weight: 700;
}
.nav-links > a:not(.btn):hover,
.nav-links > a[aria-current="page"]:not(.btn) {
color: var(--ink);
background: rgba(11, 159, 196, 0.09);
}
.nav-toggle {
display: none;
width: 46px;
height: 46px;
padding: 0;
color: var(--ink);
background: var(--white);
border: 1px solid var(--line);
border-radius: 50%;
cursor: pointer;
}
.nav-toggle__lines,
.nav-toggle__lines::before,
.nav-toggle__lines::after {
display: block;
width: 19px;
height: 2px;
margin: auto;
background: currentColor;
border-radius: 99px;
content: "";
transition: transform 180ms ease;
}
.nav-toggle__lines::before {
transform: translateY(-6px);
}
.nav-toggle__lines::after {
transform: translateY(4px);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__lines {
background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__lines::before {
transform: translateY(0) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__lines::after {
transform: translateY(-2px) rotate(-45deg);
}
.hero {
position: relative;
overflow: hidden;
color: var(--white);
background:
radial-gradient(circle at 15% 18%, rgba(11, 159, 196, 0.28), transparent 30%),
radial-gradient(circle at 90% 80%, rgba(101, 58, 153, 0.34), transparent 34%),
var(--ink);
}
.hero::after {
position: absolute;
right: -130px;
bottom: -200px;
width: 430px;
height: 430px;
border: 1px solid rgba(205, 213, 46, 0.26);
border-radius: 50%;
content: "";
}
.hero__grid {
position: relative;
z-index: 1;
display: grid;
min-height: 710px;
grid-template-columns: minmax(0, 1.03fr) minmax(420px, 0.97fr);
align-items: center;
gap: 70px;
padding: 76px 0 84px;
}
.hero h1 span {
color: #7dd8ed;
}
.hero__copy .lead {
max-width: 650px;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 36px;
}
.hero__note {
display: flex;
align-items: center;
gap: 10px;
margin-top: 28px;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.hero__note::before {
width: 9px;
height: 9px;
background: var(--lime);
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(205, 213, 46, 0.13);
content: "";
}
.hero__visual {
position: relative;
}
.hero__image {
width: 100%;
min-height: 500px;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
}
.hero__badge {
position: absolute;
right: -18px;
bottom: 30px;
max-width: 240px;
padding: 20px 22px;
color: var(--ink);
background: var(--lime);
border-radius: 18px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
font-weight: 750;
line-height: 1.3;
}
.trust-bar {
position: relative;
z-index: 2;
margin-top: -34px;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
}
.trust-item {
padding: 28px 32px;
}
.trust-item + .trust-item {
border-left: 1px solid var(--line);
}
.trust-item strong {
display: block;
margin-bottom: 4px;
font-size: 1.1rem;
}
.trust-item span {
color: var(--muted);
font-size: 0.92rem;
}
.solution-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.solution-card {
position: relative;
min-height: 460px;
overflow: hidden;
border-radius: var(--radius-md);
box-shadow: 0 12px 36px rgba(11, 13, 20, 0.1);
}
.solution-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.solution-card::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 22%, rgba(8, 10, 16, 0.9) 100%);
content: "";
}
.solution-card:hover img {
transform: scale(1.035);
}
.solution-card__body {
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
left: 0;
padding: 34px;
color: var(--white);
}
.solution-card__body p {
max-width: 560px;
margin: 12px 0 22px;
color: rgba(255, 255, 255, 0.74);
}
.solution-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #b9eef8;
font-weight: 750;
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 50px;
}
.process-card {
padding: 30px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-sm);
}
.process-card__number {
display: grid;
width: 42px;
height: 42px;
margin-bottom: 24px;
color: var(--ink);
background: var(--lime);
border-radius: 50%;
place-items: center;
font-size: 0.88rem;
font-weight: 850;
}
.process-card p {
margin: 12px 0 0;
color: rgba(255, 255, 255, 0.68);
font-size: 0.95rem;
}
.project-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.priority-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.project-card--featured {
border-top: 5px solid var(--cyan-dark);
box-shadow: 0 18px 44px rgba(11, 13, 20, 0.09);
}
.project-card--featured .project-card__media {
aspect-ratio: 16 / 8.6;
}
.project-card--featured .project-card__body {
padding: 30px 32px 34px;
}
.project-card--featured .project-card__body h2,
.project-card--featured .project-card__body h3 {
font-size: 1.55rem;
}
.portfolio-tier {
margin-top: 58px;
}
.project-grid--four {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 20px;
}
.project-grid--four .project-card__body {
padding: 21px 21px 24px;
}
.project-grid--four .project-card__body h2 {
font-size: 1.1rem;
}
.project-grid--secondary .project-card {
box-shadow: none;
}
.project-grid--secondary .project-card__body {
padding: 21px 22px 24px;
}
.project-grid--secondary .project-card__body h2 {
font-size: 1.12rem;
}
.project-card {
overflow: hidden;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-md);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(11, 13, 20, 0.11);
}
.project-card__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--ink);
}
.project-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease;
}
.project-card__media--duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.project-card__media--duo img {
min-width: 0;
}
.project-card__media--duo img:first-child {
object-position: 62% center;
}
.project-card__media--duo img:last-child {
object-position: 44% center;
}
.project-card:hover .project-card__media img {
transform: scale(1.04);
}
.play {
position: absolute;
top: 50%;
left: 50%;
display: grid;
width: 58px;
height: 58px;
color: var(--ink);
background: rgba(255, 255, 255, 0.92);
border-radius: 50%;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
transform: translate(-50%, -50%);
place-items: center;
font-size: 1rem;
}
.play::before {
margin-left: 3px;
content: "▶";
}
.project-card__body {
padding: 25px 26px 28px;
}
.project-card__tag {
display: inline-block;
margin-bottom: 10px;
color: var(--purple);
font-size: 0.75rem;
font-weight: 850;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.project-card__body h2,
.project-card__body h3 {
font-size: 1.28rem;
line-height: 1.25;
}
.project-card__body p {
margin: 12px 0 0;
color: var(--muted);
font-size: 0.94rem;
}
.outcomes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 50px;
}
.outcome-card {
padding: 34px;
background: var(--paper);
border-radius: var(--radius-sm);
}
.outcome-card__mark {
display: grid;
width: 42px;
height: 42px;
margin-bottom: 24px;
color: var(--white);
background: var(--purple);
border-radius: 13px;
place-items: center;
font-weight: 900;
}
.outcome-card p {
margin: 12px 0 0;
color: var(--muted);
}
.cta-panel {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 40px;
padding: 52px 56px;
color: var(--white);
background:
radial-gradient(circle at 100% 0%, rgba(205, 213, 46, 0.2), transparent 32%),
linear-gradient(135deg, var(--purple), #3d2363);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
}
.cta-panel p {
max-width: 720px;
margin: 14px 0 0;
color: rgba(255, 255, 255, 0.72);
}
.page-hero {
padding: 108px 0 96px;
color: var(--white);
background:
radial-gradient(circle at 82% 10%, rgba(101, 58, 153, 0.36), transparent 32%),
radial-gradient(circle at 10% 90%, rgba(11, 159, 196, 0.25), transparent 30%),
var(--ink);
}
.page-hero__inner {
max-width: 900px;
}
.service-list {
display: grid;
gap: 30px;
}
.service-block {
display: grid;
min-height: 480px;
overflow: hidden;
grid-template-columns: 0.9fr 1.1fr;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.service-block:nth-child(even) {
grid-template-columns: 1.1fr 0.9fr;
}
.service-block:nth-child(even) .service-block__media {
order: 2;
}
.service-block__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.service-block__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(38px, 6vw, 72px);
}
.service-block__body p {
margin: 16px 0 22px;
color: var(--muted);
}
.check-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 22px;
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.check-list li {
position: relative;
padding-left: 24px;
font-size: 0.94rem;
font-weight: 650;
}
.check-list li::before {
position: absolute;
top: 0;
left: 0;
color: var(--cyan-dark);
content: "✓";
font-weight: 900;
}
.faq-list {
display: grid;
gap: 12px;
margin-top: 46px;
}
details {
padding: 22px 24px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
summary {
cursor: pointer;
font-weight: 760;
}
details p {
margin: 14px 0 0;
color: var(--muted);
}
.about-grid,
.contact-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(50px, 8vw, 110px);
align-items: start;
}
.about-aside {
padding: 34px;
color: var(--white);
background: var(--ink-soft);
border-radius: var(--radius-md);
}
.about-aside strong {
display: block;
color: #8adcf0;
font-size: 2.4rem;
line-height: 1;
}
.about-aside p {
margin: 12px 0 0;
color: rgba(255, 255, 255, 0.68);
}
.coverage {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.coverage span {
padding: 8px 12px;
color: #3e4350;
background: var(--white);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 0.84rem;
font-weight: 700;
}
.contact-card {
padding: clamp(30px, 5vw, 50px);
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
}
.contact-points {
display: grid;
gap: 16px;
margin: 32px 0;
}
.contact-point {
padding: 18px 20px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 14px;
}
.contact-point small {
display: block;
color: var(--muted);
font-weight: 650;
}
.contact-point strong {
display: block;
margin-top: 2px;
}
.lead-form {
display: grid;
gap: 22px;
margin-top: 30px;
}
.form-section {
min-width: 0;
margin: 0;
padding: 26px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 16px;
}
.form-section legend {
display: flex;
align-items: center;
gap: 11px;
padding: 0 10px 0 0;
color: var(--ink);
font-size: 1.05rem;
font-weight: 850;
}
.form-section legend span {
display: grid;
width: 34px;
height: 34px;
color: var(--white);
background: var(--purple);
border-radius: 10px;
place-items: center;
font-size: 0.78rem;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 17px 18px;
}
.field--wide {
grid-column: 1 / -1;
}
.field {
display: grid;
gap: 7px;
}
.field label {
font-size: 0.9rem;
font-weight: 750;
}
.field input,
.field select,
.field textarea {
width: 100%;
color: var(--ink);
background: var(--white);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 15px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
background: var(--white);
border-color: var(--cyan);
outline: 3px solid rgba(11, 159, 196, 0.12);
}
.field textarea {
min-height: 118px;
resize: vertical;
}
.field small,
.form-help {
color: var(--muted);
font-size: 0.8rem;
}
.form-help {
margin: 0 0 16px;
}
.choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.choice-option {
display: flex;
min-height: 48px;
align-items: center;
gap: 11px;
padding: 11px 13px;
cursor: pointer;
background: var(--white);
border: 1px solid var(--line);
border-radius: 12px;
font-size: 0.87rem;
font-weight: 700;
transition: border-color 160ms ease, background 160ms ease;
}
.choice-option:hover,
.choice-option:focus-within {
background: rgba(32, 130, 153, 0.06);
border-color: var(--cyan);
}
.choice-option input {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--purple);
}
.form-actions {
display: grid;
gap: 12px;
justify-items: start;
padding-top: 4px;
}
.lead-form--compact {
gap: 14px;
}
.lead-form--compact .form-section {
padding: 24px;
}
.form-optional {
padding: 0;
overflow: hidden;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
}
.form-optional summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 18px 20px;
list-style-position: inside;
}
.form-optional summary span {
color: var(--muted);
font-size: 0.78rem;
font-weight: 600;
text-align: right;
}
.form-optional[open] summary {
border-bottom: 1px solid var(--line);
}
.form-optional > .form-grid,
.form-optional > .choice-grid {
padding: 20px;
}
.form-optional > .form-help {
margin: 18px 20px 0;
}
.form-note {
margin: -4px 0 0;
color: var(--muted);
font-size: 0.84rem;
}
.site-footer {
padding: 64px 0 28px;
color: rgba(255, 255, 255, 0.72);
background: #080a10;
}
.footer-grid {
display: grid;
grid-template-columns: 1.25fr 0.65fr 0.9fr 0.65fr;
gap: 60px;
}
.footer-brand {
color: var(--white);
font-size: 1.3rem;
font-weight: 850;
}
.footer-brand span {
color: #68cee7;
}
.footer-copy {
max-width: 440px;
margin: 14px 0 0;
}
.footer-title {
margin: 0 0 14px;
color: var(--white);
font-size: 0.86rem;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.footer-links {
display: grid;
gap: 9px;
}
.footer-links a:hover {
color: var(--white);
}
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.82rem;
}
.whatsapp-float {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 90;
display: inline-flex;
min-height: 54px;
align-items: center;
gap: 10px;
padding: 12px 18px;
color: #071b0e;
background: #60df7b;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 999px;
box-shadow: 0 15px 36px rgba(16, 83, 35, 0.28);
font-size: 0.92rem;
font-weight: 850;
}
.whatsapp-float::before {
display: grid;
width: 26px;
height: 26px;
color: var(--white);
background: #168c35;
border-radius: 50%;
content: "W";
place-items: center;
font-size: 0.78rem;
}
@media (max-width: 1020px) {
.hero__grid {
min-height: auto;
grid-template-columns: 1fr;
gap: 45px;
}
.hero__copy {
max-width: 800px;
}
.hero__visual {
max-width: 800px;
}
.hero__image {
min-height: 380px;
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
.project-grid,
.project-grid--four,
.outcomes-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-grid > :first-child {
grid-column: 1 / -1;
}
}
@media (max-width: 820px) {
.section {
padding: 78px 0;
}
.nav-toggle {
display: block;
}
.nav-links {
position: fixed;
top: 82px;
right: 0;
bottom: 0;
left: 0;
display: none;
align-items: stretch;
flex-direction: column;
padding: 24px 20px;
background: rgba(255, 255, 255, 0.98);
}
.nav-links[data-open="true"] {
display: flex;
}
.nav-links > a:not(.btn) {
padding: 15px 14px;
font-size: 1.05rem;
}
.nav-links .btn {
margin-top: 10px;
}
.trust-grid,
.solution-grid,
.project-grid,
.priority-grid,
.project-grid--four,
.outcomes-grid,
.about-grid,
.contact-grid,
.service-block,
.service-block:nth-child(even) {
grid-template-columns: 1fr;
}
.trust-item + .trust-item {
border-top: 1px solid var(--line);
border-left: 0;
}
.solution-card {
min-height: 410px;
}
.service-block:nth-child(even) .service-block__media {
order: 0;
}
.service-block__media {
min-height: 340px;
}
.section-heading,
.cta-panel {
align-items: start;
flex-direction: column;
}
.section-heading {
display: flex;
}
.cta-panel {
display: flex;
padding: 40px 34px;
}
}
@media (max-width: 600px) {
body {
font-size: 16px;
}
.container,
.narrow {
width: min(calc(100% - 28px), var(--container));
}
.site-nav {
min-height: 72px;
}
.brand img {
width: 170px;
}
.nav-links {
top: 72px;
}
.hero__grid {
padding: 58px 0 72px;
}
.hero__image {
min-height: 280px;
}
.hero__badge {
right: 12px;
bottom: 14px;
max-width: 210px;
padding: 15px 17px;
font-size: 0.88rem;
}
.hero__actions,
.hero__actions .btn,
.cta-panel .btn {
width: 100%;
}
.trust-item {
padding: 24px;
}
.solution-card {
min-height: 360px;
}
.solution-card__body {
padding: 26px;
}
.process-grid,
.project-grid,
.outcomes-grid,
.check-list,
.form-grid,
.choice-grid,
.footer-grid {
grid-template-columns: 1fr;
}
.form-section {
padding: 22px 18px;
}
.form-optional summary {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.form-optional summary span {
text-align: left;
}
.page-hero {
padding: 78px 0 70px;
}
.service-block__media {
min-height: 270px;
}
.footer-grid > :first-child {
grid-column: auto;
}
.footer-bottom {
flex-direction: column;
}
.whatsapp-float {
right: 14px;
bottom: 14px;
min-height: 50px;
padding: 10px 14px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
@font-face{font-family:"Hind Vadodara";src:url("../fonts/hind-vadodara-light.woff2") format("woff2"),url("../fonts/hind-vadodara-light.ttf") format("truetype");font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:"Hind Vadodara";src:url("../fonts/hind-vadodara-regular.woff2") format("woff2"),url("../fonts/hind-vadodara-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Hind Vadodara";src:url("../fonts/hind-vadodara-medium.woff2") format("woff2"),url("../fonts/hind-vadodara-medium.ttf") format("truetype");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Hind Vadodara";src:url("../fonts/hind-vadodara-semibold.woff2") format("woff2"),url("../fonts/hind-vadodara-semibold.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Hind Vadodara";src:url("../fonts/hind-vadodara-bold.woff2") format("woff2"),url("../fonts/hind-vadodara-bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
:root{--ink:#173e49;--ink-soft:#213946;--paper:#f2f6f6;--muted:#61747a;--line:rgba(38,87,105,.18);--cyan:#208299;--cyan-dark:#265769;--purple:#3a2056;--lime:#bfd72e;--radius-sm:7px;--radius-md:10px;--radius-lg:14px;--shadow:0 20px 50px rgba(38,87,105,.16)}
body,button,input,select,textarea{font-family:"Hind Vadodara",Arial,sans-serif}
body{font-size:17px;line-height:1.55}
h1,h2,h3{font-weight:600;letter-spacing:-.022em}
h1{font-size:clamp(2.8rem,5.6vw,5.25rem)}
h2{font-size:clamp(2.05rem,3.7vw,3.65rem)}
.eyebrow{color:var(--cyan-dark);font-size:.78rem;font-weight:700;letter-spacing:.14em}
.eyebrow::before{width:22px;height:22px;flex:0 0 22px;background:conic-gradient(var(--cyan-dark) 0 27%,#57b8c5 27% 49%,var(--lime) 49% 72%,var(--purple) 72% 100%);border-radius:50%;-webkit-mask:radial-gradient(circle,transparent 0 45%,#000 47%);mask:radial-gradient(circle,transparent 0 45%,#000 47%)}
.btn{min-height:50px;padding:12px 23px;border-radius:5px;font-size:.9rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase}
.btn--primary{background:var(--cyan);box-shadow:0 10px 26px rgba(32,130,153,.25)}
.btn--dark{background:var(--purple)}
.btn--lime{color:#173e49;background:var(--lime)}
.site-header{border-top:4px solid var(--cyan);border-bottom-color:rgba(38,87,105,.14);box-shadow:0 5px 20px rgba(38,87,105,.06)}
.nav-links>a:not(.btn){color:var(--cyan-dark);border-radius:3px;font-weight:600}
.nav-links>a:not(.btn):hover,.nav-links>a[aria-current="page"]:not(.btn){color:var(--purple);background:rgba(32,130,153,.1);box-shadow:inset 0 -3px 0 var(--lime)}
.hero{background:linear-gradient(112deg,rgba(23,62,73,.98) 0%,rgba(32,92,107,.96) 48%,rgba(50,29,77,.98) 100%)}
.hero::before,.page-hero::after,.cta-panel::after{position:absolute;width:430px;height:430px;background:repeating-conic-gradient(from -10deg,rgba(255,255,255,.27) 0 23deg,transparent 23deg 30deg);border-radius:50%;content:"";-webkit-mask:radial-gradient(circle,transparent 0 53%,#000 54%);mask:radial-gradient(circle,transparent 0 53%,#000 54%);pointer-events:none}
.hero::before{top:-230px;left:-210px}
.hero::after{right:-170px;bottom:-240px;width:470px;height:470px;border:44px solid rgba(191,215,46,.18)}
.hero h1 span{color:#d3e85a;font-weight:700}
.hero__image{border:5px solid rgba(255,255,255,.94);border-radius:8px;box-shadow:22px 22px 0 rgba(58,32,86,.48)}
.hero__badge{border-radius:5px;border-left:6px solid var(--cyan-dark);font-weight:600}
.hero__note{font-weight:500}
.trust-grid{border-radius:7px;border-top:5px solid var(--cyan)}
.trust-item strong{color:var(--cyan-dark);font-weight:700}
.solution-card{border-radius:7px;border-bottom:7px solid var(--lime)}
.solution-card::after{background:linear-gradient(180deg,transparent 14%,rgba(23,62,73,.92) 100%)}
.solution-card__body h3,.solution-card__body h2{font-weight:700}
.solution-card__link{color:#d9ea64;font-weight:600}
.section--dark{background:linear-gradient(125deg,rgba(23,62,73,.98),rgba(58,32,86,.98))}
.process-card{border-radius:6px;border-top:4px solid #56b8c4}
.process-card:nth-child(2){border-top-color:#8170a0}.process-card:nth-child(3){border-top-color:var(--lime)}.process-card:nth-child(4){border-top-color:#7ecbd2}
.process-card__number{border-radius:4px;font-weight:700}
.project-card,.outcome-card,.service-block,.contact-card,.contact-point,details,.about-aside{border-radius:7px}
.project-card{border-bottom:5px solid rgba(32,130,153,.65)}
.project-card__tag{color:var(--purple);font-weight:700}
.outcome-card{border-top:4px solid var(--cyan)}
.outcome-card__mark{border-radius:50%;background:var(--purple)}
.page-hero{position:relative;overflow:hidden;background:linear-gradient(112deg,var(--cyan-dark),var(--purple))}
.page-hero::after{top:-220px;right:-90px;opacity:.55}
.page-hero__inner{position:relative;z-index:1}
.cta-panel{position:relative;overflow:hidden;border-radius:9px;background:linear-gradient(125deg,var(--purple),var(--cyan-dark))}
.cta-panel>*{position:relative;z-index:1}
.cta-panel::after{right:-250px;bottom:-250px;opacity:.32}
.coverage span{border-radius:4px;border-left:3px solid var(--lime);font-weight:600}
.field input,.field select,.field textarea{border-radius:5px;border:1px solid rgba(38,87,105,.14)}
.site-footer{background:linear-gradient(115deg,#173e49,#2f1948);border-top:6px solid var(--lime)}
.footer-brand{font-weight:700;letter-spacing:.04em}.footer-brand span{color:#72ced6}
@media(max-width:820px){.hero::before,.page-hero::after{width:300px;height:300px}}
.client-proof {
margin-top: 50px;
padding: 30px 34px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.client-proof .coverage {
margin-top: 14px;
}
.project-card:not(a) {
cursor: default;
}
.hero__image,
.solution-card img,
.service-block__media img,
.project-card__media img {
filter: saturate(.92) contrast(1.045);
}
.project-card__media::after {
position: absolute;
inset: 0;
pointer-events: none;
content: "";
background:
linear-gradient(180deg, transparent 52%, rgba(38, 87, 105, .20)),
linear-gradient(105deg, rgba(58, 32, 86, .08), transparent 42%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.project-card__media .play {
z-index: 1;
}
.solution-card {
position: relative;
}
.solution-card::before {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 5px;
height: 44%;
pointer-events: none;
content: "";
background: linear-gradient(var(--cyan), var(--purple), var(--lime));
}
.service-block__media {
position: relative;
overflow: hidden;
background: var(--ink);
}
.service-block__media::after {
position: absolute;
inset: 0;
pointer-events: none;
content: "";
background: linear-gradient(135deg, rgba(38, 87, 105, .15), transparent 45%, rgba(58, 32, 86, .12));
}
.case-visual {
display: flex;
min-height: 320px;
align-items: flex-start;
justify-content: flex-end;
flex-direction: column;
padding: clamp(28px, 4vw, 50px);
color: var(--white);
background:
radial-gradient(circle at 82% 15%, rgba(191, 215, 46, .22), transparent 24%),
linear-gradient(128deg, #173e49 0%, #225c6b 47%, #3a2056 100%);
}
.project-card__media.case-visual::after {
background:
radial-gradient(circle at 88% 12%, transparent 0 15%, rgba(255, 255, 255, .22) 15.3% 16.2%, transparent 16.5% 21%, rgba(191, 215, 46, .28) 21.3% 22.2%, transparent 22.5%),
linear-gradient(180deg, transparent 25%, rgba(13, 30, 38, .34));
opacity: .72;
}
.case-visual > * {
position: relative;
z-index: 1;
}
.case-visual__kicker {
margin-bottom: 10px;
color: #d9ea64;
font-size: .78rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.case-visual > strong {
color: var(--white);
font-size: clamp(4.2rem, 8vw, 7.4rem);
font-weight: 700;
letter-spacing: -.065em;
line-height: .82;
}
.case-visual__label {
margin: 9px 0 24px;
color: rgba(255, 255, 255, .8);
font-size: 1.15rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
}
.case-visual__chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.case-visual__chips span {
padding: 6px 10px;
color: var(--white);
background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 4px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
}
.case-visual--essilor {
background:
radial-gradient(circle at 82% 15%, rgba(255, 255, 255, .2), transparent 24%),
linear-gradient(128deg, #173f58 0%, #19687a 48%, #3a2056 100%);
}
.case-visual--japan {
background:
radial-gradient(circle at 80% 18%, rgba(191, 215, 46, .2), transparent 22%),
linear-gradient(128deg, #121722 0%, #273f55 46%, #6c283f 100%);
}
.case-visual--focus {
background:
radial-gradient(circle at 84% 14%, rgba(130, 218, 235, .2), transparent 24%),
linear-gradient(128deg, #132d38 0%, #275969 50%, #202232 100%);
}
.case-visual--compact {
min-height: 0;
padding: 28px;
}
.case-visual--compact > strong {
font-size: clamp(3.5rem, 6vw, 5.3rem);
}
.case-visual--compact .case-visual__label {
margin-bottom: 16px;
}
.scale-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 28px;
overflow: hidden;
color: var(--white);
background: linear-gradient(118deg, var(--cyan-dark), var(--purple));
border-radius: 7px;
box-shadow: var(--shadow);
}
.scale-strip > div {
padding: 27px 30px;
}
.scale-strip > div + div {
border-left: 1px solid rgba(255, 255, 255, .16);
}
.scale-strip strong,
.scale-strip span {
display: block;
}
.scale-strip strong {
margin-bottom: 3px;
color: #d9ea64;
font-size: 1.35rem;
line-height: 1.1;
}
.scale-strip span {
color: rgba(255, 255, 255, .76);
font-size: .9rem;
}
@media (max-width: 820px) {
.scale-strip {
grid-template-columns: 1fr;
}
.scale-strip > div + div {
border-top: 1px solid rgba(255, 255, 255, .16);
border-left: 0;
}
}
@media (max-width: 600px) {
.case-visual {
min-height: 300px;
padding: 26px 22px;
}
.case-visual > strong {
font-size: 4.25rem;
}
}
.contact-experience-link {
margin: 24px 0 0;
color: var(--muted);
}
.service-proof {
position: relative;
z-index: 2;
margin-top: -54px;
}
.service-proof .scale-strip {
margin-top: 0;
}
.form-confidence {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 24px 0 8px;
overflow: hidden;
background: linear-gradient(118deg, rgba(38, 87, 105, .08), rgba(58, 32, 86, .08));
border: 1px solid var(--line);
border-radius: 6px;
}
.form-confidence > div {
padding: 16px 14px;
}
.form-confidence > div + div {
border-left: 1px solid var(--line);
}
.form-confidence strong,
.form-confidence span {
display: block;
}
.form-confidence strong {
color: var(--purple);
font-size: 1.05rem;
}
.form-confidence span {
margin-top: 2px;
color: var(--muted);
font-size: .75rem;
line-height: 1.3;
}
@media (max-width: 600px) {
.service-proof {
margin-top: -34px;
}
.form-confidence {
grid-template-columns: 1fr;
}
.form-confidence > div + div {
border-top: 1px solid var(--line);
border-left: 0;
}
}
.hero-proof {
position: relative;
min-height: 500px;
}
.hero-proof__main {
width: calc(100% - 50px);
min-height: 500px;
object-fit: cover;
border: 5px solid rgba(255, 255, 255, .94);
border-radius: 8px;
box-shadow: 22px 22px 0 rgba(58, 32, 86, .48);
filter: saturate(.92) contrast(1.045);
}
.hero-proof--single .hero-proof__main {
width: 100%;
}
.hero-proof__detail {
position: absolute;
right: 0;
bottom: 28px;
width: 42%;
aspect-ratio: 4 / 3;
object-fit: cover;
border: 5px solid var(--white);
border-radius: 6px;
box-shadow: var(--shadow);
filter: saturate(.9) contrast(1.06);
}
.trust-grid--four,
.scale-strip--four {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.relationship-grid {
margin-top: 34px;
}
.relationship-grid .outcome-card__mark {
width: auto;
min-width: 48px;
padding: 0 10px;
border-radius: 4px;
font-size: .78rem;
letter-spacing: .02em;
}
.documented-mention {
display: grid;
grid-template-columns: minmax(240px, .8fr) 1.2fr;
gap: 42px;
align-items: center;
margin-top: 58px;
padding: 34px;
color: var(--white);
background: linear-gradient(125deg, var(--purple), var(--cyan-dark));
border-left: 7px solid var(--lime);
border-radius: 8px;
box-shadow: var(--shadow);
}
.documented-mention h2,
.documented-mention p {
margin-top: 0;
}
.documented-mention .eyebrow {
color: #d9ea64;
}
.documented-mention > p {
color: rgba(255, 255, 255, .8);
}
.case-visual--fimlm {
justify-content: flex-start;
background:
radial-gradient(circle at 78% 20%, rgba(114, 206, 214, .22), transparent 26%),
linear-gradient(130deg, #3a2056 0%, #265769 58%, #173e49 100%);
}
.case-visual--fimlm > strong {
font-size: clamp(2rem, 3vw, 3.2rem);
letter-spacing: -.035em;
line-height: 1;
}
.client-proof__intro {
margin: 8px 0 0;
color: var(--muted);
}
.client-groups {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
margin-top: 28px;
}
.client-group h3 {
margin: 0;
font-size: 1rem;
}
.client-group .coverage {
margin-top: 14px;
}
@media (max-width: 1020px) {
.hero-proof,
.hero-proof__main {
min-height: 420px;
}
.trust-grid--four,
.scale-strip--four,
.client-groups {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
.trust-grid--four,
.scale-strip--four,
.client-groups,
.documented-mention {
grid-template-columns: 1fr;
}
.documented-mention {
gap: 16px;
}
}
@media (max-width: 600px) {
.hero-proof,
.hero-proof__main {
min-height: 330px;
}
.hero-proof__main {
width: calc(100% - 22px);
}
.hero-proof__detail {
width: 46%;
bottom: 20px;
}
}
.media-focus {
object-position: var(--media-position, 50% 50%);
}
.media-focus--stage { --media-position: 42% 50%; }
.media-focus--stage-wide { --media-position: 50% 48%; }
.media-focus--console { --media-position: 50% 54%; }
.media-focus--screen { --media-position: 50% 38%; }
.media-focus--lights { --media-position: 50% 56%; }
.media-focus--camera { --media-position: 56% 42%; }
.media-focus--teleprompter { --media-position: 47% 38%; }
.media-focus--audience { --media-position: 43% 45%; }
.media-focus--equipment { --media-position: 58% 50%; }
.media-focus--team { --media-position: 74% 52%; }
.media-focus--ceremony { --media-position: 50% 38%; }
.media-focus--performer { --media-position: 50% 28%; }
.media-focus--portrait { --media-position: 72% 44%; }
.media-focus--portrait-center { --media-position: 50% 48%; }
.media-focus--architecture { --media-position: 50% 45%; }
.media-focus--control { --media-position: 54% 50%; }
.media-focus--documentary { --media-position: 70% 48%; }
.media-focus--activation { --media-position: 50% 48%; }
.media-focus--people { --media-position: 50% 46%; }
.media-focus--dj { --media-position: 46% 60%; }
.hero .eyebrow {
color: #b9edf5;
}
.hero .lead {
color: rgba(255, 255, 255, .78);
}
.hero-proof__main {
height: 500px;
min-height: 0;
}
.solution-card {
height: 460px;
min-height: 0;
}
.solution-card > img {
position: absolute;
inset: 0;
}
.service-block__media {
position: relative;
min-width: 0;
overflow: hidden;
background: #122f38;
}
.solution-card img,
.service-block__media img,
.project-card__media img,
.hero-proof__main {
display: block;
}
.project-card__media--duo img.media-focus--stage-wide {
object-position: var(--media-position);
}
.project-card__media--duo img.media-focus--equipment {
object-position: var(--media-position);
}
.project-card__media--duo img.media-focus--team {
object-position: var(--media-position);
}
.project-card__media--duo img.media-focus--ceremony,
.project-card__media--duo img.media-focus--performer {
object-position: var(--media-position);
}
@media (max-width: 1020px) {
.hero-proof__main {
height: 420px;
min-height: 0;
}
}
@media (max-width: 820px) {
.site-header {
z-index: 1000;
}
.nav-links {
top: 82px;
bottom: auto;
height: calc(100dvh - 82px);
overflow-y: auto;
z-index: 999;
box-shadow: 0 20px 45px rgba(23, 62, 73, .16);
}
.nav-links[data-open="true"] {
display: flex;
}
.media-focus--stage { --media-position: 38% 50%; }
.media-focus--screen { --media-position: 50% 34%; }
.media-focus--lights { --media-position: 50% 58%; }
.media-focus--camera { --media-position: 58% 40%; }
.media-focus--teleprompter { --media-position: 46% 38%; }
.media-focus--portrait { --media-position: 70% 42%; }
.media-focus--documentary { --media-position: 72% 46%; }
.service-block__media {
aspect-ratio: 16 / 10;
min-height: 0;
}
.service-block__media img {
position: absolute;
inset: 0;
}
}
@media (max-width: 600px) {
html,
body {
max-width: 100%;
overflow-x: clip;
}
h1 {
font-size: clamp(2.35rem, 12vw, 3.05rem);
line-height: 1.02;
}
.nav-links {
top: 72px;
height: calc(100dvh - 72px);
}
h2 {
font-size: clamp(1.9rem, 9vw, 2.45rem);
line-height: 1.08;
}
.page-hero .lead,
.hero .lead {
font-size: 1.04rem;
}
.solution-card {
height: 390px;
min-height: 0;
}
.hero-proof__main {
height: 330px;
min-height: 0;
}
.solution-card::after {
background: linear-gradient(180deg, rgba(8, 10, 16, .04) 8%, rgba(8, 10, 16, .92) 100%);
}
.solution-card__body,
.project-card--featured .project-card__body,
.project-card__body {
padding: 24px;
}
.project-card__media--duo {
grid-template-columns: 1fr;
aspect-ratio: auto;
}
.project-card__media--duo img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.service-block__media {
aspect-ratio: 4 / 3;
}
.service-block__body {
padding: 30px 24px 34px;
}
.check-list {
gap: 12px;
}
.documented-mention {
padding: 28px 24px;
}
details summary,
.footer-links a,
.text-link {
display: flex;
min-height: 44px;
align-items: center;
}
.choice-option input {
width: 22px;
height: 22px;
}
.client-group .coverage span {
line-height: 1.3;
}
.whatsapp-float {
max-width: calc(100vw - 28px);
}
}
.footer-title--ink{color:var(--ink)}
.about-aside__rule{margin:28px 0;border:0;border-top:1px solid rgba(255,255,255,.14)}


body[data-page="inicio"] .hero h1{font-size:clamp(2.25rem,4.1vw,3.7rem);line-height:1.1;overflow-wrap:break-word}
body[data-page="inicio"] .hero__note{font-size:1.1rem;line-height:1.45}
@media(max-width:600px){body[data-page="inicio"] .hero h1{font-size:2.25rem}body[data-page="inicio"] .hero__actions .btn{white-space:normal}}

.service03 .page-hero h1{font-size:clamp(2.1rem,4.5vw,3.5rem);line-height:1.12;max-width:1000px}.service03-breadcrumb{font-size:.95rem;margin-bottom:26px;line-height:1.7}.service03-breadcrumb a{text-decoration:underline}.service03-columns{display:grid;grid-template-columns:1.2fr 1fr;gap:48px}.service03 .outcomes-grid{margin-top:28px}.service03 .check-list{margin-bottom:24px}.service03-related{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.service03-related a{padding:12px 18px;background:#101c2c;color:#fff;border-radius:6px}.service03 .faq-list p{line-height:1.7}.service03 .hero__actions .btn--secondary{color:#fff;border-color:rgba(255,255,255,.65)}.service03 .outcome-card p{margin-top:12px}@media(max-width:768px){.service03-columns{grid-template-columns:1fr;gap:30px}.service03 .hero__actions{display:flex;flex-direction:column;align-items:stretch}.service03 .btn{white-space:normal}.service03-related a{flex:1 1 180px;text-align:center}}.service03 .hero__actions .btn--secondary{color:#fff;border-color:rgba(255,255,255,.65)}
@media(max-width:600px){.service03 .page-hero{padding:36px 0 40px}.service03 .page-hero h1{font-size:1.9rem}.service03 .page-hero .lead{font-size:1rem;line-height:1.55}.service03-breadcrumb{margin-bottom:18px}.service03 .hero__actions{margin-top:24px}}


:root {
--ink: #173e49;
--paper: #f2f6f6;
--muted: #566a70;
--line: rgba(23, 62, 73, .14);
--teal: #1b6f83;
--teal-light: #8adcf0;
--purple: #3a2056;
--lime: #bfd72e;
--meter: linear-gradient(90deg, #1b6f83 0%, #57b8c5 22%, #e4ec9a 44%, #bfd72e 60%, #8170a0 80%, #3a2056 100%);
}
h1, h2, h3 { font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 4.6vw, 4.1rem); line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 3vw, 2.75rem); line-height: 1.1; }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.25; }
.lead { max-width: 62ch; font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.6; }
.section-heading__copy p, .page-hero p, .cta-panel p { max-width: 64ch; }
.eyebrow { gap: 0; margin-bottom: 14px; color: var(--teal); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.eyebrow::before { content: none; }
.section--dark .eyebrow, .page-hero .eyebrow, .hero .eyebrow { color: var(--teal-light); }
.btn { min-height: 48px; padding: 12px 22px; border-radius: 6px; box-shadow: none; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.btn--primary { background: var(--teal); }
.btn--primary:hover { background: var(--ink); }
.btn--dark { background: var(--purple); }
.hero .btn--primary, .page-hero .btn--primary { color: var(--ink); background: #fff; }
.hero .btn--primary:hover, .page-hero .btn--primary:hover { background: var(--paper); }
.hero .btn--secondary, .page-hero .btn--secondary, .service03 .hero__actions .btn--secondary { color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .55); }
.text-link { color: var(--teal); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.text-link::after { content: none; }
.text-link:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.hero :focus-visible, .page-hero :focus-visible, .section--dark :focus-visible,
.cta-panel :focus-visible, .site-footer :focus-visible, .solution-card:focus-visible { outline-color: #fff; }
.site-header { border-top: 0; box-shadow: none; }
.nav-links > a:not(.btn) { color: var(--ink); font-weight: 500; }
.nav-links > a:not(.btn):hover, .nav-links > a[aria-current="page"]:not(.btn) { color: var(--ink); background: none; box-shadow: inset 0 -2px 0 var(--teal); }
.hero::before, .hero::after, .page-hero::after, .cta-panel::after { content: none; }
.hero, .page-hero { position: relative; }
.hero::after, .page-hero::after {
position: absolute; right: 0; bottom: 0; left: 0; z-index: 2;
height: 10px; background: var(--meter); border: 0; border-radius: 0;
-webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(4.1667% - 3px), transparent calc(4.1667% - 3px) 4.1667%);
mask: repeating-linear-gradient(90deg, #000 0 calc(4.1667% - 3px), transparent calc(4.1667% - 3px) 4.1667%);
content: "";
}
.page-hero::after { top: auto; width: auto; height: 6px; opacity: 1; }
.hero::after { width: auto; animation: meter-rise 1.1s steps(24, end) .25s both; }
@keyframes meter-rise { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
body[data-page="inicio"] .hero { background: var(--ink); }
body[data-page="inicio"] .hero__grid { position: static; display: block; min-height: min(84vh, 720px); padding: clamp(80px, 10vw, 132px) 0 clamp(96px, 11vw, 150px); }
body[data-page="inicio"] .hero__copy { position: relative; z-index: 1; max-width: 37rem; }
body[data-page="inicio"] .hero h1 { font-size: clamp(2.4rem, 4.6vw, 4.1rem); line-height: 1.04; }
body[data-page="inicio"] .hero h1 span { color: inherit; font-weight: inherit; }
.hero__visual { position: absolute; inset: 0; z-index: 0; }
.hero__visual::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23, 62, 73, .97) 0%, rgba(23, 62, 73, .9) 34%, rgba(23, 62, 73, .45) 62%, rgba(23, 62, 73, .12) 100%); content: ""; }
.hero-proof, .hero-proof--single { height: 100%; min-height: 0; }
.hero-proof__main, .hero-proof--single .hero-proof__main { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; filter: saturate(.9) contrast(1.05); }
.hero__badge { display: none; }
.hero__note { margin-top: 26px; color: rgba(255, 255, 255, .72); font-size: 1.02rem; }
.hero__note::before { content: none; }
.coverage-note { max-width: 60ch; margin-top: 18px; color: rgba(255, 255, 255, .74); font-size: .98rem; font-weight: 400; line-height: 1.55; }
.trust-bar { margin-top: 0; padding: 36px 0 0; }
.trust-grid, .trust-grid--four { background: none; border: 0; border-radius: 0; box-shadow: none; }
.trust-item { padding: 4px 24px 4px 0; }
.trust-item + .trust-item { padding-left: 24px; border-left: 1px solid var(--line); }
.trust-item strong { color: var(--ink); font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.trust-item span { display: block; max-width: 26ch; line-height: 1.45; }
.solution-card { border-bottom: 0; border-radius: 6px; box-shadow: none; }
.solution-card::before { content: none; }
.solution-card__link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .28em; }
.project-card { border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
.project-card__tag { color: var(--teal); font-size: .92rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.outcome-card { border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
.outcome-card__mark { display: block; width: auto; height: auto; margin-bottom: 14px; color: var(--teal); background: none; border-radius: 0; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.relationship-grid .outcome-card__mark { margin-bottom: 8px; padding: 0; color: var(--purple); background: none; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.03em; }
.section--dark { background: var(--ink); }
.process-card, .process-card:nth-child(n) { border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; }
.process-card__number { display: block; width: auto; height: auto; margin-bottom: 18px; color: var(--teal-light); background: none; border-radius: 0; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.section:not(.section--dark) .process-card { background: var(--paper); border-color: var(--line); }
.section:not(.section--dark) .process-card__number { color: var(--teal); }
.section:not(.section--dark) .process-card p { color: var(--muted); }
.client-proof { padding: 30px 0 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.client-proof .coverage { gap: 8px 26px; }
.client-proof .coverage span { padding: 0; color: var(--ink); background: none; border: 0; font-size: 1.02rem; font-weight: 500; }
.page-hero { padding: clamp(72px, 9vw, 112px) 0 clamp(80px, 9vw, 112px); background: var(--ink); }
.cta-panel { background: var(--purple); border-radius: 8px; box-shadow: none; }
.cta-panel .btn--lime { color: var(--purple); background: #fff; }
.site-footer { background: var(--ink); border-top: 0; }
.faq-list details { padding: 0; border-radius: 6px; }
.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 22px; font-weight: 600; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { flex: 0 0 auto; color: var(--teal); font-size: 1.3rem; line-height: 1; content: "+"; transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 22px 20px; }
.service03-columns h2 { margin-bottom: 22px; }
.service03 .section .container > .text-link + h2 { margin-top: 72px; }
.service03 .section .container > h2 + p { margin-top: 14px; }
.service03 .section .container > p + .text-link { display: inline-block; margin-top: 10px; }
.service03-related a { color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.service03-related a:hover { border-color: var(--teal); }
.contact-card { border-radius: 8px; box-shadow: none; }
.form-confidence { background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }
.form-section { padding: 0; border: 0; }
.form-section legend span { background: none; color: var(--teal); }
.field label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 500; }
.field label:has(input[type="checkbox"]) input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }
.field input, .field select, .field textarea { border-color: rgba(23, 62, 73, .22); }
body[data-page="inicio"] .outcomes-grid:not(.relationship-grid) .outcome-card__mark,
body[data-page="nosotros"] .outcomes-grid .outcome-card__mark { display: none; }
.process-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-title { letter-spacing: 0; text-transform: none; font-size: 1rem; }
.form-section { background: none; }
.form-section legend { padding: 0; font-size: 1.05rem; }
.form-section legend span { display: none; }
.contact-grid .coverage a span { padding: 6px 12px; border: 1px solid var(--line); border-left-width: 1px; border-radius: 6px; }
.scale-strip { background: var(--ink); border-radius: 6px; box-shadow: none; }
.scale-strip strong { color: #fff; }
.about-aside { background: var(--ink); }
.about-aside strong { color: #fff; }
.coverage span { color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.section--dark .text-link, .about-aside .text-link { color: var(--teal-light); }
.section--dark .text-link:hover { color: #fff; }
.process-card .text-link { display: inline; }
.page-hero--media { overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23, 62, 73, .97) 0%, rgba(23, 62, 73, .9) 40%, rgba(23, 62, 73, .5) 68%, rgba(23, 62, 73, .2) 100%); content: ""; }
.page-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.9) contrast(1.05); }
.page-hero--media .page-hero__inner { position: relative; z-index: 1; max-width: 46rem; margin-inline: max(20px, calc((100% - 1180px) / 2)); }
.page-hero__img--console { object-position: 50% 60%; }
.page-hero__img--screen { object-position: 50% 22%; }
.page-hero__img--ceremony { object-position: 50% 30%; }
.page-hero__img--wash { object-position: 50% 45%; }
.page-hero__img--audience { object-position: 60% 45%; }
.page-hero__img--control { object-position: 60% 40%; }
.page-hero__img--room { object-position: 65% 50%; }
.page-hero__img--stage { object-position: 70% 40%; }
.page-hero__img--team { object-position: 60% 55%; }
.page-hero__img--rack { object-position: 70% 50%; }
.nav-phone { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav-phone:hover { color: var(--teal); }
@media (min-width: 1021px) { .footer-grid { grid-template-columns: 1.3fr .9fr .75fr 1fr; gap: 48px; } }
.footer-copy + .footer-copy { margin-top: 12px; }
.footer-title--social { margin-top: 26px; }
.footer-links--inline { display: flex; flex-wrap: wrap; gap: 8px 18px; }
@media (min-width: 821px) and (max-width: 1180px) {
.nav-phone { display: none; }
}
@media (max-width: 1020px) {
.trust-item:nth-child(odd) { padding-left: 0; border-left: 0; }
.trust-item:nth-child(n+3) { padding-top: 16px; }
}
@media (max-width: 820px) {
.nav-phone { padding: 14px 4px; font-size: 1.1rem; }
.page-hero--media, .service03 .page-hero--media { padding-top: 0; }
.page-hero__media { position: relative; inset: auto; height: 58vw; max-height: 340px; margin-bottom: 32px; }
.page-hero__media::after { background: linear-gradient(180deg, rgba(23, 62, 73, 0) 50%, rgba(23, 62, 73, .95) 100%); }
.page-hero--media .page-hero__inner { margin-inline: auto; }
.process-grid:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
body[data-page="inicio"] .hero__grid { display: flex; min-height: 0; padding: 0 0 72px; flex-direction: column-reverse; }
.hero__visual { position: relative; inset: auto; width: 100vw; height: 62vw; max-height: 380px; margin: 0 calc(50% - 50vw) 36px; }
.hero__visual::after { background: linear-gradient(180deg, rgba(23, 62, 73, 0) 55%, rgba(23, 62, 73, .95) 100%); }
.trust-item, .trust-item + .trust-item, .trust-item:nth-child(odd) { padding: 14px 0; border-left: 0; }
.trust-item + .trust-item { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.hero::after { animation: none; }
.faq-list summary::after { transition: none; }
}