@font-face { font-family: 'Josefin Sans'; src: url('/fonts/josefinsans-latin.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --crema: #f2eadb;
  --papel: #faf6ee;
  --arena: #e7dcc7;
  --tinta: #161412;
  --tinta-2: #47413a;
  --tinta-3: #6f675c;
  --oro: #b2b072;
  --oro-osc: #6f6c34;
  --magenta: #a3285e;
  --magenta-osc: #861d4b;
  --linea: rgba(22, 20, 18, .14);
  --linea-clara: rgba(242, 234, 219, .16);
  --display: 'Josefin Sans', 'Futura', 'Century Gothic', sans-serif;
  --texto: 'Figtree', system-ui, sans-serif;
  --ancho: 1240px;
  --margen: clamp(20px, 5vw, 64px);
  --sale: cubic-bezier(.22, 1, .36, 1);
  --cab: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.6 var(--texto); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 1; margin: 0; letter-spacing: .01em; }
h2 { font-size: clamp(34px, 5.4vw, 72px); }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; }
p { margin: 0; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

/* botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  font: 600 15px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  border-radius: 4px; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.boton:active { transform: scale(.97); }
.boton-principal { background: var(--magenta); color: #fff; }
.boton-principal:hover { background: var(--magenta-osc); }
.boton-linea { border-color: rgba(242, 234, 219, .7); color: var(--crema); }
.boton-linea:hover { background: var(--crema); color: var(--tinta); }
.boton-ancho { width: 100%; min-height: 56px; font-size: 16px; }
.enlace { display: inline-block; font: 600 15px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid currentColor; }
.enlace:hover { color: var(--magenta); }

/* aviso de arriba (cierres y novedad destacada, desde el panel) */
.aviso { background: var(--oro); color: var(--tinta); text-align: center; padding: 10px var(--margen); font-weight: 500; font-size: 15px; position: relative; z-index: 31; }
.aviso a { font-weight: 600; }

/* cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 30; height: var(--cab);
  display: flex; align-items: center; gap: 32px; padding: 0 var(--margen);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.cabecera-logo { display: block; height: 56px; position: relative; }
.cabecera-logo img { height: 56px; width: auto; transition: opacity .25s ease; }
.cabecera-logo .logo-oscuro { position: absolute; inset: 0; opacity: 0; }
.cabecera-nav { display: flex; gap: 28px; margin-left: auto; }
.cabecera-nav a { color: var(--crema); text-decoration: none; font: 600 14px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; padding: 8px 0; border-bottom: 1.5px solid transparent; transition: border-color .18s ease, color .25s ease; }
.cabecera-nav a:hover { border-color: currentColor; }
.boton-reserva { min-height: 42px; padding: 0 18px; font-size: 14px; background: var(--magenta); color: #fff; }
.boton-reserva:hover { background: var(--magenta-osc); }
.cabecera.solida { background: var(--papel); box-shadow: 0 1px 0 var(--linea); }
.cabecera.solida .logo-claro { opacity: 0; }
.cabecera.solida .logo-oscuro { opacity: 1; }
.cabecera.solida .cabecera-nav a { color: var(--tinta); }

/* portada */
.portada { position: relative; min-height: 100svh; margin-top: calc(-1 * var(--cab)); display: grid; grid-template-rows: 1fr auto; color: var(--crema); overflow: hidden; background: var(--tinta); }
.portada-foto, .portada-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada-foto img { object-fit: cover; object-position: 50% 45%; animation: acerca 1.6s var(--sale) both; }
.portada-foto::after { content: ''; position: absolute; inset: 0; background: rgba(16, 14, 12, .58); }
@keyframes acerca { from { transform: scale(1.06); } to { transform: scale(1); } }
.portada-contenido { position: relative; align-self: end; max-width: var(--ancho); width: 100%; margin: 0 auto; padding: calc(var(--cab) + 48px) var(--margen) 40px; }
.portada h1 { font-size: clamp(64px, 13vw, 190px); line-height: .86; letter-spacing: -.005em; }
.portada h1 span { display: block; font-size: clamp(18px, 2vw, 26px); letter-spacing: .04em; line-height: 1.2; margin-top: 18px; color: var(--oro); }
.portada-texto { max-width: 560px; margin-top: 22px; font-size: clamp(17px, 1.4vw, 19px); color: rgba(242, 234, 219, .9); }
.portada-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.portada-datos { position: relative; list-style: none; margin: 0; padding: 18px var(--margen); display: flex; flex-wrap: wrap; gap: 8px 40px; justify-content: center; border-top: 1px solid var(--linea-clara); font-size: 15px; color: rgba(242, 234, 219, .85); }
.portada-datos a { text-decoration: none; border-bottom: 1px solid rgba(242, 234, 219, .35); }
.portada-datos a:hover { border-color: var(--crema); }
#estado-ahora.abierto { color: var(--crema); font-weight: 600; }
.portada-contenido > * { animation: entra .9s var(--sale) both; }
.portada-contenido > :nth-child(2) { animation-delay: .12s; }
.portada-contenido > :nth-child(3) { animation-delay: .22s; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* grifos: la pizarra */
.grifos { background: var(--tinta); color: var(--crema); padding: clamp(72px, 10vw, 128px) var(--margen); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.grifos-cuerpo { max-width: 760px; }
.grifos-fecha { margin-top: 14px; color: rgba(242, 234, 219, .6); font-size: 15px; }
.grifos-lista { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--linea-clara); }
.grifo { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 18px; padding: 20px 0; border-bottom: 1px solid var(--linea-clara); align-items: baseline; }
.grifo-n { font: 600 15px/1 var(--display); color: var(--oro); font-variant-numeric: tabular-nums; }
.grifo-nombre { font: 700 clamp(22px, 2.4vw, 30px)/1.05 var(--display); text-transform: uppercase; }
.grifo-fresh { display: block; margin-top: 6px; font: 500 14px/1.2 var(--texto); color: var(--oro); }
.grifo-meta { grid-column: 2; color: rgba(242, 234, 219, .66); font-size: 15px; }
.grifo-precio { grid-row: 1 / span 2; grid-column: 3; display: grid; grid-template-columns: auto auto; gap: 2px 14px; text-align: right; font-variant-numeric: tabular-nums; }
.grifo-precio span { font-size: 12px; color: rgba(242, 234, 219, .55); text-transform: uppercase; letter-spacing: .08em; }
.grifo-precio strong { font: 600 19px/1.1 var(--display); }
.grifo-vacio .grifo-nombre { color: rgba(242, 234, 219, .45); }
.grifo-esqueleto { height: 86px; background: linear-gradient(90deg, transparent, rgba(242, 234, 219, .05), transparent); }
.grifos-envase { margin-top: 28px; font-size: 17px; color: var(--oro); }
.grifos-foto { position: sticky; top: calc(var(--cab) + 24px); }
.grifos-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }

/* nevera */
.nevera { position: relative; max-width: var(--ancho); margin: 0 auto; padding: clamp(80px, 11vw, 150px) var(--margen); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: 'cifra foto1' 'texto foto1' 'texto foto2'; gap: 0 clamp(32px, 6vw, 96px); }
.nevera-cifra { grid-area: cifra; font: 700 clamp(140px, 22vw, 300px)/.8 var(--display); color: var(--oro-osc); letter-spacing: -.02em; }
.nevera-texto { grid-area: texto; margin-top: 28px; max-width: 560px; }
.nevera-texto p { margin-top: 20px; color: var(--tinta-2); }
.nevera-foto-1 { grid-area: foto1; }
.nevera-foto-2 { grid-area: foto2; width: 62%; margin: -22% 0 0 -18%; position: relative; border: 8px solid var(--papel); }
.nevera-foto img { width: 100%; border-radius: 4px; }
.nevera-foto-1 img { aspect-ratio: 1 / 1; object-fit: cover; }
.nevera-nuevas { margin-top: 40px; border-top: 1px solid var(--linea); padding-top: 24px; }
.nevera-nuevas h3 { font-size: 18px; letter-spacing: .06em; color: var(--tinta-3); }
.nevera-nuevas ul { list-style: none; margin: 16px 0 0; padding: 0; }
.nevera-nuevas li { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.nevera-nuevas strong { display: block; font: 700 21px/1.15 var(--display); text-transform: uppercase; }
.nevera-nuevas li p { margin-top: 6px; color: var(--tinta-2); font-size: 16px; }

/* agenda */
.agenda { background: var(--crema); }
.agenda-banda { position: relative; height: clamp(360px, 62vh, 620px); overflow: hidden; }
.agenda-banda img { width: 100%; height: 100%; object-fit: cover; }
.agenda-banda::after { content: ''; position: absolute; inset: 0; background: rgba(16, 14, 12, .5); }
.agenda-banda h2 { position: absolute; z-index: 1; left: var(--margen); right: var(--margen); bottom: clamp(28px, 5vw, 56px); max-width: 900px; color: var(--crema); }
.agenda-lista { max-width: var(--ancho); margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--margen); }
.agenda-vacia { max-width: 620px; color: var(--tinta-2); }
.nov { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 300px); gap: 8px clamp(20px, 4vw, 48px); padding: 28px 0; border-bottom: 1px solid var(--linea); align-items: start; }
.nov:first-child { border-top: 1px solid var(--linea); }
.nov-fecha { font-family: var(--display); text-transform: uppercase; color: var(--tinta-3); font-size: 15px; letter-spacing: .04em; line-height: 1.2; }
.nov-fecha strong { display: block; font-size: 56px; line-height: .9; color: var(--tinta); letter-spacing: 0; }
.nov h3 { font-size: clamp(24px, 2.6vw, 34px); }
.nov p { margin-top: 10px; color: var(--tinta-2); max-width: 600px; }
.nov img { width: 100%; border-radius: 4px; aspect-ratio: 4 / 3; object-fit: cover; }

