/* ============================================================
   QIOSK v2 — modo lectura con velo, barra de píldoras y /mercados.
   Referencias del fundador (21-09-2026). Abierto a todos con
   DISENO_V2=1 el 21-09-2026.
   Plano: tinta y papel, bordes finos, nada de sombras suaves.
   El velo difuminado del pie lo pidió el fundador expresamente.
   ============================================================ */

/* ---------- Transición entre páginas: se desvanece con desenfoque ---------- */
@view-transition { navigation: auto; }

::view-transition-old(root){ animation:qv-salir .28s cubic-bezier(.4,0,1,1) both }
::view-transition-new(root){ animation:qv-entrar .42s cubic-bezier(0,0,.2,1) .06s both }
@keyframes qv-salir { to { opacity:0; filter:blur(8px); transform:scale(.985) } }
@keyframes qv-entrar { from { opacity:0; filter:blur(10px); transform:translateY(6px) } }

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
}

/* ============================================================
   MODO LECTURA
   ============================================================ */

/* Velo: el texto se desenfoca progresivamente al llegar a la barra.
   Capas con desenfoque creciente, cada una visible solo en su franja. */
.v2 .velo{
  position:fixed; left:0; right:0; bottom:0; height:190px;
  pointer-events:none; z-index:39;
  transition:opacity .35s ease, transform .35s ease;
}
.v2 .velo i{
  position:absolute; inset:0; display:block;
  -webkit-backdrop-filter:blur(var(--b)); backdrop-filter:blur(var(--b));
  -webkit-mask-image:linear-gradient(to bottom, transparent var(--d), #000 var(--h));
          mask-image:linear-gradient(to bottom, transparent var(--d), #000 var(--h));
}
.v2 .velo i:nth-child(1){ --b:1px;  --d:0%;  --h:30% }
.v2 .velo i:nth-child(2){ --b:2px;  --d:20%; --h:50% }
.v2 .velo i:nth-child(3){ --b:4px;  --d:40%; --h:70% }
.v2 .velo i:nth-child(4){ --b:8px;  --d:60%; --h:90% }
/* Debajo de la barra el papel tapa del todo: la barra se lee siempre */
.v2 .velo::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:64px;
  background:var(--papel);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 70%);
          mask-image:linear-gradient(to bottom, transparent, #000 70%);
}

/* Barra de píldoras */
.v2 .lector{ display:none }
.lector2{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--e3) + env(safe-area-inset-bottom,0px));
  z-index:40; display:flex; flex-direction:column; align-items:center; gap:var(--e2);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.lector2 .fila{ display:flex; align-items:center; gap:var(--e2) }
.lector2 .pildora,
.lector2 .redondo{
  height:48px; border-radius:999px; background:var(--tinta); color:var(--papel);
  display:flex; align-items:center; border:0;
}
.lector2 .pildora{
  gap:var(--e2); padding:0 var(--e4) 0 var(--e3);
  font-family:'Space Mono',monospace; font-size:.8rem; letter-spacing:.02em; white-space:nowrap;
}
.lector2 .redondo{ width:48px; justify-content:center; cursor:pointer; padding:0 }
.lector2 svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto }

/* Cápsula de tinta con la píldora clara de Compartir y el botón de guardar */
.lector2 .capsula{
  height:48px; border-radius:999px; background:var(--tinta); display:flex; align-items:center;
  gap:4px; padding:4px;
}
/* Compartir va en tinta como lo demás: la píldora clara solo aparece al
   pasar por encima o al pulsar, para que no parezca siempre seleccionado. */
.lector2 .compartir{
  height:40px; border:0; border-radius:999px; cursor:pointer; background:transparent; color:var(--papel);
  display:flex; align-items:center; gap:8px; padding:0 var(--e4) 0 var(--e3);
  font:500 .92rem/1 Inter,system-ui,sans-serif;
  transition:background-color .2s ease, color .2s ease, transform .2s cubic-bezier(.3,1.5,.5,1);
}
@media (hover:hover){
  .lector2 .compartir:hover{ background:var(--papel); color:var(--tinta) }
}
.lector2 .compartir:active{ background:var(--papel); color:var(--tinta); transform:scale(.95) }
.lector2 .guardar{
  width:40px; height:40px; border:0; border-radius:50%; cursor:pointer; padding:0;
  background:none; color:var(--papel); display:flex; align-items:center; justify-content:center;
}
.lector2 .guardar[aria-pressed="true"] svg{ fill:currentColor }
.lector2 .guardar:active svg{ transform:scale(.85) }
.lector2 .guardar svg{ transition:transform .2s ease, fill .2s ease }

/* Etiqueta flotante encima de cada control (solo con ratón) */
@media (hover:hover){
  .lector2 [data-ayuda]{ position:relative }
  .lector2 [data-ayuda]::after{
    content:attr(data-ayuda); position:absolute; left:50%; bottom:calc(100% + 12px);
    transform:translate(-50%,4px); opacity:0; pointer-events:none; white-space:nowrap;
    background:var(--superficie); color:var(--tinta); border:1px solid var(--linea);
    border-radius:10px; padding:7px 12px; font:500 .78rem/1 Inter,system-ui,sans-serif;
    transition:opacity .18s ease, transform .18s ease;
  }
  .lector2 [data-ayuda]:hover::after,
  .lector2 [data-ayuda]:focus-visible::after{ opacity:1; transform:translate(-50%,0); transition-delay:.25s }
}

/* Fuentes: panel pequeño encima de la barra. Sutil y sin enlaces fuera:
   informa de dónde sale la pieza sin mandar al lector a otra web (los
   enlaces de atribución siguen al pie del artículo). */
