/* 1. Caja calculada correctamente incluyendo bordes y padding */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* 3. Evitar saltos de scroll y mejorar la altura del body */
html, body {
  height: 100%;
}

/* 4. Tipografía base más fluida y legible */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 5. Evitar que elementos multimedia desborden su contenedor */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Heredar fuentes en elementos de formulario */
input, button, textarea, select {
  font: inherit;
}

/* 7. Evitar desbordamiento de texto largo */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*====================== mi css ======================*/
body {
    font-family: "Cascadia Code";
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
p i {
    color:black;
}

header {

    padding:1em;
}

header h1 {
    margin: 10px 0;
    text-transform: uppercase;
}

header ul {
    list-style: none;
}

header ul a {
    font-weight: bold;
}

nav {

    padding: 1em;
}

nav ul {
    list-style: none;
}

nav li {
  list-style: none;
}

main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 1em;
}

main div {
    padding: 1em;
    border-right: solid 1px black;
    border-right-style: dashed;
    border-right-width: 2px; /* Necesita un grosor para ser visible */
    border-right-color: black; /* Necesita un color para ser visible */
}

section {
    padding: 1em;
}

article {
    padding: 1em;
    margin-bottom: 1em;
}

aside {

    padding: 1em;
}

footer {
    padding: 1em;
}

@media (min-width: 768px) {
    /* En pantallas grandes, el Main se divide en: Contenido (75%) y Aside (25%) */
    main {
        grid-template-columns: 3fr 1fr;
    }
}