/* styles.css — BAR LA PEPA | Bar de Tapas */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400;1,700&family=Lato:wght@300;400;700&display=swap');

:root {
    --rojo: #C0392B;
    --rojo-dk: #922B21;
    --amarillo: #F1C40F;
    --crema: #FBF8F2;
    --crema-dk: #F0EAD6;
    --madera: #5D3A1A;
    --madera-lt: #8B5E3C;
    --verde-oliva: #6B7C3B;
    --pizarra: #2C2C2C;
    --mid: #7D6B56;
    --tile: #E8E0D0;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    background: var(--crema);
    color: var(--pizarra);
    -webkit-font-smoothing: antialiased;
}

.serif {
    font-family: 'Playfair Display', serif;
}

/* ── Botones ── */
.btn-rojo {
    background: var(--rojo);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: background 0.3s, transform 0.2s;
    display: inline-block;
}

.btn-rojo:hover {
    background: var(--rojo-dk);
    transform: translateY(-2px);
}

.btn-madera {
    background: var(--madera);
    color: var(--crema);
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: background 0.3s;
    display: inline-block;
}

.btn-madera:hover {
    background: var(--madera-lt);
}

/* ── Tapa cards ── */
.tapa-card {
    background: var(--crema);
    border: 1px solid var(--tile);
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 12px;
    overflow: hidden;
}

.tapa-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(93, 58, 26, 0.15);
}

/* ── Azulejo decorativo ── */
.azulejo-bg {
    background-color: var(--crema-dk);
    background-image:
        linear-gradient(var(--tile) 1px, transparent 1px),
        linear-gradient(90deg, var(--tile) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ── Badge ── */
.badge-rojo {
    background: var(--rojo);
    color: #fff;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 3px;
    padding: 2px 7px;
}

.badge-verde {
    background: var(--verde-oliva);
    color: #fff;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 3px;
    padding: 2px 7px;
}

/* ── Zoom ── */
.img-zoom {
    overflow: hidden;
}

.img-zoom img {
    transition: transform 0.6s ease;
}

.img-zoom:hover img {
    transform: scale(1.06);
}

/* ── Label sección ── */
.sect-label {
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--rojo);
}

/* ── Pizarra menu list ── */
.pizarra-item {
    border-bottom: 1px dashed var(--tile);
    padding: 12px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pizarra-dots {
    flex: 1;
    border-bottom: 2px dotted var(--mid);
    margin: 0 8px;
    opacity: 0.3;
}