* { box-sizing: border-box; }
body { margin:0; font-family:Arial; }
.app { padding:20px; }
:root { --gap:12px; }
section { margin:40px 0; }

.full { display:flex; justify-content:center; align-items:center; min-height:50vh; }
.card { padding:20px; border:1px solid #ddd; border-radius:12px; }

.nav { display:flex; align-items:center; gap:var(--gap); padding:10px; border-bottom:1px solid #eee; }
.menu { display:flex; gap:var(--gap); justify-content:center; flex:1; }
.cta { padding:8px 12px; border-radius:8px; border:1px solid #ddd; }

.cards { display:flex; flex-wrap:wrap; gap:var(--gap); }
.cards .card { flex:1 1 220px; text-align:center; }

.layout { display:flex; gap:var(--gap); }
.sidebar { width:240px; border:1px solid #ddd; padding:10px; }
.content { flex:1; border:1px solid #ddd; padding:10px; }

.pricing { display:flex; gap:24px; }
.price { display:flex; align-items:baseline; gap:6px; }
.amount { font-size:48px; font-weight:bold; }

.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.grid3 div { border:1px solid #ddd; padding:20px; text-align:center; }

.page {
 display:grid;
 grid-template-columns:240px 1fr;
 grid-template-rows:auto 1fr auto;
 gap:var(--gap);
 grid-template-areas:
 "hdr hdr"
 "sbr mn"
 "ftr ftr";
}
.hdr{grid-area:hdr;}
.sbr{grid-area:sbr;}
.mn{grid-area:mn;}
.ftr{grid-area:ftr;}
.page > *{border:1px solid #ddd;padding:10px;}

.auto { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

.galeria { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.galeria img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; }

.hero { display:grid; place-items:center; }
.hero > * { grid-area:1/1; }
.hero h1 { background:rgba(0,0,0,.5); color:white; padding:15px; border-radius:10px; }

.mf { display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media(min-width:768px){ .mf{ grid-template-columns:repeat(3,1fr);} }

.rnav{ display:flex; justify-content:space-between; padding:10px; border-bottom:1px solid #ddd; }
.menu nav{ display:flex; flex-direction:column; gap:8px; }
@media(min-width:768px){
 .menu>summary{display:none;}
 .menu nav{flex-direction:row;}
}

.title{ font-size:clamp(1.5rem,2.5vw+1rem,3rem); }

.rf{ display:grid; gap:var(--gap); grid-template-columns:1fr; max-width:600px; }
.rf label{ display:flex; flex-direction:column; gap:5px; }
.rf input{ padding:8px; border:1px solid #ddd; border-radius:8px; }
.rf button{ padding:12px; background:#111; color:white; border:none; border-radius:10px; }
@media(min-width:640px){
 .rf{ grid-template-columns:1fr 1fr; }
 .rf button{ grid-column:1/-1; }
}