/* ============================================================
   LA PALAPA SENSORIAL — páginas interiores
   ============================================================ */

/* ---------- Sub-navegación de la carta ---------- */
.anclas {
  position: sticky;
  top: 64px;
  z-index: 90;
  background: rgba(20, 15, 11, .93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block: 1px solid var(--carbon-3);
}
.anclas__pista {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  padding: .85rem var(--marco);
  scrollbar-width: none;
}
.anclas__pista::-webkit-scrollbar { display: none; }
.anclas__enlace {
  flex: none;
  font-variation-settings: 'wght' 600, 'wdth' 76;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--humo);
  white-space: nowrap;
  padding-bottom: .2rem;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.anclas__enlace:hover,
.anclas__enlace.activo { color: var(--palma); border-bottom-color: var(--brasa); }

/* ---------- Aviso de precios ---------- */
.aviso {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  border: 1px solid var(--carbon-3);
  border-left: 3px solid var(--palma);
  background: var(--carbon-2);
  padding: 1rem 1.2rem;
  border-radius: var(--radio);
  font-family: var(--tipo-dato);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--humo);
  max-width: 70ch;
}

/* ---------- Carta ---------- */
.carta__seccion { padding-block: clamp(2.6rem, 6vh, 4.4rem); border-top: 1px solid var(--carbon-3); }
.carta__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.carta__titulo {
  font-family: var(--tipo-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2rem, 5.6vw, 4rem);
  line-height: .86;
  margin: 0;
}
/* El papel a cuadros de las tablas, usado como marcador de sección */
.carta__cuadros {
  width: 96px; height: 44px;
  background: url('../img/papel-cuadros.png') center / 22px;
  border-radius: var(--radio);
  opacity: .82;
  flex: none;
}
.carta__nota { color: var(--humo); font-size: .95rem; max-width: 44ch; margin: .7rem 0 0; }

.platillos { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.platillo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .5rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(44, 33, 26, .7);
  transition: background .35s, padding-inline .35s var(--ease);
}
.platillo::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: url('../img/papel-cuadros.png') center / 12px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.platillo { position: relative; }
.platillo:hover { background: rgba(44, 33, 26, .38); padding-inline: .9rem; }
.platillo:hover::before { transform: scaleX(1); }
.platillo__nombre {
  font-variation-settings: 'wght' 650, 'wdth' 100;
  font-size: 1.08rem;
  color: var(--cal);
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.platillo__precio {
  font-family: var(--tipo-dato);
  font-weight: 500;
  font-size: 1rem;
  color: var(--palma);
  white-space: nowrap;
}
.platillo__texto {
  grid-column: 1 / -1;
  color: var(--humo);
  font-size: .93rem;
  line-height: 1.5;
  margin: .25rem 0 0;
  max-width: 62ch;
}
.etiqueta {
  font-family: var(--tipo-dato);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .16rem .45rem;
  border-radius: var(--radio);
  border: 1px solid currentColor;
}
.etiqueta--verde { color: var(--mantel-alto); }
.etiqueta--brasa { color: var(--brasa-alta); }
.etiqueta--palma { color: var(--palma); }

/* ---------- El Punto Exacto ---------- */
.punto {
  background:
    linear-gradient(to bottom, rgba(23,17,12,.96), rgba(23,17,12,.99)),
    url('../img/varas.jpg') center / 520px;
  border-block: 1px solid var(--carbon-3);
}
.punto__rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.punto__visor { grid-column: 1 / span 6; }
.punto__panel { grid-column: 8 / span 5; }
@media (max-width: 940px) {
  .punto__visor, .punto__panel { grid-column: 1 / -1; }
}

.punto__lienzo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 50% 55%, #241a13, #14100b 78%);
  border: 1px solid var(--carbon-3);
  border-radius: var(--radio);
  overflow: hidden;
}
.punto__lienzo canvas { width: 100%; height: 100%; display: block; }
.punto__temp {
  position: absolute;
  top: 1rem; right: 1rem;
  font-family: var(--tipo-dato);
  font-size: .8rem;
  color: var(--brasa-alta);
  background: rgba(20, 14, 10, .8);
  border: 1px solid var(--carbon-3);
  padding: .35rem .65rem;
  border-radius: var(--radio);
  letter-spacing: .06em;
}

