/* Hoja compartida por el indice del blog y por todos los apuntes.
   Va en fichero aparte, y no incrustada como en la portada, justamente porque
   la comparten varias paginas: asi el navegador la descarga una vez y las
   siguientes lecturas del blog no vuelven a pagarla.

   El nombre lleva fecha A PROPOSITO. La regla de cabeceras de firebase.json
   cachea el CSS siete dias: al cambiar el contenido sin cambiar la URL, los
   navegadores que ya habian estado aqui seguian sirviendo la hoja OSCURA sobre
   el HTML nuevo. Se vio en produccion el 05/09. Cada cambio de fondo de esta
   hoja va con nombre nuevo y los tres HTML apuntando a el.

   05/09/2026 — pasa de fondo oscuro a la misma estructura que la portada:
   barra y portadilla en indigo, cuerpo del articulo sobre crema, pie en
   indigo. Antes el blog era oscuro de arriba abajo y, junto a la portada
   nueva, parecian dos sitios distintos. Todos los grises van medidos contra
   el fondo REAL sobre el que se pintan: los tonos que funcionaban sobre
   indigo se quedan en 2,5:1 sobre crema. */

:root{
  --indigo:#1E2A47; --indigo-hondo:#141C30; --indigo-pie:#0F1626;
  --mostaza:#D99E2B; --mostaza-claro:#EFBB55; --oro-texto:#8A5F12; --oro-hover:#6B4A0D;
  --crema:#F7F3EA; --crema-honda:#F2ECDF; --blanco:#FFFFFF; --crudo:#F2EDE3;
  --tinta:#1A2338; --texto-cuerpo:#4A5568; --texto-fuerte:#3D4759;
  --gris-2:#5C6880; --gris-3:#66718A;
  --gris-frio:#C4CDDE; --gris-tenue:#8D9AB2; --gris-pie:#828DA6;
  --borde:#33436B; --borde-tenue:#27355A;
  --borde-claro:#E4DCCB; --borde-fino:#EFE7D8;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --texto:"Public Sans","Segoe UI",system-ui,sans-serif;
  --cifra:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:var(--texto); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--oro-texto)}
a:hover{color:var(--oro-hover)}
a:focus-visible{outline:3px solid var(--mostaza); outline-offset:3px; border-radius:4px}

.env{width:100%; max-width:1140px; margin-inline:auto; padding-inline:24px}
/* Medida de lectura: el cuerpo del articulo se estrecha a ~68 caracteres.
   Es el ancho al que se lee sin perder el renglon. */
.env-lectura{width:100%; max-width:720px; margin-inline:auto; padding-inline:24px}

/* ------------------------------------------------------------------ barra */
.barra{
  position:sticky; top:0; z-index:10; background:var(--indigo-hondo);
  border-bottom:1px solid var(--borde);
}
.barra .env{display:flex; align-items:center; gap:14px; height:64px}
.marca{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--crema)}
.marca:hover{color:var(--crema)}
.marca img{width:36px; height:36px; border-radius:50%; display:block}
.marca b{font-family:var(--display); font-weight:800; font-size:1.04rem}
.barra nav{margin-left:auto; display:flex; gap:20px; font-size:.92rem}
.barra nav a{color:var(--gris-frio); text-decoration:none}
.barra nav a:hover{color:var(--crema)}
@media(max-width:620px){
  /* Misma tara que en la portada: sin nowrap, «AprendeTech» parte en dos
     lineas y la barra crece por dentro. */
  .barra .env{gap:12px}
  .marca b{white-space:nowrap; font-size:.98rem}
  .marca img{width:32px; height:32px}
  .barra nav{gap:14px; font-size:.84rem}
  .barra nav a{white-space:nowrap}
}
@media(max-width:430px){
  /* Con tres enlaces no cabe la barra entera; se deja el que lleva al dinero
     y el legal obligatorio, y «Apuntes» se alcanza desde el pie. */
  .barra nav a:nth-child(2){display:none}
}

