/* ============================================================
   LA PALAPA SENSORIAL — sistema visual "Ramaje"
   La estructura radial del techo de palma ordena el layout,
   el color sale de la brasa, la palma y el papel a cuadros.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Color: muestreado de las fotos del restaurante */
  --carbon:    #17110c;   /* negro cálido de carbón apagado */
  --carbon-2:  #201812;   /* superficie elevada */
  --carbon-3:  #2c211a;   /* bordes y separadores */
  --brasa:     #c4421a;   /* glaseado de las costillas: relleno de botones y reglas */
  --brasa-alta:#f0763f;   /* brasa avivada: hover y texto pequeño sobre fondo oscuro */
  --brasa-texto:#ef7440;  /* el único tono de brasa que pasa AA en textos chicos */
  --palma:     #c9954e;   /* palma seca del techo */
  --mantel:    #2e6b45;   /* verde del papel a cuadros */
  --mantel-alto:#4a9a68;
  --cal:       #f0e7d6;   /* cal, papel */
  --humo:      #a2937f;   /* texto secundario */
  --vino:      #571326;

  --tipo-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --tipo-texto:   'Archivo Var', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tipo-dato:    'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --marco: clamp(1.25rem, 4vw, 4.5rem);   /* margen lateral del sitio */
  --pila:  clamp(4.5rem, 11vh, 9rem);     /* ritmo vertical entre secciones */
  --radio: 2px;                            /* casi recto: esto es madera, no plástico */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-brasa: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--carbon);
  color: var(--cal);
  font-family: var(--tipo-texto);
  font-variation-settings: 'wght' 400, 'wdth' 100;
  font-size: clamp(1rem, .94rem + .28vw, 1.14rem);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grano de película sobre todo el documento: quita el aspecto de plantilla */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  background-image: url('../img/grano.png');
  opacity: .5;
  pointer-events: none;
  z-index: 9999;
  animation: grano 700ms steps(1) infinite;
}
@keyframes grano {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 3%); }
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brasa-alta);
  outline-offset: 4px;
  border-radius: var(--radio);
}

::selection { background: var(--brasa); color: #fff; }

.salto-contenido {
  position: absolute; left: -9999px;
  background: var(--brasa); color: #fff;
  padding: .8rem 1.2rem; z-index: 10000;
}
.salto-contenido:focus { left: 1rem; top: 1rem; }

/* ---------- 3. Tipografía ---------- */
.display {
  font-family: var(--tipo-display);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0;
}
.d-xxl { font-size: clamp(3.4rem, 14.5vw, 13rem); }
.d-xl  { font-size: clamp(2.6rem, 8.2vw, 7rem); }
.d-l   { font-size: clamp(2.1rem, 5.4vw, 4.2rem); }
.d-m   { font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: .92; }

/* Etiqueta de sección: Archivo llevado a su ancho más estrecho y espaciado.
   El eje de ancho de la variable es el que da carácter, no un tamaño distinto. */
.rotulo {
  font-family: var(--tipo-texto);
  font-variation-settings: 'wght' 600, 'wdth' 68;
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brasa-texto);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}
.rotulo::before {
  content: '';
  width: 34px; height: 2px;
  background: var(--brasa);
  flex: none;
}
.rotulo--palma { color: var(--palma); }
.rotulo--palma::before { background: var(--palma); }

.dato {
  font-family: var(--tipo-dato);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .04em;
}

.guia {
  color: var(--humo);
  font-size: clamp(1.02rem, .96rem + .3vw, 1.22rem);
  line-height: 1.6;
  max-width: 46ch;
}

.enfasis { color: var(--palma); }

/* ---------- 4. Estructura ---------- */
.envoltura { width: 100%; padding-inline: var(--marco); }
.seccion { padding-block: var(--pila); position: relative; }
.rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2.6rem);
}

