/* Terraza de Mar · carta digital · mismo sistema que el tríptico impreso (negro y gris, azul marino en coctelería). */
@font-face { font-family: "Barlow C"; src: url("fuentes/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow C"; src: url("fuentes/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --ink: #111111; --navy: #0F2A52; --black: #0A0A0A; --gray: #4B5563; --gray-m: #D1D5DB;
  --sky-2: #A9CBEA; --paper: #F4F5F6; --paper-2: #E8EAED; --muted: #4B5563;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 56px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: "Barlow C", "Arial Narrow", sans-serif; font-weight: 500; color: var(--ink); background: var(--paper); font-size: 17px; line-height: 1.25; }

/* cabecera: franja negra con olas, como el tríptico */
.top { position: relative; background: var(--black); color: #fff; text-align: center; padding: 28px 16px 22px; overflow: hidden;
  border-bottom: 3px solid var(--sky-2); }
.top .olas { position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(circle at 50% 100%, transparent 26%, #262626 27% 29%, transparent 30% 44%, #262626 45% 47%, transparent 48% 62%, #262626 63% 65%, transparent 66%) 0 0 / 44px 22px; }
.top .logo { position: relative; width: 190px; height: auto; }
.top .claim { position: relative; margin-top: 10px; font-weight: 600; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--sky-2); }

/* pestañas fijas */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; background: var(--black);
  scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 12px; border: 1px solid #3a3a3a; border-radius: 999px; min-height: 40px; }
.tabs a:hover, .tabs a:focus-visible { background: #fff; color: var(--black); outline: none; }

main { max-width: 1200px; margin: 0 auto; }
.plana { padding: 0 16px 8px; }
.plana:nth-child(even) { background: var(--paper-2); }
.ph-head { padding: 26px 0 6px; }
.ph-head h1 { font-weight: 600; font-size: 30px; letter-spacing: .15em; text-transform: uppercase; color: var(--black);
  border-bottom: 3px solid var(--black); padding-bottom: 6px; }
.cols { columns: 1; column-gap: 32px; }
@media (min-width: 760px) { .cols { columns: 2; } .ph-head h1 { font-size: 36px; } }
@media (min-width: 1100px) { .cols { columns: 3; } }

/* secciones: banda + medallón con icono */
.sec { break-inside: avoid-column; margin: 18px 0 10px; --bc: var(--black); --ic: var(--black); --bt: #fff; }
.fam-salon { --bc: var(--gray); --ic: var(--gray); }
.fam-coct { --bc: var(--navy); --ic: var(--navy); }
.fam-fresh { --bc: var(--gray-m); --ic: var(--black); --bt: var(--black); }
.sec h2 { position: relative; display: flex; align-items: center; min-height: 40px; margin-bottom: 10px; padding: 6px 12px 6px 62px;
  background: linear-gradient(to right, transparent 24px, var(--bc) 24px); color: var(--bt);
  font-weight: 600; font-size: 19px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; }
.sec h2 .md { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%;
  background: #fff; border: 2px solid var(--bc); color: var(--ic); display: flex; align-items: center; justify-content: center; }
.fam-fresh h2 .md { border-color: var(--black); }
.sec h2 .md svg { width: 92%; height: 92%; }
.sec ul { list-style: none; }
.r { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 5px 0; border-bottom: 1px dotted rgba(17,17,17,.35); }
.r .n { font-size: 17px; }
.r .p { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--black); white-space: nowrap; }
.r .d { grid-column: 1 / -1; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.s { margin: 14px 0 4px; font-weight: 600; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; border-bottom: 2px solid var(--black); padding-bottom: 3px; }
.nt { font-size: 14.5px; margin: 6px 0; padding-left: 8px; border-left: 3px solid var(--gray); color: var(--black); }
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; text-align: right; padding: 0 0 4px 8px;
  border-bottom: 2px solid var(--black); vertical-align: bottom; }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
td { padding: 5px 0 5px 8px; text-align: right; font-weight: 600; white-space: nowrap; }
td:first-child { font-weight: 500; white-space: normal; }
tbody tr:nth-child(even) td { background: rgba(255,255,255,.75); }
.tn { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* huecos de foto (1:1): se ve la foto si existe; si no, el recuadro «FOTO: …» */
.huecos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px -16px 0; padding: 16px; background: var(--black); }
@media (min-width: 760px) { .huecos { grid-template-columns: repeat(4, 1fr); } }
.hueco { position: relative; aspect-ratio: 1 / 1; border: 2px dashed var(--sky-2); border-radius: 6px; overflow: hidden; background: #141414; }
.hueco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hueco img + .ph { display: none; }
.hueco:has(img) { border-style: solid; border-color: transparent; }
.hueco .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; color: #fff; padding: 8px; }
.hueco .ph svg { width: 34%; height: auto; color: var(--sky-2); }
.hueco .ph b { font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.hueco .ph small { font-size: 11px; color: #C9CDD3; }
.hueco figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 10px 8px; color: #fff; font-weight: 600;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(transparent, rgba(0,0,0,.75)); display: none; }
.hueco:has(img) figcaption { display: block; }

/* repisa de tragos del local sobre negro */
.repisa { display: flex; align-items: flex-end; gap: 0; margin: 18px -16px 0; padding: 14px 0 18px; background: var(--black);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.repisa::-webkit-scrollbar { display: none; }
.repisa img { flex: none; height: 260px; width: auto; scroll-snap-align: center; margin: 0 -28px; }
.repisa img:first-child { margin-left: 0; } .repisa img:last-child { margin-right: 0; }
@media (min-width: 760px) { .repisa { justify-content: center; } .repisa img { height: 300px; } }
.huecos + .repisa { margin-top: 0; padding-top: 0; }

.pie { background: var(--black); color: #fff; text-align: center; padding: 22px 16px 30px; font-weight: 600; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; }
.pie .v { margin-top: 8px; color: #C9CDD3; font-weight: 500; letter-spacing: .08em; text-transform: none; font-size: 13px; }

/* barra superior fija: pestañas + buscador */
.barra-sup { position: sticky; top: 0; z-index: 5; background: var(--black); padding-bottom: 10px; }
html { scroll-padding-top: 118px; }
.buscador { position: relative; margin: 0 12px; }
.buscador svg { position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: #6B7280; pointer-events: none; }
.buscador input { width: 100%; height: 44px; border: 0; border-radius: 999px; padding: 0 44px 0 42px; background: #fff; color: var(--ink);
  font: 500 17px "Barlow C", "Arial Narrow", sans-serif; -webkit-appearance: none; appearance: none; }
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador input:focus-visible { outline: 3px solid var(--sky-2); outline-offset: 1px; }
.buscador button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--paper-2); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.resultado { margin: 8px 16px 0; color: var(--sky-2); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
body.buscando .huecos, body.buscando .repisa, body.buscando .sec li.s, body.buscando .sec li.nt, body.buscando .sec .tn { display: none; }
body.buscando .cols { columns: 1; }
@media (min-width: 760px) { body.buscando .cols { columns: 2; } }
[hidden] { display: none !important; }