/* «El tiempo de mañana» (tiempo.js) y «Lo más pulsado esta semana en Atlas» (populares.js) · 25-10-2026. Tokens de site.css (claro y oscuro).
   Los dos bloques nacen con [hidden] y solo se muestran si hay un dato claro: oculto no deja hueco. Plantillas: src/templates/tiempo.mjs. */
.tq[hidden],.pop[hidden]{display:none!important}

/* ---------- el tiempo de mañana ---------- */
.tq{--tq-c:var(--accent);margin-block:0 clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);overflow:clip;animation:tqIn .5s var(--ease,ease) both}
.tq[data-type="wind"]{--tq-c:var(--taronja)}
.tq[data-type="sea"]{--tq-c:var(--verd)}
.tq-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2vw,24px);padding:clamp(14px,2vw,22px) clamp(14px,2.4vw,26px)}
.tq-ic{display:grid;place-items:center;inline-size:52px;block-size:52px;border-radius:50%;background:color-mix(in oklch,var(--tq-c) 16%,var(--surface));color:color-mix(in oklch,var(--tq-c) 70%,var(--ink))}
.tq-eyebrow{font:600 .7rem/1.3 var(--ff-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .3rem}
.tq-h{font:400 clamp(1.3rem,1.05rem + 1vw,1.85rem)/1.12 var(--ff-display,Gloock,serif);letter-spacing:-.01em;margin:0;text-wrap:balance}
.tq-t{margin:.35rem 0 0;color:var(--muted);font-size:.98rem;line-height:1.5;max-inline-size:68ch}
.tq-go{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-block-size:48px;padding:.8rem 1.25rem;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:650;font-size:.95rem;line-height:1.2;text-decoration:none;text-align:center;transition:transform .2s var(--ease,ease)}
.tq-go:hover{transform:translateY(-2px)}.tq-go svg{flex:none;transition:transform .2s}.tq-go:hover svg{transform:translateX(3px)}
.tq-go:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.tq-src{margin:0;padding:.55rem clamp(14px,2.4vw,26px);border-block-start:1px solid var(--line);background:var(--surface-2);font-size:.74rem;line-height:1.4;color:var(--muted)}
.tq-src a{color:inherit}
@keyframes tqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* en Mi plan el bloque va arriba, antes de los pasos */
.pl>.tq{margin-block:0 1.2rem}

@media (max-width:719px){
  .tq-in{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .tq-ic{inline-size:44px;block-size:44px}
  .tq-go{grid-column:1/-1;inline-size:100%}
}

/* ---------- lo más pulsado esta semana ---------- */
.pop{--gut:clamp(16px,4vw,44px)}
.home3 .pop{--gut:clamp(16px,4vw,48px)}
.pop-incat{margin-block:0 clamp(24px,3vw,36px)}
.pop-head{margin-block-end:clamp(16px,2.4vw,26px)}
.pop-eyebrow{font:600 .74rem/1.4 var(--ff-mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--terra-ink,#b4471f);margin:0 0 .5rem}
.pop-head h2{margin:0;font-family:var(--ff-display,Gloock,serif);font-weight:400;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);line-height:1.08;text-wrap:balance}
.pop-lead{margin:.6rem 0 0;color:var(--muted);max-inline-size:68ch;font-size:.98rem}
.pop-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.pop-a{display:flex;flex-direction:column;block-size:100%;color:inherit;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s var(--ease,ease),box-shadow .25s}
.pop-a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.pop-a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pop-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:color-mix(in oklch,var(--cc,var(--accent)) 24%,var(--surface))}
.pop-media img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.pop-rank{position:absolute;inset-inline-start:8px;inset-block-start:8px;display:grid;place-items:center;min-inline-size:28px;block-size:28px;padding-inline:.45rem;border-radius:999px;background:var(--ink);color:var(--bg);font:600 .78rem/1 var(--ff-mono,ui-monospace,monospace)}
.pop-b{display:flex;flex-direction:column;gap:.25rem;padding:.7rem .8rem .85rem;flex:1}
.pop-cat{font:600 .66rem/1.3 var(--ff-mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pop-t{font-size:.98rem;line-height:1.28;font-weight:650;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pop-m{font-size:.84rem;color:var(--muted)}
.pop-p{margin-block-start:auto;padding-block-start:.3rem;font-size:.98rem}

@media (max-width:1099px){.pop-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){
  .pop-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);padding-block-end:4px}
  .pop-list::-webkit-scrollbar{display:none}
  .pop-i{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.tq{animation:none}.tq-go,.tq-go svg,.pop-a{transition:none}}
@media print{.tq,.pop{display:none!important}}