:root{
/* BACKGROUNDS (warm beige/browns inspired by cardboard) */
--bg-main: #f5f1e8;           /* soft cream - main page */
--bg-soft: #e8dcc8;           /* warm sand - hero + panels */
--bg-card: #faf7f0;           /* off-white cards for contrast */

/* ACCENTS (rich browns and burnt orange for depth) */
--accent: #c87533;            /* burnt orange/terracotta - vibrant but natural */
--accent-light: #d4965f;      /* lighter caramel hover */
--accent-dark: #8b5a2b;       /* deep brown for depth */

/* TEXT */
--text-dark: #2d2520;         /* dark chocolate brown for readability */
--text-muted: #6b5d52;        /* warm medium brown */

/* EFFECTS */
--shadow-soft: 0 12px 35px rgba(45, 37, 32, 0.15);
--shadow-hover: 0 20px 45px rgba(45, 37, 32, 0.25);
--radius: 14px;

/* SUBTLE GRADIENTS for depth */
--gradient-warm: linear-gradient(135deg, #f5f1e8, #ede4d3);
--gradient-accent: linear-gradient(135deg, #c87533, #d4965f);
}

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

html,body{height:100%}

body{
display:flex;
flex-direction:column;
min-height:100vh;
font-family:'Poppins',sans-serif;
background:var(--bg-main);
color:var(--text-dark);
}

/* TEXT */

h1,h2,h3{
line-height:1.25;
color:var(--text-dark);
}

p{
font-size:16px;
line-height:1.7;
color:var(--text-muted);
}

/* NAVBAR */

nav{
position:sticky;
top:0;
background:var(--bg-card);
border-bottom:2px solid #d4c4a8;
padding:18px 6%;
display:flex;
align-items:center;
justify-content:space-between;
z-index:1000;
box-shadow: 0 4px 12px rgba(45, 37, 32, 0.08);
}

.brand{
display:flex;
align-items:center;
gap:14px;
}

.brand img{
height:52px;
filter: drop-shadow(2px 2px 4px rgba(45, 37, 32, 0.1));
}

.brand span{
font-size:28px;
font-weight:600;
color:var(--accent-dark);
}

/* DESKTOP MENU */

.navlinks{
display:flex;
gap:36px;
}

.navlinks a{
text-decoration:none;
font-size:18px;
font-weight:500;
color:var(--text-muted);
transition: all 0.3s;
position: relative;
}

.navlinks a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--accent);
transition: width 0.3s;
}

.navlinks a:hover {
color: var(--accent);
}

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

/* MOBILE BUTTON */

.menu-toggle{
display:none;
font-size:32px;
cursor:pointer;
color:var(--accent);
}

/* HERO */

.hero{
padding:120px 6%;
background: var(--gradient-warm);
position: relative;
}

.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(200, 117, 51, 0.03) 2px, rgba(200, 117, 51, 0.03) 4px);
pointer-events: none;
}

.hero-inner{
display:flex;
align-items:center;
gap:60px;
flex-wrap:wrap;
position: relative;
z-index: 1;
}

.hero h1{
font-size:48px;
margin-bottom:20px;
color:var(--accent-dark);
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
}

.hero p{
max-width:600px;
margin-bottom:30px;
}

/* BUTTON */

.cta-btn{
background: var(--gradient-accent);
color:white;
padding:14px 32px;
border-radius:30px;
text-decoration:none;
font-weight: 600;
box-shadow: 0 8px 20px rgba(200, 117, 51, 0.3);
transition: all 0.3s;
display: inline-block;
border: 2px solid transparent;
}

.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(200, 117, 51, 0.4);
border-color: var(--accent-dark);
}

/* SECTIONS */

section{
padding:110px 6%;
}

section:nth-child(even){
background: #ebe2d1;
background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(45, 37, 32, 0.02) 10px, rgba(45, 37, 32, 0.02) 20px);
}

h2{
font-size:34px;
margin-bottom:22px;
color:var(--accent-dark);
}

.section-sub{
max-width:600px;
}

/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:45px;
margin-top:40px;
}

/* CARDS */

.card{
background:var(--bg-card);
border-radius:14px;
padding:32px;
border:2px solid #e8dcc8;
box-shadow: var(--shadow-soft);
transition:.3s;
position: relative;
overflow: hidden;
}

.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-accent);
transform: scaleX(0);
transition: transform 0.3s;
}

.card::after {
content: '';
position: absolute;
bottom: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(200, 117, 51, 0.05), transparent 70%);
pointer-events: none;
}

.card:hover::before {
transform: scaleX(1);
}

.card:hover{
transform:translateY(-8px);
box-shadow: var(--shadow-hover);
border-color: var(--accent);
background: #fff;
}

.card img{
width:100%;
height:220px;
object-fit:cover;
border-radius:12px;
margin-bottom:18px;
border: 2px solid #e8dcc8;
transition: all 0.3s;
}

.card:hover img {
border-color: var(--accent-light);
}

.card h3{
margin-bottom:14px;
font-size:20px;
color:var(--accent-dark);
}

/* FOOTER */

footer{
margin-top:auto;
background: linear-gradient(135deg, #8b5a2b, #6b4423);
color:#f5f1e8;
text-align:center;
padding:30px;
box-shadow: 0 -4px 12px rgba(45, 37, 32, 0.15);
}

footer p {
color: #e8dcc8;
}

/* FLOAT BUTTONS */

.float-wrap{
position:fixed;
bottom:22px;
right:22px;
display:flex;
flex-direction:column;
gap:14px;
z-index:9999;
}

.float-btn{
width:56px;
height:56px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 10px 25px rgba(45, 37, 32, 0.25);
transition: all 0.3s;
border: 2px solid transparent;
}

.float-btn:hover {
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(200, 117, 51, 0.4);
border-color: var(--accent-dark);
}

.float-whatsapp{
background:#ffffff;
}

.float-call{
background:#ffffff;
color:#111;
font-size:22px;
}

/* optional: give both a subtle border */

.float-btn{
border:1px solid #e0e0e0;
}


.float-whatsapp img{width:28px}

/* ANIMATION */

.reveal{
opacity:0;
transform:translateY(40px);
transition:.8s;
}

.reveal.show{
opacity:1;
transform:none;
}

/* MOBILE */

@media(max-width:768px){

.menu-toggle{
display:block;
margin-left:auto;
font-size:32px;
}

/* RIGHT SLIDE PANEL */

.navlinks{
position:fixed;
top:0;
right:-100%;
height:100vh;
width:75%;
max-width:280px;
background:var(--bg-card);
padding-top:100px;
display:flex;
flex-direction:column;
box-shadow:-8px 0 40px rgba(45, 37, 32, 0.3);
transition:.4s ease;
border-left: 4px solid var(--accent);
}

.navlinks.open{
right:0;
}

/* MENU ITEMS */

.navlinks a{
font-size:22px;
font-weight:600;
padding:18px 30px;
color:var(--text-muted);
border-bottom:1px solid #d4c4a8;
transition: all 0.3s;
}

.navlinks a::after {
display: none;
}

.navlinks a:hover {
color: var(--accent);
background: rgba(200, 117, 51, 0.05);
}

/* HERO MOBILE */

.hero-inner{flex-direction:column}

.hero h1{font-size:32px}

.brand span{font-size:20px}

.brand img{height:40px;}

}