/* ==========================================================================
   PANEL SUSHI PLUS CHICKEN
   ==========================================================================

   La entrada copia la mecánica del sitio: un PARTIDOR de hojas cortadas en
   diagonal, a sangre, donde lo único que se mueve al pasar el cursor es el
   RECORTE — la foto de adentro está fija a la ventana. Por eso el lado no
   «crece»: se destapa. Esa diferencia es la que lo hace sentir un telón y no
   tres cajas. Acá son tres hojas y dos cortes en vez de dos y uno.

   Adentro manda el contraste: barra oscura de nori contra el papel crema del
   contenido. Un panel todo crema sobre crema se lee plano; el corte oscuro
   arriba le da peso y separa «dónde estoy» de «qué estoy haciendo».
   ========================================================================== */

/* ==========================================================================
   1 · Tokens
   ========================================================================== */
:root {
  --rojo:        #B01E24;
  --rojo-osc:    #7E1418;
  --rojo-prof:   #5A0E11;
  --rojo-vivo:   #D2262D;
  --naranja:     #F0901E;
  --naranja-cl:  #F7B733;
  --amarillo:    #FBD24B;

  --crema:       #FDF4E7;
  --crema-2:     #F7E6D0;
  --crema-3:     #EFD7BA;
  --arena:       #A9907C;
  --tinta:       #211610;
  --tinta-2:     #4A382F;
  --tinta-3:     #7C6558;
  --nori:        #16100D;
  --nori-2:      #241A15;
  --nori-3:      #33251E;

  --surface:     #FFFDF9;
  --linea:       rgba(33, 22, 16, .16);
  --linea-sutil: rgba(33, 22, 16, .08);

  --verde:       #157A47;
  --verde-cl:    #1E9E5C;
  --verde-sua:   rgba(21, 122, 71, .11);
  --rojo-sua:    rgba(176, 30, 36, .10);
  --ambar-sua:   rgba(240, 144, 30, .13);

  --display: 'Fraunces', 'Georgia', serif;
  --sans:    'Outfit', 'Segoe UI', system-ui, sans-serif;
  --script:  'Caveat', cursive;

  --ease:       cubic-bezier(.22, 1, .36, 1);
  --ease-io:    cubic-bezier(.65, 0, .35, 1);
  --ease-suave: cubic-bezier(.33, 1, .68, 1);
  --resorte:    cubic-bezier(.34, 1.56, .64, 1);
  --d-rapido:   .32s;
  --d-medio:    .62s;
  --d-lento:    1.05s;

  --radio:   14px;
  --radio-g: 20px;
  --max:     1240px;
  --corte:   3.6vw;      /* desvío diagonal del partidor */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--crema); color: var(--tinta);
  font-family: var(--sans); font-size: 15.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0;
                 letter-spacing: -.018em; line-height: 1.12; }
/* `manipulation` era el valor equivocado: quita la espera del doble toque pero
   DEJA el pellizco para acercar, que es justo lo que había que quitar.
   `pan-x pan-y` dice lo que de verdad se quiere —en esta página los dedos solo
   desplazan— y de paso se lleva las dos formas de acercar y la espera de los
   300 ms. Lo que Safari no atiende por CSS lo cierra el JS en 02-dialogos.js. */
html, body { touch-action: pan-x pan-y; }

/* El fondo congelado mientras haya un diálogo abierto. `position: fixed` es lo
   único que de verdad detiene el desplazamiento en iOS —`overflow: hidden` en
   el body ahí no hace nada—, y el desplazamiento perdido lo devuelve el JS al
   cerrar. Sin esto, tocar un campo del cajón corría la página de atrás y el pie
   con Guardar y Cancelar se iba de la pantalla. */
body.trabado { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.oculto { display: none !important; }
/* `hidden` es un atributo del HTML y su `display: none` lo pone la hoja del
   navegador, que pierde contra cualquier clase nuestra. Sin esto, esconder un
   grupo de la carta con `.hidden = true` no lo esconde. */
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--naranja); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--amarillo); color: var(--nori); }
* { scrollbar-width: thin; scrollbar-color: var(--crema-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--crema-3); border-radius: 99px;
                             border: 3px solid var(--crema); }

/* ==========================================================================
   1b · Iconos
   ==========================================================================
   Un solo juego de trazo, del mismo grosor que la tipografía. Antes había
   emoji: cada sistema operativo los dibujaba distinto —Windows uno, Android
   otro, iOS otro— y el panel cambiaba de cara según el aparato de quien lo
   abriera. Un símbolo dibujado por nosotros se ve igual en los tres.
   ========================================================================== */
.ico {
  width: 1em; height: 1em; flex: none; display: inline-block;
  vertical-align: -.14em;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
/* A tamaño grande el trazo tiene que adelgazar o se ve tosco. */
.ico--g { stroke-width: 1.45; }

/* El sprite es el primer hijo del <body> y trae `width="0" height="0"`, pero un
   <svg> sigue siendo inline: aunque no mida nada genera su caja de línea, y eso
   metía 24 px de crema encima de la barra oscura. Sacarlo del flujo lo quita;
   los <use> siguen resolviendo contra sus <symbol> igual. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }