/* Simulador Heimer Hogar: una casa animada para probar lo que hace Heimer. Paleta de la marca: azul noche y oro. */
:root { --night: #061629; --panel: #0d2340; --line: #23406a; --cream: #f2eee6; --muted: #a9b6c6; --gold: #c9a54b; --gold2: #e0c27a; color-scheme: dark; }
* { box-sizing: border-box; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: radial-gradient(1200px 600px at 70% -10%, #13305a 0%, var(--night) 60%); background-color: var(--night); color: var(--cream); font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.top { display: flex; align-items: center; gap: 10px; padding: 14px max(16px, env(safe-area-inset-left, 0px)) 0; max-width: 1120px; margin: 0 auto; }
.top .logo { height: 26px; } .top .tag { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,165,75,.5); border-radius: 999px; padding: 3px 10px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 60px max(16px, env(safe-area-inset-left, 0px)); }
.intro { padding: 18px 0 8px; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
h1 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: clamp(28px, 4.6vw, 46px); line-height: 1.08; margin: 6px 0 0; text-wrap: balance; max-width: 22ch; }
.lead { color: var(--muted); font-size: 17px; max-width: 60ch; margin: 10px 0 0; }

.stage { margin-top: 18px; }
.scene { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #08162a; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); }
.scene svg { display: block; width: 100%; height: auto; }
.hint { color: var(--muted); font-size: 14px; margin: 10px 2px 0; min-height: 20px; }
#house * { transition: opacity .7s ease, fill .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
#blind { transform-origin: 180px 160px; transform-box: view-box; }
#dark { transition: opacity 1s ease; }
#fanRing { transform-origin: 220px 356px; transform-box: view-box; }
.on #fanRing { animation: osc 3.2s ease-in-out infinite; }
@keyframes osc { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.55); } }
.air { stroke-dasharray: 10 8; animation: flow 1s linear infinite; } .a2 { animation-delay: .2s; } .a3 { animation-delay: .4s; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.wv { animation: pulse 1s ease-in-out infinite; } .w2 { animation-delay: .25s; }
@keyframes pulse { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.nt { animation: rise 2.4s ease-in infinite; transform-box: fill-box; } .n2 { animation-delay: 1.2s; }
@keyframes rise { 0% { transform: translateY(20px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
.tvBlob { animation: drift 4s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes drift { to { transform: translate(-90px, 30px) scale(1.6); } }
.cl { animation: pulse 1.2s ease-in-out infinite; } .c2 { animation-delay: .4s; }
#charge rect { animation: pulse 1.4s ease-in-out infinite; }
.flash { animation: flash 1.2s ease-in-out 3; }
@keyframes flash { 50% { filter: brightness(1.8); } }

/* Celular con el aviso de la caseta */
.phone { position: absolute; right: 2.5%; top: 6%; width: min(46%, 270px); border-radius: 26px; background: #0b0f17; border: 3px solid #2a3446; padding: 22px 10px 14px; box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: slidein .5s cubic-bezier(.2,.8,.2,1); }
.phone::before { content: ""; position: absolute; top: 8px; left: 50%; width: 60px; height: 6px; border-radius: 3px; background: #2a3446; transform: translateX(-50%); }
@keyframes slidein { from { transform: translateY(-30px); opacity: 0; } }
.pnotif { background: #f4f1ea; color: #10202f; border-radius: 16px; padding: 12px; }
.pk { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: #8a6a1c; }
.prow { display: flex; gap: 10px; align-items: center; } .prow b { display: block; font-size: 15px; } .prow small { color: #5b6b7d; font-size: 12px; }
.pface { width: 40px; height: 40px; border-radius: 12px; background: #c9a54b; color: #1b1404; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.pbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.pbtns button { border: 0; border-radius: 10px; min-height: 40px; font-weight: 800; background: #16a34a; color: #fff; font-size: 13px; } .pbtns .no { background: #b91c1c; }
.say { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); background: rgba(6,22,41,.92); border: 1px solid var(--gold); color: var(--cream); padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: 15px; max-width: 90%; text-align: center; animation: slidein .4s ease; }

/* Controles */
.panel { margin-top: 22px; display: grid; gap: 18px; }
.scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.scene-btn { display: grid; gap: 2px; text-align: left; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); min-height: 92px; }
.scene-btn span { font-size: 22px; } .scene-btn b { font-size: 15px; } .scene-btn small { color: var(--muted); font-size: 12.5px; }
.scene-btn.star { border-color: var(--gold); background: linear-gradient(160deg, #2b2006, #0d2340); }
.scene-btn:active, .ctrl button:active { transform: scale(.97); }
.ctrls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ctrl { background: rgba(13,35,64,.7); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.ctrl p { margin: 0 0 8px; font-weight: 800; font-size: 14px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1; min-width: 70px; min-height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #0a1b33; font-weight: 700; font-size: 13.5px; }
.seg button.hot { background: var(--gold); color: #1b1404; border-color: var(--gold); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: var(--c); }
.swatches button.hot { outline: 3px solid var(--gold); outline-offset: 2px; }
.swatches .off { background: #0a1b33; color: var(--muted); font-weight: 800; }
.fine { color: var(--muted); font-size: 13.5px; margin: 0; }

/* Llamada a la acción */
.cta { margin-top: 34px; padding: 26px; border-radius: 24px; border: 1px solid var(--gold); background: linear-gradient(160deg, rgba(201,165,75,.16), rgba(13,35,64,.85)); }
.cta h2 { font-family: Fraunces, Georgia, serif; font-size: clamp(24px, 3.4vw, 34px); margin: 0; }
.cta > p { color: var(--muted); margin: 8px 0 16px; max-width: 56ch; }
.leadform { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.leadform label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.leadform input { font: inherit; color: var(--cream); background: #0a1b33; border: 1px solid var(--line); border-radius: 12px; min-height: 48px; padding: 0 14px; }
.leadform .hp { position: absolute; left: -9999px; }
.primary { min-height: 48px; border: 0; border-radius: 12px; background: var(--gold); color: #1b1404; font-weight: 800; padding: 0 20px; }
.err { grid-column: 1 / -1; color: #ff8a80; margin: 0; min-height: 0; font-size: 14px; }
.done { padding: 10px 0; } .done b { font-size: 20px; color: var(--gold2); } .done p { margin: 4px 0 0; color: var(--muted); }
.more { display: inline-block; margin-top: 16px; color: var(--gold2); font-weight: 700; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }

@media (max-width: 860px) { .scenes { grid-template-columns: 1fr 1fr; } .ctrls { grid-template-columns: 1fr 1fr; } .leadform { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ctrls { grid-template-columns: 1fr; } .phone { position: relative; right: auto; top: auto; width: auto; margin: 10px; border-radius: 20px; padding: 18px 8px 10px; } .pnotif { padding: 9px; } .prow b { font-size: 13px; } .pbtns button { min-height: 34px; font-size: 12px; } .say { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { #house *, .air, .wv, .nt, .tvBlob, .cl, #charge rect, .on #fanRing { animation: none !important; transition: none !important; } }

/* La casa siempre a la vista mientras se usan los botones */
.simgrid { display: grid; gap: 18px; margin-top: 18px; }
.simgrid .stage { margin-top: 0; }
.simgrid .panel { margin-top: 0; }
@media (min-width: 900px) {
  .simgrid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .simgrid .stage { position: sticky; top: 14px; }
  .simgrid .scenes { grid-template-columns: 1fr 1fr; }
  .simgrid .ctrls { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .simgrid .stage { position: sticky; top: 0; z-index: 20; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-left, 0px)) 8px; background: var(--night); box-shadow: 0 10px 18px -6px rgba(0,0,0,.6); }
  .simgrid .scene { border-radius: 16px; }
  .simgrid .hint { font-size: 12.5px; margin-top: 6px; min-height: 34px; }
  .phone { position: fixed !important; left: 16px !important; right: 16px !important; top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; margin: 0 !important; z-index: 60; max-width: 420px; margin-inline: auto !important; }
}

/* Dentro de la app (cuentas sin casa): sin encabezado propio ni fondo extra. */
.embed .top { display: none; }
.embed .intro { display: none; }
.embed .wrap { padding-top: 14px; }