/* ==========================================================================
   Bien inmobiliaria · estilos del sitio estático
   Reemplaza los 66 CSS de WordPress (tema Stereo Bank, Elementor, CMSMasters,
   visualinmueble, Contact Form 7). Solo trae lo que usan las páginas.

   Índice
   1. Fuentes
   2. Variables
   3. Base
   4. Utilidades y botones
   5. Cabecera y menús
   6. Banner Plaza Emiliani (.pem3)
   7. Portada y buscador
   8. Secciones de inmuebles y tarjetas
   9. Servicios
   10. Servicios digitales
   11. Blog
   12. Te esperamos y redes
   13. Referidos y formularios
   14. Pie de página
   15. Botones flotantes
   16. Animación de aparición
   17. Páginas internas: ruta, listado, filtros y paginación
   18. Ficha de inmueble y galería
   19. Asesor
   20. Tableta
   21. Celular
   22. Movimiento reducido
   23. Páginas de texto: encabezados, bloques y formularios
   24. Vende y arrienda
   ========================================================================== */

/* 1. Fuentes ------------------------------------------------------------- */

@font-face {
  font-family: "Avenir";
  src: url("../files/fuentes/avenir/avenir-lt-pro-light.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NEXT_ART";
  src: url("../files/fuentes/next-art/next-art-bold.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "VisualInmueble-icons";
  src: url("../files/fuentes/visualinmueble-icons/visualinmueble-icons.woff2") format("woff2"),
       url("../files/fuentes/visualinmueble-icons/visualinmueble-icons.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* 2. Variables ----------------------------------------------------------- */

:root {
  --morado: #801d8b;
  --morado-marca: #7c2785;
  --morado-claro: #a23aaa;
  --celeste: #6cc7df;
  --celeste-pem: #81cce3;
  --dorado: #c9a961;
  --texto: #000;
  --texto-suave: #878787;
  --gris-campo: #f4f4f4;
  --gris-pestana: #f2f2f2;
  --fondo-celeste: #f0f6fe;
  --fondo-lila: #f1e6f2;
  --fondo-referidos: #e1cbe4;
  --blanco: #fff;

  --letra-texto: "Avenir", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-titulo: "NEXT_ART", "Montserrat", system-ui, sans-serif;

  --ancho: 1280px;
  --margen: 40px;
  --radio: 10px;
  --radio-tarjeta: 25px;
  --sombra-tarjeta: 0 8px 16px rgba(38, 50, 56, .16);
  --sombra-suave: 5px 5px 50px rgba(0, 0, 0, .08);
  --transicion: .3s ease;
}

/* 3. Base ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--letra-texto);
  font-size: 16px;
  line-height: 1.15;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transicion), background-color var(--transicion), opacity var(--transicion);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: 3px;
}

address {
  font-style: normal;
}

/* 4. Utilidades y botones ---------------------------------------------- */

.oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100000;
  padding: 12px 18px;
  background: var(--morado);
  color: var(--blanco);
  border-radius: var(--radio);
  font-weight: 700;
}

.saltar:focus {
  top: 16px;
}

.antetitulo {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--morado);
}

.titulo-seccion {
  font-family: var(--letra-titulo);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--celeste);
}

.titulo-seccion--morado {
  color: var(--morado);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 39px;
  border: 0;
  border-radius: var(--radio);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blanco);
  transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

.boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(128, 29, 139, .25);
}

.boton--morado {
  background: var(--morado);
}

.boton--morado:hover {
  background: var(--celeste);
}

.boton--celeste {
  background: var(--celeste);
}

.boton--celeste:hover {
  background: var(--morado);
}

.boton--degradado {
  padding: 15px 30px;
  background: linear-gradient(100deg, var(--morado) 0%, var(--celeste) 100%);
}

/* Íconos de las fichas (fuente visualinmueble-icons) */
.vi {
  display: inline-block;
  font-family: "VisualInmueble-icons";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  speak: never;
}

.vi-codigo::before { content: "\e978"; }
.vi-lugar::before { content: "\e91c"; }
.vi-area::before { content: "\e95e"; }
.vi-lote::before { content: "\e914"; }
.vi-alcobas::before { content: "\e951"; }
.vi-banos::before { content: "\e93e"; }
.vi-garajes::before { content: "\e9cc"; }
.vi-estrato::before { content: "\e9af"; }
.vi-edad::before { content: "\e98a"; }

/* 5. Cabecera y menús --------------------------------------------------- */

.barra-clientes {
  background: var(--morado);
  color: var(--blanco);
}

.barra-clientes ul {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  gap: 0;
}

.barra-clientes li + li {
  border-left: 1px solid rgba(255, 255, 255, .6);
}

.barra-clientes a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 16px;
  line-height: 1;
  color: var(--blanco);
}

.barra-clientes a:hover {
  color: var(--celeste);
}

.barra-clientes i {
  font-size: 14px;
}

.cabecera__barra {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(var(--ancho), 100% - 2 * var(--margen));
  min-height: 138px;
  margin: 0 auto;
}

.cabecera__logo img {
  width: 210px;
  height: auto;
}

.menu-principal {
  flex: 1;
}

.menu-principal > ul {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.menu-principal a,
.menu-principal button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border: 0;
  background: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--celeste);
}

.menu-principal a:hover,
.menu-principal button:hover,
.menu-principal button[aria-expanded="true"] {
  color: var(--morado);
}

.menu-principal button i {
  font-size: 12px;
  transition: transform var(--transicion);
}

.menu-principal button[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.menu-principal__desplegable {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 50;
  min-width: 240px;
  padding: 12px 0;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 15px 40px rgba(38, 50, 56, .18);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}

.menu-principal__desplegable:hover .submenu,
.menu-principal__desplegable:focus-within .submenu,
.menu-principal__desplegable.abierto .submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.submenu a {
  display: block;
  padding: 10px 22px;
  font-size: 16px;
  color: var(--morado);
}

.submenu a:hover {
  background: var(--fondo-celeste);
  color: var(--celeste);
}

.cabecera__pse img {
  width: 150px;
  height: auto;
}

.cabecera__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: var(--morado);
  color: var(--blanco);
  font-size: 18px;
  transition: background var(--transicion);
}

.cabecera__menu:hover {
  background: var(--celeste);
}

/* Menú lateral (dialog) */
.menu-lateral {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(356px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 60px 30px 40px;
  border: 0;
  background: linear-gradient(100deg, var(--morado) 0%, var(--celeste) 100%);
  color: var(--blanco);
  overflow-y: auto;
}

.menu-lateral[open] {
  animation: menu-entrar .35s cubic-bezier(.22, 1, .36, 1);
}

.menu-lateral::backdrop {
  background: rgba(20, 10, 25, .55);
}

@keyframes menu-entrar {
  from { transform: translateX(100%); }
  to { transform: none; }
}

.menu-lateral__cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--blanco);
  font-size: 22px;
}

.menu-lateral__titulo {
  margin-bottom: 50px;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  color: var(--celeste);
}

.menu-lateral nav > ul {
  display: grid;
  gap: 26px;
  text-align: center;
}

.menu-lateral a,
.menu-lateral summary {
  font-size: 17px;
  color: var(--blanco);
}

.menu-lateral a:hover,
.menu-lateral summary:hover {
  color: var(--celeste);
}

.menu-lateral a[aria-current="page"] {
  font-weight: 700;
}

.menu-lateral summary {
  list-style: none;
  cursor: pointer;
}

.menu-lateral summary::-webkit-details-marker {
  display: none;
}

.menu-lateral summary::after {
  content: "\f078";
  margin-left: 8px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  display: inline-block;
  transition: transform var(--transicion);
}

.menu-lateral details[open] summary::after {
  transform: rotate(180deg);
}

.menu-lateral details ul {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.menu-lateral details a {
  font-size: 15px;
  opacity: .9;
}

/* 6. Banner Plaza Emiliani (.pem3) -------------------------------------- */

.pem3 {
  --morado: #7c2784;
  --celeste: var(--celeste-pem);
  --u: calc(100vw / 1600);
  --titulo: "Gilda Display", Georgia, serif;
  --mayus: "Montserrat", system-ui, sans-serif;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(256 * var(--u));
  background: #231b28;
  color: var(--blanco);
  isolation: isolate;
}

.pem3 :is(h2, p, span, a, li) {
  margin: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.1;
}

.pem3 svg {
  display: block;
  flex-shrink: 0;
}

.pem3-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.pem3-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 60% 55%;
  animation: pem3-acercar 12s cubic-bezier(.2, .6, .2, 1) both, pem3-respirar 18s ease-in-out 12s infinite alternate;
}

.pem3-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(24, 14, 30, .78) 0%, rgba(24, 14, 30, .55) 30%, rgba(24, 14, 30, .28) 58%, rgba(24, 14, 30, .18) 70%, rgba(24, 14, 30, .45) 100%);
}

.pem3-foto::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  z-index: 2;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent);
  transform: skewX(-18deg);
  animation: pem3-brillo 7s ease-in-out 2.2s infinite;
}

