/* La Barca — restaurante de pescado y arroces en el port de Vilanova.
   Ejemplo ficticio de Consult·IT.

   Idea de diseño: sala en penumbra. Fondo oscuro, tipografía didona con mucho
   contraste y la carta compuesta como una carta de papel de verdad, con los
   puntitos que unen el plato con el precio. Es el registro opuesto al de la
   gestoría —allí manda el dato, aquí manda el apetito— y al de la inmobiliaria,
   que es todo retícula clara. */

@font-face { font-family: 'Bodoni'; src: url('/ejemplos/restaurant-labarca/fonts/bodoni-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bodoni'; src: url('/ejemplos/restaurant-labarca/fonts/bodoni-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/ejemplos/restaurant-labarca/fonts/jost-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/ejemplos/restaurant-labarca/fonts/jost-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --noche: #14100D;
  --noche-2: #1E1915;
  --crema: #F0E7D8;
  --crema-2: #C6B79F;
  --laton: #C08B3E;
  --linea: rgba(240,231,216,.16);
  --didona: 'Bodoni', 'Didot', Georgia, serif;
  --sans: 'Jost', -apple-system, 'Segoe UI', sans-serif;
}

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

body {
  font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.75;
  color: var(--crema); background: var(--noche); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--didona); font-weight: 400; line-height: 1.14; }

.envoltorio { width: min(1120px, 90vw); margin-inline: auto; }
.estrecho { width: min(860px, 90vw); margin-inline: auto; }

.aviso { background: #0A0806; color: var(--crema-2); text-align: center; font-size: 13px; padding: 11px 18px; }
.aviso a { color: var(--laton); }

/* ── Cabecera ─────────────────────────────────────────── */
.cabecera { position: absolute; left: 0; right: 0; z-index: 30; padding: 26px 0; }
.cabecera .envoltorio { display: flex; align-items: center; gap: 30px; }
.marca { font-family: var(--didona); font-size: 26px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.menu { margin-left: auto; display: flex; gap: 30px; list-style: none; }
.menu a { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--crema-2); }
.menu a:hover { color: var(--crema); }
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--laton); color: var(--laton); padding: 12px 26px; background: transparent; cursor: pointer;
}
.btn:hover { background: var(--laton); color: var(--noche); }
.btn-lleno { background: var(--laton); color: var(--noche); }
.btn-lleno:hover { background: #D49B4A; border-color: #D49B4A; }

/* ── Portada ──────────────────────────────────────────── */
.portada { position: relative; height: clamp(600px, 100vh, 900px); display: grid; place-items: center; text-align: center; overflow: hidden; }
.portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,13,.78), rgba(20,16,13,.55) 45%, rgba(20,16,13,.94)); }
.portada-txt { position: relative; z-index: 2; padding: 40px 20px; }
.portada-txt .desde { font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: #E8D3A8; }
.portada-txt h1 { font-size: clamp(52px, 11vw, 128px); letter-spacing: .04em; text-transform: uppercase; margin: 18px 0 10px; }
.portada-txt .bajada { font-family: var(--didona); font-style: italic; font-size: clamp(19px, 2.4vw, 25px); color: var(--crema-2); }
.portada .btn:not(.btn-lleno) { color: var(--crema); border-color: rgba(240,231,216,.55); }
.portada .btn:not(.btn-lleno):hover { background: var(--crema); color: var(--noche); }
.portada-txt .acciones { display: flex; gap: 14px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }

/* Franja de datos prácticos bajo la portada */
.franja { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--noche-2); }
.franja .envoltorio { display: grid; grid-template-columns: repeat(4, 1fr); }
.franja div { padding: 26px 20px; text-align: center; border-right: 1px solid var(--linea); }
.franja div:last-child { border-right: 0; }
.franja b { display: block; font-family: var(--didona); font-size: 20px; }
.franja span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--crema-2); }

/* ── Secciones ────────────────────────────────────────── */
section { padding: 100px 0; }
.rotulo { font-size: 11.5px; letter-spacing: .38em; text-transform: uppercase; color: var(--laton); text-align: center; }
h2 { font-size: clamp(34px, 5vw, 54px); text-align: center; margin-top: 16px; }
.subtitulo { text-align: center; color: var(--crema-2); max-width: 620px; margin: 18px auto 0; }

