/* Harmonía — versión azul profundo. Paleta: #001a70, #4c7bb9, #9ea1b0. */
html {
    background: #001a70
}

body {
    max-width: none;
    width: 100%;
    margin: 0;
    background: #001a70;
    color: #fff;
    box-shadow: none;
    position: relative;
    isolation: isolate
}

body:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 25% at 85% 15%, #4c7bb970, transparent 75%), radial-gradient(ellipse 90% 23% at 5% 53%, #4c7bb9e6, transparent 75%), radial-gradient(ellipse 
    70% 22% at 70% 72%, #9ea1b055, transparent 80%);
}

header {
    border-color: #ffffff30
}

.brand {
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px
}

.brand img {
    width: 205px
}

nav a[aria-current]:after {
    background: #fff
}

.nav-contact {
    border-color: #ffffff60
}

.nav-contact:hover {
    background: #4c7bb9
}

.hero {
    background: transparent
}

.hero-copy {
    padding: 28px 0
}

.hero h1 em,
.page-hero em {
    color: #b9d4fa
}

.lead,
.cta p {
    color: #d3dff1
}

.hero-bottom {
    border-color: #ffffff30
}

.button {
    background: #fff;
    color: #001a70
}

.button:hover {
    background: #d9e7fa
}

.text-link {
    border-color: #ffffff65;
    color: inherit
}

.text-link:hover {
    color: #c7dffe
}

.eyebrow i {
    background: #b8d4fc
}

.sculpture {
    background: radial-gradient(ellipse, #4c7bb970, transparent 65%)
}

.orb {
    box-shadow: 15px 30px 60px #0004
}

.orbit {
    border-color: #ffffff45
}

.o2 {
    border-color: #9ea1b070
}

.art-tag {
    background: #ffffffdc;
    color: #001a70
}

.hero-bottom {
    color: #d6e0f2
}

.intro {
    background: transparent
}

.intro em {
    color: #c3dafa
}

.intro .statement {
    color: #e4ebf8
}

.method {
    background: #f5f6f9;
    color: #101c42;
    margin: 30px 4%;
    padding: 65px 5%;
    border-radius: 28px;
    position: relative
}

.method:before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 44%;
    height: 45px;
    background: #f5f6f9;
    border-radius: 26px 26px 0 0
}

.method>.eyebrow {
    position: relative
}

.method .text-link {
    color: #001a70;
    border-color: #001a7040
}

.method .eyebrow i {
    background: #4c7bb9
}

.method .cards {
    gap: 16px
}

.card {
    background: #ffffff08;
    border-color: #ffffff35
}

.card p {
    color: #dce6f7
}

.card .num {
    color: #c3dafa
}

.method .card {
    background: #e8ecf3;
    border: 0
}

.method .card p {
    color: #59617b
}

.method .num {
    color: #4c7bb9
}

.trust {
    background: transparent
}

.trust .quote {
    color: #c0d6f5
}

.trust .eyebrow {
    color: #d8e6fa
}

.cta {
    background: radial-gradient(ellipse at 50% 100%, #4c7bb98a, transparent 75%)
}

footer {
    background: #001a7066;
    border-color: #ffffff30
}

.footer-top p,
.footer-grid .eyebrow,
.footer-bottom {
    color: #d1daeb
}

.footer-grid,
.footer-bottom {
    border-color: #ffffff30
}

.footer-top>a {
    background: #fff;
    border-radius: 14px;
    padding: 15px 20px;
    display: inline-flex
}

.footer-logo {
    width: 230px
}

.abstract-band {
    background: #ffffff0d;
    border: 1px solid #ffffff26;
    box-shadow: inset 0 0 80px #4c7bb940
}

.purpose {
    background: #f5f6f9;
    color: #101c42;
    margin: 0 4%;
    border-radius: 25px;
    padding: 60px 5%
}

.two-cards p {
    color: #59617b
}

.two-cards article {
    border-color: #001a7033
}

.num {
    color: #bfd6f8
}

.purpose .num {
    color: #4c7bb9
}

.service {
    border-color: #ffffff40
}

.service p:not(.statement) {
    color: #d3dff1
}

.service-symbol i {
    box-shadow: inset 2px 2px 4px #fff8, 15px 20px 20px #0003
}

.package {
    background: #ffffff09;
    border-color: #ffffff40;
    backdrop-filter: blur(10px)
}

.package:nth-child(2) {
    background: #f5f6f9;
    color: #001a70
}

.package:nth-child(2) .lead {
    color: #59617b
}

.package:nth-child(2) .num {
    color: #4c7bb9
}

.package:nth-child(2) .button {
    background: #001a70;
    color: white
}

.package .includes {
    border-color: #9ea1b080
}

.contact-grid {
    margin: 0 4% 40px;
    border-radius: 25px;
    background: #f5f6f9;
    color: #101c42;
    padding: 65px 5%
}

.contact-grid form {
    background: #e6eaf2
}

.contact-grid .button {
    background: #001a70;
    color: #fff
}

.contact-grid .lead {
    color: #59617b
}

form .eyebrow {
    color: #59617b
}

.skip {
    color: #001a70
}

a:focus-visible,
button:focus-visible {
    outline-color: #9ea1b0
}

.method h2,
.purpose h2,
.contact-grid h2 {
    color: #001a70
}

@media(max-width:1050px) {
    header {
        gap: 18px
    }

    nav {
        gap: 16px
    }

    .brand img {
        width: 165px
    }

    .brand {
        padding: 9px 12px
    }
}

@media(max-width:760px) {
    body {
        margin: 0
    }

    .brand img {
        width: 155px
    }

    .brand {
        padding: 8px 10px;
        border-radius: 8px
    }

    header {
        height: 88px
    }

    .menu-toggle {
        color: white
    }

    nav {
        top: 87px;
        background: #001a70;
        border: 1px solid #ffffff30;
        box-shadow: 0 20px 30px #0004
    }

    .hero-copy {
        padding: 0
    }

    .hero h1 {
        font-size: clamp(34px, 7.8vw, 53px)
    }

    .method {
        margin: 25px 4%;
        padding: 45px 6%;
        border-radius: 20px
    }

    .method:before {
        height: 35px;
        top: -12px;
        width: 48%;
        border-radius: 20px 20px 0 0
    }

    .purpose {
        padding: 45px 6%
    }

    .contact-grid {
        padding: 40px 6%;
        margin-bottom: 25px
    }

    .footer-top>a {
        padding: 12px 16px
    }

    .footer-logo {
        width: 200px
    }

    .trust h2 {
        font-size: 25px
    }

    .page-hero h1 {
        font-size: clamp(36px, 8vw, 60px)
    }

    .contact-hero h1 {
        font-size: 9vw
    }
}

/* Fondo a todo el ancho, sin marco exterior, en todas las pantallas. */
html {
    background: #001a70
}

body {
    width: 100%;
    max-width: none;
    margin: 0;
    box-shadow: none
}

/* Quitar fondo blanco del logotipo del encabezado */
.brand {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
/* Quitar fondo blanco del logo del footer */
.footer-top > a {
  background: transparent;
  padding: 0;
  border-radius: 0;
}