/* =====================================================================
   ENCASA INVERSIONES — Sistema de diseño de la web pública.

   Lo usan la portada y todas las páginas de servicio. Vive en UN archivo a
   propósito: cuando estaba dentro del HTML, tocar un color obligaba a editar
   siete archivos y bastaba con olvidar uno para que la web quedara despareja.

   Lo específico de cada página va en su propio <style>, no acá.
   ===================================================================== */
/* =====================================================================
   ENCASA INVERSIONES — Página principal · "liquid glass" (v2)

   El diseño anterior queda en anterior.html por si hay que volver.
   Ese ya se llamaba liquid glass, así que repetir paneles
   translúcidos no habría sido un cambio. Lo que hace que un vidrio se lea como
   vidrio y no como "caja semitransparente" son tres cosas, y las tres estaban
   sin hacer:

     1. El BORDE especular. Un vidrio real coge la luz en el canto: acá cada
        superficie lleva un borde en degradado (más claro arriba-izquierda, casi
        nulo abajo-derecha) hecho con máscara, no un `border` plano.
     2. El FONDO VIVO. Sin algo que se mueva detrás, el desenfoque no tiene qué
        desenfocar. Hay una malla de manchas de color que deriva lentamente.
     3. El BRILLO que sigue al puntero. Las tarjetas reflejan hacia donde está
        el mouse; es lo que da la sensación de superficie física.

   Todo el contenido, los enlaces y los textos son los mismos de la página
   actual: acá solo cambia la piel.

   Tipografías: Playfair Display (títulos) + Inter (cuerpo).
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:        #05070f;
  --bg-2:      #080c18;
  --azul:      #2e6fe0;
  --azul-osc:  #1A4FA0;
  --azul-claro:#7db1ff;
  --rojo:      #CC2020;
  --rojo-claro:#e8484a;
  --verde:     #25D366;

  --txt:       #f2f5fb;
  --txt-mut:   rgba(226,234,248,0.72);
  --txt-mut2:  rgba(226,234,248,0.45);

  /* Vidrio: relleno, canto y sombra proyectada */
  --vidrio:      rgba(255,255,255,0.045);
  --vidrio-alto: rgba(255,255,255,0.085);
  --canto:       rgba(255,255,255,0.30);
  --canto-bajo:  rgba(255,255,255,0.04);
  --sombra:      0 24px 60px -20px rgba(0,0,0,0.75);

  --r-lg: 30px;
  --r-md: 22px;
  --r-sm: 15px;
  --max: 1240px;
  /* Aire ENTRE secciones. Ojo: se reparte mitad arriba y mitad abajo de cada
     una, porque si cada sección lleva el valor completo el hueco entre dos
     vecinas queda del doble y la página se ve rota, no aireada. */
  --paso: clamp(76px, 8.5vw, 128px);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── 1. EL FONDO LÍQUIDO ────────────────────────────────────────────────
   Manchas de color grandes y muy difusas que derivan en bucle. Van en un
   contenedor fijo detrás de todo: si estuvieran en el body, cada scroll
   obligaría a recalcular el desenfoque de todos los vidrios de encima. */
