:root {
  /* Colores */
  --redDavivienda: #ed1c27;
  --redDark: #c90c14;
  --gray: #797B80;
  --grayMedium: #ededed;
  --grayLight: #F8F8F8;
  --black: #040203;
  --white: #ffffff;
  /* End Colores */

  /* Fonts */
  --dav-light: 'davlight', sans-serif;
  --dav-light-i: 'davlight_italic', sans-serif;
  --dav: 'davregular', sans-serif;
  --dav-i: 'davitalic', sans-serif;
  --dav-semiBold: 'davsemibold', sans-serif;
  --dav-semiBold-i: 'davsemibold_italic', sans-serif;
  --dav-bold: 'davbold', sans-serif;
  --dav-bold-i: 'davbold_italic', sans-serif;
  --dav-extraBold: 'davextrabold', sans-serif;
  --dav-extraBold-i: 'davextrabold_italic', sans-serif;

  /* Condensed ------ */
  --davCond-light: 'davcondensedLight', sans-serif;
  --davCond-light-i: 'davcondensedLightItalic', sans-serif;
  --davCond: 'davcondensedRegular', sans-serif;
  --davCond-i: 'davcondensedItalic', sans-serif;
  --davCond-semiBold: 'davcondensedCnSBd', sans-serif;
  --davCond-semiBold-i: 'davcondensedCnSBdIt', sans-serif;
  --davCond-bold: 'davcondensedCnBold', sans-serif;
  --davCond-bold-i: 'davcondensedCnBoldI', sans-serif;
  --davCond-extraBold: 'davcondensedExtraBold', sans-serif;
  --davCond-extraBold-i: 'davcondensedExtraBoldItalic', sans-serif;
  /* End Fonts */

  /* Tamanio Fuente */
  --f-9px: 0.563em;
  /* 9px */
  --f-10px: 0.625em;
  /* 10px */
  --f-12px: 0.75em;
  /* 12px */
  --f-14px: 0.875em;
  /* 14px */
  --f-16px: 1em;
  /* 16px */
  --f-18px: 1.125em;
  /* 18px */
  --f-20px: 1.25em;
  /* 20px */
  --f-25px: 1.563em;
  /* 25px */
  --f-30px: 1.875em;
  /* 30px */
  --f-35px: 2.188em;
  /* 35px */
  --f-40px: 2.5em;
  /* 40px */
  --f-50px: 3.125em;
  /* 50px */
  --f-68px: 3.75em;
  /* 68px */
  /* End Tamanio Fuente */
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: var(--dav-light);
}

*:before,
:after {
  box-sizing: inherit;
}

/* html {
  scroll-behavior: smooth;
} */