.pem3-fondo {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.pem3-contenido {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.pem3-contenido a {
  pointer-events: auto;
}

.pem3 .pem3-chip {
  position: absolute;
  left: 0;
  top: calc(30 * var(--u));
  display: flex;
  align-items: center;
  height: calc(44 * var(--u));
  min-height: 26px;
  padding: 0 calc(26 * var(--u)) 0 calc(22 * var(--u));
  background: var(--celeste);
  color: var(--blanco);
  border-radius: 0 calc(12 * var(--u)) calc(12 * var(--u)) 0;
  font-family: var(--mayus);
  font-weight: 700;
  font-size: max(11px, calc(16 * var(--u)));
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(129, 204, 227, .35);
  animation: pem3-entrar-izq .7s cubic-bezier(.2, .8, .2, 1) .2s both, pem3-latido 3.2s ease-in-out 1.4s infinite;
}

.pem3-bloque {
  position: absolute;
  left: calc(300 * var(--u));
  top: calc(52 * var(--u));
}

.pem3 .pem3-titulo {
  font-family: var(--titulo);
  font-weight: 400;
  font-size: calc(92 * var(--u));
  line-height: 1;
  color: var(--blanco);
  white-space: nowrap;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .45);
  animation: pem3-titulo 1.1s cubic-bezier(.2, .8, .2, 1) .35s both;
}

.pem3-botones {
  display: flex;
  gap: calc(8 * var(--u));
  margin-top: calc(14 * var(--u));
}

.pem3 .pem3-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  min-width: calc(196 * var(--u));
  height: calc(47 * var(--u));
  min-height: 34px;
  padding: 0 calc(20 * var(--u));
  border: 1.5px solid var(--blanco);
  border-radius: calc(6 * var(--u));
  font-family: var(--mayus);
  font-size: max(10.5px, calc(14 * var(--u)));
  line-height: 1;
  letter-spacing: .1em;
  word-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  animation: pem3-subir .8s cubic-bezier(.2, .8, .2, 1) both;
}

.pem3 .pem3-btn-blanco {
  background: var(--blanco);
  color: var(--morado);
  font-weight: 600;
  animation-delay: .7s;
}

.pem3 .pem3-btn-borde {
  background: rgba(255, 255, 255, .04);
  color: var(--blanco);
  font-weight: 500;
  backdrop-filter: blur(2px);
  animation-delay: .85s;
}

.pem3 .pem3-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.pem3 .pem3-btn-blanco:hover {
  background: var(--celeste);
  border-color: var(--celeste);
  color: var(--blanco);
}

.pem3 .pem3-btn-borde:hover {
  background: var(--blanco);
  color: var(--morado);
}

.pem3 .pem3-btn svg {
  width: max(12px, calc(16 * var(--u)));
  height: max(12px, calc(16 * var(--u)));
  transition: transform .25s ease;
}

.pem3 .pem3-btn:hover svg {
  transform: translateX(4px);
}

.pem3-ventajas {
  position: absolute;
  right: calc(130 * var(--u));
  top: calc(22 * var(--u));
  display: grid;
  grid-template-columns: repeat(6, calc(50 * var(--u)));
  column-gap: calc(6 * var(--u));
  row-gap: calc(10 * var(--u));
  margin: 0;
  padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: calc(18 * var(--u));
  background: rgba(28, 18, 34, .42);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: pem3-aparecer .8s ease .8s both;
}

.pem3-ventajas li {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
  text-align: center;
  animation: pem3-pop .6s cubic-bezier(.3, 1.6, .5, 1) both;
}

.pem3-ventajas li:nth-child(4) { grid-column: 2 / span 2; }
.pem3-ventajas li:nth-child(1) { animation-delay: 1.05s; }
.pem3-ventajas li:nth-child(2) { animation-delay: 1.17s; }
.pem3-ventajas li:nth-child(3) { animation-delay: 1.29s; }
.pem3-ventajas li:nth-child(4) { animation-delay: 1.41s; }
.pem3-ventajas li:nth-child(5) { animation-delay: 1.53s; }

.pem3-circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}

.pem3-circulo svg {
  width: 56%;
  height: 56%;
  fill: var(--morado);
}

.pem3-ventajas li:hover .pem3-circulo {
  transform: translateY(-3px) scale(1.08);
}

.pem3 .pem3-ventajas .pem3-etq {
  font-family: var(--mayus);
  font-weight: 600;
  font-size: max(8.5px, calc(10 * var(--u)));
  line-height: 1.12;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blanco);
  white-space: nowrap;
}

.pem3:hover .pem3-foto img {
  animation-play-state: paused;
}

@keyframes pem3-acercar { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes pem3-respirar { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes pem3-brillo { 0% { left: -40%; } 45%, 100% { left: 130%; } }
@keyframes pem3-entrar-izq { from { transform: translateX(-105%); } to { transform: none; } }
@keyframes pem3-latido { 0%, 100% { box-shadow: 0 6px 18px rgba(129, 204, 227, .35); } 50% { box-shadow: 0 6px 28px rgba(129, 204, 227, .85); } }
@keyframes pem3-titulo { from { opacity: 0; transform: translateY(18px); letter-spacing: .08em; filter: blur(6px); } to { opacity: 1; transform: none; letter-spacing: 0; filter: blur(0); } }
@keyframes pem3-subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pem3-aparecer { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes pem3-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* 7. Portada y buscador ------------------------------------------------- */

.portada {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 720px;
  padding: 120px var(--margen) 180px;
  background: var(--morado);
  isolation: isolate;
}

/* Adornos: puntos blancos (elipse-500-white.svg) y casitas translúcidas (casa.png) */
.portada::before,
.portada::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.portada::before {
  inset: 0;
  background:
    url("../img/elipse-500-white.svg") 136px 116px / 41px 41px no-repeat,
    url("../img/elipse-500-white.svg") 186px 160px / 17px 17px no-repeat,
    url("../img/elipse-500-white.svg") right 135px bottom 140px / 41px 41px no-repeat,
    url("../img/elipse-500-white.svg") right 118px bottom 130px / 17px 17px no-repeat,
    url("../img/elipse-500-white.svg") 197px calc(100% - 66px) / 17px 17px no-repeat;
}

.portada::after {
  inset: 0;
  background:
    url("../img/casa.png") right 72px top 138px / 333px 216px no-repeat,
    url("../img/casa.png") 44px calc(100% + 30px) / 333px 216px no-repeat;
  opacity: .17;
}

.portada__titulo {
  max-width: 900px;
  margin-bottom: 40px;
  font-family: var(--letra-titulo);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  text-align: center;
  text-transform: uppercase;
  color: var(--blanco);
}

.portada__titulo .resalte {
  color: var(--celeste);
}

.buscador {
  width: min(973px, 100%);
}

.buscador__gestion {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 0 0;
  padding: 0;
  border: 0;
}

.buscador__gestion label {
  position: relative;
  cursor: pointer;
}

.buscador__gestion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.buscador__gestion span {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 1px;
  color: var(--blanco);
  transition: background var(--transicion), color var(--transicion);
}

.buscador__gestion input:checked + span {
  background: var(--gris-pestana);
  color: #7f1c8a;
}

.buscador__gestion input:focus-visible + span {
  outline: 3px solid var(--celeste);
  outline-offset: 2px;
}

.buscador__campos {
  display: grid;
  grid-template-columns: 200px 200px minmax(150px, 189px) auto;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 0;
  padding: 26px 50px;
  background: var(--blanco);
  border-radius: 50px;
}

.buscador select,
.buscador input[type="text"] {
  width: 100%;
  height: 50px;
  padding: 6px 34px 6px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: var(--blanco);
  font-size: 16px;
  color: #212529;
  appearance: none;
  -webkit-appearance: none;
}

.buscador select {
  text-align: center;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%),
    linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
  background-size: 6px 5px, 6px 5px;
  background-repeat: no-repeat;
}

.buscador input[type="text"] {
  height: 46px;
  padding: 12px 15px;
  border: 0;
  border-radius: var(--radio);
  background: var(--gris-campo);
  color: var(--texto-suave);
}

.buscador .boton {
  height: 50px;
}

/* 8. Secciones de inmuebles y tarjetas --------------------------------- */

.seccion-inmuebles {
  padding: 50px var(--margen) 60px;
}

.seccion-inmuebles--celeste {
  background: var(--fondo-celeste);
}

.seccion-inmuebles .titulo-seccion {
  margin-bottom: 43px;
}

.rejilla-inmuebles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 34px 26px;
  width: min(var(--ancho) - 22px, 100%);
  margin: 0 auto;
}

.rejilla-inmuebles > .tarjeta-inmueble {
  grid-column: span 2;
}

/* Si la última fila queda con dos tarjetas, se reparten la fila completa (como en el original) */
.rejilla-inmuebles > .tarjeta-inmueble:nth-child(3n + 1):nth-last-child(2),
.rejilla-inmuebles > .tarjeta-inmueble:nth-child(3n + 2):last-child {
  grid-column: span 3;
}

.tarjeta-inmueble {
  display: flex;
  flex-direction: column;
  padding: 4px;
  overflow: hidden;
  background: var(--blanco);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  font-size: 14px;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.tarjeta-inmueble:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(38, 50, 56, .2);
}

.tarjeta-inmueble__foto {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--radio-tarjeta) - 4px) calc(var(--radio-tarjeta) - 4px) 0 0;
}

.tarjeta-inmueble__foto img {
  width: 100%;
  height: 315px;
  object-fit: cover;
  background: #f0f0f0;
  transition: transform .6s ease;
}

.tarjeta-inmueble:hover .tarjeta-inmueble__foto img {
  transform: scale(1.04);
}

.tarjeta-inmueble__etiqueta {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 800px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--blanco);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.tarjeta-inmueble__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px 16px 16px;
}

.tarjeta-inmueble__precio {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--morado);
}

.tarjeta-inmueble__precio small {
  font-size: 13px;
  font-weight: 500;
}

.tarjeta-inmueble__titulo {
  margin-top: 12px;
  overflow: hidden;
  font-family: var(--letra-titulo);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--celeste);
}

.tarjeta-inmueble__titulo a:hover {
  color: var(--morado);
}

.tarjeta-inmueble__datos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.tarjeta-inmueble__codigo,
.tarjeta-inmueble__lugar {
  display: block;
  min-width: 0;
  white-space: nowrap;
}

.tarjeta-inmueble__codigo .vi,
.tarjeta-inmueble__lugar .vi {
  margin-right: 4px;
  color: var(--texto);
  vertical-align: -1px;
}

.tarjeta-inmueble__codigo {
  flex-shrink: 0;
}

.tarjeta-inmueble__lugar {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  color: var(--morado);
}

.tarjeta-inmueble__lugar a:hover {
  color: var(--celeste);
}