.liquido { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--bg); }
.mancha { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; }
.m1 { width: 62vw; height: 62vw; left: -18vw; top: -16vw;  background: radial-gradient(circle, #2e6fe0 0%, transparent 66%); animation: derivar1 34s ease-in-out infinite; }
.m2 { width: 54vw; height: 54vw; right: -14vw; top: 12vh;  background: radial-gradient(circle, #7a3ce0 0%, transparent 66%); animation: derivar2 44s ease-in-out infinite; opacity: 0.38; }
.m3 { width: 48vw; height: 48vw; left: 22vw; bottom: -18vw; background: radial-gradient(circle, #CC2020 0%, transparent 68%); animation: derivar3 39s ease-in-out infinite; opacity: 0.24; }
.m4 { width: 40vw; height: 40vw; right: 6vw; bottom: 4vh;  background: radial-gradient(circle, #16b8a6 0%, transparent 68%); animation: derivar2 52s ease-in-out infinite reverse; opacity: 0.2; }
@keyframes derivar1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(12vw, 9vh) scale(1.16); } }
@keyframes derivar2 { 0%,100% { transform: translate(0,0) scale(1.08); } 50% { transform: translate(-11vw, 12vh) scale(0.9); } }
@keyframes derivar3 { 0%,100% { transform: translate(0,0) scale(0.95); } 50% { transform: translate(9vw, -11vh) scale(1.2); } }

/* Grano: sin él los degradados grandes se ven "bandeados" en pantallas de 8 bit
   y el conjunto parece plástico en vez de vidrio. */
.grano {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ── 2. LA SUPERFICIE DE VIDRIO ─────────────────────────────────────────
   El canto especular se hace con un pseudo-elemento enmascarado: se pinta un
   degradado y se recorta a un anillo de 1px. Un `border` normal es del mismo
   color en los cuatro lados, y por eso nunca parece vidrio. */
.vidrio {
  position: relative;
  background: linear-gradient(160deg, var(--vidrio-alto) 0%, var(--vidrio) 45%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-radius: var(--r-md);
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255,255,255,0.10);
  isolation: isolate;
}
.vidrio::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, var(--canto) 0%, rgba(255,255,255,0.10) 32%, var(--canto-bajo) 62%, rgba(255,255,255,0.16) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 2;
}
/* Brillo que sigue al puntero (--mx/--my los actualiza el script). */
.vidrio::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.10), transparent 62%);
  opacity: 0; transition: opacity 0.45s ease;
}
.vidrio:hover::after { opacity: 1; }

/* ── TIPOGRAFÍA Y ESTRUCTURA ── */
h1, h2, h3, h4 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: clamp(46px, 7.4vw, 92px); }
h2 { font-size: clamp(32px, 4.6vw, 56px); }
h3 { font-size: clamp(20px, 2.3vw, 27px); }
.it { font-style: italic; background: linear-gradient(100deg, var(--azul-claro), #c4b5fd 55%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.it-rojo { font-style: italic; color: var(--rojo-claro); }

section { max-width: var(--max); margin: 0 auto; padding: calc(var(--paso) / 2) 24px; position: relative; }
.sec-head { max-width: 720px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-sub { color: var(--txt-mut); font-size: 16.5px; margin-top: 16px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--azul-claro); padding: 7px 15px; border-radius: 999px; margin-bottom: 20px;
  background: rgba(46,111,224,0.12); border: 1px solid rgba(125,177,255,0.24);
}
.eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--azul-claro); box-shadow: 0 0 10px var(--azul-claro); }
.eyebrow.center { margin-left: auto; margin-right: auto; }

/* ── BOTONES ── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px; border-radius: 999px; font-size: 15px; font-weight: 600;
  text-decoration: none; color: #fff; border: none; cursor: pointer; overflow: hidden;
  transition: transform 0.32s cubic-bezier(.2,.9,.3,1), box-shadow 0.32s ease, filter 0.3s ease;
}
.btn::after {   /* barrido de luz al pasar por encima */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.32) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform 0.75s cubic-bezier(.2,.9,.3,1);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn:active { transform: translateY(0); }
.btn-azul { background: linear-gradient(135deg, #4785ee, var(--azul-osc)); box-shadow: 0 14px 34px -12px rgba(46,111,224,0.85); }
.btn-rojo { background: linear-gradient(135deg, var(--rojo-claro), #9c1414); box-shadow: 0 14px 34px -12px rgba(204,32,32,0.8); }
.btn-ghost { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(12px); }
.btn-ghost:hover { background: rgba(255,255,255,0.11); }

/* ── NAVEGACIÓN ──
   Se encoge al bajar: en el hero va ancha y aireada; al hacer scroll se
   compacta y el vidrio se cierra, para no robarle sitio al contenido. */
nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100;
  width: min(var(--max), calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 13px 15px 13px 24px; border-radius: 999px;
  background: rgba(10,14,26,0.42); backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.09);
  transition: padding 0.4s cubic-bezier(.2,.9,.3,1), background 0.4s ease, box-shadow 0.4s ease, top 0.4s ease;
}
nav.compacta { top: 10px; padding: 9px 12px 9px 20px; background: rgba(8,11,22,0.78); box-shadow: 0 16px 40px -18px rgba(0,0,0,0.9); }
nav .logo img { height: 34px; display: block; transition: height 0.4s ease; }
nav.compacta .logo img { height: 28px; }
nav ul { display: flex; align-items: center; gap: 3px; list-style: none; }
nav ul a { color: var(--txt-mut); text-decoration: none; font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 999px; transition: color 0.25s, background 0.25s; white-space: nowrap; }
nav ul a:hover, nav ul a.activo { color: #fff; background: rgba(255,255,255,0.08); }
.nav-cta { background: linear-gradient(135deg, #4785ee, var(--azul-osc)) !important; color: #fff !important; padding: 11px 21px !important; box-shadow: 0 10px 26px -12px rgba(46,111,224,0.9); }
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 23px; cursor: pointer; padding: 4px 10px; }

.nav-dropdown { position: relative; }
.nav-soporte { cursor: pointer; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); right: 0; min-width: 285px; padding: 9px;
  border-radius: var(--r-sm); background: rgba(12,16,28,0.94); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.11); box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.28s cubic-bezier(.2,.9,.3,1);
}
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 11px; }
.dd-ico { font-size: 20px; }
.dd-text { display: flex; flex-direction: column; line-height: 1.32; }
.dd-text strong { font-size: 13.5px; color: #fff; font-weight: 600; }
.dd-text small { font-size: 11.5px; color: var(--txt-mut2); }

/* ── HERO ── */
.hero { min-height: 100svh; display: flex; align-items: center; padding-top: 130px; padding-bottom: calc(var(--paso) / 2); max-width: var(--max); }
.hero-contenido { max-width: 900px; width: 100%; }
.hero h1 { margin-bottom: 26px; }
.hero > .hero-contenido > p { font-size: clamp(17px, 2vw, 20px); color: var(--txt-mut); max-width: 620px; margin-bottom: 38px; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 46px; }

/* Buscador: la pieza de vidrio más grande, y por eso la que más se nota. */
.buscador { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 10px; padding: 13px; border-radius: var(--r-lg); align-items: end; }
.buscador .campo { display: flex; flex-direction: column; gap: 6px; padding: 11px 17px; border-radius: var(--r-sm); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); transition: background 0.25s, border-color 0.25s; }
.buscador .campo:focus-within { background: rgba(255,255,255,0.09); border-color: rgba(125,177,255,0.4); }
.buscador label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-mut2); }
.buscador select { background: none; border: none; color: #fff; font-size: 14.5px; font-weight: 500; font-family: inherit; outline: none; cursor: pointer; width: 100%; }
.buscador select option { background: #0d1220; color: #fff; }
.btn-buscar { height: 100%; min-height: 62px; padding-inline: 32px; }

/* ── CREDENCIALES ── */
.cred-grid { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding: 30px 38px; border-radius: var(--r-lg); }
.cred-item strong { display: block; font-family: "Playfair Display", serif; font-size: clamp(32px, 4vw, 46px); font-weight: 600; line-height: 1; }
.cred-item strong sup { font-size: 0.5em; color: var(--azul-claro); vertical-align: super; }
.cred-item small { display: block; font-size: 12.5px; color: var(--txt-mut2); margin-top: 7px; }
.cred-sep { width: 1px; height: 46px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent); }
.cred-google { display: flex; align-items: center; gap: 18px; }
.stars { color: #fbbf24; font-size: 15px; letter-spacing: 2px; }
.cred-google a { color: var(--azul-claro); font-size: 13px; text-decoration: none; font-weight: 600; line-height: 1.4; }
.cred-google a:hover { text-decoration: underline; }

/* ── SERVICIOS: rejilla tipo bento ──
   Cuatro tarjetas iguales se leen como una lista. Con tamaños distintos el ojo
   entra por la grande y el bloque se lee como una composición. */
/* Seis servicios en rejilla tipo bento: dos grandes arriba (los que más
   pesan en el negocio), tres medianos y uno ancho de cierre. Seis tarjetas
   iguales se leerían como un formulario. */
.qh-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.qh-card { padding: 30px; display: flex; flex-direction: column; gap: 12px; grid-column: span 2; text-decoration: none; color: inherit; transition: transform 0.42s cubic-bezier(.2,.9,.3,1), box-shadow 0.42s ease; }
.qh-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -24px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.16); }
.qh-card.ancha { grid-column: span 3; padding: 40px 38px; min-height: 290px; justify-content: flex-end; }
.qh-card.ancha h3 { font-size: clamp(26px, 3vw, 35px); }
.qh-card.ancha .glass-ico { width: 66px; height: 66px; font-size: 31px; }
.qh-card.banner { grid-column: span 6; flex-direction: row; align-items: center; gap: 26px; padding: 30px 38px; }
.qh-card.banner h3 { font-size: clamp(21px, 2.4vw, 27px); }
.qh-card.banner .glass-ico { margin-bottom: 0; flex-shrink: 0; }
.qh-card.banner > div { flex: 1; }
.qh-card p { color: var(--txt-mut); font-size: 14.5px; }
/* La invitación a entrar aparece al acercarse: en reposo no compite con el
   texto, y al pasar por encima confirma que la tarjeta lleva a alguna parte. */
.qh-mas { margin-top: auto; padding-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--azul-claro); opacity: 0.65; transform: translateX(0); transition: opacity 0.3s, transform 0.35s cubic-bezier(.2,.9,.3,1); }
.qh-card:hover .qh-mas { opacity: 1; transform: translateX(5px); }
.qh-card.banner .qh-mas { margin-top: 0; padding-top: 0; white-space: nowrap; }
.glass-ico {
  width: 58px; height: 58px; display: grid; place-items: center; font-size: 27px; border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.13); margin-bottom: 4px;
}