/* ------------------------------------------------------------- portadilla */
.portadilla{
  padding:64px 0 48px; color:var(--crema);
  background:radial-gradient(1000px 380px at 50% -120px, rgba(217,158,43,.14), transparent 70%), var(--indigo);
}
.cejilla{
  font-family:var(--cifra); font-weight:600; font-size:.72rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--mostaza-claro); margin:0 0 16px;
}
h1{
  font-family:var(--display); font-weight:800; font-size:clamp(2rem,4.6vw,3.1rem);
  line-height:1.1; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance;
}
.bajada{font-size:1.1rem; color:var(--gris-frio); margin:0; max-width:62ch}
.firma{
  font-family:var(--cifra); font-size:.74rem; letter-spacing:.09em; color:var(--gris-tenue);
  margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px;
}
.portadilla a{color:var(--mostaza-claro)}
.portadilla a:hover{color:var(--mostaza)}

/* -------------------------------------------------- cuerpo sobre el crema */
article.apunte-cuerpo{padding:52px 0 20px}
article.apunte-cuerpo h2{
  font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.015em;
  color:var(--tinta); margin:44px 0 14px; text-wrap:balance;
}
article.apunte-cuerpo h3{
  font-family:var(--display); font-weight:600; font-size:1.15rem;
  color:var(--tinta); margin:30px 0 10px;
}
article.apunte-cuerpo p{margin:0 0 18px; color:var(--texto-cuerpo)}
article.apunte-cuerpo strong{color:var(--tinta); font-weight:600}
article.apunte-cuerpo ul,article.apunte-cuerpo ol{margin:0 0 20px; padding-left:22px; color:var(--texto-cuerpo)}
article.apunte-cuerpo li{margin-bottom:9px}
article.apunte-cuerpo li::marker{color:var(--oro-texto)}

.dato-destacado{
  border-left:3px solid var(--mostaza); background:var(--blanco);
  border-top:1px solid var(--borde-fino); border-right:1px solid var(--borde-fino);
  border-bottom:1px solid var(--borde-fino);
  padding:18px 22px; margin:26px 0; border-radius:0 10px 10px 0;
}
.dato-destacado p{margin:0; color:var(--texto-cuerpo)}
.dato-destacado .cifra{
  font-family:var(--cifra); font-weight:600; font-size:1.5rem; color:var(--oro-texto);
  display:block; margin-bottom:6px; font-variant-numeric:tabular-nums;
}

/* Tabla de datos: se desborda en su propio contenedor para que el cuerpo de la
   pagina nunca haga scroll lateral en el movil. */
.tabla-envoltura{
  overflow-x:auto; margin:26px 0; background:var(--blanco);
  border:1px solid var(--borde-claro); border-radius:10px;
}
table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:480px}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--borde-fino)}
th{
  font-family:var(--cifra); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gris-2); font-weight:600; background:var(--crema-honda);
}
td{color:var(--texto-cuerpo)}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--cifra); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
td.si{color:var(--oro-texto); font-weight:600}

/* Recuadro de recomendacion dentro del texto. Lleva su propia marca de
   publicidad: un enlace de afiliado metido en un articulo tiene que decir que
   lo es donde esta, no solo en el pie. */