.tarjeta-inmueble__descripcion {
  position: relative;
  display: -webkit-box;
  height: 60px;
  margin-top: 14px;
  overflow: hidden;
  font-size: 14.4px;
  line-height: 1.4;
  text-transform: lowercase;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.tarjeta-inmueble__descripcion::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--blanco));
}

.tarjeta-inmueble__caracteristicas {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  margin-top: auto;
  padding: 14px 0 6px;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

.tarjeta-inmueble__caracteristicas li {
  white-space: nowrap;
  font-size: 14px;
}

.tarjeta-inmueble__caracteristicas .vi {
  margin-right: 4px;
  vertical-align: -1px;
}

.tarjeta-inmueble__caracteristicas sup {
  font-size: 9px;
  line-height: 0;
}

/* 9. Servicios ---------------------------------------------------------- */

.servicios {
  position: relative;
  display: grid;
  grid-template-columns: 384px minmax(0, 876px);
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 50px var(--margen);
  overflow: hidden;
  isolation: isolate;
}

/* Ondas moradas arriba a la derecha (casa-2.png) y círculos difuminados */
.servicios::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 182px;
  height: 300px;
  background: url("../img/casa-2.png") center / contain no-repeat;
  opacity: .5;
}

.servicios::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -236px;
  top: 320px;
  width: 400px;
  height: 400px;
  background: url("../img/elipse-500-hawkes-blue.svg") center / contain no-repeat;
  filter: blur(10px);
}

.servicios__intro {
  align-self: center;
}

.servicios__titulo {
  margin-top: 28px;
  font-family: var(--letra-titulo);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--celeste);
}

.servicios__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 50px;
  padding: 50px;
  background: var(--blanco);
  border-radius: 20px;
  box-shadow: var(--sombra-suave);
}

.servicio {
  padding-bottom: 50px;
}

.servicio--ancho {
  grid-column: 1 / -1;
  padding-bottom: 0;
}

.servicio__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 85px;
  border-radius: 20px;
  background: var(--morado);
  color: var(--blanco);
  font-size: 42px;
  transition: transform var(--transicion), background var(--transicion);
}

.servicio:hover .servicio__icono {
  transform: translateY(-4px);
  background: var(--celeste);
}

.servicio__nombre {
  margin: 15px 0 15px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--celeste);
}

.servicio__nombre a:hover {
  color: var(--morado);
}

.servicio p {
  font-size: 16px;
  line-height: 1;
  color: var(--texto-suave);
}

/* 10. Servicios digitales ---------------------------------------------- */

.servicios-digitales {
  position: relative;
  padding: 140px var(--margen) 180px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(60% 80% at 0% 100%, rgba(194, 167, 202, .35), transparent 70%),
    linear-gradient(100deg, #eef4fd 0%, #f6eef9 55%, #f7e9f8 100%);
  isolation: isolate;
}

/* Círculos lila de los lados (sin-titulo-1a.png) y puntos blancos */
.servicios-digitales::before,
.servicios-digitales::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 357px;
  height: 357px;
  background: url("../img/sin-titulo-1a.png") center / contain no-repeat;
  pointer-events: none;
}

.servicios-digitales::before {
  left: -161px;
  bottom: -200px;
}

.servicios-digitales::after {
  right: -260px;
  bottom: -40px;
}

.servicios-digitales__titulo {
  margin: 14px auto 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--celeste);
}

.servicios-digitales__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 278px));
  justify-content: center;
  gap: 60px;
  margin-top: 70px;
  counter-reset: digital;
}

.servicios-digitales__lista li {
  position: relative;
  counter-increment: digital;
}

/* Gota azul (azul.png) y número morado arriba a la derecha de cada tarjeta */
.servicios-digitales__lista li::before {
  content: "";
  position: absolute;
  top: -36px;
  right: 3px;
  width: 26px;
  height: 43px;
  background: url("../img/azul.png") center / contain no-repeat;
}

.servicios-digitales__lista li::after {
  content: counter(digital);
  position: absolute;
  top: -13px;
  right: -20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--morado);
  font-size: 24px;
  font-weight: 700;
  color: var(--blanco);
  pointer-events: none;
}

.servicio-digital {
  display: block;
  height: 100%;
  padding: 30px;
  text-align: left;
  background: var(--blanco);
  border-radius: 20px;
  box-shadow: 5px 5px 50px rgba(0, 0, 0, .13);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.servicio-digital:hover {
  transform: translateY(-6px);
  box-shadow: 5px 15px 50px rgba(128, 29, 139, .2);
}

.servicio-digital__nombre {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--celeste);
}

.servicio-digital p {
  font-size: 16px;
  line-height: 1;
  color: var(--texto-suave);
}

/* 11. Blog -------------------------------------------------------------- */

.blog-inicio {
  padding: 120px var(--margen) 50px;
  text-align: center;
}

.blog-inicio .antetitulo {
  color: var(--celeste);
}

.blog-inicio .titulo-seccion {
  margin: 24px 0 20px;
}

.rejilla-blog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  width: min(var(--ancho), 100%);
  margin: 0 auto 60px;
  text-align: left;
}

.tarjeta-blog {
  display: flex;
  flex-direction: column;
  padding: 40px;
  background: var(--blanco);
  border-radius: 20px;
  box-shadow: var(--sombra-suave);
}

.tarjeta-blog__foto {
  display: block;
  align-self: center;
  width: 225px;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radio);
}

.tarjeta-blog__foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .6s ease;
}

.tarjeta-blog:hover .tarjeta-blog__foto img {
  transform: scale(1.05);
}

.tarjeta-blog__categoria {
  margin-top: 35px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--morado);
}

.tarjeta-blog__titulo {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--celeste);
}

.tarjeta-blog__titulo a:hover {
  color: var(--morado);
}

.tarjeta-blog__resumen {
  display: -webkit-box;
  margin-top: 26px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.15;
  text-align: justify;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.tarjeta-blog__meta {
  display: flex;
  gap: 15px;
  margin-top: 25px;
  font-size: 14px;
  color: #1f6fb0;
}

.tarjeta-blog__meta span {
  color: var(--celeste);
}

/* 12. Te esperamos y redes --------------------------------------------- */

.te-esperamos {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 411px;
  padding: 0 var(--margen);
  isolation: isolate;
}

/* Sonrisas de colores al pie (casasonrisa.png) */
.te-esperamos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/casasonrisa.png") 50% 100% repeat-x;
  opacity: .46;
}

.te-esperamos__foto {
  justify-self: center;
  width: 350px;
  margin-right: 110px;
}

.te-esperamos__texto {
  text-align: center;
}

.te-esperamos__redes {
  margin: 20px 0 20px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--morado);
}

.redes {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.redes a {
  display: inline-flex;
  font-size: 20px;
  color: var(--morado);
}

.redes a:hover {
  color: var(--celeste);
  transform: translateY(-2px);
}

/* 13. Referidos y formularios ------------------------------------------ */

.referidos {
  width: min(var(--ancho), 100% - 2 * var(--margen));
  margin: 50px auto;
  padding: 50px;
  background: var(--fondo-referidos);
  border-radius: var(--radio);
  text-align: center;
}

.referidos__titulo {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--morado);
}

.referidos__texto {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--blanco);
}

.referidos__texto strong {
  font-weight: 900;
  text-transform: uppercase;
  color: var(--celeste);
}

.formulario {
  margin-top: 50px;
}

.formulario__campos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 24px;
  padding: 0 12px;
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"] {
  width: 100%;
  height: 46px;
  padding: 12px 15px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--gris-campo);
  font-size: 16px;
  color: var(--texto-suave);
  transition: border-color var(--transicion), background var(--transicion);
}

.formulario input:focus {
  border-color: var(--celeste);
  background: var(--blanco);
  outline: none;
}

.formulario input:user-invalid {
  border-color: #d63939;
}

.formulario .boton {
  width: 100%;
  height: 50px;
}

.formulario .boton[disabled] {
  opacity: .6;
  cursor: wait;
}

/* Campo trampa contra robots: fuera de la vista */
.formulario__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario .captcha {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.formulario__estado {
  min-height: 1.4em;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--morado);
}

.formulario__estado.error {
  color: #b42318;
}

/* 14. Pie de página ----------------------------------------------------- */

.pie {
  position: relative;
  padding: 200px var(--margen) 40px;
  background: var(--fondo-lila);
  color: var(--texto-suave);
}

/* Onda blanca de arriba (la misma figura del original) */
.pie::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 143px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' opacity='.33' d='M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z'/%3E%3Cpath fill='%23fff' opacity='.66' d='M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z'/%3E%3Cpath fill='%23fff' d='M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.pie__columnas,
.pie__legal,
.pie__final {
  width: min(var(--ancho), 100%);
  margin: 0 auto;
}

.pie__columnas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.pie__titulo {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--morado);
}

.pie__columna ul {
  display: grid;
  gap: 20px;
  padding-left: 20px;
}

.pie__columna li,
.pie__columna p {
  font-size: 16px;
  line-height: 1;
}

.pie__columna p {
  margin-top: 20px;
  padding-left: 20px;
  line-height: 2.25;
}

.pie a:hover {
  color: var(--morado);
}

.pie__legal {
  display: grid;
  grid-template-columns: 316px 1fr;
  align-items: center;
  margin-top: 100px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(128, 29, 139, .15);
}

.pie__legal .pie__titulo {
  margin: 0;
}

.pie__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.pie__legal li + li {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(0, 0, 0, .12);
}

.pie__final {
  display: grid;
  grid-template-columns: 296px 1fr;
  align-items: center;
  gap: 20px;
  padding-top: 32px;
}

.pie__redes .redes {
  justify-content: flex-start;
}

.pie__derechos {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 16px;
}

.pie__derechos img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blanco);
}

/* 15. Botones flotantes ------------------------------------------------- */

