@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* RESET */
* {
 margin:0;
 padding:0;
 box-sizing: border-box; 
}

body{
 font-family: 'Open Sans', sans-serif;
}

/* HEADER */
header{
 width: 100%;
 height: 55px;
 background: #333;
 color: #fff;
 position: fixed;
 top:0;
 left:0;
 z-index: 100;
}

.contenedor{
 width: 100%;
 margin: auto;
}

.logo{
 float: left;
 cursor: pointer;
} 

h1{
 float: left;
 font-size: 22px; 
} 

header .contenedor{
 display: table;
} 

section{
 width: 100%;
 margin-bottom: 25px;
} 

/* BIENVENIDOS */
#bienvenidos{
 text-align: center;
 padding: 15px 0 5px 0;
} 

#bienvenidos2 {
 text-align: center;
 padding: 15px 0 5px 0;
 background-color: #2c60b6;
 color: white;
 font-weight: bold;
 animation: aparecer 1.5s ease-in-out;
} 

#bienvenidos3 {
 text-align: center;
 padding: 5px 0;
 background-color: rgb(248, 148, 156);
 color: white;
 font-weight: bold;
 animation: aparecer 5.5s ease-in-out;
 animation: deslizarAbajo 2s ease-out;
} 

/* ANIMACIONES */
@keyframes aparecer {
 from { opacity: 0; }
 to { opacity: 1; }
} 

@keyframes deslizarAbajo {
 from {
  transform: translateY(-30px);
  opacity: 0;
 }
 to {
  transform: translateY(0);
  opacity: 1;
 }
}

/* ⚠️ ESTE ERA EL PROBLEMA ORIGINAL */
@media(min-width:1024px){
 .contenedor{
  width: 1000px;
 }
}

/* RESPONSIVE GENERAL */
@media(max-width:500px){
 .contenedor{
  width: 300px;
 }
 h1{
  font-size: 20px;
 } 
}

@media(max-width:350px){
 .contenedor{
  width: 320px;
 } 
 .contenedor h3{
  font-size: 12px;
 }
 .contenedor h5{
  font-size: 10px;
 } 
}

/* ========================= */
/* ✅ SOLUCIÓN DEFINITIVA BLOG */
/* ========================= */

/* ✅ FORZAR ANCHO SOLO EN BLOG (IGNORA 1000px) */
#blog .contenedor{
 width: 100% !important;
 max-width: 1400px !important;
 margin: auto;
}

/* ✅ GRID PERFECTO 4 COLUMNAS */
#blog .contenedor{
 display: grid !important;
 grid-template-columns: repeat(4, 1fr) !important;
 gap: 20px;
}

/* ✅ ITEMS */
#blog article{
 width: 100% !important;
}

/* ✅ IMÁGENES */
#blog img{
 width: 100%;
 height: auto;
 display: block;
 cursor: pointer;
}

/* ✅ VIDEO */
#blog video{
 width: 100%;
 height: 191px;
 cursor: pointer;
}

/* ✅ TEXTOS */
#blog h3{
 text-align: center;
 background: rgba(0,0,0,0.5);
 color: #fff;
 padding: 15px;
}

#blog h4{
 text-align: center;
}

/* ✅ EFECTO HOVER */
#blog article img{
 transition: transform 0.3s ease;
}

#blog article:hover img{
 transform: scale(1.05);
}

/* ✅ RESPONSIVE BLOG */

/* Tablet */
@media (max-width: 900px){
 #blog .contenedor{
  grid-template-columns: repeat(2, 1fr) !important;
 }
}

/* Móvil */
@media (max-width: 500px){
 #blog .contenedor{
  grid-template-columns: 1fr !important;
 }
}