body {
  background-color: var(--grayLight);
  color: var(--black);
  position: relative;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a:focus,
a:active,
a:hover,
input[type="text"]:focus,
input[type="text"]:active,
input[type="date"]:focus,
input[type="date"]:active,
input[type="number"]:focus,
input[type="number"]:active,
input[type="submit"]:focus,
input[type="submit"]:active {
  text-decoration: none;
  outline: none;
}

a:hover {
  color: var(--redDavivienda);
}

input,
select {
  width: auto;
  padding: 0.938em 2em;
  border: 0.063em solid #ccc;
  border-radius: 1.125em;
  background-color: white;
  font-size: var(--f-12px);
  transition: border-color 0.3s ease;
}

select {
  width: auto;
  padding: 0.938em 2em;
  border: 0.063em solid #ccc;
  border-radius: 1.125em;
  background-color: white;
  font-size: var(--f-12px);
  transition: border-color 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url('https://images.publicidad.davivienda.com/EloquaImages/clients/BANCODAVIVIENDADAVIPRO/%7B8e685931-7a55-4e52-8f87-533695e630e7%7D_flecha-abajo.png');
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 0.8em;
  padding-right: 2.5em;
}

select:focus {
  border-color: #999;
  outline: none;
}

input::placeholder {
  color: #aaa;
  font-size: var(--f-16px);
}

input:focus {
  border-color: #999;
  outline: none;
}

input[type="radio"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 0.125em solid var(--redDavivienda);
  outline: none;
  transition: all 0.3s ease;
  background-color: var(--white);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

input[type="radio"]::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background: transparent;
  border-radius: 50%;
}

input[type="radio"]:checked::after {
  background: var(--redDavivienda);
}

input[type="radio"]:checked {
  border-color: var(--redDark);
  box-shadow: 0 0 0 0.25em rgb(237 28 39 / 50%);
}

input[type="radio"]:focus {
  border-color: var(--redDavivienda);
  box-shadow: 0 0 0 0.25em rgb(237 28 39 / 30%);
}

input[type="radio"]:hover {
  border-color: var(--redDark);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.7em;
  height: 1.7em;
  border: 0.125em solid var(--redDavivienda);
  background: var(--white);
  border-radius: 0.5em;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

input[type="checkbox"]:checked {
  border-color: var(--redDavivienda);
  box-shadow: 0 0 0 0.2em rgb(237 28 39 / 30%);
}

input[type="checkbox"]:checked::after {
  content: '';
  background-image: url(../assets/images/chulito.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  border-radius: 0.25em;
}

input[type="checkbox"]:focus {
  border-color: var(--redDavivienda);
}

input[type="checkbox"]:hover {
  border-color: var(--redDark);
}


.btn-g,
.btn-line {
  position: relative;
  border: none;
  outline: none;
  background: var(--redDavivienda);
  padding: 0.7em 0.7em 0.7em 4.2em;
  display: inline-flex;
  line-height: 0.649em;
  border-radius: 8em;
  transition: all 0.6s;
  box-shadow: 0 0 0 0.063em var(--redDavivienda);
  align-items: center;
  justify-content: center;
  gap: 2.5em;
  overflow: hidden;
}

.btn-g span:first-child,
.btn-line span:first-child {
  z-index: 2;
}

.btn-g .ico-btn,
.btn-line .ico-btn {
  height: 4.3em;
  width: 4.3em;
  border-radius: 8em;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
}

.btn-g .ico-btn::before,

.btn-line .ico-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: var(--white);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.bg-blanco.btn-g .ico-btn::before,
.btn-line.bg-negro .ico-btn::before {
  background: var(--black);
}

.bg-rojo,
.btn-line.bg-rojo .ico-btn {
  background: var(--redDavivienda);
  box-shadow: 0 0 0 0.063em var(--redDavivienda);
}

.bg-rojo.btn-g .ico-btn::before,
.btn-line.bg-rojo .ico-btn::before {
  background: var(--redDavivienda);
}

.bg-blanco,
.btn-line.bg-blanco .ico-btn {
  background: var(--white);
  box-shadow: 0 0 0 0.063em var(--white);
}

.bg-blanco.btn-g span:first-child {
  color: var(--black);
}

.bg-negro.btn-g .ico-btn::before,
.btn-line.bg-blanco .ico-btn::before {
  background: var(--white);
}

.btn-line.bg-blanco:hover span:first-child,
.btn-g:hover span:first-child {
  color: var(--black);
}


.bg-blanco.btn-g:hover span:first-child {
  color: var(--white);
}

.btn-line.bg-blanco:hover .ico-btn .ico {
  /* Aquí puedes usar un filtro invertido, o si es un font-icon, cambiar el color: */
  /* color: var(--redDavivienda); */
}

.btn-line.bg-rojo:hover span:first-child {
  color: var(--white);
}

.btn-g:hover .ico-btn::before,
.btn-line:hover .ico-btn::before {
  transform: translate(-50%, -50%) scale(15);
}

.btn-line.bg-negro:hover span:first-child {
  color: var(--white);
}

.btn-g .ico-btn .ico,
.btn-line .ico-btn .ico {
  width: 1em;
}

.btn-line {
  background: transparent;
}

.btn-g span,
.btn-line span {
  position: relative;
  color: var(--white);
  font-size: 0.8em;
  line-height: 1.3em;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  z-index: 1;
  transition: all 0.6s;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--dav-bold);
}

.btn-line span {
  color: var(--redDavivienda);
}

input[type="button"] {
  color: var(--white);
  font-size: 0.688em;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  position: relative;
  border: none;
  outline: none;
  background: var(--redDavivienda);
  padding: 1.66em 4.1em;
  display: inline-block;
  line-height: 0.649em;
  border-radius: 1.6em;
  transition: all 0.6s;
  font-family: var(--dav-bold);
}

.btn-g:hover,
input[type="button"]:hover {
  background: var(--black);
  box-shadow: 0 0 0 0.063em var(--black);
}

.bg-negro.btn-g:hover span {
  color: var(--black);
}

.btn-g:hover span {
  color: var(--white);
}

.btn-line:hover {
  background: var(--redDavivienda);
}

.btn-line:hover span {
  color: var(--white);
}

.btn-s {
  padding-bottom: 0.063em;
  border-bottom: 0.125em solid var(--redDavivienda);
  transition: all 0.6s;
}

.btn-s:hover {
  border-bottom: 0.313em solid var(--redDavivienda);
}

.btn-s span {
  font-size: 0.688em;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  font-family: var(--dav-bold);
  color: var(--redDavivienda);
}

.btn-ico-m,
.btn-ico-s {
  /* background: var(--redDavivienda); */
  height: 5.313em;
  width: 5.313em;
  display: flex;
  border-radius: 8em;
  align-items: center;
  justify-content: center;
  border: none;
}

.btn-ico-s {
  height: 2.813em;
  width: 2.813em;
  border-radius: 8em;
}

.btn-ico-m .ico {
  width: 1.15em;
  height: 1.15em;
}

ul {
  padding-left: 1em;
}

li {
  list-style: none;
}

b,
b>span {
  font-weight: normal;
  font-family: var(--dav-semiBold);
}

strong,
strong>span {
  font-weight: normal;
  font-family: var(--dav-bold);
}

i {
  font-style: normal;
  font-family: var(--dav-light-i);
}

i>b {
  font-weight: normal;
  font-style: normal;
  font-family: var(--dav-semiBold-i);
}

i>strong {
  font-weight: normal;
  font-style: normal;
  font-family: var(--dav-bold-i);
}

.trigger {
  position: fixed;
  right: 20px;
  bottom: 0px;
  width: 20px;
  pointer-events: none;
}

.container {
  max-width: 82.25em;
  padding-left: 2em;
  padding-right: 2em;
}

.container-xs {
  margin: 0 auto;
  max-width: 70em;
  padding: 0 2em;
}

.container-s {
  max-width: 68em;
  width: 100%;
  margin: 0 auto;
  padding-left: 2em;
  padding-right: 2em;
}

/* colores */
.bg-negro,
.bg-blanco,
.bg-rojo,
.bg-gris {
  transition: all 0.6s;
}

.bg-negro,
.btn-line.bg-negro .ico-btn {
  background: var(--black);
  box-shadow: 0 0 0 0.063em var(--black);
}

.bg-blanco {
  background: var(--white);
  box-shadow: 0 0 0 0.063em var(--white);
}

.bg-rojo {
  background: var(--redDavivienda);
  box-shadow: 0 0 0 0.063em var(--redDavivienda);
}

.bg-gris {
  background: var(--grayMedium);
  box-shadow: 0 0 0 0.063em var(--grayMedium);
}

.bg-gris-oscuro {
  background: var(--gray);
  box-shadow: 0 0 0 0.063em var(--gray);
}

.bg-gris-claro {
  background: var(--grayLight);
  box-shadow: 0 0 0 0.063em var(--grayLight);
}

.bg-negro.hover:hover,
.bg-blanco.hover:hover,
.bg-rojo.hover:hover,
.bg-gris.hover:hover {
  box-shadow: none;
}

.bg-negro.hover:hover {
  background: var(--gray);
}

.bg-blanco.hover:hover {
  background: var(--grayMedium);
}

.bg-rojo.hover:hover {
  background: var(--black);
}

.bg-gris.hover:hover {
  background: var(--white);
}

:root .border-line {
  background: transparent;
}

.bg-negro.hover.border-line:hover {
  background: var(--black);
}

.bg-blanco.hover.border-line:hover {
  background: var(--white);
}

.bg-rojo.hover.border-line:hover {
  background: var(--redDavivienda);
}

.bg-gris.hover.border-line:hover {
  background: var(--grayMedium);
}

.f-negro,
.f-blanco,
.f-rojo,
.f-gris {
  transition: all 0.6s;
}

:root .f-negro {
  color: var(--black);
}

:root .f-blanco {
  color: var(--white);
}

:root .f-rojo {
  color: var(--redDavivienda);
}

:root .f-gris {
  color: var(--gray);
}

/* End colores */

/* fuente peso */
.dav-light {
  font-family: var(--dav-light);
}

.dav-light-i {
  font-family: var(--dav-light-i);
}

.dav {
  font-family: var(--dav);
}

.dav-i {
  font-family: var(--dav-i);
}

.dav-semiBold {
  font-family: var(--dav-semiBold);
}

.dav-semiBold-i {
  font-family: var(--dav-semiBold-i);
}

.dav-bold {
  font-family: var(--dav-bold);
}

.dav-bold-i {
  font-family: var(--dav-bold-i);
}

.dav-extraBold {
  font-family: var(--dav-extraBold);
}

.dav-extraBold-i {
  font-family: var(--dav-extraBold-i);
}

/* End fuente peso */

/* condensed fuente peso */
.davCond-light {
  font-family: var(--davCond-light);
}

.davCond-light-i {
  font-family: var(--davCond-light-i);
}

.davCond {
  font-family: var(--davCond);
}

.davCond-i {
  font-family: var(--davCond-i);
}

.davCond-semiBold {
  font-family: var(--davCond-semiBold);
}

.davCond-semiBold-i {
  font-family: var(--davCond-semiBold-i);
}

.davCond-bold {
  font-family: var(--davCond-bold);
}

.davCond-bold-i {
  font-family: var(--davCond-bold-i);
}

.davCond-extraBold {
  font-family: var(--davCond-extraBold);
}

.davCond-extraBold-i {
  font-family: var(--davCond-extraBold-i);
}

/* End condensed fuente peso */

/* styel font */
/* 68px */
.f-68px {
  font-size: var(--f-68px);
}

/* 50px */
.f-50px {
  font-size: var(--f-50px);
}

/* 40px */
.f-40px {
  font-size: var(--f-40px);
}

/* 35px */
.f-35px {
  font-size: var(--f-35px);
}

/* 30px */
.f-30px {
  font-size: var(--f-30px);
}

/* 25px */
.f-25px {
  font-size: var(--f-25px);
}

/* 20px */
.f-20px {
  font-size: var(--f-20px);
}

/* 18px */
.f-18px {
  font-size: var(--f-18px);
  line-height: 1.3em;
}

/* 16px */
.f-16px {
  font-size: var(--f-16px);
}

/* 14px */
.f-14px {
  font-size: var(--f-14px);
}

/* 12px */
.f-12px {
  font-size: var(--f-12px);
}

/* 10px */
.f-10px {
  font-size: var(--f-10px);
}

/* 9px */
.f-9px {
  font-size: var(--f-9px);
}

.line-h-normal {
  line-height: normal;
}

.spacing-s {
  letter-spacing: 0.4em;
}

/* End styel font */

/* Ancho */
.blq-w-20,
.blq-w-lg-20,
.blq-w-md-20,
.blq-w-sm-20 {
  width: 20%;
}

.blq-w-25,
.blq-w-lg-25,
.blq-w-md-25,
.blq-w-sm-25 {
  width: 25%;
}

.blq-w-30,
.blq-w-lg-30,
.blq-w-md-30,
.blq-w-sm-30 {
  width: 30%;
}

.blq-w-35,
.blq-w-lg-35,
.blq-w-md-35,
.blq-w-sm-35 {
  width: 35%;
}

.blq-w-40,
.blq-w-lg-40,
.blq-w-md-40,
.blq-w-sm-40 {
  width: 40%;
}

.blq-w-45,
.blq-w-lg-45,
.blq-w-md-45,
.blq-w-sm-45 {
  width: 45%;
}

.blq-w-50,
.blq-w-lg-50,
.blq-w-md-50,
.blq-w-sm-50 {
  width: 50%;
}

.blq-w-55,
.blq-w-lg-55,
.blq-w-md-55,
.blq-w-sm-55 {
  width: 55%;
}

.blq-w-60,
.blq-w-lg-60,
.blq-w-md-60,
.blq-w-sm-60 {
  width: 60%;
}

.blq-w-65,
.blq-w-lg-65,
.blq-w-md-65,
.blq-w-sm-65 {
  width: 65%;
}

.blq-w-70,
.blq-w-lg-70,
.blq-w-md-70,
.blq-w-sm-70 {
  width: 70%;
}

.blq-w-75,
.blq-w-lg-75,
.blq-w-md-75,
.blq-w-sm-75 {
  width: 75%;
}

.blq-w-80,
.blq-w-lg-80,
.blq-w-md-80,
.blq-w-sm-80 {
  width: 80%;
}

.blq-w-85,
.blq-w-lg-85,
.blq-w-md-85,
.blq-w-sm-85 {
  width: 85%;
}

.blq-w-90,
.blq-w-lg-90,
.blq-w-md-90,
.blq-w-sm-90 {
  width: 90%;
}

.blq-w-95,
.blq-w-lg-95,
.blq-w-md-95,
.blq-w-sm-95 {
  width: 95%;
}

.blq-w-100 {
  width: 100%;
}

/* End Ancho */

/* Bordes radius */
/* border-65px */
.blq-border-r-65,
.blq-border-r-sm-65 {
  border-radius: 4.063em;
}

/* border-60px */
.blq-border-r-60,
.blq-border-r-sm-60 {
  border-radius: 3.75em;
}

/* border-55px */
.blq-border-r-55,
.blq-border-r-sm-55 {
  border-radius: 3.438em;
}

/* border-50px */
.blq-border-r-50,
.blq-border-r-sm-50 {
  border-radius: 3.125em;
}

/* border-45px */
.blq-border-r-45,
.blq-border-r-sm-45 {
  border-radius: 2.813em;
}

/* border-40px */
.blq-border-r-40,
.blq-border-r-sm-40 {
  border-radius: 2.5em;
}

/* border-35px */
.blq-border-r-35,
.blq-border-r-sm-35 {
  border-radius: 2.188em;
}

/* border-30px */
.blq-border-r-30,
.blq-border-r-sm-30 {
  border-radius: 1.875em;
}

/* border-25px */
.blq-border-r-25,
.blq-border-r-sm-25 {
  border-radius: 1.563em;
}

/* border-20px */
.blq-border-r-20,
.blq-border-r-sm-20 {
  border-radius: 1.563em;
}

/* border-18px */
.blq-border-r-18,
.blq-border-r-sm-18 {
  border-radius: 1.125em;
}

/* border-15px */
.blq-border-r-15,
.blq-border-r-sm-15 {
  border-radius: 0.938em;
}

/* border-10px */
.blq-border-r-10,
.blq-border-r-sm-10 {
  border-radius: 0.625em;
}

/* border-7px */
.blq-border-r-7,
.blq-border-r-sm-7 {
  border-radius: 0.438em;
}

/* border-5px */
.blq-border-r-5,
.blq-border-r-sm-5 {
  border-radius: 0.313em;
}

/* End Bordes radius */

/*-----------------------------------
1.1 Fuente
-----------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--black);
  line-height: 1.2em;
}

h1 {
  font-size: var(--f-68px);
}

h2 {
  font-size: var(--f-40px);
  line-height: 1.2em;
}

h3 {
  font-size: var(--f-25px);
}

h4 {
  font-size: var(--f-18px);
}

h5 {
  font-size: var(--f-10px);
}

h6 {
  font-size: var(--f-9px);
}

p {
  font-size: var(--f-14px);
  line-height: 1.6em;
}

/*-----------------------------------
1.1 End Fuente
-----------------------------------*/

/*-----------------------------------
1.2 Legales
-----------------------------------*/
.Davivienda-leitmotiv {
  position: fixed;
  top: 0;
  left: 0;
  width: 7em;
  z-index: 10;
}

.legal-banco {
  position: fixed;
  top: 5.188em;
  right: 1.25em;
  width: 0.688em;
}

.legal-vigilado {
  position: absolute;
  bottom: 14.188em;
  left: 1.25em;
  width: 1.144em;
}

.Davivienda-leitmotiv>img,
.legal-banco>img,
.legal-vigilado>img {
  width: 100%;
}

/*-----------------------------------
1.2 End Legales
-----------------------------------*/

/*-----------------------------------
1.3 Footer
-----------------------------------*/
.footer-dav {
  background: #231F20;
  color: #ffffff;
}

.footer-dav p {
  margin: 0;
  font-size: var(--f-10px);
}

.footer-redes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.813em;
  background: #333031;
  padding: 0.313em 1.875em;
  border-bottom: 0.063em solid #5d5d5d;
}

.footer-redes-cont {
  display: flex;
  align-items: center;
  gap: 0.813em;
}

.footer-redes-cont a {
  display: flex;
  align-items: center;
}

.ico-redes-footer {
  width: 1.125em;
  transition: opacity 0.3s;
}

.ico-redes-footer:hover {
  opacity: 0.7;
}

.footer-recuerde {
  padding: 0.625em 1.875em;
}

.footer-recuerde p {
  width: 100%;
  max-width: 81.875em;
  margin: 0 auto;
  text-align: center;
}

.footer-legales {
  padding: 0.938em 1.875em;
  padding-top: 0;
}

.max-w {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 61.875em;
  margin: 0 auto;
}

.logo-davivienda,
.vigilado {
  width: 100%;
  max-width: 9.938em;
}

/*-----------------------------------
1.3 End Footer
-----------------------------------*/
img {
  width: 100%;
  height: auto;
}

.fill-none {
  fill: none !important;
}

.ico {
  width: 0.875em;
  height: 0.875em;
  display: inline-block;
  vertical-align: middle;
}

.ico svg,
.ico img {
  width: 100%;
  height: 100%;
  display: block;
}

.ico svg * {
  fill: var(--black);
}

.ico-rojo svg * {
  fill: var(--redDavivienda);
}

.ico-negro svg * {
  fill: var(--black);
}

.ico-blanco svg * {
  fill: var(--white);
}

.ico-gris svg * {
  fill: var(--gray);
}

.menu .logo-header {
  display: flex;
  align-items: end;
  width: 100%;
  /* max-width: 10.313em; */
  max-width: 17em;
  gap: 3.57%;
  transition: all 0.6s;
}

/* .menu.on .logo-header {
  max-width: 17em;
} */

.menu .logo-casa {
  width: 18.57%;
}

.menu .logo-txt {
  width: 77.86%;
}

.menu .logo-casa img,
.menu .logo-txt img {
  width: 100%;
  height: auto;
  display: block;
}

.logo-casa-animado {
  position: relative;
  width: 18.57%;
  aspect-ratio: 96.88 / 82.16;
  overflow: hidden;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96.88 82.16'%3E%3Cpath fill='black' d='M5.48,66.38c.75,3.62,2.9,6.95,6.12,9.53,5.51,4.45,14.13,6.7,24.02,4.46,3.7,1.23,9.58,1.8,12.82,1.8s9.14-.56,12.83-1.8c9.88,2.23,18.51-.02,24.02-4.46,3.21-2.59,5.36-5.91,6.11-9.53.88-4.27-.19-8.95-3.82-13.28-4.76-6.38-5.65-11.97-5.72-15.01.99.05,2.01.09,3.05.15,10.32.52,17.38-5.45,6.55-14.58-3.43-2.89-9.62-7.44-9.62-7.44.18-2.48.57-4.95,1.17-7.37.76-2.97,1.26-6.04-3.2-6.04h-7.55c-3.49,0-3.98,2.24-3.43,4.26.1.33.2.67.28,1C60.31,3.08,52.56.02,48.44,0c-7.5.04-26.94,10.11-43.02,23.65-10.82,9.13-3.77,15.1,6.56,14.58l3.05-.16c-.08,3.04-.97,8.64-5.72,15.02-3.63,4.34-4.71,9.01-3.82,13.28Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96.88 82.16'%3E%3Cpath fill='black' d='M5.48,66.38c.75,3.62,2.9,6.95,6.12,9.53,5.51,4.45,14.13,6.7,24.02,4.46,3.7,1.23,9.58,1.8,12.82,1.8s9.14-.56,12.83-1.8c9.88,2.23,18.51-.02,24.02-4.46,3.21-2.59,5.36-5.91,6.11-9.53.88-4.27-.19-8.95-3.82-13.28-4.76-6.38-5.65-11.97-5.72-15.01.99.05,2.01.09,3.05.15,10.32.52,17.38-5.45,6.55-14.58-3.43-2.89-9.62-7.44-9.62-7.44.18-2.48.57-4.95,1.17-7.37.76-2.97,1.26-6.04-3.2-6.04h-7.55c-3.49,0-3.98,2.24-3.43,4.26.1.33.2.67.28,1C60.31,3.08,52.56.02,48.44,0c-7.5.04-26.94,10.11-43.02,23.65-10.82,9.13-3.77,15.1,6.56,14.58l3.05-.16c-.08,3.04-.97,8.64-5.72,15.02-3.63,4.34-4.71,9.01-3.82,13.28Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.logo-casa-animado::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 116%;
  /* cambiar esto por el numero de fotogramas que tenga si es 10 = 1000% */
  width: 12000%;
  background-image: url('../assets/images/casita-ani-2-r.jpg');
  animation: moverSprite 5s steps(120) infinite;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

@keyframes moverSprite {
  100% {
    transform: translateX(-100%);
  }
}

.menu {
  width: 100%;
  background: rgb(255 255 255 / 85%);
  -webkit-backdrop-filter: blur(2.5em);
  backdrop-filter: blur(2.5em);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  margin: 0 auto;
  /* padding: 0.9em 3.2em;
  border-radius: 1em; */
  border-radius: 1.25em;
  padding: 1em 3.2em;
  transition: transform 0.4s cubic-bezier(0.3, 0, 0.2, 1),
    padding 0.4s ease,
    background 0.4s ease;
}

/* .menu.on {
  border-radius: 1.25em;
  padding: 1em 3.2em;
} */

.menu.hide-menu {
  transform: translateY(calc(-100% - 1.875em));
}

.menu::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 4em;
  background: transparent;
}

.menu-list {
  margin: 0;
}

.menu-list li {
  list-style: none;
}

.menu-list li a {
  padding: 0.563em 1em;
  border-radius: 0.688em;
  line-height: 0.75em;
  display: block;
  transition: all 0.3s;
}

.menu-list li a.active {
  background: var(--redLight);
  /* <-- Verifica que esta variable exista en tu :root */
}

.menu-list li a:not(.active) span {
  font-size: 0.875em;
  line-height: 0.875em;
  font-family: var(--dav-light);
  transition: all 0.3s;
  color: var(--black);
}

/* .menu-list li a:hover span {
  color: var(--redDavivienda);
} */

/* .menu-list li a.active span {
  font-family: var(--dav-semiBold);
} */

.menu .modal-close,
.menuActive {
  display: none;
}

.lenguajeBtn {
  display: flex;
  align-items: center;
  padding: 0.188em;
  height: 1.5em;
  width: 4.625em;
  border-radius: 6.25em;
  box-shadow: 0 0 0 0.063em var(--grayLine);
}

.lenguajeBtn span {
  line-height: 0;
}

.link-page-lenguaje {
  height: 100%;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 6.25em;
}

.link-page-lenguaje.active {
  background: var(--black);
  color: var(--white);
}

.space-menu {
  width: 4.625em;
}

.dv-hero {
  position: relative;
  height: 80.5vh;
  /* height: 100vh; */
  background: var(--grayMedium);
  color: #fff;
  overflow: hidden;
  border-radius: 2.5em;
  margin-bottom: 3.125em;
  /* height: 88.5vh; */
  height: 75vh;
  margin-bottom: 0;
}

.space_top {
  height: 6.4em;
}

.dv-hero__slider {
  position: relative;
  height: 100%;
}

.dv-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

.dv-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.dv-hero__media {
  position: absolute;
  top: -5%;
  /* Le damos un 5% extra arriba... */
  left: 0;
  width: 100%;
  height: 110%;
  /* ...y un 10% extra de altura total para que tenga espacio para moverse */
  z-index: 0;
  /* overflow: hidden; */
}

.dv-hero__media video,
.dv-hero__media img {
  width: 100%;
  object-fit: cover;
}

.dv-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.dv-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
}

.dv-hero__video,
.dv-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.dv-hero__copy {
  position: relative;
  z-index: 1;
  padding: 2em;
  padding-top: 3.5em;
  width: 100%;
  max-width: 82.25em;
  margin: 0 auto;
}

.dv-hero__title {
  font-family: var(--dav-light);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 0.3em;
  color: var(--white);
  width: max-content;
  position: relative;
}

.dv-hero__nav {
  position: absolute;
  background: rgb(4 2 3 / 20%);
  -webkit-backdrop-filter: blur(0.313em);
  backdrop-filter: blur(0.313em);
  box-shadow: 0 0 0 0.063em rgb(255 255 255 / 20%);
  /* top: 50%;
  transform: translateY(-50%); */
  cursor: pointer;
  transition: background .25s;
  z-index: 1;
  right: 3.2em;
}

.dv-hero__nav:hover {
  background: var(--black);
}

.dv-hero__nav--next {
  top: 50%;
  transform: translateY(calc(-100% - 0.1em));
}

/* El botón de Anterior (abajo) */
.dv-hero__nav--prev {
  top: 50%;
  transform: translateY(0);
}

.dv-hero__dots {
  position: absolute;
  bottom: 1.5em;
  bottom: 3.75em;
  right: 4.25em;
  /* transform: translateX(-50%); */
  display: flex;
  flex-direction: column;
  gap: .5em;
  z-index: 5;
}

.dv-hero__dot {
  width: 0.625em;
  height: 0.625em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .25s, transform .25s;
}

.dv-hero__dot.is-active {
  background: var(--white);
}

.secc {
  padding: 3.125em 0;
}

/* Texto proximos eventos */
.cont-titulo-animado {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5em;
  /* min-height: 50vh;
  overflow: hidden; */
  width: 100%;
  margin-bottom: 2.063em;
}

.marquee-wrapper {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100vw;
  transform: translateY(-70px);
  overflow: hidden;
}

/* Configuraciones clave para el Loop Perfecto */
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  font-size: var(--f-25px);
  letter-spacing: 0.15em;
  color: #E9E9E9;
  white-space: nowrap;
}

.marquee-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.marquee-link:hover {
  color: inherit;
  opacity: 0.6;
}

.titulo-final {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--black);
  padding-right: 2em;
  letter-spacing: 0.07em;
  margin-top: 4em;
}

.char-gigante,
.char-pequeno {
  display: inline-block;
}

.marquee-ico {
  width: 0.7em;
}

/* End Texto proximos eventos */

/* cards proximos eventos */
/* EL CONTENEDOR SE EXPANDE AL 100% DE LA PANTALLA */
.contenedor-slider-dual {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  /* Corta lo que sale de la pantalla a la izquierda */
}

/* La galería toma todo el espacio sobrante a la izquierda */
.columna-galeria {
  flex: 1;
  min-width: 0;
}

.slider-track {
  display: flex;
  gap: 1.25em;
  overflow-x: auto;
  /* padding-bottom: 1.875em; */
  /* Espacio para sombras */

  /* CRÍTICO: Relleno gigante a la izquierda para poder arrastrar sin chocar con el inicio */
  /* padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 50px;
  padding-bottom: 50px; */

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  align-items: center;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

.tarjeta-evento {
  flex: 0 0 18.125em;
  /* Ancho fijo de tus pósters */
  height: 22.5em;
  border-radius: 1.875em;
  overflow: hidden;

  /* ¡LA CLAVE! Esto obliga a que el imán actúe sobre el borde DERECHO de la tarjeta */
  scroll-snap-align: end;
  opacity: 0.3;
  transition: transform 0.6s ease, opacity 0.6s ease;

  cursor: grab;
}

.tarjeta-evento:active {
  opacity: 1;
}

/* La tarjeta que detecta el radar se agranda */
.tarjeta-evento.active {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
  /* Opcional: que se ponga encima de las otras */
}

.tarjeta-evento img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* La información queda anclada a la derecha, con un ancho fijo */
.columna-info {
  width: 44%;
  padding: 0 5vw 0 3.5em;
  flex-shrink: 0;
}

/* --- ESTILOS DE LOS DOTS --- */
.miniaturas-track {
  display: flex;
  align-items: center;
  gap: 1.25em;
  margin-top: 1rem;
  padding: 1em;
  padding-bottom: 1.5em;
  overflow-x: scroll;
}

.btn-miniatura {
  width: 2em;
  height: 2em;
  border-radius: 5em;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  background: none;
  box-shadow: 0 0 0 0 var(--grayLine);
  border: none;
}

.btn-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.btn-miniatura:hover {
  opacity: 0.5;
}

.btn-miniatura.activo {
  opacity: 1;
  box-shadow: 0 0 0 0.5em #CCCCCC;
}

.info-TT {
  margin: 0;
  font-family: var(--dav-light);
  font-size: var(--f-40px);
}

.info-date {
  font-size: var(--f-25px);
  margin-bottom: 0.9em;
}

.info-date b {
  font-size: var(--f-20px);
}

.controles-nav {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}

/* --- CONTENEDOR PRINCIPAL --- */
.miniaturas-track::-webkit-scrollbar {
  height: 0.25em;
}

.miniaturas-track::-webkit-scrollbar-track {
  background: #E9E9E9;
  border-radius: 0.25em;
}

.miniaturas-track::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 0.25em;
}

.miniaturas-track::-webkit-scrollbar-thumb:hover {
  background: var(--black);
}

/* End cards proximos eventos */

/* Sección Principal */
.dv-benefits {
  background-color: #f8f8f8;
  padding: 4.75em 0;
  padding-bottom: 3.125em;
}

.clase-titular-40 span {
  font-weight: 800;
  display: block;
}

/* Línea Divisoria Central */
.divisor-vertical {
  width: 0.0625em;
  height: 9.375em;
  background-color: #D6D6D6;
}

.wrapper-visual {
  display: flex;
  align-items: center;
  gap: 1.25em;
}

.tarjetas-container {
  position: relative;
  width: 12.5em;
  height: 12.5em;
}

.card-red,
.card-pink {
  position: absolute;
  width: 11.5em;
}

.card-red {
  z-index: 2;
  top: -3.5em;
  left: -1.75em;
}

.card-pink {
  z-index: 1;
  top: 1.6em;
  left: -1.6em;
}

.columna-acciones {
  max-width: 31em;
}

.titular-container {
  padding-left: 8em;
}

.botones-apps .btn-g,
.botones-apps .btn-line {
  padding: 0.7em 0.7em 0.7em 2em;
  gap: 1.5em;
}

.botones-apps .btn-line {
  transform: translateX(-0.2em);
}

.botones-apps .btn-line:hover {
  box-shadow: 0 0 0 0.063em #f33651;
}

.botones-apps .btn-g:hover {
  box-shadow: 0 0 0 0.063em var(--redDavivienda);
}

.botones-apps .bg-negro.btn-g .ico-btn::before {
  background-color: var(--redDavivienda);
}

.botones-apps .bg-negro.btn-line .ico-btn::before {
  background: #FF6DAA;
  background: -webkit-linear-gradient(180deg, rgba(255, 109, 170, 1) 0%, rgba(237, 28, 39, 1) 76%, rgba(237, 28, 39, 1) 100%);
  background: -moz-linear-gradient(180deg, rgba(255, 109, 170, 1) 0%, rgba(237, 28, 39, 1) 76%, rgba(237, 28, 39, 1) 100%);
  background: linear-gradient(180deg, rgba(255, 109, 170, 1) 0%, rgba(237, 28, 39, 1) 76%, rgba(237, 28, 39, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF6DAA", endColorstr="#ED1C27", GradientType=0);
}

.botones-apps .bg-negro.btn-g:hover span {
  color: var(--white);
}

.dv-equalizer {
  position: relative;
  width: 100%;
  height: 12.5em;
  z-index: 6;
}

.equalizer-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-end;
  gap: 0;
}

.bar {
  flex: 1;
  height: 100%;
  transform-origin: bottom;
  animation: musicDance 1s infinite alternate ease-in-out;
  background: var(--white);
  box-shadow: 0 0 0 0.125em var(--white);
}

.bar:nth-child(1) {
  animation-duration: 0.7s;
}

.bar:nth-child(2) {
  animation-duration: 1.2s;
}

.bar:nth-child(3) {
  animation-duration: 0.9s;
}

.bar:nth-child(4) {
  animation-duration: 1.5s;
}

.bar:nth-child(5) {
  animation-duration: 0.8s;
}

.bar:nth-child(6) {
  animation-duration: 1.1s;
}

@keyframes musicDance {
  0% {
    transform: scaleY(0.2);
  }

  /* Bajan casi hasta el piso */
  100% {
    transform: scaleY(0.9);
  }

  /* Suben casi hasta el tope del contenedor */
}

.dv-bg_experiencias {
  background: var(--white);
  margin-top: -0.3em;
  padding-top: 6.5em;
}

.text-cards span {
  display: inline-block;
  will-change: transform, opacity;
}

.dv-past__head {
  padding: 0 2em;
  width: 25vw;
}

.dv-past__head .logo-casa-animado {
  width: 100%;
  max-width: 8.313em;
}

.dv-past__head .logo-casa-animado::before {
  width: 12000%;
  background-image: url('../assets/images/casita-ani-1-r.jpg');
  animation: moverSprite 5s steps(120) infinite;
}

.btn-float .logo-casa-animado::before {
  width: 12000%;
  background-image: url('../assets/images/casita-ani-3-r.jpg');
  animation: moverSprite 5s steps(120) infinite;
}

.ex-casa_linea {
  padding-bottom: 1em;
  border-bottom: 0.063em solid var(--white);
  width: 100%;
  max-width: 8.313em;
}

.dv-past__head h2 {
  margin-left: -1.5em;
}

.cont-neon {
  position: relative;
  /* background: slateblue; */
  /* height: 18.563em; */
  height: 22vw;
  width: 44vw;
}

.neon-light {
  position: absolute;
  z-index: 1;
}

.neon-lr-1 {
  width: 54%;
  bottom: -0.313em;
  left: -0.563em;
}

.neon-lr-2 {
  width: 100%;
  top: 1.25em;
  left: -0.313em;
}

.neon-lb-3 {
  width: 100%;
  top: 0.938em;
  left: 0;
}

.neon-rr-1 {
  width: 100%;
  top: 0.75em;
  right: 0;
}

.neon-rr-2 {
  width: 74.8%;
  right: 0;
  top: 2.375em;
}

.neon-rb-3 {
  width: 105%;
  right: 0;
  bottom: -0.563em;
}

.draw-path {
  will-change: stroke-dashoffset;
}

.neon-light {
  position: absolute;
}

.dv-past__head h2 span {
  display: inline-block;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  will-change: clip-path;
}

/* SECC HORIZONTAL */
/* 1. El Viewport principal */
.dv-exp__viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden !important;
  padding: 0 !important;
  margin-top: -0.5em;
  background-color: var(--black);
}

/* 2. La Pista que se mueve */
.dv-exp__track {
  display: flex;
  height: 100%;
  width: max-content;
  /* ¡CLAVE! Se estirará automáticamente según los paneles que le metas */
  flex-wrap: nowrap;
  will-change: transform;
}

/* 3. Los paneles base */
.panel {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  position: relative;
}

/* 4. La imagen Héroe */
.intro-image-wrapper {
  position: relative;
  width: 75vw;
  height: 70vh;
  border-radius: 20px;
  overflow: hidden;
}

.intro-image {
  display: none;
}

/* .intro-image-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1000%;
  aspect-ratio: 10 / 1;
  transform: translateY(-50%);
  background-image: url('../assets/images/ex-img-1-1-l.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: spriteHorizontal 6s steps(10) infinite;
} */

/* @keyframes spriteHorizontal {
  0% {
    transform: translateY(-50%) translateX(0%);
  }

  100% {
    transform: translateY(-50%) translateX(-100%);
  }
} */

.intro-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.second-panel {
  max-width: 85.375em;
}

.line-num {
  display: flex;
  align-items: self-end;
  height: 100%;
}

.line-cont {
  position: relative;
}

.line-num .line {
  background: var(--white);
  height: 84vh;
  width: 0.063em;
  opacity: 0.3;
}

.line-num .num {
  position: absolute;
  margin: 0;
  transform: rotate(-90deg);
  top: -1.8em;
  right: 0;
  left: 0;
  margin: 0 auto;
  letter-spacing: 0.4em;
}

.lounge_exclusivo {
  width: 50%;
  height: 100%;
  padding: 0 4.8em;
  display: flex;
}

.icon-neon {
  position: relative;
  /* width: 100%; */
  /* max-width: 8.563em; */
  width: 8.563em;
  height: 8.563em;
  z-index: 1;
}

.icon-neon img {
  position: absolute;
  width: 100%;
}

.icon-neon .off,
.icon-neon .on {
  top: 0;
  left: 0;
}

.icon-neon .on {
  opacity: 0;
}

.icon-neon-on .on {
  opacity: 1;
}

.icon-neon-on .off {
  opacity: 0;
}

.lounge-cont {
  width: 100%;
  padding: 7.625em 1.5em;
}

.ex-tt {
  position: relative;
  margin-left: 0.8em;
  top: 4em;
  left: -2.5em;
}

.city-txt {
  position: relative;
  left: 4em;
}

.ex-title-b {
  position: relative;
  left: 2.2em;
}

.ex-tt-icon {
  margin-bottom: 3.5em;
}

.experiencias_medellin {
  width: 50%;
  height: 100%;
  padding: 0 4.8em;
  padding-left: 1.8em;
  display: flex;
}

.medellin-cont {
  width: 100%;
  padding: 7.625em 2.5em;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.line_top .line-num {
  align-items: self-start;
}

.line_top .line-num .num {
  bottom: -3.5em;
  top: initial;
}

.third-panel {
  width: 100vw;
  max-width: 40.938em;
  justify-content: initial;
}

.img-medellin {
  width: 100%;
  max-width: 31.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  border-radius: 2.5em;
}

.img-medellin img {
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.fourth-panel {
  max-width: 23em;
}

/* 1. Contenedor Padre */
.promo-card-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4.1vw;
  width: 100%;
  max-width: 22.5em;
  z-index: 1;
}

.promo-card-main {
  position: relative;
  background-color: var(--redDavivienda);
  color: var(--white);
  border-radius: 2.5em;
  width: 16em;
  height: 17.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 1.5em;
}

/* Textos internos */
.promo-content {
  display: flex;
  flex-direction: column;
}

.promo-discount {
  font-size: 3.3em;
  line-height: 1;
}

.promo-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0.063em solid var(--redDavivienda);
  border-radius: 3.125em;
  pointer-events: none;
}

.promo-off {
  line-height: 1em;
}

/* Los 3 tamaños del estado final de las ondas */
/* Usamos calc() para que se basen en el tamaño de la caja principal */
.ring-1 {
  width: calc(100% - 6vw);
  height: calc(100% - 6vw);
}

.ring-2 {
  width: calc(100% - 4vw);
  height: calc(100% - 4vw);
  opacity: 0.6 !important;
  border-radius: 3.6em;
  /* Un detalle visual para que se desvanezcan a lo lejos */
}

.ring-3 {
  width: calc(100% - 1.5vw);
  height: calc(100% - 1.5vw);
  opacity: 0.3 !important;
  border-radius: 4em;
}

.promo-badge {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 10%) rotate(-20deg);
  z-index: 3;
  width: 100%;
  max-width: 8.563em;
}

.fourth-panel .line-num,
.five-panel .line-num,
.six-panel .line-num,
.seven-panel .line-num {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  justify-content: center;
}

.fourth-panel .line-num .line,
.five-panel .line-num .line,
.six-panel .line-num .line,
.seven-panel .line-num .line {
  background: var(--black);
  height: 10vh;
}

.fourth-panel .line-num .num,
.five-panel .line-num .num,
.six-panel .line-num .num,
.seven-panel .line-num .num {
  color: var(--black);
}

.five-panel {
  position: relative;
  max-width: 46.4em;
}

.prev-card {
  color: var(--white);
  background-color: var(--black);
  background-image: url("../assets/images/bg-prev-1.png"), url("../assets/images/bg-prev-2.png");
  background-size: 22.125em, 10.625em;
  background-position: bottom left, top right;
  background-repeat: no-repeat, no-repeat;
  height: 17.5em;
  width: 100%;
  max-width: 31.688em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5em;
  border-radius: 2.5em;
  gap: 0.938em;
  z-index: 1;
}

.prev-neon {
  transform: rotate(20deg);
}

.five-panel .line-num .line,
.seven-panel .line-num .line {
  height: 18vh;
}

.six-panel {
  max-width: 28.2em;
}

.promo-card-main-2 {
  width: 100%;
  max-width: 20.688em;
  height: 9.063em;
}

.fila-neon {
  transform: translate(-50%, 17%) rotate(0);
  max-width: 9.563em;
}

.six-panel .line-num .line {
  height: 15vh;
}

.six-panel .promo-card-wrapper {
  max-width: 28.6em;
}

.fila-tt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tribu-cont {
  position: relative;
  color: var(--white);
  height: 17.25em;
  width: 100%;
  max-width: 61.563em;
  border-radius: 2.5em;
  padding: 1.5em;
  z-index: 1;
  overflow: hidden;
}

.seven-panel .tribu-bg {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: calc(100% + 225px);
  background-image: url(../assets/images/bg-tribuna-fan.jpg);
  background-size: cover;
  background-position: center bottom;
  z-index: -1;
}

.tribu-cont::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 80%);
}

.tribu-cont>* {
  position: relative;
  z-index: 1;
}

.fan-neon {
  width: 100%;
  max-width: 14em;
  transform: rotate(-15deg);
}

.line-ani {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vh;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

.line-ani::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 100%;
  background-image: url('../assets/images/bg-fan-lines.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* .tribu-cont:hover~.line-ani {
  opacity: 1;
}

.tribu-cont:hover~.line-ani::after {
  animation: spriteMove 0.7s steps(4) infinite;
} */

.line-ani {
  opacity: 1;
}

.line-ani::after {
  animation: spriteMove 1s steps(4) infinite;
}


@keyframes spriteMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-80%);
  }
}

/* End SECC HORIZONTAL */

/* ==========================================
   EVENTOS PASADOS – CARRUSEL INFINITO
   ========================================== */
.dv-past-events {
  background: var(--grayLight);
  padding: 4em 0 3.5em;
  overflow: hidden;
}

.past-events__head {
  margin-bottom: 2.5em;
}

.past-events__head h2 {
  color: var(--black);
  letter-spacing: 0.08em;
}

.past-events__sub {
  margin: 0;
}

/* Viewport (corta el overflow) */
.past-events__viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Track (la cinta que se mueve) */
.past-events__track {
  display: flex;
  gap: 1.25em;
  /* 20px */
  will-change: transform;
  cursor: grab;
}

.past-events__track:active {
  cursor: grabbing;
}

/* Tarjeta individual */
.past-card {
  position: relative;
  flex: 0 0 16.0625em;
  /* 257px */
  height: 20.3125em;
  /* 325px */
  border-radius: 1.25em;
  /* 20px */
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.past-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

/* Botón "+" */
.past-card__plus {
  position: absolute;
  top: 0.75em;
  right: 0.75em;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 0.063em rgb(255 255 255 / 50%);
}

/* Badge de Fecha */
.past-card__date {
  position: absolute;
  bottom: 0.75em;
  left: 0.75em;
  width: 2.8125em;
  /* 45px */
  height: 4.5625em;
  /* 73px */
  border-radius: 0.875em;
  /* 14px */
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 0.063em rgb(255 255 255 / 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  z-index: 2;
  gap: 0.1em;
}

.past-card__date p {
  line-height: 1.15;
  color: var(--white);
}

/* Controles (flechas centradas) */
.past-events__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.5em;
}

.past-card:hover .past-card__plus {
  background: var(--redDavivienda);
}

/* Invertir icono del botón prev al hacer hover */
.past-prev:hover .ico-negro svg * {
  fill: var(--white);
}

/* Word Split Reveal – Eventos Pasados */
.past-split-line {
  overflow: hidden;
}

.past-word,
.past-word-up {
  display: inline-block;
  will-change: transform, opacity;
}

/* ==========================================
   REDES SOCIALES – CTA BAR
   ========================================== */
.social-cta-wrapper {
  position: relative;
}

/* ---- Stickers ---- */
.social-stickers {
  position: absolute;
  left: -1em;
  top: 50%;
  transform: translateY(-58%);
  width: 13em;
  height: 13em;
  z-index: 3;
  pointer-events: none;
}

.sticker {
  position: absolute;
}

.sticker-1 {
  width: 8.5em;
  top: 2em;
  left: 7em;
  transform: rotate(24deg);
  z-index: 2;
}

.sticker-2 {
  width: 9em;
  top: 3em;
  left: 2em;
  transform: rotate(-25deg);
  z-index: 3;
}

.sticker-3 {
  width: 9.2em;
  top: -1em;
  left: 0.8em;
  transform: rotate(5deg);
  z-index: 1;
}

/* ---- Barra negra ---- */
.social-cta-bar {
  position: relative;
  background: var(--black);
  height: 9.375em;
  /* 150px */
  border-radius: 2.5em;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* ---- Texto ---- */
.social-cta-text {
  position: relative;
  z-index: 2;
  padding-left: 15em;
  pointer-events: none;
  white-space: nowrap;
}

.social-cta-text p:first-child {
  letter-spacing: 0.06em;
}

/* ---- Bolas sociales ---- */
.social-ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 5.3125em;
  /* 85px */
  height: 5.3125em;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  z-index: 1;
  text-decoration: none;
  transition: background 0.6s;
  box-shadow: 0 0 0 0.063em rgb(255 255 255 / 50%);
}

.social-ball:hover {
  background: var(--black);
  color: inherit;
}

.social-ball .ico {
  width: 1.375em;
  height: 1.375em;
  transition: fill 0.6s;
}

.social-ball:hover .ico path {
  fill: var(--white);
}

/* Ocultos en desktop */
.mobile-benefit-img {
  display: none;
}

.exp-mobile-nav {
  display: none;
}

.dv-hero__inline-thumb {
  font-size: 16px;
  width: 100%;
  display: block;
  max-width: 40%;
  position: absolute;
  right: 5%;
  bottom: 27%;
}

.noise-overlay {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 9999;
  pointer-events: none;
  background-image: url('../assets/images/noise.png');
  background-repeat: repeat;
  opacity: 0.08;
  animation: noiseMove 0.2s steps(2) infinite;
}

@keyframes noiseMove {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-2%, -3%);
  }

  50% {
    transform: translate(3%, 1%);
  }

  75% {
    transform: translate(-1%, 3%);
  }

  100% {
    transform: translate(2%, -2%);
  }
}

#eventosPasados {
  position: relative;
  top: -5em;
}

.bnn-tablet,
.bnn-mobile {
  display: none;
}

/* ===== MODAL BASE ===== */
.lounge-modal .modal-content {
  background: #000;
  color: #fff;
  border-radius: 0;
  overflow: hidden;
}

/* ===== HEADER ===== */
.lounge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2em 3em;
}

.lounge-title {
  display: flex;
  gap: 1em;
  align-items: center;
}

.lounge-title img {
  width: 3em;
}

.lounge-title small {
  letter-spacing: .3em;
  opacity: .6;
}

.lounge-title h2 {
  margin: 0;
}

/* ===== BODY ===== */
.lounge-track-wrapper {
  overflow: hidden;
  width: 100%;
}

.lounge-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.lounge-slide {
  width: 100vw;
  padding: 3em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4em;
}

.lounge-card {
  background: #2b2b2b;
  border-radius: 2em;
  height: 40vh;
}

.lounge-text {
  max-width: 26em;
  opacity: .8;
}

/* ===== FOOTER ===== */
.lounge-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2em 3em;
}

.lounge-zone {
  padding: 1em 2em;
  border-radius: 3em;
  letter-spacing: .2em;
}

.lounge-controls {
  display: flex;
}

.lounge-btn {
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  background: transparent;
  color: #fff;
  font-size: 1.5em;
}

.ex-modal-tt .icon-neon .on {
  width: 100%;
  opacity: 1;
}

.ex-modal-tt .ex-tt-icon {
  margin-bottom: 0;
}

.lounge-card {
  background: #2b2b2b;
  border-radius: 2em;
  height: 40vh;
  overflow: hidden;
  width: 100%;
  max-width: 37.688em;
}

.m-event-past .modal-content {
  background: var(--black);
}

.btn-x {
  position: absolute;
  top: 3.813rem;
  right: 3.938rem;
  z-index: 3;
}

/* ===== CONTENEDOR GENERAL ===== */
.past-slider-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ===== VIEWPORT ===== */
.past-slider-viewport {
  width: 100%;
  overflow: hidden;
  padding-top: 5%;
}


/* ===== TRACK ===== */
.past-slider-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  align-items: center;
  will-change: transform;
}


/* ===== SLIDE ===== */
.past-slide {
  flex: 0 0 60vw;
  /* card central grande */
  display: flex;
  justify-content: center;
}

/* ===== CARD ===== */
.past-card-modal {
  width: 100%;
  height: 40vh;
  background: #2b2b2b;
  border-radius: 2.5em;
  flex: initial;
}

/* ===== CONTROLES ===== */
.past-slider-controls {
  margin-top: 3em;
  display: flex;
  justify-content: center;
  gap: 1.5em;
}

.bg-blanco.hover:hover path {
  fill: var(--blac);
}

/* ===== BLOQUE SUPERIOR ===== */
.vip-detail__top {
  display: grid;
  grid-template-columns: 1fr 2.5fr;
  gap: 4em;
  align-items: center;
}

/* ===== TEXTO ===== */
.vip-title .vip-line {
  display: block;
  font-weight: normal;
  margin-bottom: 0.4em;
}

.vip-title .light {
  font-family: var(--dav-light);
}

/* ===== IMAGEN ===== */
.vip-detail__image {
  height: 17em;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2.5em;
}

