* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", sans-serif;
}



/* ===== NOTICIAS ===== */
.noticias {
    padding: 60px 5%;
    background: none;
}

.noticias h2 {
    text-align: center;
    margin-bottom: 40px;
}

.noticias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.noticia-card {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow:
        0 10px 20px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.7);
    transition: transform .3s, box-shadow .3s;
    font-size: 20px;
}

.noticia-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

.noticia-card a {
    display: inline-block;
    margin-top: 15px;
    color: #cc5200;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
}

/* ===== PERSONAL ===== */
.personal {
    padding: 60px 5%;
    background: #eef2f7;
    text-align: center;
}

.slider2 {
    position: relative;
    max-width:90%;
    margin: auto;
    overflow: hidden;
}

.slider2-track {
    display: flex;
    transition: transform .5s ease;
}

.card-personal {
    align-items: center;
    min-width: 300px;
    margin: 0 15px;
    background: #fff;
    border-radius: 20px;
    padding: 45px;
    box-shadow: 0 15px 30px rgba(0,0,0,.2);
    transition: transform .3s, box-shadow .3s;
}



.card-personal:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

.card-personal img {
    width: 100%;
    border-radius: 50%;
    margin-bottom: 15px;
}

.slider2-controls {
    margin-top: 20px;
}

.slider2-controls button {
    background: #cc630079;
    color: #fff;
    border: none;
    padding: 10px 18px;
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 10px;
}

/* ===== PARALLAX ===== */
.parallax {
    background-image: url("../img/613083808_122165642942614256_200512599664707288_n.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-content {
    background: rgba(0,0,0,.55);
    padding: 40px;
    color: #fff;
    text-align: center;
    border-radius: 15px;
}

/* ===== FOOTER ===== */
.footer {
   /* background: linear-gradient(180deg, #ffffff93, #eb8c118c, #fd8700);*/
   background-color: #000000;
    color: rgb(255, 255, 255);
    padding-top: 50px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 30px;
    padding: 0 5% 40px;
}

.footer a {
    color: #003;
    text-decoration: none;
}

.footer-copy {
    background: rgba(0,0,0,.15);
    text-align: center;
    padding: 15px;
    color: #fff;
}


* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

/* Card base */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Card horizontal */
.card.horizontal {
  display: flex;
  align-items: stretch;
}

.card.horizontal img {
  width: 40%;
  object-fit: cover;
}

.card-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-content h3 {
  margin: 0 0 8px;
}

.card-content p {
  font-size: 14px;
  color: #555;
  flex-grow: 1;
}

.card-content button {
  margin-top: 12px;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #ff73008c;
  color: #000000;
  cursor: pointer;
}

/* 📱 Tablet: 2 columnas */
@media (max-width: 900px) {
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 📱 Móvil: 1 columna + card vertical */
@media (max-width: 500px) {
  .cards-container {
    grid-template-columns: 1fr;
  }

  .card.horizontal {
    flex-direction: column;
  }

  .card.horizontal img {
    width: 100%;
    height: 180px;
  }
}




/*-----------------MENU CALCAHUALCO---------------------------*/

/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'Segoe UI', sans-serif;
}


/* HEADER */
header{
position:fixed;
width:100%;
top:0;
z-index:999;
transition:.8s;
}

/* NAVBAR */
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 40px;
/*background:linear-gradient(180deg,  #ff5800,  #ff7700, #FF804A );*/
/*background-image: url('../img/fondo_ant.png');*/
background-color: #000000;
backdrop-filter: blur(14%);

}

/* SCROLL EFECTO */
header.scrolled .navbar{
padding:8px 40px;
}

/* LOGO */
.logo{
margin-left: 70px;  
position:relative;
top:2px;
transition:.8s;
}


.logo:hover{
cursor: no-drop;
transform: scale(2.0) translate(50%, 90%);
box-shadow: #000000;
}