/* Historia: texto y dos fotos desalineadas */
.historia .envoltorio { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.historia h2 { text-align: left; }
.historia .rotulo { text-align: left; }
.historia p { color: var(--crema-2); margin-top: 20px; }
.historia .firma { font-family: var(--didona); font-style: italic; font-size: 21px; color: var(--crema); margin-top: 26px; }
.historia .fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.historia .fotos img:first-child { aspect-ratio: 3/4; object-fit: cover; margin-top: 42px; }
.historia .fotos img:last-child { aspect-ratio: 3/4; object-fit: cover; }

/* ── La carta, compuesta como una carta de papel ── */
.carta { background: var(--noche-2); }
.menu-carta { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 54px 70px; }
.bloque h3 { font-size: 15px; letter-spacing: .3em; text-transform: uppercase; font-family: var(--sans); font-weight: 500; color: var(--laton); padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.bloque ul { list-style: none; margin-top: 8px; }
.plato { padding: 13px 0; }
.plato .linea { display: flex; align-items: baseline; gap: 10px; }
.plato .nombre { font-family: var(--didona); font-size: 20px; white-space: nowrap; }
/* Los puntos que llevan del plato al precio: el detalle que hace que parezca
   una carta impresa y no una lista de la compra. */
.plato .puntos { flex: 1; border-bottom: 1px dotted rgba(240,231,216,.3); transform: translateY(-4px); }
.plato .precio { font-family: var(--didona); font-size: 20px; color: var(--laton); }
.plato .desc { font-size: 14.5px; color: var(--crema-2); line-height: 1.55; max-width: 420px; }
.plato .desc em { font-style: normal; color: var(--laton); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-left: 8px; }

.menu-dia { margin-top: 58px; border: 1px solid var(--laton); padding: 34px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.menu-dia h3 { font-family: var(--didona); font-size: 30px; letter-spacing: 0; text-transform: none; color: var(--crema); border: 0; padding: 0; }
.menu-dia p { color: var(--crema-2); font-size: 15.5px; margin-top: 8px; max-width: 560px; }
.menu-dia .importe { font-family: var(--didona); font-size: 46px; color: var(--laton); text-align: right; line-height: 1; }
.menu-dia .importe span { display: block; font-family: var(--sans); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--crema-2); margin-top: 8px; }

/* ── Mosaico de platos ── */
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 10px; margin-top: 54px; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; }
.mosaico img:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaico img:nth-child(4),
.mosaico img:nth-child(5),
.mosaico img:nth-child(6) { grid-column: span 2; }

/* ── Reservar ── */
.reservar { background: var(--noche-2); }
.reservar .envoltorio { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.horarios { list-style: none; margin-top: 30px; }
.horarios li { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--linea); font-size: 16px; }
.horarios li span:last-child { color: var(--crema-2); }
.horarios li.cerrado span:last-child { color: #9A6A5A; }
.donde { margin-top: 34px; font-size: 15.5px; color: var(--crema-2); }
.donde b { color: var(--crema); font-weight: 500; }
.formulario { display: grid; gap: 13px; margin-top: 28px; }
.formulario input, .formulario select, .formulario textarea {
  font: inherit; font-size: 16px; padding: 13px 15px; background: transparent;
  border: 1px solid var(--linea); color: var(--crema); width: 100%; border-radius: 0;
}
.formulario input::placeholder, .formulario textarea::placeholder { color: #8A7C6C; }
.formulario select option { background: var(--noche); }
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.formulario .fila-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 13px; }
.formulario small { color: #8A7C6C; font-size: 13px; line-height: 1.55; }
.formulario .btn { justify-self: start; padding-inline: 40px; }

/* ── Pie ── */
.pie { padding: 66px 0 28px; border-top: 1px solid var(--linea); font-size: 15px; color: var(--crema-2); }
.pie .envoltorio { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 50px; }
.pie h4 { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--laton); margin-bottom: 14px; }
.pie ul { list-style: none; }
.pie li { padding: 3px 0; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--crema); }
.legal { margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 12.5px; color: #7A6D5E; display: flex; flex-wrap: wrap; gap: 8px 22px; }

@media (max-width: 940px) {
  .menu { display: none; }
  .historia .envoltorio, .reservar .envoltorio, .menu-carta { grid-template-columns: 1fr; gap: 40px; }
  .menu-dia { grid-template-columns: 1fr; }
  .menu-dia .importe { text-align: left; }
  .franja .envoltorio { grid-template-columns: 1fr 1fr; }
  .franja div:nth-child(2) { border-right: 0; }
  .mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .pie .envoltorio { grid-template-columns: 1fr; gap: 32px; }
  section { padding: 66px 0; }
}