/* ============================= */
/* ABOUT HERO */
/* ============================= */

.hero{
height:100vh;
background-image:url('img/about-hero.jpg');
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;
color:white;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:linear-gradient(
90deg,
rgba(0,0,0,.7),
rgba(0,0,0,.2)
);
}

.hero-content{
position:relative;
z-index:2;
}

.subtitle{
font-size:13px;
letter-spacing:2px;
margin-bottom:20px;
opacity:.8;
}

.hero h1{
font-size:70px;
font-weight:800;
line-height:75px;
margin-bottom:30px;
}

.scroll{
font-size:14px;
opacity:.8;
cursor:pointer;
}


/* ============================= */
/* ABOUT US */
/* ============================= */

.about-us{
padding:120px 8%;
background:white;
}

.about-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
max-width:1200px;
margin:auto;
}

.about-tag{
font-size:12px;
letter-spacing:2px;
color:#888;
}

.about-text h2{
font-size:40px;
margin:15px 0 25px;
line-height:1.3;
}

.about-text p{
color:#666;
line-height:26px;
margin-bottom:15px;
}

.about-btn{
display:inline-block;
margin-top:20px;
background:#111;
color:white;
padding:12px 26px;
border-radius:4px;
text-decoration:none;
font-size:14px;
}


/* ============================= */
/* ABOUT IMAGE */
/* ============================= */

.about-images{
width:100%;
max-width:700px;
border-radius:20px;
overflow:hidden;
position:relative;
box-shadow:0 25px 60px rgba(0,0,0,.08);
transition:transform .5s ease, box-shadow .5s ease;
margin:auto;
}

.about-images img{
width:100%;
height:380px;
object-fit:cover;
display:block;
transition:transform .7s ease;
}

/* brillo */

.about-images::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
120deg,
rgba(255,255,255,0) 40%,
rgba(255,255,255,.25) 50%,
rgba(255,255,255,0) 60%
);
transform:translateX(-100%);
transition:transform .9s ease;
}

.about-images:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 40px 90px rgba(0,0,0,.12);
}

.about-images:hover img{
transform:scale(1.06);
}

.about-images:hover::after{
transform:translateX(100%);
}

.img-main{
width:100%;
border-radius:20px;
}


/* CARD */

.about-card{
position:absolute;
bottom:10px;
left:10px;
background:white;
padding:18px 22px;
max-width:200px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
border-radius:12px;
}

.about-card h3{
font-size:20px;
margin-bottom:4px;
font-weight:700;
}

.about-card p{
font-size:13px;
color:#666;
margin:0;
}


/* ============================= */
/* RESPONSIVE ABOUT */
/* ============================= */

@media(max-width:1000px){

.about-container{
grid-template-columns:1fr;
}

.about-card{
left:20px;
}

}


/* ============================= */
/* SECTION 2 */
/* ============================= */

.church-section{
padding:120px 8%;
background:linear-gradient(180deg,#f8fbfa,#eef3f1);
font-family:system-ui,-apple-system,sans-serif;
}

.church-container{
display:flex;
align-items:center;
gap:80px;
max-width:1400px;
margin:auto;
}

.church-content{
flex:1;
max-width:620px;
opacity:0;
transform:translateY(40px);
transition:1s ease;
}

.church-tag{
font-size:13px;
letter-spacing:2px;
color:#64748b;
}

.church-title{
font-size:52px;
margin:20px 0;
color:#0f172a;
line-height:1.05;
font-weight:700;
}

.church-text{
color:#475569;
line-height:1.9;
margin-bottom:20px;
font-size:16px;
}

.church-features{
margin-top:35px;
}

.feature{
margin-bottom:16px;
color:#334155;
font-size:15px;
}


/* IMAGE SIDE */

.church-visual{
flex:1;
position:relative;
opacity:0;
transform:translateY(40px);
transition:1s ease .2s;
border-radius:28px;
overflow:hidden;
box-shadow:0 30px 60px rgba(0,0,0,0.08);
}

/* imagen */

.church-visual img{
width:100%;
display:block;
border-radius:28px;
transition:transform .7s ease;
}

/* brillo reflejo */

.church-visual::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
120deg,
rgba(255,255,255,0) 40%,
rgba(255,255,255,.25) 50%,
rgba(255,255,255,0) 60%

);