/* carta, filas alternas */
.carta { max-width: var(--ancho); margin: 0 auto; padding: clamp(80px, 11vw, 140px) var(--margen); display: grid; gap: clamp(64px, 9vw, 120px); }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.fila img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 4px; }
.fila-girada figure { order: 2; }
.fila h3 { font-size: clamp(30px, 3.6vw, 48px); }
.fila p { margin-top: 18px; color: var(--tinta-2); max-width: 470px; font-size: 18px; }

/* opiniones */
.opiniones { background: var(--arena); padding: clamp(80px, 11vw, 140px) var(--margen); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; }
.opiniones h2 { grid-column: 1 / -1; font-size: clamp(26px, 3.4vw, 44px); max-width: 760px; }
.cita { margin: 0; }
.cita p { font: 600 clamp(24px, 3vw, 40px)/1.15 var(--display); text-transform: none; letter-spacing: -.005em; }
.cita p::before { content: '“'; color: var(--magenta); }
.cita p::after { content: '”'; color: var(--magenta); }
.cita footer { margin-top: 12px; color: var(--tinta-3); font-size: 15px; }
.cita-1 { grid-column: 1 / span 7; }
.cita-2 { grid-column: 6 / span 7; }
.cita-3 { grid-column: 2 / span 6; }
.cita-4 { grid-column: 7 / span 6; }
.opiniones .enlace { grid-column: 1 / -1; justify-self: start; }

