* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
    background: linear-gradient(to bottom, #4f500d, #b8b826, #f0f79a);
    font-family: 'Markazi Text',serif;
    margin: 3rem;
    margin-bottom: 3rem;
    margin-left: 5%;
    margin-right: 5%;
    max-width: 1024rem;
    min-height:100dvh;
    
}

h1{
    font-size: 3rem;

}
h2{
    font-size: 2rem;

}


main{
  width: min(100%, 1100px);   /* <= el “ancho de media página” que quieres */
  margin-inline: auto;        /* centra horizontalmente */
  padding-inline: clamp(12px, 3vw, 24px);
}



header > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    margin-bottom: 1rem;
}
nav{
    /*border: 0.01rem solid black;*/
    
    border-radius: 12px;
    height: 2.5rem;
    
    
}

nav a:hover{
  background-color: rgb(137, 150, 100);
  transition: background-color .3s;
}
    

nav ul{
    display: flex;
    align-items:stretch;
    justify-content: center;
    list-style: none;
    height: 100%;
    width: 100%;
}
nav li{
    display: flex;               /* no hace falta inline-flex */
    height: 100%;                /* <— clave */
    border-radius: 12px;
    
}
nav li:first-child a {
   
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

nav li:last-child a{
 
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}


nav a{
    display: flex;               /* para centrar el texto vertical */
    align-items: center;
    justify-content: center;
    height: 100%;                /* <— clave */
    padding: 0 1rem;             /* ancho cómodo del botón */
    text-decoration: none;
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    background-color: rgb(67, 73, 10);
           /* que el color siga el radio */
}


nav a::after{
    color: rgb(134, 29, 29);
}

section{
    display: flex;
}

article{
    flex: 1;
}

footer {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}
footer div{
    flex: 1;
    
}

article.principal_article {
    position: relative;
    
    margin: 1rem auto;             
    overflow: hidden;
    border-radius: 10px;
    max-width: 1000px;             
    width: 100%;
    
}

article img.principal {
    width: 100%;
    height: 400px;
    display: block;
    
}


.principal_article {
  position: relative;
  width: 100%;
  
  overflow: hidden;
  border-radius: 10px;
}
.principal_article h1{
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 2rem;
  font-weight: 700;
  z-index: 2;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.principal_article p{
    visibility: hidden;
    position: absolute;
    bottom: 20px;
    color: white;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 700;
    z-index: 2;
    margin-left: 8px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);;
}

section.second {
    display: flex;
    justify-content:space-evenly;
    gap: 1rem;
    margin-top: 1rem;
    height: 250px;
}


article img.content-image {
    width: 100%;
    height: stretch;
    
    
}

img:hover{
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

.sub {
  position: relative;
  width: 100%;
  max-width: 300px;
  overflow: hidden;
  border-radius: 10px;
}
.sub h1{
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 2rem;
  font-weight: 700;
  z-index: 2;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6); /* mejora legibilidad */
}

.sub p{
    visibility: hidden;
    position: absolute;
    bottom: 20px;
    color: white;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 700;
    z-index: 2;
    margin-left: 8px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.sub:hover p{
    visibility: visible;
    color: white;
    transition:3s ;
}

.principal_article:hover p{
    visibility: visible;
    color: white;
    transition:3s ;
}

footer div p{
    border-top: black 0.1rem solid;
    text-align: end;
    
}
footer div img{
    height: 3rem;
    width: 3rem;
    
}