/* Plaza Emiliani: morado y dorado (estilo del tema hijo, sin los !important) */
.boton-plaza {
  position: fixed;
  right: 0;
  bottom: 40px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  min-height: 205px;
  padding: 18px 0;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 97, .45);
  border-right: 0;
  border-radius: 28px 0 0 28px;
  background: linear-gradient(145deg, var(--morado-marca) 0%, var(--morado-claro) 52%, var(--morado-marca) 100%);
  box-shadow: -8px 12px 30px rgba(123, 39, 131, .35), inset 1px 0 0 rgba(255, 255, 255, .16);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--blanco);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: width .55s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, background .45s ease;
  animation: plaza-entrada .9s cubic-bezier(.22, 1, .36, 1) .5s both;
}

.boton-plaza::before {
  content: "";
  position: absolute;
  top: -120%;
  left: -90%;
  width: 55%;
  height: 340%;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, .42), transparent);
  transform: rotate(18deg);
  transition: left 1s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.boton-plaza::after {
  content: "";
  position: absolute;
  inset: 6px 0 6px 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-left-color: rgba(255, 255, 255, .14);
  border-right: 0;
  border-radius: 22px 0 0 22px;
  pointer-events: none;
}

.boton-plaza:hover {
  width: 72px;
  transform: translateX(-4px);
  background: linear-gradient(145deg, var(--morado-claro) 0%, var(--morado-marca) 55%, var(--morado-claro) 100%);
  box-shadow: -12px 18px 40px rgba(123, 39, 131, .5), inset 1px 0 0 rgba(255, 255, 255, .2);
}

.boton-plaza:hover::before {
  left: 145%;
}

.boton-plaza:active {
  filter: brightness(.92);
}

.boton-plaza i {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  margin-bottom: 18px;
  border: 1px solid rgba(201, 169, 97, .65);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--dorado);
  font-size: 1.05rem;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .25));
  animation: plaza-edificio 3s ease-in-out infinite;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), background .35s ease, color .35s ease;
}

.boton-plaza:hover i {
  transform: scale(1.12) translateY(-2px);
  background: rgba(201, 169, 97, .16);
  color: var(--blanco);
}

.boton-plaza i::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(201, 169, 97, .55);
  border-radius: 50%;
  opacity: 0;
  animation: plaza-pulso 3s ease-out infinite;
}

.boton-plaza span {
  position: relative;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .25);
  transition: letter-spacing .4s ease;
}

.boton-plaza:hover span {
  letter-spacing: 3px;
}

.boton-plaza span::after {
  content: "";
  display: block;
  width: 2px;
  height: 22px;
  margin: 12px auto 0;
  background: linear-gradient(to bottom, var(--dorado), transparent);
  opacity: .8;
}

@keyframes plaza-pulso {
  0% { transform: scale(.8); opacity: 0; }
  20% { opacity: .7; }
  60%, 100% { transform: scale(1.4); opacity: 0; }
}

@keyframes plaza-edificio {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes plaza-entrada {
  from { opacity: 0; transform: translateX(80px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Volver arriba: aparece al bajar (main.js le pone .visible) */
.boton-subir {
  position: fixed;
  left: 30px;
  bottom: 100px;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radio);
  background: var(--morado);
  color: var(--blanco);
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion), background var(--transicion);
}

.boton-subir.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.boton-subir:hover {
  background: var(--celeste);
}

/* 16. Animación de aparición (main.js pone .por-aparecer y luego .aparecio) */

.por-aparecer {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}

.por-aparecer.aparecio {
  opacity: 1;
  transform: none;
}

/* 17. Páginas internas: ruta, listado, filtros y paginación ------------- */

.pagina-interna {
  padding-top: 14px;
}

.migas {
  width: min(var(--ancho), 100% - 2 * var(--margen));
  margin: 0 auto 28px;
  padding: 10px 36px;
  background: var(--gris-campo);
  border-radius: 6px;
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
}

.migas li {
  font-size: 17px;
  color: var(--celeste);
}

.migas li + li::before {
  content: "/";
  margin: 0 10px;
  color: #555;
}

.migas a:hover {
  color: var(--morado);
}

.migas [data-volver] {
  font-weight: 700;
}

.migas [data-volver] i {
  margin-right: 4px;
  color: var(--morado);
}

.listado {
  padding: 30px var(--margen) 80px;
}

.listado__cabecera {
  margin-bottom: 34px;
  text-align: center;
}

.listado__cabecera .titulo-seccion {
  margin-top: 10px;
}

.listado__cuenta {
  margin-top: 14px;
  font-size: 18px;
  color: var(--texto-suave);
}

.filtros {
  width: min(var(--ancho), 100%);
  margin: 0 auto;
  padding: 26px 30px 30px;
  background: var(--blanco);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}

.filtros__gestion {
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 22px;
}

.filtros__gestion span {
  font-size: 17px;
  color: var(--morado);
  border: 1px solid rgba(128, 29, 139, .25);
}

.filtros__gestion input:checked + span {
  background: var(--morado);
  border-color: var(--morado);
  color: var(--blanco);
}

.filtros__campos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 18px 20px;
}

.filtros__campo span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--morado);
}

.filtros select,
.filtros input[type="text"] {
  width: 100%;
  height: 46px;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: var(--radio);
  background: var(--blanco);
  font-size: 16px;
  color: #212529;
}

.filtros select {
  padding-right: 34px;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%),
    linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 5px, 6px 5px;
  background-repeat: no-repeat;
}

.filtros select:focus,
.filtros input[type="text"]:focus {
  border-color: var(--celeste);
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 199, 223, .25);
}

.filtros__check {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  font-size: 16px;
  color: var(--morado);
  cursor: pointer;
}

.filtros__check input {
  width: 20px;
  height: 20px;
  accent-color: var(--morado);
}

.filtros__botones {
  display: flex;
  align-items: center;
  gap: 20px;
  grid-column: span 3;
  justify-content: flex-end;
}

.filtros__botones .boton {
  height: 46px;
  padding: 0 44px;
}

.filtros__limpiar {
  font-size: 15px;
  color: var(--texto-suave);
  text-decoration: underline;
}

.filtros__limpiar:hover {
  color: var(--morado);
}

.listado__rejilla {
  margin-top: 46px;
}

/* En el listado todas las tarjetas miden lo mismo (sin el reparto de la última fila del inicio) */
.listado__rejilla > .tarjeta-inmueble,
.listado__rejilla > .tarjeta-inmueble:nth-child(3n + 1):nth-last-child(2),
.listado__rejilla > .tarjeta-inmueble:nth-child(3n + 2):last-child {
  grid-column: span 2;
}

.listado__rejilla[aria-busy="true"] {
  min-height: 400px;
  opacity: .5;
}

.listado__vacio,
.listado__sin-js {
  margin: 40px auto 0;
  font-size: 18px;
  text-align: center;
  color: var(--texto-suave);
}

.listado__vacio a {
  color: var(--morado);
  text-decoration: underline;
}

.listado__enlaces {
  columns: 2 320px;
  width: min(var(--ancho), 100%);
  margin: 20px auto 0;
}

.listado__enlaces li {
  padding: 6px 0;
  break-inside: avoid;
}

.listado__enlaces a {
  color: var(--morado);
}

.paginacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 46px;
}

.paginacion a,
.paginacion span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(128, 29, 139, .25);
  border-radius: var(--radio);
  font-size: 16px;
  color: var(--morado);
}

.paginacion a:hover {
  background: var(--fondo-celeste);
}

.paginacion [aria-current="page"] {
  background: var(--morado);
  border-color: var(--morado);
  color: var(--blanco);
}

.paginacion span {
  border-color: transparent;
}

/* 18. Ficha de inmueble y galería -------------------------------------- */

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 40px;
  width: min(var(--ancho), 100% - 2 * var(--margen));
  margin: 0 auto 70px;
}

.galeria__visor {
  position: relative;
  overflow: hidden;
  background: var(--gris-campo);
  border-radius: 20px;
}

.galeria__fotos {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.galeria__fotos::-webkit-scrollbar {
  display: none;
}

.galeria__foto {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.galeria__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.galeria__flecha {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--morado);
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  transform: translateY(-50%);
  transition: background var(--transicion), color var(--transicion), opacity var(--transicion);
}

.galeria__flecha:hover {
  background: var(--morado);
  color: var(--blanco);
}

.galeria__flecha[disabled] {
  opacity: 0;
  pointer-events: none;
}

.galeria__flecha--antes {
  left: 16px;
}

.galeria__flecha--despues {
  right: 16px;
}

.galeria__contador {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(20, 10, 25, .65);
  font-size: 14px;
  color: var(--blanco);
}

.galeria__etiqueta {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--celeste);
  font-size: 13px;
  font-weight: 700;
  color: var(--blanco);
}

.galeria__miniaturas {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.galeria__miniaturas li {
  flex: 0 0 104px;
}

.galeria__miniaturas a {
  display: block;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 12px;
  opacity: .6;
  transition: opacity var(--transicion), border-color var(--transicion);
}

.galeria__miniaturas a:hover,
.galeria__miniaturas a.activa {
  opacity: 1;
}

.galeria__miniaturas a.activa {
  border-color: var(--morado);
}

.galeria__miniaturas img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.ficha__cabecera {
  margin-top: 30px;
}

.ficha__titulo {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.5px;
  color: var(--morado);
}

.ficha__ubicacion {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 14px;
  font-size: 16px;
  color: var(--texto-suave);
}

.ficha__ubicacion .vi {
  margin-right: 6px;
  color: var(--morado);
}

.ficha__precio {
  margin-top: 22px;
}

.ficha__precio p:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.ficha__gestion {
  padding: 5px 14px;
  border-radius: 100px;
  background: var(--celeste);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blanco);
}

.ficha__precio strong {
  font-size: 38px;
  font-weight: 700;
  color: var(--morado);
}

.ficha__precio small {
  font-size: 15px;
  color: var(--texto-suave);
}

.ficha__admin {
  margin-top: 6px;
  font-size: 15px;
  color: var(--texto-suave);
}