.logo img{
height:100px;
transition:.8s;
}


header.scrolled .logo{
top:0;
}

header.scrolled .logo img{
height:40px;
}

/* MENU */
.menu{
display:flex;
list-style:none;
gap:30px;
margin-right: 120px;
}

/* LINKS */
.menu li{
position:relative;
}

.menu a{
text-decoration:none;
color:rgb(255, 255, 255);
filter: drop-shadow(1px 5px 5px rgb(0, 0, 0));
font-weight:600;
padding:10px;
display:block;
position:relative;
overflow:hidden;
filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.61));
}

/* UNDERLINE ANIMADO */
.menu a::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0;
height:3px;
background:white;
transition:.4s;
}

.menu a:hover::after{
width:100%;
}

/* WAVE HOVER */
.menu a:hover{
animation:wave .4s ease;
background-color: #000000;
/*border-radius: 15px 0px 15px 0px;*/
filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.61));
}

@keyframes wave{
0%{transform:rotate(0);}
25%{transform:rotate(2deg);}
75%{transform:rotate(-2deg);}
100%{transform:rotate(0);}
}

/* SUBMENU */
.submenu{
position:absolute;
top:42px;
left:0;
background:rgb(32, 21, 11);
backdrop-filter: blur(15px);
list-style:none;
min-width:200px;
display:none;
border-radius:10px;
}

.submenu li{
border-bottom:1px solid rgba(255,255,255,.2);
}

.submenu a{
color:white;
}

.menu li:hover > .submenu{
display:block;
}

/* SUBMENU NIVEL 3 */
.submenu .submenu{
left:100%;
top:0;
}

/* HAMBURGUESA */
.toggle{
display:none;
flex-direction:column;
cursor:pointer;
}

.toggle span{
width:28px;
height:3px;
background:white;
margin:4px;
transition:.3s;
}

/* MOBILE */
@media(max-width:900px){

.logo img{
height:70px;
}

.toggle{
display:flex;
}

.menu{
position:absolute;
top:100%;
left:0;
width:100%;
flex-direction:column;
background:linear-gradient(90deg,#ff5800,#ff8c42);
max-height:0;
overflow:hidden;
transition:.4s;
}

.menu.active{
max-height:700px;
}

.menu li{
text-align:center;
}

.submenu{
position:static;
background:rgba(255,255,255,.08);
display:none;
}

.menu li.active > .submenu{
display:block;
}

}



section{
  height:100vh;
  padding-top:140px;
  font-size:38px;
  text-align:center;
}


/*---------------------------------SLIDER SHOW---------------------------------*/
/* SLIDER */
.slider{
  position:relative;
  height:100vh;
  overflow:hidden;
  margin-top: -25px;
}

.slides{
  height:100%;
  position:relative;
}

.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.15);
  opacity:0;
  transition:opacity 1s ease, transform 6s ease;
}

.slide.active{
  opacity:1;
  transform:scale(1);
  z-index:1;
}

/* PARALLAX */
.slide{
  background-attachment:fixed;
}

/* OVERLAY */
.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to right,rgba(0,0,0,.6),rgba(0,0,0,.25));
}

/* CONTENT */
.content{
  position:absolute;
  bottom:25%;
  left:8%;
  color:white;
  max-width:600px;
}

.content h2{
  font-size:48px;
  margin-bottom:15px;
}

.content p{
  font-size:20px;
  opacity:.9;
}

/* CONTROLES */
.control{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255, 255, 255, 0.192);
  border:none;
  color:white;
  font-size:32px;
  padding:14px 18px;
  cursor:pointer;
  border-radius:50%;
  transition:.3s;
  z-index:10;
}

.control:hover{
  background:#ffffff;
  color: black;
}

.prev{left:25px;}
.next{right:25px;}

/* RESPONSIVE */
@media(max-width:768px){
  .content h2{font-size:32px;}
  .content p{font-size:16px;}
}