.hoja-fuentes{
  position:fixed; inset:auto 0 calc(var(--e3) + 96px + env(safe-area-inset-bottom,0px)) 0; margin:0 auto;
  width:min(340px, calc(100vw - 32px)); max-height:46vh; overflow:auto;
  border:1px solid var(--linea); border-radius:16px; background:var(--superficie); color:var(--tinta);
  padding:12px 14px 10px; z-index:45;
}
.hoja-fuentes[open]{ animation:hoja-aparece .28s cubic-bezier(.2,.8,.2,1) both }
@keyframes hoja-aparece{ from{ opacity:0; filter:blur(6px); transform:translateY(8px) scale(.98) } }
.hoja-fuentes .cabeza{ margin:0 0 6px; font:500 .72rem/1.4 Inter,system-ui,sans-serif; color:var(--gris) }
.hoja-fuentes ol{ list-style:none; margin:0; padding:0 }
.hoja-fuentes li{ display:grid; grid-template-columns:1fr auto; gap:1px 8px; padding:7px 0; border-top:1px solid var(--linea) }
.hoja-fuentes .medio{ font:700 .64rem/1.5 'Space Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta) }
.hoja-fuentes .fecha{ font-size:.66rem; color:var(--gris); text-align:right }
.hoja-fuentes .titulo{ grid-column:1 / -1; font-size:.76rem; line-height:1.4; color:var(--tinta-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hoja-fuentes .pie{ display:inline-block; margin-top:6px; font-size:.7rem; color:var(--gris); text-decoration:none }
.hoja-fuentes .pie:hover{ color:var(--tinta) }
@media (prefers-reduced-motion:reduce){ .hoja-fuentes[open]{ animation:none } }

/* Aviso breve ("Enlace copiado") encima de la barra */
.lector2 .aviso-barra{
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translate(-50%,6px);
  background:var(--tinta); color:var(--papel); border-radius:999px; padding:8px 14px;
  font:500 .8rem/1 Inter,system-ui,sans-serif; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.lector2 .aviso-barra.visible{ opacity:1; transform:translate(-50%,0) }

.lector2 .plegar{
  width:44px; height:24px; background:none; border:0; cursor:pointer; color:var(--tinta);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.lector2 .plegar svg{ transition:transform .4s ease }
.lector2 button:focus-visible{ outline:2px solid var(--quiosco); outline-offset:2px }

/* Plegada: la fila baja y solo queda el chevron, girado */
.lector2.plegada .fila{ transform:translateY(calc(100% + 40px)); opacity:0; pointer-events:none }
.lector2 .fila{ transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .25s ease }
.lector2.plegada .plegar svg{ transform:rotate(180deg) }
.v2.barra-plegada .velo{ opacity:.35 }

@media(max-width:700px){
  .v2 .velo{ height:170px }
  .lector2 .pildora{ padding:0 var(--e3) 0 var(--e2); font-size:.74rem }
  .lector2 .pildora,.lector2 .redondo,.lector2 .capsula{ height:44px }
  .lector2 .redondo{ width:44px }
  .lector2 .compartir,.lector2 .guardar{ height:36px }
  .lector2 .guardar{ width:36px }
}
@media(max-width:420px){
  .lector2 .solo-ancho{ display:none }
  .lector2 .fila{ gap:6px }
  .lector2 .pildora{ gap:6px; padding:0 12px 0 10px; font-size:.7rem }
  .lector2 svg{ width:18px; height:18px }
  .lector2 .pildora,.lector2 .redondo,.lector2 .capsula{ height:42px }
  .lector2 .redondo{ width:42px }
  .lector2 .capsula{ padding:3px }
  .lector2 .compartir{ padding:0 14px 0 12px; font-size:.86rem }
}
@media (prefers-reduced-motion:reduce){
  .lector2,.lector2 .fila,.v2 .velo{ transition:none }
}

/* ============================================================
   /mercados
   ============================================================ */
.mercados2{ max-width:520px; margin:0 auto; padding:var(--e6) var(--e4) var(--e9) }
.mercados2 .titulo{ display:flex; align-items:center; justify-content:space-between; gap:var(--e3) }
.mercados2 h1{ font-size:clamp(1.7rem,6vw,2.1rem); letter-spacing:-.035em; font-weight:500; margin:0 }
.mercados2 .hora{ font-family:'Space Mono',monospace; font-size:.68rem; color:var(--gris);
  letter-spacing:.04em; white-space:nowrap }

/* Tres cifras separadas por líneas finas */
.mercados2 .resumen{ display:grid; grid-template-columns:repeat(3,1fr); margin:var(--e5) 0 }
.mercados2 .resumen div{ padding:0 var(--e3); border-left:1px solid var(--linea) }
.mercados2 .resumen div:first-child{ padding-left:0; border-left:0 }
.mercados2 .resumen b{ display:block; font-size:1.35rem; font-weight:500; letter-spacing:-.02em }
.mercados2 .resumen span{ font-size:.72rem; color:var(--gris) }

/* Pestañas: control segmentado con pulgar que se desliza */
.mercados2 .pestanas2{
  position:relative; display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--linea); border-radius:12px; padding:3px; margin-bottom:var(--e5);
}
.mercados2 .pestanas2 button{
  position:relative; z-index:1; height:36px; border:0; background:none; cursor:pointer;
  font:500 .86rem/1 Inter,system-ui,sans-serif; color:var(--tinta-2); border-radius:9px;
  transition:color .3s ease;
}
.mercados2 .pestanas2 button[aria-selected="true"]{ color:var(--tinta) }
.mercados2 .pestanas2 .pulgar{
  position:absolute; z-index:0; top:3px; bottom:3px; left:3px; border-radius:9px;
  background:var(--superficie); border:1px solid var(--linea);
  width:calc((100% - 6px) / 5); transform:translateX(calc(var(--i,0) * 100%));
  transition:transform .45s cubic-bezier(.3,1.25,.5,1);
}

/* Tarjetas apiladas: cada una monta sobre la anterior, con un giro mínimo */
.mercados2 .pila{ display:flex; flex-direction:column; padding-top:calc(var(--e2) + 30px) }
.mercados2 .valor{
  position:relative; background:var(--superficie); border:1px solid var(--linea);
  border-radius:18px; padding:var(--e4) var(--e4) calc(var(--e5) + 28px);
  margin-top:-30px; transform:rotate(var(--giro,0deg));
  transition:transform .35s cubic-bezier(.2,.8,.2,1), margin .35s ease;
}
.mercados2 .valor:nth-child(3n+1){ --giro:-1.1deg }
.mercados2 .valor:nth-child(3n+2){ --giro:.9deg }
.mercados2 .valor:nth-child(3n){ --giro:-.3deg }
.mercados2 .valor:hover,
.mercados2 .valor:focus-within{ transform:rotate(0) translateY(-6px); z-index:2 }
.mercados2 .valor .arriba{ display:flex; align-items:center; gap:var(--e3) }
.mercados2 .marca{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  background:var(--tinta); color:var(--papel);
  display:flex; align-items:center; justify-content:center;
  font:700 .62rem/1 'Space Mono',monospace; letter-spacing:-.02em;
}
.mercados2 .nombre{ font-size:1.25rem; font-weight:500; letter-spacing:-.02em; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mercados2 .precio{ font-size:1.3rem; font-weight:500; letter-spacing:-.02em; white-space:nowrap }
.mercados2 .precio small{ font-size:.7rem; color:var(--gris); margin-left:2px }
.mercados2 .abajo{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:var(--e3);
  margin-top:var(--e5); align-items:end }
.mercados2 .abajo span{ display:block; font-size:.64rem; color:var(--gris) }
.mercados2 .abajo b{ display:block; font-size:.8rem; font-weight:500; margin-top:2px }
.mercados2 .sube{ color:var(--quiosco) } .mercados2 .baja{ color:var(--baja) }
.mercados2 .estrella{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--linea); background:none;
  cursor:pointer; color:var(--tinta); display:flex; align-items:center; justify-content:center; padding:0;
}
.mercados2 .estrella svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linejoin:round; transition:fill .2s ease, transform .3s cubic-bezier(.3,1.6,.5,1) }
.mercados2 .estrella[aria-pressed="true"]{ background:var(--tinta); color:var(--papel); border-color:var(--tinta) }
.mercados2 .estrella[aria-pressed="true"] svg{ fill:currentColor; transform:scale(1.08) }
.mercados2 .estrella:active svg{ transform:scale(.8) }
.mercados2 .vacio{ text-align:center; color:var(--gris); padding:var(--e7) var(--e4);
  border:1px dashed var(--linea); border-radius:18px; font-size:.92rem; line-height:1.6 }
.mercados2 .aviso{ margin-top:var(--e6); font-size:.74rem; color:var(--gris); line-height:1.6 }
.mercados2 [hidden]{ display:none !important }

/* ============================================================
   /buscar — bloques redondeados sobre tinta
   ============================================================ */
body.p-buscar{ background:var(--tinta) }
.buscador{ max-width:560px; margin:0 auto; padding:8px 8px var(--e9); display:flex; flex-direction:column; gap:6px }
.bt-bloque{ background:var(--papel); border-radius:26px; padding:var(--e5) var(--e4) }
.bt-cabeza h1{ font-size:clamp(1.9rem,8vw,2.4rem); font-weight:700; letter-spacing:-.045em; margin:0 0 var(--e4); line-height:1 }
.bt-form{ display:flex; gap:8px }
.bt-campo{ flex:1; display:flex; align-items:center; gap:10px; background:var(--bg-alt); border-radius:14px; padding:0 14px; height:52px }
.bt-campo svg,.bt-filtro svg,.bt-guardar svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto }
.bt-campo svg{ color:var(--gris) }
.bt-campo input{ flex:1; border:0; background:none; padding:0; height:100%; font-size:1.02rem; color:var(--tinta); min-width:0 }
.bt-campo input:focus{ outline:none }
.bt-campo:focus-within{ box-shadow:0 0 0 2px var(--quiosco) inset }
.bt-filtro{ width:52px; height:52px; border-radius:14px; border:0; background:var(--bg-alt); color:var(--tinta); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0 }
.bt-filtro[aria-expanded="true"]{ background:var(--tinta); color:var(--papel) }
.bt-filtros{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap }
.bt-filtros[hidden]{ display:none }
.bt-filtros button{ border:1px solid var(--linea); background:none; border-radius:999px; padding:7px 14px; cursor:pointer;
  font:500 .82rem/1 Inter,system-ui,sans-serif; color:var(--tinta-2) }
.bt-filtros button[aria-pressed="true"]{ background:var(--tinta); color:var(--papel); border-color:var(--tinta) }

/* Carrusel de secciones con arte tramado */
.bt-carrusel{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:var(--e4); scrollbar-width:none }
.bt-carrusel::-webkit-scrollbar{ display:none }
.bt-seccion{ position:relative; flex:0 0 42%; max-width:180px; aspect-ratio:1/1; border-radius:18px; overflow:hidden;
  scroll-snap-align:start; text-decoration:none; display:flex; align-items:flex-end; padding:12px;
  transition:transform .2s cubic-bezier(.3,1.5,.5,1) }
.bt-seccion .bt-trama{ position:absolute; top:0; left:0; right:0; bottom:40px; width:100%; height:calc(100% - 40px); opacity:.9 }
.bt-seccion span{ position:relative; font-weight:600; font-size:.98rem; letter-spacing:-.01em; line-height:1.15 }
.bt-seccion.tono-0{ background:var(--quiosco-suave); color:var(--quiosco) }
.bt-seccion.tono-1{ background:var(--bg-alt); color:var(--tinta) }
.bt-seccion.tono-2{ background:var(--tinta); color:var(--papel) }
.bt-seccion:active{ transform:scale(.97) }

/* Títulos de bloque */
.bt-t{ font-size:1.55rem; font-weight:700; letter-spacing:-.04em; margin:0 0 var(--e4); display:flex; align-items:baseline; gap:8px }
.bt-t span{ font:500 .8rem/1 'Space Mono',monospace; color:var(--gris); letter-spacing:0 }
.bt-t2{ font-size:1rem; font-weight:600; margin:var(--e5) 0 var(--e2) }

/* Tarjetas de artículo, como las de proyecto de la referencia */
.bt-pieza{ background:var(--bg-alt); border-radius:18px; margin-top:10px; overflow:hidden }
.bt-t + .bt-pieza{ margin-top:0 }
.bt-enlace{ display:block; padding:var(--e4) var(--e4) var(--e3); text-decoration:none; color:var(--tinta) }
.bt-enlace h3{ font-size:1.12rem; font-weight:600; letter-spacing:-.02em; line-height:1.3; margin:0 }
.bt-enlace p{ font-size:.88rem; color:var(--tinta-2); line-height:1.5; margin:8px 0 0 }
.bt-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px }
.bt-chip{ font:500 .72rem/1 Inter,system-ui,sans-serif; color:var(--quiosco); background:var(--quiosco-suave);
  border-radius:999px; padding:6px 10px }
.bt-pie{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--linea);
  padding:6px var(--e4); font-size:.76rem; color:var(--gris) }
