/* =========================
RESET
========================= */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins', sans-serif;
color:#333;

background-color:#F5F5F5;

/* FONDO GENERAL CON GRECAS */

background-image:

radial-gradient(circle at 20% 20%, rgba(230,213,184,0.25) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(15,76,69,0.10) 0%, transparent 40%),

url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230f4c45' stroke-width='1' opacity='0.07'%3E%3Cpath d='M0 60 L60 0 L120 60 L60 120 Z'/%3E%3Cpath d='M30 60 L60 30 L90 60 L60 90 Z'/%3E%3C/g%3E%3C/svg%3E");

background-repeat:repeat;

padding-top:85px;

}

/* =========================
HEADER
========================= */

header{

position:fixed;
top:0;
left:0;
width:100%;

/* FONDO DECORATIVO DEL HEADER */

background:

linear-gradient(
rgba(240,242,245,0.95),
rgba(240,242,245,0.95)
),

url("data:image/svg+xml,%3Csvg width='160' height='80' viewBox='0 0 160 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230f4c45' stroke-width='2' opacity='0.06'%3E%3Cpath d='M0 40 L40 0 L80 40 L120 0 L160 40'/%3E%3Cpath d='M0 60 L40 20 L80 60 L120 20 L160 60'/%3E%3C/g%3E%3C/svg%3E");

background-size:cover;

backdrop-filter:blur(6px);

padding:10px 0;

z-index:1000;

box-shadow:0 3px 12px rgba(0,0,0,0.08);

}

.nav-container{

width:92%;
max-width:1200px;

margin:auto;

display:flex;
align-items:center;
justify-content:space-between;

flex-wrap:wrap;

}

.logo{
display:flex;
align-items:center;
}

.logo img{
height:65px;
margin-right:10px;
}

.logo-text h1{
font-size:20px;
color:#8B5E3C;
}

.logo-text span{
font-size:12px;
color:#666;
}

nav{
display:flex;
flex-wrap:wrap;
}

nav a{

margin-left:20px;

text-decoration:none;

font-weight:500;

color:#1A3D5C;

transition:.3s;

}

nav a:hover{
color:#8B5E3C;
}

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

.hero{

min-height:75vh;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

color:white;

background:
linear-gradient(rgba(15,43,64,.65),rgba(15,43,64,.65)),
url('../img/hero.jpg') center/cover no-repeat;

}

.hero-text{
max-width:850px;
padding:20px;
}

.hero-text h1{
font-size:50px;
letter-spacing:2px;
}

.hero-text h2{
font-size:22px;
color:#E6D5B8;
margin-top:10px;
}

.hero-text p{
font-size:18px;
margin-top:15px;
}

/* =========================
SERVICIOS
========================= */

.servicios{
padding:90px 20px;
text-align:center;
}

.servicios h2{
font-size:36px;
color:#0f4c45;
margin-bottom:20px;
}

.grid-servicios{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:35px;

max-width:1200px;
margin:auto;
margin-top:40px;

}

.card{

background:white;

padding:30px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,0.08);

transition:.35s;

position:relative;
overflow:hidden;

}

.card::before{

content:"";

position:absolute;

top:0;
right:0;

width:120px;
height:120px;

background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230f4c45' stroke-width='2' opacity='0.07'%3E%3Cpath d='M0 60 L60 0 L120 60 L60 120 Z'/%3E%3C/g%3E%3C/svg%3E");

background-repeat:no-repeat;

}

.card:hover{
transform:translateY(-10px);
box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

.card img{

width:100%;
max-width:210px;

height:210px;

border-radius:50%;

object-fit:cover;

margin-bottom:20px;

box-shadow:0 8px 20px rgba(0,0,0,0.2);

}

.card h3{
color:#0f4c45;
font-size:20px;
margin-bottom:10px;
}

.card p{
color:#666;
font-size:15px;
}

/* =========================
CONTACTO
========================= */

.contacto{

background:

linear-gradient(rgba(15,43,64,.85),rgba(15,43,64,.85)),
url('../img/contact-bg.jpg') center/cover no-repeat;

padding:60px 20px;

text-align:center;

}

.contacto-overlay{

padding:40px;

border-radius:12px;

max-width:650px;

margin:auto;

color:white;

}

.contacto h2{
color:#E6D5B8;
margin-bottom:25px;
}

.contacto form{

background:white;

padding:30px;

border-radius:10px;

margin-bottom:20px;

}

.contacto input,
.contacto textarea{

width:100%;

padding:12px;

margin:10px 0;

border-radius:6px;

border:1px solid #ddd;

font-size:15px;

}

.contacto textarea{
height:110px;
}

.contacto button{

background:#8B5E3C;

color:white;

border:none;

padding:14px 35px;

border-radius:6px;

cursor:pointer;

transition:.3s;

}

.contacto button:hover{
background:#0f4c45;
}

.contact-info{
margin-top:10px;
}

.contact-item{
margin:8px 0;
font-size:15px;
}

.contact-logo img{
width:110px;
margin-top:20px;
}

/* =========================
FOOTER
========================= */

footer{

background:#0f2b40;

color:#E6D5B8;

text-align:center;

padding:25px;

font-size:14px;

}

/* =========================
WHATSAPP FLOAT
========================= */

.whatsapp-float{

position:fixed;

bottom:25px;
right:25px;

background:#25D366;

color:white;

width:60px;
height:60px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:28px;

box-shadow:0 10px 25px rgba(0,0,0,0.3);

z-index:999;

}

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

img{
max-width:100%;
height:auto;
}

@media (max-width:1024px){

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

.hero-text h1{
font-size:40px;
}

}

@media (max-width:768px){

nav{
width:100%;
justify-content:center;
margin-top:10px;
}

nav a{
margin:8px 12px;
}

.hero{
min-height:65vh;
}

.hero-text h1{
font-size:30px;
}

.hero-text h2{
font-size:18px;
}

.hero-text p{
font-size:15px;
}

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

.card img{
height:180px;
}

.logo img{
height:55px;
}

.contacto-overlay{
padding:25px;
}

}

@media (max-width:480px){

.hero-text h1{
font-size:26px;
}

.contacto form{
padding:20px;
}

.contacto input,
.contacto textarea{
font-size:14px;
}

}