/* ===== LAYOUT ARTICULO ===== */

.layout{
max-width:1100px;/* ===== LAYOUT ARTICULO ===== */

.layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  padding: 40px 20px;
}


/* ===== CONTENIDO ARTICULO ===== */

article h1 {
  font-size: 32px;
  margin-bottom: 20px;
}

article p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.6;
}

article ul {
  margin-bottom: 20px;
  padding-left: 20px;
}

article li {
  margin-bottom: 6px;
}


/* ===== SIDEBAR ===== */

.sidebar {
  background: #f3f3f3;
  padding: 20px;
  border-radius: 8px;
}

.sidebar h3 {
  margin-top: 0;
  margin-bottom: 12px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin-bottom: 10px;
}

.sidebar a {
  text-decoration: none;
  color: #333;
  transition: 0.2s;
}

.sidebar a:hover {
  color: #ff00aa; /* corregido (antes "fuchsia") */
}


/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {

  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    margin-top: 30px;
  }

}
margin:auto;
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
padding:40px 20px;
}


/* ===== CONTENIDO ARTICULO ===== */

article h1{
font-size:32px;
margin-bottom:20px;
}

article p{
margin-bottom:18px;
font-size:16px;
line-height:1.6;
}

article ul{
margin-bottom:20px;
padding-left:20px;
}

article li{
margin-bottom:6px;
}


/* ===== SIDEBAR ===== */

.sidebar{
background:#f3f3f3;
padding:20px;
border-radius:8px;
}

.sidebar h3{
margin-top:0;
margin-bottom:10px;
}

.sidebar ul{
list-style:none;
padding:0;
}

.sidebar li{
margin-bottom:8px;
}

.sidebar a{
text-decoration:none;
color:#333;
}

.sidebar a:hover{
color:fuchsia;
}


/* ===== RESPONSIVE ===== */

@media (max-width:900px){

.layout{
grid-template-columns:1fr;
}

.sidebar{
margin-top:30px;
}

}