.recomendacion{
  border:1px solid var(--borde-claro); border-radius:14px; background:var(--blanco);
  box-shadow:0 10px 28px rgba(26,35,56,.07);
  padding:26px; margin:34px 0; display:grid; grid-template-columns:88px 1fr; gap:20px; align-items:start;
}
@media(max-width:560px){ .recomendacion{grid-template-columns:1fr} }
.recomendacion img{width:88px; height:88px; border-radius:9px; object-fit:cover; border:1px solid var(--borde-claro)}
.recomendacion .rotulo{
  font-family:var(--cifra); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--oro-texto); margin:0 0 8px;
}
.recomendacion h3{
  font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--tinta);
  margin:0 0 8px; line-height:1.3;
}
.recomendacion p{margin:0 0 16px; font-size:.94rem; color:var(--texto-cuerpo)}
.recomendacion .cifras{
  font-family:var(--cifra); font-size:.8rem; color:var(--gris-2); margin:0 0 16px;
  display:flex; flex-wrap:wrap; gap:6px 16px; font-variant-numeric:tabular-nums;
}
.btn{
  display:inline-block; text-decoration:none; font-weight:600; background:var(--mostaza);
  color:var(--indigo-hondo); padding:12px 22px; border-radius:9px; font-size:.93rem;
  box-shadow:0 8px 20px rgba(217,158,43,.28);
  transition:background .18s ease;
}
.btn:hover{background:var(--mostaza-claro); color:var(--indigo-hondo)}
.btn-linea{background:transparent; color:var(--oro-texto); border:1px solid var(--borde-claro); box-shadow:none}
.btn-linea:hover{background:var(--crema-honda); color:var(--oro-hover)}

/* ------------------------------------------------------------ indice del blog */
.lista-apuntes{display:grid; gap:16px; margin:34px 0 0}
.entrada{
  display:grid; grid-template-columns:118px 1fr; gap:22px;
  background:var(--blanco); border:1px solid var(--borde-claro); border-radius:14px;
  box-shadow:0 8px 24px rgba(26,35,56,.06);
  padding:24px 22px; text-decoration:none; color:inherit;
  transition:transform .16s ease, box-shadow .16s ease;
}
.entrada:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(26,35,56,.11)}
.entrada .fecha{font-family:var(--cifra); font-size:.74rem; letter-spacing:.08em; color:var(--gris-3); margin:3px 0 0}
.entrada h2{font-family:var(--display); font-weight:600; font-size:1.18rem; line-height:1.32; color:var(--tinta); margin:0 0 8px}
.entrada p{margin:0; color:var(--texto-cuerpo); font-size:.93rem}
@media(max-width:620px){ .entrada{grid-template-columns:1fr; gap:8px} }
.cola-indice{margin-top:34px; color:var(--gris-2); font-size:.93rem}

/* ------------------------------------------------------------------------ pie */



@media(prefers-reduced-motion:reduce){ *{transition:none!important} html{scroll-behavior:auto} }

/* Estrellas y flechas dibujadas, no escritas: ninguna de las cinco tipografias
   del sitio tiene U+2605 ni U+2192 (medido comparando anchos contra la generica
   del sistema), asi que como texto los pintaba el sistema operativo del visitante.
   Van en em para que sigan al texto, y en currentColor para heredar su color. */
.ico{width:1em; height:1em; fill:currentColor; vertical-align:-.13em; flex:none}
.ico-flecha{width:1.08em; height:1.08em; margin-left:.34em; vertical-align:-.2em}
.estrellas .ico{width:.95em; height:.95em}
.estrellas{display:inline-flex; gap:1.5px; align-items:center}

/* Un curso al que el productor cerro las ventas. Se queda escrito en el apunte
   —borrarlo seria reescribir la historia— pero sin enlace y dicho con claridad. */
.aviso-retirado{margin:10px 0 14px; padding:11px 14px; border-left:3px solid var(--mostaza);
  background:var(--crema-honda); color:var(--tinta); font-size:14.5px; line-height:1.55}
.btn-inactivo{background:transparent; border:1px dashed var(--gris-3); color:var(--gris-2);
  cursor:not-allowed; pointer-events:none}

/* ---- piezas que estrenaba el apunte del 05/09 y no tenian regla ----
   Se detectaron comparando las clases USADAS en el HTML con las que tienen
   reglas en las hojas: .siguiente salia sin estilo (dos enlaces sueltos en
   bloque), y <code> y <ol> caian en el estilo por defecto del navegador, con
   la monoespaciada del sistema en vez de la del sitio. */

