:root { color-scheme: light; --navy: #12344d; --green: #2e7d32; --soft-green: #eaf7e8; --muted: #697780; --border: #e7ece8; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--navy); background: #eef2ee; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; padding: 28px 16px; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #558b2f; outline-offset: 4px; }
button:disabled { cursor: default; }
button, img { -webkit-user-select: none; user-select: none; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mobile-screen { width: 100%; max-width: 414px; margin: 0 auto; background: #fff; border: 1px solid #e1e8e1; border-radius: 26px; overflow: hidden; box-shadow: 0 18px 65px #173b2420; }
.app-header { min-height: 66px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); }
.brand { display: flex; gap: 5px; align-items: center; font-weight: 800; font-size: 17px; letter-spacing: -.7px; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand-green { color: var(--green); }
.screen-name { font-size: 14px; font-weight: 700; margin-left: auto; }
.demo-label { font-size: 10px; font-weight: 650; color: #52634f; background: #f0f5ee; border-radius: 6px; padding: 4px 6px; }
main { padding: 0 16px 15px; }
.intro { padding: 22px 2px 15px; }
h1 { font-size: 25px; line-height: 1.2; letter-spacing: -1.05px; font-weight: 650; margin: 0 0 6px; }
.intro > p { font-size: 13px; color: var(--muted); margin: 0; }
.collection-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 15px; }
.collection { display: flex; align-items: center; gap: 7px; background: var(--soft-green); border: 1px solid #bad7af; color: var(--green); font-size: 11px; font-weight: 750; padding: 6px 10px; border-radius: 30px; }
.green-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.collection-count { border-left: 1px solid #bad7af; padding-left: 7px; }
.deck-progress { font-size: 10px; color: var(--muted); }
.property-card { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 8px 25px #173b240b; transition: transform 240ms ease, opacity 240ms ease; }
.gallery { position: relative; height: 211px; background: #edf0e9; overflow: hidden; }
.gallery::after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, #102a3b60); pointer-events: none; }
.gallery > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.photo-favorite { position: absolute; z-index: 1; right: 12px; top: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #ffffff55; background: #16344940; color: white; backdrop-filter: blur(4px); }
.photo-favorite .icon { width: 25px; height: 25px; }
.photo-arrow { position: absolute; z-index: 1; top: calc(50% - 22px); width: 32px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: #12344d55; color: #fff; }
.photo-prev { left: 0; border-radius: 0 10px 10px 0; }
.photo-prev .icon { transform: rotate(180deg); }
.photo-next { right: 0; border-radius: 10px 0 0 10px; }
.photo-arrow:disabled { opacity: .3; }
.photo-count { position: absolute; z-index: 1; bottom: 12px; right: 12px; color: white; background: #12344d99; padding: 4px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.photo-dots { position: absolute; z-index: 1; bottom: 17px; display: flex; gap: 5px; left: 50%; transform: translateX(-50%); }
.photo-dots i { width: 5px; height: 5px; border-radius: 50%; background: #ffffff80; }
.photo-dots .active { width: 16px; border-radius: 5px; background: #fff; }
.property-body { padding: 14px 14px 12px; }
.property-body h2 { font-size: 21px; font-weight: 650; letter-spacing: -.7px; line-height: 1.2; margin: 0 0 6px; }
.property-body h2:focus, .complete h2:focus { outline: none; }
.location { display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); margin: 0; }
.location .icon { width: 13px; height: 15px; }
.features { list-style: none; margin: 14px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.features li { display: flex; flex-direction: column; gap: 5px; font-size: 11px; }
.features .icon { width: 20px; height: 20px; color: #4f6b79; }
.price { color: var(--green); font-size: 23px; font-weight: 800; letter-spacing: -.6px; margin: 0 0 13px; }
.zone-map { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; }
.map-art { display: block; width: 100%; height: auto; }
figcaption { min-height: 31px; display: flex; align-items: center; gap: 4px; color: var(--green); font-weight: 650; font-size: 10px; padding: 6px 8px; }
figcaption .icon { width: 12px; height: 12px; }
figcaption span { margin-left: auto; color: var(--muted); font-size: 9px; font-weight: 400; }
.claim { font-size: 12px; text-align: center; margin: 17px 0 13px; }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; max-width: 360px; margin: 0 auto; }
.action { display: flex; align-items: center; flex-direction: column; gap: 7px; padding: 0; border: 0; background: none; color: #536977; font-size: 10px; }
.action-circle { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border); background: #fff; box-shadow: 0 5px 14px #173b2409; transition: transform 150ms ease, background 150ms ease; }
.action .icon { width: 25px; height: 25px; }
.action-primary { color: var(--green); font-weight: 700; }
.action-primary .action-circle { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 6px 16px #2e7d3230; }
.action-primary .icon { fill: currentColor; stroke-width: 1; width: 24px; height: 24px; }
.action:active .action-circle { transform: scale(.93); }
.action:disabled { opacity: .55; }
.feedback { text-align: center; color: var(--green); min-height: 30px; font-size: 11px; line-height: 1.4; margin: 12px 0 0; }
.demo-footer { text-align: center; font-size: 10px; color: #66736d; padding-top: 8px; border-top: 1px solid #f1f3ef; }
.leaving-discard { transform: translateX(-28px) rotate(-2deg); opacity: 0; }
.leaving-favorite { transform: translateY(-12px) scale(.98); opacity: 0; }
.leaving-interest { transform: translateX(28px) rotate(2deg); opacity: 0; }
.complete { min-height: 455px; padding: 64px 12px 30px; text-align: center; }
.complete-icon { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--soft-green); color: var(--green); margin: 0 auto 22px; }
.complete-icon .icon { width: 30px; height: 30px; }
.complete h2 { font-size: 23px; letter-spacing: -.6px; margin: 0 0 12px; }
.complete p { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0 0 26px; }
.restart { display: inline-flex; justify-content: center; align-items: center; gap: 9px; border: 0; border-radius: 30px; padding: 13px 20px; color: #fff; background: var(--green); font-weight: 650; font-size: 13px; }
.restart .icon { width: 17px; height: 17px; }
.noscript { color: #a33c26; font-size: 13px; }
@media (hover: hover) { .action:hover:not(:disabled) .action-circle { transform: translateY(-3px); background: #f1f7ed; } .action-primary:hover:not(:disabled) .action-circle { background: #246728; } .photo-favorite:hover { background: #12344d99; } }
@media (max-width: 480px) { body { background: #fff; padding: 0; } .mobile-screen { border: 0; border-radius: 0; box-shadow: none; min-height: 100dvh; } }
@media (max-width: 350px) { main { padding-inline: 12px; } .app-header { padding-inline: 14px; gap: 10px; } h1 { font-size: 23px; } .gallery { height: 190px; } .property-body { padding-inline: 12px; } figcaption { font-size: 9px; } figcaption span { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.indicators { display:flex; gap:8px; margin-top:10px; color:#617568; font-size:10px; }
.indicators span { background:#f5f8f3; border-radius:12px; padding:5px 9px; }
.action-super { color:#a27018; font-weight:700; } .action-super .action-circle { background:#fff7e4; border-color:#eddbb1; }
.leaving-superinterest { transform:translateX(28px) rotate(2deg); opacity:0; }
.qa-panel { max-width:414px; margin:20px auto; padding:14px; border:1px dashed #9da9a0; border-radius:12px; background:#f8faf7; font-size:12px; color:#445950; }
.qa-panel p { margin:5px 0 10px; } .qa-panel button { border:1px solid #b5c6b7; background:white; border-radius:8px; padding:8px; margin:2px; color:#12344d; }
#celebration { position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:20px; border:0; background:transparent; overflow:hidden; color:#12344d; }
#celebration[open] { display:grid; place-items:center; } #celebration::backdrop { background:rgba(8,28,31,.64); }
#fireworks { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.match-card { --accent:#b27a16; --glow:#f7d891; position:relative; width:min(100%,390px); padding:27px 25px 28px; text-align:center; background:linear-gradient(155deg,#fff 25%,#fff9e9); border:1px solid #e6ca87; border-radius:25px; box-shadow:0 24px 80px #071d2b77, 0 0 55px #ffd87955; animation:arrive .55s cubic-bezier(.2,.8,.2,1) both; }
.silver .match-card { --accent:#567488; --glow:#c9e6f5; background:linear-gradient(155deg,#fff 25%,#edf7fb); border-color:#b7d0dd; box-shadow:0 24px 80px #071d2b77,0 0 55px #b9e6ff66; }
.match-close { position:absolute; right:13px; top:10px; border:0; background:transparent; color:#536b72; font-size:29px; width:40px; height:40px; line-height:1; }
.match-brand { display:flex; justify-content:center; align-items:center; gap:7px; color:#28543d; font-size:10px; font-weight:800; letter-spacing:.17em; } .match-brand img { width:27px; height:27px; }
.match-emblem { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--accent); font-size:19px; margin:24px 0 12px; } .match-emblem span { display:grid; place-items:center; width:76px; height:76px; border-radius:50%; font-size:34px; color:var(--accent); background:var(--glow); box-shadow:0 0 0 9px #ffffffaa,0 0 30px var(--glow); }
.match-kicker { color:var(--accent); font-weight:800; font-size:10px; letter-spacing:.18em; margin:22px 0 9px; }
.match-card h2 { font-size:clamp(27px,7vw,36px); line-height:1.12; letter-spacing:-1px; margin:0; } .match-card #match-description { font-size:14px; color:#647680; line-height:1.5; margin:14px 0 24px; }
.match-continue { border:0; border-radius:25px; background:#2e7d32; color:white; font-weight:700; padding:14px 24px; min-height:48px; }
@keyframes arrive { from { opacity:0; transform:translateY(24px) scale(.9); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .match-card { animation:none; } }

/* HD-DISCOVERY-SIM-001-R3 · Comparación visual, manteniendo el logotipo original sin alteraciones */
:root { --navy:#10334c; --green:#098c3a; --border:#e6eae7; --muted:#627483; background:#f5f7fa; }
body {padding:30px 12px 36px; background:linear-gradient(145deg,#f6faf7,#f0f3f8); }
.mobile-screen {max-width:428px; border-radius:34px; border:1px solid #e4e9ec; box-shadow:0 25px 85px #16334b20; }
.app-header {border-bottom:0; padding:16px 20px 4px; min-height:62px;}
.brand {font-size:19px;letter-spacing:-.7px; gap:7px;}
.brand img {height:37px;width:37px;}
.screen-name {font-size:11px; color:#5c7583; font-weight:500;}
.demo-label {font-size:10px; color:#2c5367;}
main {padding:0 19px 18px;}
.intro {padding:12px 1px 13px;}
h1 {font-size:22px; font-weight:740; letter-spacing:-.5px;margin-bottom:4px;}
.intro > p {font-size:12px;}
.collection-row {justify-content:flex-start; margin-top:15px; gap:8px; flex-wrap:wrap;}
.collection {font-size:11px; border-color:#b7ddc2; background:#eaf6ee; color:#087735; padding:6px 10px;}
.collection-secondary {background:#fff; border-color:#e2e8ee; color:#273d53;}
.collection-count {border:0; padding:0;}
.indicators {justify-content:space-between; margin-top:10px;align-items:center;color:#94a1aa;}
.indicators span:first-child {background:transparent; padding:0;}
.example-note {letter-spacing:.12em; font-weight:700; font-size:9px; color:#7b9990;}
.property-card {border-radius:18px;border-color:#e8eaeb;box-shadow:0 4px 16px #173b2409;}
.gallery {height:195px;}
.gallery::after {inset:70% 0 0;background:linear-gradient(transparent,#102a3b75);}
.photo-arrow {border-radius:50%;top:calc(50% - 16px); width:31px;height:31px; background:#173b4b85; margin:0 7px;}
.photo-count {bottom:13px;right:12px;background:#112f3dbb;font-size:11px;}
.photo-favorite {top:9px;right:10px;width:36px;height:36px;}
.photo-dots {bottom:17px;}
.property-body {padding:15px 13px 12px;}
.property-body h2 {font-size:20px;font-weight:750;letter-spacing:-.5px;margin-bottom:4px;}
.location {font-size:12px;color:#5d7584;}
.features {grid-template-columns:repeat(4,minmax(0,1fr));margin:15px 0 14px;text-align:center;gap:2px;}
.features li {gap:4px;align-items:center; white-space:nowrap; font-size:10px; color:#40596b;}
.features .icon {width:19px;height:19px;stroke-width:1.8;color:#1e4960;}
.price {color:#112e44;font-weight:850;font-size:25px;margin:0 0 12px;}
.comparison {border:1px solid #c6e2cb; border-radius:16px; overflow:hidden; background:linear-gradient(165deg,#f7fcf7,#edf9ef); margin-bottom:13px;}
.comparison-head {display:flex;align-items:center;justify-content:space-between;gap:5px;padding:12px 12px 4px;}
.comparison-head h3 {margin:0;display:flex;align-items:center;gap:7px;color:#17743c;font-size:12px;font-weight:800;}
.comparison-head .icon {width:16px;height:16px;}
.comparison-edit {background:transparent;color:#287145;border:0;display:flex;gap:3px;align-items:center;font-size:10px; font-weight:600;padding:5px;}
.comparison-edit .icon {width:13px;height:13px;}
.comparison-values {display:grid;grid-template-columns:1fr 1fr; gap:0; padding:10px 16px 13px;}
.comparison-values > div {display:flex;flex-direction:column; gap:4px;padding:0 0 0 7px;}
.comparison-values > div + div {border-left:1px solid #b8d8c2; padding-left:21px;}
.comparison-values span {font-size:11px;color:#556c62;}
.comparison-values strong {font-size:19px; letter-spacing:-.4px;color:#142f41;}
.comparison-result {padding:12px 14px;display:flex;align-items:center;gap:12px;background:#e5f4e8;color:#0a7736;}
.comparison-result.pay {background:#fff2e8;color:#a4551f;}
.comparison-result.equal {background:#e8f3f8;color:#295e7c;}
.difference-icon {flex-shrink:0;width:40px;height:40px;background:linear-gradient(#26a659,#087e37);border-radius:50%;display:grid;place-items:center;color:#fff;font-size:27px;font-weight:700;line-height:1;box-shadow:0 3px 9px #187a3c2b;}
.pay .difference-icon {background:linear-gradient(#f0a54b,#c76f22);}
.equal .difference-icon {background:linear-gradient(#5ca7cb,#327a9b);}
.comparison-result>div {display:flex;flex-direction:column;line-height:1.23;gap:2px;}
.comparison-result>div>span {font-size:11px;font-weight:650;}
.comparison-result strong {font-size:22px;letter-spacing:-.5px;}
.comparison-result small {font-size:11px;}
.difference-info {margin-left:auto;border:0;background:none;color:#47705c;padding:5px;}
.difference-info .icon {width:19px;height:19px;}
.valuation-editor {border-top:1px solid #dceadc;padding:8px 13px 12px;}
.valuation-editor label {font-size:11px;color:#3b5c4b;display:block;margin-bottom:6px;}
.valuation-controls {display:flex;gap:8px;}
.valuation-controls input {width:100%;min-width:0;border-radius:8px;border:1px solid #b4cbb7;padding:8px 10px;font-family:inherit;font-size:14px;font-weight:600;color:#10344a;}
.valuation-controls button {background:#087f35;border:0;border-radius:8px;padding:8px 13px;color:#fff;font-size:12px;font-weight:700;}
.difference-explainer {margin:0;padding:10px 13px;font-size:10px;line-height:1.5;color:#4a6456;background:#f3faf3;}
.zone-map {border-radius:13px;}
.map-art {height:108px;}
.zone-map figcaption {min-height:31px;font-size:10px;color:#0b6c37;}
.claim {font-size:11px;margin:15px 0 12px;color:#6c8290;}
.claim span {display:block;font-size:10px;margin-top:4px;}
.actions {max-width:350px; gap:6px;}
.action {font-size:10px; gap:7px;}
.action-circle {width:54px;height:54px;}
.action-primary .action-circle {background:#0b9240;border-color:#0b9240;}
.action-super .action-circle {background:#fff;border-color:#e8edf1; color:#f5ad26;}
.action-super .icon {fill:#fbbd49; stroke:#f5a52d;}
.demo-footer {margin-top:4px;}
.qa-panel {background:#ffffffbb; border-color:#c4d5d9;max-width:428px;}
.qa-panel button {font-size:12px;}
/* Premium-looking match overlays inspired by the approved Gold / Silver concept */
#celebration::backdrop {background:rgba(4,16,27,.70);backdrop-filter:blur(5px);}
.match-card {width:min(100%,410px);border-radius:30px;padding:26px 22px 23px; overflow:hidden; background:radial-gradient(circle at 50% 1%,#f7d991 0%,transparent 42%),linear-gradient(#fff9e8,#fff);border:1px solid #f5d49a;box-shadow:0 25px 95px #071d2bbb, 0 0 45px #ffc55a70;}
.silver .match-card {background:radial-gradient(circle at 50% 0%,#b6daf0,transparent 43%),linear-gradient(#f2f8fc,#fff);border-color:#b9d9ee;box-shadow:0 25px 95px #071d2bbb, 0 0 45px #bfeaff70;}
.match-brand {font-size:17px;letter-spacing:-.6px;font-weight:800;color:#16394d;}
.match-brand img {width:30px;height:30px;}
.match-emblem {margin:22px 0 13px;}
.match-logo-ring {width:105px!important;height:105px!important;border-radius:50%;background:radial-gradient(#fff8e8,#f2c26f)!important;border:2px solid #fce9b8;box-shadow:0 0 0 9px #ffffff44,0 0 50px #edb543bb!important;display:grid!important;place-items:center;}
.silver .match-logo-ring {background:radial-gradient(#fff,#bfd9ec)!important;border-color:#edf8ff;box-shadow:0 0 0 9px #ffffff55,0 0 55px #a0cceb!important;}
.match-logo-ring img {width:75px;height:75px;object-fit:contain;}
.match-kicker {margin:15px 0 10px;font-size:10px;}
.match-card h2 {color:#6e4615;font-size:30px;font-weight:840;letter-spacing:-.8px;}
.silver .match-card h2 {color:#2c475c;}
.match-card #match-description {color:#634c33;font-weight:560;font-size:14px;line-height:1.48;margin:13px 0 20px;}
.silver .match-card #match-description {color:#365063;}
.match-explainer {border:1px solid #f0d5ac;background:#fffdf8d9;border-radius:16px;padding:13px 14px;display:flex;flex-direction:column;gap:11px;text-align:left;margin-bottom:17px;}
.silver .match-explainer {background:#f8fcff;border-color:#d9e6ef;}
.match-explainer>div {display:flex;gap:9px;align-items:center;font-size:12px;color:#634a29;}
.silver .match-explainer>div {color:#35516a;}
.match-explainer .icon {width:17px;height:17px;stroke-width:2.5;color:#96691e;}
.silver .match-explainer .icon {color:#537a9a;}
.match-continue {width:100%;border-radius:13px; min-height:49px;display:flex;justify-content:center;align-items:center; gap:8px;background:linear-gradient(120deg,#ca9748,#8e5a1c);}
.silver .match-continue {background:linear-gradient(120deg,#7296b1,#355773);}
.match-continue .icon {width:17px;height:17px;}
.match-disclaimer {font-size:10px;color:#7e6d54;margin:14px 0 0;}
.silver .match-disclaimer {color:#637c8e;}
@media (max-width:480px) {body {background:#fff;padding:0;} .mobile-screen {border-radius:0;box-shadow:none;min-height:100dvh;} .qa-panel{margin:12px auto;} }
@media (max-width:350px){main{padding-inline:12px}.features li {font-size:9px}.comparison-values strong{font-size:17px}.action-circle{width:48px;height:48px}.match-card h2{font-size:26px}.match-card{padding-inline:15px} }
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* HD-DISCOVERY-SIM-001-R4 — control de audio explícito, silencioso por defecto */
.header-controls { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.sound-toggle { width: 36px; height: 36px; display: grid; place-items: center; background: #f2f7f3;
  border: 1px solid #dcebe0; color: #3b6e54; border-radius: 50%; padding: 0;
  transition: background-color 150ms ease, border-color 150ms ease; }
.sound-toggle .icon { width: 19px; height: 19px; stroke-width: 1.9; }
.sound-toggle[aria-pressed="true"] { background: #d9f2e2; border-color: #81cca0; color: #087f35; }
.sound-toggle:disabled { opacity: .45; cursor: not-allowed; }
.sound-hint { color: #526b62; }
@media (max-width: 365px) { .screen-name { display: none; } .app-header { gap: 7px; } .header-controls { margin-left: auto; } }

/* Presentación integrada en la landing. */
body { padding: 0; background: transparent; }
.mobile-screen { min-height: 0; }
.qa-panel { display: none; }