/* Cal Soci · propuesta Balcó Studio · taberna nocturna del puerto de Ciutadella */
:root {
  --nit: #0e1a26;
  --nit-2: #16273a;
  --calc: #f1f2f0;
  --calc-2: #e2e4e2;
  --persiana: #2f6b4f;
  --persiana-fosc: #24553e;
  --farol: #f2b84b;
  --farol-fosc: #e3a12e;
  --tinta: #0e1a26;
  --suau-nit: #b9c3cc;
  --suau-dia: #4a5560;
  --ample: 1320px;
  --ritme: clamp(72px, 9vw, 136px);
  --f-tit: "Young Serif", Georgia, serif;
  --f-cos: "Familjen Grotesk", system-ui, sans-serif;
  --marge: clamp(20px, 4vw, 60px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--nit); color: var(--calc); font: 400 1.125rem/1.6 var(--f-cos); -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--farol); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 12px; top: -60px; background: var(--farol); color: var(--nit); padding: 10px 14px; z-index: 10; }
.salta:focus { top: 12px; }
h1, h2 { font-family: var(--f-tit); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
h2 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
p { margin: 0; max-width: 62ch; }
.ej { font-style: normal; font-weight: 600; font-size: 1rem; background: var(--farol); color: var(--nit); padding: 1px 7px; border-radius: 3px; white-space: nowrap; }

.propuesta { max-width: none; background: var(--farol); color: var(--nit); padding: 10px var(--marge); font-size: 1rem; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.propuesta .ej { background: var(--nit); color: var(--farol); }

.cabecera { display: flex; align-items: center; gap: 32px; padding: 18px max(var(--marge), calc((100% - var(--ample)) / 2)); }
.marca { font-family: var(--f-tit); font-size: 2rem; text-decoration: none; line-height: 1; margin-right: auto; }
.cabecera nav { display: flex; gap: 28px; font-weight: 500; }
.cabecera nav a { text-decoration: none; }
.cabecera nav a:hover { color: var(--farol); }

.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 4px; font-weight: 600; font-size: 1.125rem; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.boton--farol { background: var(--farol); color: var(--nit); }
.boton--farol:hover { background: var(--farol-fosc); }
.boton--linea { box-shadow: inset 0 0 0 2px currentColor; } /* taste-skill-ignore: contorno de botón secundario */
.boton--linea:hover { background: var(--calc); color: var(--nit); }
.boton--mini { min-height: 44px; padding: 0 20px; }

.hero { position: relative; min-height: min(88vh, 860px); display: grid; align-items: end; padding: 0 max(var(--marge), calc((100% - var(--ample)) / 2)) clamp(28px, 5vw, 64px); }
.hero__foto { position: absolute; inset: 0; }
.hero__foto img { object-position: 50% 62%; }
.hero__caja { position: relative; background: var(--nit); padding: clamp(28px, 4vw, 52px); max-width: 640px; display: grid; gap: 22px; border-top: 6px solid var(--persiana); }
.hero__lead { font-size: 1.35rem; color: var(--calc); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.estado { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.estado::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--suau-nit); flex: none; }
.estado[data-abierto="si"]::before { background: var(--farol); animation: farol 2.4s ease-in-out infinite; }
@keyframes farol { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .estado[data-abierto="si"]::before { animation: none; } }

.historia { background: var(--calc); color: var(--tinta); padding: var(--ritme) max(var(--marge), calc((100% - var(--ample)) / 2)); display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 6vw, 110px); align-items: center; }
.historia__texto { display: grid; gap: 22px; }
.historia__foto { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }

.barra { background: var(--persiana); padding: var(--ritme) max(var(--marge), calc((100% - var(--ample)) / 2)); display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(32px, 6vw, 96px); }
.barra__cap { display: grid; gap: 20px; align-content: start; }
.barra__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; grid-row: span 2; align-self: start; }
.barra__fotos figure { aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; }
.barra__fotos figure:last-child { margin-top: 64px; }
.carta { list-style: none; margin: 0; padding: 0; display: grid; }
.carta li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 16px; font-size: 1.35rem; }
.carta li:nth-child(odd) { background: rgba(14, 26, 38, .16); }
.carta b { font-family: var(--f-tit); font-weight: 400; white-space: nowrap; color: #fff; }
.carta sup, .carta__nota sup { font-family: var(--f-cos); font-size: 1rem; margin-left: 2px; }
.carta__nota { grid-column: 1; font-size: 1rem; color: #d7e3db; }

.noche { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.noche__foto { min-height: 520px; }
.noche__texto { padding: var(--ritme) var(--marge); display: grid; gap: 24px; align-content: center; max-width: 640px; }
.estado--claro { color: var(--farol); }

.horario { background: var(--nit-2); padding: var(--ritme) max(var(--marge), calc((100% - var(--ample)) / 2)); display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: auto 1fr; gap: 24px clamp(32px, 6vw, 96px); align-items: start; }
.horario__taula { border-collapse: collapse; width: 100%; font-size: 1.35rem; grid-column: 2; grid-row: 1 / span 2; }
.horario__taula th, .horario__taula td { text-align: left; padding: 12px 18px; }
.horario__taula th { font-weight: 500; }
.horario__taula tr:nth-child(odd) { background: rgba(241, 242, 240, .05); }
.horario__taula tr.avui { background: var(--farol); color: var(--nit); }
.horario__taula tr.avui th { font-weight: 700; }
.horario__font { grid-column: 1; color: var(--suau-nit); font-size: 1rem; }

.llegar { background: var(--calc); color: var(--tinta); padding: var(--ritme) max(var(--marge), calc((100% - var(--ample)) / 2)); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.llegar__texto { display: grid; gap: 20px; }
.llegar address { font-style: normal; font-size: 1.35rem; }
.llegar__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.llegar .boton--linea:hover { background: var(--nit); color: var(--calc); }
.mapa { aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--calc-2); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

.final { padding: var(--ritme) var(--marge); display: grid; justify-items: center; text-align: center; gap: 22px; }
.final p { color: var(--suau-nit); }

.peu { border-top: 6px solid var(--persiana); padding: 48px var(--marge); display: grid; gap: 10px; justify-items: center; text-align: center; color: var(--suau-nit); font-size: 1rem; }
.peu p { max-width: 72ch; }
.peu strong { color: var(--calc); }

.js .revela { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--retraso, 0ms), transform .7s ease var(--retraso, 0ms); }
.js .revela.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revela { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1080px) {
  .cabecera nav { display: none; }
}
@media (max-width: 860px) {
  .hero { min-height: auto; padding: 0; display: block; }
  .hero__foto { position: relative; aspect-ratio: 4 / 3; }
  .hero__caja { max-width: none; border-top: 0; padding: 32px var(--marge) 44px; }
  .historia, .barra, .noche, .horario, .llegar { grid-template-columns: 1fr; }
  .historia__foto { order: -1; aspect-ratio: 4 / 3; }
  .barra__fotos { grid-row: auto; }
  .barra__fotos figure:last-child { margin-top: 40px; }
  .noche__foto { min-height: 0; aspect-ratio: 3 / 2; }
  .horario__taula, .horario__font { grid-column: 1; grid-row: auto; }
  .carta li { font-size: 1.125rem; }
  .horario__taula { font-size: 1.125rem; }
  .hero__lead { font-size: 1.125rem; }
  .boton { width: 100%; }
  .boton--mini { width: auto; }
  .final .boton { width: auto; }
}