.vip-detail__image img,
.vip-detail__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== TEXTO INFERIOR ===== */
.vip-detail__bottom {
  margin-top: 4em;
  text-align: center;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.vip-paragraph {
  line-height: 1.6;
  color: #333;
}

.vip-paragraph strong {
  font-family: var(--dav-bold);
}

.vip-paragraph .highlight {
  color: var(--redDavivienda);
  font-family: var(--dav-bold);
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.zona-vipp {
  background: var(--black);
  border-radius: 2.5em;
  padding: 4.5em 0;
}

/* ===== WRAPPER FLEX ===== */
.zona-vipp__wrapper {
  display: flex;
  align-items: stretch;
  /* clave para la línea vertical */
  gap: 3em;
}

/* ===== COLUMNAS ===== */
.zona-vipp__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zona-vipp__col p {
  color: #fff;
  line-height: 1.6;
  margin-top: 2em;
}

/* ===== STICKER ROJO ===== */
.zona-vipp__sticker {
  width: 7.5em;
  margin-bottom: 1em;
  transform: rotate(135deg);
}

/* ===== DIVISOR CENTRAL ===== */
.zona-vipp__divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
  align-self: stretch;
}


/* ===== CONTENEDOR GENERAL ===== */
.suites-section {
  display: flex;
  gap: 4em;
  align-items: center;
  margin: 0 auto;
}

/* ===== COLUMNAS ===== */
.suites-col {
  position: relative;
}

.suites-col--right {
  position: relative;
  background: var(--black);
  border-radius: 3em;
  padding: 4em 3em;
  color: var(--white);
  min-height: 20.938em;
  text-align: center;
}

/* ===== CARD ROJA ===== */
.suite-card-wrapper {
  position: relative;
  margin-top: 3em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.suite-card {
  background: var(--redDavivienda);
  color: #fff;
  border-radius: 3em;
  padding: 3em 3.5em;
  position: relative;
  z-index: 2;
}

.suite-card p {
  margin: 0;
  line-height: 1.6;
}

/* ===== ANILLO ===== */
.suite-ring {
  position: absolute;
  inset: -1em;
  border-radius: 4em;
  border: 0.063em solid rgba(237, 28, 39, 0.4);
}

/* ===== STICKER ===== */
.suites-sticker {
  width: 11em;
  margin-top: 3em;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  bottom: -3.75em;
  transform: rotate(-15deg);
}

.line-form {
  background: #D6D6D6;
  height: 0.063em;
  max-width: 18.75em;
  margin: 1.875em auto;
}


/* ===== LÍNEA SUPERIOR ===== */
.line-form {
  width: 3em;
  height: 2px;
  background: var(--black);
  margin: 1em auto 1.5em;
}

/* ===== LAYOUT FORM ===== */
.form-wrapper {
  display: flex;
  gap: 5em;
  align-items: stretch;
  margin-top: 4em;
}

/* IMAGEN */
.form-img {
  width: 28%;
  border-radius: 2.5em;
  overflow: hidden;
}

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

/* FORM */
.form-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* FILAS */
.form-row {
  display: flex;
  gap: 2em;
}

.form-field {
  flex: 1;
  margin-bottom: 2em;
}

.form-field.full {
  width: 100%;
}

/* LABEL */
.form-field label {
  margin-bottom: 0.8em;
  font-family: var(--dav-bold);
}

/* OPCIONES */
.form-options {
  display: flex;
  gap: 2em;
}

.option {
  display: flex;
  align-items: center;
  gap: 0.8em;
  background: var(--grayMedium);
  padding: 1.2em 1.6em;
  border-radius: 4em;
  cursor: pointer;
  flex: 1;
}

/* CHECK */
.form-checkbox {
  margin: 0 0 4em;
}

.form-checkbox label {
  display: flex;
  align-items: center;
  gap: 1em;
}

/* BOTÓN */
.form-action {
  display: flex;
  justify-content: flex-start;
}

.form-content input[type="text"],
.form-content input[type="number"],
.form-content input[type="email"],
.form-content input[type="date"],
.form-content select {
  width: 100%;
  font-size: var(--f-16px);
  color: var(--black);
  background-color: var(--white);
  display: block;
}

.form-content input[type="text"]::placeholder,
.form-content input[type="number"]::placeholder,
.form-content input[type="email"]::placeholder,
.form-content input[type="date"]::placeholder,
.form-content select::placeholder {
  font-size: var(--f-16px);
}


/* ===== WRAPPER GENERAL ===== */
.mv-wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* ===== CARD BASE ===== */
.mv-card {
  flex: 1;
  border-radius: 3em;
  padding: 4em 4em 4.5em;
  border: 1px solid rgba(0, 0, 0, 0.15);
  height: 18.563em;
}

/* PEQUEÑO */
.mv-small {
  margin-bottom: 0.4em;
}

/* TITULO */
.mv-title {
  margin-bottom: 0.5em;
}

/* TEXTO */
.mv-text {
  line-height: 1.7;
  max-width: 34em;
}

/* ===== ICONO CENTRAL ===== */
.mv-icon {
  position: absolute;
  top: 39%;
  left: 50%;
  transform: translate(-50%, -55%);
  z-index: 3;
}

.mv-icon img {
  width: 9em;
  height: auto;
}

.mv-card--right {
  margin-top: 7em;
}

.cont-vicularse {
  height: 9.375em;
  border-radius: 2.5em;
  padding: 2em;
}

img.pill {
  width: 100%;
  max-width: 12.5em;
}

.btn-float {
  position: fixed;
  bottom: 2.5em;
  right: 2.5em;
  z-index: 100;
}

/* BOTÓN BASE (NO CAMBIA DE TAMAÑO) */
.btn-float a {
  position: relative;
  width: 5.313em;
  height: 5.313em;
  background: rgb(255 255 255 / 15%);
  -webkit-backdrop-filter: blur(0.375em);
  backdrop-filter: blur(0.375em);
  border-radius: 8em;
  box-shadow: 0 0 0 0.063em rgb(255 255 255 / 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: all 0.6s ease;
}

/* LOGO */
.btn-float .logo-casa {
  width: 100%;
  max-width: 3.063em;
  pointer-events: none;
  transform: translateX(0);
  transition: all 0.6s ease;
}

/* TEXTO OCULTO */
.txt-compra {
  position: absolute;
  right: 1em;
  margin-right: 1.2em;
  letter-spacing: -11px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(0);
  transition:
    opacity 0.3s ease,
    letter-spacing 0.3s ease,
    transform 0.2s ease;
}

/* HOVER: el botón se mueve, NO se agranda */
.btn-float:hover a {
  width: 15em;
  background: rgb(255 255 255 / 60%);
  -webkit-backdrop-filter: blur(0.75em);
  backdrop-filter: blur(0.75em);
  box-shadow: 0 0 0 0.063em rgb(0 0 0);
}

/* HOVER: aparece el texto */
.btn-float:hover .txt-compra {
  opacity: 1;
  transform: translateX(0);
  letter-spacing: 0;
}

.btn-float:hover .logo-casa {
  transform: translateX(-4.3em)
}

/*
╔═════════════════════════════════════════════════════╗
║   Borar cuadro e insertar estilos escritorio aca    ║
║   responsive por favor usar las media queries       ║
║   que se encuentran en la parte de abajo            ║
╚═════════════════════════════════════════════════════╝
*/

/* Responsive */
@media only screen and (min-width: 1668px) {
  body {
    font-size: 17px;
  }

  .columna-info {
    width: 40%;
  }
}

/* Responsive */
@media only screen and (max-width: 991px) {
  .legalFoot .line {
    display: none;
  }

  /* Ancho */
  .blq-w-lg-20,
  .blq-w-lg-25,
  .blq-w-lg-30,
  .blq-w-lg-35,
  .blq-w-lg-40,
  .blq-w-lg-45,
  .blq-w-lg-50,
  .blq-w-lg-55,
  .blq-w-lg-60,
  .blq-w-lg-65,
  .blq-w-lg-70,
  .blq-w-lg-75,
  .blq-w-lg-80,
  .blq-w-lg-85,
  .blq-w-lg-90,
  .blq-w-lg-95,
  .blq-w-lg-100 {
    width: 100%;
  }

  /* End Ancho */
  /* .menu.on {
    padding: 1em 2em;
    justify-content: space-between;
  } */

  .menu {
    top: 0;
    max-width: initial;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.6s;
    padding: 1.5em 2em;
    border-radius: 1.3em;
  }

  .menu-nav {
    flex-direction: column;
  }

  .menu-list {
    padding: 3em;
    padding-left: 6em;
    flex-direction: column;
    transition: all 0.6s;
    counter-reset: item;
    list-style: none;
    z-index: 20;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: var(--black);
  }

  .menu-list.open-menu {
    background: var(--black);
    left: 0;
  }

  .menu-nav .btn-g2 {
    margin-bottom: 1.938em;
  }

  .menu-list li {
    padding-bottom: 3em;
    padding-top: 3em;
    border-bottom: 0.063em solid rgb(225 225 225 / 60%);
    width: 100%;
    text-align: left;
    opacity: 0;
  }

  .menu-list li a:not(.active) span {
    color: var(--white);
    font-size: 1.5em;
  }

  .menu-list li span {
    font-size: 1.5em;
    color: var(--white);
  }

  /* Animación de entrada de los items del menú */
  @keyframes menuEs {
    0% {
      transform: translateY(3.75em);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .menu-list.open-menu li {
    animation-name: menuEs;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
  }

  /* Retrasos escalonados para la animación */
  .menu-list.open-menu li:nth-child(2) {
    animation-delay: .3s;
  }

  .menu-list.open-menu li:nth-child(3) {
    animation-delay: .6s;
  }

  .menu-list.open-menu li:nth-child(4) {
    animation-delay: .9s;
  }

  .menu-list.open-menu li:nth-child(5) {
    animation-delay: 1.2s;
  }

  .menu-list.open-menu li:nth-child(6) {
    animation-delay: 1.5s;
  }

  .menu-list.open-menu li:nth-child(7) {
    animation-delay: 1.8s;
  }

  .menu-list.open-menu li:nth-child(8) {
    animation-delay: 2.1s;
  }

  .menu-list.open-menu li:nth-child(9) {
    animation-delay: 2.4s;
  }

  .menu-list.open-menu li:nth-child(10) {
    animation-delay: 2.7s;
  }

  .menu-list li.link-page,
  .menu-list .link-page {
    margin: 0;
    padding: 0;
    counter-increment: item;
    position: relative;
  }

  .menu-list li.link-page,
  .menu-list:hover .link-page:hover {
    background: red;
  }

  .menu-list li.link-page:before,
  .menu-list .link-page:before {
    content: "0" counter(item);
    position: absolute;
    left: -1.875em;
    top: 0.2em;
    transform: rotate(-90deg);
    font-family: var(--dav-semiBold);
    color: #c2bebe;
  }

  .lenguajeBtn {
    height: 3em;
    width: 9.625em;
  }

  .menu .logo-header {
    max-width: 12em;
  }

  .menu .btn-g2 span {
    font-size: 1em;
  }

  .menu .modal-close {
    position: absolute;
    top: 1.25em;
    right: 1.25em;
    height: 5.313em;
    width: 5.313em;
    border-radius: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border: none;
    background: var(--white);
  }

  .menu .modal-close span {
    font-size: 1.5em;
  }

  /* Botón hamburguesa flotante */
  /* .menu.on .logo-header {
    max-width: 14em;
  } */

  .menuActive {
    display: block;
    font-size: 16px;
  }

  .menuActive>.btn-ico * {
    pointer-events: none;
  }

  .menu .menuActive .btn-ico {
    padding-left: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.6em;
    transition: all 0.6s;
  }

  /* .menu.on .menuActive .btn-ico {
    height: 3.75em;
  } */

  .bars {
    width: 1.563em;
    height: 0.8em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.25em;
  }

  .menuBars {
    height: 0.188em;
    width: 100%;
    background: var(--black);
  }

  .menuBars:nth-child(2) {
    width: calc(100% - 0.625em);
  }

  /* ---- HERO RESPONSIVE TABLET ---- */
  .dv-hero {
    height: 62.5em;
  }

  .dv-hero__slide {
    align-items: self-start;
  }

  .dv-hero__copy {
    padding: 2em;
    padding-top: 6.5em;
  }

  .dv-hero__sub br {
    display: none;
  }

  .dv-hero__nav {
    right: 1.5em;
  }

  .dv-hero__dots {
    right: 2.5em;
    bottom: 2em;
  }

  /* ================================
     PRÓXIMOS EVENTOS – TABLET
  ================================ */
  .contenedor-slider-dual {
    flex-direction: column;
    overflow: hidden;
  }

  .columna-galeria {
    width: 100%;
  }

  .slider-track {
    overflow: hidden;
  }

  .tarjeta-evento {
    flex: 0 0 18.125em !important;
    min-width: 18.125em !important;
    max-width: 18.125em !important;
    height: 22.5em !important;
  }

  .columna-info {
    width: 100%;
    padding: 1.5em 2em;
  }

  .columna-info>.d-flex {
    justify-content: center;
  }

  .info-TT {
    font-size: var(--f-30px);
  }

  .info-date {
    font-size: var(--f-20px);
  }

  .miniaturas-track {
    justify-content: center;
  }

  .cont-titulo-animado {
    min-height: 0em;
  }

  .marquee-wrapper {
    transform: translateY(0);
  }

  /* ================================
     BENEFITS – TABLET
  ================================ */
  .fila-benefits {
    flex-direction: column !important;
    gap: 2em !important;
  }

  .divisor-vertical {
    width: 80%;
    height: 0.063em;
  }

  .columna-header {
    width: 100%;
  }

  .titular-container {
    padding-left: 0;
    display: flex;
    align-items: center;
  }

  .text-cards {
    margin-left: 3.5em;
  }

  .card-red,
  .card-pink {
    width: 11em;
  }

  .columna-acciones {
    max-width: 24.063em;
    text-align: center;
  }

  .texto-instruccion {
    margin-bottom: 1.5em;
  }

  .botones-apps {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.5em;
  }

  .botones-apps .btn-g,
  .botones-apps .btn-line {
    margin: 0 auto;
    transform: none;
  }

  .wrapper-visual {
    justify-content: center;
  }

  .dv-benefits {
    padding: 2.75em 0;
  }

  .secc {
    padding: 2.125em 0;
  }

  .dv-equalizer {
    height: 6em;
  }

  /* ================================
     EXPERIENCIAS TÍTULO – TABLET
  ================================ */
  .dv-bg_experiencias {
    flex-direction: column;
    align-items: center;
    padding-top: 3em;
  }

  /* Neons apilados arriba */
  .cont-neon {
    width: 100%;
    height: 62vw;
    overflow: hidden;
  }

  /* Título va al final */
  .dv-past__head {
    order: 3;
    width: 100%;
    padding: 2em;
    justify-content: center;
    margin-top: -4em;
    z-index: 1;
  }

  .cont-neon-2 {
    display: none;
  }

  .neon-lr-1 {
    width: 56%;
  }

  .neon-lr-2 {
    width: 110%;
    left: 50%;
    transform: translateX(-50%);
  }

  .neon-lb-3 {
    width: 110%;
    left: 50%;
    transform: translateX(-50%);
  }

  .lounge_exclusivo {
    padding: 0 2em;
    width: 100%;
  }

  /* ================================
     EXPERIENCIAS HORIZONTAL – TABLET
  ================================ */

  /* Los paneles necesitan más espacio */
  .second-panel {
    max-width: 130vw;
    width: 130vw;
  }

  .lounge_exclusivo,
  .experiencias_medellin {
    width: 65vw;
    padding: 0 4em;
  }


  .lounge-cont,
  .medellin-cont {
    padding: 5em 2em;
  }

  .icon-neon {
    z-index: 1;
  }

  .ex-tt h3.f-35px {
    font-size: var(--f-25px);
  }

  .ex-tt h3.f-25px {
    font-size: var(--f-20px);
  }

  .ex-tt {
    top: 0;
    left: 0;
  }


  .city-txt {
    left: 2.6em;
  }

  .ex-title-b {
    left: 1.8em;
  }

  .ex-tt-icon {
    margin-bottom: 2.5em;
  }

  .ex-cont-p p {
    font-size: var(--f-14px);
  }

  /* Imagen Medellín */
  .third-panel {
    max-width: 100vw;
  }

  /* Hamburguesa */
  .promo-card-main {
    width: auto;
    height: 14.5em;
    border-radius: 2em;
  }

  .promo-badge {
    bottom: -4.5em;
  }

  /* Preventa */
  .five-panel {
    max-width: 40em;
  }

  .prev-card {
    max-width: 28em;
    height: 14em;
    border-radius: 2em;
    background-size: 18em, 8em;
  }

  /* Filas */
  .six-panel {
    max-width: 25em;
  }

  .promo-card-main-2 {
    max-width: 27em;
    height: 7.5em;
    width: 100%;
  }

  /* Tribuna Fan */
  .tribu-cont {
    max-width: 80%;
    height: 14em;
    border-radius: 2em;
    padding: 1.5em 2em;
    gap: 1.5em !important;
  }

  .txt-fan {
    font-size: var(--f-14px);
  }

  .seven-panel {
    width: 100vw;
  }

  /* Líneas más cortas */
  .line-num .line {
    height: 90vh;
  }

  .promo-card-wrapper {
    max-width: 17.5em;
    margin: 0 auto;
    display: block;
    padding: 6vw;
  }

  .six-panel .promo-card-wrapper {
    padding: 6vw;
    margin-top: 2em;
    max-width: 26.6em;
  }

  .fourth-panel .line-num .line,
  .five-panel .line-num .line,
  .six-panel .line-num .line,
  .seven-panel .line-num .line {
    background: var(--black);
    height: 15vh;
  }

  .line-ani {
    width: 100vh;
  }

  .bnn-desk,
  .bnn-mobile {
    display: none;
  }

  .bnn-tablet {
    display: block;
  }

  .lounge-slide {
    position: relative;
    width: 100vw;
    gap: 2em;
    align-items: start;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 2em;
  }

  .lounge-header {
    padding: 2em;
  }

  .lounge-card {
    height: auto;
  }


  .modal-body::-webkit-scrollbar {
    width: 0.5em;
  }

  .modal-body::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 8em;
  }

  .modal-body::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 8em;
  }

  .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--black);
  }

  .vip-detail__top {
    grid-template-columns: 1fr;
    gap: 3em;
  }

  .vip-detail__text {
    text-align: left;
  }

  .vip-detail__image img {
    border-radius: 2.5em;
  }

  .vip-detail__bottom {
    margin-top: 3em;
  }

  .zona-vipp {
    padding: 3.5em 2.5em;
  }

  .zona-vipp__wrapper {
    flex-direction: column;
    gap: 3em;
  }

  .zona-vipp__divider {
    width: 60%;
    height: 1px;
    margin: 0 auto;
  }

  .suites-section {
    flex-direction: column;
    gap: 5em;
  }

  .suites-col--right {
    text-align: center;
  }

  .suites-sticker {
    margin-left: auto;
    margin-right: auto;
  }

  .form-wrapper {
    flex-direction: column;
    gap: 3em;
  }

  .form-img {
    width: 100%;
    height: 18em;
  }

  .form-row {
    flex-direction: column;
    gap: 2em;
  }

  .form-action {
    justify-content: center;
  }

  .mv-wrapper {
    flex-direction: column;
    gap: 0;
  }

  .mv-icon {
    display: none;
  }

  .mv-card {
    padding: 3em 2.5em;
    height: auto;
    margin: 0 auto;
  }

  .mv-card--right {
    margin-top: 2em;
  }

  .cont-vicularse {
    height: auto;
  }
}

@media only screen and (max-width: 768px) {

  /*-----------------------------------
  4.2 Legales
  -----------------------------------*/
  .Davivienda-leitmotiv {
    position: absolute;
    width: 6.25em;
  }

  /*-----------------------------------
  4.2 End Legales
  -----------------------------------*/

  /*-----------------------------------
  4.3 Footer
  -----------------------------------*/
  .footer-redes {
    flex-direction: column;
    gap: 0.313em;
  }

  .max-w {
    flex-direction: column;
    gap: 0.938em;
  }

  .footer-recuerde {
    padding: 1.313em;
  }

  /*-----------------------------------
  4.3 End Footer
  -----------------------------------*/

  /* Ancho */
  .blq-w-md-20,
  .blq-w-md-25,
  .blq-w-md-30,
  .blq-w-md-35,
  .blq-w-md-40,
  .blq-w-md-45,
  .blq-w-md-50,
  .blq-w-md-55,
  .blq-w-md-60,
  .blq-w-md-65,
  .blq-w-md-70,
  .blq-w-md-75,
  .blq-w-md-80,
  .blq-w-md-85,
  .blq-w-md-90,
  .blq-w-md-95,
  .blq-w-md-100 {
    width: 100%;
  }

  /* End Ancho */

  /* ---- HERO RESPONSIVE MÓVIL ---- */

  .dv-hero {
    height: 80vh;
    height: 80dvh;
  }

  .dv-hero__inline-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.4em;
  }

  .dv-hero__dots {
    flex-direction: row;
    bottom: 1.2em;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  /* ================================
     REDES SOCIALES – MÓVIL
  ================================ */
  .social-cta-wrapper {
    padding: 0 1em;
  }

  .dv-social-cta {
    padding-top: 6em;
  }

  .social-cta-bar {
    height: 33em;
    flex-direction: column;
    align-items: flex-start;
    padding: 2em;
  }

  .social-cta-text {
    padding-left: 0;
    white-space: normal;
    width: 100%;
    text-align: left;
    pointer-events: none;
    padding-top: 9em;
  }

  .social-cta-text p:first-child {
    line-height: 1.4em !important;
  }

  /* Stickers: se mueven arriba del bar */
  .social-stickers {
    display: block;
    position: absolute;
    left: 50%;
    top: -3em;
    transform: translateX(-50%);
    width: 15em;
    height: 10em;
    z-index: 3;
  }

  /* ================================
     PRÓXIMOS EVENTOS – MOBILE
  ================================ */
  .tarjeta-evento {
    flex: 0 0 18.125em;
    height: 22.5em;
  }


  .columna-info>.d-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .controles-nav {
    flex-direction: row;
    position: static;
    transform: none;
  }

  .btn-prev {
    display: flex;
  }

  .btn-comprar {
    width: 100%;
    justify-content: center;
  }

  .miniaturas-track {
    justify-content: center;
  }

  .btn-miniatura {
    width: 1.8em;
    height: 1.8em;
  }

  /* ================================
   PRÓXIMOS EVENTOS – MOBILE
================================ */

  .contenedor-slider-dual {
    flex-direction: column;
    overflow: hidden;
  }

  .columna-galeria {
    width: 100%;
    padding: 0;
  }

  .slider-track {
    justify-content: center;
    gap: 1em;
    padding: 0 1.5em;
    overflow: hidden;
  }

  .tarjeta-evento {
    flex: 0 0 80%;
    max-width: 80%;
    height: 22em;
    scroll-snap-align: center;
  }

  .tarjeta-evento.active {
    transform: scale(1);
  }

  .btn-prev {
    order: 1;
  }

  .btn-next {
    order: 2;
  }

  .columna-info {
    width: 100%;
    padding: 1.5em;
  }

  .info-proximos-eventos {
    text-align: center;
  }

  .btn-comprar {
    width: 100%;
    justify-content: center;
  }

  .miniaturas-track {
    justify-content: center;
  }

  .btn-miniatura {
    width: 1.8em;
    height: 1.8em;
  }

  body {
    overflow-x: hidden;
  }

  /* ================================
     BENEFITS – MÓVIL
  ================================ */
  .card-red,
  .card-pink {
    width: 9em;
  }

  .card-pink {
    top: 0.5em;
  }

  .text-cards {
    font-size: var(--f-30px);
    margin-left: 3.2em;
  }

  /* ================================================
     EXPERIENCIAS – MOBILE (scroll nativo horizontal)
  ================================================ */

  /* Viewport: scroll nativo con snap */
  .dv-exp__viewport {
    height: 100vh;
    position: relative;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-top: 0;
    padding: 0;
  }

  .dv-exp__viewport::-webkit-scrollbar {
    display: none;
  }

  /* Track: anular GSAP */
  .dv-exp__track {
    transform: none !important;
    width: max-content;
  }

  /* Cada panel = pantalla completa */
  .panel {
    width: 100vw;
    height: 100vh;
    min-height: auto;
    flex: 0 0 100vw;
    scroll-snap-align: start;
    padding: 3em 2em;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Ocultar intro image y panel de foto Medellín */
  .first-panel {
    display: none;
  }

  /* Romper second-panel para que Bogotá y Medellín sean slides independientes */
  .second-panel {
    display: contents;
  }

  .fourth-panel {
    max-width: 100vw;
  }

  /* ---- BOGOTÁ (slide propio) ---- */
  .lounge_exclusivo {
    width: 100vw;
    flex: 0 0 100vw;
    height: auto;
    padding: 0 2em;
    padding-bottom: 0;
    scroll-snap-align: start;
    /* background: var(--black); */
    align-items: center;
  }

  .lounge-cont {
    width: 100%;
  }

  /* ---- MEDELLÍN (slide propio) ---- */
  .experiencias_medellin {
    width: 100vw;
    flex: 0 0 100vw;
    height: auto;
    padding: 0 2em;
    padding-left: 2em;
    scroll-snap-align: start;
    /* background: var(--black); */
  }

  .medellin-cont {
    width: 100%;
  }

  /* ---- Imágenes mobile ---- */
  .mobile-benefit-img {
    display: block;
    width: 100%;
    border-radius: 2.5em;
    overflow: hidden;
    margin-top: 3.5em;
  }

  .mobile-benefit-img img {
    width: 100%;
    height: 12em;
    object-fit: cover;
    display: block;
  }

  /* ---- Iconos y títulos ---- */
  .ex-tt-icon {
    margin-bottom: 1.5em;
  }

  .ex-cont-p {
    margin-bottom: 1.5em !important;
  }

  .ex-cont-p p {
    margin-bottom: 1.5em !important;
    margin-left: 0 !important;
  }

  /* ---- BENE-3: Hamburguesa ---- */
  /* .fourth-panel,
  .five-panel,
  .seven-panel {
    max-width: none;
    background: var(--grayLight);
  } */

  .promo-card-main {
    width: 100%;
  }

  /* ---- BENE-4: Preventa ---- */
  .prev-card {
    height: auto;
    min-height: 12em;
    flex-direction: column;
    padding-bottom: 5em;
  }

  /* ---- BENE-5: Filas ---- */
  .six-panel {
    max-width: none;
  }

  /* ---- BENE-6: Tribuna ---- */

  .tribu-cont {
    max-width: 18.75em;
    height: auto;
    min-height: 14em;
    flex-direction: column;
    text-align: center;
    gap: 1em !important;
  }

  .txt-fan {
    font-size: var(--f-14px);
    width: 100% !important;
  }

  /* ---- Botón flotante ---- */
  .exp-mobile-nav {
    display: flex;
    position: absolute;
    bottom: 1.5em;
    right: 1.5em;
    z-index: 5;
    width: 3em;
    height: 3em;
    border: none;
    cursor: pointer;
  }

  .equalizer-wrapper {
    display: none;
  }

  .dv-bg_experiencias {
    border-radius: 2.5em 2.5em 0 0;
    box-shadow: 0 0.125em 0 0 var(--black);
  }

  .line-num .line {
    height: 75vh;
  }

  .third-panel {
    max-width: 100vw;
    padding: 0;
  }

  .ex-tt h3 span {
    display: none;
  }

  .ex-title-b,
  .city-txt {
    left: 0;
  }

  .promo-card-wrapper {
    max-width: 20em;
  }

  .line-ani {
    z-index: 0;
  }

  /* ================================
     RINGS RESPONSIVE – MOBILE
  ================================ */
  .ring-1 {
    width: calc(100% + -1.5em);
    height: calc(100% + -1.5em);
    border-radius: 2.8em;
  }

  .ring-2 {
    width: calc(100% + 0.5em);
    height: calc(100% + 0.5em);
    border-radius: 3.2em;
  }

  .ring-3 {
    width: calc(100% + 2.5em);
    height: calc(100% + 2.5em);
    border-radius: 3.6em;
  }

  .bnn-tablet,
  .bnn-desk {
    display: none;
  }

  .bnn-mobile {
    display: block;
  }

  .titulo-final {
    margin-top: 2em;
  }

  .marquee-wrapper {
    transform: translateY(-1.5em);
  }

  .btn-x {
    top: 1.813rem;
    right: 1.938rem;
  }

  .vip-detail {
    padding: 3em 1.5em;
  }

  .vip-title {
    line-height: 1.1;
  }

  .vip-detail__bottom {
    text-align: left;
  }

  .vip-paragraph {
    line-height: 1.7;
  }

  .zona-vipp {
    padding: 3em 2em;
    border-radius: 2em;
  }

  .zona-vipp__sticker {
    width: 6em;
  }

  .zona-vipp__col p {
    margin-top: 1.5em;
  }

  .suites-col--right {
    padding: 3em 2em;
    border-radius: 2em;
  }

  .suite-card {
    padding: 2.5em 2em;
  }

  .suite-ring {
    inset: -2em;
  }

  .mv-card {
    border-radius: 2em;
    padding: 2.5em 2em;
  }

  .mv-icon img {
    width: 5.5em;
  }
}

@media only screen and (max-width: 576px) {

  /* Ancho */
  .blq-w-sm-20,
  .blq-w-sm-25,
  .blq-w-sm-30,
  .blq-w-sm-35,
  .blq-w-sm-40,
  .blq-w-sm-45,
  .blq-w-sm-50,
  .blq-w-sm-55,
  .blq-w-sm-60,
  .blq-w-sm-65,
  .blq-w-sm-70,
  .blq-w-sm-75,
  .blq-w-sm-80,
  .blq-w-sm-85,
  .blq-w-sm-90,
  .blq-w-sm-95,
  .blq-w-sm-100 {
    width: 100%;
  }

  .dv-hero__title {
    font-size: 3.188em;
  }

  .dv-hero__copy {
    padding: 2em;
    padding-top: 3.5em;
  }

  /* End Ancho */

  /* ================================
     BENEFITS – MÓVIL PEQUEÑO
  ================================ */
  .card-red {
    width: 9em;
  }
}

@media only screen and (max-width: 375px) {
  body {
    font-size: 12px;
  }
}


.bloque-gigante.char-gigante {
  color: #000 !important;
}

.slider-region.dv-hero {
  height: 31.25em;
  width: 100%;
  margin: 0 auto;
}

.region-s-copy.dv-hero__copy {
  position: absolute;
  bottom: 1.875em;
  left: 3.75em;
  padding: 0;
}

.region-s-copy.dv-hero__copy .dv-hero__sub {
  margin: 0;
}

.slider-region.dv-hero .dv-hero__dots {
  bottom: 2em;
}

.wrapper-top {
  margin-top: -7.063em;
}

.region-card-bene .mv-card {
  height: 20em;
}

.past-card.card-construc {
  flex: 0 0 30em;
  position: relative;
}

.past-card.card-construc::before {
  height: 6.25em;
  content: '';
  width: 100%;
  background: #000000;
  background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0);
  position: absolute;
  bottom: 0;
  left: 0;
}

.txt-construccion {
  position: absolute;
  bottom: 2em;
  left: 2em;
  margin: 0;
  z-index: 1;
}

.aliados-cont {
  height: auto;
  padding: 3em;
}

.aliados-logos img {
  max-height: 2.688em;
  width: auto;
}

/* Banner Aliado Principal */
.banner-aliado {
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

.banner-aliado img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  border-radius: 2em;
}

@media only screen and (max-width: 768px) {
  .banner-aliado {
    margin-left: -35%;
    margin-right: 8%;
    margin-top: 0;
  }

  .banner-aliado img {
    border-radius: 1.2em;
    width: 140%;
    max-width: none;
  }

  .aliados-secundarios img {
    height: 55px !important;
  }
}

.mv-card .ico {
  width: 1.2em;
  height: 1.2em;
}

/* ================================
   ARENA METRICS
================================ */

.arena-metrics {
  background: var(--black);
  padding: 5em 0;
  border-radius: 2.5em;
}

.arena-metrics__title {
  color: var(--white);
  max-width: 18em;
  margin: 0 auto 2.5em;
  line-height: 1.1;
}

.arena-metrics__title span {
  color: var(--redDavivienda);
}

/* GRID */
.arena-metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
}