.punto__control { margin-top: 1.8rem; }
.punto__deslizador {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--vino), var(--brasa) 55%, var(--palma));
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin: 0;
}
.punto__deslizador::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cal);
  border: 3px solid var(--brasa);
  cursor: grab;
  box-shadow: 0 3px 14px rgba(0,0,0,.5);
  transition: transform .25s var(--ease);
}
.punto__deslizador::-webkit-slider-thumb:active { transform: scale(1.18); cursor: grabbing; }
.punto__deslizador::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cal);
  border: 3px solid var(--brasa);
  cursor: grab;
}
.punto__marcas {
  display: flex;
  justify-content: space-between;
  margin-top: .9rem;
  gap: .4rem;
}
.punto__marca {
  background: none;
  border: 0;
  padding: .2rem 0;
  cursor: pointer;
  font-family: var(--tipo-dato);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--humo);
  text-align: center;
  flex: 1;
  transition: color .3s;
}
.punto__marca[aria-pressed='true'] { color: var(--palma); }
.punto__marca:hover { color: var(--cal); }

.punto__nombre {
  font-family: var(--tipo-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: .86;
  margin: .6rem 0 0;
  color: var(--palma);
}
.punto__frase {
  border-left: 2px solid var(--brasa);
  padding-left: 1rem;
  margin: 1.4rem 0;
}
.punto__frase strong {
  display: block;
  font-family: var(--tipo-dato);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brasa-texto);
  margin-bottom: .4rem;
  font-weight: 500;
}
.punto__frase span {
  font-family: var(--tipo-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--cal);
  text-transform: none;
}
.punto__desc { color: var(--humo); margin: 0; }

/* ---------- Reservas ---------- */
.reserva__rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.6rem, 3.4vw, 3.4rem); align-items: start; }
.reserva__forma { grid-column: 1 / span 7; }
.reserva__salida { grid-column: 9 / span 4; position: sticky; top: 100px; }
@media (max-width: 940px) {
  .reserva__forma, .reserva__salida { grid-column: 1 / -1; }
  .reserva__salida { position: static; }
}

.campo { margin-bottom: 1.6rem; }
.campo__etiqueta {
  display: block;
  font-family: var(--tipo-texto);
  font-variation-settings: 'wght' 600, 'wdth' 74;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--palma);
  margin-bottom: .6rem;
}
.campo__control {
  width: 100%;
  background: var(--carbon-2);
  border: 1px solid var(--carbon-3);
  border-radius: var(--radio);
  color: var(--cal);
  font-family: var(--tipo-texto);
  font-size: 1rem;
  padding: .9rem 1rem;
  transition: border-color .3s, background .3s;
}
.campo__control:focus { border-color: var(--brasa); background: #251b14; outline: none; }
.campo__control::placeholder { color: #6d6154; }
select.campo__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--palma) 50%), linear-gradient(135deg, var(--palma) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.campo__pista { font-family: var(--tipo-dato); font-size: .72rem; color: var(--humo); margin: .5rem 0 0; }
.campo__pista[data-tono='alerta'] { color: var(--brasa-alta); }

.opciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.opcion {
  background: var(--carbon-2);
  border: 1px solid var(--carbon-3);
  border-radius: var(--radio);
  color: var(--humo);
  font-family: var(--tipo-texto);
  font-variation-settings: 'wght' 600, 'wdth' 88;
  font-size: .82rem;
  letter-spacing: .06em;
  padding: .65rem 1rem;
  cursor: pointer;
  transition: all .3s var(--ease);
}
.opcion:hover { border-color: var(--palma); color: var(--cal); }
.opcion[aria-pressed='true'] { background: var(--brasa); border-color: var(--brasa); color: #fff; }

.contador { display: flex; align-items: center; gap: 1rem; }
.contador__boton {
  width: 46px; height: 46px;
  background: var(--carbon-2);
  border: 1px solid var(--carbon-3);
  border-radius: var(--radio);
  color: var(--cal);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: all .3s;
}
.contador__boton:hover:not(:disabled) { border-color: var(--brasa); color: var(--brasa-alta); }
.contador__boton:disabled { opacity: .35; cursor: not-allowed; }
.contador__cifra {
  font-family: var(--tipo-display);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--palma);
  min-width: 2.2ch;
  text-align: center;
}
.contador__texto { font-family: var(--tipo-dato); font-size: .76rem; color: var(--humo); }

.recado {
  background: var(--carbon-2);
  border: 1px solid var(--carbon-3);
  border-radius: var(--radio);
  padding: 1.4rem;
}
.recado__cabeza {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--tipo-dato);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mantel-alto);
  margin-bottom: 1rem;
}
.recado__cabeza::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mantel-alto);
}
.recado__texto {
  font-family: var(--tipo-texto);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--cal);
  white-space: pre-wrap;
  margin: 0;
  min-height: 8.5rem;
}
.recado__pie { font-family: var(--tipo-dato); font-size: .68rem; color: var(--humo); margin: 1rem 0 0; }

