.portada__tarjeta {
  padding: 4.5rem var(--lado) 3rem;
}

.portada__tarjeta > .contenedor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.portada__textos,
.portada .imagen-cabecera {
  grid-area: 1 / 1;
}

.portada__textos {
  position: relative;
  z-index: 3;
  align-self: end;
  padding: 0 2.5rem 2.5rem;
}

.portada .imagen-cabecera {
  height: max(26rem, calc(100svh - 15.5rem));
  margin-top: 0;
  aspect-ratio: auto;
}

.portada .imagen-cabecera::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(14, 16, 17, .9), rgba(14, 16, 17, .65) 35%, rgba(14, 16, 17, 0) 75%);
}

.portada__titulo {
  max-width: 60rem;
  margin: 1rem 0;
  font-size: var(--texto-titular);
  line-height: 1;
  text-wrap: balance;
}

.portada__entradilla {
  max-width: 32rem;
  color: rgba(255, 255, 255, .85);
  font-size: var(--texto-entradilla);
  line-height: 1.6;
}

.portada__conceptos {
  min-height: 2.5rem;
  --icono-tamano: .875rem;
}

.portada__conceptos .icono {
  transition: transform var(--duracion-muelle-hover) var(--muelle-hover);
}

@media (hover: hover) {
  .portada__conceptos:hover .icono {
    transform: translateY(.1875rem);
  }
}

.portada__sectores {
  grid-area: 2 / 1;
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-top: 1.5rem;
  padding: 1.5rem 0;
}

.portada__sector {
  flex: none;
  padding-right: 4rem;
  color: var(--color-texto-secundario);
  font-size: var(--texto-titulo-4);
  line-height: 1.2;
  white-space: nowrap;
}

.servicios__tarjeta {
  padding: 5.5rem var(--lado) var(--v);
}

.servicios__titulo {
  max-width: 46rem;
  margin-bottom: var(--v-tit);
}

.servicios__precios {
  width: 100%;
  margin-top: var(--hueco);
}

.estudio__tarjeta {
  position: relative;
  min-height: 35.625rem;
  padding: var(--v) var(--lado);
}

.estudio__textos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 36rem;
  padding-top: 1.5rem;
}

.estudio__texto {
  max-width: 28rem;
  margin: 1rem 0 1.5rem;
  color: var(--color-texto-inverso-secundario);
  font-size: var(--texto-entradilla);
  line-height: 1.6;
}

.estudio__bloques {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: min(35rem, 45%);
  aspect-ratio: 560 / 400;
  container-type: inline-size;
}

.estudio__escalera {
  width: 100%;
  height: 100%;
  fill: var(--color-fondo);
}

.js .estudio__escalera {
  clip-path: inset(100% 0 0 100%);
}

.js .estudio__bloques--visible .estudio__escalera {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--duracion-muelle-carrusel) var(--muelle-carrusel);
}

.estudio__herramienta {
  position: absolute;
  left: var(--x);
  top: var(--y);
  color: var(--color-texto-secundario);
  font-size: max(.75rem, 3.2cqw);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.js .estudio__herramienta {
  opacity: 0;
}

.js .estudio__bloques--visible .estudio__herramienta {
  opacity: 1;
  animation: entrada-herramienta var(--duracion-entrada) var(--curva-entrada) calc(var(--retardo) + .2s) backwards;
}

@keyframes entrada-herramienta {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 1.25rem));
  }
}

.soluciones__tarjeta {
  position: relative;
  overflow: hidden;
  padding: var(--v) 0 calc(var(--alto-muesca) + 3rem) var(--columna);
}

.solucion {
  display: block;
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.solucion img {
  -webkit-user-drag: none;
}

.solucion__foto {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0 var(--radio-tarjeta) var(--radio-tarjeta);
  aspect-ratio: 1;
  background: var(--color-superficie);
  --pestana-color: var(--color-superficie-opaca);
}

.solucion__foto img {
  position: absolute;
  top: -1%;
  left: -1%;
  width: 102%;
  max-width: none;
  height: 102%;
  object-fit: cover;
  filter: blur(0);
  transition: filter var(--duracion-muelle-hover) var(--muelle-hover);
}

.solucion__nombre {
  gap: .5rem;
}

.solucion__flecha {
  display: flex;
  width: 0;
  margin-left: -.5rem;
  overflow: hidden;
  transition: width var(--duracion-muelle-hover) var(--muelle-hover), margin var(--duracion-muelle-hover) var(--muelle-hover);
  --icono-tamano: .8125rem;
}

.solucion__panel {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  left: .75rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radio-pie-foto);
  background: var(--color-fondo);
  transform: translateY(calc(100% + .75rem));
  transition: transform var(--duracion-muelle-hover) var(--muelle-hover);
}