/* CARD */
.metric-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2.5em;
  padding: 2.5em 2em;
  text-align: center;
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 0 0.063em rgba(255, 255, 255, 0.15);
}

/* ICONO */
.metric-card__icon {
  width: 2.6em;
  height: 2.6em;
  margin: 0 auto 1em;
}

.metric-card__icon img {
  width: 100%;
  height: 100%;
}

/* NÚMERO */
.metric-card__value {
  font-size: var(--f-35px);
  color: var(--white);
  margin: 0 0 0.2em;
  font-family: var(--dav-bold);
}

/* TEXTO */
.metric-card__label {
  font-size: var(--f-14px);
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.bnn-tiempo {
  position: relative;
  height: 2.5em;
  border-radius: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-banner {
  background: rgb(255 255 255 / 20%);
  position: absolute;
  right: 2em;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  z-index: 10;
  outline: none;
  box-shadow: none;
  height: 30px;
  width: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
╔═════════════════════════════════════════════════════╗
║   Borar cuadro e insertar estilos escritorio aca    ║
║   responsive por favor usar las media queries       ║
║   que se encuentran en la parte de abajo            ║
╚═════════════════════════════════════════════════════╝
*/

/* Responsive */
@media only screen and (min-width: 1668px) {
  body {
    font-size: 17px;
  }

  .columna-info {
    width: 40%;
  }
}

/* Responsive */
@media only screen and (max-width: 991px) {
  .legalFoot .line {
    display: none;
  }

  /* Ancho */
  .blq-w-lg-20,
  .blq-w-lg-25,
  .blq-w-lg-30,
  .blq-w-lg-35,
  .blq-w-lg-40,
  .blq-w-lg-45,
  .blq-w-lg-50,
  .blq-w-lg-55,
  .blq-w-lg-60,
  .blq-w-lg-65,
  .blq-w-lg-70,
  .blq-w-lg-75,
  .blq-w-lg-80,
  .blq-w-lg-85,
  .blq-w-lg-90,
  .blq-w-lg-95,
  .blq-w-lg-100 {
    width: 100%;
  }

  /* End Ancho */
  /* .menu.on {
    padding: 1em 2em;
    justify-content: space-between;
  } */

  .menu {
    top: 0;
    max-width: initial;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.6s;
    padding: 1.5em 2em;
    border-radius: 1.3em;
  }

  .menu-nav {
    flex-direction: column;
  }

  .menu-list {
    padding: 3em;
    padding-left: 6em;
    flex-direction: column;
    transition: all 0.6s;
    counter-reset: item;
    list-style: none;
    z-index: 20;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: var(--black);
  }

  .menu-list.open-menu {
    background: var(--black);
    left: 0;
  }

  .menu-nav .btn-g2 {
    margin-bottom: 1.938em;
  }

  .menu-list li {
    padding-bottom: 3em;
    padding-top: 3em;
    border-bottom: 0.063em solid rgb(225 225 225 / 60%);
    width: 100%;
    text-align: left;
    opacity: 0;
  }

  .menu-list li a:not(.active) span {
    color: var(--white);
    font-size: 1.5em;
  }

  .menu-list li span {
    font-size: 1.5em;
    color: var(--white);
  }

  /* Animación de entrada de los items del menú */
  @keyframes menuEs {
    0% {
      transform: translateY(3.75em);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .menu-list.open-menu li {
    animation-name: menuEs;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
  }

  /* Retrasos escalonados para la animación */
  .menu-list.open-menu li:nth-child(2) {
    animation-delay: .3s;
  }

  .menu-list.open-menu li:nth-child(3) {
    animation-delay: .6s;
  }

  .menu-list.open-menu li:nth-child(4) {
    animation-delay: .9s;
  }

  .menu-list.open-menu li:nth-child(5) {
    animation-delay: 1.2s;
  }

  .menu-list.open-menu li:nth-child(6) {
    animation-delay: 1.5s;
  }

  .menu-list.open-menu li:nth-child(7) {
    animation-delay: 1.8s;
  }

  .menu-list.open-menu li:nth-child(8) {
    animation-delay: 2.1s;
  }

  .menu-list.open-menu li:nth-child(9) {
    animation-delay: 2.4s;
  }

  .menu-list.open-menu li:nth-child(10) {
    animation-delay: 2.7s;
  }

  .menu-list li.link-page,
  .menu-list .link-page {
    margin: 0;
    padding: 0;
    counter-increment: item;
    position: relative;
  }

  .menu-list li.link-page,
  .menu-list:hover .link-page:hover {
    background: red;
  }

  .menu-list li.link-page:before,
  .menu-list .link-page:before {
    content: "0" counter(item);
    position: absolute;
    left: -1.875em;
    top: 0.2em;
    transform: rotate(-90deg);
    font-family: var(--dav-semiBold);
    color: #c2bebe;
  }

  .lenguajeBtn {
    height: 3em;
    width: 9.625em;
  }

  .menu .logo-header {
    max-width: 12em;
  }

  .menu .btn-g2 span {
    font-size: 1em;
  }

  .menu .modal-close {
    position: absolute;
    top: 1.25em;
    right: 1.25em;
    height: 5.313em;
    width: 5.313em;
    border-radius: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border: none;
    background: var(--white);
  }

  .menu .modal-close span {
    font-size: 1.5em;
  }

  /* Botón hamburguesa flotante */
  /* .menu.on .logo-header {
    max-width: 14em;
  } */

  .menuActive {
    display: block;
    font-size: 16px;
  }

  .menuActive>.btn-ico * {
    pointer-events: none;
  }

  .menu .menuActive .btn-ico {
    padding-left: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.6em;
    transition: all 0.6s;
  }

  /* .menu.on .menuActive .btn-ico {
    height: 3.75em;
  } */

  .bars {
    width: 1.563em;
    height: 0.8em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.25em;
  }

  .menuBars {
    height: 0.188em;
    width: 100%;
    background: var(--black);
  }

  .menuBars:nth-child(2) {
    width: calc(100% - 0.625em);
  }

  /* ---- HERO RESPONSIVE TABLET ---- */
  .dv-hero {
    height: 62.5em;
  }

  .dv-hero__slide {
    align-items: self-start;
  }

  .dv-hero__copy {
    padding: 2em;
    padding-top: 6.5em;
  }

  .dv-hero__sub br {
    display: none;
  }

  .dv-hero__nav {
    right: 1.5em;
  }

  .dv-hero__dots {
    right: 2.5em;
    bottom: 2em;
  }

  /* ================================
     PRÓXIMOS EVENTOS – TABLET
  ================================ */
  .contenedor-slider-dual {
    flex-direction: column;
    overflow: hidden;
  }

  .columna-galeria {
    width: 100%;
  }

  .slider-track {
    overflow: hidden;
  }

  .tarjeta-evento {
    flex: 0 0 18.125em !important;
    min-width: 18.125em !important;
    max-width: 18.125em !important;
    height: 22.5em !important;
  }

  .columna-info {
    width: 100%;
    padding: 1.5em 2em;
  }

  .columna-info>.d-flex {
    justify-content: center;
  }

  .info-TT {
    font-size: var(--f-30px);
  }

  .info-date {
    font-size: var(--f-20px);
  }

  .miniaturas-track {
    justify-content: center;
  }

  .cont-titulo-animado {
    min-height: 0em;
  }

  .marquee-wrapper {
    transform: translateY(0);
  }

  /* ================================
     BENEFITS – TABLET
  ================================ */
  .fila-benefits {
    flex-direction: column !important;
    gap: 2em !important;
  }

  .divisor-vertical {
    width: 80%;
    height: 0.063em;
  }

  .columna-header {
    width: 100%;
  }

  .titular-container {
    padding-left: 0;
    display: flex;
    align-items: center;
  }

  .text-cards {
    margin-left: 3.5em;
  }

  .card-red,
  .card-pink {
    width: 11em;
  }

  .columna-acciones {
    max-width: 24.063em;
    text-align: center;
  }

  .texto-instruccion {
    margin-bottom: 1.5em;
  }

  .botones-apps {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .botones-apps .btn-line {
    transform: none;
  }

  .botones-apps .btn-g {
    margin-right: auto;
  }

  .botones-apps .btn-line {
    margin-left: auto;
  }

  .wrapper-visual {
    justify-content: center;
  }

  .dv-benefits {
    padding: 2.75em 0;
  }

  .secc {
    padding: 2.125em 0;
  }

  .dv-equalizer {
    height: 6em;
  }

  /* ================================
     EXPERIENCIAS TÍTULO – TABLET
  ================================ */
  .dv-bg_experiencias {
    flex-direction: column;
    align-items: center;
    padding-top: 3em;
  }

  /* Neons apilados arriba */
  .cont-neon {
    width: 100%;
    height: 62vw;
    overflow: hidden;
  }

  /* Título va al final */
  .dv-past__head {
    order: 3;
    width: 100%;
    padding: 2em;
    justify-content: center;
    margin-top: -4em;
    z-index: 1;
  }

  .cont-neon-2 {
    display: none;
  }

  .neon-lr-1 {
    width: 56%;
  }

  .neon-lr-2 {
    width: 110%;
    left: 50%;
    transform: translateX(-50%);
  }

  .neon-lb-3 {
    width: 110%;
    left: 50%;
    transform: translateX(-50%);
  }

  .lounge_exclusivo {
    padding: 0 2em;
    width: 100%;
  }

  /* ================================
     EXPERIENCIAS HORIZONTAL – TABLET
  ================================ */

  /* Los paneles necesitan más espacio */
  .second-panel {
    max-width: 130vw;
    width: 130vw;
  }

  .lounge_exclusivo,
  .experiencias_medellin {
    width: 65vw;
    padding: 0 4em;
  }


  .lounge-cont,
  .medellin-cont {
    padding: 5em 2em;
  }

  .icon-neon {
    z-index: 1;
  }

  .ex-tt h3.f-35px {
    font-size: var(--f-25px);
  }

  .ex-tt h3.f-25px {
    font-size: var(--f-20px);
  }

  .ex-tt {
    top: 0;
    left: 0;
  }


  .city-txt {
    left: 2.6em;
  }

  .ex-title-b {
    left: 1.8em;
  }

  .ex-tt-icon {
    margin-bottom: 2.5em;
  }

  .ex-cont-p p {
    font-size: var(--f-14px);
  }

  /* Imagen Medellín */
  .third-panel {
    max-width: 100vw;
  }

  /* Hamburguesa */
  .promo-card-main {
    width: auto;
    height: 14.5em;
    border-radius: 2em;
  }

  .promo-badge {
    bottom: -4.5em;
  }

  /* Preventa */
  .five-panel {
    max-width: 40em;
  }

  .prev-card {
    max-width: 28em;
    height: 14em;
    border-radius: 2em;
    background-size: 18em, 8em;
  }

  /* Filas */
  .six-panel {
    max-width: 25em;
  }

  .promo-card-main-2 {
    max-width: 27em;
    height: 7.5em;
    width: 100%;
  }

  /* Tribuna Fan */
  .tribu-cont {
    max-width: 80%;
    height: 14em;
    border-radius: 2em;
    padding: 1.5em 2em;
    gap: 1.5em !important;
  }

  .txt-fan {
    font-size: var(--f-14px);
  }

  .seven-panel {
    width: 100vw;
  }

  /* Líneas más cortas */
  .line-num .line {
    height: 90vh;
  }

  .promo-card-wrapper {
    max-width: 17.5em;
    margin: 0 auto;
    display: block;
    padding: 6vw;
  }

  .six-panel .promo-card-wrapper {
    padding: 6vw;
    margin-top: 2em;
    max-width: 26.6em;
  }

  .fourth-panel .line-num .line,
  .five-panel .line-num .line,
  .six-panel .line-num .line,
  .seven-panel .line-num .line {
    background: var(--black);
    height: 15vh;
  }

  .line-ani {
    width: 100vh;
  }

  .bnn-desk,
  .bnn-mobile {
    display: none;
  }

  .bnn-tablet {
    display: block;
  }

  .lounge-slide {
    position: relative;
    width: 100vw;
    gap: 2em;
    align-items: start;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 2em;
  }

  .lounge-header {
    padding: 2em;
  }

  .lounge-card {
    height: auto;
  }


  .modal-body::-webkit-scrollbar {
    width: 0.5em;
  }

  .modal-body::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 8em;
  }

  .modal-body::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 8em;
  }

  .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--black);
  }

  .vip-detail__top {
    grid-template-columns: 1fr;
    gap: 3em;
  }

  .vip-detail__text {
    text-align: left;
  }

  .vip-detail__image img {
    border-radius: 2.5em;
  }

  .vip-detail__bottom {
    margin-top: 3em;
  }

  .zona-vipp {
    padding: 3.5em 2.5em;
  }

  .zona-vipp__wrapper {
    flex-direction: column;
    gap: 3em;
  }

  .zona-vipp__divider {
    width: 60%;
    height: 1px;
    margin: 0 auto;
  }

  .suites-section {
    flex-direction: column;
    gap: 5em;
  }

  .suites-col--right {
    text-align: center;
  }

  .suites-sticker {
    margin-left: auto;
    margin-right: auto;
  }

  .form-wrapper {
    flex-direction: column;
    gap: 3em;
  }

  .form-img {
    width: 100%;
    height: 18em;
  }

  .form-row {
    flex-direction: column;
    gap: 2em;
  }

  .form-action {
    justify-content: center;
  }

  .mv-wrapper {
    flex-direction: column;
    gap: 0;
  }

  .mv-icon {
    display: none;
  }

  .mv-card {
    padding: 3em 2.5em;
    height: auto;
    margin: 0 auto;
  }

  .mv-card--right {
    margin-top: 2em;
  }

  .cont-vicularse {
    height: auto;
  }

  .wrapper-top {
    margin-top: 2em;
  }

  .arena-metrics__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 768px) {

  /*-----------------------------------
  4.2 Legales
  -----------------------------------*/
  .Davivienda-leitmotiv {
    position: absolute;
    width: 6.25em;
  }

  /*-----------------------------------
  4.2 End Legales
  -----------------------------------*/

  /*-----------------------------------
  4.3 Footer
  -----------------------------------*/
  .footer-redes {
    flex-direction: column;
    gap: 0.313em;
  }

  .max-w {
    flex-direction: column;
    gap: 0.938em;
  }

  .footer-recuerde {
    padding: 1.313em;
  }

  /*-----------------------------------
  4.3 End Footer
  -----------------------------------*/

  /* Ancho */
  .blq-w-md-20,
  .blq-w-md-25,
  .blq-w-md-30,
  .blq-w-md-35,
  .blq-w-md-40,
  .blq-w-md-45,
  .blq-w-md-50,
  .blq-w-md-55,
  .blq-w-md-60,
  .blq-w-md-65,
  .blq-w-md-70,
  .blq-w-md-75,
  .blq-w-md-80,
  .blq-w-md-85,
  .blq-w-md-90,
  .blq-w-md-95,
  .blq-w-md-100 {
    width: 100%;
  }

  /* End Ancho */

  /* ---- HERO RESPONSIVE MÓVIL ---- */

  .dv-hero {
    height: 80vh;
    height: 80dvh;
  }

  .dv-hero__inline-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.4em;
  }

  .dv-hero__dots {
    flex-direction: row;
    bottom: 1.2em;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  /* ================================
     REDES SOCIALES – MÓVIL
  ================================ */
  .social-cta-wrapper {
    padding: 0 1em;
  }

  .dv-social-cta {
    padding-top: 6em;
  }

  .social-cta-bar {
    height: 33em;
    flex-direction: column;
    align-items: flex-start;
    padding: 2em;
  }

  .social-cta-text {
    padding-left: 0;
    white-space: normal;
    width: 100%;
    text-align: left;
    pointer-events: none;
    padding-top: 9em;
  }

  .social-cta-text p:first-child {
    line-height: 1.4em !important;
  }

  /* Stickers: se mueven arriba del bar */
  .social-stickers {
    display: block;
    position: absolute;
    left: 50%;
    top: -3em;
    transform: translateX(-50%);
    width: 15em;
    height: 10em;
    z-index: 3;
  }

  /* ================================
     PRÓXIMOS EVENTOS – MOBILE
  ================================ */
  .tarjeta-evento {
    flex: 0 0 18.125em;
    height: 22.5em;
  }


  .columna-info>.d-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .controles-nav {
    flex-direction: row;
    position: static;
    transform: none;
  }

  .btn-prev {
    display: flex;
  }

  .btn-comprar {
    width: 100%;
    justify-content: center;
  }

  .miniaturas-track {
    justify-content: center;
  }

  .btn-miniatura {
    width: 1.8em;
    height: 1.8em;
  }

  /* ================================
   PRÓXIMOS EVENTOS – MOBILE
================================ */

  .contenedor-slider-dual {
    flex-direction: column;
    overflow: hidden;
  }

  .columna-galeria {
    width: 100%;
    padding: 0;
  }

  .slider-track {
    justify-content: center;
    gap: 1em;
    padding: 0 1.5em;
    overflow: hidden;
  }

  .tarjeta-evento {
    flex: 0 0 80%;
    max-width: 80%;
    height: 22em;
    scroll-snap-align: center;
  }

  .tarjeta-evento.active {
    transform: scale(1);
  }

  .btn-prev {
    order: 1;
  }

  .btn-next {
    order: 2;
  }

  .columna-info {
    width: 100%;
    padding: 1.5em;
  }

  .info-proximos-eventos {
    text-align: center;
  }

  .btn-comprar {
    width: 100%;
    justify-content: center;
  }

  .miniaturas-track {
    justify-content: center;
  }

  .btn-miniatura {
    width: 1.8em;
    height: 1.8em;
  }

  body {
    overflow-x: hidden;
  }

  /* ================================
     BENEFITS – MÓVIL
  ================================ */
  .card-red,
  .card-pink {
    width: 9em;
  }

  .card-pink {
    top: 0.5em;
  }

  .text-cards {
    font-size: var(--f-30px);
    margin-left: 3.2em;
  }

  /* ================================================
     EXPERIENCIAS – MOBILE (scroll nativo horizontal)
  ================================================ */

  /* Viewport: scroll nativo con snap */
  .dv-exp__viewport {
    height: 100vh;
    position: relative;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-top: 0;
    padding: 0;
  }

  .dv-exp__viewport::-webkit-scrollbar {
    display: none;
  }

  /* Track: anular GSAP */
  .dv-exp__track {
    transform: none !important;
    width: max-content;
  }

  /* Cada panel = pantalla completa */
  .panel {
    width: 100vw;
    height: 100vh;
    min-height: auto;
    flex: 0 0 100vw;
    scroll-snap-align: start;
    padding: 3em 2em;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Ocultar intro image y panel de foto Medellín */
  .first-panel {
    display: none;
  }

  /* Romper second-panel para que Bogotá y Medellín sean slides independientes */
  .second-panel {
    display: contents;
  }

  .fourth-panel {
    max-width: 100vw;
  }

  /* ---- BOGOTÁ (slide propio) ---- */
  .lounge_exclusivo {
    width: 100vw;
    flex: 0 0 100vw;
    height: auto;
    padding: 0 2em;
    padding-bottom: 0;
    scroll-snap-align: start;
    /* background: var(--black); */
    align-items: center;
  }

  .lounge-cont {
    width: 100%;
  }

  /* ---- MEDELLÍN (slide propio) ---- */
  .experiencias_medellin {
    width: 100vw;
    flex: 0 0 100vw;
    height: auto;
    padding: 0 2em;
    padding-left: 2em;
    scroll-snap-align: start;
    /* background: var(--black); */
  }

  .medellin-cont {
    width: 100%;
  }

  /* ---- Imágenes mobile ---- */
  .mobile-benefit-img {
    display: block;
    width: 100%;
    border-radius: 2.5em;
    overflow: hidden;
    margin-top: 3.5em;
  }

  .mobile-benefit-img img {
    width: 100%;
    height: 12em;
    object-fit: cover;
    display: block;
  }

  /* ---- Iconos y títulos ---- */
  .ex-tt-icon {
    margin-bottom: 1.5em;
  }

  .ex-cont-p {
    margin-bottom: 1.5em !important;
  }

  .ex-cont-p p {
    margin-bottom: 1.5em !important;
    margin-left: 0 !important;
  }

  /* ---- BENE-3: Hamburguesa ---- */
  /* .fourth-panel,
  .five-panel,
  .seven-panel {
    max-width: none;
    background: var(--grayLight);
  } */

  .promo-card-main {
    width: 100%;
  }

  /* ---- BENE-4: Preventa ---- */
  .prev-card {
    height: auto;
    min-height: 12em;
    flex-direction: column;
    padding-bottom: 5em;
  }

  /* ---- BENE-5: Filas ---- */
  .six-panel {
    max-width: none;
  }

  /* ---- BENE-6: Tribuna ---- */

  .tribu-cont {
    max-width: 18.75em;
    height: auto;
    min-height: 14em;
    flex-direction: column;
    text-align: center;
    gap: 1em !important;
  }

  .txt-fan {
    font-size: var(--f-14px);
    width: 100% !important;
  }

  /* ---- Botón flotante ---- */
  .exp-mobile-nav {
    display: flex;
    position: absolute;
    bottom: 1.5em;
    right: 1.5em;
    z-index: 5;
    width: 3em;
    height: 3em;
    border: none;
    cursor: pointer;
  }

  .equalizer-wrapper {
    display: none;
  }

  .dv-bg_experiencias {
    border-radius: 2.5em 2.5em 0 0;
    box-shadow: 0 0.125em 0 0 var(--black);
  }

  .line-num .line {
    height: 75vh;
  }

  .third-panel {
    max-width: 100vw;
    padding: 0;
  }

  .ex-tt h3 span {
    display: none;
  }

  .ex-title-b,
  .city-txt {
    left: 0;
  }

  .promo-card-wrapper {
    max-width: 20em;
  }

  .line-ani {
    z-index: 0;
  }

  /* ================================
     RINGS RESPONSIVE – MOBILE
  ================================ */
  .ring-1 {
    width: calc(100% + -1.5em);
    height: calc(100% + -1.5em);
    border-radius: 2.8em;
  }

  .ring-2 {
    width: calc(100% + 0.5em);
    height: calc(100% + 0.5em);
    border-radius: 3.2em;
  }

  .ring-3 {
    width: calc(100% + 2.5em);
    height: calc(100% + 2.5em);
    border-radius: 3.6em;
  }

  .bnn-tablet,
  .bnn-desk {
    display: none;
  }

  .bnn-mobile {
    display: block;
  }

  .titulo-final {
    margin-top: 2em;
  }

  .marquee-wrapper {
    transform: translateY(-1.5em);
  }

  .btn-x {
    top: 1.813rem;
    right: 1.938rem;
  }

  .vip-detail {
    padding: 3em 1.5em;
  }

  .vip-title {
    line-height: 1.1;
  }

  .vip-detail__bottom {
    text-align: left;
  }

  .vip-paragraph {
    line-height: 1.7;
  }

  .zona-vipp {
    padding: 3em 2em;
    border-radius: 2em;
  }

  .zona-vipp__sticker {
    width: 6em;
  }

  .zona-vipp__col p {
    margin-top: 1.5em;
  }

  .suites-col--right {
    padding: 3em 2em;
    border-radius: 2em;
  }

  .suite-card {
    padding: 2.5em 2em;
  }

  .suite-ring {
    inset: -2em;
  }

  .mv-card {
    border-radius: 2em;
    padding: 2.5em 2em;
  }

  .mv-icon img {
    width: 5.5em;
  }

  .slider-region.dv-hero {
    height: 20em;
  }

  .slider-region.dv-hero .dv-hero__dots {
    bottom: 2em;
    right: 1.875em;
    left: initial;
    transform: translateX(0);
  }

  .region-s-copy.dv-hero__copy {
    position: absolute;
    bottom: 2em;
    left: 1.875em;
    padding: 0;
  }

  .aliados-logos img {
    max-height: 1.688em;
  }

  .arena-metrics__grid {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 576px) {

  /* Ancho */
  .blq-w-sm-20,
  .blq-w-sm-25,
  .blq-w-sm-30,
  .blq-w-sm-35,
  .blq-w-sm-40,
  .blq-w-sm-45,
  .blq-w-sm-50,
  .blq-w-sm-55,
  .blq-w-sm-60,
  .blq-w-sm-65,
  .blq-w-sm-70,
  .blq-w-sm-75,
  .blq-w-sm-80,
  .blq-w-sm-85,
  .blq-w-sm-90,
  .blq-w-sm-95,
  .blq-w-sm-100 {
    width: 100%;
  }

  .dv-hero__title {
    font-size: 3.188em;
  }

  .dv-hero__copy {
    padding: 2em;
    padding-top: 3.5em;
  }

  /* End Ancho */

  /* ================================
     BENEFITS – MÓVIL PEQUEÑO
  ================================ */
  .card-red {
    width: 9em;
  }

  .past-card.card-construc {
    flex: 0 0 20em;
  }

  .vip-detail__image {
    height: 15em;
  }

  .vip-detail__image {
    border-radius: 1.5em;
  }

  .vip-detail__top {
    grid-template-columns: 1fr;
    gap: 1em;
  }
}

@media only screen and (max-width: 375px) {
  body {
    font-size: 12px;
  }
}