:root{

--bg1:#f8f3ec;
--bg2:#eee1cf;

--text:#2f241b;
--muted:#7a6c5f;

--accent:#8b6b4d;
--accent2:#6f543c;

--card:#ffffff;
--soft:#faf7f3;

--line:rgba(139,107,77,0.15);

--shadow:0 18px 45px rgba(0,0,0,0.12);
--shadow-soft:0 10px 20px rgba(0,0,0,0.08);

}

*{
box-sizing:border-box;
}

body{

margin:0;

font-family:"Inter",sans-serif;

color:var(--text);

background:
radial-gradient(circle at top left,rgba(215,184,153,0.25),transparent 30%),
linear-gradient(135deg,var(--bg1),var(--bg2));

}

.page{

padding:14px;

}

.card{

background:var(--card);

border-radius:22px;

overflow:hidden;

border:1px solid var(--line);

box-shadow:var(--shadow);

}

.hero{

height:220px;

background:
linear-gradient(180deg,rgba(20,15,10,0.15),rgba(20,15,10,0.4)),
url("../img/hero/hero-santa-ana.png") center/cover no-repeat;

position:relative;

}

.hero-badge{

position:absolute;

top:14px;

left:50%;

transform:translateX(-50%);

background:white;

padding:8px 14px;

border-radius:999px;

font-size:0.75rem;

font-weight:700;

color:var(--accent);

border:1px solid var(--line);

}

.content{

padding:22px 16px;

}

.brand{

text-align:center;

}

.logo{

width:96px;

height:96px;

border-radius:20px;

border:1px solid var(--line);

padding:8px;

background:white;

margin:auto;

box-shadow:var(--shadow-soft);

}

.eyebrow{

margin-top:12px;

font-size:0.7rem;

letter-spacing:2px;

text-transform:uppercase;

color:var(--accent);

font-weight:700;

}

h1{

font-family:"Playfair Display",serif;

font-size:2.3rem;

margin:6px 0;

}

.domain{

color:var(--muted);

font-size:0.95rem;

}

.intro{

text-align:center;

margin-top:20px;

}

.intro h2{

font-family:"Playfair Display",serif;

font-size:1.6rem;

margin-bottom:10px;

}

.lead{

font-size:0.95rem;

line-height:1.6;

color:var(--muted);

}

.actions{

margin-top:22px;

}

.btn{

display:flex;

justify-content:center;

align-items:center;

height:52px;

border-radius:14px;

background:linear-gradient(135deg,var(--accent),var(--accent2));

color:white;

font-weight:700;

text-decoration:none;

box-shadow:var(--shadow-soft);

}

.btn:hover{

transform:translateY(-2px);

}

.mini-actions{

display:flex;

justify-content:center;

gap:12px;

margin-top:12px;

}

.icon-btn{

width:50px;

height:50px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

box-shadow:var(--shadow-soft);

}

.whatsapp{

background:#25D366;

}

.phone{

background:#4CAF50;

}

.icon-btn svg{

width:24px;

height:24px;

fill:white;

}

.phones{

display:flex;

flex-direction:column;

align-items:center;

gap:6px;

margin-top:12px;

font-weight:600;

}

.phones a{

color:var(--accent);

text-decoration:none;

font-size:0.95rem;

}

.phones a:hover{

text-decoration:underline;

}

.info-grid{

display:grid;

grid-template-columns:1fr;

gap:10px;

margin-top:24px;

}

.info-box{

padding:14px;

background:var(--soft);

border-radius:14px;

border:1px solid var(--line);

text-align:center;

}

.info-label{

font-size:0.85rem;

color:var(--muted);

}

.info-box strong{

display:block;

margin-top:4px;

}

@media(min-width:768px){

.page{

max-width:1100px;

margin:auto;

}

.card{

display:grid;

grid-template-columns:1fr 1fr;

}

.hero{

height:auto;

min-height:650px;

order:2;

}

.content{

padding:40px;

display:flex;

flex-direction:column;

justify-content:center;

}

.brand{

text-align:left;

}

.mini-actions{

justify-content:flex-start;

}

.phones{

align-items:flex-start;

}

.info-grid{

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

}

}