* {margin: 30px;
} 


body{
	background: #CCCCCC;
	font-family:Arial, Helvetiva, sans-serif;
}

header{
background: red;
height: 200px;
width: 100%;
text-align:center;
font-size: 30px;
color: white;
border-bottom:3px solid black;
padding:45px;
}

nav{
background: white;
height:0px;
border-bottom: 3px solid black;
width: 100%;
}

nav h2{
text-align:center;
width: 100%;
}

nav ul li{
float:left;
list-style: none;
margin:1px;

}

.clearfix{clear:both;}

.cta-link{
display:inline-block;
position: relative;
padding:14px 4px 28px;
border-radius:12px;

background:linear-gradient (135deg, #00c9a7, #0077cf0);
color:#6633FF;
font-size:16px;
font-weight:600;
text-decoration:none;
overflow:hidden;
transition:all 0.3s ease;
box-shadow: 0 8px 20px rgba(0,124,240,0.3);
}
.cta-link span{
position:relative;
z-index:2;
}
.cta-link::before{
content:"";
position:absolute;
top:0;
left:-75%;
width:50%;
height:100%;
background: rgba(255,255,255,0.3)
transform:skewX(-20deg);
transition:all 0.5s ease;
}
.cta-link:hover{
transform: translate(-3px) scale (1.03);
box-shadow:0 12px 30px rgba(0,124,240,0.5);
}

.cta-link:hover{
left:130%;
}

.cta-link:active{
trnasform:scale(0.98);
}

table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #ddd;}
th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 10px;
        }

        article {
            aspect-ratio: 1 / 1; /* mantiene forma cuadrada */
            border-radius: 15px;
            padding: 10px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            font-weight: bold;
        }

        /* Colores vistosos distintos */
        article:nth-child(1) { background: #ff6b6b; }
        article:nth-child(2) { background: #feca57; }
        article:nth-child(3) { background: #48dbfb; }
        article:nth-child(4) { background: #1dd1a1; }
        article:nth-child(5) { background: #5f27cd; }
        article:nth-child(6) { background: #ff9ff3; }
        article:nth-child(7) { background: #00d2d3; }
        article:nth-child(8) { background: #ff9f43; }
        article:nth-child(9) { background: #10ac84; }
        article:nth-child(10){ background: #ee5253; }
        article:nth-child(11){ background: #2e86de; }
	article:nth-child(12){ background: #CC6600; }
        .icono {
            font-size: 40px; /* puedes cambiarlo por imágenes */
        }

        .texto {
            font-size: 20px;
        }



.div1 {
  width: 100%; /* The element will try to be 100% of its parent's width */
  padding-left :15px;
  background-color: #FFCC99;
  border: 1px solid black;
  height:40px;
  line-height: 40px;
  font-size:25px;
}
.div2 {
  width: 100%; /* The element will try to be 100% of its parent's width */
  padding-left :15px;
  background-color: #99FF99;
  border: 1px solid black;
  height:40px;
  line-height: 40px;
  font-size:25px;
}

.div3 {
  width: 100%; /* The element will try to be 100% of its parent's width */
  padding-left :15px;
  background-color: #99FFFF;
  border: 1px solid black;
  height:40px;
  line-height: 40px;
  font-size:25px;
}
.div4 {
  width: 100%; /* The element will try to be 100% of its parent's width */
  padding-left :15px;
  /*background-color: #99FFFF; */
  border: 1px solid black;
  height:40px;
  line-height: 40px;
  font-size:25px;
}







footer{
background:white ;
color: black;
text-align:center;
height: 50px;
line-height: 50px;
width: 100%;
}