.bt-guardar{ width:36px; height:36px; border:0; background:none; color:var(--tinta-2); cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0 }
.bt-guardar[aria-pressed="true"] svg{ fill:currentColor }

/* Precios en fila deslizable */
.bt-fila{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--e4)); padding:0 var(--e4) }
.bt-fila::-webkit-scrollbar{ display:none }
.bt-precio{ flex:0 0 auto; min-width:132px; background:var(--bg-alt); border-radius:16px; padding:12px 14px; text-decoration:none;
  color:var(--tinta); display:flex; flex-direction:column; gap:4px }
.bt-precio .nombre{ font-size:.78rem; color:var(--tinta-2); white-space:nowrap }
.bt-precio .cifra{ font-size:1.15rem; font-weight:600; letter-spacing:-.02em; white-space:nowrap }
.bt-precio .var{ font:500 .76rem/1 'Space Mono',monospace }
.bt-precio .sube{ color:var(--quiosco) } .bt-precio .baja{ color:var(--baja) }
.bt-linea{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--linea);
  text-decoration:none; color:var(--tinta); font-size:.92rem; line-height:1.4 }
.bt-linea time{ color:var(--gris); font-size:.74rem; white-space:nowrap }

.bt-temas{ display:flex; flex-wrap:wrap; gap:8px }
.bt-tema{ border:1px solid var(--linea); border-radius:999px; padding:8px 14px; text-decoration:none; color:var(--tinta); font-size:.88rem }
.bt-tema span{ color:var(--gris); font-size:.76rem; margin-left:4px }
.bt-vacio p{ margin:0; font-size:1.05rem; font-weight:500 }
.bt-vacio .bt-sub{ margin-top:8px; font-size:.9rem; font-weight:400; color:var(--tinta-2) }
.bt-resultados{ display:flex; flex-direction:column; gap:6px }