/* ── ARRENDATARIOS / PROPIETARIOS ── */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.split-card { padding: 44px 40px; display: flex; flex-direction: column; }
.split-card h3 { font-size: clamp(26px, 3vw, 35px); margin-bottom: 14px; }
.split-card > p { color: var(--txt-mut); margin-bottom: 26px; }
.split-bullets { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 32px; flex: 1; }
.split-bullets li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--txt-mut); }
.ck { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 5px 14px -5px rgba(52,211,153,0.8); }
.split-btns { display: flex; gap: 11px; flex-wrap: wrap; }

/* ── PROBLEMA / SOLUCIÓN ── */
.problema-card { padding: clamp(46px, 6vw, 78px) 40px; text-align: center; border-radius: var(--r-lg); }
.problema-card h2 { margin-bottom: 20px; }
.problema-card > p { color: var(--txt-mut); max-width: 620px; margin: 0 auto 34px; font-size: 16.5px; }

/* ── MARQUESINA DE ALIADOS ── */
.respaldo { overflow: hidden; }
.marquee { position: relative; overflow: hidden; padding: 10px 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 15px; width: max-content; animation: correr 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }
.logo-item { padding: 15px 32px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--txt-mut); white-space: nowrap; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); transition: color 0.3s, background 0.3s; }
.logo-item:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* ── PROPIEDADES ── */
.grid-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prop-card { overflow: hidden; display: flex; flex-direction: column; transition: transform 0.42s cubic-bezier(.2,.9,.3,1), box-shadow 0.42s ease; }
.prop-card:hover { transform: translateY(-8px); box-shadow: 0 40px 80px -26px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.16); }
.prop-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.prop-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s cubic-bezier(.2,.9,.3,1); }
.prop-card:hover .prop-img-wrap img { transform: scale(1.07); }
.prop-badge, .prop-estrato { position: absolute; top: 15px; font-size: 11px; font-weight: 700; padding: 6px 13px; border-radius: 999px; backdrop-filter: blur(10px); letter-spacing: 0.04em; }
.prop-badge { left: 15px; background: rgba(204,32,32,0.9); color: #fff; }
.prop-estrato { right: 15px; background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.16); }
.prop-info { padding: 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.prop-ubicacion { font-size: 13px; color: var(--txt-mut2); }
.prop-precio { font-family: "Playfair Display", serif; font-size: 27px; color: var(--azul-claro); font-weight: 600; }
.prop-detalles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.prop-detalles span { font-size: 12px; color: var(--txt-mut); padding: 6px 11px; border-radius: 9px; background: rgba(255,255,255,0.05); }
.btn-ver { margin-top: auto; padding-top: 16px; color: var(--azul-claro); text-decoration: none; font-size: 14px; font-weight: 600; transition: gap 0.3s; display: inline-flex; gap: 6px; }
.btn-ver:hover { gap: 12px; }

/* ── TESTIMONIOS ── */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.video-card { overflow: hidden; transition: transform 0.42s cubic-bezier(.2,.9,.3,1); }
.video-card:hover { transform: translateY(-6px); }
.video-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,7,15,0.35); transition: background 0.35s; }
.video-card:hover .play { background: rgba(5,7,15,0.18); }
.play span { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff; padding-left: 4px; background: rgba(255,255,255,0.14); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.3); transition: transform 0.35s cubic-bezier(.2,.9,.3,1); }
.video-card:hover .play span { transform: scale(1.12); }
.vc-foot { display: flex; align-items: center; gap: 13px; padding: 18px 22px; }
.vc-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: linear-gradient(135deg, #4785ee, var(--azul-osc)); }
.vc-foot strong { display: block; font-size: 14px; }
.vc-foot small { font-size: 12px; color: var(--txt-mut2); }

/* ── RESEÑAS ── */
.reviews-panel { padding: 26px; border-radius: var(--r-lg); }
.reviews-panel iframe { border-radius: var(--r-sm); display: block; }
.resena-cta { text-align: center; margin-top: 32px; }
.resena-cta p { color: var(--txt-mut); margin-bottom: 18px; }

/* ── FAQ ── */
.faq-wrap { max-width: 830px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { overflow: hidden; transition: background 0.3s; }
.faq-q { width: 100%; text-align: left; background: none; border: none; color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; padding: 23px 27px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 400; background: rgba(255,255,255,0.08); transition: transform 0.4s cubic-bezier(.2,.9,.3,1), background 0.3s; }
.faq-item.open .faq-icon { transform: rotate(135deg); background: var(--azul); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(.2,.9,.3,1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a > div > * , .faq-a > div { color: var(--txt-mut); font-size: 15px; padding: 0 27px; }
.faq-item.open .faq-a > div { padding-bottom: 24px; }

/* ── CONTACTO ── */
.contacto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.contacto-stats { display: flex; gap: 44px; margin-top: 36px; }
.form-card { padding: 38px; display: flex; flex-direction: column; gap: 13px; border-radius: var(--r-lg); }
.form-card h3 { margin-bottom: 10px; }
.form-line input, .form-line select {
  width: 100%; padding: 15px 19px; border-radius: 13px; font-size: 14.5px; font-family: inherit; color: #fff;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); outline: none;
  transition: border-color 0.25s, background 0.25s;
}
.form-line input::placeholder { color: var(--txt-mut2); }
.form-line input:focus, .form-line select:focus { border-color: var(--azul); background: rgba(255,255,255,0.085); }
.form-line select option { background: #0d1220; }
.form-card .btn { margin-top: 10px; }

/* ── PIE ── */
footer { border-top: 1px solid rgba(255,255,255,0.07); margin-top: calc(var(--paso) / 2); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4)); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 68px 24px 44px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; }
.f-logo img { height: 40px; margin-bottom: 18px; }
.f-desc { color: var(--txt-mut); font-size: 14px; max-width: 330px; }
.f-social { display: flex; gap: 9px; margin-top: 22px; }
.f-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--txt-mut); text-decoration: none; font-size: 14px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.09); transition: all 0.3s cubic-bezier(.2,.9,.3,1); }
.f-social a:hover { color: #fff; background: var(--azul); transform: translateY(-3px); }
.footer-col h4 { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--txt-mut2); margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; color: var(--txt-mut); text-decoration: none; font-size: 14px; margin-bottom: 11px; transition: color 0.25s; }
.footer-col a:hover { color: var(--azul-claro); }
.footer-bottom { max-width: var(--max); margin: 0 auto; padding: 22px 24px 34px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--txt-mut2); border-top: 1px solid rgba(255,255,255,0.055); }
.footer-bottom a { color: var(--txt-mut2); text-decoration: none; }
.footer-bottom a:hover { color: var(--azul-claro); }