.solucion__servicio {
  font-size: var(--texto-titulo-6);
  line-height: 1.4;
}

.solucion__concepto {
  display: block;
  margin-top: .75rem;
  color: var(--color-texto-secundario);
  font-size: var(--texto-interfaz);
  line-height: 1.05rem;
}

.solucion:focus-visible {
  outline: none;
}

.solucion:focus-visible .solucion__foto {
  outline: 1px solid var(--color-texto);
  outline-offset: .1875rem;
}

.solucion:focus-visible .solucion__panel {
  transform: none;
}

@media (hover: hover) {
  .solucion:hover .solucion__foto img {
    filter: blur(.4375rem);
  }

  .solucion:hover .solucion__flecha {
    width: .8125rem;
    margin-left: 0;
  }

  .solucion:hover .solucion__panel {
    transform: none;
  }

  .solucion:hover .solucion__ver .icono {
    animation: empujar .7s var(--curva-in-out-quart) .5s infinite;
  }
}

@keyframes empujar {
  57% {
    transform: translate(.125rem, -.125rem);
  }
}

.soluciones__flechas {
  gap: .5rem;
  padding: .75rem 1rem .5rem;
}

.por-que__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hueco);
}

.por-que__titulo {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 2rem 2rem 2rem 0;
}

.por-que__titulo::before {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-.18em);
}

.razon {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

.razon__titulo {
  font-size: var(--texto-titulo-3);
  line-height: 1.2;
}

.razon__texto {
  max-width: 24rem;
  color: var(--color-texto-secundario);
  font-size: var(--texto-cuerpo);
  line-height: 1.6;
}

.razon--precio {
  justify-content: flex-end;
  min-height: 13.75rem;
}

.razon--precio .razon__titulo {
  font-size: var(--texto-titulo-2);
}

.razon--trato {
  justify-content: space-between;
}

.razon__cifra {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 2rem;
}

.razon__numero {
  font-size: 4.5rem;
  line-height: 1;
}

.razon__pie {
  color: var(--color-texto-secundario);
  font-size: var(--texto-interfaz);
  line-height: 1.4;
}

.razon--diseno,
.razon--google {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: .75rem;
}

.razon__foto {
  position: relative;
  min-height: 16.25rem;
  overflow: hidden;
  border-radius: var(--radio-pie-foto) var(--radio-pie-foto) 0;
  --pestana-color: var(--color-superficie-opaca);
}

.razon__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.razon__cuerpo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1.25rem 2rem;
}

.razon--google .razon__cuerpo {
  justify-content: flex-start;
  padding: 1.25rem 2rem 1.25rem 1.25rem;
}

.razon--google .razon__foto {
  border-radius: 0 var(--radio-pie-foto) var(--radio-pie-foto);
}

.tarjeta--clara .razon__texto {
  color: var(--color-texto-inverso-secundario);
}

.razon--seguimos {
  justify-content: flex-end;
}

.razon__enlace {
  align-self: flex-start;
  margin-top: .25rem;
}

.zonas__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 512fr) minmax(0, 720fr);
  align-items: center;
  gap: 1rem;
}

.zonas__textos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.zonas__textos .titulo-seccion {
  max-width: 28rem;
  margin: 1rem 0 0;
}

.zonas .mapa-zonas__bocadillo--murcia { left: 25%; top: 33%; --dx: .25rem; --dy: -.25rem; --duracion-flotar: 10s; }
.zonas .mapa-zonas__bocadillo--molina { left: 58%; top: 26%; --dx: -.25rem; --dy: .1875rem; --duracion-flotar: 9s; --retardo-flotar: -4s; }
.zonas .mapa-zonas__bocadillo--lorca { left: 22%; top: 59%; --dx: .1875rem; --dy: .25rem; --duracion-flotar: 11s; --retardo-flotar: -2s; }
.zonas .mapa-zonas__bocadillo--yecla { left: 72%; top: 56%; --dx: -.1875rem; --dy: -.25rem; --duracion-flotar: 8s; --retardo-flotar: -6s; }
.zonas .mapa-zonas__bocadillo--tiendas { left: 36%; top: 70%; --dx: .25rem; --dy: .1875rem; --duracion-flotar: 12s; --retardo-flotar: -3s; }
.zonas .mapa-zonas__bocadillo--cartagena { left: 62%; top: 82%; --dx: -.1875rem; --dy: -.25rem; --duracion-flotar: 10s; --retardo-flotar: -5s; }
.zonas .mapa-zonas__bocadillo--alcantarilla { left: 6%; top: 46%; --dx: .25rem; --dy: .1875rem; --duracion-flotar: 9s; --retardo-flotar: -1s; }
.zonas .mapa-zonas__bocadillo--caravaca { left: 6%; top: 14%; --dx: .1875rem; --dy: .25rem; --duracion-flotar: 11s; --retardo-flotar: -7s; }

