/* HARMONÍA — CSS completo, fondo azul sin marco.
   Reemplaza styles.css. Puedes conservar el enlace a theme-azul.css.
   Las rutas son relativas a este CSS, situado en harmonia/.
   IMPORTANTE: confirma los nombres reales de tus fuentes en assets/fonts/.
   Se prueban extensiones WOFF2, WOFF, OTF y TTF para los nombres indicados.
*/
@font-face  {
  font-family: 'Commuters Sans';
  src: url('./assets/fonts/commuterssans-regular.woff2') format('woff2'), url('./assets/fonts/commuterssans-regular.woff') format('woff'), url('./assets/fonts/commuterssans-regular.otf') format('opentype'), url('./assets/fonts/commuterssans-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face  {
  font-family: 'Sofia Pro';
  src: url('./assets/fonts/Sofia Pro Light.woff2') format('woff2'), url('./assets/fonts/Sofia Pro Light.woff') format('woff'), url('./assets/fonts/Sofia Pro Light.otf') format('opentype'), url('./assets/fonts/Sofia Pro Light.ttf') format('truetype'), url('./assets/fonts/Sofia-Pro-Light.woff2') format('woff2'), url('./assets/fonts/Sofia-Pro-Light.otf') format('opentype'), url('./assets/fonts/Sofia-Pro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
:root {
  --navy:#001a70;
  --blue:#4c7bb9;
  --gray:#9c9fad;
  --ink:#101c42;
  --paper:#f5f6f9
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Sofia Pro',Arial,sans-serif;
  font-size:16px;
  line-height:1;
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px
}
header {
  height:108px;
  display:flex;
  align-items:center;
  gap:45px;
  margin:0 5.5%;
}
.brand {
  margin-right:auto;
  display:flex
}
.brand img {
  width:227px
}
nav {
  display:flex;
  gap:30px;
  font-size:14px
}
nav a {
  padding:12px 0;
  position:relative
}
nav a[aria-current]:after {
  content:'';
  position:absolute;
  bottom:2px;
  left:0;
  width:22px;
  height:2px;
  background:var(--navy)
}
.nav-contact {
  border-radius:30px;
  padding:11px 20px;
  font-size:14px
}
.nav-contact span {
  margin-left:23px
}
.menu-toggle {
  display:none
}
.skip {
  position:fixed;
  top:-70px;
  background:white;
  padding:12px;
  z-index:20
}
.skip:focus {
  top:0
}
section {
  padding:90px 6%
}


/* Separación entre líneas de los textos */
body p,
body li {
  line-height: 1.1 !important;
}

h1{
  font-family: 'commuterssans-regular';
  line-height:1;
  letter-spacing:.09em;
  font-weight:500;
  margin:0;
  text-transform: uppercase;
}  
h2{
  font-family: 'commuterssans-regular';
  line-height:1;
  letter-spacing:.09em;
  font-weight:500;
  margin:0;
  text-transform: uppercase;
}
  
h3,h4{
  font-family:'Sofia Pro',Arial,sans-serif;
  line-height:1;
  letter-spacing:.03em;
  font-weight:500;
  margin:0;
}

h1 {
  font-size:clamp(50px,4.3vw,50px)
}
h2 {
  font-size:clamp(40px,3.1vw,40px)
  
}
h3 {
  font-size:clamp(38px,3.1vw,38px)
}
h4 {
  font-size:clamp(20px,3.1vw,20px)
}
em {
  font-style:normal;
  color:#83b8ff;
}
p {
  margin:24px 0
  line-height: 1.0;
}
.eyebrow {
  font-family: 'Commuters Sans', Arial, sans-serif !important;
  font-size:11px;
  letter-spacing:.17em;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
  line-height:1;
  color: #578bcf!important;
}
.eyebrow i {
  height:6px;
  width:6px;
  border-radius:50%;
  background:var(--blue);
}


.lead {
  font-size:19px;
  color:#59617b;
  line-height:1;
  max-width:540px
}
.statement {
  font-size:25px;
  line-height:1;
  letter-spacing:-.025em
}
.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  background:var(--navy);
  border:1px solid transparent;
  color:white;
  border-radius:40px;
  padding:15px 23px;
  font-size:16px;
  cursor:pointer;
  transition:transform .2s,background .2s
}
.button:hover {
  background:var(--blue);
  transform:translateY(-3px)
}
.button span {
  font-size:18px;
  line-height:1
}
.button.light {
  background:white;
  color:var(--navy)
}
.text-link {
  font-size:13px;
  font-weight:500;
  border-bottom:1px solid #001a7033;
  padding-bottom:5px;
  display:inline-block
}
.text-link:hover {
  color:var(--blue)
}
.hero {
  position:relative;
  padding-top:240px;
  padding-bottom:0;
  overflow:hidden;
  min-height:740px
}
.hero-copy {
  position:relative;
  width:58%;
  z-index:2
}
.hero h1 {
  font-size:clamp(43px,4.25vw,68px);
  letter-spacing:-.055em
}
.hero .lead {
  max-width:435px;
  margin-top:25px
}
.actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:32px
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.14em;
  border-top:1px solid #001a7020;
  margin-top:60px;
  padding:24px 0
}
.sculpture {
  position:absolute;
  right:-1%;
  top:20px;
  width:50%;
  height:610px;
  background:radial-gradient(ellipse,#c6d7ee88 0,transparent 65%)
}
.platform {
  position:absolute;
  width:86%;
  height:180px;
  border-radius:50%;
  background:linear-gradient(160deg,#ecf2fa,#9baac4 52%,#eff3ff 64%,#7185ab);
  bottom:60px;
  left:5%;
  box-shadow:0 35px 30px -20px #001a7040;
  transform:rotate(-8deg)
}
.pillar {
  position:absolute;
  width:105px;
  border-radius:55px 55px 30px 30px;
  background:linear-gradient(90deg,#153575,#92b2df 40%,#284e94 70%,#00154e);
  box-shadow:inset 0 3px 3px #ffffffaa,12px 20px 28px #001a7030;
  z-index:2;
  transform:rotate(-8deg)
}
.pillar:before {
  content:'';
  height:43px;
  border-radius:50%;
  position:absolute;
  top:0;
  left:0;
  right:0;
  background:linear-gradient(130deg,#b6d0ee,#345d9a);
  border:1px solid #b6cce8
}
.p1 {
  height:190px;
  left:15%;
  bottom:110px
}
.p2 {
  height:315px;
  left:39%;
  bottom:130px
}
.p3 {
  height:250px;
  left:63%;
  bottom:145px;
  background:linear-gradient(90deg,#607398,#eef0f9 40%,#9ea1b0 75%,#6d7b9b)
}
.orb {
  width:105px;
  height:105px;
  position:absolute;
  top:35px;
  left:29%;
  border-radius:50%;
  background:radial-gradient(circle at 32% 25%,#fff,#a6c7f0 22%,#3c5f9d 60%,#001a70);
  box-shadow:20px 30px 40px #001a701a;
  animation:float 7s ease-in-out infinite
}
.orbit {
  position:absolute;
  width:90%;
  height:220px;
  left:0;
  top:245px;
  transform:rotate(-25deg);
  border:1px solid #4c7bb94a;
  border-radius:50%;
  z-index:3;
  pointer-events:none
}
.o2 {
  transform:rotate(-35deg);
  width:100%;
  top:215px;
  border-color:#9ea1b05c
}
.art-tag {
  position:absolute;
  z-index:4;
  background:#ffffffaa;
  backdrop-filter:blur(12px);
  border:1px solid #fff;
  border-radius:9px;
  padding:14px 18px;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--navy);
  box-shadow:0 10px 30px #001a7010
}
.t1 {
  top:165px;
  left:6%;
  transform:rotate(-7deg)
}
.t2 {
  top:70px;
  right:8%;
  transform:rotate(6deg)
}
.t3 {
  bottom:92px;
  right:5%;
  transform:rotate(-5deg)
}
@keyframes float {
  50% {
    transform:translateY(15px)
  }
}


/* Línea divisora con sombra suave */
.section-divider {
  width: 85%;
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.4),
    transparent
  );
  filter: blur(1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9%;
  background:white;
  padding-top: 180px;
  padding-bottom: 120px;
}

.intro .statement {
  margin-top:35px
}

.intro p.statement {
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.05em !important;
  text-align: justify;

}



.method {
  background:#e9edf5
}
.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px
}
.section-head p {
  max-width:235px
}

.method .card h3 {
  font-size: 30px;
  line-height: 1.1;
  color: var(--navy);
  font-weight:600 !important;
}

.method a.button-navy {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
  padding: 14px 24px;
  align-items: center;
  padding: 14px 24px;
  border: none;
  border-radius: 40px;
  background: #001a70;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}


.method a.button-navy:hover,
.method a.button-navy:focus-visible {
  background: #4c7bb9;
  color: #fff;
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:42px 0
}
.card {
  padding:35px 29px 40px;
  border:1px solid #001a7020;
  border-radius:18px;
  background:#ffffff60;
  min-height:245px
}
.num {
  font-size:11px;
  letter-spacing:.1em;
  color:var(--blue)
}
.card h3 {
  margin:40px 0 18px
}
.card p {
  color:#59617b;
  margin:0;
  line-height:1.3;
}

/* ====================================
   COMPROMISO HARMONÍA
   ==================================== */

.trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  padding: 130px 6% 130px;
  color: #fff;
  text-align: center;
}

/* Etiqueta superior */
.trust .eyebrow {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 10px;
  width: auto;
  margin: 0;
  padding: 0;
  transform: none;
}

/* Frase y comillas: tres columnas */
.trust .trust-phrase {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 70px;
  align-items: center;
  align-self: center;
  column-gap: 16px;

  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0;

  font-size: 42px;
  line-height: 1.0;
  text-align: center;
  text-transform: none;
}

/* Texto central */
.trust .trust-phrase > .trust-text {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  padding: 0 40px 0 40px;
  text-align: center;
}

/* Comillas decorativas */
.trust .trust-phrase::before,
.trust .trust-phrase::after {
  position: static;
  display: block;
  align-self: center;
  justify-self: center;

  margin: 0;
  padding: 0;

  font-family:'commuterssans-regular' !important;
  font-size: 200px;
  font-weight: 400 !important;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  color: #b9d4fa;
  opacity: 40%;

  transform: translateY(0.2em);
}

/* Apertura */
.trust .trust-phrase::before {
  content: "“";
  grid-column: 1;
  grid-row: 1;
}

/* Cierre */
.trust .trust-phrase::after {
  content: "”";
  grid-column: 3;
  grid-row: 1;
}


/* Ajuste para celular */
@media (max-width: 760px) {
  .trust {
    gap: 20px;
    padding: 60px 6%;
  }

  .trust .trust-phrase {
    grid-template-columns: 35px minmax(0, 1fr) 35px;
    column-gap: 8px;
    font-size: 26px;
  }

  .trust .trust-phrase::before,
  .trust .trust-phrase::after {
    font-size: 80px;
  }
}
.quote {
  font-family:'Sofia Pro';
  color:#8baee2;
  font-size:160px;
  line-height:0.2;
}
.trust h2 {
  font-size:38px;
  line-height:1.4;
  max-width:950px;
  letter-spacing:-.035em
}
.trust .eyebrow {
  grid-column:2;
  margin:15px 0 0;
  color:#578bcf;
}
.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9%;
  align-items: center;
  padding: 180px 6% 180px;
  text-align: left;
}

.cta .eyebrow {
  justify-content: flex-start;
}

.cta h2 {
  margin: 0;
  color: var(--navy)
}

.cta h3 {
  margin: 0;
  color: var(--navy)
}
.cta-right p {
  margin: 0 0 25px;
  font-size: 18px !important;
  text-align: justify;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: #59617b !important;
}

.cta-right .button {
  width: fit-content;
}

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

.cta .button:hover,
.cta .button:focus-visible {
  background: #4c7bb9;
  color: #fff;
}

/* Footer alineado en una fila */
footer.footer-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding: 100px 6%;
  background: var(--ink);
}

.footer-inline .footer-brand {
  flex-shrink: 0;
}

.footer-inline .footer-brand img {
  display: block;
  width: 220px;
  height: auto;
}

.footer-inline .footer-contact,
.footer-inline .footer-social {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.footer-inline .eyebrow {
  margin: 0 0 8px;
}

.footer-inline .footer-copyright {
  max-width: 280px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* FIN Footer alineado en una fila */

.page-hero {
  padding-top:70px;
  padding-bottom:65px
}
.page-hero h1 {
  font-size:clamp(44px,5.8vw,86px)
}
.split {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:10%;
  margin-top:50px
}
.split p {
  margin:0
}
.abstract-band {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:80px;
  margin-top:65px;
  border-radius:24px;
  min-height:270px;
  background:var(--navy);
  color:white;
  letter-spacing:.14em;
  font-size:12px;
  overflow:hidden
}
.interlock {
  display:flex;
  position:relative;
  align-items:center;
  width:220px;
  height:220px
}
.interlock i {
  position:absolute;
  width:150px;
  height:150px;
  border:27px solid #7b9bc9;
  border-radius:50%;
  transform:rotateX(40deg) rotateY(-25deg);
  box-shadow:inset 5px 5px 10px #fff8,8px 8px 10px #0004
}
.interlock i+ i {
  left:80px;
  top:50px;
  border-color:#c5ccdc;
  transform:rotateX(-30deg) rotateY(30deg)
}
.purpose {
  background:white
}
.two-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6%;
  margin-top:45px
}
.two-cards article {
  padding-top:25px;
  border-top:1px solid #001a7033
}
.two-cards h2 {
  margin-top:30px;
  font-size:38px
}
.two-cards p {
  color:#59617b
}
.wide {
  max-width:750px;
  margin-top:35px
}
.services {
  padding-top:0
}
.service {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:10%;
  border-top:1px solid #001a7026;
  padding:65px 0
}
.service .statement {
  font-size:29px
}
.service p:not(.statement) {
  color:#59617b;
  max-width:540px
}
.service-symbol {
  height:220px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  perspective:600px
}
.service-symbol i {
  width:80px;
  height:130px;
  display:block;
  border-radius:16px;
  background:linear-gradient(140deg,#d6e8ff,#4c7bb9 60%,#001a70);
  box-shadow:inset 2px 2px 4px #fff8,15px 20px 20px #001a7020;
  transform:rotateY(-25deg) rotateZ(-15deg)
}
.s0 i:nth-child(2) {
  height:180px
}
.s0 i:nth-child(3) {
  height:95px
}
.s1 i {
  height:135px;
  width:115px;
  border-radius:50%;
  margin-left:-40px
}
.s2 i {
  width:100px;
  height:100px;
  border-radius:20px;
  transform:rotate(-35deg)
}
.s2 i:nth-child(2) {
  margin-top:-60px;
  background:linear-gradient(140deg,#fff,#9ea1b0)
}
.packages {
  padding-top:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:stretch
}
.package {
  display:flex;
  flex-direction:column;
  padding:35px 28px;
  border:1px solid #001a7026;
  border-radius:20px
}
.package:nth-child(2) {
  background:var(--navy);
  color:white
}
.package h2 {
  font-size:34px;
  margin:32px 0 0;
  min-height:113px
}
.package .lead {
  font-size:17px
}
.package:nth-child(2) .lead,.package:nth-child(2) .num {
  color:#c0d1ef
}
.includes {
  border-top:1px solid #9ea1b050;
  margin-top:auto;
  padding-top:25px;
  min-height:240px
}
.includes p {
  font-size:15px
}
.includes .eyebrow {
  margin-bottom:15px;
  font-size:10px
}
.package .button {
  margin-top:25px
}
.contact-grid {
  background:white;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  padding-top:70px
}
.contact-grid>div>p {
  max-width:400px;
  color:#59617b
}
.contact-item {
  border-top:1px solid #001a7020;
  padding:22px 0 10px
}
.contact-item>span {
  display:block;
  font-size:10px;
  letter-spacing:.1em;
  margin-bottom:10px;
  color:#59617b
}
.contact-item a {
  font-size:clamp(13px,1.5vw,20px);
  word-break:break-word
}
.contact-item p {
  margin:0
}
small {
  font-size:12px;
  color:#687189;
  display:block;
  line-height:1.6
}
.social {
  display:flex;
  gap:35px;
  margin-top:30px;
  font-size:14px
}
form {
  background:var(--paper);
  padding:35px;
  border-radius:20px
}
form h3 {
  margin-bottom:30px
}
label {
  display:block;
  font-size:12px;
  margin:18px 0
}
input,select,textarea {
  display:block;
  width:100%;
  margin-top:8px;
  border:1px solid #001a7020;
  background:white;
  border-radius:8px;
  padding:13px;
  color:var(--ink);
  font-size:14px
}
textarea {
  resize:vertical
}
form .button {
  width:100%;
  margin:10px 0 15px
}
#form-status {
  font-size:13px;
  color:var(--navy)
}
@media(min-width:1600px) {
  body {
    max-width:1800px;
    margin:auto
  }
}
@media(max-width:1050px) {
  header {
    gap:22px
  }
  nav {
    gap:20px
  }
  .brand img {
    width:190px
  }
  .hero h1 {
    font-size:49px
  }
  .hero {
    min-height:720px
  }
  .actions {
    flex-direction:column;
    align-items:start;
    gap:15px
  }
  .sculpture {
    right:-6%;
    width:54%;
    top:65px
  }
  .pillar {
    width:85px
  }
  .packages {
    gap:13px
  }
  .package {
    padding:25px 20px
  }
  .package h2 {
    font-size:28px
  }
  .includes {
    min-height:270px
  }
  .abstract-band {
    gap:40px
  }
  {
  footer.footer-inline {
    flex-wrap: wrap;
  }
}
}
@media(max-width:760px) {
  footer.footer-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  header {
    height:85px;
    margin:0 6%;
    gap:16px;
    flex-wrap:wrap;
    position:relative;
    z-index:10
  }
  .brand img {
    width:175px
  }
  .nav-contact {
    display:none
  }
  .menu-toggle {
    display:block;
    border:0;
    background:none;
    color:var(--navy);
    font-size:13px;
    padding:10px
  }
  nav {
    display:none;
    position:absolute;
    top:84px;
    background:var(--paper);
    left:-7%;
    right:-7%;
    padding:25px 8%;
    box-shadow:0 20px 20px #001a7010;
    flex-direction:column;
    gap:5px
  }
  nav.open {
    display:flex
  }
  section {
    padding:60px 6%
  }
  .hero {
    padding-top:45px
  }
  .hero-copy {
    width:100%
  }
  .hero h1 {
    font-size:clamp(38px,8vw,57px)
  }
  .hero .lead {
    max-width:340px;
    font-size:17px
  }
  .sculpture {
    position:relative;
    width:100%;
    height:420px;
    top:auto;
    right:auto;
    margin-top:10px
  }
  .pillar {
    width:75px
  }
  .p1 {
    height:130px;
    bottom:95px
  }
  .p2 {
    height:215px;
    bottom:105px
  }
  .p3 {
    height:175px;
    bottom:115px
  }
  .platform {
    bottom:55px;
    height:125px
  }
  .orb {
    width:75px;
    height:75px;
    top:5px
  }
  .orbit {
    top:150px;
    height:155px
  }
  .o2 {
    top:140px
  }
  .art-tag {
    font-size:8px;
    padding:10px
  }
  .t1 {
    top:120px
  }
  .t2 {
    top:30px
  }
  .t3 {
    bottom:65px
  }
  .hero-bottom {
    margin-top:0;
    font-size:8px;
    gap:20px;
    padding:20px 0
  }
  .actions {
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:20px
  }
  .intro,.split,.two-cards,.contact-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .intro .statement {
    margin-top:0
  }
  .statement {
    font-size:22px
  }
  .section-head {
    display:block
  }
  .section-head p {
    max-width:none
  }
  .cards {
    grid-template-columns:1fr;
    margin:30px 0;
    gap:15px
  }
  .card {
    min-height:auto;
    padding:28px
  }
  .card h3 {
    margin:25px 0 15px
  }
  .trust {
    grid-template-columns:35px 1fr;
    gap:10px
  }
  .quote {
    font-size:80px
  }
  .trust h2 {
    font-size:27px
  }
  .trust .eyebrow {
    font-size:9px
  }
  .cta {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 60px 6%;
  }
}
  .footer-top {
    display:block
  }
  .footer-logo {
    width:220px
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:35px
  }
  .footer-grid>div:nth-child(2) {
    grid-column:1/-1;
    grid-row:2
  }
  .footer-bottom {
    flex-direction:column;
    gap:12px
  }
  .page-hero {
    padding-top:50px
  }
  .page-hero h1 {
    font-size:clamp(38px,8.7vw,65px)
  }
  .split {
    margin-top:30px
  }
  .abstract-band {
    margin-top:40px;
    gap:15px;
    min-height:210px;
    font-size:8px
  }
  .interlock {
    width:125px;
    height:155px;
    flex-shrink:0
  }
  .interlock i {
    width:100px;
    height:100px;
    border-width:18px
  }
  .interlock i+i {
    left:40px;
    top:45px
  }
  .two-cards h2 {
    font-size:32px
  }
  .service {
    grid-template-columns:1fr;
    gap:20px;
    padding:40px 0
  }
  .service-symbol {
    height:155px;
    max-width:310px;
    margin:20px auto
  }
  .service .statement {
    font-size:24px
  }
  .packages {
    grid-template-columns:1fr
  }
  .package h2 {
    min-height:0;
    font-size:34px
  }
  .package {
    padding:30px
  }
  .includes {
    min-height:0;
    margin-top:10px
  }
  .package .lead {
    min-height:0
  }
  .contact-grid {
    gap:40px
  }
  form {
    padding:25px 20px
  }
  .contact-hero h1 {
    font-size:10vw
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
/* Dimensiones intrínsecas del logotipo: evita saltos de diseño. */
.brand img,.footer-logo {
  height:auto
}
/* 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%,#4c7bb9,transparent 75%),radial-gradient(ellipse 70% 22% at 70% 72%,#9ea1b055,transparent 80%);
  background-repeat:no-repeat
}
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: #578bcf!important;
  color: #fff;
  letter-spacing: 0.01em;
}
.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:#578bcf;
}
.cta {
  background-color:radial-gradient(ellipse at 50% 100%,#4c7bb98a,transparent 75%)
}
section.cta {
  background: #fff;
  margin: 0px 4% 90px;
  padding: 120px 5% 120px;
  border-radius: 20px;
  
}
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 {
    color: #4c7bb9 !important;
}
  
.method h2,.purpose h2,.contact-grid h2 {
  color:#4c7bb9;
}
@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
  }

  .intro {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .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
}
/* Tipografías: prioridad sobre estilos anteriores de las dos hojas CSS. */
html body, html body *  {
  font-family: 'Sofia Pro', Arial, sans-serif !important;
  font-weight: 300 !important;
}
html body h1, html body h1 *  {
  font-family: 'Commuters Sans', Arial, sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
}
html body h2, html body h2 *  {
  font-family: 'Commuters Sans', Arial, sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
}