article { margin:6rem auto; display:grid;gap:calc(1rem + 2vw) calc(2rem + 6vw);}
.content ol, .content ul {margin:1rem 0 2rem 3rem;}
.contenido a{text-decoration:underline; font-weight: bold; }
.contenido h2{margin-top:calc(1.5rem + 2vw);}

@media (max-width:400px){
article{width:90%;}
article header{grid-row: 1 / 2;}
article div:first-of-type{grid-row: 3 / 4; margin:1rem 0;}
article aside{grid-row: 2 / 3;background:#eee; padding: 2rem; border:1px solid #ddd;}
header ul {list-style-type: none; margin-left:1rem;}
}

@media (min-width:401px) and (max-width:768px){
article{width:90%; }
article header{grid-row: 1 / 2;}
article div:first-of-type{grid-row: 3 / 4; margin:1rem 0;}
article aside{grid-row: 2 / 3;background:#eee; padding:2rem; border:1px solid #ddd;}
header ul {list-style-type: none;}
header li {margin-right:2rem;}
}


@media (min-width:769px) and (max-width:992px){
article{width:90%; }
article header{grid-row: 1 / 2;}
article div:first-of-type{grid-row: 3 / 4; margin:1rem 0;}
article aside{grid-row: 2 / 3;background:#eee; padding:2rem; border:1px solid #ddd;}
header ul {list-style-type: none;}
header li {margin-right:2rem;}
}



@media (min-width:993px) and (max-width:1340px){
article{width:80%;  grid-template-columns: 2fr 1fr; }
article aside {grid-column: 2 / 3; grid-row: 1 / 2;}
header ul {list-style-type: none;}
header li {margin-right:2rem;}
}


@media (min-width:1341px) and (max-width:1920px){
article{width:75%;  grid-template-columns: 2fr 1fr; }
article aside {grid-column: 2 / 3; grid-row: 1 / 2;}
header ul {list-style-type: none;}
header li {display:inline; margin-right:2rem;}
}

@media (min-width:1921px) and (max-width:2560px){
article{width:65%;  grid-template-columns: 2fr 1fr; }
article header {grid-column: 1 / 2; grid-row: 1 / 2;}
article div {grid-column: 1 / 2; grid-row: 2 / 3;}
article aside {grid-column: 2 / 3; grid-row: 1 / 3;}
header ul {list-style-type: none;}
header li {display:inline; margin-right:2rem;}
}

@media (min-width:2561px) and (max-width:3840px){
article{width:60%;  grid-template-columns: 2fr 1fr; }
article aside {grid-column: 2 / 3; grid-row: 1 / 2;}
header ul {list-style-type: none;}
header li {display:inline; margin-right:2rem;}
}

@media (min-width:3841px){
article{width:55%;  grid-template-columns: 2fr 1fr; }
article aside {grid-column: 2 / 3; grid-row: 1 / 3;}
header ul {list-style-type: none;}
header li {display:inline; margin-right:2rem;}
}



img {max-width:100%; height:auto;}
figure{ margin:2rem 0 1rem 0;}



@media (min-width:993px){
aside {
  position: sticky;
  top: 100px;
  align-self: start; 
}}

aside section.taboa-contido ul {
  margin: 2rem 0 0 0;
  list-style-type: none;
  padding-left:0;
}

aside section.taboa-contido li {
  margin-top: 0.5rem;
}

aside section.taboa-contido a.active {
  color: #0072a0;
  font-weight: bold;
}

aside section.taboa-contido a:hover {
  color: #0f2f3f; font-weight: bold;
}

aside section.titulo {
  margin-top: 0;
}

/**** CELDAS CÓDIGO **/

/* La columna de contenido debe poder encoger */
.contenido { 
  min-width: 0; 
}

/* Limpia el pre: sin duplicados y con scroll interno estable */
/* Asegura que la columna puede encoger (evita overflow de página) */
.contenido { min-width: 0; }

/* El contenedor del código */
pre{
  position: relative;                /* referencia para el absolute del <strong> */
  box-sizing: border-box;
  padding: 2.25rem 1rem 1.5rem;      /* ↑ reserva espacio para la cabecera */
  margin: 3rem 0;
  max-width: 100%;
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #0c0c0c;
  color: #fff;
  line-height: 1.5;
  font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
  font-size: 1rem;
  tab-size: 2;
  white-space: pre;
  overflow-x: auto;                   /* scroll horizontal del código */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}

/* La “pestaña” fija del título */
pre > strong{
  position: absolute;
  top: 0;
  left: -1rem; right: -1rem;                  /* más robusto que width:100% */
  z-index: 2;                         /* por encima del <code> */
  height: 2rem;
  line-height: 2rem;
  display: block;
  padding: 0 2.75rem;
  background: #2f2f2f;
  color: #fff;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
  pointer-events: none;               /* que no bloquee el scroll/selección */
}

/* Asegura bloque y apilado correcto */
pre > code{ display:block; position: relative; z-index: 0; }


/* En pantallas pequeñas: límite de altura + scroll vertical */
@media (max-width: 768px) {
  pre {
    max-height: 60vh;
    overflow-y: auto;    /* si el bloque supera 60% de la altura de la pantalla */
  }
}

pre code{padding:0rem 2rem 2rem 2rem; display:inline-block;}
pre em {font-style: normal;}
pre span {color:#0f2f3f;}
mark {background:transparent; color:#006DA3; font-weight: bold;}

.comentario,
.selector,
.propiedad,
.propiedades,
.clase,
.identificador,
.valor,
.rojo,
.verde,
.azul,
.morado,
.naranja,
.amarillo {font-family:consolas,'SCTO grotesk', serif; font-size: 1rem;}


.comentario {color:#FFDAB3;}
.selector{color:lime; }
.propiedad, .propiedades{ color:#ffbb00;}
.clase{ color:#FF7EE2;}
.identificador { color:#FFFF80;}
.valor{color:#77BEF0;}
/**** CELDAS CÓDIGO **/


.copy p {font-size: 0.9rem;}
.reference {margin-top:1.5rem; display:inline-block;}
.fas {margin-right:1rem;}

.color-clase1, .rojo     { color: #ff6b6b; }   /* brillante, contraste alto */
.color-clase2, .verde    { color: #9be564; }   /* verde lima, se lee muy bien */
.color-clase3, .azul     { color: #4dabf7; }   /* azul claro, contrastado */
.color-clase4, .morado   { color: #b794f6; }   /* violeta suave pero legible */
.color-clase5, .naranja  { color: #f78c6c; }   /* naranja vivo */
.color-clase6, .amarillo { color: #ffd166; }   /* amarillo cálido, no quema */
.texto-color{color:#fff;}