/* ---------- Galería ---------- */
.galeria {
  column-count: 3;
  column-gap: clamp(.6rem, 1.4vw, 1.1rem);
}
@media (max-width: 900px) { .galeria { column-count: 2; } }
@media (max-width: 560px) { .galeria { column-count: 1; } }

.pieza {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 clamp(.6rem, 1.4vw, 1.1rem);
  padding: 0;
  overflow: hidden;
  border-radius: var(--radio);
  border: 1px solid var(--carbon-3);
  background: var(--carbon-2);
  cursor: zoom-in;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.pieza img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.05s var(--ease), filter .5s;
  filter: saturate(.95);
}
.pieza:hover img { transform: scale(1.05); filter: saturate(1.1); }
.pieza__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1rem .9rem;
  background: linear-gradient(to top, rgba(20,14,10,.92), transparent);
  font-family: var(--tipo-dato);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cal);
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s, transform .4s var(--ease);
}
.pieza:hover .pieza__pie, .pieza:focus-visible .pieza__pie { opacity: 1; transform: none; }

.visor {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(12, 9, 6, .97);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.visor[data-abierto='si'] { opacity: 1; pointer-events: auto; }
.visor img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--radio); }
.visor__pie {
  position: absolute;
  bottom: clamp(1rem, 4vw, 2.4rem);
  left: 0; right: 0;
  text-align: center;
  font-family: var(--tipo-dato);
  font-size: .76rem;
  letter-spacing: .1em;
  color: var(--humo);
}
.visor__boton {
  position: absolute;
  background: none;
  border: 1px solid var(--carbon-3);
  color: var(--cal);
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: grid; place-items: center;
  transition: border-color .3s, background .3s;
}
.visor__boton:hover { border-color: var(--brasa); background: rgba(196,66,26,.16); }
.visor__cerrar { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.visor__ant { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.visor__sig { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

/* ---------- Datos prácticos ---------- */
.fichas { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 1.8rem); }
.ficha {
  grid-column: span 4;
  border: 1px solid var(--carbon-3);
  border-top: 2px solid var(--brasa);
  background: var(--carbon-2);
  border-radius: var(--radio);
  padding: 1.6rem 1.4rem;
}
.ficha--verde { border-top-color: var(--mantel-alto); }
.ficha--palma { border-top-color: var(--palma); }
.ficha__titulo {
  font-family: var(--tipo-texto);
  font-variation-settings: 'wght' 600, 'wdth' 72;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 0 0 .9rem;
}
.ficha__cuerpo { margin: 0; font-size: .98rem; line-height: 1.65; }
.ficha__cuerpo strong { color: var(--palma); font-variation-settings: 'wght' 650; }
@media (max-width: 860px) { .ficha { grid-column: span 6; } }
@media (max-width: 560px) { .ficha { grid-column: 1 / -1; } }

/* ---------- Relato de la palapa ---------- */
.relato { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.relato__medio { grid-column: span 6; }
.relato__texto { grid-column: span 6; align-self: center; }
.relato--invertido .relato__medio { order: 2; }
.relato__medio img { width: 100%; border-radius: var(--radio); border: 1px solid var(--carbon-3); }
@media (max-width: 860px) {
  .relato__medio, .relato__texto { grid-column: 1 / -1; }
  .relato--invertido .relato__medio { order: 0; }
}

.lienzo-alto {
  position: relative;
  height: clamp(340px, 62vh, 620px);
  border: 1px solid var(--carbon-3);
  border-radius: var(--radio);
  overflow: hidden;
  background: radial-gradient(circle at 50% 46%, #251b13, #13100a 74%);
}
.lienzo-alto canvas { width: 100%; height: 100%; display: block; }


/* ---------- Impresión: la carta se imprime, y debe imprimirse bien ---------- */
@media print {
  .nav, .anclas, .portada__fondo, .punto, canvas, .boton, .pie__legal,
  .aviso, body::after { display: none !important; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .portada { padding-top: 0; border: 0; }
  .portada::before { display: none; }
  .portada__titulo, .carta__titulo { color: #111; }
  .platillo__nombre, .ficha__cuerpo { color: #111; }
  .platillo__texto, .carta__nota, .guia { color: #444; }
  .platillo__precio { color: #111; }
  .rotulo { color: #666; }
  .carta__seccion { break-inside: avoid; border-top: 1px solid #ccc; }
  .platillo { break-inside: avoid; border-bottom: 1px solid #ddd; }
  .pie { background: none; border-top: 1px solid #ccc; }
  .pie__lista a, .pie__lista span, .pie__titulo { color: #333; }
}