.ficha__compartir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  font-size: 15px;
  color: var(--texto-suave);
}

.ficha__compartir .redes {
  gap: 18px;
}

.ficha__bloque {
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.ficha__subtitulo {
  margin-bottom: 20px;
  font-family: var(--letra-titulo);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.5px;
  text-transform: uppercase;
  color: var(--celeste);
}

.ficha__texto p {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.6;
}

.ficha__datos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.ficha__datos li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--fondo-celeste);
  font-size: 15px;
}

.ficha__datos .vi {
  font-size: 22px;
  color: var(--morado);
}

.ficha__datos span {
  color: var(--texto-suave);
}

.ficha__datos strong {
  margin-left: auto;
  font-weight: 700;
}

.ficha__mas {
  margin-top: 24px;
}

.ficha__mas summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(128, 29, 139, .25);
  border-radius: 100px;
  font-size: 15px;
  color: var(--morado);
  cursor: pointer;
  list-style: none;
}

.ficha__mas summary::-webkit-details-marker {
  display: none;
}

.ficha__mas summary::before {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  transition: transform var(--transicion);
}

.ficha__mas[open] summary::before {
  transform: rotate(180deg);
}

.ficha__grupo {
  margin-top: 24px;
}

.ficha__grupo h3 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--morado);
}

.ficha__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ficha__etiquetas li {
  padding: 7px 14px;
  border: 1px solid #e7d8ea;
  border-radius: 100px;
  font-size: 14px;
  color: #444;
}

.ficha__nota {
  margin-bottom: 18px;
  font-size: 15px;
  color: var(--texto-suave);
}

.ficha__mapa iframe,
.ficha__video iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 20px;
  background: var(--gris-campo);
}

.ficha__mapa iframe {
  height: 400px;
}

.ficha__video iframe {
  aspect-ratio: 16 / 9;
  height: auto;
}

.ficha__rutas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 20px;
}

.ficha__rutas > span {
  font-weight: 700;
  color: var(--morado);
}

.ficha__rutas .boton {
  padding: 10px 22px;
}

.ficha__calle {
  font-size: 15px;
  color: var(--morado);
  text-decoration: underline;
}

.ficha__lateral {
  position: sticky;
  top: 20px;
}

/* 19. Asesor ------------------------------------------------------------ */

.asesor {
  padding: 20px;
  background: var(--gris-campo);
  border-radius: 20px;
  text-align: center;
}

.asesor__foto {
  width: 100%;
  max-width: 240px;
  margin: 0 auto 16px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  background: var(--blanco);
}

.asesor__foto--logo {
  object-fit: contain;
  padding: 30px;
}

.asesor__cargo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--morado);
}

.asesor__nombre {
  margin: 6px 0 18px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--celeste);
}

.asesor__nombre a:hover {
  color: var(--morado);
}

.asesor__contactos {
  display: grid;
  gap: 10px;
}

.asesor__boton {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 100px;
  background: var(--blanco);
  font-size: 16px;
  color: var(--morado);
  text-align: left;
  overflow-wrap: anywhere;
}

.asesor__boton:hover {
  background: var(--morado);
  color: var(--blanco);
}

.asesor__boton--whatsapp {
  background: #25d366;
  color: var(--blanco);
}

.asesor__boton--whatsapp:hover {
  background: #1da851;
}

.asesor__boton i {
  width: 20px;
  text-align: center;
  font-size: 18px;
}

.perfil-asesor {
  width: min(var(--ancho), 100% - 2 * var(--margen));
  margin: 0 auto;
}

.asesor--perfil {
  display: grid;
  grid-template-columns: 240px minmax(0, 420px);
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding: 40px;
  text-align: left;
}

.asesor--perfil .asesor__foto {
  margin: 0;
}

.asesor--perfil .asesor__nombre {
  font-size: 34px;
}

/* 20. Tableta ----------------------------------------------------------- */

@media (max-width: 1100px) {
  .servicios {
    grid-template-columns: 1fr;
  }

  .servicios__intro {
    text-align: center;
  }

  .servicios__titulo {
    margin-top: 12px;
    font-size: 40px;
  }

  .servicios-digitales__lista {
    grid-template-columns: repeat(2, minmax(0, 320px));
    gap: 70px 60px;
  }
}

@media (min-width: 700px) and (max-width: 1099.98px) {
  .pem3 { --u: calc(100vw / 1150); }
  .pem3 .pem3-bloque { left: calc(150 * var(--u)); top: calc(60 * var(--u)); }
  .pem3 .pem3-titulo { font-size: calc(66 * var(--u)); }
  .pem3 .pem3-btn { width: auto; padding: 0 12px; }
  .pem3 .pem3-ventajas { right: calc(30 * var(--u)); }
}

