* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family:system-ui; }
img { max-width:100%; display:block; }
.app { padding:16px; }
:root { --gap:12px; }

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

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

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

/* 4 */
.layout { display:flex; gap:var(--gap); min-height:70vh; }
.sidebar { width:240px; border:1px solid #eee; padding:12px; border-radius:12px; }
.content { flex:1; border:1px solid #eee; padding:16px; border-radius:12px; }

/* 5 */
.pricing { display:flex; gap:24px; }
.price { display:flex; align-items:baseline; gap:6px; font-size:18px; }
.amount { font-size:48px; font-weight:700; }

/* 6 */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.grid3 > * { border:1px solid #eee; padding:16px; text-align:center; }

/* 7 */
.page {
  display:grid;
  grid-template-columns:240px 1fr;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
  "hdr hdr"
  "sbr mn"
  "ftr ftr";
  gap:var(--gap);
  min-height:70vh;
}
.hdr{grid-area:hdr;}
.sbr{grid-area:sbr;}
.mn{grid-area:mn;}
.ftr{grid-area:ftr;}
.page>*{border:1px solid #eee; padding:12px; border-radius:10px;}

/* 8 */
.auto { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.auto .card { text-align:center; }

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

/* 10 */
.hero { display:grid; place-items:center; min-height:40vh; }
.hero>*{grid-area:1/1;}
.hero h1 { background:rgba(0,0,0,.45); color:#fff; padding:16px 24px; border-radius:12px; }

/* 11 */
.mf { display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:768px){
  .mf{grid-template-columns:repeat(3,1fr);}
}
.mf>*{border:1px solid #eee; padding:16px; text-align:center;}

/* 12 */
.rnav { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid #eee; }
.menu nav { display:flex; flex-direction:column; gap:8px; padding:8px 0; }
@media (min-width:768px){
  .menu>summary{display:none;}
  .menu nav{flex-direction:row; gap:16px;}
  .menu[open]>nav, .menu>nav{display:flex;}
}

/* 13 */
.title { font-size:clamp(1.5rem, 2.5vw + 1rem, 3rem); line-height:1.15; }

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