/* ==================================================================
   La carta
   Vive en dos sitios: en su propia página (/dkdas/carta, la que va en los
   correos) y como una ventana más dentro de la landing. Por eso los
   estilos están aquí y no dentro de una de las dos.

   Las clases van con ct- por delante a propósito: la landing ya tiene
   .pestanas y .pes para Escribir/Manuscrito, y sin prefijo se pisarían.
   ================================================================== */
/* -------------------------------------------------------- las pestañas
   Las de XP: la activa sube y se pega al panel, las otras se quedan
   hundidas. */
.ct-tabs{
  display:flex;gap:3px;padding:7px 8px 0;
  background:#EDF3FD;border-bottom:1px solid #7A9CC6;
}
.ct-tab{
  -webkit-appearance:none;appearance:none;
  flex:1;min-width:0;
  padding:7px 6px 6px;
  border:1px solid #7A9CC6;border-bottom:0;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#F3F6FB,#DCE6F4);
  font-family:inherit;font-size:11px;color:#2A4468;cursor:pointer;
  position:relative;top:1px;
}
.ct-tab.on{
  background:#fff;color:#123A6E;font-weight:700;
  top:2px;padding-bottom:8px;
}

/* ------------------------------------------------------------ la carta */
.ct-hojas{padding:2px 0 0}
.ct-hoja{display:none}
.ct-hoja.on{display:block}

.ct-grupo{
  -webkit-appearance:none;appearance:none;width:100%;
  display:flex;align-items:center;gap:6px;
  padding:8px 10px 6px;border:0;border-top:1px solid rgba(122,156,198,.35);
  background:none;font-family:inherit;font-size:11px;font-weight:700;
  color:#123A6E;text-align:left;cursor:pointer;
}
.ct-grupo:first-child{border-top:0}
.ct-grupo .flecha{
  width:9px;height:9px;flex:none;display:block;
  transition:transform .16s ease;
}
.ct-grupo.abierto .flecha{transform:rotate(90deg)}
.ct-grupo .cuantos{margin-left:auto;font-weight:400;color:#7A8CA6}

.ct-platos{display:none;padding:0 10px 8px}
.ct-grupo.abierto + .ct-platos{display:block}

/* El renglón de siempre: nombre, línea de puntos, precio. Se lee de un
   vistazo aunque el nombre sea largo. */
.ct-plato{
  display:flex;align-items:baseline;gap:5px;
  padding:5px 0;border-bottom:1px dotted rgba(122,156,198,.5);
}
.ct-plato:last-child{border-bottom:0}
.ct-plato .nom{color:#0A0A0A}
.ct-plato .pts{
  flex:1;min-width:14px;height:0;align-self:flex-end;margin-bottom:3px;
  border-bottom:1px dotted #9FB4CE;
}
.ct-plato .precio{flex:none;font-weight:700;color:#123A6E;font-variant-numeric:tabular-nums}
.ct-plato .nota{display:block;color:#7A8CA6;font-size:10px;margin-top:1px}


@media (max-width:640px){
  .ct-tab{font-size:12px;padding:9px 6px 8px}
  .ct-grupo{padding:11px 12px 9px;font-size:12px}
  .ct-platos{padding:0 12px 10px}
  .ct-plato{padding:7px 0}
  .plato .nom,.ct-plato .precio{font-size:12px}
}