:root { --c1:#0b4f8a; --bg:#f4f6f9; --tx:#1d2733; }
/* iPhone/iPad: al girar a horizontal inflan el texto por su cuenta; esto lo deja del tamaño real */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, 'Segoe UI', sans-serif; background:var(--bg); color:var(--tx); }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
       background:var(--c1); color:#fff; padding:12px 16px; }
.top a { color:#fff; text-decoration:none; margin-right:14px; }
.top .logo { font-size:1.2rem; margin:0; }
main { max-width:1000px; margin:0 auto; padding:16px; }
.bloque { background:#fff; border-radius:10px; padding:16px; margin-bottom:16px; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.bloque h2 { margin:0 0 4px; }
.meta { color:#6b7785; font-size:.85rem; margin:0 0 12px; }
.meta.viejo { color:#b45309; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.card { border:1px solid #e3e8ee; border-radius:8px; padding:10px; }
.card h3 { margin:0 0 4px; font-size:.95rem; }
.card .t { font-size:1.1rem; } .card .max { color:#c2410c; font-weight:700; } .card .min { color:#0369a1; font-weight:700; }
.card small { color:#6b7785; display:block; }
table.cambios { width:100%; border-collapse:collapse; }
table.cambios th, table.cambios td { padding:8px; border-bottom:1px solid #e3e8ee; text-align:right; }
table.cambios th:first-child, table.cambios td:first-child { text-align:left; }
td.mejor { background:#dcfce7; font-weight:700; }
.foot { text-align:center; color:#6b7785; font-size:.8rem; padding:20px 16px; }

/* ---------- Mapa ---------- */
.mapa-wrap { display:grid; grid-template-columns: minmax(0, 640px) 1fr; gap:16px; align-items:start; }
#mapa-svg svg { width:100%; height:auto; display:block; max-height:80vh; }
.depto { vector-effect:non-scaling-stroke; stroke:#fff; stroke-width:1.2; cursor:pointer; transition:filter .15s; }
.depto:hover { filter:brightness(1.08); }
.depto.sel { stroke:#0b4f8a; stroke-width:2.6; }
.et { font:700 11px system-ui, sans-serif; cursor:pointer; paint-order:stroke; stroke:rgba(255,255,255,.85); stroke-width:2.6px; stroke-linejoin:round; fill:#1d2733; }
.et.claro { fill:#fff; stroke:rgba(0,0,0,.45); }
.et .tmin { font-weight:500; font-size:8.5px; }
/* PC: temperaturas del mapa del clima más grandes (solo ese mapa; en el teléfono rige la regla de abajo) */
@media (min-width: 761px) { #mapa-svg .et { font-size:15px; stroke-width:3.6px; } #mapa-svg .et .tmin { font-size:11.5px; font-weight:600; } }
.guia { stroke:#1d2733; stroke-width:.8; }
.punto { stroke:#1d2733; stroke-width:1; cursor:pointer; }
.detalle { border:1px solid #e3e8ee; border-radius:10px; padding:14px; }
.detalle h3 { margin:0 0 6px; }
.detalle .t { font-size:1.3rem; margin:0 0 8px; }
.detalle .max { color:#c2410c; font-weight:700; } .detalle .min { color:#0369a1; font-weight:700; }
.detalle p { margin:4px 0; } .detalle small { color:#6b7785; }
.leyenda { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:.8rem; color:#6b7785; margin-top:8px; }
.leyenda i { display:inline-block; width:22px; height:12px; border-radius:2px; margin-left:6px; }
.leyenda b { font-weight:500; }
.lista { margin-top:12px; } .lista summary { cursor:pointer; font-weight:600; margin-bottom:10px; }
.card { cursor:pointer; } .card.sel { border-color:#0b4f8a; box-shadow:0 0 0 2px rgba(11,79,138,.2); }
@media (max-width: 760px) { .mapa-wrap { grid-template-columns:1fr; } }
/* Teléfono: etiquetas del mapa más grandes (el SVG se achica con el ancho de la pantalla) */
@media (max-width: 760px) { .et { font-size:20px; stroke-width:4.2px; } .et .tmin { font-size:15px; } .punto { stroke-width:1.4; } }

/* ---------- Cotizaciones: selectores ---------- */
.filtros { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; margin:6px 0 10px; }
.tabs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tab { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid #d5dce4; background:#fff; border-radius:999px; cursor:pointer; font:inherit; color:#1d2733; }
.tab:hover { background:#f1f5f9; }
.tab.act { background:#0b4f8a; border-color:#0b4f8a; color:#fff; font-weight:600; }
.bandera { border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.15); display:block; }
.otras, .sel-loc select { font:inherit; padding:7px 10px; border:1px solid #d5dce4; border-radius:8px; background:#fff; }
.sel-loc { display:flex; align-items:center; gap:8px; color:#6b7785; font-size:.9rem; }

/* ---------- Calculadora ---------- */
.calc { margin-top:18px; padding-top:14px; border-top:1px solid #e3e8ee; }
.calc h3 { margin:0 0 10px; }
.calc-fila { display:flex; flex-wrap:nowrap; gap:8px; align-items:stretch; }
.calc-fila label { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:#6b7785; }
.calc-fila input, .calc-fila select { font:inherit; padding:8px 10px; border:1px solid #d5dce4; border-radius:8px; background:#fff; color:#1d2733; min-width:0; }
.calc-fila input { width:92px; }
.calc-fila select { width:100%; }
.calc-grupo { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border-radius:10px; min-width:0; border:1px solid transparent; }
.calc-grupo label { min-width:0; }
.calc-grupo .g-mon { flex:1 1 0; }
.calc-grupo.tengo { flex:1.5 1 0; background:#eef4fb; border-color:#cfe0f3; }
.calc-grupo.quiero { flex:1 1 0; background:#f1f3f6; border-color:#dde2e8; }
.calc-grupo .rot { font-weight:700; letter-spacing:.02em; }
.calc-grupo.tengo .rot { color:#0b4f8a; }
.calc-grupo.quiero .rot { color:#475569; }
#calc-swap { align-self:center; flex:none; font-size:1.2rem; line-height:1; padding:8px 10px; border:1px solid #d5dce4; border-radius:8px; background:#fff; cursor:pointer; }
#calc-swap:hover { background:#f1f5f9; }
.calc-tabla { margin-top:12px; }
.calc-tabla small { font-weight:400; }

/* ---------- Detalle: ahora + próximos días ---------- */
.modo { margin:4px 0 12px; }
.detalle .ahora { font-size:1.15rem; margin:4px 0 10px; }
.detalle .ahora b { font-size:1.6rem; }
.detalle .ahora .ico, table.dias .ico { font-size:1.3rem; margin-right:6px; }
.detalle .ahora small { font-size:.8rem; color:#6b7785; }
table.dias { width:100%; border-collapse:collapse; margin:6px 0 10px; font-size:.92rem; }
table.dias th { text-align:left; font-weight:600; color:#6b7785; font-size:.78rem; padding:4px 6px; }
table.dias td { padding:6px; border-top:1px solid #e3e8ee; }
table.dias td.ico { text-align:center; margin:0; }

/* ---------- Casas de cambio: color propio (el verde queda para "mejor precio") ---------- */
.casa { display:inline-block; padding:3px 10px; border-radius:999px; font-weight:600; font-size:.9rem; border:1px solid transparent; }
.casa-cambios_chaco   { background:#fff1e0; color:#b45309; border-color:#fdd9a8; }
.casa-cambios_alberdi { background:#e6f0fb; color:#0b4f8a; border-color:#bcd6f2; }
.casa-maxicambios     { background:#f1e8fb; color:#6d28d9; border-color:#dac4f5; }

/* ---------- Ícono de lluvia sobre el mapa ---------- */
.lluv { font-size:16px; cursor:pointer; paint-order:normal; }
.leyenda-lluvia { margin-left:14px; color:#1d2733; }
@media (max-width: 760px) { .leyenda-lluvia { flex-basis:100%; margin:6px 0 0; } }
@media (max-width: 760px) { .lluv { font-size:18px; } }

/* ---------- Clima y cotizaciones: en paralelo en pantalla ancha, uno tras otro en celular/tablet ---------- */
.dos-col { margin-bottom:16px; }
.dos-col > .bloque { margin-bottom:16px; }
@media (min-width: 1100px) {
  main { max-width:1600px; }
  .dos-col { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:16px; align-items:start; }
  .dos-col .col-izq, .dos-col .col-der { display:flex; flex-direction:column; gap:16px; min-width:0; }
  .col-izq > .bloque, .col-der > .bloque { margin-bottom:0; }
  .dos-col .mapa-wrap { grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr); }
}

/* La calculadora en una sola línea; en pantallas muy angostas se acomoda en dos */
@media (max-width: 560px) {
  .calc-fila { flex-wrap:wrap; }
  .calc-grupo.tengo, .calc-grupo.quiero { flex:1 1 100%; }
  #calc-swap { margin:0 auto; }
}

/* ---------- Selector de monedas con buscador ---------- */
.combo { position:relative; display:inline-block; min-width:0; }
.calc-fila .combo { display:block; width:100%; }
.combo-oculto { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.combo-btn { font:inherit; width:100%; text-align:left; padding:7px 28px 7px 10px; border:1px solid #d5dce4; border-radius:8px; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23475569'/></svg>") no-repeat right 10px center; color:#1d2733; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.otras-wrap .combo-btn, .tabs .combo-btn { min-width:150px; border-radius:999px; }
.combo-panel { position:absolute; z-index:50; top:calc(100% + 4px); left:0; min-width:240px; width:max-content; max-width:min(320px, 90vw); background:#fff; border:1px solid #d5dce4; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:8px; }
.combo-q { font:inherit; width:100%; padding:8px 10px; border:1px solid #d5dce4; border-radius:8px; margin-bottom:6px; }
.combo-lista { list-style:none; margin:0; padding:0; max-height:240px; overflow:auto; }
.combo-lista li { padding:7px 10px; border-radius:6px; cursor:pointer; font-size:.92rem; }
.combo-lista li:hover, .combo-lista li.act { background:#e6f0fb; }
.combo-lista li.cur { font-weight:700; color:#0b4f8a; }
.combo-lista li.vacio { color:#6b7785; cursor:default; }
.combo-lista li.vacio:hover { background:none; }
.calc-grupo.quiero .combo-panel { left:auto; right:0; }
@media (max-width: 560px) { .calc-grupo .combo-panel { left:0; right:auto; } }

/* Casas de cambio: etiqueta con link al sitio */
a.casa { text-decoration:none; cursor:pointer; transition:filter .15s, box-shadow .15s; }
a.casa:hover { filter:brightness(.97); box-shadow:0 1px 4px rgba(0,0,0,.18); }
a.casa:focus-visible { outline:2px solid #0b4f8a; outline-offset:2px; }
.casa .ext { font-size:.78em; opacity:.7; }

/* ---------- Columna derecha (cotizaciones + cripto) y criptomonedas ---------- */
.col-der { display:contents; }
table.cripto td:not(:first-child), table.cripto th:not(:first-child) { text-align:right; white-space:nowrap; }
table.cripto td small { color:#6b7785; margin-left:4px; }
.cripto-sim { font-weight:700; }
.cripto-ico { width:22px; height:22px; vertical-align:-6px; margin-right:7px; flex:none; }
.sube { color:#15803d; font-weight:600; }
.baja { color:#b91c1c; font-weight:600; }
@media (max-width: 560px) { table.cripto td small { display:none; } }
table.cripto td:first-child { white-space:nowrap; }
table.cripto .gs-m { display:none; }
@media (max-width: 560px) {
  table.cripto .gs { display:none; }
  table.cripto .gs-m { display:block; margin:0; color:#6b7785; font-size:.78rem; }
}

/* Criptomonedas: cada moneda es un link a su ficha */
a.cripto-link { color:inherit; text-decoration:none; }
a.cripto-link:hover .cripto-sim { color:#0b4f8a; text-decoration:underline; }
a.cripto-link:focus-visible { outline:2px solid #0b4f8a; outline-offset:2px; border-radius:4px; }
a.cripto-link .ext { font-size:.78em; opacity:.6; color:#475569; }

/* ---------- Columna izquierda y juego "¿Dónde queda?" ---------- */
.col-izq { display:contents; }
/* Celular y tablet: uno tras otro y el juego al final (clima, cotizaciones, cripto, juego) */
@media (max-width: 1099px) {
  .dos-col { display:flex; flex-direction:column; gap:16px; }
  .dos-col .bloque { margin-bottom:0; }
  #clima { order:1; } #cambios { order:2; } #cripto { order:3; } #juego { order:4; }
}
.j-centro { text-align:center; padding:8px 4px 4px; }
.j-btn { font:inherit; font-weight:700; padding:10px 26px; border:0; border-radius:999px; background:#0b4f8a; color:#fff; cursor:pointer; margin:6px 0 10px; }
.j-btn:hover { background:#0a4276; }
.j-barra { display:flex; justify-content:space-between; gap:8px; color:#6b7785; font-size:.9rem; margin-bottom:4px; }
.j-pregunta { font-size:1.35rem; margin:4px 0 8px; text-align:center; }
.j-pregunta b { color:#0b4f8a; }
.j-mapa svg { width:100%; height:auto; display:block; max-height:70vh; margin:0 auto; }
.j-depto { fill:#dbe4ee; stroke:#fff; stroke-width:1.2; vector-effect:non-scaling-stroke; cursor:pointer; transition:fill .12s; }
.j-depto:hover { fill:#bcd2ea; }
.j-punto { fill:#94a3b8; stroke:#fff; stroke-width:1.5; cursor:pointer; }
.j-punto:hover { fill:#64748b; }
.j-depto.j-ok, .j-punto.j-ok { fill:#4ade80; }
.j-depto.j-mal, .j-punto.j-mal { fill:#f87171; }
.j-ok, .j-mal { pointer-events:none; }
.j-msg { min-height:2.6em; text-align:center; margin:8px 0 0; font-weight:600; }
.j-msg.ok { color:#15803d; }
.j-msg.mal { color:#b91c1c; }
.j-final { font-size:2.2rem; margin:6px 0; }
.j-final b { color:#0b4f8a; }

/* ---------- Cada sección con su tono (sobrio: fondo apenas teñido y una franja fina arriba) ---------- */
.bloque { background:var(--tint, #fff); border-top:3px solid var(--acc, transparent); }
#clima   { --tint:#f3f7fb; --acc:#5b86b0; }   /* azul grisáceo */
#cambios { --tint:#f8f6f1; --acc:#b08d57; }   /* arena */
#cripto  { --tint:#f5f4f9; --acc:#8479a8; }   /* lavanda grisáceo */
#juego   { --tint:#f9f4f4; --acc:#b07a7a; }   /* rosa viejo */
#rios    { --tint:#f2f7f6; --acc:#5f9a92; }   /* verde salvia */
.detalle, .card { background:#fff; }
table.cripto { font-size:.92rem; }
table.cripto th, table.cripto td { padding:8px 5px; }
/* Precio en dólares: protagonista de la fila */
table.cripto .cr-usd { font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
table.cripto .cr-usd b { font-size:1.1rem; font-weight:700; color:#1e2a3a; }
table.cripto .cr-cur { font-size:.7rem; font-weight:600; color:#8a94a3; margin-right:1px; }
table.cripto td.gs { color:#6b7785; font-size:.86rem; }
@media (max-width: 560px) { table.cripto .cr-usd b { font-size:1.1rem; } }

/* ---------- Menú superior moderno ---------- */
html { scroll-behavior:smooth; }
section[id] { scroll-margin-top:76px; }
.top { padding:10px 20px; box-shadow:0 2px 14px rgba(8,40,72,.22); }
.top .logo { font-size:1.25rem; font-weight:500; letter-spacing:.2px; text-decoration:none; margin:0; }
.top .logo b { font-weight:800; color:#ffd166; }
.top nav { display:flex; align-items:center; gap:4px; }
.top nav a { margin:0; padding:7px 14px; border-radius:999px; font-size:.95rem; font-weight:500; color:rgba(255,255,255,.86); transition:background .15s, color .15s; white-space:nowrap; }
.top nav a:hover { background:rgba(255,255,255,.15); color:#fff; }
.top nav a.act { background:#fff; color:#0b4f8a; font-weight:700; }
.top nav a[href^="/paraguay"] { border:1px solid rgba(255,255,255,.4); margin-left:6px; }
.top nav a[href^="/paraguay"]::after { content:" ↗"; font-size:.8em; opacity:.8; }
@media (min-width: 760px) { .top { position:sticky; top:0; z-index:100; } }
@media (max-width: 759px) {
  .top { padding:10px 12px; }
  .top .logo { font-size:1.1rem; }
  .top nav { width:100%; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .top nav::-webkit-scrollbar { display:none; }
  .top nav a { padding:6px 12px; font-size:.88rem; }
}

/* ---------- Noticias ---------- */
/* (los estilos de cada titular los trae assets/js/noticias.js) */

/* ---------- Mejores cotizaciones: pulso suave ---------- */
@keyframes pulso-mejor {
  0%, 100% { background-color: rgba(21,128,61,.10); box-shadow: none; }
  50%      { background-color: rgba(21,128,61,.30); box-shadow: 0 0 0 2px rgba(21,128,61,.22); }
}
table.cambios td.mejor { border-radius:4px; animation:pulso-mejor 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  table.cambios td.mejor { animation:none; background-color:rgba(21,128,61,.14); }
}

/* ---------- Clima más atractivo: cielo, panel de resumen y mapa con relieve ---------- */
#clima { background:linear-gradient(180deg,#dcebf8 0,#eef5fb 190px,#f3f7fb 340px); position:relative; overflow:hidden; }
#clima h2 { font-size:1.55rem; }
#clima .mapa-wrap { background:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%); border-radius:16px; }
#mapa-svg { position:relative; }
#mapa-svg svg.sombra { position:absolute; left:0; top:0; width:100%; height:100%; max-height:none; filter:drop-shadow(0 8px 12px rgba(30,70,110,.22)); pointer-events:none; will-change:transform; }
#mapa-svg svg:not(.sombra) { position:relative; }
#mapa-svg .depto { transition:filter .15s, opacity .15s; cursor:pointer; }
#mapa-svg .depto:hover { filter:brightness(1.07) saturate(1.15); }
.detalle { box-shadow:0 6px 22px rgba(30,70,110,.12); border:0; border-radius:16px; padding:16px 18px; }
.res-hero { display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,#1c6db3,#4aa3df); color:#fff; border-radius:14px; padding:14px 16px; }
.res-ico { font-size:3.2rem; line-height:1; flex:none; min-width:64px; text-align:center; }
.res-t { flex:1; display:flex; flex-direction:column; line-height:1.1; }
.res-t small { opacity:.9; font-size:.85rem; }
.res-t strong { font-size:3rem; font-weight:800; letter-spacing:-1px; }
.res-t span { font-size:.9rem; opacity:.95; }
.res-mm { display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:1.05rem; }
.res-mm .max, .res-mm .min { color:#fff; }
.res-chips { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px; }
.res-chips span { background:#eef4fa; border-radius:999px; padding:4px 12px; font-size:.88rem; font-weight:600; color:#25405c; }
.res-lista { margin-top:12px; }
.res-lista h4 { margin:0 0 6px; font-size:.95rem; color:#25405c; }
.res-lista ul { list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.res-lista li { display:flex; justify-content:space-between; align-items:center; padding:7px 12px; border-radius:10px; cursor:pointer; font-size:.95rem; border-left:4px solid var(--c, #5b86b0); background:#f6f9fc; transition:transform .12s, background .12s; }
.res-lista li:hover { transform:translateX(3px); background:#e9f1f9; }
.res-lista.cal { --c:#f08a24; } .res-lista.fre { --c:#4a9bd0; } .res-lista.llu { --c:#3b6fb5; }
.res-lista li b { font-size:1.05rem; }
.res-tip { margin:14px 0 0; color:#5b6b7b; font-size:.88rem; }
.res-volver { font:inherit; font-size:.85rem; border:0; background:#eef4fa; color:#0b4f8a; border-radius:999px; padding:5px 12px; cursor:pointer; margin-bottom:8px; font-weight:600; }
.res-volver:hover { background:#dce9f6; }
@media (min-width:1100px) { .dos-col .mapa-wrap { grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); } }
.detalle .res-t small { color:rgba(255,255,255,.92); font-size:.9rem; font-weight:600; }
.detalle .res-hero .max, .detalle .res-hero .min { color:#fff; }


/* ---------- Portada en compu ancha: 3 columnas arriba (clima | cotizaciones y cripto | noticias y TV) y juegos abajo ---------- */
.col-noti, .fila-2 { display:contents; }
#noti-corto, #tv-corto { --tint:#f6f6f4; --acc:#8a8576; }
#tv-corto { --tint:#f4f2fa; --acc:#6d4fb3; }
.noti-mas { display:block; margin-top:12px; text-align:center; font-weight:700; font-size:.92rem; color:#0b4f8a; text-decoration:none; padding:9px; border-radius:10px; background:#eef4fa; }
.noti-mas:hover { background:#dce9f6; }
#noti-corto-lista, #tv-corto-lista { list-style:none; margin:0; padding:0; }
#noti-corto-lista li { padding:10px 0 10px 10px; border-top:1px solid #e5e7eb; border-left:3px solid var(--mc,#9ca3af); }
#noti-corto-lista li:first-child { border-top:0; }
#noti-corto-lista .n-fila { display:flex; gap:10px; align-items:flex-start; }
#noti-corto-lista .n-txt { flex:1; min-width:0; }
#noti-corto-lista .n-th { width:68px; height:48px; border-radius:6px; object-fit:cover; flex:none; background:#e5e7eb; }
#noti-corto-lista a { color:inherit; text-decoration:none; font-weight:600; line-height:1.35; display:block; font-size:.95rem; }
#noti-corto-lista a:hover { text-decoration:underline; }
#noti-corto-lista .n-med { display:flex; align-items:center; gap:6px; margin-top:3px; color:#6b7785; font-size:.82em; }
#tv-corto .meta { margin:0 0 8px; }
#tv-corto-lista li { border-top:1px solid #e5e7eb; }
#tv-corto-lista li:first-child { border-top:0; }
#tv-corto-lista a { display:flex; align-items:center; gap:12px; padding:9px 2px; color:inherit; text-decoration:none; }
#tv-corto-lista a:hover strong { text-decoration:underline; }
#tv-corto-lista .tv-sig { flex:none; width:44px; height:34px; border-radius:9px; background:var(--c); color:#fff; font:800 .78rem/34px system-ui,sans-serif; text-align:center; }
#tv-corto-lista span { display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.25; }
#tv-corto-lista small { color:#6b7785; font-size:.8rem; }
#tv-corto-lista i { font-style:normal; color:var(--c); font-weight:700; }
@media (min-width:1100px) and (max-width:1249px) {
  .dos-col { align-items:stretch; }
  .col-izq > .bloque:last-child, .col-der > .bloque:last-child { flex:1; }
  #noti-corto, #tv-corto { grid-column:1 / -1; margin-bottom:0; }
  #noti-corto-lista { columns:2; column-gap:32px; }
  #noti-corto-lista li { break-inside:avoid; }
  #tv-corto-lista { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
  #tv-corto-lista li { border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
  #tv-corto-lista a { flex-direction:column; text-align:center; padding:10px 6px; gap:6px; }
  #tv-corto-lista i { display:none; }
}
@media (min-width:1250px) {
  main { max-width:1700px; }
  .dos-col { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,.9fr); align-items:stretch; }
  .dos-col .col-noti { display:flex; flex-direction:column; gap:16px; min-width:0; }
  .col-noti > .bloque { margin-bottom:0; }
  /* cada columna termina a la misma altura: el último bloque de cada una se estira */
  .col-izq > .bloque:last-child, .col-der > .bloque:last-child, .col-noti > .bloque:last-child { flex:1; }
  /* con 3 columnas el clima queda más angosto: el widget de Asunción arriba y el mapa abajo, a todo el ancho */
  .dos-col .mapa-wrap { grid-template-columns:minmax(0,1fr); }
  .dos-col .mapa-wrap #detalle.modo-res { margin-top:12px; padding:0; background:transparent; box-shadow:none; }
  .dos-col .mapa-wrap #detalle.modo-res .res-hero { margin:0; }
  .dos-col #mapa-svg { max-width:600px; margin:0 auto; width:100%; }
}

/* Segunda fila (desde 1100 px): el juego y Herramientas lado a lado, y Juegos Top a lo ancho abajo */
@media (min-width:1100px) {
  .fila-2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; grid-column:1 / -1; align-items:stretch; }
  .fila-2 > .bloque { margin-bottom:0; }
  .fila-2 > #juego { grid-column:1; grid-row:1; }
  .fila-2 > #recursos { grid-column:2; grid-row:1; }
  .fila-2 > #juegos { grid-column:1 / -1; grid-row:2; }
  #juegos .tarjetas { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---------- Menú del sitio (una sola cabecera para la portada y las secciones: includes/cabecera_sitio.php) ---------- */
/* Menú del celular y la tablet (hasta 1079 px, incluido el celular acostado): botón que despliega las secciones.
   Con 11 opciones la fila de enlaces necesita unos 1070 px; con menos ancho se salía de la pantalla y ensanchaba toda la página. */
.menu-btn { display:none; }
@media (max-width: 1079px) {
  .top { position:sticky; top:0; z-index:100; flex-wrap:wrap; }
  .menu-btn { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:0; border-radius:10px; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; }
  .menu-btn:active { background:rgba(255,255,255,.26); }
  .menu-btn .i-x { display:none; }
  .top.abierto .menu-btn .i-x { display:block; }
  .top.abierto .menu-btn .i-m { display:none; }
  .top nav { display:none; width:100%; flex-direction:column; align-items:stretch; gap:2px; overflow:visible; padding:10px 0 6px; }
  .top.abierto nav { display:flex; }
  .top nav a { margin:0; padding:13px 14px; font-size:1.02rem; border-radius:10px; }
  .top nav a[href^="/paraguay"], .top nav a[href*="zonas.maparaguay"] { margin:8px 0 0; text-align:center; }
  .top.abierto nav { max-height:calc(100vh - 78px); max-height:calc(100dvh - 78px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
}
/* Celular acostado (poca altura): las opciones en 3 columnas para que entren sin desplazar mucho */
@media (max-width: 1079px) and (max-height: 520px) {
  .top.abierto nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .top nav a { padding:9px 10px; font-size:.95rem; text-align:center; }
  .top nav a[href^="/paraguay"], .top nav a[href*="zonas.maparaguay"] { margin:0; }
}
.top nav a[href*="zonas.maparaguay"] { border:1px solid rgba(255,255,255,.4); } @media (min-width:760px) { .top nav a[href*="zonas.maparaguay"] { margin-left:6px; } } .top nav a[href*="zonas.maparaguay"]::after { content:" ↗"; font-size:.8em; opacity:.8; }

/* Menú firme: no se mueve al cambiar de página */
html:has(header.top) { scrollbar-gutter: stable; }                 /* reserva el lugar de la barra de scroll aunque la página sea corta */
@supports not (scrollbar-gutter: stable) { html:has(header.top) { overflow-y: scroll; } }
.top nav a::before { content: attr(data-t); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; pointer-events: none; }   /* reserva el ancho de la negrita del ítem activo */