/* Listas numeradas: los pasos de un procedimiento, que el lector va a seguir. */
article.apunte-cuerpo ol{margin:0 0 22px; padding-left:22px; display:grid; gap:10px}
article.apunte-cuerpo ol li{font-size:17px; line-height:1.68; padding-left:4px}
article.apunte-cuerpo ol li::marker{color:var(--oro-texto); font-weight:600;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:15px}

/* Fragmentos literales dentro del texto (una direccion, un codigo de error). */
article.apunte-cuerpo code{font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.88em; background:var(--crema-honda); border:1px solid var(--borde);
  border-radius:5px; padding:1.5px 6px; color:var(--tinta); white-space:nowrap}

/* Cierre del apunte: adonde va el lector cuando termina de leer. */
.siguiente{margin:34px 0 6px; padding-top:22px; border-top:1px solid var(--borde);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px}
.siguiente .rotulo{flex:1 0 100%; margin:0 0 2px}
.siguiente a{color:var(--oro-texto); font-weight:600; font-size:16px;
  text-decoration:none; display:inline-flex; align-items:center; line-height:1.4}
.siguiente a:hover{text-decoration:underline}
@media(max-width:620px){ .siguiente{gap:12px} .siguiente a{flex:1 0 100%} }

/* Descriptor bajo el nombre: el nombre solo no dice que es esta web. En columna,
   dentro del flex en fila de .marca, que no se toca. */
.marca-txt{display:flex; flex-direction:column; gap:1px; line-height:1.14}
.marca-txt small{font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.055em; color:#8D9AB2; font-weight:500}
@media(max-width:520px){ .marca-txt small{display:none} }

/* El indice no es prosa: es una lista para escanear. `.env-lectura` vale 720 px
   porque son ~75 caracteres por linea, la medida de un articulo; aplicada al
   indice dejaba 215 px muertos a cada lado a 1280 px y una pagina de 3.000 px
   de alto para ocho titulares. Las paginas de apunte siguen a 720. */
.env-indice{width:100%; max-width:1080px; margin-inline:auto; padding-inline:24px}
@media(min-width:900px){
  .lista-apuntes{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
  .entrada{align-content:start}
}

/* ------------------------------------------- cierre con la seleccion
   Lo escribe cierre_afiliado.py al final de los apuntes que no remataban en
   ningun sitio. Reutiliza .recomendacion, .cifras y .btn: aqui solo se anade
   el marco de la seccion, el aviso pegado al boton y la lista compacta del
   indice, que va sin imagenes porque /blog no carga el sprite de iconos. */
.cierre-afiliado{margin:44px 0 0; padding-top:26px; border-top:1px solid var(--borde)}
.cierre-afiliado > h2{margin-top:0}
.cierre-afiliado > .rotulo{
  font-family:var(--cifra); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--oro-texto); margin:0 0 10px;
}
.cierre-afiliado .recomendacion{margin:22px 0}
.cierre-afiliado .recomendacion.destacada{border-color:var(--mostaza)}
.aviso-precio{
  font-family:var(--cifra); font-size:.72rem; color:var(--gris-2); margin:10px 0 0;
}
.recomendacion .aviso-precio{margin:10px 0 0}
.lista-cierre{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px}
.lista-cierre li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px;
  padding-bottom:14px; border-bottom:1px solid var(--borde-claro);
}
.lista-cierre li:last-child{border-bottom:0; padding-bottom:0}
.lista-cierre .nombre{font-family:var(--display); font-weight:600; color:var(--tinta)}
.lista-cierre .datos{
  font-family:var(--cifra); font-size:.78rem; color:var(--gris-2);
  font-variant-numeric:tabular-nums; flex:1 0 auto;
}
.lista-cierre a{font-weight:600; color:var(--oro-texto); white-space:nowrap}
@media(max-width:620px){ .lista-cierre .datos{flex:1 0 100%} }