@media (max-width: 1024px) {
  :root {
    --margen: 24px;
  }

  .cabecera__barra {
    min-height: 100px;
    gap: 16px;
  }

  .cabecera__logo img {
    width: 170px;
  }

  .menu-principal {
    display: none;
  }

  .cabecera__pse {
    margin-left: auto;
  }

  .portada {
    min-height: 0;
    padding-top: 90px;
    padding-bottom: 100px;
  }

  .portada::before {
    background:
      url("../img/elipse-500-white.svg") 32px 26px / 34px 34px no-repeat,
      url("../img/elipse-500-white.svg") 72px 62px / 14px 14px no-repeat,
      url("../img/elipse-500-white.svg") right 46px bottom 46px / 34px 34px no-repeat,
      url("../img/elipse-500-white.svg") right 30px bottom 38px / 14px 14px no-repeat;
  }

  .portada__titulo {
    font-size: 44px;
  }

  .buscador__campos {
    grid-template-columns: 1fr 1fr;
    padding: 24px;
    border-radius: 30px;
  }

  .rejilla-inmuebles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rejilla-inmuebles > .tarjeta-inmueble,
  .rejilla-inmuebles > .tarjeta-inmueble:nth-child(3n + 1):nth-last-child(2),
  .rejilla-inmuebles > .tarjeta-inmueble:nth-child(3n + 2):last-child {
    grid-column: auto;
  }

  .titulo-seccion {
    font-size: 40px;
  }

  .rejilla-blog {
    grid-template-columns: 1fr 1fr;
  }

  .te-esperamos__foto {
    width: 280px;
    margin-right: 0;
  }

  .formulario__campos {
    grid-template-columns: 1fr 1fr;
  }

  .pie__columnas {
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
  }

  .pie__legal,
  .pie__final {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* 21. Celular ----------------------------------------------------------- */

@media (max-width: 699.98px) {
  .pem3 { height: auto; --u: 1px; }
  .pem3-foto img { object-position: 24% 50%; }
  .pem3-foto::before { background: linear-gradient(180deg, rgba(24, 14, 30, .55) 0%, rgba(24, 14, 30, .72) 55%, rgba(24, 14, 30, .86) 100%); }
  .pem3-contenido { position: relative; inset: auto; padding: 22px 16px 20px; }
  .pem3 .pem3-chip { position: relative; top: auto; display: inline-flex; height: 30px; margin-left: -16px; padding: 0 18px 0 16px; border-radius: 0 10px 10px 0; font-size: 12px; }
  .pem3-bloque { position: relative; left: auto; top: auto; margin-top: 16px; }
  .pem3 .pem3-titulo { font-size: clamp(42px, 12.5vw, 56px); white-space: normal; }
  .pem3-botones { flex-direction: column; gap: 10px; margin-top: 18px; }
  .pem3 .pem3-btn { width: 100%; height: 50px; gap: 12px; border-radius: 10px; font-size: 13px; }
  .pem3-ventajas { position: relative; right: auto; top: auto; width: 100%; margin-top: 18px; padding: 12px 6px 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 4px; row-gap: 0; border-radius: 14px; }
  .pem3-ventajas li,
  .pem3-ventajas li:nth-child(4) { grid-column: auto; gap: 6px; }
  .pem3-circulo { width: 42px; height: 42px; }
  .pem3 .pem3-ventajas .pem3-etq { font-size: 8.5px; letter-spacing: 0; white-space: normal; word-break: keep-all; }
}

@media (max-width: 767px) {
  :root {
    --margen: 16px;
  }

  .barra-clientes a {
    font-size: 14px;
  }

  .cabecera__barra {
    min-height: 84px;
  }

  .cabecera__logo img {
    width: 130px;
  }

  .cabecera__pse img {
    width: 110px;
  }

  .portada {
    padding: 70px var(--margen) 70px;
  }

  .portada::after {
    background:
      url("../img/casa.png") right -60px top 40px / 220px 143px no-repeat,
      url("../img/casa.png") -40px calc(100% + 20px) / 220px 143px no-repeat;
  }

  .portada__titulo {
    margin-bottom: 28px;
    font-size: 34px;
  }

  .buscador__gestion {
    gap: 2px;
  }

  .buscador__gestion span {
    padding: 8px 11px;
    font-size: 14px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .buscador__campos {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px;
    border-radius: 24px;
  }

  .seccion-inmuebles {
    padding: 40px var(--margen);
  }

  .titulo-seccion,
  .servicios__titulo,
  .servicios-digitales__titulo {
    font-size: 30px;
  }

  .rejilla-inmuebles {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .tarjeta-inmueble__foto img {
    height: 260px;
  }

  .servicios__lista {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }

  .servicio {
    padding-bottom: 36px;
  }

  .servicios-digitales {
    padding: 80px var(--margen) 120px;
  }

  .servicios-digitales__lista {
    grid-template-columns: minmax(0, 320px);
    gap: 56px;
    margin-top: 56px;
  }

  .servicios-digitales__lista li::after {
    right: -6px;
  }

  .blog-inicio {
    padding-top: 70px;
  }

  .rejilla-blog {
    grid-template-columns: 1fr;
  }

  .tarjeta-blog {
    padding: 28px;
  }

  .te-esperamos {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 30px;
    padding-bottom: 60px;
  }

  .te-esperamos__foto {
    order: 2;
    width: 240px;
  }

  .referidos {
    padding: 32px 20px;
  }

  .referidos__titulo {
    font-size: 28px;
  }

  .referidos__texto {
    font-size: 19px;
    line-height: 1.25;
  }

  .formulario {
    margin-top: 30px;
  }

  .formulario__campos {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0;
  }

  .pie {
    padding-top: 130px;
  }

  .pie::before {
    height: 80px;
  }

  .pie__columnas {
    grid-template-columns: 1fr;
  }

  .pie__legal {
    margin-top: 50px;
  }

  .pie__legal ul {
    flex-direction: column;
    gap: 14px;
  }

  .pie__legal li + li {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .pie__derechos {
    align-items: flex-start;
    font-size: 14px;
  }

  .boton-plaza {
    bottom: 22px;
    width: 47px;
    min-height: 155px;
    padding: 13px 0;
    border-radius: 21px 0 0 21px;
  }

  .boton-plaza:hover {
    width: 54px;
    transform: translateX(-2px);
  }

  .boton-plaza i {
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    font-size: .85rem;
  }

  .boton-plaza span {
    font-size: .55rem;
    letter-spacing: 1.7px;
  }

  .boton-plaza span::after {
    height: 16px;
    margin-top: 9px;
  }

  .boton-subir {
    left: 16px;
    bottom: 24px;
  }
}

/* 22. Movimiento reducido ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .por-aparecer {
    opacity: 1;
    transform: none;
  }
}

/* Páginas internas (secciones 17 a 19) en tableta y celular ------------- */

@media (max-width: 1024px) {
  .filtros__campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filtros__botones {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .listado__rejilla > .tarjeta-inmueble,
  .listado__rejilla > .tarjeta-inmueble:nth-child(3n + 1):nth-last-child(2),
  .listado__rejilla > .tarjeta-inmueble:nth-child(3n + 2):last-child {
    grid-column: auto;
  }

  .ficha {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ficha__lateral {
    position: static;
  }

  .ficha__lateral .asesor {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 0 24px;
    text-align: left;
  }

  .ficha__lateral .asesor__foto {
    grid-row: span 3;
    margin: 0;
  }

  .ficha__lateral .asesor__nombre {
    margin-bottom: 12px;
  }

  .asesor--perfil {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 30px;
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .migas {
    padding: 8px 14px;
  }

  .migas li {
    font-size: 14px;
  }

  .migas li + li::before {
    margin: 0 6px;
  }

  .listado {
    padding-top: 10px;
  }

  .filtros {
    padding: 20px 16px 22px;
  }

  .filtros__gestion span {
    padding: 8px 12px;
    font-size: 15px;
  }

  .filtros__campos {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .filtros__botones {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: center;
  }

  .listado__rejilla {
    margin-top: 30px;
  }

  .galeria__visor {
    border-radius: 14px;
  }

  .galeria__flecha {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .galeria__flecha--antes {
    left: 8px;
  }

  .galeria__flecha--despues {
    right: 8px;
  }

  .galeria__miniaturas li {
    flex-basis: 76px;
  }

  .ficha__titulo {
    font-size: 25px;
  }

  .ficha__precio strong {
    font-size: 30px;
  }

  .ficha__subtitulo {
    font-size: 23px;
  }

  .ficha__datos {
    grid-template-columns: 1fr 1fr;
  }

  .ficha__datos li {
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 12px;
  }

  .ficha__datos strong {
    margin-left: 0;
    width: 100%;
  }

  .ficha__mapa iframe {
    height: 300px;
  }

  .ficha__lateral .asesor {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ficha__lateral .asesor__foto {
    grid-row: auto;
    max-width: 180px;
    margin: 0 auto 14px;
  }

  .asesor--perfil {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 18px;
    text-align: center;
  }

  .asesor--perfil .asesor__foto {
    max-width: 200px;
    margin: 0 auto;
  }

  .asesor--perfil .asesor__nombre {
    font-size: 26px;
  }
}


/* 23. Páginas de texto: encabezados, bloques y formularios --------------- */

.encabezado {
  width: min(var(--ancho), 100% - 2 * var(--margen));
  margin: 0 auto;
  padding: 50px 0 40px;
  text-align: center;
}

.encabezado__ante {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--morado);
}

.encabezado h1,
.encabezado h2 {
  font-family: var(--letra-titulo);
  font-size: 54px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--morado);
}

.encabezado__sub {
  max-width: 900px;
  margin: 14px auto 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--morado);
}

.ancla {
  scroll-margin-top: 20px;
}

/* Banda morada con el buscador */
.banda-buscador {
  display: flex;
  justify-content: center;
  padding: 36px var(--margen) 50px;
  background: var(--morado);
}

/* Banner de degradado con la casa (nosotros, contacto, blog) */
.banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(320px, 52vh, 560px);
  padding: 60px var(--margen);
  background: linear-gradient(40deg, var(--morado) 0%, var(--celeste) 100%);
  text-align: center;
  isolation: isolate;
}

.banner::before,
.banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.banner::before {
  inset: 0;
  background:
    url("../img/elipse-500-white.svg") 24% 22% / 50px 50px no-repeat,
    url("../img/elipse-500-white.svg") 56% 26% / 20px 20px no-repeat,
    url("../img/elipse-500-white.svg") 90% 82% / 20px 20px no-repeat,
    url("../img/elipse-500-white.svg") 8% 90% / 20px 20px no-repeat;
}

.banner--casa::after {
  left: 50%;
  bottom: -6%;
  width: min(760px, 90%);
  height: 90%;
  background: url("../img/casa.png") center bottom / contain no-repeat;
  opacity: .17;
  transform: translateX(-50%);
}

.banner--circulos::after {
  top: 12%;
  right: 12%;
  width: 190px;
  height: 190px;
  background: url("../img/elipse-500-pippin.svg") center / contain no-repeat;
}

.banner h1 {
  font-family: var(--letra-titulo);
  font-size: 54px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--blanco);
}

/* Bloque de degradado: el porqué a la izquierda, el formulario a la derecha */
.bloque {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 40px;
  padding: 100px max(var(--margen), calc((100% - var(--ancho)) / 2)) 110px;
  background: linear-gradient(90deg, var(--morado) 0%, var(--celeste) 100%);
  color: var(--blanco);
  isolation: isolate;
}

.bloque::before,
.bloque::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.bloque::before {
  top: 18px;
  left: 20%;
  width: 90px;
  height: 60px;
  background:
    url("../img/elipse-500-white.svg") 0 0 / 50px 50px no-repeat,
    url("../img/elipse-500-white.svg") 68px 44px / 20px 20px no-repeat;
}

.bloque::after {
  right: 0;
  bottom: 0;
  width: 270px;
  height: 170px;
  background: url("../img/casa.png") right bottom / contain no-repeat;
  opacity: .55;
}

.bloque__titulo {
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--celeste);
}

.bloque__intro,
.bloque__cierre {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.35;
}

.bloque__titulo-form {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--blanco);
}

.bloque__sub-form {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}

.bloque__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.lista-marcas {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.25;
}

.lista-marcas li {
  position: relative;
  padding-left: 24px;
}

.lista-marcas li::before {
  content: "\f00c";
  position: absolute;
  top: 1px;
  left: 0;
  font-family: "Font Awesome 6 Free";
  font-size: 13px;
  font-weight: 900;
}

/* Formularios de las páginas */
.formulario--pagina {
  margin-top: 16px;
}

.formulario__aviso {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
}

.formulario__rejilla {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.campo-forma {
  grid-column: span 6;
  min-width: 0;
}

.campo-forma--2 { grid-column: span 2; }
.campo-forma--3 { grid-column: span 3; }
.campo-forma--4 { grid-column: span 4; }

.campo-forma > label:not(.oculto),
.campo-forma legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
}

.campo-forma__req {
  color: #b42318;
}

.campo-forma__ayuda {
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.3;
  opacity: .85;
}

.formulario--pagina input[type="text"],
.formulario--pagina input[type="email"],
.formulario--pagina input[type="tel"],
.formulario--pagina input[type="number"],
.formulario--pagina input[type="date"],
.formulario--pagina select,
.formulario--pagina textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 15px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--gris-campo);
  font: inherit;
  font-size: 15px;
  color: #444;
  transition: border-color var(--transicion), background var(--transicion);
}

.formulario--pagina textarea {
  display: block;
  resize: vertical;
}

.formulario--pagina input:focus,
.formulario--pagina select:focus,
.formulario--pagina textarea:focus {
  border-color: var(--celeste);
  background: var(--blanco);
  outline: none;
}

.formulario--pagina select:user-invalid,
.formulario--pagina textarea:user-invalid {
  border-color: #d63939;
}

.formulario--pagina input[type="file"] {
  display: block;
  width: 100%;
  padding: 8px;
  border-radius: var(--radio);
  background: var(--blanco);
  font-size: 14px;
  color: #444;
}

.campo-forma--opciones {
  margin: 0;
  padding: 0;
  border: 0;
}

.campo-forma.campo-forma--opciones > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 20px;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
}

.campo-forma--opciones input,
.campo-forma--casilla input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--morado);
}

.campo-forma--casilla label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  cursor: pointer;
}

.formulario--pagina .boton {
  width: 100%;
  height: 50px;
  margin-top: 18px;
}

.formulario--pagina .captcha {
  margin: 0;
}

.bloque .formulario__estado {
  color: var(--blanco);
}

.bloque .formulario__estado.error {
  color: #ffe1dd;
}

/* Formulario sobre fondo claro (PQR, reparaciones, consignar, salva tu casa) */
.pagina-formulario {
  width: min(960px, 100% - 2 * var(--margen));
  margin: 0 auto;
  padding-bottom: 50px;
}

.pagina-formulario__nota {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--morado);
}

.pagina-formulario__nota a {
  white-space: nowrap;
  text-decoration: underline;
}

.formulario--claro {
  color: #333;
}

.formulario--claro input[type="file"] {
  border: 1px solid #ddd;
}