/* ---------- 5. Navegación ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem var(--marco);
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav[data-fija='si'] {
  background: rgba(20, 15, 11, .9);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--carbon-3);
  padding-block: .7rem;
}
.nav__marca {
  font-family: var(--tipo-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.32rem;
  line-height: .82;
  letter-spacing: .005em;
  display: flex;
  flex-direction: column;
}
.nav__marca span:last-child { color: var(--palma); }

.nav__enlaces { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav__enlace {
  font-variation-settings: 'wght' 500, 'wdth' 86;
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cal);
  position: relative;
  padding-block: .3rem;
  transition: color .3s;
}
.nav__enlace::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brasa);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__enlace:hover { color: var(--palma); }
.nav__enlace:hover::after,
.nav__enlace[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav__enlace[aria-current='page'] { color: var(--palma); }

.nav__cta {
  font-variation-settings: 'wght' 700, 'wdth' 86;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--brasa);
  color: #fff;
  padding: .68rem 1.15rem;
  border-radius: var(--radio);
  transition: background .3s, transform .3s var(--ease);
}
.nav__cta:hover { background: var(--brasa-alta); transform: translateY(-2px); }

.nav__hamburguesa {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 42px; height: 34px; padding: 0;
  position: relative;
}
.nav__hamburguesa span {
  position: absolute; left: 6px; right: 6px; height: 2px;
  background: var(--cal);
  transition: transform .45s var(--ease), opacity .3s;
}
.nav__hamburguesa span:nth-child(1) { top: 11px; }
.nav__hamburguesa span:nth-child(2) { bottom: 11px; }
.nav__hamburguesa[aria-expanded='true'] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__hamburguesa[aria-expanded='true'] span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__hamburguesa { display: block; }
  .nav__enlaces {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    background: rgba(18, 13, 9, .985);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    clip-path: circle(0% at calc(100% - 3rem) 2rem);
    transition: clip-path .7s var(--ease);
    pointer-events: none;
  }
  .nav__enlaces[data-abierto='si'] {
    clip-path: circle(150% at calc(100% - 3rem) 2rem);
    pointer-events: auto;
  }
  .nav__enlace { font-size: 1.5rem; }
  .nav__cta { font-size: 1rem; padding: .9rem 1.8rem; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--marco) clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__medio {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
}
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 85% at 62% 18%, rgba(23,17,12,0) 0%, rgba(23,17,12,.55) 62%, rgba(23,17,12,.93) 100%),
    linear-gradient(to top, var(--carbon) 2%, rgba(23,17,12,.72) 30%, rgba(23,17,12,.12) 62%);
}
.hero__cuerpo { position: relative; max-width: 1500px; }
.hero__eyebrow {
  font-family: var(--tipo-dato);
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--palma);
  margin: 0 0 clamp(.8rem, 2vh, 1.6rem);
}
.hero__titulo { color: var(--cal); }
.hero__titulo .linea { display: block; overflow: hidden; }
.hero__titulo .linea > span {
  display: block;
  transform: translateY(105%);
  animation: subir 1.15s var(--ease) forwards;
}
.hero__titulo .linea:nth-child(2) > span { animation-delay: .12s; }
.hero__titulo .linea:nth-child(2) { color: var(--palma); }
@keyframes subir { to { transform: translateY(0); } }

.hero__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.4rem, 4vw, 3rem);
  margin-top: clamp(1.6rem, 4vh, 3rem);
  opacity: 0;
  animation: aparecer 1s var(--ease) .55s forwards;
}
@keyframes aparecer { to { opacity: 1; } }

.hero__lema {
  max-width: 34ch;
  color: var(--cal);
  font-variation-settings: 'wght' 400, 'wdth' 100;
  margin: 0;
}
.hero__acciones,
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Cintillo de credibilidad: números verificables, no adjetivos */
.credenciales {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.8rem);
  align-items: center;
  border-top: 1px solid var(--carbon-3);
  padding-top: 1.1rem;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  opacity: 0;
  animation: aparecer 1s var(--ease) .8s forwards;
}
.credencial { display: flex; align-items: baseline; gap: .55rem; }
.credencial__cifra {
  font-family: var(--tipo-display);
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--palma);
}
.credencial__texto {
  font-family: var(--tipo-dato);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
  max-width: 15ch;
  line-height: 1.35;
}

/* ---------- 7. Botones ---------- */
.boton {
  --fondo: var(--brasa);
  --tinta: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1.02rem 1.7rem;
  background: var(--fondo);
  color: var(--tinta);
  border: 1px solid var(--fondo);
  border-radius: var(--radio);
  font-family: var(--tipo-texto);
  font-variation-settings: 'wght' 700, 'wdth' 88;
  font-size: .84rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color .35s, border-color .35s;
}
.boton span { position: relative; z-index: 1; }
/* El relleno sube como la brasa cuando prende */
.boton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brasa-alta);
  transform: translateY(101%);
  transition: transform .5s var(--ease-brasa);
}
.boton:hover { color: var(--carbon); }
.boton:hover::before { transform: translateY(0); }
.boton--fantasma {
  --fondo: transparent;
  --tinta: var(--cal);
  border-color: var(--carbon-3);
}
.boton--fantasma::before { background: var(--cal); }
.boton--fantasma:hover { color: var(--carbon); border-color: var(--cal); }
.boton--verde { --fondo: var(--mantel); }
.boton--verde::before { background: var(--mantel-alto); }
.boton__flecha { transition: transform .4s var(--ease); }
.boton:hover .boton__flecha { transform: translateX(5px); }

/* ---------- 8. Separador de varas ---------- */
.varas {
  height: 84px;
  width: 100%;
  display: block;
  opacity: .8;
}

/* ---------- 9. Revelado al hacer scroll ---------- */
[data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-revelar].visible { opacity: 1; transform: none; }
[data-revelar][data-retraso='1'] { transition-delay: .09s; }
[data-revelar][data-retraso='2'] { transition-delay: .18s; }
[data-revelar][data-retraso='3'] { transition-delay: .27s; }
[data-revelar][data-retraso='4'] { transition-delay: .36s; }

/* ---------- 10. Bloque de tesis ---------- */
.tesis { border-top: 1px solid var(--carbon-3); }
.tesis__texto { grid-column: 1 / span 7; }
.tesis__nota { grid-column: 9 / span 4; align-self: end; }
.tesis p { margin: 0 0 1.2rem; }
.tesis__grande {
  font-family: var(--tipo-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.9vw, 3.05rem);
  line-height: 1.06;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--cal);
  max-width: 20ch;
}
@media (max-width: 900px) {
  .tesis__texto, .tesis__nota { grid-column: 1 / -1; }
}

/* ---------- 11. Fichas de platillo ---------- */
.parrilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 1.8rem); }
.plato {
  grid-column: span 4;
  position: relative;
  background: var(--carbon-2);
  border: 1px solid var(--carbon-3);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color .45s, transform .55s var(--ease);
}
.plato:hover { border-color: var(--palma); transform: translateY(-6px); }
.plato__foto { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.plato__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s;
  filter: saturate(.97);
}
.plato:hover .plato__foto img { transform: scale(1.06); filter: saturate(1.1); }
.plato__foto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,17,12,.85), transparent 55%);
}
.plato__indice {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  font-family: var(--tipo-dato);
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--palma);
  background: rgba(23,17,12,.72);
  padding: .3rem .6rem;
  border-radius: var(--radio);
}
.plato__cuerpo { padding: 1.4rem 1.4rem 1.6rem; }
.plato__titulo {
  font-family: var(--tipo-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.85rem;
  line-height: .92;
  margin: 0 0 .55rem;
}
.plato__texto { color: var(--humo); font-size: .96rem; margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .plato { grid-column: span 6; } }
@media (max-width: 620px) { .plato { grid-column: 1 / -1; } }

/* ---------- 12. Franja del lugar ---------- */
.lugar { position: relative; overflow: hidden; }
.lugar__rejilla { align-items: center; }
.lugar__lienzo { grid-column: 1 / span 6; position: relative; }
.lugar__texto { grid-column: 8 / span 5; }
.lienzo-marco {
  position: relative;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 42%, #241a12, #14100b 72%);
  border: 1px solid var(--carbon-3);
  border-radius: var(--radio);
  overflow: hidden;
}
.lienzo-marco canvas { width: 100%; height: 100%; display: block; }
.lienzo-pie {
  position: absolute;
  left: 1rem; bottom: .9rem;
  font-family: var(--tipo-dato);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--humo);
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .lugar__lienzo, .lugar__texto { grid-column: 1 / -1; }
  .lugar__texto { margin-top: 2rem; }
}

