Pages Medium
Mexican Cantina Landing — La Catrina
Vibrant cantina landing — terracotta + cobalt + mustard, Fraunces display, CSS papel picado strip, taco menu, mezcal flight and Spanish-language copy.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
/* ────────────────────────────────────────────
LA CATRINA — Cantina palette
Terracotta · cobalt · mustard · bone · ink
────────────────────────────────────────────── */
:root {
--bone: #f4e7cf;
--bone-2: #ecdcb8;
--paper: #fcf2dd;
--terra: #c2502a;
--terra-d: #8e3217;
--cobalt: #1f4ea0;
--cobalt-d: #163a7a;
--mustard: #d99020;
--mustard-d: #a86600;
--ink: #2a1d12;
--ink-2: #4a3624;
--mute: #8a7158;
--rule: rgba(42, 29, 18, 0.16);
--font-display: "Fraunces", "Playfair Display", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--bone);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ── Papel picado bunting (CSS-only) ── */
.papel {
display: flex;
justify-content: space-around;
padding: 12px 16px 0;
background: var(--ink);
border-bottom: 2px solid var(--ink);
}
.papel-flag {
width: 60px;
height: 70px;
background-image: radial-gradient(circle at 50% 30%, transparent 8px, currentColor 9px),
radial-gradient(circle at 30% 60%, transparent 6px, currentColor 7px),
radial-gradient(circle at 70% 60%, transparent 6px, currentColor 7px);
background-size: 100% 100%;
background-color: currentColor;
clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
/* shake */
animation: sway 4s ease-in-out infinite;
transform-origin: top center;
}
.papel-flag.c-1 {
color: var(--terra);
}
.papel-flag.c-2 {
color: var(--mustard);
}
.papel-flag.c-3 {
color: var(--cobalt);
}
.papel-flag.c-4 {
color: #5b9e72;
}
.papel-flag:nth-child(even) {
animation-delay: 1.5s;
}
.papel-flag:nth-child(3n) {
animation-delay: 2.5s;
}
@keyframes sway {
0%,
100% {
transform: rotate(-3deg);
}
50% {
transform: rotate(3deg);
}
}
/* ── Nav ── */
.nav {
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
gap: 24px;
padding: 14px 28px;
background: var(--ink);
border-bottom: 3px solid var(--mustard);
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--bone);
}
.brand-skull {
font-size: 1.6rem;
color: var(--mustard);
}
.brand-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.3rem;
letter-spacing: 0.04em;
}
.nav-links {
display: flex;
gap: 22px;
margin-left: auto;
}
.nav-links a {
color: var(--bone);
text-decoration: none;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.nav-links a:hover {
color: var(--mustard);
}
.nav-cta {
background: var(--mustard);
color: var(--ink);
border-radius: 999px;
padding: 10px 20px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
}
.nav-cta:hover {
background: #f0a635;
}
@media (max-width: 720px) {
.nav-links {
display: none;
}
}
/* ── Hero ── */
.hero {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 56px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 76px 28px 60px;
}
.kicker {
font-size: 0.74rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-d);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 14px;
}
.sun {
color: var(--mustard);
font-size: 1rem;
}
.hero h1 {
margin-top: 16px;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(3rem, 7vw, 5rem);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--ink);
}
.hero h1 .line {
display: block;
}
.hero h1 .line-em em {
font-style: italic;
color: var(--terra);
}
.sub {
margin-top: 22px;
font-size: 1.05rem;
color: var(--ink);
max-width: 480px;
}
.sub-en {
margin-top: 8px;
font-size: 0.9rem;
color: var(--mute);
font-style: italic;
max-width: 460px;
}
.actions {
margin-top: 24px;
display: flex;
gap: 10px;
}
.btn {
padding: 13px 24px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 999px;
cursor: pointer;
text-decoration: none;
border: 2px solid transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
display: inline-block;
}
.btn-terra {
background: var(--terra);
color: var(--bone);
}
.btn-terra:hover {
background: var(--terra-d);
}
.btn-cobalt {
background: transparent;
color: var(--cobalt);
border-color: var(--cobalt);
}
.btn-cobalt:hover {
background: var(--cobalt);
color: var(--bone);
}
.vibe {
margin-top: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--cobalt);
color: var(--bone);
padding: 7px 14px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.vibe-dot {
width: 8px;
height: 8px;
background: var(--mustard);
border-radius: 999px;
animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
/* Agave SVG */
.agave {
text-align: center;
}
.agave-svg {
width: 100%;
max-width: 240px;
height: auto;
filter: drop-shadow(0 12px 30px rgba(31, 78, 160, 0.32));
}
.agave-cap {
margin-top: 12px;
font-family: var(--font-display);
font-style: italic;
font-size: 0.9rem;
color: var(--mute);
}
@media (max-width: 880px) {
.hero {
grid-template-columns: 1fr;
padding: 48px 24px;
}
}
/* ── Carta ── */
.carta {
max-width: 1180px;
margin: 0 auto;
padding: 88px 28px;
scroll-margin-top: 80px;
}
.section-head {
text-align: center;
margin-bottom: 40px;
}
.section-head h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 5vw, 3rem);
letter-spacing: -0.015em;
line-height: 1.05;
margin-top: 6px;
}
.section-head h2 em {
font-style: italic;
color: var(--terra);
}
.taco-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 880px) {
.taco-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 540px) {
.taco-grid {
grid-template-columns: 1fr;
}
}
.taco {
background: var(--paper);
border: 2px solid var(--ink);
padding: 22px 22px 20px;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: 4px 4px 0 var(--cobalt);
transition: transform 0.2s, box-shadow 0.2s;
}
.taco:hover {
transform: translate(-2px, -2px);
box-shadow: 8px 8px 0 var(--cobalt);
}
.taco-feat {
background: var(--mustard);
box-shadow: 4px 4px 0 var(--terra-d);
}
.taco-feat:hover {
box-shadow: 8px 8px 0 var(--terra-d);
}
.taco-glyph {
font-size: 2rem;
}
.taco-badge {
position: absolute;
top: -10px;
right: 16px;
background: var(--terra);
color: var(--bone);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 10px;
border: 2px solid var(--ink);
transform: rotate(-2deg);
}
.taco h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.3rem;
margin-top: 4px;
}
.taco p {
color: var(--ink-2);
font-size: 0.92rem;
flex: 1;
}
.taco-price {
font-family: var(--font-mono);
font-weight: 700;
color: var(--terra-d);
margin-top: 4px;
font-size: 0.95rem;
}
.taco-feat .taco-price {
color: var(--ink);
}
/* ── Mezcalería ── */
.mezcal {
background: var(--cobalt);
color: var(--bone);
padding: 88px 28px;
scroll-margin-top: 80px;
}
.mezcal-inner {
max-width: 1080px;
margin: 0 auto;
}
.mezcal .kicker {
color: var(--mustard);
}
.mezcal h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 4.5vw, 3rem);
line-height: 1.05;
letter-spacing: -0.015em;
margin-top: 6px;
}
.mezcal h2 em {
font-style: italic;
color: var(--mustard);
}
.mezcal-desc {
margin-top: 16px;
font-size: 1.02rem;
color: rgba(244, 231, 207, 0.78);
max-width: 560px;
}
.mezcal-list {
margin-top: 32px;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid rgba(244, 231, 207, 0.18);
}
.mezcal-list li {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: baseline;
gap: 8px 18px;
padding: 18px 20px;
border-bottom: 1px solid rgba(244, 231, 207, 0.18);
}
.mezcal-list li:nth-child(odd) {
border-right: 1px solid rgba(244, 231, 207, 0.18);
}
@media (max-width: 720px) {
.mezcal-list {
grid-template-columns: 1fr;
}
.mezcal-list li:nth-child(odd) {
border-right: none;
}
}
.m-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.2rem;
}
.m-where {
grid-column: 1;
font-size: 0.78rem;
color: rgba(244, 231, 207, 0.6);
letter-spacing: 0.04em;
}
.m-abv {
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.82rem;
color: var(--mustard);
}
.m-price {
font-family: var(--font-mono);
font-weight: 700;
color: var(--bone);
font-size: 1.05rem;
}
.mezcal-foot {
margin-top: 26px;
padding: 18px 22px;
background: rgba(244, 231, 207, 0.08);
border-left: 4px solid var(--mustard);
font-size: 0.96rem;
}
.mezcal-foot strong {
color: var(--mustard);
}
/* ── Barrio ── */
.barrio {
padding: 88px 28px;
scroll-margin-top: 80px;
}
.barrio .section-head h2 em {
color: var(--cobalt);
}
.barrio-grid {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 880px) {
.barrio-grid {
grid-template-columns: 1fr;
}
}
.info {
background: var(--paper);
border: 2px solid var(--ink);
padding: 24px 26px;
display: flex;
flex-direction: column;
gap: 10px;
}
.info-vibrant {
background: var(--terra);
color: var(--bone);
border-color: var(--ink);
}
.info h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.35rem;
}
.info ul {
list-style: none;
}
.info li {
display: flex;
justify-content: space-between;
padding: 7px 0;
border-bottom: 1px dotted var(--rule);
font-size: 0.9rem;
}
.info li:last-child {
border-bottom: none;
}
.info li span:last-child {
font-family: var(--font-mono);
font-weight: 600;
}
.info li.closed span:last-child {
color: var(--mute);
}
.info address {
font-style: normal;
line-height: 1.75;
font-size: 0.95rem;
}
.info-note {
margin-top: 8px;
font-size: 0.84rem;
font-style: italic;
color: var(--mute);
}
.info-vibrant .info-note {
color: rgba(244, 231, 207, 0.8);
}
/* ── Reservar ── */
.reservar {
background: var(--mustard);
padding: 88px 28px;
scroll-margin-top: 80px;
}
.reservar-inner {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.reservar .kicker {
color: var(--ink);
}
.reservar h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 4.5vw, 3rem);
line-height: 1.05;
letter-spacing: -0.015em;
margin-top: 6px;
}
.reservar h2 em {
font-style: italic;
color: var(--cobalt);
}
.reservar-sub {
margin-top: 18px;
color: var(--ink-2);
font-size: 1.02rem;
max-width: 460px;
}
.reservar-bullets {
list-style: none;
margin-top: 22px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 18px;
}
.reservar-bullets li {
font-size: 0.92rem;
color: var(--ink);
font-weight: 500;
}
.reservar-form {
background: var(--ink);
color: var(--bone);
border-radius: 6px;
padding: 28px 28px 26px;
display: flex;
flex-direction: column;
gap: 14px;
}
.form-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.reservar-form label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mustard);
font-weight: 700;
}
.reservar-form input,
.reservar-form select {
background: rgba(244, 231, 207, 0.08);
border: 1px solid rgba(244, 231, 207, 0.18);
color: var(--bone);
padding: 11px 14px;
font-family: inherit;
font-size: 0.94rem;
outline: none;
border-radius: 4px;
}
.reservar-form input:focus,
.reservar-form select:focus {
border-color: var(--mustard);
}
.full {
width: 100%;
}
.reservar-form .btn {
align-self: flex-start;
margin-top: 4px;
}
.ok {
color: var(--mustard);
font-weight: 700;
letter-spacing: 0.04em;
}
@media (max-width: 880px) {
.reservar-inner {
grid-template-columns: 1fr;
gap: 32px;
}
.reservar-bullets {
grid-template-columns: 1fr;
}
}
/* ── Footer ── */
.footer {
background: var(--ink);
color: var(--bone);
text-align: center;
padding: 48px 28px;
}
.foot-brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.4rem;
color: var(--mustard);
}
.foot-meta {
color: rgba(244, 231, 207, 0.6);
font-size: 0.86rem;
margin-top: 6px;
}
.foot-meta:last-child {
font-style: italic;
color: var(--terra);
}// Default reservation date to upcoming Saturday
const di = document.querySelector('input[name="d"]');
if (di) {
const t = new Date();
const day = t.getDay();
const delta = (6 - day + 7) % 7 || 7;
t.setDate(t.getDate() + delta);
di.value = t.toISOString().slice(0, 10);
}
const form = document.getElementById("form");
const ok = document.getElementById("ok");
form.addEventListener("submit", (e) => {
e.preventDefault();
ok.hidden = false;
const btn = form.querySelector("button");
btn.disabled = true;
setTimeout(() => {
ok.hidden = true;
btn.disabled = false;
}, 3000);
});<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap"
/>
<link rel="stylesheet" href="style.css" />
<title>La Catrina · Cantina y Mezcalería</title>
</head>
<body>
<!-- Papel picado bunting -->
<div class="papel" aria-hidden="true">
<span class="papel-flag c-1"></span>
<span class="papel-flag c-2"></span>
<span class="papel-flag c-3"></span>
<span class="papel-flag c-4"></span>
<span class="papel-flag c-1"></span>
<span class="papel-flag c-2"></span>
<span class="papel-flag c-3"></span>
<span class="papel-flag c-4"></span>
<span class="papel-flag c-1"></span>
<span class="papel-flag c-2"></span>
<span class="papel-flag c-3"></span>
<span class="papel-flag c-4"></span>
</div>
<header class="nav">
<a class="brand" href="#top">
<span class="brand-skull">☠</span>
<span class="brand-name">La Catrina</span>
</a>
<nav class="nav-links">
<a href="#carta">La carta</a>
<a href="#mezcal">Mezcalería</a>
<a href="#barrio">El barrio</a>
<a href="#reservar">Reservar</a>
</nav>
<a class="nav-cta" href="#reservar">Reservar mesa</a>
</header>
<main id="top">
<!-- Hero -->
<section class="hero">
<div class="hero-inner">
<p class="kicker">
<span class="sun">✦</span> CANTINA Y MEZCALERÍA · DESDE 2019
<span class="sun">✦</span>
</p>
<h1>
<span class="line">Bienvenido</span>
<span class="line line-em">a la <em>cantina.</em></span>
</h1>
<p class="sub">
Una cantina y mezcalería en el barrio de la Roma. Tacos al pastor
del trompo, mezcales de pueblos chicos, y la mejor cumbia del fin
de semana.
</p>
<p class="sub-en">
A cantina and mezcal bar in Colonia Roma. Tacos al pastor from
the spit, small-town mezcales, and the best cumbia in the city
on weekends.
</p>
<div class="actions">
<a class="btn btn-terra" href="#reservar">Reservar mesa</a>
<a class="btn btn-cobalt" href="#carta">Ver la carta</a>
</div>
<p class="vibe">
<span class="vibe-dot"></span> Música en vivo · Vie · Sáb desde
las 22:00
</p>
</div>
<aside class="agave" aria-hidden="true">
<svg viewBox="0 0 200 220" class="agave-svg">
<g stroke="#5e1e16" stroke-width="2" stroke-linecap="round" fill="#1f4ea0">
<path d="M100 200 L80 130 L72 70 L100 30 Z" />
<path d="M100 200 L120 130 L128 70 L100 30 Z" fill="#3a6fc1" />
<path d="M100 200 L60 150 L40 100 L70 60 L100 30 Z" fill="#264e8c" />
<path d="M100 200 L140 150 L160 100 L130 60 L100 30 Z" fill="#3a6fc1" />
<path d="M100 200 L30 160 L18 110 L100 30 Z" fill="#182d54" />
<path d="M100 200 L170 160 L182 110 L100 30 Z" fill="#182d54" />
</g>
</svg>
<p class="agave-cap">Agave azul · símbolo de la casa</p>
</aside>
</section>
<!-- Carta -->
<section class="carta" id="carta">
<header class="section-head">
<p class="kicker">La carta</p>
<h2>Tacos, antojitos y <em>algo más.</em></h2>
</header>
<div class="taco-grid">
<article class="taco">
<span class="taco-glyph">🌮</span>
<h3>Al pastor</h3>
<p>Cerdo marinado en achiote, piña, cebolla y cilantro.</p>
<p class="taco-price">$45 / 3 tacos</p>
</article>
<article class="taco taco-feat">
<span class="taco-glyph">🥑</span>
<span class="taco-badge">Favorito</span>
<h3>Carnitas Michoacán</h3>
<p>Cocidas en su grasa por seis horas. Salsa verde de molcajete.</p>
<p class="taco-price">$55 / 3 tacos</p>
</article>
<article class="taco">
<span class="taco-glyph">🐟</span>
<h3>Baja fish</h3>
<p>Pescado capeado, col morada, salsa de chipotle, lima.</p>
<p class="taco-price">$60 / 3 tacos</p>
</article>
<article class="taco">
<span class="taco-glyph">🌽</span>
<h3>Esquites de la casa</h3>
<p>Elote desgranado, mayonesa de chile, queso fresco, limón.</p>
<p class="taco-price">$38</p>
</article>
<article class="taco">
<span class="taco-glyph">🌶️</span>
<h3>Birria de res</h3>
<p>Estofado de res con chile guajillo, tortillas tatemadas.</p>
<p class="taco-price">$75</p>
</article>
<article class="taco">
<span class="taco-glyph">🫔</span>
<h3>Tamales oaxaqueños</h3>
<p>De mole negro, cocidos en hoja de plátano. Dos piezas.</p>
<p class="taco-price">$42</p>
</article>
</div>
</section>
<!-- Mezcalería -->
<section class="mezcal" id="mezcal">
<div class="mezcal-inner">
<header>
<p class="kicker">Mezcalería</p>
<h2>
Ocho productores, <em>ocho pueblos.</em>
</h2>
<p class="mezcal-desc">
Trabajamos directo con familias mezcaleras en Oaxaca, Puebla y
Guerrero. Cada mezcal viene de un solo pueblo, una sola olla,
una sola cosecha de agave.
</p>
</header>
<ul class="mezcal-list">
<li>
<span class="m-name">Espadín</span>
<span class="m-where">San Baltazar, Oaxaca</span>
<span class="m-abv">46%</span>
<span class="m-price">$95</span>
</li>
<li>
<span class="m-name">Tobalá silvestre</span>
<span class="m-where">Santa Catarina, Oax.</span>
<span class="m-abv">48%</span>
<span class="m-price">$180</span>
</li>
<li>
<span class="m-name">Madrecuixe</span>
<span class="m-where">Tepelmeme, Oaxaca</span>
<span class="m-abv">47%</span>
<span class="m-price">$140</span>
</li>
<li>
<span class="m-name">Cuishe</span>
<span class="m-where">Sola de Vega, Oax.</span>
<span class="m-abv">49%</span>
<span class="m-price">$160</span>
</li>
<li>
<span class="m-name">Pechuga</span>
<span class="m-where">Matatlán, Oaxaca</span>
<span class="m-abv">50%</span>
<span class="m-price">$210</span>
</li>
<li>
<span class="m-name">Papalote</span>
<span class="m-where">Mazatlán, Guerrero</span>
<span class="m-abv">45%</span>
<span class="m-price">$130</span>
</li>
</ul>
<p class="mezcal-foot">
<strong>Flight de tres</strong> · $240 · pregúntale al
mezcalero por la selección de hoy.
</p>
</div>
</section>
<!-- El barrio -->
<section class="barrio" id="barrio">
<header class="section-head">
<p class="kicker">El barrio · La Roma, CDMX</p>
<h2>
Calle Orizaba 87 · entre <em>Álvaro Obregón</em> y Tonalá.
</h2>
</header>
<div class="barrio-grid">
<article class="info">
<h3>Horario</h3>
<ul>
<li><span>Mar – Jue</span><span>18:00 – 00:00</span></li>
<li><span>Vie – Sáb</span><span>14:00 – 02:00</span></li>
<li><span>Domingo</span><span>13:00 – 22:00</span></li>
<li class="closed"><span>Lunes</span><span>Descansamos</span></li>
</ul>
</article>
<article class="info info-vibrant">
<h3>Día de Muertos</h3>
<p>
El 1 y 2 de noviembre montamos altar comunitario. Pan de muerto
y atole de la casa, gratis para toda la cuadra. Trae una foto
de tu persona — la ponemos en el altar.
</p>
<p class="info-note">
Sin reservación · llega a las 19:00.
</p>
</article>
<article class="info">
<h3>Cómo llegar</h3>
<address>
Calle de Orizaba, 87<br />
Col. Roma Norte, 06700<br />
Ciudad de México<br />
+52 55 1234 5678<br />
hola@lacatrina.mx
</address>
<p class="info-note">
Metro Insurgentes · 6 min caminando.
</p>
</article>
</div>
</section>
<!-- Reservar -->
<section class="reservar" id="reservar">
<div class="reservar-inner">
<div>
<p class="kicker">Reservar mesa</p>
<h2>
Te esperamos <em>con tortillas calientes.</em>
</h2>
<p class="reservar-sub">
Sugerimos reservar para fines de semana. Cancelación libre hasta
dos horas antes — sin penalización, palabra de Catrina.
</p>
<ul class="reservar-bullets">
<li>🌶 Mesa para 2–8 personas</li>
<li>🎶 Música en vivo Vie y Sáb · 22:00</li>
<li>🧒 Aptos para niños hasta las 21:00</li>
<li>🐕 Las terrazas reciben perros bien portados</li>
</ul>
</div>
<form class="reservar-form" id="form">
<div class="form-row">
<label>
<span>Personas</span>
<select name="g">
<option>2</option>
<option selected>4</option>
<option>6</option>
<option>8</option>
</select>
</label>
<label>
<span>Fecha</span>
<input type="date" name="d" />
</label>
<label>
<span>Hora</span>
<select name="t">
<option>19:00</option>
<option selected>21:00</option>
<option>22:30</option>
</select>
</label>
</div>
<label class="full">
<span>Nombre & teléfono</span>
<input type="text" name="n" placeholder="Maite Hernández · +52 …" />
</label>
<button class="btn btn-terra" type="submit">Reservar ahora</button>
<p class="ok" id="ok" hidden>¡Listo! Te confirmamos por WhatsApp.</p>
</form>
</div>
</section>
</main>
<footer class="footer">
<p class="foot-brand">La Catrina · Cantina y Mezcalería</p>
<p class="foot-meta">Calle Orizaba 87 · Roma Norte · CDMX</p>
<p class="foot-meta">¡Bienvenido a la casa!</p>
</footer>
<script src="script.js"></script>
</body>
</html>La Catrina · Cantina y Mezcalería
A vibrant Mexican cantina landing. Terracotta + cobalt + mustard palette, Fraunces display + Inter body, CSS-only papel picado bunting strip, agave silhouette divider. Sections: La carta (taco grid), Mezcalería (flight of 8 producers by state), El barrio (location with Day-of-the-Dead nod), Reservaciones. Spanish copy throughout with light English support.