transform:translateX(-100%);
transition:transform .9s ease;
}

/* hover */
.church-visual:hover{
transform:translateY(-6px) scale(1.01);
box-shadow:0 40px 90px rgba(0,0,0,0.12);
}

.church-visual:hover img{
transform:scale(1.05);
}

.church-visual:hover::after{
transform:translateX(100%);
}


/* GLASS CARD */

.service-card{
position:absolute;
bottom:40px;
right:40px;
border-radius:18px;
overflow:hidden;
backdrop-filter:blur(20px);
transition:.35s;
}

.service-card:hover{
transform:translateY(-6px) scale(1.03);
}

.glass-effect{
position:absolute;
inset:0;

background:linear-gradient(
135deg,
rgba(255,255,255,0.30),
rgba(255,255,255,0.05)
);

backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,0.25);
}

.service-content{
padding:10px 24px;
min-width:240px;
color: white;
}

.service-content p{
font-size:12px;
margin-bottom:2px;
}

.service-content h3{
font-size:16px;
}


/* ANIMATION */
.show{
opacity:1;
transform:translateY(0);
}


/* RESPONSIVE */

@media(max-width:1100px){

.church-container{
flex-direction:column;
gap:60px;
}

.church-title{
font-size:42px;
}

.service-card{
right:30px;
bottom:30px;
}
}

@media(max-width:700px){
.church-section{
padding:80px 6%;
}

.church-title{
font-size:32px;
}

.service-card{
position:relative;
margin-top:-70px;
right:auto;
bottom:auto;
width:fit-content;
}

}

/* ============================= */
/* SECTION 3 */
/* ============================= */
.hero-full{
width:100%;
height:90vh;
position:relative;
overflow:hidden;
}

/* imagen animada */

.hero-img{
position:absolute;
inset:-5%;   /* permite movimiento sin mostrar bordes */
background-image:url("img/hero-about-bg.jpg");
background-size:cover;
background-position:center;
animation:heroMove 25s ease-in-out infinite alternate;
}

.hero-full:hover .hero-img{
filter:brightness(1.05) contrast(1.05);
transition:1s;
}

/* animación cinematográfica */

@keyframes heroMove{
0%{
transform:scale(1.1) translate(0px,0px);
}
25%{
transform:scale(1.15) translate(-20px,-10px);
}
50%{
transform:scale(1.18) translate(15px,-15px);
}
75%{
transform:scale(1.14) translate(-10px,15px);
}
100%{
transform:scale(1.2) translate(20px,10px);
}
}

/* ============================= */
/* SECTION 4 */
/* ============================= */
.about-minimal{
padding:100px 8%;
background:white;
font-family:system-ui;
}

.about-minimal-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
max-width:2100px;
margin:auto;
}

.about-minimal-image{
width:110%;
max-width:650px;
border-radius:22px;
overflow:hidden;
position:relative;
box-shadow:0 25px 60px rgba(0,0,0,.08);
transition:transform .5s ease,
box-shadow .5s ease;
margin:auto;
}

.about-minimal-image img{
width:100%;
height:420px;
object-fit:cover;
display:block;
transition:transform .7s ease;
}

/* brillo */
.about-minimal-image::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
120deg,
rgba(255,255,255,0) 40%,
rgba(255,255,255,.25) 50%,
rgba(255,255,255,0) 60%

);
transform:translateX(-100%);
transition:transform .9s ease;
}

/* hover */

.about-minimal-image:hover{
transform:translateY(-6px) scale(1.01);
box-shadow:0 40px 90px rgba(0,0,0,.12);
}

.about-minimal-image:hover img{
transform:scale(1.05);
}

.about-minimal-image:hover::after{
transform:translateX(100%);
}

.about-minimal-text span{
font-size:12px;
letter-spacing:2px;
color:#888;
}

.about-minimal-text h2{
font-size:40px;
margin:10px 0 20px;
line-height:1.2;
}

.about-minimal-text p{
color:#555;
line-height:1.7;
margin-bottom:15px;
}

@media(max-width:900px){

.about-minimal-container{
grid-template-columns:1fr;
gap:40px;
text-align:center;
}

.about-minimal-image{
margin:auto;
}

}