.formulario--claro .boton {
  display: flex;
  max-width: 320px;
  margin-inline: auto;
  background: var(--morado);
}

.formulario--claro .boton:hover {
  background: var(--morado-claro);
}

.formulario--claro .formulario__estado {
  text-align: center;
}

/* Salva tu casa: tiene colores propios */
.salva-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px var(--margen);
}

.salva-logos img {
  width: auto;
  height: 90px;
}

.salva-logos p {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #00a199;
}

.salva-banner {
  padding: 44px var(--margen);
  background: linear-gradient(90deg, #00a199 45%, #f39200 100%);
  color: var(--blanco);
  text-align: center;
}

.salva-banner h1 {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
}

.salva-banner h1 strong {
  font-weight: 700;
  text-transform: uppercase;
}

.salva-banner p {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
}

.salva {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  width: min(var(--ancho), 100% - 2 * 20px);
  margin: 50px auto;
}

.salva__titulo {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #f39200;
}

.lista-marcas--salva {
  color: #555;
}

.lista-marcas--salva li::before {
  color: #00a199;
}

.salva__redes-titulo {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #00a199;
}

.salva__redes {
  display: flex;
  gap: 24px;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  font-size: 20px;
  color: #00a199;
}

.salva__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 14px 30px;
  border-radius: 100px;
  background: #f39200;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blanco);
}

.salva__whatsapp:hover {
  background: #d98200;
}

.salva__form {
  padding: 24px 20px;
  border-radius: 20px;
  background: #f2f2f2;
}

.salva__titulo-form {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  color: #f39200;
}

.salva__ayuda {
  margin-top: 16px;
  padding: 14px 18px;
  border-left: 4px solid #6cc7df;
  background: #d9eef6;
  font-size: 14px;
  line-height: 1.3;
  color: #245269;
}

.salva__ayuda summary {
  cursor: pointer;
}

.salva__ayuda ol {
  margin: 10px 0 0;
  padding-left: 24px;
  list-style: decimal;
}

.salva__ayuda li + li {
  margin-top: 6px;
}

.salva__form .formulario--pagina input:not([type="radio"]):not([type="file"]),
.salva__form .formulario--pagina select {
  background: var(--blanco);
}

.salva__form .boton {
  background: #00a199;
}

.salva__form .boton:hover {
  background: #00857e;
}

/* Nosotros */
.quienes {
  width: min(1000px, 100% - 2 * var(--margen));
  margin: 0 auto;
  padding: 50px 0 20px;
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
}

.quienes p + p {
  margin-top: 12px;
}

.quienes__dichos {
  display: grid;
  gap: 22px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--morado);
}

.quienes__dichos li::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  background: url("../img/cropped-manito-bien.png") center / contain no-repeat;
  vertical-align: -4px;
}

/* La banda morada y la asesora vienen en la imagen; el texto se ubica encima de la banda */
.suena-bien {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: min(1100px, 100% - 2 * var(--margen));
  aspect-ratio: 1285 / 701;
  margin: -120px auto -60px;
  padding: 25% 34% 11% 6%;
  background: url("../img/banner-nosotros-nuevo-avatar.png") center / contain no-repeat;
  text-align: center;
}

.suena-bien h2 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--blanco);
}

.mision-vision {
  display: grid;
  gap: 40px;
  width: min(1100px, 100% - 2 * var(--margen));
  margin: 0 auto 60px;
}

.mision-vision__fila {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  font-size: 18px;
  line-height: 1.4;
}

.mision-vision__fila--invertida {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.mision-vision__fila--invertida h2 {
  order: 2;
}

.aliados {
  padding: 30px var(--margen) 50px;
  text-align: center;
}

.aliados ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}

.aliados img {
  width: auto;
  max-width: 180px;
  height: auto;
  max-height: 110px;
}

/* Contacto */
.contacto-datos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 40px;
  width: min(var(--ancho), 100% - 2 * var(--margen));
  margin: 50px auto;
}

.contacto-datos h2 {
  font-family: var(--letra-titulo);
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--celeste);
}

.contacto-datos h3 {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--celeste);
}

.contacto-datos__direccion {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--celeste);
}

.contacto-datos ul {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  font-size: 16px;
  color: #666;
}

.contacto-datos strong {
  font-weight: 700;
  color: var(--morado);
}

.contacto-datos a:hover {
  color: var(--morado);
}

.contacto-datos__mapa {
  width: 100%;
  min-height: 400px;
  border: 0;
  border-radius: var(--radio-tarjeta);
}

/* Simuladores */
.simulador {
  width: min(var(--ancho), 100% - 2 * var(--margen));
  margin: 0 auto 50px;
}

visualinmueble-simulador {
  display: block;
  min-height: 300px;
}

/* Blog */
.blog-listado {
  padding: 60px var(--margen) 10px;
}

.articulo {
  width: min(860px, 100% - 2 * var(--margen));
  margin: 0 auto;
  padding: 50px 0;
}

.articulo__categoria {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--morado);
}

.articulo h1 {
  margin-top: 10px;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--morado);
}

.articulo__meta {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--texto-suave);
}

.articulo__foto {
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 28px auto 0;
  border-radius: var(--radio-tarjeta);
}

.articulo__texto {
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.55;
}

.articulo__texto p + p {
  margin-top: 16px;
}

.articulo__accion {
  margin-top: 28px;
  text-align: center;
}

@media (max-width: 1024px) {
  .encabezado h1,
  .encabezado h2,
  .banner h1 {
    font-size: 42px;
  }

  .bloque {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 120px;
  }

  .salva,
  .contacto-datos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .encabezado {
    padding: 32px 0 26px;
  }

  .encabezado h1,
  .encabezado h2,
  .banner h1 {
    font-size: 32px;
  }

  .encabezado__sub {
    font-size: 13px;
  }

  .banda-buscador {
    padding: 24px 16px 30px;
  }

  .banner {
    min-height: 260px;
  }

  .banner--circulos::after {
    width: 110px;
    height: 110px;
  }

  .bloque {
    gap: 24px;
    padding: 44px 20px 100px;
  }

  .bloque::after {
    width: 170px;
    height: 110px;
  }

  .bloque__titulo {
    font-size: 34px;
  }

  .bloque__titulo-form {
    font-size: 25px;
  }

  .bloque__botones .boton {
    width: 100%;
  }

  .campo-forma--2,
  .campo-forma--3,
  .campo-forma--4 {
    grid-column: span 6;
  }

  .salva-logos img {
    height: 62px;
  }

  .salva-banner h1 {
    font-size: 26px;
  }

  .salva__titulo {
    font-size: 30px;
  }

  .quienes {
    font-size: 16px;
  }

  .quienes__dichos {
    font-size: 30px;
  }

  .suena-bien {
    aspect-ratio: auto;
    margin: 30px auto;
    padding: 30px 20px;
    border-radius: var(--radio-tarjeta);
    background: var(--morado-marca);
  }

  .suena-bien h2 {
    font-size: 28px;
  }

  .mision-vision__fila,
  .mision-vision__fila--invertida {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    font-size: 16px;
    text-align: center;
  }

  .mision-vision__fila h2,
  .mision-vision__fila--invertida h2 {
    order: 0;
  }

  .mision-vision__fila img {
    width: 200px;
    margin: 0 auto;
  }

  .aliados img {
    max-width: 130px;
  }

  .contacto-datos__mapa {
    min-height: 300px;
  }

  .articulo h1 {
    font-size: 30px;
  }

  .articulo__texto {
    font-size: 16px;
  }
}


.no-encontrada {
  width: min(760px, 100% - 2 * var(--margen));
  margin: 0 auto;
  padding: 90px 0;
  text-align: center;
}

.no-encontrada h1 {
  font-family: var(--letra-titulo);
  font-size: 44px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--morado);
}

.no-encontrada p {
  margin-top: 20px;
  font-size: 18px;
}

/* 24. Vende y arrienda --------------------------------------------------- */

.vya{
  --morado:#782480;--morado-osc:#5A1A61;--lila:#F6EFF7;--lila-borde:#EFE6F1;
  --tinta:#2B1F30;--texto:#4A3F4F;--gris:#6B5F70;
  --font:'Nunito Sans','Avenir Next',system-ui,sans-serif;
  --gutter:clamp(16px,4vw,40px);--sec:clamp(48px,6vw,88px);
  font-family:var(--font);color:var(--tinta);background:#fff;-webkit-font-smoothing:antialiased;
  width:100%;overflow-x:clip;
}
.vya *{box-sizing:border-box}
.vya a{color:var(--morado)}.vya a:hover{color:var(--morado-osc)}
.vya img,.vya svg{display:block}
.vya svg{fill:none;flex-shrink:0}
.vya .wrap{max-width:1200px;margin:0 auto;padding:var(--sec) var(--gutter)}
.vya h1,.vya h2,.vya h3,.vya h4,.vya p{margin:0;font-family:var(--font);text-transform:none;letter-spacing:normal}
.vya h2{font-size:clamp(28px,3.4vw,42px);font-weight:900;line-height:1.1;color:var(--tinta)}
.vya .lead{font-size:18px;line-height:1.55;color:var(--texto)}