.zonas .mapa-zonas__cursor {
  left: 44%;
  top: 44%;
}

@container (max-width: 34.9988rem) {
  .zonas .mapa-zonas__bocadillo--murcia { left: 6%; top: 26%; }
  .zonas .mapa-zonas__bocadillo--molina { left: 44%; top: 20%; }
  .zonas .mapa-zonas__bocadillo--lorca { left: 18%; top: 58%; }
  .zonas .mapa-zonas__bocadillo--yecla { left: 62%; top: 60%; }
  .zonas .mapa-zonas__bocadillo--tiendas { left: 12%; top: 78%; }
  .zonas .mapa-zonas__bocadillo--cartagena { left: auto; right: 4%; top: 84%; }
  .zonas .mapa-zonas__bocadillo--alcantarilla { left: 4%; top: 42%; }
  .zonas .mapa-zonas__bocadillo--caravaca { left: 6%; top: 4%; }

  .zonas .mapa-zonas__cursor {
    left: 36%;
    top: 40%;
  }
}

@media (max-width: 991.98px) {
  .estudio__tarjeta {
    min-height: 0;
    padding-bottom: calc(min(100%, 30rem) * .7143 + 2rem);
  }

  .estudio__bloques {
    width: min(100%, 30rem);
  }

  .razon--diseno,
  .razon--google {
    grid-template-columns: minmax(0, 1fr);
  }

  .razon--google .razon__foto {
    order: -1;
  }

  .razon__cuerpo,
  .razon--google .razon__cuerpo {
    padding: 1.25rem;
  }
}

@media (max-width: 809.98px) {
  .portada__sectores {
    gap: 1.5rem;
  }

  .portada__sector {
    padding-right: 3.125rem;
  }

  .razon__numero {
    font-size: 3.5rem;
  }
}

@media (max-width: 599.98px) {
  .por-que__rejilla {
    grid-template-columns: none;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    width: auto;
    margin-inline: calc(var(--columna) * -1);
    padding-inline: var(--columna);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--columna);
    scrollbar-width: none;
  }

  .por-que__rejilla::-webkit-scrollbar {
    display: none;
  }

  .por-que__titulo {
    position: sticky;
    left: var(--columna);
    grid-row: 1;
    grid-column: 1 / span 5;
    justify-self: start;
    padding: 0 0 .5rem;
  }

  .razon {
    grid-row: 2;
    scroll-snap-align: start;
  }

  .zonas__rejilla {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }

  .zonas .mapa-zonas {
    aspect-ratio: 1;
  }
}

@media (max-width: 379.98px) {
  .portada__textos .rotulo {
    align-items: flex-start;
    white-space: normal;
  }

  .portada__textos .rotulo::before {
    margin-top: .3125rem;
  }
}

.cargador {
  display: none;
}

.cargando {
  overflow: hidden;
}

.cargando .cargador,
.cargador--saliendo {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cargando .cabecera,
.cargando .acciones {
  opacity: 0;
}

.cargador__columnas {
  position: absolute;
  inset: 0;
  display: flex;
}

.cargador__columna {
  flex: 1 1 0;
  background: var(--color-fondo);
  will-change: transform;
}

.cargador__columna + .cargador__columna {
  margin-left: -1px;
}

.cargador__logo {
  position: relative;
  height: clamp(1.375rem, 2.6vw, 2.125rem);
  width: auto;
  aspect-ratio: 81.34 / 14;
  fill: var(--color-texto);
  will-change: opacity, filter, transform;
  animation: cargador-logo-entrar .9s cubic-bezier(.22, 1, .36, 1) .1s backwards;
}

@keyframes cargador-logo-entrar {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(.5rem);
  }
}

@media (max-width: 599.98px), (max-height: 500px) and (orientation: landscape) {
  .portada .imagen-cabecera {
    height: 38svh;
    min-height: 15rem;
  }

  .portada .imagen-cabecera::after {
    display: none;
  }

  .portada__textos {
    grid-area: 2 / 1;
    align-self: start;
    padding: 2rem 0 0;
  }

  .portada__textos > .rotulo {
    display: none;
  }

  .portada__titulo-pre {
    display: block;
    margin-bottom: .75rem;
    color: rgba(255, 255, 255, .8);
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: 0;
  }

  .portada__sectores {
    grid-area: 3 / 1;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .portada .imagen-cabecera {
    height: 62svh;
    min-height: 12rem;
  }

  .portada .imagen-cabecera__foto {
    object-position: 50% 22%;
  }
}

@media (max-width: 991.98px) {
  .razon--trato,
  .razon--precio,
  .razon--seguimos {
    justify-content: flex-start;
  }
}