@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(./fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(./fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(./fonts/montserrat-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(./fonts/montserrat-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

 footer, header, main, menu, nav, section {
  display: block;
}

audio {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden] {
  display: none;
}

a {
  background-color: #0000;
}

b {
  font-weight: bold;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

button {
  color: inherit;
  font: inherit;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  cursor: pointer;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  /* scroll suave al hacer clic en los links del nav (#proceso, #usuarios...) */
  scroll-behavior: smooth;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

h1, h2, h3 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

button, [type="button"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}


:root {
  --_dilo---neutral--white: white;
  --_dilo---font--body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --_dilo---neutral--black: black;
  --_dilo---font--heading: Montserrat, "Hanken Grotesk", system-ui, sans-serif;
  --_dilo---primary--gray: #e8e8e8;
  --_dilo---primary--blue: #475aa2;
  --_dilo---primary--green: #cedc6d;
  /* Radios: --radius-s para cajas de texto, botones y cards; --radius-l para imagenes y testimonios */
  --radius-s: .5rem;
  --radius-l: 1.5rem;
}

body {
  background-color: var(--_dilo---neutral--white);
  font-family: var(--_dilo---font--body);
  color: var(--_dilo---neutral--black);
  font-size: 1rem;
  line-height: 1.35;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 44px;
}

h2 {
  font-family: var(--_dilo---font--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

p {
  margin-bottom: 0;
}

a {
  padding: 0;
  text-decoration: underline;
}

ul {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

.main-wrapper {
  flex-flow: column;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.nav {
  border-bottom: 2px solid var(--_dilo---primary--gray);
  background-color: var(--_dilo---neutral--white);
  justify-content: center;
  width: 100%;
  height: 4.5rem;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.container {
  width: 100%;
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
  align-items: center;
}

.container-l {
  width: 100%;
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
  align-items: center;
}

.padding-global {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.brand {
  height: 1.5rem;
  object-fit:contain;
  color: var(--_dilo---primary--blue);
}

.img-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.section {
  width: 100%;
  min-height: 100vh;
  color: var(--_dilo---primary--blue);
  flex-flow: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 6rem;
  padding-bottom: 6rem;
  display: flex;
}

.section.section__hero {
  background-color: var(--_dilo---neutral--white);
  height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

.section.section__process {
  background-color: var(--_dilo---primary--blue);
  color: var(--_dilo---neutral--white);
  padding-bottom: 8rem;
}

.section.section__user {
  background-color: var(--_dilo---primary--gray);
  border-radius: 2.5rem;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  overflow: hidden;
}

.section.section__benefits {
  background-color: var(--_dilo---neutral--white);
  padding-bottom: 0;
  position: relative;
}

.section.section__testimonies {
  background-color: var(--_dilo---primary--gray);
  overflow: hidden;
}

.section.section__about {
  height:auto;
}

.section.section__footer {
  min-height: auto;
  color: var(--_dilo---neutral--white);
  margin-top: -2rem;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

.section.section__faq, .section.section__contact {
  padding-top: 10rem;
}

.hero__content-wrapper {
  grid-column-gap: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 100vh;
  display: grid;
}

.heading-style-h1 {
  font-family: var(--_dilo---font--heading);
  color: var(--_dilo---primary--blue);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.2;
}

.hero-header {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  flex-flow: column;
  display: flex;
}

.hero-info {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
  max-width:34rem;
}

.hero__content {
  gap: 2rem;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.hero__image-wrapper {
  z-index: 2;
  display:flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
  position: relative;
  padding-bottom:10vh;
}

.text-size-regular {
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
}

.text-size-small {
  margin-bottom: 0;
  font-size: .875rem;
  font-weight: 400;
}

.hero-description-box {
  border-left: 3px solid var(--_dilo---primary--blue);
  background-color: var(--_dilo---primary--gray);
  border-top-right-radius: var(--radius-s);
  border-bottom-right-radius: var(--radius-s);
  padding: .5rem 1rem;
}

.hero__cta-wrapper {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  margin-top: 1rem;
  display: flex;
}

.button-style {
  font-family: var(--_dilo---font--heading);
  border-style: solid;
  border-radius: var(--radius-s);
  justify-content: center;
  align-items: center;
  padding: 1.25rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  display: flex;
}

.small {
  font-size:14px;
  font-weight: 400;
  padding:.875rem 1rem;
  background-color: var(--_dilo---primary--blue);
  border: 1px solid var(--_dilo---primary--blue);
  color:var(--_dilo---neutral--white);
  transition: all 0.3s ease-in-out;
}

.button-style.small:hover {
  border: 1px solid var(--_dilo---primary--green);
  background-color: var(--_dilo---primary--green);
  color: var(--_dilo---neutral--black);
}

.button-style.primary {
  border: 1px solid var(--_dilo---primary--blue);
  background-color: var(--_dilo---primary--blue);
  color: var(--_dilo---neutral--white);
  transition: all 0.3s ease-in-out;
}

.button-style.primary:hover {
  border: 1px solid var(--_dilo---primary--green);
  background-color: var(--_dilo---primary--green);
  color: var(--_dilo---neutral--black);
}

.button-style.secondary {
  border: 1px solid var(--_dilo---primary--blue);
  color: var(--_dilo---primary--blue);
  transition: all 0.3s ease-in-out;
}

.button-style.secondary:hover {
  background-color: var(--_dilo---primary--green);
  border: 1px solid var(--_dilo---primary--green);
  color:var(--_dilo---neutral--black);
}

.heading-style-h2 {
  font-family: var(--_dilo---font--heading);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.h2-wrapper {
  padding-bottom: 5rem;
  display: flex;
}


.process_content-wrapper {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.process_img {
  grid-row: 1 / 3;
  width:90%;
}

.process_step {
  gap: 2.5rem;
  border-left: .25rem solid var(--_dilo---primary--green);
  flex-flow: column;
  justify-content: flex-start;
  width: 100%;
  padding-left: 1.5rem;
  display: flex;
}

.heading-style-h4 {
  font-family: var(--_dilo---font--heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.heading-style-h4.process {
  height: auto;
}

.icon-xxl {
  aspect-ratio: 1;
  width: 3.5rem;
  background-color: var(--_dilo---primary--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content:center;
  color:var(--_dilo---primary--blue);
}


.icon-s {
  aspect-ratio: 1;
  width: 1.5rem;
  color:var(--_dilo---primary--green);
}

.icon-m {
  aspect-ratio: 1;
  width:2rem;
  height:auto;
  flex: none;
  color:var(--_dilo---primary--green);
}

.process_heading {
  gap: 1.5rem;
  flex-flow: column;
  display: flex;
}

.nav_links {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  align-items: center;
  height: 4.5rem;
  display: flex;
}

/* Linea bajo el link del nav: crece desde la izquierda al pasar el mouse */
.nav_links {
  position: relative;
}

.nav_links::after {
  content: "";
  background-color: var(--_dilo---primary--blue);
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  inset: auto 0 0;
}

.nav_links:hover::after {
  transform: scaleX(1);
}

.nav_links.last::after {
  display: none;
}


.link-style {
  color: var(--_dilo---primary--blue);
  font-size: 1rem;
  font-weight: 300;
  text-decoration: none;
}

.link-style:hover {
  text-decoration: underline;
}

.link-style.footer {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--_dilo---neutral--white);
}

.vertical-divider {
  background-color: var(--_dilo---primary--gray);
  width: 1px;
  height: 1.35em;
}

.fondo-01 {
  width: 100%;
  height: 22vh;
  color: var(--_dilo---primary--blue);
  margin-bottom: -10px;
  position: absolute;
  inset: auto 0% 0%;
}


.user_content-wrapper {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  color: var(--_dilo---neutral--black);
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: stretch;
  container-type: inline-size;
}

.nav-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.fondo-02 {
  z-index: -1;
  width: 100%;
  color: var(--_dilo---primary--blue);
  margin-bottom: -10px;
  position: static;
  inset: 0% 0% auto;
}

.footer_wrapper {
  background-color: var(--_dilo---primary--blue);
  flex-flow: column;
  align-items: center;
  width: 100%;
  padding-top: 3rem;
  display: flex;
}

.svg {
  width: 100%;
  height: 100%;
  line-height: 0;
}

.footer_content-wrapper {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 3fr 7fr;
  display: grid;
  align-items: start;
}

.footer_content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.footer_content .footer_link {
  white-space: nowrap;
}

.footer_links {
  display: flex;
  flex-flow: row;
  gap: 2.5rem 5.5rem;
  flex: 1;
  min-width: 0;
}

.footer_links > .footer_link {
  min-width: 0;
}

.footer_links > .footer_link:first-child {
  flex-shrink: 0;
}

.footer_address {
  font-style: normal;
  font-weight: 300;
  line-height: 1.5;
  white-space: normal;
}

.footer_link {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: column;
  align-items: flex-start;
  list-style-type: none;
  display: flex;
}

.footer_img {
  display: flex;
  justify-content: center;
  flex: 0 1 15rem;
  min-width: 10rem;
}

.footer_img img {
  max-width: 100%;
  height: auto;
}

.footer_img img {
  object-fit: cover;
  max-height:20rem;
}

.text-weight-bold {
  font-weight: 700;
}

.text-size-medium {
  font-size: 1.25rem;
}

.footer_logos {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  width:100%;
}

.footer_last {
  gap:1rem;
  border-top: 1px solid var(--_dilo---primary--gray);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
  grid-column: 1 / -1;
}

.footer_logo {
  width: 15rem;
  color: var(--_dilo---primary--green);
}

.user_img {
  opacity: .7;
  height: 100%;
  position: absolute;
  inset: 0%;
  transition: filter .5s, transform .5s;
}

.user_card-wrapper {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  background-color: var(--_dilo---neutral--black);
  width: 100%;
  min-height: 20rem;
  color: var(--_dilo---neutral--white);
  border-radius: var(--radius-l);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  transition: width .5s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.user_text-header {
  flex-flow: column;
  justify-content: flex-start;
  padding: 2rem 1.5rem;
  transition: filter .5s;
  display: flex;
  position: relative;
}


.benefits_content-wrapper {
  color: var(--_dilo---neutral--black);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.h2-underline {
  padding-bottom: 1rem;
  position: relative;
}

.h2-underline::after {
  content: "";
  background-color: var(--_dilo---primary--green);
  height: .5rem;
  transform-origin: left;
  position: absolute;
  inset: auto 0 0;
}

.benefits_img-wrapper {
  aspect-ratio: 16 / 9;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.benefits_text-list {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.benefits_text-item {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  opacity: .2;
  flex-flow: column;
  width: 80%;
  max-width: 26rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
  transition: opacity .3s;
  display: flex;
}

.benefits_text-item.is-active {
  opacity: 1;
}

.heading-style-h3 {
  font-family: var(--_dilo---font--heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.benefit_heading {
  color: var(--_dilo---primary--blue);
}

.user_layout {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: row;
  display: flex;
}

.user_text-mask {
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  transition: transform 1s, opacity 1s;
  display: block;
}

.user_text-text {
  overflow: hidden;
}

.benefit_text-size {
  margin-bottom: 0;
  padding-top: .5rem;
  font-size: 17px;
  font-weight: 300;
}

.about_content-wrapper {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  color: var(--_dilo---neutral--black);
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: stretch;
  display: grid;
  container-type: inline-size;
}

/* Textos editables desde el CMS: separación entre párrafos */
.process_text p + p {
  margin-top: .375rem;
}

.hero_text p + p {
  margin-top: 1rem;
}

.faq_answer-inner p + p {
  margin-top: .75rem;
}

.faq_answer-inner a {
  color: var(--_dilo---primary--blue);
  font-weight: 300;
  text-decoration: none;
}

.faq_answer-inner a:hover {
  text-decoration: underline;
}

/* La cuarta imagen de "Lo que hace distinto a Dilo" se encuadra desde abajo */
.benefits_text-item:nth-child(4) .benefit_img-mobile img {
  object-position: 50% 100%;
}

.about_text-wrapper {
  grid-row-gap: 1.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 85%;
  padding-top: 2rem;
  display: flex;
}

.about_img {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-l);
  overflow: hidden;
}

.about_img-wrap {
  position: relative;
}

.about_decoration {
  aspect-ratio: 1;
  background-color: var(--_dilo---primary--green);
  border-radius: 10rem;
  width: 15vw;
  margin-top: -5vw;
  margin-left: -6vw;
  position: absolute;
  inset: 0% auto auto 0%;
  z-index: -1;
}

.testimonies_list.swiper-wrapper {
  color: var(--_dilo---primary--blue);
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  container-type: inline-size;
}

.testimonio_item {
  grid-column-gap: 1rem;
  row-gap: 1rem;
  flex-flow: column;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.testimonio_item.swiper-slide {
  flex: none;
  width: 33.3333%;
  height: auto;
  padding-left: .75rem;
  padding-right: .75rem;
}

.quote {
  justify-content: flex-end;
  width: 100%;
  line-height: 0;
  display: flex;
  transform: rotate(180deg);
}

.testimonio_quote {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.pages_content-wrapper {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 2fr 3fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.pages_sticky {
  grid-column-gap: 2rem;
  grid-row-gap: 3rem;
  flex-flow: column;
  display: flex;
  position: sticky;
  top: 8rem;
}

.pages_img {
  max-width: 75%;
}

.legal_content {
  padding-top: 5rem;
  color: var(--_dilo---neutral--black);
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
}

.faq_content {
  padding-top:5rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  color: var(--_dilo---neutral--black);
  flex-flow: column;
  display: flex;
}

.faq_item {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: var(--_dilo---primary--green);
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: var(--_dilo---primary--green);
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: var(--_dilo---primary--green);
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color: var(--_dilo---primary--green);
  text-wrap: stable;
  border-radius: .75rem;
}


.faq_question {
  cursor: pointer;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.faq_answer {
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows .35s ease;
  display: grid;
}

.faq_answer-inner {
  opacity: 0;
  min-height: 0;
  padding: 0 1.5rem;
  transition: opacity .3s ease, padding-bottom .35s ease;
  overflow: hidden;
}

.faq_item.is-open .faq_answer {
  grid-template-rows: 1fr;
}

.faq_item.is-open .faq_answer-inner {
  opacity: 1;
  padding-bottom: 1.5rem;
}

.faq-svg svg {
  transition: transform .35s ease;
}

.faq_item.is-open .faq-svg svg {
  transform: rotate(45deg);
}

.nav-link-style {
  color: var(--_dilo---primary--blue);
  padding: 0;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
}

.nav-link-style.footer {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--_dilo---neutral--white);
}

.benefits_img-item {
  z-index: 5;
  opacity: 0;
  border-radius: var(--radius-l);
  width: 100%;
  height: 100%;
  transition: opacity .3s;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.benefits_img-item.is-active {
  opacity: 1;
}

.benefits_img-list {
  width: 100%;
  height: 100%;
  position: relative;
}

.benefit_visual {
  justify-content: center;
  align-items: flex-start;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  padding-top: 5rem;
  display: flex;
  position: sticky;
  top: 7rem;
}

.benefits_text-wrapper {
  flex-flow: column;
  padding-top: 4rem;
  padding-bottom: 40vh;
}

.benefit_img-mobile {
  display: none;
}

.faq-svg {
  height: 100%;
  line-height: 0;
}

.nav-btn {
  height:3rem;
  padding:0.75rem;
}

.nav-btn-icon {
  width:1.5rem;
  height:1.5rem;
}

.nav_links-list {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  list-style-type: none;
  display: flex;
}

.mobile_menu-tag {
  display: none;
}

.hero__image {
  max-width:45vw;
}

.hero__image img {
  object-fit: contain;
}

.fondo-03 {
  z-index: 1;
  aspect-ratio: auto;
  width: 100%;
  height: 80vh;
  color: var(--_dilo---primary--green);
  transform-style: preserve-3d;
  margin-right: -5rem;
  position: absolute;
  inset: 0% 0% auto auto;
  transform: rotateX(0)rotateY(180deg)rotateZ(0);
}

.testimonios_wrapper.swiper {
  margin-left: -.75rem;
  margin-right: -.75rem;
  overflow: visible;
}

.testimonios-slider-wrapper {
  padding-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  position:static;
  color:var(--_dilo---primary--blue);
}
.testimonio_card {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  aspect-ratio: 4 / 5;
  border: 2px solid var(--_dilo---primary--blue);
  border-radius: var(--radius-l);
  flex-flow: column;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 1.5rem 1rem 2rem;
  display: flex;
}

/* Que mide */
.section.section__measure {
  min-height: auto;
}

.measure_list {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.measure_card {
  gap: 1rem;
  border: 1px solid var(--_dilo---primary--green);
  border-top-width: 4px;
  border-radius: var(--radius-s);
  color: var(--_dilo---neutral--black);
  flex-flow: column;
  align-items: flex-start;
  padding: 2rem 1.5rem;
  display: flex;
}

.measure_card .heading-style-h4 {
  margin: 0;
}

.measure_card .icon-m {
  color: var(--_dilo---primary--blue);
}

.measure_lead {
  color: var(--_dilo---neutral--black);
  text-align: center;
  margin-bottom: 3rem;
}

.measure_closing {
  margin-top: 4rem;
  margin-bottom: 0;
  line-height: 1.5;
}

.measure_highlight {
  background-color: var(--_dilo---primary--green);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .125rem .5rem;
}

/* Proximamente */
.soon {
  gap: 2.5rem;
  color: var(--_dilo---primary--blue);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 4rem 1rem;
  display: flex;
}

.soon_logo {
  width: 12rem;
  height: auto;
}

.soon_mide {
  gap: .75rem;
  flex-flow: column;
  align-items: center;
  margin-top: 2rem;
  display: flex;
}

.soon_mide-logo img {
  width: 9rem;
  height: auto;
  display: block;
}

/* =========================================================
   MOVIMIENTO (sutil). Con prefers-reduced-motion queda desactivado al final del archivo
   ========================================================= */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* Hero: entrada escalonada al cargar */
@keyframes fade-up { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.hero-header,
.hero-info,
.hero__cta-wrapper {
  animation: fade-up .8s var(--ease-out) both;
}

.hero-info { animation-delay: .1s; }
.hero__cta-wrapper { animation-delay: .2s; }

.hero__image {
  animation: fade-in 1s var(--ease-out) .15s both;
}

/* Hovers */
.button-style:active {
  transform: translateY(1px);
}

.measure_card {
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.measure_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem -1.25rem rgba(71, 90, 162, .35);
}

.about_img img {
  transition: transform 1.2s var(--ease-out);
}

.about_img:hover img {
  transform: scale(1.03);
}

.faq_item {
  transition: background-color .3s ease;
}

.faq_item:hover {
  background-color: rgba(206, 220, 109, .08);
}

/* Bloques que aparecen al hacer scroll (motion.js agrega .reveal y luego .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* El subrayado verde de los titulos se dibuja cuando aparece el titulo */
.reveal .h2-underline::after {
  transform: scaleX(0);
  transition: transform .55s var(--ease-out) .15s;
}

.reveal.is-visible .h2-underline::after {
  transform: scaleX(1);
}

/* Accesibilidad: foco visible con teclado y link para saltar el menu */
:focus-visible {
  outline: 2px solid var(--_dilo---primary--blue);
  outline-offset: 3px;
}

.section__footer :focus-visible {
  outline-color: var(--_dilo---neutral--white);
}

main:focus {
  outline: none;
}

.skip-link {
  z-index: 2000;
  background-color: var(--_dilo---primary--blue);
  color: var(--_dilo---neutral--white);
  border-radius: var(--radius-s);
  padding: .75rem 1rem;
  text-decoration: none;
  position: fixed;
  top: .5rem;
  left: .5rem;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Pagina 404 (usa el layout de .soon) */
.notfound_img {
  width: 9rem;
  height: auto;
}

.notfound_cta {
  justify-content: center;
  align-items: center;
  margin-top: 0;
}

/* ---- Site additions ---- */
.list-unstyled { padding-left: 0; list-style: none; }
.inline-block { max-width: 100%; display: inline-block; }
picture { display: contents; }

/* Navbar */
.nav { z-index: 1000; }
.nav-btn { display: none; background: none; border: 0; color: var(--_dilo---primary--blue); cursor: pointer; line-height: 0; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }

/* FAQ: real buttons, hidden answers leave the tab order */
h2.faq_heading { margin: 0; font: inherit; }
/* El boton ocupa todo el cuadro de la pregunta: el padding va en el boton, no en .faq_item */
.faq_question { background: none; border: 0; border-radius: .75rem; padding: 1.5rem; color: inherit; font: inherit; text-align: left; }
.faq_answer-inner { visibility: hidden; transition: opacity .3s ease, padding-bottom .35s ease, visibility 0s .35s; }
.faq_item.is-open .faq_answer-inner { visibility: visible; transition: opacity .3s ease, padding-bottom .35s ease, visibility 0s; }

/* Tally embed */
.contact_content iframe { display: block; border: 0; max-width: 100%; }


/* Topbar UC (Kit Digital) - el CSS del kit se escopa a #uc-global-topbar via topbar-scope.js */
.site-top { position: relative;}
/* Navbar sticky (el topbar no): wrapper de alto 0 que se pega arriba; el .nav sigue superpuesto como antes */
.nav-sticky { position: sticky; top: 0; height: 0; z-index: 1000; }
#uc-global-topbar { position: relative; z-index: 1001; }
#uc-global-topbar:not(.is-ready) { visibility: hidden; }

/* Logo Dilo: caja con proporcion propia (no depende del ancho del svg) y pegada a la izquierda */
.nav .brand:not(.brand-2) { flex: none; aspect-ratio: 100 / 22;}

/* Logo Mide UC: misma idea. Sin ancho definido, Safari resuelve el width:100% del img al ancho del PNG (2126px) */
.nav .brand-2 { display: block; flex: none; aspect-ratio: 2126 / 548; }
.nav .brand-2 .img-cover { display: block; object-fit: contain; }

/* Navbar desktop: los items no se encogen ni saltan de linea; si no caben, nav.js activa .is-compact */
.nav-container { gap: 2rem; }
.nav-menu { flex: none; }
.nav-link-style { white-space: nowrap; }
/* Hasta que nav.js mide, no se muestra el menu (evita ver un instante el menu desktop desbordado) */
.nav:not(.is-ready) .nav-menu { visibility: hidden; }

/* ---------- Navbar compacta (menu mobile): la activa nav.js cuando los links no caben ---------- */
.nav.is-compact {
  height: auto;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.nav.is-compact .nav-btn {
  display: block;
}

.nav.is-compact .nav-menu {
  border-bottom: 2px solid var(--_dilo---primary--gray);
  background-color: var(--_dilo---neutral--white);
  justify-content: flex-end;
  padding: 1rem 3rem 1rem 2rem;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.nav.is-compact.is-open .nav-menu {
  display: flex;
  animation: nav-in .25s ease;
}

.nav.is-compact .nav_links-list {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-flow: column;
  align-items: flex-end;
}

.nav.is-compact .nav_links {
  justify-content: flex-end;
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.nav.is-compact .nav_links::after {
  display: none;
}

.nav.is-compact .nav_links.last {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: .375rem;
  text-align: end;
  border-bottom-style: none;
  margin-top: 4rem;
}

.nav.is-compact .nav_links.last .brand.brand-2 {
  height: 2rem;
  margin-left: 0;
}

.nav.is-compact .nav-link-style {
  margin-left: 0;
  margin-right: 0;
}

.nav.is-compact .text-size-small.mobile_menu-tag {
  display: block;
}

#w-node-acbea899-0e6e-8974-a596-17e8ec3007b7-f3bc2f34, #w-node-_19f92204-42b2-f239-a737-feb5a701fb94-e99a9278, #w-node-d9ab6d9c-738f-59e8-3cc5-22322940a37c-e99a9278 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

/* =========================================================
   CONTAINER QUERIES
   ========================================================= */

@container (width > 60em) {
  .user_layout {
    flex-flow: row;
  }

  .user_card-wrapper {
    height: 25rem;
  }

  .user_card-wrapper:is(:hover, :focus-within) {
    width: 200%;
  }

  .user_card-wrapper:is(:hover, :focus-within) .user_img {
    filter: blur(3px);
    transform: scale(1.05);
    opacity:.5;
  }

  .user_text-mask {
    opacity: 0;
    padding-top: 16px;
  }

  .user_card-wrapper:is(:hover, :focus-within) .user_text-mask {
    opacity: 1;
    padding-top: 0;
  }
}

/* =========================================================
   MEDIA QUERIES
   ========================================================= */

/* ---------- Desktop (>= 992px) ---------- */
@media screen and (min-width: 992px) {
  .brand {
    height: 1.75rem;
    width: auto;
  }
}

/* ---------- Tablet (<= 991px) ---------- */
@media screen and (max-width: 991px) {
  /* Global */
  .padding-global {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .heading-style-h2 {
    font-size: 1.875rem;
  }

  .heading-style-h3 {
    font-size: 1.5rem;
  }

  .h2-wrapper {
    padding-bottom: 3rem;
  }

  .text-size-small {
    font-size: .75rem;
  }

  .text-size-medium {
    font-size: 1.125rem;
  }

  .icon-xxl {
    width: 2.5rem;
  }

  .measure_card {
    padding: 1.5rem 1rem;
  }

  .measure_card .heading-style-h4 {
    font-size: 1.25rem;
  }

  /* Hero */
  .section.section__hero {
    height: auto;
  }

  .hero__content-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: calc(4.5rem + 15vh);
  }

  .heading-style-h1 {
    font-size: 2rem;
  }

  .hero__content {
    z-index: 5;
    position: relative;
    width: auto;
  }

  .hero__image-wrapper {
    width: 100%;
    padding: 2rem 0;
    margin-right: 0;
  }

  .hero__image {
    margin-right: 0;
  }

  .hero-description-box {
    max-width: 24rem;
  }

  .fondo-01 {
    height: 15vh;
  }

  .fondo-03 {
    display: none;
  }

  /* Proceso */
  .process_content-wrapper {
    display: flex;
    flex-flow: column;
    row-gap: 1.5rem;
  }

  .process_img {
    display: none;
  }

  .process_step {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Usuarios */
  .user_layout {
    flex-flow: column;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .user_img {
    opacity: .6;
  }

  /* Beneficios */
  .benefits_content-wrapper {
    grid-template-columns: 1fr;
  }

  .benefits_text-list {
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;
    align-items: center;
  }

  .benefits_text-item {
    opacity: 1;
    max-width: none;
    padding-top: 0;
    padding-bottom: 0;
  }

  .benefit_visual {
    display: none;
  }

  .benefits_text-wrapper {
    padding-top: 0;
    padding-bottom: 6rem;
  }

  .benefit_img-mobile {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-l);
    display: block;
    overflow: hidden;
  }

  /* Testimonios */
  .testimonies_list {
    flex-flow: row;
  }

  .testimonio_item {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    aspect-ratio: auto;
  }

  .testimonio_item.swiper-slide {
    width: 60%;
  }

  .testimonio_card {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  /* Quiénes somos */
  .about_content-wrapper {
    grid-column-gap: 6rem;
    grid-row-gap: 6rem;
    flex-flow: column;
    grid-template-columns: 1fr;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .about_text-wrapper {
    max-width: 100%;
    padding-top: 0;
  }

  .about_img-wrap {
    width: 80%;
  }

  .about_decoration {
    margin-left: 0;
    margin-right: -6vw;
    inset: 0% 0% auto auto;
  }

  /* Páginas internas (FAQ / Contacto) */
  .pages_content-wrapper {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
  }

  .pages_sticky {
    position: static;
  }

  /* Footer */
  .section.section__footer {
    margin-top: 2rem;
  }

  .footer_content-wrapper {
    grid-column-gap: 2rem;
    grid-row-gap: 3rem;
    grid-template-columns: 1fr 1fr;
  }

  .footer_img img {
    max-height:14rem;
  }

  .footer_links {
    flex-flow: column;
  }
}

/* ---------- Mobile landscape (<= 767px) ---------- */
@media screen and (max-width: 767px) {
  /* Global */
  .padding-global {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section.section__faq,
  .section.section__contact,
  .section.section__user,
  .section.section__testimonies,
  .section.section__process,
  .section.section__benefits,
  .section.section__measure,
  .section.section__about {
    padding-top: 5rem;
  }

  /* Hero */
  .hero__content-wrapper {
    justify-content: flex-start;
    flex-direction: column;
    height: auto;
    padding-top: calc(4.5rem + 5vh);
  }

  .hero-info {
    max-width: 75%;
  }

  .hero__cta-wrapper {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    flex-flow: column;
    margin-top: 1rem;
    align-items: flex-start;
  }

  .button-style.primary,
  .button-style.secondary {
    padding: 1rem 1.5rem;
  }

  /* Proceso */
  .process_step {
    width: 100%;
    padding-left: 1rem;
  }

  /* Que mide: cards en columna */
  .measure_list {
    grid-template-columns: 1fr;
  }

  .measure_lead {
    margin-bottom: 2rem;
  }

  .measure_closing {
    margin-top: 3rem;
    margin-bottom: 0;
  }

  /* Usuarios */
  .user_text-header {
    padding: 2rem 1rem;
  }

  /* Beneficios / Usuarios / Quiénes somos */
  .benefits_text-item,
  .user_layout,
  .about_img-wrap {
    width: 100%;
  }

  .about_decoration {
    display: none;
  }

  /* Testimonios */
  .testimonies_list.swiper-wrapper {
    margin-left: 0;
    margin-right: 0;
  }

  /* Footer */
  .footer_content-wrapper {
    grid-row-gap: 3rem;
    flex-flow: column;
    align-items: stretch;
    display: flex;
  }

  .footer_img {
    display: none;
  }

  .footer_logos {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ---------- Mobile portrait (<= 479px) ---------- */
@media screen and (max-width: 479px) {
  /* Global */
  .heading-style-h2 {
    font-size: 1.75rem;
  }

  .heading-style-h4.process {
    font-size: 1.125rem;
  }

  .text-size-medium {
    font-size: 1rem;
  }

  .vertical-divider {
    display: none;
  }

  /* Hero */
  .hero__content-wrapper {
    padding-top: 6.5rem;
  }

  .heading-style-h1 {
    font-size: 1.625rem;
  }

  .hero-info,
  .hero-description-box {
    max-width: none;
  }

  /* Testimonios */
  .testimonio_item.swiper-slide {
    width: 95%;
    padding-left: .375rem;
    padding-right: .375rem;
  }

  /* FAQ */
  .faq_content,
  .legal_content {
    padding-top: 1rem;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .faq_question {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding: 1rem;
  }

  .faq_answer-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .faq_item.is-open .faq_answer-inner {
    padding-bottom: 1rem;
  }

  /* Footer */
  .footer_logo {
    width: 8rem;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
}