/* Lupa en la cabecera */
.cab .buscar{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  color:var(--tinta); text-decoration:none; flex:0 0 auto }
.cab .buscar svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round }
.cab .buscar:hover{ background:var(--bg-alt) }

/* Lupa: en escritorio junto al tema; en móvil, en la fila de la marca, a la derecha */
.cab .buscar{ margin-left:auto }
.cab .buscar + .tema{ margin-left:0 }
@media(max-width:700px){
  .cab .buscar{ order:2; margin-left:auto; min-height:50px }
  .cab .buscar + .tema{ order:2; margin-left:0 }
}

/* ============================================================
   Páginas "hoy" (plan §7)
   ============================================================ */
.hoy-pagina{ max-width:680px; margin:0 auto; padding:var(--e6) var(--e4) var(--e9) }
.hoy-pagina h1{ font-size:clamp(1.5rem,5vw,2.1rem); letter-spacing:-.035em; line-height:1.15; margin:var(--e3) 0 6px }
.hoy-hora{ font:500 .72rem/1.4 'Space Mono',monospace; color:var(--gris); letter-spacing:.03em; margin:0 0 var(--e5) }
.hoy-cifra{ display:flex; align-items:baseline; gap:var(--e4); flex-wrap:wrap; padding:var(--e4) 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea) }
.hoy-cifra b{ font:700 clamp(2.4rem,10vw,3.6rem)/1 'Space Mono',monospace; letter-spacing:-.04em }
.hoy-cifra span{ font:500 .9rem/1.3 'Space Mono',monospace }
.hoy-pagina .sube{ color:var(--quiosco) } .hoy-pagina .baja{ color:var(--baja) }
.hoy-datos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); column-gap:var(--e4) }
.hoy-datos div{ padding:12px 0; border-bottom:1px solid var(--linea) }
.hoy-datos span{ display:block; font-size:.72rem; color:var(--gris) }
.hoy-datos b{ font:600 1rem/1.3 'Space Mono',monospace }
.hoy-bloque{ margin-top:var(--e6) }
.hoy-bloque h2{ font-size:1.05rem; font-weight:600; letter-spacing:-.01em; margin:var(--e5) 0 var(--e3) }
.hoy-graf{ width:100%; height:auto; display:block }
.hoy-graf polyline{ stroke:var(--tinta); stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
.hoy-graf.sube polyline,.hoy-graf.sube circle{ stroke:var(--quiosco) } .hoy-graf.baja polyline,.hoy-graf.baja circle{ stroke:var(--baja) }
.hoy-graf circle{ fill:var(--papel); stroke-width:2.5 }
.hoy-graf .eje{ stroke:var(--linea); stroke-width:1 }
.hoy-barras{ width:100%; height:auto; display:block }
.hoy-barras rect{ fill:var(--n2) } .hoy-barras rect.barata{ fill:var(--quiosco) }
.hoy-barras text{ font:500 10px 'Space Mono',monospace; fill:var(--gris) }
.hoy-nota{ font-size:.82rem; color:var(--gris); line-height:1.5; margin:var(--e2) 0 0 }
.hoy-consejo{ background:var(--quiosco-suave); color:var(--quiosco); border-radius:18px; padding:var(--e4) var(--e5) }
.hoy-consejo h2{ margin-top:0 } .hoy-consejo p{ margin:0; color:var(--tinta) } .hoy-consejo .hoy-nota{ color:var(--tinta-2); margin-top:6px }
.hoy-dos{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e5) }
.hoy-dos .hoy-nota{ grid-column:1 / -1 }
.hoy-dos p{ display:flex; justify-content:space-between; margin:0; padding:8px 0; border-top:1px solid var(--linea); font-size:.9rem }
.hoy-dos b{ font:600 .85rem/1.4 'Space Mono',monospace }
.hoy-calc{ background:var(--bg-alt); border-radius:18px; padding:var(--e4) var(--e5) var(--e5) }
.hoy-calc h2{ margin-top:0 }
.hoy-campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--e3); margin-top:var(--e4) }
.hoy-campos label{ display:flex; flex-direction:column; gap:6px; font-size:.78rem; color:var(--tinta-2) }
.hoy-campos input{ width:100%; padding:10px 12px; border:1px solid var(--linea); border-radius:10px; background:var(--superficie); font-size:1rem; color:var(--tinta) }
.hoy-resultado{ margin:var(--e4) 0 0; font-size:1rem; line-height:1.5 }
.hoy-resultado b{ font-family:'Space Mono',monospace }
.hoy-faq details{ border-top:1px solid var(--linea); padding:12px 0 }
.hoy-faq summary{ cursor:pointer; font-weight:500 }
.hoy-faq details p{ color:var(--tinta-2); line-height:1.6; margin:8px 0 0; font-size:.92rem }
.hoy-fuentes{ font-size:.8rem; color:var(--gris); border-top:1px solid var(--linea); padding-top:12px }
.hoy-archivo{ margin-top:var(--e6) } .hoy-archivo a{ margin-right:10px }
.hoy-enlaces{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 var(--e5) }
.hoy-enlaces a{ border:1px solid var(--linea); border-radius:999px; padding:7px 13px; font-size:.82rem; text-decoration:none; color:var(--tinta) }

