/* BolsaSAS · los colores de la app: azul marino del icono y naranja del «SAS». */
:root{
  --fondo:#f4f6f9; --papel:#fff; --tinta:#16202c; --suave:#5a6676; --linea:#e1e6ee;
  --marino:#1e3a5f; --marino-2:#284b78; --naranja:#d9772a; --naranja-claro:#fbeee2;
  --acento:#1e3a5f; --enlace:#1f5aa6; --ok:#2e8b57;
  --sombra:0 1px 2px rgba(22,32,44,.06),0 8px 24px rgba(22,32,44,.06);
}
@media (prefers-color-scheme:dark){
  :root{ --fondo:#0e141c; --papel:#161e29; --tinta:#e7ecf3; --suave:#9aa6b6; --linea:#263243;
         --marino:#1e3a5f; --marino-2:#2a4d7a; --naranja:#f0954a; --naranja-claro:#2d2219;
         --acento:#8fb6e8; --enlace:#8fb6e8; --sombra:none; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--fondo); color:var(--tinta);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif}
a{color:var(--enlace)}
img{max-width:100%; height:auto}
h1,h2,h3{line-height:1.2; text-wrap:balance}
.ancho{max-width:1080px; margin:0 auto; padding:0 20px}
.estrecho{max-width:820px}
.suave{color:var(--suave)}

/* Barra */
.barra{background:var(--marino); color:#fff; position:sticky; top:0; z-index:5}
.barra .ancho{display:flex; align-items:center; justify-content:space-between; height:58px}
.marca{font-weight:800; font-size:1.45rem; letter-spacing:-.02em; text-decoration:none}
.marca .b{color:#fff} .marca .s{color:#f0954a}
.barra nav{display:flex; gap:18px; align-items:center}
.barra nav a{color:#dfe8f4; text-decoration:none; font-size:.95rem}
.barra nav a:hover{color:#fff}
.boton-mini{background:#f0954a; color:#16202c!important; padding:6px 14px; border-radius:999px; font-weight:600}
@media (max-width:560px){ .barra nav a:not(.boton-mini){display:none} }

/* Portada */
.heroe{margin:0; background:linear-gradient(180deg,var(--marino) 0%,var(--marino-2) 100%); color:#fff; padding:56px 0 0; overflow:hidden}
.heroe-rejilla{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:end}
.antetitulo{color:#f0b07a; font-weight:600; font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 10px}
.heroe h1{font-size:clamp(2rem,4.6vw,3.1rem); margin:0 0 16px; letter-spacing:-.02em}
.entrada{font-size:1.12rem; max-width:34em}
.heroe .entrada{color:#dbe5f2}
.micro{font-size:.85rem; color:#b9c8dc; margin:14px 0 56px}
.movil{justify-self:center; align-self:end}
.movil img{width:300px; border-radius:34px 34px 0 0; border:8px solid #0d1825; border-bottom:0;
  box-shadow:0 -10px 40px rgba(0,0,0,.35); display:block}
@media (max-width:820px){
  .heroe-rejilla{grid-template-columns:1fr} .movil img{width:230px} .micro{margin-bottom:28px}
}

/* Botones de tienda */
.botones{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 6px}
.botones.centro{justify-content:center}
.tienda{display:flex; flex-direction:column; justify-content:center; min-width:168px; padding:9px 18px;
  border-radius:12px; background:#0b0f15; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.18); line-height:1.15}
.tienda:hover{background:#000}
.tienda-sub{font-size:.72rem; opacity:.8} .tienda-nom{font-size:1.15rem; font-weight:700}
main .botones .tienda{background:var(--marino)}

/* Bloques */
main{padding:8px 0 40px}
section{margin:44px 0}
h2{font-size:1.5rem; margin:0 0 6px}
.tres{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.tres article{background:var(--papel); border:1px solid var(--linea); border-radius:18px; padding:18px; box-shadow:var(--sombra)}
.tres img{display:block; width:100%; max-width:210px; margin:0 auto 14px; border-radius:16px; border:1px solid var(--linea)}
.tres h3{font-size:1.1rem; margin:0 0 6px}
.tres p{margin:0; color:var(--suave); font-size:.97rem}
@media (max-width:820px){ .tres{grid-template-columns:1fr} }

.caja-no-oficial{background:var(--naranja-claro); border-left:4px solid var(--naranja); padding:14px 18px;
  border-radius:0 12px 12px 0; font-size:.95rem; margin:36px 0}

/* Avisos */
.avisos{list-style:none; padding:0; margin:14px 0 0; background:var(--papel); border:1px solid var(--linea); border-radius:16px; overflow:hidden}
.aviso{display:grid; grid-template-columns:auto auto 1fr; gap:6px 12px; align-items:baseline; padding:12px 16px; border-top:1px solid var(--linea)}
.aviso:first-child{border-top:0}
.aviso time{color:var(--suave); font-size:.85rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.aviso a{text-decoration:none; color:var(--tinta)} .aviso a:hover{text-decoration:underline}
.etq{font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap}
.etq.bo{background:#e7eef8; color:#1e3a5f} .etq.op{background:var(--naranja-claro); color:#a1521a}
@media (prefers-color-scheme:dark){ .etq.bo{background:#22324a; color:#bcd3f1} .etq.op{color:#f3b07a} }
@media (max-width:560px){ .aviso{grid-template-columns:auto 1fr} .aviso a{grid-column:1/-1} }

/* Categorías */
.rejilla{list-style:none; padding:0; margin:14px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px}
.rejilla li{display:flex; justify-content:space-between; gap:10px; align-items:baseline; background:var(--papel);
  border:1px solid var(--linea); border-radius:10px; padding:9px 12px}
.rejilla a{text-decoration:none; color:var(--tinta); font-weight:500}
.rejilla a:hover{color:var(--enlace)}
.rejilla span{color:var(--suave); font-size:.82rem; font-variant-numeric:tabular-nums}

.descarga{text-align:center; background:var(--papel); border:1px solid var(--linea); border-radius:20px; padding:34px 20px; box-shadow:var(--sombra)}

/* Página de categoría */
.migas{font-size:.9rem; color:var(--suave); margin:26px 0 8px} .migas a{color:var(--suave)}
main h1{font-size:clamp(1.8rem,4vw,2.5rem); margin:0 0 10px}
.bloque{background:var(--papel); border:1px solid var(--linea); border-radius:16px; padding:20px; box-shadow:var(--sombra)}
.bloque h2{font-size:1.2rem; margin:0 0 12px}
.bloque .avisos{border:0; border-radius:0; margin:0 -20px -20px}
.tabla{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums}
th,td{padding:9px 10px; text-align:right; border-bottom:1px solid var(--linea); white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-size:.78rem; color:var(--suave); font-weight:600; text-transform:uppercase; letter-spacing:.03em}
tbody th{font-weight:600}

/* Fuentes y pie */
.fuentes h2{font-size:1.2rem}
.lista-fuentes{columns:2; column-gap:30px; padding-left:18px}
.lista-fuentes li{break-inside:avoid; margin:4px 0}
@media (max-width:640px){ .lista-fuentes{columns:1} }
.pie{background:var(--marino); color:#c9d6e6; padding:28px 0 36px; font-size:.92rem}
.pie a{color:#fff; margin-right:16px}
.pie .no-oficial{color:#e4ecf6} .pie .suave{color:#9fb1c8}

/* Páginas legales (privacidad, términos), que usan su propio marcado */
main > .tarjeta{max-width:760px; margin:40px auto; background:var(--papel); border:1px solid var(--linea); border-radius:14px; padding:28px 26px}
.tarjeta h1{font-size:1.65rem; margin:0 0 6px} .tarjeta h2{font-size:1.1rem; margin:30px 0 10px; color:var(--acento)}
.tarjeta h3{font-size:.98rem; margin:20px 0 6px}
.fecha{color:var(--suave); font-size:.88rem; margin:0 0 4px}
.aviso-legal,.tarjeta .aviso{display:block; background:var(--naranja-claro); border-left:3px solid var(--naranja);
  padding:12px 14px; border-radius:0 8px 8px 0; margin:18px 0; font-size:.94rem}
.tarjeta footer{margin-top:28px; padding-top:18px; border-top:1px solid var(--linea); color:var(--suave); font-size:.86rem}