:root{
--surface-primary:#F8F7F4;
--surface-secondary:#ECEAE5;
--surface-glass:rgba(248,247,244,0.7);

--accent-primary:#C05F3E;
--accent-secondary:#B47C5A;
--accent-olive:#A7A084;

--text-primary:#2F2D28;
--text-secondary:#625C51;
--text-on-accent:#FFFFFF;

--border-light:#E2DED6;

--font-heading:"Canela","Playfair Display",serif;
--font-body:"Inter","Manrope",sans-serif;

--fs-display:clamp(2.4rem,4vw,3.2rem);
--fs-h1:clamp(1.8rem,3vw,2.2rem);
--fs-h2:clamp(1.4rem,2.2vw,1.5rem);
--fs-h3:1.125rem;
--fs-body:1rem;
--fs-small:0.875rem;

--space-xs:0.5rem;
--space-sm:1rem;
--space-md:2rem;
--space-lg:3rem;
--space-xl:4rem;
--space-xxl:6rem;

--radius-sm:6px;
--radius-md:12px;
--radius-lg:24px;

--container-max:1280px;
--container-pad:2rem;

--transition:300ms ease-in-out;
}

@media (max-width:768px){
:root{
--container-pad:1rem;
}
}

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

html{
font-size:16px;
scroll-behavior:smooth;
}

body{
font-family:var(--font-body);
font-size:var(--fs-body);
color:var(--text-primary);
background:var(--surface-primary);
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

img,
picture,
video{
max-width:100%;
display:block;
}

input,
button,
textarea,
select{
font:inherit;
color:inherit;
background:none;
border:none;
outline:none;
}

button{
cursor:pointer;
}

a{
color:inherit;
text-decoration:none;
transition:color var(--transition);
}

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

h1,h2,h3,h4,h5,h6{
font-family:var(--font-heading);
font-weight:500;
letter-spacing:0.02em;
color:var(--text-primary);
line-height:1.2;
}

h1{font-size:var(--fs-display);}
h2{font-size:var(--fs-h1);}
h3{font-size:var(--fs-h2);}
h4{font-size:var(--fs-h3);}
h5{font-size:var(--fs-body);}
h6{font-size:var(--fs-small);}

p{
color:var(--text-secondary);
}

h1,h2,h3,h4,h5,h6,
p,
ul,
ol,
blockquote{
margin-bottom:var(--space-sm);
}

section{
margin-block:var(--space-lg);
}

@media (max-width:768px){
section{
margin-block:var(--space-md);
}
}

ul,ol{
padding-left:1.2em;
}

blockquote{
border-left:2px solid var(--accent-secondary);
padding-left:var(--space-sm);
color:var(--text-secondary);
}

hr{
border:none;
height:1px;
background:var(--border-light);
margin:var(--space-lg) 0;
}

.container{
width:100%;
max-width:var(--container-max);
margin-inline:auto;
padding-inline:var(--container-pad);
}

.surface{
background:var(--surface-secondary);
border:1px solid var(--border-light);
border-radius:var(--radius-md);
}

.surface-glass{
background:var(--surface-glass);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid var(--border-light);
}

.card{
background:var(--surface-secondary);
border:1px solid var(--border-light);
border-radius:var(--radius-md);
padding:var(--space-md);
}

@media (max-width:768px){
.card{
padding:var(--space-sm);
}
}

.card > *:last-child{
margin-bottom:0;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.5rem;
padding:0.9em 1.6em;
border-radius:var(--radius-lg);
font-weight:500;
font-size:var(--fs-body);
transition:all var(--transition);
white-space:nowrap;
min-width:0;
}

.btn-primary{
background:var(--accent-primary);
color:var(--text-on-accent);
border:1px solid var(--accent-secondary);
}

.btn-primary:hover{
background:var(--accent-primary);
color:var(--text-on-accent);
box-shadow:0 0 0 1px var(--accent-secondary);
}

.btn-full{
width:100%;
}

.input{
width:100%;
padding:0.75em 1em;
border-radius:var(--radius-sm);
border:1px solid var(--border-light);
background:#fff;
transition:border-color var(--transition);
min-width:0;
}

.input:focus{
border-color:var(--accent-olive);
}

.flex{
display:flex;
gap:var(--space-sm);
min-width:0;
}

.flex-center{
display:flex;
align-items:center;
justify-content:center;
gap:var(--space-sm);
min-width:0;
}

.flex-between{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-sm);
min-width:0;
}

.stack > * + *{
margin-top:var(--space-sm);
}

.divider{
height:1px;
background:var(--border-light);
width:100%;
}

.rounded{
border-radius:var(--radius-md);
}

.media-frame{
padding:8px;
background:#fff;
border-radius:var(--radius-md);
}

.media-frame img{
border-radius:var(--radius-md);
transition:transform var(--transition);
}

.media-frame:hover img{
transform:scale(1.03);
}

.glow-hover{
transition:box-shadow var(--transition),border-color var(--transition);
}

.glow-hover:hover{
box-shadow:0 0 0 1px var(--accent-secondary);
border-color:var(--accent-secondary);
}

.text-center{
text-align:center;
}

.text-muted{
color:var(--text-secondary);
}

small{
font-size:var(--fs-small);
color:var(--text-secondary);
}

.grid-3{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--space-md);
}

.grid-2{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-md);
}

.grid-4{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--space-md);
}

.grid-3>*,
.grid-2>*,
.grid-4>*{
min-width:0;
}

.media-band{
position:relative;
min-height:60vh;
display:flex;
align-items:center;
overflow:hidden;
}

.media-band>img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}

.media-band::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,0.55),rgba(0,0,0,0.2));
}

.media-band-content{
position:relative;
z-index:2;
color:#fff;
display:flex;
flex-direction:column;
gap:var(--space-sm);
}

.media-band-content h2,
.media-band-content h3,
.media-band-content p{
color:#fff;
}

.stat-strip{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--space-md);
}

.stat-item{
text-align:center;
padding:var(--space-md);
}

.stat-item strong{
display:block;
font-family:var(--font-heading);
font-size:var(--fs-h1);
color:var(--accent-primary);
}

.stat-item span{
color:var(--text-secondary);
font-size:var(--fs-small);
}

@supports (-webkit-backdrop-filter:none) or (backdrop-filter:none){
.media-band-content{
text-shadow:0 1px 3px rgba(0,0,0,0.4);
}
}

@media (max-width:900px){
.grid-4{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.stat-strip{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:640px){
.grid-3,
.grid-2,
.grid-4{
grid-template-columns:1fr;
}
.stat-strip{
grid-template-columns:1fr 1fr;
}
}