.mercados2 .nombre a{ color:inherit; text-decoration:none }
.mercados2 .nombre a:hover{ text-decoration:underline }
@media(max-width:420px){ .mercados2 .pestanas2 button{ font-size:.76rem } }
.hoy-cifra .estrella-activo{ margin-left:auto; width:40px; height:40px; border-radius:50%; border:1px solid var(--linea);
  background:none; color:var(--tinta); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 }
.hoy-cifra .estrella-activo svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linejoin:round }
.hoy-cifra .estrella-activo[aria-pressed="true"]{ background:var(--tinta); color:var(--papel); border-color:var(--tinta) }
.hoy-cifra .estrella-activo[aria-pressed="true"] svg{ fill:currentColor }

/* BOE de hoy */
.boe-item{ padding:12px 0; border-top:1px solid var(--linea) }
.boe-frase{ margin:0; font-size:1rem; line-height:1.5 }
.boe-item .hoy-nota{ margin-top:4px }
.hoy-dos-lista p{ display:flex; justify-content:space-between; gap:12px; margin:0; padding:8px 0; border-top:1px solid var(--linea); font-size:.9rem }
.hoy-dos-lista b{ font-family:'Space Mono',monospace }

/* Radar IA: chips de estado con los colores del canvas */
.chip-estado{ display:inline-block; font:600 .7rem/1 Inter,system-ui,sans-serif; border-radius:999px; padding:5px 9px; letter-spacing:.01em }
.chip-estado.confirmado{ background:#E4EEE9; color:#1F5A48 }
.chip-estado.desarrollo{ background:#ECEFED; color:#4A5451 }
.chip-estado.rumor{ background:#F3E8E4; color:#9A4B3C }
.radar-leyenda{ font-size:.82rem; color:var(--gris); line-height:2; margin:0 0 var(--e4) }
.radar-filtros{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--e4) }
.radar-filtros button{ border:1px solid var(--linea); background:none; border-radius:999px; padding:7px 13px; cursor:pointer;
  font:500 .8rem/1 Inter,system-ui,sans-serif; color:var(--tinta-2) }
.radar-filtros button[aria-pressed="true"]{ background:var(--tinta); color:var(--papel); border-color:var(--tinta) }
.radar-dia{ font:600 .72rem/1 'Space Mono',monospace; text-transform:uppercase; letter-spacing:.1em; color:var(--gris); margin:var(--e6) 0 var(--e2) }
.radar-entrada{ padding:var(--e4) 0; border-top:1px solid var(--linea) }
.radar-entrada[hidden]{ display:none }
.radar-meta{ display:flex; gap:10px; align-items:center; margin:0 0 8px; font-size:.76rem; color:var(--gris) }
.radar-entrada h3{ font-size:1.08rem; font-weight:600; letter-spacing:-.015em; line-height:1.35; margin:0 0 6px }
.radar-entrada > p:not(.radar-meta):not(.hoy-nota){ margin:0; color:var(--tinta-2); line-height:1.55; font-size:.95rem }
.radar-captacion{ margin:var(--e4) 0; padding:var(--e4); border-radius:16px; background:var(--bg-alt); display:flex; gap:var(--e4);
  align-items:center; justify-content:space-between; flex-wrap:wrap }
.radar-captacion p{ margin:0; font-size:.92rem }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .chip-estado.confirmado{ background:#1E2A25; color:#7FB8A1 }
  :root:not([data-theme="light"]) .chip-estado.desarrollo{ background:#262D2A; color:#B9C2BE }
  :root:not([data-theme="light"]) .chip-estado.rumor{ background:#2E211D; color:#D39A8C } }
:root[data-theme="dark"] .chip-estado.confirmado{ background:#1E2A25; color:#7FB8A1 }
:root[data-theme="dark"] .chip-estado.desarrollo{ background:#262D2A; color:#B9C2BE }
:root[data-theme="dark"] .chip-estado.rumor{ background:#2E211D; color:#D39A8C }

/* ============================================================
   /hoy — "Tu Qiosk de hoy" (plan §9, canvas aprobado)
   ============================================================ */
.deck{ max-width:460px; margin:0 auto; padding:var(--e4) var(--e4) var(--e9); min-height:70vh }
.deck-cabeza{ margin-bottom:var(--e4) }
.deck-barra{ display:flex; gap:4px; margin-bottom:10px }
.deck-barra i{ flex:1; height:3px; border-radius:2px; background:var(--linea); transition:background-color .3s ease }
.deck-barra i.hecho{ background:var(--tinta) }
.deck-fila{ display:flex; justify-content:space-between; align-items:baseline }
.deck-fila b{ font-size:1.05rem; letter-spacing:-.01em }
.deck-cuenta{ font:600 .78rem/1 'Space Mono',monospace; color:var(--gris) }

.deck-pila{ position:relative; height:min(62vh,520px); margin-bottom:var(--e5) }
.deck-tarjeta{ position:absolute; inset:0; background:var(--superficie); border:1px solid var(--linea); border-radius:22px;
  overflow:hidden; display:flex; flex-direction:column; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab;
  transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.deck-tarjeta.capa-1{ transform:translateY(12px) scale(.955); pointer-events:none }
.deck-tarjeta.capa-2{ transform:translateY(24px) scale(.91); pointer-events:none; opacity:.9 }
.deck-img{ flex:0 0 46%; background:var(--bg-alt) center/cover no-repeat }
.deck-img-vacia{ background:var(--quiosco-suave) }
.deck-texto{ padding:var(--e4) var(--e5); display:flex; flex-direction:column; gap:8px; flex:1; min-height:0 }
.deck-chip{ align-self:flex-start; font:600 .7rem/1 Inter,system-ui,sans-serif; background:var(--quiosco-suave); color:var(--quiosco);
  border-radius:999px; padding:5px 9px }
.deck-texto h2{ font-size:1.25rem; line-height:1.25; letter-spacing:-.02em; margin:0 }
.deck-texto p{ margin:0; color:var(--tinta-2); line-height:1.5; font-size:.92rem; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:4; -webkit-box-orient:vertical }
.deck-min{ margin-top:auto; font:500 .72rem/1 'Space Mono',monospace; color:var(--gris) }
.deck-sello{ position:absolute; top:22px; font:700 1.3rem/1 'Space Mono',monospace; letter-spacing:.08em; padding:6px 12px;
  border:3px solid; border-radius:10px; opacity:0; pointer-events:none }
.sello-si{ left:20px; color:var(--quiosco); transform:rotate(-12deg) }
.sello-no{ right:20px; color:var(--baja); transform:rotate(12deg) }

.deck-botones{ display:flex; align-items:center; justify-content:center; gap:14px }
.deck-b{ width:58px; height:58px; border-radius:50%; border:1px solid var(--linea); background:var(--superficie); color:var(--tinta);
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  transition:transform .2s cubic-bezier(.3,1.5,.5,1) }
.deck-b:active{ transform:scale(.9) }
.deck-b svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.deck-deshacer{ width:44px; height:44px } .deck-deshacer svg{ width:18px; height:18px }
.deck-no{ color:var(--baja) } .deck-si{ color:var(--quiosco) }
.deck-leer{ height:48px; padding:0 18px; border-radius:999px; border:0; background:var(--tinta); color:var(--papel); cursor:pointer;
  font:500 .9rem/1 Inter,system-ui,sans-serif }
.variante-b .deck-b{ width:46px; height:46px } .variante-b .deck-b svg{ width:19px; height:19px }

.deck-fin,.deck-aldia{ text-align:center }
.deck-fin h1,.deck-aldia h1{ font-size:1.8rem; letter-spacing:-.035em; margin:var(--e3) 0 6px }
.deck-check{ width:64px; height:64px; margin:var(--e5) auto 0; display:block }
.deck-check circle{ fill:none; stroke:var(--quiosco); stroke-width:2; stroke-dasharray:151; stroke-dashoffset:151; animation:deck-traza .6s ease forwards }
.deck-check path{ fill:none; stroke:var(--quiosco); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40;
  stroke-dashoffset:40; animation:deck-traza .35s .5s ease forwards }
@keyframes deck-traza{ to{ stroke-dashoffset:0 } }
.deck-total{ font:500 .82rem/1 'Space Mono',monospace; color:var(--gris); margin:0 0 var(--e4) }
.deck-lista{ list-style:none; margin:0 0 var(--e5); padding:0; text-align:left; display:flex; flex-direction:column; gap:8px }
.deck-lista li{ display:flex; align-items:center; gap:10px; background:var(--superficie); border:1px solid var(--linea); border-radius:14px;
  padding:8px 10px; touch-action:pan-y }
.deck-lista li.moviendo{ z-index:2; position:relative; border-color:var(--tinta) }
.deck-lista li.leida .tit{ color:var(--gris); text-decoration:line-through }
.deck-lista .asa{ cursor:grab; color:var(--gris); font-size:.9rem; padding:6px 2px; touch-action:none; user-select:none }
.deck-lista .mini{ width:44px; height:44px; border-radius:10px; background:var(--bg-alt) center/cover; flex:0 0 auto }
.deck-lista .tit{ flex:1; font-size:.9rem; line-height:1.35; cursor:pointer }
.deck-lista .min{ font:500 .7rem/1 'Space Mono',monospace; color:var(--gris); white-space:nowrap }
.deck-lista .quitar{ border:0; background:none; color:var(--gris); cursor:pointer; padding:6px }
.deck-empezar{ height:52px; padding:0 26px; border-radius:999px; border:0; background:var(--tinta); color:var(--papel); cursor:pointer;
  font:600 1rem/1 Inter,system-ui,sans-serif }
.deck-racha{ font:600 .9rem/1.4 'Space Mono',monospace; color:var(--quiosco) }
.deck-guia{ position:fixed; inset:0; z-index:80; background:rgba(18,22,20,.55); display:flex; align-items:center; justify-content:center; padding:var(--e5) }
.deck-guia[hidden]{ display:none }
.deck-guia-caja{ background:var(--papel); border-radius:22px; padding:var(--e6) var(--e5); max-width:340px; text-align:center }
.deck-guia-caja h2{ margin:var(--e4) 0 8px; font-size:1.3rem }
.deck-guia-caja p{ color:var(--tinta-2); line-height:1.5; margin:0 0 var(--e4) }
.deck-guia-gesto{ width:120px; height:80px; margin:0 auto; border:1px solid var(--linea); border-radius:14px; position:relative; overflow:hidden }
.deck-guia-gesto::after{ content:''; position:absolute; width:26px; height:26px; border-radius:50%; background:var(--tinta); top:27px; left:47px }
.gesto-A::after{ animation:gesto-lado 1.6s ease-in-out infinite }
.gesto-B::after{ animation:gesto-toque 1.6s ease-in-out infinite }
@keyframes gesto-lado{ 0%,100%{ transform:translateX(-30px) } 50%{ transform:translateX(30px) } }
@keyframes gesto-toque{ 0%,100%{ transform:scale(1) } 30%{ transform:scale(.7) } 60%{ transform:translateY(20px) } }
.deck-error{ text-align:center; color:var(--tinta-2); padding-top:var(--e8) }
.deck-sinjs{ line-height:1.6 }

/* Artículo abierto desde /hoy */
.deck-volver{ position:fixed; top:calc(var(--alto-cab) + 8px); left:50%; transform:translateX(-50%); z-index:41; background:var(--tinta);
  color:var(--papel); border-radius:999px; padding:8px 14px; font:500 .8rem/1 Inter,system-ui,sans-serif; text-decoration:none; white-space:nowrap }
.deck-cadena{ text-align:center; padding:var(--e7) 0 var(--e8); border-top:1px solid var(--linea); margin-top:var(--e7) }
.deck-cadena svg{ width:64px; height:64px; transform:rotate(-90deg) }
.deck-cadena circle{ fill:none; stroke-width:3 }
.deck-cadena .fondo{ stroke:var(--linea) }
.deck-cadena .lleno{ stroke:var(--quiosco); stroke-linecap:round; transition:stroke-dashoffset .08s linear }
.deck-cadena path{ fill:none; stroke:var(--tinta); stroke-width:2; stroke-linecap:round; transform:rotate(90deg); transform-origin:32px 32px }
.deck-cadena.casi svg{ animation:deck-pulso .6s ease infinite }
@keyframes deck-pulso{ 50%{ transform:rotate(-90deg) scale(1.08) } }
.deck-sig{ margin:var(--e3) auto; max-width:420px; font-weight:600; line-height:1.4 }
.deck-cadena-botones{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.deck-sig-b{ height:44px; padding:0 20px; border-radius:999px; border:0; background:var(--tinta); color:var(--papel); cursor:pointer; font:500 .9rem/1 Inter,system-ui,sans-serif }
.deck-nointeresa{ height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--linea); background:none; color:var(--tinta-2); cursor:pointer; font-size:.85rem }

/* Bloque "Tu Qiosk de hoy" de la portada (canvas: tinta con botón claro) */
.bloque-hoy{ background:var(--tinta); color:var(--papel); border-radius:22px; padding:var(--e5); margin:var(--e6) 0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--e4); flex-wrap:wrap }
.bloque-hoy b{ font-size:1.2rem; letter-spacing:-.02em; display:block }
.bloque-hoy span{ font-size:.88rem; opacity:.8 }
.bloque-hoy a{ background:var(--papel); color:var(--tinta); border-radius:999px; padding:12px 20px; text-decoration:none; font-weight:600; white-space:nowrap }

/* Tinta de lectura (T-9.5): pendiente en gris AA y leída en tinta, sin despintarse al volver */
.v2 .cuerpo-lectura .tinta-pendiente{ color:var(--texto-pendiente); transition:color .25s ease }
.v2 .cuerpo-lectura .tinta-leida{ color:var(--tinta) !important }
@media (prefers-reduced-motion:reduce){ .v2 .cuerpo-lectura .tinta-pendiente{ transition:none } }

.rejilla .bloque-hoy{ grid-column:1 / -1; margin:0 }
/* La tinta manda sobre el efecto anterior (que oscurecía lo que estaba en pantalla) */
.v2 .cuerpo-lectura p.activo.tinta-pendiente,
.v2 .cuerpo-lectura h2.activo.tinta-pendiente,
.v2 .cuerpo-lectura h3.activo.tinta-pendiente{ color:var(--texto-pendiente) }

/* ============================================================
   Cifras del día: fila deslizable de tarjetas (como las de las
   referencias del fundador), cada una enlazada a su página de precio.
   ============================================================ */
.v2 .ticker{ border:0; margin:0 0 var(--e6); background:none; overflow:visible }
.v2 .ticker .rueda{ flex-direction:row; gap:8px; padding:4px var(--e4) 8px; overflow-x:auto; max-width:var(--medida-ancha);
  margin:0 auto; white-space:nowrap; scroll-snap-type:x proximity; scroll-padding-inline:var(--e4); scrollbar-width:none }
.v2 .ticker .rueda::-webkit-scrollbar{ display:none }
.v2 .ticker .valor{ flex:0 0 auto; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:5px;
  min-width:132px; padding:12px 14px; border:0; border-radius:16px; background:var(--bg-alt); color:var(--tinta);
  text-decoration:none; scroll-snap-align:start; transition:transform .2s cubic-bezier(.3,1.5,.5,1) }
.v2 .ticker a.valor:active{ transform:scale(.96) }
.v2 .ticker .nom{ flex:none; font-size:.64rem; letter-spacing:.08em }
.v2 .ticker .cifra{ text-align:left; font-size:1.12rem; font-weight:700 }
.v2 .ticker .var{ text-align:left; min-width:0; font-size:.72rem }

/* ============================================================
   Cabecera en móvil: dos filas limpias. Arriba la marca con la lupa y
   el tema; abajo las secciones como píldoras deslizables (como las
   pestañas de la referencia), la activa en tinta.
   ============================================================ */
@media(max-width:700px){
  .v2{ --alto-cab:106px }
  .v2 .cab{ display:grid; grid-template-columns:1fr auto auto; grid-template-rows:54px 44px; align-items:center;
    column-gap:2px; row-gap:0; gap:0 2px; padding:0 var(--e4); height:var(--alto-cab); align-content:start }
  .v2 .cab .logo{ grid-row:1; grid-column:1; line-height:1; color:var(--tinta); font-size:1.45rem; font-weight:700 }
  .v2 .cab .buscar{ grid-row:1; grid-column:2; order:0; margin:0; min-height:0; width:42px; height:42px }
  .v2 .cab .tema{ grid-row:1; grid-column:3; order:0; margin:0; min-height:0; min-width:42px; height:42px; font-size:.95rem; color:var(--tinta) }
  .v2 .nav{ grid-row:2; grid-column:1 / -1; order:0; width:auto; margin:0 calc(-1 * var(--e4)); padding:0 var(--e4) 8px;
    gap:6px; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:var(--e4); scrollbar-width:none; align-items:center }
  .v2 .nav::-webkit-scrollbar{ display:none }
  .v2 .nav::after{ content:''; flex:0 0 var(--e2) }
  .v2 .nav a{ line-height:1; padding:9px 14px; border-radius:999px; background:var(--bg-alt); color:var(--tinta-2);
    font:500 .86rem/1 Inter,system-ui,sans-serif; text-transform:none; letter-spacing:0; white-space:nowrap; scroll-snap-align:start }
  .v2 .nav a[aria-current]{ background:var(--tinta); color:var(--papel) }
  .v2 .nav a.nav-alta, .v2 .nav a[href="/lista"]{ display:none }
}

/* ============================================================
   Portada y secciones más limpias (referencias del fundador)
   ============================================================ */
/* Las secciones ya están en la cabecera: la segunda fila sobra */
.v2 .portada .pestanas{ display:none }
/* "Hoy" compacto: el día a un lado, sin el bloque centrado */
.v2 .hoy{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--e4); margin-bottom:var(--e4) }
.v2 .hoy .hoy-dia{ margin:0 }
.v2 .hoy .hoy-lema{ margin:4px 0 0 }
.v2 .hoy .cuando{ text-align:right; flex:0 0 auto }
.v2 .hoy .cuando b{ font-size:.95rem }
.v2 .hoy .cuando .micro{ display:none }
.portada-buscar{ display:flex; align-items:center; gap:10px; height:50px; padding:0 16px; margin:0 0 var(--e5);
  background:var(--bg-alt); border-radius:14px; color:var(--gris); text-decoration:none; font-size:.95rem }
.portada-buscar svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; flex:0 0 auto }
.portada-buscar:hover{ color:var(--tinta) }
/* Secciones: el título pegado a las cifras, sin el hueco de antes */
.v2 .titulo-seccion{ padding-top:var(--e4) }
@media(max-width:700px){
  .v2 .portada{ padding-top:var(--e4) }
  .v2 .hoy .hoy-lema{ font-size:.92rem }
  .v2 .titulo-seccion{ padding-top:0 }
}