:root {
        --bg: #efefef;
        --header-bg: #2f4f4f;
        --header-text: #dce3e3;
        --brand: #2f6060;
        --accent: #d88776;
        --text: #45696b;
        --muted: #dce2e2;
        --white: #ffffff;
        --whatsapp: #42bb53;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        background: radial-gradient(circle at 20% 10%, #f5f5f5, var(--bg) 60%);
        color: var(--text);
        font-family: "Barlow", sans-serif;
      }

      .site-header {
        height: 72px;
        background: var(--header-bg);
        font-family: "Raleway", sans-serif;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 56px;
        position: sticky;
        top: 0;
        z-index: 10;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--header-text);
        text-decoration: none;
      }

      .brand-logo {
        width: 32.25px;
        height: auto;
      }

      .brand-mark {
        width: 38px;
        height: 38px;
        border: 2px solid var(--header-text);
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 700;
        font-size: 18px;
      }

      .brand-text {
        font-size: 17px;
        line-height: 1;
        font-weight: 700;
      }

      .brand-sub {
        font-size: 17px;
        font-style: italic;
        font-weight: 400;
      }

      .menu {
        display: flex;
        align-items: center;
        gap: 28px;
      }

      .menu a {
        color: var(--header-text);
        text-decoration: none;
        font-size: 15px;
        font-weight: 400;
        padding: 8px 16px;
        border-radius: 999px;
        transition: background-color 0.2s ease, font-weight 0.2s ease;
      }

      .menu a:hover {
        background: rgba(220, 227, 227, 0.16);
        font-weight: 700;
      }

      .menu a.current {
        font-weight: 700;
      }

      .socials {
        display: flex;
        gap: 10px;
      }

      .social-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--header-text);
        color: var(--header-bg);
        display: grid;
        place-items: center;
        font-size: 22px;
        font-weight: 600;
        text-decoration: none;
      }

      .social-btn img {
        width: 40px;
        height: 40px;
        display: block;
      }

      .about-services {
        background: var(--header-text);
        overflow: hidden;
        padding-bottom: 70px;
      }

      .about-band {
        position: relative;
        background: var(--header-text);
        clip-path: polygon(0 3%, 100% 15%, 100% 86%, 0 100%);
        padding: 105px 24px 140px;
        transition: padding-bottom 0.35s ease;
      }

      .about-content {
        max-width: 1140px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(36px, 8vw, 120px);
      }

      .about-title {
        margin: 0;
        color: var(--header-bg);
        display: flex;
        flex-direction: column;
        line-height: 0.9;
        text-transform: uppercase;
        font-weight: 400;
      }

      .about-hola {
        font-family: "Bebas Neue", sans-serif;
        font-size: 101.07px;
        letter-spacing: 0.8px;
      }

      .about-somos {
        font-family: "Bebas Neue", sans-serif;
        font-size: 76.27px;
        letter-spacing: 0.8px;
      }

      .about-names {
        margin: 0;
        color: #e28b77;
        font-family: "Brittany Signature", "Brittany", cursive;
        font-size: 100px;
        line-height: 1;
        font-weight: 400;
        white-space: nowrap;
      }

      .split-btn {
        width: 68px;
        height: 63px;
        display: inline-block;
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0;
        line-height: 0;
        cursor: pointer;
        text-decoration: none;
        filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
      }

      .split-btn-svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      .split-btn-bg {
        fill: var(--split-bg, #dce4e3);
      }

      .split-btn-arrow {
        fill: var(--split-arrow, #166a6b);
      }

      .split-up .split-btn-svg {
        transform: rotate(180deg);
      }

      .about-open-btn {
        position: absolute;
        left: 50%;
        bottom: 48px;
        transform: translateX(-50%);
        --split-bg: #dce4e3;
        --split-arrow: #166a6b;
        transition: opacity 0.25s ease, transform 0.25s ease;
      }

      .about-band.is-open .about-open-btn {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) scale(0.92);
      }

      .about-details {
        max-width: 1200px;
        margin: 0 auto;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.55s ease, opacity 0.35s ease, margin-top 0.35s ease;
      }

      .about-band.is-open {
        clip-path: polygon(0 3%, 100% 12%, 100% 100%, 0 100%);
        padding-bottom: 90px;
      }

      .about-band.is-open .about-details {
        max-height: 3200px;
        opacity: 1;
        margin-top: 56px;
      }

      .about-intro {
        margin: 0 auto;
        max-width: 1160px;
        font-family: "Raleway", sans-serif;
        color: #2f4f4f;
        font-size: clamp(19px, 1.65vw, 39px);
        font-style: italic;
        text-align: center;
        line-height: 1.32;
      }

      .about-voices {
        margin-top: 56px;
        display: grid;
        grid-template-columns: minmax(130px, 1fr) minmax(420px, 2fr) minmax(130px, 1fr);
        align-items: end;
        gap: 22px;
      }

      .about-avatar-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .about-avatar {
        width: clamp(176px, 14vw, 240px);
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        border: 6px solid #2f4f4f;
        display: grid;
        place-items: center;
        font-family: "Brittany Signature", "Brittany", cursive;
        font-size: clamp(42px, 3.9vw, 72px);
        background: #dce3e3;
        color: #2f4f4f;
      }

      .about-avatar-right {
        color: #e28b77;
      }

      .about-bio-stack {
        display: grid;
        gap: 18px;
      }

      .about-bio {
        margin: 0;
        padding: 24px 34px;
        border-radius: 26px;
        font-family: "Raleway", sans-serif;
        font-size: clamp(17px, 1.4vw, 31px);
        text-align: center;
        line-height: 1.3;
      }

      .about-bio.accent {
        background: #e28b77;
        color: #dce3e3;
      }

      .about-bio.dark {
        background: #2f4f4f;
        color: #dce3e3;
      }

      .about-close-wrap {
        display: flex;
        justify-content: center;
        margin-top: 34px;
      }

      .about-close-btn {
        position: static;
        transform: none;
        --split-bg: #dce4e3;
        --split-arrow: #166a6b;
      }

      .services-band {
        position: relative;
        margin-top: -64px;
        background: var(--header-bg);
        clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 74%);
        min-height: 560px;
        padding: 120px 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 52px;
        transition: margin-top 0.35s ease;
      }

      .about-band.is-open + .services-band {
        margin-top: 0;
      }

      .services-grid {
        max-width: 1320px;
        margin: 0 auto;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(6, minmax(120px, 1fr));
        gap: 22px;
      }

      .service-item {
        text-align: center;
        color: var(--header-text);
      }

      .service-icon-wrap {
        width: clamp(118px, 7.8vw, 146px);
        height: clamp(118px, 7.8vw, 146px);
        border-radius: 50%;
        background: var(--header-text);
        margin: 0 auto 22px;
        display: grid;
        place-items: center;
      }

      .service-icon {
        width: clamp(64px, 4.6vw, 86px);
        height: clamp(64px, 4.6vw, 86px);
        display: block;
        object-fit: contain;
      }

      .service-title {
        margin: 0;
        font-family: "Raleway", sans-serif;
        font-size: clamp(13px, 1.05vw, 18px);
        font-weight: 400;
        letter-spacing: 0;
        white-space: nowrap;
        text-transform: uppercase;
        line-height: 1;
      }

      .scroll-arrow-dark {
        position: static;
        transform: none;
        --split-bg: #2f4f4f;
        --split-arrow: #dce4e3;
      }

      .projects-section {
        position: relative;
        background: #dce3e3;
        padding: 112px 24px 170px;
        overflow: hidden;
      }

      .projects-section::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 165px;
        background: #ffffff;
        clip-path: polygon(0 64%, 100% 0, 100% 100%, 0 100%);
        filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.55));
        pointer-events: none;
      }

      .projects-inner {
        max-width: 1320px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
      }

      .section-title {
        font-family: "Raleway", sans-serif;
        font-size: clamp(54px, 5.7vw, 70px);
        font-style: italic;
        font-weight: 200;
        color: #e28b77;
        line-height: 1;
      }

      .projects-title {
        margin: 0 0 34px;
      }

      .projects-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(220px, 1fr));
        gap: 16px;
      }

      .project-card {
        margin: 0;
        overflow: hidden;
        border-radius: 24px;
        background: #c6d0d0;
        border: 1px solid rgba(47, 79, 79, 0.2);
      }

      .project-card-link {
        position: relative;
        display: block;
        text-decoration: none;
      }

      .project-card img {
        width: 100%;
        aspect-ratio: 1 / 0.78;
        display: block;
        object-fit: cover;
      }

      .project-card-overlay {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 5.2% 5.4% 4.6%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
        color: #ffffff;
        font-size: 100%;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
      }

      .project-card-link:hover .project-card-overlay,
      .project-card-link:focus-visible .project-card-overlay {
        opacity: 1;
        transform: translateY(0);
      }

      .project-card-type {
        margin: 0;
        font-family: "Raleway", sans-serif;
        font-size: 180%;
        font-weight: 500;
        line-height: 1;
      }

      .project-card-meta {
        margin: 2.8% 0 0;
        font-family: "Raleway", sans-serif;
        font-size: 120%;
        font-style: italic;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        line-height: 1;
      }

      .contact-section {
        background: #ffffff;
        padding: 92px 24px 120px;
      }

      .contact-inner {
        max-width: 1320px;
        margin: 0 auto;
      }

      .contact-title {
        margin: 0 0 36px;
      }

      .contact-card {
        background: #c8cccc;
        border-radius: 32px;
        max-width: 1040px;
        padding: 38px 42px 30px;
      }

      .contact-heading {
        margin: 0 0 18px;
        font-family: "Raleway", sans-serif;
        font-size: clamp(38px, 4vw, 40px);
        font-style: italic;
        font-weight: 100;
        color: #2f4f4f;
        line-height: 1;
      }

      .contact-copy {
        margin: 0;
        max-width: 980px;
        font-family: "Raleway", sans-serif;
        font-size: clamp(18px, 1.55vw, 28px);
        line-height: 1.35;
        color: rgba(47, 54, 62, 0.8);
      }

      .contact-actions {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
      }

      .contact-link {
        color: #2f4f4f;
        font-family: "Raleway", sans-serif;
        font-weight: 700;
        font-size: clamp(18px, 1.35vw, 26px);
        text-decoration: none;
      }

      .site-footer {
        position: relative;
        background: #2f4f4f;
        clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
        margin-top: -44px;
        padding: 78px 24px 28px;
        z-index: 1;
      }

      .site-footer::before {
        content: "";
        position: absolute;
        left: 0;
        top: -20px;
        width: 100%;
        height: 24px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
        pointer-events: none;
      }

      .footer-to-top {
        position: absolute;
        top: 20px;
        right: 24px;
        --split-bg: #2f4f4f;
        --split-arrow: #dce4e3;
      }

      .footer-locations {
        max-width: 1320px;
        margin: 0 auto 18px;
        text-align: center;
        font-family: "Raleway", sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: #dce3e3;
        letter-spacing: 0.1px;
      }

      .footer-divider {
        max-width: 1320px;
        height: 1px;
        margin: 0 auto 18px;
        background: rgba(220, 227, 227, 0.45);
      }

      .footer-main {
        max-width: 1320px;
        margin: 0 auto 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
      }

      .footer-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #dce3e3;
        text-decoration: none;
      }

      .footer-brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 2px solid #dce3e3;
        display: grid;
        place-items: center;
        font-size: 17px;
        font-weight: 700;
      }

      .footer-brand-via {
        font-family: "Raleway", sans-serif;
        font-weight: 700;
        font-size: 17px;
        line-height: 1;
      }

      .footer-brand-sub {
        font-family: "Raleway", sans-serif;
        font-style: italic;
        font-size: 17px;
        line-height: 1;
      }

      .footer-nav {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 16px;
      }

      .footer-nav a {
        font-family: "Raleway", sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #dce3e3;
        text-decoration: none;
      }

      .footer-socials {
        max-width: 1320px;
        margin: 0 auto 16px;
        display: flex;
        justify-content: center;
        gap: 10px;
      }

      .footer-social-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #dce3e3;
        color: #2f4f4f;
        display: grid;
        place-items: center;
        font-family: "Barlow", sans-serif;
        font-size: 20px;
        font-weight: 600;
        text-decoration: none;
      }

      .footer-social-btn img {
        width: 30px;
        height: 30px;
        display: block;
      }

      .footer-legal {
        max-width: 1320px;
        margin: 0 auto;
        font-family: "Raleway", sans-serif;
        font-size: 12px;
        color: rgba(220, 227, 227, 0.8);
        text-align: center;
      }

      .hero {
        background: #ffffff;
        min-height: calc(100vh - 72px);
        display: grid;
        place-items: center;
        padding: 40px 24px;
      }

      .hero-inner {
        display: flex;
        align-items: center;
        gap: 20px;
        transform: translateY(-40px);
      }

      .logo {
        width: 210px;
        height: 330px;
      }

      .hero-copy {
        margin-top: 92px;
      }

      .hero-copy h1,
      .hero-copy p {
        margin: 0;
        text-transform: uppercase;
      }

      .hero-copy h1 {
        font-family: "Oswald", sans-serif;
        color: var(--brand);
        font-size: clamp(42px, 3.9vw, 76px);
        letter-spacing: 0.5px;
        line-height: 1;
      }

      .hero-copy p {
        font-family: "Oswald", sans-serif;
        color: var(--accent);
        font-size: clamp(42px, 4.5vw, 88px);
        line-height: 1;
      }

      .whatsapp {
        position: fixed;
        right: 36px;
        bottom: 32px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: var(--whatsapp);
        color: white;
        display: grid;
        place-items: center;
        text-decoration: none;
        box-shadow: 0 10px 22px rgba(66, 187, 83, 0.3);
        animation: pulse 2s infinite;
        z-index: 9999;
      }

      .whatsapp svg {
        width: 38px;
        height: 38px;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.06);
        }
        100% {
          transform: scale(1);
        }
      }

      @media (max-width: 1300px) {
        .site-header {
          padding: 0 22px;
          gap: 18px;
        }

        .menu {
          gap: 14px;
        }

        .menu a {
          font-size: 15px;
          padding: 8px 12px;
        }

        .brand-text {
          font-size: 17px;
        }

        .brand-sub {
          font-size: 17px;
        }

        .project-card-overlay {
          font-size: 90%;
        }

        .services-grid {
          gap: 16px;
        }

        .service-title {
          font-size: clamp(13px, 1.05vw, 18px);
        }
      }

      @media (max-width: 980px) {
        .site-header {
          height: auto;
          padding: 14px 18px;
          flex-wrap: wrap;
          justify-content: center;
          gap: 10px;
        }

        .menu {
          order: 3;
          width: 100%;
          justify-content: center;
          flex-wrap: wrap;
        }

        .hero {
          min-height: calc(100vh - 158px);
        }

        .hero-inner {
          flex-direction: column;
          transform: none;
          text-align: center;
        }

        .hero-copy {
          margin-top: -8px;
        }

        .logo {
          width: 140px;
          height: 220px;
        }

        .about-band {
          clip-path: polygon(0 2%, 100% 9%, 100% 90%, 0 100%);
          padding: 82px 18px 120px;
        }

        .about-band.is-open {
          clip-path: polygon(0 2%, 100% 8%, 100% 100%, 0 100%);
        }

        .about-content {
          flex-direction: column;
          text-align: center;
        }

        .about-hola {
          font-size: 56px;
        }

        .about-somos {
          font-size: 42px;
        }

        .about-names {
          font-size: 44px;
          white-space: normal;
        }

        .about-band.is-open .about-details {
          margin-top: 40px;
        }

        .about-intro {
          font-size: clamp(20px, 3.8vw, 30px);
        }

        .about-voices {
          margin-top: 34px;
          grid-template-columns: 1fr;
          gap: 20px;
        }

        .about-avatar {
          width: min(50vw, 220px);
        }

        .about-bio {
          padding: 20px 22px;
          font-size: clamp(18px, 3.8vw, 26px);
        }

        .services-band {
          clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 84%);
          min-height: 0;
          padding: 120px 18px;
          gap: 38px;
        }

        .services-grid {
          grid-template-columns: repeat(2, minmax(120px, 1fr));
          gap: 30px 20px;
          max-width: 650px;
        }

        .service-title {
          font-size: 13px;
        }

        .projects-section {
          padding: 92px 18px 130px;
        }

        .projects-section::after {
          height: 120px;
          clip-path: polygon(0 70%, 100% 0, 100% 100%, 0 100%);
          filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.5));
        }

        .projects-grid {
          grid-template-columns: repeat(2, minmax(140px, 1fr));
          gap: 14px;
        }

        .project-card-overlay {
          font-size: 82%;
        }

        .contact-section {
          padding: 74px 18px 88px;
        }

        .contact-card {
          border-radius: 28px;
          padding: 24px 18px 20px;
        }

        .contact-copy {
          max-width: none;
        }

        .site-footer {
          margin-top: -34px;
          padding: 64px 18px 22px;
        }

        .footer-to-top {
          top: 14px;
          right: 16px;
        }

        .footer-locations {
          margin-bottom: 14px;
          font-size: 13px;
        }

        .footer-divider {
          margin-bottom: 14px;
        }

        .footer-main {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 14px;
        }

        .footer-nav {
          justify-content: flex-start;
        }

        .footer-socials {
          margin-bottom: 12px;
        }
      }

      @media (max-width: 680px) {
        .projects-grid {
          grid-template-columns: 1fr;
        }

        .project-card-overlay {
          font-size: 74%;
        }
      }