/* reservar */
.reservar { max-width: var(--ancho); margin: 0 auto; padding: clamp(80px, 11vw, 140px) var(--margen); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.reservar-intro p { margin-top: 20px; color: var(--tinta-2); max-width: 440px; }
.reservar-intro figure { margin-top: 36px; }
.reservar-intro img { border-radius: 4px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; max-width: 440px; }
.formulario { display: grid; gap: 28px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font: 700 15px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; padding: 0; }
.dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.dia { flex: 0 0 auto; scroll-snap-align: start; width: 74px; padding: 10px 4px; border: 1.5px solid var(--linea); border-radius: 6px; background: var(--papel); text-align: center; cursor: pointer; font: 500 13px/1.25 var(--texto); color: var(--tinta-2); transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .12s ease; }
.dia strong { display: block; font: 700 26px/1.1 var(--display); color: var(--tinta); }
.dia:hover:not(:disabled) { border-color: var(--tinta); }
.dia:active:not(:disabled) { transform: scale(.96); }
.dia[aria-checked='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.dia[aria-checked='true'] strong { color: var(--crema); }
.dia:disabled { cursor: not-allowed; opacity: .42; }
.dia small { display: block; font-size: 11px; margin-top: 2px; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.hora { min-height: 46px; border: 1.5px solid var(--linea); border-radius: 6px; background: var(--papel); cursor: pointer; font: 600 16px/1 var(--texto); font-variant-numeric: tabular-nums; color: var(--tinta); transition: border-color .15s ease, background-color .15s ease, transform .12s ease; }
.hora:hover { border-color: var(--tinta); }
.hora:active { transform: scale(.96); }
.hora[aria-checked='true'] { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.contador { display: inline-flex; align-items: center; border: 1.5px solid var(--linea); border-radius: 6px; }
.contador button { width: 52px; height: 52px; border: 0; background: none; font: 500 26px/1 var(--texto); cursor: pointer; color: var(--tinta); }
.contador button:disabled { opacity: .3; cursor: not-allowed; }
.contador output { min-width: 56px; text-align: center; font: 700 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campos label { display: grid; gap: 8px; font-size: 15px; font-weight: 500; color: var(--tinta-2); }
.campos .ancho { grid-column: 1 / -1; }
input, textarea { font: 400 17px/1.4 var(--texto); color: var(--tinta); background: #fff; border: 1.5px solid var(--linea); border-radius: 6px; padding: 13px 14px; width: 100%; transition: border-color .15s ease; }
input:focus, textarea:focus { border-color: var(--tinta); outline: none; }
input::placeholder, textarea::placeholder { color: #9b9387; }
textarea { resize: vertical; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acepto { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--tinta-2); }
.acepto input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--magenta); }
.acepto-enlace { margin-top: -18px; padding-left: 34px; font-size: 14px; }
.error { color: #a1271f; font-weight: 500; background: #f6e2dc; padding: 12px 14px; border-radius: 6px; }
.ayuda, .cargando { font-size: 14px; color: var(--tinta-3); }
.hecho { grid-column: 2; padding: 36px 0; border-top: 2px solid var(--tinta); }
.hecho h3 { font-size: clamp(32px, 4vw, 48px); }
.hecho p { margin-top: 14px; color: var(--tinta-2); font-size: 18px; }
.hecho p:first-of-type { color: var(--tinta); font-weight: 500; }

/* dónde */
.donde { background: var(--tinta); color: var(--crema); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.donde-datos { padding: clamp(72px, 10vw, 120px) var(--margen); }
address { font-style: normal; margin-top: 24px; color: rgba(242, 234, 219, .8); line-height: 1.7; }
.horario { margin-top: 32px; border-collapse: collapse; width: 100%; max-width: 420px; font-variant-numeric: tabular-nums; }
.horario th, .horario td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--linea-clara); font-weight: 400; }
.horario td { text-align: right; color: rgba(242, 234, 219, .8); }
.horario tr.hoy th, .horario tr.hoy td { color: var(--oro); font-weight: 600; }
.cierres { margin-top: 28px; }
.cierres h3 { font-size: 16px; letter-spacing: .06em; color: var(--oro); }
.cierres ul { list-style: none; margin: 10px 0 0; padding: 0; color: rgba(242, 234, 219, .85); }
.cierres li { padding: 4px 0; }
.contacto { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.contacto a { font: 600 15px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid var(--oro); }
.contacto a:hover { color: var(--oro); }
.donde-mapa { position: relative; min-height: 420px; }
.donde-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }
.donde-mapa .enlace { position: absolute; left: 20px; bottom: 20px; background: var(--papel); color: var(--tinta); padding: 14px 18px; border: 0; border-radius: 4px; }

/* pie */
.pie { background: #0e0d0b; color: rgba(242, 234, 219, .7); text-align: center; padding: 56px var(--margen) 40px; font-size: 14px; display: grid; gap: 12px; justify-items: center; }
.pie img { height: 84px; width: auto; margin-bottom: 8px; }
.pie a { color: rgba(242, 234, 219, .85); }
.credito { margin-top: 16px; font-size: 13px; }
.credito a { color: rgba(242, 234, 219, .55); text-decoration: none; }
.credito a:hover { color: var(--crema); }

/* aparición al bajar (solo lo que empieza fuera de pantalla) */
.oculto { opacity: 0; transform: translateY(14px); }
.visto { opacity: 1; transform: none; transition: opacity .7s var(--sale), transform .7s var(--sale); }

/* páginas legales */
.legal { max-width: 760px; margin: 0 auto; padding: calc(var(--cab) + 40px) var(--margen) 96px; }
.legal h1 { font-size: clamp(36px, 6vw, 60px); }
.legal h2 { font-size: 22px; margin-top: 40px; }
.legal p, .legal li { margin-top: 14px; color: var(--tinta-2); }
.pagina-legal .cabecera { background: var(--papel); box-shadow: 0 1px 0 var(--linea); }
.pagina-legal .cabecera .logo-claro { opacity: 0; }
.pagina-legal .cabecera .logo-oscuro { opacity: 1; }
.pagina-legal .cabecera-nav a { color: var(--tinta); }

@media (max-width: 1000px) {
  .cabecera-nav { display: none; }
  .boton-reserva { margin-left: auto; }
  .grifos { grid-template-columns: 1fr; }
  .grifos-foto { position: static; max-width: 560px; }
  .grifos-foto img { aspect-ratio: 4 / 3; }
  .nevera { grid-template-columns: 1fr 1fr; grid-template-areas: 'cifra cifra' 'texto texto' 'foto1 foto2'; gap: 0 20px; }
  .nevera-foto-1, .nevera-foto-2 { margin-top: 40px; }
  .nevera-foto-2 { width: 100%; margin-left: 0; border: 0; align-self: end; }
  .reservar { grid-template-columns: 1fr; }
  .reservar-intro figure { display: none; }
  .hecho { grid-column: 1; }
  .donde { grid-template-columns: 1fr; }
  .donde-mapa { min-height: 360px; }
  .nov { grid-template-columns: 90px minmax(0, 1fr); }
  .nov figure { grid-column: 2; max-width: 420px; }
  .opiniones { grid-template-columns: 1fr; gap: 36px; }
  .cita-1, .cita-2, .cita-3, .cita-4 { grid-column: 1; }
  .cita-2, .cita-4 { padding-left: 12%; }
}
@media (max-width: 700px) {
  :root { --cab: 64px; }
  body { font-size: 16px; }
  .cabecera-logo, .cabecera-logo img { height: 46px; }
  .portada { min-height: 92svh; }
  .portada-datos { justify-content: flex-start; flex-direction: column; gap: 8px; font-size: 14px; }
  .portada-botones .boton { flex: 1 1 auto; }
  .fila { grid-template-columns: 1fr; }
  .fila-girada figure { order: 0; }
  .grifo { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 0; }
  .grifo-precio { grid-template-columns: auto; gap: 0; }
  .grifo-precio span { display: none; }
  .grifo-precio strong:nth-of-type(2) { font-size: 14px; font-weight: 500; color: rgba(242, 234, 219, .6); }
  .grifo-precio strong:nth-of-type(2)::before { content: 'media '; }
  .campos { grid-template-columns: 1fr; }
  .nov-fecha strong { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .oculto { opacity: 1; transform: none; }
}