/* ── DOCK FLOTANTE ── */
.fab-dock { position: fixed; right: 20px; bottom: 22px; z-index: 90; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(16px); transition: all 0.42s cubic-bezier(.2,.9,.3,1); }
.fab-dock.show { opacity: 1; visibility: visible; transform: translateY(0); }
.fab-item { display: flex; align-items: center; gap: 0; width: 50px; height: 50px; border-radius: 999px; text-decoration: none; color: #fff; overflow: hidden; padding-left: 14px; backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.16); transition: width 0.42s cubic-bezier(.2,.9,.3,1), gap 0.42s, background 0.3s; }
.fab-item:hover { width: 214px; gap: 12px; }
.fab-ico { font-size: 20px; flex-shrink: 0; }
.fab-label { font-size: 13.5px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity 0.3s 0.1s; }
.fab-item:hover .fab-label { opacity: 1; }
.fab-item.azul { background: rgba(46,111,224,0.82); }
.fab-item.rojo { background: rgba(204,32,32,0.86); }
.fab-item.verde { background: rgba(37,211,102,0.86); }

/* ── ASESORA IA ── */
.ai-launcher { position: fixed; left: 20px; bottom: 22px; z-index: 95; width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); backdrop-filter: blur(16px); cursor: pointer; padding: 0; overflow: visible; box-shadow: 0 16px 40px -14px rgba(0,0,0,0.8); transition: transform 0.35s cubic-bezier(.2,.9,.3,1); }
.ai-launcher:hover { transform: scale(1.07); }
.sofia-av { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.ai-ping { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--verde); border: 2px solid #05070f; }
.ai-ping::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--verde); animation: pulso 2s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
.ai-panel { position: fixed; left: 20px; bottom: 96px; z-index: 96; width: min(378px, calc(100vw - 40px)); max-height: min(610px, calc(100vh - 130px)); display: flex; flex-direction: column; border-radius: var(--r-md); background: rgba(10,14,26,0.93); backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--sombra); opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.97); transform-origin: bottom left; transition: all 0.4s cubic-bezier(.2,.9,.3,1); overflow: hidden; }
.ai-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ai-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ai-bot { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.ai-head strong { display: block; font-size: 14px; }
.ai-head small { font-size: 11.5px; color: var(--verde); }
.ai-close { margin-left: auto; background: none; border: none; color: var(--txt-mut2); font-size: 25px; cursor: pointer; line-height: 1; }
.ai-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 11px; }
.ai-msg { max-width: 84%; padding: 12px 16px; border-radius: 17px; font-size: 14px; line-height: 1.55; }
.ai-msg.bot { background: rgba(255,255,255,0.07); border-bottom-left-radius: 5px; align-self: flex-start; }
.ai-msg.user { background: linear-gradient(135deg, #4785ee, var(--azul-osc)); border-bottom-right-radius: 5px; align-self: flex-end; }
.ai-typing { display: flex; gap: 4px; padding: 3px 0; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-mut2); animation: escribir 1.3s ease-in-out infinite; }
.ai-typing span:nth-child(2) { animation-delay: 0.18s; }
.ai-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes escribir { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }
.ai-quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 12px; }
.ai-quick button { font-size: 12px; padding: 8px 13px; border-radius: 999px; color: var(--txt-mut); background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; font-family: inherit; transition: all 0.25s; }
.ai-quick button:hover { color: #fff; background: rgba(46,111,224,0.3); }
.ai-input { display: flex; gap: 9px; padding: 13px 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.ai-input input { flex: 1; padding: 12px 16px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-family: inherit; font-size: 14px; outline: none; }
.ai-input button { width: 42px; height: 42px; border-radius: 50%; border: none; background: linear-gradient(135deg, #4785ee, var(--azul-osc)); color: #fff; cursor: pointer; font-size: 15px; flex-shrink: 0; }
.ai-disclaimer { font-size: 10.5px; color: var(--txt-mut2); text-align: center; padding: 0 18px 13px; }

/* ── APARICIÓN AL DESPLAZAR ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.85s cubic-bezier(.2,.9,.3,1), transform 0.85s cubic-bezier(.2,.9,.3,1); }
.reveal.visible { opacity: 1; transform: none; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .qh-grid { grid-template-columns: repeat(2, 1fr); }
  .qh-card:first-child { grid-column: span 2; grid-row: auto; }
  .grid-props, .video-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  nav { padding: 11px 14px; }
  .nav-toggle { display: block; }
  nav ul { position: absolute; top: calc(100% + 12px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 3px; padding: 12px; border-radius: var(--r-md); background: rgba(10,14,26,0.96); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.1); display: none; }
  nav ul.open { display: flex; }
  .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: none; box-shadow: none; padding: 0; min-width: 0; }
  .buscador { grid-template-columns: 1fr; }
  .split-grid, .contacto-grid, .grid-props, .video-grid { grid-template-columns: 1fr; }
  .qh-grid { grid-template-columns: 1fr; }
  .qh-card, .qh-card.ancha, .qh-card.banner { grid-column: auto; }
  .qh-card.banner { flex-direction: column; align-items: flex-start; }
  .cred-sep { display: none; }
  .cred-grid { justify-content: center; text-align: center; gap: 30px; }
  .footer-inner { grid-template-columns: 1fr; gap: 34px; }
  .contacto-stats { gap: 28px; }
}
@media (max-width: 520px) {
  .hero { padding-top: 112px; }
  .btn { padding: 13px 24px; font-size: 14px; }
  .split-card, .form-card { padding: 30px 24px; }
}

/* Quien pidió menos movimiento no debería recibir una página que respira. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   PÁGINAS DE SERVICIO (/ventas, /arriendos, …)
   Cada una vende UN servicio y sigue el mismo guion: promesa → prueba →
   problema → cómo lo hacemos → proceso → qué incluye → dudas → cierre.
   Que compartan estructura no es pereza: el visitante que ya vio una sabe
   moverse en las otras.
   ===================================================================== */

/* Migas: en una página de aterrizaje el visitante suele caer desde un anuncio
   sin haber pasado por la portada, y necesita saber dónde está parado. */
.migas { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--txt-mut2); margin-bottom: 22px; }
.migas a { color: var(--txt-mut); text-decoration: none; }
.migas a:hover { color: var(--azul-claro); }

.sv-hero { padding-top: 140px; }
/* Más contenido que la portada: aquí el titular tiene que convivir con el
   subtítulo y el botón en la primera pantalla. Un h1 del tamaño del de la
   portada empuja la llamada a la acción fuera de la vista, que es justo lo que
   una página de aterrizaje no se puede permitir. */
.sv-hero h1 { margin-bottom: 20px; max-width: 22ch; font-size: clamp(38px, 5.2vw, 66px); }
.sv-lead { font-size: clamp(17px, 2vw, 21px); color: var(--txt-mut); max-width: 620px; margin-bottom: 34px; }
.sv-hero-cta { display: flex; gap: 13px; flex-wrap: wrap; }

/* Cifras de respaldo */
.sv-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.sv-cifra { padding: 28px 26px; border-radius: var(--r-md); text-align: center; }
.sv-cifra b { display: block; font-family: "Playfair Display", serif; font-size: clamp(32px, 4vw, 46px); line-height: 1; font-weight: 600; }
.sv-cifra b sup { font-size: 0.5em; color: var(--azul-claro); vertical-align: super; }
.sv-cifra span { display: block; font-size: 13px; color: var(--txt-mut2); margin-top: 9px; line-height: 1.5; }

/* El problema que el servicio resuelve */
.sv-dolor { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.sv-dolor-item { padding: 24px 26px; border-radius: var(--r-md); border-left: 3px solid rgba(232,72,74,0.55); background: rgba(204,32,32,0.06); }
.sv-dolor-item strong { display: block; font-size: 15px; margin-bottom: 7px; }
.sv-dolor-item p { font-size: 14px; color: var(--txt-mut); }

/* Diferenciales: la carne de la propuesta */
.sv-difs { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.sv-dif { padding: 32px 30px; display: flex; flex-direction: column; gap: 11px; transition: transform 0.42s cubic-bezier(.2,.9,.3,1); }
.sv-dif:hover { transform: translateY(-5px); }
.sv-dif h3 { font-size: 21px; }
.sv-dif p { font-size: 14.5px; color: var(--txt-mut); }
.sv-dif .glass-ico { width: 52px; height: 52px; font-size: 24px; }

/* Proceso paso a paso */
/* Flex y no rejilla: con seis pasos y cinco cupos por fila, el sexto quedaba
   solo y pegado a la izquierda, como si sobrara. En flex la última fila se
   centra. El crecimiento va topado para que un paso huérfano no se estire a
   todo el ancho y parezca otra cosa. */
.sv-pasos { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 16px; }
/* Base ancha a propósito: con seis pasos deja 3 + 3 y con cinco, 3 + 2. Las
   dos se leen como una composición. Con tarjetas angostas salía 5 + 1, y esa
   fila de uno parece un error de maquetación aunque no lo sea. */
.sv-paso { flex: 1 1 330px; max-width: 400px; }
.sv-paso { padding: 28px 26px; border-radius: var(--r-md); position: relative; }
.sv-pasos > .sv-paso { margin-top: 6px; }
/* El número va en un elemento REAL, no en un ::before.
   Las tarjetas de paso también son .vidrio, y .vidrio ya usa sus dos
   pseudo-elementos: ::before para el canto especular y ::after para el brillo
   que sigue al puntero. Al pisar el ::before, el número heredaba la máscara
   del canto —que recorta todo menos un anillo de 1px— y salían círculos
   vacíos. Dos reglas peleando por el mismo pseudo siempre terminan así. */
.sv-num {
  position: absolute; top: -14px; left: 26px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: "Playfair Display", serif; font-size: 16px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #4785ee, var(--azul-osc));
  box-shadow: 0 8px 20px -8px rgba(46,111,224,0.9);
}
.sv-paso h4 { font-family: "Inter", sans-serif; font-size: 15px; font-weight: 700; margin: 12px 0 8px; }
.sv-paso p { font-size: 13.5px; color: var(--txt-mut); }

/* Qué incluye */
.sv-incluye { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 11px 30px; padding: 38px 40px; border-radius: var(--r-lg); }
.sv-incluye li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--txt-mut); list-style: none; padding: 7px 0; }

/* Ilustración del portal: NO es una captura, es un esquema de lo que se puede
   hacer. Se dibuja para que se entienda, no para simular una pantalla real. */
.sv-portal { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
.portal-mock { padding: 16px; border-radius: var(--r-lg); }
.portal-barra { display: flex; align-items: center; gap: 7px; padding: 0 6px 14px; }
.portal-barra i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.portal-barra span { margin-left: 10px; font-size: 11.5px; color: var(--txt-mut2); }
.portal-filas { display: flex; flex-direction: column; gap: 9px; }
.portal-fila { display: flex; align-items: center; gap: 13px; padding: 14px 17px; border-radius: 13px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); }
.portal-fila .pf-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: rgba(46,111,224,0.18); flex-shrink: 0; }
.portal-fila strong { display: block; font-size: 13.5px; }
.portal-fila small { font-size: 11.5px; color: var(--txt-mut2); }
.portal-fila .pf-tag { margin-left: auto; font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(52,211,153,0.16); color: #34d399; white-space: nowrap; }

/* Cierre */
.sv-cierre { text-align: center; padding: clamp(48px, 6vw, 76px) 40px; border-radius: var(--r-lg); }
.sv-cierre h2 { margin-bottom: 18px; }
.sv-cierre p { color: var(--txt-mut); max-width: 560px; margin: 0 auto 32px; font-size: 16.5px; }
.sv-cierre-btns { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .sv-portal { grid-template-columns: 1fr; gap: 30px; }
  .sv-incluye { padding: 28px 24px; }
  .sv-hero { padding-top: 118px; }
}