html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
.concept-mobile-panel { transition: opacity .32s ease, visibility .32s; }
.concept-mobile-panel.is-open { visibility: visible; opacity: 1; }
.concept-mobile-bar { transition: transform .28s ease; }
.concept-mobile-toggle[aria-expanded="true"] .concept-mobile-bar:first-child { transform: translateY(4.5px) rotate(45deg); }
.concept-mobile-toggle[aria-expanded="true"] .concept-mobile-bar:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.g-head-shadow { transition: opacity .25s; }
.g-head.is-scrolled .g-head-shadow { opacity: 1; }
.g-work-reveal { transition: transform .32s ease; }
.g-work:hover .g-work-reveal, .g-work:focus-visible .g-work-reveal { transform: translateY(0); }
.g-navline { transition: transform .55s cubic-bezier(.22, 1, .36, 1); transform-origin: left; }
.g-navlink:hover .g-navline, .g-navlink[aria-current="page"] .g-navline { transform: scaleX(1); }
.g-navlink[aria-current="page"] { color: var(--green); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.g-hero-zoom { animation: hero-settle 1.2s ease-out both; }
@keyframes hero-settle { from { transform: scale(1.035); } to { transform: scale(1); } }
@media (max-width: 767px) { .g-work-reveal { display: none; } }
/* Keep CTA geometry steady; move only the arrow for a fluid hover. */
:root { --concept-hover-ease: cubic-bezier(.22, 1, .36, 1); }
:is(.g-btn, .g-btn-light, .g-navcta) {
  transition: background-color .38s ease, color .38s ease, border-color .38s ease, transform .5s var(--concept-hover-ease);
}
:is(.g-btn, .g-btn-light):is(:hover, :focus-visible, :active) { column-gap: 14px; padding-right: 26px; }
.g-navcta:is(:hover, :focus-visible, :active) { column-gap: 12px; padding-right: 18px; }
.g-link { transition: gap .55s var(--concept-hover-ease), color .35s ease, border-color .35s ease; }
:is(.g-btn, .g-btn-light, .g-navcta) .g-arrow {
  transform: translateX(0);
  transition: transform .55s var(--concept-hover-ease);
}
.g-list-row { transition: background-color .4s ease, color .35s ease; }
.g-work { transition: transform .55s var(--concept-hover-ease), opacity .4s ease; }
.g-work-img { transition: transform .7s var(--concept-hover-ease), opacity .45s ease; }
.g-work-reveal { transition: transform .6s var(--concept-hover-ease); }
@media (hover: hover) and (pointer: fine) {
  :is(.g-btn, .g-btn-light, .g-navcta):hover .g-arrow { transform: translateX(7px); }
}
:is(.g-btn, .g-btn-light, .g-navcta):focus-visible .g-arrow { transform: translateX(7px); }
.g-btn:focus-visible { background-color: #1e1e1e; }
.g-navcta:focus-visible { background-color: #1e1e1e; border-color: #1e1e1e; }
.g-btn-light:focus-visible { color: var(--green); background-color: #fff; }

/* Preserve the original hover effects; soften their timing only. */
:is(.g-navlink, .g-foot-link, .g-cta-a-dark, .g-svc-ref, .concept-footer-legal-link, .concept-mobile-link, .concept-mobile-contact, .cs-link, .cl-note, .k-ch, .k-main, .g-next, .g-svc, .concept-footer-top) {
  transition: transform .55s var(--concept-hover-ease), color .35s ease, background-color .35s ease, border-color .35s ease, padding-left .55s var(--concept-hover-ease), opacity .4s ease, box-shadow .4s ease;
}
:is(.g-chip, .g-chip-on, .g-submit, .concept-project-lead-submit, .concept-project-lead-submit-native, .concept-mobile-toggle) {
  transition: transform .5s var(--concept-hover-ease), color .35s ease, background-color .35s ease, border-color .35s ease, background-position .55s var(--concept-hover-ease), column-gap .55s var(--concept-hover-ease), padding-right .55s var(--concept-hover-ease);
}
.concept-footer-up-svg, .concept-footer-top-arrow { transition: transform .55s var(--concept-hover-ease); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Keep short, subtle hover transitions instead of making them jump. */
  *, *::before, *::after { animation: none !important; transition-duration: .3s !important; }
  .g-work-img { transition: transform .4s ease-out, opacity .3s ease !important; }
  .g-work-reveal, .g-navline { transition: transform .35s ease-out !important; }
  .concept-footer-top-arrow { transition: transform .3s ease-out !important; }
  :is(.g-navlink, .g-foot-link, .g-cta-a-dark, .g-svc-ref, .concept-footer-legal-link, .concept-mobile-link, .concept-mobile-contact, .cs-link, .cl-note, .k-ch, .k-main, .g-chip, .g-chip-on, .g-submit, .g-btn, .g-btn-light, .g-navcta, .g-link, .g-list-row, .g-next, .g-svc, .concept-footer-top, .concept-project-lead-submit, .concept-project-lead-submit-native) {
    transition: transform .25s ease-out, color .2s ease, background-color .2s ease, border-color .2s ease, gap .25s ease-out !important;
  }
  :is(.g-btn, .g-btn-light, .g-navcta) .g-arrow { transition: transform .25s ease-out !important; }
  :is(.g-btn, .g-btn-light, .g-navcta):focus-visible .g-arrow { transform: translateX(3px); }
  @media (hover: hover) and (pointer: fine) {
    :is(.g-btn, .g-btn-light, .g-navcta):hover .g-arrow { transform: translateX(3px); }
  }
}

/* GSAP owns menu motion so CSS transitions do not fight each animation frame. */
.concept-mobile-panel.menu-gsap,
.concept-mobile-toggle.menu-gsap .concept-mobile-bar,
.concept-mobile-panel.menu-animating :is(.concept-mobile-kicker, .concept-mobile-link, .concept-mobile-contact, .concept-mobile-signoff) {
  transition: none !important;
}

/* Contact forms */
.contact-verification,.contact-status { grid-column: 1 / -1; }
.contact-status { min-height: 1.5em; margin-top: 12px; }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
form[data-contact-form] [type="submit"]:disabled { opacity: .55; cursor: wait; }

.g-form .contact-field-hint { font: inherit; font-size: .8em; font-weight: 300; opacity: .32; white-space: nowrap; }

.g-form .contact-project-select { width: 100%; color: inherit; border-radius: 0; cursor: pointer; }
.g-form .contact-project-select:invalid { color: #767676; }
.g-form .contact-project-select option { color: #242424; background: #f5f5f3; }

/* Match field values and dropdown text to the 14px form labels. */
.g-form :is(.g-flabel, .g-input, .g-textarea, .contact-project-select, .contact-project-select option) {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
}

.g-form :is(.g-field, .g-field-wide) .g-flabel { font-weight: 500; }

/* Progressive enhancement of the project selector. */
.contact-select { position: relative; }
.g-form .contact-select-native { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.g-form .contact-select-button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer; margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; font-weight: 300; line-height: 1.55;
}
.contact-select-button::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .3s ease; flex: 0 0 auto; margin-right: 5px; }
.contact-select.is-open .contact-select-button::after { transform: rotate(225deg); }
.contact-select-button.is-placeholder { color: #767676; }
.contact-select-button:focus-visible { outline: 1px solid #214f40; outline-offset: 4px; }
.contact-select-panel { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px); visibility: hidden; transition: grid-template-rows .32s cubic-bezier(.22,1,.36,1), opacity .23s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility 0s .32s; }
.contact-select.is-open .contact-select-panel { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); visibility: visible; transition-delay: 0s; }
.contact-select-options { min-height: 0; overflow: hidden; background: #f5f5f3; box-shadow: 0 12px 28px #00000014; outline: none; }
.contact-select-option { padding: 11px 14px; cursor: pointer; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; color: #242424; transition: background-color .18s ease, color .18s ease; }
.contact-select-option.is-active { background: #e4ebe6; }
.contact-select-option[aria-selected="true"] { color: #214f40; font-weight: 300; }
@media (prefers-reduced-motion: reduce) { .contact-select-panel { transition: opacity .15s ease, visibility 0s .15s; transform: none; } .contact-select.is-open .contact-select-panel { transition-delay: 0s; } .contact-select-button::after { transition: none; } }

/* Spring-like opening: stretch, settle, then rest at the natural size. */
.g-form .contact-select .contact-select-panel {
  display: block;
  grid-template-rows: none;
  opacity: 1;
  transform-origin: 50% 0;
  transform: scaleY(0);
  clip-path: none;
  visibility: hidden;
  transition: transform .22s ease-in, visibility 0s linear .22s !important;
}
.g-form .contact-select.is-open .contact-select-panel {
  transform: scaleY(1);
  visibility: visible;
  transition-delay: 0s !important;
  animation: contact-select-bounce .62s both !important;
}
@keyframes contact-select-bounce {
  0% { transform: scaleY(.06); animation-timing-function: cubic-bezier(.2,.75,.3,1); }
  48% { transform: scaleY(1.08); animation-timing-function: ease-in-out; }
  70% { transform: scaleY(.97); animation-timing-function: ease-in-out; }
  87% { transform: scaleY(1.012); animation-timing-function: ease-out; }
  100% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .g-form .contact-select.is-open .contact-select-panel { animation-duration: .48s !important; }
}

.g-form :is(.g-field, .g-field-wide) .g-flabel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.g-form .contact-field-hint { flex: 0 0 auto; margin-left: auto; }

/* Keep the panel visible while it retracts, then hide it after animationend. */
.g-form .contact-select.is-closing .contact-select-panel {
  visibility: visible;
  transition: none !important;
  animation: contact-select-close .38s both !important;
}
@keyframes contact-select-close {
  0% { transform: var(--contact-close-start, scaleY(1)); animation-timing-function: ease-out; }
  24% { transform: scaleY(1.025); animation-timing-function: cubic-bezier(.55,0,.75,.25); }
  100% { transform: scaleY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .g-form .contact-select.is-closing .contact-select-panel { animation-duration: .3s !important; }
}

/* Home services: summaries replace the repeated links to /servicios. */
.home-service { border-bottom: 1px solid var(--rule); }
.home-service > summary.g-list-row {
  grid-template-columns: 56px 1fr;
  border-bottom: 0;
  width: 100%;
  cursor: pointer;
  list-style: none;
}
.home-service > summary::-webkit-details-marker { display: none; }
.home-service > summary::marker { content: ""; }
.home-service > summary:focus-visible { outline: 1px solid var(--green); outline-offset: -3px; }
.home-service[open] > summary { color: var(--green); }
.home-service-body { margin-left: 96px; margin-right: 16px; transition: none !important; }
.home-service-copy { padding-bottom: 28px; }
.home-service-copy .g-list-desc { margin: 0; max-width: 56ch; }
@media (max-width: 767px) {
  .home-service > summary.g-list-row { grid-template-columns: 40px 1fr; }
  .home-service-body { margin-left: 80px; }
}

/* Organic service family: rounded forms, stronger weight and a shared green tint. */
.service-icon { display: inline-flex; align-self: center; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--green); }
.service-icon svg { display: block; width: 36px; height: 36px; overflow: visible; transform-origin: center; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; }
.service-icon svg :is(path,g,circle,rect) { transform-box: fill-box; transform-origin: center; transition: transform .55s cubic-bezier(.22,1,.36,1), fill-opacity .4s ease !important; }
.home-service:is(:hover, :focus-within) .service-icon-1 .service-icon-detail { transform: translateY(-1.5px); }
.home-service:is(:hover, :focus-within) .service-icon-1 .service-icon-mark { transform: translate(1px,-1px); }
.home-service:is(:hover, :focus-within) .service-icon-2 svg { transform: rotate(-5deg); }
.home-service:is(:hover, :focus-within) .service-icon-2 .service-icon-detail { transform: translateY(-1px); }
.home-service:is(:hover, :focus-within) .service-icon-3 .service-icon-loop-a { transform: translate(1px,1px); }
.home-service:is(:hover, :focus-within) .service-icon-3 .service-icon-loop-b { transform: translate(-1px,-1px); }
.home-service:is(:hover, :focus-within) .service-icon-4 .service-icon-renew { transform: rotate(35deg); }
@media (prefers-reduced-motion: reduce) {
  .service-icon svg, .service-icon svg :is(path,g,circle,rect) { transition-duration: .3s !important; }
}

.traj-counter-value { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; }
.traj-counter-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.study-reveal-word { display: inline-block; white-space: nowrap; }
.study-reveal-letter { transition: none !important; }
.study-reveal-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* React Bits Waves is loaded only near the home call to action. */
.g-cta-dark.g-cta-ambient { position: relative; isolation: isolate; overflow: hidden; }
.g-cta-ambient > .g-wrap { position: relative; z-index: 1; }
.concept-waves-host { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.g-cta-ambient.waves-ready { background-image: none; }