/* ==========================================================================
   LA PÁGINA SUELTA · lo poco que no es el libro

   El libro está en `libro.css`, que carga también el sitio. Aquí queda lo que
   allá pone la página: los tokens de la marca, cuatro reglas de reset y la
   barra de arriba con el nombre y la sede. Si esto crece, es que se está
   escribiendo la carta dos veces.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tokens — los de la marca, copiados del sitio
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --rojo:        #B01E24;
  --rojo-osc:    #7E1418;
  --rojo-prof:   #5A0E11;
  --naranja:     #F0901E;
  --naranja-cl:  #F7B733;
  --amarillo:    #FBD24B;

  /* Neutros cálidos */
  --crema:       #FDF4E7;
  --crema-2:     #F7E6D0;
  --crema-3:     #EFD7BA;
  --arena:       #A9907C;
  --tinta:       #2A1D18;
  --tinta-2:     #5B4740;
  --tinta-3:     #8A7167;
  --nori:        #16100D;
  --nori-2:      #241A15;

  /* Superficies */
  --bg:          var(--crema);
  --surface:     #FFFBF4;
  --linea:       rgba(42, 29, 24, .13);
  --linea-sutil: rgba(42, 29, 24, .07);

  /* Tipografía */
  --display: 'Fraunces', 'Georgia', serif;
  --sans:    'Outfit', 'Segoe UI', system-ui, sans-serif;
  --script:  'Caveat', cursive;

  --t-xs:   clamp(.72rem, .70rem + .10vw, .80rem);
  --t-sm:   clamp(.84rem, .81rem + .14vw, .94rem);
  --t-base: clamp(.98rem, .94rem + .20vw, 1.10rem);

  /* Movimiento — la misma familia de curvas que el sitio */
  --ease:       cubic-bezier(.22, 1, .36, 1);
  --ease-io:    cubic-bezier(.65, 0, .35, 1);
  --ease-suave: cubic-bezier(.33, 1, .68, 1);
  --d-rapido:   .32s;

  --sombra-s:  0 2px 10px rgba(42, 29, 24, .07);
  --sombra-m:  0 14px 38px -14px rgba(42, 29, 24, .26);
  --radio-s:   11px;

  /* La diagonal del motivo de la marca. La usa la foto del plato, que va
     ladeada media diagonal. */
  --diag: 4.6deg;

  /* Lo que la barra de arriba tapa. En el sitio son los 74 px de su
     navegación; acá, la tira con el nombre y la sede. Las pestañas se pegan
     justo debajo, y de esta medida sale también el alto del libro. */
  --nav-h: 52px;
}

/* --------------------------------------------------------------------------
   Lo mínimo del reset del sitio que el libro necesita
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2.5px solid var(--rojo); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--rojo); color: var(--crema); }

/* --------------------------------------------------------------------------
   La barra — todo lo que esta página aporta de suyo
   -------------------------------------------------------------------------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 clamp(.9rem, .5rem + 1.8vw, 2rem);
  background: var(--nori);
  color: var(--crema);
}
.barra__marca {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}
/* Enlace y no botón: sin JS también cambia de sede, y se puede compartir. */
.barra__sede {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crema-3);
  background: rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 7px 13px;
  min-height: 32px;
}
.barra__sede b { font-weight: 600; letter-spacing: .06em; }

/* «Pedir»: el mismo naranja de los botones de WhatsApp del sitio. Quien llega
   desde la ficha de Google a mirar precios pide desde acá, sin volver atrás. */
.barra__acc { display: inline-flex; align-items: center; gap: 8px; }
.barra__pedir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--naranja-cl), var(--naranja));
  color: var(--tinta);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-s);
}
.barra__pedir svg { width: 16px; height: 16px; flex: none; }
.barra__pedir[hidden] { display: none; }
.barra__marca, .barra__sede, .barra__pedir { white-space: nowrap; }
/* Con «Pedir» la barra lleva tres cosas, y en un teléfono no caben las tres
   enteras: primero se va la palabra «Sede» —queda «SUR · CAMBIAR»— y en los
   más angostos el nombre, que la carta ya dice en cada hoja. */
@media (max-width: 400px) {
  .barra { gap: 8px; }
  .barra__marca { font-size: 13px; }
  .barra__sede-t { display: none; }
  .barra__sede { padding: 7px 10px; letter-spacing: .06em; }
  .barra__pedir { padding: 7px 11px 7px 9px; }
}
@media (max-width: 340px) {
  .barra__marca { display: none; }
  .barra { justify-content: flex-end; }
}

.hoja-suelta {
  padding: 0 clamp(.6rem, .3rem + 1.4vw, 2rem) clamp(1rem, .6rem + 1.6vw, 2.4rem);
  max-width: 1340px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   El libro — copiado tal cual de la sección 15 de `sitio/css/style.css`
   -------------------------------------------------------------------------- */
.precio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .40em 1.05em;
  border-radius: 99px;
  background: var(--arena);
  color: #fff;
  font-weight: 600;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: var(--sombra-s);
}
.precio--rojo { background: linear-gradient(140deg, var(--rojo), var(--rojo-osc)); }
.precio--naranja { background: linear-gradient(140deg, var(--naranja-cl), var(--naranja)); color: var(--tinta); }

/* --------------------------------------------------------------------------
   Movimiento reducido — se apaga la animación, no la función
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}