/* ==========================================================================
   El Cura — sections.css
   Bloques de página: cabecera, hero, la casa, la carta, la visita y pie.
   Se carga en ÚLTIMO lugar (puede afinar componentes en contexto).
   ========================================================================== */

/* ---------- NAV ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--cream);
  border-bottom:2px solid var(--ink);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  max-width:1120px; margin:0 auto;
}
.brandmark{ display:flex; align-items:center; gap:10px; }
.brandmark .display{ font-size:1.5rem; }
.brandmark .tag{ font-family:'Caveat'; font-size:1rem; color:var(--wine); margin-top:-4px;}
nav.links{ display:flex; gap:26px; font-family:'Space Mono'; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; }
nav.links a{ text-decoration:none; border-bottom:2px solid transparent; padding-bottom:3px; transition:border-color .2s; }
nav.links a:hover{ border-color:var(--wine); }
.nav-cta{
  font-family:'Space Mono'; font-size:0.75rem; text-transform:uppercase; letter-spacing:.06em;
  background:var(--wine); color:var(--cream); padding:9px 16px; border:2px solid var(--ink);
  text-decoration:none; box-shadow:3px 3px 0 var(--ink);
}
@media (max-width:760px){ nav.links{ display:none; } }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:76px 28px 60px;
  overflow:hidden;
  border-bottom:2px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(191,138,40,0.10), transparent 40%),
    var(--paper);
}
.hero-inner{ max-width:1120px; margin:0 auto; position:relative; }
.hero h1{
  font-size:clamp(3.2rem, 9vw, 6.4rem);
  text-shadow: 3px 3px 0 rgba(110,42,50,0.18);
}
.hero .since{
  font-family:'Caveat'; font-weight:700; color:var(--wine);
  font-size:clamp(1.4rem, 2.4vw, 2rem);
  transform:rotate(-3deg);
  display:inline-block; margin-top:6px;
}
.hero-slogan{
  margin-top:26px; display:flex; gap:14px; flex-wrap:wrap;
  font-family:'Space Mono'; font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase;
}
.hero-slogan span{
  border:2px solid var(--ink); padding:7px 14px; background:var(--cream);
}
.hero-desc{
  max-width:520px; margin-top:30px; font-size:1.08rem; line-height:1.6; color:#3a2f22;
}
.hero-actions{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; }

/* Logotipo del bar, flotando junto al H1. Convive con el wordmark de texto:
   no lo sustituye. Oculto por debajo de 900px para no comerle sitio al hero
   en móvil (el logo sí se ve ahí en la cabecera del tablón de la carta).
   `mix-blend-mode` funde el fondo blanco del JPG con el papel del hero;
   ver la nota sobre el fondo del logo en assets/img/README.md.
   Va dentro de .hero-inner, no de .hero: así se alinea con la columna de
   contenido en vez de pegarse al borde de la ventana, donde el
   `overflow:hidden` del hero lo recortaba. */
.hero-logo{
  position:absolute; right:0; top:16px;
  width:clamp(250px, 26vw, 340px); height:auto;
  mix-blend-mode:multiply;
  display:none;
}
@media (min-width:900px){ .hero-logo{ display:block; } }

/* ---------- SOBRE ---------- */
section.about{ padding:70px 28px; border-bottom:2px solid var(--ink); background:var(--cream); }
.about-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:60px; max-width:1120px; margin:0 auto; align-items:start; }
@media (max-width:800px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }
.about h2{ font-size:2.4rem; margin-bottom:18px; }
.about p{ font-size:1.05rem; line-height:1.75; color:#3a2f22; margin:0 0 14px; }

/* ---------- CARTA / SIGNATURE CLIPBOARD ---------- */
section.menu{
  padding:80px 28px 100px;
  background:
    linear-gradient(180deg, var(--paper-dark), var(--paper));
  border-bottom:2px solid var(--ink);
}
.menu-head{ max-width:1120px; margin:0 auto 50px; text-align:center; }
.menu-head .eyebrow{ justify-content:center; }
.menu-head .eyebrow::before,.menu-head .eyebrow::after{ content:""; width:34px; height:2px; background:var(--wine); display:inline-block; }
.menu-head h2{ font-size:clamp(2.2rem,5vw,3.4rem); }
.menu-head p{ max-width:520px; margin:14px auto 0; color:#3a2f22; }

.board-wrap{
  max-width:900px; margin:0 auto; position:relative;
  padding-top:34px;
}
.clip{
  position:absolute; top:-4px; left:50%; transform:translateX(-50%) rotate(-1.2deg);
  width:180px; height:56px; z-index:5;
}
.board{
  background:var(--cream);
  border:2px solid var(--ink);
  box-shadow: 0 18px 0 -8px rgba(36,28,20,0.15), 10px 20px 30px rgba(36,28,20,0.28);
  padding:56px 40px 40px;
  transform:rotate(-0.4deg);
  position:relative;
}
.board::before{
  content:""; position:absolute; inset:14px;
  border:1px solid var(--line);
  pointer-events:none;
}
.board-title{ text-align:center; margin-bottom:36px; }
/* El logo ya trae dentro "EL CURA" y "DESDE 1966": sustituye al wordmark de
   texto que había aquí, no lo acompaña. */
.board-logo{
  width:min(300px, 68%); height:auto; margin:0 auto 14px;
  mix-blend-mode:multiply;
}
.board-title .slogan{
  font-family:'Space Mono'; font-size:0.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:#4a4030; margin-top:10px;
}

.menu-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; }
@media (max-width:640px){ .menu-cols{ grid-template-columns:1fr; } }
.menu-cat{ margin-bottom:36px; display:none; }
.menu-cat.show{ display:block; }
.menu-cat h3{ font-size:1.3rem; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:16px; }

.board-foot{
  margin-top:30px; text-align:center; font-family:'Caveat'; font-size:1.35rem; color:var(--ink);
  border-top:1px dashed var(--line); padding-top:20px;
}

/* ---------- UBICACION / FOOTER ---------- */
section.visit{ padding:76px 28px; background:var(--wine); color:var(--cream); border-bottom:2px solid var(--ink); }
.visit-grid{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; }
@media (max-width:800px){ .visit-grid{ grid-template-columns:1fr; } }
.visit h3{ color:var(--cream); font-size:1.5rem; margin-bottom:14px; }
.visit p, .visit a{ color:#f1e2c9; line-height:1.7; text-decoration:none; font-size:0.98rem; }
.visit .mono-label{ font-family:'Space Mono'; font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ochre); display:block; margin-bottom:8px; }
.social-row{ display:flex; gap:14px; margin-top:14px; }
.social-row a{ border:1.5px solid var(--cream); padding:8px 14px; font-family:'Space Mono'; font-size:0.78rem; }

footer.bottom{
  padding:24px 28px; text-align:center; background:var(--ink); color:var(--paper);
  font-family:'Space Mono'; font-size:0.72rem; letter-spacing:.05em;
}
footer.bottom span{ color:var(--ochre); }