/*
Theme Name: Gente de Cristo V2
Theme URI: https://gentedecristo.org
Author: Gente de Cristo
Description: Tema cristiano responsive con transmisión en vivo, videos, versículo diario y redes sociales.
Version: 2.0
*/

*{box-sizing:border-box}

body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#ffffff;
color:#333;
}

/* HEADER */

header{
background:#c40000;
color:#fff;
text-align:center;
padding:80px 20px 60px;
}

header img{
max-width:160px;
position:fixed;
left:20px;
top:20px;
z-index:1000;
}

h1{margin-top:0}

.verso-destacado{
font-size:30px;
max-width:900px;
margin:25px auto 0 auto;
line-height:1.5;
font-style:italic;
animation:fadeVerse 4s ease-in-out infinite alternate;
}

@keyframes fadeVerse{
0%{opacity:.6;transform:translateY(6px)}
100%{opacity:1;transform:translateY(0)}
}

/* SECTIONS */

section{
padding:60px 20px;
max-width:1100px;
margin:auto;
}

.live iframe{
width:100%;
height:480px;
border:none;
border-radius:10px;
}

/* VIDEOS */

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

.video-grid iframe{
width:100%;
height:220px;
border:none;
border-radius:8px;
}

/* DAILY VERSE */

.versiculo{
background:#f6f6f6;
padding:30px;
border-radius:10px;
font-size:20px;
text-align:center;
}

/* SOCIAL */

.redes{text-align:center}

.redes a{
display:inline-block;
margin:10px;
padding:14px 22px;
border-radius:6px;
text-decoration:none;
color:#fff;
font-weight:bold;
}

.youtube{background:#cc0000}
.instagram{background:#e4405f}
.facebook{background:#1877f2}

/* FOOTER */

footer{
background:#111;
color:#fff;
text-align:center;
padding:25px;
}

/* TABLET */

@media(max-width:900px){

.video-grid{
grid-template-columns:repeat(2,1fr);
}

.live iframe{
height:380px;
}

.verso-destacado{
font-size:24px;
}

}

/* MOBILE */

@media(max-width:600px){

header{
padding-top:120px;
}

header img{
position:absolute;
left:50%;
transform:translateX(-50%);
top:20px;
max-width:120px;
}

.video-grid{
grid-template-columns:1fr;
}

.live iframe{
height:240px;
}

.verso-destacado{
font-size:20px;
padding:0 10px;
}

.redes a{
display:block;
width:80%;
margin:12px auto;
}

}