/* ---------- 13. Muro de calificaciones ---------- */
.muro { border-top: 1px solid var(--carbon-3); border-bottom: 1px solid var(--carbon-3); }
.muro__rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.nota {
  grid-column: span 3;
  padding: 1.7rem 1.3rem;
  border-left: 1px solid var(--carbon-3);
}
.nota:first-child { border-left: 0; padding-left: 0; }
.nota__cifra {
  font-family: var(--tipo-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: .86;
  color: var(--palma);
  display: block;
}
.nota__fuente {
  font-family: var(--tipo-dato);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
  margin-top: .55rem;
  display: block;
}
@media (max-width: 780px) {
  .nota { grid-column: span 6; border-left: 0; padding-left: 0; }
}

.opinion {
  border: 1px solid var(--carbon-3);
  border-radius: var(--radio);
  padding: 1.5rem;
  background: var(--carbon-2);
}
.opinion__texto {
  font-family: var(--tipo-display);
  font-weight: 600;
  text-transform: none;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--cal);
}
.opinion__fuente {
  font-family: var(--tipo-dato);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brasa-texto);
}

/* ---------- 14. Spot ---------- */
.spot { position: relative; }
.spot__marco {
  position: relative;
  border: 1px solid var(--carbon-3);
  border-radius: var(--radio);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.spot__marco video { width: 100%; height: 100%; object-fit: cover; }
.spot__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 14, 10, .35);
  border: 0;
  cursor: pointer;
  transition: background .4s, opacity .4s;
}
.spot__play[hidden] { display: none; }
.spot__play:hover { background: rgba(20, 14, 10, .18); }
.spot__disco {
  width: clamp(74px, 9vw, 110px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brasa);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 0 rgba(210, 74, 30, .55);
  animation: latido 2.6s infinite;
}
@keyframes latido {
  70%  { box-shadow: 0 0 0 34px rgba(210, 74, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(210, 74, 30, 0); }
}
.spot__disco svg { width: 34%; fill: #fff; margin-left: 12%; }

/* ---------- 15. Pie ---------- */
.pie {
  border-top: 1px solid var(--carbon-3);
  padding-block: clamp(3rem, 7vh, 5rem) 2rem;
  background:
    linear-gradient(to bottom, rgba(23,17,12,.94), rgba(23,17,12,.99)),
    url('../img/varas.jpg') center / 560px;
}
.pie__rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); }
.pie__marca { grid-column: span 4; }
.pie__col { grid-column: span 2; }
.pie__col--ancha { grid-column: span 4; }
.pie__titulo {
  font-family: var(--tipo-texto);
  font-variation-settings: 'wght' 600, 'wdth' 70;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brasa-texto);
  margin: 0 0 1rem;
}
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pie__lista a, .pie__lista span { color: var(--humo); font-size: .93rem; transition: color .3s; }
.pie__lista a:hover { color: var(--palma); }
.pie__legal {
  margin-top: clamp(2.4rem, 6vh, 4rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--carbon-3);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-family: var(--tipo-dato);
  font-size: .7rem;
  color: var(--humo);
  letter-spacing: .06em;
}
@media (max-width: 860px) {
  .pie__marca, .pie__col, .pie__col--ancha { grid-column: span 6; }
}

/* ---------- 16. Encabezado de página interior ---------- */
.portada {
  position: relative;
  padding-top: clamp(9rem, 20vh, 14rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--carbon-3);
}
.portada__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .30;
}
.portada__fondo img { width: 100%; height: 100%; object-fit: cover; }
.portada::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(23,17,12,.65), var(--carbon) 92%);
}
.portada__titulo { color: var(--cal); }
.portada__guia { margin-top: 1.4rem; }

/* ---------- 17. Utilidades ---------- */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }

/* ---------- 18. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  body::after { animation: none; }
  [data-revelar] { opacity: 1; transform: none; }
  .hero__titulo .linea > span { transform: none; }
  .hero__pie, .credenciales { opacity: 1; }
}