:root {
  --paper: #f4f8fa; --ink: #14232d; --muted: #61727c; --clay: #006da7; --clay-dark: #004a78;
  --blue: #005879; --line: rgba(20, 35, 45, .16); --cream: #ffffff; --accent: #ffd400; --radius: 18px;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, sans-serif; min-width: 320px; }
.grain { position: fixed; inset: 0; opacity: .06; pointer-events: none; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.site-header, main, footer { width: min(1160px, calc(100% - 64px)); margin: auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 28px 0 22px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; letter-spacing: -.03em; line-height: .95; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; color: var(--cream); background: var(--clay); border-radius: 50% 45% 50% 42%; font: 700 13px 'DM Mono', monospace; transform: rotate(-10deg); }
.brand strong, .brand em { display: block; font-size: 15px; font-style: normal; }.brand em { color: var(--clay); font-weight: 800; }
.header-note, .eyebrow, .kicker, .panel-label, footer { font: 500 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .13em; }.header-note { color: var(--muted); }.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #74a565; margin-right: 8px; box-shadow: 0 0 0 4px rgba(116,165,101,.15); }
.intro { padding: 76px 0 54px; max-width: 700px; }.eyebrow { color: var(--clay-dark); display: flex; align-items: center; gap: 12px; }.eyebrow span { color: var(--muted); }.intro h1 { font: 800 clamp(42px, 6.2vw, 78px)/.99 'Playfair Display', serif; letter-spacing: -.055em; margin: 22px 0 23px; }.intro h1 i { color: var(--clay); font-style: normal; }.intro-copy { max-width: 490px; color: var(--muted); line-height: 1.65; font-size: 15px; }.stats { display: flex; gap: 38px; margin-top: 35px; }.stats div { display: flex; flex-direction: column; gap: 2px; }.stats strong { font: 800 24px 'Playfair Display', serif; }.stats span { color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.game-shell { background: var(--blue); color: var(--cream); border-radius: 24px; padding: clamp(24px, 4vw, 48px); box-shadow: 0 20px 55px rgba(23, 76, 83, .18); position: relative; overflow: hidden; }.game-shell:after { content: ''; width: 380px; height: 380px; position: absolute; right: -130px; bottom: -210px; border: 1px solid rgba(255,250,242,.15); border-radius: 50%; box-shadow: 0 0 0 26px rgba(255,250,242,.04), 0 0 0 52px rgba(255,250,242,.04); pointer-events: none; }.game-topline { display: flex; justify-content: space-between; align-items: start; border-bottom: 1px solid rgba(255,250,242,.18); padding-bottom: 23px; margin-bottom: 31px; gap: 20px; }.kicker, .panel-label { color: #a9c6bf; }.game-topline h2 { font: 700 25px 'Playfair Display', serif; margin: 8px 0 0; }.text-button { border: 0; background: transparent; color: var(--cream); font: 600 12px Manrope, sans-serif; cursor: pointer; padding: 8px 0; }.shuffle-icon { color: #f58f79; font-size: 20px; vertical-align: -2px; margin-right: 7px; }.game-area { display: grid; grid-template-columns: minmax(300px, 540px) 1fr; align-items: center; gap: clamp(30px, 7vw, 90px); }.board-wrap { max-width: 540px; }.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 5px; background: rgba(255,250,242,.23); border-radius: 13px; aspect-ratio: 1; }.piece { position: relative; border: 0; padding: 0; cursor: grab; border-radius: 7px; overflow: hidden; background: #536f70; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: transform .2s, filter .2s, box-shadow .2s; }.piece:focus-visible { outline: 3px solid #f4bb69; outline-offset: 3px; }.piece:active { cursor: grabbing; }.piece.selected { transform: scale(.96); box-shadow: 0 0 0 3px #f4bb69, 0 8px 18px rgba(0,0,0,.3); z-index: 2; }.piece.correct { box-shadow: inset 0 0 0 3px rgba(164, 215, 163, .75); }.piece img { width: 300%; height: 300%; max-width: none; object-fit: cover; position: absolute; user-select: none; pointer-events: none; }.piece[data-slot="0"] img { left: 0; top: 0; }.piece[data-slot="1"] img { left: -100%; top: 0; }.piece[data-slot="2"] img { left: -200%; top: 0; }.piece[data-slot="3"] img { left: 0; top: -100%; }.piece[data-slot="4"] img { left: -100%; top: -100%; }.piece[data-slot="5"] img { left: -200%; top: -100%; }.piece[data-slot="6"] img { left: 0; top: -200%; }.piece[data-slot="7"] img { left: -100%; top: -200%; }.piece[data-slot="8"] img { left: -200%; top: -200%; }.board-tip { color: #a9c6bf; font-size: 11px; margin-top: 15px; }.tip-icon { color: #f58f79; margin-right: 6px; }.aside-panel { max-width: 260px; }.aside-panel p { font: 700 20px/1.3 'Playfair Display', serif; margin: 12px 0 31px; }.progress-line { height: 4px; background: rgba(255,250,242,.18); border-radius: 3px; overflow: hidden; }.progress-line span { display: block; width: 0; height: 100%; background: #f58f79; transition: width .35s ease; }.progress-meta { display: flex; justify-content: space-between; margin-top: 11px; color: #a9c6bf; font: 10px 'DM Mono', monospace; }.progress-meta span:last-child { color: #f58f79; }.aside-rule { border-top: 1px solid rgba(255,250,242,.18); margin: 33px 0 23px; }.aside-panel .aside-small { color: #a9c6bf; font: 400 12px/1.6 Manrope, sans-serif; margin: 0; }
.discovery-card { display: grid; grid-template-columns: 1fr 1fr; margin: 42px 0 78px; background: var(--cream); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 16px 45px rgba(32,45,45,.08); animation: reveal .65s cubic-bezier(.2,.8,.2,1); }.hidden { display: none; }.card-image { min-height: 330px; position: relative; background: #cad8d0; }.card-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }.stamp { position: absolute; right: 20px; top: 20px; display: grid; place-items: center; width: 73px; height: 73px; border: 1px solid rgba(255,250,242,.8); border-radius: 50%; color: #fff; text-align: center; font: 9px/1.35 'DM Mono', monospace; transform: rotate(12deg); }.card-content { padding: clamp(28px, 5vw, 58px); }.card-content h2 { font: 800 42px/.98 'Playfair Display', serif; letter-spacing: -.04em; margin: 15px 0 18px; }.card-content > p { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 420px; }.place-facts { display: flex; gap: 30px; margin: 28px 0 30px; }.place-facts div { border-left: 2px solid var(--clay); padding-left: 12px; }.place-facts dt { color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; margin-bottom: 6px; }.place-facts dd { margin: 0; font-weight: 700; font-size: 13px; }.primary-button { padding: 14px 18px; color: var(--cream); background: var(--clay); border: 0; border-radius: 8px; font: 700 12px Manrope, sans-serif; cursor: pointer; transition: background .2s, transform .2s; }.primary-button:hover { background: var(--clay-dark); transform: translateY(-2px); }.primary-button span { font-size: 18px; margin-left: 18px; vertical-align: -2px; }footer { display: flex; justify-content: space-between; padding: 0 0 30px; color: var(--muted); font-size: 9px; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 760px) { .site-header, main, footer { width: min(100% - 32px, 560px); }.site-header { padding-top: 18px; }.header-note { font-size: 8px; }.intro { padding: 55px 0 38px; }.intro h1 { font-size: clamp(42px, 13vw, 68px); }.game-topline { flex-direction: column; margin-bottom: 24px; }.game-topline h2 { font-size: 22px; }.game-area { grid-template-columns: 1fr; gap: 29px; }.board-wrap { width: 100%; }.aside-panel { max-width: none; }.aside-panel p { font-size: 18px; margin: 10px 0 20px; }.aside-rule { margin: 25px 0 18px; }.discovery-card { grid-template-columns: 1fr; margin-top: 28px; }.card-image { min-height: 260px; }.card-content h2 { font-size: 37px; }.place-facts { gap: 20px; }footer { flex-direction: column; gap: 12px; padding-bottom: 24px; } }

/* Composición para pantallas verticales: el rompecabezas es el escenario principal. */
@media (orientation: portrait) and (min-width: 761px) {
  .site-header, main, footer { width: min(920px, calc(100% - 96px)); }
  .site-header { padding: 32px 0 24px; }
  .intro { padding: clamp(42px, 5vh, 76px) 0 clamp(30px, 4vh, 54px); max-width: 790px; }
  .intro h1 { font-size: clamp(58px, 6.8vw, 82px); margin: 16px 0 18px; }
  .intro-copy { max-width: 700px; font-size: 16px; }
  .stats { margin-top: 24px; }
  .game-shell { padding: clamp(30px, 4vw, 48px); }
  .game-area { grid-template-columns: minmax(500px, 1fr) 220px; gap: clamp(34px, 5vw, 72px); }
  .board-wrap { max-width: 650px; width: 100%; }
  .board-tip { font-size: 12px; }
  .aside-panel p { font-size: 21px; }
  footer { padding-bottom: 30px; }
}

@media (orientation: portrait) and (min-width: 761px) and (max-height: 1300px) {
  .site-header { padding-top: 22px; }
  .intro { padding-top: 30px; padding-bottom: 26px; }
  .intro h1 { font-size: clamp(48px, 6vw, 68px); }
  .intro-copy { font-size: 14px; }
  .game-shell { padding: 30px; }
  .game-topline { margin-bottom: 22px; padding-bottom: 17px; }
  .game-area { grid-template-columns: minmax(380px, 1fr) 190px; gap: 30px; }
}

/* El contenido editorial queda en segundo plano para que la partida domine la TV. */
.hint-card { margin: -5px 0 24px; padding: 10px; border: 1px solid rgba(255,250,242,.22); background: rgba(255,250,242,.08); border-radius: 11px; }
.hint-heading { display: flex; justify-content: space-between; color: #a9c6bf; font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; margin: 1px 2px 9px; }
.hint-heading span:first-child { color: #f58f79; }
.hint-card img { display: block; width: 100%; height: 92px; object-fit: cover; border-radius: 6px; opacity: .82; filter: saturate(.85); }
@media (orientation: portrait) and (min-width: 761px) {
  .intro { padding-top: 24px; padding-bottom: 28px; }
  .intro h1 { font-size: clamp(42px, 5.3vw, 64px); margin: 12px 0; }
  .intro-copy { max-width: 620px; font-size: 13px; line-height: 1.45; }
  .stats { margin-top: 17px; }
  .aside-panel p { font-size: 19px; margin-bottom: 18px; }
}
@media (orientation: portrait) and (min-width: 761px) and (max-height: 1300px) {
  .intro { padding-top: 18px; padding-bottom: 20px; }
  .intro h1 { font-size: clamp(38px, 5vw, 58px); }
}
@media (orientation: portrait) and (min-width: 761px) and (min-height: 1500px) {
  .game-shell { min-height: 930px; }
  .board-wrap { max-width: 700px; }
  .hint-card img { height: 116px; }
}

/* En cualquier pantalla vertical, la interacción ocupa la primera vista. */
@media (orientation: portrait) {
  .site-header, main, footer { width: min(920px, calc(100% - 48px)); }
  .site-header { padding: 20px 0 16px; }
  .intro { padding: 18px 0 20px; max-width: none; }
  .intro h1, .intro-copy, .stats { display: none; }
  .intro .eyebrow { font-size: 10px; }
  .game-shell { padding: clamp(20px, 3.5vw, 42px); border-radius: 20px; }
  .game-topline { margin-bottom: 22px; padding-bottom: 16px; }
  .game-topline h2 { font-size: clamp(21px, 3vw, 30px); }
  .game-area { grid-template-columns: 1fr; gap: 24px; }
  .board-wrap { width: min(100%, 760px); max-width: none; margin: auto; }
  .board-tip { margin-top: 12px; }
  .aside-panel { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 230px); column-gap: 28px; align-items: start; }
  .aside-panel .panel-label, .aside-panel > p { grid-column: 1; }
  .aside-panel > p { margin: 8px 0 18px; font-size: clamp(17px, 2.4vw, 23px); }
  .aside-panel .hint-card { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .hint-card img { height: clamp(78px, 11vw, 120px); }
  .aside-panel .progress-line, .aside-panel .progress-meta { grid-column: 1; }
  .aside-panel .aside-rule, .aside-panel .aside-small { display: none; }
}

@media (orientation: portrait) and (max-width: 600px) {
  .site-header, main, footer { width: calc(100% - 28px); }
  .site-header { padding-top: 14px; }
  .header-note { display: none; }
  .game-topline { align-items: center; flex-direction: row; }
  .game-topline h2 { font-size: 19px; }
  .text-button { white-space: nowrap; font-size: 11px; }
  .game-area { gap: 21px; }
  .aside-panel { grid-template-columns: 1fr 145px; gap: 16px; }
  .aside-panel > p { font-size: 16px; }
}

.institutional-mark { display: flex; align-items: center; gap: 10px; color: var(--cream); font: 500 9px/1.25 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.institutional-mark img { width: 48px; height: 48px; object-fit: contain; border-radius: 50%; background: var(--cream); padding: 2px; }
.shuffle-icon, .progress-meta span:last-child, .tip-icon, .hint-heading span:first-child { color: var(--accent); }
.piece.selected { box-shadow: 0 0 0 3px var(--accent), 0 8px 18px rgba(0,0,0,.3); }
.progress-line span { background: var(--accent); }
.stamp { color: var(--accent); border-color: rgba(255,212,0,.8); }
.auto-restart { background: var(--accent); color: var(--ink); }
@media (orientation: portrait) and (max-width: 600px) { .institutional-mark span { display: none; }.institutional-mark img { width: 42px; height: 42px; } }

.auto-restart { display: inline-block; padding: 14px 18px; color: var(--ink); background: var(--accent); border-radius: 8px; font: 700 12px Manrope, sans-serif; }
.auto-restart strong { font-size: 16px; margin-right: 3px; }
main { padding-top: 28px; }
@media (orientation: portrait) { main { padding-top: 20px; } }

/* La TV vertical utiliza todo el lienzo: sin márgenes ni marco exterior. */
@media (orientation: portrait) {
  body { background: var(--blue); }
  main { width: 100%; margin: 0; padding-top: 0; }
  .game-shell { min-height: 100vh; border-radius: 0; box-shadow: none; }
}

/* Lienzo completo en cualquier viewport: también evita márgenes en la previsualización horizontal. */
html, body { width: 100%; min-height: 100%; background: var(--blue); overflow-x: hidden; }
main { width: 100%; max-width: none; margin: 0; padding: 0; }
.game-shell { width: 100%; min-height: 100vh; border-radius: 0; box-shadow: none; }