/* Botones */
.vya .btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 22px;border-radius:14px;font-family:var(--font);font-weight:800;font-size:17px;line-height:1.2;text-decoration:none;cursor:pointer;border:2px solid var(--morado);transition:background .15s,color .15s;text-transform:none;letter-spacing:normal;width:auto;height:auto}
.vya .btn-solido{background:var(--morado);color:#fff}
.vya .btn-solido:hover{background:var(--morado-osc);border-color:var(--morado-osc);color:#fff}
.vya .btn-borde{background:#fff;color:var(--morado)}
.vya .btn-borde:hover{background:var(--lila);color:var(--morado)}
.vya :focus-visible{outline:3px solid #C9A6CF;outline-offset:2px}

/* Hero */
.vya .hero{background:linear-gradient(180deg,var(--lila) 0%,#fff 100%)}
.vya .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,64px);padding-top:clamp(32px,4vw,56px)}
@media (min-width:700px){.vya .hero .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.vya .hero-texto{min-width:0;display:flex;flex-direction:column;gap:22px}
.vya .chip{align-self:flex-start;background:#fff;border:1px solid #E3D2E6;color:var(--morado);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border-radius:999px}
.vya .hero h1{font-size:clamp(46px,7.4vw,92px);line-height:.95;font-weight:900;color:var(--morado);letter-spacing:-.01em}
.vya .hero .sub{font-size:clamp(22px,2.6vw,32px);font-weight:800;color:var(--morado);margin-top:8px}
.vya .hero .lead{max-width:520px}
.vya .hero-ctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:532px}
.vya .hero-ctas .btn{min-height:56px;padding:0 14px}
.vya .nota{font-size:14px;color:var(--gris)}
.vya .hero-foto{width:100%;max-width:460px;min-width:0;position:relative;justify-self:end}
@media (max-width:699px){.vya .hero-foto{justify-self:stretch;max-width:none}}
.vya .hero-foto img{width:100%;height:clamp(260px,46vw,540px);object-fit:cover;object-position:50% 60%;border-radius:28px;box-shadow:0 24px 60px rgba(120,36,128,.18);max-width:none}
.vya .sello{position:absolute;left:-18px;bottom:28px;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:0 12px 30px rgba(43,31,48,.12);display:flex;align-items:center;gap:12px}
.vya .sello strong{display:block;font-size:15px;color:var(--tinta)}.vya .sello span{font-size:13px;color:var(--gris)}
@media (max-width:560px){.vya .sello{left:12px}}

/* Beneficios */
.vya .beneficios .wrap{display:flex;flex-direction:column;gap:36px}
.vya .grid-4{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:600px){.vya .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1000px){.vya .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vya .card{display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid var(--lila-borde);border-radius:20px;background:#FCFAFC}
.vya .card-icono{width:56px;height:56px;border-radius:16px;background:var(--lila);display:flex;align-items:center;justify-content:center;flex:none}
@media (max-width:599px){
  .vya .card{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:20px;align-items:start}
  .vya .card-icono{grid-column:1;grid-row:1 / span 2}
  .vya .card h3,.vya .card p{grid-column:2}
}
.vya .card h3{font-size:21px;font-weight:900;color:var(--morado);line-height:1.15}
.vya .card p{font-size:16px;line-height:1.5;color:var(--texto)}

/* Servicios */
.vya .servicios{background:var(--lila)}
.vya .servicios .wrap{display:flex;flex-direction:column;gap:36px}
.vya .servicios-grid{display:flex;flex-wrap:wrap;gap:24px}
.vya .servicio{flex:1 1 320px;min-width:0;background:#fff;border-radius:24px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:22px;box-shadow:0 10px 30px rgba(120,36,128,.08)}
.vya .servicio-head{display:flex;align-items:center;gap:14px}
.vya .servicio-icono{width:52px;height:52px;border-radius:14px;background:var(--morado);display:flex;align-items:center;justify-content:center;flex:none}
.vya .etiqueta{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--morado);text-transform:uppercase}
.vya .servicio h3{font-size:26px;font-weight:900;color:var(--tinta)}
.vya .checks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.vya .checks li{display:flex;gap:12px;font-size:17px;line-height:1.45;color:var(--tinta);margin:0}
.vya .checks li::before{content:none}
.vya .checks svg{flex:none;margin-top:2px}
.vya .promesa{font-size:16px;font-weight:700;color:var(--morado)}
.vya .intro-servicio{font-size:16px;color:var(--texto)}
.vya .protecciones{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.vya .protecciones li{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:16px;background:var(--lila);margin:0}
.vya .protecciones li::before{content:none}
.vya .prot-icono{flex:none;width:46px;height:46px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
.vya .protecciones h4{margin:0 0 4px;font-size:18px;font-weight:900;color:var(--tinta)}
.vya .protecciones p{font-size:15px;line-height:1.45;color:var(--texto)}
.vya .condiciones{font-size:13px;color:var(--gris)}
.vya .servicio-pie{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:6px}

/* Pasos */
.vya .pasos .wrap{display:flex;flex-direction:column;gap:36px}
.vya .grid-3{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:700px){.vya .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
@media (min-width:700px) and (max-width:999px){.vya .paso{flex-direction:column;gap:12px}}
.vya .paso{display:flex;gap:18px;align-items:flex-start}
.vya .num{flex:none;width:52px;height:52px;border-radius:50%;background:var(--lila);color:var(--morado);font-size:22px;font-weight:900;display:flex;align-items:center;justify-content:center}
.vya .num.activo{background:var(--morado);color:#fff}
.vya .paso h3{font-size:20px;font-weight:900;margin-bottom:6px;color:var(--tinta)}
.vya .paso p{font-size:16px;line-height:1.5;color:var(--texto)}

/* Prueba social */
.vya .prueba{border-top:1px solid var(--lila-borde)}
.vya .prueba .wrap{display:flex;flex-direction:column;gap:32px}
.vya .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:1000px){.vya .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.vya .stat{padding:22px;border-radius:18px;background:var(--lila)}
.vya .stat strong{display:block;font-size:38px;font-weight:900;color:var(--morado)}
.vya .stat span{font-size:15px;color:var(--texto)}
.vya .stat-record{background:var(--morado)}
.vya .stat-record strong,.vya .stat-record span{color:#fff}
.vya .casos-titulo{font-size:22px;font-weight:900;margin-top:8px;color:var(--tinta)}
.vya .casos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.vya .caso{display:flex;flex-direction:column;border:1px solid var(--lila-borde);border-radius:22px;overflow:hidden;background:#fff}
.vya .caso-dato{background:var(--lila);padding:24px 26px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.vya .caso-dato strong{font-size:44px;font-weight:900;color:var(--morado);line-height:1}
.vya .caso-dato span{font-size:16px;font-weight:700;color:var(--morado-osc)}
.vya .caso-cuerpo{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px}
.vya .caso h4{margin:0;font-size:21px;font-weight:900;line-height:1.2;color:var(--tinta)}
.vya .caso p{font-size:16px;line-height:1.55;color:var(--texto)}
.vya .inquilinos-banda{background:var(--lila);border-top:1px solid var(--lila-borde)}
.vya .inquilinos-banda .wrap{padding-top:18px;padding-bottom:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;font-size:16px}
.vya .inquilinos-banda a{font-weight:800;min-height:44px;display:flex;align-items:center}

/* Contacto */
.vya .contacto{background:var(--morado);scroll-margin-top:90px}
.vya .contacto .wrap{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);align-items:flex-start}
.vya .contacto-texto{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:18px;color:#fff}
.vya .contacto-texto h2{font-size:clamp(32px,4vw,52px);line-height:1.05;color:#fff}
.vya .contacto-texto p{font-size:18px;line-height:1.55;color:#F3E7F5}
.vya .contacto-texto a{color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.vya .contacto-form{flex:1 1 420px;min-width:0}

/* Formulario */
.vya form.form{background:#fff;border-radius:24px;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:18px;margin:0}
.vya .form fieldset{margin:0;padding:0;border:0}
.vya .form legend,.vya .form label.lbl{font-size:15px;font-weight:800;color:var(--tinta);padding:0;margin:0 0 8px;display:block}
.vya .form .segmento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;background:var(--lila);padding:6px;border-radius:14px}
.vya .form .segmento label{display:block;margin:0;cursor:pointer;position:relative}
.vya .form .segmento input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.vya .form .segmento span{min-height:48px;border-radius:10px;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--morado-osc);transition:background .15s,color .15s}
.vya .form .segmento input:checked + span{background:var(--morado);color:#fff;box-shadow:0 4px 12px rgba(120,36,128,.25)}
.vya .form .segmento input:focus-visible + span{outline:3px solid #C9A6CF;outline-offset:2px}
.vya .form .campo{width:100%;min-height:52px;height:52px;padding:0 16px;margin:0;font-family:var(--font);font-size:16px;border:1.5px solid #DCCDE0;border-radius:12px;color:var(--tinta);background:#fff;box-shadow:none}
.vya .form select.campo{appearance:auto}
.vya .form .campo:focus{outline:3px solid #C9A6CF;outline-offset:1px;border-color:var(--morado)}
.vya .form .fila{display:flex;flex-wrap:wrap;gap:14px}.vya .form .fila>div{flex:1 1 180px;min-width:0}
.vya .form .acepto{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:0;font-size:14px;line-height:1.45;color:var(--texto)}
.vya .form .acepto a{font-weight:700}
.vya .form .acepto input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--morado);flex:none}
.vya .form button.btn{width:100%;min-height:58px;font-size:18px;font-weight:900;margin:0}
.vya .form button.btn:disabled{opacity:.55;cursor:not-allowed}
.vya .form .captcha{display:contents}
.vya .form .formulario__estado{min-height:0;margin:0;font-size:15px;font-weight:700;color:var(--morado-osc)}
.vya .form .formulario__estado.error{color:#8C1D18}

/* Celular */
@media (max-width:599px){
  .vya .lead{font-size:17px}
  .vya .stat{padding:16px}
  .vya .stat strong{font-size:30px}
  .vya .stat span{font-size:14px;line-height:1.35;display:block}
  .vya .caso-dato strong{font-size:38px}
  .vya .caso-dato,.vya .caso-cuerpo{padding-left:20px;padding-right:20px}
  .vya .servicio h3{font-size:23px}
  .vya .checks li{font-size:16px}
  .vya .wa-flotante{width:54px;height:54px;left:16px;bottom:16px}
}

/* Boton flotante de WhatsApp */
.vya .wa-flotante{display:flex;position:fixed;left:20px;bottom:20px;z-index:999;width:60px;height:60px;border-radius:50%;background:#25D366;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.vya .wa-flotante:hover{transform:scale(1.05)}