/* ===================== Estimador de valor =====================
   El diseño general (título, textos, botones, franja final, tipografías y tamaños) viene de soy-broker.css, que se carga antes.
   Aquí solo está lo propio del estimador: la tarjeta del marco, el "cargando" y los avisos. */

/* ---------- Encabezado: texto a la izquierda y 4 tarjetas a la derecha (sin video) ----------
   Las tarjetas conservan el diseño de Soy Broker (sb-shortcuts); aquí solo se acomodan en dos columnas. */
.sb-hero.es-hero{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:clamp(28px,4.5vw,64px); align-items:center; }
.es-hero .sb-copy{ min-width:0; max-width:none; }
.es-hero .es-tarjetas{ position:static; inset:auto; transform:none; width:auto; max-width:none; margin:0; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-content:center; }
.es-hero .es-tarjetas > a{ height:100%; min-width:0; }
.es-beta{ display:inline-block; margin:0 0 0 10px; padding:4px 12px; border-radius:999px; background:#F3DFF3; color:#660066; font-size:.92em; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; vertical-align:middle; }

.es-marco{ position:relative; width:100%; background:#fff; border:1px solid #EAD3EA; border-radius:24px; overflow:hidden; box-shadow:0 18px 50px -30px rgba(77,0,77,.4); }
.es-iframe{ display:block; width:100%; height:780px; border:0; background:transparent; }     /* altura de arranque (corta): cuando el estimador avisa cuánto mide, el marco se alarga o se encoge a esa medida */

/* "Cargando": esqueleto que cubre el marco hasta que el estimador aparece */
.es-esqueleto{ position:absolute; inset:0; z-index:1; background:#fff; padding:38px 34px; display:flex; flex-direction:column; gap:16px; pointer-events:none; transition:opacity .35s ease; }
.es-esqueleto.listo{ opacity:0; }
.es-esq-linea{ display:block; height:16px; border-radius:8px; background:linear-gradient(100deg,#f3e8f3 30%,#fbf4fb 50%,#f3e8f3 70%) 0 0/220% 100%; animation:es-brillo 1.4s linear infinite; }
.es-esq-linea.corta{ width:38%; } .es-esq-linea.media{ width:66%; }
.es-esq-bloques{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:8px 0; }
.es-esq-bloques span{ display:block; height:120px; border-radius:16px; background:linear-gradient(100deg,#f3e8f3 30%,#fbf4fb 50%,#f3e8f3 70%) 0 0/220% 100%; animation:es-brillo 1.4s linear infinite; }
@keyframes es-brillo{ to{ background-position:-220% 0; } }

.es-sin-js{ margin:0; padding:30px; text-align:center; font-size:14px; }
.es-sin-js a, .es-nota a, .es-aviso-carga a{ color:#660066; font-weight:600; }
.es-aviso-carga{ margin:14px 0 0; padding:12px 16px; background:#fff7e6; border:1px solid #f3d9a4; color:#7a5200; border-radius:12px; font-size:13px; line-height:1.55; }
.es-aviso-carga[hidden]{ display:none; }
.es-nota{ margin:14px 4px 22px; font-size:12px; line-height:1.6; color:#716B85; }

/* que al bajar desde "Calcular el valor" el estimador no quede pegado al borde de arriba */
.es-herramienta{ scroll-margin-top:24px; }

@media (max-width:980px){
  .es-iframe{ height:1000px; }
}
@media (max-width:900px){
  .sb-hero.es-hero{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:560px){
  .es-hero .es-tarjetas{ grid-template-columns:1fr; gap:10px; }
  .es-beta{ margin:8px 0 0; display:table; }
}
@media (max-width:760px){
  .es-marco{ border-radius:20px; }
  .es-iframe{ height:1400px; }
  .es-esqueleto{ padding:26px 20px; } .es-esq-bloques{ grid-template-columns:1fr; } .es-esq-bloques span{ height:70px; }
}
@media (prefers-reduced-motion:reduce){ .es-esq-linea, .es-esq-bloques span{ animation:none; } .es-esqueleto{ transition:none; } }