:root{
  --blu:#0b18ff;
  --light:#ffffff;
  --text:#0b18ff;
  --maxw:360px; /* móvil como referencia del arte */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:#fff;
  line-height:1.25;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:18px 16px}
.header{padding-top:16px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:6px}
.logo img{width:46px; height:auto}
.manifesto{font-size:12px; margin:10px 0 14px}
.btn-primary{
  border:1.4px solid var(--text);
  color:var(--text);
  background:#fff;
  padding:8px 14px;
  display:inline-block;
  font-weight:700;
  letter-spacing:.4px;
}

/* BLUE section (mobile design exact) */
.section-blue{background:var(--blu); color:#fff; position:relative; overflow:hidden}
.section-blue .container{padding:36px 16px}

/* Decorative tilted squares as in art */
.square{position:absolute; width:180px; height:180px; background:#c3c4d6; opacity:.7; transform:rotate(12deg)}
.square.s1{left:-40px; top:-60px;}
.square.s2{right:-40px; top:40px; transform:rotate(-8deg)}
.square.s3{left:-18px; top:260px; transform:rotate(8deg); width:160px; height:160px}

/* Hash menu: 4 stacked buttons */
.hash-menu{display:flex; flex-direction:column; gap:10px; align-items:center; margin:8px 0 26px}
.hash-menu a{
  width:210px; text-align:center; border:1.4px solid #fff; color:#fff;
  padding:9px 12px; font-weight:700; font-size:12px; letter-spacing:.4px;
}

/* Tilted "TO DRINK" tag */
.todrink-chip{display:inline-block; border:1.4px solid #fff; padding:6px 14px; transform:rotate(-10deg); margin:10px 0 6px}

/* Photos: single column 300x300 exact */
.photos{display:flex; flex-direction:column; align-items:center; gap:18px; margin:10px 0 24px}
.photo{width:300px; height:300px; transform:rotate(-8deg); overflow:hidden}
.photo:nth-child(2){transform:rotate(6deg)}
.photo img{width:100%; height:100%; object-fit:cover}

/* Menu sections */
.section-title{font-size:11px; letter-spacing:2px; text-transform:uppercase; margin:18px 0 8px; opacity:.9}
.menu-columns{display:flex; flex-direction:column; gap:14px}
.menu-item{font-size:12px}
.menu-item ul{margin:6px 0 0 18px}
.menu-item li{margin:6px 0}

/* Nutrition table (scroll-x on small viewport) */
.table-wrap{margin:18px 0 28px}
.table-scroll{overflow-x:auto}
table{border-collapse:collapse; font-size:11px; min-width:320px; color:#fff}
th,td{border:1px solid rgba(255,255,255,.7); padding:6px 8px; text-align:center}
th{font-weight:700}

/* Circular icon sample in center */
.circle-icon{width:74px; height:74px; border-radius:50%; border:4px solid #fff; margin:16px auto}

/* Coleccionables block */
.block{color:#fff; font-size:12px; background:transparent}
.block p{margin:0 0 12px}

/* Agenda chip tilted */
.agenda-chip{display:inline-block; border:1.4px solid #fff; padding:8px 16px; transform:rotate(-12deg); margin:6px 0 10px}

/* Contact form */
.contact-form{background:rgba(255,255,255,.08); padding:14px; border:1px solid rgba(255,255,255,.35); border-radius:8px}
.contact-form .grid{display:flex; flex-direction:column; gap:10px}
.contact-form label{display:block; margin:8px 0; color:#fff; font-size:12px}
.contact-form input, .contact-form textarea{
  width:100%; padding:10px 12px; border:1px solid rgba(255,255,255,.45);
  background:rgba(8,8,40,.18); color:#fff; border-radius:6px; font-size:14px
}
.contact-form button{margin-top:6px}

/* Footer stacked */
.footer{background:var(--blu); color:#fff; padding:32px 0 48px}
.footer .cols{display:flex; flex-direction:column; gap:18px}
.footer small{opacity:.75}

/* Desktop+ adjustments keep composition similar pero con mayor ancho */
@media (min-width:700px){
  :root{ --maxw:980px; }
  .hash-menu{flex-direction:row; flex-wrap:wrap; justify-content:center}
  .hash-menu a{width:auto}
  .photos{flex-direction:row; justify-content:center}
  .photo{width:360px; height:360px}
  .table-wrap{display:flex; justify-content:center}
  table{min-width:520px; font-size:12px}
  .footer .cols{flex-direction:row; justify-content:space-between}
}