/* ============================================================
   Inmobiliatica: los heros (2026-10-28, aprobados por Emir y Diego sobre muestras/heros.html).
   Íconos con la gota y la casa del logo, el plano de la ciudad de fondo y una escena por página.
   GENERADO por herramientas/armar-heros.py desde la muestra: los cambios se hacen allá.
   ============================================================ */
.mdpd-svc {
    --ih-rojo: #ED1B24;        /* el del logo */
    --ih-rojo-canto: #A3121A;  /* el espesor de la gota */
    --ih-tinta: #1E293B;
    --ih-tinta-2: #26344B;     /* manzanas */
    --ih-tinta-3: #121A28;     /* canto de las manzanas y de los objetos */
    --ih-gris: #474747;        /* el del logo */
    --ih-gris-2: #5B6577;
    --ih-niebla: #EEF1F4;
    --ih-verde: #4FAE5A;       /* el verde del panel (botón «Nuevo inmueble»), para estados */
}

/* Íconos: la gota del logo con espesor y el glifo macizo (dibujos en inc/heros-sprite.svg) */
.ico { display: block; width: 64px; height: 64px; overflow: visible; --f: var(--ih-rojo); --b: var(--ih-rojo-canto); --g: #fff; }
.ico.es-tinta { --f: var(--ih-tinta); --b: var(--ih-tinta-3); }
.mdpd-svc svg.ir.ico { overflow: visible; }

/* El fondo de los heros: el plano de la ciudad (lo dibuja heros.js dentro de .inmo-plano) */
.svc-hero.hero-inmo { background: var(--ih-tinta); }
.inmo-plano { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.inmo-plano .plano { max-width: none; position: absolute; z-index: -1; top: -24px; left: -40px; width: calc(100% + 80px); height: calc(100% + 48px);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.3) 34%, #000 72%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.3) 34%, #000 72%);
    animation: ih-plano-paseo 90s linear infinite alternate; }
@keyframes ih-plano-paseo { to { transform: translate3d(-60px, 0, 0); } }
.inmo-plano .plano .luz { opacity: 0; animation: ih-luz 16s ease-in-out infinite; }
@keyframes ih-luz { 0%, 64% { opacity: 0; } 72%, 90% { opacity: .92; } 100% { opacity: 0; } }
.inmo-plano .plano .paso { opacity: .55; }
.inmo-plano .plano .pin { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: ih-pin 9s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes ih-pin { 0%, 58% { opacity: 0; transform: translateY(-26px) scale(.8); } 64% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.inmo-plano .plano .onda-p { fill: none; stroke: #ED1B24; stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ih-onda-p 9s ease-out infinite; }
@keyframes ih-onda-p { 0%, 60% { opacity: 0; transform: scale(.4); } 62% { opacity: .8; transform: scale(.5); } 90%, 100% { opacity: 0; transform: scale(3.2); } }


/* Las escenas: un lienzo de 520 × 440 que heros.js escala al ancho de la columna */
.ih-esc { position: relative; width: 100%; max-width: 560px; justify-self: end; aspect-ratio: 520 / 440; }
.ih-esc .ih-in { position: absolute; left: 0; top: 0; width: 520px; height: 440px; transform-origin: 0 0; transform: scale(var(--k, 1)); }
.ih-esc .ih-in > * { position: absolute; }
.ih-esc .p { background: #fff; color: var(--ih-tinta); border-radius: 12px; box-shadow: 0 5px 0 var(--ih-tinta-3), 0 24px 40px -20px rgba(0, 0, 0, .6); }
.ih-esc .g { color: var(--ih-gris-2); }
.ih-esc .it { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .45s ease, transform .65s cubic-bezier(.2, .9, .25, 1); }
.ih-esc .it.izq { transform: translate3d(-26px, 0, 0); }
.ih-esc .it.der { transform: translate3d(26px, 0, 0); }
.ih-esc .it.pop { transform: scale(.86); }
.ih-esc .it.on { opacity: 1; transform: none; }
.ih-esc.fin .it { opacity: 0; transition: opacity .5s ease; }
.ih-esc .chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--ih-niebla); color: var(--ih-gris-2); }
.ih-esc .chip.ok { background: #E3F4EC; color: #0A7353; }
.ih-esc .chip.rojo { background: #FFE9EA; color: #C4121B; }
.ih-esc .chip svg { width: 12px; height: 12px; }
.ih-esc .av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11.5px; font-weight: 800; flex: none; background: var(--ih-gris); }
.ih-esc .av.r { background: var(--ih-rojo); }
.ih-esc .av.t { background: #1E2A3F; }
.ih-esc .av.c { background: #29B6CB; }
.ih-esc .av.v { background: #8E74B1; }
.ih-esc .foto { display: block; border-radius: 8px; overflow: hidden; background: #D9E4EE; }
.ih-esc .foto svg { display: block; width: 100%; height: 100%; }
.ih-esc .logo-p { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.ih-esc .ok-ico { width: 14px; height: 14px; }
.ih-esc .t13 { font-size: 13px; font-weight: 800; line-height: 1.25; }
.ih-esc .t11 { font-size: 11.5px; line-height: 1.35; }
.ih-esc .tel { width: 172px; height: 336px; padding: 9px; border-radius: 28px; background: #0E1522; box-shadow: 0 6px 0 #060A12, 0 26px 40px -18px rgba(0,0,0,.7); }
.ih-esc .tel-pant { height: 100%; border-radius: 20px; background: #fff; padding: 14px 12px; display: grid; gap: 9px; align-content: start; color: var(--ih-tinta); }
.ih-esc .campo small { display: block; font-size: 10px; font-weight: 700; color: var(--ih-gris-2); }
.ih-esc .campo b { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; }
.ih-esc .precio { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.ih-esc .boton { position: relative; display: grid; place-items: center; height: 38px; border-radius: 10px; background: var(--ih-rojo); color: #fff; font-size: 13px; font-weight: 800; transition: background .3s, transform .2s; }
.ih-esc .boton > span { grid-area: 1 / 1; transition: opacity .25s; display: inline-flex; align-items: center; gap: 6px; }
.ih-esc .boton > span + span { opacity: 0; }
.ih-esc .boton.on2 { background: var(--ih-verde); }
.ih-esc .boton.on2 > span:first-child { opacity: 0; }
.ih-esc .boton.on2 > span + span { opacity: 1; }
.ih-esc .nav { overflow: hidden; }
.ih-esc .nav-barra { display: flex; align-items: center; height: 30px; padding: 0 10px; background: var(--ih-niebla); }
.ih-esc .nav-barra span { font-size: 11px; color: var(--ih-gris-2); background: #fff; border-radius: 99px; padding: 2px 12px; }
.ih-esc .marca { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; }
.ih-esc .marca svg { width: 16px; height: 16px; }
.ih-esc .panel { display: grid; grid-template-columns: 156px 1fr; overflow: hidden; }
.ih-esc .lado { background: #2A3850; padding: 14px 10px; display: grid; gap: 4px; align-content: start; }
.ih-esc .lado .marca { color: #fff; margin: 0 6px 10px; }
.ih-esc .lado-it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: #8E9AAE; font-size: 12.5px; font-weight: 700; transition: background .3s, color .3s; }
.ih-esc .lado-it .ico { width: 22px; height: 22px; --f: #3B4B66; --b: #22304A; --g: #8E9AAE; transition: none; }
.ih-esc .lado-it.on { background: rgba(255, 255, 255, .08); color: #fff; }
.ih-esc .lado-it.on .ico { --f: var(--ih-rojo); --b: var(--ih-rojo-canto); --g: #fff; }
.ih-esc .tablero { padding: 16px; }
.ih-esc .tablero-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.ih-esc .tejas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ih-esc .teja { background: #F4F6F9; border-radius: 10px; padding: 12px; }
.ih-esc .teja b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ih-esc .teja span { font-size: 11.5px; color: var(--ih-gris-2); line-height: 1.3; display: block; margin-top: 2px; }
.ih-esc .presentes { display: flex; align-items: center; gap: 16px; padding: 10px 16px; }
.ih-esc .presente { display: flex; align-items: center; gap: 8px; }
.ih-esc .presente .av { position: relative; }
.ih-esc .presente .av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 2px #fff; }
.ih-esc .disp-pos { left: 0; right: 0; top: 10px; display: grid; justify-items: center; }
.ih-esc .disp { width: 440px; height: 266px; padding: 8px; border-radius: 16px; background: #0E1522; box-shadow: 0 6px 0 #060A12, 0 26px 40px -18px rgba(0,0,0,.7);
    transition: width .9s cubic-bezier(.6, 0, .2, 1), height .9s cubic-bezier(.6, 0, .2, 1), border-radius .9s; }
.ih-esc .disp { position: relative; }
.ih-esc .disp::before, .ih-esc .disp::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: #0E1522; transition: opacity .3s; }
.ih-esc .disp::before { top: 100%; width: 54px; height: 22px; }
.ih-esc .disp::after { top: calc(100% + 22px); width: 150px; height: 9px; border-radius: 6px 6px 3px 3px; box-shadow: 0 4px 0 #060A12; }
.ih-esc .disp.on2::before, .ih-esc .disp.on2::after { opacity: 0; }
.ih-esc .escritorio { position: absolute; left: 50%; top: calc(100% + 40px); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; transition: opacity .3s; }
.ih-esc .teclado { width: 290px; height: 30px; padding: 5px 6px; border-radius: 7px; background: #0E1522; box-shadow: 0 4px 0 #060A12;
    background-image: repeating-linear-gradient(90deg, #2A3850 0 13px, transparent 13px 16px), repeating-linear-gradient(90deg, #2A3850 0 13px, transparent 13px 16px);
    background-size: calc(100% - 12px) 8px, calc(100% - 12px) 8px; background-position: 6px 5px, 14px 17px; background-repeat: no-repeat; }
.ih-esc .mouse { width: 20px; height: 30px; border-radius: 10px 10px 9px 9px; background: #0E1522; box-shadow: 0 4px 0 #060A12; position: relative; }
.ih-esc .mouse::after { content: ""; position: absolute; left: 50%; top: 5px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #2A3850; }
.ih-esc .disp.on2 .escritorio { opacity: 0; }
.ih-esc .disp.on2 { width: 280px; height: 360px; border-radius: 20px; }
.ih-esc .disp.on3 { width: 170px; height: 334px; border-radius: 24px; }
.ih-esc .disp-pant { height: 100%; border-radius: 9px; background: #fff; color: var(--ih-tinta); overflow: hidden; container-type: inline-size; }
.ih-esc .web-cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--ih-niebla); }
.ih-esc .web-menu { display: flex; gap: 10px; font-size: 10.5px; font-weight: 700; color: var(--ih-gris-2); }
.ih-esc .web-hamb { display: none; width: 18px; height: 12px; border-block: 3px solid var(--ih-tinta); position: relative; }
.ih-esc .web-hamb::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--ih-tinta); }
.ih-esc .web-dest { position: relative; aspect-ratio: 4 / 1; }
.ih-esc .web-busca { display: none; align-items: center; gap: 6px; margin: 8px 8px 0; padding: 6px 10px; border-radius: 99px; background: var(--ih-niebla); font-size: 10.5px; font-weight: 700; color: var(--ih-gris-2); }
.ih-esc .web-busca svg { width: 12px; height: 12px; flex: none; }
.ih-esc .web-dest-info { display: none; padding: 8px 10px 0; }
.ih-esc .web-dest-info b { display: block; font-size: 11.5px; font-weight: 800; line-height: 1.25; }
.ih-esc .web-dest-info span { display: block; font-size: 11px; color: var(--ih-gris-2); margin-top: 2px; }
.ih-esc .web-dest-info i { display: block; margin-top: 8px; padding: 6px 0; border-radius: 7px; background: var(--ih-rojo); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; text-align: center; }
.ih-esc .web-dest .foto { height: 100%; border-radius: 0; }
.ih-esc .web-dest .rot { position: absolute; left: 8px; top: 8px; background: var(--ih-rojo); color: #fff; font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.ih-esc .web-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 8px; }
.ih-esc .web-ficha .foto { height: 52px; border-radius: 6px; }
.ih-esc .web-ficha b { display: block; font-size: 10.5px; font-weight: 800; margin-top: 4px; line-height: 1.2; }
.ih-esc .web-ficha span { font-size: 10px; color: var(--ih-gris-2); }
.ih-esc .web-ficha:nth-child(4) { display: none; }
@container (max-width: 300px) {
.ih-esc .web-menu { display: none; }
.ih-esc .web-hamb { display: block; }
.ih-esc .web-dest { aspect-ratio: 16 / 6; }
.ih-esc .web-ficha:nth-child(4) { display: block; }
}
@container (max-width: 200px) {
.ih-esc .web-cab { padding: 7px 8px; }
.ih-esc .web-cab .marca { font-size: 9.5px; white-space: nowrap; gap: 4px; }
.ih-esc .web-cab .marca svg { width: 13px; height: 13px; }
.ih-esc .web-hamb { width: 14px; height: 10px; border-width: 2.5px; }
.ih-esc .web-busca { display: flex; white-space: nowrap; font-size: 9.5px; font-weight: 600; }
.ih-esc .web-dest { aspect-ratio: 1 / 1; }
.ih-esc .web-grilla { display: none; }
.ih-esc .web-dest-info { display: block; }
}
.ih-esc .busq { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: var(--ih-niebla); font-size: 12.5px; color: var(--ih-gris-2); }
.ih-esc .busq svg { width: 15px; height: 15px; }
.ih-esc .puesto { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ih-rojo); color: #fff; font-weight: 800; font-size: 14px; flex: none; }
.ih-esc .pasos { display: flex; gap: 6px; }
.ih-esc .paso { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; background: var(--ih-niebla); color: var(--ih-gris-2); font-size: 11.5px; font-weight: 800; transition: background .3s, color .3s; }
.ih-esc .paso i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--ih-gris-2); font-style: normal; font-size: 11px; }
.ih-esc .paso.on { background: var(--ih-rojo); color: #fff; }
.ih-esc .paso.on i { color: var(--ih-rojo); }
.ih-esc .inmueble { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: #F4F6F9; }
.ih-esc .canal { display: flex; align-items: center; gap: 10px; height: 31px; border-top: 1px solid var(--ih-niebla); font-size: 12.5px; font-weight: 700; }
.ih-esc .canal > span { flex: 1; }
.ih-esc .cb { color: #fff; position: relative; width: 20px; height: 20px; border-radius: 6px; border: 2.5px solid #CBD3DD; background: #fff; transition: background .2s, border-color .2s; flex: none; }
.ih-esc .cb svg { position: absolute; inset: 1px; width: 13px; height: 13px; opacity: 0; transition: opacity .2s; }
.ih-esc .cb.on, .ih-esc .canal.on2 .cb { background: var(--ih-rojo); border-color: var(--ih-rojo); }
.ih-esc .cb.on svg, .ih-esc .canal.on2 .cb svg { opacity: 1; }
.ih-esc .canal .chip { display: none; }
.ih-esc .canal.on3 .cb { display: none; }
.ih-esc .canal.on3 .chip { display: inline-flex; animation: ih-aparece .35s ease both; }
@keyframes ih-aparece { from { opacity: 0; transform: scale(.8); } }
.ih-esc .tabla { display: grid; grid-template-columns: 22px 1fr repeat(5, 40px); align-items: center; column-gap: 8px; }
.ih-esc .tabla > .cabeza { height: 34px; display: grid; place-items: center; font-size: 11px; color: var(--ih-gris-2); font-weight: 700; }
.ih-esc .tabla > .cabeza:nth-child(2) { justify-items: start; }
.ih-esc .tabla > .cel { height: 50px; display: grid; place-items: center; border-top: 1px solid var(--ih-niebla); }
.ih-esc .tabla > .nom { height: 50px; display: grid; align-content: center; border-top: 1px solid var(--ih-niebla); }
.ih-esc .e { color: #fff; position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; transition: background .3s; }
.ih-esc .e svg { width: 12px; height: 12px; grid-area: 1 / 1; transition: opacity .2s; }
.ih-esc .e.ok { background: var(--ih-verde); }
.ih-esc .e.pe { background: #CBD3DD; }
.ih-esc .e.re { background: var(--ih-rojo); }
.ih-esc .e .s-ok { opacity: 0; }
.ih-esc .e.ok .s-ok { opacity: 1; }
.ih-esc .e.on2 { background: var(--ih-verde); }
.ih-esc .e.on2 .s-ok { opacity: 1; }
.ih-esc .e.on2 .s-x { opacity: 0; }
.ih-esc .barra-accion { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 8px 8px 14px; border-radius: 10px; background: var(--ih-tinta); color: #fff; font-size: 12.5px; font-weight: 700; transition: background .4s; }
.ih-esc .barra-accion .boton { height: 32px; padding: 0 16px; }
.ih-esc .barra-accion > span { display: grid; }
.ih-esc .barra-accion > span > * { grid-area: 1 / 1; transition: opacity .3s; }
.ih-esc .barra-accion > span > :last-child { opacity: 0; }
.ih-esc .barra-accion.on3 { background: var(--ih-verde); }
.ih-esc .barra-accion.on3 > span > :first-child { opacity: 0; }
.ih-esc .barra-accion.on3 > span > :last-child { opacity: 1; }
.ih-esc .barra-accion.on3 .boton { opacity: 0; }
.ih-esc .consulta { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px; align-items: center; height: 56px; border-top: 1px solid var(--ih-niebla); }
.ih-esc .dual { display: grid; }
.ih-esc .dual > * { grid-area: 1 / 1; transition: opacity .3s; }
.ih-esc .dual > :not(:first-child) { opacity: 0; }
.ih-esc .on2 > .dual > :first-child, .ih-esc .dual.on2 > :first-child { opacity: 0; }
.ih-esc .on2 > .dual > :nth-child(2), .ih-esc .dual.on2 > :nth-child(2) { opacity: 1; }
.ih-esc .on3 > .dual.tres > :nth-child(2) { opacity: 0; }
.ih-esc .on3 > .dual.tres > :nth-child(3) { opacity: 1; }
.ih-esc .web-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--ih-tinta); }
.ih-esc .web-ico svg { width: 15px; height: 15px; }
.ih-esc .post { padding: 10px; transition: box-shadow .35s; }
.ih-esc .post-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ih-esc .post-cab .av { width: 24px; height: 24px; font-size: 10px; }
.ih-esc .post-cue { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; }
.ih-esc .post-cue .foto { height: 50px; }
.ih-esc .post.on2 { box-shadow: 0 0 0 3px var(--ih-rojo), 0 5px 0 3px var(--ih-rojo-canto), 0 24px 40px -20px rgba(0,0,0,.6); }
.ih-esc .post .chip { margin-top: 8px; display: none; }
.ih-esc .post.on2 .chip { display: inline-flex; animation: ih-aparece .35s ease both; }
.ih-esc .hilo { left: 0; top: 0; width: 520px; height: 440px; overflow: visible; pointer-events: none; }
.ih-esc .hilo path { fill: none; stroke: var(--ih-rojo); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset .8s ease; }
.ih-esc .hilo.on path { stroke-dashoffset: 0; }
.ih-esc.fin .hilo path { stroke-dashoffset: 160; transition: none; opacity: 0; }
.ih-esc .red-general { inset: 0; border-radius: 24px; background-image: radial-gradient(circle, #34445E 3.2px, transparent 3.8px); background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(closest-side, transparent 58%, #000 100%); mask-image: radial-gradient(closest-side, transparent 58%, #000 100%); }
.ih-esc .disco { left: 110px; top: 70px; width: 300px; height: 300px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center;
    box-shadow: 0 0 0 9px var(--ih-rojo), 0 7px 0 9px var(--ih-rojo-canto), 0 30px 50px -20px rgba(0,0,0,.7); }
.ih-esc .disco .ico { width: 44px; height: 44px; }
.ih-esc .cuenta-grande { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.ih-esc .miembro { width: 44px; height: 44px; font-size: 13px; box-shadow: 0 0 0 4px var(--ih-tinta), 0 4px 0 4px var(--ih-tinta-3); }
.ih-esc .comp { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; align-items: center; height: 46px; border-top: 1px solid var(--ih-niebla); }
.ih-esc .comp .foto { height: 34px; border-radius: 6px; }
.ih-esc .pista { position: relative; height: 14px; margin: 44px 0 26px; border-radius: 7px; background: var(--ih-niebla); }
.ih-esc .rango { position: absolute; left: 20%; top: 0; bottom: 0; width: 0; border-radius: 7px; background: #FFC9CC; transition: width 1.1s cubic-bezier(.4, 0, .2, 1); }
.ih-esc .rango.on { width: 60%; }
.ih-esc .marcador { position: absolute; left: 52%; bottom: 20px; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; }
.ih-esc .marcador .chip { background: var(--ih-tinta); color: #fff; font-size: 12px; }
.ih-esc .marcador svg { width: 22px; height: 22px; transform: rotate(-135deg); }
.ih-esc .extremo { position: absolute; top: 20px; transform: translateX(-50%); font-size: 11.5px; color: var(--ih-gris-2); font-weight: 700; white-space: nowrap; }
.ih-esc .cargo { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; height: 46px; padding: 0 10px; border-radius: 8px; transition: background .3s, box-shadow .3s; }
.ih-esc .cargo + .cargo { margin-top: 2px; }
.ih-esc .cargo.on2 { background: #FFF0F1; box-shadow: inset 4px 0 0 var(--ih-rojo); }
.ih-esc .cargo .av { width: 26px; height: 26px; font-size: 10px; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
.ih-esc .cargo.on2 .av { opacity: 1; transform: none; }
.ih-esc .usuario { transition: opacity .45s ease, transform .9s cubic-bezier(.6, 0, .2, 1); }
.ih-esc .usuario.on2 { transform: translate3d(-118px, 76px, 0) scale(.82); }
.ih-esc .usuario.on3 { opacity: 0; }
.ih-esc .permiso { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; font-size: 12px; font-weight: 700; }
.ih-esc .llave { position: relative; width: 32px; height: 18px; border-radius: 99px; background: #CBD3DD; transition: background .3s; flex: none; }
.ih-esc .llave::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .3s; }
.ih-esc .llave.on { background: var(--ih-verde); }
.ih-esc .llave.on::after { transform: translateX(14px); }
.ih-esc.pg-zona { --tinta-pg: #170d3d; --pulpo-claro: #ae82f1; --pulpo-medio: #732cdd; --pulpo-oscuro: #4a1997; --fluo: #2bff88; }
.ih-esc.pg-zona .pulpo { --tinta: #170d3d; width: 250px; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
.ih-esc .msj { max-width: 270px; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.42; box-shadow: 0 16px 30px -18px rgba(0,0,0,.5); }
.ih-esc .msj small { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 800; opacity: .75; }
.ih-esc .msj.el { background: #fff; color: #170d3d; border-bottom-left-radius: 4px; }
.ih-esc .msj.pg { background: linear-gradient(65deg, #220b44 9%, #4a1997 40%, #732cdd 75%, #ae82f1 100%); color: #fff; border-radius: 4px 16px 16px 16px; }
.ih-esc .msj.pg small { color: #2bff88; opacity: 1; }
.ih-esc .escribe { display: flex; gap: 5px; padding: 14px 16px; border-radius: 4px 16px 16px 16px; background: #4a1997; }
.ih-esc .escribe i { width: 8px; height: 8px; border-radius: 50%; background: #d6c9ff; animation: ih-punto 1.1s ease-in-out infinite; }
.ih-esc .escribe i:nth-child(2) { animation-delay: .15s; }
.ih-esc .escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes ih-punto { 40% { transform: translateY(-4px); opacity: .5; } }
.ih-esc .escribe.on2 { opacity: 0; }
.ih-esc .pal { opacity: 0; transition: opacity .14s ease; }
.ih-esc .pal.vis { opacity: 1; }
.ih-esc .ventana .nav-barra span { font-weight: 700; color: var(--ih-tinta); }
.ih-esc .ventana img { width: 100%; aspect-ratio: 768 / 379; object-fit: cover; object-position: top; }
.ih-esc .q { border-top: 1px solid var(--ih-niebla); }
.ih-esc .q:first-child { border-top: 0; }
.ih-esc .q-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; font-size: 15px; font-weight: 800; line-height: 1.3; }
.ih-esc .q-mas { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--ih-niebla); flex: none; transition: transform .35s, background .35s; }
.ih-esc .q-mas::before, .ih-esc .q-mas::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 3.5px; margin: -1.75px 0 0 -6px; border-radius: 2px; background: var(--ih-tinta); transition: background .35s; }
.ih-esc .q-mas::after { transform: rotate(90deg); }
.ih-esc .q-r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1); }
.ih-esc .q-r > div { overflow: hidden; }
.ih-esc .q-r p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: #334155; }
.ih-esc .q.on .q-r { grid-template-rows: 1fr; }
.ih-esc .q.on .q-mas { transform: rotate(45deg); background: var(--ih-rojo); }
.ih-esc .q.on .q-mas::before, .ih-esc .q.on .q-mas::after { background: #fff; }
.ih-esc .q.on2 .q-r { grid-template-rows: 0fr; }
.ih-esc .q.on2 .q-mas { transform: none; background: var(--ih-niebla); }
.ih-esc .q.on2 .q-mas::before, .ih-esc .q.on2 .q-mas::after { background: var(--ih-tinta); }
.ih-esc .llamada { position: relative; width: 72px; height: 72px; flex: none; }
.ih-esc .llamada .ico { width: 72px; height: 72px; position: relative; z-index: 1; }
.ih-esc .onda { position: absolute; inset: 6px; border-radius: 50%; border: 5px solid var(--ih-rojo); opacity: 0; }
.ih-esc .on .onda { animation: ih-onda 2.4s ease-out infinite; }
.ih-esc .on .onda + .onda { animation-delay: 1.2s; }
@keyframes ih-onda { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.8); opacity: 0; } }
.ih-esc .cartel { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; font-size: 16px; font-weight: 800; background: #E3F4EC; color: #0A7353; }
.ih-esc .cartel i { width: 12px; height: 12px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
.ih-esc .cartel.cerrado { background: var(--ih-niebla); color: var(--ih-tinta); }
.ih-esc .cartel.cerrado i { background: #94A3B8; box-shadow: none; }

@media (max-width: 980px) {
    .ih-esc { justify-self: center; }
    .inmo-plano .plano { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 45%, #000 80%); mask-image: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 45%, #000 80%); }
}
@media (prefers-reduced-motion: reduce) {
    .inmo-plano .plano, .inmo-plano .plano .luz, .ih-esc .onda, .ih-esc .escribe i { animation: none !important; }
    .inmo-plano .plano .paso, .inmo-plano .plano .onda-p { display: none; }
    .inmo-plano .plano .pin:nth-of-type(2n) { opacity: 1; }
    .inmo-plano .plano .luz:nth-of-type(4n) { opacity: .9; }
}